quirk-ui 0.1.69 → 0.1.70

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"),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;
+"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,41 +1,51 @@
 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,
+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: g,
+  right: y,
   sm: d,
   md: p,
-  lg: v,
-  fullWidth: $
+  lg: b,
+  fullWidth: v,
+  mobileRow: z
 }, G = {
   left: t.left,
   center: t.center,
   right: t.right
-}, b = {
+}, R = {
   sm: t.sm,
   md: t.md,
   lg: t.lg
 };
 function C({
   children: o,
-  className: n,
-  alignment: l = "left",
-  orientation: r = "horizontal",
-  spacing: s = "md",
-  role: _ = "group",
-  fullWidth: e = !1,
-  ...c
+  className: e,
+  alignment: r = "left",
+  orientation: l = "horizontal",
+  mobileOrientation: n = "column",
+  spacing: a = "md",
+  role: s = "group",
+  fullWidth: _ = !1,
+  ...i
 }) {
-  const i = r === "vertical" ? t.vertical : t.horizontal;
+  const c = l === "vertical" ? t.vertical : t.horizontal;
   return /* @__PURE__ */ m(
     "div",
     {
-      className: `${t.buttonGroup} ${i} ${G[l]} ${b[s]} ${e ? t.fullWidth : ""} ${n ?? ""}`.trim(),
-      role: _,
-      ...c,
+      className: [
+        t.buttonGroup,
+        c,
+        G[r],
+        R[a],
+        _ ? t.fullWidth : "",
+        n === "row" ? t.mobileRow : "",
+        e ?? ""
+      ].filter(Boolean).join(" "),
+      role: s,
+      ...i,
       children: o
     }
   );

package/dist/core.d.ts

@@ -175,13 +175,14 @@ 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, spacing, 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;
+    mobileOrientation?: "row" | "column";
     spacing?: ButtonGroupSpacing;
     role?: string;
     fullWidth?: boolean;

package/dist/index33.css

@@ -1 +1 @@
-._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}}
+._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,13 +282,14 @@ 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, spacing, 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;
+    mobileOrientation?: "row" | "column";
     spacing?: ButtonGroupSpacing;
     role?: string;
     fullWidth?: boolean;
@@ -1498,7 +1499,7 @@ declare type RangeSize = "sm" | "md" | "lg";
  * <HeroBlock {...section} renderCallToAction={renderCallToAction} />
  * <ContentBlock {...section} renderCallToAction={renderCallToAction} />
  */
-export declare function renderCallToAction({ alignment, spacing, 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 }
 

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"),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;
+"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,156 +1,166 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useState as S, useEffect as W } from "react";
+import { useState as W, useEffect as $ } from "react";
 import C from "next/image";
-import { ButtonGroup as $ } 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 E } from "../../../core/context/ThemeContext.mjs";
-import { useMediaQuery as G } from "../../hooks/useMediaQuery.mjs";
-function Z({
+import { useTheme as G } from "../../../core/context/ThemeContext.mjs";
+import { useMediaQuery as N } from "../../hooks/useMediaQuery.mjs";
+function ee({
   items: n,
   alignment: F,
   spacing: M,
-  className: P
+  mobileOrientation: P = "column",
+  className: _
 }) {
-  const [_, z] = S([]), { mode: t } = E(), s = G("(max-width: 767px)");
-  return W(() => {
+  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))
       );
-      z(l);
+      H(l);
     }
     e();
-  }, [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 = _[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 [H, O] = (v = e.image) == null ? void 0 : v.aspectRatio.split(":").map(Number);
-        i.aspectRatio = `${H}/${O}`;
-      }
-    } 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 {
-  Z as CallToAction
+  ee as CallToAction
 };

package/dist/next/utils/blockRenderers.cjs

@@ -1 +1 @@
-"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;
+"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,43 +1,45 @@
 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(r) {
+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({
+function h({
   blocks: r,
   className: n,
-  textOverride: t,
-  animateText: e
+  textOverride: e,
+  animateText: t
 }) {
   return r != null && r.length ? /* @__PURE__ */ o(
-    u,
+    f,
     {
       blocks: r,
       className: n,
-      textOverride: t,
-      animateText: e
+      textOverride: e,
+      animateText: t
     }
   ) : null;
 }
-function h({
+function T({
   alignment: r,
   spacing: n,
+  mobileOrientation: e,
   items: t,
-  className: e
+  className: u
 }) {
   return t != null && t.length ? /* @__PURE__ */ o(
-    f,
+    i,
     {
       alignment: r,
       items: t,
-      className: e,
-      spacing: n
+      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, spacing, 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.69",
+  "version": "0.1.70",
   "type": "module",
   "exports": {
     ".": {