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

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"),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;
+"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"),o=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:"bodySm",className:e.description,children:r.description}),a.jsxs("div",{className:e.priceWrapper,children:[!!r.prefix&&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:["/",o.shortPeriod(r.period)]})]})]})]},n))});exports.PriceDisplay=l;

package/dist/components/PriceDisplay/PriceDisplay.d.ts

@@ -3,7 +3,7 @@ import { default as React } from 'react';
 export type PriceDisplayProps = {
     display: 'single' | 'double';
     description: string;
-    prefix: string;
+    prefix?: string;
     price: number;
     period: 'none' | 'month' | 'year' | 'quarter';
 };

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

@@ -1,16 +1,16 @@
 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 n } from "../../utils/cn/cn.es.js";
-import { shortPeriod as o } from "../../utils/periodView.es.js";
+import { cn as o } from "../../utils/cn/cn.es.js";
+import { shortPeriod as n } from "../../utils/periodView.es.js";
 const f = ({ items: d }) => /* @__PURE__ */ e("div", { className: a.root, children: d.map((r, l) => /* @__PURE__ */ s(
   "div",
   {
-    className: n(a.container, r.display === "double" ? a.double : a.single),
+    className: o(a.container, r.display === "double" ? a.double : a.single),
     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 }),
+        !!r.prefix && /* @__PURE__ */ e(i, { as: "p", defaultVariant: "bodySm", className: a.prefix, children: r.prefix }),
         /* @__PURE__ */ s("div", { className: a.priceAmount, children: [
           /* @__PURE__ */ e(
             i,
@@ -34,7 +34,7 @@ const f = ({ items: d }) => /* @__PURE__ */ e("div", { className: a.root, childr
           ),
           r.period !== "none" && /* @__PURE__ */ s(i, { as: "p", defaultVariant: "labelMd", className: a.period, children: [
             "/",
-            o(r.period)
+            n(r.period)
           ] })
         ] })
       ] })

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

@@ -1,6 +1,8 @@
 .root {
     display: flex;
-    gap: 2.25rem;
+    gap: 36px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid var(--color-neutral-200);
 }
 
 @media (max-width: 768px) {
@@ -21,7 +23,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 3vw;
+    gap: 40px;
     width: 100%;
 }
 
@@ -32,11 +34,13 @@
 }
 
 .container.double:first-child {
+    padding-right: 36px;
     border-right: 1px solid var(--color-neutral-200);
 }
 
 @media (max-width: 768px) {
     .container.double {
+        gap: 40px;
         flex-direction: row;
         align-items: flex-start;
     }
@@ -44,6 +48,7 @@
     .container.double:first-child {
         border-right: none;
         border-bottom: 1px solid var(--color-neutral-200);
+        padding-right: 0;
     }
 }
 
@@ -54,10 +59,11 @@
 
 .priceWrapper {
     display: flex;
-    gap: 0.25rem;
+    gap: 4px;
     flex-direction: column;
     align-items: flex-start;
     text-align: left;
+    min-width: 90px;
 }
 
 .prefix {

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"),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;
+"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;

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

@@ -58,7 +58,17 @@ const z = ({
       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(
+          V,
+          {
+            as: "a",
+            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" })
       ] })
     ] })

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

@@ -24,6 +24,7 @@ export type TPriceDisplayComponentView = {
     price: number;
     period: 'none' | 'month' | 'quarter' | 'year';
     prefix?: string;
+    display: 'single' | 'double';
 };
 export type TInternalPlainFeatureItemView = {
     text: string;

package/dist/pageComponents/ScrollingFeatures/scrollingFeatures.module.css

@@ -1,6 +1,7 @@
 .root {
     display: flex;
     width: 100%;
+    overflow: hidden;
 }
 
 .featuresContainer {

package/package.json

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