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

package/dist/components/InfiniteScroll/InfiniteScroll.es.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as D } from "react/jsx-runtime";
-import { forwardRef as ee, useRef as C, useState as P, useCallback as v, useEffect as b, useImperativeHandle as te } from "react";
+import { forwardRef as ee, useRef as y, useState as P, useCallback as v, useEffect as b, useImperativeHandle as te } from "react";
 import { cn as x } from "../../utils/cn/cn.es.js";
 import { useIsMobile as ne } from "../../utils/useIsMobile.es.js";
-import z from "./infiniteScroll.module.css.es.js";
+import z from "../../components/InfiniteScroll/infiniteScroll.module.css";
 function oe({
   items: p,
   speed: R = 50,
@@ -15,7 +15,7 @@ function oe({
   enableManualScroll: S = !1,
   renderItem: J
 }, K) {
-  const E = C(null), A = C(null), g = C(null), q = C(!1), y = C(performance.now()), [d, f] = P(0), [s, O] = P(0), [m, Q] = P(4), [k, H] = P(!1), U = ne(), M = v(
+  const E = y(null), A = y(null), C = y(null), q = y(!1), X = y(performance.now()), [d, f] = P(0), [s, O] = P(0), [m, Q] = P(4), [k, H] = P(!1), U = ne(), M = v(
     (e) => {
       if (s === 0) return e;
       const t = s;
@@ -54,27 +54,27 @@ function oe({
     });
     return E.current && e.observe(E.current), () => e.disconnect();
   }, [F]);
-  const X = v(
+  const w = v(
     (e) => {
       if (q.current || s === 0) {
-        g.current = requestAnimationFrame(X);
+        C.current = requestAnimationFrame(w);
         return;
       }
-      const t = e ?? performance.now(), n = t - y.current || 16.67;
-      y.current = t, f((c) => {
+      const t = e != null ? e : performance.now(), n = t - X.current || 16.67;
+      X.current = t, f((c) => {
         const i = k ? R * 0.5 : R, a = N === "right" ? -i : i;
         let l = c - a * (n / 1e3);
         return M(l);
-      }), g.current = requestAnimationFrame(X);
+      }), C.current = requestAnimationFrame(w);
     },
     [N, R, s, k, M]
   );
-  b(() => (y.current = performance.now(), g.current = requestAnimationFrame(X), () => {
-    g.current && cancelAnimationFrame(g.current);
-  }), [X]);
+  b(() => (X.current = performance.now(), C.current = requestAnimationFrame(w), () => {
+    C.current && cancelAnimationFrame(C.current);
+  }), [w]);
   const W = v(
     (e, t) => {
-      !(t === "mouse") && !(t === "touch" && U) || (e ? j ? H(!0) : q.current = !0 : (q.current = !1, H(!1), y.current = performance.now()));
+      !(t === "mouse") && !(t === "touch" && U) || (e ? j ? H(!0) : q.current = !0 : (q.current = !1, H(!1), X.current = performance.now()));
     },
     [U, j]
   ), V = v(
@@ -106,14 +106,14 @@ function oe({
       if (o.deltaX !== 0) {
         o.preventDefault();
         const L = o.deltaX * 2;
-        f((w) => M(w - L));
+        f((g) => M(g - L));
       }
     }, a = (o) => {
       n = !0, c = o.clientX, o.preventDefault();
     }, l = (o) => {
       if (!n || c === null) return;
-      const L = o.clientX, w = L - c;
-      c = L, f((I) => M(I + w));
+      const L = o.clientX, g = L - c;
+      c = L, f((I) => M(I + g));
     }, h = () => {
       n = !1, c = null;
     }, r = (o) => {
@@ -121,8 +121,8 @@ function oe({
     }, u = (o) => {
       if (t === null) return;
       o.preventDefault();
-      const w = o.touches[0].clientX, I = w - t;
-      t = w, f((Z) => M(Z + I));
+      const g = o.touches[0].clientX, I = g - t;
+      t = g, f((Z) => M(Z + I));
     }, T = () => {
       t = null;
     };

package/dist/components/InfiniteScroll/infiniteScroll.module.css

@@ -0,0 +1,35 @@
+.root {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    will-change: transform;
+}
+
+.content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    will-change: transform;
+    padding: 8px 0;
+}
+
+.root[data-manual-scroll="true"] {
+    cursor: grab;
+    user-select: none;
+}
+
+.root[data-manual-scroll="true"]:active {
+    cursor: grabbing;
+}
+
+.root[data-manual-scroll="true"] .item {
+    pointer-events: auto;
+}
+
+.item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

package/dist/components/Label/Label.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),e=require("../../styles/typography.module.css.cjs.js"),s=require("../../utils/cn/cn.cjs.js"),u=require("./label.module.css.cjs.js"),c={sm:e.default.labelXs,lg:e.default.labelSm},n=({children:t,color:a,size:l="sm",className:r})=>o.jsx("div",{className:s.cn(u.default.root,e.default.labelEmphasis,c[l],r),"data-size":l,"data-color":a,children:t});exports.Label=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/Label/label.module.css"),c={sm:e.labelXs,lg:e.labelSm},n=({children:t,color:l,size:s="sm",className:a})=>r.jsx("div",{className:o.cn(e.root,e.labelEmphasis,c[s],a),"data-size":s,"data-color":l,children:t});exports.Label=n;

package/dist/components/Label/Label.es.js

@@ -1,19 +1,18 @@
-import { jsx as s } from "react/jsx-runtime";
-import o from "../../styles/typography.module.css.es.js";
-import { cn as l } from "../../utils/cn/cn.es.js";
-import e from "./label.module.css.es.js";
-const p = {
+import { jsx as r } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn/cn.es.js";
+import o from "../../components/Label/label.module.css";
+const e = {
   sm: o.labelXs,
   lg: o.labelSm
-}, f = ({ children: m, color: t, size: r = "sm", className: a }) => /* @__PURE__ */ s(
+}, S = ({ children: a, color: l, size: s = "sm", className: m }) => /* @__PURE__ */ r(
   "div",
   {
-    className: l(e.root, o.labelEmphasis, p[r], a),
-    "data-size": r,
-    "data-color": t,
-    children: m
+    className: t(o.root, o.labelEmphasis, e[s], m),
+    "data-size": s,
+    "data-color": l,
+    children: a
   }
 );
 export {
-  f as Label
+  S as Label
 };

package/dist/components/Label/label.module.css

@@ -0,0 +1,70 @@
+.root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius-xxs);
+    color: var(--color-text-primary);
+    box-sizing: border-box;
+}
+.root[data-size='sm'] {
+    min-height: 24px;
+    padding: var(--spacing-4) var(--spacing-8);
+}
+.root[data-size='lg'] {
+    min-height: 28px;
+    padding: var(--spacing-8) var(--spacing-12);
+}
+
+.root[data-color='black'] {
+    background-color: var(--color-bg-fill-primary);
+    color: var(--color-text-primary-inverted);
+}
+
+.root[data-color='grey'] {
+    background-color: var(--color-bg-fill-alpha-black-10);
+}
+
+.root[data-color='white'] {
+    background-color: var(--color-bg-fill-brand-inverse);
+}
+
+.root[data-color='solar'] {
+    background-color: var(--color-bg-fill-brand-solar);
+}
+
+.root[data-color='indigo'] {
+    background-color: var(--color-bg-fill-brand-indigo);
+}
+
+.root[data-color='orchre'] {
+    background-color: var(--color-bg-fill-brand-orchre);
+}
+
+.root[data-color='alpha-white'] {
+    background-color: var(--color-bg-fill-alpha-white-10);
+    color: var(--color-text-primary-inverted);
+}
+
+.labelSm {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-xs);
+    letter-spacing: var(--letter-spacing-negative-sm);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-xs);
+}
+
+.labelXs {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-xs);
+    letter-spacing: var(--letter-spacing-null);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-xxs);
+}
+
+.labelEmphasis {
+    font-family: var(--font-decorative), monospace;
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-xxl);
+}

package/dist/components/Pagination/Pagination.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),m=require("react"),d=require("../../utils/cn/cn.cjs.js"),i=require("../Icon/Icon.cjs.js"),f=require("../Icon/constants.cjs.js"),_=require("../Typography/Typography.cjs.js"),e=require("./pagination.module.css.cjs.js"),h=(r,t,a)=>{if(t<=a)return Array.from({length:t},(c,u)=>u+1);const s=Math.floor(a/2);let n=Math.max(1,r-s),l=n+a-1;return l>t&&(l=t,n=l-a+1),Array.from({length:a},(c,u)=>n+u)},N=({page:r,pagesCount:t,visiblePagesLimit:a,disabled:s,onPageChange:n})=>{const l=m.useMemo(()=>h(r,t,a),[r,t,a]);return o.jsxs("div",{className:e.default.root,children:[o.jsx("button",{className:d.cn(e.default.arrow,e.default.arrowPrev),onClick:()=>n(r-1),disabled:s||r<=1,"aria-label":"Previous page",children:o.jsx(i.Icon,{name:f.EIconName.ARROW_BACK,className:e.default.icon})}),l.map(c=>o.jsx("button",{className:d.cn(e.default.page,c===r&&e.default.activePage),onClick:()=>n(c),children:o.jsx(_.Typography,{defaultVariant:"labelXl",weight:"regular",children:c.toString().padStart(2,"0")})},c)),o.jsx("button",{className:d.cn(e.default.arrow,e.default.arrowNext),onClick:()=>n(r+1),disabled:s||r>=t,"aria-label":"Next page",children:o.jsx(i.Icon,{name:f.EIconName.ARROW_FORWARD,className:e.default.icon})})]})};exports.Pagination=N;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),h=require("react"),u=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/Pagination/pagination.module.css"),m=require("../Icon/Icon.cjs.js"),d=require("../Icon/constants.cjs.js"),N=require("../Typography/Typography.cjs.js"),_=(r,n,c)=>{if(n<=c)return Array.from({length:n},(a,i)=>i+1);const l=Math.floor(c/2);let o=Math.max(1,r-l),s=o+c-1;return s>n&&(s=n,o=s-c+1),Array.from({length:c},(a,i)=>o+i)},x=({page:r,pagesCount:n,visiblePagesLimit:c,disabled:l,onPageChange:o})=>{const s=h.useMemo(()=>_(r,n,c),[r,n,c]);return t.jsxs("div",{className:e.root,children:[t.jsx("button",{className:u.cn(e.arrow,e.arrowPrev),onClick:()=>o(r-1),disabled:l||r<=1,"aria-label":"Previous page",children:t.jsx(m.Icon,{name:d.EIconName.ARROW_BACK,className:e.icon})}),s.map(a=>t.jsx("button",{className:u.cn(e.page,a===r&&e.activePage),onClick:()=>o(a),children:t.jsx(N.Typography,{defaultVariant:"labelXl",weight:"regular",children:a.toString().padStart(2,"0")})},a)),t.jsx("button",{className:u.cn(e.arrow,e.arrowNext),onClick:()=>o(r+1),disabled:l||r>=n,"aria-label":"Next page",children:t.jsx(m.Icon,{name:d.EIconName.ARROW_FORWARD,className:e.icon})})]})};exports.Pagination=x;

