quirk-ui 0.1.68 → 0.1.70

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 u=require("react/jsx-runtime"),m="_buttonGroup_eawyr_1",w="_horizontal_eawyr_9",g="_vertical_eawyr_14",f="_left_eawyr_20",h="_center_eawyr_24",y="_right_eawyr_28",d="_sm_eawyr_33",p="_md_eawyr_37",b="_lg_eawyr_41",v="_fullWidth_eawyr_46",G="_mobileRow_eawyr_65",t={buttonGroup:m,horizontal:w,vertical:g,left:f,center:h,right:y,sm:d,md:p,lg:b,fullWidth:v,mobileRow:G},z={left:t.left,center:t.center,right:t.right},R={sm:t.sm,md:t.md,lg:t.lg};function W({children:o,className:e,alignment:r="left",orientation:l="horizontal",mobileOrientation:n="column",spacing:i="md",role:s="group",fullWidth:a=!1,..._}){const c=l==="vertical"?t.vertical:t.horizontal;return u.jsx("div",{className:[t.buttonGroup,c,z[r],R[i],a?t.fullWidth:"",n==="row"?t.mobileRow:"",e??""].filter(Boolean).join(" "),role:s,..._,children:o})}exports.ButtonGroup=W;

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

@@ -1,45 +1,55 @@
-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,
+import { jsx as m } from "react/jsx-runtime";
+import '../../../index33.css';const u = "_buttonGroup_eawyr_1", w = "_horizontal_eawyr_9", f = "_vertical_eawyr_14", h = "_left_eawyr_20", g = "_center_eawyr_24", y = "_right_eawyr_28", d = "_sm_eawyr_33", p = "_md_eawyr_37", b = "_lg_eawyr_41", v = "_fullWidth_eawyr_46", z = "_mobileRow_eawyr_65", t = {
+  buttonGroup: u,
+  horizontal: w,
+  vertical: f,
   left: h,
-  center: f,
-  right: x,
+  center: g,
+  right: y,
   sm: d,
   md: p,
-  lg: v,
-  fullWidth: z
-}, $ = {
+  lg: b,
+  fullWidth: v,
+  mobileRow: z
+}, G = {
   left: t.left,
   center: t.center,
   right: t.right
-}, G = {
+}, R = {
   sm: t.sm,
   md: t.md,
   lg: t.lg
 };
-function W({
+function C({
   children: o,
-  className: s,
-  alignment: e = "left",
+  className: e,
+  alignment: r = "left",
   orientation: l = "horizontal",
-  size: n = "md",
-  role: r = "group",
+  mobileOrientation: n = "column",
+  spacing: a = "md",
+  role: s = "group",
   fullWidth: _ = !1,
   ...i
 }) {
   const c = l === "vertical" ? t.vertical : t.horizontal;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: `${t.buttonGroup} ${c} ${$[e]} ${G[n]} ${_ ? t.fullWidth : ""} ${s ?? ""}`.trim(),
-      role: r,
+      className: [
+        t.buttonGroup,
+        c,
+        G[r],
+        R[a],
+        _ ? t.fullWidth : "",
+        n === "row" ? t.mobileRow : "",
+        e ?? ""
+      ].filter(Boolean).join(" "),
+      role: s,
       ...i,
       children: o
     }
   );
 }
 export {
-  W as ButtonGroup
+  C as ButtonGroup
 };

package/dist/core.d.ts

@@ -175,23 +175,24 @@ 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, mobileOrientation, spacing, role, fullWidth, ...restProps }: ButtonGroupProps): JSX.Element;
 
 declare type ButtonGroupProps = {
     children: default_2.ReactNode;
     className?: string;
     alignment?: Alignment;
     orientation?: Orientation;
-    size?: ButtonGroupSize;
+    mobileOrientation?: "row" | "column";
+    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 +381,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 +1162,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 +1298,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 +1310,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 +1326,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 +1334,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 +1369,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 +1388,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_eawyr_1{display:flex;gap:var(--spacing-sm);align-items:center;width:fit-content}._horizontal_eawyr_9{flex-direction:row;flex-wrap:wrap}._vertical_eawyr_14{flex-direction:column;align-items:stretch}._left_eawyr_20{justify-content:flex-start}._center_eawyr_24{justify-content:center}._right_eawyr_28{justify-content:flex-end}._sm_eawyr_33{gap:var(--spacing-sm)}._md_eawyr_37{gap:var(--spacing-md)}._lg_eawyr_41{gap:var(--spacing-lg)}._fullWidth_eawyr_46{width:100%}._fullWidth_eawyr_46._horizontal_eawyr_9>*{flex:1}._fullWidth_eawyr_46._vertical_eawyr_14{align-items:stretch}@media (max-width: 480px){._buttonGroup_eawyr_1{width:100%}._horizontal_eawyr_9:not(._mobileRow_eawyr_65){flex-direction:column;align-items:stretch}._mobileRow_eawyr_65{flex-direction:row;flex-wrap:wrap;width:fit-content}}

package/dist/main.d.ts

@@ -282,23 +282,24 @@ 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, mobileOrientation, spacing, role, fullWidth, ...restProps }: ButtonGroupProps): JSX.Element;
 
 declare type ButtonGroupProps = {
     children: default_2.ReactNode;
     className?: string;
     alignment?: Alignment;
     orientation?: Orientation;
-    size?: ButtonGroupSize;
+    mobileOrientation?: "row" | "column";
+    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 +545,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 +1412,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 +1499,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, mobileOrientation, items, className, }: RenderCallToActionProps_3): default_2.ReactElement | null;
 
 export { RenderCallToActionProps }
 
