quirk-ui 0.1.139 → 0.1.140

package/dist/next/cards/GridCard/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index17.css');const s=require("react/jsx-runtime"),f=require("../../../core/components/Modal/index.cjs"),O=require("../../utils/resolveLinkUrl.cjs"),S=require("../../hooks/useMediaQuery.cjs"),$=require("../../hooks/useStyleClasses.cjs"),U=require("../../../core/context/ThemeContext.cjs"),d=require("../../utils/mediaUtils.cjs"),P=require("../../../play-CQBnZgNa.cjs"),F=require("../../../arrow-right-DO6S4vfx.cjs"),W="_cardLink_1aspq_1",z="_card_1aspq_1",G="_container_1aspq_21",D="_content_1aspq_31",E="_icon_1aspq_38",Q="_modalTrigger_1aspq_60",Y="_callToAction_1aspq_65",H="_label_1aspq_66",J="_cardIcon_1aspq_71",K="_title_1aspq_78",X="_description_1aspq_101",Z="_imageWrapper_1aspq_116",V="_metric_1aspq_205",R="_outerCircle_1aspq_222",A="_innerCircle_1aspq_227",T="_metricLabel_1aspq_233",ee="_textOnly_1aspq_241",se="_imageOnly_1aspq_278",ae="_fullBleed_1aspq_303",te="_imageTop_1aspq_344",ne="_imageBottom_1aspq_363",re="_imageLeft_1aspq_391",oe="_imageRight_1aspq_401",ie="_containImage_1aspq_459",le="_fullBleedImage_1aspq_467",ce="_image_1aspq_116",_e="_eyebrow_1aspq_563",me="_cta_1aspq_575",de="_secondary_1aspq_576",e={cardLink:W,card:z,container:G,content:D,icon:E,modalTrigger:Q,callToAction:Y,label:H,cardIcon:J,title:K,description:X,imageWrapper:Z,metric:V,outerCircle:R,innerCircle:A,metricLabel:T,textOnly:ee,imageOnly:se,fullBleed:ae,imageTop:te,imageBottom:ne,imageLeft:re,imageRight:oe,containImage:ie,fullBleedImage:le,image:ce,eyebrow:_e,cta:me,secondary:de},j={"full-bleed":e.fullBleed,text:e.textOnly,metric:e.metric,"image-left":e.imageLeft,"image-right":e.imageRight,"image-top":e.imageTop,"image-bottom":e.imageBottom,"image-only":e.imageOnly};function ge({value:a}){if(!a.includes("%"))return s.jsx("div",{className:e.metric});const t=125,n=(t-10)/2,r=2*Math.PI*n,l=r-parseFloat(a)/100*r;return s.jsxs("svg",{width:t,height:t,viewBox:`0 0 ${t} ${t}`,children:[s.jsx("circle",{className:e.outerCircle,cx:t/2,cy:t/2,r:n,fill:"none"}),s.jsx("circle",{className:e.innerCircle,cx:t/2,cy:t/2,r:n,fill:"none",strokeDasharray:r,strokeDashoffset:l,strokeLinecap:"round",transform:`rotate(-90 ${t/2} ${t/2})`}),s.jsx("text",{className:e.metricLabel,x:"50%",y:"52%",dominantBaseline:"middle",textAnchor:"middle",children:a})]})}function pe({callToAction:a,resolvedUrl:t,children:n}){var r,l;switch(a==null?void 0:a.type){case"link":return s.jsx("a",{className:e.cardLink,"aria-label":a.ariaLabel||a.label,href:t,target:((r=a.linkOptions)==null?void 0:r.linkType)==="external"?"_blank":"_self",rel:((l=a.linkOptions)==null?void 0:l.linkType)==="external"?"noopener noreferrer":"",children:n});case"modal":return s.jsx(f.Modal,{className:e.modalTrigger,trigger:n,content:a.modalContent});case"video":return s.jsx(f.Modal,{className:e.modalTrigger,trigger:n,content:s.jsx("video",{src:a.videoUrl,controls:!0,autoPlay:!0})});case"download":return s.jsx("a",{className:e.cardLink,"aria-label":a.ariaLabel||a.label,href:t,download:!0,target:"_blank",rel:"noopener noreferrer",children:n});default:return s.jsx(s.Fragment,{children:n})}}function ue({style:a,variant:t="noImage",metricValue:n,eyebrow:r,title:l,description:_,image:c,icon:g,callToAction:o,onHover:b,onLeave:h,gridArea:p,styleOptions:v,renderImage:u,renderRichText:i}){const{mode:q}=U.useTheme(),x=S.useMediaQuery("(max-width: 767px)"),N=$.useStyleClasses(v),k=O.resolveLinkURL(o),m=d.resolveImageUrl(c,q),y=d.resolveAltText(c,q),L=d.resolveImageStyle(c,x),C=(c==null?void 0:c.layout)==="cover",B=j[a??"image-top"]??j["image-top"],I=c&&m?s.jsx("div",{className:e.imageWrapper,children:u?u({src:m,alt:y,width:600,height:658,style:L}):s.jsx("img",{src:m,alt:y,width:600,height:658})}):null,w=!n&&!r&&!l&&!_,M=s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:`${e.container} ${C?e.fullBleedImage:e.containImage}`,children:[t!=="image"&&!w&&s.jsxs("div",{className:e.content,children:[g&&s.jsx("div",{className:e.icon,children:s.jsx("i",{className:g})}),n&&s.jsx(ge,{value:n}),r&&(i==null?void 0:i({blocks:r,className:e.eyebrow})),l&&(i==null?void 0:i({blocks:l,className:e.title})),_&&(i==null?void 0:i({blocks:_,className:e.description}))]}),I]}),(o==null?void 0:o.videoUrl)&&s.jsxs("div",{className:e.callToAction,children:[s.jsx("div",{className:e.label,children:o.label}),s.jsx("div",{className:e.cardIcon,children:s.jsx(P.Play,{size:45})})]}),(o==null?void 0:o.type)==="link"&&s.jsxs("div",{className:e.callToAction,children:[s.jsx("div",{className:e.label,children:o.label}),s.jsx("div",{className:e.cardIcon,children:s.jsx(F.ArrowRight,{size:45})})]})]});return s.jsx("div",{className:[N,e.card,B,e[t]??""].filter(Boolean).join(" "),onMouseEnter:b,onMouseLeave:h,style:p&&!x?{gridArea:p}:{},children:s.jsx(pe,{callToAction:o,resolvedUrl:k,children:M})})}exports.GridCard=ue;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index17.css');const s=require("react/jsx-runtime"),j=require("../../../core/components/Modal/index.cjs"),O=require("../../utils/resolveLinkUrl.cjs"),S=require("../../hooks/useMediaQuery.cjs"),$=require("../../hooks/useStyleClasses.cjs"),U=require("../../../core/context/ThemeContext.cjs"),d=require("../../utils/mediaUtils.cjs"),P=require("../../../play-CQBnZgNa.cjs"),F=require("../../../arrow-right-DO6S4vfx.cjs"),W="_cardLink_1aspq_1",z="_card_1aspq_1",G="_container_1aspq_21",D="_content_1aspq_31",E="_icon_1aspq_38",Q="_modalTrigger_1aspq_60",Y="_callToAction_1aspq_65",H="_label_1aspq_66",J="_cardIcon_1aspq_71",K="_title_1aspq_78",X="_description_1aspq_101",Z="_imageWrapper_1aspq_116",V="_metric_1aspq_205",R="_outerCircle_1aspq_222",A="_innerCircle_1aspq_227",T="_metricLabel_1aspq_233",ee="_textOnly_1aspq_241",se="_imageOnly_1aspq_278",ae="_fullBleed_1aspq_303",te="_imageTop_1aspq_344",ne="_imageBottom_1aspq_363",re="_imageLeft_1aspq_391",oe="_imageRight_1aspq_401",ie="_containImage_1aspq_459",le="_fullBleedImage_1aspq_467",ce="_image_1aspq_116",_e="_eyebrow_1aspq_563",me="_cta_1aspq_575",de="_secondary_1aspq_576",e={cardLink:W,card:z,container:G,content:D,icon:E,modalTrigger:Q,callToAction:Y,label:H,cardIcon:J,title:K,description:X,imageWrapper:Z,metric:V,outerCircle:R,innerCircle:A,metricLabel:T,textOnly:ee,imageOnly:se,fullBleed:ae,imageTop:te,imageBottom:ne,imageLeft:re,imageRight:oe,containImage:ie,fullBleedImage:le,image:ce,eyebrow:_e,cta:me,secondary:de},b={"full-bleed":e.fullBleed,text:e.textOnly,metric:e.metric,"image-left":e.imageLeft,"image-right":e.imageRight,"image-top":e.imageTop,"image-bottom":e.imageBottom,"image-only":e.imageOnly};function ge({value:a}){if(!a.includes("%"))return s.jsx("div",{className:e.metric});const t=125,n=(t-10)/2,r=2*Math.PI*n,l=r-parseFloat(a)/100*r;return s.jsxs("svg",{width:t,height:t,viewBox:`0 0 ${t} ${t}`,children:[s.jsx("circle",{className:e.outerCircle,cx:t/2,cy:t/2,r:n,fill:"none"}),s.jsx("circle",{className:e.innerCircle,cx:t/2,cy:t/2,r:n,fill:"none",strokeDasharray:r,strokeDashoffset:l,strokeLinecap:"round",transform:`rotate(-90 ${t/2} ${t/2})`}),s.jsx("text",{className:e.metricLabel,x:"50%",y:"52%",dominantBaseline:"middle",textAnchor:"middle",children:a})]})}function pe({callToAction:a,resolvedUrl:t,children:n}){var r,l;switch(a==null?void 0:a.type){case"link":return s.jsx("a",{className:e.cardLink,"aria-label":a.ariaLabel||a.label,href:t,target:((r=a.linkOptions)==null?void 0:r.linkType)==="external"?"_blank":"_self",rel:((l=a.linkOptions)==null?void 0:l.linkType)==="external"?"noopener noreferrer":"",children:n});case"modal":return s.jsx(j.Modal,{className:e.modalTrigger,trigger:n,content:a.modalContent});case"video":return s.jsx(j.Modal,{className:e.modalTrigger,trigger:n,content:s.jsx("video",{src:a.videoUrl,controls:!0,autoPlay:!0})});case"download":return s.jsx("a",{className:e.cardLink,"aria-label":a.ariaLabel||a.label,href:t,download:!0,target:"_blank",rel:"noopener noreferrer",children:n});default:return s.jsx(s.Fragment,{children:n})}}function ue({style:a,variant:t="noImage",metricValue:n,eyebrow:r,title:l,description:_,image:c,icon:g,callToAction:o,onHover:v,onLeave:h,gridArea:p,styleOptions:N,renderImage:u,renderRichText:i}){const{mode:q}=U.useTheme(),x=S.useMediaQuery("(max-width: 767px)"),k=$.useStyleClasses(N),L=O.resolveLinkURL(o),m=d.resolveImageUrl(c,q),y=d.resolveAltText(c,q),f=d.resolveImageStyle(c,x),C=(c==null?void 0:c.layout)==="cover",B=b[a??"image-top"]??b["image-top"],I=c&&m?s.jsx("div",{className:e.imageWrapper,children:u?u({src:m,alt:y,width:600,height:658,style:a==="full-bleed"?{objectFit:"cover",objectPosition:"top"}:f}):s.jsx("img",{src:m,alt:y,width:600,height:658,style:f})}):null,w=!n&&!r&&!l&&!_,M=s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:`${e.container} ${C?e.fullBleedImage:e.containImage}`,children:[t!=="image"&&!w&&s.jsxs("div",{className:e.content,children:[g&&s.jsx("div",{className:e.icon,children:s.jsx("i",{className:g})}),n&&s.jsx(ge,{value:n}),r&&(i==null?void 0:i({blocks:r,className:e.eyebrow})),l&&(i==null?void 0:i({blocks:l,className:e.title})),_&&(i==null?void 0:i({blocks:_,className:e.description}))]}),I]}),(o==null?void 0:o.videoUrl)&&s.jsxs("div",{className:e.callToAction,children:[s.jsx("div",{className:e.label,children:o.label}),s.jsx("div",{className:e.cardIcon,children:s.jsx(P.Play,{size:45})})]}),(o==null?void 0:o.type)==="link"&&s.jsxs("div",{className:e.callToAction,children:[s.jsx("div",{className:e.label,children:o.label}),s.jsx("div",{className:e.cardIcon,children:s.jsx(F.ArrowRight,{size:45})})]})]});return s.jsx("div",{className:[k,e.card,B,e[t]??""].filter(Boolean).join(" "),onMouseEnter:v,onMouseLeave:h,style:p&&!x?{gridArea:p}:{},children:s.jsx(pe,{callToAction:o,resolvedUrl:L,children:M})})}exports.GridCard=ue;

