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

package/README.md

@@ -53,8 +53,17 @@ npm publish
 
 ## Global Design Tokens
 
-Design tokens (colors, spacing, etc.) are injected via CSS variables globally. Just import the global styles once:
+Design tokens (colors, spacing, etc.) are injected via CSS variables globally. You can import the core styles in two ways:
 
+### Option 1: Import core styles directly
 ```tsx
-import '@zenpatient-org/healthspan-marketing-ui/dist/healthspan-marketing-ui.css';
+import '@zenpatient-org/healthspan-marketing-ui/styles/core';
 ```
+
+The core styles include:
+- CSS reset
+- Color variables (midnight, navy, copper, orchre, indigo, sage, solar, ivory, etc.)
+- Typography variables (font sizes, line heights, letter spacing, font weights)
+- Border radius and width variables
+- Spacing variables
+- Common utility styles

package/dist/assets/svg/badge-icon.svg

@@ -0,0 +1,13 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_984_190)">
+<path d="M10 3.3496L6.73464 0.0842285L6 0.818839L9.2654 4.08423L10 3.3496Z" />
+<path d="M3.26537 0.0842285L0 3.34962L0.734613 4.08423L4 0.818844L3.26537 0.0842285Z" />
+<path d="M9.2654 6.08423L6 9.34962L6.7346 10.0842L10 6.81883L9.2654 6.08423Z" />
+<path d="M4 9.34959L0.734618 6.08423L0 6.81886L3.2654 10.0842L4 9.34959Z" />
+</g>
+<defs>
+<clipPath id="clip0_984_190">
+<rect width="10" height="10" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/assets/svg/company-logo.svg

