@zenpatient-org/healthspan-marketing-ui 0.2.9 → 0.2.10

package/dist/components/GalleryPagination/galleryPagination.module.css

@@ -1,38 +1,46 @@
-.root {
-    display: flex;
-    gap: 8px;
-    width: 100%;
-    max-width: 100%;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: nowrap;
-}
+@media (width <= 768px) {
+    .root {
+        display: flex;
+        gap: 8px;
+        width: 100%;
+        max-width: 100%;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: nowrap;
+    }
 
-.lineWrap {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    padding: 0;
-    background: none;
-    border: none;
-}
+    .lineWrap {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: 0;
+        background: none;
+        border: none;
+    }
 
-.line {
-    height: var(--border-width-sm);
-    width: 100%;
-    background-color: var(--color-bg-fill-brand-disabled);
-    border-radius: var(--border-radius-full);
-    transition: background-color 0.3s, height 0.3s, opacity 0.3s;
-}
+    .line {
+        height: var(--border-width-sm);
+        width: 100%;
+        background-color: var(--color-bg-fill-brand-disabled);
+        border-radius: var(--border-radius-full);
+        transition: background-color 0.3s, height 0.3s, opacity 0.3s;
+    }
+
+    .lineWrap:hover > .line:not(.active) {
+        opacity: 0.8;
+    }
 
-.lineWrap:hover > .line:not(.active) {
-    opacity: 0.8;
+    .active {
+        height: var(--border-width-md);
+        background-color: var(--color-bg-fill-primary);
+    }
 }
 
-.active {
-    height: var(--border-width-md);
-    background-color: var(--color-bg-fill-primary);
+@media (width > 768px) {
+    .root {
+        display: none;
+    }
 }

package/dist/components/ImageGallery/ImageGallery.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("swiper/modules"),d=require("swiper/react"),q=require("react"),w=require("../../utils/useSwiper/useSwiper.cjs.js"),j=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const i=require("../../src/components/ImageGallery/imageGallery.module.css"),y=require("../Label/Label.cjs.js"),x=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),P=require("../GalleryPagination/GalleryPagination.cjs.js"),_=[m.Navigation],I=({images:n,label:a,className:p,pagination:s="plain"})=>{const{activeIndex:t,handleSlideTo:c,handleSlideChange:S,onSwiperInit:h,handleSwiperResize:g,handleUserInteraction:r}=w.useSwiperWithAutoPlay(3e3),o=q.useCallback(l=>{r(),c(l)},[r,c]);return e.jsxs("div",{className:j.cn(i.root,p),children:[a&&e.jsx("div",{className:i.labelWrap,children:e.jsx(y.Label,{color:"black",size:"sm",children:a})}),e.jsx(d.Swiper,{onSwiper:h,onResize:g,onSlideChange:S,onTouchStart:r,onTouchEnd:r,modules:_,spaceBetween:0,slidesPerView:1,className:i.swiper,children:n.map((l,u)=>e.jsx(d.SwiperSlide,{children:e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:l,alt:"product image",className:i.image,onClick:r},u)})},u))}),s==="preview"&&n.length>1&&e.jsx(x.ImageGalleryPagination,{images:n,activeIndex:t,onSelect:o}),s==="plain"&&n.length>1&&e.jsx(P.GalleryPagination,{count:n.length,activeIndex:t,onSelect:o})]})};exports.ImageGallery=I;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("swiper/modules"),u=require("swiper/react"),h=require("react"),q=require("../../utils/useSwiper/useSwiper.cjs.js"),j=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const i=require("../../src/components/ImageGallery/imageGallery.module.css"),w=require("../Label/Label.cjs.js"),y=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),x=require("../GalleryPagination/GalleryPagination.cjs.js"),P=[m.Navigation],_=({images:r,label:l,className:d,pagination:I="plain"})=>{const{activeIndex:s,handleSlideTo:t,handleSlideChange:p,onSwiperInit:S,handleSwiperResize:g,handleUserInteraction:n}=q.useSwiperWithAutoPlay(3e3),o=h.useCallback(a=>{n(),t(a)},[n,t]);return e.jsxs("div",{className:j.cn(i.root,d),children:[l&&e.jsx("div",{className:i.labelWrap,children:e.jsx(w.Label,{color:"black",size:"sm",children:l})}),e.jsx(u.Swiper,{onSwiper:S,onResize:g,onSlideChange:p,onTouchStart:n,onTouchEnd:n,modules:P,spaceBetween:0,slidesPerView:1,className:i.swiper,children:r.map((a,c)=>e.jsx(u.SwiperSlide,{children:e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:a,alt:"product image",className:i.image,onClick:n},c)})},c))}),e.jsx(y.ImageGalleryPagination,{images:r,activeIndex:s,onSelect:o}),e.jsx(x.GalleryPagination,{count:r.length,activeIndex:s,onSelect:o})]})};exports.ImageGallery=_;