package/dist/next/cards/GridCard/index.mjs

@@ -1,13 +1,13 @@
-import { jsx as a, jsxs as m, Fragment as v } from "react/jsx-runtime";
-import { Modal as b } from "../../../core/components/Modal/index.mjs";
-import { resolveLinkURL as $ } from "../../utils/resolveLinkUrl.mjs";
-import { useMediaQuery as P } from "../../hooks/useMediaQuery.mjs";
-import { useStyleClasses as U } from "../../hooks/useStyleClasses.mjs";
-import { useTheme as W } from "../../../core/context/ThemeContext.mjs";
-import { resolveImageUrl as j, resolveAltText as z, resolveImageStyle as F } from "../../utils/mediaUtils.mjs";
+import { jsx as a, jsxs as m, Fragment as h } from "react/jsx-runtime";
+import { Modal as v } from "../../../core/components/Modal/index.mjs";
+import { resolveLinkURL as S } from "../../utils/resolveLinkUrl.mjs";
+import { useMediaQuery as $ } from "../../hooks/useMediaQuery.mjs";
+import { useStyleClasses as j } from "../../hooks/useStyleClasses.mjs";
+import { useTheme as U } from "../../../core/context/ThemeContext.mjs";
+import { resolveImageUrl as F, resolveAltText as W, resolveImageStyle as z } from "../../utils/mediaUtils.mjs";
 import { P as D } from "../../../play-DYgKiSaf.js";
 import { A as E } from "../../../arrow-right-QEwnX3Sk.js";
