@zenpatient-org/healthspan-marketing-ui 0.1.126 → 0.1.128

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../utils/cn/cn.cjs.js"),N=require("../../ProgressButton/ProgressButton.cjs.js"),u=require("../../Typography/Typography.cjs.js"),v=require("../useComplexImageCarousel.cjs.js"),r=require("./complexImageCarousel.module.css.cjs.js"),b=({images:a})=>{const{containerRef:m,carouselRef:f,imageRefs:p,descriptionRef:g,descriptionItemRef:h,progressButtonContainerRef:C,visible:s,cardSizes:n,handleCustomPrevClick:x,handleCustomNextClick:y,current:j,mobileCardIndex:o,xLargeCardIndex:l}=v.useComplexImageCarousel({images:a});return e.jsx("div",{className:r.default.root,children:e.jsxs("div",{ref:m,className:r.default.container,children:[e.jsx("div",{ref:f,className:r.default.carouselArea,children:s.length>0&&s.map((d,t)=>e.jsx("div",{className:i.cn(r.default.slideContainer,r.default[`size-${n[t]}`]),ref:c=>{c&&(p.current[t]=c)},"data-flip-id":`slide-${(j+t)%a.length}`,"data-size":n[t],children:e.jsx("img",{src:d.image,alt:`Slide ${t+1}`,className:r.default.image})},d.name))}),e.jsx("div",{ref:g,className:r.default.description,children:e.jsxs("div",{ref:h,className:i.cn("description-item",r.default.descriptionItem),children:[e.jsx(u.Typography,{as:"h3",defaultVariant:"headingLg",mobileVariant:"headingXxs",children:typeof window<"u"&&window.innerWidth<=768?s[o].title:s[l].title}),e.jsx(u.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:r.default.text,children:typeof window<"u"&&window.innerWidth<=768?s[o].description:s[l].description})]})}),e.jsx("div",{ref:C,className:r.default.progressButtonContainer,children:e.jsx(N.ProgressButton,{left:{onClick:x},right:{onClick:y},className:i.cn("progress-buttons",r.default.progressButton)})})]})})};exports.ComplexCarousel=b;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../utils/cn/cn.cjs.js"),N=require("../../ProgressButton/ProgressButton.cjs.js"),c=require("../../Typography/Typography.cjs.js"),v=require("../useComplexImageCarousel.cjs.js"),r=require("./complexImageCarousel.module.css.cjs.js"),b=({images:a})=>{const{containerRef:u,carouselRef:m,imageRefs:f,descriptionRef:p,descriptionItemRef:g,progressButtonContainerRef:h,visible:s,cardSizes:n,handleCustomPrevClick:C,handleCustomNextClick:x,current:y,mobileCardIndex:o,xLargeCardIndex:l}=v.useComplexImageCarousel({images:a});return e.jsx("div",{className:r.default.root,children:e.jsxs("div",{ref:u,className:r.default.container,children:[e.jsx("div",{ref:m,className:r.default.carouselArea,children:s.length>0&&s.map((j,t)=>e.jsx("div",{className:i.cn(r.default.slideContainer,r.default[`size-${n[t]}`]),ref:d=>{d&&(f.current[t]=d)},"data-flip-id":`slide-${(y+t)%a.length}`,"data-size":n[t],children:e.jsx("img",{src:j.image,alt:`Slide ${t+1}`,className:r.default.image})},t+1))}),e.jsx("div",{ref:p,className:r.default.description,children:e.jsxs("div",{ref:g,className:i.cn("description-item",r.default.descriptionItem),children:[e.jsx(c.Typography,{as:"h3",defaultVariant:"headingLg",mobileVariant:"headingXxs",children:typeof window<"u"&&window.innerWidth<=768?s[o].title:s[l].title}),e.jsx(c.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:r.default.text,children:typeof window<"u"&&window.innerWidth<=768?s[o].description:s[l].description})]})}),e.jsx("div",{ref:h,className:r.default.progressButtonContainer,children:e.jsx(N.ProgressButton,{left:{onClick:C},right:{onClick:x},className:i.cn("progress-buttons",r.default.progressButton)})})]})})};exports.ComplexCarousel=b;

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

@@ -1,51 +1,52 @@
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
+"use client";
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
 import { cn as s } from "../../../utils/cn/cn.es.js";
