@zenpatient-org/healthspan-marketing-ui 0.1.145 → 0.1.146

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

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

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

@@ -1,52 +1,53 @@
 "use client";
-import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
 import { cn as s } from "../../../utils/cn/cn.es.js";
-import { ProgressButton as y } from "../../ProgressButton/ProgressButton.es.js";
-import { Typography as m } from "../../Typography/Typography.es.js";
+import { ProgressButton as I } from "../../ProgressButton/ProgressButton.es.js";
+import { Typography as f } from "../../Typography/Typography.es.js";
 import { useComplexImageCarousel as R } from "../useComplexImageCarousel.es.js";
 import e from "./complexImageCarousel.module.css.es.js";
-const z = ({ images: o }) => {
+const L = ({ images: o }) => {
   const {
-    containerRef: f,
-    carouselRef: p,
-    imageRefs: h,
-    descriptionRef: u,
-    descriptionItemRef: g,
-    progressButtonContainerRef: C,
+    MOBILE_BREAKPOINT: a,
+    containerRef: p,
+    carouselRef: h,
+    imageRefs: u,
+    descriptionRef: g,
+    descriptionItemRef: C,
+    progressButtonContainerRef: N,
     visible: r,
-    cardSizes: a,
-    handleCustomPrevClick: N,
-    handleCustomNextClick: v,
-    current: w,
-    mobileCardIndex: n,
-    xLargeCardIndex: d
+    cardSizes: n,
+    handleCustomPrevClick: v,
+    handleCustomNextClick: w,
+    current: b,
+    mobileCardIndex: d,
+    xLargeCardIndex: l
   } = R({ 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(
+  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((y, t) => /* @__PURE__ */ i(
       "div",
       {
-        className: s(e.slideContainer, e[`size-${a[t]}`]),
-        ref: (l) => {
-          l && (h.current[t] = l);
+        className: s(e.slideContainer, e[`size-${n[t]}`]),
+        ref: (c) => {
+          c && (u.current[t] = c);
         },
-        "data-flip-id": `slide-${(w + t) % o.length}`,
-        "data-size": a[t],
-        children: /* @__PURE__ */ i("img", { src: b.image, alt: `Slide ${t + 1}`, className: e.image })
+        "data-flip-id": `slide-${(b + t) % o.length}`,
+        "data-size": n[t],
+        children: /* @__PURE__ */ i("img", { src: y.image, alt: `Slide ${t + 1}`, className: e.image })
       },
       t + 1
     )) }),
-    /* @__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: "headingSm", 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: 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: "headingSm", children: typeof window < "u" && window.innerWidth <= a ? r[d].title : r[l].title }),
+      /* @__PURE__ */ i(f, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: e.text, children: typeof window < "u" && window.innerWidth <= a ? r[d].description : r[l].description })
     ] }) }),
