@zenpatient-org/healthspan-marketing-ui 0.2.8 → 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

@@ -0,0 +1 @@
+"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

@@ -0,0 +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 }: TPlainFeaturesGroupView) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+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 {
+  d as PlainFeaturesGroup
+};

package/dist/components/PlainFeaturesGroup/assets/VectorLogo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="201" fill="none"><g filter="url(#a)" opacity=".6"><path fill="#000" fill-opacity=".1" d="m121.3 55.7-29.7 26v118.6H50.5v-65.6c0-12.3 1.5-19.1 12.3-28l28.8-25H.5V51h91.1V.7h41.2v27.8c0 12-1.2 18.4-11.5 27.2Zm87.6 94.2H300v-30.5h-91.1l28.8-25c10.8-9 12.3-15.8 12.3-28.2V.6h-41.1v118.8l-29.7 25.9c-10.3 8.8-11.5 15.2-11.5 27.2v27.8h41.2V150Z"/><path fill="url(#b)" fill-opacity=".4" d="m121.3 55.7-29.7 26v118.6H50.5v-65.6c0-12.3 1.5-19.1 12.3-28l28.8-25H.5V51h91.1V.7h41.2v27.8c0 12-1.2 18.4-11.5 27.2Zm87.6 94.2H300v-30.5h-91.1l28.8-25c10.8-9 12.3-15.8 12.3-28.2V.6h-41.1v118.8l-29.7 25.9c-10.3 8.8-11.5 15.2-11.5 27.2v27.8h41.2V150Z"/></g><defs><linearGradient id="b" x1=".5" x2="300" y1=".6" y2="190.3" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#fff"/><stop offset=".8" stop-color="#fff" stop-opacity=".4"/></linearGradient><filter id="a" width="299.5" height="201.4" x=".5" y=".6" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1.7"/><feGaussianBlur stdDeviation="1.7"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend in2="shape" result="effect1_innerShadow_788_5293"/></filter></defs></svg>

package/dist/components/PlainFeaturesGroup/assets/VectorLogo.svg.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react");function c(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const l in t)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(t,l);Object.defineProperty(r,l,a.get?a:{enumerable:!0,get:()=>t[l]})}}return r.default=t,Object.freeze(r)}const e=c(n),o=t=>e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:300,height:201,fill:"none",...t},e.createElement("g",{filter:"url(#a)",opacity:.6},e.createElement("path",{fill:"#000",fillOpacity:.1,d:"m121.3 55.7-29.7 26v118.6H50.5v-65.6c0-12.3 1.5-19.1 12.3-28l28.8-25H.5V51h91.1V.7h41.2v27.8c0 12-1.2 18.4-11.5 27.2Zm87.6 94.2H300v-30.5h-91.1l28.8-25c10.8-9 12.3-15.8 12.3-28.2V.6h-41.1v118.8l-29.7 25.9c-10.3 8.8-11.5 15.2-11.5 27.2v27.8h41.2V150Z"}),e.createElement("path",{fill:"url(#b)",fillOpacity:.4,d:"m121.3 55.7-29.7 26v118.6H50.5v-65.6c0-12.3 1.5-19.1 12.3-28l28.8-25H.5V51h91.1V.7h41.2v27.8c0 12-1.2 18.4-11.5 27.2Zm87.6 94.2H300v-30.5h-91.1l28.8-25c10.8-9 12.3-15.8 12.3-28.2V.6h-41.1v118.8l-29.7 25.9c-10.3 8.8-11.5 15.2-11.5 27.2v27.8h41.2V150Z"})),e.createElement("defs",null,e.createElement("linearGradient",{id:"b",x1:.5,x2:300,y1:.6,y2:190.3,gradientUnits:"userSpaceOnUse"},e.createElement("stop",{offset:.1,stopColor:"#fff"}),e.createElement("stop",{offset:.8,stopColor:"#fff",stopOpacity:.4})),e.createElement("filter",{id:"a",width:299.5,height:201.4,x:.5,y:.6,colorInterpolationFilters:"sRGB",filterUnits:"userSpaceOnUse"},e.createElement("feFlood",{floodOpacity:0,result:"BackgroundImageFix"}),e.createElement("feBlend",{in:"SourceGraphic",in2:"BackgroundImageFix",result:"shape"}),e.createElement("feColorMatrix",{in:"SourceAlpha",result:"hardAlpha",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),e.createElement("feOffset",{dy:1.7}),e.createElement("feGaussianBlur",{stdDeviation:1.7}),e.createElement("feComposite",{in2:"hardAlpha",k2:-1,k3:1,operator:"arithmetic"}),e.createElement("feColorMatrix",{values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"}),e.createElement("feBlend",{in2:"shape",result:"effect1_innerShadow_788_5293"}))));exports.default=o;

package/dist/components/PlainFeaturesGroup/assets/VectorLogo.svg.es.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 300, height: 201, fill: "none", ...t }, /* @__PURE__ */ e.createElement("g", { filter: "url(#a)", opacity: 0.6 }, /* @__PURE__ */ e.createElement("path", { fill: "#000", fillOpacity: 0.1, d: "m121.3 55.7-29.7 26v118.6H50.5v-65.6c0-12.3 1.5-19.1 12.3-28l28.8-25H.5V51h91.1V.7h41.2v27.8c0 12-1.2 18.4-11.5 27.2Zm87.6 94.2H300v-30.5h-91.1l28.8-25c10.8-9 12.3-15.8 12.3-28.2V.6h-41.1v118.8l-29.7 25.9c-10.3 8.8-11.5 15.2-11.5 27.2v27.8h41.2V150Z" }), /* @__PURE__ */ e.createElement("path", { fill: "url(#b)", fillOpacity: 0.4, d: "m121.3 55.7-29.7 26v118.6H50.5v-65.6c0-12.3 1.5-19.1 12.3-28l28.8-25H.5V51h91.1V.7h41.2v27.8c0 12-1.2 18.4-11.5 27.2Zm87.6 94.2H300v-30.5h-91.1l28.8-25c10.8-9 12.3-15.8 12.3-28.2V.6h-41.1v118.8l-29.7 25.9c-10.3 8.8-11.5 15.2-11.5 27.2v27.8h41.2V150Z" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("linearGradient", { id: "b", x1: 0.5, x2: 300, y1: 0.6, y2: 190.3, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { offset: 0.1, stopColor: "#fff" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.8, stopColor: "#fff", stopOpacity: 0.4 })), /* @__PURE__ */ e.createElement("filter", { id: "a", width: 299.5, height: 201.4, x: 0.5, y: 0.6, colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), /* @__PURE__ */ e.createElement("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ e.createElement("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }), /* @__PURE__ */ e.createElement("feOffset", { dy: 1.7 }), /* @__PURE__ */ e.createElement("feGaussianBlur", { stdDeviation: 1.7 }), /* @__PURE__ */ e.createElement("feComposite", { in2: "hardAlpha", k2: -1, k3: 1, operator: "arithmetic" }), /* @__PURE__ */ e.createElement("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" }), /* @__PURE__ */ e.createElement("feBlend", { in2: "shape", result: "effect1_innerShadow_788_5293" }))));
+export {
+  l as default
+};

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

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

