@zenpatient-org/healthspan-marketing-ui 0.1.111 → 0.1.113

package/dist/components/ComplexImageCarousel/SimpleImageCarousel/simpleImageCarousel.module.css.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="simpleImageCarousel-module__simpleContainer___ic1jr",s="simpleImageCarousel-module__simpleContent___FGCNH",m="simpleImageCarousel-module__simpleItemWrapper___Z9nwO",i="simpleImageCarousel-module__simpleItem___91wGk",l="simpleImageCarousel-module__simpleDescription___dV2Sv",t={simpleContainer:e,simpleContent:s,simpleItemWrapper:m,simpleItem:i,simpleDescription:l};exports.default=t;exports.simpleContainer=e;exports.simpleContent=s;exports.simpleDescription=l;exports.simpleItem=i;exports.simpleItemWrapper=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="simpleImageCarousel-module__simpleContainer___ic1jr",l="simpleImageCarousel-module__simpleContent___FGCNH",s="simpleImageCarousel-module__simpleItemWrapper___Z9nwO",i="simpleImageCarousel-module__simpleItem___91wGk",m="simpleImageCarousel-module__simpleTitle___FOcTx",t="simpleImageCarousel-module__simpleDescription___dV2Sv",p={simpleContainer:e,simpleContent:l,simpleItemWrapper:s,simpleItem:i,simpleTitle:m,simpleDescription:t};exports.default=p;exports.simpleContainer=e;exports.simpleContent=l;exports.simpleDescription=t;exports.simpleItem=i;exports.simpleItemWrapper=s;exports.simpleTitle=m;

package/dist/components/ComplexImageCarousel/SimpleImageCarousel/simpleImageCarousel.module.css.es.js

