Alert

<div class="grid place-content-center gap-4">
    <twig:ui:Alert>
        <twig:ux:icon name="lucide:info" />
        <div>
            <h4 class="font-semibold">Heads up!</h4>
            <p class="text-sm">You can add components to your app using the cli.</p>
        </div>
    </twig:ui:Alert>
</div>

<div class="grid place-content-center gap-4">
    <twig:ui:Alert variant="destructive">
        <twig:ux:icon name="lucide:alert-circle" />
        <div>
            <h4 class="font-semibold">Error</h4>
            <p class="text-sm">Your session has expired. Please log in again.</p>
        </div>
    </twig:ui:Alert>
</div>

<div class="grid place-content-center gap-4">
    <twig:ui:Alert variant="success">
        <twig:ux:icon name="lucide:check-circle" />
        <div>
            <h4 class="font-semibold">Success</h4>
            <p class="text-sm">Your changes have been saved successfully.</p>
        </div>
    </twig:ui:Alert>
</div>

<div class="grid place-content-center gap-4">
    <twig:ui:Alert variant="warning">
        <twig:ux:icon name="lucide:alert-triangle" />
        <div>
            <h4 class="font-semibold">Warning</h4>
            <p class="text-sm">This action cannot be undone. Please proceed with caution.</p>
        </div>
    </twig:ui:Alert>
</div>

<div class="grid place-content-center gap-4">
    <twig:ui:Alert variant="info">
        <twig:ux:icon name="lucide:info" />
        <div>
            <h4 class="font-semibold">Information</h4>
            <p class="text-sm">This feature is currently in beta. Report any issues you encounter.</p>
        </div>
    </twig:ui:Alert>
</div>