@@ -1659,7 +1660,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 +1672,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 +1688,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 +1696,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 +1731,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 +1750,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"),G=require("../../../core/components/ButtonGroup/index.cjs"),l=require("../../../index-D0ylyll7.cjs"),I=require("../../../core/components/Modal/index.cjs"),C=require("../../utils/resolveLinkUrl.cjs"),H=require("../../../core/context/ThemeContext.cjs"),Q=require("../../hooks/useMediaQuery.cjs");function W({items:r,alignment:M,spacing:R,mobileOrientation:P="column",className:S}){const[$,F]=U.useState([]),{mode:t}=H.useTheme(),g=Q.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)));F(o)}e()},[r]),r!=null&&r.length?n.jsx(G.ButtonGroup,{className:S,alignment:M,spacing:R,mobileOrientation:P,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=$[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[O,z]=(y=e.image)==null?void 0:y.aspectRatio.split(":").map(Number);i.aspectRatio=`${O}/${z}`}}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=W;

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

@@ -1,155 +1,166 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useState as O, useEffect as S } from "react";
+import { useState as W, useEffect as $ } from "react";
 import C from "next/image";
-import { ButtonGroup as W } from "../../../core/components/ButtonGroup/index.mjs";
+import { ButtonGroup as E } 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 G } from "../../../core/context/ThemeContext.mjs";
+import { useMediaQuery as N } from "../../hooks/useMediaQuery.mjs";
+function ee({
   items: n,
   alignment: F,
-  className: M
+  spacing: M,
+  mobileOrientation: P = "column",
+  className: _
 }) {
-  const [P, _] = O([]), { mode: t } = $(), s = E("(max-width: 767px)");
-  return S(() => {
+  const [z, H] = W([]), { mode: t } = G(), s = N("(max-width: 767px)");
+  return $(() => {
     if (!(n != null && n.length) || !B) return;
     async function e() {
       const l = await Promise.all(
         n.map((o) => B(o))
       );
-      _(l);
+      H(l);
     }
     e();
-  }, [n]), n != null && n.length ? /* @__PURE__ */ r(W, { className: M, alignment: F, 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 = {};
-    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}`;
-      }
-    } else
-      i.objectFit = "none";
-    let m;
-    (c = e.image) != null && c.imageUrls && (m = t === "dark" && ((k = e.image.imageUrls.dark) == null ? void 0 : k.medium) || e.image.imageUrls.default.medium);
-    let g = ((w = (T = (A = e.image) == null ? void 0 : A[t === "dark" ? "darkImage" : "defaultImage"]) == null ? void 0 : T.asset) == null ? void 0 : w.altText) || ((U = (L = (I = e.image) == null ? void 0 : I[t === "dark" ? "darkImage" : "defaultImage"]) == null ? void 0 : L.asset) == null ? void 0 : U.description) || "Card image";
-    switch (e.type) {
-      case "link":
-        return /* @__PURE__ */ r(
-          a,
-          {
-            as: "a",
-            variant: e.variant,
-            href: o,
-            target: ((j = e.linkOptions) == null ? void 0 : j.linkType) === "external" ? "_blank" : "_self",
-            rel: ((x = e.linkOptions) == null ? void 0 : x.linkType) === "external" ? "noopener noreferrer" : "",
-            "aria-label": e.ariaLabel || e.label,
-            icon: e.icon,
-            iconAlignment: e.iconAlignment ?? "right",
-            displayType: e.displayType,
-            ImageComponent: /* @__PURE__ */ r(
-              C,
-              {
-                src: m ?? "",
-                alt: g,
-                width: 600,
-                height: 658,
-                priority: !1,
-                style: i
-              }
-            ),
-            children: e.label
-          },
-          l
-        );
-      case "scroll":
-        return /* @__PURE__ */ r(
-          a,
-          {
-            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: /* @__PURE__ */ r(
-              C,
-              {
-                src: m ?? "",
-                alt: g,
-                width: 600,
-                height: 658,
-                priority: !1,
-                style: i
-              }
-            ),
-            children: e.label
-          },
-          l
-        );
-      case "modal":
-        return /* @__PURE__ */ r(
-          R,
-          {
-            trigger: /* @__PURE__ */ r(
+  }, [n]), n != null && n.length ? /* @__PURE__ */ r(
+    E,
+    {
+      className: _,
+      alignment: F,
+      spacing: M,
+      mobileOrientation: P,
+      children: n.slice(0, 3).map((e, l) => {
+        var p, d, u, f, h, b, y, c, v, k, A, T, w, I, L, U, j, x;
+        const o = z[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 [O, S] = (c = e.image) == null ? void 0 : c.aspectRatio.split(":").map(Number);
+            i.aspectRatio = `${O}/${S}`;
+          }
+        } else
+          i.objectFit = "none";
+        let m;
+        (v = e.image) != null && v.imageUrls && (m = t === "dark" && ((k = e.image.imageUrls.dark) == null ? void 0 : k.medium) || e.image.imageUrls.default.medium);
+        let g = ((w = (T = (A = e.image) == null ? void 0 : A[t === "dark" ? "darkImage" : "defaultImage"]) == null ? void 0 : T.asset) == null ? void 0 : w.altText) || ((U = (L = (I = e.image) == null ? void 0 : I[t === "dark" ? "darkImage" : "defaultImage"]) == null ? void 0 : L.asset) == null ? void 0 : U.description) || "Card image";
+        switch (e.type) {
+          case "link":
+            return /* @__PURE__ */ r(
               a,
               {
-                as: "button",
-                variant: e.variant ?? "primary",
+                as: "a",
+                variant: e.variant,
+                href: o,
+                target: ((j = e.linkOptions) == null ? void 0 : j.linkType) === "external" ? "_blank" : "_self",
+                rel: ((x = e.linkOptions) == null ? void 0 : x.linkType) === "external" ? "noopener noreferrer" : "",
+                "aria-label": e.ariaLabel || e.label,
                 icon: e.icon,
                 iconAlignment: e.iconAlignment ?? "right",
+                displayType: e.displayType,
+                ImageComponent: /* @__PURE__ */ r(
+                  C,
+                  {
+                    src: m ?? "",
+                    alt: g,
+                    width: 600,
+                    height: 658,
+                    priority: !1,
+                    style: i
+                  }
+                ),
+                children: e.label
+              },
+              l
+            );
+          case "scroll":
+            return /* @__PURE__ */ r(
+              a,
+              {
+                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: /* @__PURE__ */ r(
+                  C,
+                  {
+                    src: m ?? "",
+                    alt: g,
+                    width: 600,
+                    height: 658,
+                    priority: !1,
+                    style: i
+                  }
+                ),
                 children: e.label
-              }
-            ),
-            content: e.modalContent
-          },
-          l
-        );
-      case "video":
-        return /* @__PURE__ */ r(
-          R,
-          {
-            trigger: /* @__PURE__ */ r(
+              },
+              l
+            );
+          case "modal":
+            return /* @__PURE__ */ r(
+              R,
+              {
+                trigger: /* @__PURE__ */ r(
+                  a,
+                  {
+                    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
+              },
+              l
+            );
+          case "video":
+            return /* @__PURE__ */ r(
+              R,
+              {
+                trigger: /* @__PURE__ */ r(
+                  a,
+                  {
+                    as: "button",
+                    variant: e.variant ?? "primary",
+                    icon: e.icon,
+                    iconAlignment: e.iconAlignment ?? "right",
+                    "aria-label": e.ariaLabel || e.label,
+                    children: e.label
+                  }
+                ),
+                content: /* @__PURE__ */ r("video", { src: e.videoUrl, controls: !0, autoPlay: !0 })
+              },
+              l
+            );
+          case "download":
+            return /* @__PURE__ */ r(
               a,
               {
-                as: "button",
+                as: "a",
                 variant: e.variant ?? "primary",
+                href: o,
+                download: !0,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": e.ariaLabel || e.label,
                 icon: e.icon,
                 iconAlignment: e.iconAlignment ?? "right",
-                "aria-label": e.ariaLabel || e.label,
                 children: e.label
-              }
-            ),
-            content: /* @__PURE__ */ r("video", { src: e.videoUrl, controls: !0, autoPlay: !0 })
-          },
-          l
-        );
-      case "download":
-        return /* @__PURE__ */ r(
-          a,
-          {
-            as: "a",
-            variant: e.variant ?? "primary",
-            href: o,
-            download: !0,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            "aria-label": e.ariaLabel || e.label,
-            icon: e.icon,
-            iconAlignment: e.iconAlignment ?? "right",
-            children: e.label
-          },
-          l
-        );
+              },
+              l
+            );
+        }
+      })
     }
-  }) }) : null;
+  ) : null;
 }
 export {
-  Y as CallToAction
+  ee 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"),l=require("../ui/PortableTextRenderer/index.cjs"),o=require("../ui/CallToAction/index.cjs");function x(e){return e.flatMap(r=>r.children??[]).map(r=>r.text??"").join("")}function c({blocks:e,className:r,textOverride:t,animateText:n}){return e!=null&&e.length?i.jsx(l.RichText,{blocks:e,className:r,textOverride:t,animateText:n}):null}function a({alignment:e,spacing:r,mobileOrientation:t,items:n,className:u}){return n!=null&&n.length?i.jsx(o.CallToAction,{alignment:e,items:n,className:u,spacing:r,mobileOrientation:t}):null}exports.extractText=x;exports.renderCallToAction=a;exports.renderRichText=c;

package/dist/next/utils/blockRenderers.mjs

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

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, mobileOrientation, 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.70",
   "type": "module",
   "exports": {
     ".": {