package/dist/components/Pagination/Pagination.es.js

@@ -2,10 +2,10 @@
 import { jsxs as N, jsx as e } from "react/jsx-runtime";
 import { useMemo as h } from "react";
 import { cn as s } from "../../utils/cn/cn.es.js";
+import o from "../../components/Pagination/pagination.module.css";
 import { Icon as d } from "../Icon/Icon.es.js";
 import { EIconName as i } from "../Icon/constants.es.js";
 import { Typography as x } from "../Typography/Typography.es.js";
-import o from "./pagination.module.css.es.js";
 const A = (r, t, a) => {
   if (t <= a)
     return Array.from({ length: t }, (c, f) => f + 1);

package/dist/components/Pagination/pagination.module.css

@@ -0,0 +1,59 @@
+.root {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+}
+
+.page {
+    background: none;
+    border: none;
+    color: var(--color-text-primary-disabled);
+    padding: 0;
+    cursor: pointer;
+    transition: opacity 0.3s, color 0.3s;
+}
+
+.page:not(:disabled):hover {
+    color: var(--color-text-primary);
+    opacity: 0.8;
+}
+
+.activePage {
+    color: var(--color-text-primary);
+}
+
+.arrow {
+    background: none;
+    border: none;
+    color: var(--color-text-primary);
+    padding: 0;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.arrow:hover {
+    opacity: 0.8;
+}
+
+.arrowPrev {
+    margin-right: 4px;
+}
+
+.arrowNext {
+    margin-left: 4px;
+}
+
+.icon {
+    width: 24px;
+    height: 24px;
+}
+
+.page:disabled,
+.arrow:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}

package/dist/components/PlayButton/PlayButton.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../utils/cn/cn.cjs.js"),r=require("../Icon/Icon.cjs.js"),s=require("../Icon/constants.cjs.js"),n=require("./playButton.module.css.cjs.js"),u=({inverted:t,onClick:o})=>e.jsx("button",{className:c.cn(n.default.button,t&&n.default.inverted),onClick:o,children:e.jsx("div",{className:n.default.iconWrapper,children:e.jsx(r.Icon,{name:s.EIconName.PLAY})})});exports.PlayButton=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/PlayButton/playButton.module.css"),s=require("../Icon/Icon.cjs.js"),r=require("../Icon/constants.cjs.js"),i=({inverted:t,onClick:c})=>n.jsx("button",{className:o.cn(e.button,t&&e.inverted),onClick:c,children:n.jsx("div",{className:e.iconWrapper,children:n.jsx(s.Icon,{name:r.EIconName.PLAY})})});exports.PlayButton=i;

