@zenpatient-org/healthspan-marketing-ui 0.1.63 → 0.1.65

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),W=require("../../node_modules/@gsap/react/src/index.cjs.js"),e=require("../../node_modules/gsap/index.cjs.js"),P=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),d=require("react"),N=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),z=require("../../components/Typography/Typography.cjs.js"),q=require("../../utils/cn/cn.cjs.js"),G=require("../../utils/debounce.cjs.js"),U=require("../CallToAction/CallToAction.cjs.js"),r=require("./allInOne.module.css.cjs.js");e.gsap.registerPlugin(P.ScrollTrigger);const Y=["health","energy","strength","smiles","balance","sleep","miles","love","fun","years"],{subtitle:F,titleTop:J,scrollableLabels:M,titleBottom:X,description:D,hsaText:K,buttonText:Q,buttonLink:Z,backgroundImage:ee}={subtitle:t.jsx("p",{children:"YOUR LONGEVITY JOURNEY"}),titleTop:t.jsx("p",{children:"Get more"}),scrollableLabels:Y,titleBottom:t.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"},te=({title1:I,title2:O,description:L,scrollLabels:T,images:w})=>{const[_,B]=d.useState(!1),C=932,h=d.useRef(null),l=d.useRef(null),p=d.useRef(null),u=d.useRef(null),g=d.useRef(null),o=d.useRef(null),H=d.useCallback(()=>{if(!l.current||!h.current||!p.current||!u.current||!g.current||!o.current)return;const s=h.current,n=l.current,a=p.current,c=u.current,m=g.current,b=o.current,R=m.querySelectorAll("p");if(R.length===0)return;R.forEach((f,i)=>{f.style.zIndex=String(R.length-i)});const y=n.querySelectorAll("img"),j=y.length;y.forEach((f,i)=>{f.style.zIndex=String(j-i)});const S=s.scrollHeight/j,E=.8;j>0&&y.forEach((f,i)=>{const v=i*S,k=(i+1)*S-E*S;e.gsap.fromTo([f,R[i]],{opacity:1},{opacity:0,scrollTrigger:{trigger:s,start:()=>`top+=${v} top`,end:()=>`top+=${k} top`,scrub:!0}})});const $=n.getBoundingClientRect(),A=a.getBoundingClientRect(),x=s.getBoundingClientRect();e.gsap.set(m,{y:`${$.bottom-x.top+20}px`}),window.innerWidth>C?(e.gsap.set(a,{x:`${$.left-A.width-50}px`}),e.gsap.set(c,{x:`${$.right+25}px`})):(e.gsap.set(a,{top:`${x.top-c.clientHeight-25}px`}),e.gsap.set(c,{top:`${x.top-25}px`}));const V=window.getComputedStyle(n).borderRadius;e.gsap.to(n,{scale:1,scrollTrigger:{trigger:s,start:"top top",end:"95% bottom",scrub:!0,onUpdate:f=>{if(!l.current||!o.current||!a||!c)return;const i=n.getBoundingClientRect();window.innerWidth>C?(e.gsap.set(a,{x:`${i.left-A.width-50}px`}),e.gsap.set(c,{x:`${i.right+25}px`})):(e.gsap.set(a,{y:`${i.top-x.top-25}px`}),e.gsap.set(c,{y:`${i.top-x.top-25}px`})),e.gsap.set(m,{y:`${i.bottom+20}px`});const v=o.current.getBoundingClientRect();i.bottom+60>=v.top?e.gsap.to(b,{opacity:0,duration:.3}):e.gsap.to(b,{opacity:1,duration:.3}),f.progress>=.99?(e.gsap.to(n,{borderRadius:0,duration:.3,ease:"power1.inOut"}),e.gsap.to(y,{opacity:0,duration:.3,ease:"power1.inOut"})):e.gsap.to(n,{borderRadius:V,duration:.3,ease:"power1.inOut"})}},onComplete:()=>{B(!0)}})},[l,p,u,g,o]);return W.useGSAP(()=>{if(!l.current||!h.current||!p.current||!u||!g.current||!o.current)return;const s=l.current,n=p.current,a=u.current,c=g.current,m=o.current;window.innerWidth<=C?e.gsap.set(s,{aspectRatio:`${window.innerWidth} / ${window.innerHeight}`,scale:.5}):e.gsap.set(s,{scale:.3,aspectRatio:`${window.innerWidth} / ${window.innerHeight}`}),H();const b=G.default(H,600);return window.addEventListener("resize",()=>{b()}),()=>{window.removeEventListener("resize",b),e.gsap.killTweensOf([s,c,n,a,m])}},{scope:h,dependencies:[h,l,p,u,g,H]}),t.jsx("div",{className:r.default.root,children:t.jsx("div",{ref:h,className:r.default.container,children:t.jsxs("div",{className:r.default.pillContainerWrapper,children:[t.jsxs("div",{ref:l,className:q.cn("pillContainer",r.default.pillContainer),children:[w==null?void 0:w.map((s,n)=>t.jsx("img",{src:s,alt:`Image ${n+1}`},n)),t.jsx("div",{className:r.default.callToActionContainer,children:_&&t.jsx(U.CallToAction,{subtitle:F,titleTop:J,scrollableLabels:M,titleBottom:X,description:D,hsaText:K,buttonText:Q,buttonLink:Z,backgroundImage:ee})})]}),t.jsx("div",{ref:p,className:r.default.fixedHeader,children:t.jsx(N.HighlightedTitle,{className:r.default.title1,as:"div",defaultVariant:"displayXs",title:I})}),t.jsx("div",{ref:u,className:r.default.fixedHeader,children:t.jsx(N.HighlightedTitle,{className:r.default.title2,as:"div",defaultVariant:"displayXs",title:O})}),t.jsx("div",{ref:g,className:q.cn("scrollableLabels",r.default.scrollableLabels),children:T==null?void 0:T.map((s,n)=>t.jsx(z.Typography,{as:"p",defaultVariant:"labelLg",mobileVariant:"labelSm",className:r.default.scrollLabel,children:s},n))}),t.jsx("div",{ref:o,className:q.cn("description",r.default.description),children:t.jsx(N.HighlightedTitle,{as:"p",defaultVariant:"preambleMd",mobileVariant:"preambleSm",title:L,className:r.default.descriptionText})})]})})})};exports.AllInOne=te;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),B=require("../../node_modules/@gsap/react/src/index.cjs.js"),e=require("../../node_modules/gsap/index.cjs.js"),E=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),p=require("react"),H=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),V=require("../../components/Typography/Typography.cjs.js"),S=require("../../utils/cn/cn.cjs.js"),P=require("../../utils/debounce.cjs.js"),W=require("../CallToAction/CallToAction.cjs.js"),a=require("./allInOne.module.css.cjs.js");e.gsap.registerPlugin(E.ScrollTrigger);const z=["health","energy","strength","smiles","balance","sleep","miles","love","fun","years"],{title1:U,title2:G,description:Y,scrollLabels:$,images:A,subtitle:D,titleTop:F,scrollableLabels:J,titleBottom:M,descriptionText:X,hsaText:K,buttonText:Q,buttonLink:Z,backgroundImage:ee}={subtitle:t.jsx("p",{children:"YOUR LONGEVITY JOURNEY"}),titleTop:t.jsx("p",{children:"Get more"}),scrollableLabels:z,titleBottom:t.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:t.jsx("p",{children:"Unlimited access to"}),title2:t.jsxs("p",{children:["our ",t.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"]},te=()=>{const[L,I]=p.useState(!1),j=932,h=p.useRef(null),l=p.useRef(null),d=p.useRef(null),u=p.useRef(null),g=p.useRef(null),o=p.useRef(null),v=p.useCallback(()=>{if(!l.current||!h.current||!d.current||!u.current||!g.current||!o.current)return;const n=h.current,i=l.current,r=d.current,c=u.current,m=g.current,b=o.current,y=m.querySelectorAll("p");if(y.length===0)return;y.forEach((f,s)=>{f.style.zIndex=String(y.length-s)});const _=i.querySelectorAll("img"),R=_.length;_.forEach((f,s)=>{f.style.zIndex=String(R-s)});const T=n.scrollHeight/R,q=.8;R>0&&_.forEach((f,s)=>{const C=s*T,k=(s+1)*T-q*T;e.gsap.fromTo([f,y[s]],{opacity:1},{opacity:0,scrollTrigger:{trigger:n,start:()=>`top+=${C} top`,end:()=>`top+=${k} top`,scrub:!0}})});const w=i.getBoundingClientRect(),N=r.getBoundingClientRect(),x=n.getBoundingClientRect();e.gsap.set(m,{y:`${w.bottom-x.top+20}px`}),window.innerWidth>j?(e.gsap.set(r,{x:`${w.left-N.width-50}px`}),e.gsap.set(c,{x:`${w.right+25}px`})):(e.gsap.set(r,{top:`${x.top-c.clientHeight-25}px`}),e.gsap.set(c,{top:`${x.top-25}px`}));const O=window.getComputedStyle(i).borderRadius;e.gsap.to(i,{scale:1,scrollTrigger:{trigger:n,start:"top top",end:"95% bottom",scrub:!0,onUpdate:f=>{if(!l.current||!o.current||!r||!c)return;const s=i.getBoundingClientRect();window.innerWidth>j?(e.gsap.set(r,{x:`${s.left-N.width-50}px`}),e.gsap.set(c,{x:`${s.right+25}px`})):(e.gsap.set(r,{y:`${s.top-x.top-25}px`}),e.gsap.set(c,{y:`${s.top-x.top-25}px`})),e.gsap.set(m,{y:`${s.bottom+20}px`});const C=o.current.getBoundingClientRect();s.bottom+60>=C.top?e.gsap.to(b,{opacity:0,duration:.3}):e.gsap.to(b,{opacity:1,duration:.3}),f.progress>=.99?(e.gsap.to(i,{borderRadius:0,duration:.3,ease:"power1.inOut"}),e.gsap.to(_,{opacity:0,duration:.3,ease:"power1.inOut"})):e.gsap.to(i,{borderRadius:O,duration:.3,ease:"power1.inOut"})}},onComplete:()=>{I(!0)}})},[l,d,u,g,o]);return B.useGSAP(()=>{if(!l.current||!h.current||!d.current||!u||!g.current||!o.current)return;const n=l.current,i=d.current,r=u.current,c=g.current,m=o.current;window.innerWidth<=j?e.gsap.set(n,{aspectRatio:`${window.innerWidth} / ${window.innerHeight}`,scale:.5}):e.gsap.set(n,{scale:.3,aspectRatio:`${window.innerWidth} / ${window.innerHeight}`}),v();const b=P.default(v,600);return window.addEventListener("resize",()=>{b()}),()=>{window.removeEventListener("resize",b),e.gsap.killTweensOf([n,c,i,r,m])}},{scope:h,dependencies:[h,l,d,u,g,v]}),t.jsx("div",{className:a.default.root,children:t.jsx("div",{ref:h,className:a.default.container,children:t.jsxs("div",{className:a.default.pillContainerWrapper,children:[t.jsxs("div",{ref:l,className:S.cn("pillContainer",a.default.pillContainer),children:[A==null?void 0:A.map((n,i)=>t.jsx("img",{src:n,alt:`Image ${i+1}`},i)),t.jsx("div",{className:a.default.callToActionContainer,children:L&&t.jsx(W.CallToAction,{subtitle:D,titleTop:F,scrollableLabels:J,titleBottom:M,description:X,hsaText:K,buttonText:Q,buttonLink:Z,backgroundImage:ee})})]}),t.jsx("div",{ref:d,className:a.default.fixedHeader,children:t.jsx(H.HighlightedTitle,{className:a.default.title1,as:"div",defaultVariant:"displayXs",title:U})}),t.jsx("div",{ref:u,className:a.default.fixedHeader,children:t.jsx(H.HighlightedTitle,{className:a.default.title2,as:"div",defaultVariant:"displayXs",title:G})}),t.jsx("div",{ref:g,className:S.cn("scrollableLabels",a.default.scrollableLabels),children:$==null?void 0:$.map((n,i)=>t.jsx(V.Typography,{as:"p",defaultVariant:"labelLg",mobileVariant:"labelSm",className:a.default.scrollLabel,children:n},i))}),t.jsx("div",{ref:o,className:S.cn("description",a.default.description),children:t.jsx(H.HighlightedTitle,{as:"p",defaultVariant:"preambleMd",mobileVariant:"preambleSm",title:Y,className:a.default.descriptionText})})]})})})};exports.AllInOne=te;

