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

package/dist/modules/ExpandingDetails/ExpandingDetails.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),R=require("../../node_modules/@gsap/react/src/index.cjs.js"),i=require("../../node_modules/gsap/index.cjs.js"),y=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),W=require("react"),z=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),B=require("../../utils/debounce.cjs.js"),t=require("./expandingDetails.module.css.cjs.js");i.gsap.registerPlugin(y.ScrollTrigger);const L=({colorScheme:f,label:p,title:w,sections:$})=>{const s=W.useRef(null);return R.useGSAP(()=>{if(!s.current)return;const d=()=>{var x;i.gsap.killTweensOf("*"),y.ScrollTrigger.getAll().forEach(e=>e.kill());const o=i.gsap.utils.toArray('[data-scroll-id="section"]'),r=(x=s.current)==null?void 0:x.querySelector('[data-scroll-id="sections"]');if(!r)return;const A=i.gsap.matchMedia(),h=i.gsap.timeline({scrollTrigger:{trigger:s.current,start:"top top",end:()=>`+=${o.length*500}`,scrub:1,markers:!1,pin:!0}}),m=r==null?void 0:r.querySelector('[data-scroll-id="heading"]');if(!m)return;const S=1366;o.forEach((e,q)=>{A.add({isMobile:`(max-width: ${S}px)`,isDesktop:`(min-width: ${S+1}px)`},D=>{var b,P,j,T,v,E,H,N,k,V;const c=e==null?void 0:e.querySelector('[data-scroll-id="heading"]'),a=e==null?void 0:e.querySelector('[data-scroll-id="content"]');if(!c||!a)return;const g=D.conditions,M=g==null?void 0:g.isMobile,_=g==null?void 0:g.isDesktop;i.gsap.set(r==null?void 0:r.querySelectorAll('[data-scroll-id="section"]'),{height:m.offsetHeight||0}),i.gsap.set(r==null?void 0:r.querySelectorAll('[data-scroll-id="protocol"]'),{scale:.5,yPercent:0}),i.gsap.set(r==null?void 0:r.querySelectorAll('[data-scroll-id="image-circle"]'),{scale:.5,yPercent:5}),_&&(h.to(e,{height:c.offsetHeight+a.offsetHeight}).to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:2,yPercent:50},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:2,yPercent:50},"<").to(a,{height:a.offsetHeight},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:1},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:1,yPercent:5},"<"),q<o.length-1&&h.to(e,{height:c.offsetHeight,delay:.5}).to(e.nextElementSibling,{height:c.offsetHeight+a.offsetHeight},"<").to(((b=e.nextElementSibling)==null?void 0:b.querySelector('[data-scroll-id="section-title"]'))||null,{scale:2,yPercent:100},"<").to(((P=e.nextElementSibling)==null?void 0:P.querySelector('[data-scroll-id="section-index"]'))||null,{scale:2,yPercent:100},"<").to(((j=e.nextElementSibling)==null?void 0:j.querySelector('[data-scroll-id="content"]'))||null,{height:a.offsetHeight,yPercent:0},"<").to(((T=e.nextElementSibling)==null?void 0:T.querySelector('[data-scroll-id="protocol"]'))||null,{scale:1},"<").to(((v=e.nextElementSibling)==null?void 0:v.querySelector('[data-scroll-id="image-circle"]'))||null,{scale:1,yPercent:5},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:1,yPercent:-15},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:1,yPercent:-15},"<").to(a,{height:0,yPercent:0},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:0,yPercent:200},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:0,yPercent:200},"<")),M&&(h.to(e,{height:c.offsetHeight+a.offsetHeight}).to(a,{height:a.offsetHeight},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:1},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:1,yPercent:5},"<"),q<o.length-1&&h.to(e,{height:c.offsetHeight,delay:.5}).to(e.nextElementSibling,{height:c.offsetHeight+a.offsetHeight},"<").to(((E=e.nextElementSibling)==null?void 0:E.querySelector('[data-scroll-id="section-title"]'))||null,{scale:1,yPercent:100},"<").to(((H=e.nextElementSibling)==null?void 0:H.querySelector('[data-scroll-id="section-index"]'))||null,{scale:1,yPercent:100},"<").to(((N=e.nextElementSibling)==null?void 0:N.querySelector('[data-scroll-id="content"]'))||null,{height:a.offsetHeight,yPercent:0},"<").to(((k=e.nextElementSibling)==null?void 0:k.querySelector('[data-scroll-id="protocol"]'))||null,{scale:1},"<").to(((V=e.nextElementSibling)==null?void 0:V.querySelector('[data-scroll-id="image-circle"]'))||null,{scale:1,yPercent:5},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:1,yPercent:-15},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:1,yPercent:-15},"<").to(a,{height:0,yPercent:0},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:0,yPercent:200},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:0,yPercent:200},"<"))})})};d();const u=B.default(()=>{d()},200);return window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u),y.ScrollTrigger.getAll().forEach(o=>o.kill()),i.gsap.killTweensOf("*")}},{scope:s,dependencies:[s]}),l.jsx("div",{ref:s,className:`${t.default.root} ${t.default[f]}`,children:l.jsxs("div",{className:t.default.expandingDetailsWrapper,children:[l.jsxs("header",{"data-scroll-id":"header",className:t.default.header,children:[p&&l.jsx(n.Typography,{as:"div",defaultVariant:"labelSm",emphasis:!0,className:t.default.label,children:p}),l.jsx(z.HighlightedTitle,{as:"div",defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:f,className:t.default.title,title:w})]}),l.jsx("div",{"data-scroll-id":"sections",className:t.default.sections,children:$.map((d,u)=>l.jsxs("div",{id:`section-${u+1}`,"data-scroll-id":"section",className:t.default.section,children:[l.jsxs("div",{"data-scroll-id":"heading",className:t.default.heading,children:[l.jsx("div",{"data-scroll-id":"section-title",className:t.default.sectionTitleWrapper,children:l.jsx(n.Typography,{as:"h3",defaultVariant:"headingSm",className:t.default.sectionTitle,children:d.title})}),l.jsx("div",{"data-scroll-id":"section-index",className:t.default.sectionIndexWrapper,children:l.jsxs(n.Typography,{as:"p",defaultVariant:"headingSm",className:t.default.sectionIndex,children:["(",String(u+1).padStart(2,"0"),")"]})})]}),l.jsxs("div",{"data-scroll-id":"content",className:t.default.content,children:[l.jsxs("div",{"data-scroll-id":"protocol",className:t.default.protocolWrapper,children:[d.subtitle&&l.jsx(n.Typography,{as:"h4",defaultVariant:"headingLg",mobileVariant:"headingXs",children:d.subtitle}),l.jsx(n.Typography,{className:t.default.description,as:"div",defaultVariant:"bodyMd",mobileVariant:"bodyXs",children:d.description})]}),l.jsx("div",{"data-scroll-id":"image-circle",className:t.default.imageCircle,children:l.jsx("img",{src:d.image,alt:d.title})})]}),l.jsx("div",{className:t.default.leftBorder}),l.jsx("div",{className:t.default.rightBorder})]},d.title))})]})})};exports.ExpandingDetails=L;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),W=require("../../node_modules/@gsap/react/src/index.cjs.js"),s=require("../../node_modules/gsap/index.cjs.js"),z=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),$=require("react"),B=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),h=require("../../components/Typography/Typography.cjs.js"),L=require("../../utils/debounce.cjs.js"),t=require("./expandingDetails.module.css.cjs.js");s.gsap.registerPlugin(z.ScrollTrigger);const X=({colorScheme:y,label:m,title:D,sections:w})=>{const o=$.useRef(null),i=$.useRef({});return W.useGSAP(()=>{if(!o.current)return;const d=()=>{var q;i.current.timeline&&i.current.timeline.kill(),i.current.matchMedia&&i.current.matchMedia.kill();const f=s.gsap.utils.toArray('[data-scroll-id="section"]'),r=(q=o.current)==null?void 0:q.querySelector('[data-scroll-id="sections"]');if(!r)return;const p=s.gsap.matchMedia();i.current.matchMedia=p;const g=s.gsap.timeline({scrollTrigger:{trigger:o.current,start:"top top",end:()=>`+=${f.length*500}`,scrub:1,markers:!1,pin:!0}});i.current.timeline=g;const S=r==null?void 0:r.querySelector('[data-scroll-id="heading"]');if(!S)return;const x=1366;f.forEach((e,b)=>{p.add({isMobile:`(max-width: ${x}px)`,isDesktop:`(min-width: ${x+1}px)`},R=>{var P,j,v,H,N,E,T,M,k,V;const c=e==null?void 0:e.querySelector('[data-scroll-id="heading"]'),a=e==null?void 0:e.querySelector('[data-scroll-id="content"]');if(!c||!a)return;const n=R.conditions,A=n==null?void 0:n.isMobile,_=n==null?void 0:n.isDesktop;s.gsap.set(r==null?void 0:r.querySelectorAll('[data-scroll-id="section"]'),{height:S.offsetHeight||0}),s.gsap.set(r==null?void 0:r.querySelectorAll('[data-scroll-id="protocol"]'),{scale:.5,yPercent:0}),s.gsap.set(r==null?void 0:r.querySelectorAll('[data-scroll-id="image-circle"]'),{scale:.5,yPercent:5}),_&&(g.to(e,{height:c.offsetHeight+a.offsetHeight}).to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:2,yPercent:50},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:2,yPercent:50},"<").to(a,{height:a.offsetHeight},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:1},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:1,yPercent:5},"<"),b<f.length-1&&g.to(e,{height:c.offsetHeight,delay:.5}).to(e.nextElementSibling,{height:c.offsetHeight+a.offsetHeight},"<").to(((P=e.nextElementSibling)==null?void 0:P.querySelector('[data-scroll-id="section-title"]'))||null,{scale:2,yPercent:100},"<").to(((j=e.nextElementSibling)==null?void 0:j.querySelector('[data-scroll-id="section-index"]'))||null,{scale:2,yPercent:100},"<").to(((v=e.nextElementSibling)==null?void 0:v.querySelector('[data-scroll-id="content"]'))||null,{height:a.offsetHeight,yPercent:0},"<").to(((H=e.nextElementSibling)==null?void 0:H.querySelector('[data-scroll-id="protocol"]'))||null,{scale:1},"<").to(((N=e.nextElementSibling)==null?void 0:N.querySelector('[data-scroll-id="image-circle"]'))||null,{scale:1,yPercent:5},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:1,yPercent:-15},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:1,yPercent:-15},"<").to(a,{height:0,yPercent:0},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:0,yPercent:200},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:0,yPercent:200},"<")),A&&(g.to(e,{height:c.offsetHeight+a.offsetHeight}).to(a,{height:a.offsetHeight},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:1},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:1,yPercent:5},"<"),b<f.length-1&&g.to(e,{height:c.offsetHeight,delay:.5}).to(e.nextElementSibling,{height:c.offsetHeight+a.offsetHeight},"<").to(((E=e.nextElementSibling)==null?void 0:E.querySelector('[data-scroll-id="section-title"]'))||null,{scale:1,yPercent:100},"<").to(((T=e.nextElementSibling)==null?void 0:T.querySelector('[data-scroll-id="section-index"]'))||null,{scale:1,yPercent:100},"<").to(((M=e.nextElementSibling)==null?void 0:M.querySelector('[data-scroll-id="content"]'))||null,{height:a.offsetHeight,yPercent:0},"<").to(((k=e.nextElementSibling)==null?void 0:k.querySelector('[data-scroll-id="protocol"]'))||null,{scale:1},"<").to(((V=e.nextElementSibling)==null?void 0:V.querySelector('[data-scroll-id="image-circle"]'))||null,{scale:1,yPercent:5},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:1,yPercent:-15},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:1,yPercent:-15},"<").to(a,{height:0,yPercent:0},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:0,yPercent:200},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:0,yPercent:200},"<"))})})};d();const u=L.default(()=>{d()},200);return window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u),i.current.timeline&&i.current.timeline.kill(),i.current.matchMedia&&i.current.matchMedia.kill()}},{scope:o,dependencies:[o]}),l.jsx("div",{ref:o,className:`${t.default.root} ${t.default[y]}`,children:l.jsxs("div",{className:t.default.expandingDetailsWrapper,children:[l.jsxs("header",{"data-scroll-id":"header",className:t.default.header,children:[m&&l.jsx(h.Typography,{as:"div",defaultVariant:"labelSm",emphasis:!0,className:t.default.label,children:m}),l.jsx(B.HighlightedTitle,{as:"div",defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:y,className:t.default.title,title:D})]}),l.jsx("div",{"data-scroll-id":"sections",className:t.default.sections,children:w.map((d,u)=>l.jsxs("div",{id:`section-${u+1}`,"data-scroll-id":"section",className:t.default.section,children:[l.jsxs("div",{"data-scroll-id":"heading",className:t.default.heading,children:[l.jsx("div",{"data-scroll-id":"section-title",className:t.default.sectionTitleWrapper,children:l.jsx(h.Typography,{as:"h3",defaultVariant:"headingSm",className:t.default.sectionTitle,children:d.title})}),l.jsx("div",{"data-scroll-id":"section-index",className:t.default.sectionIndexWrapper,children:l.jsxs(h.Typography,{as:"p",defaultVariant:"headingSm",className:t.default.sectionIndex,children:["(",String(u+1).padStart(2,"0"),")"]})})]}),l.jsxs("div",{"data-scroll-id":"content",className:t.default.content,children:[l.jsxs("div",{"data-scroll-id":"protocol",className:t.default.protocolWrapper,children:[d.subtitle&&l.jsx(h.Typography,{as:"h4",defaultVariant:"headingLg",mobileVariant:"headingXs",children:d.subtitle}),l.jsx(h.Typography,{className:t.default.description,as:"div",defaultVariant:"bodyMd",mobileVariant:"bodyXs",children:d.description})]}),l.jsx("div",{"data-scroll-id":"image-circle",className:t.default.imageCircle,children:l.jsx("img",{src:d.image,alt:d.title})})]}),l.jsx("div",{className:t.default.leftBorder}),l.jsx("div",{className:t.default.rightBorder})]},d.title))})]})})};exports.ExpandingDetails=X;

