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

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

package/dist/components/Quote/Quote.module.css

@@ -20,6 +20,7 @@
 
 .quoteText {
     margin: 0;
+    text-wrap: pretty;
 }
 
 .quoteAuthor {

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("../../utils/cn/cn.cjs.js"),c=require("../../types/analytics/analytics.cjs.js"),a=require("../../src/modules/IndividualProductCard/individualProductCard.module.css"),d=require("../../components/Typography/Typography.cjs.js"),f=require("../../components/RatingStars/RatingStars.cjs.js"),w=require("./components/Features/Features.cjs.js"),k=require("../../components/SmartCallout/SmartCallout.cjs.js"),j=require("../../components/Button/Button.cjs.js"),_=require("../../components/TextButton/TextButton.cjs.js"),A=require("../../components/ImageGallery/ImageGallery.cjs.js"),I=require("./components/PlanCard/PlanCard.cjs.js"),R=({zenpatientId:x,name:u,description:m,features:C,images:b,label:T,rating:t,plans:n,button:l,textButton:s,selectedPlanId:p,onSelectPlan:o,trackingEvent:N,trackingLocation:h})=>{const y=n&&n.length>0&&o,S=i=>{if(o==null||o(i),N){const r=n==null?void 0:n.find(q=>q.id===i);c.EAnalyticsEventType.interaction,r==null||r.price,r==null||r.duration}},v=()=>{var r;const i={event:c.EAnalyticsEvent.ctaClicked,location:h||"not_set",type:c.EAnalyticsEventType.interaction,component:"IndividualProductCard",element:"primary_button",payload:{productId:x,ctaLabel:l.label,productName:u,selectedPlanId:p||"none"}};(r=window.eventBus)==null||r.emit("analytics",i)},g=()=>{var i;(i=window.eventBus)==null||i.emit("analytics",{event:c.EAnalyticsEvent.ctaClicked,location:h||"not_set",type:c.EAnalyticsEventType.interaction,component:"IndividualProductCard",element:"secondary_button",payload:{ctaLabel:s==null?void 0:s.label,productName:u}})};return e.jsx("section",{className:a.root,children:e.jsxs("div",{className:E.cn(a.container,!y&&a.noPlans),children:[e.jsxs("div",{className:a.info,children:[e.jsxs("div",{className:a.infoHeader,children:[e.jsx(d.Typography,{as:"h3",defaultVariant:"displayXs",mobileVariant:"headingLg",weight:"regular",children:u}),!!m&&e.jsx(d.Typography,{as:"p",defaultVariant:"bodySm",className:a.infoDescription,weight:"regular",children:m}),t&&e.jsxs("div",{className:a.ratingContainer,children:[!!t.stars&&e.jsx(f.RatingStars,{rating:t.stars,size:"sm"}),!!t.totalReviews&&e.jsxs(d.Typography,{as:"p",defaultVariant:"labelSm",emphasis:!0,children:[t.totalReviews," reviews"]})]})]}),e.jsx(w.Features,{features:C}),e.jsxs("div",{className:a.actions,children:[e.jsx(k.SmartCallout,{label:"HSA/FSA Eligible"}),!y&&e.jsxs(e.Fragment,{children:[e.jsx(j.Button,{variant:"primary",size:"lg",...l,onClick:v,children:l.label}),s&&e.jsx(_.TextButton,{...s,onClick:g,children:s.label})]})]})]}),e.jsx(A.ImageGallery,{className:a.gallery,images:b,label:T}),y&&e.jsxs("div",{className:a.plansSection,children:[e.jsxs("div",{className:a.plans,children:[e.jsx(d.Typography,{as:"h4",defaultVariant:"labelSm",emphasis:!0,weight:"regular",children:"Subscribe & Save"}),n.map(i=>e.jsx(I.PlanCard,{plan:i,onSelect:S,isActive:p===i.id},i.id))]}),e.jsxs("div",{className:a.actions,children:[e.jsx(j.Button,{variant:"primary",size:"lg",...l,onClick:v,children:l.label}),s&&e.jsx(_.TextButton,{...s,onClick:g,children:s.label})]})]})]})})};exports.IndividualProductCard=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../utils/cn/cn.cjs.js"),c=require("../../types/analytics/analytics.cjs.js"),a=require("../../src/modules/IndividualProductCard/individualProductCard.module.css"),k=require("../../components/PlainFeaturesGroup/PlainFeaturesGroup.cjs.js"),I=require("../../components/ImageGallery/ImageGallery.cjs.js"),_=require("../../components/RatingPreview/RatingPreview.cjs.js"),F=require("../../components/Quote/Quote.cjs.js"),y=require("../../components/Typography/Typography.cjs.js"),C=require("../../components/Button/Button.cjs.js"),G=require("../../components/TextButton/TextButton.cjs.js"),R=require("./components/Features/Features.cjs.js"),B=require("./components/PlanCard/PlanCard.cjs.js"),V=require("../../components/SmartCallout/SmartCallout.cjs.js"),O=({zenpatientId:N,name:o,description:m,features:b,featuresGroup:p,images:q,quote:h,label:w,rating:v,ratingText:j,plans:s,button:t,textButton:r,selectedPlanId:g,onSelectPlan:l,trackingEvent:E,trackingLocation:x,signupUrl:T})=>{const d=s&&s.length>0&&l,f=i=>{if(l==null||l(i),E){const n=s==null?void 0:s.find(A=>A.id===i);c.EAnalyticsEventType.interaction,n==null||n.price,n==null||n.duration}},P=()=>{var n;const i={event:c.EAnalyticsEvent.ctaClicked,location:x||"not_set",type:c.EAnalyticsEventType.interaction,component:"IndividualProductCard",element:"primary_button",payload:{productId:N,ctaLabel:t.label,productName:o,selectedPlanId:g||"none"}};(n=window.eventBus)==null||n.emit("analytics",i)},S=()=>{var i;(i=window.eventBus)==null||i.emit("analytics",{event:c.EAnalyticsEvent.ctaClicked,location:x||"not_set",type:c.EAnalyticsEventType.interaction,component:"IndividualProductCard",element:"secondary_button",payload:{ctaLabel:r==null?void 0:r.label,productName:o}})};return e.jsx("section",{className:a.root,children:e.jsxs("div",{className:u.cn(a.container,!d&&a.noPlans),children:[e.jsxs("div",{className:a.gallery,children:[e.jsx(I.ImageGallery,{images:q,label:w}),e.jsx("div",{className:u.cn(a.ratingContainer,a.mobileOnly),children:e.jsx(_.RatingPreview,{rating:v,text:j||"No reviews yet"})}),h&&e.jsx("div",{className:a.quoteWrapper,children:e.jsx(F.Quote,{...h})})]}),e.jsxs("div",{className:a.info,children:[e.jsxs("div",{className:a.infoHeader,children:[e.jsx(y.Typography,{as:"h3",defaultVariant:"displayXs",mobileVariant:"headingLg",weight:"regular",children:o}),!!m&&e.jsx(y.Typography,{as:"p",defaultVariant:"bodySm",className:a.infoDescription,weight:"regular",children:m})]}),!d&&e.jsxs("div",{className:a.actions,children:[e.jsx(C.Button,{variant:"primary",size:"lg",...t,onClick:P,children:t.label}),r&&e.jsx(G.TextButton,{...r,onClick:S,children:r.label})]}),e.jsx(R.Features,{features:b}),p&&e.jsx(k.PlainFeaturesGroup,{...p})]}),d&&e.jsxs("div",{className:a.plansSection,children:[e.jsxs("div",{className:a.plans,children:[e.jsx(y.Typography,{as:"h4",defaultVariant:"labelSm",emphasis:!0,weight:"regular",children:"Subscribe & Save"}),s.map(i=>e.jsx(B.PlanCard,{plan:i,onSelect:f,isActive:g===i.id},i.id))]}),e.jsx("div",{className:u.cn(a.ratingContainer,a.desktopOnly),children:e.jsx(_.RatingPreview,{rating:v,text:j||"No reviews yet"})}),e.jsxs("div",{className:a.actions,children:[e.jsx(C.Button,{variant:"primary",size:"lg",as:"a",href:T||"#0",...t,children:t.label}),e.jsx(V.SmartCallout,{label:"HSA/FSA Eligible"})]})]})]})})};exports.IndividualProductCard=O;

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

@@ -2,18 +2,23 @@ import { ButtonProps } from '../../components/Button';
 import { TextButtonProps } from '../../components/TextButton';
 import { TProductFeature, TProductPlan } from './types';
 import { EAnalyticsEvent } from '../../types/analytics';
+import { QuoteProps } from '../../components/Quote';
+import { TPlainFeaturesGroupProps } from '../../components/PlainFeaturesGroup/PlainFeaturesGroup';
 
 type IndividualProductCardProps = {
     zenpatientId: string;
     name: string;
     images: Array<string>;
+    quote?: QuoteProps;
     features: Array<TProductFeature>;
+    featuresGroup?: TPlainFeaturesGroupProps;
     description?: string;
     label?: string;
     rating?: {
         stars?: number;
         totalReviews?: number;
     };
+    ratingText?: string;
     button: {
         label: string;
     } & ButtonProps;
@@ -25,6 +30,7 @@ type IndividualProductCardProps = {
     onSelectPlan?: (planId: TProductPlan['id']) => void;
     trackingEvent?: EAnalyticsEvent.userSelectedPlan;
     trackingLocation?: string;
+    signupUrl?: string;
 };
-export declare const IndividualProductCard: ({ zenpatientId, name, description, features, images, label, rating, plans, button, textButton, selectedPlanId, onSelectPlan, trackingEvent, trackingLocation, }: IndividualProductCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IndividualProductCard: ({ zenpatientId, name, description, features, featuresGroup, images, quote, label, rating, ratingText, plans, button, textButton, selectedPlanId, onSelectPlan, trackingEvent, trackingLocation, signupUrl, }: IndividualProductCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,118 +1,120 @@
-import { jsx as i, jsxs as r, Fragment as T } from "react/jsx-runtime";
-import { cn as _ } from "../../utils/cn/cn.es.js";
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { cn as m } from "../../utils/cn/cn.es.js";
 import { EAnalyticsEventType as p, EAnalyticsEvent as b } from "../../types/analytics/analytics.es.js";
-import a from "../../modules/IndividualProductCard/individualProductCard.module.css";
-import { Typography as t } from "../../components/Typography/Typography.es.js";
-import { RatingStars as z } from "../../components/RatingStars/RatingStars.es.js";
-import { Features as F } from "./components/Features/Features.es.js";
-import { SmartCallout as R } from "../../components/SmartCallout/SmartCallout.es.js";
-import { Button as g } from "../../components/Button/Button.es.js";
-import { TextButton as N } from "../../components/TextButton/TextButton.es.js";
-import { ImageGallery as j } from "../../components/ImageGallery/ImageGallery.es.js";
-import { PlanCard as D } from "./components/PlanCard/PlanCard.es.js";
-const Y = ({
-  zenpatientId: w,
-  name: m,
+import e from "../../modules/IndividualProductCard/individualProductCard.module.css";
+import { PlainFeaturesGroup as D } from "../../components/PlainFeaturesGroup/PlainFeaturesGroup.es.js";
+import { ImageGallery as G } from "../../components/ImageGallery/ImageGallery.es.js";
+import { RatingPreview as w } from "../../components/RatingPreview/RatingPreview.es.js";
+import { Quote as H } from "../../components/Quote/Quote.es.js";
+import { Typography as h } from "../../components/Typography/Typography.es.js";
+import { Button as k } from "../../components/Button/Button.es.js";
+import { TextButton as L } from "../../components/TextButton/TextButton.es.js";
+import { Features as O } from "./components/Features/Features.es.js";
+import { PlanCard as P } from "./components/PlanCard/PlanCard.es.js";
+import { SmartCallout as Q } from "../../components/SmartCallout/SmartCallout.es.js";
+const ei = ({
+  zenpatientId: E,
+  name: d,
   description: v,
-  features: k,
+  features: A,
+  featuresGroup: y,
   images: S,
-  label: E,
-  rating: n,
+  quote: f,
+  label: I,
+  rating: u,
+  ratingText: N,
   plans: o,
-  button: s,
-  textButton: l,
-  selectedPlanId: y,
-  onSelectPlan: d,
-  trackingEvent: A,
-  trackingLocation: f
+  button: n,
+  textButton: t,
+  selectedPlanId: g,
+  onSelectPlan: c,
+  trackingEvent: V,
+  trackingLocation: C,
+  signupUrl: _
 }) => {
-  const h = o && o.length > 0 && d, V = (e) => {
-    if (d == null || d(e), A) {
-      const c = o == null ? void 0 : o.find((I) => I.id === e);
-      p.interaction, c == null || c.price, c == null || c.duration;
+  const s = o && o.length > 0 && c, F = (a) => {
+    if (c == null || c(a), V) {
+      const r = o == null ? void 0 : o.find((z) => z.id === a);
+      p.interaction, r == null || r.price, r == null || r.duration;
     }
-  }, u = () => {
-    var c;
-    const e = {
+  }, T = () => {
+    var r;
+    const a = {
       event: b.ctaClicked,
-      location: f || "not_set",
+      location: C || "not_set",
       type: p.interaction,
       component: "IndividualProductCard",
       element: "primary_button",
       payload: {
-        productId: w,
-        ctaLabel: s.label,
-        productName: m,
-        selectedPlanId: y || "none"
+        productId: E,
+        ctaLabel: n.label,
+        productName: d,
+        selectedPlanId: g || "none"
       }
     };
-    (c = window.eventBus) == null || c.emit("analytics", e);
-  }, C = () => {
-    var e;
-    (e = window.eventBus) == null || e.emit("analytics", {
+    (r = window.eventBus) == null || r.emit("analytics", a);
+  }, j = () => {
+    var a;
+    (a = window.eventBus) == null || a.emit("analytics", {
       event: b.ctaClicked,
-      location: f || "not_set",
+      location: C || "not_set",
       type: p.interaction,
       component: "IndividualProductCard",
       element: "secondary_button",
       payload: {
-        ctaLabel: l == null ? void 0 : l.label,
-        productName: m
+        ctaLabel: t == null ? void 0 : t.label,
+        productName: d
       }
     });
   };
-  return /* @__PURE__ */ i("section", { className: a.root, children: /* @__PURE__ */ r("div", { className: _(a.container, !h && a.noPlans), children: [
-    /* @__PURE__ */ r("div", { className: a.info, children: [
-      /* @__PURE__ */ r("div", { className: a.infoHeader, children: [
-        /* @__PURE__ */ i(t, { as: "h3", defaultVariant: "displayXs", mobileVariant: "headingLg", weight: "regular", children: m }),
+  return /* @__PURE__ */ i("section", { className: e.root, children: /* @__PURE__ */ l("div", { className: m(e.container, !s && e.noPlans), children: [
+    /* @__PURE__ */ l("div", { className: e.gallery, children: [
+      /* @__PURE__ */ i(G, { images: S, label: I }),
+      /* @__PURE__ */ i("div", { className: m(e.ratingContainer, e.mobileOnly), children: /* @__PURE__ */ i(w, { rating: u, text: N || "No reviews yet" }) }),
+      f && /* @__PURE__ */ i("div", { className: e.quoteWrapper, children: /* @__PURE__ */ i(H, { ...f }) })
+    ] }),
+    /* @__PURE__ */ l("div", { className: e.info, children: [
+      /* @__PURE__ */ l("div", { className: e.infoHeader, children: [
+        /* @__PURE__ */ i(h, { as: "h3", defaultVariant: "displayXs", mobileVariant: "headingLg", weight: "regular", children: d }),
         !!v && /* @__PURE__ */ i(
-          t,
+          h,
           {
             as: "p",
             defaultVariant: "bodySm",
-            className: a.infoDescription,
+            className: e.infoDescription,
             weight: "regular",
             children: v
           }
-        ),
-        n && /* @__PURE__ */ r("div", { className: a.ratingContainer, children: [
-          !!n.stars && /* @__PURE__ */ i(z, { rating: n.stars, size: "sm" }),
-          !!n.totalReviews && /* @__PURE__ */ r(t, { as: "p", defaultVariant: "labelSm", emphasis: !0, children: [
-            n.totalReviews,
-            " reviews"
-          ] })
-        ] })
+        )
       ] }),
-      /* @__PURE__ */ i(F, { features: k }),
-      /* @__PURE__ */ r("div", { className: a.actions, children: [
-        /* @__PURE__ */ i(R, { label: "HSA/FSA Eligible" }),
-        !h && /* @__PURE__ */ r(T, { children: [
-          /* @__PURE__ */ i(g, { variant: "primary", size: "lg", ...s, onClick: u, children: s.label }),
-          l && /* @__PURE__ */ i(N, { ...l, onClick: C, children: l.label })
-        ] })
-      ] })
+      !s && /* @__PURE__ */ l("div", { className: e.actions, children: [
+        /* @__PURE__ */ i(k, { variant: "primary", size: "lg", ...n, onClick: T, children: n.label }),
+        t && /* @__PURE__ */ i(L, { ...t, onClick: j, children: t.label })
+      ] }),
+      /* @__PURE__ */ i(O, { features: A }),
+      y && /* @__PURE__ */ i(D, { ...y })
     ] }),
-    /* @__PURE__ */ i(j, { className: a.gallery, images: S, label: E }),
-    h && /* @__PURE__ */ r("div", { className: a.plansSection, children: [
-      /* @__PURE__ */ r("div", { className: a.plans, children: [
-        /* @__PURE__ */ i(t, { as: "h4", defaultVariant: "labelSm", emphasis: !0, weight: "regular", children: "Subscribe & Save" }),
-        o.map((e) => /* @__PURE__ */ i(
-          D,
+    s && /* @__PURE__ */ l("div", { className: e.plansSection, children: [
+      /* @__PURE__ */ l("div", { className: e.plans, children: [
+        /* @__PURE__ */ i(h, { as: "h4", defaultVariant: "labelSm", emphasis: !0, weight: "regular", children: "Subscribe & Save" }),
+        o.map((a) => /* @__PURE__ */ i(
+          P,
           {
-            plan: e,
-            onSelect: V,
-            isActive: y === e.id
+            plan: a,
+            onSelect: F,
+            isActive: g === a.id
           },
-          e.id
+          a.id
         ))
       ] }),
-      /* @__PURE__ */ r("div", { className: a.actions, children: [
-        /* @__PURE__ */ i(g, { variant: "primary", size: "lg", ...s, onClick: u, children: s.label }),
-        l && /* @__PURE__ */ i(N, { ...l, onClick: C, children: l.label })
+      /* @__PURE__ */ i("div", { className: m(e.ratingContainer, e.desktopOnly), children: /* @__PURE__ */ i(w, { rating: u, text: N || "No reviews yet" }) }),
+      /* @__PURE__ */ l("div", { className: e.actions, children: [
+        /* @__PURE__ */ i(k, { variant: "primary", size: "lg", as: "a", href: _ || "#0", ...n, children: n.label }),
+        /* @__PURE__ */ i(Q, { label: "HSA/FSA Eligible" })
       ] })
     ] })
   ] }) });
 };
 export {
-  Y as IndividualProductCard
+  ei as IndividualProductCard
 };

package/dist/modules/IndividualProductCard/individualProductCard.module.css

@@ -10,15 +10,18 @@
     max-width: var(--content-max-width);
     padding: 64px 120px;
     display: grid;
-    grid-template-columns: 300px 1fr 300px;
-    grid-template-areas: "info gallery plans";
-    gap: 64px;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: 
+        "gallery info"
+        "gallery plans";
+    column-gap: 64px;
+    row-gap: 32px;
 }
 
 .container.noPlans {
     grid-template-columns: 300px 1fr;
-    grid-template-areas: "info gallery";
-    gap: 120px;
+    grid-template-areas: "gallery info";
+    column-gap: 120px;
 }
 
 .info {
@@ -42,6 +45,16 @@
 
 .gallery {
     grid-area: gallery;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+.quoteWrapper {
+    width: 100%;
+    max-width: 50ch;
+    margin: 0 auto;
 }
 
 .plansSection {
@@ -64,11 +77,7 @@
 }
 
 .ratingContainer {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: flex-start;
-    gap: var(--spacing-12);
+    margin: 0 auto;
 }
 
 .actions {
@@ -80,11 +89,18 @@
     gap: 16px;
 }
 
+.mobileOnly {
+    display: none;
+}
+
+.desktopOnly {
+    display: block;
+}
+
 @media (width <= 1260px) {
     .container {
         padding: 64px 64px;
-        grid-template-columns: 275px 1fr 275px;
-        gap: 40px;
+        column-gap: 40px;
     }
 }
 
@@ -92,15 +108,7 @@
     .container,
     .container.noPlans {
         padding: 24px 20px 64px;
-        grid-template-columns: 1fr 1fr;
-        gap: 24px;
-        grid-template-areas:
-            "info gallery"
-            "plans plans";
-    }
-
-    .gallery {
-        max-width: 472px;
+        column-gap: 24px;
     }
 }
 
@@ -109,10 +117,18 @@
     .container.noPlans {
         padding: 24px 20px 64px;
         grid-template-columns: 1fr;
-        gap: 24px;
+        column-gap: 24px;
         grid-template-areas:
             "gallery"
             "info"
             "plans";
     }
+
+    .desktopOnly {
+        display: none;
+    }
+
+    .mobileOnly {
+        display: block;
+    }
 }

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

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

@@ -4,12 +4,12 @@ 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 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";
+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,
@@ -37,7 +37,7 @@ const z = ({
     /* @__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(E, { ...n }) })
+      n && /* @__PURE__ */ a("div", { className: i.quoteWrapper, children: /* @__PURE__ */ a(V, { ...n }) })
     ] }),
     /* @__PURE__ */ e("div", { className: i.rightColumn, children: [
       /* @__PURE__ */ e("div", { className: i.header, children: [
@@ -53,13 +53,13 @@ const z = ({
           }
         )
       ] }),
-      /* @__PURE__ */ a(C, { features: v }),
-      l && /* @__PURE__ */ a(A, { ...l }),
-      o && /* @__PURE__ */ a(T, { items: o }),
+      /* @__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(
-          V,
+          T,
           {
             as: "a",
             variant: "primary",

package/package.json

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