Modal

<button class="btn btn-solid color-group-primary" onclick={() => dialog.showModal()}>Open Modal</button>

<dialog bind:this={dialog} class="modal open:animate-in open:fade-in-0">
  <div class="modal-content">
    <header class="modal-header">
      <h2 class="modal-title">Confirm Deletion</h2>
      <form method="dialog">
        <button class="btn btn-ghost btn-icon color-group-neutral" aria-label="Close">
          <X size={18} />
        </button>
      </form>
    </header>

    <div class="modal-body">
      <p class="text-neutral-11">This action cannot be undone. Are you sure you want to permanently delete this file?</p>
    </div>
    <div class="modal-footer">
      <form method="dialog">
        <button class="btn btn-outlined color-group-neutral">Cancel</button>
      </form>
      <button class="btn btn-solid color-group-danger" onclick={() => dialog.close()}>Delete</button>
    </div>
  </div>
</dialog>