-import { ProgressButton as x } from "../../ProgressButton/ProgressButton.es.js";
-import { Typography as f } from "../../Typography/Typography.es.js";
-import { useComplexImageCarousel as y } from "../useComplexImageCarousel.es.js";
+import { ProgressButton as y } from "../../ProgressButton/ProgressButton.es.js";
+import { Typography as m } from "../../Typography/Typography.es.js";
+import { useComplexImageCarousel as x } from "../useComplexImageCarousel.es.js";
 import e from "./complexImageCarousel.module.css.es.js";
 const S = ({ images: o }) => {
   const {
-    containerRef: p,
-    carouselRef: h,
-    imageRefs: u,
-    descriptionRef: g,
-    descriptionItemRef: C,
-    progressButtonContainerRef: N,
+    containerRef: f,
+    carouselRef: p,
+    imageRefs: h,
+    descriptionRef: u,
+    descriptionItemRef: g,
+    progressButtonContainerRef: C,
     visible: r,
     cardSizes: a,
-    handleCustomPrevClick: v,
-    handleCustomNextClick: w,
-    current: b,
+    handleCustomPrevClick: N,
+    handleCustomNextClick: v,
+    current: w,
     mobileCardIndex: n,
     xLargeCardIndex: d
-  } = y({ images: o });
-  return /* @__PURE__ */ i("div", { className: e.root, children: /* @__PURE__ */ m("div", { ref: p, className: e.container, children: [
-    /* @__PURE__ */ i("div", { ref: h, className: e.carouselArea, children: r.length > 0 && r.map((l, t) => /* @__PURE__ */ i(
+  } = x({ images: o });
+  return /* @__PURE__ */ i("div", { className: e.root, children: /* @__PURE__ */ c("div", { ref: f, className: e.container, children: [
+    /* @__PURE__ */ i("div", { ref: p, className: e.carouselArea, children: r.length > 0 && r.map((b, t) => /* @__PURE__ */ i(
       "div",
       {
         className: s(e.slideContainer, e[`size-${a[t]}`]),
-        ref: (c) => {
-          c && (u.current[t] = c);
+        ref: (l) => {
+          l && (h.current[t] = l);
         },
-        "data-flip-id": `slide-${(b + t) % o.length}`,
+        "data-flip-id": `slide-${(w + t) % o.length}`,
         "data-size": a[t],
-        children: /* @__PURE__ */ i("img", { src: l.image, alt: `Slide ${t + 1}`, className: e.image })
+        children: /* @__PURE__ */ i("img", { src: b.image, alt: `Slide ${t + 1}`, className: e.image })
       },
-      l.name
+      t + 1
     )) }),
-    /* @__PURE__ */ i("div", { ref: g, className: e.description, children: /* @__PURE__ */ m("div", { ref: C, className: s("description-item", e.descriptionItem), children: [
-      /* @__PURE__ */ i(f, { as: "h3", defaultVariant: "headingLg", mobileVariant: "headingXxs", children: typeof window < "u" && window.innerWidth <= 768 ? r[n].title : r[d].title }),
-      /* @__PURE__ */ i(f, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: e.text, children: typeof window < "u" && window.innerWidth <= 768 ? r[n].description : r[d].description })
+    /* @__PURE__ */ i("div", { ref: u, className: e.description, children: /* @__PURE__ */ c("div", { ref: g, className: s("description-item", e.descriptionItem), children: [
+      /* @__PURE__ */ i(m, { as: "h3", defaultVariant: "headingLg", mobileVariant: "headingXxs", children: typeof window < "u" && window.innerWidth <= 768 ? r[n].title : r[d].title }),
+      /* @__PURE__ */ i(m, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: e.text, children: typeof window < "u" && window.innerWidth <= 768 ? r[n].description : r[d].description })
     ] }) }),
-    /* @__PURE__ */ i("div", { ref: N, className: e.progressButtonContainer, children: /* @__PURE__ */ i(
-      x,
+    /* @__PURE__ */ i("div", { ref: C, className: e.progressButtonContainer, children: /* @__PURE__ */ i(
+      y,
       {
         left: {
-          onClick: v
+          onClick: N
         },
         right: {
-          onClick: w
+          onClick: v
         },
         className: s("progress-buttons", e.progressButton)
       }

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

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

@@ -1,72 +1,77 @@
-import { useGSAP as D } from "../../node_modules/@gsap/react/src/index.es.js";
-import { gsap as c } from "../../node_modules/gsap/index.es.js";
-import { Flip as x } from "../../node_modules/gsap/Flip.es.js";
-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), 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;
+import { useGSAP as Y } from "../../node_modules/@gsap/react/src/index.es.js";
+import { gsap as o } from "../../node_modules/gsap/index.es.js";
+import { Flip as A } from "../../node_modules/gsap/Flip.es.js";
+import { Draggable as G } from "../../node_modules/gsap/Draggable.es.js";
+import { useState as L, useRef as a, useCallback as Z } from "react";
+o.registerPlugin(A);
+o.registerPlugin(G);
+const st = ({ images: i }) => {
+  const [c, M] = L(0), B = a(c);
+  B.current = c;
+  const [x, P] = L(!1), [E, I] = L(0), N = a(null), e = a(null), f = a([]), z = a(null), W = a(null), b = a(null), v = a(null), l = ["atom", "small", "medium", "large", "medium", "small", "atom"], D = ["atom", "small", "medium", "large", "x-large", "large", "medium", "small", "atom"], [d, V] = L(
+    typeof window < "u" && window.innerWidth <= 768 ? l : D
+  ), j = l.indexOf("large"), J = d.indexOf("x-large"), $ = o.matchMedia(), g = Z(
+    (r) => {
+      var R, m, O, F;
       if (!f.current.length) return;
-      c.set(s.current, {
-        height: ((b = s.current) == null ? void 0 : b.offsetHeight) || "auto"
-      });
-      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, r = m.left + m.width / 2, g = t - r;
-        c.set(s.current, {
-          x: `+=${g}`
-        });
-        const R = C.current.querySelector(
+      I(((R = e.current) == null ? void 0 : R.offsetHeight) || 0);
+      const n = (m = e.current) == null ? void 0 : m.querySelector('[data-size="x-large"]'), s = n == null ? void 0 : n.getBoundingClientRect(), t = (O = e.current) == null ? void 0 : O.querySelector('[data-size="large"]'), h = t == null ? void 0 : t.getBoundingClientRect();
+      $.add("(max-width: 768px", () => {
+        var T;
+        if (o.set(e.current, {
+          height: E || ((T = e.current) == null ? void 0 : T.offsetHeight) || "auto"
+        }), !h) return;
+        const u = window.innerWidth / 2, p = h.right - h.width / 2, S = u - p;
+        if (o.set(e.current, {
+          x: `+=${S}`
+        }), !b.current) return;
+        const w = b.current.querySelector(
           ".progress-buttons"
         );
-        if (R) {
-          const $ = R.getBoundingClientRect(), V = $.left + $.width / 2, j = t - V;
-          c.set(R, {
-            x: `+=${j}`
+        if (w) {
+          const C = w.getBoundingClientRect(), y = C.left + C.width / 2, q = u - y;
+          o.set(w, {
+            x: `+=${q}`
           });
         }
-        const N = t - m.width / 2;
-        c.set(p.current, {
-          width: m.width,
-          height: "auto",
-          marginLeft: N
+        const k = u - h.width / 2;
+        o.set(z.current, {
+          width: h.width,
+          marginLeft: k
+        }), f.current.forEach((C, y) => {
+          C && y < l.length && (l.forEach((q) => {
+            C.classList.remove(`size-${q}`);
+          }), C.classList.add(`size-${l[y]}`));
         });
-      } else
-        c.set(p.current, {
-          width: i ? i.width : "auto",
-          height: "auto",
-          marginLeft: i ? i.left : 0
+      }), $.add("(min-width: 769px", () => {
+        var u, p;
+        I(((u = e.current) == null ? void 0 : u.offsetHeight) || 0), o.set(e.current, {
+          height: E || ((p = e.current) == null ? void 0 : p.offsetHeight) || "auto"
+        }), o.set(z.current, {
+          width: s ? s.width : "auto",
+          marginLeft: s ? s.left : 0
+        }), f.current.forEach((S, w) => {
+          S && w < d.length && (d.forEach((k) => {
+            S.classList.remove(`size-${k}`);
+          }), S.classList.add(`size-${d[w]}`));
         });
-      (((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, {
+      }), (((F = z.current) == null ? void 0 : F.querySelectorAll(".description-item")) || []).forEach((u, p) => {
+        u.style.zIndex = `${i.length - p}`;
+      }), P(!0), v.current = A.getState(f.current, {
         props: "width,height",
         simple: !0
-      }), 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-${o[r]}`));
-      }) : f.current.forEach((t, r) => {
-        t && r < u.length && (u.forEach((g) => {
-          t.classList.remove(`size-${g}`);
-        }), t.classList.add(`size-${u[r]}`));
-      }), requestAnimationFrame(() => {
-        x.from(z.current, {
+      }), M(r), requestAnimationFrame(() => {
+        A.from(v.current, {
           duration: 0.5,
           ease: "power3.out",
           targets: f.current,
           scale: !1,
           nested: !0,
           onComplete: () => {
-            L(!1);
+            P(!1);
           }
-        }), c.fromTo(
-          I.current,
+        }), o.fromTo(
+          W.current,
           {
             opacity: 0,
             y: 20
@@ -77,57 +82,82 @@ const _ = ({ images: a }) => {
             duration: 0.5,
             ease: "power3.out",
             onComplete: () => {
-              z.current = null;
+              v.current = null;
             }
           }
         );
       });
     },
-    [u, o, a.length]
-  ), F = () => {
-    if (y) return;
-    const e = (d - 1 + a.length) % a.length;
-    w(e);
-  }, T = () => {
-    if (y) return;
-    const e = (d + 1) % a.length;
-    w(e);
+    [d, l, i.length, E]
+  ), K = () => {
+    if (x) return;
+    const r = (c - 1 + i.length) % i.length;
+    g(r);
+  }, Q = () => {
+    if (x) return;
+    const r = (c + 1) % i.length;
+    g(r);
   };
-  function G(e, h) {
-    const i = [];
+  function U(r, n) {
+    const s = [];
     if (typeof window < "u" && window.innerWidth <= 768)
-      for (let n = 0; n < o.length; n++)
-        i.push(e[(h + n) % e.length]);
+      for (let t = 0; t < l.length; t++)
+        s.push(r[(n + t) % r.length]);
     else
-      for (let n = 0; n < u.length; n++)
-        i.push(e[(h + n) % e.length]);
-    return i;
+      for (let t = 0; t < d.length; t++)
+        s.push(r[(n + t) % r.length]);
+    return s;
   }
-  const H = G(a, d);
-  return D(() => {
-    w(d), s.current && c.set(s.current, { clearProps: "all" });
-    const e = K(() => {
-      k(window.innerWidth <= 768 ? o : B), w(d);
-    }, 600);
-    return window.addEventListener("resize", e), () => {
-      window.removeEventListener("resize", e);
+  const X = U(i, c);
+  return Y(() => {
+    g(c), e.current && o.set(e.current, { clearProps: "all" });
+    const r = () => {
+      V(window.innerWidth <= 768 ? l : D), I(0), g(c);
     };
+    window.addEventListener("resize", r);
+    const n = e.current;
+    if (n)
+      return $.add("(max-width: 768px)", () => {
+        const s = { x: 0 }, t = G.create(n, {
+          type: "x",
+          onDragStart: () => {
+            x || (s.x = n.scrollLeft + n.getBoundingClientRect().left);
+          },
+          onDragEnd: () => {
+            const H = n.scrollLeft + n.getBoundingClientRect().left - s.x, R = 20;
+            if (H > R) {
+              if (x) return;
+              const m = (B.current - 1 + i.length) % i.length;
+              g(m);
+            } else if (H < -R) {
+              if (x) return;
+              const m = (B.current + 1) % i.length;
+              g(m);
+            }
+          }
+        });
+        return () => {
+          t[0] && t[0].kill();
+        };
+      }), () => {
+        window.removeEventListener("resize", r);
+      };
   }, []), {
-    containerRef: A,
-    carouselRef: s,
+    containerRef: N,
+    carouselRef: e,
     imageRefs: f,
-    descriptionRef: p,
-    descriptionItemRef: I,
-    progressButtonContainerRef: C,
-    visible: H,
-    cardSizes: u,
-    handleCustomPrevClick: F,
-    handleCustomNextClick: T,
-    current: d,
-    mobileCardIndex: P,
-    xLargeCardIndex: O
+    descriptionRef: z,
+    descriptionItemRef: W,
+    progressButtonContainerRef: b,
+    visible: X,
+    cardSizes: d,
+    handleCustomPrevClick: K,
+    handleCustomNextClick: Q,
+    current: c,
+    mobileCardIndex: j,
+    xLargeCardIndex: J
   };
 };
 export {
-  _ as useComplexImageCarousel
+  st as useComplexImageCarousel
 };

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:"labelSm",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: m = "displayMd",
-  as: l = "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: "labelSm", emphasis: !0, className: t.tag, children: e }),
+  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: l,
+      as: d,
       defaultVariant: m,
-      mobileVariant: d,
-      className: r(t.title, {
-        [t.taggedTitle]: !!e
+      mobileVariant: h,
+      className: s(e.title, {
+        [e.taggedTitle]: !!t
       }),
-      children: s
+      children: typeof r == "string" ? /* @__PURE__ */ a("p", { children: r }) : r
     }
   )
 ] });