@zenpatient-org/healthspan-marketing-ui 0.2.39 → 0.2.41

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

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

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 
 export type PriceDisplayProps = {
-    display: 'single' | 'double';
     description: string;
     prefix?: string;
     price: number;

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

@@ -1,47 +1,52 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { jsx as a, jsxs as n } 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: 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),
-    children: [
-      /* @__PURE__ */ e(i, { as: "p", defaultVariant: "bodySm", className: a.description, children: r.description }),
-      /* @__PURE__ */ s("div", { className: a.priceWrapper, children: [
-        !!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,
-            {
-              as: "p",
-              defaultVariant: "headingXl",
-              mobileVariant: "headingLg",
-              className: a.price,
-              children: (r.price / 100).toFixed(0)
-            }
-          ),
-          /* @__PURE__ */ e(
-            i,
-            {
-              as: "p",
-              defaultVariant: "headingXs",
-              mobileVariant: "headingXxs",
-              className: a.currency,
-              children: "$"
-            }
-          ),
-          r.period !== "none" && /* @__PURE__ */ s(i, { as: "p", defaultVariant: "labelMd", className: a.period, children: [
-            "/",
-            n(r.period)
+import e from "../../components/PriceDisplay/priceDisplay.module.css";
+import { cn as d } from "../../utils/cn/cn.es.js";
+import { shortPeriod as s } from "../../utils/periodView.es.js";
+const f = ({ items: l }) => {
+  if (!l || l.length === 0)
+    return null;
+  const o = l.length > 1 ? "double" : "single";
+  return /* @__PURE__ */ a("div", { className: e.root, children: l.map((r) => /* @__PURE__ */ n(
+    "div",
+    {
+      className: d(e.container, o === "double" ? e.double : e.single),
+      children: [
+        /* @__PURE__ */ a(i, { as: "p", defaultVariant: "bodySm", className: e.description, children: r.description }),
+        /* @__PURE__ */ n("div", { className: e.priceWrapper, children: [
+          !!r.prefix && /* @__PURE__ */ a(i, { as: "p", defaultVariant: "bodySm", className: e.prefix, children: r.prefix }),
+          /* @__PURE__ */ n("div", { className: e.priceAmount, children: [
+            /* @__PURE__ */ a(
+              i,
+              {
+                as: "p",
+                defaultVariant: "headingXl",
+                mobileVariant: "headingLg",
+                className: e.price,
+                children: (r.price / 100).toFixed(0)
+              }
+            ),
+            /* @__PURE__ */ a(
+              i,
+              {
+                as: "p",
+                defaultVariant: "headingXs",
+                mobileVariant: "headingXxs",
+                className: e.currency,
+                children: "$"
+              }
+            ),
+            r.period !== "none" && /* @__PURE__ */ n(i, { as: "p", defaultVariant: "labelMd", className: e.period, children: [
+              "/",
+              s(r.period)
+            ] })
           ] })
         ] })
-      ] })
-    ]
-  },
-  l
-)) });
+      ]
+    },
+    r.description
+  )) });
+};
 export {
   f as PriceDisplay
 };

