quirk-ui 0.1.147 → 0.1.149

package/dist/core/components/Modal/Modal.test.cjs

@@ -1 +1 @@
-"use strict";const t=require("react/jsx-runtime"),e=require("../../../react.esm-C_9Ma9mj.cjs"),o=require("./index.cjs");require("../../../index-CW_Ehh1q.cjs");e.describe("Modal",()=>{e.beforeEach(()=>{document.body.innerHTML=""}),e.describe("Rendering",()=>{e.it("renders the trigger button",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.globalExpect(e.screen.getByRole("button",{name:"Open Modal"})).toBeInTheDocument()}),e.it("does not render the modal content initially",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()}),e.it("renders the modal content when the trigger is clicked",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})}));const n=e.screen.getByRole("button",{name:"Open Modal"});e.fireEvent.click(n),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()})}),e.describe("Sizes",()=>{e.it("applies small size",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,size:"sm"}));const n=document.querySelector(".modalContentContainer");e.globalExpect(n).toHaveClass("size-sm")}),e.it("applies medium size by default",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0}));const n=document.querySelector(".modalContentContainer");e.globalExpect(n).toHaveClass("size-md")}),e.it("applies large size",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,size:"lg"}));const n=document.querySelector(".modalContentContainer");e.globalExpect(n).toHaveClass("size-lg")})}),e.describe("Title",()=>{e.it("renders title when provided",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),title:"Modal Title",isOpen:!0})),e.globalExpect(e.screen.getByText("Modal Title")).toBeInTheDocument()}),e.it("does not render title when not provided",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0}));const n=document.querySelector(".title");e.globalExpect(n).not.toBeInTheDocument()})}),e.describe("Close Button",()=>{e.it("shows close button by default",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(e.screen.getByRole("button",{name:/close/i})).toBeInTheDocument()}),e.it("hides close button when showCloseButton is false",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,showCloseButton:!1})),e.globalExpect(e.screen.queryByRole("button",{name:/close/i})).not.toBeInTheDocument()}),e.it("closes the modal when close button is clicked",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})}));const n=e.screen.getByRole("button",{name:"Open Modal"});e.fireEvent.click(n),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument();const l=e.screen.getByRole("button",{name:/close/i});e.fireEvent.click(l),e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()})}),e.describe("Overlay Click",()=>{e.it("closes the modal when clicking overlay by default",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})}));const n=e.screen.getByRole("button",{name:"Open Modal"});e.fireEvent.click(n),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument();const l=document.querySelector(".overlay");e.fireEvent.click(l),e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()}),e.it("does not close when clicking overlay if closeOnOverlayClick is false",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),closeOnOverlayClick:!1}));const n=e.screen.getByRole("button",{name:"Open Modal"});e.fireEvent.click(n),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument();const l=document.querySelector(".overlay");e.fireEvent.click(l),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()}),e.it("does not close when clicking modal content",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})}));const n=e.screen.getByRole("button",{name:"Open Modal"});e.fireEvent.click(n);const l=e.screen.getByText("Modal Content");e.fireEvent.click(l),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()})}),e.describe("Escape Key",()=>{e.it("closes modal on Escape key by default",async()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})}));const n=e.screen.getByRole("button",{name:"Open Modal"});e.fireEvent.click(n),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument(),e.fireEvent.keyDown(document,{key:"Escape"}),await e.waitForWrapper(()=>{e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()})}),e.it("does not close on Escape if closeOnEscape is false",async()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),closeOnEscape:!1}));const n=e.screen.getByRole("button",{name:"Open Modal"});e.fireEvent.click(n),e.fireEvent.keyDown(document,{key:"Escape"}),await e.waitForWrapper(()=>{e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()})})}),e.describe("Controlled Mode",()=>{e.it("handles controlled open state",()=>{const{rerender:n}=e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),isOpen:!1}));e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument(),n(t.jsx(o.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),isOpen:!0})),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()}),e.it("calls onOpen when trigger is clicked in controlled mode",()=>{const n=e.vi.fn();e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!1,onOpen:n}));const l=e.screen.getByRole("button",{name:"Open"});e.fireEvent.click(l),e.globalExpect(n).toHaveBeenCalled()}),e.it("calls onClose when close button is clicked in controlled mode",()=>{const n=e.vi.fn();e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,onClose:n}));const l=e.screen.getByRole("button",{name:/close/i});e.fireEvent.click(l),e.globalExpect(n).toHaveBeenCalled()})}),e.describe("Accessibility",()=>{e.it("has dialog role",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(e.screen.getByRole("dialog")).toBeInTheDocument()}),e.it("has aria-modal attribute",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0}));const n=e.screen.getByRole("dialog");e.globalExpect(n).toHaveAttribute("aria-modal","true")}),e.it("links title with aria-labelledby",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),title:"My Modal",isOpen:!0}));const n=e.screen.getByRole("dialog");e.globalExpect(n).toHaveAttribute("aria-labelledby","modal-title"),e.globalExpect(e.screen.getByText("My Modal")).toHaveAttribute("id","modal-title")})}),e.describe("Custom Styling",()=>{e.it("applies custom className to modal",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),className:"custom-modal",isOpen:!0}));const n=document.querySelector(".modal");e.globalExpect(n).toHaveClass("custom-modal")}),e.it("applies custom className to overlay",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),overlayClassName:"custom-overlay",isOpen:!0}));const n=document.querySelector(".overlay");e.globalExpect(n).toHaveClass("custom-overlay")}),e.it("applies custom inline styles",()=>{e.render(t.jsx(o.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),style:{maxWidth:"500px"},isOpen:!0}));const n=document.querySelector(".modal");e.globalExpect(n.style.maxWidth).toBe("500px")})})});
+"use strict";const t=require("react/jsx-runtime"),e=require("../../../react.esm-C_9Ma9mj.cjs"),n=require("./index.cjs");require("../../../index-CW_Ehh1q.cjs");e.describe("Modal",()=>{e.beforeEach(()=>{document.body.innerHTML=""}),e.describe("Rendering",()=>{e.it("renders the trigger button",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.globalExpect(e.screen.getByRole("button",{name:"Open Modal"})).toBeInTheDocument()}),e.it("does not render modal content initially",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()}),e.it("renders modal content when trigger is clicked",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()})}),e.describe("Rich text + form render props",()=>{e.it("renders rich text via renderRichText when richTextBlocks provided",()=>{const o=[{_type:"block",_key:"a"}],r=e.vi.fn(()=>t.jsx("p",{children:"Rich text content"}));e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,richTextBlocks:o,renderRichText:r})),e.globalExpect(r).toHaveBeenCalledWith({blocks:o}),e.globalExpect(e.screen.getByText("Rich text content")).toBeInTheDocument()}),e.it("renders rich text inside .intro wrapper",()=>{const o=[{_type:"block",_key:"a"}];e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,richTextBlocks:o,renderRichText:()=>t.jsx("p",{children:"Intro text"})})),e.globalExpect(document.querySelector(".intro")).toBeInTheDocument()}),e.it("renders form via renderForm when formData provided",()=>{const o={_id:"form-1",heading:"Contact"},r=e.vi.fn(()=>t.jsx("form",{"data-testid":"the-form"}));e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,formData:o,renderForm:r})),e.globalExpect(r).toHaveBeenCalledWith(o),e.globalExpect(e.screen.getByTestId("the-form")).toBeInTheDocument()}),e.it("renders both rich text and form together",()=>{const o=[{_type:"block",_key:"a"}],r={_id:"form-1"};e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,richTextBlocks:o,renderRichText:()=>t.jsx("p",{children:"Intro"}),formData:r,renderForm:()=>t.jsx("form",{"data-testid":"form"})})),e.globalExpect(e.screen.getByText("Intro")).toBeInTheDocument(),e.globalExpect(e.screen.getByTestId("form")).toBeInTheDocument(),e.globalExpect(document.querySelector(".intro")).toBeInTheDocument()}),e.it("explicit content prop takes priority over render props",()=>{const o=[{_type:"block",_key:"a"}],r=e.vi.fn(()=>t.jsx("p",{children:"Should not render"}));e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,content:t.jsx("p",{children:"Explicit content"}),richTextBlocks:o,renderRichText:r})),e.globalExpect(e.screen.getByText("Explicit content")).toBeInTheDocument(),e.globalExpect(r).not.toHaveBeenCalled()}),e.it("does not render intro when richTextBlocks is empty",()=>{e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,richTextBlocks:[],renderRichText:()=>t.jsx("p",{children:"Should not render"})})),e.globalExpect(document.querySelector(".intro")).not.toBeInTheDocument()})}),e.describe("Sizes",()=>{e.it("applies small size",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,size:"sm"})),e.globalExpect(document.querySelector(".container")).toHaveClass("size-sm")}),e.it("applies medium size by default",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(document.querySelector(".container")).toHaveClass("size-md")}),e.it("applies large size",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,size:"lg"})),e.globalExpect(document.querySelector(".container")).toHaveClass("size-lg")})}),e.describe("Title",()=>{e.it("renders title when provided",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),title:"Modal Title",isOpen:!0})),e.globalExpect(e.screen.getByText("Modal Title")).toBeInTheDocument()}),e.it("does not render title when not provided",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(document.querySelector(".title")).not.toBeInTheDocument()}),e.it("sets id on title for aria-labelledby",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),title:"My Modal",isOpen:!0})),e.globalExpect(e.screen.getByText("My Modal")).toHaveAttribute("id","modal-title")})}),e.describe("Close Button",()=>{e.it("shows close button by default",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(e.screen.getByRole("button",{name:/close/i})).toBeInTheDocument()}),e.it("hides close button when showCloseButton is false",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,showCloseButton:!1})),e.globalExpect(e.screen.queryByRole("button",{name:/close/i})).not.toBeInTheDocument()}),e.it("closes modal when close button is clicked",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument(),e.fireEvent.click(e.screen.getByRole("button",{name:/close/i})),e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()})}),e.describe("Overlay Click",()=>{e.it("closes modal when clicking overlay by default",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.fireEvent.click(document.querySelector(".overlay")),e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()}),e.it("does not close when closeOnOverlayClick is false",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),closeOnOverlayClick:!1})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.fireEvent.click(document.querySelector(".overlay")),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()}),e.it("does not close when clicking modal content",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.fireEvent.click(e.screen.getByText("Modal Content")),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()})}),e.describe("Escape Key",()=>{e.it("closes modal on Escape key by default",async()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.fireEvent.keyDown(document,{key:"Escape"}),await e.waitForWrapper(()=>{e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()})}),e.it("does not close on Escape if closeOnEscape is false",async()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),closeOnEscape:!1})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.fireEvent.keyDown(document,{key:"Escape"}),await e.waitForWrapper(()=>{e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()})})}),e.describe("Controlled Mode",()=>{e.it("respects controlled open state",()=>{const{rerender:o}=e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),isOpen:!1}));e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument(),o(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),isOpen:!0})),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()}),e.it("calls onOpen when trigger is clicked in controlled mode",()=>{const o=e.vi.fn();e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!1,onOpen:o})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open"})),e.globalExpect(o).toHaveBeenCalled()}),e.it("calls onClose when close button is clicked in controlled mode",()=>{const o=e.vi.fn();e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,onClose:o})),e.fireEvent.click(e.screen.getByRole("button",{name:/close/i})),e.globalExpect(o).toHaveBeenCalled()})}),e.describe("Accessibility",()=>{e.it("has dialog role",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(e.screen.getByRole("dialog")).toBeInTheDocument()}),e.it("has aria-modal attribute",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(e.screen.getByRole("dialog")).toHaveAttribute("aria-modal","true")}),e.it("links title with aria-labelledby",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),title:"My Modal",isOpen:!0})),e.globalExpect(e.screen.getByRole("dialog")).toHaveAttribute("aria-labelledby","modal-title")})}),e.describe("Custom Styling",()=>{e.it("applies custom className to modal",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),className:"custom-modal",isOpen:!0})),e.globalExpect(document.querySelector(".modal")).toHaveClass("custom-modal")}),e.it("applies custom className to overlay",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),overlayClassName:"custom-overlay",isOpen:!0})),e.globalExpect(document.querySelector(".overlay")).toHaveClass("custom-overlay")}),e.it("applies custom inline styles",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),style:{maxWidth:"500px"},isOpen:!0})),e.globalExpect(document.querySelector(".modal").style.maxWidth).toBe("500px")})})});