-    /* @__PURE__ */ i("div", { ref: C, className: e.progressButtonContainer, children: /* @__PURE__ */ i(
-      y,
+    /* @__PURE__ */ i("div", { ref: N, className: e.progressButtonContainer, children: /* @__PURE__ */ i(
+      I,
       {
         left: {
-          onClick: N
+          onClick: v
         },
         right: {
-          onClick: v
+          onClick: w
         },
         className: s("progress-buttons", e.progressButton)
       }
@@ -54,5 +55,5 @@ const z = ({ images: o }) => {
   ] }) });
 };
 export {
-  z as ComplexCarousel
+  L as ComplexCarousel
 };

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),p=require("../../ComplexTooltip/ComplexTooltip.cjs.js");require("../../Icon/Icon.cjs.js");const o=require("../../Typography/Typography.cjs.js"),m=require("../../InfiniteScroll/InfiniteScroll.cjs.js"),e=require("./simpleImageCarousel.module.css.cjs.js"),u=({images:a})=>{const[l,r]=c.useState(null);return t.jsx("div",{className:e.default.simpleContainer,children:t.jsx(m.InfiniteScroll,{items:a,renderItem:(s,n)=>t.jsxs("div",{className:e.default.simpleItem,onMouseEnter:i=>{r({x:i.clientX,y:i.clientY})},onMouseMove:i=>{r({x:i.clientX,y:i.clientY})},children:[t.jsx(p.ComplexTooltip,{trigger:"hover",title:s.title||"",description:s.description||"",style:"light",transformMode:"absolute",transform:{top:(l==null?void 0:l.y)||0,left:l==null?void 0:l.x},children:t.jsx("img",{src:s.image,alt:s.title,className:e.default.simpleImage})}),t.jsx(o.Typography,{as:"h4",defaultVariant:"headingXs",mobileVariant:"bodyLg",className:e.default.simpleTitle,children:s.title}),t.jsx(o.Typography,{as:"p",defaultVariant:"bodySm",mobileVariant:"bodyXs",className:e.default.simpleDescription,children:s.description})]},n),itemClassName:e.default.simpleItemWrapper,contentClassName:e.default.simpleContent,rootClassName:e.default.simpleRoot})})};exports.SimpleImageCarousel=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),p=require("react"),m=require("../../../utils/useIsMobile.cjs.js"),u=require("../../ComplexTooltip/ComplexTooltip.cjs.js");require("../../Icon/Icon.cjs.js");const n=require("../../Typography/Typography.cjs.js"),d=require("../../InfiniteScroll/InfiniteScroll.cjs.js"),e=require("./simpleImageCarousel.module.css.cjs.js"),f=({images:a})=>{const[t,i]=p.useState(null),r=m.useIsMobile(930);return l.jsx("div",{className:e.default.simpleContainer,children:l.jsx(d.InfiniteScroll,{items:a,enableManualScroll:r,slowOnTouch:r,renderItem:(s,c)=>l.jsxs("div",{className:e.default.simpleItem,onMouseEnter:o=>{i({x:o.clientX,y:window.scrollY+o.clientY})},onMouseMove:o=>{i({x:o.clientX,y:window.scrollY+o.clientY})},children:[l.jsx(u.ComplexTooltip,{trigger:"hover",title:s.title||"",description:s.description||"",style:"light",transformMode:"absolute",transform:{top:(t==null?void 0:t.y)||0,left:t==null?void 0:t.x},children:l.jsx("img",{src:s.image,alt:s.title,className:e.default.simpleImage})}),l.jsx(n.Typography,{as:"h4",defaultVariant:"headingXs",mobileVariant:"bodyLg",className:e.default.simpleTitle,children:s.title}),l.jsx(n.Typography,{as:"p",defaultVariant:"bodySm",mobileVariant:"bodyXs",className:e.default.simpleDescription,children:s.description})]},c),itemClassName:e.default.simpleItemWrapper,contentClassName:e.default.simpleContent,rootClassName:e.default.simpleRoot})})};exports.SimpleImageCarousel=f;

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

@@ -1,69 +1,72 @@
 "use client";
-import { jsx as l, jsxs as n } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { ComplexTooltip as c } from "../../ComplexTooltip/ComplexTooltip.es.js";
+import { jsx as i, jsxs as p } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { useIsMobile as d } from "../../../utils/useIsMobile.es.js";
+import { ComplexTooltip as f } from "../../ComplexTooltip/ComplexTooltip.es.js";
 import "../../Icon/Icon.es.js";
-import { Typography as o } from "../../Typography/Typography.es.js";
-import { InfiniteScroll as d } from "../../InfiniteScroll/InfiniteScroll.es.js";
+import { Typography as n } from "../../Typography/Typography.es.js";
+import { InfiniteScroll as h } from "../../InfiniteScroll/InfiniteScroll.es.js";
 import e from "./simpleImageCarousel.module.css.es.js";