-import '../../../index17.css';const G = "_cardLink_1aspq_1", Q = "_card_1aspq_1", Y = "_container_1aspq_21", H = "_content_1aspq_31", J = "_icon_1aspq_38", K = "_modalTrigger_1aspq_60", X = "_callToAction_1aspq_65", Z = "_label_1aspq_66", V = "_cardIcon_1aspq_71", R = "_title_1aspq_78", A = "_description_1aspq_101", T = "_imageWrapper_1aspq_116", ee = "_metric_1aspq_205", ae = "_outerCircle_1aspq_222", se = "_innerCircle_1aspq_227", te = "_metricLabel_1aspq_233", re = "_textOnly_1aspq_241", ne = "_imageOnly_1aspq_278", oe = "_fullBleed_1aspq_303", ie = "_imageTop_1aspq_344", le = "_imageBottom_1aspq_363", ce = "_imageLeft_1aspq_391", me = "_imageRight_1aspq_401", _e = "_containImage_1aspq_459", de = "_fullBleedImage_1aspq_467", ge = "_image_1aspq_116", pe = "_eyebrow_1aspq_563", fe = "_cta_1aspq_575", ue = "_secondary_1aspq_576", e = {
+import '../../../index17.css';const G = "_cardLink_1aspq_1", Q = "_card_1aspq_1", Y = "_container_1aspq_21", H = "_content_1aspq_31", J = "_icon_1aspq_38", K = "_modalTrigger_1aspq_60", X = "_callToAction_1aspq_65", Z = "_label_1aspq_66", V = "_cardIcon_1aspq_71", R = "_title_1aspq_78", A = "_description_1aspq_101", T = "_imageWrapper_1aspq_116", ee = "_metric_1aspq_205", ae = "_outerCircle_1aspq_222", se = "_innerCircle_1aspq_227", te = "_metricLabel_1aspq_233", re = "_textOnly_1aspq_241", oe = "_imageOnly_1aspq_278", ne = "_fullBleed_1aspq_303", ie = "_imageTop_1aspq_344", le = "_imageBottom_1aspq_363", ce = "_imageLeft_1aspq_391", me = "_imageRight_1aspq_401", _e = "_containImage_1aspq_459", de = "_fullBleedImage_1aspq_467", pe = "_image_1aspq_116", ge = "_eyebrow_1aspq_563", fe = "_cta_1aspq_575", ue = "_secondary_1aspq_576", e = {
   cardLink: G,
   card: Q,
   container: Y,
@@ -25,16 +25,16 @@ import '../../../index17.css';const G = "_cardLink_1aspq_1", Q = "_card_1aspq_1"
   innerCircle: se,
   metricLabel: te,
   textOnly: re,
-  imageOnly: ne,
-  fullBleed: oe,
+  imageOnly: oe,
+  fullBleed: ne,
   imageTop: ie,
   imageBottom: le,
   imageLeft: ce,
   imageRight: me,
   containImage: _e,
   fullBleedImage: de,
-  image: ge,
-  eyebrow: pe,
+  image: pe,
+  eyebrow: ge,
   cta: fe,
   secondary: ue
 }, N = {
@@ -49,7 +49,7 @@ import '../../../index17.css';const G = "_cardLink_1aspq_1", Q = "_card_1aspq_1"
 };
 function ye({ value: s }) {
   if (!s.includes("%")) return /* @__PURE__ */ a("div", { className: e.metric });
-  const t = 125, r = (t - 10) / 2, n = 2 * Math.PI * r, l = n - parseFloat(s) / 100 * n;
+  const t = 125, r = (t - 10) / 2, o = 2 * Math.PI * r, l = o - parseFloat(s) / 100 * o;
   return /* @__PURE__ */ m("svg", { width: t, height: t, viewBox: `0 0 ${t} ${t}`, children: [
     /* @__PURE__ */ a(
       "circle",
@@ -69,7 +69,7 @@ function ye({ value: s }) {
         cy: t / 2,
         r,
         fill: "none",
-        strokeDasharray: n,
+        strokeDasharray: o,
         strokeDashoffset: l,
         strokeLinecap: "round",
         transform: `rotate(-90 ${t / 2} ${t / 2})`
@@ -88,12 +88,12 @@ function ye({ value: s }) {
     )
   ] });
 }
-function qe({
+function be({
   callToAction: s,
   resolvedUrl: t,
   children: r
 }) {
-  var n, l;
+  var o, l;
   switch (s == null ? void 0 : s.type) {
     case "link":
       return /* @__PURE__ */ a(
@@ -102,14 +102,14 @@ function qe({
           className: e.cardLink,
           "aria-label": s.ariaLabel || s.label,
           href: t,
-          target: ((n = s.linkOptions) == null ? void 0 : n.linkType) === "external" ? "_blank" : "_self",
+          target: ((o = s.linkOptions) == null ? void 0 : o.linkType) === "external" ? "_blank" : "_self",
           rel: ((l = s.linkOptions) == null ? void 0 : l.linkType) === "external" ? "noopener noreferrer" : "",
           children: r
         }
       );
     case "modal":
       return /* @__PURE__ */ a(
-        b,
+        v,
         {
           className: e.modalTrigger,
           trigger: r,
@@ -118,7 +118,7 @@ function qe({
       );
     case "video":
       return /* @__PURE__ */ a(
-        b,
+        v,
         {
           className: e.modalTrigger,
           trigger: r,
@@ -139,50 +139,51 @@ function qe({
         }
       );
     default:
-      return /* @__PURE__ */ a(v, { children: r });
+      return /* @__PURE__ */ a(h, { children: r });
   }
 }
 function we({
   style: s,
   variant: t = "noImage",
   metricValue: r,
-  eyebrow: n,
+  eyebrow: o,
   title: l,
   description: _,
   image: c,
-  icon: g,
-  callToAction: o,
-  onHover: h,
-  onLeave: k,
-  gridArea: p,
-  styleOptions: L,
+  icon: p,
+  callToAction: n,
+  onHover: k,
+  onLeave: L,
+  gridArea: g,
+  styleOptions: B,
   renderImage: f,
   renderRichText: i
 }) {
-  const { mode: u } = W(), y = P("(max-width: 767px)"), B = U(L), I = $(o), d = j(c, u), q = z(c, u), C = F(c, y), w = (c == null ? void 0 : c.layout) === "cover", O = N[s ?? "image-top"] ?? N["image-top"], M = c && d ? /* @__PURE__ */ a("div", { className: e.imageWrapper, children: f ? f({
+  const { mode: u } = U(), y = $("(max-width: 767px)"), I = j(B), C = S(n), d = F(c, u), b = W(c, u), q = z(c, y), w = (c == null ? void 0 : c.layout) === "cover", O = N[s ?? "image-top"] ?? N["image-top"], M = c && d ? /* @__PURE__ */ a("div", { className: e.imageWrapper, children: f ? f({
     src: d,
-    alt: q,
+    alt: b,
     width: 600,
     height: 658,
-    style: C
+    style: s === "full-bleed" ? { objectFit: "cover", objectPosition: "top" } : q
   }) : /* @__PURE__ */ a(
     "img",
     {
       src: d,
-      alt: q,
+      alt: b,
       width: 600,
-      height: 658
+      height: 658,
+      style: q
     }
-  ) }) : null, x = !r && !n && !l && !_, S = /* @__PURE__ */ m(v, { children: [
+  ) }) : null, x = !r && !o && !l && !_, P = /* @__PURE__ */ m(h, { children: [
     /* @__PURE__ */ m(
       "div",
       {
         className: `${e.container} ${w ? e.fullBleedImage : e.containImage}`,
         children: [
           t !== "image" && !x && /* @__PURE__ */ m("div", { className: e.content, children: [
-            g && /* @__PURE__ */ a("div", { className: e.icon, children: /* @__PURE__ */ a("i", { className: g }) }),
+            p && /* @__PURE__ */ a("div", { className: e.icon, children: /* @__PURE__ */ a("i", { className: p }) }),
             r && /* @__PURE__ */ a(ye, { value: r }),
-            n && (i == null ? void 0 : i({ blocks: n, className: e.eyebrow })),
+            o && (i == null ? void 0 : i({ blocks: o, className: e.eyebrow })),
             l && (i == null ? void 0 : i({ blocks: l, className: e.title })),
             _ && (i == null ? void 0 : i({
               blocks: _,
@@ -193,12 +194,12 @@ function we({
         ]
       }
     ),
-    (o == null ? void 0 : o.videoUrl) && /* @__PURE__ */ m("div", { className: e.callToAction, children: [
-      /* @__PURE__ */ a("div", { className: e.label, children: o.label }),
+    (n == null ? void 0 : n.videoUrl) && /* @__PURE__ */ m("div", { className: e.callToAction, children: [
+      /* @__PURE__ */ a("div", { className: e.label, children: n.label }),
       /* @__PURE__ */ a("div", { className: e.cardIcon, children: /* @__PURE__ */ a(D, { size: 45 }) })
     ] }),
-    (o == null ? void 0 : o.type) === "link" && /* @__PURE__ */ m("div", { className: e.callToAction, children: [
-      /* @__PURE__ */ a("div", { className: e.label, children: o.label }),
+    (n == null ? void 0 : n.type) === "link" && /* @__PURE__ */ m("div", { className: e.callToAction, children: [
+      /* @__PURE__ */ a("div", { className: e.label, children: n.label }),
       /* @__PURE__ */ a("div", { className: e.cardIcon, children: /* @__PURE__ */ a(E, { size: 45 }) })
     ] })
   ] });
@@ -206,15 +207,15 @@ function we({
     "div",
     {
       className: [
-        B,
+        I,
         e.card,
         O,
         e[t] ?? ""
       ].filter(Boolean).join(" "),
-      onMouseEnter: h,
-      onMouseLeave: k,
-      style: p && !y ? { gridArea: p } : {},
-      children: /* @__PURE__ */ a(qe, { callToAction: o, resolvedUrl: I, children: S })
+      onMouseEnter: k,
+      onMouseLeave: L,
+      style: g && !y ? { gridArea: g } : {},
+      children: /* @__PURE__ */ a(be, { callToAction: n, resolvedUrl: C, children: P })
     }
   );
 }

package/package.json

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