package/dist/core/components/Modal/Modal.test.mjs

@@ -1,51 +1,129 @@
 import { jsx as e } from "react/jsx-runtime";
-import { d as a, b as g, i, r as c, g as o, s as n, f as r, w as s, v as u } from "../../../react.esm-DjxyacK8.js";
-import { Modal as l } from "./index.mjs";
+import { d, b as h, i as r, r as l, g as t, s as n, f as c, v as s, w as u } from "../../../react.esm-DjxyacK8.js";
+import { Modal as o } from "./index.mjs";
 import "../../../index-DPGXWTtt.js";
-a("Modal", () => {
-  g(() => {
+d("Modal", () => {
+  h(() => {
     document.body.innerHTML = "";
-  }), a("Rendering", () => {
-    i("renders the trigger button", () => {
-      c(
+  }), d("Rendering", () => {
+    r("renders the trigger button", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      ), o(
+      ), t(
         n.getByRole("button", { name: "Open Modal" })
       ).toBeInTheDocument();
-    }), i("does not render the modal content initially", () => {
-      c(
+    }), r("does not render modal content initially", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      ), o(n.queryByText("Modal Content")).not.toBeInTheDocument();
-    }), i("renders the modal content when the trigger is clicked", () => {
-      c(
+      ), t(n.queryByText("Modal Content")).not.toBeInTheDocument();
+    }), r("renders modal content when trigger is clicked", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      );
-      const t = n.getByRole("button", { name: "Open Modal" });
-      r.click(t), o(n.getByText("Modal Content")).toBeInTheDocument();
+      ), c.click(n.getByRole("button", { name: "Open Modal" })), t(n.getByText("Modal Content")).toBeInTheDocument();
+    });
+  }), d("Rich text + form render props", () => {
+    r("renders rich text via renderRichText when richTextBlocks provided", () => {
+      const i = [{ _type: "block", _key: "a" }], a = s.fn(() => /* @__PURE__ */ e("p", { children: "Rich text content" }));
+      l(
+        /* @__PURE__ */ e(
+          o,
+          {
+            trigger: /* @__PURE__ */ e("button", { children: "Open" }),
+            isOpen: !0,
+            richTextBlocks: i,
+            renderRichText: a
+          }
+        )
+      ), t(a).toHaveBeenCalledWith({ blocks: i }), t(n.getByText("Rich text content")).toBeInTheDocument();
+    }), r("renders rich text inside .intro wrapper", () => {
+      l(
+        /* @__PURE__ */ e(
+          o,
+          {
+            trigger: /* @__PURE__ */ e("button", { children: "Open" }),
+            isOpen: !0,
+            richTextBlocks: [{ _type: "block", _key: "a" }],
+            renderRichText: () => /* @__PURE__ */ e("p", { children: "Intro text" })
+          }
+        )
+      ), t(document.querySelector(".intro")).toBeInTheDocument();
+    }), r("renders form via renderForm when formData provided", () => {
+      const i = { _id: "form-1", heading: "Contact" }, a = s.fn(() => /* @__PURE__ */ e("form", { "data-testid": "the-form" }));
+      l(
+        /* @__PURE__ */ e(
+          o,
+          {
+            trigger: /* @__PURE__ */ e("button", { children: "Open" }),
+            isOpen: !0,
+            formData: i,
+            renderForm: a
+          }
+        )
+      ), t(a).toHaveBeenCalledWith(i), t(n.getByTestId("the-form")).toBeInTheDocument();
+    }), r("renders both rich text and form together", () => {
+      l(
+        /* @__PURE__ */ e(
+          o,
+          {
+            trigger: /* @__PURE__ */ e("button", { children: "Open" }),
+            isOpen: !0,
+            richTextBlocks: [{ _type: "block", _key: "a" }],
+            renderRichText: () => /* @__PURE__ */ e("p", { children: "Intro" }),
+            formData: { _id: "form-1" },
+            renderForm: () => /* @__PURE__ */ e("form", { "data-testid": "form" })
+          }
+        )
+      ), t(n.getByText("Intro")).toBeInTheDocument(), t(n.getByTestId("form")).toBeInTheDocument(), t(document.querySelector(".intro")).toBeInTheDocument();
+    }), r("explicit content prop takes priority over render props", () => {
+      const i = [{ _type: "block", _key: "a" }], a = s.fn(() => /* @__PURE__ */ e("p", { children: "Should not render" }));
+      l(
+        /* @__PURE__ */ e(
+          o,
+          {
+            trigger: /* @__PURE__ */ e("button", { children: "Open" }),
+            isOpen: !0,
+            content: /* @__PURE__ */ e("p", { children: "Explicit content" }),
+            richTextBlocks: i,
+            renderRichText: a
+          }
+        )
+      ), t(n.getByText("Explicit content")).toBeInTheDocument(), t(a).not.toHaveBeenCalled();
+    }), r("does not render intro when richTextBlocks is empty", () => {
+      l(
+        /* @__PURE__ */ e(
+          o,
+          {
+            trigger: /* @__PURE__ */ e("button", { children: "Open" }),
+            isOpen: !0,
+            richTextBlocks: [],
+            renderRichText: () => /* @__PURE__ */ e("p", { children: "Should not render" })
+          }
+        )
+      ), t(document.querySelector(".intro")).not.toBeInTheDocument();
     });
-  }), a("Sizes", () => {
-    i("applies small size", () => {
-      c(
+  }), d("Sizes", () => {
+    r("applies small size", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
@@ -53,26 +131,22 @@ a("Modal", () => {
             size: "sm"
           }
         )
-      );
-      const t = document.querySelector(".modalContentContainer");
-      o(t).toHaveClass("size-sm");
-    }), i("applies medium size by default", () => {
-      c(
+      ), t(document.querySelector(".container")).toHaveClass("size-sm");
+    }), r("applies medium size by default", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
             isOpen: !0
           }
         )
-      );
-      const t = document.querySelector(".modalContentContainer");
-      o(t).toHaveClass("size-md");
-    }), i("applies large size", () => {
-      c(
+      ), t(document.querySelector(".container")).toHaveClass("size-md");
+    }), r("applies large size", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
@@ -80,15 +154,13 @@ a("Modal", () => {
             size: "lg"
           }
         )
-      );
-      const t = document.querySelector(".modalContentContainer");
-      o(t).toHaveClass("size-lg");
+      ), t(document.querySelector(".container")).toHaveClass("size-lg");
     });
