@zenpatient-org/healthspan-marketing-ui 0.2.40 → 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/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/dist/modules/YourProtocol/YourProtocol.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../utils/cn/cn.cjs.js"),s=require("../../src/modules/YourProtocol/yourProtocol.module.css"),c=require("../../types/analytics/analytics.cjs.js"),p=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),g=require("./components/ProtocolTags/ProtocolTags.cjs.js"),h=require("../../components/Callback/Callback.cjs.js"),y=({title:a,image:l,tags:d,callbackView:t})=>{var o,n,i,r;const u={event:c.EAnalyticsEvent.ctaClicked,type:c.EAnalyticsEventType.interaction,component:"YourProtocol",element:"Callback",payload:{ctaLink:(o=t==null?void 0:t.signupUrl)!=null?o:""}};return e.jsx("section",{className:s.root,children:e.jsxs("div",{className:s.container,children:[e.jsxs("div",{className:s.content,children:[e.jsx(p.HighlightedTitle,{title:a,className:s.title,defaultVariant:"displaySm",mobileVariant:"headingXl"}),e.jsx(g.ProtocolTags,{tags:d}),t&&e.jsx("div",{className:s.callback,children:e.jsx(h.Callback,{title:t.title,description:(n=t.description)!=null?n:"",price:(i=t.price)!=null?i:"",image:t.image,button:{href:(r=t.signupUrl)!=null?r:"",as:"a",analyticsProps:u},size:"sm",shape:t.shape})})]}),e.jsx("img",{src:l,alt:"Your Protocol",className:m.cn(s.image,s.desktop),width:481})]})})};exports.YourProtocol=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/YourProtocol/yourProtocol.module.css"),c=require("../../types/analytics/analytics.cjs.js"),h=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),y=require("../../components/Icon/Icon.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),u=require("../../components/Button/Button.cjs.js"),g=({title:o,image:r,tags:n,button:t,colorScheme:i="light"})=>{const d={event:c.EAnalyticsEvent.ctaClicked,type:c.EAnalyticsEventType.interaction,component:"YourProtocol",element:"Callback",payload:{ctaLink:t.link}},p=i==="dark"?"secondary":"primary";return e.jsx("section",{className:a.root,"data-scheme":i,children:e.jsxs("div",{className:a.container,children:[e.jsx(h.HighlightedTitle,{title:o,className:a.title,defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:i}),n.length>0&&e.jsx("div",{className:a.tagsList,children:n.map((s,m)=>e.jsxs("div",{className:a.tagItem,children:[s.icon&&e.jsx("div",{className:a.iconWrapper,children:e.jsx(y.Icon,{name:s.icon,className:a.icon})}),e.jsxs("div",{className:a.tagText,children:[e.jsx(l.Typography,{className:a.tagLabel,as:"p",defaultVariant:"headingXs",children:s.label}),s.description&&e.jsx(l.Typography,{className:a.tagDescription,as:"p",defaultVariant:"bodyMd",children:s.description})]})]},m))}),t&&e.jsx("div",{className:a.callbackButton,children:e.jsx(u.Button,{href:t.link,as:"a",analyticsProps:d,size:"lg",variant:p,children:t.label})}),e.jsx("img",{src:r,alt:"Your Protocol",className:a.image})]})})};exports.YourProtocol=g;

package/dist/modules/YourProtocol/YourProtocol.d.ts

@@ -1,11 +1,16 @@
 import { ReactNode } from 'react';
-import { TCallbackView, TTagView } from './types';
+import { TTagView } from './types';
+import { TColorScheme } from '../../types/common';
 
 type Props = {
     title: ReactNode;
     tags: Array<TTagView>;
-    callbackView: TCallbackView | null;
+    button: {
+        label: string;
+        link: string;
+    };
     image: string;
+    colorScheme?: TColorScheme;
 };
-export declare const YourProtocol: ({ title, image, tags, callbackView }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const YourProtocol: ({ title, image, tags, button, colorScheme }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modules/YourProtocol/YourProtocol.es.js

@@ -1,53 +1,42 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { cn as c } from "../../utils/cn/cn.es.js";
-import o from "../../modules/YourProtocol/yourProtocol.module.css";
-import { EAnalyticsEventType as h, EAnalyticsEvent as g } from "../../types/analytics/analytics.es.js";
-import { HighlightedTitle as f } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { ProtocolTags as u } from "./components/ProtocolTags/ProtocolTags.es.js";
-import { Callback as y } from "../../components/Callback/Callback.es.js";
-const Y = ({ title: a, image: p, tags: d, callbackView: t }) => {
-  var e, i, s, n;
-  const l = {
-    event: g.ctaClicked,
+import { jsx as i, jsxs as r } from "react/jsx-runtime";
+import a from "../../modules/YourProtocol/yourProtocol.module.css";
+import { EAnalyticsEventType as h, EAnalyticsEvent as y } from "../../types/analytics/analytics.es.js";
+import { HighlightedTitle as N } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Icon as f } from "../../components/Icon/Icon.es.js";
+import { Typography as s } from "../../components/Typography/Typography.es.js";
+import { Button as v } from "../../components/Button/Button.es.js";
+const P = ({ title: c, image: o, tags: n, button: t, colorScheme: l = "light" }) => {
+  const m = {
+    event: y.ctaClicked,
     type: h.interaction,
     component: "YourProtocol",
     element: "Callback",
     payload: {
-      ctaLink: (e = t == null ? void 0 : t.signupUrl) != null ? e : ""
+      ctaLink: t.link
     }
-  };
-  return /* @__PURE__ */ r("section", { className: o.root, children: /* @__PURE__ */ m("div", { className: o.container, children: [
-    /* @__PURE__ */ m("div", { className: o.content, children: [
-      /* @__PURE__ */ r(
-        f,
-        {
-          title: a,
-          className: o.title,
-          defaultVariant: "displaySm",
-          mobileVariant: "headingXl"
-        }
-      ),
-      /* @__PURE__ */ r(u, { tags: d }),
-      t && /* @__PURE__ */ r("div", { className: o.callback, children: /* @__PURE__ */ r(
-        y,
-        {
-          title: t.title,
-          description: (i = t.description) != null ? i : "",
-          price: (s = t.price) != null ? s : "",
-          image: t.image,
-          button: {
-            href: (n = t.signupUrl) != null ? n : "",
-            as: "a",
-            analyticsProps: l
-          },
-          size: "sm",
-          shape: t.shape
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ r("img", { src: p, alt: "Your Protocol", className: c(o.image, o.desktop), width: 481 })
+  }, d = l === "dark" ? "secondary" : "primary";
+  return /* @__PURE__ */ i("section", { className: a.root, "data-scheme": l, children: /* @__PURE__ */ r("div", { className: a.container, children: [
+    /* @__PURE__ */ i(
+      N,
+      {
+        title: c,
+        className: a.title,
+        defaultVariant: "displayMd",
+        mobileVariant: "headingXl",
+        colorScheme: l
+      }
+    ),
+    n.length > 0 && /* @__PURE__ */ i("div", { className: a.tagsList, children: n.map((e, p) => /* @__PURE__ */ r("div", { className: a.tagItem, children: [
+      e.icon && /* @__PURE__ */ i("div", { className: a.iconWrapper, children: /* @__PURE__ */ i(f, { name: e.icon, className: a.icon }) }),
+      /* @__PURE__ */ r("div", { className: a.tagText, children: [
+        /* @__PURE__ */ i(s, { className: a.tagLabel, as: "p", defaultVariant: "headingXs", children: e.label }),
+        e.description && /* @__PURE__ */ i(s, { className: a.tagDescription, as: "p", defaultVariant: "bodyMd", children: e.description })
+      ] })
+    ] }, p)) }),
+    t && /* @__PURE__ */ i("div", { className: a.callbackButton, children: /* @__PURE__ */ i(v, { href: t.link, as: "a", analyticsProps: m, size: "lg", variant: d, children: t.label }) }),
+    /* @__PURE__ */ i("img", { src: o, alt: "Your Protocol", className: a.image })
   ] }) });
 };
 export {
-  Y as YourProtocol
+  P as YourProtocol
 };

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

@@ -1,16 +1,7 @@
-import { CallbackShape } from '../../components/Callback';
+import { EIconName } from '../../components/Icon/constants';
 
 export type TTagView = {
     label: string;
     description?: string;
-};
-export type TCallbackView = {
-    title: string;
-    description?: string;
-    price: string | null;
-    signupUrl?: string;
-    image: string;
-    buttonLabel: string;
-    size: string;
-    shape: CallbackShape;
+    icon?: EIconName;
 };

package/dist/modules/YourProtocol/yourProtocol.module.css

@@ -1,98 +1,168 @@
 .root {
-    display: flex;
     width: 100%;
-    align-items: center;
+    display: flex;
     justify-content: center;
+    align-items: center;
+}
+
+.root[data-scheme='dark'] {
+    background-color: var(--color-bg-base-dark);
 }
 
 .container {
     width: 100%;
-    min-width: 0;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    gap: 32px;
+    padding: 70px 120px;
     max-width: var(--content-max-width);
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    gap: var(--spacing-96);
-    padding: var(--spacing-120);
-    box-sizing: border-box;
+    align-items: start;
 }
 
-.content {
+.title {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.tagsList {
+    grid-column: 1;
+    grid-row: 2;
     display: flex;
-    width: 623px;
-    min-width: 0;
     flex-direction: column;
-    gap: var(--spacing-32);
-    flex: 1 0 0;
 }
 
-.title {
-    margin: 80px 0 0;
-    max-width: 623px;
+.callbackButton {
+    grid-column: 1;
+    grid-row: 3;
 }
 
 .image {
-    flex-shrink: 1;
-    width: 481px;
-    border-radius: var(--border-radius-lg);
+    grid-column: 2;
+    grid-row: 1 / 4;
+    width: 477px;
+    height: 636px;
+    object-fit: cover;
+    border-radius: 19px;
+}
+
+.title,
+.tagsList,
+.callbackButton {
+    width: 100%;
+    max-width: 627px;
 }
 
-.mobile {
-    display: none;
+.tagItem {
+    padding: 16px 0;
+    display: flex;
+    gap: 16px;
+    border-bottom: 1px solid var(--border-color-light);
 }
 
-@media screen and (width <= 1300px) {
-    .container {
-        gap: var(--spacing-64);
-        padding: var(--spacing-64) var(--spacing-20);
-    }
+.root[data-scheme='dark'] .tagItem {
+    border-bottom: 1px solid var(--border-color-alpha-white-10);
+}
 
-    .content {
-        width: 500px;
-    }
+.tagItem:last-child {
+    border-bottom: none;
+}
 
-    .image {
-        width: auto;
-        height: 440px;
-    }
+.tagText {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
 }
 
-@media screen and (width <= 1024px) {
+.tagLabel {
+    color: var(--color-text-primary);
+}
+
+.tagDescription {
+    color: var(--color-text-secondary);
+}
+
+/* Dark mode overrides */
+.root[data-scheme='dark'] .tagLabel {
+    color: var(--color-text-primary-inverted);
+}
+
+.root[data-scheme='dark'] .tagDescription {
+    color: var(--color-text-secondary-inverted);
+}
+
+.iconWrapper {
+    display: flex;
+    width: 52px;
+    height: 52px;
+    padding: 12px;
+    border-radius: 7.8px;
+    background: var(--Gradient-01, linear-gradient(93deg, #81b1e2 8.06%, #2666a6 160.95%));
+}
+
+.root[data-scheme='dark'] .iconWrapper {
+    background:
+        linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%),
+        var(--Background-fill-neutral-dark, #1a1a1a);
+}
+
+.icon {
+    width: 28px;
+    height: 28px;
+    color: var(--color-white);
+}
+
+@media (max-width: 1300px) {
     .container {
         grid-template-columns: 1fr;
-        padding: var(--spacing-64) var(--spacing-20);
+        grid-template-rows: auto auto auto auto;
+        padding: 64px 17px;
     }
 
-    .content {
+    .title {
+        grid-column: 1;
+        grid-row: 1;
+        max-width: 685px;
+    }
+
+    .image {
+        grid-column: 1;
+        grid-row: 2;
         width: 100%;
-        align-items: center;
+        height: 350px;
     }
 
-    .title {
-        margin: 0;
-        text-align: center;
+    .tagsList {
+        grid-column: 1;
+        grid-row: 3;
     }
 
-    .content {
-        gap: 16px;
+    .tagsList,
+    .callbackButton {
+        max-width: unset;
     }
 
-    .callback {
-        margin-top: var(--spacing-48);
+    .callbackButton {
+        grid-column: 1;
+        grid-row: 4;
     }
+}
 
-    .mobile {
-        display: block;
+@media (max-width: 768px) {
+    .container {
+        gap: 20px;
     }
 
-    .desktop {
-        display: none;
+    .tagItem {
+        padding: 24px 0;
     }
-}
 
-@media screen and (width <= 768px) {
-    .callback {
-        max-width: 513px;
-        width: 100%;
+    .image {
+        height: 240px;
+    }
+
+    .title {
+        max-width: 335px;
     }
 }

package/package.json

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

package/dist/modules/YourProtocol/components/ProtocolTags/ProtocolTags.cjs.js

@@ -1 +0,0 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),i=require("../../../../utils/cn/cn.cjs.js"),c=require("../../../../src/modules/YourProtocol/components/ProtocolTags/protocolTags.module.css"),p=require("../../../../components/Tag/Tag.cjs.js"),t=require("../../../../components/Typography/Typography.cjs.js"),m=({tags:o})=>{var n;const[a,d]=r.useState(((n=o[0])==null?void 0:n.label)||null),l=r.useMemo(()=>{var e;return(e=o.find(u=>u.label===a))==null?void 0:e.description},[a,o]);return s.jsxs("div",{className:c.root,children:[s.jsx("div",{className:c.tags,children:o.map(e=>s.jsx(p.Tag,{value:e.label,size:"md",active:e.label===a,onClick:d,children:e.label},e.label))}),l&&s.jsxs(s.Fragment,{children:[s.jsx(t.Typography,{as:"p",defaultVariant:"bodyLg",className:i.cn(c.description,c.desktop),children:l}),s.jsx(t.Typography,{as:"p",defaultVariant:"bodyMd",className:i.cn(c.description,c.mobile),children:l})]})]})};exports.ProtocolTags=m;

package/dist/modules/YourProtocol/components/ProtocolTags/ProtocolTags.d.ts

@@ -1,7 +0,0 @@
-import { TTagView } from '../../types';
-
-type Props = {
-    tags: Array<TTagView>;
-};
-export declare const ProtocolTags: ({ tags }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/modules/YourProtocol/components/ProtocolTags/ProtocolTags.es.js

@@ -1,37 +0,0 @@
-"use client";
-import { jsxs as t, jsx as o, Fragment as p } from "react/jsx-runtime";
-import { useState as b, useMemo as f } from "react";
-import { cn as c } from "../../../../utils/cn/cn.es.js";
-import l from "../../../../modules/YourProtocol/components/ProtocolTags/protocolTags.module.css";
-import { Tag as u } from "../../../../components/Tag/Tag.es.js";
-import { Typography as n } from "../../../../components/Typography/Typography.es.js";
-const V = ({ tags: i }) => {
-  var s;
-  const [r, m] = b(((s = i[0]) == null ? void 0 : s.label) || null), a = f(
-    () => {
-      var e;
-      return (e = i.find((d) => d.label === r)) == null ? void 0 : e.description;
-    },
-    [r, i]
-  );
-  return /* @__PURE__ */ t("div", { className: l.root, children: [
-    /* @__PURE__ */ o("div", { className: l.tags, children: i.map((e) => /* @__PURE__ */ o(
-      u,
-      {
-        value: e.label,
-        size: "md",
-        active: e.label === r,
-        onClick: m,
-        children: e.label
-      },
-      e.label
-    )) }),
-    a && /* @__PURE__ */ t(p, { children: [
-      /* @__PURE__ */ o(n, { as: "p", defaultVariant: "bodyLg", className: c(l.description, l.desktop), children: a }),
-      /* @__PURE__ */ o(n, { as: "p", defaultVariant: "bodyMd", className: c(l.description, l.mobile), children: a })
-    ] })
-  ] });
-};
-export {
-  V as ProtocolTags
-};

package/dist/modules/YourProtocol/components/ProtocolTags/index.d.ts

@@ -1 +0,0 @@
-export { ProtocolTags } from './ProtocolTags';

package/dist/modules/YourProtocol/components/ProtocolTags/protocolTags.module.css

@@ -1,37 +0,0 @@
-.root {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-32);
-    max-width: 100%;
-}
-
-.tags {
-    display: flex;
-    gap: var(--spacing-8);
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
-
-.mobile {
-    display: none;
-}
-
-@media screen and (width <= 768px) {
-    .root {
-        margin-top: var(--spacing-20);
-        gap: var(--spacing-16);
-    }
-
-    .mobile {
-        display: block;
-    }
-
-    .desktop {
-        display: none;
-    }
-}