@@ -0,0 +1,3 @@
+<svg width="160" height="32" viewBox="0 0 160 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.0561 6.4704C50.1505 6.4704 49.3089 6.7456 48.2881 7.3888C49.7217 7.8944 50.2625 9.1328 50.2625 11.6256V11.7376L45.4849 14.4064C41.6609 16.5568 39.8881 18.1056 39.8881 20.9536C39.8881 23.3888 42.0737 25.0336 44.4129 25.0336C46.7521 25.0336 48.8737 23.7088 50.2657 20.8256V24.7616H54.0609V10.6144C54.0609 7.7984 53.0497 6.4704 51.0561 6.4704ZM50.2657 20.7584C48.8097 22.1632 47.6225 22.5664 46.2497 22.5664C44.9537 22.5664 43.5937 21.5552 43.5937 19.9744C43.5937 17.728 44.5089 16.272 47.5777 14.5024L50.2657 12.9472V20.7584ZM73.6513 21.888L73.6833 21.92C72.3073 24.2016 70.9345 25.0336 68.8097 25.0336C66.5281 25.0336 64.9857 23.5072 64.9857 20.6656V0H68.8065V6.7392H73.1745V8.1056H68.8065V20.1216C68.8065 21.9008 69.9937 22.8608 71.3057 22.8608C72.0865 22.8608 72.9345 22.544 73.6513 21.888ZM25.5201 13.3792C25.4433 13.9488 25.4049 14.528 25.4049 15.0976C25.4049 19.6256 28.4961 22.1344 32.3073 22.1344C34.7137 22.1344 36.4929 21.072 37.7729 19.3536L37.8369 19.3856C37.1169 22.1024 34.4961 25.0368 30.5601 25.0368C25.4401 25.0368 21.5681 21.2064 21.5681 15.9264C21.5681 10.6464 24.5985 7.504 28.7201 7.504H28.9089C27.2577 8.4928 26.2657 10.1952 25.7793 12.0928H33.9681C33.6545 9.2512 31.6897 7.7216 28.9089 7.504C29.8465 6.9408 30.9889 6.4672 32.3329 6.4672C35.5169 6.4672 37.8689 9.3184 37.9329 13.3792H25.5201ZM14.4705 0H18.5665V24.7616H14.4705V13.3824H4.09609V24.7616H9.15527e-05V0H4.09609V12.016H14.4705V0ZM48.2881 7.3888L41.7889 11.5296V8.272C42.9921 7.5424 44.5697 7.1008 46.1505 7.1008C47.0209 7.1008 47.7217 7.1904 48.2881 7.3888ZM57.6097 0H61.4337V24.7616H57.6097V0ZM138.976 6.4704C138.07 6.4704 137.229 6.7456 136.208 7.3888C137.642 7.8944 138.182 9.1328 138.182 11.6256V11.7376L133.405 14.4064C129.581 16.5568 127.808 18.1056 127.808 20.9536C127.808 23.3888 129.994 25.0336 132.333 25.0336C134.672 25.0336 136.794 23.7088 138.186 20.8256V24.7616H141.981V10.6144C141.981 7.7984 140.97 6.4704 138.976 6.4704ZM138.186 20.7584C136.73 22.1632 135.542 22.5664 134.17 22.5664C132.874 22.5664 131.514 21.5552 131.514 19.9744C131.514 17.728 132.429 16.272 135.498 14.5024L138.186 12.9472V20.7584ZM136.208 7.3888L129.709 11.5296V8.272C130.912 7.5424 132.49 7.1008 134.07 7.1008C134.941 7.1008 135.642 7.1904 136.208 7.3888ZM160 10.8352V24.7616H156.176V11.3824C156.176 9.5104 155.395 8.432 153.834 8.432C152.896 8.432 151.35 8.6816 149.35 9.744V24.7584H145.526V6.7392H149.35V9.68C151.568 7.152 153.994 6.4672 155.904 6.4672C158.589 6.4672 160 8.0544 160 10.8352ZM119.162 6.4672C116.726 6.4672 114.24 7.4048 112.493 9.6832V6.7392H108.669V32H112.493V24.7232C113.056 24.88 113.728 25.0336 114.355 25.0336C116.01 25.0336 117.478 24.5952 118.696 23.7872C121.819 24.6256 126.144 20.5584 126.144 14.6592C126.144 9.9744 123.411 6.4672 119.162 6.4672ZM118.696 23.7856L112.496 21.9936V9.7152C113.651 9.0272 115.011 8.4672 116.323 8.4672C120.038 8.4672 122.323 11.1232 122.323 16.0256C122.323 19.4624 120.976 22.288 118.696 23.7856ZM93.6513 21.2128L99.8881 24.5152C99.0433 24.8256 97.9905 25.0336 96.9281 25.0336C95.8657 25.0336 94.6817 24.8256 93.6513 24.4192V21.2128ZM90.3777 10.5632V24.7616H86.5537V11.3824C86.5537 9.5104 85.7729 8.432 84.2113 8.432C83.2737 8.432 81.7281 8.6816 79.7281 9.744V24.7616H75.9041V0H79.7281V9.68C81.9457 7.152 84.3713 6.4672 86.2817 6.4672C88.9665 6.4672 90.3777 7.7824 90.3777 10.5632ZM105.824 20.4224C105.824 23.1712 103.872 25.0336 101.654 25.0336C101.155 25.0336 100.33 24.7648 99.8913 24.5152C101.328 23.952 102.326 22.9824 102.326 21.7344C102.326 20.3936 101.67 19.456 97.9841 16.5824C94.4545 13.8336 93.7057 12.672 93.7057 10.9536C93.7057 8.2336 96.3297 6.3616 98.9217 7.392C97.8913 7.8912 97.2033 8.672 97.2033 9.7024C97.2033 10.8256 97.9841 11.856 101.325 14.3552C104.698 16.8544 105.824 18.2048 105.824 20.4224ZM105.12 10.288L98.9217 7.392C99.9809 6.8928 101.258 6.4672 102.662 6.4672C103.536 6.4672 104.621 6.7392 105.12 7.0176V10.288Z" fill="currentColor"/>
+</svg>

package/dist/components/Accordion/Accordion.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),p=require("./components/AccordionItem/AccordionItem.cjs.js"),I=require("./accordion.module.css.cjs.js"),S=({items:c,mode:o="multiple"})=>{const[l,i]=r.useState(null),[u,a]=r.useState(new Set),d=e=>{o==="single"?i(t=>t===e?null:e):a(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},g=e=>o==="single"?l===e:u.has(e);return s.jsx("div",{className:I.default.container,children:c.map((e,t)=>s.jsx(p.AccordionItem,{title:e.title,content:e.content,isOpen:g(t),index:t,onClick:d,icon:e.icon,isLast:t===c.length-1},t))})};exports.Accordion=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),I=require("../../src/components/Accordion/accordion.module.css"),S=require("./components/AccordionItem/AccordionItem.cjs.js"),m=({items:s,mode:c="multiple"})=>{const[r,i]=l.useState(null),[u,a]=l.useState(new Set),g=e=>{c==="single"?i(t=>t===e?null:e):a(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},p=e=>c==="single"?r===e:u.has(e);return o.jsx("div",{className:I.container,children:s.map((e,t)=>o.jsx(S.AccordionItem,{title:e.title,content:e.content,isOpen:p(t),index:t,onClick:g,icon:e.icon,isLast:t===s.length-1},t))})};exports.Accordion=m;

package/dist/components/Accordion/Accordion.es.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as c } from "react/jsx-runtime";
 import { useState as l } from "react";