-  }), a("Title", () => {
-    i("renders title when provided", () => {
-      c(
+  }), d("Title", () => {
+    r("renders title when provided", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
@@ -96,39 +168,49 @@ a("Modal", () => {
             isOpen: !0
           }
         )
-      ), o(n.getByText("Modal Title")).toBeInTheDocument();
-    }), i("does not render title when not provided", () => {
-      c(
+      ), t(n.getByText("Modal Title")).toBeInTheDocument();
+    }), r("does not render title when not provided", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
             isOpen: !0
           }
         )
-      );
-      const t = document.querySelector(".title");
-      o(t).not.toBeInTheDocument();
+      ), t(document.querySelector(".title")).not.toBeInTheDocument();
+    }), r("sets id on title for aria-labelledby", () => {
+      l(
+        /* @__PURE__ */ e(
+          o,
+          {
+            content: /* @__PURE__ */ e("div", { children: "Content" }),
+            trigger: /* @__PURE__ */ e("button", { children: "Open" }),
+            title: "My Modal",
+            isOpen: !0
+          }
+        )
+      ), t(n.getByText("My Modal")).toHaveAttribute("id", "modal-title");
     });
-  }), a("Close Button", () => {
-    i("shows close button by default", () => {
-      c(
+  }), d("Close Button", () => {
+    r("shows close button by default", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
             isOpen: !0
           }
         )
-      ), o(
+      ), t(
         n.getByRole("button", { name: /close/i })
       ).toBeInTheDocument();
-    }), i("hides close button when showCloseButton is false", () => {
-      c(
+    }), r("hides close button when showCloseButton is false", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
@@ -136,105 +218,85 @@ a("Modal", () => {
             showCloseButton: !1
           }
         )
-      ), o(
+      ), t(
         n.queryByRole("button", { name: /close/i })
       ).not.toBeInTheDocument();
-    }), i("closes the modal when close button is clicked", () => {
-      c(
+    }), r("closes modal when close button is clicked", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      );
-      const t = n.getByRole("button", { name: "Open Modal" });
-      r.click(t), o(n.getByText("Modal Content")).toBeInTheDocument();
-      const d = n.getByRole("button", { name: /close/i });
-      r.click(d), o(n.queryByText("Modal Content")).not.toBeInTheDocument();
+      ), c.click(n.getByRole("button", { name: "Open Modal" })), t(n.getByText("Modal Content")).toBeInTheDocument(), c.click(n.getByRole("button", { name: /close/i })), t(n.queryByText("Modal Content")).not.toBeInTheDocument();
     });
