@zenpatient-org/healthspan-marketing-ui 0.1.105 → 0.1.106

package/dist/modules/AllInOne/AllInOne.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),W=require("../../node_modules/@gsap/react/src/index.cjs.js"),e=require("../../node_modules/gsap/index.cjs.js"),V=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),l=require("react"),A=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),U=require("../../components/Typography/Typography.cjs.js"),N=require("../../utils/cn/cn.cjs.js"),G=require("../../utils/debounce.cjs.js"),Y=require("../CallToAction/CallToAction.cjs.js"),a=require("./allInOne.module.css.cjs.js");e.gsap.registerPlugin(V.ScrollTrigger);const F=["health","energy","strength","smiles","balance","sleep","miles","love","fun","years"],{title1:J,title2:X,description:K,scrollLabels:q,images:L,subtitle:Q,titleTop:Z,scrollableLabels:ee,titleBottom:te,descriptionText:ie,hsaText:se,buttonText:ae,buttonLink:oe,backgroundImage:le}={subtitle:i.jsx("p",{children:"YOUR LONGEVITY JOURNEY"}),titleTop:i.jsx("p",{children:"Get more"}),scrollableLabels:F,titleBottom:i.jsx("p",{children:"out of life"}),description:"It's time to shift our thinking from healthcare and lifespan to something deeper. Healthspan.",hsaText:"Healthspan is HSA/FSA Eligible",buttonText:"JOIN NOW",buttonLink:"#",backgroundImage:"https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_9_67b550bfe1.jpg",title1:i.jsx("p",{children:"Unlimited access to"}),title2:i.jsxs("p",{children:["our ",i.jsx("b",{children:"team and tools"})]}),descriptionText:"Healthspan is the only digital clinic that offers all your longevity needs in a single subscription.",scrollLabels:["Advanced labwork analysis","Research analysis","Dedicated physicians","Advanced biomarker profiling","Personalized health tracking","In house bioavailability testing","Advanced longevity protocols"],images:["https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_1_729dd70cbe.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_2_3adf3d2087.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_3_62002f2bdc.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_4_e623019155.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_5_bd81db569b.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_6_e9d432735b.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_7_3c396d9385.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_8_ee8608b390.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_9_67b550bfe1.jpg"]},re=()=>{const[C,I]=l.useState(!1),R=1300,x=l.useRef(null),c=l.useRef(null),f=l.useRef(null),h=l.useRef(null),m=l.useRef(null),p=l.useRef(null),v=l.useRef(!1),E=e.gsap.matchMedia();l.useEffect(()=>{v.current=C},[C]);const H=l.useCallback(()=>{if(!c.current||!x.current||!f.current||!h.current||!m.current||!p.current)return;const o=x.current,s=c.current,d=f.current,r=h.current,u=m.current,j=p.current,S=u.querySelectorAll("p");if(S.length===0)return;S.forEach((n,t)=>{n.style.zIndex=String(S.length-t)});const y=s.querySelectorAll('[data-type="image"]'),k=y.length;y.forEach((n,t)=>{n.style.zIndex=String(k-t)});const _=o.scrollHeight/k,O=.8;k>0&&y.forEach((n,t)=>{const T=t*_,b=(t+1)*_-O*_;console.log(`idx: ${t+1}, fadeStartPosition: ${T}, fadeEndPosition: ${b}`),e.gsap.fromTo([n,S[t]],{opacity:1},{opacity:0,scrollTrigger:{trigger:o,start:()=>`top+=${T} top`,end:()=>`top+=${b} top`,scrub:!0}})});const w=s.getBoundingClientRect(),P=d.getBoundingClientRect(),M=o.getBoundingClientRect();e.gsap.set(u,{y:`${w.bottom-M.top+20}px`}),E.add({isMobile:`(max-width: ${R-1}px)`,isDesktop:`(min-width: ${R}px)`},n=>{const t=n.conditions,T=t==null?void 0:t.isMobile;(t==null?void 0:t.isDesktop)&&(e.gsap.set(d,{x:`${w.left-P.width-50}px`}),e.gsap.set(r,{x:`${w.right+25}px`})),T&&(e.gsap.set(d,{top:`${w.top-r.clientHeight-25}px`}),e.gsap.set(r,{top:`${w.top-25}px`}))});const B=window.getComputedStyle(s).borderRadius;e.gsap.to(s,{scale:1,scrollTrigger:{trigger:o,start:"top top",end:"100% bottom",scrub:!0,onUpdate:n=>{if(!c.current||!p.current||!d||!r)return;const t=s.getBoundingClientRect();E.add({isMobile:`(max-width: ${R-1}px)`,isDesktop:`(min-width: ${R}px)`},b=>{const g=b.conditions,$=g==null?void 0:g.isMobile;(g==null?void 0:g.isDesktop)&&(e.gsap.set(d,{x:`${t.left-P.width-50}px`}),e.gsap.set(r,{x:`${t.right+25}px`})),$&&(e.gsap.set(d,{top:`${t.top-r.clientHeight-25}px`}),e.gsap.set(r,{top:`${t.top-25}px`}))}),e.gsap.set(u,{y:`${t.bottom+20}px`});const T=p.current.getBoundingClientRect();if(t.bottom+60>=T.top?e.gsap.to(j,{opacity:0,duration:.3}):e.gsap.to(j,{opacity:1,duration:.3}),n.progress>=.9)e.gsap.to(s,{borderRadius:0,duration:.3,ease:"power1.inOut"}),v.current||(v.current=!0,I(!0),e.gsap.to([y,u.querySelectorAll("p")],{opacity:0,duration:.8,delay:.2,ease:"power2.out",overwrite:!0}));else if(e.gsap.to(s,{borderRadius:B,duration:.3,ease:"power1.inOut"}),v.current){v.current=!1,I(!1),e.gsap.set(s,{borderRadius:B}),e.gsap.killTweensOf([y,u.querySelectorAll("p")]);const b=u.querySelectorAll("p");y.forEach((g,$)=>{const D=$*_,z=($+1)*_-O*_;e.gsap.fromTo([g,b[$]],{opacity:1},{opacity:0,scrollTrigger:{trigger:o,start:()=>`top+=${D} top`,end:()=>`top+=${z} top`,scrub:!0}})}),V.ScrollTrigger.refresh()}}}})},[c,f,h,m,p]);return W.useGSAP(()=>{if(!c.current||!x.current||!f.current||!h||!m.current||!p.current)return;const o=c.current,s=f.current,d=h.current,r=m.current,u=p.current;window.innerWidth<=R?e.gsap.set(o,{aspectRatio:`${window.innerWidth} / ${window.innerHeight}`,scale:.5}):e.gsap.set(o,{scale:.3,aspectRatio:`${window.innerWidth} / ${window.innerHeight}`}),H();const j=G.default(H,600);return window.addEventListener("resize",()=>{j()}),()=>{window.removeEventListener("resize",j),e.gsap.killTweensOf([o,r,s,d,u])}},{scope:x,dependencies:[x,c,f,h,m,H]}),i.jsx("div",{className:a.default.root,children:i.jsx("div",{ref:x,className:a.default.container,children:i.jsxs("div",{className:a.default.pillContainerWrapper,children:[i.jsxs("div",{ref:c,className:N.cn("pillContainer",a.default.pillContainer),children:[L==null?void 0:L.map((o,s)=>i.jsx("div",{className:a.default.imageBlock,"data-type":"image",style:{backgroundImage:`url(${o})`}},s)),i.jsx("div",{className:a.default.callToActionContainer,children:C&&i.jsx(Y.CallToAction,{subtitle:Q,titleTop:Z,scrollableLabels:ee,titleBottom:te,description:ie,hsaText:se,buttonText:ae,buttonLink:oe,backgroundImage:le})})]}),i.jsx("div",{ref:f,className:a.default.fixedHeader,children:i.jsx(A.HighlightedTitle,{className:a.default.title1,as:"div",defaultVariant:"displayXs",title:J})}),i.jsx("div",{ref:h,className:a.default.fixedHeader,children:i.jsx(A.HighlightedTitle,{className:a.default.title2,as:"div",defaultVariant:"displayXs",title:X})}),i.jsx("div",{ref:m,className:N.cn("scrollableLabels",a.default.scrollableLabels),children:q==null?void 0:q.map((o,s)=>i.jsx(U.Typography,{as:"p",defaultVariant:"labelLg",mobileVariant:"labelSm",className:a.default.scrollLabel,children:o},s))}),i.jsx("div",{ref:p,className:N.cn("description",a.default.description),children:i.jsx(A.HighlightedTitle,{as:"p",defaultVariant:"preambleMd",mobileVariant:"preambleSm",title:K,className:a.default.descriptionText})})]})})})};exports.AllInOne=re;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),W=require("../../node_modules/@gsap/react/src/index.cjs.js"),e=require("../../node_modules/gsap/index.cjs.js"),M=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),o=require("react"),A=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),U=require("../../components/Typography/Typography.cjs.js"),N=require("../../utils/cn/cn.cjs.js"),G=require("../../utils/debounce.cjs.js"),Y=require("../CallToAction/CallToAction.cjs.js"),a=require("./allInOne.module.css.cjs.js");e.gsap.registerPlugin(M.ScrollTrigger);const F=["health","energy","strength","smiles","balance","sleep","miles","love","fun","years"],{title1:J,title2:X,description:K,scrollLabels:q,images:L,subtitle:Q,titleTop:Z,scrollableLabels:ee,titleBottom:te,descriptionText:ie,hsaText:se,buttonText:ae,buttonLink:le,backgroundImage:oe}={subtitle:i.jsx("p",{children:"YOUR LONGEVITY JOURNEY"}),titleTop:i.jsx("p",{children:"Get more"}),scrollableLabels:F,titleBottom:i.jsx("p",{children:"out of life"}),description:"It's time to shift our thinking from healthcare and lifespan to something deeper. Healthspan.",hsaText:"Healthspan is HSA/FSA Eligible",buttonText:"JOIN NOW",buttonLink:"#",backgroundImage:"https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_9_1_6d46345746.jpg",title1:i.jsx("p",{children:"Unlimited access to"}),title2:i.jsxs("p",{children:["our ",i.jsx("b",{children:"team and tools"})]}),descriptionText:"Healthspan is the only digital clinic that offers all your longevity needs in a single subscription.",scrollLabels:["Advanced labwork analysis","Research analysis","Dedicated physicians","Advanced biomarker profiling","Personalized health tracking","In house bioavailability testing","Advanced longevity protocols"],images:["https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_1_729dd70cbe.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_2_3adf3d2087.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_3_62002f2bdc.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_4_e623019155.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_5_bd81db569b.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_6_e9d432735b.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_7_3c396d9385.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_8_ee8608b390.jpg","https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_9_1_6d46345746.jpg"]},re=()=>{const[C,I]=o.useState(!1),T=1300,b=o.useRef(null),c=o.useRef(null),f=o.useRef(null),h=o.useRef(null),m=o.useRef(null),p=o.useRef(null),R=o.useRef(!1),O=e.gsap.matchMedia();o.useEffect(()=>{R.current=C},[C]);const H=o.useCallback(()=>{if(!c.current||!b.current||!f.current||!h.current||!m.current||!p.current)return;const l=b.current,s=c.current,d=f.current,r=h.current,u=m.current,v=p.current,S=u.querySelectorAll("p");if(S.length===0)return;S.forEach((n,t)=>{n.style.zIndex=String(S.length-t)});const x=s.querySelectorAll('[data-type="image"]'),k=x.length;x.forEach((n,t)=>{n.style.zIndex=String(k-t)});const y=l.scrollHeight/k,E=.8;k>0&&x.forEach((n,t)=>{const w=t*y,_=(t+1)*y-E*y;e.gsap.fromTo([n,S[t]],{opacity:1},{opacity:0,scrollTrigger:{trigger:l,start:()=>`top+=${w} top`,end:()=>`top+=${_} top`,scrub:!0}})});const j=s.getBoundingClientRect(),B=d.getBoundingClientRect(),P=l.getBoundingClientRect();e.gsap.set(u,{y:`${j.bottom-P.top+20}px`}),O.add({isMobile:`(max-width: ${T-1}px)`,isDesktop:`(min-width: ${T}px)`},n=>{const t=n.conditions,w=t==null?void 0:t.isMobile;(t==null?void 0:t.isDesktop)&&(e.gsap.set(d,{x:`${j.left-B.width-50}px`}),e.gsap.set(r,{x:`${j.right+25}px`})),w&&(e.gsap.set(d,{top:`${j.top-r.clientHeight-25}px`}),e.gsap.set(r,{top:`${j.top-25}px`}))});const D=window.getComputedStyle(s).borderRadius;e.gsap.to(s,{scale:1,scrollTrigger:{trigger:l,start:"top top",end:"100% bottom",scrub:!0,onUpdate:n=>{if(!c.current||!p.current||!d||!r)return;const t=s.getBoundingClientRect();O.add({isMobile:`(max-width: ${T-1}px)`,isDesktop:`(min-width: ${T}px)`},_=>{const g=_.conditions,$=g==null?void 0:g.isMobile;(g==null?void 0:g.isDesktop)&&(e.gsap.set(d,{x:`${t.left-B.width-50}px`}),e.gsap.set(r,{x:`${t.right+25}px`})),$&&(e.gsap.set(d,{top:`${t.top-r.clientHeight-25}px`}),e.gsap.set(r,{top:`${t.top-25}px`}))}),e.gsap.set(u,{y:`${t.bottom+20}px`});const w=p.current.getBoundingClientRect();if(t.bottom+60>=w.top?e.gsap.to(v,{opacity:0,duration:.3}):e.gsap.to(v,{opacity:1,duration:.3}),n.progress>=.9)e.gsap.to(s,{scale:1,borderRadius:0,duration:.3,ease:"power1.inOut"}),R.current||(R.current=!0,I(!0),e.gsap.to([x,u.querySelectorAll("p")],{opacity:0,duration:.8,delay:.2,ease:"power2.out",overwrite:!0}));else if(e.gsap.to(s,{borderRadius:D,duration:.3,ease:"power1.inOut"}),R.current){R.current=!1,I(!1),e.gsap.set(s,{borderRadius:D}),e.gsap.killTweensOf([x,u.querySelectorAll("p")]);const _=u.querySelectorAll("p");x.forEach((g,$)=>{const V=$*y,z=($+1)*y-E*y;e.gsap.fromTo([g,_[$]],{opacity:1},{opacity:0,scrollTrigger:{trigger:l,start:()=>`top+=${V} top`,end:()=>`top+=${z} top`,scrub:!0}})}),M.ScrollTrigger.refresh()}}}})},[c,f,h,m,p]);return W.useGSAP(()=>{if(!c.current||!b.current||!f.current||!h||!m.current||!p.current)return;const l=c.current,s=f.current,d=h.current,r=m.current,u=p.current;window.innerWidth<=T?e.gsap.set(l,{aspectRatio:`${window.innerWidth} / ${window.innerHeight}`,scale:.5}):e.gsap.set(l,{scale:.3,aspectRatio:`${window.innerWidth} / ${window.innerHeight}`}),H();const v=G.default(H,600);return window.addEventListener("resize",()=>{v()}),()=>{window.removeEventListener("resize",v),e.gsap.killTweensOf([l,r,s,d,u])}},{scope:b,dependencies:[b,c,f,h,m,H]}),i.jsx("div",{className:a.default.root,children:i.jsx("div",{ref:b,className:a.default.container,children:i.jsxs("div",{className:a.default.pillContainerWrapper,children:[i.jsxs("div",{ref:c,className:N.cn("pillContainer",a.default.pillContainer),children:[L==null?void 0:L.map((l,s)=>i.jsx("div",{className:a.default.imageBlock,"data-type":"image",style:{backgroundImage:`url(${l})`}},s)),i.jsx("div",{className:a.default.callToActionContainer,children:C&&i.jsx(Y.CallToAction,{subtitle:Q,titleTop:Z,scrollableLabels:ee,titleBottom:te,description:ie,hsaText:se,buttonText:ae,buttonLink:le,backgroundImage:oe})})]}),i.jsx("div",{ref:f,className:a.default.fixedHeader,children:i.jsx(A.HighlightedTitle,{className:a.default.title1,as:"div",defaultVariant:"displayXs",title:J})}),i.jsx("div",{ref:h,className:a.default.fixedHeader,children:i.jsx(A.HighlightedTitle,{className:a.default.title2,as:"div",defaultVariant:"displayXs",title:X})}),i.jsx("div",{ref:m,className:N.cn("scrollableLabels",a.default.scrollableLabels),children:q==null?void 0:q.map((l,s)=>i.jsx(U.Typography,{as:"p",defaultVariant:"labelLg",mobileVariant:"labelSm",className:a.default.scrollLabel,children:l},s))}),i.jsx("div",{ref:p,className:N.cn("description",a.default.description),children:i.jsx(A.HighlightedTitle,{as:"p",defaultVariant:"preambleMd",mobileVariant:"preambleSm",title:K,className:a.default.descriptionText})})]})})})};exports.AllInOne=re;

