@zenpatient-org/healthspan-marketing-ui 0.1.171 → 0.2.0

package/dist/modules/ImageWithBenefits/ImageWithBenefits.es.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { TypeBadge as h } from "../../components/TypeBadge/TypeBadge.es.js";
+import a from "../../modules/ImageWithBenefits/imageWithBenefits.module.css";
 import { Typography as i } from "../../components/Typography/Typography.es.js";
-import a from "./imageWithBenefits.module.css.es.js";
+import { TypeBadge as h } from "../../components/TypeBadge/TypeBadge.es.js";
 const u = ({
   image: o,
   label: r,

package/dist/modules/ImageWithBenefits/imageWithBenefits.module.css

@@ -0,0 +1,208 @@
+.root {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    display: grid;
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: 64px 60px 0px;
+}
+
+.imageContainer {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.image {
+    border-radius: var(--border-radius-xl);
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.mobileImage {
+    display: none;
+}
+
+.content {
+    align-self: center;
+    grid-column: 1;
+    grid-row: 1;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    padding: 60px 80px;
+}
+
+.label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    width: fit-content;
+    margin-bottom: 16px;
+    background-color: var(--color-bg-fill-alpha-white-10);
+    border-radius: 4px;
+    backdrop-filter: blur(6px);
+    padding: 4px 8px;
+}
+
+.title {
+    max-width: 460px;
+    margin-bottom: 32px;
+}
+
+.benefitContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.benefitItem {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.benefitText {
+    flex: 1;
+}
+
+.content[data-label-color='white'] .label {
+    color: var(--color-text-primary-inverted);
+}
+
+.content[data-label-color='black'] .label {
+    color: var(--color-text-primary);
+}
+
+.content[data-label-color='solar'] .label {
+    color: var(--color-text-primary-brand-solar);
+}
+
+.content[data-label-color='indigo'] .label {
+    color: var(--color-text-primary-brand-indigo);
+}
+
+.content[data-title-color='white'] .title {
+    color: var(--color-text-primary-inverted);
+}
+
+.content[data-title-color='black'] .title {
+    color: var(--color-text-primary);
+}
+
+.content[data-title-color='solar'] .title {
+    color: var(--color-text-primary-brand-solar);
+}
+
+.content[data-title-color='indigo'] .title {
+    color: var(--color-text-primary-brand-indigo);
+}
+
+.content[data-benefits-color='white'] .benefitText {
+    color: var(--color-text-primary-inverted);
+}
+
+.content[data-benefits-color='black'] .benefitText {
+    color: var(--color-text-primary);
+}
+
+.content[data-benefits-color='solar'] .benefitText {
+    color: var(--color-text-primary-brand-solar);
+}
+
+.content[data-benefits-color='indigo'] .benefitText {
+    color: var(--color-text-primary-brand-indigo);
+}
+
+@media (width <= 768px) {
+    .container {
+        padding: 40px 20px 40px;
+        gap: 20px;
+        min-width: 250px;
+    }
+
+    .content {
+        grid-row: 2;
+        padding: 0;
+        max-width: unset;
+    }
+
+    .imageContainer {
+        min-height: 105px;
+    }
+
+    .image {
+        display: none;
+    }
+
+    .mobileImage {
+        display: block;
+        border-radius: var(--border-radius-lg);
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .label {
+        background-color: var(--color-bg-fill-primary);
+    }
+
+    .title {
+        max-width: unset;
+        margin-bottom: 24px;
+    }
+
+    .content[data-mobile-label-color='white'] .label {
+        color: var(--color-text-primary-inverted);
+    }
+
+    .content[data-mobile-label-color='black'] .label {
+        color: var(--color-text-primary);
+    }
+
+    .content[data-mobile-label-color='solar'] .label {
+        color: var(--color-text-primary-brand-solar);
+    }
+
+    .content[data-mobile-label-color='indigo'] .label {
+        color: var(--color-text-primary-brand-indigo);
+    }
+
+    .content[data-mobile-title-color='white'] .title {
+        color: var(--color-text-primary-inverted);
+    }
+
+    .content[data-mobile-title-color='black'] .title {
+        color: var(--color-text-primary);
+    }
+
+    .content[data-mobile-title-color='solar'] .title {
+        color: var(--color-text-primary-brand-solar);
+    }
+
+    .content[data-mobile-title-color='indigo'] .title {
+        color: var(--color-text-primary-brand-indigo);
+    }
+
+    .content[data-mobile-benefits-color='white'] .benefitText {
+        color: var(--color-text-primary-inverted);
+    }
+
+    .content[data-mobile-benefits-color='black'] .benefitText {
+        color: var(--color-text-primary);
+    }
+
+    .content[data-mobile-benefits-color='solar'] .benefitText {
+        color: var(--color-text-primary-brand-solar);
+    }
+
+    .content[data-mobile-benefits-color='indigo'] .benefitText {
+        color: var(--color-text-primary-brand-indigo);
+    }
+}

package/dist/modules/ImageWithText/ImageWithText.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),f=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),s=require("../../components/Typography/Typography.cjs.js"),y=require("../../utils/cn/cn.cjs.js"),d=require("./constants.cjs.js"),e=require("./imageWithText.module.css.cjs.js"),x=({image:h,text:i,title:l,view:t,colorScheme:u,textColor:m,mobileTextColor:g,titleColor:n,mobileTitleColor:c,titleHighlightColor:r,mobileTitleHighlightColor:o,mobileImage:p})=>a.jsx("section",{className:e.default.root,"data-scheme":u,children:a.jsxs("div",{className:e.default.container,"data-view":t,children:[a.jsxs("div",{className:e.default.imageContainer,children:[a.jsx("img",{src:h,alt:"background image",className:e.default.image,"data-color":m}),a.jsx("img",{src:p||h,alt:"mobile background image",className:e.default.mobileImage})]}),a.jsxs("div",{className:y.cn(e.default.content,{[e.default.textAlignLeft]:t==="plain"||t==="plain_with_title",[e.default.textAlignRight]:t==="complex"}),"data-view":t,"data-text-color":m,"data-mobile-text-color":g,"data-title-color":n,"data-mobile-title-color":c,"data-title-highlight-color":r,"data-mobile-title-highlight-color":o,children:[t==="complex"&&a.jsxs("div",{className:e.default.richTextContainer,style:{"--highlight-color-custom":d.COLORS[n||"white"],"--highlight-emphasize-custom":d.COLORS[r||"white"],"--highlight-color-custom-mobile":d.COLORS[c||"white"],"--highlight-emphasize-custom-mobile":d.COLORS[o||"white"]},children:[l&&a.jsx(f.HighlightedTitle,{colorScheme:n||r||c||o?"custom":"dark",title:l,defaultVariant:"displayXs",mobileVariant:"headingLg"}),i&&a.jsx(s.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodySm",children:i})]}),t==="plain"&&i&&a.jsx("div",{className:e.default.textContainer,children:a.jsx(s.Typography,{defaultVariant:"displayXs",mobileVariant:"headingXs",children:i})}),t==="plain_with_title"&&a.jsxs("div",{className:e.default.plainWithTitleContainer,children:[l&&a.jsx(s.Typography,{defaultVariant:"displayMd",mobileVariant:"headingLg",className:e.default.titleOfPlainWithTitle,children:l}),i&&a.jsx(s.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodyMd",className:e.default.textOfPlainWithTitle,children:i})]})]})]})});exports.ImageWithText=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("../../utils/cn/cn.cjs.js"),n=require("./constants.cjs.js"),e=require("../../src/modules/ImageWithText/imageWithText.module.css"),x=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),b=({image:h,text:t,title:s,view:i,colorScheme:g,textColor:m,mobileTextColor:p,titleColor:c,mobileTitleColor:r,titleHighlightColor:d,mobileTitleHighlightColor:o,mobileImage:u})=>a.jsx("section",{className:e.root,"data-scheme":g,children:a.jsxs("div",{className:e.container,"data-view":i,children:[a.jsxs("div",{className:e.imageContainer,children:[a.jsx("img",{src:h,alt:"background image",className:e.image,"data-color":m}),a.jsx("img",{src:u||h,alt:"mobile background image",className:e.mobileImage})]}),a.jsxs("div",{className:y.cn(e.content,{[e.textAlignLeft]:i==="plain"||i==="plain_with_title",[e.textAlignRight]:i==="complex"}),"data-view":i,"data-text-color":m,"data-mobile-text-color":p,"data-title-color":c,"data-mobile-title-color":r,"data-title-highlight-color":d,"data-mobile-title-highlight-color":o,children:[i==="complex"&&a.jsxs("div",{className:e.richTextContainer,style:{"--highlight-color-custom":n.COLORS[c||"white"],"--highlight-emphasize-custom":n.COLORS[d||"white"],"--highlight-color-custom-mobile":n.COLORS[r||"white"],"--highlight-emphasize-custom-mobile":n.COLORS[o||"white"]},children:[s&&a.jsx(x.HighlightedTitle,{colorScheme:c||d||r||o?"custom":"dark",title:s,defaultVariant:"displayXs",mobileVariant:"headingLg"}),t&&a.jsx(l.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t})]}),i==="plain"&&t&&a.jsx("div",{className:e.textContainer,children:a.jsx(l.Typography,{defaultVariant:"displayXs",mobileVariant:"headingXs",children:t})}),i==="plain_with_title"&&a.jsxs("div",{className:e.plainWithTitleContainer,children:[s&&a.jsx(l.Typography,{defaultVariant:"displayMd",mobileVariant:"headingLg",className:e.titleOfPlainWithTitle,children:s}),t&&a.jsx(l.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodyMd",className:e.textOfPlainWithTitle,children:t})]})]})]})});exports.ImageWithText=b;

package/dist/modules/ImageWithText/ImageWithText.es.js

@@ -1,9 +1,9 @@
 import { jsx as i, jsxs as l } from "react/jsx-runtime";
-import { HighlightedTitle as u } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as n } from "../../components/Typography/Typography.es.js";
-import { cn as y } from "../../utils/cn/cn.es.js";
-import { COLORS as d } from "./constants.es.js";
-import a from "./imageWithText.module.css.es.js";
+import { cn as u } from "../../utils/cn/cn.es.js";
+import { COLORS as n } from "./constants.es.js";
+import a from "../../modules/ImageWithText/imageWithText.module.css";
+import { HighlightedTitle as y } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as d } from "../../components/Typography/Typography.es.js";
 const W = ({
   image: h,
   text: e,
@@ -25,7 +25,7 @@ const W = ({
   /* @__PURE__ */ l(
     "div",
     {
-      className: y(a.content, {
+      className: u(a.content, {
         [a.textAlignLeft]: t === "plain" || t === "plain_with_title",
         [a.textAlignRight]: t === "complex"
       }),
@@ -42,14 +42,14 @@ const W = ({
           {
             className: a.richTextContainer,
             style: {
-              "--highlight-color-custom": d[m || "white"],
-              "--highlight-emphasize-custom": d[o || "white"],
-              "--highlight-color-custom-mobile": d[r || "white"],
-              "--highlight-emphasize-custom-mobile": d[s || "white"]
+              "--highlight-color-custom": n[m || "white"],
+              "--highlight-emphasize-custom": n[o || "white"],
+              "--highlight-color-custom-mobile": n[r || "white"],
+              "--highlight-emphasize-custom-mobile": n[s || "white"]
             },
             children: [
               c && /* @__PURE__ */ i(
-                u,
+                y,
                 {
                   colorScheme: m || o || r || s ? "custom" : "dark",
                   title: c,
@@ -57,14 +57,14 @@ const W = ({
                   mobileVariant: "headingLg"
                 }
               ),
-              e && /* @__PURE__ */ i(n, { defaultVariant: "bodyMd", mobileVariant: "bodySm", children: e })
+              e && /* @__PURE__ */ i(d, { defaultVariant: "bodyMd", mobileVariant: "bodySm", children: e })
             ]
           }
         ),
-        t === "plain" && e && /* @__PURE__ */ i("div", { className: a.textContainer, children: /* @__PURE__ */ i(n, { defaultVariant: "displayXs", mobileVariant: "headingXs", children: e }) }),
+        t === "plain" && e && /* @__PURE__ */ i("div", { className: a.textContainer, children: /* @__PURE__ */ i(d, { defaultVariant: "displayXs", mobileVariant: "headingXs", children: e }) }),
         t === "plain_with_title" && /* @__PURE__ */ l("div", { className: a.plainWithTitleContainer, children: [
           c && /* @__PURE__ */ i(
-            n,
+            d,
             {
               defaultVariant: "displayMd",
               mobileVariant: "headingLg",
@@ -73,7 +73,7 @@ const W = ({
             }
           ),
           e && /* @__PURE__ */ i(
-            n,
+            d,
             {
               defaultVariant: "bodyMd",
               mobileVariant: "bodyMd",

package/dist/modules/ImageWithText/imageWithText.module.css

@@ -0,0 +1,245 @@
+.root {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.root[data-scheme='dark'] {
+    background-color: black;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: 64px 60px 120px;
+    position: relative;
+}
+
+.container[data-view='plain_with_title'] {
+    padding: 120px 60px;
+}
+
+.content {
+    display: flex;
+    align-items: center;
+    padding: 80px;
+    position: absolute;
+    z-index: 10;
+}
+
+.content[data-view='plain_with_title'] {
+    padding: 0px 90px;
+}
+
+.textAlignLeft {
+    left: 80px;
+}
+
+.textAlignRight {
+    right: 80px;
+}
+
+.textContainer {
+    max-width: 572px;
+    color: var(--color-text-primary-inverted);
+}
+
+.richTextContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    max-width: 360px;
+    color: var(--color-text-primary-inverted);
+}
+
+.plainWithTitleContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    max-width: 480px;
+    color: var(--color-text-primary-inverted);
+}
+
+.imageContainer {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-height: 584px;
+    overflow: hidden;
+    border-radius: var(--border-radius-xl);
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+}
+
+.mobileImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    display: none;
+}
+
+@media (width <= 1024px) and (width >= 768px) {
+    .content {
+        padding: 40px;
+    }
+
+    .textContainer {
+        max-width: 472px;
+    }
+    .textContainer span {
+        font-size: var(--font-size-heading-xl);
+    }
+}
+
+@media (width <= 768px) {
+    .container[data-view='plain_with_title'] {
+        padding: 64px 20px;
+    }
+
+    .container {
+        gap: 20px;
+        padding: 40px 20px;
+    }
+
+    .content {
+        border-radius: var(--border-radius-lg);
+        padding: 0;
+    }
+
+    .content[data-view='plain_with_title'] {
+        padding: 0;
+    }
+
+    .textContainer {
+        color: var(--color-text-primary);
+        max-width: 100%;
+    }
+
+    .plainWithTitleContainer {
+        color: var(--color-text-primary);
+    }
+
+    .richTextContainer {
+        max-width: 100%;
+        gap: 16px;
+    }
+
+    .imageContainer {
+        border-radius: var(--border-radius-lg);
+    }
+
+    .image {
+        aspect-ratio: 335/250.94;
+        display: none;
+    }
+
+    .mobileImage {
+        display: block;
+    }
+
+    .content {
+        position: static;
+    }
+
+    .textAlignLeft {
+        left: auto;
+    }
+
+    .textAlignRight {
+        right: auto;
+    }
+}
+
+.content[data-text-color='white'] .textContainer,
+.content[data-text-color='white'] .richTextContainer,
+.content[data-text-color='white'] .plainWithTitleContainer .textOfPlainWithTitle {
+    color: var(--color-text-primary-inverted);
+}
+
+.content[data-text-color='black'] .textContainer,
+.content[data-text-color='black'] .richTextContainer,
+.content[data-text-color='black'] .plainWithTitleContainer .textOfPlainWithTitle {
+    color: var(--color-text-primary);
+}
+
+.content[data-text-color='solar'] .textContainer,
+.content[data-text-color='solar'] .richTextContainer,
+.content[data-text-color='solar'] .plainWithTitleContainer .textOfPlainWithTitle {
+    color: var(--color-text-primary-brand-solar);
+}
+
+.content[data-text-color='indigo'] .textContainer,
+.content[data-text-color='indigo'] .richTextContainer,
+.content[data-text-color='indigo'] .plainWithTitleContainer .textOfPlainWithTitle {
+    color: var(--color-text-primary-brand-indigo);
+}
+
+.content[data-title-color='white'] .plainWithTitleContainer .titleOfPlainWithTitle {
+    color: var(--color-text-primary-inverted);
+}
+
+.content[data-title-color='black'] .plainWithTitleContainer .titleOfPlainWithTitle {
+    color: var(--color-text-primary);
+}
+
+.content[data-title-color='solar'] .plainWithTitleContainer .titleOfPlainWithTitle {
+    color: var(--color-text-primary-brand-solar);
+}
+
+.content[data-title-color='indigo'] .plainWithTitleContainer .titleOfPlainWithTitle {
+    color: var(--color-text-primary-brand-indigo);
+}
+
+@media (width <= 768px) {
+    .content[data-mobile-text-color='white'] .textContainer,
+    .content[data-mobile-text-color='white'] .richTextContainer,
+    .content[data-mobile-text-color='white'] .plainWithTitleContainer .textOfPlainWithTitle {
+        color: var(--color-text-primary-inverted);
+    }
+
+    .content[data-mobile-text-color='black'] .textContainer,
+    .content[data-mobile-text-color='black'] .richTextContainer,
+    .content[data-mobile-text-color='black'] .plainWithTitleContainer .textOfPlainWithTitle {
+        color: var(--color-text-primary);
+    }
+
+    .content[data-mobile-text-color='solar'] .textContainer,
+    .content[data-mobile-text-color='solar'] .richTextContainer,
+    .content[data-mobile-text-color='solar'] .plainWithTitleContainer .textOfPlainWithTitle {
+        color: var(--color-text-primary-brand-solar);
+    }
+
+    .content[data-mobile-text-color='indigo'] .textContainer,
+    .content[data-mobile-text-color='indigo'] .richTextContainer,
+    .content[data-mobile-text-color='indigo'] .plainWithTitleContainer .textOfPlainWithTitle {
+        color: var(--color-text-primary-brand-indigo);
+    }
+
+    .content[data-mobile-title-color='white'] .plainWithTitleContainer .titleOfPlainWithTitle {
+        color: var(--color-text-primary-inverted);
+    }
+
+    .content[data-mobile-title-color='black'] .plainWithTitleContainer .titleOfPlainWithTitle {
+        color: var(--color-text-primary);
+    }
+
+    .content[data-mobile-title-color='solar'] .plainWithTitleContainer .titleOfPlainWithTitle {
+        color: var(--color-text-primary-brand-solar);
+    }
+
+    .content[data-mobile-title-color='indigo'] .plainWithTitleContainer .titleOfPlainWithTitle {
+        color: var(--color-text-primary-brand-indigo);
+    }
+}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),S=require("../../utils/cn/cn.cjs.js"),j=require("../../components/Button/Button.cjs.js"),f=require("../../components/TextButton/TextButton.cjs.js"),E=require("../../components/ImageGallery/ImageGallery.cjs.js"),d=require("../../components/Typography/Typography.cjs.js"),w=require("../../components/SmartCallout/SmartCallout.cjs.js"),k=require("../../components/RatingStars/RatingStars.cjs.js"),A=require("./components/Features/Features.cjs.js"),I=require("./components/PlanCard/PlanCard.cjs.js"),c=require("../../types/analytics/analytics.cjs.js"),a=require("./individualProductCard.module.css.cjs.js"),R=({zenpatientId:_,name:u,description:y,features:C,images:x,label:b,rating:l,plans:t,button:n,textButton:s,selectedPlanId:p,onSelectPlan:o,trackingEvent:T,trackingLocation:h})=>{const m=t&&t.length>0&&o,q=i=>{if(o==null||o(i),T){const r=t==null?void 0:t.find(N=>N.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:_,ctaLabel:n.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.default.root,children:e.jsxs("div",{className:S.cn(a.default.container,!m&&a.default.noPlans),children:[e.jsxs("div",{className:a.default.info,children:[e.jsxs("div",{className:a.default.infoHeader,children:[e.jsx(d.Typography,{as:"h3",defaultVariant:"displayXs",mobileVariant:"headingLg",weight:"regular",children:u}),!!y&&e.jsx(d.Typography,{as:"p",defaultVariant:"bodySm",className:a.default.infoDescription,weight:"regular",children:y}),l&&e.jsxs("div",{className:a.default.ratingContainer,children:[!!l.stars&&e.jsx(k.RatingStars,{rating:l.stars,size:"sm"}),!!l.totalReviews&&e.jsxs(d.Typography,{as:"p",defaultVariant:"labelSm",emphasis:!0,children:[l.totalReviews," reviews"]})]})]}),e.jsx(A.Features,{features:C}),e.jsxs("div",{className:a.default.actions,children:[e.jsx(w.SmartCallout,{label:"HSA/FSA Eligible"}),!m&&e.jsxs(e.Fragment,{children:[e.jsx(j.Button,{variant:"primary",size:"lg",...n,onClick:v,children:n.label}),s&&e.jsx(f.TextButton,{...s,onClick:g,children:s.label})]})]})]}),e.jsx(E.ImageGallery,{className:a.default.gallery,images:x,label:b}),m&&e.jsxs("div",{className:a.default.plansSection,children:[e.jsxs("div",{className:a.default.plans,children:[e.jsx(d.Typography,{as:"h4",defaultVariant:"labelSm",emphasis:!0,weight:"regular",children:"Subscribe & Save"}),t.map(i=>e.jsx(I.PlanCard,{plan:i,onSelect:q,isActive:p===i.id},i.id))]}),e.jsxs("div",{className:a.default.actions,children:[e.jsx(j.Button,{variant:"primary",size:"lg",...n,onClick:v,children:n.label}),s&&e.jsx(f.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"),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;

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

@@ -1,15 +1,15 @@
 import { jsx as i, jsxs as r, Fragment as T } from "react/jsx-runtime";
 import { cn as _ } from "../../utils/cn/cn.es.js";
-import { Button as b } from "../../components/Button/Button.es.js";
-import { TextButton as g } from "../../components/TextButton/TextButton.es.js";
-import { ImageGallery as z } from "../../components/ImageGallery/ImageGallery.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 { SmartCallout as F } from "../../components/SmartCallout/SmartCallout.es.js";
-import { RatingStars as R } from "../../components/RatingStars/RatingStars.es.js";
-import { Features as j } from "./components/Features/Features.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";
-import { EAnalyticsEventType as p, EAnalyticsEvent as N } from "../../types/analytics/analytics.es.js";
-import a from "./individualProductCard.module.css.es.js";
 const Y = ({
   zenpatientId: w,
   name: m,
@@ -34,7 +34,7 @@ const Y = ({
   }, u = () => {
     var c;
     const e = {
-      event: N.ctaClicked,
+      event: b.ctaClicked,
       location: f || "not_set",
       type: p.interaction,
       component: "IndividualProductCard",
@@ -50,7 +50,7 @@ const Y = ({
   }, C = () => {
     var e;
     (e = window.eventBus) == null || e.emit("analytics", {
-      event: N.ctaClicked,
+      event: b.ctaClicked,
       location: f || "not_set",
       type: p.interaction,
       component: "IndividualProductCard",
@@ -76,23 +76,23 @@ const Y = ({
           }
         ),
         n && /* @__PURE__ */ r("div", { className: a.ratingContainer, children: [
-          !!n.stars && /* @__PURE__ */ i(R, { rating: n.stars, size: "sm" }),
+          !!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(j, { features: k }),
+      /* @__PURE__ */ i(F, { features: k }),
       /* @__PURE__ */ r("div", { className: a.actions, children: [
-        /* @__PURE__ */ i(F, { label: "HSA/FSA Eligible" }),
+        /* @__PURE__ */ i(R, { label: "HSA/FSA Eligible" }),
         !h && /* @__PURE__ */ r(T, { children: [
-          /* @__PURE__ */ i(b, { variant: "primary", size: "lg", ...s, onClick: u, children: s.label }),
-          l && /* @__PURE__ */ i(g, { ...l, onClick: C, children: l.label })
+          /* @__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(z, { className: a.gallery, images: S, label: E }),
+    /* @__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" }),
@@ -107,8 +107,8 @@ const Y = ({
         ))
       ] }),
       /* @__PURE__ */ r("div", { className: a.actions, children: [
-        /* @__PURE__ */ i(b, { variant: "primary", size: "lg", ...s, onClick: u, children: s.label }),
-        l && /* @__PURE__ */ i(g, { ...l, onClick: C, children: l.label })
+        /* @__PURE__ */ i(g, { variant: "primary", size: "lg", ...s, onClick: u, children: s.label }),
+        l && /* @__PURE__ */ i(N, { ...l, onClick: C, children: l.label })
       ] })
     ] })
   ] }) });

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

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