-  }), a("Overlay Click", () => {
-    i("closes the modal when clicking overlay by default", () => {
-      c(
+  }), d("Overlay Click", () => {
+    r("closes modal when clicking overlay by default", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      );
-      const t = n.getByRole("button", { name: "Open Modal" });
-      r.click(t), o(n.getByText("Modal Content")).toBeInTheDocument();
-      const d = document.querySelector(".overlay");
-      r.click(d), o(n.queryByText("Modal Content")).not.toBeInTheDocument();
-    }), i("does not close when clicking overlay if closeOnOverlayClick is false", () => {
-      c(
+      ), c.click(n.getByRole("button", { name: "Open Modal" })), c.click(document.querySelector(".overlay")), t(n.queryByText("Modal Content")).not.toBeInTheDocument();
+    }), r("does not close when closeOnOverlayClick is false", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" }),
             closeOnOverlayClick: !1
           }
         )
-      );
-      const t = n.getByRole("button", { name: "Open Modal" });
-      r.click(t), o(n.getByText("Modal Content")).toBeInTheDocument();
-      const d = document.querySelector(".overlay");
-      r.click(d), o(n.getByText("Modal Content")).toBeInTheDocument();
-    }), i("does not close when clicking modal content", () => {
-      c(
+      ), c.click(n.getByRole("button", { name: "Open Modal" })), c.click(document.querySelector(".overlay")), t(n.getByText("Modal Content")).toBeInTheDocument();
+    }), r("does not close when clicking modal content", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      );
-      const t = n.getByRole("button", { name: "Open Modal" });
-      r.click(t);
-      const d = n.getByText("Modal Content");
-      r.click(d), o(n.getByText("Modal Content")).toBeInTheDocument();
+      ), c.click(n.getByRole("button", { name: "Open Modal" })), c.click(n.getByText("Modal Content")), t(n.getByText("Modal Content")).toBeInTheDocument();
     });
