---interface Props {  variant?: "solid" | "left-bordered";  dismissible?: boolean;  class?: string;} const {  variant = "solid",  dismissible = false,  class: className = "",} = Astro.props; const variantClasses = {  solid: "bg-black-onyx text-white-ghost",  "left-bordered": "bg-black-onyx/5 border-l-4 border-black-onyx text-black-onyx",};--- <div class={`alert relative flex items-start gap-3 px-4 py-3 rounded ${variantClasses[variant]} ${className}`} role="alert">  <div class="flex-1 text-sm">    <slot />  </div>  {dismissible && (    <button class="alert-close shrink-0 text-current/60 hover:text-current transition-colors" aria-label="Close">      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256">        <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>      </svg>    </button>  )}</div>   <script>  document.querySelectorAll(".alert-close").forEach((btn) => {    btn.addEventListener("click", () => {      const alert = btn.closest(".alert");      alert?.remove();    });  });</script> 
    
  

    
      <Alert variant="solid">  This is a solid alert message.</Alert>
    
  

    
      <Alert variant="left-bordered">  This is a left-bordered alert message.</Alert>
    
  

    
      <Alert variant="solid" dismissible>  You can close this alert.</Alert>