@zenpatient-org/healthspan-marketing-ui 0.2.10 → 0.2.12

package/dist/components/PlainFeaturesGroup/PlainFeaturesGroup.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./assets/VectorLogo.svg.cjs.js"),r=require("../../src/components/PlainFeaturesGroup/plainFeaturesGroup.module.css"),n=require("../Typography/Typography.cjs.js"),c=({items:s})=>e.jsxs("div",{className:r.container,children:[e.jsx("div",{className:r.plainFeaturesGroup,children:s&&s.map((a,t)=>e.jsx("div",{className:r.feature,children:e.jsx(n.Typography,{className:r.featureText,defaultVariant:"bodyXs",children:a.text})},t))}),e.jsx(o.default,{className:r.logo})]});exports.PlainFeaturesGroup=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("./assets/VectorLogo.svg.cjs.js"),s=require("../../src/components/PlainFeaturesGroup/plainFeaturesGroup.module.css"),c=require("../Icon/Icon.cjs.js"),t=require("../Typography/Typography.cjs.js"),u=({items:a})=>e.jsxs("div",{className:s.container,children:[e.jsx("div",{className:s.plainFeaturesGroup,children:a&&a.map((r,o)=>e.jsxs("div",{className:s.feature,children:[r.icon&&e.jsx(c.Icon,{name:r.icon,className:s.featureIcon}),e.jsx(t.Typography,{className:s.featureText,defaultVariant:"bodyXs",children:r.text})]},o))}),e.jsx(n.default,{className:s.logo})]});exports.PlainFeaturesGroup=u;

package/dist/components/PlainFeaturesGroup/PlainFeaturesGroup.es.js

@@ -1,11 +1,15 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import i from "./assets/VectorLogo.svg.es.js";
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import c from "./assets/VectorLogo.svg.es.js";
 import r from "../../components/PlainFeaturesGroup/plainFeaturesGroup.module.css";
-import { Typography as l } from "../Typography/Typography.es.js";
-const d = ({ items: a }) => /* @__PURE__ */ t("div", { className: r.container, children: [
-  /* @__PURE__ */ e("div", { className: r.plainFeaturesGroup, children: a && a.map((o, s) => /* @__PURE__ */ e("div", { className: r.feature, children: /* @__PURE__ */ e(l, { className: r.featureText, defaultVariant: "bodyXs", children: o.text }) }, s)) }),
-  /* @__PURE__ */ e(i, { className: r.logo })
+import { Icon as n } from "../Icon/Icon.es.js";
+import { Typography as i } from "../Typography/Typography.es.js";
+const u = ({ items: o }) => /* @__PURE__ */ s("div", { className: r.container, children: [
+  /* @__PURE__ */ a("div", { className: r.plainFeaturesGroup, children: o && o.map((e, t) => /* @__PURE__ */ s("div", { className: r.feature, children: [
+    e.icon && /* @__PURE__ */ a(n, { name: e.icon, className: r.featureIcon }),
+    /* @__PURE__ */ a(i, { className: r.featureText, defaultVariant: "bodyXs", children: e.text })
+  ] }, t)) }),
+  /* @__PURE__ */ a(c, { className: r.logo })
 ] });
 export {
-  d as PlainFeaturesGroup
+  u as PlainFeaturesGroup
 };

package/dist/components/PlainFeaturesGroup/plainFeaturesGroup.module.css

@@ -20,7 +20,9 @@
     position: relative;
     height: 200px;
     width: 300px;
-    margin-bottom: -66px;
+    margin-top: -13px;
+    margin-right: -37px;
+    margin-bottom: -200px;
     flex-shrink: 0;
     z-index: 0;
     opacity: 0.6;
@@ -33,9 +35,10 @@
 }
 
 .featureIcon {
+    margin-top: -1px;
     color: var(--color-text-secondary);
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
 }
 
 .featureText {
@@ -44,7 +47,13 @@
 
 @media (width <= 1200px) {
     .logo {
-        margin-left: -47px;
+        margin-right: -180px;
+    }
+}
+
+@media (width <= 768px) {
+    .logo {
+        margin-right: -220px;
         margin-top: -30px;
     }
 }

package/dist/components/PriceDisplay/PriceDisplay.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),e=require("../../src/components/PriceDisplay/priceDisplay.module.css"),c=require("../../utils/cn/cn.cjs.js"),d=require("../../utils/periodView.cjs.js"),l=({items:i})=>a.jsx("div",{className:e.root,children:i.map((r,n)=>a.jsxs("div",{className:c.cn(e.container,r.display==="double"?e.double:e.single),children:[a.jsx(s.Typography,{as:"p",defaultVariant:r.display==="double"?"bodySm":"bodyLg",className:e.description,children:r.description}),a.jsxs("div",{className:e.priceWrapper,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.prefix,children:r.prefix}),a.jsxs("div",{className:e.priceAmount,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingLg",className:e.price,children:(r.price/100).toFixed(0)}),a.jsx(s.Typography,{as:"p",defaultVariant:"headingXs",mobileVariant:"headingXxs",className:e.currency,children:"$"}),r.period!=="none"&&a.jsxs(s.Typography,{as:"p",defaultVariant:"labelMd",className:e.period,children:["/",d.shortPeriod(r.period)]})]})]})]},n))});exports.PriceDisplay=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),e=require("../../src/components/PriceDisplay/priceDisplay.module.css"),c=require("../../utils/cn/cn.cjs.js"),l=require("../../utils/periodView.cjs.js"),o=({items:i})=>a.jsx("div",{className:e.root,children:i.map((r,n)=>a.jsxs("div",{className:c.cn(e.container,r.display==="double"?e.double:e.single),children:[a.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.description,children:r.description}),a.jsxs("div",{className:e.priceWrapper,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.prefix,children:r.prefix}),a.jsxs("div",{className:e.priceAmount,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingLg",className:e.price,children:(r.price/100).toFixed(0)}),a.jsx(s.Typography,{as:"p",defaultVariant:"headingXs",mobileVariant:"headingXxs",className:e.currency,children:"$"}),r.period!=="none"&&a.jsxs(s.Typography,{as:"p",defaultVariant:"labelMd",className:e.period,children:["/",l.shortPeriod(r.period)]})]})]})]},n))});exports.PriceDisplay=o;