-  }), a("Escape Key", () => {
-    i("closes modal on Escape key by default", async () => {
-      c(
+  }), d("Escape Key", () => {
+    r("closes modal on Escape key by default", async () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      );
-      const t = n.getByRole("button", { name: "Open Modal" });
-      r.click(t), o(n.getByText("Modal Content")).toBeInTheDocument(), r.keyDown(document, { key: "Escape" }), await s(() => {
-        o(n.queryByText("Modal Content")).not.toBeInTheDocument();
+      ), c.click(n.getByRole("button", { name: "Open Modal" })), c.keyDown(document, { key: "Escape" }), await u(() => {
+        t(n.queryByText("Modal Content")).not.toBeInTheDocument();
       });
-    }), i("does not close on Escape if closeOnEscape is false", async () => {
-      c(
+    }), r("does not close on Escape if closeOnEscape is false", async () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" }),
             closeOnEscape: !1
           }
         )
-      );
-      const t = n.getByRole("button", { name: "Open Modal" });
-      r.click(t), r.keyDown(document, { key: "Escape" }), await s(() => {
-        o(n.getByText("Modal Content")).toBeInTheDocument();
+      ), c.click(n.getByRole("button", { name: "Open Modal" })), c.keyDown(document, { key: "Escape" }), await u(() => {
+        t(n.getByText("Modal Content")).toBeInTheDocument();
       });
     });
-  }), a("Controlled Mode", () => {
-    i("handles controlled open state", () => {
-      const { rerender: t } = c(
+  }), d("Controlled Mode", () => {
+    r("respects controlled open state", () => {
+      const { rerender: i } = l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" }),
@@ -242,76 +304,70 @@ a("Modal", () => {
           }
         )
       );
-      o(n.queryByText("Modal Content")).not.toBeInTheDocument(), t(
+      t(n.queryByText("Modal Content")).not.toBeInTheDocument(), i(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" }),
             isOpen: !0
           }
         )
-      ), o(n.getByText("Modal Content")).toBeInTheDocument();
-    }), i("calls onOpen when trigger is clicked in controlled mode", () => {
-      const t = u.fn();
-      c(
+      ), t(n.getByText("Modal Content")).toBeInTheDocument();
+    }), r("calls onOpen when trigger is clicked in controlled mode", () => {
+      const i = s.fn();
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
             isOpen: !1,
-            onOpen: t
+            onOpen: i
           }
         )
-      );
-      const d = n.getByRole("button", { name: "Open" });
-      r.click(d), o(t).toHaveBeenCalled();
-    }), i("calls onClose when close button is clicked in controlled mode", () => {
-      const t = u.fn();
-      c(
+      ), c.click(n.getByRole("button", { name: "Open" })), t(i).toHaveBeenCalled();
+    }), r("calls onClose when close button is clicked in controlled mode", () => {
+      const i = s.fn();
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
             isOpen: !0,
-            onClose: t
+            onClose: i
           }
         )