package/dist/components/PlayButton/PlayButton.es.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
 import { cn as m } from "../../utils/cn/cn.es.js";
+import r from "../../components/PlayButton/playButton.module.css";
 import { Icon as n } from "../Icon/Icon.es.js";
 import { EIconName as i } from "../Icon/constants.es.js";
-import r from "./playButton.module.css.es.js";
 const f = ({ inverted: t, onClick: e }) => /* @__PURE__ */ o("button", { className: m(r.button, t && r.inverted), onClick: e, children: /* @__PURE__ */ o("div", { className: r.iconWrapper, children: /* @__PURE__ */ o(n, { name: i.PLAY }) }) });
 export {
   f as PlayButton

package/dist/components/PlayButton/playButton.module.css

@@ -0,0 +1,30 @@
+.button {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius-full);
+    border: none;
+    padding: var(--spacing-24);
+    margin: 0;
+    cursor: pointer;
+    color: var(--color-text-primary-inverted);
+    background-color: var(--color-bg-fill-alpha-black-40);
+    transition: opacity 0.3s ease;
+}
+
+.button:hover {
+    opacity: 0.85;
+}
+
+.inverted {
+    background-color: var(--color-bg-fill-alpha-white-20);
+}
+
+.iconWrapper {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}

package/dist/components/Pricing/Pricing.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../utils/cn/cn.cjs.js"),l=require("../Button/Button.cjs.js"),o=require("../Label/Label.cjs.js"),d=require("../Typography/Typography.cjs.js"),h=require("./components/BenefitItem/BenefitItem.cjs.js"),a=require("./pricing.module.css.cjs.js"),p=require("../../types/analytics/analytics.cjs.js"),b=({label:i,price:u,items:m,link:t,button:n,zenpatientId:g,element:y})=>{const s={event:p.EAnalyticsEvent.ctaClicked,type:p.EAnalyticsEventType.interaction,component:"Pricing",element:y,payload:{ctaLabel:"GET STARTED",ctaLink:t,productId:g}};return e.jsxs("div",{className:a.default.root,children:[e.jsx(o.Label,{size:"lg",color:i.color,className:c.cn(a.default.pricingLabel,a.default.pricingLabelDesktop),children:i.label}),e.jsx(o.Label,{size:"sm",color:i.color,className:c.cn(a.default.pricingLabel,a.default.pricingLabelMobile),children:i.label}),e.jsxs("p",{className:a.default.pricing,children:[e.jsx(d.Typography,{as:"span",defaultVariant:"displayMd",mobileVariant:"displaySm",className:a.default.pricingTextPrimary,children:`$${u}`}),e.jsx(d.Typography,{as:"span",defaultVariant:"headingSm",mobileVariant:"headingXs",className:a.default.pricingTextSecondary,children:"/ mo"})]}),e.jsx("div",{className:a.default.benefits,children:m.map((r,f)=>e.jsx(h.BenefitItem,{badge:r.badge,label:r.label},f))}),e.jsx("div",{className:a.default.pricingButtonContainerDesktop,children:e.jsx(l.Button,{...n,size:"lg",as:"a",href:t,analyticsProps:s,children:"GET STARTED"})}),e.jsx("div",{className:a.default.pricingButtonContainerMobile,children:e.jsx(l.Button,{...n,size:"md",as:"a",href:t,analyticsProps:s,children:"GET STARTED"})}),e.jsx("div",{className:a.default.leftBorder}),e.jsx("div",{className:a.default.rightBorder})]})};exports.Pricing=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../utils/cn/cn.cjs.js"),i=require("../../src/components/Pricing/pricing.module.css"),l=require("../../types/analytics/analytics.cjs.js"),o=require("../Label/Label.cjs.js"),p=require("../Typography/Typography.cjs.js"),b=require("./components/BenefitItem/BenefitItem.cjs.js"),d=require("../Button/Button.cjs.js"),x=({label:a,price:m,items:y,link:s,button:n,zenpatientId:g,element:u})=>{const r={event:l.EAnalyticsEvent.ctaClicked,type:l.EAnalyticsEventType.interaction,component:"Pricing",element:u,payload:{ctaLabel:"GET STARTED",ctaLink:s,productId:g}};return e.jsxs("div",{className:i.root,children:[e.jsx(o.Label,{size:"lg",color:a.color,className:c.cn(i.pricingLabel,i.pricingLabelDesktop),children:a.label}),e.jsx(o.Label,{size:"sm",color:a.color,className:c.cn(i.pricingLabel,i.pricingLabelMobile),children:a.label}),e.jsxs("p",{className:i.pricing,children:[e.jsx(p.Typography,{as:"span",defaultVariant:"displayMd",mobileVariant:"displaySm",className:i.pricingTextPrimary,children:`$${m}`}),e.jsx(p.Typography,{as:"span",defaultVariant:"headingSm",mobileVariant:"headingXs",className:i.pricingTextSecondary,children:"/ mo"})]}),e.jsx("div",{className:i.benefits,children:y.map((t,h)=>e.jsx(b.BenefitItem,{badge:t.badge,label:t.label},h))}),e.jsx("div",{className:i.pricingButtonContainerDesktop,children:e.jsx(d.Button,{...n,size:"lg",as:"a",href:s,analyticsProps:r,children:"GET STARTED"})}),e.jsx("div",{className:i.pricingButtonContainerMobile,children:e.jsx(d.Button,{...n,size:"md",as:"a",href:s,analyticsProps:r,children:"GET STARTED"})}),e.jsx("div",{className:i.leftBorder}),e.jsx("div",{className:i.rightBorder})]})};exports.Pricing=x;

