Alert

<div class="grid w-full max-w-xl items-start gap-4">
  <c-alert>
    <svg
      slot="icon"
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <circle cx="12" cy="12" r="10" />
      <path d="m9 12 2 2 4-4" />
    </svg>
    <c-alert-title>Success! Your changes have been saved</c-alert-title>
    <c-alert-description
      >This is an alert with icon, title and description.</c-alert-description
    >
  </c-alert>
  <c-alert>
    <svg
      slot="icon"
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="M18 8h1a4 4 0 0 1 0 8h-1" />
      <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" />
      <line x1="6" x2="6.01" y1="1" y2="4" />
      <line x1="10" x2="10.01" y1="1" y2="4" />
      <line x1="14" x2="14.01" y1="1" y2="4" />
    </svg>
    <c-alert-title
      >This Alert has a title and an icon. No description.</c-alert-title
    >
  </c-alert>
  <c-alert variant="destructive">
    <svg
      slot="icon"
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <circle cx="12" cy="12" r="10" />
      <line x1="12" x2="12" y1="8" y2="12" />
      <line x1="12" x2="12.01" y1="16" y2="16" />
    </svg>
    <c-alert-title>Unable to process your payment.</c-alert-title>
    <c-alert-description variant="destructive">
      <p>Please verify your billing information and try again.</p>
      <ul class="list-inside list-disc text-sm">
        <li>Check your card details</li>
        <li>Ensure sufficient funds</li>
        <li>Verify billing address</li>
      </ul>
    </c-alert-description>
  </c-alert>
</div>