package/dist/components/ImageGallery/ImageGallery.d.ts

@@ -1,9 +1,8 @@
 
-type ImageGalleryProps = {
+export type ImageGalleryProps = {
     images: Array<string>;
     label?: string;
     className?: string;
     pagination?: 'plain' | 'preview';
 };
 export declare const ImageGallery: ({ images, label, className, pagination }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/ImageGallery/ImageGallery.es.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { jsxs as S, jsx as e } from "react/jsx-runtime";
 import { Navigation as g } from "swiper/modules";
-import { Swiper as u, SwiperSlide as w } from "swiper/react";
-import { useCallback as v } from "react";
+import { Swiper as f, SwiperSlide as u } from "swiper/react";
+import { useCallback as w } from "react";
 import { useSwiperWithAutoPlay as I } from "../../utils/useSwiper/useSwiper.es.js";
 import { cn as N } from "../../utils/cn/cn.es.js";
 /* empty css                                      */
@@ -10,43 +10,43 @@ import { cn as N } from "../../utils/cn/cn.es.js";
 /* empty css                                                  */
 import o from "../../components/ImageGallery/imageGallery.module.css";
 import { Label as P } from "../Label/Label.es.js";
-import { ImageGalleryPagination as y } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
-import { GalleryPagination as C } from "../GalleryPagination/GalleryPagination.es.js";
-const W = [g], D = ({ images: r, label: n, className: s, pagination: t = "plain" }) => {
-  const { activeIndex: a, handleSlideTo: m, handleSlideChange: d, onSwiperInit: h, handleSwiperResize: S, handleUserInteraction: i } = I(3e3), c = v(
-    (l) => {
-      i(), m(l);
+import { ImageGalleryPagination as v } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
+import { GalleryPagination as y } from "../GalleryPagination/GalleryPagination.es.js";
+const C = [g], D = ({ images: r, label: n, className: s, pagination: W = "plain" }) => {
+  const { activeIndex: l, handleSlideTo: t, handleSlideChange: p, onSwiperInit: d, handleSwiperResize: h, handleUserInteraction: i } = I(3e3), m = w(
+    (a) => {
+      i(), t(a);
     },
-    [i, m]
+    [i, t]
   );
-  return /* @__PURE__ */ f("div", { className: N(o.root, s), children: [
+  return /* @__PURE__ */ S("div", { className: N(o.root, s), children: [
     n && /* @__PURE__ */ e("div", { className: o.labelWrap, children: /* @__PURE__ */ e(P, { color: "black", size: "sm", children: n }) }),
     /* @__PURE__ */ e(
-      u,
+      f,
       {
-        onSwiper: h,
-        onResize: S,
-        onSlideChange: d,
+        onSwiper: d,
+        onResize: h,
+        onSlideChange: p,
         onTouchStart: i,
         onTouchEnd: i,
-        modules: W,
+        modules: C,
         spaceBetween: 0,
         slidesPerView: 1,
         className: o.swiper,
-        children: r.map((l, p) => /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e("div", { className: o.imageWrapper, children: /* @__PURE__ */ e(
+        children: r.map((a, c) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e("div", { className: o.imageWrapper, children: /* @__PURE__ */ e(
           "img",
           {
-            src: l,
+            src: a,
             alt: "product image",
             className: o.image,
             onClick: i
           },
-          p
-        ) }) }, p))
+          c
+        ) }) }, c))
       }
     ),
-    t === "preview" && r.length > 1 && /* @__PURE__ */ e(y, { images: r, activeIndex: a, onSelect: c }),
-    t === "plain" && r.length > 1 && /* @__PURE__ */ e(C, { count: r.length, activeIndex: a, onSelect: c })
+    /* @__PURE__ */ e(v, { images: r, activeIndex: l, onSelect: m }),
+    /* @__PURE__ */ e(y, { count: r.length, activeIndex: l, onSelect: m })
   ] });
 };
 export {

package/dist/components/ImageGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css

@@ -1,30 +1,35 @@
 .root {
-    display: flex;
-    justify-content: center;
-    gap: 12px;
-    padding: 0 24px;
+    display: none;
 }
+@media (width > 768px) {
+    .root {
+        display: flex;
+        justify-content: center;
+        gap: 12px;
+        padding: 0 24px;
+    }
 
-.thumbnailButton {
-    width: 64px;
-    height: 64px;
-    padding: 0;
-    border: 1px solid var(--color-neutral-200);
-    border-radius: var(--border-radius-xs);
-    background: none;
-    cursor: pointer;
-    opacity: 0.5;
-    transition: opacity 0.3s ease;
-    overflow: hidden;
-}
+    .thumbnailButton {
+        width: 64px;
+        height: 64px;
+        padding: 0;
+        border: 1px solid var(--color-neutral-200);
+        border-radius: var(--border-radius-xs);
+        background: none;
+        cursor: pointer;
+        opacity: 0.5;
+        transition: opacity 0.3s ease;
+        overflow: hidden;
+    }
 
-.thumbnailButton.active {
-    opacity: 1;
-    border-color: var(--color-neutral-200);
-}
+    .thumbnailButton.active {
+        opacity: 1;
+        border-color: var(--color-neutral-200);
+    }
 
-.thumbnailImage {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    .thumbnailImage {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }    
 }

package/dist/components/ImageGallery/index.d.ts

@@ -1 +1,2 @@
 export { ImageGallery } from './ImageGallery';
+export type { ImageGalleryProps } from './ImageGallery';

package/dist/components/PlainFeaturesGroup/PlainFeaturesGroup.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("./assets/VectorLogo.svg.cjs.js"),s=require("../../src/components/PlainFeaturesGroup/plainFeaturesGroup.module.css"),t=require("../Icon/Icon.cjs.js"),c=require("../Typography/Typography.cjs.js"),i=({items:a})=>e.jsxs("div",{className:s.container,children:[e.jsx("div",{className:s.plainFeaturesGroup,children:a.map((r,o)=>e.jsxs("div",{className:s.feature,children:[e.jsx(t.Icon,{className:s.featureIcon,name:r.icon}),e.jsx(c.Typography,{className:s.featureText,defaultVariant:"bodyXs",children:r.text})]},o))}),e.jsx(n.default,{className:s.logo})]});exports.PlainFeaturesGroup=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./assets/VectorLogo.svg.cjs.js"),r=require("../../src/components/PlainFeaturesGroup/plainFeaturesGroup.module.css"),n=require("../Typography/Typography.cjs.js"),c=({items:s})=>e.jsxs("div",{className:r.container,children:[e.jsx("div",{className:r.plainFeaturesGroup,children:s&&s.map((a,t)=>e.jsx("div",{className:r.feature,children:e.jsx(n.Typography,{className:r.featureText,defaultVariant:"bodyXs",children:a.text})},t))}),e.jsx(o.default,{className:r.logo})]});exports.PlainFeaturesGroup=c;

package/dist/components/PlainFeaturesGroup/PlainFeaturesGroup.d.ts

@@ -1,9 +1,11 @@
 import { EIconName } from '../Icon';
+import { TPlainFeaturesGroupView } from '../../modules/IndividualProductCardV2/types';
 
 export type TPlainFeaturesGroupProps = {
     items: Array<{
         icon: EIconName;
         text: string;
+        href?: string;
     }>;
 };
-export declare const PlainFeaturesGroup: ({ items }: TPlainFeaturesGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PlainFeaturesGroup: ({ items }: TPlainFeaturesGroupView) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PlainFeaturesGroup/PlainFeaturesGroup.es.js

@@ -1,15 +1,11 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import m from "./assets/VectorLogo.svg.es.js";
-import e from "../../components/PlainFeaturesGroup/plainFeaturesGroup.module.css";
-import { Icon as c } from "../Icon/Icon.es.js";
-import { Typography as i } from "../Typography/Typography.es.js";
-const u = ({ items: s }) => /* @__PURE__ */ o("div", { className: e.container, children: [
-  /* @__PURE__ */ r("div", { className: e.plainFeaturesGroup, children: s.map((a, t) => /* @__PURE__ */ o("div", { className: e.feature, children: [
-    /* @__PURE__ */ r(c, { className: e.featureIcon, name: a.icon }),
-    /* @__PURE__ */ r(i, { className: e.featureText, defaultVariant: "bodyXs", children: a.text })
-  ] }, t)) }),
-  /* @__PURE__ */ r(m, { className: e.logo })
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import i from "./assets/VectorLogo.svg.es.js";
+import r from "../../components/PlainFeaturesGroup/plainFeaturesGroup.module.css";
+import { Typography as l } from "../Typography/Typography.es.js";
+const d = ({ items: a }) => /* @__PURE__ */ t("div", { className: r.container, children: [
+  /* @__PURE__ */ e("div", { className: r.plainFeaturesGroup, children: a && a.map((o, s) => /* @__PURE__ */ e("div", { className: r.feature, children: /* @__PURE__ */ e(l, { className: r.featureText, defaultVariant: "bodyXs", children: o.text }) }, s)) }),
+  /* @__PURE__ */ e(i, { className: r.logo })
 ] });
 export {
-  u as PlainFeaturesGroup
+  d as PlainFeaturesGroup
 };

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

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
 
 export type PriceDisplayProps = {
+    display: 'single' | 'double';
     description: string;
     prefix: string;
     price: number;
     period: 'none' | 'month' | 'year' | 'quarter';
-    display: 'single' | 'double';
 };
 export declare const PriceDisplay: React.FC<{
     items: Array<PriceDisplayProps>;

package/dist/components/Quote/Quote.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../Typography/Typography.cjs.js"),t=require("../../src/components/Quote/Quote.module.css"),i=require("./const.cjs.js"),u=({prefix:a,color:n,quote:l,source:s,sourcePrefix:c})=>{var o;return e.jsxs("div",{className:t.quoteContainer,children:[e.jsxs("div",{className:t.quoteContent,children:[e.jsx("img",{src:(o=i.prefixSelection[a])==null?void 0:o[n],alt:`${a} icon`,className:t.quoteIcon}),e.jsx(r.Typography,{as:"p",defaultVariant:"preambleSm",mobileVariant:"bodyXl",className:t.quoteText,children:l})]}),s&&e.jsxs(r.Typography,{as:"figcaption",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:t.quoteAuthor,children:[i.sourcePrefixSelection[c]," ",s]})]})};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:"bodyXl",className:t.quoteText,children:c})]}),o&&n&&e.jsxs(i.Typography,{as:"figcaption",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:t.quoteAuthor,children:[l.sourcePrefixSelection[n]," ",o]})]})};exports.Quote=u;

package/dist/components/Quote/Quote.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
 
 export type QuoteProps = {
-    prefix: 'quotation_mark';
-    color: 'indigo' | 'ochre' | 'solar' | 'grey';
+    prefix: 'quotation_marks';
+    color: 'indigo' | 'ochre' | 'grey' | 'solar';
     quote: string;
-    sourcePrefix: 'hyphen' | 'dash';
+    sourcePrefix?: 'hyphen';
     source?: string;
 };
 export declare const Quote: React.FC<QuoteProps>;

package/dist/components/Quote/Quote.es.js

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

package/dist/components/Quote/const.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t={quotation_mark:{indigo:"https://methodical-vitality-96814f361f.media.strapiapp.com/quote_icon_e0242e7418.svg",ochre:"https://methodical-vitality-96814f361f.media.strapiapp.com/ochre_quote_9ed26a4ec7.svg",solar:"https://methodical-vitality-96814f361f.media.strapiapp.com/solar_quote_534860f311.svg",grey:"https://methodical-vitality-96814f361f.media.strapiapp.com/grey_a08b0fedad.svg"}},i={hyphen:e.jsx("span",{children:"—"}),dash:e.jsx("span",{children:"–"})};exports.prefixSelection=t;exports.sourcePrefixSelection=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t={quotation_marks:{indigo:"https://methodical-vitality-96814f361f.media.strapiapp.com/quote_icon_e0242e7418.svg",ochre:"https://methodical-vitality-96814f361f.media.strapiapp.com/ochre_quote_9ed26a4ec7.svg",solar:"https://methodical-vitality-96814f361f.media.strapiapp.com/solar_quote_534860f311.svg",grey:"https://methodical-vitality-96814f361f.media.strapiapp.com/grey_a08b0fedad.svg"}},i={hyphen:e.jsx("span",{children:"—"}),dash:e.jsx("span",{children:"–"})};exports.prefixSelection=t;exports.sourcePrefixSelection=i;

package/dist/components/Quote/const.d.ts

@@ -1,4 +1,4 @@
-export type QuotePrefix = 'quotation_mark';
+export type QuotePrefix = 'quotation_marks';
 export type QuoteColor = 'indigo' | 'ochre' | 'solar' | 'grey';
 export declare const prefixSelection: Record<QuotePrefix, Record<QuoteColor, `https://${string}`>>;
 export declare const sourcePrefixSelection: {

package/dist/components/Quote/const.es.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 const i = {
-  quotation_mark: {
+  quotation_marks: {
     indigo: "https://methodical-vitality-96814f361f.media.strapiapp.com/quote_icon_e0242e7418.svg",
     ochre: "https://methodical-vitality-96814f361f.media.strapiapp.com/ochre_quote_9ed26a4ec7.svg",
     solar: "https://methodical-vitality-96814f361f.media.strapiapp.com/solar_quote_534860f311.svg",

package/dist/components/RatingPreview/RatingPreview.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("../../src/components/RatingPreview/ratingPreview.module.css"),t=require("../Typography/Typography.cjs.js"),c=require("../Icon/Icon.cjs.js"),l=require("../Icon/constants.cjs.js"),u=a=>{const s=Math.round(a*2)/2,n=[];for(let r=0;r<Math.floor(s);r++)n.push(e.jsx(c.Icon,{name:l.EIconName.STAR_FILL,className:o.starIcon},`full-${r}`));return s%1===.5&&n.push(e.jsx(c.Icon,{name:l.EIconName.STAR_HALF,className:o.starIcon},"half")),n},i=({rating:a,text:s})=>e.jsxs("div",{className:o.ratingPreview,children:[e.jsxs(t.Typography,{as:"p",defaultVariant:"labelMd",children:[a.stars," ",u(a.stars)]}),s&&e.jsxs(e.Fragment,{children:[e.jsx(t.Typography,{as:"p",defaultVariant:"labelSm",children:"|"}),e.jsx(t.Typography,{as:"p",defaultVariant:"labelSm",emphasis:!0,children:s})]})]});exports.RatingPreview=i;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("../../src/components/RatingPreview/ratingPreview.module.css"),t=require("../Typography/Typography.cjs.js"),c=require("../Icon/Icon.cjs.js"),l=require("../Icon/constants.cjs.js"),u=s=>{const a=Math.round(s*2)/2,r=[];for(let n=0;n<Math.floor(a);n++)r.push(e.jsx(c.Icon,{name:l.EIconName.STAR_FILL,className:o.starIcon},`full-${n}`));return a%1===.5&&r.push(e.jsx(c.Icon,{name:l.EIconName.STAR_HALF,className:o.starIcon},"half")),r},i=({rating:s,text:a})=>e.jsxs("div",{className:o.ratingPreview,children:[s!==void 0&&s.stars!==void 0&&e.jsxs(t.Typography,{as:"p",defaultVariant:"labelMd",children:[s.stars," ",u(s.stars)]}),a&&e.jsxs(e.Fragment,{children:[e.jsx(t.Typography,{as:"p",defaultVariant:"labelSm",children:"|"}),e.jsx(t.Typography,{as:"p",defaultVariant:"labelSm",emphasis:!0,children:a})]})]});exports.RatingPreview=i;exports.default=i;

package/dist/components/RatingPreview/RatingPreview.d.ts

@@ -1,6 +1,7 @@
 export type TRatingPreviewProps = {
-    rating: {
-        stars: number;
+    rating?: {
+        stars?: number;
+        totalReviews?: number;
     };
     text?: string;
 };

package/dist/components/RatingPreview/RatingPreview.es.js

@@ -1,22 +1,22 @@
-import { jsxs as n, Fragment as c, jsx as e } from "react/jsx-runtime";
-import l from "../../components/RatingPreview/ratingPreview.module.css";
-import { Typography as o } from "../Typography/Typography.es.js";
+import { jsxs as o, Fragment as c, jsx as s } from "react/jsx-runtime";
+import n from "../../components/RatingPreview/ratingPreview.module.css";
+import { Typography as l } from "../Typography/Typography.es.js";
 import { Icon as i } from "../Icon/Icon.es.js";
 import { EIconName as m } from "../Icon/constants.es.js";
-const d = (r) => {
-  const a = Math.round(r * 2) / 2, s = [];
-  for (let t = 0; t < Math.floor(a); t++)
-    s.push(/* @__PURE__ */ e(i, { name: m.STAR_FILL, className: l.starIcon }, `full-${t}`));
-  return a % 1 === 0.5 && s.push(/* @__PURE__ */ e(i, { name: m.STAR_HALF, className: l.starIcon }, "half")), s;
-}, I = ({ rating: r, text: a }) => /* @__PURE__ */ n("div", { className: l.ratingPreview, children: [
-  /* @__PURE__ */ n(o, { as: "p", defaultVariant: "labelMd", children: [
-    r.stars,
+const d = (a) => {
+  const r = Math.round(a * 2) / 2, e = [];
+  for (let t = 0; t < Math.floor(r); t++)
+    e.push(/* @__PURE__ */ s(i, { name: m.STAR_FILL, className: n.starIcon }, `full-${t}`));
+  return r % 1 === 0.5 && e.push(/* @__PURE__ */ s(i, { name: m.STAR_HALF, className: n.starIcon }, "half")), e;
+}, I = ({ rating: a, text: r }) => /* @__PURE__ */ o("div", { className: n.ratingPreview, children: [
+  a !== void 0 && a.stars !== void 0 && /* @__PURE__ */ o(l, { as: "p", defaultVariant: "labelMd", children: [
+    a.stars,
     " ",
-    d(r.stars)
+    d(a.stars)
   ] }),
-  a && /* @__PURE__ */ n(c, { children: [
-    /* @__PURE__ */ e(o, { as: "p", defaultVariant: "labelSm", children: "|" }),
-    /* @__PURE__ */ e(o, { as: "p", defaultVariant: "labelSm", emphasis: !0, children: a })
+  r && /* @__PURE__ */ o(c, { children: [
+    /* @__PURE__ */ s(l, { as: "p", defaultVariant: "labelSm", children: "|" }),
+    /* @__PURE__ */ s(l, { as: "p", defaultVariant: "labelSm", emphasis: !0, children: r })
   ] })
 ] });
 export {

package/dist/modules/IndividualProductCardV2/IndividualProductCardV2.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../types/analytics/analytics.cjs.js"),c=require("../../utils/cn/cn.cjs.js"),n=require("../../src/modules/IndividualProductCardV2/individualProductCardV2.module.css"),g=require("../../components/ImageGallery/ImageGallery.cjs.js"),l=require("../../components/RatingPreview/RatingPreview.cjs.js"),_=require("../../components/Quote/Quote.cjs.js"),d=require("../../components/Typography/Typography.cjs.js"),v=require("../IndividualProductCard/components/Features/Features.cjs.js"),P=require("../../components/PlainFeaturesGroup/PlainFeaturesGroup.cjs.js"),q=require("../../components/PriceDisplay/PriceDisplay.cjs.js"),T=require("../../components/Button/Button.cjs.js"),b=require("../../components/TextButton/TextButton.cjs.js"),N=({zenpatientId:u,signupUrl:t,name:m,description:y,label:p,images:x,features:h,quote:s,priceDisplay:i,featuresGroup:a,ratingPreview:r})=>{const j={event:o.EAnalyticsEvent.ctaClicked,type:o.EAnalyticsEventType.interaction,component:"Pricing",payload:{ctaLabel:"GET STARTED",ctaLink:t,productId:u}};return e.jsx("section",{className:n.root,children:e.jsxs("div",{className:n.mainContainer,children:[e.jsxs("div",{className:n.leftColumn,children:[e.jsx(g.ImageGallery,{images:x,label:p}),e.jsx("div",{className:c.cn(n.ratingContainer,n.mobileOnly),children:e.jsx(l.RatingPreview,{...r})}),s&&e.jsx(_.Quote,{...s})]}),e.jsxs("div",{className:n.rightColumn,children:[e.jsxs("div",{className:n.header,children:[e.jsx(d.Typography,{as:"h1",defaultVariant:"displayXs",mobileVariant:"headingLg",children:m}),e.jsx(d.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:n.description,children:y})]}),e.jsx(v.Features,{features:h}),a&&e.jsx(P.PlainFeaturesGroup,{...a}),i&&e.jsx(q.PriceDisplay,{items:i}),e.jsx("div",{className:c.cn(n.ratingContainer,n.desktopOnly),children:e.jsx(l.RatingPreview,{...r})}),e.jsxs("div",{className:n.actions,children:[e.jsx(T.Button,{variant:"primary",size:"lg",href:t,analyticsProps:j,children:"Get started"}),e.jsx(b.TextButton,{size:"lg",children:"HSA/FSA Elegible"})]})]})]})})};exports.IndividualProductCardV2=N;

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

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

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

@@ -0,0 +1,70 @@
+import { jsx as i, jsxs as t } from "react/jsx-runtime";
+import { EAnalyticsEventType as g, EAnalyticsEvent as N } from "../../types/analytics/analytics.es.js";
+import { cn as m } from "../../utils/cn/cn.es.js";
+import r from "../../modules/IndividualProductCardV2/individualProductCardV2.module.css";
+import { ImageGallery as b } from "../../components/ImageGallery/ImageGallery.es.js";
+import { RatingPreview as s } from "../../components/RatingPreview/RatingPreview.es.js";
+import { Quote as E } from "../../components/Quote/Quote.es.js";
+import { Typography as c } 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 P } from "../../components/Button/Button.es.js";
+import { TextButton as V } from "../../components/TextButton/TextButton.es.js";
+const H = ({
+  zenpatientId: d,
+  signupUrl: a,
+  name: p,
+  description: h,
+  label: y,
+  images: f,
+  features: v,
+  quote: e,
+  priceDisplay: n,
+  featuresGroup: o,
+  ratingPreview: l
+}) => {
+  const u = {
+    event: N.ctaClicked,
+    type: g.interaction,
+    component: "Pricing",
+    payload: {
+      ctaLabel: "GET STARTED",
+      ctaLink: a,
+      productId: d
+    }
+  };
+  return /* @__PURE__ */ i("section", { className: r.root, children: /* @__PURE__ */ t("div", { className: r.mainContainer, children: [
+    /* @__PURE__ */ t("div", { className: r.leftColumn, children: [
+      /* @__PURE__ */ i(b, { images: f, label: y }),
+      /* @__PURE__ */ i("div", { className: m(r.ratingContainer, r.mobileOnly), children: /* @__PURE__ */ i(s, { ...l }) }),
+      e && /* @__PURE__ */ i(E, { ...e })
+    ] }),
+    /* @__PURE__ */ t("div", { className: r.rightColumn, children: [
+      /* @__PURE__ */ t("div", { className: r.header, children: [
+        /* @__PURE__ */ i(c, { as: "h1", defaultVariant: "displayXs", mobileVariant: "headingLg", children: p }),
+        /* @__PURE__ */ i(
+          c,
+          {
+            as: "p",
+            defaultVariant: "bodyMd",
+            mobileVariant: "bodySm",
+            className: r.description,
+            children: h
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i(C, { features: v }),
+      o && /* @__PURE__ */ i(A, { ...o }),
+      n && /* @__PURE__ */ i(T, { items: n }),
+      /* @__PURE__ */ i("div", { className: m(r.ratingContainer, r.desktopOnly), children: /* @__PURE__ */ i(s, { ...l }) }),
+      /* @__PURE__ */ t("div", { className: r.actions, children: [
+        /* @__PURE__ */ i(P, { variant: "primary", size: "lg", href: a, analyticsProps: u, children: "Get started" }),
+        /* @__PURE__ */ i(V, { size: "lg", children: "HSA/FSA Elegible" })
+      ] })
+    ] })
+  ] }) });
+};
+export {
+  H as IndividualProductCardV2
+};

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

@@ -0,0 +1 @@
+export * from './IndividualProductCardV2';

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

@@ -0,0 +1,82 @@
+.mainContainer {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4vw;
+    padding: 4rem 7.5rem;
+    max-width: var(--content-max-width);
+    margin: 0 auto;
+    width: 100%;
+}
+
+.leftColumn {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    overflow: hidden;
+}
+
+.rightColumn {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.description {
+    color: var(--color-text-secondary);
+}
+
+.plainFeaturesWrapper {
+    height: 8rem;
+    width: 100%;
+    background-color: var(--color-bg-neutral-light);
+    border-radius: var(--border-radius-md);
+}
+
+.benefitsGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+}
+
+.ratingContainer {
+    margin: 0 auto;
+}
+
+.actions {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+}
+
+.mobileOnly {
+    display: none;
+}
+
+.desktopOnly {
+    display: block;
+}
+
+@media (width <= 1024px) {
+    .mainContainer {
+        padding: 2rem 1rem;
+    }
+}
+
+@media (width <= 768px) {
+    .mainContainer {
+        grid-template-columns: 1fr;
+    }
+    .mobileOnly {
+        display: block;
+    }
+    .desktopOnly {
+        display: none;
+    }
+}

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

@@ -0,0 +1,71 @@
+import { ETypeBadge } from '../../components/TypeBadge';
+
+export type TTypeBadge = 'senescence' | 'supplements' | 'outline' | 'energy' | 'metabolism' | 'labs';
+export type TProductFeature = {
+    label: string;
+    type: ETypeBadge;
+    description?: string;
+    collapsible?: boolean;
+};
+export type TReviewsStats = {
+    stars?: number;
+    totalReviews?: number;
+};
+export type TQuoteComponentView = {
+    prefix: 'quotation_marks';
+    color: 'indigo' | 'ochre' | 'grey' | 'solar';
+    quote: string;
+    sourcePrefix?: 'hyphen';
+    source?: string;
+};
+export type TPriceDisplayComponentView = {
+    description: string;
+    price: number;
+    period: 'none' | 'month' | 'quarter' | 'year';
+    prefix?: string;
+};
+export type TInternalPlainFeatureItemView = {
+    text: string;
+    icon: string;
+    href?: string;
+};
+export type TPlainFeaturesGroupView = {
+    items: Array<TInternalPlainFeatureItemView>;
+};
+export type TRatingPreviewView = {
+    text?: string;
+    rating: TReviewsStats;
+};
+export type TIndividualProductCardV2Base = {
+    zenpatientId: string;
+    signupUrl: string;
+    name: string;
+    images: Array<string>;
+    features: Array<TProductFeature>;
+    description?: string;
+    label?: string;
+    rating?: TReviewsStats;
+    quote?: TQuoteComponentView;
+    priceDisplay?: Array<TPriceDisplayComponentView>;
+    featuresGroup?: TPlainFeaturesGroupView;
+    ratingPreview?: TRatingPreviewView;
+};
+export type TIndividualProductCardBasicV2View = TIndividualProductCardV2Base & {
+    plansView?: 'single';
+};
+export type TProductPlan = {
+    id: string;
+    label: string;
+    price: number;
+    totalPrice: number;
+    monthlyPrice?: number;
+    savingsPercentage?: number;
+    duration?: 'one-time' | 'day' | 'month' | 'year';
+    durationAmount?: number;
+    featured?: boolean;
+};
+export type TIndividualProductCardPricingV2View = TIndividualProductCardV2Base & {
+    plansView?: 'pricing';
+    plans?: Array<TProductPlan>;
+};
+export type TIndividualProductCardV2View = TIndividualProductCardBasicV2View | TIndividualProductCardPricingV2View;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.9",
+    "version": "0.2.10",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -515,6 +515,11 @@
             "import": "./dist/modules/IndividualProductCard/IndividualProductCard.es.js",
             "require": "./dist/modules/IndividualProductCard/IndividualProductCard.cjs.js"
         },
+        "./IndividualProductCardV2": {
+            "types": "./dist/modules/IndividualProductCardV2/IndividualProductCardV2.d.ts",
+            "import": "./dist/modules/IndividualProductCardV2/IndividualProductCardV2.es.js",
+            "require": "./dist/modules/IndividualProductCardV2/IndividualProductCardV2.cjs.js"
+        },
         "./ResearchFeatured": {
             "types": "./dist/modules/ResearchFeatured/index.d.ts",
             "import": "./dist/modules/ResearchFeatured/ResearchFeatured.es.js",