@zenpatient-org/healthspan-marketing-ui 0.2.18 → 0.2.20

package/dist/components/AnchorLinks/anchorLinks.module.css

@@ -40,3 +40,7 @@
 .active[data-type='other'] {
     background: linear-gradient(93deg, var(--color-bg-neutral-medium) 40.44%, #888 160.95%);
 }
+
+.active[data-type='lilac'] {
+    background: linear-gradient(93deg, var(--color-bg-fill-brand-lilac) 40.44%, var(--color-lilac-400) 160.95%);
+}

package/dist/components/AnchorLinks/types.d.ts

@@ -4,7 +4,8 @@ export declare enum EAnchorLinksTypes {
     ENERGY = "energy",
     SENESCENCE = "senescence",
     METABOLISM = "metabolism",
-    OTHER = "other"
+    OTHER = "other",
+    LILAC = "lilac"
 }
 export type TAnchorLink = {
     label: string;

package/dist/components/Label/label.module.css

@@ -45,6 +45,14 @@
     color: var(--color-text-primary-inverted);
 }
 
+.root[data-color='lilac'] {
+    background-color: var(--color-bg-fill-brand-lilac);
+}
+
+.root[data-color='lilac-gradient'] {
+    background: linear-gradient(90deg, var(--color-lilac-500) -2.53%, var(--color-lilac-400) 54.58%, var(--color-lilac-300) 94.38%, var(--color-lilac-200) 121.21%);
+}
+
 .labelSm {
     font-family: var(--font-default), sans-serif;
     line-height: var(--line-height-xs);

package/dist/components/Label/types.d.ts

@@ -1,5 +1,5 @@
 export type LabelSize = 'sm' | 'lg';
-export type LabelColor = 'black' | 'grey' | 'white' | 'solar' | 'indigo' | 'orchre' | 'alpha-white';
+export type LabelColor = 'black' | 'grey' | 'white' | 'solar' | 'indigo' | 'orchre' | 'alpha-white' | 'lilac' | 'lilac-gradient';
 export type LabelProps = {
     children: string;
     color: LabelColor;

package/dist/components/TypeBadge/TypeBadge.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("../../assets/svg/badge-icon.svg.cjs.js"),t=require("../../src/components/TypeBadge/typeBadge.module.css");var n=(e=>(e.SENESCENCE="senescence",e.SUPPLEMENTS="supplements",e.OUTLINE="outline",e.ENERGY="energy",e.METABOLISM="metabolism",e.LABS="labs",e))(n||{});const r=({type:e="senescence"})=>s.jsx("div",{className:t.typeBadge,"data-type":e,children:s.jsx(c.default,{className:t.badgeIcon})});exports.ETypeBadge=n;exports.TypeBadge=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("../../assets/svg/badge-icon.svg.cjs.js"),t=require("../../src/components/TypeBadge/typeBadge.module.css");var n=(e=>(e.SENESCENCE="senescence",e.SUPPLEMENTS="supplements",e.OUTLINE="outline",e.ENERGY="energy",e.METABOLISM="metabolism",e.LABS="labs",e.LILAC="lilac",e))(n||{});const r=({type:e="senescence"})=>s.jsx("div",{className:t.typeBadge,"data-type":e,children:s.jsx(c.default,{className:t.badgeIcon})});exports.ETypeBadge=n;exports.TypeBadge=r;

package/dist/components/TypeBadge/TypeBadge.d.ts

@@ -4,7 +4,8 @@ export declare enum ETypeBadge {
     OUTLINE = "outline",
     ENERGY = "energy",
     METABOLISM = "metabolism",
-    LABS = "labs"
+    LABS = "labs",
+    LILAC = "lilac"
 }
 export type TypeBadgeProps = {
     type?: ETypeBadge;

package/dist/components/TypeBadge/TypeBadge.es.js

@@ -1,12 +1,12 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import n from "../../assets/svg/badge-icon.svg.es.js";
 import t from "../../components/TypeBadge/typeBadge.module.css";
-var o = /* @__PURE__ */ ((e) => (e.SENESCENCE = "senescence", e.SUPPLEMENTS = "supplements", e.OUTLINE = "outline", e.ENERGY = "energy", e.METABOLISM = "metabolism", e.LABS = "labs", e))(o || {});
-const a = ({
-  type: e = "senescence"
+var o = /* @__PURE__ */ ((s) => (s.SENESCENCE = "senescence", s.SUPPLEMENTS = "supplements", s.OUTLINE = "outline", s.ENERGY = "energy", s.METABOLISM = "metabolism", s.LABS = "labs", s.LILAC = "lilac", s))(o || {});
+const l = ({
+  type: s = "senescence"
   /* SENESCENCE */
-}) => /* @__PURE__ */ s("div", { className: t.typeBadge, "data-type": e, children: /* @__PURE__ */ s(n, { className: t.badgeIcon }) });
+}) => /* @__PURE__ */ e("div", { className: t.typeBadge, "data-type": s, children: /* @__PURE__ */ e(n, { className: t.badgeIcon }) });
 export {
   o as ETypeBadge,
-  a as TypeBadge
+  l as TypeBadge
 };

package/dist/components/TypeBadge/typeBadge.module.css

@@ -35,6 +35,10 @@
     background-color: var(--color-sage-200);
 }
 
+.typeBadge[data-type='lilac'] {
+    background-color: var(--color-lilac-300);
+}
+
 .badgeIcon {
     fill: var(--color-bg-base-dark);
 }

package/dist/modules/HomepageHeroV2/HomepageHeroV2.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../pageComponents/HomepageHero/components/MiddleCarousel/MiddleCarousel.cjs.js"),o=require("../../components/Button/Button.cjs.js"),s=require("../../src/modules/HomepageHeroV2/homepageHeroV2.module.css"),l=require("../../components/Icon/Icon.cjs.js"),d=require("../../components/Icon/constants.cjs.js"),n=require("../../components/Typography/Typography.cjs.js");function m({title:t,description:i,button:r,buttonInverted:a}){return e.jsx("section",{className:s.root,"data-type":"hero",children:e.jsxs("div",{className:s.container,children:[e.jsxs("div",{className:s.textContent,children:[e.jsxs("div",{className:s.hsaContainer,children:[e.jsx(l.Icon,{name:d.EIconName.CIRCLE_CHECK,className:s.checkIcon}),e.jsx(n.Typography,{className:s.hsaText,as:"p",defaultVariant:"bodySm",children:"HSA/FSA Eligible"})]}),e.jsx(n.Typography,{className:s.title,as:"h2",defaultVariant:"displayXs",mobileVariant:"headingLg",children:t}),e.jsx(n.Typography,{className:s.description,as:"p",defaultVariant:"bodySm",mobileVariant:"bodyXs",children:i}),e.jsxs("div",{className:s.buttonContainer,children:[e.jsx(o.Button,{as:"a",href:r.link,variant:"secondary",size:"md",children:r.text}),a&&e.jsx(o.Button,{as:"a",href:a.link,variant:"muted-invert",size:"md",children:a.text})]})]}),e.jsx("div",{className:s.carouselArea,children:e.jsx(c.MiddleCarousel,{})})]})})}exports.HomepageHeroV2=m;

package/dist/modules/HomepageHeroV2/HomepageHeroV2.d.ts

@@ -0,0 +1,13 @@
+export type HomepageHeroV2Props = {
+    title: string;
+    description: string;
+    button: {
+        text: string;
+        link: string;
+    };
+    buttonInverted?: {
+        text: string;
+        link: string;
+    };
+};
+export declare function HomepageHeroV2({ title, description, button, buttonInverted }: HomepageHeroV2Props): import("react/jsx-runtime").JSX.Element;

package/dist/modules/HomepageHeroV2/HomepageHeroV2.es.js

@@ -0,0 +1,27 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { MiddleCarousel as m } from "../../pageComponents/HomepageHero/components/MiddleCarousel/MiddleCarousel.es.js";
+import { Button as t } from "../../components/Button/Button.es.js";
+import a from "../../modules/HomepageHeroV2/homepageHeroV2.module.css";
+import { Icon as c } from "../../components/Icon/Icon.es.js";
+import { EIconName as d } from "../../components/Icon/constants.es.js";
+import { Typography as s } from "../../components/Typography/Typography.es.js";
+function x({ title: n, description: l, button: o, buttonInverted: r }) {
+  return /* @__PURE__ */ e("section", { className: a.root, "data-type": "hero", children: /* @__PURE__ */ i("div", { className: a.container, children: [
+    /* @__PURE__ */ i("div", { className: a.textContent, children: [
+      /* @__PURE__ */ i("div", { className: a.hsaContainer, children: [
+        /* @__PURE__ */ e(c, { name: d.CIRCLE_CHECK, className: a.checkIcon }),
+        /* @__PURE__ */ e(s, { className: a.hsaText, as: "p", defaultVariant: "bodySm", children: "HSA/FSA Eligible" })
+      ] }),
+      /* @__PURE__ */ e(s, { className: a.title, as: "h2", defaultVariant: "displayXs", mobileVariant: "headingLg", children: n }),
+      /* @__PURE__ */ e(s, { className: a.description, as: "p", defaultVariant: "bodySm", mobileVariant: "bodyXs", children: l }),
+      /* @__PURE__ */ i("div", { className: a.buttonContainer, children: [
+        /* @__PURE__ */ e(t, { as: "a", href: o.link, variant: "secondary", size: "md", children: o.text }),
+        r && /* @__PURE__ */ e(t, { as: "a", href: r.link, variant: "muted-invert", size: "md", children: r.text })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: a.carouselArea, children: /* @__PURE__ */ e(m, {}) })
+  ] }) });
+}
+export {
+  x as HomepageHeroV2
+};

package/dist/modules/HomepageHeroV2/homepageHeroV2.module.css

@@ -0,0 +1,125 @@
+.root {
+    position: relative;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    padding: 0 32px;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    max-width: var(--content-max-width);
+    align-items: center;
+    border-radius: var(--border-radius-lg);
+    background-image: url('./assets/bg.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.textContent {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    color: var(--color-text-primary-inverted);
+    max-width: 480px;
+    margin-left: 88px;
+    margin-bottom: 196px;
+    margin-top: 196px;
+    justify-content: flex-start;
+}
+
+.hsaContainer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.checkIcon {
+    margin-top: -2px;
+    width: 20px;
+    height: 20px;
+}
+
+.buttonContainer {
+    display: flex;
+    gap: 12px;
+}
+
+.buttonContainer a {
+    width: fit-content;
+}
+
+.carouselArea {
+    display: flex;
+    position: absolute;
+    width: 360px;
+    height: 540px;
+    left: 50%;
+    transform: translateX(30px);
+    overflow: visible;
+}
+
+@media (width <= 1150px) {
+    .textContent {
+        max-width: 319px;
+        gap: 12px;
+        margin-top: 222px;
+        margin-bottom: 287px;
+        margin-left: 32px;
+    }
+
+    .title {
+        font-size: 32px;
+        line-height: 110%;
+        letter-spacing: -1.28px;
+    }
+
+    .description {
+        font-size: 14px;
+        letter-spacing: -0.28px;
+    }
+
+    .buttonContainer {
+        margin-top: 4px;
+    }
+}
+
+@media (width <= 868px) {
+    .root {
+        padding: 0 4px;
+    }
+
+    .container {
+        background-image: url('./assets/bgmobile.jpg');
+        align-items: center;
+        justify-content: center;
+    }
+
+    .textContent {
+        justify-content: center;
+        text-align: center;
+        margin: unset;
+        margin-top: 221px;
+        padding: 32px 24px;
+        max-width: 510px;
+    }
+
+    .hsaContainer {
+        justify-content: inherit;
+    }
+
+    .buttonContainer {
+        justify-content: inherit;
+    }
+
+    .carouselArea {
+        display: none;
+    }
+}

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

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

package/dist/modules/IndividualProductCard/components/PlanCard/PlanCard.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("../../../../utils/cn/cn.cjs.js"),n=require("../../../../utils/formatUnits/formatUnits.cjs.js"),t=require("../../../../src/modules/IndividualProductCard/components/PlanCard/planCard.module.css"),d=require("../../../../components/Label/Label.cjs.js"),m=require("../../../../components/RadioButton/RadioButton.cjs.js"),a=require("../../../../components/Typography/Typography.cjs.js"),o=require("../../../../components/Icon/Icon.cjs.js"),c=require("../../../../components/Icon/constants.cjs.js"),u=({plan:e,isActive:r,onSelect:l})=>s.jsxs("button",{className:i.cn(t.root,r&&t.active),onClick:()=>l(e.id),children:[e.featured&&s.jsx(d.Label,{color:"black",className:t.label,size:"sm",children:"Most popular"}),s.jsxs("div",{className:t.planContainer,children:[s.jsxs("div",{className:t.planInfo,children:[s.jsx(m.RadioButton,{checked:r}),s.jsxs("div",{className:t.planDetails,children:[s.jsx(a.Typography,{as:"h4",defaultVariant:"bodySm",emphasis:!0,align:"left",children:e.label}),!!e.savingsPercentage&&s.jsxs(a.Typography,{as:"p",defaultVariant:"labelXs",weight:"regular",className:t.savings,children:["Save ",e.savingsPercentage,"%"]})]})]}),s.jsxs("div",{className:t.priceDetails,children:[!!e.monthlyPrice&&s.jsxs(a.Typography,{as:"p",defaultVariant:"bodySm",weight:"regular",className:t.description,children:[n.formatUnits(e.monthlyPrice,"usd",0),"/mo"]}),s.jsxs("div",{className:i.cn(t.priceContainer),children:[e.price!==e.totalPrice&&s.jsx(a.Typography,{as:"p",defaultVariant:"labelXs",weight:"regular",className:t.totalPrice,children:n.formatUnits(e.price,"usd",0)}),s.jsx(a.Typography,{as:"p",defaultVariant:!e.monthlyPrice&&e.price===e.totalPrice?"bodySm":"labelXs",className:i.cn(t.price,{[t.description]:!e.monthlyPrice&&e.price===e.totalPrice}),children:n.formatUnits(e.totalPrice,"usd",0)})]})]})]}),!!e.duration&&e.duration!=="one-time"&&s.jsx("div",{className:i.cn(t.benefitsContainer,r&&t.benefitsActive),children:s.jsxs("div",{className:t.benefitsContent,children:[s.jsxs("div",{className:t.benefit,children:[s.jsx(o.Icon,{name:c.EIconName.ARROW_RETURN,className:t.benefitIcon}),s.jsxs(a.Typography,{as:"p",defaultVariant:"bodyXs",children:["Delivered every"," ",e.durationAmount&&e.durationAmount>1?`${e.durationAmount} months`:"month"]})]}),s.jsxs("div",{className:t.benefit,children:[s.jsx(o.Icon,{name:c.EIconName.CALENDAR,className:t.benefitIcon}),s.jsx(a.Typography,{as:"p",defaultVariant:"bodyXs",children:"Modify or cancel anytime"})]})]})})]});exports.PlanCard=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("../../../../utils/cn/cn.cjs.js"),n=require("../../../../utils/formatUnits/formatUnits.cjs.js"),t=require("../../../../src/modules/IndividualProductCard/components/PlanCard/planCard.module.css"),d=require("../../../../components/Label/Label.cjs.js"),m=require("../../../../components/RadioButton/RadioButton.cjs.js"),a=require("../../../../components/Typography/Typography.cjs.js"),o=require("../../../../components/Icon/Icon.cjs.js"),c=require("../../../../components/Icon/constants.cjs.js"),u=({plan:e,isActive:i,onSelect:l})=>s.jsxs("button",{className:r.cn(t.root,i&&t.active),onClick:()=>l(e.id),children:[e.featured&&s.jsx(d.Label,{color:e.featuredLabelColor||"black",className:t.label,size:"sm",children:"Most popular"}),s.jsxs("div",{className:t.planContainer,children:[s.jsxs("div",{className:t.planInfo,children:[s.jsx(m.RadioButton,{checked:i}),s.jsxs("div",{className:t.planDetails,children:[s.jsx(a.Typography,{as:"h4",defaultVariant:"bodySm",emphasis:!0,align:"left",children:e.label}),!!e.savingsPercentage&&s.jsxs(a.Typography,{as:"p",defaultVariant:"labelXs",weight:"regular",className:t.savings,children:["Save ",e.savingsPercentage,"%"]})]})]}),s.jsxs("div",{className:t.priceDetails,children:[!!e.monthlyPrice&&s.jsxs(a.Typography,{as:"p",defaultVariant:"bodySm",weight:"regular",className:t.description,children:[n.formatUnits(e.monthlyPrice,"usd",0),"/mo"]}),s.jsxs("div",{className:r.cn(t.priceContainer),children:[e.price!==e.totalPrice&&s.jsx(a.Typography,{as:"p",defaultVariant:"labelXs",weight:"regular",className:t.totalPrice,children:n.formatUnits(e.price,"usd",0)}),s.jsx(a.Typography,{as:"p",defaultVariant:!e.monthlyPrice&&e.price===e.totalPrice?"bodySm":"labelXs",className:r.cn(t.price,{[t.description]:!e.monthlyPrice&&e.price===e.totalPrice}),children:n.formatUnits(e.totalPrice,"usd",0)})]})]})]}),!!e.duration&&e.duration!=="one-time"&&s.jsx("div",{className:r.cn(t.benefitsContainer,i&&t.benefitsActive),children:s.jsxs("div",{className:t.benefitsContent,children:[s.jsxs("div",{className:t.benefit,children:[s.jsx(o.Icon,{name:c.EIconName.ARROW_RETURN,className:t.benefitIcon}),s.jsxs(a.Typography,{as:"p",defaultVariant:"bodyXs",children:["Delivered every"," ",e.durationAmount&&e.durationAmount>1?`${e.durationAmount} months`:"month"]})]}),s.jsxs("div",{className:t.benefit,children:[s.jsx(o.Icon,{name:c.EIconName.CALENDAR,className:t.benefitIcon}),s.jsx(a.Typography,{as:"p",defaultVariant:"bodyXs",children:"Modify or cancel anytime"})]})]})})]});exports.PlanCard=u;

package/dist/modules/IndividualProductCard/components/PlanCard/PlanCard.es.js

@@ -9,7 +9,7 @@ import { Typography as t } from "../../../../components/Typography/Typography.es
 import { Icon as n } from "../../../../components/Icon/Icon.es.js";
 import { EIconName as l } from "../../../../components/Icon/constants.es.js";
 const C = ({ plan: e, isActive: o, onSelect: d }) => /* @__PURE__ */ r("button", { className: s(i.root, o && i.active), onClick: () => d(e.id), children: [
-  e.featured && /* @__PURE__ */ a(m, { color: "black", className: i.label, size: "sm", children: "Most popular" }),
+  e.featured && /* @__PURE__ */ a(m, { color: e.featuredLabelColor || "black", className: i.label, size: "sm", children: "Most popular" }),
   /* @__PURE__ */ r("div", { className: i.planContainer, children: [
     /* @__PURE__ */ r("div", { className: i.planInfo, children: [
       /* @__PURE__ */ a(h, { checked: o }),

package/dist/modules/IndividualProductCard/types.d.ts

@@ -1,4 +1,5 @@
 import { ETypeBadge } from '../../components/TypeBadge';
+import { LabelColor } from '../../components/Label';
 
 export type TProductFeature = {
     label: string;
@@ -16,4 +17,5 @@ export type TProductPlan = {
     duration?: 'one-time' | 'day' | 'month' | 'year';
     durationAmount?: number;
     featured?: boolean;
+    featuredLabelColor?: LabelColor;
 };

package/dist/styles/core.css

@@ -1 +1 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--color-black: #000000;--color-white: #ffffff;--color-midnight-50: #f1f0f4;--color-midnight-100: #e3e1ea;--color-midnight-200: #aaa6bf;--color-midnight-300: #5b5676;--color-midnight-400: #2e2b3b;--color-midnight-500: #111016;--color-navy-50: #e9f5fc;--color-navy-100: #d2eaf9;--color-navy-200: #79c0ec;--color-navy-300: #1a78b2;--color-navy-400: #0d3c59;--color-navy-500: #092a3e;--color-copper-50: #f8f1ec;--color-copper-100: #f1e3da;--color-copper-200: #d5ac90;--color-copper-300: #955d37;--color-copper-400: #835231;--color-copper-500: #4a2e1c;--color-orchre-50: #fff5e6;--color-orchre-100: #feeacd;--color-orchre-200: #fcc169;--color-orchre-300: #fba626;--color-orchre-400: #c87a04;--color-orchre-500: #643d02;--color-indigo-50: #eaf2fa;--color-indigo-100: #cadff3;--color-indigo-200: #81b1e2;--color-indigo-300: #5999d9;--color-indigo-400: #2666a6;--color-indigo-500: #133353;--color-sage-50: #f1f8ed;--color-sage-100: #e3f1da;--color-sage-200: #a5d088;--color-sage-300: #90c56d;--color-sage-400: #5d923a;--color-sage-500: #2f491d;--color-solar-50: #fffce6;--color-solar-100: #fffacc;--color-solar-200: #fef38e;--color-solar-300: #feef67;--color-solar-400: #cab602;--color-solar-500: #655b01;--color-ivory-50: #fbf3e9;--color-ivory-100: #fbf1e6;--color-ivory-200: #f1cda7;--color-ivory-300: #e39b4f;--color-ivory-400: #b0681c;--color-ivory-500: #58340e;--color-neutral-100: #f7f7f7;--color-neutral-200: #e5e5e5;--color-neutral-300: #adadad;--color-neutral-400: #888888;--color-neutral-500: #676767;--color-neutral-900: #1a1a1a;--color-urgent-red-100: #ffe2e1;--color-urgent-red-200: #ffcabe;--color-urgent-red-300: #ff5850;--color-urgent-red-400: #e4271d;--color-urgent-red-500: #841d18;--color-calm-green-100: #e1f7e6;--color-calm-green-200: #beecc8;--color-calm-green-300: #56d391;--color-calm-green-400: #0d9051;--color-calm-green-500: #084b2e;--color-powder-blue-100: #deecfa;--color-powder-blue-200: #c4e0f8;--color-powder-blue-300: #5a9bea;--color-powder-blue-400: #3375dc;--color-powder-blue-500: #264582;--color-heal-yellow-100: #fff8c8;--color-heal-yellow-200: #ffec88;--color-heal-yellow-300: #f6c64f;--color-heal-yellow-400: #eeab04;--color-heal-yellow-500: #733b10;--color-cell-pink-100: #fee5f1;--color-cell-pink-200: #fed7ea;--color-cell-pink-300: #ff81b8;--color-cell-pink-400: #eb1664;--color-cell-pink-500: #8d0e37;--color-bg-base-light: var(--color-white);--color-bg-base-dark: var(--color-black);--color-bg-neutral-light: var(--color-neutral-100);--color-bg-neutral-medium: var(--color-neutral-200);--color-bg-success: var(--color-calm-green-100);--color-bg-warning: var(--color-heal-yellow-100);--color-bg-danger: var(--color-urgent-red-300);--color-bg-info: var(--color-powder-blue-100);--color-bg-supportive: var(--color-cell-pink-100);--color-bg-success-fill: var(--color-calm-green-300);--color-bg-warning-fill: var(--color-heal-yellow-300);--color-bg-danger-fill: var(--color-urgent-red-300);--color-bg-info-fill: var(--color-powder-blue-300);--color-bg-supportive-fill: var(--color-cell-pink-300);--color-bg-fill-primary: var(--color-black);--color-bg-fill-brand-solar: var(--color-solar-200);--color-bg-fill-brand-indigo: var(--color-indigo-200);--color-bg-fill-brand-sage: var(--color-sage-200);--color-bg-fill-brand-orchre: var(--color-orchre-300);--color-bg-fill-brand-disabled: var(--color-neutral-400);--color-bg-fill-brand-inverse: var(--color-white);--color-bg-fill-neutral-dark: var(--color-neutral-900);--color-bg-fill-alpha-white-10: rgba(255, 255, 255, .1);--color-bg-fill-alpha-white-20: rgba(255, 255, 255, .2);--color-bg-fill-alpha-black-10: rgba(0, 0, 0, .1);--color-bg-fill-alpha-black-40: rgba(0, 0, 0, .4);--color-text-primary: var(--color-black);--color-text-primary-brand-solar: var(--color-solar-200);--color-text-primary-brand-indigo: var(--color-indigo-300);--color-text-primary-disabled: var(--color-neutral-300);--color-text-primary-inverted: var(--color-white);--color-text-secondary: var(--color-neutral-500);--color-text-secondary-hover: var(--color-neutral-400);--color-text-secondary-disabled: var(--color-neutral-300);--color-text-secondary-inverted: var(--color-neutral-200);--color-text-success-dark: var(--color-calm-green-500);--color-text-success-light: var(--color-calm-green-400);--color-text-success-hover: var(--color-calm-green-300);--color-text-success-disabled: var(--color-calm-green-200);--color-text-warning-dark: var(--color-heal-yellow-500);--color-text-warning-light: var(--color-heal-yellow-400);--color-text-warning-hover: var(--color-heal-yellow-300);--color-text-warning-disabled: var(--color-heal-yellow-200);--color-text-danger-dark: var(--color-urgent-red-500);--color-text-danger-light: var(--color-urgent-red-400);--color-text-danger-hover: var(--color-urgent-red-300);--color-text-danger-disabled: var(--color-urgent-red-200);--color-text-info-dark: var(--color-powder-blue-500);--color-text-info-light: var(--color-powder-blue-400);--color-text-info-hover: var(--color-powder-blue-300);--color-text-info-disabled: var(--color-powder-blue-200);--color-text-supportive-dark: var(--color-cell-pink-500);--color-text-supportive-light: var(--color-cell-pink-400);--color-text-supportive-hover: var(--color-cell-pink-300);--color-text-supportive-disabled: var(--color-cell-pink-200);--border-color-light: var(--color-neutral-200);--border-color-medium: var(--color-neutral-300);--border-color-dark: var(--color-black);--border-color-indigo: var(--color-indigo-200);--border-color-solar: var(--color-solar-200);--border-color-invert: var(--color-white);--border-color-alpha-white-10: rgba(255, 255, 255, .1);--border-color-alpha-white-20: rgba(255, 255, 255, .2);--border-color-alpha-white-50: rgba(255, 255, 255, .5);--border-color-alpha-black-10: rgba(0, 0, 0, .1);--border-color-alpha-black-20: rgba(0, 0, 0, .2);--border-color-success: var(--color-calm-green-300);--border-color-success-en: var(--color-calm-green-500);--border-color-warning: var(--color-heal-yellow-300);--border-color-warning-en: var(--color-heal-yellow-500);--border-color-danger: var(--color-urgent-red-300);--border-color-danger-en: var(--color-urgent-red-500);--border-color-info: var(--color-powder-blue-300);--border-color-info-en: var(--color-powder-blue-500);--border-color-decorative: var(--color-cell-pink-300);--border-color-decorative-en: var(--color-cell-pink-500)}:root{--font-default: "Suisse Intl", sans-serif;--font-decorative: "Soehne Mono", monospace;--font-size-xxs: 10px;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-xxl: 24px;--font-size-heading-xxs: 18px;--font-size-heading-xs: 20px;--font-size-heading-sm: 24px;--font-size-heading-md: 28px;--font-size-heading-lg: 32px;--font-size-heading-xl: 40px;--font-size-display-xs: 48px;--font-size-display-sm: 56px;--font-size-display-md: 64px;--font-size-display-lg: 96px;--font-size-display-xl: 120px;--line-height-xxs: .9;--line-height-xs: 1;--line-height-sm: 1.1;--line-height-md: 1.2;--line-height-lg: 1.35;--line-height-xl: 1.4;--line-height-xxl: 1.5;--letter-spacing-negative-xxl: -.06em;--letter-spacing-negative-xl: -.04em;--letter-spacing-negative-lg: -.03em;--letter-spacing-negative-md: -.02em;--letter-spacing-negative-sm: -.01em;--letter-spacing-null: 0;--letter-spacing-sm: .01em;--letter-spacing-md: .02em;--letter-spacing-lg: .03em;--letter-spacing-xl: .05em;--letter-spacing-xxl: .1em;--font-weight-extra-light: 200;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semi-bold: 600;--font-weight-bold: 700;--font-weight-extra-bold: 800}:root{--border-radius-none: 0;--border-radius-xxs: 4px;--border-radius-xs: 8px;--border-radius-sm: 12px;--border-radius-md: 16px;--border-radius-lg: 24px;--border-radius-xl: 40px;--border-radius-xxl: 48px;--border-radius-xxxl: 120px;--border-radius-full: 999px;--border-width-sm: 1px;--border-width-md: 2px}:root{--spacing-0: 0;--spacing-4: 4px;--spacing-8: 8px;--spacing-12: 12px;--spacing-14: 14px;--spacing-16: 16px;--spacing-18: 18px;--spacing-20: 20px;--spacing-24: 24px;--spacing-28: 28px;--spacing-32: 32px;--spacing-36: 36px;--spacing-40: 40px;--spacing-48: 48px;--spacing-52: 52px;--spacing-56: 56px;--spacing-64: 64px;--spacing-72: 72px;--spacing-80: 80px;--spacing-88: 88px;--spacing-96: 96px;--spacing-104: 104px;--spacing-112: 112px;--spacing-120: 120px;--spacing-180: 180px;--content-max-width: 1440px;--content-max-height: 1285px}html{scroll-behavior:smooth}
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--color-black: #000000;--color-white: #ffffff;--color-midnight-50: #f1f0f4;--color-midnight-100: #e3e1ea;--color-midnight-200: #aaa6bf;--color-midnight-300: #5b5676;--color-midnight-400: #2e2b3b;--color-midnight-500: #111016;--color-navy-50: #e9f5fc;--color-navy-100: #d2eaf9;--color-navy-200: #79c0ec;--color-navy-300: #1a78b2;--color-navy-400: #0d3c59;--color-navy-500: #092a3e;--color-copper-50: #f8f1ec;--color-copper-100: #f1e3da;--color-copper-200: #d5ac90;--color-copper-300: #955d37;--color-copper-400: #835231;--color-copper-500: #4a2e1c;--color-orchre-50: #fff5e6;--color-orchre-100: #feeacd;--color-orchre-200: #fcc169;--color-orchre-300: #fba626;--color-orchre-400: #c87a04;--color-orchre-500: #643d02;--color-indigo-50: #eaf2fa;--color-indigo-100: #cadff3;--color-indigo-200: #81b1e2;--color-indigo-300: #5999d9;--color-indigo-400: #2666a6;--color-indigo-500: #133353;--color-sage-50: #f1f8ed;--color-sage-100: #e3f1da;--color-sage-200: #a5d088;--color-sage-300: #90c56d;--color-sage-400: #5d923a;--color-sage-500: #2f491d;--color-solar-50: #fffce6;--color-solar-100: #fffacc;--color-solar-200: #fef38e;--color-solar-300: #feef67;--color-solar-400: #cab602;--color-solar-500: #655b01;--color-ivory-50: #fbf3e9;--color-ivory-100: #fbf1e6;--color-ivory-200: #f1cda7;--color-ivory-300: #e39b4f;--color-ivory-400: #b0681c;--color-ivory-500: #58340e;--color-lilac-50: #d6cefb;--color-lilac-100: #d6cefb;--color-lilac-200: #d6cefb;--color-lilac-300: #bdb0f8;--color-lilac-400: #625793;--color-lilac-500: #0a151c;--color-neutral-100: #f7f7f7;--color-neutral-200: #e5e5e5;--color-neutral-300: #adadad;--color-neutral-400: #888888;--color-neutral-500: #676767;--color-neutral-900: #1a1a1a;--color-urgent-red-100: #ffe2e1;--color-urgent-red-200: #ffcabe;--color-urgent-red-300: #ff5850;--color-urgent-red-400: #e4271d;--color-urgent-red-500: #841d18;--color-calm-green-100: #e1f7e6;--color-calm-green-200: #beecc8;--color-calm-green-300: #56d391;--color-calm-green-400: #0d9051;--color-calm-green-500: #084b2e;--color-powder-blue-100: #deecfa;--color-powder-blue-200: #c4e0f8;--color-powder-blue-300: #5a9bea;--color-powder-blue-400: #3375dc;--color-powder-blue-500: #264582;--color-heal-yellow-100: #fff8c8;--color-heal-yellow-200: #ffec88;--color-heal-yellow-300: #f6c64f;--color-heal-yellow-400: #eeab04;--color-heal-yellow-500: #733b10;--color-cell-pink-100: #fee5f1;--color-cell-pink-200: #fed7ea;--color-cell-pink-300: #ff81b8;--color-cell-pink-400: #eb1664;--color-cell-pink-500: #8d0e37;--color-bg-base-light: var(--color-white);--color-bg-base-dark: var(--color-black);--color-bg-neutral-light: var(--color-neutral-100);--color-bg-neutral-medium: var(--color-neutral-200);--color-bg-success: var(--color-calm-green-100);--color-bg-warning: var(--color-heal-yellow-100);--color-bg-danger: var(--color-urgent-red-300);--color-bg-info: var(--color-powder-blue-100);--color-bg-supportive: var(--color-cell-pink-100);--color-bg-success-fill: var(--color-calm-green-300);--color-bg-warning-fill: var(--color-heal-yellow-300);--color-bg-danger-fill: var(--color-urgent-red-300);--color-bg-info-fill: var(--color-powder-blue-300);--color-bg-supportive-fill: var(--color-cell-pink-300);--color-bg-fill-primary: var(--color-black);--color-bg-fill-brand-solar: var(--color-solar-200);--color-bg-fill-brand-indigo: var(--color-indigo-200);--color-bg-fill-brand-sage: var(--color-sage-200);--color-bg-fill-brand-orchre: var(--color-orchre-300);--color-bg-fill-brand-lilac: var(--color-lilac-300);--color-bg-fill-brand-disabled: var(--color-neutral-400);--color-bg-fill-brand-inverse: var(--color-white);--color-bg-fill-neutral-dark: var(--color-neutral-900);--color-bg-fill-alpha-white-10: rgba(255, 255, 255, .1);--color-bg-fill-alpha-white-20: rgba(255, 255, 255, .2);--color-bg-fill-alpha-black-10: rgba(0, 0, 0, .1);--color-bg-fill-alpha-black-40: rgba(0, 0, 0, .4);--color-text-primary: var(--color-black);--color-text-primary-brand-solar: var(--color-solar-200);--color-text-primary-brand-indigo: var(--color-indigo-300);--color-text-primary-brand-lilac: var(--color-lilac-300);--color-text-primary-disabled: var(--color-neutral-300);--color-text-primary-inverted: var(--color-white);--color-text-secondary: var(--color-neutral-500);--color-text-secondary-hover: var(--color-neutral-400);--color-text-secondary-disabled: var(--color-neutral-300);--color-text-secondary-inverted: var(--color-neutral-200);--color-text-success-dark: var(--color-calm-green-500);--color-text-success-light: var(--color-calm-green-400);--color-text-success-hover: var(--color-calm-green-300);--color-text-success-disabled: var(--color-calm-green-200);--color-text-warning-dark: var(--color-heal-yellow-500);--color-text-warning-light: var(--color-heal-yellow-400);--color-text-warning-hover: var(--color-heal-yellow-300);--color-text-warning-disabled: var(--color-heal-yellow-200);--color-text-danger-dark: var(--color-urgent-red-500);--color-text-danger-light: var(--color-urgent-red-400);--color-text-danger-hover: var(--color-urgent-red-300);--color-text-danger-disabled: var(--color-urgent-red-200);--color-text-info-dark: var(--color-powder-blue-500);--color-text-info-light: var(--color-powder-blue-400);--color-text-info-hover: var(--color-powder-blue-300);--color-text-info-disabled: var(--color-powder-blue-200);--color-text-supportive-dark: var(--color-cell-pink-500);--color-text-supportive-light: var(--color-cell-pink-400);--color-text-supportive-hover: var(--color-cell-pink-300);--color-text-supportive-disabled: var(--color-cell-pink-200);--border-color-light: var(--color-neutral-200);--border-color-medium: var(--color-neutral-300);--border-color-dark: var(--color-black);--border-color-indigo: var(--color-indigo-200);--border-color-solar: var(--color-solar-200);--border-color-lilac: var(--color-lilac-200);--border-color-invert: var(--color-white);--border-color-alpha-white-10: rgba(255, 255, 255, .1);--border-color-alpha-white-20: rgba(255, 255, 255, .2);--border-color-alpha-white-50: rgba(255, 255, 255, .5);--border-color-alpha-black-10: rgba(0, 0, 0, .1);--border-color-alpha-black-20: rgba(0, 0, 0, .2);--border-color-success: var(--color-calm-green-300);--border-color-success-en: var(--color-calm-green-500);--border-color-warning: var(--color-heal-yellow-300);--border-color-warning-en: var(--color-heal-yellow-500);--border-color-danger: var(--color-urgent-red-300);--border-color-danger-en: var(--color-urgent-red-500);--border-color-info: var(--color-powder-blue-300);--border-color-info-en: var(--color-powder-blue-500);--border-color-decorative: var(--color-cell-pink-300);--border-color-decorative-en: var(--color-cell-pink-500)}:root{--font-default: "Suisse Intl", sans-serif;--font-decorative: "Soehne Mono", monospace;--font-size-xxs: 10px;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-xxl: 24px;--font-size-heading-xxs: 18px;--font-size-heading-xs: 20px;--font-size-heading-sm: 24px;--font-size-heading-md: 28px;--font-size-heading-lg: 32px;--font-size-heading-xl: 40px;--font-size-display-xs: 48px;--font-size-display-sm: 56px;--font-size-display-md: 64px;--font-size-display-lg: 96px;--font-size-display-xl: 120px;--line-height-xxs: .9;--line-height-xs: 1;--line-height-sm: 1.1;--line-height-md: 1.2;--line-height-lg: 1.35;--line-height-xl: 1.4;--line-height-xxl: 1.5;--letter-spacing-negative-xxl: -.06em;--letter-spacing-negative-xl: -.04em;--letter-spacing-negative-lg: -.03em;--letter-spacing-negative-md: -.02em;--letter-spacing-negative-sm: -.01em;--letter-spacing-null: 0;--letter-spacing-sm: .01em;--letter-spacing-md: .02em;--letter-spacing-lg: .03em;--letter-spacing-xl: .05em;--letter-spacing-xxl: .1em;--font-weight-extra-light: 200;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semi-bold: 600;--font-weight-bold: 700;--font-weight-extra-bold: 800}:root{--border-radius-none: 0;--border-radius-xxs: 4px;--border-radius-xs: 8px;--border-radius-sm: 12px;--border-radius-md: 16px;--border-radius-lg: 24px;--border-radius-xl: 40px;--border-radius-xxl: 48px;--border-radius-xxxl: 120px;--border-radius-full: 999px;--border-width-sm: 1px;--border-width-md: 2px}:root{--spacing-0: 0;--spacing-4: 4px;--spacing-8: 8px;--spacing-12: 12px;--spacing-14: 14px;--spacing-16: 16px;--spacing-18: 18px;--spacing-20: 20px;--spacing-24: 24px;--spacing-28: 28px;--spacing-32: 32px;--spacing-36: 36px;--spacing-40: 40px;--spacing-48: 48px;--spacing-52: 52px;--spacing-56: 56px;--spacing-64: 64px;--spacing-72: 72px;--spacing-80: 80px;--spacing-88: 88px;--spacing-96: 96px;--spacing-104: 104px;--spacing-112: 112px;--spacing-120: 120px;--spacing-180: 180px;--content-max-width: 1440px;--content-max-height: 1285px}html{scroll-behavior:smooth}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.18",
+    "version": "0.2.20",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -595,6 +595,11 @@
             "import": "./dist/modules/ScrollingText/ScrollingText.es.js",
             "require": "./dist/modules/ScrollingText/ScrollingText.cjs.js"
         },
+        "./HomepageHeroV2": {
+            "types": "./dist/modules/HomepageHeroV2/HomepageHeroV2.d.ts",
+            "import": "./dist/modules/HomepageHeroV2/HomepageHeroV2.es.js",
+            "require": "./dist/modules/HomepageHeroV2/HomepageHeroV2.cjs.js"
+        },
         "./Bubbles": {
             "types": "./dist/pageComponents/Bubbles/Bubbles.d.ts",
             "import": "./dist/pageComponents/Bubbles/Bubbles.es.js",