quirk-ui 0.0.550 → 0.0.552

package/dist/next/blocks/StickyScrollBlock/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../assets/index5.css');const t=require("react/jsx-runtime"),r=require("react"),I=require("next/image"),a=require("../../ui/PortableTextRenderer/index.cjs");require("react-dom");const N=require("../../utils/portableTextToPlainText.cjs"),R=require("../../contexts/ThemeContext.cjs"),q="_layout_l5nlh_1",S="_container_l5nlh_7",U="_heading_l5nlh_19",w="_scroll_l5nlh_35",P="_sidebar_l5nlh_40",$="_number_l5nlh_65",A="_link_l5nlh_82",B="_active_l5nlh_96",C="_content_l5nlh_108",E="_item_l5nlh_112",M="_text_l5nlh_124",O="_title_l5nlh_131",V="_image_l5nlh_135",s={layout:q,container:S,heading:U,scroll:w,sidebar:P,number:$,link:A,active:B,content:C,item:E,text:M,title:O,image:V};function z({heading:o,items:_,showNumbers:f}){const[y,u]=r.useState(null),{mode:d}=R.useTheme(),T=r.useRef(null),h=r.useRef([]);return r.useEffect(()=>{const e=new IntersectionObserver(l=>{const n=l.filter(i=>i.isIntersecting).sort((i,c)=>c.intersectionRatio-i.intersectionRatio);if(n.length>0){const i=n[0].target.getAttribute("id");i&&u(i)}},{rootMargin:"-45% 0px -45% 0px",threshold:.1});return h.current.forEach(l=>{l&&e.observe(l)}),T.current=e,()=>{e.disconnect()}},[]),t.jsx("section",{className:s.layout,children:t.jsxs("article",{className:s.container,children:[t.jsxs("div",{className:s.heading,children:[t.jsx(a.RichText,{className:s.title,blocks:o.title}),o.description&&t.jsx(a.RichText,{blocks:o.description})]}),t.jsxs("div",{className:s.scroll,children:[t.jsx("nav",{className:s.sidebar,children:t.jsx("ul",{children:_.map((e,l)=>t.jsx("li",{children:t.jsxs("button",{type:"button",className:`${s.link} ${y===e._key?s.active:""}`,onClick:()=>{u(e._key);const n=document.getElementById(e._key);n==null||n.scrollIntoView({behavior:"smooth",block:"start"})},children:[f&&t.jsx("div",{className:s.number,children:l+1}),e.title&&N.portableTextToPlainText(e.title)]})},e._key))})}),t.jsx("div",{className:s.content,children:_.map((e,l)=>{var c,m,x,g,b,k,v,j;let n;(c=e.image)!=null&&c.imageUrls&&(n=d==="dark"&&((m=e.image.imageUrls.dark)==null?void 0:m.medium)||e.image.imageUrls.default.medium);let i=((b=(g=(x=e.image)==null?void 0:x[d==="dark"?"darkImage":"defaultImage"])==null?void 0:g.asset)==null?void 0:b.altText)||((j=(v=(k=e.image)==null?void 0:k[d==="dark"?"darkImage":"defaultImage"])==null?void 0:v.asset)==null?void 0:j.description)||"Card image";return t.jsxs("section",{ref:p=>{h.current[l]=p},id:e._key,className:s.item,children:[t.jsxs("div",{className:s.text,children:[e.title&&t.jsx(a.RichText,{className:s.title,blocks:e.title}),e.description&&t.jsx(a.RichText,{blocks:e.description})]}),e.image&&n&&t.jsx("div",{className:s.image,children:t.jsx(I,{src:n,alt:i,width:600,height:400,priority:!0})})]},e._key)})})]})]})})}exports.StickyScrollBlock=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../assets/index5.css');const t=require("react/jsx-runtime"),r=require("react"),I=require("next/image"),a=require("../../ui/PortableTextRenderer/index.cjs");require("react-dom");const N=require("../../contexts/ThemeContext.cjs"),R=require("../../utils/portableTextToPlainText.cjs"),q="_layout_l5nlh_1",S="_container_l5nlh_7",U="_heading_l5nlh_19",w="_scroll_l5nlh_35",P="_sidebar_l5nlh_40",$="_number_l5nlh_65",A="_link_l5nlh_82",B="_active_l5nlh_96",C="_content_l5nlh_108",E="_item_l5nlh_112",M="_text_l5nlh_124",O="_title_l5nlh_131",V="_image_l5nlh_135",s={layout:q,container:S,heading:U,scroll:w,sidebar:P,number:$,link:A,active:B,content:C,item:E,text:M,title:O,image:V};function z({heading:o,items:_,showNumbers:f}){const[y,u]=r.useState(null),{mode:d}=N.useTheme(),T=r.useRef(null),h=r.useRef([]);return r.useEffect(()=>{const e=new IntersectionObserver(l=>{const n=l.filter(i=>i.isIntersecting).sort((i,c)=>c.intersectionRatio-i.intersectionRatio);if(n.length>0){const i=n[0].target.getAttribute("id");i&&u(i)}},{rootMargin:"-45% 0px -45% 0px",threshold:.1});return h.current.forEach(l=>{l&&e.observe(l)}),T.current=e,()=>{e.disconnect()}},[]),t.jsx("section",{className:s.layout,children:t.jsxs("article",{className:s.container,children:[t.jsxs("div",{className:s.heading,children:[t.jsx(a.RichText,{className:s.title,blocks:o.title}),o.description&&t.jsx(a.RichText,{blocks:o.description})]}),t.jsxs("div",{className:s.scroll,children:[t.jsx("nav",{className:s.sidebar,children:t.jsx("ul",{children:_.map((e,l)=>t.jsx("li",{children:t.jsxs("button",{type:"button",className:`${s.link} ${y===e._key?s.active:""}`,onClick:()=>{u(e._key);const n=document.getElementById(e._key);n==null||n.scrollIntoView({behavior:"smooth",block:"start"})},children:[f&&t.jsx("div",{className:s.number,children:l+1}),e.title&&R.portableTextToPlainText(e.title)]})},e._key))})}),t.jsx("div",{className:s.content,children:_.map((e,l)=>{var c,m,x,g,b,k,v,j;let n;(c=e.image)!=null&&c.imageUrls&&(n=d==="dark"&&((m=e.image.imageUrls.dark)==null?void 0:m.medium)||e.image.imageUrls.default.medium);let i=((b=(g=(x=e.image)==null?void 0:x[d==="dark"?"darkImage":"defaultImage"])==null?void 0:g.asset)==null?void 0:b.altText)||((j=(v=(k=e.image)==null?void 0:k[d==="dark"?"darkImage":"defaultImage"])==null?void 0:v.asset)==null?void 0:j.description)||"Card image";return t.jsxs("section",{ref:p=>{h.current[l]=p},id:e._key,className:s.item,children:[t.jsxs("div",{className:s.text,children:[e.title&&t.jsx(a.RichText,{className:s.title,blocks:e.title}),e.description&&t.jsx(a.RichText,{blocks:e.description})]}),e.image&&n&&t.jsx("div",{className:s.image,children:t.jsx(I,{src:n,alt:i,width:600,height:400,priority:!0})})]},e._key)})})]})]})})}exports.StickyScrollBlock=z;

