post:With Sign Up Dialog

This story threw an error after it finished rendering which means interactions may not have been executed fully.

Error: Unable to find role="button" and name "Sign Up Dialog"

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="min-h-screen bg-gray-50 p-4 sm:p-8"
  >
    <div
      class="max-w-6xl mx-auto"
    >
      <div
        class="mb-8"
      >
        <div
          class="mb-6 flex justify-between items-start"
        >
          <div>
            <h1
              class="text-3xl font-bold text-gray-900 mb-2"
            >
              Posts
            </h1>
            <p
              class="text-gray-600"
            >
              View the latest posts
            </p>
          </div>
          <div
            class="flex gap-2"
          >
            <button
              class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3"
              data-slot="button"
            >
              <svg
                aria-hidden="true"
                class="lucide lucide-loader-circle animate-spin"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M21 12a9 9 0 1 1-6.219-8.56"
                />
              </svg>
              Loading
            </button>
            <div
              class="hidden"
            >
              <button
                aria-controls="radix-_r_b_"
                aria-expanded="false"
                aria-haspopup="dialog"
                class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3"
                data-slot="dialog-trigger"
                data-state="closed"
                type="button"
              >
                Sign Up Dialog
              </button>
            </div>
            <div
              class="hidden"
            >
              <button
                aria-controls="radix-_r_e_"
                aria-expanded="false"
                aria-haspopup="dialog"
                class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3"
                data-slot="dialog-trigger"
                data-state="closed"
                type="button"
              >
                Sign Out Dialog
              </button>
            </div>
          </div>
        </div>
        <div
          class="bg-white rounded-lg border border-gray-200 p-6 shadow-sm"
        >
          <h2
            class="text-lg font-semibold text-gray-900 mb-4"
          >
            Create New Post
          </h2>
          <form>
            <div
              class="mb-4"
            >
              <textarea
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-gray-900"
                placeholder="Write your post content here..."
                rows="4"
              />
            </div>
            <div
              class="flex gap-3"
            >
              <button
                class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 h-9 px-4 py-2 has-[>svg]:px-3"
                data-slot="button"
                disabled=""
                type="submit"
              >
                Create Post
              </button>
              <button
                class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 h-9 px-4 py-2 has-[>svg]:px-3"
                data-slot="button"
                type="button"
              >
                Clear
              </button>
            </div>
          </form>
        </div>
      </div>
      <div
        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 justify-items-center"
      >
        <div
          class="min-w-0 w-full max-w-[90%] sm:max-w-full"
        >
          <div
            class="bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-200 overflow-hidden"
            data-testid="PostCard"
          >
            <div
              class="p-6"
            >
              <div
                class="flex flex-wrap items-start justify-between gap-2 mb-4 min-w-0"
                data-testid="PostCard-header"
              >
                <div
                  class="min-w-0 max-w-[65%] sm:max-w-[60%] md:max-w-full"
                >
                  <div
                    class="te...
    at waitForWrapper (https://68b4d2ddc7b859a68b164a43-sfafyetdyj.capture-loopback.chromatic.com/assets/iframe-Clv1JGk_.js:327:3553)
    at https://68b4d2ddc7b859a68b164a43-sfafyetdyj.capture-loopback.chromatic.com/assets/iframe-Clv1JGk_.js:335:286
    at W3.invoke (https://68b4d2ddc7b859a68b164a43-sfafyetdyj.capture-loopback.chromatic.com/assets/iframe-Clv1JGk_.js:219:9127)
    at W3.intercept (https://68b4d2ddc7b859a68b164a43-sfafyetdyj.capture-loopback.chromatic.com/assets/iframe-Clv1JGk_.js:219:6563)
    at W3.track (https://68b4d2ddc7b859a68b164a43-sfafyetdyj.capture-loopback.chromatic.com/assets/iframe-Clv1JGk_.js:219:6295)
    at Object.findByRole (https://68b4d2ddc7b859a68b164a43-sfafyetdyj.capture-loopback.chromatic.com/assets/iframe-Clv1JGk_.js:219:5667)
    at play (https://68b4d2ddc7b859a68b164a43-sfafyetdyj.capture-loopback.chromatic.com/assets/index.stories-D3HaO6eT.js:1:2892)
    at async g$.runPhase (https://68b4d2ddc7b859a68b164a43-sfafyetdyj.capture-loopback.chromatic.com/assets/iframe-Clv1JGk_.js:919:823)
    at async g$.render (https://68b4d2ddc7b859a68b164a43-sfafyetdyj.capture-loopback.chromatic.com/assets/iframe-Clv1JGk_.js:919:3761)