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

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

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

package/dist/pageComponents/Bubbles/Bubbles.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),e=require("react"),d=require("../../utils/cn/cn.cjs.js"),r=require("./bubbles.module.css.cjs.js"),v=["xs","lg","md","md","xl","sm","sm","md","lg","md","xl","xl","xl"],w=({className:b})=>{const[n,f]=e.useState(!1),[c,m]=e.useState("forward"),[o,u]=e.useState(!1),l=e.useRef(null),a=e.useRef(0);return e.useEffect(()=>{const s=()=>{const t=window.scrollY;m(t>a.current?"forward":"reverse"),a.current=t};return window.addEventListener("scroll",s,{passive:!0}),()=>window.removeEventListener("scroll",s)},[]),e.useEffect(()=>{const s=new window.IntersectionObserver(([t])=>{f(t.isIntersecting)},{threshold:.5});return l.current&&s.observe(l.current),()=>s.disconnect()},[]),e.useEffect(()=>{n&&c==="forward"&&u(!0),n&&c==="reverse"&&u(!1)},[n,c]),i.jsx("section",{ref:l,className:d.cn(r.default.root,b),children:i.jsx("div",{className:r.default.container,children:v.map((s,t)=>i.jsx("div",{className:d.cn(r.default.bubble,o&&r.default.bubbleFinished,!o&&r.default.bubbleReverse),"data-size":s,"data-index":t},t))})})};exports.Bubbles=w;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),e=require("react"),d=require("../../utils/cn/cn.cjs.js"),r=require("./bubbles.module.css.cjs.js"),v=["xs","lg","md","md","xl","sm","sm","md","lg","md","xl","xl","xl"],w=({className:b})=>{const[n,f]=e.useState(!1),[c,m]=e.useState("forward"),[o,u]=e.useState(!1),i=e.useRef(null),a=e.useRef(0);return e.useEffect(()=>{const s=()=>{const t=window.scrollY;m(t>a.current?"forward":"reverse"),a.current=t};return window.addEventListener("scroll",s,{passive:!0}),()=>window.removeEventListener("scroll",s)},[]),e.useEffect(()=>{const s=new window.IntersectionObserver(([t])=>{f(t.isIntersecting)},{rootMargin:"0px 0px -20% 0px",threshold:.2});return i.current&&s.observe(i.current),()=>s.disconnect()},[]),e.useEffect(()=>{n&&c==="forward"&&u(!0),n&&c==="reverse"&&u(!1)},[n,c]),l.jsx("section",{ref:i,className:d.cn(r.default.root,b),children:l.jsx("div",{className:r.default.container,children:v.map((s,t)=>l.jsx("div",{className:d.cn(r.default.bubble,o&&r.default.bubbleFinished,!o&&r.default.bubbleReverse),"data-size":s,"data-index":t},t))})})};exports.Bubbles=w;

package/dist/pageComponents/Bubbles/Bubbles.es.js

@@ -2,37 +2,37 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useState as c, useRef as u, useEffect as l } from "react";
 import { cn as b } from "../../utils/cn/cn.es.js";
-import r from "./bubbles.module.css.es.js";
-const h = ["xs", "lg", "md", "md", "xl", "sm", "sm", "md", "lg", "md", "xl", "xl", "xl"], F = ({ className: f }) => {
+import s from "./bubbles.module.css.es.js";
+const p = ["xs", "lg", "md", "md", "xl", "sm", "sm", "md", "lg", "md", "xl", "xl", "xl"], F = ({ className: f }) => {
   const [t, v] = c(!1), [n, w] = c("forward"), [d, a] = c(!1), o = u(null), m = u(0);
   return l(() => {
     const e = () => {
-      const s = window.scrollY;
-      w(s > m.current ? "forward" : "reverse"), m.current = s;
+      const r = window.scrollY;
+      w(r > m.current ? "forward" : "reverse"), m.current = r;
     };
     return window.addEventListener("scroll", e, { passive: !0 }), () => window.removeEventListener("scroll", e);
   }, []), l(() => {
     const e = new window.IntersectionObserver(
-      ([s]) => {
-        v(s.isIntersecting);
+      ([r]) => {
+        v(r.isIntersecting);
       },
-      { threshold: 0.5 }
+      { rootMargin: "0px 0px -20% 0px", threshold: 0.2 }
     );
     return o.current && e.observe(o.current), () => e.disconnect();
   }, []), l(() => {
     t && n === "forward" && a(!0), t && n === "reverse" && a(!1);
-  }, [t, n]), /* @__PURE__ */ i("section", { ref: o, className: b(r.root, f), children: /* @__PURE__ */ i("div", { className: r.container, children: h.map((e, s) => /* @__PURE__ */ i(
+  }, [t, n]), /* @__PURE__ */ i("section", { ref: o, className: b(s.root, f), children: /* @__PURE__ */ i("div", { className: s.container, children: p.map((e, r) => /* @__PURE__ */ i(
     "div",
     {
       className: b(
-        r.bubble,
-        d && r.bubbleFinished,
-        !d && r.bubbleReverse
+        s.bubble,
+        d && s.bubbleFinished,
+        !d && s.bubbleReverse
       ),
       "data-size": e,
-      "data-index": s
+      "data-index": r
     },
-    s
+    r
   )) }) });
 };
 export {

package/dist/pageComponents/CallToActionDefault/CallToActionDefault.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("../../modules/CallToAction/CallToAction.cjs.js"),o=["health","energy","strength","smiles","balance","sleep","miles","love","fun","years"],i=()=>{const e={subtitle:t.jsx("p",{children:"YOUR LONGEVITY JOURNEY"}),titleTop:t.jsx("p",{children:"Get more"}),scrollableLabels:o,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:"https://app.gethealthspan.com/#/get-started",backgroundImage:"https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_9_67b550bfe1.jpg"};return t.jsx(l.CallToAction,{...e})};exports.CallToActionDefault=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("../../modules/CallToAction/CallToAction.cjs.js"),o=["health","energy","strength","smiles","balance","sleep","miles","love","fun","years"],i=()=>{const e={subtitle:t.jsx("p",{children:"YOUR LONGEVITY JOURNEY"}),titleTop:t.jsx("p",{children:"Get more"}),scrollableLabels:o,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:"https://app.gethealthspan.com/#/get-started",backgroundImage:"https://methodical-vitality-96814f361f.media.strapiapp.com/aio_step_9_1_6d46345746.jpg"};return t.jsx(l.CallToAction,{...e})};exports.CallToActionDefault=i;

package/dist/pageComponents/CallToActionDefault/CallToActionDefault.es.js

@@ -21,7 +21,7 @@ const o = [
   buttonText: "JOIN NOW",
   // TODO: How to we make this not eventually break...
   buttonLink: "https://app.gethealthspan.com/#/get-started",
-  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"
 } });
 export {
   s as CallToActionDefault

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.1.105",
+    "version": "0.1.106",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",