@zenpatient-org/healthspan-marketing-ui 0.1.32 → 0.1.33

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

@@ -0,0 +1,222 @@
+"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 { 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 = [
+  "health",
+  "energy",
+  "strength",
+  "smiles",
+  "balance",
+  "sleep",
+  "miles",
+  "love",
+  "fun",
+  "years"
+], {
+  subtitle: D,
+  titleTop: M,
+  scrollableLabels: K,
+  titleBottom: Q,
+  description: Z,
+  hsaText: ee,
+  buttonText: te,
+  buttonLink: ie,
+  backgroundImage: ne
+} = {
+  subtitle: /* @__PURE__ */ t("p", { children: "YOUR LONGEVITY JOURNEY" }),
+  titleTop: /* @__PURE__ */ t("p", { children: "Get more" }),
+  scrollableLabels: X,
+  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)
+      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 y = i.querySelectorAll("img"), H = y.length;
+    y.forEach((m, n) => {
+      m.style.zIndex = String(H - n);
+    });
+    const N = o.scrollHeight / H, P = 0.8;
+    H > 0 && y.forEach((m, n) => {
+      const v = n * N, j = (n + 1) * N - P * N;
+      e.fromTo(
+        [m, w[n]],
+        { opacity: 1 },
+        {
+          opacity: 0,
+          scrollTrigger: {
+            trigger: o,
+            start: () => `top+=${v} top`,
+            end: () => `top+=${j} 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`
+    }), e.set(c, {
+      x: `${$.right + 25}px`
+    })) : (e.set(a, {
+      top: `${x.top - c.clientHeight - 25}px`
+    }), e.set(c, {
+      top: `${x.top - 25}px`
+    }));
+    const z = window.getComputedStyle(i).borderRadius;
+    e.to(i, {
+      scale: 1,
+      scrollTrigger: {
+        trigger: o,
+        start: "top top",
+        end: "95% bottom",
+        scrub: !0,
+        onUpdate: (m) => {
+          if (!l.current || !s.current || !a || !c)
+            return;
+          const n = i.getBoundingClientRect();
+          window.innerWidth > T ? (e.set(a, {
+            x: `${n.left - L.width - 50}px`
+          }), e.set(c, {
+            x: `${n.right + 25}px`
+          })) : (e.set(a, {
+            y: `${n.top - x.top - 25}px`
+          }), e.set(c, {
+            y: `${n.top - x.top - 25}px`
+          })), e.set(h, {
+            y: `${n.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, {
+            borderRadius: 0,
+            duration: 0.3,
+            ease: "power1.inOut"
+          }), e.to(y, {
+            opacity: 0,
+            duration: 0.3,
+            ease: "power1.inOut"
+          })) : e.to(i, {
+            borderRadius: z,
+            duration: 0.3,
+            ease: "power1.inOut"
+          });
+        }
+      },
+      onComplete: () => {
+        W(!0);
+      }
+    });
+  }, [l, d, p, u, s]);
+  return G(
+    () => {
+      if (!l.current || !f.current || !d.current || !p || !u.current || !s.current)
+        return;
+      const o = l.current, i = d.current, a = p.current, c = u.current, h = s.current;
+      window.innerWidth <= T ? e.set(o, {
+        aspectRatio: `${window.innerWidth} / ${window.innerHeight}`,
+        scale: 0.5
+      }) : e.set(o, {
+        scale: 0.3,
+        aspectRatio: `${window.innerWidth} / ${window.innerHeight}`
+      }), S();
+      const b = F(S, 600);
+      return window.addEventListener("resize", () => {
+        b();
+      }), () => {
+        window.removeEventListener("resize", b), e.killTweensOf([o, c, i, a, h]);
+      };
+    },
+    {
+      scope: f,
+      dependencies: [
+        f,
+        l,
+        d,
+        p,
+        u,
+        S
+      ]
+    }
+  ), /* @__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,
+        {
+          subtitle: D,
+          titleTop: M,
+          scrollableLabels: K,
+          titleBottom: Q,
+          description: Z,
+          hsaText: ee,
+          buttonText: te,
+          buttonLink: ie,
+          backgroundImage: ne
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t("div", { ref: d, className: r.fixedHeader, children: /* @__PURE__ */ t(
+      A,
+      {
+        className: r.title1,
+        as: "div",
+        defaultVariant: "displayXs",
+        title: B
+      }
+    ) }),
+    /* @__PURE__ */ t("div", { ref: p, className: r.fixedHeader, children: /* @__PURE__ */ t(
+      A,
+      {
+        className: r.title2,
+        as: "div",
+        defaultVariant: "displayXs",
+        title: E
+      }
+    ) }),
+    /* @__PURE__ */ t("div", { ref: u, className: I("scrollableLabels", r.scrollableLabels), children: R == null ? void 0 : R.map((o, i) => /* @__PURE__ */ t(
+      q,
+      {
+        as: "p",
+        defaultVariant: "labelLg",
+        mobileVariant: "labelSm",
+        className: r.scrollLabel,
+        children: o
+      },
+      i
+    )) }),
+    /* @__PURE__ */ t("div", { ref: s, className: I("description", r.description), children: /* @__PURE__ */ t(
+      A,
+      {
+        as: "p",
+        defaultVariant: "preambleMd",
+        mobileVariant: "preambleSm",
+        title: V,
+        className: r.descriptionText
+      }
+    ) })
+  ] }) }) });
+};
+export {
+  he as AllInOne
+};

package/dist/modules/AllInOne/allInOne.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="allInOne-module__root___aRPBl",l="allInOne-module__container___FKeTW",n="allInOne-module__pillContainerWrapper___kXrF1",o="allInOne-module__pillContainer___PJAUY",t="allInOne-module__callToActionContainer___J0Gfh",i="allInOne-module__fixedHeader___4Lq8d",a="allInOne-module__scrollableLabels___BtN-2",r="allInOne-module__description___Y3gZh",_="allInOne-module__descriptionText___svjVl",c={root:e,container:l,pillContainerWrapper:n,pillContainer:o,callToActionContainer:t,fixedHeader:i,scrollableLabels:a,description:r,descriptionText:_};exports.callToActionContainer=t;exports.container=l;exports.default=c;exports.description=r;exports.descriptionText=_;exports.fixedHeader=i;exports.pillContainer=o;exports.pillContainerWrapper=n;exports.root=e;exports.scrollableLabels=a;

package/dist/modules/AllInOne/allInOne.module.css.es.js

@@ -0,0 +1,23 @@
+const e = "allInOne-module__root___aRPBl", l = "allInOne-module__container___FKeTW", n = "allInOne-module__pillContainerWrapper___kXrF1", o = "allInOne-module__pillContainer___PJAUY", _ = "allInOne-module__callToActionContainer___J0Gfh", t = "allInOne-module__fixedHeader___4Lq8d", a = "allInOne-module__scrollableLabels___BtN-2", i = "allInOne-module__description___Y3gZh", r = "allInOne-module__descriptionText___svjVl", c = {
+  root: e,
+  container: l,
+  pillContainerWrapper: n,
+  pillContainer: o,
+  callToActionContainer: _,
+  fixedHeader: t,
+  scrollableLabels: a,
+  description: i,
+  descriptionText: r
+};
+export {
+  _ as callToActionContainer,
+  l as container,
+  c as default,
+  i as description,
+  r as descriptionText,
+  t as fixedHeader,
+  o as pillContainer,
+  n as pillContainerWrapper,
+  e as root,
+  a as scrollableLabels
+};

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

@@ -0,0 +1 @@
+export { AllInOne } from './AllInOne';

package/dist/modules/Benefits/Benefits.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),o=require("./components/BenefitTag/BenefitTag.cjs.js"),m=require("./components/BenefitItem/BenefitItem.cjs.js"),u=require("../../components/Typography/Typography.cjs.js"),t=require("./benefits.module.css.cjs.js"),g=({label:s,title:l,image:r,benefits:n,tags:d})=>e.jsx("section",{className:t.default.root,children:e.jsxs("div",{className:t.default.container,children:[e.jsxs("div",{className:t.default.header,children:[e.jsx(u.Typography,{defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:t.default.label,children:s}),e.jsx(c.HighlightedTitle,{title:l,defaultVariant:"displayMd",mobileVariant:"headingLg"})]}),e.jsxs("div",{className:t.default.content,children:[e.jsxs("div",{className:t.default.imageWrapper,children:[e.jsx("img",{src:r,alt:"image",className:t.default.image}),d.map((i,a)=>e.jsx(o.BenefitTag,{text:i,className:t.default[`tag${a+1}`]},a))]}),e.jsx("div",{className:t.default.benefits,children:n.map((i,a)=>e.jsx(m.BenefitItem,{index:a+1,title:i.title,description:i.description},a))})]})]})});exports.Benefits=g;

package/dist/modules/Benefits/Benefits.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+type Props = {
+    label: string;
+    title: ReactNode;
+    image: string;
+    benefits: Array<{
+        title: string;
+        description: string;
+    }>;
+    tags: Array<string>;
+};
+export declare const Benefits: ({ label, title, image, benefits, tags }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modules/Benefits/Benefits.es.js

@@ -0,0 +1,30 @@
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+import { HighlightedTitle as n } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { BenefitTag as d } from "./components/BenefitTag/BenefitTag.es.js";
+import { BenefitItem as p } from "./components/BenefitItem/BenefitItem.es.js";
+import { Typography as h } from "../../components/Typography/Typography.es.js";
+import e from "./benefits.module.css.es.js";
+const y = ({ label: l, title: s, image: m, benefits: o, tags: c }) => /* @__PURE__ */ a("section", { className: e.root, children: /* @__PURE__ */ r("div", { className: e.container, children: [
+  /* @__PURE__ */ r("div", { className: e.header, children: [
+    /* @__PURE__ */ a(h, { defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: l }),
+    /* @__PURE__ */ a(n, { title: s, defaultVariant: "displayMd", mobileVariant: "headingLg" })
+  ] }),
+  /* @__PURE__ */ r("div", { className: e.content, children: [
+    /* @__PURE__ */ r("div", { className: e.imageWrapper, children: [
+      /* @__PURE__ */ a("img", { src: m, alt: "image", className: e.image }),
+      c.map((t, i) => /* @__PURE__ */ a(d, { text: t, className: e[`tag${i + 1}`] }, i))
+    ] }),
+    /* @__PURE__ */ a("div", { className: e.benefits, children: o.map((t, i) => /* @__PURE__ */ a(
+      p,
+      {
+        index: i + 1,
+        title: t.title,
+        description: t.description
+      },
+      i
+    )) })
+  ] })
+] }) });
+export {
+  y as Benefits
+};

package/dist/modules/Benefits/benefits.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="benefits-module__root___DiO7c",t="benefits-module__container___ouE-Q",_="benefits-module__header___wt7M5",o="benefits-module__label___sgWAr",n="benefits-module__content___Q1Nej",a="benefits-module__imageWrapper___Owwd8",s="benefits-module__image___Hq7o5",i="benefits-module__tag1___orgyD",r="benefits-module__tag2___49bdt",l="benefits-module__tag3___TYdET",g="benefits-module__benefits___psqX-",c={root:e,container:t,header:_,label:o,content:n,imageWrapper:a,image:s,tag1:i,tag2:r,tag3:l,benefits:g};exports.benefits=g;exports.container=t;exports.content=n;exports.default=c;exports.header=_;exports.image=s;exports.imageWrapper=a;exports.label=o;exports.root=e;exports.tag1=i;exports.tag2=r;exports.tag3=l;

package/dist/modules/Benefits/benefits.module.css.es.js

@@ -0,0 +1,27 @@
+const e = "benefits-module__root___DiO7c", _ = "benefits-module__container___ouE-Q", t = "benefits-module__header___wt7M5", o = "benefits-module__label___sgWAr", n = "benefits-module__content___Q1Nej", s = "benefits-module__imageWrapper___Owwd8", a = "benefits-module__image___Hq7o5", i = "benefits-module__tag1___orgyD", c = "benefits-module__tag2___49bdt", l = "benefits-module__tag3___TYdET", b = "benefits-module__benefits___psqX-", d = {
+  root: e,
+  container: _,
+  header: t,
+  label: o,
+  content: n,
+  imageWrapper: s,
+  image: a,
+  tag1: i,
+  tag2: c,
+  tag3: l,
+  benefits: b
+};
+export {
+  b as benefits,
+  _ as container,
+  n as content,
+  d as default,
+  t as header,
+  a as image,
+  s as imageWrapper,
+  o as label,
+  e as root,
+  i as tag1,
+  c as tag2,
+  l as tag3
+};

package/dist/modules/Benefits/components/BenefitItem/BenefitItem.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../../components/Typography/Typography.cjs.js"),a=require("./benefitItem.module.css.cjs.js"),l=({index:i,title:n,description:r})=>e.jsxs("div",{className:a.default.benefit,children:[e.jsx(t.Typography,{defaultVariant:"labelXl",emphasis:!0,className:a.default.benefitIndex,children:`(0${i})`}),e.jsxs("div",{className:a.default.benefitDetails,children:[e.jsx(t.Typography,{defaultVariant:"headingLg",mobileVariant:"headingXs",className:a.default.benefitTitle,children:n}),e.jsx(t.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodySm",className:a.default.benefitDesc,children:r})]})]});exports.BenefitItem=l;

package/dist/modules/Benefits/components/BenefitItem/BenefitItem.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    index: number;
+    title: string;
+    description: string;
+};
+export declare const BenefitItem: ({ index, title, description }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modules/Benefits/components/BenefitItem/BenefitItem.es.js

@@ -0,0 +1,13 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { Typography as i } from "../../../../components/Typography/Typography.es.js";
+import e from "./benefitItem.module.css.es.js";
+const o = ({ index: l, title: n, description: r }) => /* @__PURE__ */ t("div", { className: e.benefit, children: [
+  /* @__PURE__ */ a(i, { defaultVariant: "labelXl", emphasis: !0, className: e.benefitIndex, children: `(0${l})` }),
+  /* @__PURE__ */ t("div", { className: e.benefitDetails, children: [
+    /* @__PURE__ */ a(i, { defaultVariant: "headingLg", mobileVariant: "headingXs", className: e.benefitTitle, children: n }),
+    /* @__PURE__ */ a(i, { defaultVariant: "bodyMd", mobileVariant: "bodySm", className: e.benefitDesc, children: r })
+  ] })
+] });
+export {
+  o as BenefitItem
+};

package/dist/modules/Benefits/components/BenefitItem/benefitItem.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="benefitItem-module__benefit___yL87M",t="benefitItem-module__benefitIndex___I0-tr",n="benefitItem-module__benefitDetails___nw6dI",i={benefit:e,benefitIndex:t,benefitDetails:n};exports.benefit=e;exports.benefitDetails=n;exports.benefitIndex=t;exports.default=i;

package/dist/modules/Benefits/components/BenefitItem/benefitItem.module.css.es.js

@@ -0,0 +1,11 @@
+const e = "benefitItem-module__benefit___yL87M", t = "benefitItem-module__benefitIndex___I0-tr", n = "benefitItem-module__benefitDetails___nw6dI", i = {
+  benefit: e,
+  benefitIndex: t,
+  benefitDetails: n
+};
+export {
+  e as benefit,
+  n as benefitDetails,
+  t as benefitIndex,
+  i as default
+};

package/dist/modules/Benefits/components/BenefitItem/index.d.ts

@@ -0,0 +1 @@
+export { BenefitItem } from './BenefitItem';

package/dist/modules/Benefits/components/BenefitTag/BenefitTag.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./benefitTag.module.css.cjs.js"),n=require("../../../../components/Typography/Typography.cjs.js"),i=require("../../../../utils/cn/cn.cjs.js"),o=({text:t,className:a})=>e.jsx("div",{className:i.cn(r.default.root,a),children:e.jsx(n.Typography,{emphasis:!0,defaultVariant:"labelLg",mobileVariant:"labelSm",className:r.default.benefitTag,children:t})});exports.BenefitTag=o;

package/dist/modules/Benefits/components/BenefitTag/BenefitTag.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    text: string;
+    className: string;
+};
+export declare const BenefitTag: ({ text, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modules/Benefits/components/BenefitTag/BenefitTag.es.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import e from "./benefitTag.module.css.es.js";
+import { Typography as o } from "../../../../components/Typography/Typography.es.js";
+import { cn as i } from "../../../../utils/cn/cn.es.js";
+const p = ({ text: a, className: t }) => /* @__PURE__ */ r("div", { className: i(e.root, t), children: /* @__PURE__ */ r(o, { emphasis: !0, defaultVariant: "labelLg", mobileVariant: "labelSm", className: e.benefitTag, children: a }) });
+export {
+  p as BenefitTag
+};

package/dist/modules/Benefits/components/BenefitTag/benefitTag.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="benefitTag-module__root___8-WMf",t="benefitTag-module__benefitTag___9R-qj",o={root:e,benefitTag:t};exports.benefitTag=t;exports.default=o;exports.root=e;

package/dist/modules/Benefits/components/BenefitTag/benefitTag.module.css.es.js

@@ -0,0 +1,9 @@
+const e = "benefitTag-module__root___8-WMf", t = "benefitTag-module__benefitTag___9R-qj", o = {
+  root: e,
+  benefitTag: t
+};
+export {
+  t as benefitTag,
+  o as default,
+  e as root
+};

package/dist/modules/Benefits/components/BenefitTag/index.d.ts

@@ -0,0 +1 @@
+export { BenefitTag } from './BenefitTag';

package/dist/modules/Benefits/components/index.d.ts

@@ -0,0 +1,2 @@
+export { BenefitTag } from './BenefitTag';
+export { BenefitItem } from './BenefitItem';

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

@@ -0,0 +1 @@
+export { Benefits } from './Benefits';

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

@@ -0,0 +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;

package/dist/modules/CallToAction/CallToAction.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+export type CallToActionProps = {
+    subtitle: ReactNode;
+    titleTop: ReactNode;
+    scrollableLabels: string[];
+    titleBottom: ReactNode;
+    description: string;
+    hsaText: string;
+    buttonText: string;
+    buttonLink?: string;
+    backgroundImage: string;
+    onButtonClick?: () => void;
+};
+export declare const CallToAction: ({ subtitle, titleTop, scrollableLabels, titleBottom, description, hsaText, buttonText, buttonLink, backgroundImage, }: CallToActionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,165 @@
+"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 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";
+a.registerPlugin(D);
+const ne = ({
+  subtitle: k,
+  titleTop: q,
+  scrollableLabels: R,
+  titleBottom: x,
+  description: X,
+  hsaText: _,
+  buttonText: z,
+  buttonLink: f,
+  backgroundImage: B
+}) => {
+  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,
+      o.current,
+      h.current,
+      m,
+      b.current,
+      g.current,
+      y.current
+    ].filter(Boolean);
+    a.set(F, {
+      clipPath: "inset(0% 0% 100% 0%)",
+      yPercent: 100
+    }), a.to(
+      [
+        d,
+        p.current,
+        o.current,
+        h.current,
+        m,
+        b.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: V.current,
+          start: "top center",
+          end: "+=500"
+        }
+      }
+    );
+    const t = (H = o.current) == null ? void 0 : H.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 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({
+        repeat: -1,
+        delay: S ? 2.5 : 0,
+        onRepeat: () => {
+          a.set(t, { y: 0 });
+        }
+      }), P.forEach((W, O) => {
+        i && i.to({}, { duration: 2 }).to(t, {
+          y: `-${(O + 1) * N}`,
+          duration: 0.5,
+          ease: "power1.inOut"
+        });
+      }), S = !1;
+    }, c = G(M, 200);
+    return M(), window.addEventListener("resize", c), () => {
+      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 }));
+    };
+  }, [R]), /* @__PURE__ */ s("section", { ref: V, className: r.root, children: [
+    /* @__PURE__ */ e("div", { className: r.backgroundImage, style: { backgroundImage: `url(${B})` } }),
+    /* @__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,
+          {
+            defaultVariant: "displayXl",
+            mobileVariant: "displayMd",
+            as: "div",
+            className: r.title,
+            title: q
+          }
+        ) }),
+        /* @__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,
+          {
+            defaultVariant: "displayXl",
+            mobileVariant: "displayMd",
+            as: "div",
+            className: r.title,
+            title: x
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ e("div", { ref: L, className: r.subtitleWrapper, children: /* @__PURE__ */ e(
+        v,
+        {
+          defaultVariant: "labelMd",
+          mobileVariant: "labelSm",
+          as: "div",
+          className: r.subtitle,
+          title: k
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { ref: T, className: r.arrowWrapper, children: /* @__PURE__ */ s(u, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: r.arrow, as: "p", children: [
+        "(",
+        /* @__PURE__ */ e(A, { name: I.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, { defaultVariant: "bodyLg", mobileVariant: "bodyMd", className: r.description, children: X }) }),
+        /* @__PURE__ */ e("div", { ref: g, className: r.buttonWrapper, children: f && /* @__PURE__ */ e(
+          j,
+          {
+            as: f ? "a" : "button",
+            href: f,
+            variant: "secondary",
+            size: "lg",
+            children: z
+          }
+        ) }),
+        /* @__PURE__ */ s("div", { ref: y, className: r.hsaEligible, children: [
+          /* @__PURE__ */ e(A, { name: I.CIRCLE_CHECK_FILL, className: r.checkIcon }),
+          /* @__PURE__ */ e(u, { defaultVariant: "bodySm", mobileVariant: "bodySm", className: r.hsaText, children: _ })
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+export {
+  ne as CallToAction
+};

package/dist/modules/CallToAction/callToAction.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="callToAction-module__root___-Mx9p",t="callToAction-module__backgroundImage___ArlBX",e="callToAction-module__container___GcKf3",l="callToAction-module__leftContent___H0JJW",c="callToAction-module__content___UUQA-",_="callToAction-module__arrowWrapper___E9SUH",r="callToAction-module__arrow___zEmD9",n="callToAction-module__rightContent___P6E8E",a="callToAction-module__subtitleWrapper___rkYN-",i="callToAction-module__subtitle___3OYsg",s="callToAction-module__title___tF4ct",p="callToAction-module__scrollableLabels___rtBOU",u="callToAction-module__scrollableLabelsWrapper___kMiEE",b="callToAction-module__descriptionWrapper___wZ-TI",d="callToAction-module__buttonWrapper___y6mvR",m="callToAction-module__description___APtkj",T="callToAction-module__hsaEligible___zmkav",A="callToAction-module__checkIcon___kasFP",W="callToAction-module__hsaText___0MzD7",g={root:o,backgroundImage:t,container:e,leftContent:l,content:c,arrowWrapper:_,arrow:r,rightContent:n,subtitleWrapper:a,subtitle:i,title:s,scrollableLabels:p,scrollableLabelsWrapper:u,descriptionWrapper:b,buttonWrapper:d,description:m,hsaEligible:T,checkIcon:A,hsaText:W};exports.arrow=r;exports.arrowWrapper=_;exports.backgroundImage=t;exports.buttonWrapper=d;exports.checkIcon=A;exports.container=e;exports.content=c;exports.default=g;exports.description=m;exports.descriptionWrapper=b;exports.hsaEligible=T;exports.hsaText=W;exports.leftContent=l;exports.rightContent=n;exports.root=o;exports.scrollableLabels=p;exports.scrollableLabelsWrapper=u;exports.subtitle=i;exports.subtitleWrapper=a;exports.title=s;