@zenpatient-org/healthspan-marketing-ui 0.1.171 → 0.2.1

package/dist/components/ComplexImageCarousel/ComplexCarousel/complexImageCarousel.module.css

@@ -0,0 +1,125 @@
+.root {
+    display: grid;
+    grid-template-rows: 2.5vw auto 1fr;
+    @media (width <= 930px) {
+        gap: var(--spacing-32);
+        margin-top: 40px;
+        grid-template-rows: 1fr auto;
+        grid-template-columns: 1fr;
+    }
+}
+.container {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: -1;
+    overflow: hidden;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-28);
+
+    @media (width <= 930px) {
+        grid-row-end: 2;
+    }
+}
+
+.carouselArea {
+    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
+    gap: var(--spacing-28);
+    align-items: flex-end;
+    transform: translateX(-50px);
+    pointer-events: none;
+    
+    @media (width <= 930px) {
+        pointer-events: initial;
+        gap: var(--spacing-8);
+        grid-row-start: 1;
+        grid-row-end: 2;
+    }
+}
+
+.slideContainer {
+    bottom: 0;
+    aspect-ratio: 4 / 5;
+    height: auto;
+    flex-shrink: 0;
+    transform-origin: bottom;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+
+    @media (width <= 930px) {
+        margin-bottom: 0;
+    }
+
+    img {
+        user-select: none;
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+        border-radius: var(--border-radius-md);
+    }
+    &.size-atom {
+        aspect-ratio: initial;
+        width: 0;
+        height: 0;
+    }
+    &.size-small {
+        width: clamp(140px, 8vw, 260px);
+    }
+    &.size-medium {
+        width: clamp(180px, 14vw, 360px);
+    }
+    &.size-large {
+        width: clamp(220px, 20vw, 480px);
+    }
+    &.size-x-large {
+        width: clamp(260px, 26vw, 600px);
+    }
+}
+
+.description {
+    text-align: center;
+    position: relative;
+    h3 {
+        margin-bottom: var(--spacing-12);
+    }
+    @media (width <= 930px) {
+        grid-row-start: 2;
+    }
+}
+
+.descriptionItem {
+    background-color: var(--color-white);
+}
+
+.progressButtonContainer {
+    grid-row-start: 2;
+    grid-column-start: 1;
+    white-space: pre-line;
+    z-index: 99;
+    width: 82vw;
+    max-width: var(--content-max-width);
+    margin: 0 auto;
+
+    @media (width <= 930px) {
+        padding: 0;
+        grid-row-start: 2;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    @media (width <= 768px) {
+        width: 100vw;
+    }
+}
+
+.progressButton {
+    background-color: var(--color-bg-base-light);
+}

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("./ComplexCarousel/ComplexCarousel.cjs.js"),s=require("./SimpleImageCarousel/SimpleImageCarousel.cjs.js"),u=({view:l,images:e})=>l==="simple"?r.jsx(s.SimpleImageCarousel,{images:e}):r.jsx(o.ComplexCarousel,{images:e});exports.ComplexImageCarousel=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("./SimpleImageCarousel/SimpleImageCarousel.cjs.js"),s=require("./ComplexCarousel/ComplexCarousel.cjs.js"),u=({view:l,images:e})=>l==="simple"?r.jsx(o.SimpleImageCarousel,{images:e}):r.jsx(s.ComplexCarousel,{images:e});exports.ComplexImageCarousel=u;

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

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
-import { ComplexCarousel as m } from "./ComplexCarousel/ComplexCarousel.es.js";
-import { SimpleImageCarousel as l } from "./SimpleImageCarousel/SimpleImageCarousel.es.js";
-const i = ({ view: o, images: e }) => o === "simple" ? /* @__PURE__ */ r(l, { images: e }) : /* @__PURE__ */ r(m, { images: e });
+import { SimpleImageCarousel as m } from "./SimpleImageCarousel/SimpleImageCarousel.es.js";
+import { ComplexCarousel as l } from "./ComplexCarousel/ComplexCarousel.es.js";
+const i = ({ view: o, images: e }) => o === "simple" ? /* @__PURE__ */ r(m, { images: e }) : /* @__PURE__ */ r(l, { images: e });
 export {
   i as ComplexImageCarousel
 };

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

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

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

@@ -1,21 +1,20 @@
 "use client";
-import { jsx as i, jsxs as p } from "react/jsx-runtime";
-import { useState as c } from "react";
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import { useState as p } 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 e from "../../../components/ComplexImageCarousel/SimpleImageCarousel/simpleImageCarousel.module.css";
+import { InfiniteScroll as f } from "../../InfiniteScroll/InfiniteScroll.es.js";
+import { ComplexTooltip as h } from "../../ComplexTooltip/ComplexTooltip.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 g = ({ images: a }) => {
-  const [t, s] = c(null), r = d(930);
+const I = ({ images: a }) => {
+  const [t, s] = p(null), r = d(930);
   return /* @__PURE__ */ i("div", { className: e.simpleContainer, children: /* @__PURE__ */ i(
-    h,
+    f,
     {
       items: a,
       enableManualScroll: r,
       slowOnTouch: r,
-      renderItem: (l, m) => /* @__PURE__ */ p(
+      renderItem: (l, m) => /* @__PURE__ */ c(
         "div",
         {
           className: e.simpleItem,
@@ -33,7 +32,7 @@ const g = ({ images: a }) => {
           },
           children: [
             /* @__PURE__ */ i(
-              f,
+              h,
               {
                 trigger: "hover",
                 title: l.title || "",
@@ -75,5 +74,5 @@ const g = ({ images: a }) => {
   ) });
 };
 export {
-  g as SimpleImageCarousel
+  I as SimpleImageCarousel
 };

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

@@ -0,0 +1,51 @@
+.simpleContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: var(--spacing-24);
+}
+
+.simpleContent {
+    gap: var(--spacing-18);
+}
+
+.simpleItemWrapper {
+  position: relative;
+}
+
+.simpleItem {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  width: clamp(300px, 4vw, 600px);
+
+  img {
+    border-radius: var(--border-radius-md);
+    aspect-ratio: 4 / 5;
+    width: clamp(300px, 3vw, 600px);
+    height: auto;
+    object-fit: cover;
+    object-position: center;
+  }
+}
+
+.simpleTitle {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.simpleDescription {
+  white-space: initial;
+}
+
+@media (width >= 900px) {
+  .simpleItem {
+    border-radius: var(--border-radius-lg);
+  }
+  .simpleDescription {
+    display: none;
+  }
+}

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

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

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

@@ -1,41 +1,41 @@
 "use client";
-import { useGSAP as nt } from "../../node_modules/@gsap/react/src/index.es.js";
-import { gsap as o } from "../../node_modules/gsap/index.es.js";
+import { useGSAP as nt } from "@gsap/react";
+import o from "gsap";
 import { Flip as M } from "../../node_modules/gsap/Flip.es.js";
 import { Draggable as U } from "../../node_modules/gsap/Draggable.es.js";
 import { useState as x, useRef as a, useCallback as ot } from "react";
 o.registerPlugin(M);
 o.registerPlugin(U);
-const v = 12, dt = ({ images: r }) => {
-  if (r.length > 0 && r.length < v) {
+const W = 12, dt = ({ images: r }) => {
+  if (r.length > 0 && r.length < W) {
     const t = [...r];
-    for (; r.length < v; )
+    for (; r.length < W; )
       r.push(...t);
   }
   const [d, F] = x(0), R = a(d);
   R.current = d;
   const [m, z] = x(!1), G = a(null), e = a(null), p = a([]), I = a(null), A = a(null), V = a(null), B = a(null), l = ["atom", "small", "medium", "large", "medium", "small", "atom"], P = ["atom", "small", "medium", "large", "x-large", "large", "medium", "small", "atom"], [L, T] = x(0), [f, b] = x(
-    typeof window < "u" && window.innerWidth <= 930 ? l : P
+    typeof window != "undefined" && window.innerWidth <= 930 ? l : P
   ), j = l.indexOf("large"), J = f.indexOf("x-large"), N = o.matchMedia(), C = ot(
     (t) => {
       var _, $, H, K;
       if (!e.current) return;
-      let s = 0;
+      let i = 0;
       if (window.innerWidth <= 930) {
         const c = e.current.querySelector('[data-size="large"]');
-        s = c ? c.offsetHeight : 0;
+        i = c ? c.offsetHeight : 0;
       } else {
         const c = e.current.querySelector('[data-size="x-large"]');
-        s = c ? c.offsetHeight : 0, o.set(e.current, {
+        i = c ? c.offsetHeight : 0, o.set(e.current, {
           x: 0
         });
       }
-      if (s > 0 && (T(s), o.set(e.current, {
-        height: s
+      if (i > 0 && (T(i), o.set(e.current, {
+        height: i
       })), o.set((_ = e.current) == null ? void 0 : _.querySelectorAll("[data-size]"), {
         y: 0
       }), !p.current.length) return;
-      const i = ($ = e.current) == null ? void 0 : $.querySelector('[data-size="x-large"]'), n = i == null ? void 0 : i.getBoundingClientRect(), g = (H = e.current) == null ? void 0 : H.querySelector('[data-size="large"]'), u = g == null ? void 0 : g.getBoundingClientRect();
+      const s = ($ = e.current) == null ? void 0 : $.querySelector('[data-size="x-large"]'), n = s == null ? void 0 : s.getBoundingClientRect(), g = (H = e.current) == null ? void 0 : H.querySelector('[data-size="large"]'), u = g == null ? void 0 : g.getBoundingClientRect();
       N.add(
         {
           isMobile: "(max-width: 930px)",
@@ -43,38 +43,38 @@ const v = 12, dt = ({ images: r }) => {
         },
         (c) => {
           var k, q, D;
-          const { isDesktop: S, isMobile: tt } = c.conditions || {};
+          const { isDesktop: O, isMobile: tt } = c.conditions || {};
           if (T(((k = e.current) == null ? void 0 : k.offsetHeight) || 0), tt) {
             if (b(l), o.set(e.current, {
               height: L || ((q = e.current) == null ? void 0 : q.offsetHeight) || "auto"
             }), !u) return;
-            const h = window.innerWidth / 2, E = u.right - u.width / 2, O = h - E;
+            const h = window.innerWidth / 2, E = u.right - u.width / 2, S = h - E;
             o.set(e.current, {
-              x: `+=${O}`
+              x: `+=${S}`
             });
             const et = h - u.width / 2;
             o.set(I.current, {
               width: u.width,
               marginLeft: et
-            }), p.current.forEach((y, W) => {
-              y && W < l.length && (l.forEach((rt) => {
+            }), p.current.forEach((y, v) => {
+              y && v < l.length && (l.forEach((rt) => {
                 y.classList.remove(`size-${rt}`);
-              }), y.classList.add(`size-${l[W]}`));
+              }), y.classList.add(`size-${l[v]}`));
             });
           }
-          S && (b(P), o.set(e.current, {
+          O && (b(P), o.set(e.current, {
             height: L || ((D = e.current) == null ? void 0 : D.offsetHeight) || "auto"
           }), o.set(I.current, {
             width: n ? n.width : "auto",
             marginLeft: n ? n.left : 0
           }), p.current.forEach((h, E) => {
-            h && E < f.length && (f.forEach((O) => {
-              h.classList.remove(`size-${O}`);
+            h && E < f.length && (f.forEach((S) => {
+              h.classList.remove(`size-${S}`);
             }), h.classList.add(`size-${f[E]}`));
           }));
         }
-      ), (((K = I.current) == null ? void 0 : K.querySelectorAll(".description-item")) || []).forEach((c, S) => {
-        c.style.zIndex = `${r.length - S}`;
+      ), (((K = I.current) == null ? void 0 : K.querySelectorAll(".description-item")) || []).forEach((c, O) => {
+        c.style.zIndex = `${r.length - O}`;
       }), z(!0), B.current = M.getState(p.current, {
         simple: !0
       }), F(t), o.delayedCall(0, () => {
@@ -113,28 +113,28 @@ const v = 12, dt = ({ images: r }) => {
     const t = (d + 1) % r.length;
     C(t);
   };
-  function Y(t, s) {
-    const i = [];
-    if (typeof window < "u" && window.innerWidth <= 930)
+  function Y(t, i) {
+    const s = [];
+    if (typeof window != "undefined" && window.innerWidth <= 930)
       for (let n = 0; n < l.length; n++)
-        i.push(t[(s + n) % t.length]);
+        s.push(t[(i + n) % t.length]);
     else
       for (let n = 0; n < f.length; n++)
-        i.push(t[(s + n) % t.length]);
-    return i;
+        s.push(t[(i + n) % t.length]);
+    return s;
   }
   const Z = Y(r, d);
   return nt(() => {
     C(d);
     const t = e.current;
     t && N.add("(max-width: 930px)", () => {
-      const s = { x: 0 }, i = U.create(t, {
+      const i = { x: 0 }, s = U.create(t, {
         type: "x",
         onDragStart: () => {
-          m || (s.x = t.scrollLeft + t.getBoundingClientRect().left);
+          m || (i.x = t.scrollLeft + t.getBoundingClientRect().left);
         },
         onDragEnd: () => {
-          const g = t.scrollLeft + t.getBoundingClientRect().left - s.x, u = 20;
+          const g = t.scrollLeft + t.getBoundingClientRect().left - i.x, u = 20;
           if (g > u) {
             if (m) return;
             const w = (R.current - 1 + r.length) % r.length;
@@ -147,7 +147,7 @@ const v = 12, dt = ({ images: r }) => {
         }
       });
       return () => {
-        i[0] && i[0].kill();
+        s[0] && s[0].kill();
       };
     });
   }, []), {

package/dist/components/ComplexTooltip/ComplexTooltip.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),e=require("react"),q=require("../../_virtual/Popover.cjs.js"),k=require("../../utils/useIsMobile.cjs.js"),P=require("./components/ComplexTooltipContent/ComplexTooltipContent.cjs.js"),E=require("./complexTooltip.module.css.cjs.js"),O=({trigger:n,title:a,description:m,link:v,transformMode:u="relative",transform:b={top:0,left:0},style:f="light",isBlurred:C=!1,children:c,positions:T=["top","bottom","left","right"],onClose:r})=>{const[d,l]=e.useState(!1),o=e.useRef(null),s=e.useCallback(()=>{o.current&&clearTimeout(o.current),o.current=setTimeout(()=>l(!0),200)},[]),t=e.useCallback(()=>{o.current=setTimeout(()=>{l(!1),r==null||r()},200)},[r]),p=e.useCallback(()=>l(h=>!h),[]),x=e.useMemo(()=>n==="hover"?{onMouseEnter:s,onMouseLeave:t}:{onClick:p},[n,s,t,p]),M=e.useMemo(()=>n==="hover"?{onMouseEnter:s,onMouseLeave:t}:{},[n,s,t]);return e.useEffect(()=>()=>{o.current&&clearTimeout(o.current)},[]),k.useIsMobile()?c:i.jsx(q.PopoverExports.Popover,{isOpen:d,positions:T,padding:8,onClickOutside:t,containerClassName:E.default.popover,transformMode:u,transform:u==="absolute"?b:void 0,containerStyle:{pointerEvents:u==="absolute"?"none":"auto"},content:i.jsx(P.ComplexTooltipContent,{title:a,description:m,link:v,style:f,isBlurred:C,onClose:t,...M}),children:i.jsx("div",{...x,children:c})})};exports.ComplexTooltip=O;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),e=require("react"),k=require("react-tiny-popover"),q=require("../../utils/useIsMobile.cjs.js"),j=require("../../src/components/ComplexTooltip/complexTooltip.module.css"),y=require("./components/ComplexTooltipContent/ComplexTooltipContent.cjs.js"),O=({trigger:n,title:p,description:m,link:v,transformMode:u="relative",transform:b={top:0,left:0},style:f="light",isBlurred:C=!1,children:c,positions:T=["top","bottom","left","right"],onClose:s})=>{const[M,i]=e.useState(!1),t=e.useRef(null),r=e.useCallback(()=>{t.current&&clearTimeout(t.current),t.current=setTimeout(()=>i(!0),200)},[]),o=e.useCallback(()=>{t.current=setTimeout(()=>{i(!1),s==null||s()},200)},[s]),a=e.useCallback(()=>i(h=>!h),[]),d=e.useMemo(()=>n==="hover"?{onMouseEnter:r,onMouseLeave:o}:{onClick:a},[n,r,o,a]),x=e.useMemo(()=>n==="hover"?{onMouseEnter:r,onMouseLeave:o}:{},[n,r,o]);return e.useEffect(()=>()=>{t.current&&clearTimeout(t.current)},[]),q.useIsMobile()?c:l.jsx(k.Popover,{isOpen:M,positions:T,padding:8,onClickOutside:o,containerClassName:j.popover,transformMode:u,transform:u==="absolute"?b:void 0,containerStyle:{pointerEvents:u==="absolute"?"none":"auto"},content:l.jsx(y.ComplexTooltipContent,{title:p,description:m,link:v,style:f,isBlurred:C,onClose:o,...x}),children:l.jsx("div",{...d,children:c})})};exports.ComplexTooltip=O;

package/dist/components/ComplexTooltip/ComplexTooltip.es.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as u } from "react/jsx-runtime";
-import { useState as P, useRef as k, useCallback as l, useMemo as a, useEffect as O } from "react";
-import { P as y } from "../../_virtual/Popover.es.js";
+import { useState as E, useRef as O, useCallback as l, useMemo as a, useEffect as P } from "react";
+import { Popover as y } from "react-tiny-popover";
 import { useIsMobile as L } from "../../utils/useIsMobile.es.js";
-import { ComplexTooltipContent as S } from "./components/ComplexTooltipContent/ComplexTooltipContent.es.js";
-import j from "./complexTooltip.module.css.es.js";
+import S from "../../components/ComplexTooltip/complexTooltip.module.css";
+import { ComplexTooltipContent as j } from "./components/ComplexTooltipContent/ComplexTooltipContent.es.js";
 const B = ({
-  trigger: t,
+  trigger: o,
   title: m,
   description: f,
   link: v,
@@ -16,46 +16,46 @@ const B = ({
   isBlurred: T = !1,
   children: p,
   positions: d = ["top", "bottom", "left", "right"],
-  onClose: r
+  onClose: n
 }) => {
-  const [C, i] = P(!1), e = k(null), n = l(() => {
+  const [C, i] = E(!1), e = O(null), r = l(() => {
     e.current && clearTimeout(e.current), e.current = setTimeout(() => i(!0), 200);
-  }, []), o = l(() => {
+  }, []), t = l(() => {
     e.current = setTimeout(() => {
-      i(!1), r == null || r();
+      i(!1), n == null || n();
     }, 200);
-  }, [r]), c = l(() => i((E) => !E), []), M = a(() => t === "hover" ? {
-    onMouseEnter: n,
-    onMouseLeave: o
+  }, [n]), c = l(() => i((x) => !x), []), M = a(() => o === "hover" ? {
+    onMouseEnter: r,
+    onMouseLeave: t
   } : {
     onClick: c
-  }, [t, n, o, c]), x = a(() => t === "hover" ? {
-    onMouseEnter: n,
-    onMouseLeave: o
-  } : {}, [t, n, o]);
-  return O(() => () => {
+  }, [o, r, t, c]), k = a(() => o === "hover" ? {
+    onMouseEnter: r,
+    onMouseLeave: t
+  } : {}, [o, r, t]);
+  return P(() => () => {
     e.current && clearTimeout(e.current);
   }, []), L() ? p : /* @__PURE__ */ u(
-    y.Popover,
+    y,
     {
       isOpen: C,
       positions: d,
       padding: 8,
-      onClickOutside: o,
-      containerClassName: j.popover,
+      onClickOutside: t,
+      containerClassName: S.popover,
       transformMode: s,
       transform: s === "absolute" ? b : void 0,
       containerStyle: { pointerEvents: s === "absolute" ? "none" : "auto" },
       content: /* @__PURE__ */ u(
-        S,
+        j,
         {
           title: m,
           description: f,
           link: v,
           style: h,
           isBlurred: T,
-          onClose: o,
-          ...x
+          onClose: t,
+          ...k
         }
       ),
       children: /* @__PURE__ */ u("div", { ...M, children: p })

package/dist/components/ComplexTooltip/complexTooltip.module.css

@@ -0,0 +1,3 @@
+.popover {
+    z-index: 1000;
+}

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../../Icon/Icon.cjs.js"),a=require("../../../Icon/constants.cjs.js"),h=require("../../../TextButton/TextButton.cjs.js"),s=require("../../../Typography/Typography.cjs.js"),x=require("../../../../utils/cn/cn.cjs.js"),t=require("./complexTooltipContent.module.css.cjs.js"),_=({style:n,title:l,description:u,link:o,isBlurred:r,className:i,onMouseEnter:d,onMouseLeave:p,onClose:c})=>e.jsxs("div",{className:x.cn(t.default.content,r&&t.default.blurred,i),"data-style":n,onMouseEnter:d,onMouseLeave:p,children:[e.jsxs("div",{className:t.default.contentHeader,children:[e.jsx(s.Typography,{as:"h4",defaultVariant:"headingSm",children:l}),c&&e.jsxs("button",{className:t.default.closeButton,onClick:c,children:["(",e.jsx(m.Icon,{name:a.EIconName.CLOSE,className:t.default.closeIcon}),")"]})]}),e.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",children:u}),o&&e.jsx(h.TextButton,{suffixIcon:a.EIconName.ARROW_FORWARD,as:"a",href:o.url,target:"_blank",rel:"noopener noreferrer",inverted:n==="dark"&&!r||n==="light"&&r,children:o.label})]});exports.ComplexTooltipContent=_;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../../../utils/cn/cn.cjs.js"),n=require("../../../../src/components/ComplexTooltip/components/ComplexTooltipContent/complexTooltipContent.module.css"),s=require("../../../Typography/Typography.cjs.js"),h=require("../../../Icon/Icon.cjs.js"),a=require("../../../Icon/constants.cjs.js"),x=require("../../../TextButton/TextButton.cjs.js"),_=({style:t,title:i,description:l,link:o,isBlurred:c,className:u,onMouseEnter:p,onMouseLeave:d,onClose:r})=>e.jsxs("div",{className:m.cn(n.content,c&&n.blurred,u),"data-style":t,onMouseEnter:p,onMouseLeave:d,children:[e.jsxs("div",{className:n.contentHeader,children:[e.jsx(s.Typography,{as:"h4",defaultVariant:"headingSm",children:i}),r&&e.jsxs("button",{className:n.closeButton,onClick:r,children:["(",e.jsx(h.Icon,{name:a.EIconName.CLOSE,className:n.closeIcon}),")"]})]}),e.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",children:l}),o&&e.jsx(x.TextButton,{suffixIcon:a.EIconName.ARROW_FORWARD,as:"a",href:o.url,target:"_blank",rel:"noopener noreferrer",inverted:t==="dark"&&!c||t==="light"&&c,children:o.label})]});exports.ComplexTooltipContent=_;

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.es.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { Icon as h } from "../../../Icon/Icon.es.js";
-import { EIconName as c } from "../../../Icon/constants.es.js";
-import { TextButton as u } from "../../../TextButton/TextButton.es.js";
-import { Typography as i } from "../../../Typography/Typography.es.js";
-import { cn as x } from "../../../../utils/cn/cn.es.js";
-import e from "./complexTooltipContent.module.css.es.js";
+import { cn as h } from "../../../../utils/cn/cn.es.js";
+import e from "../../../../components/ComplexTooltip/components/ComplexTooltipContent/complexTooltipContent.module.css";
+import { Typography as c } from "../../../Typography/Typography.es.js";
+import { Icon as u } from "../../../Icon/Icon.es.js";
+import { EIconName as i } from "../../../Icon/constants.es.js";
+import { TextButton as x } from "../../../TextButton/TextButton.es.js";
 const C = ({
   style: o,
   title: l,
@@ -19,24 +19,24 @@ const C = ({
 }) => /* @__PURE__ */ a(
   "div",
   {
-    className: x(e.content, n && e.blurred, d),
+    className: h(e.content, n && e.blurred, d),
     "data-style": o,
     onMouseEnter: p,
     onMouseLeave: f,
     children: [
       /* @__PURE__ */ a("div", { className: e.contentHeader, children: [
-        /* @__PURE__ */ r(i, { as: "h4", defaultVariant: "headingSm", children: l }),
+        /* @__PURE__ */ r(c, { as: "h4", defaultVariant: "headingSm", children: l }),
         m && /* @__PURE__ */ a("button", { className: e.closeButton, onClick: m, children: [
           "(",
-          /* @__PURE__ */ r(h, { name: c.CLOSE, className: e.closeIcon }),
+          /* @__PURE__ */ r(u, { name: i.CLOSE, className: e.closeIcon }),
           ")"
         ] })
       ] }),
-      /* @__PURE__ */ r(i, { as: "p", defaultVariant: "bodySm", children: s }),
+      /* @__PURE__ */ r(c, { as: "p", defaultVariant: "bodySm", children: s }),
       t && /* @__PURE__ */ r(
-        u,
+        x,
         {
-          suffixIcon: c.ARROW_FORWARD,
+          suffixIcon: i.ARROW_FORWARD,
           as: "a",
           href: t.url,
           target: "_blank",