-const b = ({ images: m }) => {
-  const [t, s] = p(null);
-  return /* @__PURE__ */ l("div", { className: e.simpleContainer, children: /* @__PURE__ */ l(
-    d,
+const g = ({ images: a }) => {
+  const [t, s] = c(null), r = d(930);
+  return /* @__PURE__ */ i("div", { className: e.simpleContainer, children: /* @__PURE__ */ i(
+    h,
     {
-      items: m,
-      renderItem: (i, a) => /* @__PURE__ */ n(
+      items: a,
+      enableManualScroll: r,
+      slowOnTouch: r,
+      renderItem: (l, m) => /* @__PURE__ */ p(
         "div",
         {
           className: e.simpleItem,
-          onMouseEnter: (r) => {
+          onMouseEnter: (o) => {
             s({
-              x: r.clientX,
-              y: r.clientY
+              x: o.clientX,
+              y: window.scrollY + o.clientY
             });
           },
-          onMouseMove: (r) => {
+          onMouseMove: (o) => {
             s({
-              x: r.clientX,
-              y: r.clientY
+              x: o.clientX,
+              y: window.scrollY + o.clientY
             });
           },
           children: [
-            /* @__PURE__ */ l(
-              c,
+            /* @__PURE__ */ i(
+              f,
               {
                 trigger: "hover",
-                title: i.title || "",
-                description: i.description || "",
+                title: l.title || "",
+                description: l.description || "",
                 style: "light",
                 transformMode: "absolute",
                 transform: { top: (t == null ? void 0 : t.y) || 0, left: t == null ? void 0 : t.x },
-                children: /* @__PURE__ */ l("img", { src: i.image, alt: i.title, className: e.simpleImage })
+                children: /* @__PURE__ */ i("img", { src: l.image, alt: l.title, className: e.simpleImage })
               }
             ),
-            /* @__PURE__ */ l(
-              o,
+            /* @__PURE__ */ i(
+              n,
               {
                 as: "h4",
                 defaultVariant: "headingXs",
                 mobileVariant: "bodyLg",
                 className: e.simpleTitle,
-                children: i.title
+                children: l.title
               }
             ),
-            /* @__PURE__ */ l(
-              o,
+            /* @__PURE__ */ i(
+              n,
               {
                 as: "p",
                 defaultVariant: "bodySm",
                 mobileVariant: "bodyXs",
                 className: e.simpleDescription,
-                children: i.description
+                children: l.description
               }
             )
           ]
         },
-        a
+        m
       ),
       itemClassName: e.simpleItemWrapper,
       contentClassName: e.simpleContent,
@@ -72,5 +75,5 @@ const b = ({ images: m }) => {
   ) });
 };
 export {
-  b as SimpleImageCarousel
+  g as SimpleImageCarousel
 };

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

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

package/dist/components/ComplexImageCarousel/useComplexImageCarousel.d.ts

@@ -3,6 +3,7 @@ import { TAdvancedImageView } from './types';
 export declare const useComplexImageCarousel: ({ images }: {
     images: TAdvancedImageView[];
 }) => {
+    MOBILE_BREAKPOINT: number;
     containerRef: import('react').RefObject<HTMLDivElement>;
     carouselRef: import('react').RefObject<HTMLDivElement>;
     imageRefs: import('react').MutableRefObject<HTMLDivElement[]>;

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

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

package/dist/components/ContentTabs/ContentTabs.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../utils/cn/cn.cjs.js"),s=require("../Typography/Typography.cjs.js"),d=require("../IconBracket/IconBracket.cjs.js"),u=require("../Icon/Icon.cjs.js"),n=require("./contentTabs.module.css.cjs.js");function m({tabs:c,activeTab:t,colorScheme:r,activeWithArrow:o,onTabClick:i}){return e.jsx("div",{className:l.cn(n.default.root,n.default[r]),children:c.map(a=>e.jsxs("div",{className:n.default.tabWrap,children:[e.jsxs("button",{className:l.cn(n.default.tab,{[n.default.activeTab]:t.label===a.label}),onClick:()=>i(a),children:[t.label===a.label&&o&&e.jsx("div",{className:n.default.arrow,children:e.jsx(d.IconBracket,{variant:"arrow",size:"md",colorScheme:r})}),a.icon&&e.jsx(u.Icon,{name:a.icon,className:n.default.icon}),e.jsx(s.Typography,{defaultVariant:"headingXxs",children:a.label})]}),e.jsx("div",{className:l.cn(n.default.itemContent,{[n.default.itemContentOpen]:t.label===a.label}),children:e.jsx("div",{className:n.default.itemContentInner,children:e.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",children:a.description})})})]},String(a.label)))})}exports.ContentTabs=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../utils/cn/cn.cjs.js"),s=require("../Typography/Typography.cjs.js"),d=require("../IconBracket/IconBracket.cjs.js"),u=require("../Icon/Icon.cjs.js"),n=require("./contentTabs.module.css.cjs.js");function m({tabs:c,activeTab:t,colorScheme:r,activeWithArrow:o,onTabClick:i}){return e.jsx("div",{className:l.cn(n.default.root,n.default[r]),children:c.map(a=>e.jsxs("div",{className:n.default.tabWrap,children:[e.jsxs("button",{className:l.cn(n.default.tab,{[n.default.activeTab]:t.label===a.label}),onClick:()=>i(a),children:[t.label===a.label&&o&&e.jsx("div",{className:n.default.arrow,children:e.jsx(d.IconBracket,{variant:"arrow",size:"md",colorScheme:r})}),a.icon&&e.jsx(u.Icon,{name:a.icon,className:n.default.icon}),e.jsx(s.Typography,{defaultVariant:"headingXxs",children:a.label})]}),e.jsx("div",{className:l.cn(n.default.itemContent,{[n.default.itemContentOpen]:t.label===a.label}),children:e.jsx("div",{className:n.default.itemContentInner,children:e.jsx(s.Typography,{as:"div",defaultVariant:"bodySm",children:a.description})})})]},String(a.label)))})}exports.ContentTabs=m;