@zenpatient-org/healthspan-marketing-ui 0.2.14 → 0.2.16

package/dist/components/PriceDisplay/priceDisplay.module.css

@@ -43,12 +43,23 @@
         gap: 40px;
         flex-direction: row;
         align-items: flex-start;
+        padding-bottom: 1rem;
     }
 
     .container.double:first-child {
         border-right: none;
-        border-bottom: 1px solid var(--color-neutral-200);
         padding-right: 0;
+        position: relative;
+    }
+
+    .container.double:first-child::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: -1rem;
+        right: -1rem;
+        height: 1px;
+        background-color: var(--color-neutral-200);
     }
 }
 

package/dist/components/Quote/Quote.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../Typography/Typography.cjs.js"),t=require("../../src/components/Quote/Quote.module.css"),l=require("./const.cjs.js"),u=({prefix:a,color:s,quote:c,source:o,sourcePrefix:n})=>{var r;return e.jsxs("div",{className:t.quoteContainer,children:[e.jsxs("div",{className:t.quoteContent,children:[a&&s&&e.jsx("img",{src:(r=l.prefixSelection[a])==null?void 0:r[s],alt:`${a} icon`,className:t.quoteIcon}),e.jsx(i.Typography,{as:"p",defaultVariant:"preambleSm",mobileVariant:"bodyXl",className:t.quoteText,children:c})]}),o&&n&&e.jsxs(i.Typography,{as:"figcaption",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:t.quoteAuthor,children:[l.sourcePrefixSelection[n]," ",o]})]})};exports.Quote=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../Typography/Typography.cjs.js"),t=require("../../src/components/Quote/Quote.module.css"),l=require("./const.cjs.js"),u=({prefix:a,color:s,quote:c,source:o,sourcePrefix:n})=>{var r;return e.jsxs("div",{className:t.quoteContainer,children:[e.jsxs("div",{className:t.quoteContent,children:[a&&s&&e.jsx("img",{src:(r=l.prefixSelection[a])==null?void 0:r[s],alt:`${a} icon`,className:t.quoteIcon}),e.jsx(i.Typography,{as:"p",defaultVariant:"preambleSm",mobileVariant:"bodyXl",className:t.quoteText,children:c})]}),o&&n&&e.jsxs(i.Typography,{as:"figcaption",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,className:t.quoteAuthor,children:[l.sourcePrefixSelection[n]," ",o]})]})};exports.Quote=u;

package/dist/components/Quote/Quote.es.js

@@ -1,24 +1,24 @@
-import { jsxs as t, jsx as m } from "react/jsx-runtime";
-import { Typography as s } from "../Typography/Typography.es.js";
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { Typography as m } from "../Typography/Typography.es.js";
 import e from "../../components/Quote/Quote.module.css";
