quirk-ui 0.1.68 → 0.1.69

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

@@ -1 +1 @@
-"use strict";const t=require("react/jsx-runtime"),e=require("../../../index-DITXfOUM.cjs"),o=require("./index.cjs");e.describe("ButtonGroup",()=>{e.describe("Rendering",()=>{e.it("renders children",()=>{e.render(t.jsxs(o.ButtonGroup,{children:[t.jsx("button",{children:"One"}),t.jsx("button",{children:"Two"})]})),e.globalExpect(e.screen.getByText("One")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Two")).toBeInTheDocument()}),e.it("renders multiple button types",()=>{e.render(t.jsxs(o.ButtonGroup,{children:[t.jsx("button",{children:"Button"}),t.jsx("a",{href:"#",children:"Link"}),t.jsx("span",{children:"Text"})]})),e.globalExpect(e.screen.getByText("Button")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Link")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Text")).toBeInTheDocument()})}),e.describe("Orientation",()=>{e.it("applies horizontal orientation by default",()=>{const{container:n}=e.render(t.jsxs(o.ButtonGroup,{children:[t.jsx("button",{children:"One"}),t.jsx("button",{children:"Two"})]}));e.globalExpect(n.firstChild).toHaveClass("horizontal")}),e.it("applies vertical orientation when specified",()=>{const{container:n}=e.render(t.jsxs(o.ButtonGroup,{orientation:"vertical",children:[t.jsx("button",{children:"One"}),t.jsx("button",{children:"Two"})]}));e.globalExpect(n.firstChild).toHaveClass("vertical")})}),e.describe("Alignment",()=>{e.it("applies left alignment by default",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("left")}),e.it("applies center alignment when specified",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{alignment:"center",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("center")}),e.it("applies right alignment when specified",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{alignment:"right",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("right")})}),e.describe("Size",()=>{e.it("applies md size by default",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("md")}),e.it("applies sm size when specified",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{size:"sm",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("sm")}),e.it("applies lg size when specified",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{size:"lg",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("lg")})}),e.describe("Full width",()=>{e.it("does not apply fullWidth by default",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).not.toHaveClass("fullWidth")}),e.it("applies fullWidth when specified",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{fullWidth:!0,children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("fullWidth")})}),e.describe("Custom className",()=>{e.it("accepts a custom className",()=>{const{container:n}=e.render(t.jsxs(o.ButtonGroup,{className:"custom-class",children:[t.jsx("button",{children:"One"}),t.jsx("button",{children:"Two"})]}));e.globalExpect(n.firstChild).toHaveClass("custom-class"),e.globalExpect(n.firstChild).toHaveClass("buttonGroup")})}),e.describe("ARIA and accessibility",()=>{e.it("has role='group' by default",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveAttribute("role","group")}),e.it("accepts custom role",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{role:"toolbar",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveAttribute("role","toolbar")}),e.it("supports aria-label",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{"aria-label":"Actions",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveAttribute("aria-label","Actions")})}),e.describe("HTML attributes",()=>{e.it("supports data attributes",()=>{e.render(t.jsx(o.ButtonGroup,{"data-testid":"my-group",children:t.jsx("button",{children:"One"})})),e.globalExpect(e.screen.getByTestId("my-group")).toBeInTheDocument()}),e.it("supports id attribute",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{id:"button-group-1",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.querySelector("#button-group-1")).toBeInTheDocument()}),e.it("supports onClick on container",()=>{const n=e.vi.fn(),{container:i}=e.render(t.jsx(o.ButtonGroup,{onClick:n,children:t.jsx("button",{children:"One"})}));e.fireEvent.click(i.firstChild),e.globalExpect(n).toHaveBeenCalledTimes(1)})}),e.describe("Combined props",()=>{e.it("combines orientation, alignment, and size",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{orientation:"vertical",alignment:"center",size:"lg",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("vertical"),e.globalExpect(n.firstChild).toHaveClass("center"),e.globalExpect(n.firstChild).toHaveClass("lg")}),e.it("combines all props",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{orientation:"horizontal",alignment:"right",size:"sm",fullWidth:!0,className:"custom",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("horizontal"),e.globalExpect(n.firstChild).toHaveClass("right"),e.globalExpect(n.firstChild).toHaveClass("sm"),e.globalExpect(n.firstChild).toHaveClass("fullWidth"),e.globalExpect(n.firstChild).toHaveClass("custom")})}),e.describe("Edge cases",()=>{e.it("handles single child",()=>{e.render(t.jsx(o.ButtonGroup,{children:t.jsx("button",{children:"Only One"})})),e.globalExpect(e.screen.getByText("Only One")).toBeInTheDocument()}),e.it("handles many children",()=>{e.render(t.jsx(o.ButtonGroup,{children:Array.from({length:10},(n,i)=>t.jsxs("button",{children:["Button ",i+1]},i))})),e.globalExpect(e.screen.getByText("Button 1")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Button 10")).toBeInTheDocument()})})});
+"use strict";const t=require("react/jsx-runtime"),e=require("../../../index-DITXfOUM.cjs"),o=require("./index.cjs");e.describe("ButtonGroup",()=>{e.describe("Rendering",()=>{e.it("renders children",()=>{e.render(t.jsxs(o.ButtonGroup,{children:[t.jsx("button",{children:"One"}),t.jsx("button",{children:"Two"})]})),e.globalExpect(e.screen.getByText("One")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Two")).toBeInTheDocument()}),e.it("renders multiple button types",()=>{e.render(t.jsxs(o.ButtonGroup,{children:[t.jsx("button",{children:"Button"}),t.jsx("a",{href:"#",children:"Link"}),t.jsx("span",{children:"Text"})]})),e.globalExpect(e.screen.getByText("Button")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Link")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Text")).toBeInTheDocument()})}),e.describe("Orientation",()=>{e.it("applies horizontal orientation by default",()=>{const{container:n}=e.render(t.jsxs(o.ButtonGroup,{children:[t.jsx("button",{children:"One"}),t.jsx("button",{children:"Two"})]}));e.globalExpect(n.firstChild).toHaveClass("horizontal")}),e.it("applies vertical orientation when specified",()=>{const{container:n}=e.render(t.jsxs(o.ButtonGroup,{orientation:"vertical",children:[t.jsx("button",{children:"One"}),t.jsx("button",{children:"Two"})]}));e.globalExpect(n.firstChild).toHaveClass("vertical")})}),e.describe("Alignment",()=>{e.it("applies left alignment by default",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("left")}),e.it("applies center alignment when specified",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{alignment:"center",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("center")}),e.it("applies right alignment when specified",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{alignment:"right",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("right")})}),e.describe("Size",()=>{e.it("applies md size by default",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("md")}),e.it("applies sm size when specified",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{spacing:"sm",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("sm")}),e.it("applies lg size when specified",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{spacing:"lg",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("lg")})}),e.describe("Full width",()=>{e.it("does not apply fullWidth by default",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).not.toHaveClass("fullWidth")}),e.it("applies fullWidth when specified",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{fullWidth:!0,children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("fullWidth")})}),e.describe("Custom className",()=>{e.it("accepts a custom className",()=>{const{container:n}=e.render(t.jsxs(o.ButtonGroup,{className:"custom-class",children:[t.jsx("button",{children:"One"}),t.jsx("button",{children:"Two"})]}));e.globalExpect(n.firstChild).toHaveClass("custom-class"),e.globalExpect(n.firstChild).toHaveClass("buttonGroup")})}),e.describe("ARIA and accessibility",()=>{e.it("has role='group' by default",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveAttribute("role","group")}),e.it("accepts custom role",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{role:"toolbar",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveAttribute("role","toolbar")}),e.it("supports aria-label",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{"aria-label":"Actions",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveAttribute("aria-label","Actions")})}),e.describe("HTML attributes",()=>{e.it("supports data attributes",()=>{e.render(t.jsx(o.ButtonGroup,{"data-testid":"my-group",children:t.jsx("button",{children:"One"})})),e.globalExpect(e.screen.getByTestId("my-group")).toBeInTheDocument()}),e.it("supports id attribute",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{id:"button-group-1",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.querySelector("#button-group-1")).toBeInTheDocument()}),e.it("supports onClick on container",()=>{const n=e.vi.fn(),{container:i}=e.render(t.jsx(o.ButtonGroup,{onClick:n,children:t.jsx("button",{children:"One"})}));e.fireEvent.click(i.firstChild),e.globalExpect(n).toHaveBeenCalledTimes(1)})}),e.describe("Combined props",()=>{e.it("combines orientation, alignment, and size",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{orientation:"vertical",alignment:"center",spacing:"lg",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("vertical"),e.globalExpect(n.firstChild).toHaveClass("center"),e.globalExpect(n.firstChild).toHaveClass("lg")}),e.it("combines all props",()=>{const{container:n}=e.render(t.jsx(o.ButtonGroup,{orientation:"horizontal",alignment:"right",spacing:"sm",fullWidth:!0,className:"custom",children:t.jsx("button",{children:"One"})}));e.globalExpect(n.firstChild).toHaveClass("horizontal"),e.globalExpect(n.firstChild).toHaveClass("right"),e.globalExpect(n.firstChild).toHaveClass("sm"),e.globalExpect(n.firstChild).toHaveClass("fullWidth"),e.globalExpect(n.firstChild).toHaveClass("custom")})}),e.describe("Edge cases",()=>{e.it("handles single child",()=>{e.render(t.jsx(o.ButtonGroup,{children:t.jsx("button",{children:"Only One"})})),e.globalExpect(e.screen.getByText("Only One")).toBeInTheDocument()}),e.it("handles many children",()=>{e.render(t.jsx(o.ButtonGroup,{children:Array.from({length:10},(n,i)=>t.jsxs("button",{children:["Button ",i+1]},i))})),e.globalExpect(e.screen.getByText("Button 1")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Button 10")).toBeInTheDocument()})})});

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

@@ -62,12 +62,12 @@ r("ButtonGroup", () => {
       n(e.firstChild).toHaveClass("md");
     }), i("applies sm size when specified", () => {
       const { container: e } = o(
-        /* @__PURE__ */ t(l, { size: "sm", children: /* @__PURE__ */ t("button", { children: "One" }) })
+        /* @__PURE__ */ t(l, { spacing: "sm", children: /* @__PURE__ */ t("button", { children: "One" }) })
       );
       n(e.firstChild).toHaveClass("sm");
     }), i("applies lg size when specified", () => {
       const { container: e } = o(
-        /* @__PURE__ */ t(l, { size: "lg", children: /* @__PURE__ */ t("button", { children: "One" }) })
+        /* @__PURE__ */ t(l, { spacing: "lg", children: /* @__PURE__ */ t("button", { children: "One" }) })
       );
       n(e.firstChild).toHaveClass("lg");
     });
@@ -129,7 +129,7 @@ r("ButtonGroup", () => {
   }), r("Combined props", () => {
     i("combines orientation, alignment, and size", () => {
       const { container: e } = o(
-        /* @__PURE__ */ t(l, { orientation: "vertical", alignment: "center", size: "lg", children: /* @__PURE__ */ t("button", { children: "One" }) })
+        /* @__PURE__ */ t(l, { orientation: "vertical", alignment: "center", spacing: "lg", children: /* @__PURE__ */ t("button", { children: "One" }) })
       );
       n(e.firstChild).toHaveClass("vertical"), n(e.firstChild).toHaveClass("center"), n(e.firstChild).toHaveClass("lg");
     }), i("combines all props", () => {
@@ -139,7 +139,7 @@ r("ButtonGroup", () => {
           {
             orientation: "horizontal",
             alignment: "right",
-            size: "sm",
+            spacing: "sm",
             fullWidth: !0,
             className: "custom",
             children: /* @__PURE__ */ t("button", { children: "One" })

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index33.css');const g=require("react/jsx-runtime"),u="_buttonGroup_oexgs_1",a="_horizontal_oexgs_9",m="_vertical_oexgs_14",h="_left_oexgs_20",d="_center_oexgs_24",f="_right_oexgs_28",x="_sm_oexgs_33",p="_md_oexgs_37",$="_lg_oexgs_41",v="_fullWidth_oexgs_46",t={buttonGroup:u,horizontal:a,vertical:m,left:h,center:d,right:f,sm:x,md:p,lg:$,fullWidth:v},b={left:t.left,center:t.center,right:t.right},z={sm:t.sm,md:t.md,lg:t.lg};function G({children:o,className:e,alignment:s="left",orientation:n="horizontal",size:l="md",role:r="group",fullWidth:i=!1,..._}){const c=n==="vertical"?t.vertical:t.horizontal;return g.jsx("div",{className:`${t.buttonGroup} ${c} ${b[s]} ${z[l]} ${i?t.fullWidth:""} ${e??""}`.trim(),role:r,..._,children:o})}exports.ButtonGroup=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index33.css');const g=require("react/jsx-runtime"),m="_buttonGroup_1gm2z_1",u="_horizontal_1gm2z_9",a="_vertical_1gm2z_14",z="_left_1gm2z_20",h="_center_1gm2z_24",d="_right_1gm2z_28",f="_sm_1gm2z_33",p="_md_1gm2z_37",$="_lg_1gm2z_41",v="_fullWidth_1gm2z_46",t={buttonGroup:m,horizontal:u,vertical:a,left:z,center:h,right:d,sm:f,md:p,lg:$,fullWidth:v},b={left:t.left,center:t.center,right:t.right},G={sm:t.sm,md:t.md,lg:t.lg};function W({children:o,className:n,alignment:l="left",orientation:r="horizontal",spacing:e="md",role:s="group",fullWidth:i=!1,...c}){const _=r==="vertical"?t.vertical:t.horizontal;return g.jsx("div",{className:`${t.buttonGroup} ${_} ${b[l]} ${G[e]} ${i?t.fullWidth:""} ${n??""}`.trim(),role:s,...c,children:o})}exports.ButtonGroup=W;

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

@@ -1,45 +1,45 @@
-import { jsx as g } from "react/jsx-runtime";
-import '../../../index33.css';const a = "_buttonGroup_oexgs_1", u = "_horizontal_oexgs_9", m = "_vertical_oexgs_14", h = "_left_oexgs_20", f = "_center_oexgs_24", x = "_right_oexgs_28", d = "_sm_oexgs_33", p = "_md_oexgs_37", v = "_lg_oexgs_41", z = "_fullWidth_oexgs_46", t = {
-  buttonGroup: a,
-  horizontal: u,
-  vertical: m,
-  left: h,
-  center: f,
-  right: x,
+import { jsx as m } from "react/jsx-runtime";
+import '../../../index33.css';const g = "_buttonGroup_1gm2z_1", a = "_horizontal_1gm2z_9", u = "_vertical_1gm2z_14", z = "_left_1gm2z_20", h = "_center_1gm2z_24", f = "_right_1gm2z_28", d = "_sm_1gm2z_33", p = "_md_1gm2z_37", v = "_lg_1gm2z_41", $ = "_fullWidth_1gm2z_46", t = {
+  buttonGroup: g,
+  horizontal: a,
+  vertical: u,
+  left: z,
+  center: h,
+  right: f,
   sm: d,
   md: p,
   lg: v,
-  fullWidth: z
-}, $ = {
+  fullWidth: $
+}, G = {
   left: t.left,
   center: t.center,
   right: t.right
-}, G = {
+}, b = {
   sm: t.sm,
   md: t.md,
   lg: t.lg
 };
-function W({
+function C({
   children: o,
-  className: s,
-  alignment: e = "left",
-  orientation: l = "horizontal",
-  size: n = "md",
-  role: r = "group",
-  fullWidth: _ = !1,
-  ...i
+  className: n,
+  alignment: l = "left",
+  orientation: r = "horizontal",
+  spacing: s = "md",
+  role: _ = "group",
+  fullWidth: e = !1,
+  ...c
 }) {
-  const c = l === "vertical" ? t.vertical : t.horizontal;
-  return /* @__PURE__ */ g(
+  const i = r === "vertical" ? t.vertical : t.horizontal;
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: `${t.buttonGroup} ${c} ${$[e]} ${G[n]} ${_ ? t.fullWidth : ""} ${s ?? ""}`.trim(),
-      role: r,
-      ...i,
+      className: `${t.buttonGroup} ${i} ${G[l]} ${b[s]} ${e ? t.fullWidth : ""} ${n ?? ""}`.trim(),
+      role: _,
+      ...c,
       children: o
     }
   );
 }
 export {
-  W as ButtonGroup
+  C as ButtonGroup
 };

package/dist/core.d.ts

@@ -175,23 +175,23 @@ declare type BreakpointColumns = {
 
 export declare function Button({ variant, size, displayType, imageSrc, imageAlt, ImageComponent, icon, iconAlignment, className, children, disabled, ...restProps }: ButtonProps): JSX.Element;
 
-export declare function ButtonGroup({ children, className, alignment, orientation, size, role, fullWidth, ...restProps }: ButtonGroupProps): JSX.Element;
+export declare function ButtonGroup({ children, className, alignment, orientation, spacing, role, fullWidth, ...restProps }: ButtonGroupProps): JSX.Element;
 
 declare type ButtonGroupProps = {
     children: default_2.ReactNode;
     className?: string;
     alignment?: Alignment;
     orientation?: Orientation;
-    size?: ButtonGroupSize;
+    spacing?: ButtonGroupSpacing;
     role?: string;
     fullWidth?: boolean;
 } & default_2.HTMLAttributes<HTMLDivElement>;
 
-declare type ButtonGroupSize = keyof typeof sizeClassMap;
+declare type ButtonGroupSpacing = keyof typeof spacingClassMap;
 
 export declare type ButtonProps = BaseProps & (AnchorTypeProps | ButtonTypeProps | ScrollTypeProps);
 
-declare type ButtonSize = keyof typeof sizeClassMap_2;
+declare type ButtonSize = keyof typeof sizeClassMap;
 
 declare type ButtonTypeProps = {
     as?: "button";
@@ -380,7 +380,7 @@ export declare type DrawerProps = {
     className?: string;
 };
 
-export declare type DrawerSize = keyof typeof sizeClassMap_3;
+export declare type DrawerSize = keyof typeof sizeClassMap_2;
 
 declare type FABPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
 
@@ -1161,7 +1161,7 @@ declare type ProgressBarProps = {
     style?: CSSProperties;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-declare type ProgressBarSize = keyof typeof sizeClassMap_5;
+declare type ProgressBarSize = keyof typeof sizeClassMap_4;
 
 declare type ProgressBarVariant = keyof typeof variantClassMap_6;
 
@@ -1297,7 +1297,7 @@ declare type SidebarProps = {
     style?: CSSProperties;
 } & Omit<default_2.HTMLAttributes<HTMLElement>, "style">;
 
-declare type Size = keyof typeof sizeClassMap_4;
+declare type Size = keyof typeof sizeClassMap_3;
 
 declare const sizeClassMap: {
     readonly sm: string;
@@ -1309,13 +1309,13 @@ declare const sizeClassMap_2: {
     readonly sm: string;
     readonly md: string;
     readonly lg: string;
+    readonly full: string;
 };
 
 declare const sizeClassMap_3: {
     readonly sm: string;
     readonly md: string;
     readonly lg: string;
-    readonly full: string;
 };
 
 declare const sizeClassMap_4: {
@@ -1325,12 +1325,6 @@ declare const sizeClassMap_4: {
 };
 
 declare const sizeClassMap_5: {
-    readonly sm: string;
-    readonly md: string;
-    readonly lg: string;
-};
-
-declare const sizeClassMap_6: {
     readonly xs: string;
     readonly sm: string;
     readonly md: string;
@@ -1339,7 +1333,7 @@ declare const sizeClassMap_6: {
     readonly "2xl": string;
 };
 
-declare const sizeClassMap_7: {
+declare const sizeClassMap_6: {
     readonly xs: string;
     readonly sm: string;
     readonly md: string;
@@ -1374,7 +1368,13 @@ declare type SpacerProps = {
     style?: CSSProperties;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-declare type SpacerSize = keyof typeof sizeClassMap_6;
+declare type SpacerSize = keyof typeof sizeClassMap_5;
+
+declare const spacingClassMap: {
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+};
 
 export declare function Spinner({ size, variant, label, fullScreen, className, style, ...restProps }: SpinnerProps): JSX.Element;
 
@@ -1387,7 +1387,7 @@ declare type SpinnerProps = {
     style?: CSSProperties;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-declare type SpinnerSize = keyof typeof sizeClassMap_7;
+declare type SpinnerSize = keyof typeof sizeClassMap_6;
 
 declare type SpinnerVariant = keyof typeof variantClassMap_8;
 

package/dist/index33.css

@@ -1 +1 @@
-._buttonGroup_oexgs_1{display:flex;gap:var(--spacing-sm);align-items:center;width:fit-content}._horizontal_oexgs_9{flex-direction:row;flex-wrap:wrap}._vertical_oexgs_14{flex-direction:column;align-items:stretch}._left_oexgs_20{justify-content:flex-start}._center_oexgs_24{justify-content:center}._right_oexgs_28{justify-content:flex-end}._sm_oexgs_33{gap:var(--spacing-xs)}._md_oexgs_37{gap:var(--spacing-sm)}._lg_oexgs_41{gap:var(--spacing-md)}._fullWidth_oexgs_46{width:100%}._fullWidth_oexgs_46._horizontal_oexgs_9>*{flex:1}._fullWidth_oexgs_46._vertical_oexgs_14{align-items:stretch}@media (max-width: 480px){._buttonGroup_oexgs_1{width:100%}._horizontal_oexgs_9{flex-direction:column;align-items:stretch}}
+._buttonGroup_1gm2z_1{display:flex;gap:var(--spacing-sm);align-items:center;width:fit-content}._horizontal_1gm2z_9{flex-direction:row;flex-wrap:wrap}._vertical_1gm2z_14{flex-direction:column;align-items:stretch}._left_1gm2z_20{justify-content:flex-start}._center_1gm2z_24{justify-content:center}._right_1gm2z_28{justify-content:flex-end}._sm_1gm2z_33{gap:var(--spacing-sm)}._md_1gm2z_37{gap:var(--spacing-md)}._lg_1gm2z_41{gap:var(--spacing-lg)}._fullWidth_1gm2z_46{width:100%}._fullWidth_1gm2z_46._horizontal_1gm2z_9>*{flex:1}._fullWidth_1gm2z_46._vertical_1gm2z_14{align-items:stretch}@media (max-width: 480px){._buttonGroup_1gm2z_1{width:100%}._horizontal_1gm2z_9{flex-direction:column;align-items:stretch}}

package/dist/main.d.ts

@@ -282,23 +282,23 @@ declare type BreakpointColumns = {
 
 export declare function Button({ variant, size, displayType, imageSrc, imageAlt, ImageComponent, icon, iconAlignment, className, children, disabled, ...restProps }: ButtonProps): JSX.Element;
 
-export declare function ButtonGroup({ children, className, alignment, orientation, size, role, fullWidth, ...restProps }: ButtonGroupProps): JSX.Element;
+export declare function ButtonGroup({ children, className, alignment, orientation, spacing, role, fullWidth, ...restProps }: ButtonGroupProps): JSX.Element;
 
 declare type ButtonGroupProps = {
     children: default_2.ReactNode;
     className?: string;
     alignment?: Alignment;
     orientation?: Orientation;
-    size?: ButtonGroupSize;
+    spacing?: ButtonGroupSpacing;
     role?: string;
     fullWidth?: boolean;
 } & default_2.HTMLAttributes<HTMLDivElement>;
 
-declare type ButtonGroupSize = keyof typeof sizeClassMap;
+declare type ButtonGroupSpacing = keyof typeof spacingClassMap;
 
 export declare type ButtonProps = BaseProps & (AnchorTypeProps | ButtonTypeProps | ScrollTypeProps);
 
-declare type ButtonSize = keyof typeof sizeClassMap_2;
+declare type ButtonSize = keyof typeof sizeClassMap;
 
 declare type ButtonTypeProps = {
     as?: "button";
@@ -544,7 +544,7 @@ export declare type DrawerProps = {
     className?: string;
 };
 
-export declare type DrawerSize = keyof typeof sizeClassMap_3;
+export declare type DrawerSize = keyof typeof sizeClassMap_2;
 
 /**
  * Extracts plain text from a PortableText block array.
@@ -1411,7 +1411,7 @@ declare type ProgressBarProps = {
     style?: CSSProperties;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-declare type ProgressBarSize = keyof typeof sizeClassMap_5;
+declare type ProgressBarSize = keyof typeof sizeClassMap_4;
 
 declare type ProgressBarVariant = keyof typeof variantClassMap_6;
 
@@ -1498,7 +1498,7 @@ declare type RangeSize = "sm" | "md" | "lg";
  * <HeroBlock {...section} renderCallToAction={renderCallToAction} />
  * <ContentBlock {...section} renderCallToAction={renderCallToAction} />
  */
-export declare function renderCallToAction({ alignment, items, className, }: RenderCallToActionProps_3): default_2.ReactElement | null;
+export declare function renderCallToAction({ alignment, spacing, items, className, }: RenderCallToActionProps_3): default_2.ReactElement | null;
 
 export { RenderCallToActionProps }
 
@@ -1659,7 +1659,7 @@ export { SingletonBlockProps }
 
 export { SiteSettings }
 
-declare type Size = keyof typeof sizeClassMap_4;
+declare type Size = keyof typeof sizeClassMap_3;
 
 declare const sizeClassMap: {
     readonly sm: string;
@@ -1671,13 +1671,13 @@ declare const sizeClassMap_2: {
     readonly sm: string;
     readonly md: string;
     readonly lg: string;
+    readonly full: string;
 };
 
 declare const sizeClassMap_3: {
     readonly sm: string;
     readonly md: string;
     readonly lg: string;
-    readonly full: string;
 };
 
 declare const sizeClassMap_4: {
@@ -1687,12 +1687,6 @@ declare const sizeClassMap_4: {
 };
 
 declare const sizeClassMap_5: {
-    readonly sm: string;
-    readonly md: string;
-    readonly lg: string;
-};
-
-declare const sizeClassMap_6: {
     readonly xs: string;
     readonly sm: string;
     readonly md: string;
@@ -1701,7 +1695,7 @@ declare const sizeClassMap_6: {
     readonly "2xl": string;
 };
 
-declare const sizeClassMap_7: {
+declare const sizeClassMap_6: {
     readonly xs: string;
     readonly sm: string;
     readonly md: string;
@@ -1736,7 +1730,13 @@ declare type SpacerProps = {
     style?: CSSProperties;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-declare type SpacerSize = keyof typeof sizeClassMap_6;
+declare type SpacerSize = keyof typeof sizeClassMap_5;
+
+declare const spacingClassMap: {
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+};
 
 export declare function Spinner({ size, variant, label, fullScreen, className, style, ...restProps }: SpinnerProps): JSX.Element;
 
@@ -1749,7 +1749,7 @@ declare type SpinnerProps = {
     style?: CSSProperties;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-declare type SpinnerSize = keyof typeof sizeClassMap_7;
+declare type SpinnerSize = keyof typeof sizeClassMap_6;
 
 declare type SpinnerVariant = keyof typeof variantClassMap_8;
 

package/dist/next/ui/CallToAction/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),U=require("react"),B=require("next/image"),O=require("../../../core/components/ButtonGroup/index.cjs"),l=require("../../../index-D0ylyll7.cjs"),I=require("../../../core/components/Modal/index.cjs"),C=require("../../utils/resolveLinkUrl.cjs"),z=require("../../../core/context/ThemeContext.cjs"),G=require("../../hooks/useMediaQuery.cjs");function H({items:r,alignment:M,className:R}){const[P,S]=U.useState([]),{mode:t}=z.useTheme(),g=G.useMediaQuery("(max-width: 767px)");return U.useEffect(()=>{if(!(r!=null&&r.length)||!C.resolveLinkURL)return;async function e(){const o=await Promise.all(r.map(a=>C.resolveLinkURL(a)));S(o)}e()},[r]),r!=null&&r.length?n.jsx(O.ButtonGroup,{className:R,alignment:M,children:r.slice(0,3).map((e,o)=>{var m,d,p,c,h,b,f,y,v,x,_,k,j,T,A,w,q,L;const a=P[o]??"#",i={};if(i.height="auto",((m=e.image)==null?void 0:m.layout)==="cover")i.objectFit="cover",(d=e.image)!=null&&d.position&&(i.objectPosition=g?"top":(p=e.image)==null?void 0:p.position);else if(((c=e.image)==null?void 0:c.layout)==="contain"){if(i.objectFit="contain",((h=e.image)==null?void 0:h.sizing)==="half"?i.width=g?"100%":"50%":((b=e.image)==null?void 0:b.sizing)==="inset"?(i.width="100%",i.maxWidth=e.image.maxWidth??"unset"):i.width="100%",(f=e.image)!=null&&f.aspectRatio){const[$,F]=(y=e.image)==null?void 0:y.aspectRatio.split(":").map(Number);i.aspectRatio=`${$}/${F}`}}else i.objectFit="none";let s;(v=e.image)!=null&&v.imageUrls&&(s=t==="dark"&&((x=e.image.imageUrls.dark)==null?void 0:x.medium)||e.image.imageUrls.default.medium);let u=((j=(k=(_=e.image)==null?void 0:_[t==="dark"?"darkImage":"defaultImage"])==null?void 0:k.asset)==null?void 0:j.altText)||((w=(A=(T=e.image)==null?void 0:T[t==="dark"?"darkImage":"defaultImage"])==null?void 0:A.asset)==null?void 0:w.description)||"Card image";switch(e.type){case"link":return n.jsx(l.Button,{as:"a",variant:e.variant,href:a,target:((q=e.linkOptions)==null?void 0:q.linkType)==="external"?"_blank":"_self",rel:((L=e.linkOptions)==null?void 0:L.linkType)==="external"?"noopener noreferrer":"","aria-label":e.ariaLabel||e.label,icon:e.icon,iconAlignment:e.iconAlignment??"right",displayType:e.displayType,ImageComponent:n.jsx(B,{src:s??"",alt:u,width:600,height:658,priority:!1,style:i}),children:e.label},o);case"scroll":return n.jsx(l.Button,{as:"scroll",variant:e.variant,scrollTarget:e.scrollTarget??"","aria-label":e.ariaLabel||e.label,icon:e.icon,iconAlignment:e.iconAlignment??"right",displayType:e.displayType,ImageComponent:n.jsx(B,{src:s??"",alt:u,width:600,height:658,priority:!1,style:i}),children:e.label},o);case"modal":return n.jsx(I.Modal,{trigger:n.jsx(l.Button,{as:"button",variant:e.variant??"primary",icon:e.icon,iconAlignment:e.iconAlignment??"right","aria-label":e.ariaLabel||e.label,children:e.label}),content:e.modalContent},o);case"video":return n.jsx(I.Modal,{trigger:n.jsx(l.Button,{as:"button",variant:e.variant??"primary",icon:e.icon,iconAlignment:e.iconAlignment??"right","aria-label":e.ariaLabel||e.label,children:e.label}),content:n.jsx("video",{src:e.videoUrl,controls:!0,autoPlay:!0})},o);case"download":return n.jsx(l.Button,{as:"a",variant:e.variant??"primary",href:a,download:!0,target:"_blank",rel:"noopener noreferrer","aria-label":e.ariaLabel||e.label,icon:e.icon,iconAlignment:e.iconAlignment??"right",children:e.label},o)}})}):null}exports.CallToAction=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),U=require("react"),B=require("next/image"),z=require("../../../core/components/ButtonGroup/index.cjs"),l=require("../../../index-D0ylyll7.cjs"),I=require("../../../core/components/Modal/index.cjs"),C=require("../../utils/resolveLinkUrl.cjs"),G=require("../../../core/context/ThemeContext.cjs"),H=require("../../hooks/useMediaQuery.cjs");function Q({items:r,alignment:M,spacing:R,className:P}){const[S,$]=U.useState([]),{mode:t}=G.useTheme(),g=H.useMediaQuery("(max-width: 767px)");return U.useEffect(()=>{if(!(r!=null&&r.length)||!C.resolveLinkURL)return;async function e(){const o=await Promise.all(r.map(a=>C.resolveLinkURL(a)));$(o)}e()},[r]),r!=null&&r.length?n.jsx(z.ButtonGroup,{className:P,alignment:M,spacing:R,children:r.slice(0,3).map((e,o)=>{var m,d,p,c,h,b,f,y,v,x,_,k,j,T,A,w,q,L;const a=S[o]??"#",i={};if(i.height="auto",((m=e.image)==null?void 0:m.layout)==="cover")i.objectFit="cover",(d=e.image)!=null&&d.position&&(i.objectPosition=g?"top":(p=e.image)==null?void 0:p.position);else if(((c=e.image)==null?void 0:c.layout)==="contain"){if(i.objectFit="contain",((h=e.image)==null?void 0:h.sizing)==="half"?i.width=g?"100%":"50%":((b=e.image)==null?void 0:b.sizing)==="inset"?(i.width="100%",i.maxWidth=e.image.maxWidth??"unset"):i.width="100%",(f=e.image)!=null&&f.aspectRatio){const[F,O]=(y=e.image)==null?void 0:y.aspectRatio.split(":").map(Number);i.aspectRatio=`${F}/${O}`}}else i.objectFit="none";let s;(v=e.image)!=null&&v.imageUrls&&(s=t==="dark"&&((x=e.image.imageUrls.dark)==null?void 0:x.medium)||e.image.imageUrls.default.medium);let u=((j=(k=(_=e.image)==null?void 0:_[t==="dark"?"darkImage":"defaultImage"])==null?void 0:k.asset)==null?void 0:j.altText)||((w=(A=(T=e.image)==null?void 0:T[t==="dark"?"darkImage":"defaultImage"])==null?void 0:A.asset)==null?void 0:w.description)||"Card image";switch(e.type){case"link":return n.jsx(l.Button,{as:"a",variant:e.variant,href:a,target:((q=e.linkOptions)==null?void 0:q.linkType)==="external"?"_blank":"_self",rel:((L=e.linkOptions)==null?void 0:L.linkType)==="external"?"noopener noreferrer":"","aria-label":e.ariaLabel||e.label,icon:e.icon,iconAlignment:e.iconAlignment??"right",displayType:e.displayType,ImageComponent:n.jsx(B,{src:s??"",alt:u,width:600,height:658,priority:!1,style:i}),children:e.label},o);case"scroll":return n.jsx(l.Button,{as:"scroll",variant:e.variant,scrollTarget:e.scrollTarget??"","aria-label":e.ariaLabel||e.label,icon:e.icon,iconAlignment:e.iconAlignment??"right",displayType:e.displayType,ImageComponent:n.jsx(B,{src:s??"",alt:u,width:600,height:658,priority:!1,style:i}),children:e.label},o);case"modal":return n.jsx(I.Modal,{trigger:n.jsx(l.Button,{as:"button",variant:e.variant??"primary",icon:e.icon,iconAlignment:e.iconAlignment??"right","aria-label":e.ariaLabel||e.label,children:e.label}),content:e.modalContent},o);case"video":return n.jsx(I.Modal,{trigger:n.jsx(l.Button,{as:"button",variant:e.variant??"primary",icon:e.icon,iconAlignment:e.iconAlignment??"right","aria-label":e.ariaLabel||e.label,children:e.label}),content:n.jsx("video",{src:e.videoUrl,controls:!0,autoPlay:!0})},o);case"download":return n.jsx(l.Button,{as:"a",variant:e.variant??"primary",href:a,download:!0,target:"_blank",rel:"noopener noreferrer","aria-label":e.ariaLabel||e.label,icon:e.icon,iconAlignment:e.iconAlignment??"right",children:e.label},o)}})}):null}exports.CallToAction=Q;

package/dist/next/ui/CallToAction/index.mjs

@@ -1,36 +1,37 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useState as O, useEffect as S } from "react";
+import { useState as S, useEffect as W } from "react";
 import C from "next/image";
-import { ButtonGroup as W } from "../../../core/components/ButtonGroup/index.mjs";
+import { ButtonGroup as $ } from "../../../core/components/ButtonGroup/index.mjs";
 import { B as a } from "../../../index-CnlJ2RgH.js";
 import { Modal as R } from "../../../core/components/Modal/index.mjs";
 import { resolveLinkURL as B } from "../../utils/resolveLinkUrl.mjs";
-import { useTheme as $ } from "../../../core/context/ThemeContext.mjs";
-import { useMediaQuery as E } from "../../hooks/useMediaQuery.mjs";
-function Y({
+import { useTheme as E } from "../../../core/context/ThemeContext.mjs";
+import { useMediaQuery as G } from "../../hooks/useMediaQuery.mjs";
+function Z({
   items: n,
   alignment: F,
-  className: M
+  spacing: M,
+  className: P
 }) {
-  const [P, _] = O([]), { mode: t } = $(), s = E("(max-width: 767px)");
-  return S(() => {
+  const [_, z] = S([]), { mode: t } = E(), s = G("(max-width: 767px)");
+  return W(() => {
     if (!(n != null && n.length) || !B) return;
     async function e() {
       const l = await Promise.all(
         n.map((o) => B(o))
       );
-      _(l);
+      z(l);
     }
     e();
-  }, [n]), n != null && n.length ? /* @__PURE__ */ r(W, { className: M, alignment: F, children: n.slice(0, 3).map((e, l) => {
+  }, [n]), n != null && n.length ? /* @__PURE__ */ r($, { className: P, alignment: F, spacing: M, children: n.slice(0, 3).map((e, l) => {
     var p, d, u, f, h, b, y, v, c, k, A, T, w, I, L, U, j, x;
-    const o = P[l] ?? "#", i = {};
+    const o = _[l] ?? "#", i = {};
     if (i.height = "auto", ((p = e.image) == null ? void 0 : p.layout) === "cover")
       i.objectFit = "cover", (d = e.image) != null && d.position && (i.objectPosition = s ? "top" : (u = e.image) == null ? void 0 : u.position);
     else if (((f = e.image) == null ? void 0 : f.layout) === "contain") {
       if (i.objectFit = "contain", ((h = e.image) == null ? void 0 : h.sizing) === "half" ? i.width = s ? "100%" : "50%" : ((b = e.image) == null ? void 0 : b.sizing) === "inset" ? (i.width = "100%", i.maxWidth = e.image.maxWidth ?? "unset") : i.width = "100%", (y = e.image) != null && y.aspectRatio) {
-        const [z, H] = (v = e.image) == null ? void 0 : v.aspectRatio.split(":").map(Number);
-        i.aspectRatio = `${z}/${H}`;
+        const [H, O] = (v = e.image) == null ? void 0 : v.aspectRatio.split(":").map(Number);
+        i.aspectRatio = `${H}/${O}`;
       }
     } else
       i.objectFit = "none";
@@ -151,5 +152,5 @@ function Y({
   }) }) : null;
 }
 export {
-  Y as CallToAction
+  Z as CallToAction
 };

package/dist/next/utils/blockRenderers.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../ui/PortableTextRenderer/index.cjs"),l=require("../ui/CallToAction/index.cjs");function o(r){return r.flatMap(e=>e.children??[]).map(e=>e.text??"").join("")}function x({blocks:r,className:e,textOverride:n,animateText:i}){return r!=null&&r.length?t.jsx(u.RichText,{blocks:r,className:e,textOverride:n,animateText:i}):null}function c({alignment:r,items:e,className:n}){return e!=null&&e.length?t.jsx(l.CallToAction,{alignment:r,items:e,className:n}):null}exports.extractText=o;exports.renderCallToAction=c;exports.renderRichText=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("../ui/PortableTextRenderer/index.cjs"),l=require("../ui/CallToAction/index.cjs");function o(e){return e.flatMap(r=>r.children??[]).map(r=>r.text??"").join("")}function x({blocks:e,className:r,textOverride:n,animateText:t}){return e!=null&&e.length?i.jsx(u.RichText,{blocks:e,className:r,textOverride:n,animateText:t}):null}function c({alignment:e,spacing:r,items:n,className:t}){return n!=null&&n.length?i.jsx(l.CallToAction,{alignment:e,items:n,className:t,spacing:r}):null}exports.extractText=o;exports.renderCallToAction=c;exports.renderRichText=x;

package/dist/next/utils/blockRenderers.mjs

@@ -1,31 +1,40 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { RichText as u } from "../ui/PortableTextRenderer/index.mjs";
 import { CallToAction as f } from "../ui/CallToAction/index.mjs";
-function a(n) {
-  return n.flatMap((r) => r.children ?? []).map((r) => r.text ?? "").join("");
+function a(r) {
+  return r.flatMap((n) => n.children ?? []).map((n) => n.text ?? "").join("");
 }
 function p({
-  blocks: n,
-  className: r,
+  blocks: r,
+  className: n,
   textOverride: t,
-  animateText: o
+  animateText: e
 }) {
-  return n != null && n.length ? /* @__PURE__ */ e(
+  return r != null && r.length ? /* @__PURE__ */ o(
     u,
     {
-      blocks: n,
-      className: r,
+      blocks: r,
+      className: n,
       textOverride: t,
-      animateText: o
+      animateText: e
     }
   ) : null;
 }
 function h({
-  alignment: n,
-  items: r,
-  className: t
+  alignment: r,
+  spacing: n,
+  items: t,
+  className: e
 }) {
-  return r != null && r.length ? /* @__PURE__ */ e(f, { alignment: n, items: r, className: t }) : null;
+  return t != null && t.length ? /* @__PURE__ */ o(
+    f,
+    {
+      alignment: r,
+      items: t,
+      className: e,
+      spacing: n
+    }
+  ) : null;
 }
 export {
   a as extractText,

package/dist/next.d.ts

@@ -244,7 +244,7 @@ export { QuoteBlockProps }
  * <HeroBlock {...section} renderCallToAction={renderCallToAction} />
  * <ContentBlock {...section} renderCallToAction={renderCallToAction} />
  */
-export declare function renderCallToAction({ alignment, items, className, }: RenderCallToActionProps_2): default_2.ReactElement | null;
+export declare function renderCallToAction({ alignment, spacing, items, className, }: RenderCallToActionProps_2): default_2.ReactElement | null;
 
 /**
  * Drop-in `renderRichText` prop for all QuirkUI blocks.

package/package.json

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