<button
  type="button"
  class="btn btn-primary"
  data-sp-toggle="dialog"
  data-sp-target="#dialog-4"
>
  Share
</button>
<dialog
  id="dialog-4"
  class="dialog"
  aria-labelledby="dialog-4-title"
  aria-describedby="dialog-4-description"
>
  <div class="dialog-backdrop"></div>
  <div class="dialog-panel">
    <button
      type="button"
      class="btn btn-ghost btn-icon-xs absolute top-3 right-3"
      aria-label="Close"
      data-sp-dismiss="dialog"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
    </button>
    <div class="dialog-content grid gap-6">
      <div>
        <h2 id="dialog-4-title" class="text-lg font-semibold tracking-tight">
          Share project
        </h2>
        <p
          id="dialog-4-description"
          class="text-sm/6 text-muted-foreground mt-2"
        >
          Invite people to collaborate on this project.
        </p>
      </div>
      <div class="flex gap-2">
        <input
          type="email"
          class="input flex-1"
          placeholder="Add people by email"
        />
        <button type="button" class="btn">Invite</button>
      </div>
      <div class="separator"></div>
      <div class="grid gap-4">
        <span class="text-sm font-medium">People with access</span>
        <div class="flex items-center justify-between gap-4">
          <div class="flex items-center gap-3">
            <img
              class="avatar"
              src="https://cdn.gufo.dev/stockphotos/1c7a7245.webp"
              alt="Sarah Johnson"
            />
            <div class="text-sm">
              <p class="font-semibold text-foreground">Sarah Johnson</p>
              <p class="text-muted-foreground">[email protected]</p>
            </div>
          </div>
          <select class="select h-8 w-24">
            <option value="owner" selected="">Owner</option>
            <option value="editor">Editor</option>
            <option value="viewer">Viewer</option>
          </select>
        </div>
        <div class="flex items-center justify-between gap-4">
          <div class="flex items-center gap-3">
            <img
              class="avatar"
              src="https://cdn.gufo.dev/stockphotos/7bd8889a.webp"
              alt="Michael Chen"
            />
            <div class="text-sm">
              <p class="font-semibold text-foreground">Michael Chen</p>
              <p class="text-muted-foreground">[email protected]</p>
            </div>
          </div>
          <select class="select h-8 w-24">
            <option value="editor" selected="">Editor</option>
            <option value="viewer">Viewer</option>
          </select>
        </div>
        <div class="flex items-center justify-between gap-4">
          <div class="flex items-center gap-3">
            <img
              class="avatar"
              src="https://cdn.gufo.dev/stockphotos/a8a338c1.webp"
              alt="Emma Wilson"
            />
            <div class="text-sm">
              <p class="font-semibold text-foreground">Emma Wilson</p>
              <p class="text-muted-foreground">[email protected]</p>
            </div>
          </div>
          <select class="select h-8 w-24">
            <option value="viewer" selected="">Viewer</option>
            <option value="editor">Editor</option>
          </select>
        </div>
      </div>
      <button type="button" class="btn btn-primary" data-sp-dismiss="dialog">
        Done
      </button>
    </div>
  </div>
</dialog>