-import { prefixSelection as c, sourcePrefixSelection as d } from "./const.es.js";
+import { prefixSelection as c, sourcePrefixSelection as p } from "./const.es.js";
 const f = ({ prefix: a, color: o, quote: n, source: i, sourcePrefix: l }) => {
   var r;
   return /* @__PURE__ */ t("div", { className: e.quoteContainer, children: [
     /* @__PURE__ */ t("div", { className: e.quoteContent, children: [
-      a && o && /* @__PURE__ */ m("img", { src: (r = c[a]) == null ? void 0 : r[o], alt: `${a} icon`, className: e.quoteIcon }),
-      /* @__PURE__ */ m(s, { as: "p", defaultVariant: "preambleSm", mobileVariant: "bodyXl", className: e.quoteText, children: n })
+      a && o && /* @__PURE__ */ s("img", { src: (r = c[a]) == null ? void 0 : r[o], alt: `${a} icon`, className: e.quoteIcon }),
+      /* @__PURE__ */ s(m, { as: "p", defaultVariant: "preambleSm", mobileVariant: "bodyXl", className: e.quoteText, children: n })
     ] }),
     i && l && /* @__PURE__ */ t(
-      s,
+      m,
       {
         as: "figcaption",
-        defaultVariant: "labelMd",
-        mobileVariant: "labelSm",
+        defaultVariant: "labelSm",
+        mobileVariant: "labelXs",
         emphasis: !0,
         className: e.quoteAuthor,
         children: [
-          d[l],
+          p[l],
           " ",
           i
         ]

package/dist/modules/IndividualProductCard/components/Features/features.module.css

@@ -14,6 +14,10 @@
     color: var(--color-text-primary);
 }
 
+.feature:last-child {
+    border-bottom: none;
+}
+
 .header {
     width: 100%;
     display: flex;

package/dist/modules/IndividualProductCardV2/IndividualProductCardV2.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../types/analytics/analytics.cjs.js"),l=require("../../utils/cn/cn.cjs.js"),a=require("../../src/modules/IndividualProductCardV2/individualProductCardV2.module.css"),g=require("../../components/ImageGallery/ImageGallery.cjs.js"),d=require("../../components/RatingPreview/RatingPreview.cjs.js"),v=require("../../components/Quote/Quote.cjs.js"),s=require("../../components/Typography/Typography.cjs.js"),_=require("../IndividualProductCard/components/Features/Features.cjs.js"),P=require("../../components/PlainFeaturesGroup/PlainFeaturesGroup.cjs.js"),b=require("../../components/PriceDisplay/PriceDisplay.cjs.js"),q=require("../../components/Button/Button.cjs.js"),T=({zenpatientId:u,signupUrl:n,name:y,description:p,label:m,images:h,features:j,quote:t,priceDisplay:i,featuresGroup:r,ratingPreview:c})=>{const x={event:o.EAnalyticsEvent.ctaClicked,type:o.EAnalyticsEventType.interaction,component:"Pricing",payload:{ctaLabel:"GET STARTED",ctaLink:n,productId:u}};return e.jsx("section",{className:a.root,children:e.jsxs("div",{className:a.mainContainer,children:[e.jsxs("div",{className:a.leftColumn,children:[e.jsx(g.ImageGallery,{images:h,label:m}),e.jsx("div",{className:l.cn(a.ratingContainer,a.mobileOnly),children:e.jsx(d.RatingPreview,{...c})}),t&&e.jsx(v.Quote,{...t})]}),e.jsxs("div",{className:a.rightColumn,children:[e.jsxs("div",{className:a.header,children:[e.jsx(s.Typography,{as:"h1",defaultVariant:"displayXs",mobileVariant:"headingLg",children:y}),e.jsx(s.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:a.description,children:p})]}),e.jsx(_.Features,{features:j}),r&&e.jsx(P.PlainFeaturesGroup,{...r}),i&&e.jsx(b.PriceDisplay,{items:i}),e.jsx("div",{className:l.cn(a.ratingContainer,a.desktopOnly),children:e.jsx(d.RatingPreview,{...c})}),e.jsxs("div",{className:a.actions,children:[e.jsx(q.Button,{as:"a",variant:"primary",size:"lg",href:n,analyticsProps:x,children:"Get started"}),e.jsx(s.Typography,{as:"p",defaultVariant:"labelMd",className:a.hsaFsaText,children:"HSA/FSA Eligible"})]})]})]})})};exports.IndividualProductCardV2=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../types/analytics/analytics.cjs.js"),l=require("../../utils/cn/cn.cjs.js"),a=require("../../src/modules/IndividualProductCardV2/individualProductCardV2.module.css"),g=require("../../components/ImageGallery/ImageGallery.cjs.js"),d=require("../../components/RatingPreview/RatingPreview.cjs.js"),v=require("../../components/Quote/Quote.cjs.js"),s=require("../../components/Typography/Typography.cjs.js"),_=require("../IndividualProductCard/components/Features/Features.cjs.js"),P=require("../../components/PlainFeaturesGroup/PlainFeaturesGroup.cjs.js"),q=require("../../components/PriceDisplay/PriceDisplay.cjs.js"),b=require("../../components/Button/Button.cjs.js"),N=({zenpatientId:u,signupUrl:n,name:p,description:y,label:m,images:h,features:j,quote:t,priceDisplay:i,featuresGroup:r,ratingPreview:c})=>{const x={event:o.EAnalyticsEvent.ctaClicked,type:o.EAnalyticsEventType.interaction,component:"Pricing",payload:{ctaLabel:"GET STARTED",ctaLink:n,productId:u}};return e.jsx("section",{className:a.root,children:e.jsxs("div",{className:a.mainContainer,children:[e.jsxs("div",{className:a.leftColumn,children:[e.jsx(g.ImageGallery,{images:h,label:m}),e.jsx("div",{className:l.cn(a.ratingContainer,a.mobileOnly),children:e.jsx(d.RatingPreview,{...c})}),t&&e.jsx("div",{className:a.quoteWrapper,children:e.jsx(v.Quote,{...t})})]}),e.jsxs("div",{className:a.rightColumn,children:[e.jsxs("div",{className:a.header,children:[e.jsx(s.Typography,{as:"h1",defaultVariant:"displayXs",mobileVariant:"headingLg",children:p}),e.jsx(s.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:a.description,children:y})]}),e.jsx(_.Features,{features:j}),r&&e.jsx(P.PlainFeaturesGroup,{...r}),i&&e.jsx(q.PriceDisplay,{items:i}),e.jsx("div",{className:l.cn(a.ratingContainer,a.desktopOnly),children:e.jsx(d.RatingPreview,{...c})}),e.jsxs("div",{className:a.actions,children:[e.jsx(b.Button,{as:"a",variant:"primary",size:"lg",href:n,analyticsProps:x,children:"Get started"}),e.jsx(s.Typography,{as:"p",defaultVariant:"labelMd",className:a.hsaFsaText,children:"HSA/FSA Eligible"})]})]})]})})};exports.IndividualProductCardV2=N;

package/dist/modules/IndividualProductCardV2/IndividualProductCardV2.es.js

@@ -1,18 +1,18 @@
-import { jsx as a, jsxs as r } from "react/jsx-runtime";
+import { jsx as a, jsxs as e } from "react/jsx-runtime";
 import { EAnalyticsEventType as N, EAnalyticsEvent as b } from "../../types/analytics/analytics.es.js";
 import { cn as m } from "../../utils/cn/cn.es.js";
 import i from "../../modules/IndividualProductCardV2/individualProductCardV2.module.css";
 import { ImageGallery as g } from "../../components/ImageGallery/ImageGallery.es.js";
 import { RatingPreview as c } from "../../components/RatingPreview/RatingPreview.es.js";
 import { Quote as E } from "../../components/Quote/Quote.es.js";
-import { Typography as t } from "../../components/Typography/Typography.es.js";
+import { Typography as r } from "../../components/Typography/Typography.es.js";
 import { Features as C } from "../IndividualProductCard/components/Features/Features.es.js";
 import { PlainFeaturesGroup as A } from "../../components/PlainFeaturesGroup/PlainFeaturesGroup.es.js";
 import { PriceDisplay as T } from "../../components/PriceDisplay/PriceDisplay.es.js";
 import { Button as V } from "../../components/Button/Button.es.js";
 const z = ({
   zenpatientId: d,
-  signupUrl: e,
+  signupUrl: t,
   name: p,
   description: h,
   label: y,
@@ -29,21 +29,21 @@ const z = ({
     component: "Pricing",
     payload: {
       ctaLabel: "GET STARTED",
-      ctaLink: e,
+      ctaLink: t,
       productId: d
     }
   };
-  return /* @__PURE__ */ a("section", { className: i.root, children: /* @__PURE__ */ r("div", { className: i.mainContainer, children: [
-    /* @__PURE__ */ r("div", { className: i.leftColumn, children: [
+  return /* @__PURE__ */ a("section", { className: i.root, children: /* @__PURE__ */ e("div", { className: i.mainContainer, children: [
+    /* @__PURE__ */ e("div", { className: i.leftColumn, children: [
       /* @__PURE__ */ a(g, { images: f, label: y }),
       /* @__PURE__ */ a("div", { className: m(i.ratingContainer, i.mobileOnly), children: /* @__PURE__ */ a(c, { ...s }) }),
-      n && /* @__PURE__ */ a(E, { ...n })
+      n && /* @__PURE__ */ a("div", { className: i.quoteWrapper, children: /* @__PURE__ */ a(E, { ...n }) })
     ] }),
-    /* @__PURE__ */ r("div", { className: i.rightColumn, children: [
-      /* @__PURE__ */ r("div", { className: i.header, children: [
-        /* @__PURE__ */ a(t, { as: "h1", defaultVariant: "displayXs", mobileVariant: "headingLg", children: p }),
+    /* @__PURE__ */ e("div", { className: i.rightColumn, children: [
+      /* @__PURE__ */ e("div", { className: i.header, children: [
+        /* @__PURE__ */ a(r, { as: "h1", defaultVariant: "displayXs", mobileVariant: "headingLg", children: p }),
         /* @__PURE__ */ a(
-          t,
+          r,
           {
             as: "p",
             defaultVariant: "bodyMd",
@@ -57,19 +57,19 @@ const z = ({
       l && /* @__PURE__ */ a(A, { ...l }),
       o && /* @__PURE__ */ a(T, { items: o }),
       /* @__PURE__ */ a("div", { className: m(i.ratingContainer, i.desktopOnly), children: /* @__PURE__ */ a(c, { ...s }) }),
-      /* @__PURE__ */ r("div", { className: i.actions, children: [
+      /* @__PURE__ */ e("div", { className: i.actions, children: [
         /* @__PURE__ */ a(
           V,
           {
             as: "a",
             variant: "primary",
             size: "lg",
-            href: e,
+            href: t,
             analyticsProps: u,
             children: "Get started"
           }
         ),
-        /* @__PURE__ */ a(t, { as: "p", defaultVariant: "labelMd", className: i.hsaFsaText, children: "HSA/FSA Eligible" })
+        /* @__PURE__ */ a(r, { as: "p", defaultVariant: "labelMd", className: i.hsaFsaText, children: "HSA/FSA Eligible" })
       ] })
     ] })
   ] }) });

package/dist/modules/IndividualProductCardV2/individualProductCardV2.module.css

@@ -13,6 +13,7 @@
     flex-direction: column;
     gap: 3rem;
     overflow: hidden;
+    align-items: center;
 }
 
 .rightColumn {
@@ -21,6 +22,11 @@
     gap: 2rem;
 }
 
+.quoteWrapper {
+    width: 100%;
+    max-width: 435px;
+}
+
 .header {
     display: flex;
     flex-direction: column;
@@ -68,7 +74,7 @@
     text-align: center;
     padding: 1rem;
     width: 100%;
-    border-radius: var(--border-radius-md);
+    border-radius: var(--border-radius-xs);
 }
 
 @media (width <= 1024px) {
@@ -87,4 +93,7 @@
     .desktopOnly {
         display: none;
     }
+    .quoteWrapper {
+        max-width: 100%;
+    }
 }

package/dist/modules/ProgramsDetailsHero/programsDetailsHero.module.css

@@ -6,45 +6,43 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
+    background-color: var(--color-black);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .container {
     position: relative;
     display: flex;
-    justify-content: flex-end;
+    align-items: flex-end;
     width: 100%;
-    max-width: var(--content-max-width);
-    height: 100%;
+    height: 100vh;
+    min-height: 50vh;
 }
 
 .headline {
     position: relative;
-    display: flex;
+    display: grid;
     width: 100%;
-    min-height: 216px;
+    grid-template-columns: 1fr var(--border-width-sm) 1fr;
     justify-content: center;
-    align-items: flex-start;
-    margin-top: 564px;
     margin-bottom: 30px;
 }
 
 .infoContainer,
 .titleContainer {
     display: flex;
-    padding-top: 54px;
+    align-items: center;
+    padding: 46px;
     position: relative;
-    width: 50%;
     height: 100%;
     overflow: hidden;
 }
 
-.infoContainer {
-    padding-left: 46px;
-    padding-bottom: 46px;
-}
 
 .titleContainer {
     justify-content: flex-end;
+    align-items: flex-end;
     padding-right: 46px;
 }
 
@@ -81,16 +79,14 @@
 
 .title {
     color: var(--color-white);
-    text-align: center;
+    max-width: 14ch;
 }
 
 .midBorder {
     position: relative;
-    height: 148px;
-    margin-top: 38px;
+    margin-block: 38px;
     width: var(--border-width-sm);
     background: var(--border-color-alpha-white-20);
-    min-height: 1px;
 }
 
 .infoBox {
@@ -113,17 +109,21 @@
 
 @media screen and (width <= 768px) {
     .headline {
-        flex-direction: column;
-        margin-top: 372px;
-        margin-bottom: 16px;
         height: 100%;
-        max-height: none;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr var(--border-width-sm) 1fr;
+        align-items: end;
+        height: fit-content;
     }
 
     .infoContainer,
     .titleContainer {
+        max-height: fit-content;
         padding: 24px;
         width: 100%;
+    }
+
+    .titleContainer {
         justify-content: flex-start;
     }
 
@@ -151,3 +151,10 @@
         width: 100%;
     }
 }
+
+
+@media screen and ( height > 1080px) {
+    .container {
+        height: 50vh;
+    }
+}

package/package.json

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