package/dist/components/PlainFeaturesGroup/plainFeaturesGroup.module.css

@@ -0,0 +1,50 @@
+.container {
+    width: 100%;
+    display: flex;
+    border-radius: var(--border-radius-xs);
+    background: linear-gradient(95deg, var(--color-neutral-100) 0.09%, #ececec 93.88%);
+    overflow: hidden;
+    justify-content: space-between;
+}
+
+.plainFeaturesGroup {
+    flex-shrink: 0;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px 16px 16px 32px;
+}
+
+.logo {
+    position: relative;
+    height: 200px;
+    width: 300px;
+    margin-bottom: -66px;
+    flex-shrink: 0;
+    z-index: 0;
+    opacity: 0.6;
+}
+
+.feature {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.featureIcon {
+    color: var(--color-text-secondary);
+    width: 20px;
+    height: 20px;
+}
+
+.featureText {
+    color: var(--color-text-secondary);
+}
+
+@media (width <= 1200px) {
+    .logo {
+        margin-left: -47px;
+        margin-top: -30px;
+    }
+}

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

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

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

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

@@ -7,7 +7,7 @@
 .feature {
     display: flex;
     width: 100%;
-    align-items: center;
+    align-items: flex-start;
     flex-direction: column;
     padding: 16px 0;
     border-bottom: var(--border-width-sm) solid var(--border-color-light);
@@ -37,6 +37,10 @@
     color: var(--color-text-primary);
 }
 
+.label {
+    margin-bottom: -2px;
+}
+
 .description {
     overflow: hidden;
     width: 100%;
@@ -44,7 +48,10 @@
     padding-left: 32px;
     line-height: 0;
     color: transparent;
-    transition: margin-top 0.3s, line-height 0.3s, color 0.3s;
+    transition:
+        margin-top 0.3s,
+        line-height 0.3s,
+        color 0.3s;
 }
 
 .descriptionActive {

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

@@ -4,6 +4,7 @@ export type TProductFeature = {
     label: string;
     type: ETypeBadge;
     description?: string;
+    collapsible?: boolean;
 };
 export type TProductPlan = {
     id: string;

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.8",
+    "version": "0.2.10",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -365,6 +365,11 @@
             "import": "./dist/components/ClaimBlock/ClaimBlock.es.js",
             "require": "./dist/components/ClaimBlock/ClaimBlock.cjs.js"
         },
+        "./PlainFeaturesGroup": {
+            "types": "./dist/components/PlainFeaturesGroup/PlainFeaturesGroup.d.ts",
+            "import": "./dist/components/PlainFeaturesGroup/PlainFeaturesGroup.es.js",
+            "require": "./dist/components/PlainFeaturesGroup/PlainFeaturesGroup.cjs.js"
+        },
         "./Claims": {
             "types": "./dist/modules/Claims/Claims.d.ts",
             "import": "./dist/modules/Claims/Claims.es.js",
@@ -510,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",