package/dist/modules/AllInOne/AllInOne.es.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx as i, jsxs as j } from "react/jsx-runtime";
+import { jsx as i, jsxs as E } from "react/jsx-runtime";
 import { useGSAP as U } from "../../node_modules/@gsap/react/src/index.es.js";
 import { gsap as e } from "../../node_modules/gsap/index.es.js";
 import { ScrollTrigger as W } from "../../node_modules/gsap/ScrollTrigger.es.js";
-import { useState as G, useRef as b, useEffect as Y, useCallback as F } from "react";
+import { useState as G, useRef as g, useEffect as Y, useCallback as F } from "react";
 import { HighlightedTitle as N } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { Typography as J } from "../../components/Typography/Typography.es.js";
 import { cn as L } from "../../utils/cn/cn.es.js";
@@ -26,15 +26,15 @@ const Q = [
   title1: Z,
   title2: ee,
   description: te,
-  scrollLabels: E,
-  images: I,
+  scrollLabels: I,
+  images: j,
   subtitle: ie,
   titleTop: oe,
   scrollableLabels: re,
   titleBottom: se,
   descriptionText: ae,
-  hsaText: ne,
-  buttonText: le,
+  hsaText: le,
+  buttonText: ne,
   buttonLink: ce,
   backgroundImage: pe
 } = {
@@ -46,9 +46,9 @@ const Q = [
   hsaText: "Healthspan is HSA/FSA Eligible",
   buttonText: "JOIN NOW",
   buttonLink: "#",
-  backgroundImage: "https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_9_67b550bfe1.jpg",
+  backgroundImage: "https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_9_1_6d46345746.jpg",
   title1: /* @__PURE__ */ i("p", { children: "Unlimited access to" }),
-  title2: /* @__PURE__ */ j("p", { children: [
+  title2: /* @__PURE__ */ E("p", { children: [
     "our ",
     /* @__PURE__ */ i("b", { children: "team and tools" })
   ] }),
@@ -71,66 +71,64 @@ const Q = [
     "https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_6_e9d432735b.jpg",
     "https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_7_3c396d9385.jpg",
     "https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_8_ee8608b390.jpg",
-    "https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_9_67b550bfe1.jpg"
+    "https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_9_1_6d46345746.jpg"
   ]
 }, Re = () => {
-  const [k, B] = G(!1), w = 1300, y = b(null), l = b(null), f = b(null), u = b(null), h = b(null), c = b(null), R = b(!1), D = e.matchMedia();
+  const [k, B] = G(!1), _ = 1300, b = g(null), n = g(null), u = g(null), f = g(null), h = g(null), c = g(null), w = g(!1), D = e.matchMedia();
   Y(() => {
-    R.current = k;
+    w.current = k;
   }, [k]);
   const H = F(() => {
-    if (!l.current || !y.current || !f.current || !u.current || !h.current || !c.current)
+    if (!n.current || !b.current || !u.current || !f.current || !h.current || !c.current)
       return;
-    const s = y.current, o = l.current, p = f.current, a = u.current, d = h.current, T = c.current, C = d.querySelectorAll("p");
-    if (C.length === 0) return;
-    C.forEach((n, t) => {
-      n.style.zIndex = String(C.length - t);
+    const s = b.current, o = n.current, p = u.current, a = f.current, d = h.current, R = c.current, $ = d.querySelectorAll("p");
+    if ($.length === 0) return;
+    $.forEach((l, t) => {
+      l.style.zIndex = String($.length - t);
     });
-    const x = o.querySelectorAll('[data-type="image"]'), A = x.length;
-    x.forEach((n, t) => {
-      n.style.zIndex = String(A - t);
+    const y = o.querySelectorAll('[data-type="image"]'), A = y.length;
+    y.forEach((l, t) => {
+      l.style.zIndex = String(A - t);
     });
-    const v = s.scrollHeight / A, O = 0.8;
-    A > 0 && x.forEach((n, t) => {
-      const _ = t * v, g = (t + 1) * v - O * v;
-      console.log(
-        `idx: ${t + 1}, fadeStartPosition: ${_}, fadeEndPosition: ${g}`
-      ), e.fromTo(
-        [n, C[t]],
+    const x = s.scrollHeight / A, O = 0.8;
+    A > 0 && y.forEach((l, t) => {
+      const C = t * x, v = (t + 1) * x - O * x;
+      e.fromTo(
+        [l, $[t]],
         { opacity: 1 },
         {
           opacity: 0,
           scrollTrigger: {
             trigger: s,
-            start: () => `top+=${_} top`,
-            end: () => `top+=${g} top`,
+            start: () => `top+=${C} top`,
+            end: () => `top+=${v} top`,
             scrub: !0
           }
         }
       );
     });
-    const $ = o.getBoundingClientRect(), P = p.getBoundingClientRect(), q = s.getBoundingClientRect();
+    const T = o.getBoundingClientRect(), V = p.getBoundingClientRect(), q = s.getBoundingClientRect();
     e.set(d, {
-      y: `${$.bottom - q.top + 20}px`
+      y: `${T.bottom - q.top + 20}px`
     }), D.add(
       {
-        isMobile: `(max-width: ${w - 1}px)`,
-        isDesktop: `(min-width: ${w}px)`
+        isMobile: `(max-width: ${_ - 1}px)`,
+        isDesktop: `(min-width: ${_}px)`
       },
-      (n) => {
-        const t = n.conditions, _ = t == null ? void 0 : t.isMobile;
+      (l) => {
+        const t = l.conditions, C = t == null ? void 0 : t.isMobile;
         (t == null ? void 0 : t.isDesktop) && (e.set(p, {
-          x: `${$.left - P.width - 50}px`
+          x: `${T.left - V.width - 50}px`
         }), e.set(a, {
-          x: `${$.right + 25}px`
-        })), _ && (e.set(p, {
-          top: `${$.top - a.clientHeight - 25}px`
+          x: `${T.right + 25}px`
+        })), C && (e.set(p, {
+          top: `${T.top - a.clientHeight - 25}px`
         }), e.set(a, {
-          top: `${$.top - 25}px`
+          top: `${T.top - 25}px`
         }));
       }
     );
-    const V = window.getComputedStyle(o).borderRadius;
+    const M = window.getComputedStyle(o).borderRadius;
     e.to(o, {
       scale: 1,
       scrollTrigger: {
@@ -138,19 +136,19 @@ const Q = [
         start: "top top",
         end: "100% bottom",
         scrub: !0,
-        onUpdate: (n) => {
-          if (!l.current || !c.current || !p || !a)
+        onUpdate: (l) => {
+          if (!n.current || !c.current || !p || !a)
             return;
           const t = o.getBoundingClientRect();
           D.add(
             {
-              isMobile: `(max-width: ${w - 1}px)`,
-              isDesktop: `(min-width: ${w}px)`
+              isMobile: `(max-width: ${_ - 1}px)`,
+              isDesktop: `(min-width: ${_}px)`
             },
-            (g) => {
-              const m = g.conditions, S = m == null ? void 0 : m.isMobile;
+            (v) => {
+              const m = v.conditions, S = m == null ? void 0 : m.isMobile;
               (m == null ? void 0 : m.isDesktop) && (e.set(p, {
-                x: `${t.left - P.width - 50}px`
+                x: `${t.left - V.width - 50}px`
               }), e.set(a, {
                 x: `${t.right + 25}px`
               })), S && (e.set(p, {
@@ -162,13 +160,14 @@ const Q = [
           ), e.set(d, {
             y: `${t.bottom + 20}px`
           });
-          const _ = c.current.getBoundingClientRect();
-          if (t.bottom + 60 >= _.top ? e.to(T, { opacity: 0, duration: 0.3 }) : e.to(T, { opacity: 1, duration: 0.3 }), n.progress >= 0.9)
+          const C = c.current.getBoundingClientRect();
+          if (t.bottom + 60 >= C.top ? e.to(R, { opacity: 0, duration: 0.3 }) : e.to(R, { opacity: 1, duration: 0.3 }), l.progress >= 0.9)
             e.to(o, {
+              scale: 1,
               borderRadius: 0,
               duration: 0.3,
               ease: "power1.inOut"
-            }), R.current || (R.current = !0, B(!0), e.to([x, d.querySelectorAll("p")], {
+            }), w.current || (w.current = !0, B(!0), e.to([y, d.querySelectorAll("p")], {
               opacity: 0,
               duration: 0.8,
               delay: 0.2,
@@ -176,22 +175,22 @@ const Q = [
               overwrite: !0
             }));
           else if (e.to(o, {
-            borderRadius: V,
+            borderRadius: M,
             duration: 0.3,
             ease: "power1.inOut"
-          }), R.current) {
-            R.current = !1, B(!1), e.set(o, { borderRadius: V }), e.killTweensOf([x, d.querySelectorAll("p")]);
-            const g = d.querySelectorAll("p");
-            x.forEach((m, S) => {
-              const M = S * v, z = (S + 1) * v - O * v;
+          }), w.current) {
+            w.current = !1, B(!1), e.set(o, { borderRadius: M }), e.killTweensOf([y, d.querySelectorAll("p")]);
+            const v = d.querySelectorAll("p");
+            y.forEach((m, S) => {
+              const P = S * x, z = (S + 1) * x - O * x;
               e.fromTo(
-                [m, g[S]],
+                [m, v[S]],
                 { opacity: 1 },
                 {
                   opacity: 0,
                   scrollTrigger: {
                     trigger: s,
-                    start: () => `top+=${M} top`,
+                    start: () => `top+=${P} top`,
                     end: () => `top+=${z} top`,
                     scrub: !0
                   }
@@ -202,40 +201,40 @@ const Q = [
         }
       }
     });
-  }, [l, f, u, h, c]);
+  }, [n, u, f, h, c]);
   return U(
     () => {
-      if (!l.current || !y.current || !f.current || !u || !h.current || !c.current)
+      if (!n.current || !b.current || !u.current || !f || !h.current || !c.current)
         return;
-      const s = l.current, o = f.current, p = u.current, a = h.current, d = c.current;
-      window.innerWidth <= w ? e.set(s, {
+      const s = n.current, o = u.current, p = f.current, a = h.current, d = c.current;
+      window.innerWidth <= _ ? e.set(s, {
         aspectRatio: `${window.innerWidth} / ${window.innerHeight}`,
         scale: 0.5
       }) : e.set(s, {
         scale: 0.3,
         aspectRatio: `${window.innerWidth} / ${window.innerHeight}`
       }), H();
-      const T = X(H, 600);
+      const R = X(H, 600);
       return window.addEventListener("resize", () => {
-        T();
+        R();
       }), () => {
-        window.removeEventListener("resize", T), e.killTweensOf([s, a, o, p, d]);
+        window.removeEventListener("resize", R), e.killTweensOf([s, a, o, p, d]);
       };
     },
     {
-      scope: y,
+      scope: b,
       dependencies: [
-        y,
-        l,
-        f,
+        b,
+        n,
         u,
+        f,
         h,
         H
       ]
     }
-  ), /* @__PURE__ */ i("div", { className: r.root, children: /* @__PURE__ */ i("div", { ref: y, className: r.container, children: /* @__PURE__ */ j("div", { className: r.pillContainerWrapper, children: [
-    /* @__PURE__ */ j("div", { ref: l, className: L("pillContainer", r.pillContainer), children: [
-      I == null ? void 0 : I.map((s, o) => /* @__PURE__ */ i(
+  ), /* @__PURE__ */ i("div", { className: r.root, children: /* @__PURE__ */ i("div", { ref: b, className: r.container, children: /* @__PURE__ */ E("div", { className: r.pillContainerWrapper, children: [
+    /* @__PURE__ */ E("div", { ref: n, className: L("pillContainer", r.pillContainer), children: [
+      j == null ? void 0 : j.map((s, o) => /* @__PURE__ */ i(
         "div",
         {
           className: r.imageBlock,
@@ -252,14 +251,14 @@ const Q = [
           scrollableLabels: re,
           titleBottom: se,
           description: ae,
-          hsaText: ne,
-          buttonText: le,
+          hsaText: le,
+          buttonText: ne,
           buttonLink: ce,
           backgroundImage: pe
         }
       ) })
     ] }),
-    /* @__PURE__ */ i("div", { ref: f, className: r.fixedHeader, children: /* @__PURE__ */ i(
+    /* @__PURE__ */ i("div", { ref: u, className: r.fixedHeader, children: /* @__PURE__ */ i(
       N,
       {
         className: r.title1,
@@ -268,7 +267,7 @@ const Q = [
         title: Z
       }
     ) }),
-    /* @__PURE__ */ i("div", { ref: u, className: r.fixedHeader, children: /* @__PURE__ */ i(
+    /* @__PURE__ */ i("div", { ref: f, className: r.fixedHeader, children: /* @__PURE__ */ i(
       N,
       {
         className: r.title2,
@@ -277,7 +276,7 @@ const Q = [
         title: ee
       }
     ) }),
-    /* @__PURE__ */ i("div", { ref: h, className: L("scrollableLabels", r.scrollableLabels), children: E == null ? void 0 : E.map((s, o) => /* @__PURE__ */ i(
+    /* @__PURE__ */ i("div", { ref: h, className: L("scrollableLabels", r.scrollableLabels), children: I == null ? void 0 : I.map((s, o) => /* @__PURE__ */ i(
       J,
       {
         as: "p",

package/dist/modules/CallToAction/CallToAction.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),X=require("../../components/Button/Button.cjs.js"),d=require("../../components/Typography/Typography.cjs.js"),w=require("../../components/Icon/Icon.cjs.js"),M=require("../../components/Icon/constants.cjs.js"),x=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),a=require("../../node_modules/gsap/index.cjs.js"),z=require("../../node_modules/@gsap/react/src/index.cjs.js"),F=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),D=require("../../utils/debounce.cjs.js"),t=require("./callToAction.module.css.cjs.js");a.gsap.registerPlugin(F.ScrollTrigger);const G=({subtitle:A,titleTop:E,scrollableLabels:j,titleBottom:P,description:C,hsaText:W,buttonText:k,buttonLink:f,backgroundImage:B})=>{const R=l.useRef(null),i=l.useRef(null),T=l.useRef(null),p=l.useRef(null),h=l.useRef(null),N=l.useRef(null),m=l.useRef(null),g=l.useRef(null),y=l.useRef(null);return z.useGSAP(()=>{var V,L,H;const o=(V=T.current)==null?void 0:V.querySelector("p"),u=(L=N.current)==null?void 0:L.querySelector("p"),$=[o,p.current,i.current,h.current,u,m.current,g.current,y.current].filter(Boolean);a.gsap.set($,{clipPath:"inset(0% 0% 100% 0%)",yPercent:100}),a.gsap.to([o,p.current,i.current,h.current,u,m.current,g.current,y.current],{clipPath:"inset(0% 0% 0% 0%)",yPercent:0,duration:1,ease:"power2.out",delay:1,stagger:{amount:1,from:"start"},scrollTrigger:{trigger:R.current,start:"top 80%",end:"+=500"}});const r=(H=i.current)==null?void 0:H.querySelector("ul");if(!r)return;const v=r.innerHTML;let s=null,q=!0;const _=()=>{s&&s.kill(),r.innerHTML=v,a.gsap.set(r,{y:0});const n=Array.from(r.querySelectorAll("li"));if(n.length<=1)return;const b=n[0].clientHeight;if(!b)return;a.gsap.set(i.current,{height:b,overflow:"hidden"});const I=Array.from(n);I.forEach(S=>{r.appendChild(S.cloneNode(!0))}),s=a.gsap.timeline({repeat:-1,delay:q?2.5:0,onRepeat:()=>{a.gsap.set(r,{y:0})}}),I.forEach((S,O)=>{s&&s.to({},{duration:2}).to(r,{y:`-${(O+1)*b}`,duration:.5,ease:"power1.inOut"})}),q=!1},c=D.default(_,200);return _(),window.addEventListener("resize",c),()=>{var n;window.removeEventListener("resize",c),(n=c.kill)==null||n.call(c),s&&s.kill(),r&&(r.innerHTML=v,a.gsap.set(r,{y:0}))}},[j]),e.jsxs("section",{ref:R,className:t.default.root,children:[e.jsx("div",{className:t.default.backgroundImage,style:{backgroundImage:`url(${B})`}}),e.jsxs("div",{className:t.default.container,children:[e.jsx("div",{className:t.default.leftContent,children:e.jsxs("div",{className:t.default.content,children:[e.jsx("div",{ref:p,children:e.jsx(x.HighlightedTitle,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"div",className:t.default.title,title:E})}),e.jsx("div",{ref:i,className:t.default.scrollableLabelsWrapper,children:e.jsx("ul",{className:t.default.scrollableLabels,children:j.map((o,u)=>e.jsx("li",{className:t.default.scrollableLabel,children:e.jsx(d.Typography,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"span",children:o})},u))})}),e.jsx("div",{ref:h,children:e.jsx(x.HighlightedTitle,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"div",className:t.default.title,title:P})})]})}),e.jsx("div",{ref:T,className:t.default.subtitleWrapper,children:e.jsx(x.HighlightedTitle,{defaultVariant:"labelMd",mobileVariant:"labelSm",as:"div",className:t.default.subtitle,title:A})}),e.jsx("div",{ref:N,className:t.default.arrowWrapper,children:e.jsxs(d.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:t.default.arrow,as:"p",children:["(",e.jsx(w.Icon,{name:M.EIconName.ARROW_FORWARD}),")"]})}),e.jsx("div",{className:t.default.rightContent,children:e.jsxs("div",{className:t.default.descriptionWrapper,children:[e.jsx("div",{ref:m,children:e.jsx(d.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",className:t.default.description,children:C})}),e.jsx("div",{ref:g,className:t.default.buttonWrapper,children:f&&e.jsx(X.Button,{as:f?"a":"button",href:f,variant:"secondary",size:"lg",children:k})}),e.jsxs("div",{ref:y,className:t.default.hsaEligible,children:[e.jsx(w.Icon,{name:M.EIconName.CIRCLE_CHECK_FILL,className:t.default.checkIcon}),e.jsx(d.Typography,{as:"p",defaultVariant:"bodySm",mobileVariant:"bodySm",className:t.default.hsaText,children:W})]})]})})]})]})};exports.CallToAction=G;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),G=require("../../components/Button/Button.cjs.js"),p=require("../../components/Typography/Typography.cjs.js"),A=require("../../components/Icon/Icon.cjs.js"),C=require("../../components/Icon/constants.cjs.js"),v=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),a=require("../../node_modules/gsap/index.cjs.js"),K=require("../../node_modules/@gsap/react/src/index.cjs.js"),M=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),J=require("../../utils/debounce.cjs.js"),t=require("./callToAction.module.css.cjs.js");a.gsap.registerPlugin(M.ScrollTrigger);const Q=({subtitle:k,titleTop:P,scrollableLabels:R,titleBottom:B,description:W,hsaText:$,buttonText:O,buttonLink:g,backgroundImage:X})=>{const u=l.useRef(null),i=l.useRef(null),T=l.useRef(null),h=l.useRef(null),m=l.useRef(null),N=l.useRef(null),y=l.useRef(null),b=l.useRef(null),x=l.useRef(null);return K.useGSAP(()=>{var S,V,w;const d=u.current&&u.current.getBoundingClientRect().top<window.innerHeight*.8,f=(S=T.current)==null?void 0:S.querySelector("p"),q=(V=N.current)==null?void 0:V.querySelector("p"),z=[f,h.current,i.current,m.current,q,y.current,b.current,x.current].filter(Boolean);a.gsap.set(z,{clipPath:"inset(0% 0% 100% 0%)",yPercent:100});const o=a.gsap.to([f,h.current,i.current,m.current,q,y.current,b.current,x.current],{clipPath:"inset(0% 0% 0% 0%)",yPercent:0,duration:1,ease:"power2.out",delay:1,stagger:{amount:1,from:"start"},paused:!0});M.ScrollTrigger.create({trigger:u.current,start:"top 80%",end:"+=500",onEnter:()=>o.play(),onLeave:()=>o.reverse(),onEnterBack:()=>o.play(),onLeaveBack:()=>o.reverse()}),d&&a.gsap.delayedCall(.1,()=>{o.play()});const r=(w=i.current)==null?void 0:w.querySelector("ul");if(!r)return;const L=r.innerHTML;let n=null,_=!0;const H=()=>{n&&n.kill(),r.innerHTML=L,a.gsap.set(r,{y:0});const s=Array.from(r.querySelectorAll("li"));if(s.length<=1)return;const j=s[0].clientHeight;if(!j)return;a.gsap.set(i.current,{height:j,overflow:"hidden"});const I=Array.from(s);I.forEach(E=>{r.appendChild(E.cloneNode(!0))});const F=_&&!d?2.5:0;n=a.gsap.timeline({repeat:-1,delay:F,onRepeat:()=>{a.gsap.set(r,{y:0})}}),I.forEach((E,D)=>{n&&n.to({},{duration:2}).to(r,{y:`-${(D+1)*j}`,duration:.5,ease:"power1.inOut"})}),_=!1},c=J.default(H,200);return H(),window.addEventListener("resize",c),()=>{var s;window.removeEventListener("resize",c),(s=c.kill)==null||s.call(c),n&&n.kill(),r&&(r.innerHTML=L,a.gsap.set(r,{y:0}))}},[R]),e.jsxs("section",{ref:u,className:t.default.root,children:[e.jsx("div",{className:t.default.backgroundImage,style:{backgroundImage:`url(${X})`}}),e.jsxs("div",{className:t.default.container,children:[e.jsx("div",{className:t.default.leftContent,children:e.jsxs("div",{className:t.default.content,children:[e.jsx("div",{ref:h,children:e.jsx(v.HighlightedTitle,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"div",className:t.default.title,title:P})}),e.jsx("div",{ref:i,className:t.default.scrollableLabelsWrapper,children:e.jsx("ul",{className:t.default.scrollableLabels,children:R.map((d,f)=>e.jsx("li",{className:t.default.scrollableLabel,children:e.jsx(p.Typography,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"span",children:d})},f))})}),e.jsx("div",{ref:m,children:e.jsx(v.HighlightedTitle,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"div",className:t.default.title,title:B})})]})}),e.jsx("div",{ref:T,className:t.default.subtitleWrapper,children:e.jsx(v.HighlightedTitle,{defaultVariant:"labelMd",mobileVariant:"labelSm",as:"div",className:t.default.subtitle,title:k})}),e.jsx("div",{ref:N,className:t.default.arrowWrapper,children:e.jsxs(p.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:t.default.arrow,as:"p",children:["(",e.jsx(A.Icon,{name:C.EIconName.ARROW_FORWARD}),")"]})}),e.jsx("div",{className:t.default.rightContent,children:e.jsxs("div",{className:t.default.descriptionWrapper,children:[e.jsx("div",{ref:y,children:e.jsx(p.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",className:t.default.description,children:W})}),e.jsx("div",{ref:b,className:t.default.buttonWrapper,children:g&&e.jsx(G.Button,{as:g?"a":"button",href:g,variant:"secondary",size:"lg",children:O})}),e.jsxs("div",{ref:x,className:t.default.hsaEligible,children:[e.jsx(A.Icon,{name:C.EIconName.CIRCLE_CHECK_FILL,className:t.default.checkIcon}),e.jsx(p.Typography,{as:"p",defaultVariant:"bodySm",mobileVariant:"bodySm",className:t.default.hsaText,children:$})]})]})})]})]})};exports.CallToAction=Q;