package/dist/modules/ExpandingDetails/ExpandingDetails.es.js

@@ -1,56 +1,60 @@
 "use client";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { useGSAP as L } from "../../node_modules/@gsap/react/src/index.es.js";
-import { gsap as i } from "../../node_modules/gsap/index.es.js";
-import { ScrollTrigger as y } from "../../node_modules/gsap/ScrollTrigger.es.js";
-import { useRef as R } from "react";
-import { HighlightedTitle as X } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as m } from "../../components/Typography/Typography.es.js";
-import j from "../../utils/debounce.es.js";
+import { gsap as s } from "../../node_modules/gsap/index.es.js";
+import { ScrollTrigger as X } from "../../node_modules/gsap/ScrollTrigger.es.js";
+import { useRef as A } from "react";
+import { HighlightedTitle as j } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as u } from "../../components/Typography/Typography.es.js";
+import I from "../../utils/debounce.es.js";
 import l from "./expandingDetails.module.css.es.js";
-i.registerPlugin(y);
-const Z = ({ colorScheme: f, label: p, title: M, sections: $ }) => {
-  const s = R(null);
+s.registerPlugin(X);
+const _ = ({ colorScheme: y, label: p, title: D, sections: W }) => {
+  const n = A(null), i = A({});
   return L(
     () => {
-      if (!s.current) return;
+      if (!n.current) return;
       const d = () => {
-        var b;
-        i.killTweensOf("*"), y.getAll().forEach((e) => e.kill());
-        const h = i.utils.toArray('[data-scroll-id="section"]'), r = (b = s.current) == null ? void 0 : b.querySelector('[data-scroll-id="sections"]');
+        var x;
+        i.current.timeline && i.current.timeline.kill(), i.current.matchMedia && i.current.matchMedia.kill();
+        const f = s.utils.toArray('[data-scroll-id="section"]'), r = (x = n.current) == null ? void 0 : x.querySelector('[data-scroll-id="sections"]');
         if (!r) return;
-        const D = i.matchMedia(), u = i.timeline({
+        const S = s.matchMedia();
+        i.current.matchMedia = S;
+        const g = s.timeline({
           scrollTrigger: {
-            trigger: s.current,
+            trigger: n.current,
             start: "top top",
-            end: () => `+=${h.length * 500}`,
+            end: () => `+=${f.length * 500}`,
             scrub: 1,
             markers: !1,
             pin: !0
           }
-        }), S = r == null ? void 0 : r.querySelector('[data-scroll-id="heading"]');
-        if (!S) return;
-        const q = 1366;
-        h.forEach((e, x) => {
-          D.add(
+        });
+        i.current.timeline = g;
+        const q = r == null ? void 0 : r.querySelector('[data-scroll-id="heading"]');
+        if (!q) return;
+        const b = 1366;
+        f.forEach((e, P) => {
+          S.add(
             {
-              isMobile: `(max-width: ${q}px)`,
-              isDesktop: `(min-width: ${q + 1}px)`
+              isMobile: `(max-width: ${b}px)`,
+              isDesktop: `(min-width: ${b + 1}px)`
             },
-            (W) => {
-              var P, v, E, N, H, k, T, V, w, A;
+            (R) => {
+              var v, N, E, H, M, k, V, T, w, $;
               const c = e == null ? void 0 : e.querySelector('[data-scroll-id="heading"]'), t = e == null ? void 0 : e.querySelector('[data-scroll-id="content"]');
               if (!c || !t) return;
-              const g = W.conditions, z = g == null ? void 0 : g.isMobile, B = g == null ? void 0 : g.isDesktop;
-              i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="section"]'), {
-                height: S.offsetHeight || 0
-              }), i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="protocol"]'), {
+              const h = R.conditions, z = h == null ? void 0 : h.isMobile, B = h == null ? void 0 : h.isDesktop;
+              s.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="section"]'), {
+                height: q.offsetHeight || 0
+              }), s.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="protocol"]'), {
                 scale: 0.5,
                 yPercent: 0
-              }), i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="image-circle"]'), {
+              }), s.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="image-circle"]'), {
                 scale: 0.5,
                 yPercent: 5