package/dist/modules/FeaturedIn/FeaturedIn.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),l=require("../../utils/cn/cn.cjs.js"),a=require("../../src/modules/FeaturedIn/featuredIn.module.css"),u=require("./components/CtaFeaturedIn.cjs.js"),s=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js");function m({media:n}){return e.jsx("div",{className:a.mediaFeaturedInBlock,children:n.filter(r=>!!r.logo).map(({logo:r,url:t},o)=>{const i=t?"a":"div";return e.jsx(i,{href:t,target:"_blank",rel:"noopener noreferrer",className:a.mediaFeaturedInImageContainer,children:e.jsx("div",{className:a.mediaFeaturedInImage,style:{backgroundImage:`url(${r})`}})},`${t}_${o}`)})})}function p({quote:n}){return e.jsx("div",{className:a.quoteFeaturedInBlock,children:e.jsxs(s.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingXxs",className:a.quoteFeaturedInText,children:["“",n,"”"]})})}function I({label:n,content:r}){return e.jsxs("section",{className:a.container,children:[e.jsx("p",{className:l.cn(a.title,a.customTitle),children:"(Featured In)"}),e.jsx(s.Typography,{as:"p",defaultVariant:"displayMd",className:l.cn(a.title,a.defaultTitle),children:"(Featured In)"}),e.jsx(s.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.label,children:n}),e.jsx(d.InfiniteScroll,{items:r,contentClassName:a.content,itemClassName:a.item,rootClassName:a.scrollRoot,renderItem:t=>e.jsxs(c.Fragment,{children:[t.type==="media"&&e.jsx(m,{media:t.media}),t.type==="quote"&&e.jsx(p,{quote:t.quote}),t.type==="cta"&&e.jsx(u.CtaFeaturedIn,{button_label:t.button_label})]},t.type)})]})}exports.FeaturedIn=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),i=require("../../utils/cn/cn.cjs.js"),u=require("./components/CtaFeaturedIn.cjs.js"),a=require("../../src/modules/FeaturedIn/featuredIn.module.css"),l=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js");function m({media:r}){return e.jsx("div",{className:a.mediaFeaturedInBlock,children:r.filter(t=>!!t.logo).map(({logo:t,url:s},o)=>{const n=s?"a":"div";return e.jsx(n,{href:s,target:"_blank",rel:"noopener noreferrer",className:a.mediaFeaturedInImageContainer,children:e.jsx("div",{className:a.mediaFeaturedInImage,style:{backgroundImage:`url(${t})`}})},`${s}_${o}`)})})}function p({quote:r,source:t}){return e.jsxs("div",{className:a.quoteFeaturedInBlock,children:[e.jsxs(l.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingXxs",className:a.quoteFeaturedInText,children:["“",r,"”"]}),t&&e.jsxs(l.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.quoteFeaturedInSource,children:["— ",t]})]})}function h({label:r,title:t,content:s,colorScheme:o="light"}){return e.jsxs("section",{className:i.cn(a.container,a[o]),children:[e.jsx(l.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.label,children:r}),t&&e.jsxs(e.Fragment,{children:[e.jsx("p",{className:i.cn(a.title,a.customTitle),children:t}),e.jsx(l.Typography,{as:"p",defaultVariant:"displayMd",className:i.cn(a.title,a.defaultTitle),children:t})]}),e.jsx(d.InfiniteScroll,{items:s,contentClassName:a.content,itemClassName:a.item,rootClassName:a.scrollRoot,renderItem:n=>e.jsxs(c.Fragment,{children:[n.type==="media"&&e.jsx(m,{media:n.media}),n.type==="quote"&&e.jsx(p,{quote:n.quote,source:n.source}),n.type==="cta"&&e.jsx(u.CtaFeaturedIn,{button_label:n.button_label})]},n.type)})]})}exports.FeaturedIn=h;

package/dist/modules/FeaturedIn/FeaturedIn.d.ts

