@zenpatient-org/healthspan-marketing-ui 0.1.33 → 0.1.34

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),C=require("react"),v=require("../../node_modules/swiper/swiper-react.cjs.js"),_=require("../../node_modules/swiper/modules/navigation.cjs.js"),E=require("../ProgressButton/ProgressButton.cjs.js"),b=require("../../utils/cn/cn.cjs.js"),k=require("../../utils/useSwiper/useSwiper.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const i=require("./complexImageCarousel.module.css.cjs.js"),A=[_.default],M=({view:$,images:f})=>{const{handleSlideChange:S,onSwiperInit:w,swiper:e,activeIndex:s}=k.useSwiper(),[o,r]=C.useState(!1);C.useEffect(()=>{e!=null&&e.el&&(o?e.el.classList.add("is-dragging"):e.el.classList.remove("is-dragging"))},[o,e]);const a=(l=!0)=>{if(!e)return;const t=e.el.closest(`.${i.default.carouselArea}`);if(!t)return;const c=t.getBoundingClientRect(),g=c.left+c.width/2;let u=0,p=1/0;e.slides.forEach((B,T)=>{const h=B.getBoundingClientRect(),j=h.left+h.width/2,m=Math.abs(j-g);m<p&&(p=m,u=T)}),e.activeIndex=u,S(e),l&&(e.updateProgress(),e.updateSlidesClasses())},d=l=>{!e||o||(e.allowSlideNext=!0,e.allowSlidePrev=!0,e.activeIndex=l,e.updateProgress(),e.updateSlidesClasses(),S(e),setTimeout(()=>{if(o)return;const t=e.slides[l];if(t){const c=e.el.closest(`.${i.default.carouselArea}`);if(c){const g=t.getBoundingClientRect(),u=c.getBoundingClientRect();(g.left<u.left||g.right>u.right)&&t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}}},10))},x=()=>{if(!e||s<=0)return d(f.length-1);d(s-1)},I=()=>{if(!e||s>=f.length-1)return d(0);d(s+1)},P=s-1,R=s+1,q=s-2,N=s+2;return n.jsxs("div",{className:i.default.root,children:[n.jsx("div",{className:i.default.header,children:n.jsx(E.ProgressButton,{left:{onClick:x},right:{onClick:I},className:i.default.progressButtonContainer})}),n.jsx("div",{className:i.default.carouselArea,children:n.jsx(v.Swiper,{onSwiper:w,onSlideChange:S,modules:A,slidesPerView:5,speed:300,centeredSlides:!1,className:i.default.swiper,watchSlidesProgress:!0,initialSlide:0,spaceBetween:30,threshold:100,onTouchEnd:()=>{setTimeout(()=>{r(!1),a(!0)},200)},onTouchMove:()=>{r(!0),setTimeout(()=>{o&&a(!1)},10)},onSliderMove:()=>{r(!0)},onReachBeginning:()=>{r(!1),a(!0)},onReachEnd:()=>{r(!1),a(!0)},onTransitionStart:()=>{r(!0)},onTransitionEnd:()=>{setTimeout(()=>{r(!1),a(!0)},200),e&&(e.updateSize(),e.updateSlides(),e.updateProgress(),e.updateSlidesClasses())},children:f.map((l,t)=>n.jsx(v.SwiperSlide,{className:b.cn(i.default.swiperSlide,{activeSlide:t===s,prevSlide:t===P,nextSlide:t===R,prevPrevSlide:t===q,nextNextSlide:t===N}),children:n.jsx("div",{className:i.default.swiperSlideInner,style:{backgroundImage:`url(${l.image})`}})},t))})})]})};exports.ComplexImageCarousel=M;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../utils/cn/cn.cjs.js"),N=require("../ProgressButton/ProgressButton.cjs.js"),u=require("../Typography/Typography.cjs.js"),r=require("./complexImageCarousel.module.css.cjs.js"),v=require("./useComplexImageCarousel.cjs.js"),b=({images:i})=>{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:i});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:a.cn(r.default.slideContainer,r.default[`size-${n[t]}`]),ref:c=>{c&&(p.current[t]=c)},"data-flip-id":`slide-${(j+t)%i.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:a.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:a.cn("progress-buttons",r.default.progressButton)})})]})})};exports.ComplexImageCarousel=b;

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

@@ -1,3 +1,3 @@
 import { TComplexImageCarouselView } from './types';
 
-export declare const ComplexImageCarousel: ({ view, images }: TComplexImageCarouselView) => import("react/jsx-runtime").JSX.Element;
+export declare const ComplexImageCarousel: ({ images }: TComplexImageCarouselView) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,135 +1,58 @@
 "use client";
-import { jsxs as E, jsx as o } from "react/jsx-runtime";
-import { useState as k, useEffect as A } from "react";
-import { Swiper as b, SwiperSlide as D } from "../../node_modules/swiper/swiper-react.es.js";
-import M from "../../node_modules/swiper/modules/navigation.es.js";
-import { ProgressButton as y } from "../ProgressButton/ProgressButton.es.js";
-import { cn as L } from "../../utils/cn/cn.es.js";
-import { useSwiper as $ } from "../../utils/useSwiper/useSwiper.es.js";
-/* empty css                                      */
-/* empty css                                                  */
-/* empty css                                                  */
-import i from "./complexImageCarousel.module.css.es.js";
-const j = [M], Q = ({ view: V, images: g }) => {
-  const { handleSlideChange: m, onSwiperInit: v, swiper: e, activeIndex: s } = $(), [l, r] = k(!1);
-  A(() => {
-    e != null && e.el && (l ? e.el.classList.add("is-dragging") : e.el.classList.remove("is-dragging"));
-  }, [l, e]);
-  const a = (n = !0) => {
-    if (!e) return;
-    const t = e.el.closest(`.${i.carouselArea}`);
-    if (!t) return;
-    const c = t.getBoundingClientRect(), f = c.left + c.width / 2;
-    let d = 0, S = 1 / 0;
-    e.slides.forEach((R, T) => {
-      const p = R.getBoundingClientRect(), B = p.left + p.width / 2, h = Math.abs(B - f);
-      h < S && (S = h, d = T);
-    }), e.activeIndex = d, m(e), n && (e.updateProgress(), e.updateSlidesClasses());
-  }, u = (n) => {
-    !e || l || (e.allowSlideNext = !0, e.allowSlidePrev = !0, e.activeIndex = n, e.updateProgress(), e.updateSlidesClasses(), m(e), setTimeout(() => {
-      if (l) return;
-      const t = e.slides[n];
-      if (t) {
-        const c = e.el.closest(`.${i.carouselArea}`);
-        if (c) {
-          const f = t.getBoundingClientRect(), d = c.getBoundingClientRect();
-          (f.left < d.left || f.right > d.right) && t.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-            inline: "center"
-          });
-        }
-      }
-    }, 10));
-  }, C = () => {
-    if (!e || s <= 0)
-      return u(g.length - 1);
-    u(s - 1);
-  }, w = () => {
-    if (!e || s >= g.length - 1)
-      return u(0);
-    u(s + 1);
-  }, I = s - 1, N = s + 1, x = s - 2, P = s + 2;
-  return /* @__PURE__ */ E("div", { className: i.root, children: [
-    /* @__PURE__ */ o("div", { className: i.header, children: /* @__PURE__ */ o(
-      y,
+import { jsx as i, jsxs as m } 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 e from "./complexImageCarousel.module.css.es.js";
+import { useComplexImageCarousel as y } from "./useComplexImageCarousel.es.js";
+const S = ({ images: a }) => {
+  const {
+    containerRef: p,
+    carouselRef: h,
+    imageRefs: u,
+    descriptionRef: g,
+    descriptionItemRef: C,
+    progressButtonContainerRef: N,
+    visible: r,
+    cardSizes: n,
+    handleCustomPrevClick: v,
+    handleCustomNextClick: w,
+    current: b,
+    mobileCardIndex: o,
+    xLargeCardIndex: d
+  } = y({ images: a });
+  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(
+      "div",
+      {
+        className: s(e.slideContainer, e[`size-${n[t]}`]),
+        ref: (c) => {
+          c && (u.current[t] = c);
+        },
+        "data-flip-id": `slide-${(b + t) % a.length}`,
+        "data-size": n[t],
+        children: /* @__PURE__ */ i("img", { src: l.image, alt: `Slide ${t + 1}`, className: e.image })
+      },
+      l.name
+    )) }),
+    /* @__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[o].title : r[d].title }),
+      /* @__PURE__ */ i(f, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: e.text, children: typeof window < "u" && window.innerWidth <= 768 ? r[o].description : r[d].description })
+    ] }) }),
+    /* @__PURE__ */ i("div", { ref: N, className: e.progressButtonContainer, children: /* @__PURE__ */ i(
+      x,
       {
         left: {
-          onClick: C
+          onClick: v
         },
         right: {
           onClick: w
         },
-        className: i.progressButtonContainer
-      }
-    ) }),
-    /* @__PURE__ */ o("div", { className: i.carouselArea, children: /* @__PURE__ */ o(
-      b,
-      {
-        onSwiper: v,
-        onSlideChange: m,
-        modules: j,
-        slidesPerView: 5,
-        speed: 300,
-        centeredSlides: !1,
-        className: i.swiper,
-        watchSlidesProgress: !0,
-        initialSlide: 0,
-        spaceBetween: 30,
-        threshold: 100,
-        onTouchEnd: () => {
-          setTimeout(() => {
-            r(!1), a(!0);
-          }, 200);
-        },
-        onTouchMove: () => {
-          r(!0), setTimeout(() => {
-            l && a(!1);
-          }, 10);
-        },
-        onSliderMove: () => {
-          r(!0);
-        },
-        onReachBeginning: () => {
-          r(!1), a(!0);
-        },
-        onReachEnd: () => {
-          r(!1), a(!0);
-        },
-        onTransitionStart: () => {
-          r(!0);
-        },
-        onTransitionEnd: () => {
-          setTimeout(() => {
-            r(!1), a(!0);
-          }, 200), e && (e.updateSize(), e.updateSlides(), e.updateProgress(), e.updateSlidesClasses());
-        },
-        children: g.map((n, t) => /* @__PURE__ */ o(
-          D,
-          {
-            className: L(i.swiperSlide, {
-              activeSlide: t === s,
-              prevSlide: t === I,
-              nextSlide: t === N,
-              prevPrevSlide: t === x,
-              nextNextSlide: t === P
-            }),
-            children: /* @__PURE__ */ o(
-              "div",
-              {
-                className: i.swiperSlideInner,
-                style: {
-                  backgroundImage: `url(${n.image})`
-                }
-              }
-            )
-          },
-          t
-        ))
+        className: s("progress-buttons", e.progressButton)
       }
     ) })
-  ] });
+  ] }) });
 };
 export {
-  Q as ComplexImageCarousel
+  S as ComplexImageCarousel
 };

package/dist/components/ComplexImageCarousel/complexImageCarousel.module.css.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="complexImageCarousel-module__root___p3Kd-",o="complexImageCarousel-module__header___sxByG",r="complexImageCarousel-module__progressButtonContainer___l3Qih",s="complexImageCarousel-module__carouselArea___dqNWo",l="complexImageCarousel-module__swiper___W-TcF",_="complexImageCarousel-module__swiperSlide___PjBf9",a="complexImageCarousel-module__swiperSlideInner___J2B0U",t={root:e,header:o,progressButtonContainer:r,carouselArea:s,swiper:l,swiperSlide:_,swiperSlideInner:a};exports.carouselArea=s;exports.default=t;exports.header=o;exports.progressButtonContainer=r;exports.root=e;exports.swiper=l;exports.swiperSlide=_;exports.swiperSlideInner=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="complexImageCarousel-module__container___uoYKj",o="complexImageCarousel-module__carouselArea___dqNWo",s="complexImageCarousel-module__slideContainer___H-r26",r="complexImageCarousel-module__description___R8XsG",t="complexImageCarousel-module__descriptionItem___SAPt8",_="complexImageCarousel-module__progressButtonContainer___l3Qih",l="complexImageCarousel-module__progressButton___b78tE",a={container:e,carouselArea:o,slideContainer:s,"size-atom":"complexImageCarousel-module__size-atom___t7PmI","size-small":"complexImageCarousel-module__size-small___mjSZM","size-medium":"complexImageCarousel-module__size-medium___M-0BQ","size-large":"complexImageCarousel-module__size-large___GITeg","size-x-large":"complexImageCarousel-module__size-x-large___e-BOY",description:r,descriptionItem:t,progressButtonContainer:_,progressButton:l};exports.carouselArea=o;exports.container=e;exports.default=a;exports.description=r;exports.descriptionItem=t;exports.progressButton=l;exports.progressButtonContainer=_;exports.slideContainer=s;

package/dist/components/ComplexImageCarousel/complexImageCarousel.module.css.es.js

@@ -1,19 +1,24 @@
-const e = "complexImageCarousel-module__root___p3Kd-", o = "complexImageCarousel-module__header___sxByG", r = "complexImageCarousel-module__progressButtonContainer___l3Qih", s = "complexImageCarousel-module__carouselArea___dqNWo", _ = "complexImageCarousel-module__swiper___W-TcF", l = "complexImageCarousel-module__swiperSlide___PjBf9", a = "complexImageCarousel-module__swiperSlideInner___J2B0U", n = {
-  root: e,
-  header: o,
+const e = "complexImageCarousel-module__container___uoYKj", o = "complexImageCarousel-module__carouselArea___dqNWo", s = "complexImageCarousel-module__slideContainer___H-r26", _ = "complexImageCarousel-module__description___R8XsG", l = "complexImageCarousel-module__descriptionItem___SAPt8", r = "complexImageCarousel-module__progressButtonContainer___l3Qih", a = "complexImageCarousel-module__progressButton___b78tE", m = {
+  container: e,
+  carouselArea: o,
+  slideContainer: s,
+  "size-atom": "complexImageCarousel-module__size-atom___t7PmI",
+  "size-small": "complexImageCarousel-module__size-small___mjSZM",
+  "size-medium": "complexImageCarousel-module__size-medium___M-0BQ",
+  "size-large": "complexImageCarousel-module__size-large___GITeg",
+  "size-x-large": "complexImageCarousel-module__size-x-large___e-BOY",
+  description: _,
+  descriptionItem: l,
   progressButtonContainer: r,
-  carouselArea: s,
-  swiper: _,
-  swiperSlide: l,
-  swiperSlideInner: a
+  progressButton: a
 };
 export {
-  s as carouselArea,
-  n as default,
-  o as header,
+  o as carouselArea,
+  e as container,
+  m as default,
+  _ as description,
+  l as descriptionItem,
+  a as progressButton,
   r as progressButtonContainer,
-  e as root,
-  _ as swiper,
-  l as swiperSlide,
-  a as swiperSlideInner
+  s as slideContainer
 };

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

@@ -0,0 +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;

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

@@ -0,0 +1,19 @@
+import { TAdvancedImageView } from './types';
+
+export declare const useComplexImageCarousel: ({ images }: {
+    images: TAdvancedImageView[];
+}) => {
+    containerRef: import('react').RefObject<HTMLDivElement>;
+    carouselRef: import('react').RefObject<HTMLDivElement>;
+    imageRefs: import('react').MutableRefObject<HTMLDivElement[]>;
+    descriptionRef: import('react').RefObject<HTMLDivElement>;
+    descriptionItemRef: import('react').RefObject<HTMLDivElement>;
+    progressButtonContainerRef: import('react').RefObject<HTMLDivElement>;
+    visible: TAdvancedImageView[];
+    cardSizes: string[];
+    handleCustomPrevClick: () => void;
+    handleCustomNextClick: () => void;
+    current: number;
+    mobileCardIndex: number;
+    xLargeCardIndex: number;
+};

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

@@ -0,0 +1,133 @@
+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), 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(
+    (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"
+      });
+      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();
+      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, {
+          x: `+=${g}`
+        });
+        const R = C.current.querySelector(
+          ".progress-buttons"
+        );
+        if (R) {
+          const $ = R.getBoundingClientRect(), V = $.left + $.width / 2, j = t - V;
+          c.set(R, {
+            x: `+=${j}`
+          });
+        }
+        const N = t - m.width / 2;
+        c.set(p.current, {
+          width: m.width,
+          height: m.height / 2,
+          marginLeft: N
+        });
+      } else
+        c.set(p.current, {
+          width: r ? r.width : "auto",
+          height: r ? r.height : "auto",
+          marginLeft: r ? r.left : 0
+        });
+      (((W = p.current) == null ? void 0 : W.querySelectorAll(".description-item")) || []).forEach((t, s) => {
+        t.style.zIndex = `${a.length - s}`;
+      }), 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) => {
+          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.remove(`size-${g}`);
+        }), t.classList.add(`size-${u[s]}`));
+      }), requestAnimationFrame(() => {
+        x.from(z.current, {
+          duration: 0.5,
+          ease: "power3.out",
+          targets: f.current,
+          scale: !1,
+          nested: !0,
+          onComplete: () => {
+            L(!1);
+          }
+        }), c.fromTo(
+          I.current,
+          {
+            opacity: 0,
+            y: 20
+          },
+          {
+            opacity: 1,
+            y: 0,
+            duration: 0.5,
+            ease: "power3.out",
+            onComplete: () => {
+              z.current = null;
+            }
+          }
+        );
+      });
+    },
+    [u, i, 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);
+  };
+  function G(e, h) {
+    const r = [];
+    if (typeof window < "u" && window.innerWidth <= 768)
+      for (let n = 0; n < i.length; n++)
+        r.push(e[(h + n) % e.length]);
+    else
+      for (let n = 0; n < u.length; n++)
+        r.push(e[(h + n) % e.length]);
+    return r;
+  }
+  const H = G(a, d);
+  return D(() => {
+    w(d), o.current && c.set(o.current, { clearProps: "all" });
+    const e = K(() => {
+      k(window.innerWidth <= 768 ? i : B), w(d);
+    }, 600);
+    return window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
+    };
+  }, []), {
+    containerRef: A,
+    carouselRef: o,
+    imageRefs: f,
+    descriptionRef: p,
+    descriptionItemRef: I,
+    progressButtonContainerRef: C,
+    visible: H,
+    cardSizes: u,
+    handleCustomPrevClick: F,
+    handleCustomNextClick: T,
+    current: d,
+    mobileCardIndex: P,
+    xLargeCardIndex: O
+  };
+};
+export {
+  _ as useComplexImageCarousel
+};

package/dist/components/FilterMenu/FilterMenu.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),b=require("react"),r=require("../../utils/cn/cn.cjs.js"),j=require("../Icon/Icon.cjs.js"),o=require("../Icon/constants.cjs.js"),c=require("../Typography/Typography.cjs.js"),e=require("./filterMenu.module.css.cjs.js");function N({label:d,open:u=!1,multiple:m,options:p,selectedValue:s,onSelect:f}){const[i,h]=b.useState(u),g=()=>h(a=>!a);return n.jsxs("div",{className:e.default.root,children:[n.jsxs("button",{className:e.default.toggleButton,onClick:g,children:[n.jsx(c.Typography,{defaultVariant:"labelLg",emphasis:!0,children:d}),n.jsx(j.Icon,{name:i?o.EIconName.REMOVE:o.EIconName.PLUS,className:e.default.toggleIcon})]}),n.jsx("div",{className:r.cn(e.default.menu,i&&e.default.isOpen),role:"menu",children:p.map((a,t)=>n.jsxs("ul",{className:e.default.subOptions,children:[a.label&&n.jsx("li",{className:r.cn(e.default.divider,t!==0&&e.default.dividerLine),children:n.jsx(c.Typography,{as:"div",defaultVariant:"bodyMd",weight:"medium",className:e.default.dividerLabel,children:a.label})},t),a.values.map(({value:l,label:y})=>n.jsx("li",{className:e.default.option,onClick:()=>f(l,a),children:n.jsx(c.Typography,{as:"div",defaultVariant:"bodyMd",className:r.cn(e.default.optionLabel,{[e.default.selected]:m?s==null?void 0:s.includes(l):l===s}),children:y})},l))]},`${a.label}_${t}`))})]})}exports.FilterMenu=N;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),j=require("react"),c=require("../../utils/cn/cn.cjs.js"),N=require("../Icon/Icon.cjs.js"),d=require("../Icon/constants.cjs.js"),i=require("../Typography/Typography.cjs.js"),e=require("./filterMenu.module.css.cjs.js");function _({label:u,open:m=!1,multiple:f,options:p,selectedValue:a,headerNode:r,onSelect:h}){const[o,g]=j.useState(m),y=()=>g(s=>!s);return n.jsxs("div",{className:e.default.root,children:[n.jsxs("button",{className:e.default.toggleButton,onClick:y,children:[n.jsx(i.Typography,{defaultVariant:"labelLg",emphasis:!0,children:u}),n.jsx(N.Icon,{name:o?d.EIconName.REMOVE:d.EIconName.PLUS,className:e.default.toggleIcon})]}),n.jsx("div",{className:c.cn(e.default.menu,o&&e.default.isOpen),role:"menu",children:n.jsxs("div",{className:e.default.menuContent,children:[r,p.map((s,t)=>n.jsxs("ul",{className:e.default.subOptions,children:[s.label&&n.jsx("li",{className:c.cn(e.default.divider,{[e.default.dividerLine]:!!(r||t!==0)}),children:n.jsx(i.Typography,{as:"div",defaultVariant:"bodyMd",weight:"medium",className:e.default.dividerLabel,children:s.label})},t),s.values.map(({value:l,label:b})=>n.jsx("li",{className:e.default.option,onClick:()=>h(l,s),children:n.jsx(i.Typography,{as:"div",defaultVariant:"bodyMd",className:c.cn(e.default.optionLabel,{[e.default.selected]:f?a==null?void 0:a.includes(l):l===a}),children:b})},l))]},`${s.label}_${t}`))]})})]})}exports.FilterMenu=_;

package/dist/components/FilterMenu/FilterMenu.d.ts

@@ -1,3 +1,5 @@
+import { default as React } from 'react';
+
 type TOption<T extends string | number> = {
     label: string;
     value: T;
@@ -11,6 +13,7 @@ type FilterMenuProps<T extends string | number> = {
     open?: boolean;
     multiple?: boolean;
     options: ReadonlyArray<TOptionGroup<T>>;
+    headerNode?: React.ReactNode;
     onSelect: (value: T, optionGroup: TOptionGroup<T>) => void;
 } & ({
     multiple: true;
@@ -19,5 +22,5 @@ type FilterMenuProps<T extends string | number> = {
     multiple?: false;
     selectedValue?: T;
 });
-export declare function FilterMenu<T extends string | number>({ label, open, multiple, options, selectedValue, onSelect, }: FilterMenuProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function FilterMenu<T extends string | number>({ label, open, multiple, options, selectedValue, headerNode, onSelect, }: FilterMenuProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/FilterMenu/FilterMenu.es.js

@@ -1,48 +1,61 @@
 "use client";
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { useState as v } from "react";
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { useState as y } from "react";
 import { cn as o } from "../../utils/cn/cn.es.js";
-import { Icon as y } from "../Icon/Icon.es.js";
-import { EIconName as c } from "../Icon/constants.es.js";
+import { Icon as L } from "../Icon/Icon.es.js";
+import { EIconName as d } from "../Icon/constants.es.js";
 import { Typography as m } from "../Typography/Typography.es.js";
 import i from "./filterMenu.module.css.es.js";
 function w({
-  label: d,
-  open: p = !1,
-  multiple: h,
-  options: f,
-  selectedValue: r,
-  onSelect: b
+  label: p,
+  open: h = !1,
+  multiple: f,
+  options: b,
+  selectedValue: l,
+  headerNode: t,
+  onSelect: u
 }) {
-  const [t, u] = v(p), N = () => u((e) => !e);
-  return /* @__PURE__ */ n("div", { className: i.root, children: [
-    /* @__PURE__ */ n("button", { className: i.toggleButton, onClick: N, children: [
-      /* @__PURE__ */ a(m, { defaultVariant: "labelLg", emphasis: !0, children: d }),
-      /* @__PURE__ */ a(y, { name: t ? c.REMOVE : c.PLUS, className: i.toggleIcon })
+  const [c, N] = y(h), g = () => N((e) => !e);
+  return /* @__PURE__ */ r("div", { className: i.root, children: [
+    /* @__PURE__ */ r("button", { className: i.toggleButton, onClick: g, children: [
+      /* @__PURE__ */ a(m, { defaultVariant: "labelLg", emphasis: !0, children: p }),
+      /* @__PURE__ */ a(L, { name: c ? d.REMOVE : d.PLUS, className: i.toggleIcon })
     ] }),
-    /* @__PURE__ */ a("div", { className: o(i.menu, t && i.isOpen), role: "menu", children: f.map((e, s) => /* @__PURE__ */ n("ul", { className: i.subOptions, children: [
-      e.label && /* @__PURE__ */ a("li", { className: o(i.divider, s !== 0 && i.dividerLine), children: /* @__PURE__ */ a(
-        m,
-        {
-          as: "div",
-          defaultVariant: "bodyMd",
-          weight: "medium",
-          className: i.dividerLabel,
-          children: e.label
-        }
-      ) }, s),
-      e.values.map(({ value: l, label: g }) => /* @__PURE__ */ a("li", { className: i.option, onClick: () => b(l, e), children: /* @__PURE__ */ a(
-        m,
-        {
-          as: "div",
-          defaultVariant: "bodyMd",
-          className: o(i.optionLabel, {
-            [i.selected]: h ? r == null ? void 0 : r.includes(l) : l === r
-          }),
-          children: g
-        }
-      ) }, l))
-    ] }, `${e.label}_${s}`)) })
+    /* @__PURE__ */ a("div", { className: o(i.menu, c && i.isOpen), role: "menu", children: /* @__PURE__ */ r("div", { className: i.menuContent, children: [
+      t,
+      b.map((e, s) => /* @__PURE__ */ r("ul", { className: i.subOptions, children: [
+        e.label && /* @__PURE__ */ a(
+          "li",
+          {
+            className: o(i.divider, {
+              [i.dividerLine]: !!(t || s !== 0)
+            }),
+            children: /* @__PURE__ */ a(
+              m,
+              {
+                as: "div",
+                defaultVariant: "bodyMd",
+                weight: "medium",
+                className: i.dividerLabel,
+                children: e.label
+              }
+            )
+          },
+          s
+        ),
+        e.values.map(({ value: n, label: v }) => /* @__PURE__ */ a("li", { className: i.option, onClick: () => u(n, e), children: /* @__PURE__ */ a(
+          m,
+          {
+            as: "div",
+            defaultVariant: "bodyMd",
+            className: o(i.optionLabel, {
+              [i.selected]: f ? l == null ? void 0 : l.includes(n) : n === l
+            }),
+            children: v
+          }
+        ) }, n))
+      ] }, `${e.label}_${s}`))
+    ] }) })
   ] });
 }
 export {

package/dist/components/FilterMenu/filterMenu.module.css.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="filterMenu-module__root___2bQXW",o="filterMenu-module__toggleButton___tuQZ8",t="filterMenu-module__toggleIcon___q7eVA",_="filterMenu-module__menu___a0R5E",i="filterMenu-module__subOptions___4CcnK",n="filterMenu-module__option___Qo7qU",l="filterMenu-module__selected___ixmVF",u="filterMenu-module__divider___6UuTw",d="filterMenu-module__optionLabel___C99H6",s="filterMenu-module__dividerLabel___93rPp",r="filterMenu-module__isOpen___65MDX",c="filterMenu-module__dividerLine___WPDHB",g={root:e,toggleButton:o,toggleIcon:t,menu:_,subOptions:i,option:n,selected:l,divider:u,optionLabel:d,dividerLabel:s,isOpen:r,dividerLine:c};exports.default=g;exports.divider=u;exports.dividerLabel=s;exports.dividerLine=c;exports.isOpen=r;exports.menu=_;exports.option=n;exports.optionLabel=d;exports.root=e;exports.selected=l;exports.subOptions=i;exports.toggleButton=o;exports.toggleIcon=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="filterMenu-module__root___2bQXW",o="filterMenu-module__toggleButton___tuQZ8",t="filterMenu-module__toggleIcon___q7eVA",n="filterMenu-module__menu___a0R5E",_="filterMenu-module__subOptions___4CcnK",i="filterMenu-module__option___Qo7qU",l="filterMenu-module__selected___ixmVF",u="filterMenu-module__divider___6UuTw",d="filterMenu-module__optionLabel___C99H6",s="filterMenu-module__dividerLabel___93rPp",r="filterMenu-module__dividerLine___WPDHB",c="filterMenu-module__isOpen___65MDX",m="filterMenu-module__menuContent___a3NE8",g={root:e,toggleButton:o,toggleIcon:t,menu:n,subOptions:_,option:i,selected:l,divider:u,optionLabel:d,dividerLabel:s,dividerLine:r,isOpen:c,menuContent:m};exports.default=g;exports.divider=u;exports.dividerLabel=s;exports.dividerLine=r;exports.isOpen=c;exports.menu=n;exports.menuContent=m;exports.option=i;exports.optionLabel=d;exports.root=e;exports.selected=l;exports.subOptions=_;exports.toggleButton=o;exports.toggleIcon=t;

package/dist/components/FilterMenu/filterMenu.module.css.es.js

@@ -1,4 +1,4 @@
-const e = "filterMenu-module__root___2bQXW", o = "filterMenu-module__toggleButton___tuQZ8", _ = "filterMenu-module__toggleIcon___q7eVA", t = "filterMenu-module__menu___a0R5E", n = "filterMenu-module__subOptions___4CcnK", i = "filterMenu-module__option___Qo7qU", l = "filterMenu-module__selected___ixmVF", u = "filterMenu-module__divider___6UuTw", d = "filterMenu-module__optionLabel___C99H6", s = "filterMenu-module__dividerLabel___93rPp", r = "filterMenu-module__isOpen___65MDX", c = "filterMenu-module__dividerLine___WPDHB", m = {
+const e = "filterMenu-module__root___2bQXW", o = "filterMenu-module__toggleButton___tuQZ8", _ = "filterMenu-module__toggleIcon___q7eVA", t = "filterMenu-module__menu___a0R5E", n = "filterMenu-module__subOptions___4CcnK", i = "filterMenu-module__option___Qo7qU", l = "filterMenu-module__selected___ixmVF", u = "filterMenu-module__divider___6UuTw", d = "filterMenu-module__optionLabel___C99H6", s = "filterMenu-module__dividerLabel___93rPp", r = "filterMenu-module__dividerLine___WPDHB", c = "filterMenu-module__isOpen___65MDX", m = "filterMenu-module__menuContent___a3NE8", f = {
   root: e,
   toggleButton: o,
   toggleIcon: _,
@@ -9,16 +9,18 @@ const e = "filterMenu-module__root___2bQXW", o = "filterMenu-module__toggleButto
   divider: u,
   optionLabel: d,
   dividerLabel: s,
-  isOpen: r,
-  dividerLine: c
+  dividerLine: r,
+  isOpen: c,
+  menuContent: m
 };
 export {
-  m as default,
+  f as default,
   u as divider,
   s as dividerLabel,
-  c as dividerLine,
-  r as isOpen,
+  r as dividerLine,
+  c as isOpen,
   t as menu,
+  m as menuContent,
   i as option,
   d as optionLabel,
   e as root,

package/dist/components/Pagination/Pagination.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("react"),d=require("../../utils/cn/cn.cjs.js"),i=require("../Icon/Icon.cjs.js"),f=require("../Icon/constants.cjs.js"),_=require("../Typography/Typography.cjs.js"),e=require("./pagination.module.css.cjs.js"),h=(r,t,n)=>{if(t<=n)return Array.from({length:t},(c,u)=>u+1);const s=Math.floor(n/2);let o=Math.max(1,r-s),l=o+n-1;return l>t&&(l=t,o=l-n+1),Array.from({length:n},(c,u)=>o+u)},N=({page:r,pagesCount:t,visiblePagesLimit:n,disabled:s,onPageChange:o})=>{const l=m.useMemo(()=>h(r,t,n),[r,t,n]);return a.jsxs("div",{className:e.default.root,children:[r>1&&a.jsx("button",{className:d.cn(e.default.arrow,e.default.arrowPrev),onClick:()=>o(r-1),disabled:s,"aria-label":"Previous page",children:a.jsx(i.Icon,{name:f.EIconName.ARROW_BACK,className:e.default.icon})}),l.map(c=>a.jsx("button",{className:d.cn(e.default.page,c===r&&e.default.activePage),onClick:()=>o(c),children:a.jsx(_.Typography,{defaultVariant:"labelXl",weight:"regular",children:c.toString().padStart(2,"0")})},c)),r<t&&a.jsx("button",{className:d.cn(e.default.arrow,e.default.arrowNext),onClick:()=>o(r+1),disabled:s,"aria-label":"Next page",children:a.jsx(i.Icon,{name:f.EIconName.ARROW_FORWARD,className:e.default.icon})})]})};exports.Pagination=N;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),m=require("react"),d=require("../../utils/cn/cn.cjs.js"),i=require("../Icon/Icon.cjs.js"),f=require("../Icon/constants.cjs.js"),_=require("../Typography/Typography.cjs.js"),e=require("./pagination.module.css.cjs.js"),h=(r,t,a)=>{if(t<=a)return Array.from({length:t},(c,u)=>u+1);const s=Math.floor(a/2);let n=Math.max(1,r-s),l=n+a-1;return l>t&&(l=t,n=l-a+1),Array.from({length:a},(c,u)=>n+u)},N=({page:r,pagesCount:t,visiblePagesLimit:a,disabled:s,onPageChange:n})=>{const l=m.useMemo(()=>h(r,t,a),[r,t,a]);return o.jsxs("div",{className:e.default.root,children:[o.jsx("button",{className:d.cn(e.default.arrow,e.default.arrowPrev),onClick:()=>n(r-1),disabled:s||r<=1,"aria-label":"Previous page",children:o.jsx(i.Icon,{name:f.EIconName.ARROW_BACK,className:e.default.icon})}),l.map(c=>o.jsx("button",{className:d.cn(e.default.page,c===r&&e.default.activePage),onClick:()=>n(c),children:o.jsx(_.Typography,{defaultVariant:"labelXl",weight:"regular",children:c.toString().padStart(2,"0")})},c)),o.jsx("button",{className:d.cn(e.default.arrow,e.default.arrowNext),onClick:()=>n(r+1),disabled:s||r>=t,"aria-label":"Next page",children:o.jsx(i.Icon,{name:f.EIconName.ARROW_FORWARD,className:e.default.icon})})]})};exports.Pagination=N;