-      );
-      const d = n.getByRole("button", { name: /close/i });
-      r.click(d), o(t).toHaveBeenCalled();
+      ), c.click(n.getByRole("button", { name: /close/i })), t(i).toHaveBeenCalled();
     });
-  }), a("Accessibility", () => {
-    i("has dialog role", () => {
-      c(
+  }), d("Accessibility", () => {
+    r("has dialog role", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
             isOpen: !0
           }
         )
-      ), o(n.getByRole("dialog")).toBeInTheDocument();
-    }), i("has aria-modal attribute", () => {
-      c(
+      ), t(n.getByRole("dialog")).toBeInTheDocument();
+    }), r("has aria-modal attribute", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
             isOpen: !0
           }
         )
-      );
-      const t = n.getByRole("dialog");
-      o(t).toHaveAttribute("aria-modal", "true");
-    }), i("links title with aria-labelledby", () => {
-      c(
+      ), t(n.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
+    }), r("links title with aria-labelledby", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
@@ -319,15 +375,16 @@ a("Modal", () => {
             isOpen: !0
           }
         )
+      ), t(n.getByRole("dialog")).toHaveAttribute(
+        "aria-labelledby",
+        "modal-title"
       );
-      const t = n.getByRole("dialog");
-      o(t).toHaveAttribute("aria-labelledby", "modal-title"), o(n.getByText("My Modal")).toHaveAttribute("id", "modal-title");
     });