-              }), B && (u.to(e, { height: c.offsetHeight + t.offsetHeight }).to(
+              }), B && (g.to(e, { height: c.offsetHeight + t.offsetHeight }).to(
                 e == null ? void 0 : e.querySelector('[data-scroll-id="section-title"]'),
                 { scale: 2, yPercent: 50 },
                 "<"
@@ -62,18 +66,18 @@ const Z = ({ colorScheme: f, label: p, title: M, sections: $ }) => {
                 e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
                 { scale: 1, yPercent: 5 },
                 "<"
-              ), x < h.length - 1 && u.to(e, { height: c.offsetHeight, delay: 0.5 }).to(
+              ), P < f.length - 1 && g.to(e, { height: c.offsetHeight, delay: 0.5 }).to(
                 e.nextElementSibling,
                 { height: c.offsetHeight + t.offsetHeight },
                 "<"
               ).to(
-                ((P = e.nextElementSibling) == null ? void 0 : P.querySelector(
+                ((v = e.nextElementSibling) == null ? void 0 : v.querySelector(
                   '[data-scroll-id="section-title"]'
                 )) || null,
                 { scale: 2, yPercent: 100 },
                 "<"
               ).to(
-                ((v = e.nextElementSibling) == null ? void 0 : v.querySelector(
+                ((N = e.nextElementSibling) == null ? void 0 : N.querySelector(
                   '[data-scroll-id="section-index"]'
                 )) || null,
                 { scale: 2, yPercent: 100 },
@@ -83,11 +87,11 @@ const Z = ({ colorScheme: f, label: p, title: M, sections: $ }) => {
                 { height: t.offsetHeight, yPercent: 0 },
                 "<"
               ).to(
-                ((N = e.nextElementSibling) == null ? void 0 : N.querySelector('[data-scroll-id="protocol"]')) || null,
+                ((H = e.nextElementSibling) == null ? void 0 : H.querySelector('[data-scroll-id="protocol"]')) || null,
                 { scale: 1 },
                 "<"
               ).to(
-                ((H = e.nextElementSibling) == null ? void 0 : H.querySelector(
+                ((M = e.nextElementSibling) == null ? void 0 : M.querySelector(
                   '[data-scroll-id="image-circle"]'
                 )) || null,
                 { scale: 1, yPercent: 5 },
@@ -108,11 +112,11 @@ const Z = ({ colorScheme: f, label: p, title: M, sections: $ }) => {
                 e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
                 { scale: 0, yPercent: 200 },
                 "<"
-              )), z && (u.to(e, { height: c.offsetHeight + t.offsetHeight }).to(t, { height: t.offsetHeight }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 1 }, "<").to(
+              )), z && (g.to(e, { height: c.offsetHeight + t.offsetHeight }).to(t, { height: t.offsetHeight }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 1 }, "<").to(
                 e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
                 { scale: 1, yPercent: 5 },
                 "<"
-              ), x < h.length - 1 && u.to(e, { height: c.offsetHeight, delay: 0.5 }).to(
+              ), P < f.length - 1 && g.to(e, { height: c.offsetHeight, delay: 0.5 }).to(
                 e.nextElementSibling,
                 { height: c.offsetHeight + t.offsetHeight },
                 "<"
@@ -123,13 +127,13 @@ const Z = ({ colorScheme: f, label: p, title: M, sections: $ }) => {
                 { scale: 1, yPercent: 100 },
                 "<"
               ).to(
-                ((T = e.nextElementSibling) == null ? void 0 : T.querySelector(
+                ((V = e.nextElementSibling) == null ? void 0 : V.querySelector(
                   '[data-scroll-id="section-index"]'
                 )) || null,
                 { scale: 1, yPercent: 100 },
                 "<"
               ).to(
-                ((V = e.nextElementSibling) == null ? void 0 : V.querySelector('[data-scroll-id="content"]')) || null,
+                ((T = e.nextElementSibling) == null ? void 0 : T.querySelector('[data-scroll-id="content"]')) || null,
                 { height: t.offsetHeight, yPercent: 0 },
                 "<"
               ).to(
@@ -137,7 +141,7 @@ const Z = ({ colorScheme: f, label: p, title: M, sections: $ }) => {
                 { scale: 1 },
                 "<"
               ).to(
-                ((A = e.nextElementSibling) == null ? void 0 : A.querySelector(
+                (($ = e.nextElementSibling) == null ? void 0 : $.querySelector(
                   '[data-scroll-id="image-circle"]'
                 )) || null,
                 { scale: 1, yPercent: 5 },
@@ -164,52 +168,52 @@ const Z = ({ colorScheme: f, label: p, title: M, sections: $ }) => {
         });
       };
       d();
-      const n = j(() => {
+      const m = I(() => {
         d();
       }, 200);
-      return window.addEventListener("resize", n), () => {
-        window.removeEventListener("resize", n), y.getAll().forEach((h) => h.kill()), i.killTweensOf("*");
+      return window.addEventListener("resize", m), () => {
+        window.removeEventListener("resize", m), i.current.timeline && i.current.timeline.kill(), i.current.matchMedia && i.current.matchMedia.kill();
       };
     },
     {
-      scope: s,
-      dependencies: [s]
+      scope: n,
+      dependencies: [n]
     }
-  ), /* @__PURE__ */ a("div", { ref: s, className: `${l.root} ${l[f]}`, children: /* @__PURE__ */ o("div", { className: l.expandingDetailsWrapper, children: [
+  ), /* @__PURE__ */ a("div", { ref: n, className: `${l.root} ${l[y]}`, children: /* @__PURE__ */ o("div", { className: l.expandingDetailsWrapper, children: [
     /* @__PURE__ */ o("header", { "data-scroll-id": "header", className: l.header, children: [
-      p && /* @__PURE__ */ a(m, { as: "div", defaultVariant: "labelSm", emphasis: !0, className: l.label, children: p }),
+      p && /* @__PURE__ */ a(u, { as: "div", defaultVariant: "labelSm", emphasis: !0, className: l.label, children: p }),
       /* @__PURE__ */ a(
-        X,
+        j,
         {
           as: "div",
           defaultVariant: "displayMd",
           mobileVariant: "headingXl",
-          colorScheme: f,
+          colorScheme: y,
           className: l.title,
-          title: M
+          title: D
         }
       )
     ] }),
-    /* @__PURE__ */ a("div", { "data-scroll-id": "sections", className: l.sections, children: $.map((d, n) => /* @__PURE__ */ o(
+    /* @__PURE__ */ a("div", { "data-scroll-id": "sections", className: l.sections, children: W.map((d, m) => /* @__PURE__ */ o(
       "div",
       {
-        id: `section-${n + 1}`,
+        id: `section-${m + 1}`,
         "data-scroll-id": "section",
         className: l.section,
         children: [
           /* @__PURE__ */ o("div", { "data-scroll-id": "heading", className: l.heading, children: [
-            /* @__PURE__ */ a("div", { "data-scroll-id": "section-title", className: l.sectionTitleWrapper, children: /* @__PURE__ */ a(m, { as: "h3", defaultVariant: "headingSm", className: l.sectionTitle, children: d.title }) }),
-            /* @__PURE__ */ a("div", { "data-scroll-id": "section-index", className: l.sectionIndexWrapper, children: /* @__PURE__ */ o(m, { as: "p", defaultVariant: "headingSm", className: l.sectionIndex, children: [
+            /* @__PURE__ */ a("div", { "data-scroll-id": "section-title", className: l.sectionTitleWrapper, children: /* @__PURE__ */ a(u, { as: "h3", defaultVariant: "headingSm", className: l.sectionTitle, children: d.title }) }),
+            /* @__PURE__ */ a("div", { "data-scroll-id": "section-index", className: l.sectionIndexWrapper, children: /* @__PURE__ */ o(u, { as: "p", defaultVariant: "headingSm", className: l.sectionIndex, children: [
               "(",
-              String(n + 1).padStart(2, "0"),
+              String(m + 1).padStart(2, "0"),
               ")"
             ] }) })
           ] }),
           /* @__PURE__ */ o("div", { "data-scroll-id": "content", className: l.content, children: [
             /* @__PURE__ */ o("div", { "data-scroll-id": "protocol", className: l.protocolWrapper, children: [
-              d.subtitle && /* @__PURE__ */ a(m, { as: "h4", defaultVariant: "headingLg", mobileVariant: "headingXs", children: d.subtitle }),
+              d.subtitle && /* @__PURE__ */ a(u, { as: "h4", defaultVariant: "headingLg", mobileVariant: "headingXs", children: d.subtitle }),
               /* @__PURE__ */ a(
-                m,
+                u,
                 {
                   className: l.description,
                   as: "div",
@@ -230,5 +234,5 @@ const Z = ({ colorScheme: f, label: p, title: M, sections: $ }) => {
   ] }) });
 };
 export {
-  Z as ExpandingDetails
+  _ as ExpandingDetails
 };

package/dist/modules/ScienceHero/components/ScienceClientCursor.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),t=require("react"),E=require("react-dom"),p=require("../scienceHero.module.css.cjs.js");function L({children:r,backgroundImage:w,cursorLink:h}){const[i,v]=t.useState({x:0,y:0}),[x,m]=t.useState(0),[$,c]=t.useState(!1),[g,l]=t.useState(!1),[o,b]=t.useState(null),[s,M]=t.useState(!1);t.useEffect(()=>{l(!0);const e=()=>M(window.innerWidth<=768);return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),l(!1)}},[]),t.useEffect(()=>{if(s)return;const e=f=>{v({x:f.clientX,y:f.clientY})},d=()=>{m(window.scrollY)};return window.addEventListener("mousemove",e),window.addEventListener("scroll",d),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("scroll",d)}},[s]);const S=e=>{s||(b(e.currentTarget.getBoundingClientRect()),c(!0))},C=()=>{s||c(!1)},y=()=>{window.location.href=h};if(s)return n.jsx(n.Fragment,{children:r});const u=`circle(270px at ${i.x}px ${i.y}px)`,a=$&&o&&n.jsx("div",{className:p.default.cursorContainer,style:{position:"fixed",top:`${o.top}px`,left:`${o.left}px`,width:`${o.width}px`,height:`${o.height}px`,overflow:"hidden",cursor:"pointer"},children:n.jsx("div",{className:p.default.normalBackground,style:{position:"absolute",top:`${-o.top}px`,left:`${-o.left}px`,backgroundImage:`url(${w})`,clipPath:u,WebkitClipPath:u,backgroundPosition:`center ${-x}px`}})});return n.jsxs(n.Fragment,{children:[n.jsx("div",{"data-type":"hero",onMouseEnter:S,onMouseLeave:C,onClick:y,style:{cursor:"pointer"},children:r}),g&&a&&E.createPortal(a,document.body)]})}exports.ScienceClientCursor=L;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react"),E=require("react-dom"),w=require("../scienceHero.module.css.cjs.js");function M({children:u,backgroundImage:h,cursorLink:m}){const[l,x]=o.useState({x:0,y:0}),[c,a]=o.useState(!1),[g,d]=o.useState(!1),[e,f]=o.useState(null),[r,$]=o.useState(!1);o.useEffect(()=>{d(!0);const t=()=>$(window.innerWidth<=768);return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),d(!1)}},[]),o.useEffect(()=>{if(r)return;const t=s=>{x({x:s.clientX,y:s.clientY})},i=()=>{if(c&&e){const s=document.querySelector('[data-type="hero"]');s&&f(s.getBoundingClientRect())}};return window.addEventListener("mousemove",t),window.addEventListener("scroll",i,{passive:!0}),window.addEventListener("resize",i,{passive:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("scroll",i),window.removeEventListener("resize",i)}},[r,c,e]);const b=t=>{r||(f(t.currentTarget.getBoundingClientRect()),a(!0))},y=()=>{r||a(!1)},C=()=>{window.location.href=m};if(r)return n.jsx(n.Fragment,{children:u});const p=`circle(270px at ${l.x}px ${l.y}px)`,v=c&&e&&n.jsx("div",{className:w.default.cursorContainer,style:{position:"fixed",top:`${e.top}px`,left:`${e.left}px`,width:`${e.width}px`,height:`${e.height}px`,overflow:"hidden",cursor:"pointer"},children:n.jsx("div",{className:w.default.normalBackground,style:{position:"absolute",top:`${-e.top}px`,left:`${-e.left}px`,backgroundImage:`url(${h})`,clipPath:p,WebkitClipPath:p,backgroundPosition:"center"}})});return n.jsxs(n.Fragment,{children:[n.jsx("div",{"data-type":"hero",onMouseEnter:b,onMouseLeave:y,onClick:C,style:{cursor:"pointer"},children:u}),g&&v&&E.createPortal(v,document.body)]})}exports.ScienceClientCursor=M;

package/dist/modules/ScienceHero/components/ScienceClientCursor.es.js

@@ -1,84 +1,87 @@
 "use client";
-import { jsx as r, Fragment as f, jsxs as P } from "react/jsx-runtime";
-import { useState as o, useEffect as m } from "react";
-import { createPortal as R } from "react-dom";
-import w from "../scienceHero.module.css.es.js";
-function z({ children: s, backgroundImage: h, cursorLink: v }) {
-  const [i, x] = o({ x: 0, y: 0 }), [M, b] = o(0), [g, l] = o(!1), [$, c] = o(!1), [t, y] = o(null), [n, C] = o(!1);
-  m(() => {
-    c(!0);
-    const e = () => C(window.innerWidth <= 768);
-    return e(), window.addEventListener("resize", e), () => {
-      window.removeEventListener("resize", e), c(!1);
+import { jsx as i, Fragment as v, jsxs as $ } from "react/jsx-runtime";
+import { useState as r, useEffect as w } from "react";
+import { createPortal as k } from "react-dom";
+import h from "../scienceHero.module.css.es.js";
+function S({ children: l, backgroundImage: x, cursorLink: g }) {
+  const [d, y] = r({ x: 0, y: 0 }), [c, a] = r(!1), [E, u] = r(!1), [e, p] = r(null), [o, M] = r(!1);
+  w(() => {
+    u(!0);
+    const t = () => M(window.innerWidth <= 768);
+    return t(), window.addEventListener("resize", t), () => {
+      window.removeEventListener("resize", t), u(!1);
     };
-  }, []), m(() => {
-    if (n) return;
-    const e = (p) => {
-      x({
-        x: p.clientX,
-        y: p.clientY
+  }, []), w(() => {
+    if (o) return;
+    const t = (n) => {
+      y({
+        x: n.clientX,
+        y: n.clientY
       });
-    }, u = () => {
-      b(window.scrollY);
+    }, s = () => {
+      if (c && e) {
+        const n = document.querySelector('[data-type="hero"]');
+        n && p(n.getBoundingClientRect());
+      }
     };
-    return window.addEventListener("mousemove", e), window.addEventListener("scroll", u), () => {
-      window.removeEventListener("mousemove", e), window.removeEventListener("scroll", u);
+    return window.addEventListener("mousemove", t), window.addEventListener("scroll", s, { passive: !0 }), window.addEventListener("resize", s, { passive: !0 }), () => {
+      window.removeEventListener("mousemove", t), window.removeEventListener("scroll", s), window.removeEventListener("resize", s);
     };
-  }, [n]);
-  const E = (e) => {
-    n || (y(e.currentTarget.getBoundingClientRect()), l(!0));
+  }, [o, c, e]);
+  const b = (t) => {
+    o || (p(t.currentTarget.getBoundingClientRect()), a(!0));
+  }, C = () => {
+    o || a(!1);
   }, L = () => {
-    n || l(!1);
-  }, k = () => {
-    window.location.href = v;
+    window.location.href = g;
   };
-  if (n)
-    return /* @__PURE__ */ r(f, { children: s });
-  const a = `circle(270px at ${i.x}px ${i.y}px)`, d = g && t && /* @__PURE__ */ r(
+  if (o)
+    return /* @__PURE__ */ i(v, { children: l });
+  const f = `circle(270px at ${d.x}px ${d.y}px)`, m = c && e && /* @__PURE__ */ i(
     "div",
     {
-      className: w.cursorContainer,
+      className: h.cursorContainer,
       style: {
         position: "fixed",
-        top: `${t.top}px`,
-        left: `${t.left}px`,
-        width: `${t.width}px`,
-        height: `${t.height}px`,
+        top: `${e.top}px`,
+        left: `${e.left}px`,
+        width: `${e.width}px`,
+        height: `${e.height}px`,
         overflow: "hidden",
         cursor: "pointer"
       },
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ i(
         "div",
         {
-          className: w.normalBackground,
+          className: h.normalBackground,
           style: {
             position: "absolute",
-            top: `${-t.top}px`,
-            left: `${-t.left}px`,
-            backgroundImage: `url(${h})`,
-            clipPath: a,
-            WebkitClipPath: a,
-            backgroundPosition: `center ${-M}px`
+            top: `${-e.top}px`,
+            left: `${-e.left}px`,
+            backgroundImage: `url(${x})`,
+            clipPath: f,
+            WebkitClipPath: f,
+            backgroundPosition: "center"
           }
         }
       )
     }
   );
-  return /* @__PURE__ */ P(f, { children: [
-    /* @__PURE__ */ r(
+  return /* @__PURE__ */ $(v, { children: [
+    /* @__PURE__ */ i(
       "div",
       {
         "data-type": "hero",
-        onMouseEnter: E,
-        onMouseLeave: L,
-        onClick: k,
+        onMouseEnter: b,
+        onMouseLeave: C,
+        onClick: L,
         style: { cursor: "pointer" },
-        children: s
+        children: l
       }
     ),
-    $ && d && R(d, document.body)
+    E && m && k(m, document.body)
   ] });
 }
 export {
-  z as ScienceClientCursor
+  S as ScienceClientCursor
 };

package/dist/modules/ScrollingText/ScrollingText.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../components/Typography/Typography.cjs.js"),o=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),t=require("./scrollingText.module.css.cjs.js"),i=({label:r,url:l})=>e.jsx("a",{href:l,className:t.default.label,children:e.jsx(n.Typography,{defaultVariant:"labelMd",emphasis:!0,mobileVariant:"labelSm",weight:"regular",children:r})}),a=({labels:r})=>e.jsx("section",{className:t.default.root,children:r.length>0&&e.jsx("div",{className:t.default.footer,children:e.jsx(o.InfiniteScroll,{items:r,renderItem:i})})});exports.ScrollingText=a;

package/dist/modules/ScrollingText/ScrollingText.d.ts

@@ -0,0 +1,7 @@
+export type TScrollingText = {
+    labels: ReadonlyArray<{
+        label: string;
+        url: string;
+    }>;
+};
+export declare const ScrollingText: ({ labels }: TScrollingText) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/{InfiniteScrollModule/InfiniteScrollModule.es.js → ScrollingText/ScrollingText.es.js}

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Typography as o } from "../../components/Typography/Typography.es.js";
 import { InfiniteScroll as i } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
-import t from "./infiniteScrolle.module.css.es.js";
+import t from "./scrollingText.module.css.es.js";
 const a = ({ label: r, url: l }) => /* @__PURE__ */ e("a", { href: l, className: t.label, children: /* @__PURE__ */ e(o, { defaultVariant: "labelMd", emphasis: !0, mobileVariant: "labelSm", weight: "regular", children: r }) }), d = ({ labels: r }) => /* @__PURE__ */ e("section", { className: t.root, children: r.length > 0 && /* @__PURE__ */ e("div", { className: t.footer, children: /* @__PURE__ */ e(i, { items: r, renderItem: a }) }) });
 export {
-  d as InfiniteScrollModule
+  d as ScrollingText
 };

package/dist/modules/ScrollingText/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollingText } from './ScrollingText';
+export type { TScrollingText } from './ScrollingText';

package/dist/modules/ScrollingText/scrollingText.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="scrollingText-module__root___Ss51X",e="scrollingText-module__footer___jSdGU",l="scrollingText-module__label___a-lF4",t={root:o,footer:e,label:l};exports.default=t;exports.footer=e;exports.label=l;exports.root=o;

package/dist/modules/ScrollingText/scrollingText.module.css.es.js

@@ -0,0 +1,11 @@
+const o = "scrollingText-module__root___Ss51X", l = "scrollingText-module__footer___jSdGU", t = "scrollingText-module__label___a-lF4", e = {
+  root: o,
+  footer: l,
+  label: t
+};
+export {
+  e as default,
+  l as footer,
+  t as label,
+  o as root
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.1.146",
+    "version": "0.1.150",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -556,10 +556,10 @@
             "import": "./dist/modules/ScienceHero/ScienceHero.es.js",
             "require": "./dist/modules/ScienceHero/ScienceHero.cjs.js"
         },
-        "./InfiniteScrollModule": {
-            "types": "./dist/modules/InfiniteScrollModule/InfiniteScrollModule.d.ts",
-            "import": "./dist/modules/InfiniteScrollModule/InfiniteScrollModule.es.js",
-            "require": "./dist/modules/InfiniteScrollModule/InfiniteScrollModule.cjs.js"
+        "./ScrollingText": {
+            "types": "./dist/modules/ScrollingText/ScrollingText.d.ts",
+            "import": "./dist/modules/ScrollingText/ScrollingText.es.js",
+            "require": "./dist/modules/ScrollingText/ScrollingText.cjs.js"
         },
         "./Bubbles": {
             "types": "./dist/pageComponents/Bubbles/Bubbles.d.ts",

package/dist/modules/InfiniteScrollModule/InfiniteScrollModule.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../components/Typography/Typography.cjs.js"),i=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),l=require("./infiniteScrolle.module.css.cjs.js"),o=({label:r,url:n})=>e.jsx("a",{href:n,className:l.default.label,children:e.jsx(t.Typography,{defaultVariant:"labelMd",emphasis:!0,mobileVariant:"labelSm",weight:"regular",children:r})}),a=({labels:r})=>e.jsx("section",{className:l.default.root,children:r.length>0&&e.jsx("div",{className:l.default.footer,children:e.jsx(i.InfiniteScroll,{items:r,renderItem:o})})});exports.InfiniteScrollModule=a;

package/dist/modules/InfiniteScrollModule/InfiniteScrollModule.d.ts

@@ -1,7 +0,0 @@
-export type TInfiniteScrollModule = {
-    labels: ReadonlyArray<{
-        label: string;
-        url: string;
-    }>;
-};
-export declare const InfiniteScrollModule: ({ labels }: TInfiniteScrollModule) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/InfiniteScrollModule/index.d.ts

@@ -1,2 +0,0 @@
-export { InfiniteScrollModule } from './InfiniteScrollModule';
-export type { TInfiniteScrollModule } from './InfiniteScrollModule';

package/dist/modules/InfiniteScrollModule/infiniteScrolle.module.css.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="infiniteScrolle-module__root___CZywa",e="infiniteScrolle-module__footer___3AoPY",l="infiniteScrolle-module__label___NrIGo",t={root:o,footer:e,label:l};exports.default=t;exports.footer=e;exports.label=l;exports.root=o;

package/dist/modules/InfiniteScrollModule/infiniteScrolle.module.css.es.js

@@ -1,11 +0,0 @@
-const o = "infiniteScrolle-module__root___CZywa", e = "infiniteScrolle-module__footer___3AoPY", l = "infiniteScrolle-module__label___NrIGo", t = {
-  root: o,
-  footer: e,
-  label: l
-};
-export {
-  t as default,
-  e as footer,
-  l as label,
-  o as root
-};