@@ -1,15 +1,17 @@
-const e = "simpleImageCarousel-module__simpleContainer___ic1jr", s = "simpleImageCarousel-module__simpleContent___FGCNH", m = "simpleImageCarousel-module__simpleItemWrapper___Z9nwO", l = "simpleImageCarousel-module__simpleItem___91wGk", i = "simpleImageCarousel-module__simpleDescription___dV2Sv", p = {
+const e = "simpleImageCarousel-module__simpleContainer___ic1jr", s = "simpleImageCarousel-module__simpleContent___FGCNH", m = "simpleImageCarousel-module__simpleItemWrapper___Z9nwO", l = "simpleImageCarousel-module__simpleItem___91wGk", i = "simpleImageCarousel-module__simpleTitle___FOcTx", p = "simpleImageCarousel-module__simpleDescription___dV2Sv", t = {
   simpleContainer: e,
   simpleContent: s,
   simpleItemWrapper: m,
   simpleItem: l,
-  simpleDescription: i
+  simpleTitle: i,
+  simpleDescription: p
 };
 export {
-  p as default,
+  t as default,
   e as simpleContainer,
   s as simpleContent,
-  i as simpleDescription,
+  p as simpleDescription,
   l as simpleItem,
-  m as simpleItemWrapper
+  m as simpleItemWrapper,
+  i as simpleTitle
 };

package/dist/components/ComplexImageCarousel/useComplexImageCarousel.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("../../node_modules/@gsap/react/src/index.cjs.js"),c=require("../../node_modules/gsap/index.cjs.js"),x=require("../../node_modules/gsap/Flip.cjs.js"),r=require("react"),V=require("../../utils/debounce.cjs.js");c.gsap.registerPlugin(x.Flip);const D=({images:a})=>{const[d,E]=r.useState(0),[z,y]=r.useState(!1),W=r.useRef(null),o=r.useRef(null),f=r.useRef([]),m=r.useRef(null),q=r.useRef(null),C=r.useRef(null),R=r.useRef(null),u=["atom","small","medium","small","atom"],I=["atom","small","medium","large","x-large","large","medium","small","atom"],[l,A]=r.useState(typeof window<"u"&&window.innerWidth<=768?u:I),F=u.indexOf("medium"),P=l.indexOf("x-large"),w=r.useCallback(e=>{var L,b,v,B;if(!f.current.length)return;c.gsap.set(o.current,{height:((L=o.current)==null?void 0:L.offsetHeight)||"auto"});const g=(b=o.current)==null?void 0:b.querySelector('[data-size="x-large"]'),s=g==null?void 0:g.getBoundingClientRect(),n=(v=o.current)==null?void 0:v.querySelector('[data-size="medium"]'),h=n==null?void 0:n.getBoundingClientRect();if(window.innerWidth<=768){if(!h||!C.current)return;const t=window.innerWidth/2,i=h.left+h.width/2,p=t-i;c.gsap.set(o.current,{x:`+=${p}`});const S=C.current.querySelector(".progress-buttons");if(S){const $=S.getBoundingClientRect(),H=$.left+$.width/2,M=t-H;c.gsap.set(S,{x:`+=${M}`})}const G=t-h.width/2;c.gsap.set(m.current,{width:h.width,height:h.height/2,marginLeft:G})}else c.gsap.set(m.current,{width:s?s.width:"auto",height:s?s.height:"auto",marginLeft:s?s.left:0});(((B=m.current)==null?void 0:B.querySelectorAll(".description-item"))||[]).forEach((t,i)=>{t.style.zIndex=`${a.length-i}`}),y(!0),R.current=x.Flip.getState(f.current,{props:"width,height",simple:!0}),E(e),window.innerWidth<=768?f.current.forEach((t,i)=>{t&&i<u.length&&(u.forEach(p=>{t.classList.remove(`size-${p}`)}),t.classList.add(`size-${u[i]}`))}):f.current.forEach((t,i)=>{t&&i<l.length&&(l.forEach(p=>{t.classList.remove(`size-${p}`)}),t.classList.add(`size-${l[i]}`))}),requestAnimationFrame(()=>{x.Flip.from(R.current,{duration:.5,ease:"power3.out",targets:f.current,scale:!1,nested:!0,onComplete:()=>{y(!1)}}),c.gsap.fromTo(q.current,{opacity:0,y:20},{opacity:1,y:0,duration:.5,ease:"power3.out",onComplete:()=>{R.current=null}})})},[l,u,a.length]),k=()=>{if(z)return;const e=(d-1+a.length)%a.length;w(e)},O=()=>{if(z)return;const e=(d+1)%a.length;w(e)};function T(e,g){const s=[];if(typeof window<"u"&&window.innerWidth<=768)for(let n=0;n<u.length;n++)s.push(e[(g+n)%e.length]);else for(let n=0;n<l.length;n++)s.push(e[(g+n)%e.length]);return s}const j=T(a,d);return N.useGSAP(()=>{w(d),o.current&&c.gsap.set(o.current,{clearProps:"all"});const e=V.default(()=>{A(window.innerWidth<=768?u:I),w(d)},600);return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),{containerRef:W,carouselRef:o,imageRefs:f,descriptionRef:m,descriptionItemRef:q,progressButtonContainerRef:C,visible:j,cardSizes:l,handleCustomPrevClick:k,handleCustomNextClick:O,current:d,mobileCardIndex:F,xLargeCardIndex:P}};exports.useComplexImageCarousel=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("../../node_modules/@gsap/react/src/index.cjs.js"),c=require("../../node_modules/gsap/index.cjs.js"),x=require("../../node_modules/gsap/Flip.cjs.js"),r=require("react"),V=require("../../utils/debounce.cjs.js");c.gsap.registerPlugin(x.Flip);const D=({images:a})=>{const[d,E]=r.useState(0),[z,y]=r.useState(!1),W=r.useRef(null),o=r.useRef(null),f=r.useRef([]),m=r.useRef(null),q=r.useRef(null),C=r.useRef(null),R=r.useRef(null),i=["atom","small","medium","small","atom"],I=["atom","small","medium","large","x-large","large","medium","small","atom"],[l,A]=r.useState(typeof window<"u"&&window.innerWidth<=768?i:I),F=i.indexOf("medium"),P=l.indexOf("x-large"),w=r.useCallback(e=>{var L,b,v,B;if(!f.current.length)return;c.gsap.set(o.current,{height:((L=o.current)==null?void 0:L.offsetHeight)||"auto"});const g=(b=o.current)==null?void 0:b.querySelector('[data-size="x-large"]'),u=g==null?void 0:g.getBoundingClientRect(),n=(v=o.current)==null?void 0:v.querySelector('[data-size="medium"]'),h=n==null?void 0:n.getBoundingClientRect();if(window.innerWidth<=768){if(!h||!C.current)return;const t=window.innerWidth/2,s=h.left+h.width/2,p=t-s;c.gsap.set(o.current,{x:`+=${p}`});const S=C.current.querySelector(".progress-buttons");if(S){const $=S.getBoundingClientRect(),H=$.left+$.width/2,M=t-H;c.gsap.set(S,{x:`+=${M}`})}const G=t-h.width/2;c.gsap.set(m.current,{width:h.width,height:"auto",marginLeft:G})}else c.gsap.set(m.current,{width:u?u.width:"auto",height:"auto",marginLeft:u?u.left:0});(((B=m.current)==null?void 0:B.querySelectorAll(".description-item"))||[]).forEach((t,s)=>{t.style.zIndex=`${a.length-s}`}),y(!0),R.current=x.Flip.getState(f.current,{props:"width,height",simple:!0}),E(e),window.innerWidth<=768?f.current.forEach((t,s)=>{t&&s<i.length&&(i.forEach(p=>{t.classList.remove(`size-${p}`)}),t.classList.add(`size-${i[s]}`))}):f.current.forEach((t,s)=>{t&&s<l.length&&(l.forEach(p=>{t.classList.remove(`size-${p}`)}),t.classList.add(`size-${l[s]}`))}),requestAnimationFrame(()=>{x.Flip.from(R.current,{duration:.5,ease:"power3.out",targets:f.current,scale:!1,nested:!0,onComplete:()=>{y(!1)}}),c.gsap.fromTo(q.current,{opacity:0,y:20},{opacity:1,y:0,duration:.5,ease:"power3.out",onComplete:()=>{R.current=null}})})},[l,i,a.length]),k=()=>{if(z)return;const e=(d-1+a.length)%a.length;w(e)},O=()=>{if(z)return;const e=(d+1)%a.length;w(e)};function T(e,g){const u=[];if(typeof window<"u"&&window.innerWidth<=768)for(let n=0;n<i.length;n++)u.push(e[(g+n)%e.length]);else for(let n=0;n<l.length;n++)u.push(e[(g+n)%e.length]);return u}const j=T(a,d);return N.useGSAP(()=>{w(d),o.current&&c.gsap.set(o.current,{clearProps:"all"});const e=V.default(()=>{A(window.innerWidth<=768?i:I),w(d)},600);return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),{containerRef:W,carouselRef:o,imageRefs:f,descriptionRef:m,descriptionItemRef:q,progressButtonContainerRef:C,visible:j,cardSizes:l,handleCustomPrevClick:k,handleCustomNextClick:O,current:d,mobileCardIndex:F,xLargeCardIndex:P}};exports.useComplexImageCarousel=D;

package/dist/components/ComplexImageCarousel/useComplexImageCarousel.es.js

@@ -5,20 +5,20 @@ import { useState as S, useRef as l, useCallback as J } from "react";
 import K from "../../utils/debounce.es.js";
 c.registerPlugin(x);
 const _ = ({ images: a }) => {
-  const [d, q] = S(0), [y, L] = S(!1), A = l(null), o = l(null), f = l([]), p = l(null), I = l(null), C = l(null), z = l(null), i = ["atom", "small", "medium", "small", "atom"], B = ["atom", "small", "medium", "large", "x-large", "large", "medium", "small", "atom"], [u, k] = S(
-    typeof window < "u" && window.innerWidth <= 768 ? i : B
-  ), P = i.indexOf("medium"), O = u.indexOf("x-large"), w = J(
+  const [d, q] = S(0), [y, L] = S(!1), A = l(null), s = l(null), f = l([]), p = l(null), I = l(null), C = l(null), z = l(null), o = ["atom", "small", "medium", "small", "atom"], B = ["atom", "small", "medium", "large", "x-large", "large", "medium", "small", "atom"], [u, k] = S(
+    typeof window < "u" && window.innerWidth <= 768 ? o : B
+  ), P = o.indexOf("medium"), O = u.indexOf("x-large"), w = J(
     (e) => {
       var b, v, E, W;
       if (!f.current.length) return;
-      c.set(o.current, {
-        height: ((b = o.current) == null ? void 0 : b.offsetHeight) || "auto"
+      c.set(s.current, {
+        height: ((b = s.current) == null ? void 0 : b.offsetHeight) || "auto"
       });
-      const h = (v = o.current) == null ? void 0 : v.querySelector('[data-size="x-large"]'), r = h == null ? void 0 : h.getBoundingClientRect(), n = (E = o.current) == null ? void 0 : E.querySelector('[data-size="medium"]'), m = n == null ? void 0 : n.getBoundingClientRect();
+      const h = (v = s.current) == null ? void 0 : v.querySelector('[data-size="x-large"]'), i = h == null ? void 0 : h.getBoundingClientRect(), n = (E = s.current) == null ? void 0 : E.querySelector('[data-size="medium"]'), m = n == null ? void 0 : n.getBoundingClientRect();
       if (window.innerWidth <= 768) {
         if (!m || !C.current) return;
-        const t = window.innerWidth / 2, s = m.left + m.width / 2, g = t - s;
-        c.set(o.current, {
+        const t = window.innerWidth / 2, r = m.left + m.width / 2, g = t - r;
+        c.set(s.current, {
           x: `+=${g}`
         });
         const R = C.current.querySelector(
@@ -33,28 +33,28 @@ const _ = ({ images: a }) => {
         const N = t - m.width / 2;
         c.set(p.current, {
           width: m.width,
-          height: m.height / 2,
+          height: "auto",
           marginLeft: N
         });
       } else
         c.set(p.current, {
-          width: r ? r.width : "auto",
-          height: r ? r.height : "auto",
-          marginLeft: r ? r.left : 0
+          width: i ? i.width : "auto",
+          height: "auto",
+          marginLeft: i ? i.left : 0
         });
-      (((W = p.current) == null ? void 0 : W.querySelectorAll(".description-item")) || []).forEach((t, s) => {
-        t.style.zIndex = `${a.length - s}`;
+      (((W = p.current) == null ? void 0 : W.querySelectorAll(".description-item")) || []).forEach((t, r) => {
+        t.style.zIndex = `${a.length - r}`;
       }), L(!0), z.current = x.getState(f.current, {
         props: "width,height",
         simple: !0
-      }), q(e), window.innerWidth <= 768 ? f.current.forEach((t, s) => {
-        t && s < i.length && (i.forEach((g) => {
+      }), q(e), window.innerWidth <= 768 ? f.current.forEach((t, r) => {
+        t && r < o.length && (o.forEach((g) => {
           t.classList.remove(`size-${g}`);
-        }), t.classList.add(`size-${i[s]}`));
-      }) : f.current.forEach((t, s) => {
-        t && s < u.length && (u.forEach((g) => {
+        }), t.classList.add(`size-${o[r]}`));
+      }) : f.current.forEach((t, r) => {
+        t && r < u.length && (u.forEach((g) => {
           t.classList.remove(`size-${g}`);
-        }), t.classList.add(`size-${u[s]}`));
+        }), t.classList.add(`size-${u[r]}`));
       }), requestAnimationFrame(() => {
         x.from(z.current, {
           duration: 0.5,
@@ -83,7 +83,7 @@ const _ = ({ images: a }) => {
         );
       });
     },
-    [u, i, a.length]
+    [u, o, a.length]
   ), F = () => {
     if (y) return;
     const e = (d - 1 + a.length) % a.length;
@@ -94,27 +94,27 @@ const _ = ({ images: a }) => {
     w(e);
   };
   function G(e, h) {
-    const r = [];
+    const i = [];
     if (typeof window < "u" && window.innerWidth <= 768)
-      for (let n = 0; n < i.length; n++)
-        r.push(e[(h + n) % e.length]);
+      for (let n = 0; n < o.length; n++)
+        i.push(e[(h + n) % e.length]);
     else
       for (let n = 0; n < u.length; n++)
-        r.push(e[(h + n) % e.length]);
-    return r;
+        i.push(e[(h + n) % e.length]);
+    return i;
   }
   const H = G(a, d);
   return D(() => {
-    w(d), o.current && c.set(o.current, { clearProps: "all" });
+    w(d), s.current && c.set(s.current, { clearProps: "all" });
     const e = K(() => {
-      k(window.innerWidth <= 768 ? i : B), w(d);
+      k(window.innerWidth <= 768 ? o : B), w(d);
     }, 600);
     return window.addEventListener("resize", e), () => {
       window.removeEventListener("resize", e);
     };
   }, []), {
     containerRef: A,
-    carouselRef: o,
+    carouselRef: s,
     imageRefs: f,
     descriptionRef: p,
     descriptionItemRef: I,

package/dist/components/HighlightedTitle/HighlightedTitle.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),a=require("../Typography/Typography.cjs.js"),r=require("../../utils/cn/cn.cjs.js"),e=require("./highlightedTitle.module.css.cjs.js"),h=({title:l,label:t,className:s,defaultVariant:d="displayMd",as:n="h2",mobileVariant:o="headingLg",colorScheme:c="light"})=>i.jsxs("div",{"data-scheme":c,className:r.cn(e.default.root,s),children:[t&&i.jsx(a.Typography,{as:"p",defaultVariant:"labelMd",emphasis:!0,className:e.default.tag,children:t}),i.jsx(a.Typography,{as:n,defaultVariant:d,mobileVariant:o,className:r.cn(e.default.title,{[e.default.taggedTitle]:!!t}),children:l})]});exports.HighlightedTitle=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../Typography/Typography.cjs.js"),s=require("../../utils/cn/cn.cjs.js"),t=require("./highlightedTitle.module.css.cjs.js"),h=({title:i,label:r,className:l,defaultVariant:n="displayMd",as:d="h2",mobileVariant:o="headingLg",colorScheme:c="light"})=>e.jsxs("div",{"data-scheme":c,className:s.cn(t.default.root,l),children:[r&&e.jsx(a.Typography,{as:"p",defaultVariant:"labelSm",emphasis:!0,className:t.default.tag,children:r}),e.jsx(a.Typography,{as:d,defaultVariant:n,mobileVariant:o,className:s.cn(t.default.title,{[t.default.taggedTitle]:!!r}),children:typeof i=="string"?e.jsx("p",{children:i}):i})]});exports.HighlightedTitle=h;

package/dist/components/HighlightedTitle/HighlightedTitle.es.js

@@ -1,27 +1,27 @@
 import { jsxs as p, jsx as a } from "react/jsx-runtime";
 import { Typography as i } from "../Typography/Typography.es.js";
-import { cn as r } from "../../utils/cn/cn.es.js";
-import t from "./highlightedTitle.module.css.es.js";
+import { cn as s } from "../../utils/cn/cn.es.js";
+import e from "./highlightedTitle.module.css.es.js";
 const y = ({
-  title: s,
-  label: e,
+  title: r,
+  label: t,
   className: o,
-  defaultVariant: l = "displayMd",
-  as: m = "h2",
-  mobileVariant: d = "headingLg",
-  colorScheme: h = "light"
-}) => /* @__PURE__ */ p("div", { "data-scheme": h, className: r(t.root, o), children: [
-  e && /* @__PURE__ */ a(i, { as: "p", defaultVariant: "labelMd", emphasis: !0, className: t.tag, children: e }),
+  defaultVariant: m = "displayMd",
+  as: d = "h2",
+  mobileVariant: h = "headingLg",
+  colorScheme: l = "light"
+}) => /* @__PURE__ */ p("div", { "data-scheme": l, className: s(e.root, o), children: [
+  t && /* @__PURE__ */ a(i, { as: "p", defaultVariant: "labelSm", emphasis: !0, className: e.tag, children: t }),
   /* @__PURE__ */ a(
     i,
     {
-      as: m,
-      defaultVariant: l,
-      mobileVariant: d,
-      className: r(t.title, {
-        [t.taggedTitle]: !!e
+      as: d,
+      defaultVariant: m,
+      mobileVariant: h,
+      className: s(e.title, {
+        [e.taggedTitle]: !!t
       }),
-      children: s
+      children: typeof r == "string" ? /* @__PURE__ */ a("p", { children: r }) : r
     }
   )
 ] });

package/dist/components/StepsCarousel/StepsCarousel.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),h=require("../../utils/cn/cn.cjs.js"),g=require("../Label/Label.cjs.js"),C=require("../ProgressButton/ProgressButton.cjs.js"),m=require("../Typography/Typography.cjs.js"),a=require("./stepsCarousel.module.css.cjs.js"),T=({steps:o,colorScheme:n})=>{const[c,b]=r.useState(0),f=r.useRef([]),i=r.useRef(null),u=r.useRef(null),j=r.useCallback(t=>{i.current=t.touches[0].clientX},[]),y=r.useCallback(t=>{u.current=t.touches[0].clientX},[]),d=r.useCallback(t=>{var s;b(t),(s=f.current[t])==null||s.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[]),k=r.useCallback(()=>{if(i.current!==null&&u.current!==null){const t=u.current-i.current,s=50;b(l=>t>s&&l>0?l-1:t<-s&&l<o.length-1?l+1:l)}i.current=null,u.current=null},[o.length]);return e.jsxs("div",{className:a.default.root,"data-scheme":n,children:[e.jsx("div",{className:a.default.stepsContainer,"data-scheme":n,onTouchStart:j,onTouchMove:y,onTouchEnd:k,children:o.map((t,s)=>{const l=c===s;return e.jsxs("button",{ref:p=>{p&&(f.current[s]=p)},className:h.cn(a.default.card,l&&a.default.cardActive),onClick:()=>d(s),type:"button",children:[e.jsx("div",{className:h.cn(a.default.imageWrapper,l&&a.default.imageWrapperActive),children:e.jsx("img",{src:t.image,alt:t.title,className:a.default.image})}),e.jsx("div",{className:a.default.stepLabel,children:l?e.jsxs(e.Fragment,{children:[e.jsx(g.Label,{size:"lg",className:a.default.desktop,color:n==="dark"?"white":"black",children:`Step ${s+1}`}),e.jsx(g.Label,{size:"sm",className:a.default.mobile,color:n==="dark"?"white":"black",children:`Step ${s+1}`})]}):e.jsxs(m.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,className:a.default.labelText,children:["Step ",s+1]})}),e.jsxs("div",{className:a.default.textContainer,children:[e.jsx(m.Typography,{as:"h3",defaultVariant:"headingXs",mobileVariant:"headingXxs",children:t.title}),t.description&&e.jsx(m.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:a.default.cardDescription,children:t.description})]})]},`step-${s}`)})}),e.jsx("div",{className:h.cn(a.default.mobile,a.default.progressButtonContainer),children:e.jsx(C.ProgressButton,{invert:n==="dark",left:{disabled:c<=0,onClick:()=>d(c-1)},right:{disabled:c>=o.length-1,onClick:()=>d(c+1)}})})]})};exports.StepsCarousel=T;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("react"),f=require("../../utils/cn/cn.cjs.js"),g=require("../Label/Label.cjs.js"),k=require("../ProgressButton/ProgressButton.cjs.js"),m=require("../Typography/Typography.cjs.js"),r=require("./stepsCarousel.module.css.cjs.js"),v=50,T=({steps:d,colorScheme:o})=>{const[n,y]=s.useState(0),p=s.useRef(null),b=s.useRef([]),l=s.useRef(null),h=s.useRef(null),j=s.useCallback(e=>{l.current={x:e.touches[0].clientX,y:e.touches[0].clientY}},[]),i=s.useCallback(e=>{var t;y(e),(t=b.current[e])==null||t.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[]),x=s.useCallback(()=>{if(l.current!==null&&h.current!==null){const e=h.current-l.current.x;let t=n;e>v&&n>0?t=n-1:e<-v&&n<d.length-1&&(t=n+1),t!==n&&i(t)}l.current=null,h.current=null},[n,d.length,i]);return s.useEffect(()=>{const e=p.current;if(!e)return;const t=c=>{if(l.current===null)return;const u=c.touches[0].clientX,S=c.touches[0].clientY,C=Math.abs(u-l.current.x),N=Math.abs(S-l.current.y);C>N&&(c.preventDefault(),h.current=u)};return e.addEventListener("touchmove",t,{passive:!1}),()=>{e.removeEventListener("touchmove",t)}},[]),a.jsxs("div",{className:r.default.root,"data-scheme":o,children:[a.jsx("div",{ref:p,className:r.default.stepsContainer,"data-scheme":o,onTouchStart:j,onTouchEnd:x,children:d.map((e,t)=>{const c=n===t;return a.jsxs("button",{ref:u=>{u&&(b.current[t]=u)},className:f.cn(r.default.card,c&&r.default.cardActive),onClick:()=>i(t),type:"button",children:[a.jsx("div",{className:f.cn(r.default.imageWrapper,c&&r.default.imageWrapperActive),children:a.jsx("img",{src:e.image,alt:e.title,className:r.default.image})}),a.jsx("div",{className:r.default.stepLabel,children:c?a.jsxs(a.Fragment,{children:[a.jsx(g.Label,{size:"lg",className:r.default.desktop,color:o==="dark"?"white":"black",children:`Step ${t+1}`}),a.jsx(g.Label,{size:"sm",className:r.default.mobile,color:o==="dark"?"white":"black",children:`Step ${t+1}`})]}):a.jsxs(m.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,className:r.default.labelText,children:["Step ",t+1]})}),a.jsxs("div",{className:r.default.textContainer,children:[a.jsx(m.Typography,{as:"h3",defaultVariant:"headingSm",mobileVariant:"headingXxs",children:e.title}),e.description&&a.jsx(m.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:r.default.cardDescription,children:e.description})]})]},`step-${t}`)})}),a.jsx("div",{className:f.cn(r.default.mobile,r.default.progressButtonContainer),children:a.jsx(k.ProgressButton,{invert:o==="dark",left:{disabled:n<=0,onClick:()=>i(n-1)},right:{disabled:n>=d.length-1,onClick:()=>i(n+1)}})})]})};exports.StepsCarousel=T;

package/dist/components/StepsCarousel/StepsCarousel.es.js

@@ -1,116 +1,126 @@
 "use client";
-import { jsxs as i, jsx as a, Fragment as X } from "react/jsx-runtime";
-import { useState as V, useRef as m, useCallback as u } from "react";
-import { cn as b } from "../../utils/cn/cn.es.js";
-import { Label as k } from "../Label/Label.es.js";
-import { ProgressButton as y } from "../ProgressButton/ProgressButton.es.js";
-import { Typography as p } from "../Typography/Typography.es.js";
-import t from "./stepsCarousel.module.css.es.js";
-const z = ({ steps: s, colorScheme: l }) => {
-  const [c, f] = V(0), g = m([]), o = m(null), d = m(null), v = u((e) => {
-    o.current = e.touches[0].clientX;
-  }, []), C = u((e) => {
-    d.current = e.touches[0].clientX;
-  }, []), h = u((e) => {
-    var r;
-    f(e), (r = g.current[e]) == null || r.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
-  }, []), T = u(() => {
-    if (o.current !== null && d.current !== null) {
-      const e = d.current - o.current, r = 50;
-      f((n) => e > r && n > 0 ? n - 1 : e < -r && n < s.length - 1 ? n + 1 : n);
+import { jsxs as u, jsx as a, Fragment as V } from "react/jsx-runtime";
+import { useState as A, useRef as h, useCallback as f, useEffect as M } from "react";
+import { cn as p } from "../../utils/cn/cn.es.js";
+import { Label as N } from "../Label/Label.es.js";
+import { ProgressButton as x } from "../ProgressButton/ProgressButton.es.js";
+import { Typography as b } from "../Typography/Typography.es.js";
+import r from "./stepsCarousel.module.css.es.js";
+const S = 50, $ = ({ steps: d, colorScheme: i }) => {
+  const [n, k] = A(0), v = h(null), g = h([]), c = h(null), m = h(null), C = f((e) => {
+    c.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+  }, []), s = f((e) => {
+    var t;
+    k(e), (t = g.current[e]) == null || t.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+  }, []), y = f(() => {
+    if (c.current !== null && m.current !== null) {
+      const e = m.current - c.current.x;
+      let t = n;
+      e > S && n > 0 ? t = n - 1 : e < -S && n < d.length - 1 && (t = n + 1), t !== n && s(t);
     }
-    o.current = null, d.current = null;
-  }, [s.length]);
-  return /* @__PURE__ */ i("div", { className: t.root, "data-scheme": l, children: [
+    c.current = null, m.current = null;
+  }, [n, d.length, s]);
+  return M(() => {
+    const e = v.current;
+    if (!e) return;
+    const t = (l) => {
+      if (c.current === null) return;
+      const o = l.touches[0].clientX, E = l.touches[0].clientY, T = Math.abs(o - c.current.x), X = Math.abs(E - c.current.y);
+      T > X && (l.preventDefault(), m.current = o);
+    };
+    return e.addEventListener("touchmove", t, { passive: !1 }), () => {
+      e.removeEventListener("touchmove", t);
+    };
+  }, []), /* @__PURE__ */ u("div", { className: r.root, "data-scheme": i, children: [
     /* @__PURE__ */ a(
       "div",
       {
-        className: t.stepsContainer,
-        "data-scheme": l,
-        onTouchStart: v,
-        onTouchMove: C,
-        onTouchEnd: T,
-        children: s.map((e, r) => {
-          const n = c === r;
-          return /* @__PURE__ */ i(
+        ref: v,
+        className: r.stepsContainer,
+        "data-scheme": i,
+        onTouchStart: C,
+        onTouchEnd: y,
+        children: d.map((e, t) => {
+          const l = n === t;
+          return /* @__PURE__ */ u(
             "button",
             {
-              ref: (N) => {
-                N && (g.current[r] = N);
+              ref: (o) => {
+                o && (g.current[t] = o);
               },
-              className: b(t.card, n && t.cardActive),
-              onClick: () => h(r),
+              className: p(r.card, l && r.cardActive),
+              onClick: () => s(t),
               type: "button",
               children: [
-                /* @__PURE__ */ a("div", { className: b(t.imageWrapper, n && t.imageWrapperActive), children: /* @__PURE__ */ a("img", { src: e.image, alt: e.title, className: t.image }) }),
-                /* @__PURE__ */ a("div", { className: t.stepLabel, children: n ? /* @__PURE__ */ i(X, { children: [
+                /* @__PURE__ */ a("div", { className: p(r.imageWrapper, l && r.imageWrapperActive), children: /* @__PURE__ */ a("img", { src: e.image, alt: e.title, className: r.image }) }),
+                /* @__PURE__ */ a("div", { className: r.stepLabel, children: l ? /* @__PURE__ */ u(V, { children: [
                   /* @__PURE__ */ a(
-                    k,
+                    N,
                     {
                       size: "lg",
-                      className: t.desktop,
-                      color: l === "dark" ? "white" : "black",
-                      children: `Step ${r + 1}`
+                      className: r.desktop,
+                      color: i === "dark" ? "white" : "black",
+                      children: `Step ${t + 1}`
                     }
                   ),
                   /* @__PURE__ */ a(
-                    k,
+                    N,
                     {
                       size: "sm",
-                      className: t.mobile,
-                      color: l === "dark" ? "white" : "black",
-                      children: `Step ${r + 1}`
+                      className: r.mobile,
+                      color: i === "dark" ? "white" : "black",
+                      children: `Step ${t + 1}`
                     }
                   )
-                ] }) : /* @__PURE__ */ i(
-                  p,
+                ] }) : /* @__PURE__ */ u(
+                  b,
                   {
                     defaultVariant: "labelSm",
                     mobileVariant: "labelXs",
                     emphasis: !0,
-                    className: t.labelText,
+                    className: r.labelText,
                     children: [
                       "Step ",
-                      r + 1
+                      t + 1
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ i("div", { className: t.textContainer, children: [
-                  /* @__PURE__ */ a(p, { as: "h3", defaultVariant: "headingXs", mobileVariant: "headingXxs", children: e.title }),
+                /* @__PURE__ */ u("div", { className: r.textContainer, children: [
+                  /* @__PURE__ */ a(b, { as: "h3", defaultVariant: "headingSm", mobileVariant: "headingXxs", children: e.title }),
                   e.description && /* @__PURE__ */ a(
-                    p,
+                    b,
                     {
                       as: "p",
                       defaultVariant: "bodyMd",
                       mobileVariant: "bodySm",
-                      className: t.cardDescription,
+                      className: r.cardDescription,
                       children: e.description
                     }
                   )
                 ] })
               ]
             },
-            `step-${r}`
+            `step-${t}`
           );
         })
       }
     ),
-    /* @__PURE__ */ a("div", { className: b(t.mobile, t.progressButtonContainer), children: /* @__PURE__ */ a(
-      y,
+    /* @__PURE__ */ a("div", { className: p(r.mobile, r.progressButtonContainer), children: /* @__PURE__ */ a(
+      x,
       {
-        invert: l === "dark",
+        invert: i === "dark",
         left: {
-          disabled: c <= 0,
-          onClick: () => h(c - 1)
+          disabled: n <= 0,
+          onClick: () => s(n - 1)
         },
         right: {
-          disabled: c >= s.length - 1,
-          onClick: () => h(c + 1)
+          disabled: n >= d.length - 1,
+          onClick: () => s(n + 1)
         }
       }
     ) })
   ] });
 };
 export {
-  z as StepsCarousel
+  $ as StepsCarousel
 };