-  }), a("Custom Styling", () => {
-    i("applies custom className to modal", () => {
-      c(
+  }), d("Custom Styling", () => {
+    r("applies custom className to modal", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
@@ -335,13 +392,11 @@ a("Modal", () => {
             isOpen: !0
           }
         )
-      );
-      const t = document.querySelector(".modal");
-      o(t).toHaveClass("custom-modal");
-    }), i("applies custom className to overlay", () => {
-      c(
+      ), t(document.querySelector(".modal")).toHaveClass("custom-modal");
+    }), r("applies custom className to overlay", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
@@ -349,13 +404,11 @@ a("Modal", () => {
             isOpen: !0
           }
         )
-      );
-      const t = document.querySelector(".overlay");
-      o(t).toHaveClass("custom-overlay");
-    }), i("applies custom inline styles", () => {
-      c(
+      ), t(document.querySelector(".overlay")).toHaveClass("custom-overlay");
+    }), r("applies custom inline styles", () => {
+      l(
         /* @__PURE__ */ e(
-          l,
+          o,
           {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
@@ -363,9 +416,9 @@ a("Modal", () => {
             isOpen: !0
           }
         )
-      );
-      const t = document.querySelector(".modal");
-      o(t.style.maxWidth).toBe("500px");
+      ), t(
+        document.querySelector(".modal").style.maxWidth
+      ).toBe("500px");
     });
   });
 });