@@ -1,3 +1,5 @@
+import { TColorScheme } from '../../types/common';
+
 type TMediaView = {
     type: 'media';
     media: Array<{
@@ -8,6 +10,7 @@ type TMediaView = {
 type TFeaturedQuoteView = {
     type: 'quote';
     quote: string;
+    source?: string;
 };
 type TFeaturedButtonView = {
     type: 'cta';
@@ -15,7 +18,9 @@ type TFeaturedButtonView = {
 };
 export type FeaturedInProps = {
     label: string;
+    title?: string;
     content: Array<TMediaView | TFeaturedQuoteView | TFeaturedButtonView>;
+    colorScheme?: TColorScheme;
 };
-export declare function FeaturedIn({ label, content }: FeaturedInProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedIn({ label, title, content, colorScheme }: FeaturedInProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modules/FeaturedIn/FeaturedIn.es.js

@@ -1,60 +1,68 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { Fragment as d } from "react";
-import { cn as i } from "../../utils/cn/cn.es.js";
+import { jsxs as n, jsx as t, Fragment as d } from "react/jsx-runtime";
+import { Fragment as c } from "react";
+import { cn as m } from "../../utils/cn/cn.es.js";
+import { CtaFeaturedIn as u } from "./components/CtaFeaturedIn.es.js";
 import e from "../../modules/FeaturedIn/featuredIn.module.css";
-import { CtaFeaturedIn as s } from "./components/CtaFeaturedIn.es.js";
-import { Typography as o } from "../../components/Typography/Typography.es.js";
-import { InfiniteScroll as c } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
-function u({ media: r }) {
-  return /* @__PURE__ */ t("div", { className: e.mediaFeaturedInBlock, children: r.filter((n) => !!n.logo).map(({ logo: n, url: a }, m) => /* @__PURE__ */ t(
-    a ? "a" : "div",
+import { Typography as i } from "../../components/Typography/Typography.es.js";
+import { InfiniteScroll as p } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
+function f({ media: l }) {
+  return /* @__PURE__ */ t("div", { className: e.mediaFeaturedInBlock, children: l.filter((a) => !!a.logo).map(({ logo: a, url: o }, s) => /* @__PURE__ */ t(
+    o ? "a" : "div",
     {
-      href: a,
+      href: o,
       target: "_blank",
       rel: "noopener noreferrer",
       className: e.mediaFeaturedInImageContainer,
-      children: /* @__PURE__ */ t("div", { className: e.mediaFeaturedInImage, style: { backgroundImage: `url(${n})` } })
+      children: /* @__PURE__ */ t("div", { className: e.mediaFeaturedInImage, style: { backgroundImage: `url(${a})` } })
     },
-    `${a}_${m}`
+    `${o}_${s}`
   )) });
 }
-function p({ quote: r }) {
-  return /* @__PURE__ */ t("div", { className: e.quoteFeaturedInBlock, children: /* @__PURE__ */ l(
-    o,
-    {
-      as: "p",
-      defaultVariant: "headingSm",
-      mobileVariant: "headingXxs",
-      className: e.quoteFeaturedInText,
-      children: [
-        "“",
-        r,
-        "”"
-      ]
-    }
-  ) });
+function h({ quote: l, source: a }) {
+  return /* @__PURE__ */ n("div", { className: e.quoteFeaturedInBlock, children: [
+    /* @__PURE__ */ n(
+      i,
+      {
+        as: "p",
+        defaultVariant: "headingSm",
+        mobileVariant: "headingXxs",
+        className: e.quoteFeaturedInText,
+        children: [
+          "“",
+          l,
+          "”"
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ n(i, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: e.quoteFeaturedInSource, children: [
+      "— ",
+      a
+    ] })
+  ] });
 }
-function q({ label: r, content: n }) {
-  return /* @__PURE__ */ l("section", { className: e.container, children: [
-    /* @__PURE__ */ t("p", { className: i(e.title, e.customTitle), children: "(Featured In)" }),
-    /* @__PURE__ */ t(o, { as: "p", defaultVariant: "displayMd", className: i(e.title, e.defaultTitle), children: "(Featured In)" }),
-    /* @__PURE__ */ t(o, { as: "p", defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: r }),
+function V({ label: l, title: a, content: o, colorScheme: s = "light" }) {
+  return /* @__PURE__ */ n("section", { className: m(e.container, e[s]), children: [
+    /* @__PURE__ */ t(i, { as: "p", defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: l }),
+    a && /* @__PURE__ */ n(d, { children: [
+      /* @__PURE__ */ t("p", { className: m(e.title, e.customTitle), children: a }),
+      /* @__PURE__ */ t(i, { as: "p", defaultVariant: "displayMd", className: m(e.title, e.defaultTitle), children: a })
+    ] }),
     /* @__PURE__ */ t(
-      c,
+      p,
       {
-        items: n,
+        items: o,
         contentClassName: e.content,
         itemClassName: e.item,
         rootClassName: e.scrollRoot,
-        renderItem: (a) => /* @__PURE__ */ l(d, { children: [
-          a.type === "media" && /* @__PURE__ */ t(u, { media: a.media }),
-          a.type === "quote" && /* @__PURE__ */ t(p, { quote: a.quote }),
-          a.type === "cta" && /* @__PURE__ */ t(s, { button_label: a.button_label })
-        ] }, a.type)
+        renderItem: (r) => /* @__PURE__ */ n(c, { children: [
+          r.type === "media" && /* @__PURE__ */ t(f, { media: r.media }),
+          r.type === "quote" && /* @__PURE__ */ t(h, { quote: r.quote, source: r.source }),
+          r.type === "cta" && /* @__PURE__ */ t(u, { button_label: r.button_label })
+        ] }, r.type)
       }
     )
   ] });
 }
 export {
-  q as FeaturedIn
+  V as FeaturedIn
 };

package/dist/modules/FeaturedIn/featuredIn.module.css

@@ -2,16 +2,18 @@
     width: 100%;
     display: flex;
     flex-direction: column;
+    gap: var(--spacing-24, 24px);
     padding: var(--spacing-120) 0;
     position: relative;
 }
 
-.label {
-    text-align: center;
+.container.dark {
+    background-color: var(--color-bg-fill-alpha-black-5);
+    color: var(--color-text-primary-inverted);
 }
 
-.scrollRoot {
-    margin-top: 67px;
+.label {
+    text-align: center;
 }
 
 .label + .scrollRoot {
@@ -25,15 +27,21 @@
     border-right: var(--border-width-sm) solid var(--color-bg-fill-alpha-black-10);
 }
 
+.container.dark .item {
+    border-color: var(--color-bg-fill-alpha-white-20);
+}
+
 .title {
-    position: absolute;
     color: var(--color-text-primary);
     text-align: center;
     opacity: 0.2;
-    margin-top: 48px;
     width: 100%;
 }
 
+.container.dark .title {
+    color: var(--color-text-primary-inverted);
+}
+
 .customTitle {
     font-family: var(--font-default);
     font-size: 144px;
@@ -55,6 +63,10 @@
     border-top: var(--border-width-sm) solid var(--color-bg-fill-alpha-black-10);
 }
 
+.container.dark .content {
+    border-color: var(--color-bg-fill-alpha-white-20);
+}
+
 .mediaFeaturedInBlock {
     display: flex;
     align-items: center;
@@ -76,6 +88,10 @@
     padding: 25px;
 }
 
+.container.dark .mediaFeaturedInImageContainer {
+    background: var(--background-fill-alpha-white-20, rgba(255, 255, 255, 0.20))
+}
+
 .mediaFeaturedInImage {
     height: 100%;
     width: 100%;
@@ -86,10 +102,28 @@
 
 .quoteFeaturedInBlock {
     display: flex;
+    flex-direction: column;
+    gap: var(--spacing-24, 24px);
     align-items: center;
     width: 320px;
 }
 
+.quoteFeaturedInSource {
+    width: 100%;
+    text-align: center;
+    color: var(--color-text-secondary-disabled);
+}
+
+.container.dark .quoteFeaturedInSource {
+    color: var(--color-text-secondary-inverted);
+}
+
+.container.dark {
+    .label, .quoteFeaturedInBlock {
+        color: var(--color-text-primary-brand-solar);
+    }
+}
+
 .quoteFeaturedInText {
     white-space: normal;
     text-align: center;

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("react"),y=require("../../../../utils/cn/cn.cjs.js"),t=require("../../../../src/modules/IndividualProductCard/components/Features/features.module.css"),g=require("../../../../components/TypeBadge/TypeBadge.cjs.js"),a=require("../../../../components/Typography/Typography.cjs.js"),p=require("../../../../components/Superscript/Superscript.cjs.js"),m=require("../../../../components/IconBracket/IconBracket.cjs.js"),S=({features:u})=>{const[n,d]=l.useState([]),b=l.useCallback(e=>{d(r=>r.includes(e)?r.filter(c=>c!==e):[...r,e])},[]);return s.jsx("div",{className:t.root,children:u.map((e,r)=>{const c=e.description&&e.collapsible,i=!!e.description,o=s.jsxs("div",{className:t.labelWrapper,children:[s.jsx(g.TypeBadge,{type:e.type},r),s.jsxs(a.Typography,{className:t.label,as:"h4",defaultVariant:i?"bodySm":"bodyMd",mobileVariant:i?"labelMd":"bodySm",weight:"regular",children:[e.label,e.labelSuperscript&&!isNaN(e.labelSuperscript)&&s.jsx(p.Superscript,{value:e.labelSuperscript.toString()})]})]});return s.jsxs("div",{className:t.feature,children:[c?s.jsxs("button",{className:t.header,onClick:()=>b(r),children:[o,s.jsx(m.IconBracket,{variant:n.includes(r)?"close":"plus",size:"sm"})]}):o,i&&s.jsxs(a.Typography,{as:"p",defaultVariant:"bodyXs",className:y.cn(t.description,{[t.descriptionActive]:n.includes(r)||!c}),weight:"regular",children:[e.description,e.descriptionSuperscript&&!isNaN(e.descriptionSuperscript)&&s.jsx(p.Superscript,{value:e.descriptionSuperscript.toString()})]})]},`${e.label}-${r}`)})})};exports.Features=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("react"),y=require("../../../../utils/cn/cn.cjs.js"),t=require("../../../../src/modules/IndividualProductCard/components/Features/features.module.css"),g=require("../../../../components/TypeBadge/TypeBadge.cjs.js"),l=require("../../../../components/Typography/Typography.cjs.js"),a=require("../../../../components/Superscript/Superscript.cjs.js"),m=require("../../../../components/IconBracket/IconBracket.cjs.js"),S=({features:p})=>{const[i,u]=o.useState([]),d=o.useCallback(e=>{u(r=>r.includes(e)?r.filter(c=>c!==e):[...r,e])},[]);return s.jsx("div",{className:t.root,children:p.map((e,r)=>{const c=e.description&&e.collapsible,b=!!e.description,n=s.jsxs("div",{className:t.labelWrapper,children:[s.jsx(g.TypeBadge,{type:e.type},r),s.jsxs(l.Typography,{className:t.label,as:"span",defaultVariant:"bodyMd",mobileVariant:"bodySm",weight:"regular",children:[e.label,e.labelSuperscript&&!isNaN(e.labelSuperscript)&&s.jsx(a.Superscript,{value:e.labelSuperscript.toString()})]})]});return s.jsxs("div",{className:t.feature,children:[c?s.jsxs("button",{className:t.header,onClick:()=>d(r),children:[n,s.jsx(m.IconBracket,{variant:i.includes(r)?"close":"plus",size:"md"})]}):n,b&&s.jsxs(l.Typography,{as:"p",defaultVariant:"bodySm",mobileVariant:"bodyXs",className:y.cn(t.description,{[t.descriptionActive]:i.includes(r)||!c}),weight:"regular",children:[e.description,e.descriptionSuperscript&&!isNaN(e.descriptionSuperscript)&&s.jsx(a.Superscript,{value:e.descriptionSuperscript.toString()})]})]},`${e.label}-${r}`)})})};exports.Features=S;

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

@@ -1,55 +1,56 @@
 "use client";
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
 import { useState as u, useCallback as g } from "react";
-import { cn as h } from "../../../../utils/cn/cn.es.js";
-import r from "../../../../modules/IndividualProductCard/components/Features/features.module.css";
-import { TypeBadge as S } from "../../../../components/TypeBadge/TypeBadge.es.js";
+import { cn as S } from "../../../../utils/cn/cn.es.js";
+import s from "../../../../modules/IndividualProductCard/components/Features/features.module.css";
+import { TypeBadge as h } from "../../../../components/TypeBadge/TypeBadge.es.js";
 import { Typography as a } from "../../../../components/Typography/Typography.es.js";
-import { Superscript as n } from "../../../../components/Superscript/Superscript.es.js";
+import { Superscript as p } from "../../../../components/Superscript/Superscript.es.js";
 import { IconBracket as y } from "../../../../components/IconBracket/IconBracket.es.js";
-const w = ({ features: m }) => {
-  const [c, d] = u([]), b = g((s) => {
-    d((i) => i.includes(s) ? i.filter((t) => t !== s) : [...i, s]);
+const w = ({ features: n }) => {
+  const [o, m] = u([]), d = g((i) => {
+    m((r) => r.includes(i) ? r.filter((l) => l !== i) : [...r, i]);
   }, []);
-  return /* @__PURE__ */ e("div", { className: r.root, children: m.map((s, i) => {
-    const t = s.description && s.collapsible, o = !!s.description, p = /* @__PURE__ */ l("div", { className: r.labelWrapper, children: [
-      /* @__PURE__ */ e(S, { type: s.type }, i),
-      /* @__PURE__ */ l(
+  return /* @__PURE__ */ t("div", { className: s.root, children: n.map((i, r) => {
+    const l = i.description && i.collapsible, b = !!i.description, c = /* @__PURE__ */ e("div", { className: s.labelWrapper, children: [
+      /* @__PURE__ */ t(h, { type: i.type }, r),
+      /* @__PURE__ */ e(
         a,
         {
-          className: r.label,
-          as: "h4",
-          defaultVariant: o ? "bodySm" : "bodyMd",
-          mobileVariant: o ? "labelMd" : "bodySm",
+          className: s.label,
+          as: "span",
+          defaultVariant: "bodyMd",
+          mobileVariant: "bodySm",
           weight: "regular",
           children: [
-            s.label,
-            s.labelSuperscript && !isNaN(s.labelSuperscript) && /* @__PURE__ */ e(n, { value: s.labelSuperscript.toString() })
+            i.label,
+            i.labelSuperscript && !isNaN(i.labelSuperscript) && /* @__PURE__ */ t(p, { value: i.labelSuperscript.toString() })
           ]
         }
       )
     ] });
-    return /* @__PURE__ */ l("div", { className: r.feature, children: [
-      t ? /* @__PURE__ */ l("button", { className: r.header, onClick: () => b(i), children: [
-        p,
-        /* @__PURE__ */ e(y, { variant: c.includes(i) ? "close" : "plus", size: "sm" })
-      ] }) : p,
-      o && /* @__PURE__ */ l(
+    return /* @__PURE__ */ e("div", { className: s.feature, children: [
+      l ? /* @__PURE__ */ e("button", { className: s.header, onClick: () => d(r), children: [
+        c,
+        /* @__PURE__ */ t(y, { variant: o.includes(r) ? "close" : "plus", size: "md" })
+      ] }) : c,
+      b && /* @__PURE__ */ e(
         a,
         {
           as: "p",
-          defaultVariant: "bodyXs",
-          className: h(r.description, {
-            [r.descriptionActive]: c.includes(i) || !t
+          defaultVariant: "bodySm",
+          mobileVariant: "bodyXs",
+          className: S(s.description, {
+            [s.descriptionActive]: o.includes(r) || !l
           }),
           weight: "regular",
           children: [
-            s.description,
-            s.descriptionSuperscript && !isNaN(s.descriptionSuperscript) && /* @__PURE__ */ e(n, { value: s.descriptionSuperscript.toString() })
+            i.description,
+            i.descriptionSuperscript && !isNaN(i.descriptionSuperscript) && /* @__PURE__ */ t(p, { value: i.descriptionSuperscript.toString() })
           ]
         }
       )
-    ] }, `${s.label}-${i}`);
+    ] }, `${i.label}-${r}`);
   }) });
 };
 export {

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

@@ -24,7 +24,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 0;
-    gap: 12px;
+    gap: 8px;
     border: none;
     background: none;
     box-shadow: none;
@@ -59,7 +59,7 @@
 }
 
 .descriptionActive {
-    margin-top: 12px;
+    margin-top: 8px;
     line-height: var(--line-height-lg);
     color: var(--color-text-secondary);
 }

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"),s=require("../../components/Typography/Typography.cjs.js"),v=require("../IndividualProductCard/components/Features/Features.cjs.js"),_=require("../../components/PlainFeaturesGroup/PlainFeaturesGroup.cjs.js"),P=require("../../components/PriceDisplay/PriceDisplay.cjs.js"),q=require("../../components/Button/Button.cjs.js"),b=require("../../components/Quote/Quote.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(b.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(v.Features,{features:j}),r&&e.jsx(_.PlainFeaturesGroup,{...r}),i&&e.jsx(P.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=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../types/analytics/analytics.cjs.js"),P=require("../../utils/cn/cn.cjs.js"),i=require("../../src/modules/IndividualProductCardV2/individualProductCardV2.module.css"),G=require("../../components/ImageGallery/ImageGallery.cjs.js"),_=require("../../components/RatingPreview/RatingPreview.cjs.js"),u=require("../../components/Typography/Typography.cjs.js"),I=require("../IndividualProductCard/components/Features/Features.cjs.js"),D=require("../../components/PlainFeaturesGroup/PlainFeaturesGroup.cjs.js"),V=require("../../components/PriceDisplay/PriceDisplay.cjs.js"),F=require("../IndividualProductCard/components/PlanCard/PlanCard.cjs.js"),k=require("../../components/Button/Button.cjs.js"),R=require("../../components/Quote/Quote.cjs.js"),B=t=>{const{zenpatientId:p,signupUrl:c,name:S,description:q,label:f,images:N,features:T,quote:y,featuresGroup:m,ratingPreview:v,view:r,button:a}=t,n=r==="plans_list"?t.plans:void 0,E=n&&n.length>0,h=r==="plans_list"?t.selectedPlanId:void 0,o=n==null?void 0:n.find(s=>s.id===h),g=o?`${(a==null?void 0:a.link)||c}?defaultDurationSelection=${o==null?void 0:o.durationAmount}`:(a==null?void 0:a.link)||c,x=r==="pricing_display"?t.priceDisplay:void 0,C={event:d.EAnalyticsEvent.ctaClicked,type:d.EAnalyticsEventType.interaction,component:"Pricing",payload:{ctaLabel:(a==null?void 0:a.text)||"GET STARTED",ctaLink:g||c,productId:p}},A=s=>{var j;if(r!=="plans_list"||!t.onSelectPlan)return;t.onSelectPlan(s);const l=n==null?void 0:n.find(w=>w.id===s),b={event:d.EAnalyticsEvent.userSelectedPlan,location:"IPCv2",type:d.EAnalyticsEventType.interaction,payload:{productId:p,planId:s,planPrice:l==null?void 0:l.price,planDuration:l==null?void 0:l.duration}};(j=window.eventBus)==null||j.emit("analytics",b)};return e.jsx("section",{className:i.root,children:e.jsxs("div",{className:i.mainContainer,children:[e.jsxs("div",{className:i.leftColumn,children:[e.jsx(G.ImageGallery,{images:N,label:f}),e.jsx("div",{className:P.cn(i.ratingContainer,i.mobileOnly),children:e.jsx(_.RatingPreview,{...v})}),y&&e.jsx("div",{className:i.quoteWrapper,children:e.jsx(R.Quote,{...y})})]}),e.jsxs("div",{className:i.rightColumn,children:[e.jsxs("div",{className:i.header,children:[e.jsx(u.Typography,{as:"h1",defaultVariant:"displayXs",mobileVariant:"headingLg",children:S}),e.jsx(u.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:i.description,children:q})]}),e.jsx(I.Features,{features:T}),m&&e.jsx(D.PlainFeaturesGroup,{...m}),r==="pricing_display"&&x&&e.jsx(V.PriceDisplay,{items:x}),r==="plans_list"&&E&&e.jsx("div",{className:i.plansSection,children:e.jsxs("div",{className:i.plans,children:[e.jsx(u.Typography,{as:"h4",defaultVariant:"labelSm",emphasis:!0,weight:"regular",children:"Subscribe & Save"}),n.map(s=>e.jsx(F.PlanCard,{plan:s,onSelect:A,isActive:h===s.id},s.id))]})}),e.jsx("div",{className:P.cn(i.ratingContainer,i.desktopOnly),children:e.jsx(_.RatingPreview,{...v})}),e.jsxs("div",{className:i.actions,children:[e.jsx(k.Button,{as:"a",variant:"primary",size:"lg",href:g||c,analyticsProps:C,children:(a==null?void 0:a.text)||"Get started"}),e.jsx(u.Typography,{as:"p",defaultVariant:"labelMd",className:i.hsaFsaText,children:"HSA/FSA Eligible"})]})]})]})})};exports.IndividualProductCardV2=B;

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

@@ -1,3 +1,3 @@
-import { TIndividualProductCardV2Base } from './types';
+import { TIndividualProductCardV2View } from './types';
 
-export declare const IndividualProductCardV2: ({ zenpatientId, signupUrl, name, description, label, images, features, quote, priceDisplay, featuresGroup, ratingPreview, }: TIndividualProductCardV2Base) => import("react/jsx-runtime").JSX.Element;
+export declare const IndividualProductCardV2: (props: TIndividualProductCardV2View) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,79 +1,109 @@
-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 { Typography as r } from "../../components/Typography/Typography.es.js";
-import { Features as E } from "../IndividualProductCard/components/Features/Features.es.js";
-import { PlainFeaturesGroup as C } from "../../components/PlainFeaturesGroup/PlainFeaturesGroup.es.js";
-import { PriceDisplay as A } from "../../components/PriceDisplay/PriceDisplay.es.js";
-import { Button as T } from "../../components/Button/Button.es.js";
-import { Quote as V } from "../../components/Quote/Quote.es.js";
-const z = ({
-  zenpatientId: d,
-  signupUrl: t,
-  name: p,
-  description: h,
-  label: y,
-  images: f,
-  features: v,
-  quote: n,
-  priceDisplay: o,
-  featuresGroup: l,
-  ratingPreview: s
-}) => {
-  const u = {
-    event: b.ctaClicked,
-    type: N.interaction,
+import { jsx as i, jsxs as o } from "react/jsx-runtime";
+import { EAnalyticsEventType as S, EAnalyticsEvent as N } from "../../types/analytics/analytics.es.js";
+import { cn as C } from "../../utils/cn/cn.es.js";
+import e from "../../modules/IndividualProductCardV2/individualProductCardV2.module.css";
+import { ImageGallery as G } from "../../components/ImageGallery/ImageGallery.es.js";
+import { RatingPreview as A } from "../../components/RatingPreview/RatingPreview.es.js";
+import { Typography as m } from "../../components/Typography/Typography.es.js";
+import { Features as F } from "../IndividualProductCard/components/Features/Features.es.js";
+import { PlainFeaturesGroup as L } from "../../components/PlainFeaturesGroup/PlainFeaturesGroup.es.js";
+import { PriceDisplay as j } from "../../components/PriceDisplay/PriceDisplay.es.js";
+import { PlanCard as q } from "../IndividualProductCard/components/PlanCard/PlanCard.es.js";
+import { Button as z } from "../../components/Button/Button.es.js";
+import { Quote as B } from "../../components/Quote/Quote.es.js";
+const ii = (r) => {
+  const {
+    zenpatientId: p,
+    signupUrl: c,
+    name: E,
+    description: b,
+    label: V,
+    images: k,
+    features: w,
+    quote: h,
+    featuresGroup: u,
+    ratingPreview: v,
+    view: l,
+    button: a
+  } = r, t = l === "plans_list" ? r.plans : void 0, x = t && t.length > 0, f = l === "plans_list" ? r.selectedPlanId : void 0, d = t == null ? void 0 : t.find((n) => n.id === f), y = d ? `${(a == null ? void 0 : a.link) || c}?defaultDurationSelection=${d == null ? void 0 : d.durationAmount}` : (a == null ? void 0 : a.link) || c, g = l === "pricing_display" ? r.priceDisplay : void 0, D = {
+    event: N.ctaClicked,
+    type: S.interaction,
     component: "Pricing",
     payload: {
-      ctaLabel: "GET STARTED",
-      ctaLink: t,
-      productId: d
+      ctaLabel: (a == null ? void 0 : a.text) || "GET STARTED",
+      ctaLink: y || c,
+      productId: p
     }
+  }, I = (n) => {
+    var P;
+    if (l !== "plans_list" || !r.onSelectPlan) return;
+    r.onSelectPlan(n);
+    const s = t == null ? void 0 : t.find((_) => _.id === n), T = {
+      event: N.userSelectedPlan,
+      location: "IPCv2",
+      type: S.interaction,
+      payload: {
+        productId: p,
+        planId: n,
+        planPrice: s == null ? void 0 : s.price,
+        planDuration: s == null ? void 0 : s.duration
+      }
+    };
+    (P = window.eventBus) == null || P.emit("analytics", T);
   };
-  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("div", { className: i.quoteWrapper, children: /* @__PURE__ */ a(V, { ...n }) })
+  return /* @__PURE__ */ i("section", { className: e.root, children: /* @__PURE__ */ o("div", { className: e.mainContainer, children: [
+    /* @__PURE__ */ o("div", { className: e.leftColumn, children: [
+      /* @__PURE__ */ i(G, { images: k, label: V }),
+      /* @__PURE__ */ i("div", { className: C(e.ratingContainer, e.mobileOnly), children: /* @__PURE__ */ i(A, { ...v }) }),
+      h && /* @__PURE__ */ i("div", { className: e.quoteWrapper, children: /* @__PURE__ */ i(B, { ...h }) })
     ] }),
-    /* @__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(
-          r,
+    /* @__PURE__ */ o("div", { className: e.rightColumn, children: [
+      /* @__PURE__ */ o("div", { className: e.header, children: [
+        /* @__PURE__ */ i(m, { as: "h1", defaultVariant: "displayXs", mobileVariant: "headingLg", children: E }),
+        /* @__PURE__ */ i(
+          m,
           {
             as: "p",
             defaultVariant: "bodyMd",
             mobileVariant: "bodySm",
-            className: i.description,
-            children: h
+            className: e.description,
+            children: b
           }
         )
       ] }),
-      /* @__PURE__ */ a(E, { features: v }),
-      l && /* @__PURE__ */ a(C, { ...l }),
-      o && /* @__PURE__ */ a(A, { items: o }),
-      /* @__PURE__ */ a("div", { className: m(i.ratingContainer, i.desktopOnly), children: /* @__PURE__ */ a(c, { ...s }) }),
-      /* @__PURE__ */ e("div", { className: i.actions, children: [
-        /* @__PURE__ */ a(
-          T,
+      /* @__PURE__ */ i(F, { features: w }),
+      u && /* @__PURE__ */ i(L, { ...u }),
+      l === "pricing_display" && g && /* @__PURE__ */ i(j, { items: g }),
+      l === "plans_list" && x && /* @__PURE__ */ i("div", { className: e.plansSection, children: /* @__PURE__ */ o("div", { className: e.plans, children: [
+        /* @__PURE__ */ i(m, { as: "h4", defaultVariant: "labelSm", emphasis: !0, weight: "regular", children: "Subscribe & Save" }),
+        t.map((n) => /* @__PURE__ */ i(
+          q,
+          {
+            plan: n,
+            onSelect: I,
+            isActive: f === n.id
+          },
+          n.id
+        ))
+      ] }) }),
+      /* @__PURE__ */ i("div", { className: C(e.ratingContainer, e.desktopOnly), children: /* @__PURE__ */ i(A, { ...v }) }),
+      /* @__PURE__ */ o("div", { className: e.actions, children: [
+        /* @__PURE__ */ i(
+          z,
           {
             as: "a",
             variant: "primary",
             size: "lg",
-            href: t,
-            analyticsProps: u,
-            children: "Get started"
+            href: y || c,
+            analyticsProps: D,
+            children: (a == null ? void 0 : a.text) || "Get started"
           }
         ),
-        /* @__PURE__ */ a(r, { as: "p", defaultVariant: "labelMd", className: i.hsaFsaText, children: "HSA/FSA Eligible" })
+        /* @__PURE__ */ i(m, { as: "p", defaultVariant: "labelMd", className: e.hsaFsaText, children: "HSA/FSA Eligible" })
       ] })
     ] })
   ] }) });
 };
 export {
-  z as IndividualProductCardV2
+  ii as IndividualProductCardV2
 };

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

@@ -77,6 +77,22 @@
     border-radius: var(--border-radius-xs);
 }
 
+.plansSection {
+    grid-area: plans;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding-top: 12px;
+}
+
+.plans {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 12px;
+}
+
+
 @media (width <= 1024px) {
     .mainContainer {
         padding: 2rem 1rem;

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

@@ -24,7 +24,6 @@ export type TPriceDisplayComponentView = {
     price: number;
     period: 'none' | 'month' | 'quarter' | 'year';
     prefix?: string;
-    display: 'single' | 'double';
 };
 export type TInternalPlainFeatureItemView = {
     text: string;
@@ -49,12 +48,25 @@ export type TIndividualProductCardV2Base = {
     label?: string;
     rating?: TReviewsStats;
     quote?: TQuoteComponentView;
-    priceDisplay?: Array<TPriceDisplayComponentView>;
     featuresGroup?: TPlainFeaturesGroupView;
     ratingPreview?: TRatingPreviewView;
+    button: {
+        text: string;
+        link: string;
+    };
 };
 export type TIndividualProductCardBasicV2View = TIndividualProductCardV2Base & {
-    plansView?: 'single';
+    view?: 'basic';
+};
+export type TIndividualProductCardPricingV2View = TIndividualProductCardV2Base & {
+    view?: 'pricing_display';
+    priceDisplay?: Array<TPriceDisplayComponentView>;
+};
+export type TIndividualProductCardPlansV2View = TIndividualProductCardV2Base & {
+    view?: 'plans_list';
+    plans?: Array<TProductPlan>;
+    selectedPlanId?: string;
+    onSelectPlan?: (planId: TProductPlan['id']) => void;
 };
 export type TProductPlan = {
     id: string;
@@ -67,8 +79,4 @@ export type TProductPlan = {
     durationAmount?: number;
     featured?: boolean;
 };
-export type TIndividualProductCardPricingV2View = TIndividualProductCardV2Base & {
-    plansView?: 'pricing';
-    plans?: Array<TProductPlan>;
-};
-export type TIndividualProductCardV2View = TIndividualProductCardBasicV2View | TIndividualProductCardPricingV2View;
+export type TIndividualProductCardV2View = TIndividualProductCardBasicV2View | TIndividualProductCardPricingV2View | TIndividualProductCardPlansV2View;

package/package.json

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