package/dist/components/PriceDisplay/PriceDisplay.es.js

@@ -1,25 +1,17 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { Typography as i } from "../Typography/Typography.es.js";
 import a from "../../components/PriceDisplay/priceDisplay.module.css";
-import { cn as o } from "../../utils/cn/cn.es.js";
-import { shortPeriod as n } from "../../utils/periodView.es.js";
-const f = ({ items: s }) => /* @__PURE__ */ e("div", { className: a.root, children: s.map((r, l) => /* @__PURE__ */ d(
+import { cn as n } from "../../utils/cn/cn.es.js";
+import { shortPeriod as o } from "../../utils/periodView.es.js";
+const f = ({ items: d }) => /* @__PURE__ */ e("div", { className: a.root, children: d.map((r, l) => /* @__PURE__ */ s(
   "div",
   {
-    className: o(a.container, r.display === "double" ? a.double : a.single),
+    className: n(a.container, r.display === "double" ? a.double : a.single),
     children: [
-      /* @__PURE__ */ e(
-        i,
-        {
-          as: "p",
-          defaultVariant: r.display === "double" ? "bodySm" : "bodyLg",
-          className: a.description,
-          children: r.description
-        }
-      ),
-      /* @__PURE__ */ d("div", { className: a.priceWrapper, children: [
+      /* @__PURE__ */ e(i, { as: "p", defaultVariant: "bodySm", className: a.description, children: r.description }),
+      /* @__PURE__ */ s("div", { className: a.priceWrapper, children: [
         /* @__PURE__ */ e(i, { as: "p", defaultVariant: "bodySm", className: a.prefix, children: r.prefix }),
-        /* @__PURE__ */ d("div", { className: a.priceAmount, children: [
+        /* @__PURE__ */ s("div", { className: a.priceAmount, children: [
           /* @__PURE__ */ e(
             i,
             {
@@ -40,9 +32,9 @@ const f = ({ items: s }) => /* @__PURE__ */ e("div", { className: a.root, childr
               children: "$"
             }
           ),
-          r.period !== "none" && /* @__PURE__ */ d(i, { as: "p", defaultVariant: "labelMd", className: a.period, children: [
+          r.period !== "none" && /* @__PURE__ */ s(i, { as: "p", defaultVariant: "labelMd", className: a.period, children: [
             "/",
-            n(r.period)
+            o(r.period)
           ] })
         ] })
       ] })

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

@@ -22,6 +22,7 @@
     justify-content: space-between;
     align-items: center;
     gap: 3vw;
+    width: 100%;
 }
 
 .container.double {
@@ -49,7 +50,6 @@
 .description {
     flex: 1;
     min-width: 0;
-    max-width: 25ch;
 }
 
 .priceWrapper {

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

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

@@ -1,70 +1,69 @@
-import { jsx as i, jsxs as t } from "react/jsx-runtime";
-import { EAnalyticsEventType as g, EAnalyticsEvent as N } from "../../types/analytics/analytics.es.js";
+import { jsx as a, jsxs as r } 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 r from "../../modules/IndividualProductCardV2/individualProductCardV2.module.css";
-import { ImageGallery as b } from "../../components/ImageGallery/ImageGallery.es.js";
-import { RatingPreview as s } from "../../components/RatingPreview/RatingPreview.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 c } from "../../components/Typography/Typography.es.js";
+import { Typography as t } 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 P } from "../../components/Button/Button.es.js";
-import { TextButton as V } from "../../components/TextButton/TextButton.es.js";
-const H = ({
+import { Button as V } from "../../components/Button/Button.es.js";
+const z = ({
   zenpatientId: d,
-  signupUrl: a,
+  signupUrl: e,
   name: p,
   description: h,
   label: y,
   images: f,
   features: v,
-  quote: e,
-  priceDisplay: n,
-  featuresGroup: o,
-  ratingPreview: l
+  quote: n,
+  priceDisplay: o,
+  featuresGroup: l,
+  ratingPreview: s
 }) => {
   const u = {
-    event: N.ctaClicked,
-    type: g.interaction,
+    event: b.ctaClicked,
+    type: N.interaction,
     component: "Pricing",
     payload: {
       ctaLabel: "GET STARTED",
-      ctaLink: a,
+      ctaLink: e,
       productId: d
     }
   };
-  return /* @__PURE__ */ i("section", { className: r.root, children: /* @__PURE__ */ t("div", { className: r.mainContainer, children: [
-    /* @__PURE__ */ t("div", { className: r.leftColumn, children: [
-      /* @__PURE__ */ i(b, { images: f, label: y }),
-      /* @__PURE__ */ i("div", { className: m(r.ratingContainer, r.mobileOnly), children: /* @__PURE__ */ i(s, { ...l }) }),
-      e && /* @__PURE__ */ i(E, { ...e })
+  return /* @__PURE__ */ a("section", { className: i.root, children: /* @__PURE__ */ r("div", { className: i.mainContainer, children: [
+    /* @__PURE__ */ r("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 })
     ] }),
-    /* @__PURE__ */ t("div", { className: r.rightColumn, children: [
-      /* @__PURE__ */ t("div", { className: r.header, children: [
-        /* @__PURE__ */ i(c, { as: "h1", defaultVariant: "displayXs", mobileVariant: "headingLg", children: p }),
-        /* @__PURE__ */ i(
-          c,
+    /* @__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__ */ a(
+          t,
           {
             as: "p",
             defaultVariant: "bodyMd",
             mobileVariant: "bodySm",
-            className: r.description,
+            className: i.description,
             children: h
           }
         )
       ] }),
-      /* @__PURE__ */ i(C, { features: v }),
-      o && /* @__PURE__ */ i(A, { ...o }),
-      n && /* @__PURE__ */ i(T, { items: n }),
-      /* @__PURE__ */ i("div", { className: m(r.ratingContainer, r.desktopOnly), children: /* @__PURE__ */ i(s, { ...l }) }),
-      /* @__PURE__ */ t("div", { className: r.actions, children: [
-        /* @__PURE__ */ i(P, { variant: "primary", size: "lg", href: a, analyticsProps: u, children: "Get started" }),
-        /* @__PURE__ */ i(V, { size: "lg", children: "HSA/FSA Elegible" })
+      /* @__PURE__ */ a(C, { features: v }),
+      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__ */ a(V, { variant: "primary", size: "lg", href: e, analyticsProps: u, children: "Get started" }),
+        /* @__PURE__ */ a(t, { as: "p", defaultVariant: "labelMd", className: i.hsaFsaText, children: "HSA/FSA Eligible" })
       ] })
     ] })
   ] }) });
 };
 export {
-  H as IndividualProductCardV2
+  z as IndividualProductCardV2
 };

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

@@ -63,6 +63,14 @@
     display: block;
 }
 
+.hsaFsaText {
+    background-color: var(--color-bg-neutral-light);
+    text-align: center;
+    padding: 1rem;
+    width: 100%;
+    border-radius: var(--border-radius-md);
+}
+
 @media (width <= 1024px) {
     .mainContainer {
         padding: 2rem 1rem;

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

@@ -1,4 +1,5 @@
 import { ETypeBadge } from '../../components/TypeBadge';
+import { EIconName } from '../../components/Icon/constants';
 
 export type TTypeBadge = 'senescence' | 'supplements' | 'outline' | 'energy' | 'metabolism' | 'labs';
 export type TProductFeature = {
@@ -26,7 +27,7 @@ export type TPriceDisplayComponentView = {
 };
 export type TInternalPlainFeatureItemView = {
     text: string;
-    icon: string;
+    icon: EIconName;
     href?: string;
 };
 export type TPlainFeaturesGroupView = {

package/package.json

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