@zenpatient-org/healthspan-marketing-ui 0.1.21 → 0.1.23

package/README.md

@@ -9,6 +9,7 @@ npm install @zenpatient-org/healthspan-marketing-ui
 ```
 
 ## Development
+
 Start the storybook:
 
 ```bash
@@ -21,7 +22,16 @@ When you create a new public component, you need to add it to the `components` s
 
 Avoid using barrel exports. Instead, import the components directly from the `src` directory.
 
+We use eslint and prettier, please ensure you have these lines in your IDE settings:
+
+```
+  "eslint.useFlatConfig": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+```
+
 ## Importing the components and modules
+
 ```tsx
 import { Button } from '@zenpatient-org/healthspan-marketing-ui/Button';
 import { CallbackModule } from '@zenpatient-org/healthspan-marketing-ui/CallbackModule';
@@ -46,5 +56,5 @@ npm publish
 Design tokens (colors, spacing, etc.) are injected via CSS variables globally. Just import the global styles once:
 
 ```tsx
-import "@zenpatient-org/healthspan-marketing-ui/dist/healthspan-marketing-ui.css"
+import '@zenpatient-org/healthspan-marketing-ui/dist/healthspan-marketing-ui.css';
 ```

package/dist/components/Button/Button.es.js

@@ -4,13 +4,31 @@ import { cn as u } from "../../utils/cn/cn.es.js";
 import { Icon as n } from "../Icon/Icon.es.js";
 import s from "./button.module.css.es.js";
 const b = h(
-  ({ variant: m = "primary", size: e = "md", as: i = "button", disabled: r = !1, children: c, prefixIcon: t, suffixIcon: o, ...l }, d) => {
+  ({
+    variant: m = "primary",
+    size: e = "md",
+    as: i = "button",
+    disabled: r = !1,
+    children: c,
+    prefixIcon: t,
+    suffixIcon: o,
+    ...l
+  }, d) => {
     const p = s[m] || "", f = s[e] || "", v = r ? s.disabled : "";
-    return /* @__PURE__ */ a(i, { ref: d, ...l, className: u(s.button, p, f, v), disabled: r, children: /* @__PURE__ */ N("div", { className: s.content, children: [
-      t && /* @__PURE__ */ a("div", { className: s.iconWrap, children: /* @__PURE__ */ a(n, { name: t }) }),
-      /* @__PURE__ */ a("div", { children: c }),
-      o && /* @__PURE__ */ a("div", { className: s.iconWrap, children: /* @__PURE__ */ a(n, { name: o }) })
-    ] }) });
+    return /* @__PURE__ */ a(
+      i,
+      {
+        ref: d,
+        ...l,
+        className: u(s.button, p, f, v),
+        disabled: r,
+        children: /* @__PURE__ */ N("div", { className: s.content, children: [
+          t && /* @__PURE__ */ a("div", { className: s.iconWrap, children: /* @__PURE__ */ a(n, { name: t }) }),
+          /* @__PURE__ */ a("div", { children: c }),
+          o && /* @__PURE__ */ a("div", { className: s.iconWrap, children: /* @__PURE__ */ a(n, { name: o }) })
+        ] })
+      }
+    );
   }
 );
 b.displayName = "Button";

package/dist/components/ComplexTooltip/ComplexTooltip.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),j=require("../../_virtual/Popover.cjs.js"),d=require("../Icon/constants.cjs.js"),q=require("../Icon/Icon.cjs.js"),y=require("../TextButton/TextButton.cjs.js"),m=require("../Typography/Typography.cjs.js"),g=require("../../utils/cn/cn.cjs.js"),n=require("./complexTooltip.module.css.cjs.js"),I=({trigger:r,title:h,description:f,link:a,style:l="light",isBlurred:u=!1,children:x,positions:T=["top","bottom","left","right"]})=>{const[v,i]=o.useState(!1),s=o.useRef(null),c=o.useCallback(()=>{s.current&&clearTimeout(s.current),i(!0)},[]),t=o.useCallback(()=>{s.current=setTimeout(()=>i(!1),200)},[]),p=o.useCallback(()=>i(b=>!b),[]),C=o.useMemo(()=>r==="hover"?{onMouseEnter:c,onMouseLeave:t}:{onClick:p},[r,c,t,p]),_=o.useMemo(()=>r==="hover"?{onMouseEnter:c,onMouseLeave:t}:{},[r,c,t]);return o.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]),e.jsx(j.PopoverExports.Popover,{isOpen:v,positions:T,padding:8,onClickOutside:t,content:e.jsxs("div",{className:g.cn(n.default.content,u&&n.default.blurred),"data-style":l,..._,children:[e.jsxs("div",{className:n.default.contentHeader,children:[e.jsx(m.Typography,{as:"h4",defaultVariant:"headingSm",children:h}),e.jsxs("button",{className:n.default.closeButton,onClick:t,children:["(",e.jsx(q.Icon,{name:d.EIconName.CLOSE,className:n.default.closeIcon}),")"]})]}),e.jsx(m.Typography,{as:"p",defaultVariant:"bodySm",children:f}),a&&e.jsx(y.TextButton,{suffixIcon:d.EIconName.ARROW_FORWARD,as:"a",href:a.url,inverted:l==="dark"&&!u||l==="light"&&u,children:a.label})]}),children:e.jsx("div",{className:n.default.trigger,...C,children:x})})};exports.ComplexTooltip=I;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),e=require("react"),x=require("../../_virtual/Popover.cjs.js"),h=require("../../utils/useIsMobile.cjs.js"),k=require("./components/ComplexTooltipContent/ComplexTooltipContent.cjs.js"),q=({trigger:n,title:p,description:a,link:m,style:f="light",isBlurred:M=!1,children:c,positions:b=["top","bottom","left","right"],onClose:r})=>{const[v,u]=e.useState(!1),o=e.useRef(null),s=e.useCallback(()=>{o.current&&clearTimeout(o.current),o.current=setTimeout(()=>u(!0),200)},[]),t=e.useCallback(()=>{o.current=setTimeout(()=>{u(!1),r==null||r()},200)},[r]),l=e.useCallback(()=>u(d=>!d),[]),C=e.useMemo(()=>n==="hover"?{onMouseEnter:s,onMouseLeave:t}:{onClick:l},[n,s,t,l]),T=e.useMemo(()=>n==="hover"?{onMouseEnter:s,onMouseLeave:t}:{},[n,s,t]);return e.useEffect(()=>()=>{o.current&&clearTimeout(o.current)},[]),h.useIsMobile()?c:i.jsx(x.PopoverExports.Popover,{isOpen:v,positions:b,padding:8,onClickOutside:t,content:i.jsx(k.ComplexTooltipContent,{title:p,description:a,link:m,style:f,isBlurred:M,onClose:t,...T}),children:i.jsx("div",{...C,children:c})})};exports.ComplexTooltip=q;

package/dist/components/ComplexTooltip/ComplexTooltip.d.ts

@@ -1,19 +1,11 @@
-import { default as React } from 'react';
+import { ReactElement } from 'react';
 import { PopoverPosition } from 'react-tiny-popover';
-import { TColorScheme } from '../../types/common';
+import { CommonComplexTooltipProps } from './types';
 
 type ComplexTooltipProps = {
+    children: ReactElement;
     trigger: 'hover' | 'click';
-    title: string;
-    description: string;
-    link?: {
-        label: string;
-        url: string;
-    };
-    children: React.ReactElement;
-    style: Omit<TColorScheme, 'custom'>;
     positions?: Array<PopoverPosition>;
-    isBlurred?: boolean;
-};
-export declare const ComplexTooltip: ({ trigger, title, description, link, style, isBlurred, children, positions, }: ComplexTooltipProps) => import("react/jsx-runtime").JSX.Element;
+} & CommonComplexTooltipProps;
+export declare const ComplexTooltip: ({ trigger, title, description, link, style, isBlurred, children, positions, onClose, }: ComplexTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ComplexTooltip/ComplexTooltip.es.js

@@ -1,70 +1,60 @@
 "use client";
-import { jsx as o, jsxs as m } from "react/jsx-runtime";
-import { useState as M, useRef as P, useCallback as u, useMemo as d, useEffect as R } from "react";
-import { P as g } from "../../_virtual/Popover.es.js";
-import { EIconName as f } from "../Icon/constants.es.js";
-import { Icon as k } from "../Icon/Icon.es.js";
-import { TextButton as I } from "../TextButton/TextButton.es.js";
-import { Typography as h } from "../Typography/Typography.es.js";
-import { cn as S } from "../../utils/cn/cn.es.js";
-import t from "./complexTooltip.module.css.es.js";
-const _ = ({
-  trigger: n,
-  title: v,
-  description: C,
-  link: a,
-  style: c = "light",
-  isBlurred: l = !1,
-  children: x,
-  positions: O = ["top", "bottom", "left", "right"]
+import { jsx as u } from "react/jsx-runtime";
+import { useState as C, useRef as P, useCallback as i, useMemo as l, useEffect as k } from "react";
+import { P as E } from "../../_virtual/Popover.es.js";
+import { useIsMobile as O } from "../../utils/useIsMobile.es.js";
+import { ComplexTooltipContent as L } from "./components/ComplexTooltipContent/ComplexTooltipContent.es.js";
+const y = ({
+  trigger: t,
+  title: m,
+  description: a,
+  link: f,
+  style: v = "light",
+  isBlurred: M = !1,
+  children: c,
+  positions: d = ["top", "bottom", "left", "right"],
+  onClose: r
 }) => {
-  const [b, i] = M(!1), r = P(null), s = u(() => {
-    r.current && clearTimeout(r.current), i(!0);
-  }, []), e = u(() => {
-    r.current = setTimeout(() => i(!1), 200);
-  }, []), p = u(() => i((T) => !T), []), E = d(() => n === "hover" ? {
-    onMouseEnter: s,
-    onMouseLeave: e
+  const [h, s] = C(!1), e = P(null), n = i(() => {
+    e.current && clearTimeout(e.current), e.current = setTimeout(() => s(!0), 200);
+  }, []), o = i(() => {
+    e.current = setTimeout(() => {
+      s(!1), r == null || r();
+    }, 200);
+  }, [r]), p = i(() => s((x) => !x), []), T = l(() => t === "hover" ? {
+    onMouseEnter: n,
+    onMouseLeave: o
   } : {
     onClick: p
-  }, [n, s, e, p]), N = d(() => n === "hover" ? {
-    onMouseEnter: s,
-    onMouseLeave: e
-  } : {}, [n, s, e]);
-  return R(() => () => {
-    r.current && clearTimeout(r.current);
-  }, []), /* @__PURE__ */ o(
-    g.Popover,
+  }, [t, n, o, p]), b = l(() => t === "hover" ? {
+    onMouseEnter: n,
+    onMouseLeave: o
+  } : {}, [t, n, o]);
+  return k(() => () => {
+    e.current && clearTimeout(e.current);
+  }, []), O() ? c : /* @__PURE__ */ u(
+    E.Popover,
     {
-      isOpen: b,
-      positions: O,
+      isOpen: h,
+      positions: d,
       padding: 8,
-      onClickOutside: e,
-      content: /* @__PURE__ */ m("div", { className: S(t.content, l && t.blurred), "data-style": c, ...N, children: [
-        /* @__PURE__ */ m("div", { className: t.contentHeader, children: [
-          /* @__PURE__ */ o(h, { as: "h4", defaultVariant: "headingSm", children: v }),
-          /* @__PURE__ */ m("button", { className: t.closeButton, onClick: e, children: [
-            "(",
-            /* @__PURE__ */ o(k, { name: f.CLOSE, className: t.closeIcon }),
-            ")"
-          ] })
-        ] }),
-        /* @__PURE__ */ o(h, { as: "p", defaultVariant: "bodySm", children: C }),
-        a && /* @__PURE__ */ o(
-          I,
-          {
-            suffixIcon: f.ARROW_FORWARD,
-            as: "a",
-            href: a.url,
-            inverted: c === "dark" && !l || c === "light" && l,
-            children: a.label
-          }
-        )
-      ] }),
-      children: /* @__PURE__ */ o("div", { className: t.trigger, ...E, children: x })
+      onClickOutside: o,
+      content: /* @__PURE__ */ u(
+        L,
+        {
+          title: m,
+          description: a,
+          link: f,
+          style: v,
+          isBlurred: M,
+          onClose: o,
+          ...b
+        }
+      ),
+      children: /* @__PURE__ */ u("div", { ...T, children: c })
     }
   );
 };
 export {
-  _ as ComplexTooltip
+  y as ComplexTooltip
 };

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../../Icon/Icon.cjs.js"),a=require("../../../Icon/constants.cjs.js"),h=require("../../../TextButton/TextButton.cjs.js"),s=require("../../../Typography/Typography.cjs.js"),x=require("../../../../utils/cn/cn.cjs.js"),t=require("./complexTooltipContent.module.css.cjs.js"),_=({style:n,title:l,description:u,link:o,isBlurred:r,className:i,onMouseEnter:d,onMouseLeave:p,onClose:c})=>e.jsxs("div",{className:x.cn(t.default.content,r&&t.default.blurred,i),"data-style":n,onMouseEnter:d,onMouseLeave:p,children:[e.jsxs("div",{className:t.default.contentHeader,children:[e.jsx(s.Typography,{as:"h4",defaultVariant:"headingSm",children:l}),c&&e.jsxs("button",{className:t.default.closeButton,onClick:c,children:["(",e.jsx(m.Icon,{name:a.EIconName.CLOSE,className:t.default.closeIcon}),")"]})]}),e.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",children:u}),o&&e.jsx(h.TextButton,{suffixIcon:a.EIconName.ARROW_FORWARD,as:"a",href:o.url,target:"_blank",rel:"noopener noreferrer",inverted:n==="dark"&&!r||n==="light"&&r,children:o.label})]});exports.ComplexTooltipContent=_;

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.d.ts

@@ -0,0 +1,10 @@
+import { CommonComplexTooltipProps } from '../../types';
+
+type ComplexTooltipContentProps = {
+    className?: string;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onClose?: () => void;
+} & CommonComplexTooltipProps;
+export declare const ComplexTooltipContent: ({ style, title, description, link, isBlurred, className, onMouseEnter, onMouseLeave, onClose, }: ComplexTooltipContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.es.js

@@ -0,0 +1,52 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Icon as h } from "../../../Icon/Icon.es.js";
+import { EIconName as c } from "../../../Icon/constants.es.js";
+import { TextButton as u } from "../../../TextButton/TextButton.es.js";
+import { Typography as i } from "../../../Typography/Typography.es.js";
+import { cn as x } from "../../../../utils/cn/cn.es.js";
+import r from "./complexTooltipContent.module.css.es.js";
+const C = ({
+  style: o,
+  title: l,
+  description: s,
+  link: t,
+  isBlurred: a,
+  className: d,
+  onMouseEnter: p,
+  onMouseLeave: f,
+  onClose: m
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: x(r.content, a && r.blurred, d),
+    "data-style": o,
+    onMouseEnter: p,
+    onMouseLeave: f,
+    children: [
+      /* @__PURE__ */ n("div", { className: r.contentHeader, children: [
+        /* @__PURE__ */ e(i, { as: "h4", defaultVariant: "headingSm", children: l }),
+        m && /* @__PURE__ */ n("button", { className: r.closeButton, onClick: m, children: [
+          "(",
+          /* @__PURE__ */ e(h, { name: c.CLOSE, className: r.closeIcon }),
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ e(i, { as: "p", defaultVariant: "bodySm", children: s }),
+      t && /* @__PURE__ */ e(
+        u,
+        {
+          suffixIcon: c.ARROW_FORWARD,
+          as: "a",
+          href: t.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          inverted: o === "dark" && !a || o === "light" && a,
+          children: t.label
+        }
+      )
+    ]
+  }
+);
+export {
+  C as ComplexTooltipContent
+};

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/complexTooltipContent.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="complexTooltipContent-module__content___gGk3B",e="complexTooltipContent-module__blurred___5ZgFB",t="complexTooltipContent-module__contentHeader___zWu-A",n="complexTooltipContent-module__closeButton___LvHd5",l="complexTooltipContent-module__closeIcon___8Nx3Z",c={content:o,blurred:e,contentHeader:t,closeButton:n,closeIcon:l};exports.blurred=e;exports.closeButton=n;exports.closeIcon=l;exports.content=o;exports.contentHeader=t;exports.default=c;

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/complexTooltipContent.module.css.es.js

@@ -0,0 +1,15 @@
+const o = "complexTooltipContent-module__content___gGk3B", t = "complexTooltipContent-module__blurred___5ZgFB", e = "complexTooltipContent-module__contentHeader___zWu-A", n = "complexTooltipContent-module__closeButton___LvHd5", c = "complexTooltipContent-module__closeIcon___8Nx3Z", l = {
+  content: o,
+  blurred: t,
+  contentHeader: e,
+  closeButton: n,
+  closeIcon: c
+};
+export {
+  t as blurred,
+  n as closeButton,
+  c as closeIcon,
+  o as content,
+  e as contentHeader,
+  l as default
+};

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/index.d.ts

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

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

@@ -1 +1,2 @@
 export { ComplexTooltip } from './ComplexTooltip';
+export { ComplexTooltipContent } from './components/ComplexTooltipContent';

package/dist/components/ComplexTooltip/types.d.ts

@@ -0,0 +1,13 @@
+import { TColorScheme } from '../../types/common';
+
+export type CommonComplexTooltipProps = {
+    title: string;
+    description: string;
+    link?: {
+        label: string;
+        url: string;
+    };
+    style: Omit<TColorScheme, 'custom'>;
+    isBlurred?: boolean;
+    onClose?: () => void;
+};

package/dist/components/FilterMenu/FilterMenu.d.ts

@@ -13,5 +13,5 @@ type FilterMenuProps<T extends string | number> = {
     options: ReadonlyArray<TOptionGroup<T>>;
     onSelect: (value: T, optionGroup: TOptionGroup<T>) => void;
 };
-export declare function FilterMenu<T extends string | number>({ label, open, options, selectedValue, onSelect }: FilterMenuProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function FilterMenu<T extends string | number>({ label, open, options, selectedValue, onSelect, }: FilterMenuProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/FilterMenu/FilterMenu.es.js

@@ -6,7 +6,13 @@ import { Icon as v } from "../Icon/Icon.es.js";
 import { EIconName as m } from "../Icon/constants.es.js";
 import { Typography as o } from "../Typography/Typography.es.js";
 import e from "./filterMenu.module.css.es.js";
-function j({ label: c, open: d = !1, options: p, selectedValue: u, onSelect: h }) {
+function j({
+  label: c,
+  open: d = !1,
+  options: p,
+  selectedValue: u,
+  onSelect: h
+}) {
   const [t, f] = g(d), b = () => f((l) => !l);
   return /* @__PURE__ */ r("div", { className: e.root, children: [
     /* @__PURE__ */ r("button", { className: e.toggleButton, onClick: b, children: [
@@ -14,7 +20,16 @@ function j({ label: c, open: d = !1, options: p, selectedValue: u, onSelect: h }
       /* @__PURE__ */ a(v, { name: t ? m.REMOVE : m.PLUS, className: e.toggleIcon })
     ] }),
     /* @__PURE__ */ a("div", { className: n(e.menu, t && e.isOpen), role: "menu", children: p.map((l, s) => /* @__PURE__ */ r("ul", { className: e.subOptions, children: [
-      l.label && /* @__PURE__ */ a("li", { className: n(e.divider, s !== 0 && e.dividerLine), children: /* @__PURE__ */ a(o, { as: "div", defaultVariant: "bodyMd", weight: "medium", className: e.dividerLabel, children: l.label }) }, s),
+      l.label && /* @__PURE__ */ a("li", { className: n(e.divider, s !== 0 && e.dividerLine), children: /* @__PURE__ */ a(
+        o,
+        {
+          as: "div",
+          defaultVariant: "bodyMd",
+          weight: "medium",
+          className: e.dividerLabel,
+          children: l.label
+        }
+      ) }, s),
       l.values.map(({ value: i, label: N }) => /* @__PURE__ */ a("li", { className: e.option, onClick: () => h(i, l), children: /* @__PURE__ */ a(
         o,
         {

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

@@ -51,7 +51,15 @@ function P({ items: c, speed: y = 50, contentClassName: W, itemClassName: q, roo
       const t = s + 200, e = Math.min(t, 0);
       R(e);
     }
-  })), /* @__PURE__ */ M("div", { className: w(x.root, F), onMouseEnter: N, onMouseLeave: X, children: /* @__PURE__ */ M("div", { className: w(x.content, W), style: { transform: `translate3D(${s}px, 0, 0)` }, ref: l, children: Array.from({ length: c.length * I }, (t, e) => /* @__PURE__ */ M("div", { className: w(x.item, q), children: S(c[e % c.length], e) }, e)) }) });
+  })), /* @__PURE__ */ M("div", { className: w(x.root, F), onMouseEnter: N, onMouseLeave: X, children: /* @__PURE__ */ M(
+    "div",
+    {
+      className: w(x.content, W),
+      style: { transform: `translate3D(${s}px, 0, 0)` },
+      ref: l,
+      children: Array.from({ length: c.length * I }, (t, e) => /* @__PURE__ */ M("div", { className: w(x.item, q), children: S(c[e % c.length], e) }, e))
+    }
+  ) });
 }
 const G = D(P);
 export {

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

@@ -5,7 +5,15 @@ import e from "./label.module.css.es.js";
 const p = {
   sm: o.labelXs,
   lg: o.labelSm
-}, f = ({ children: m, color: t, size: r = "sm", className: a }) => /* @__PURE__ */ s("div", { className: l(e.root, o.labelEmphasis, p[r], a), "data-size": r, "data-color": t, children: m });
+}, f = ({ children: m, color: t, size: r = "sm", className: a }) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: l(e.root, o.labelEmphasis, p[r], a),
+    "data-size": r,
+    "data-color": t,
+    children: m
+  }
+);
 export {
   f as Label
 };

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

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

package/dist/components/Pricing/Pricing.d.ts

@@ -0,0 +1,3 @@
+import { PricingElementView } from './types';
+
+export declare const Pricing: ({ label, price, items, link, button }: PricingElementView) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn/cn.es.js";
+import { Button as c } from "../Button/Button.es.js";
+import { Label as m } from "../Label/Label.es.js";
+import { Typography as t } from "../Typography/Typography.es.js";
+import { BenefitItem as h } from "./components/BenefitItem/BenefitItem.es.js";
+import i from "./pricing.module.css.es.js";
+const u = ({ label: r, price: d, items: p, link: a, button: s }) => /* @__PURE__ */ o("div", { className: i.root, children: [
+  /* @__PURE__ */ e(m, { size: "lg", color: r.color, className: n(i.pricingLabel, i.pricingLabelDesktop), children: r.label }),
+  /* @__PURE__ */ e(m, { size: "sm", color: r.color, className: n(i.pricingLabel, i.pricingLabelMobile), children: r.label }),
+  /* @__PURE__ */ o("p", { className: i.pricing, children: [
+    /* @__PURE__ */ e(
+      t,
+      {
+        as: "span",
+        defaultVariant: "displayMd",
+        mobileVariant: "displaySm",
+        className: i.pricingTextPrimary,
+        children: `$${d}`
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        as: "span",
+        defaultVariant: "headingSm",
+        mobileVariant: "headingXs",
+        className: i.pricingTextSecondary,
+        children: "/ mo"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e("div", { className: i.benefits, children: p.map((l, g) => /* @__PURE__ */ e(h, { badge: l.badge, label: l.label }, g)) }),
+  /* @__PURE__ */ e("div", { className: i.pricingButtonContainerDesktop, children: /* @__PURE__ */ e(c, { ...s, size: "lg", as: "a", href: a, children: "GET STARTED" }) }),
+  /* @__PURE__ */ e("div", { className: i.pricingButtonContainerMobile, children: /* @__PURE__ */ e(c, { ...s, size: "md", as: "a", href: a, children: "GET STARTED" }) }),
+  /* @__PURE__ */ e("div", { className: i.leftBorder }),
+  /* @__PURE__ */ e("div", { className: i.rightBorder })
+] });
+export {
+  u as Pricing
+};

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

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

package/dist/components/Pricing/components/BenefitItem/BenefitItem.d.ts

@@ -0,0 +1,8 @@
+import { ETypeBadge } from '../../../TypeBadge';
+
+type Props = {
+    badge: ETypeBadge;
+    label: string;
+};
+export declare const BenefitItem: ({ badge, label }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { TypeBadge as m } from "../../../TypeBadge/TypeBadge.es.js";
+import r from "./benefitItem.module.css.es.js";
+const l = ({ badge: t, label: o }) => /* @__PURE__ */ s("div", { className: r.root, children: [
+  /* @__PURE__ */ e(m, { type: t }),
+  /* @__PURE__ */ e("p", { className: r.benefitLabel, children: o })
+] });
+export {
+  l as BenefitItem
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="benefitItem-module__root___2QX95",t={root:e};exports.default=t;exports.root=e;

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

@@ -0,0 +1,7 @@
+const o = "benefitItem-module__root___2QX95", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

package/dist/components/Pricing/components/BenefitItem/index.d.ts

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

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

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

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

@@ -0,0 +1,2 @@
+export { Pricing } from './Pricing';
+export type { PricingElementView } from './types';

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i="pricing-module__root___alGxI",e="pricing-module__pricingLabel___BrDUJ",n="pricing-module__pricingLabelDesktop___7H4iO",o="pricing-module__pricingLabelMobile___dpLsD",r="pricing-module__pricing___h1pM-",t="pricing-module__benefits___X-1Oc",_="pricing-module__pricingButtonContainerDesktop___kW7G4",c="pricing-module__pricingButtonContainerMobile___I-OGE",p="pricing-module__leftBorder___84NLl",l="pricing-module__rightBorder___50VVT",g={root:i,pricingLabel:e,pricingLabelDesktop:n,pricingLabelMobile:o,pricing:r,benefits:t,pricingButtonContainerDesktop:_,pricingButtonContainerMobile:c,leftBorder:p,rightBorder:l};exports.benefits=t;exports.default=g;exports.leftBorder=p;exports.pricing=r;exports.pricingButtonContainerDesktop=_;exports.pricingButtonContainerMobile=c;exports.pricingLabel=e;exports.pricingLabelDesktop=n;exports.pricingLabelMobile=o;exports.rightBorder=l;exports.root=i;

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

@@ -0,0 +1,25 @@
+const i = "pricing-module__root___alGxI", n = "pricing-module__pricingLabel___BrDUJ", o = "pricing-module__pricingLabelDesktop___7H4iO", e = "pricing-module__pricingLabelMobile___dpLsD", r = "pricing-module__pricing___h1pM-", t = "pricing-module__benefits___X-1Oc", _ = "pricing-module__pricingButtonContainerDesktop___kW7G4", c = "pricing-module__pricingButtonContainerMobile___I-OGE", p = "pricing-module__leftBorder___84NLl", l = "pricing-module__rightBorder___50VVT", g = {
+  root: i,
+  pricingLabel: n,
+  pricingLabelDesktop: o,
+  pricingLabelMobile: e,
+  pricing: r,
+  benefits: t,
+  pricingButtonContainerDesktop: _,
+  pricingButtonContainerMobile: c,
+  leftBorder: p,
+  rightBorder: l
+};
+export {
+  t as benefits,
+  g as default,
+  p as leftBorder,
+  r as pricing,
+  _ as pricingButtonContainerDesktop,
+  c as pricingButtonContainerMobile,
+  n as pricingLabel,
+  o as pricingLabelDesktop,
+  e as pricingLabelMobile,
+  l as rightBorder,
+  i as root
+};

package/dist/components/Pricing/types.d.ts

@@ -0,0 +1,17 @@
+import { ButtonProps } from '../Button';
+import { LabelColor } from '../Label';
+import { ETypeBadge } from '../TypeBadge';
+
+export type PricingElementView = {
+    label: {
+        label: string;
+        color: LabelColor;
+    };
+    items: Array<{
+        badge: ETypeBadge;
+        label: string;
+    }>;
+    price: number;
+    button: ButtonProps;
+    link: string;
+};

package/dist/components/ProductGalleryCard/ProductGalleryCard.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../Button/Button.cjs.js"),s=require("../Typography/Typography.cjs.js"),l=require("./productGalleryCard.module.css.cjs.js"),p=({name:i,price:c,image:d,link:u,buttons:t})=>{const o=a=>{a.preventDefault(),a.stopPropagation()};return e.jsxs("a",{href:u,target:"_blank",rel:"noopener noreferrer",className:l.default.root,children:[e.jsxs("div",{className:l.default.productInfo,children:[e.jsx(s.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:l.default.title,children:i}),e.jsx(s.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:l.default.price,children:c})]}),e.jsx("img",{src:d,alt:"product image",className:l.default.productImage}),e.jsx("div",{onClick:o,className:l.default.buttonContainerDesktop,children:t.map((a,r)=>e.jsx(n.Button,{size:"sm",...a,children:a.label},r))}),e.jsx("div",{onClick:o,className:l.default.buttonContainerMobile,children:t.map((a,r)=>e.jsx(n.Button,{size:"xs",...a,children:a.label},r))})]})};exports.ProductGalleryCard=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../Button/Button.cjs.js"),c=require("../Typography/Typography.cjs.js"),i=require("../../utils/cn/cn.cjs.js"),a=require("./productGalleryCard.module.css.cjs.js"),f=({name:u,price:d,image:p,link:m,buttons:r,isHoverable:n=!0})=>{const o=t=>{t.preventDefault(),t.stopPropagation()};return e.jsxs("a",{href:m,target:"_blank",rel:"noopener noreferrer",className:a.default.root,children:[e.jsxs("div",{className:a.default.productInfo,children:[e.jsx(c.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:a.default.title,children:u}),e.jsx(c.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:a.default.price,children:d})]}),e.jsx("img",{src:p,alt:"product image",className:a.default.productImage}),e.jsx("div",{onClick:o,className:i.cn(a.default.buttonContainerDesktop,n&&a.default.hoverableButtons),children:r.map((t,l)=>e.jsx(s.Button,{size:"sm",...t,children:t.label},l))}),e.jsx("div",{onClick:o,className:i.cn(a.default.buttonContainerMobile,n&&a.default.hoverableButtons),children:r.map((t,l)=>e.jsx(s.Button,{size:"xs",...t,children:t.label},l))})]})};exports.ProductGalleryCard=f;

package/dist/components/ProductGalleryCard/ProductGalleryCard.d.ts

@@ -1,3 +1,7 @@
 import { TProductGalleryCardView } from './types';
 
-export declare const ProductGalleryCard: ({ name, price, image, link, buttons }: TProductGalleryCardView) => import("react/jsx-runtime").JSX.Element;
+type ProductGalleryCardProps = {
+    isHoverable?: boolean;
+} & TProductGalleryCardView;
+export declare const ProductGalleryCard: ({ name, price, image, link, buttons, isHoverable, }: ProductGalleryCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};