package/dist/components/Pricing/Pricing.es.js

@@ -1,15 +1,15 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
 import { cn as o } from "../../utils/cn/cn.es.js";
-import { Button as l } from "../Button/Button.es.js";
-import { Label as m } from "../Label/Label.es.js";
-import { Typography as p } from "../Typography/Typography.es.js";
-import { BenefitItem as b } from "./components/BenefitItem/BenefitItem.es.js";
-import i from "./pricing.module.css.es.js";
-import { EAnalyticsEventType as T, EAnalyticsEvent as E } from "../../types/analytics/analytics.es.js";
+import i from "../../components/Pricing/pricing.module.css";
+import { EAnalyticsEventType as b, EAnalyticsEvent as T } from "../../types/analytics/analytics.es.js";
+import { Label as l } from "../Label/Label.es.js";
+import { Typography as m } from "../Typography/Typography.es.js";
+import { BenefitItem as E } from "./components/BenefitItem/BenefitItem.es.js";
+import { Button as p } from "../Button/Button.es.js";
 const D = ({ label: e, price: d, items: g, link: r, button: n, zenpatientId: h, element: f }) => {
   const c = {
-    event: E.ctaClicked,
-    type: T.interaction,
+    event: T.ctaClicked,
+    type: b.interaction,
     component: "Pricing",
     element: f,
     payload: {
@@ -19,11 +19,11 @@ const D = ({ label: e, price: d, items: g, link: r, button: n, zenpatientId: h,
     }
   };
   return /* @__PURE__ */ t("div", { className: i.root, children: [
-    /* @__PURE__ */ a(m, { size: "lg", color: e.color, className: o(i.pricingLabel, i.pricingLabelDesktop), children: e.label }),
-    /* @__PURE__ */ a(m, { size: "sm", color: e.color, className: o(i.pricingLabel, i.pricingLabelMobile), children: e.label }),
+    /* @__PURE__ */ a(l, { size: "lg", color: e.color, className: o(i.pricingLabel, i.pricingLabelDesktop), children: e.label }),
+    /* @__PURE__ */ a(l, { size: "sm", color: e.color, className: o(i.pricingLabel, i.pricingLabelMobile), children: e.label }),
     /* @__PURE__ */ t("p", { className: i.pricing, children: [
       /* @__PURE__ */ a(
-        p,
+        m,
         {
           as: "span",
           defaultVariant: "displayMd",
@@ -33,7 +33,7 @@ const D = ({ label: e, price: d, items: g, link: r, button: n, zenpatientId: h,
         }
       ),
       /* @__PURE__ */ a(
-        p,
+        m,
         {
           as: "span",
           defaultVariant: "headingSm",
@@ -43,9 +43,9 @@ const D = ({ label: e, price: d, items: g, link: r, button: n, zenpatientId: h,
         }
       )
     ] }),
-    /* @__PURE__ */ a("div", { className: i.benefits, children: g.map((s, y) => /* @__PURE__ */ a(b, { badge: s.badge, label: s.label }, y)) }),
-    /* @__PURE__ */ a("div", { className: i.pricingButtonContainerDesktop, children: /* @__PURE__ */ a(l, { ...n, size: "lg", as: "a", href: r, analyticsProps: c, children: "GET STARTED" }) }),
-    /* @__PURE__ */ a("div", { className: i.pricingButtonContainerMobile, children: /* @__PURE__ */ a(l, { ...n, size: "md", as: "a", href: r, analyticsProps: c, children: "GET STARTED" }) }),
+    /* @__PURE__ */ a("div", { className: i.benefits, children: g.map((s, y) => /* @__PURE__ */ a(E, { badge: s.badge, label: s.label }, y)) }),
+    /* @__PURE__ */ a("div", { className: i.pricingButtonContainerDesktop, children: /* @__PURE__ */ a(p, { ...n, size: "lg", as: "a", href: r, analyticsProps: c, children: "GET STARTED" }) }),
+    /* @__PURE__ */ a("div", { className: i.pricingButtonContainerMobile, children: /* @__PURE__ */ a(p, { ...n, size: "md", as: "a", href: r, analyticsProps: c, children: "GET STARTED" }) }),
     /* @__PURE__ */ a("div", { className: i.leftBorder }),
     /* @__PURE__ */ a("div", { className: i.rightBorder })
   ] });

package/dist/components/Pricing/components/BenefitItem/BenefitItem.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../TypeBadge/TypeBadge.cjs.js"),n=require("../../../Typography/Typography.cjs.js"),a=require("./benefitItem.module.css.cjs.js"),i=({badge:t,label:r})=>e.jsxs("div",{className:a.default.root,children:[e.jsx(o.TypeBadge,{type:t}),e.jsx(n.Typography,{defaultVariant:"labelLg",mobileVariant:"labelMd",children:r})]});exports.BenefitItem=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../../src/components/Pricing/components/BenefitItem/benefitItem.module.css"),o=require("../../../TypeBadge/TypeBadge.cjs.js"),s=require("../../../Typography/Typography.cjs.js"),a=({badge:t,label:r})=>e.jsxs("div",{className:n.root,children:[e.jsx(o.TypeBadge,{type:t}),e.jsx(s.Typography,{defaultVariant:"labelLg",mobileVariant:"labelMd",children:r})]});exports.BenefitItem=a;

package/dist/components/Pricing/components/BenefitItem/BenefitItem.es.js

@@ -1,10 +1,10 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { TypeBadge as a } from "../../../TypeBadge/TypeBadge.es.js";
-import { Typography as i } from "../../../Typography/Typography.es.js";
-import m from "./benefitItem.module.css.es.js";
-const d = ({ badge: e, label: t }) => /* @__PURE__ */ o("div", { className: m.root, children: [
-  /* @__PURE__ */ r(a, { type: e }),
-  /* @__PURE__ */ r(i, { defaultVariant: "labelLg", mobileVariant: "labelMd", children: t })
+import a from "../../../../components/Pricing/components/BenefitItem/benefitItem.module.css";
+import { TypeBadge as i } from "../../../TypeBadge/TypeBadge.es.js";
+import { Typography as m } from "../../../Typography/Typography.es.js";
+const d = ({ badge: e, label: t }) => /* @__PURE__ */ o("div", { className: a.root, children: [
+  /* @__PURE__ */ r(i, { type: e }),
+  /* @__PURE__ */ r(m, { defaultVariant: "labelLg", mobileVariant: "labelMd", children: t })
 ] });
 export {
   d as BenefitItem

package/dist/components/Pricing/components/BenefitItem/benefitItem.module.css

@@ -0,0 +1,9 @@
+.root {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    width: 100%;
+    padding: var(--spacing-12);
+    border-radius: var(--border-radius-xs);
+    background-color: var(--color-bg-neutral-light);
+}

package/dist/components/Pricing/pricing.module.css

@@ -0,0 +1,123 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    width: 420px;
+    height: 592px;
+    padding: var(--spacing-48);
+    position: relative;
+}
+
+.pricingLabel {
+    width: max-content;
+}
+
+.pricingLabelDesktop {
+    margin-bottom: var(--spacing-28);
+}
+
+.pricingLabelMobile {
+    display: none;
+    margin-bottom: var(--spacing-20);
+}
+
+.pricing {
+    margin-bottom: var(--spacing-28);
+}
+
+.benefits {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-12);
+    margin-bottom: auto;
+}
+
+.pricingButtonContainerDesktop {
+    display: flex;
+}
+
+.pricingButtonContainerMobile {
+    display: none;
+}
+
+.root::before,
+.root::after {
+    content: '';
+    position: absolute;
+    height: var(--border-width-sm);
+    background-color: var(--border-color-light);
+}
+
+.root::before {
+    top: 0;
+    left: var(--spacing-16);
+    right: var(--spacing-16);
+}
+
+.root::after {
+    bottom: 0;
+    left: var(--spacing-16);
+    right: var(--spacing-16);
+}
+
+.leftBorder,
+.rightBorder {
+    position: absolute;
+    width: var(--border-width-sm);
+    background-color: var(--border-color-light);
+}
+
+.leftBorder {
+    top: var(--spacing-16);
+    bottom: var(--spacing-16);
+    left: 0;
+}
+
+.rightBorder {
+    top: var(--spacing-16);
+    bottom: var(--spacing-16);
+    right: 0;
+}
+
+@media (width <= 768px) {
+    .root {
+        width: 335px;
+        height: fit-content;
+        padding: var(--spacing-28);
+    }
+
+    .pricingLabelDesktop {
+        display: none;
+    }
+
+    .pricingLabelMobile {
+        display: flex;
+    }
+
+    .pricing {
+        margin-bottom: var(--spacing-20);
+    }
+
+    .benefits {
+        margin-bottom: 32px;
+    }
+
+    .pricingButtonContainerDesktop {
+        display: none;
+    }
+
+    .pricingButtonContainerMobile {
+        display: flex;
+    }
+
+    .leftBorder {
+        top: 8px;
+        bottom: 8px;
+        left: 0;
+    }
+
+    .rightBorder {
+        top: 8px;
+        bottom: 8px;
+        right: 0;
+    }
+}

package/dist/components/ProductGallery/ProductGallery.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),q=require("../../node_modules/swiper/modules/navigation.cjs.js"),p=require("../../node_modules/swiper/swiper-react.cjs.js"),f=require("../../utils/cn/cn.cjs.js"),x=require("../../utils/useSwiper/useSwiper.cjs.js"),h=require("../ProgressButton/ProgressButton.cjs.js"),j=require("../ProductGalleryCard/ProductGalleryCard.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const r=require("./productGallery.module.css.cjs.js"),b=[q.default],v=({slides:n,header:m,isTabbed:i=!1})=>{const{swiper:s,activeIndex:a,isEnd:l,setIsEnd:w,hideNav:S,handleSlideChange:g,handlePrevClick:o,handleNextClick:d,onSwiperInit:C,handleSwiperResize:P,handleSlideTo:c}=x.useSwiper();return u.useEffect(()=>{s==null||s.setProgress(0,300)},[s]),u.useEffect(()=>{n.length&&c(0)},[n,c]),e.jsxs("div",{className:r.default.root,children:[e.jsxs("div",{className:f.cn(r.default.topRow,{[r.default.topRowTabbed]:i}),children:[e.jsx("div",{className:r.default.headerWrapper,children:m}),e.jsx("div",{className:f.cn(r.default.swiperControlsDesktop,{[r.default.swiperControlsHidden]:S,[r.default.swiperControlsTabbed]:i}),children:e.jsx(h.ProgressButton,{left:{disabled:a<=0,onClick:o},right:{disabled:l,onClick:d}})})]}),e.jsx("div",{className:r.default.carouselArea,children:e.jsx(p.Swiper,{onSwiper:C,onResize:P,onSlideChange:g,onReachEnd:()=>w(!0),modules:b,spaceBetween:0,slidesPerView:"auto",className:r.default.swiper,children:n.map(t=>e.jsx(p.SwiperSlide,{className:r.default.swiperSlide,children:e.jsx(j.ProductGalleryCard,{name:t.name,price:t.price,image:t.image,link:t.link,buttons:t.buttons,zenpatientId:t.zenpatientId})},`${t.name}_${t.link}`))})}),e.jsx("div",{className:r.default.swiperControlsMobile,children:e.jsx(h.ProgressButton,{left:{disabled:a<=0,onClick:o},right:{disabled:l,onClick:d}})})]})};exports.ProductGallery=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),j=require("swiper/modules"),p=require("swiper/react"),h=require("../../utils/cn/cn.cjs.js"),q=require("../../utils/useSwiper/useSwiper.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const r=require("../../src/components/ProductGallery/productGallery.module.css"),m=require("../ProgressButton/ProgressButton.cjs.js"),b=require("../ProductGalleryCard/ProductGalleryCard.cjs.js"),v=[j.Navigation],N=({slides:i,header:w,isTabbed:t=!1})=>{const{swiper:n,activeIndex:o,isEnd:a,setIsEnd:S,hideNav:g,handleSlideChange:C,handlePrevClick:l,handleNextClick:c,onSwiperInit:x,handleSwiperResize:P,handleSlideTo:d}=q.useSwiper();return u.useEffect(()=>{n==null||n.setProgress(0,300)},[n]),u.useEffect(()=>{i.length&&d(0)},[i,d]),e.jsxs("div",{className:r.root,children:[e.jsxs("div",{className:h.cn(r.topRow,{[r.topRowTabbed]:t}),children:[e.jsx("div",{className:r.headerWrapper,children:w}),e.jsx("div",{className:h.cn(r.swiperControlsDesktop,{[r.swiperControlsHidden]:g,[r.swiperControlsTabbed]:t}),children:e.jsx(m.ProgressButton,{left:{disabled:o<=0,onClick:l},right:{disabled:a,onClick:c}})})]}),e.jsx("div",{className:r.carouselArea,children:e.jsx(p.Swiper,{onSwiper:x,onResize:P,onSlideChange:C,onReachEnd:()=>S(!0),modules:v,spaceBetween:0,slidesPerView:"auto",className:r.swiper,children:i.map(s=>e.jsx(p.SwiperSlide,{className:r.swiperSlide,children:e.jsx(b.ProductGalleryCard,{name:s.name,price:s.price,image:s.image,link:s.link,buttons:s.buttons,zenpatientId:s.zenpatientId})},`${s.name}_${s.link}`))})}),e.jsx("div",{className:r.swiperControlsMobile,children:e.jsx(m.ProgressButton,{left:{disabled:o<=0,onClick:l},right:{disabled:a,onClick:c}})})]})};exports.ProductGallery=N;

package/dist/components/ProductGallery/ProductGallery.es.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import { useEffect as p } from "react";
-import k from "../../node_modules/swiper/modules/navigation.es.js";
-import { Swiper as v, SwiperSlide as b } from "../../node_modules/swiper/swiper-react.es.js";
+import { Navigation as k } from "swiper/modules";
+import { Swiper as v, SwiperSlide as b } from "swiper/react";
 import { cn as h } from "../../utils/cn/cn.es.js";
 import { useSwiper as P } from "../../utils/useSwiper/useSwiper.es.js";
-import { ProgressButton as f } from "../ProgressButton/ProgressButton.es.js";
-import { ProductGalleryCard as E } from "../ProductGalleryCard/ProductGalleryCard.es.js";
 /* empty css                                      */
 /* empty css                                                  */
 /* empty css                                                  */
-import e from "./productGallery.module.css.es.js";
+import e from "../../components/ProductGallery/productGallery.module.css";
+import { ProgressButton as f } from "../ProgressButton/ProgressButton.es.js";
+import { ProductGalleryCard as E } from "../ProductGalleryCard/ProductGalleryCard.es.js";
 const I = [k], $ = ({ slides: n, header: w, isTabbed: t = !1 }) => {
   const {
     swiper: o,