---interface Props {  variant?: "solid" | "left-bordered";  dismissible?: boolean;  class?: string;} const {  variant = "solid",  dismissible = false,  class: className = "",} = Astro.props; const variantClasses = {  solid: "alert-solid",  "left-bordered": "alert-left-bordered",};--- <div class={`alert ${variantClasses[variant]} ${className}`} role="alert">  <div class="alert-content">    <slot />  </div>  {dismissible && (    <button class="alert-close" aria-label="Close">      <svg 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>