-import { AccordionItem as f } from "./components/AccordionItem/AccordionItem.es.js";
-import I from "./accordion.module.css.es.js";
+import f from "../../components/Accordion/accordion.module.css";
+import { AccordionItem as I } from "./components/AccordionItem/AccordionItem.es.js";
 const w = ({ items: o, mode: s = "multiple" }) => {
   const [r, i] = l(null), [m, p] = l(/* @__PURE__ */ new Set()), a = (t) => {
     s === "single" ? i((e) => e === t ? null : t) : p((e) => {
@@ -10,8 +10,8 @@ const w = ({ items: o, mode: s = "multiple" }) => {
       return n.has(t) ? n.delete(t) : n.add(t), n;
     });
   }, u = (t) => s === "single" ? r === t : m.has(t);
-  return /* @__PURE__ */ c("div", { className: I.container, children: o.map((t, e) => /* @__PURE__ */ c(
-    f,
+  return /* @__PURE__ */ c("div", { className: f.container, children: o.map((t, e) => /* @__PURE__ */ c(
+    I,
     {
       title: t.title,
       content: t.content,

package/dist/components/Accordion/accordion.module.css

@@ -0,0 +1,8 @@
+.container {
+    border: var(--border-width-sm) solid var(--border-color-light);
+    border-radius: var(--border-radius-md);
+    background: var(--color-bg-base-light);
+    overflow: hidden;
+    width: 320px;
+    max-width: 100%;
+}

package/dist/components/Accordion/components/AccordionItem/AccordionItem.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../Typography/Typography.cjs.js"),t=require("../../../../utils/cn/cn.cjs.js"),n=require("./accordionItem.module.css.cjs.js"),c=require("../../../Icon/Icon.cjs.js"),m=require("../../../Icon/constants.cjs.js"),p=require("../../../../utils/isHsIcon/isHsIcon.cjs.js"),f=({title:r,content:i,isOpen:s,index:l,onClick:d,icon:o,isLast:u=!1})=>e.jsxs("div",{className:t.cn(n.default.itemRoot,{[n.default.itemRootLast]:u}),children:[e.jsxs("div",{className:n.default.itemHeader,onClick:()=>d(l),children:[p.isHsIcon(o)&&e.jsx("span",{className:n.default.leftIcon,children:e.jsx(c.Icon,{name:o})}),e.jsx(a.Typography,{defaultVariant:"bodyMd",children:r}),e.jsx("div",{className:n.default.closeButtonWrapper,children:e.jsx("span",{className:t.cn(n.default.arrow,s&&n.default.arrowRotated),children:e.jsx(c.Icon,{name:m.EIconName.CHEVRON_DOWN})})})]}),e.jsx("div",{className:t.cn(n.default.itemContent,{[n.default.itemContentOpen]:s}),children:e.jsx("div",{className:n.default.itemContentInner,children:e.jsx(a.Typography,{as:"p",defaultVariant:"bodyXs",mobileVariant:"bodyXs",children:i})})})]});exports.AccordionItem=f;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../../utils/cn/cn.cjs.js"),n=require("../../../../src/components/Accordion/components/AccordionItem/accordionItem.module.css"),u=require("../../../../utils/isHsIcon/isHsIcon.cjs.js"),c=require("../../../Icon/Icon.cjs.js"),r=require("../../../Typography/Typography.cjs.js"),p=require("../../../Icon/constants.cjs.js"),y=({title:a,content:i,isOpen:o,index:l,onClick:d,icon:t,isLast:m=!1})=>e.jsxs("div",{className:s.cn(n.itemRoot,{[n.itemRootLast]:m}),children:[e.jsxs("div",{className:n.itemHeader,onClick:()=>d(l),children:[u.isHsIcon(t)&&e.jsx("span",{className:n.leftIcon,children:e.jsx(c.Icon,{name:t})}),e.jsx(r.Typography,{defaultVariant:"bodyMd",children:a}),e.jsx("div",{className:n.closeButtonWrapper,children:e.jsx("span",{className:s.cn(n.arrow,o&&n.arrowRotated),children:e.jsx(c.Icon,{name:p.EIconName.CHEVRON_DOWN})})})]}),e.jsx("div",{className:s.cn(n.itemContent,{[n.itemContentOpen]:o}),children:e.jsx("div",{className:n.itemContentInner,children:e.jsx(r.Typography,{as:"p",defaultVariant:"bodyXs",mobileVariant:"bodyXs",children:i})})})]});exports.AccordionItem=y;

package/dist/components/Accordion/components/AccordionItem/AccordionItem.es.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { Typography as i } from "../../../Typography/Typography.es.js";
 import { cn as r } from "../../../../utils/cn/cn.es.js";
-import e from "./accordionItem.module.css.es.js";
-import { Icon as m } from "../../../Icon/Icon.es.js";
-import { EIconName as f } from "../../../Icon/constants.es.js";
-import { isHsIcon as h } from "../../../../utils/isHsIcon/isHsIcon.es.js";
+import e from "../../../../components/Accordion/components/AccordionItem/accordionItem.module.css";
+import { isHsIcon as f } from "../../../../utils/isHsIcon/isHsIcon.es.js";
+import { Icon as i } from "../../../Icon/Icon.es.js";
+import { Typography as m } from "../../../Typography/Typography.es.js";
+import { EIconName as h } from "../../../Icon/constants.es.js";
 const R = ({ title: s, content: c, isOpen: t, index: l, onClick: d, icon: a, isLast: p = !1 }) => /* @__PURE__ */ n("div", { className: r(e.itemRoot, { [e.itemRootLast]: p }), children: [
   /* @__PURE__ */ n("div", { className: e.itemHeader, onClick: () => d(l), children: [
-    h(a) && /* @__PURE__ */ o("span", { className: e.leftIcon, children: /* @__PURE__ */ o(m, { name: a }) }),
-    /* @__PURE__ */ o(i, { defaultVariant: "bodyMd", children: s }),
-    /* @__PURE__ */ o("div", { className: e.closeButtonWrapper, children: /* @__PURE__ */ o("span", { className: r(e.arrow, t && e.arrowRotated), children: /* @__PURE__ */ o(m, { name: f.CHEVRON_DOWN }) }) })
+    f(a) && /* @__PURE__ */ o("span", { className: e.leftIcon, children: /* @__PURE__ */ o(i, { name: a }) }),
+    /* @__PURE__ */ o(m, { defaultVariant: "bodyMd", children: s }),
+    /* @__PURE__ */ o("div", { className: e.closeButtonWrapper, children: /* @__PURE__ */ o("span", { className: r(e.arrow, t && e.arrowRotated), children: /* @__PURE__ */ o(i, { name: h.CHEVRON_DOWN }) }) })
   ] }),
-  /* @__PURE__ */ o("div", { className: r(e.itemContent, { [e.itemContentOpen]: t }), children: /* @__PURE__ */ o("div", { className: e.itemContentInner, children: /* @__PURE__ */ o(i, { as: "p", defaultVariant: "bodyXs", mobileVariant: "bodyXs", children: c }) }) })
+  /* @__PURE__ */ o("div", { className: r(e.itemContent, { [e.itemContentOpen]: t }), children: /* @__PURE__ */ o("div", { className: e.itemContentInner, children: /* @__PURE__ */ o(m, { as: "p", defaultVariant: "bodyXs", mobileVariant: "bodyXs", children: c }) }) })
 ] });
 export {
   R as AccordionItem

package/dist/components/Accordion/components/AccordionItem/accordionItem.module.css

@@ -0,0 +1,59 @@
+.itemRoot {
+    background: transparent;
+    border-bottom: var(--border-width-sm) solid var(--border-color-light);
+}
+
+.itemHeader {
+    display: flex;
+    align-items: flex-end;
+    padding: var(--spacing-18);
+    cursor: pointer;
+}
+
+.itemRoot.itemRootLast {
+    border-bottom: none;
+}
+
+.itemContent {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    transition: grid-template-rows 0.3s, padding-bottom 0.3s;
+    padding: 0 var(--spacing-18);
+}
+
+.itemContentOpen {
+    grid-template-rows: 1fr;
+    padding-bottom: var(--spacing-18);
+}
+
+.itemContentInner {
+    min-height: 0;
+}
+
+.closeButtonWrapper {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+}
+
+.leftIcon {
+    display: flex;
+    align-items: center;
+    margin-right: var(--spacing-8);
+}
+
+.rightIcon {
+    display: flex;
+    align-items: center;
+    margin-left: var(--spacing-18);
+}
+
+.arrow {
+    display: inline-flex;
+    transition: transform 0.3s;
+}
+
+.arrowRotated {
+    transform: rotate(180deg);
+}

package/dist/components/AnchorLinks/AnchorLinks.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("../Typography/Typography.cjs.js"),p=require("../../utils/cn/cn.cjs.js"),e=require("./anchorLinks.module.css.cjs.js"),h=({links:n,activeId:s,onClick:r})=>a.jsx("div",{className:e.default.root,children:n.map(({label:c,id:t,href:l,type:u,variant:o,emphasis:i})=>a.jsx("a",{className:p.cn(e.default.linkButton,{[e.default.active]:s===t}),href:l,"data-type":u,onClick:()=>r==null?void 0:r(t),children:a.jsx(d.Typography,{className:e.default.linkLabel,defaultVariant:o||"labelLg",emphasis:i??!0,children:c})},t))});exports.AnchorLinks=h;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/AnchorLinks/anchorLinks.module.css"),p=require("../Typography/Typography.cjs.js"),d=({links:c,activeId:s,onClick:t})=>a.jsx("div",{className:e.root,children:c.map(({label:o,id:r,href:l,type:u,variant:i,emphasis:n})=>a.jsx("a",{className:y.cn(e.linkButton,{[e.active]:s===r}),href:l,"data-type":u,onClick:()=>t==null?void 0:t(r),children:a.jsx(p.Typography,{className:e.linkLabel,defaultVariant:i||"labelLg",emphasis:n!=null?n:!0,children:o})},r))});exports.AnchorLinks=d;

package/dist/components/AnchorLinks/AnchorLinks.es.js

@@ -1,29 +1,29 @@
 "use client";
-import { jsx as t } from "react/jsx-runtime";
-import { Typography as c } from "../Typography/Typography.es.js";
-import { cn as h } from "../../utils/cn/cn.es.js";
-import r from "./anchorLinks.module.css.es.js";
-const L = ({ links: s, activeId: m, onClick: a }) => /* @__PURE__ */ t("div", { className: r.root, children: s.map(({ label: o, id: e, href: l, type: i, variant: n, emphasis: p }) => /* @__PURE__ */ t(
+import { jsx as o } from "react/jsx-runtime";
+import { cn as s } from "../../utils/cn/cn.es.js";
+import r from "../../components/AnchorLinks/anchorLinks.module.css";
+import { Typography as f } from "../Typography/Typography.es.js";
+const N = ({ links: l, activeId: n, onClick: t }) => /* @__PURE__ */ o("div", { className: r.root, children: l.map(({ label: m, id: a, href: c, type: i, variant: p, emphasis: e }) => /* @__PURE__ */ o(
   "a",
   {
-    className: h(r.linkButton, {
-      [r.active]: m === e
+    className: s(r.linkButton, {
+      [r.active]: n === a
     }),
-    href: l,
+    href: c,
     "data-type": i,
-    onClick: () => a == null ? void 0 : a(e),
-    children: /* @__PURE__ */ t(
-      c,
+    onClick: () => t == null ? void 0 : t(a),
+    children: /* @__PURE__ */ o(
+      f,
       {
         className: r.linkLabel,
-        defaultVariant: n || "labelLg",
-        emphasis: p ?? !0,
-        children: o
+        defaultVariant: p || "labelLg",
+        emphasis: e != null ? e : !0,
+        children: m
       }
     )
   },
-  e
+  a
 )) });
 export {
-  L as AnchorLinks
+  N as AnchorLinks
 };

package/dist/components/AnchorLinks/anchorLinks.module.css

@@ -0,0 +1,42 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+    background-color: var(--color-bg-base-light);
+    z-index: 10;
+}
+
+.linkButton {
+    background-color: var(--color-bg-base-light);
+    border: var(--border-width-sm) solid var(--border-radius-xs);
+    text-align: left;
+    cursor: pointer;
+    padding: 20px 16px;
+    transition: background-color 0.3s ease;
+    text-decoration: none;
+}
+
+.linkLabel {
+    color: var(--color-text-primary);
+}
+
+.active {
+    border-radius: var(--border-radius-xs);
+}
+
+.active[data-type='energy'] {
+    background: linear-gradient(93deg, var(--color-bg-fill-brand-solar) 40.44%, #cab602 160.95%);
+}
+
+.active[data-type='senescence'] {
+    background: linear-gradient(93deg, var(--color-bg-fill-brand-indigo) 40.44%, #2666a6 160.95%);
+}
+
+.active[data-type='metabolism'] {
+    background: linear-gradient(93deg, var(--color-bg-fill-brand-orchre) 40.44%, #c87a04 160.95%);
+}
+
+.active[data-type='other'] {
+    background: linear-gradient(93deg, var(--color-bg-neutral-medium) 40.44%, #888 160.95%);
+}

package/dist/components/Benefit/Benefit.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../Typography/Typography.cjs.js"),r=require("./benefit.module.css.cjs.js");function d({title:t,description:n,button:a}){return e.jsxs("div",{className:r.default.benefit,children:[e.jsx(i.Typography,{as:"h3",defaultVariant:"headingMd",mobileVariant:"headingSm",children:t}),e.jsx(i.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyXs",children:n}),a&&e.jsx("div",{className:r.default.textButton,children:a})]})}exports.Benefit=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../src/components/Benefit/benefit.module.css"),a=require("../Typography/Typography.cjs.js");function s({title:n,description:r,button:i}){return e.jsxs("div",{className:t.benefit,children:[e.jsx(a.Typography,{as:"h3",defaultVariant:"headingMd",mobileVariant:"headingSm",children:n}),e.jsx(a.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyXs",children:r}),i&&e.jsx("div",{className:t.textButton,children:i})]})}exports.Benefit=s;

package/dist/components/Benefit/Benefit.es.js

@@ -1,11 +1,11 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { Typography as a } from "../Typography/Typography.es.js";
-import r from "./benefit.module.css.es.js";
+import a from "../../components/Benefit/benefit.module.css";
+import { Typography as r } from "../Typography/Typography.es.js";
 function m({ title: t, description: n, button: i }) {
-  return /* @__PURE__ */ d("div", { className: r.benefit, children: [
-    /* @__PURE__ */ e(a, { as: "h3", defaultVariant: "headingMd", mobileVariant: "headingSm", children: t }),
-    /* @__PURE__ */ e(a, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodyXs", children: n }),
-    i && /* @__PURE__ */ e("div", { className: r.textButton, children: i })
+  return /* @__PURE__ */ d("div", { className: a.benefit, children: [
+    /* @__PURE__ */ e(r, { as: "h3", defaultVariant: "headingMd", mobileVariant: "headingSm", children: t }),
+    /* @__PURE__ */ e(r, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodyXs", children: n }),
+    i && /* @__PURE__ */ e("div", { className: a.textButton, children: i })
   ] });
 }
 export {

package/dist/components/Benefit/benefit.module.css

@@ -0,0 +1,21 @@
+.benefit {
+    height: 100%;
+    width: 550px;
+    padding: 40px 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+    position: relative;
+}
+
+.textButton {
+    margin-top: auto;
+}
+
+@media (width <= 768px) {
+    .benefit {
+        width: 278px;
+        padding: 24px 12px;
+    }
+}

package/dist/components/Button/Button.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),N=require("../../utils/cn/cn.cjs.js"),u=require("../Icon/Icon.cjs.js"),t=require("./button.module.css.cjs.js"),d=y.forwardRef(({variant:r="primary",size:m="md",as:f="button",disabled:a=!1,children:j,prefixIcon:s,suffixIcon:c,analyticsProps:l,...n},b)=>{const v=t.default[r]||"",q=t.default[m]||"",C=a?t.default.disabled:"",h=x=>{var i,o;l&&((i=window.eventBus)==null||i.emit("analytics",l)),(o=n.onClick)==null||o.call(n,x)};return e.jsx(f,{ref:b,...n,className:N.cn(t.default.button,v,q,C),disabled:a,onClick:h,"data-type":"button",children:e.jsxs("div",{className:t.default.content,children:[s&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(u.Icon,{name:s})}),e.jsx("div",{children:j}),c&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(u.Icon,{name:c})})]})})});d.displayName="Button";exports.Button=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("react"),B=require("../../utils/cn/cn.cjs.js"),n=require("../../src/components/Button/button.module.css"),r=require("../Icon/Icon.cjs.js"),d=N.forwardRef(({variant:u="primary",size:m="md",as:j="button",disabled:s=!1,children:v,prefixIcon:c,suffixIcon:a,analyticsProps:i,...t},b)=>{const x=n[u]||"",y=n[m]||"",C=s?n.disabled:"",h=q=>{var o,l;i&&((o=window.eventBus)==null||o.emit("analytics",i)),(l=t.onClick)==null||l.call(t,q)};return e.jsx(j,{ref:b,...t,className:B.cn(n.button,x,y,C),disabled:s,onClick:h,"data-type":"button",children:e.jsxs("div",{className:n.content,children:[c&&e.jsx("div",{className:n.iconWrap,children:e.jsx(r.Icon,{name:c})}),e.jsx("div",{children:v}),a&&e.jsx("div",{className:n.iconWrap,children:e.jsx(r.Icon,{name:a})})]})})});d.displayName="Button";exports.Button=d;

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

@@ -2,8 +2,8 @@
 import { jsx as n, jsxs as k } from "react/jsx-runtime";
 import { forwardRef as w } from "react";
 import { cn as B } from "../../utils/cn/cn.es.js";
+import t from "../../components/Button/button.module.css";
 import { Icon as m } from "../Icon/Icon.es.js";
-import t from "./button.module.css.es.js";
 const j = w(
   ({
     variant: r = "primary",

package/dist/components/Button/button.module.css

@@ -0,0 +1,164 @@
+.button {
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    border-radius: var(--border-radius-xs);
+    background: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition:
+        background-color 0.3s ease,
+        opacity 0.3s ease,
+        color 0.3s ease;
+    border: var(--border-width-sm) solid transparent;
+    font-family: var(--font-decorative), monospace;
+    text-transform: uppercase;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-xs);
+}
+
+.button:hover {
+    opacity: 0.85;
+}
+
+.primary {
+    background-color: var(--color-bg-fill-primary);
+    color: var(--color-text-primary-inverted);
+}
+
+.primary-invert {
+    background-color: var(--color-bg-fill-brand-inverse);
+    color: var(--color-text-primary);
+}
+
+.secondary {
+    background-color: var(--color-bg-fill-brand-solar);
+    color: var(--color-text-primary);
+}
+
+.muted {
+    background-color: transparent;
+    color: var(--color-text-primary);
+    border-color: var(--border-color-alpha-black-20);
+}
+
+.muted:hover {
+    background-color: var(--color-bg-fill-primary);
+    border-color: var(--color-bg-fill-primary);
+    color: var(--color-text-primary-inverted);
+}
+
+.muted-invert {
+    background-color: transparent;
+    color: var(--color-text-primary-inverted);
+    border-color: var(--border-color-invert);
+}
+
+.muted-invert:hover {
+    background-color: var(--color-bg-fill-brand-inverse);
+    border-color: var(--border-color-invert);
+    color: var(--color-text-primary);
+}
+
+.ghost {
+    background-color: transparent;
+    color: var(--color-text-primary);
+}
+
+.xs {
+    min-width: 40px;
+    min-height: 40px;
+    padding: 0 var(--spacing-12);
+    border-radius: var(--border-radius-xxs);
+    font-size: var(--font-size-xxs);
+    letter-spacing: var(--letter-spacing-xxl);
+}
+
+.sm {
+    min-width: 40px;
+    min-height: 40px;
+    padding: 0 var(--spacing-16);
+    border-radius: var(--border-radius-xxs);
+    font-size: var(--font-size-xs);
+    letter-spacing: var(--letter-spacing-xxl);
+}
+
+.md {
+    min-width: 48px;
+    min-height: 48px;
+    padding: 0 var(--spacing-16);
+    font-size: var(--font-size-sm);
+    letter-spacing: var(--letter-spacing-xxl);
+}
+
+.lg {
+    min-width: 56px;
+    min-height: 56px;
+    padding: 0 var(--spacing-20);
+    font-size: var(--font-size-sm);
+    letter-spacing: var(--letter-spacing-xxl);
+}
+
+.disabled:hover,
+.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.button,
+.button:focus,
+.button:active,
+.button:hover {
+    text-decoration: none;
+}
+
+.content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    flex-wrap: nowrap;
+    gap: var(--spacing-8);
+    z-index: 1;
+}
+
+.xs .content,
+.sm .content {
+    gap: var(--spacing-4);
+}
+
+.iconWrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    min-width: 20px;
+    max-width: 20px;
+    height: 20px;
+    max-height: 20px;
+    overflow: hidden;
+
+    & > * {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.xs .iconWrap {
+    width: 14px;
+    min-width: 14px;
+    max-width: 14px;
+    height: 14px;
+    max-height: 14px;
+}
+
+.sm .iconWrap {
+    width: 16px;
+    min-width: 16px;
+    max-width: 16px;
+    height: 16px;
+    max-height: 16px;
+}

package/dist/components/Callback/Callback.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../utils/cn/cn.cjs.js"),m=require("../Button/Button.cjs.js"),r=require("../Typography/Typography.cjs.js"),a=require("./callback.module.css.cjs.js"),l=require("./constants.cjs.js"),E=({image:c,title:n,description:i,price:d,button:o,size:t="lg",shape:u="square"})=>{const _=a.default[t]||"";return e.jsxs("div",{className:s.cn(a.default.root,_),children:[e.jsxs("div",{className:a.default.productInfo,children:[e.jsx("img",{src:c,alt:"product image",className:s.cn(a.default.productImage,{[a.default.circle]:u==="circle"})}),e.jsxs("div",{className:a.default.textContainer,children:[e.jsx("div",{className:a.default.titleContainer,children:e.jsx(r.Typography,{defaultVariant:l.TITLE_BY_SIZE_DESKTOP[t],mobileVariant:l.TITLE_BY_SIZE_MOBILE[t],className:a.default.title,children:n})}),e.jsx("div",{className:a.default.divider}),e.jsxs("div",{className:a.default.descriptionContainer,children:[e.jsx(r.Typography,{defaultVariant:l.DESC_BY_SIZE_DESKTOP[t],mobileVariant:l.DESC_BY_SIZE_MOBILE[t],className:a.default.description,children:i}),e.jsxs(r.Typography,{defaultVariant:l.PRICE_BY_SIZE_DESKTOP[t],mobileVariant:l.PRICE_BY_SIZE_MOBILE[t],className:a.default.price,children:["Starting at ",d]})]})]})]}),e.jsx("div",{className:a.default.buttonContainer,children:e.jsx(m.Button,{...o,as:"a",size:l.BUTTON_BY_SIZE[t],children:"GET STARTED"})})]})};exports.Callback=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../utils/cn/cn.cjs.js"),a=require("../../src/components/Callback/callback.module.css"),t=require("./constants.cjs.js"),r=require("../Typography/Typography.cjs.js"),m=require("../Button/Button.cjs.js"),E=({image:c,title:i,description:l,price:o,button:d,size:s="lg",shape:_="square"})=>{const u=a[s]||"";return e.jsxs("div",{className:n.cn(a.root,u),children:[e.jsxs("div",{className:a.productInfo,children:[e.jsx("img",{src:c,alt:"product image",className:n.cn(a.productImage,{[a.circle]:_==="circle"})}),e.jsxs("div",{className:a.textContainer,children:[e.jsx("div",{className:a.titleContainer,children:e.jsx(r.Typography,{defaultVariant:t.TITLE_BY_SIZE_DESKTOP[s],mobileVariant:t.TITLE_BY_SIZE_MOBILE[s],className:a.title,children:i})}),e.jsx("div",{className:a.divider}),e.jsxs("div",{className:a.descriptionContainer,children:[e.jsx(r.Typography,{defaultVariant:t.DESC_BY_SIZE_DESKTOP[s],mobileVariant:t.DESC_BY_SIZE_MOBILE[s],className:a.description,children:l}),e.jsxs(r.Typography,{defaultVariant:t.PRICE_BY_SIZE_DESKTOP[s],mobileVariant:t.PRICE_BY_SIZE_MOBILE[s],className:a.price,children:["Starting at ",o]})]})]})]}),e.jsx("div",{className:a.buttonContainer,children:e.jsx(m.Button,{...d,as:"a",size:t.BUTTON_BY_SIZE[s],children:"GET STARTED"})})]})};exports.Callback=E;

package/dist/components/Callback/Callback.es.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as i } from "react/jsx-runtime";
 import { cn as l } from "../../utils/cn/cn.es.js";
-import { Button as _ } from "../Button/Button.es.js";
+import a from "../../components/Callback/callback.module.css";
+import { TITLE_BY_SIZE_MOBILE as _, TITLE_BY_SIZE_DESKTOP as I, DESC_BY_SIZE_MOBILE as p, DESC_BY_SIZE_DESKTOP as S, PRICE_BY_SIZE_MOBILE as T, PRICE_BY_SIZE_DESKTOP as B, BUTTON_BY_SIZE as N } from "./constants.es.js";
 import { Typography as e } from "../Typography/Typography.es.js";
-import a from "./callback.module.css.es.js";
-import { TITLE_BY_SIZE_MOBILE as I, TITLE_BY_SIZE_DESKTOP as p, DESC_BY_SIZE_MOBILE as S, DESC_BY_SIZE_DESKTOP as T, PRICE_BY_SIZE_MOBILE as B, PRICE_BY_SIZE_DESKTOP as N, BUTTON_BY_SIZE as h } from "./constants.es.js";
+import { Button as h } from "../Button/Button.es.js";
 const Z = ({
   image: c,
   title: n,
@@ -28,8 +28,8 @@ const Z = ({
         /* @__PURE__ */ i("div", { className: a.titleContainer, children: /* @__PURE__ */ i(
           e,
           {
-            defaultVariant: p[r],
-            mobileVariant: I[r],
+            defaultVariant: I[r],
+            mobileVariant: _[r],
             className: a.title,
             children: n
           }
@@ -39,8 +39,8 @@ const Z = ({
           /* @__PURE__ */ i(
             e,
             {
-              defaultVariant: T[r],
-              mobileVariant: S[r],
+              defaultVariant: S[r],
+              mobileVariant: p[r],
               className: a.description,
               children: o
             }
@@ -48,8 +48,8 @@ const Z = ({
           /* @__PURE__ */ t(
             e,
             {
-              defaultVariant: N[r],
-              mobileVariant: B[r],
+              defaultVariant: B[r],
+              mobileVariant: T[r],
               className: a.price,
               children: [
                 "Starting at ",
@@ -60,7 +60,7 @@ const Z = ({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ i("div", { className: a.buttonContainer, children: /* @__PURE__ */ i(_, { ...m, as: "a", size: h[r], children: "GET STARTED" }) })
+    /* @__PURE__ */ i("div", { className: a.buttonContainer, children: /* @__PURE__ */ i(h, { ...m, as: "a", size: N[r], children: "GET STARTED" }) })
   ] });
 };
 export {