@zenpatient-org/healthspan-marketing-ui 0.1.171 → 0.2.0

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

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

@@ -1,22 +1,22 @@
 "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 n from "gsap";
+import { useGSAP as J } from "@gsap/react";
+import { ScrollTrigger as _ } from "../../node_modules/gsap/ScrollTrigger.es.js";
+import Q from "../../utils/debounce.es.js";
+import r from "../../modules/CallToAction/callToAction.module.css";
+import { EAnalyticsEventType as U, EAnalyticsEvent as Y } from "../../types/analytics/analytics.es.js";
+import { HighlightedTitle as w } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { Typography as h } from "../../components/Typography/Typography.es.js";
 import { Icon as P } from "../../components/Icon/Icon.es.js";
 import { EIconName as W } from "../../components/Icon/constants.es.js";
-import { HighlightedTitle as w } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { gsap as a } from "../../node_modules/gsap/index.es.js";
-import { useGSAP as Q } from "../../node_modules/@gsap/react/src/index.es.js";
-import { ScrollTrigger as _ } from "../../node_modules/gsap/ScrollTrigger.es.js";
-import U from "../../utils/debounce.es.js";
-import r from "./callToAction.module.css.es.js";
-import { EAnalyticsEventType as Y, EAnalyticsEvent as Z } from "../../types/analytics/analytics.es.js";
-a.registerPlugin(_);
+import { Button as Z } from "../../components/Button/Button.es.js";
+n.registerPlugin(_);
 const pe = ({
   subtitle: q,
   titleTop: x,
-  scrollableLabels: C,
+  scrollableLabels: E,
   titleBottom: X,
   description: z,
   hsaText: F,
@@ -24,11 +24,11 @@ const pe = ({
   buttonLink: m,
   backgroundImage: j
 }) => {
-  const u = l(null), c = l(null), E = l(null), y = l(null), b = l(null), V = l(null), g = l(null), v = l(null), N = l(null), D = () => {
-    var n;
-    (n = window.eventBus) == null || n.emit("analytics", {
-      event: Z.ctaClicked,
-      type: Y.interaction,
+  const u = l(null), c = l(null), V = l(null), y = l(null), b = l(null), C = l(null), g = l(null), v = l(null), N = l(null), D = () => {
+    var a;
+    (a = window.eventBus) == null || a.emit("analytics", {
+      event: Y.ctaClicked,
+      type: U.interaction,
       component: "CallToAction",
       element: "primary_button",
       payload: {
@@ -36,9 +36,9 @@ const pe = ({
       }
     });
   };
-  return Q(() => {
-    var A, H, M;
-    const n = u.current && u.current.getBoundingClientRect().top < window.innerHeight * 0.8, p = (A = E.current) == null ? void 0 : A.querySelector("p"), T = (H = V.current) == null ? void 0 : H.querySelector("p"), $ = [
+  return J(() => {
+    var H, M, S;
+    const a = u.current && u.current.getBoundingClientRect().top < window.innerHeight * 0.8, p = (H = V.current) == null ? void 0 : H.querySelector("p"), T = (M = C.current) == null ? void 0 : M.querySelector("p"), $ = [
       p,
       y.current,
       c.current,
@@ -48,11 +48,11 @@ const pe = ({
       v.current,
       N.current
     ].filter(Boolean);
-    a.set($, {
+    n.set($, {
       clipPath: "inset(0% 0% 100% 0%)",
       yPercent: 100
     });
-    const f = a.to(
+    const f = n.to(
       [
         p,
         y.current,
@@ -84,30 +84,30 @@ const pe = ({
       onEnter: () => f.play(),
       onEnterBack: () => f.play(),
       onLeaveBack: () => f.reverse()
-    }), n && a.delayedCall(0.1, () => {
+    }), a && n.delayedCall(0.1, () => {
       f.play();
     });
-    const t = (M = c.current) == null ? void 0 : M.querySelector("ul");
+    const t = (S = c.current) == null ? void 0 : S.querySelector("ul");
     if (!t) return;
     const k = t.innerHTML;
     let i = null, L = !0;
-    const S = () => {
-      i && i.kill(), t.innerHTML = k, a.set(t, { y: 0 });
+    const A = () => {
+      i && i.kill(), t.innerHTML = k, n.set(t, { y: 0 });
       const o = Array.from(t.querySelectorAll("li"));
       if (o.length <= 1) return;
       const R = o[0].clientHeight;
       if (!R) return;
-      a.set(c.current, { height: () => R, overflow: "hidden" });
+      n.set(c.current, { height: () => R, overflow: "hidden" });
       const B = Array.from(o);
       B.forEach((I) => {
         t.appendChild(I.cloneNode(!0));
       });
-      const G = L && !n ? 0.3 : 0;
-      i = a.timeline({
+      const G = L && !a ? 0.3 : 0;
+      i = n.timeline({
         repeat: -1,
         delay: G,
         onRepeat: () => {
-          a.set(t, { y: 0 });
+          n.set(t, { y: 0 });
         }
       }), B.forEach((I, K) => {
         i && i.to({}, { duration: 2 }).to(t, {
@@ -116,12 +116,12 @@ const pe = ({
           ease: "power1.inOut"
         });
       }), L = !1;
-    }, d = U(S, 200);
-    return S(), window.addEventListener("resize", d), () => {
+    }, d = Q(A, 200);
+    return A(), window.addEventListener("resize", d), () => {
       var o;
-      window.removeEventListener("resize", d), (o = d.kill) == null || o.call(d), i && i.kill(), t && (t.innerHTML = k, a.set(t, { y: 0 }));
+      window.removeEventListener("resize", d), (o = d.kill) == null || o.call(d), i && i.kill(), t && (t.innerHTML = k, n.set(t, { y: 0 }));
     };
-  }, [C]), /* @__PURE__ */ s("section", { ref: u, className: r.root, children: [
+  }, [E]), /* @__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: [
@@ -135,7 +135,7 @@ const pe = ({
             title: x
           }
         ) }),
-        /* @__PURE__ */ e("div", { ref: c, className: r.scrollableLabelsWrapper, children: /* @__PURE__ */ e("ul", { className: r.scrollableLabels, children: C.map((n, p) => /* @__PURE__ */ e("li", { className: r.scrollableLabel, children: /* @__PURE__ */ e(h, { defaultVariant: "displayXl", mobileVariant: "displayMd", as: "span", children: n }) }, p)) }) }),
+        /* @__PURE__ */ e("div", { ref: c, className: r.scrollableLabelsWrapper, children: /* @__PURE__ */ e("ul", { className: r.scrollableLabels, children: E.map((a, p) => /* @__PURE__ */ e("li", { className: r.scrollableLabel, children: /* @__PURE__ */ e(h, { defaultVariant: "displayXl", mobileVariant: "displayMd", as: "span", children: a }) }, p)) }) }),
         /* @__PURE__ */ e("div", { ref: b, children: /* @__PURE__ */ e(
           w,
           {
@@ -147,7 +147,7 @@ const pe = ({
           }
         ) })
       ] }) }),
-      /* @__PURE__ */ e("div", { ref: E, className: r.subtitleWrapper, children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { ref: V, className: r.subtitleWrapper, children: /* @__PURE__ */ e(
         w,
         {
           defaultVariant: "labelMd",
@@ -157,7 +157,7 @@ const pe = ({
           title: q
         }
       ) }),
-      /* @__PURE__ */ e("div", { ref: V, className: r.arrowWrapper, children: /* @__PURE__ */ s(
+      /* @__PURE__ */ e("div", { ref: C, className: r.arrowWrapper, children: /* @__PURE__ */ s(
         h,
         {
           defaultVariant: "labelMd",
@@ -184,7 +184,7 @@ const pe = ({
           }
         ) }),
         /* @__PURE__ */ e("div", { ref: v, className: r.buttonWrapper, children: m && /* @__PURE__ */ e(
-          J,
+          Z,
           {
             as: m ? "a" : "button",
             href: m,

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

@@ -0,0 +1,227 @@
+.root {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(100vh - var(--navigation-height));
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.backgroundImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center top;
+  background-repeat: no-repeat;
+  z-index: 0;
+}
+
+.backgroundImage::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.container {
+  position: relative;
+  z-index: 2;
+  padding: var(--spacing-24);
+  max-width: var(--content-max-width);
+  width: 100%;
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: auto 1fr auto auto;
+  row-gap: var(--spacing-52);
+}
+
+.leftContent {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-top: var(--spacing-80);
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-column-end: -1;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.arrowWrapper {
+  grid-row-start: 4;
+}
+
+.arrow {
+  color: white;
+  margin-top: var(--spacing-4);
+  display: flex;
+  align-items: center;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.rightContent {
+  grid-column-start: 2;
+  grid-column-end: -1;
+  grid-row-start: 4;
+  gap: var(--spacing-16);
+  padding-bottom: var(--spacing-80);
+}
+
+.subtitleWrapper {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 3;
+  width: 100%;
+}
+
+.subtitle {
+  width: 100%;
+  margin-left: auto;
+  p {
+    width: 100%;
+    font-family: var(--font-decorative);
+    color: var(--color-white);
+    letter-spacing: var(--letter-spacing-xxl);
+    text-transform: uppercase;
+  }
+}
+
+.title, .scrollableLabels {
+  p, li span {
+    color: var(--color-white);
+    line-height: var(--line-height-xxs);
+    letter-spacing: var(--letter-spacing-negative-xl);
+  }
+  li {
+    padding-block: var(--spacing-8);
+  }
+}
+
+.scrollableLabelsWrapper {
+  overflow-x: auto;
+  overflow-y: hidden;
+  width: 100%;
+}
+
+.scrollableLabels {
+  li span {
+    color: var(--color-solar-200);
+  }
+}
+
+.title .scrollableLabels {
+  color: var(--color-solar-200);
+}
+
+.descriptionWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-20);
+}
+
+.buttonWrapper {
+  width: max-content;
+  align-self: flex-start;
+}
+
+.description {
+  color: white;
+  opacity: 0.9;
+  line-height: var(--line-height-xl);
+  font-weight: var(--font-weight-light);
+}
+
+.hsaEligible {
+  display: flex;
+  align-items: start;
+  gap: var(--spacing-8);
+}
+
+.checkIcon {
+  color: var(--color-white);
+  width: 20px;
+  height: 20px;
+}
+
+.hsaText {
+  color: white;
+  opacity: 0.9;
+  font-weight: var(--font-weight-light);
+}
+
+/* Tablet styles */
+@media (width <= 980px) {
+  .container {
+    padding: var(--spacing-64) var(--spacing-18);
+  }
+
+  .descriptionWrapper {
+    margin-top: 0;
+  }
+}
+
+/* Desktop styles */
+@media (width > 980px) {
+  .container {
+    padding: var(--spacing-120) var(--spacing-80);
+    grid-template-columns: 3fr auto 1fr;
+    grid-template-rows: 1fr repeat(3, max-content) 1fr;
+    column-gap: var(--spacing-28);
+    row-gap: 0;
+    min-height: 100vh;
+  }
+
+  .subtitleWrapper {
+    grid-column-start: 2;
+    grid-column-end: 4;
+    grid-row-start: 1;
+  }
+
+  .leftContent {
+    grid-row-start: 2;
+    grid-row-end: 5;
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding-top: 0;
+  }
+
+  .arrowWrapper {
+    grid-column-start: 2;
+    grid-row-start: 3;
+  }
+
+  .rightContent {
+    grid-row-start: 3;
+    grid-row-end: 4;
+    grid-column-start: 3;
+    padding-bottom: 0;
+  }
+
+  .descriptionWrapper {
+    max-width: 100%;
+  }
+}

package/dist/modules/Callback/Callback.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("../../components/Callback/Callback.cjs.js"),h=require("../../components/Icon/Icon.cjs.js"),c=require("../../components/Icon/constants.cjs.js"),_=require("../../components/Typography/Typography.cjs.js"),t=require("../../types/analytics/analytics.cjs.js"),n=require("./callback.module.css.cjs.js"),b=[{icon:c.EIconName.HEART,description:"No hidden fees"},{icon:c.EIconName.PROTOCOLS,description:"Personalized Protocols"},{icon:c.EIconName.PACKAGE,description:"Free Shipping"},{icon:c.EIconName.MESSAGE,description:"Doctor & Clinical Team"}];function f({title:i,zenpatientId:s,description:l,price:r,signupUrl:a,image:d,size:p,shape:u,trackingLocation:m}){const y={event:t.EAnalyticsEvent.ctaClicked,location:m||"not_set",type:t.EAnalyticsEventType.interaction,component:"CallbackModule",payload:{productId:s,ctaLink:a}};return e.jsx("section",{className:n.default.root,children:e.jsx("div",{className:n.default.container,children:e.jsxs("div",{className:n.default.content,children:[e.jsx(E.Callback,{title:i,description:l,price:r??"",image:d,button:{href:a,as:"a",analyticsProps:y},size:p,shape:u}),e.jsx("div",{className:n.default.icons,children:b.map(o=>e.jsxs("div",{className:n.default.icon,children:[e.jsx(h.Icon,{name:o.icon}),e.jsx(_.Typography,{defaultVariant:"labelXl",children:o.description})]},o.description))})]})})})}exports.CallbackModule=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("../../types/analytics/analytics.cjs.js"),e=require("../../src/modules/Callback/callback.module.css"),o=require("../../components/Icon/constants.cjs.js"),E=require("../../components/Callback/Callback.cjs.js"),h=require("../../components/Icon/Icon.cjs.js"),_=require("../../components/Typography/Typography.cjs.js"),b=[{icon:o.EIconName.HEART,description:"No hidden fees"},{icon:o.EIconName.PROTOCOLS,description:"Personalized Protocols"},{icon:o.EIconName.PACKAGE,description:"Free Shipping"},{icon:o.EIconName.MESSAGE,description:"Doctor & Clinical Team"}];function j({title:i,zenpatientId:l,description:r,price:c,signupUrl:a,image:d,size:p,shape:u,trackingLocation:y}){const m={event:s.EAnalyticsEvent.ctaClicked,location:y||"not_set",type:s.EAnalyticsEventType.interaction,component:"CallbackModule",payload:{productId:l,ctaLink:a}};return n.jsx("section",{className:e.root,children:n.jsx("div",{className:e.container,children:n.jsxs("div",{className:e.content,children:[n.jsx(E.Callback,{title:i,description:r,price:c!=null?c:"",image:d,button:{href:a,as:"a",analyticsProps:m},size:p,shape:u}),n.jsx("div",{className:e.icons,children:b.map(t=>n.jsxs("div",{className:e.icon,children:[n.jsx(h.Icon,{name:t.icon}),n.jsx(_.Typography,{defaultVariant:"labelXl",children:t.description})]},t.description))})]})})})}exports.CallbackModule=j;

package/dist/modules/Callback/Callback.es.js

@@ -1,70 +1,70 @@
-import { jsx as o, jsxs as t } from "react/jsx-runtime";
-import { Callback as h } from "../../components/Callback/Callback.es.js";
-import { Icon as y } from "../../components/Icon/Icon.es.js";
-import { EIconName as n } from "../../components/Icon/constants.es.js";
-import { Typography as v } from "../../components/Typography/Typography.es.js";
-import { EAnalyticsEventType as C, EAnalyticsEvent as N } from "../../types/analytics/analytics.es.js";
-import i from "./callback.module.css.es.js";
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { EAnalyticsEventType as h, EAnalyticsEvent as y } from "../../types/analytics/analytics.es.js";
+import n from "../../modules/Callback/callback.module.css";
+import { EIconName as i } from "../../components/Icon/constants.es.js";
+import { Callback as v } from "../../components/Callback/Callback.es.js";
+import { Icon as C } from "../../components/Icon/Icon.es.js";
+import { Typography as N } from "../../components/Typography/Typography.es.js";
 const u = [
   {
-    icon: n.HEART,
+    icon: i.HEART,
     description: "No hidden fees"
   },
   {
-    icon: n.PROTOCOLS,
+    icon: i.PROTOCOLS,
     description: "Personalized Protocols"
   },
   {
-    icon: n.PACKAGE,
+    icon: i.PACKAGE,
     description: "Free Shipping"
   },
   {
-    icon: n.MESSAGE,
+    icon: i.MESSAGE,
     description: "Doctor & Clinical Team"
   }
 ];
 function M({
-  title: a,
-  zenpatientId: r,
-  description: l,
-  price: s,
+  title: r,
+  zenpatientId: l,
+  description: s,
+  price: c,
   signupUrl: e,
   image: d,
-  size: p,
-  shape: m,
+  size: m,
+  shape: p,
   trackingLocation: f
 }) {
   const E = {
-    event: N.ctaClicked,
+    event: y.ctaClicked,
     location: f || "not_set",
-    type: C.interaction,
+    type: h.interaction,
     component: "CallbackModule",
     payload: {
-      productId: r,
+      productId: l,
       ctaLink: e
     }
   };
-  return /* @__PURE__ */ o("section", { className: i.root, children: /* @__PURE__ */ o("div", { className: i.container, children: /* @__PURE__ */ t("div", { className: i.content, children: [
+  return /* @__PURE__ */ o("section", { className: n.root, children: /* @__PURE__ */ o("div", { className: n.container, children: /* @__PURE__ */ a("div", { className: n.content, children: [
     /* @__PURE__ */ o(
-      h,
+      v,
       {
-        title: a,
-        description: l,
-        price: s ?? "",
+        title: r,
+        description: s,
+        price: c != null ? c : "",
         image: d,
         button: {
           href: e,
           as: "a",
           analyticsProps: E
         },
-        size: p,
-        shape: m
+        size: m,
+        shape: p
       }
     ),
-    /* @__PURE__ */ o("div", { className: i.icons, children: u.map((c) => /* @__PURE__ */ t("div", { className: i.icon, children: [
-      /* @__PURE__ */ o(y, { name: c.icon }),
-      /* @__PURE__ */ o(v, { defaultVariant: "labelXl", children: c.description })
-    ] }, c.description)) })
+    /* @__PURE__ */ o("div", { className: n.icons, children: u.map((t) => /* @__PURE__ */ a("div", { className: n.icon, children: [
+      /* @__PURE__ */ o(C, { name: t.icon }),
+      /* @__PURE__ */ o(N, { defaultVariant: "labelXl", children: t.description })
+    ] }, t.description)) })
   ] }) }) });
 }
 export {

package/dist/modules/Callback/callback.module.css

@@ -0,0 +1,69 @@
+.root {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    width: 100%;
+    max-width: var(--content-max-width);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 64px 20px 120px 20px;
+}
+
+.content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    max-width: 1080px;
+    gap: 32px;
+}
+
+.icons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    gap: 12px;
+}
+
+.icon {
+    align-items: center;
+    display: flex;
+    gap: 12px;
+}
+
+@media (width <= 1200px) {
+    .container {
+        padding: 64px 20px;
+    }
+    .icon {
+        width: calc(50% - 6px);
+        justify-content: center;
+    }
+}
+
+@media (width <= 1000px) {
+    .icon {
+        justify-content: flex-start;
+    }
+}
+
+@media (width <= 768px) {
+    .container {
+        padding: 48px 24px;
+    }
+    .content {
+        gap: 24px;
+    }
+    .icons {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .icon {
+        width: 100%;
+        justify-content: flex-start;
+    }
+}

package/dist/modules/CircleHighlights/CircleHighlights.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../components/Typography/Typography.cjs.js"),a=require("./circleHighlights.module.css.cjs.js"),t=({highlights:s})=>e.jsx("div",{className:a.default.root,children:e.jsx("div",{className:a.default.wrapper,children:s.map((l,r)=>e.jsxs("div",{className:a.default.highlight,children:[e.jsx("div",{className:a.default.image,style:{backgroundImage:`url(${l.image})`},"aria-label":l.title}),e.jsxs("div",{className:a.default.content,children:[e.jsx(i.Typography,{as:"h3",defaultVariant:"headingLg",className:a.default.title,children:l.title}),e.jsx(i.Typography,{as:"p",defaultVariant:"bodyMd",className:a.default.description,children:l.description})]})]},r))})});exports.CircleHighlights=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../src/modules/CircleHighlights/circleHighlights.module.css"),i=require("../../components/Typography/Typography.cjs.js"),t=({highlights:r})=>e.jsx("div",{className:s.root,children:e.jsx("div",{className:s.wrapper,children:r.map((a,l)=>e.jsxs("div",{className:s.highlight,children:[e.jsx("div",{className:s.image,style:{backgroundImage:`url(${a.image})`},"aria-label":a.title}),e.jsxs("div",{className:s.content,children:[e.jsx(i.Typography,{as:"h3",defaultVariant:"headingLg",className:s.title,children:a.title}),e.jsx(i.Typography,{as:"p",defaultVariant:"bodyMd",className:s.description,children:a.description})]})]},l))})});exports.CircleHighlights=t;

package/dist/modules/CircleHighlights/CircleHighlights.es.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import a from "../../modules/CircleHighlights/circleHighlights.module.css";
 import { Typography as l } from "../../components/Typography/Typography.es.js";
-import a from "./circleHighlights.module.css.es.js";
 const o = ({ highlights: s }) => /* @__PURE__ */ e("div", { className: a.root, children: /* @__PURE__ */ e("div", { className: a.wrapper, children: s.map((i, t) => /* @__PURE__ */ r("div", { className: a.highlight, children: [
   /* @__PURE__ */ e(
     "div",