package/dist/next/blocks/StickyScrollBlock/index.mjs

@@ -3,8 +3,8 @@ import { useState as R, useRef as y, useEffect as U } from "react";
 import w from "next/image";
 import { RichText as a } from "../../ui/PortableTextRenderer/index.mjs";
 import "react-dom";
-import { portableTextToPlainText as A } from "../../utils/portableTextToPlainText.mjs";
-import { useTheme as E } from "../../contexts/ThemeContext.mjs";
+import { useTheme as A } from "../../contexts/ThemeContext.mjs";
+import { portableTextToPlainText as E } from "../../utils/portableTextToPlainText.mjs";
 import '../../../assets/index5.css';const S = "_layout_l5nlh_1", j = "_container_l5nlh_7", B = "_heading_l5nlh_19", C = "_scroll_l5nlh_35", $ = "_sidebar_l5nlh_40", M = "_number_l5nlh_65", O = "_link_l5nlh_82", P = "_active_l5nlh_96", V = "_content_l5nlh_108", q = "_item_l5nlh_112", z = "_text_l5nlh_124", D = "_title_l5nlh_131", F = "_image_l5nlh_135", t = {
   layout: S,
   container: j,
@@ -25,7 +25,7 @@ function X({
   items: m,
   showNumbers: x
 }) {
-  const [I, _] = R(null), { mode: d } = E(), N = y(null), h = y([]);
+  const [I, _] = R(null), { mode: d } = A(), N = y(null), h = y([]);
   return U(() => {
     const e = new IntersectionObserver(
       (i) => {
@@ -66,7 +66,7 @@ function X({
           },
           children: [
             x && /* @__PURE__ */ l("div", { className: t.number, children: i + 1 }),
-            e.title && A(e.title)
+            e.title && E(e.title)
           ]
         }
       ) }, e._key)) }) }),

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

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

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

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

package/package.json

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