quirk-ui 0.1.159 → 0.1.160

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"),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")})})});
+"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("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.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.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,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-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 { d, b as h, i as r, r as l, g as t, s as n, f as i, v as s, w as u } from "../../../react.esm-DjxyacK8.js";
 import { Modal as o } from "./index.mjs";
 import "../../../index-DPGXWTtt.js";
 d("Modal", () => {
@@ -37,22 +37,22 @@ d("Modal", () => {
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      ), c.click(n.getByRole("button", { name: "Open Modal" })), t(n.getByText("Modal Content")).toBeInTheDocument();
+      ), i.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" }));
+      const c = [{ _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,
+            richTextBlocks: c,
             renderRichText: a
           }
         )
-      ), t(a).toHaveBeenCalledWith({ blocks: i }), t(n.getByText("Rich text content")).toBeInTheDocument();
+      ), t(a).toHaveBeenCalledWith({ blocks: c }), t(n.getByText("Rich text content")).toBeInTheDocument();
     }), r("renders rich text inside .intro wrapper", () => {
       l(
         /* @__PURE__ */ e(
@@ -66,18 +66,18 @@ d("Modal", () => {
         )
       ), 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" }));
+      const c = { _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,
+            formData: c,
             renderForm: a
           }
         )
-      ), t(a).toHaveBeenCalledWith(i), t(n.getByTestId("the-form")).toBeInTheDocument();
+      ), t(a).toHaveBeenCalledWith(c), t(n.getByTestId("the-form")).toBeInTheDocument();
     }), r("renders both rich text and form together", () => {
       l(
         /* @__PURE__ */ e(
@@ -93,7 +93,7 @@ d("Modal", () => {
         )
       ), 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" }));
+      const c = [{ _type: "block", _key: "a" }], a = s.fn(() => /* @__PURE__ */ e("p", { children: "Should not render" }));
       l(
         /* @__PURE__ */ e(
           o,
@@ -101,7 +101,7 @@ d("Modal", () => {
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
             isOpen: !0,
             content: /* @__PURE__ */ e("p", { children: "Explicit content" }),
-            richTextBlocks: i,
+            richTextBlocks: c,
             renderRichText: a
           }
         )
@@ -157,19 +157,7 @@ d("Modal", () => {
       ), t(document.querySelector(".container")).toHaveClass("size-lg");
     });
   }), d("Title", () => {
-    r("renders title when provided", () => {
-      l(
-        /* @__PURE__ */ e(
-          o,
-          {
-            content: /* @__PURE__ */ e("div", { children: "Content" }),
-            trigger: /* @__PURE__ */ e("button", { children: "Open" }),
-            title: "Modal Title",
-            isOpen: !0
-          }
-        )
-      ), t(n.getByText("Modal Title")).toBeInTheDocument();
-    }), r("does not render title when not provided", () => {
+    r("does not render title when not provided", () => {
       l(
         /* @__PURE__ */ e(
           o,
@@ -180,18 +168,6 @@ d("Modal", () => {
           }
         )
       ), 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");
     });
   }), d("Close Button", () => {
     r("shows close button by default", () => {
@@ -230,7 +206,7 @@ d("Modal", () => {
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      ), 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();
+      ), i.click(n.getByRole("button", { name: "Open Modal" })), t(n.getByText("Modal Content")).toBeInTheDocument(), i.click(n.getByRole("button", { name: /close/i })), t(n.queryByText("Modal Content")).not.toBeInTheDocument();
     });
   }), d("Overlay Click", () => {
     r("closes modal when clicking overlay by default", () => {
@@ -242,7 +218,7 @@ d("Modal", () => {
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      ), c.click(n.getByRole("button", { name: "Open Modal" })), c.click(document.querySelector(".overlay")), t(n.queryByText("Modal Content")).not.toBeInTheDocument();
+      ), i.click(n.getByRole("button", { name: "Open Modal" })), i.click(document.querySelector(".overlay")), t(n.queryByText("Modal Content")).not.toBeInTheDocument();
     }), r("does not close when closeOnOverlayClick is false", () => {
       l(
         /* @__PURE__ */ e(
@@ -253,7 +229,7 @@ d("Modal", () => {
             closeOnOverlayClick: !1
           }
         )
-      ), c.click(n.getByRole("button", { name: "Open Modal" })), c.click(document.querySelector(".overlay")), t(n.getByText("Modal Content")).toBeInTheDocument();
+      ), i.click(n.getByRole("button", { name: "Open Modal" })), i.click(document.querySelector(".overlay")), t(n.getByText("Modal Content")).toBeInTheDocument();
     }), r("does not close when clicking modal content", () => {
       l(
         /* @__PURE__ */ e(
@@ -263,7 +239,7 @@ d("Modal", () => {
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      ), c.click(n.getByRole("button", { name: "Open Modal" })), c.click(n.getByText("Modal Content")), t(n.getByText("Modal Content")).toBeInTheDocument();
+      ), i.click(n.getByRole("button", { name: "Open Modal" })), i.click(n.getByText("Modal Content")), t(n.getByText("Modal Content")).toBeInTheDocument();
     });
   }), d("Escape Key", () => {
     r("closes modal on Escape key by default", async () => {
@@ -275,7 +251,7 @@ d("Modal", () => {
             trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
           }
         )
-      ), c.click(n.getByRole("button", { name: "Open Modal" })), c.keyDown(document, { key: "Escape" }), await u(() => {
+      ), i.click(n.getByRole("button", { name: "Open Modal" })), i.keyDown(document, { key: "Escape" }), await u(() => {
         t(n.queryByText("Modal Content")).not.toBeInTheDocument();
       });
     }), r("does not close on Escape if closeOnEscape is false", async () => {
@@ -288,13 +264,13 @@ d("Modal", () => {
             closeOnEscape: !1
           }
         )
-      ), c.click(n.getByRole("button", { name: "Open Modal" })), c.keyDown(document, { key: "Escape" }), await u(() => {
+      ), i.click(n.getByRole("button", { name: "Open Modal" })), i.keyDown(document, { key: "Escape" }), await u(() => {
         t(n.getByText("Modal Content")).toBeInTheDocument();
       });
     });
   }), d("Controlled Mode", () => {
     r("respects controlled open state", () => {
-      const { rerender: i } = l(
+      const { rerender: c } = l(
         /* @__PURE__ */ e(
           o,
           {
@@ -304,7 +280,7 @@ d("Modal", () => {
           }
         )
       );
-      t(n.queryByText("Modal Content")).not.toBeInTheDocument(), i(
+      t(n.queryByText("Modal Content")).not.toBeInTheDocument(), c(
         /* @__PURE__ */ e(
           o,
           {
@@ -315,7 +291,7 @@ d("Modal", () => {
         )
       ), t(n.getByText("Modal Content")).toBeInTheDocument();
     }), r("calls onOpen when trigger is clicked in controlled mode", () => {
-      const i = s.fn();
+      const c = s.fn();
       l(
         /* @__PURE__ */ e(
           o,
@@ -323,12 +299,12 @@ d("Modal", () => {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
             isOpen: !1,
-            onOpen: i
+            onOpen: c
           }
         )
-      ), c.click(n.getByRole("button", { name: "Open" })), t(i).toHaveBeenCalled();
+      ), i.click(n.getByRole("button", { name: "Open" })), t(c).toHaveBeenCalled();
     }), r("calls onClose when close button is clicked in controlled mode", () => {
-      const i = s.fn();
+      const c = s.fn();
       l(
         /* @__PURE__ */ e(
           o,
@@ -336,10 +312,10 @@ d("Modal", () => {
             content: /* @__PURE__ */ e("div", { children: "Content" }),
             trigger: /* @__PURE__ */ e("button", { children: "Open" }),
             isOpen: !0,
-            onClose: i
+            onClose: c
           }
         )
-      ), c.click(n.getByRole("button", { name: /close/i })), t(i).toHaveBeenCalled();
+      ), i.click(n.getByRole("button", { name: /close/i })), t(c).toHaveBeenCalled();
     });
   }), d("Accessibility", () => {
     r("has dialog role", () => {
@@ -364,21 +340,6 @@ d("Modal", () => {
           }
         )
       ), t(n.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
-    }), r("links title with 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.getByRole("dialog")).toHaveAttribute(
-        "aria-labelledby",
-        "modal-title"
-      );
     });
   }), d("Custom Styling", () => {
     r("applies custom className to modal", () => {

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index38.css');const e=require("react/jsx-runtime"),d=require("react"),C=require("react-dom"),F=require("../../../x-Dft9NVe_.cjs"),K="_overlay_1u4kf_2",X="_fadeIn_1u4kf_1",B="_container_1u4kf_19",G="_modal_1u4kf_49",H="_slideUp_1u4kf_1",J="_closeButton_1u4kf_60",Q="_title_1u4kf_87",V="_content_1u4kf_97",W="_trigger_1u4kf_117",t={overlay:K,fadeIn:X,container:B,"size-sm":"_size-sm_1u4kf_26","size-md":"_size-md_1u4kf_30","size-lg":"_size-lg_1u4kf_34","size-xl":"_size-xl_1u4kf_38","size-full":"_size-full_1u4kf_42",modal:G,slideUp:H,closeButton:J,title:Q,content:V,trigger:W},Y=()=>{typeof document<"u"&&(document.body.style.overflow="hidden")},E=()=>{typeof document<"u"&&(document.body.style.overflow="")};function Z({content:y,trigger:p,isOpen:k,onOpen:o,onClose:i,size:$="md",closeOnEscape:g=!0,closeOnOverlayClick:w=!0,showCloseButton:N=!0,className:q,overlayClassName:S,style:I,title:_,richTextBlocks:a,renderRichText:b,formData:h,renderForm:z}){const[L,j]=d.useState(!1),m=d.useRef(null),v=k!==void 0,n=v?k:L,M=()=>{v||j(!0),o==null||o()},r=()=>{v||j(!1),i==null||i()},P=()=>n?r():M(),R=()=>{w&&r()};d.useEffect(()=>{if(!g||!n)return;const s=c=>{c.key==="Escape"&&r()};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[n,g]),d.useEffect(()=>(n?Y():E(),()=>E()),[n]),d.useEffect(()=>{if(!n||!m.current)return;const s=m.current,c=s.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),l=c[0],u=c[c.length-1],x=f=>{f.key==="Tab"&&(f.shiftKey?document.activeElement===l&&(f.preventDefault(),u==null||u.focus()):document.activeElement===u&&(f.preventDefault(),l==null||l.focus()))};return s.addEventListener("keydown",x),l==null||l.focus(),()=>s.removeEventListener("keydown",x)},[n]);const U=t[`size-${$}`]??"",D=y!==void 0?y:e.jsxs(e.Fragment,{children:[a!=null&&a.length&&b?e.jsx("div",{className:t.intro,children:b({blocks:a})}):null,h&&z?z(h):null]}),A=n?e.jsx("div",{className:`${t.overlay} ${S??""}`.trim(),onClick:R,role:"dialog","aria-modal":"true","aria-labelledby":_?"modal-title":void 0,children:e.jsxs("div",{className:`${U} ${t.container}`,children:[N&&e.jsx("button",{"aria-label":"Close",className:t.closeButton,onClick:r,type:"button",children:e.jsx(F.X,{size:20})}),e.jsxs("div",{ref:m,className:`${t.modal} ${q??""}`.trim(),style:I,onClick:s=>s.stopPropagation(),children:[_&&e.jsx("div",{className:t.title,id:"modal-title",children:_}),e.jsx("div",{className:t.content,children:D})]})]})}):null;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:t.trigger,onClick:P,children:p}),typeof window<"u"&&C.createPortal(A,document.body)]})}exports.Modal=Z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index38.css');const e=require("react/jsx-runtime"),c=require("react"),A=require("react-dom"),C=require("../../../x-Dft9NVe_.cjs"),F="_overlay_k02re_2",K="_fadeIn_k02re_1",X="_container_k02re_19",B="_modal_k02re_49",G="_slideUp_k02re_1",H="_closeButton_k02re_60",J="_title_k02re_87",Q="_content_k02re_97",V="_intro_k02re_116",W="_trigger_k02re_121",s={overlay:F,fadeIn:K,container:X,"size-sm":"_size-sm_k02re_26","size-md":"_size-md_k02re_30","size-lg":"_size-lg_k02re_34","size-xl":"_size-xl_k02re_38","size-full":"_size-full_k02re_42",modal:B,slideUp:G,closeButton:H,title:J,content:Q,intro:V,trigger:W},Y=()=>{typeof document<"u"&&(document.body.style.overflow="hidden")},E=()=>{typeof document<"u"&&(document.body.style.overflow="")};function Z({content:v,trigger:x,isOpen:y,onOpen:l,onClose:o,size:p="md",closeOnEscape:k=!0,closeOnOverlayClick:$=!0,showCloseButton:w=!0,className:N,overlayClassName:q,style:S,richTextBlocks:d,renderRichText:g,formData:b,renderForm:h}){const[I,z]=c.useState(!1),f=c.useRef(null),m=y!==void 0,t=m?y:I,L=()=>{m||z(!0),l==null||l()},a=()=>{m||z(!1),o==null||o()},M=()=>t?a():L(),P=()=>{$&&a()};c.useEffect(()=>{if(!k||!t)return;const n=i=>{i.key==="Escape"&&a()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t,k]),c.useEffect(()=>(t?Y():E(),()=>E()),[t]),c.useEffect(()=>{if(!t||!f.current)return;const n=f.current,i=n.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),r=i[0],u=i[i.length-1],j=_=>{_.key==="Tab"&&(_.shiftKey?document.activeElement===r&&(_.preventDefault(),u==null||u.focus()):document.activeElement===u&&(_.preventDefault(),r==null||r.focus()))};return n.addEventListener("keydown",j),r==null||r.focus(),()=>n.removeEventListener("keydown",j)},[t]);const R=s[`size-${p}`]??"",U=v!==void 0?v:e.jsxs(e.Fragment,{children:[d!=null&&d.length&&g?e.jsx("div",{className:s.intro,children:g({blocks:d})}):null,b&&h?h(b):null]}),D=t?e.jsx("div",{className:`${s.overlay} ${q??""}`.trim(),onClick:P,role:"dialog","aria-modal":"true",children:e.jsxs("div",{className:`${R} ${s.container}`,children:[w&&e.jsx("button",{"aria-label":"Close",className:s.closeButton,onClick:a,type:"button",children:e.jsx(C.X,{size:20})}),e.jsx("div",{ref:f,className:`${s.modal} ${N??""}`.trim(),style:S,onClick:n=>n.stopPropagation(),children:e.jsx("div",{className:s.content,children:U})})]})}):null;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.trigger,onClick:M,children:x}),typeof window<"u"&&A.createPortal(D,document.body)]})}exports.Modal=Z;

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

@@ -1,111 +1,108 @@
-import { jsxs as f, Fragment as N, jsx as o } from "react/jsx-runtime";
-import { useState as X, useRef as B, useEffect as y } from "react";
-import { createPortal as F } from "react-dom";
-import { X as G } from "../../../x-CnsEH4Ox.js";
-import '../../../index38.css';const H = "_overlay_1u4kf_2", J = "_fadeIn_1u4kf_1", Q = "_container_1u4kf_19", V = "_modal_1u4kf_49", W = "_slideUp_1u4kf_1", Y = "_closeButton_1u4kf_60", Z = "_title_1u4kf_87", T = "_content_1u4kf_97", O = "_trigger_1u4kf_117", e = {
-  overlay: H,
-  fadeIn: J,
-  container: Q,
-  "size-sm": "_size-sm_1u4kf_26",
-  "size-md": "_size-md_1u4kf_30",
-  "size-lg": "_size-lg_1u4kf_34",
-  "size-xl": "_size-xl_1u4kf_38",
-  "size-full": "_size-full_1u4kf_42",
-  modal: V,
-  slideUp: W,
-  closeButton: Y,
-  title: Z,
-  content: T,
+import { jsxs as f, Fragment as w, jsx as l } from "react/jsx-runtime";
+import { useState as R, useRef as X, useEffect as v } from "react";
+import { createPortal as B } from "react-dom";
+import { X as F } from "../../../x-CnsEH4Ox.js";
+import '../../../index38.css';const G = "_overlay_k02re_2", H = "_fadeIn_k02re_1", J = "_container_k02re_19", Q = "_modal_k02re_49", V = "_slideUp_k02re_1", W = "_closeButton_k02re_60", Y = "_title_k02re_87", Z = "_content_k02re_97", T = "_intro_k02re_116", O = "_trigger_k02re_121", n = {
+  overlay: G,
+  fadeIn: H,
+  container: J,
+  "size-sm": "_size-sm_k02re_26",
+  "size-md": "_size-md_k02re_30",
+  "size-lg": "_size-lg_k02re_34",
+  "size-xl": "_size-xl_k02re_38",
+  "size-full": "_size-full_k02re_42",
+  modal: Q,
+  slideUp: V,
+  closeButton: W,
+  title: Y,
+  content: Z,
+  intro: T,
   trigger: O
 }, ee = () => {
   typeof document < "u" && (document.body.style.overflow = "hidden");
-}, $ = () => {
+}, N = () => {
   typeof document < "u" && (document.body.style.overflow = "");
 };
-function ie({
+function re({
   content: k,
-  trigger: I,
-  isOpen: g,
-  onOpen: i,
-  onClose: s,
-  size: L = "md",
-  closeOnEscape: b = !0,
-  closeOnOverlayClick: S = !0,
-  showCloseButton: U = !0,
-  className: j,
-  overlayClassName: x,
-  style: P,
-  title: m,
+  trigger: $,
+  isOpen: y,
+  onOpen: r,
+  onClose: i,
+  size: I = "md",
+  closeOnEscape: g = !0,
+  closeOnOverlayClick: L = !0,
+  showCloseButton: S = !0,
+  className: U,
+  overlayClassName: j,
+  style: x,
+  // title,
   richTextBlocks: c,
   renderRichText: h,
-  formData: p,
-  renderForm: z
+  formData: b,
+  renderForm: p
 }) {
-  const [q, E] = X(!1), _ = B(null), v = g !== void 0, t = v ? g : q, A = () => {
-    v || E(!0), i == null || i();
-  }, a = () => {
-    v || E(!1), s == null || s();
-  }, C = () => t ? a() : A(), D = () => {
-    S && a();
+  const [P, z] = R(!1), _ = X(null), m = y !== void 0, e = m ? y : P, q = () => {
+    m || z(!0), r == null || r();
+  }, d = () => {
+    m || z(!1), i == null || i();
+  }, A = () => e ? d() : q(), C = () => {
+    L && d();
   };
-  y(() => {
-    if (!b || !t) return;
-    const n = (d) => {
-      d.key === "Escape" && a();
+  v(() => {
+    if (!g || !e) return;
+    const t = (s) => {
+      s.key === "Escape" && d();
     };
-    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-  }, [t, b]), y(() => (t ? ee() : $(), () => $()), [t]), y(() => {
-    if (!t || !_.current) return;
-    const n = _.current, d = n.querySelectorAll(
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [e, g]), v(() => (e ? ee() : N(), () => N()), [e]), v(() => {
+    if (!e || !_.current) return;
+    const t = _.current, s = t.querySelectorAll(
       'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    ), l = d[0], r = d[d.length - 1], w = (u) => {
-      u.key === "Tab" && (u.shiftKey ? document.activeElement === l && (u.preventDefault(), r == null || r.focus()) : document.activeElement === r && (u.preventDefault(), l == null || l.focus()));
+    ), o = s[0], a = s[s.length - 1], E = (u) => {
+      u.key === "Tab" && (u.shiftKey ? document.activeElement === o && (u.preventDefault(), a == null || a.focus()) : document.activeElement === a && (u.preventDefault(), o == null || o.focus()));
     };
-    return n.addEventListener("keydown", w), l == null || l.focus(), () => n.removeEventListener("keydown", w);
-  }, [t]);
-  const K = e[`size-${L}`] ?? "", M = k !== void 0 ? k : /* @__PURE__ */ f(N, { children: [
-    c != null && c.length && h ? /* @__PURE__ */ o("div", { className: e.intro, children: h({ blocks: c }) }) : null,
-    p && z ? z(p) : null
-  ] }), R = t ? /* @__PURE__ */ o(
+    return t.addEventListener("keydown", E), o == null || o.focus(), () => t.removeEventListener("keydown", E);
+  }, [e]);
+  const D = n[`size-${I}`] ?? "", K = k !== void 0 ? k : /* @__PURE__ */ f(w, { children: [
+    c != null && c.length && h ? /* @__PURE__ */ l("div", { className: n.intro, children: h({ blocks: c }) }) : null,
+    b && p ? p(b) : null
+  ] }), M = e ? /* @__PURE__ */ l(
     "div",
     {
-      className: `${e.overlay} ${x ?? ""}`.trim(),
-      onClick: D,
+      className: `${n.overlay} ${j ?? ""}`.trim(),
+      onClick: C,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": m ? "modal-title" : void 0,
-      children: /* @__PURE__ */ f("div", { className: `${K} ${e.container}`, children: [
-        U && /* @__PURE__ */ o(
+      children: /* @__PURE__ */ f("div", { className: `${D} ${n.container}`, children: [
+        S && /* @__PURE__ */ l(
           "button",
           {
             "aria-label": "Close",
-            className: e.closeButton,
-            onClick: a,
+            className: n.closeButton,
+            onClick: d,
             type: "button",
-            children: /* @__PURE__ */ o(G, { size: 20 })
+            children: /* @__PURE__ */ l(F, { size: 20 })
           }
         ),
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ l(
           "div",
           {
             ref: _,
-            className: `${e.modal} ${j ?? ""}`.trim(),
-            style: P,
-            onClick: (n) => n.stopPropagation(),
-            children: [
-              m && /* @__PURE__ */ o("div", { className: e.title, id: "modal-title", children: m }),
-              /* @__PURE__ */ o("div", { className: e.content, children: M })
-            ]
+            className: `${n.modal} ${U ?? ""}`.trim(),
+            style: x,
+            onClick: (t) => t.stopPropagation(),
+            children: /* @__PURE__ */ l("div", { className: n.content, children: K })
           }
         )
       ] })
     }
   ) : null;
-  return /* @__PURE__ */ f(N, { children: [
-    /* @__PURE__ */ o("div", { className: e.trigger, onClick: C, children: I }),
-    typeof window < "u" && F(R, document.body)
+  return /* @__PURE__ */ f(w, { children: [
+    /* @__PURE__ */ l("div", { className: n.trigger, onClick: A, children: $ }),
+    typeof window < "u" && B(M, document.body)
   ] });
 }
 export {
-  ie as Modal
+  re as Modal
 };

package/dist/core.d.ts

@@ -966,7 +966,7 @@ declare const marginClassMap: {
     readonly xl: string;
 };
 
-export declare function Modal({ content, trigger, isOpen: controlledIsOpen, onOpen, onClose, size, closeOnEscape, closeOnOverlayClick, showCloseButton, className, overlayClassName, style, title, richTextBlocks, renderRichText, formData, renderForm, }: ModalProps): JSX.Element;
+export declare function Modal({ content, trigger, isOpen: controlledIsOpen, onOpen, onClose, size, closeOnEscape, closeOnOverlayClick, showCloseButton, className, overlayClassName, style, richTextBlocks, renderRichText, formData, renderForm, }: ModalProps): JSX.Element;
 
 declare type ModalContextValue = {
     isOpen: boolean;

package/dist/index38.css

@@ -1 +1 @@
-._overlay_1u4kf_2{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:_fadeIn_1u4kf_1 .2s ease;padding:var(--spacing-md, 1rem);overflow-y:auto}._container_1u4kf_19{position:relative;display:flex;flex-direction:column}._size-sm_1u4kf_26{width:90%;max-width:400px}._size-md_1u4kf_30{width:90%;max-width:600px}._size-lg_1u4kf_34{width:90%;max-width:800px}._size-xl_1u4kf_38{width:90%;max-width:1200px}._size-full_1u4kf_42{width:95%;height:95dvh;max-height:95dvh}._modal_1u4kf_49{position:relative;background-color:var(--color-background, #fff);border-radius:var(--radius-lg, .5rem);padding:var(--spacing-xl, 2rem);max-height:90dvh;overflow-y:auto;animation:_slideUp_1u4kf_1 .3s ease}._closeButton_1u4kf_60{background:none;border:none;cursor:pointer;padding:var(--spacing-xs, .25rem);margin-bottom:var(--spacing-xs);border-radius:var(--radius-sm, .25rem);color:#fff;transition:all .2s ease;display:flex;align-items:center;justify-content:center;align-self:flex-end;z-index:1}._closeButton_1u4kf_60:hover{background-color:var(--color-secondary-10, #f5f5f5);color:var(--color-text-primary, #333)}._closeButton_1u4kf_60:focus-visible{outline:2px solid var(--color-primary-100, #007bff);outline-offset:2px}._title_1u4kf_87{font-size:var(--font-size-xl, 1.5rem);font-weight:var(--font-weight-bold, 700);color:var(--color-heading, #111);margin-bottom:var(--spacing-lg, 1.5rem);padding-right:var(--spacing-xl, 2rem);line-height:var(--line-height-heading, 1.2)}._content_1u4kf_97{color:var(--color-text-primary, #333);line-height:var(--line-height-normal, 1.5);display:flex;flex-direction:column;gap:var(--spacing-xl)}._content_1u4kf_97 video,._content_1u4kf_97 img{max-width:100%;height:auto;border-radius:var(--radius-md, .5rem)}._content_1u4kf_97 video{width:100%}._trigger_1u4kf_117{width:auto;display:inline-block;cursor:pointer}@keyframes _fadeIn_1u4kf_1{0%{opacity:0}to{opacity:1}}@keyframes _slideUp_1u4kf_1{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){._modal_1u4kf_49{padding:var(--spacing-lg, 1.5rem);max-height:85dvh}._size-sm_1u4kf_26,._size-md_1u4kf_30,._size-lg_1u4kf_34,._size-xl_1u4kf_38{width:95%}._title_1u4kf_87{font-size:var(--font-size-lg, 1.25rem);padding-right:var(--spacing-lg, 1.5rem)}}@media (max-width: 480px){._overlay_1u4kf_2{padding:var(--spacing-sm, .5rem)}._modal_1u4kf_49{padding:var(--spacing-md, 1rem);max-height:90dvh}._title_1u4kf_87{font-size:var(--font-size-md, 1rem);margin-bottom:var(--spacing-md, 1rem)}}
+._overlay_k02re_2{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:_fadeIn_k02re_1 .2s ease;padding:var(--spacing-md, 1rem);overflow-y:auto}._container_k02re_19{position:relative;display:flex;flex-direction:column}._size-sm_k02re_26{width:90%;max-width:400px}._size-md_k02re_30{width:90%;max-width:600px}._size-lg_k02re_34{width:90%;max-width:800px}._size-xl_k02re_38{width:90%;max-width:1200px}._size-full_k02re_42{width:95%;height:95dvh;max-height:95dvh}._modal_k02re_49{position:relative;background-color:var(--color-background, #fff);border-radius:var(--radius-lg, .5rem);padding:var(--spacing-xl, 2rem);max-height:90dvh;overflow-y:auto;animation:_slideUp_k02re_1 .3s ease}._closeButton_k02re_60{background:none;border:none;cursor:pointer;padding:var(--spacing-xs, .25rem);margin-bottom:var(--spacing-xs);border-radius:var(--radius-sm, .25rem);color:#fff;transition:all .2s ease;display:flex;align-items:center;justify-content:center;align-self:flex-end;z-index:1}._closeButton_k02re_60:hover{background-color:var(--color-secondary-10, #f5f5f5);color:var(--color-text-primary, #333)}._closeButton_k02re_60:focus-visible{outline:2px solid var(--color-primary-100, #007bff);outline-offset:2px}._title_k02re_87{font-size:var(--font-size-xl, 1.5rem);font-weight:var(--font-weight-bold, 700);color:var(--color-heading, #111);margin-bottom:var(--spacing-lg, 1.5rem);padding-right:var(--spacing-xl, 2rem);line-height:var(--line-height-heading, 1.2)}._content_k02re_97{color:var(--color-text-primary, #333);line-height:var(--line-height-normal, 1.5);display:flex;flex-direction:column;gap:var(--spacing-xl)}._content_k02re_97 video,._content_k02re_97 img{max-width:100%;height:auto;border-radius:var(--radius-md, .5rem)}._content_k02re_97 video{width:100%}._intro_k02re_116{background-color:red}._trigger_k02re_121{width:auto;display:inline-block;cursor:pointer}@keyframes _fadeIn_k02re_1{0%{opacity:0}to{opacity:1}}@keyframes _slideUp_k02re_1{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){._modal_k02re_49{padding:var(--spacing-lg, 1.5rem);max-height:85dvh}._size-sm_k02re_26,._size-md_k02re_30,._size-lg_k02re_34,._size-xl_k02re_38{width:95%}._title_k02re_87{font-size:var(--font-size-lg, 1.25rem);padding-right:var(--spacing-lg, 1.5rem)}}@media (max-width: 480px){._overlay_k02re_2{padding:var(--spacing-sm, .5rem)}._modal_k02re_49{padding:var(--spacing-md, 1rem);max-height:90dvh}._title_k02re_87{font-size:var(--font-size-md, 1rem);margin-bottom:var(--spacing-md, 1rem)}}

package/dist/main.d.ts

@@ -1215,7 +1215,7 @@ export { MarkdownBlockProps }
 
 export { MetricType }
 
-export declare function Modal({ content, trigger, isOpen: controlledIsOpen, onOpen, onClose, size, closeOnEscape, closeOnOverlayClick, showCloseButton, className, overlayClassName, style, title, richTextBlocks, renderRichText, formData, renderForm, }: ModalProps): JSX.Element;
+export declare function Modal({ content, trigger, isOpen: controlledIsOpen, onOpen, onClose, size, closeOnEscape, closeOnOverlayClick, showCloseButton, className, overlayClassName, style, richTextBlocks, renderRichText, formData, renderForm, }: ModalProps): JSX.Element;
 
 declare type ModalContextValue = {
     isOpen: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.1.159",
+  "version": "0.1.160",
   "type": "module",
   "exports": {
     ".": {