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

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

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

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

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

@@ -0,0 +1,15 @@
+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 })
+] });
+export {
+  u 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/RatingPreview/RatingPreview.cjs.js

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

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

@@ -0,0 +1,8 @@
+export type TRatingPreviewProps = {
+    rating: {
+        stars: number;
+    };
+    text?: string;
+};
+export declare const RatingPreview: ({ rating, text }: TRatingPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export default RatingPreview;

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

@@ -0,0 +1,25 @@
+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 { 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,
+    " ",
+    d(r.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 })
+  ] })
+] });
+export {
+  I as RatingPreview,
+  I as default
+};

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

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

package/dist/components/RatingPreview/ratingPreview.module.css

@@ -0,0 +1,11 @@
+.ratingPreview {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.starIcon {
+    margin-bottom: -1px;
+    width: 14px;
+    height: 14px;
+}

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/pageComponents/ScrollingFeatures/ScrollingFeatures.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../src/pageComponents/ScrollingFeatures/scrollingFeatures.module.css"),o=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),c=require("../../components/Icon/Icon.cjs.js"),a=require("../../components/Typography/Typography.cjs.js"),l=({text:n,icon:t,href:s})=>e.jsxs("a",{href:s,className:r.feature,children:[e.jsx(c.Icon,{className:r.featureIcon,name:t}),e.jsx(a.Typography,{className:r.featureText,defaultVariant:"labelMd",children:n})]}),i=({items:n})=>e.jsx("section",{className:r.root,children:n.length>0&&e.jsx("div",{className:r.featuresContainer,children:e.jsx(o.InfiniteScroll,{items:n,renderItem:l})})});exports.ScrollingFeatures=i;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../src/pageComponents/ScrollingFeatures/scrollingFeatures.module.css"),a=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),o=require("../../components/Icon/Icon.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),i=({text:n,icon:c,href:t})=>{const s=e.jsxs(e.Fragment,{children:[e.jsx(o.Icon,{className:r.featureIcon,name:c}),e.jsx(l.Typography,{className:r.featureText,defaultVariant:"labelMd",children:n})]});return t?e.jsx("a",{href:t,className:r.clickableFeature,children:s}):e.jsx("div",{className:r.feature,children:s})},u=({items:n})=>e.jsx("section",{className:r.root,children:n.length>0&&e.jsx("div",{className:r.featuresContainer,children:e.jsx(a.InfiniteScroll,{items:n,renderItem:i})})});exports.ScrollingFeatures=u;

package/dist/pageComponents/ScrollingFeatures/ScrollingFeatures.es.js

@@ -1,12 +1,16 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
+"use client";
+import { jsx as e, jsxs as c, Fragment as o } from "react/jsx-runtime";
 import r from "../../pageComponents/ScrollingFeatures/scrollingFeatures.module.css";
 import { InfiniteScroll as s } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
-import { Icon as l } from "../../components/Icon/Icon.es.js";
-import { Typography as c } from "../../components/Typography/Typography.es.js";
-const m = ({ text: t, icon: a, href: o }) => /* @__PURE__ */ n("a", { href: o, className: r.feature, children: [
-  /* @__PURE__ */ e(l, { className: r.featureIcon, name: a }),
-  /* @__PURE__ */ e(c, { className: r.featureText, defaultVariant: "labelMd", children: t })
-] }), h = ({ items: t }) => /* @__PURE__ */ e("section", { className: r.root, children: t.length > 0 && /* @__PURE__ */ e("div", { className: r.featuresContainer, children: /* @__PURE__ */ e(s, { items: t, renderItem: m }) }) });
+import { Icon as i } from "../../components/Icon/Icon.es.js";
+import { Typography as m } from "../../components/Typography/Typography.es.js";
+const d = ({ text: a, icon: l, href: t }) => {
+  const n = /* @__PURE__ */ c(o, { children: [
+    /* @__PURE__ */ e(i, { className: r.featureIcon, name: l }),
+    /* @__PURE__ */ e(m, { className: r.featureText, defaultVariant: "labelMd", children: a })
+  ] });
+  return t ? /* @__PURE__ */ e("a", { href: t, className: r.clickableFeature, children: n }) : /* @__PURE__ */ e("div", { className: r.feature, children: n });
+}, g = ({ items: a }) => /* @__PURE__ */ e("section", { className: r.root, children: a.length > 0 && /* @__PURE__ */ e("div", { className: r.featuresContainer, children: /* @__PURE__ */ e(s, { items: a, renderItem: d }) }) });
 export {
-  h as ScrollingFeatures
+  g as ScrollingFeatures
 };

package/dist/pageComponents/ScrollingFeatures/scrollingFeatures.module.css

@@ -7,13 +7,20 @@
     padding: 16px 0;
 }
 
-.feature {
+.feature,
+.clickableFeature {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 0 40px;
 }
 
+.clickableFeature {
+    cursor: pointer;
+    text-decoration: none;
+    color: var(--color-text-primary);
+}
+
 .featureText {
     line-height: 110%;
     letter-spacing: -0.42px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.7",
+    "version": "0.2.9",
     "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",
@@ -675,6 +680,11 @@
             "import": "./dist/pageComponents/ScrollingFeatures/ScrollingFeatures.es.js",
             "require": "./dist/pageComponents/ScrollingFeatures/ScrollingFeatures.cjs.js"
         },
+        "./RatingPreview": {
+            "types": "./dist/components/RatingPreview/RatingPreview.d.ts",
+            "import": "./dist/components/RatingPreview/RatingPreview.es.js",
+            "require": "./dist/components/RatingPreview/RatingPreview.cjs.js"
+        },
         "./dist/*.css": "./dist/*.css",
         "./dist/**/*.module.css": "./dist/**/*.module.css",
         "./styles/core": {