package/dist/modules/AllInOne/AllInOne.d.ts

@@ -1,11 +1 @@
-import { ReactNode } from 'react';
-
-type AllInOneProps = {
-    title1?: ReactNode;
-    title2?: ReactNode;
-    description?: string;
-    scrollLabels?: readonly string[];
-    images?: readonly string[];
-};
-export declare const AllInOne: ({ title1, title2, description, scrollLabels, images }: AllInOneProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const AllInOne: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,17 +1,17 @@
 "use client";
-import { jsx as t, jsxs as O } from "react/jsx-runtime";
-import { useGSAP as G } from "../../node_modules/@gsap/react/src/index.es.js";
+import { jsx as t, jsxs as A } from "react/jsx-runtime";
+import { useGSAP as V } from "../../node_modules/@gsap/react/src/index.es.js";
 import { gsap as e } from "../../node_modules/gsap/index.es.js";
-import { ScrollTrigger as U } from "../../node_modules/gsap/ScrollTrigger.es.js";
-import { useState as Y, useRef as g, useCallback as _ } from "react";
-import { HighlightedTitle as A } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as q } from "../../components/Typography/Typography.es.js";
-import { cn as I } from "../../utils/cn/cn.es.js";
-import F from "../../utils/debounce.es.js";
-import { CallToAction as J } from "../CallToAction/CallToAction.es.js";
-import r from "./allInOne.module.css.es.js";
-e.registerPlugin(U);
-const X = [
+import { ScrollTrigger as W } from "../../node_modules/gsap/ScrollTrigger.es.js";
+import { useState as P, useRef as h, useCallback as z } from "react";
+import { HighlightedTitle as S } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as U } from "../../components/Typography/Typography.es.js";
+import { cn as N } from "../../utils/cn/cn.es.js";
+import G from "../../utils/debounce.es.js";
+import { CallToAction as Y } from "../CallToAction/CallToAction.es.js";
+import n from "./allInOne.module.css.es.js";
+e.registerPlugin(W);
+const q = [
   "health",
   "energy",
   "strength",
@@ -23,148 +23,179 @@ const X = [
   "fun",
   "years"
 ], {
-  subtitle: D,
+  title1: D,
+  title2: F,
+  description: J,
+  scrollLabels: $,
+  images: L,
+  subtitle: X,
   titleTop: M,
   scrollableLabels: K,
   titleBottom: Q,
-  description: Z,
+  descriptionText: Z,
   hsaText: ee,
   buttonText: te,
   buttonLink: ie,
-  backgroundImage: ne
+  backgroundImage: oe
 } = {
   subtitle: /* @__PURE__ */ t("p", { children: "YOUR LONGEVITY JOURNEY" }),
   titleTop: /* @__PURE__ */ t("p", { children: "Get more" }),
-  scrollableLabels: X,
+  scrollableLabels: q,
   titleBottom: /* @__PURE__ */ t("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"
-}, he = ({ title1: B, title2: E, description: V, scrollLabels: R, images: C }) => {
-  const [k, W] = Y(!1), T = 932, f = g(null), l = g(null), d = g(null), p = g(null), u = g(null), s = g(null), S = _(() => {
-    if (!l.current || !f.current || !d.current || !p.current || !u.current || !s.current)
+  backgroundImage: "https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_9_67b550bfe1.jpg",
+  title1: /* @__PURE__ */ t("p", { children: "Unlimited access to" }),
+  title2: /* @__PURE__ */ A("p", { children: [
+    "our ",
+    /* @__PURE__ */ t("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"
+  ]
+}, ge = () => {
+  const [j, k] = P(!1), _ = 932, f = h(null), a = h(null), p = h(null), d = h(null), m = h(null), l = h(null), w = z(() => {
+    if (!a.current || !f.current || !p.current || !d.current || !m.current || !l.current)
       return;
-    const o = f.current, i = l.current, a = d.current, c = p.current, h = u.current, b = s.current, w = h.querySelectorAll("p");
-    if (w.length === 0) return;
-    w.forEach((m, n) => {
-      m.style.zIndex = String(w.length - n);
+    const r = f.current, i = a.current, s = p.current, c = d.current, g = m.current, b = l.current, x = g.querySelectorAll("p");
+    if (x.length === 0) return;
+    x.forEach((u, o) => {
+      u.style.zIndex = String(x.length - o);
     });
-    const y = i.querySelectorAll("img"), H = y.length;
-    y.forEach((m, n) => {
-      m.style.zIndex = String(H - n);
+    const v = i.querySelectorAll("img"), R = v.length;
+    v.forEach((u, o) => {
+      u.style.zIndex = String(R - o);
     });
-    const N = o.scrollHeight / H, P = 0.8;
-    H > 0 && y.forEach((m, n) => {
-      const v = n * N, j = (n + 1) * N - P * N;
+    const C = r.scrollHeight / R, O = 0.8;
+    R > 0 && v.forEach((u, o) => {
+      const H = o * C, E = (o + 1) * C - O * C;
       e.fromTo(
-        [m, w[n]],
+        [u, x[o]],
         { opacity: 1 },
         {
           opacity: 0,
           scrollTrigger: {
-            trigger: o,
-            start: () => `top+=${v} top`,
-            end: () => `top+=${j} top`,
+            trigger: r,
+            start: () => `top+=${H} top`,
+            end: () => `top+=${E} top`,
             scrub: !0
           }
         }
       );
     });
-    const $ = i.getBoundingClientRect(), L = a.getBoundingClientRect(), x = o.getBoundingClientRect();
-    e.set(h, {
-      y: `${$.bottom - x.top + 20}px`
-    }), window.innerWidth > T ? (e.set(a, {
-      x: `${$.left - L.width - 50}px`
+    const T = i.getBoundingClientRect(), I = s.getBoundingClientRect(), y = r.getBoundingClientRect();
+    e.set(g, {
+      y: `${T.bottom - y.top + 20}px`
+    }), window.innerWidth > _ ? (e.set(s, {
+      x: `${T.left - I.width - 50}px`
     }), e.set(c, {
-      x: `${$.right + 25}px`
-    })) : (e.set(a, {
-      top: `${x.top - c.clientHeight - 25}px`
+      x: `${T.right + 25}px`
+    })) : (e.set(s, {
+      top: `${y.top - c.clientHeight - 25}px`
     }), e.set(c, {
-      top: `${x.top - 25}px`
+      top: `${y.top - 25}px`
     }));
-    const z = window.getComputedStyle(i).borderRadius;
+    const B = window.getComputedStyle(i).borderRadius;
     e.to(i, {
       scale: 1,
       scrollTrigger: {
-        trigger: o,
+        trigger: r,
         start: "top top",
         end: "95% bottom",
         scrub: !0,
-        onUpdate: (m) => {
-          if (!l.current || !s.current || !a || !c)
+        onUpdate: (u) => {
+          if (!a.current || !l.current || !s || !c)
             return;
-          const n = i.getBoundingClientRect();
-          window.innerWidth > T ? (e.set(a, {
-            x: `${n.left - L.width - 50}px`
+          const o = i.getBoundingClientRect();
+          window.innerWidth > _ ? (e.set(s, {
+            x: `${o.left - I.width - 50}px`
           }), e.set(c, {
-            x: `${n.right + 25}px`
-          })) : (e.set(a, {
-            y: `${n.top - x.top - 25}px`
+            x: `${o.right + 25}px`
+          })) : (e.set(s, {
+            y: `${o.top - y.top - 25}px`
           }), e.set(c, {
-            y: `${n.top - x.top - 25}px`
-          })), e.set(h, {
-            y: `${n.bottom + 20}px`
+            y: `${o.top - y.top - 25}px`
+          })), e.set(g, {
+            y: `${o.bottom + 20}px`
           });
-          const v = s.current.getBoundingClientRect();
-          n.bottom + 60 >= v.top ? e.to(b, { opacity: 0, duration: 0.3 }) : e.to(b, { opacity: 1, duration: 0.3 }), m.progress >= 0.99 ? (e.to(i, {
+          const H = l.current.getBoundingClientRect();
+          o.bottom + 60 >= H.top ? e.to(b, { opacity: 0, duration: 0.3 }) : e.to(b, { opacity: 1, duration: 0.3 }), u.progress >= 0.99 ? (e.to(i, {
             borderRadius: 0,
             duration: 0.3,
             ease: "power1.inOut"
-          }), e.to(y, {
+          }), e.to(v, {
             opacity: 0,
             duration: 0.3,
             ease: "power1.inOut"
           })) : e.to(i, {
-            borderRadius: z,
+            borderRadius: B,
             duration: 0.3,
             ease: "power1.inOut"
           });
         }
       },
       onComplete: () => {
-        W(!0);
+        k(!0);
       }
     });
-  }, [l, d, p, u, s]);
-  return G(
+  }, [a, p, d, m, l]);
+  return V(
     () => {
-      if (!l.current || !f.current || !d.current || !p || !u.current || !s.current)
+      if (!a.current || !f.current || !p.current || !d || !m.current || !l.current)
         return;
-      const o = l.current, i = d.current, a = p.current, c = u.current, h = s.current;
-      window.innerWidth <= T ? e.set(o, {
+      const r = a.current, i = p.current, s = d.current, c = m.current, g = l.current;
+      window.innerWidth <= _ ? e.set(r, {
         aspectRatio: `${window.innerWidth} / ${window.innerHeight}`,
         scale: 0.5
-      }) : e.set(o, {
+      }) : e.set(r, {
         scale: 0.3,
         aspectRatio: `${window.innerWidth} / ${window.innerHeight}`
-      }), S();
-      const b = F(S, 600);
+      }), w();
+      const b = G(w, 600);
       return window.addEventListener("resize", () => {
         b();
       }), () => {
-        window.removeEventListener("resize", b), e.killTweensOf([o, c, i, a, h]);
+        window.removeEventListener("resize", b), e.killTweensOf([r, c, i, s, g]);
       };
     },
     {
       scope: f,
       dependencies: [
         f,
-        l,
-        d,
+        a,
         p,
-        u,
-        S
+        d,
+        m,
+        w
       ]
     }
-  ), /* @__PURE__ */ t("div", { className: r.root, children: /* @__PURE__ */ t("div", { ref: f, className: r.container, children: /* @__PURE__ */ O("div", { className: r.pillContainerWrapper, children: [
-    /* @__PURE__ */ O("div", { ref: l, className: I("pillContainer", r.pillContainer), children: [
-      C == null ? void 0 : C.map((o, i) => /* @__PURE__ */ t("img", { src: o, alt: `Image ${i + 1}` }, i)),
-      /* @__PURE__ */ t("div", { className: r.callToActionContainer, children: k && /* @__PURE__ */ t(
-        J,
+  ), /* @__PURE__ */ t("div", { className: n.root, children: /* @__PURE__ */ t("div", { ref: f, className: n.container, children: /* @__PURE__ */ A("div", { className: n.pillContainerWrapper, children: [
+    /* @__PURE__ */ A("div", { ref: a, className: N("pillContainer", n.pillContainer), children: [
+      L == null ? void 0 : L.map((r, i) => /* @__PURE__ */ t("img", { src: r, alt: `Image ${i + 1}` }, i)),
+      /* @__PURE__ */ t("div", { className: n.callToActionContainer, children: j && /* @__PURE__ */ t(
+        Y,
         {
-          subtitle: D,
+          subtitle: X,
           titleTop: M,
           scrollableLabels: K,
           titleBottom: Q,
@@ -172,51 +203,51 @@ const X = [
           hsaText: ee,
           buttonText: te,
           buttonLink: ie,
-          backgroundImage: ne
+          backgroundImage: oe
         }
       ) })
     ] }),
-    /* @__PURE__ */ t("div", { ref: d, className: r.fixedHeader, children: /* @__PURE__ */ t(
-      A,
+    /* @__PURE__ */ t("div", { ref: p, className: n.fixedHeader, children: /* @__PURE__ */ t(
+      S,
       {
-        className: r.title1,
+        className: n.title1,
         as: "div",
         defaultVariant: "displayXs",
-        title: B
+        title: D
       }
     ) }),
-    /* @__PURE__ */ t("div", { ref: p, className: r.fixedHeader, children: /* @__PURE__ */ t(
-      A,
+    /* @__PURE__ */ t("div", { ref: d, className: n.fixedHeader, children: /* @__PURE__ */ t(
+      S,
       {
-        className: r.title2,
+        className: n.title2,
         as: "div",
         defaultVariant: "displayXs",
-        title: E
+        title: F
       }
     ) }),
-    /* @__PURE__ */ t("div", { ref: u, className: I("scrollableLabels", r.scrollableLabels), children: R == null ? void 0 : R.map((o, i) => /* @__PURE__ */ t(
-      q,
+    /* @__PURE__ */ t("div", { ref: m, className: N("scrollableLabels", n.scrollableLabels), children: $ == null ? void 0 : $.map((r, i) => /* @__PURE__ */ t(
+      U,
       {
         as: "p",
         defaultVariant: "labelLg",
         mobileVariant: "labelSm",
-        className: r.scrollLabel,
-        children: o
+        className: n.scrollLabel,
+        children: r
       },
       i
     )) }),
-    /* @__PURE__ */ t("div", { ref: s, className: I("description", r.description), children: /* @__PURE__ */ t(
-      A,
+    /* @__PURE__ */ t("div", { ref: l, className: N("description", n.description), children: /* @__PURE__ */ t(
+      S,
       {
         as: "p",
         defaultVariant: "preambleMd",
         mobileVariant: "preambleSm",
-        title: V,
-        className: r.descriptionText
+        title: J,
+        className: n.descriptionText
       }
     ) })
   ] }) }) });
 };
 export {
-  he as AllInOne
+  ge as AllInOne
 };

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"),t=require("./callToAction.module.css.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");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 center",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,{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,{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"),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 center",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,{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,{defaultVariant:"bodySm",mobileVariant:"bodySm",className:t.default.hsaText,children:W})]})]})})]})]})};exports.CallToAction=G;

package/dist/modules/CallToAction/CallToAction.es.js

@@ -5,12 +5,12 @@ import { Button as j } from "../../components/Button/Button.es.js";
 import { Typography as u } from "../../components/Typography/Typography.es.js";
 import { Icon as A } from "../../components/Icon/Icon.es.js";
 import { EIconName as I } from "../../components/Icon/constants.es.js";
-import r from "./callToAction.module.css.es.js";
 import { HighlightedTitle as v } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { gsap as a } from "../../node_modules/gsap/index.es.js";
 import { useGSAP as $ } from "../../node_modules/@gsap/react/src/index.es.js";
 import { ScrollTrigger as D } from "../../node_modules/gsap/ScrollTrigger.es.js";
 import G from "../../utils/debounce.es.js";
+import r from "./callToAction.module.css.es.js";
 a.registerPlugin(D);
 const ne = ({
   subtitle: k,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.1.63",
+    "version": "0.1.65",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -501,6 +501,16 @@
             "import": "./dist/modules/ProgramDetails/ProgramDetails.es.js",
             "require": "./dist/modules/ProgramDetails/ProgramDetails.cjs.js"
         },
+        "./TextBlockAnimated": {
+            "types": "./dist/modules/TextBlockAnimated/TextBlockAnimated.d.ts",
+            "import": "./dist/modules/TextBlockAnimated/TextBlockAnimated.es.js",
+            "require": "./dist/modules/TextBlockAnimated/TextBlockAnimated.cjs.js"
+        },
+        "./CallToAction": {
+            "types": "./dist/modules/CallToAction/CallToAction.d.ts",
+            "import": "./dist/modules/CallToAction/CallToAction.es.js",
+            "require": "./dist/modules/CallToAction/CallToAction.cjs.js"
+        },
         "./Bubbles": {
             "types": "./dist/pageComponents/Bubbles/Bubbles.d.ts",
             "import": "./dist/pageComponents/Bubbles/Bubbles.es.js",
@@ -566,11 +576,6 @@
             "import": "./dist/pageComponents/Banner/Banner.es.js",
             "require": "./dist/pageComponents/Banner/Banner.cjs.js"
         },
-        "./TextBlockAnimated": {
-            "types": "./dist/modules/TextBlockAnimated/TextBlockAnimated.d.ts",
-            "import": "./dist/modules/TextBlockAnimated/TextBlockAnimated.es.js",
-            "require": "./dist/modules/TextBlockAnimated/TextBlockAnimated.cjs.js"
-        },
         "./dist/*.css": "./dist/*.css"
     }
 }