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

package/dist/components/Callback/callback.module.css

@@ -0,0 +1,237 @@
+.root {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    background-color: var(--color-bg-neutral-light);
+    border-radius: var(--border-radius-lg);
+    border: 1px solid var(--color-bg-fill-alpha-black-10);
+}
+
+.productInfo {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    width: 100%;
+}
+
+.productImage {
+    display: block;
+    margin-right: var(--spacing-16);
+}
+
+.textContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.title {
+    width: 100%;
+    color: var(--color-text-primary);
+    text-wrap: balance;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.titleContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex: 1 1 auto;
+    min-width: 0;
+    width: 100%;
+}
+
+.description {
+    color: var(--color-text-primary);
+    margin-bottom: var(--spacing-4);
+}
+
+.divider {
+    width: 100%;
+    height: 1px;
+    background: var(--color-bg-fill-alpha-black-10);
+}
+
+.descriptionContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.price {
+    color: var(--color-text-secondary);
+}
+
+.buttonContainer {
+    display: flex;
+    margin-left: auto;
+    flex-shrink: 0;
+}
+
+.lg {
+    padding: var(--spacing-12) var(--spacing-48) var(--spacing-12) var(--spacing-12);
+}
+
+.lg .productImage {
+    width: 240px;
+    height: 240px;
+}
+
+.lg .productImage.circle {
+    aspect-ratio: 1;
+    max-width: 200px;
+    max-height: 200px;
+    border-radius: 50%;
+    padding: 20px;
+}
+
+.lg .textContainer {
+    margin-right: var(--spacing-40);
+}
+
+.lg .titleContainer {
+    padding: var(--spacing-12) 0;
+}
+
+.lg .descriptionContainer {
+    padding: var(--spacing-12) 0;
+}
+
+.sm {
+    padding: var(--spacing-12) var(--spacing-24) var(--spacing-12) var(--spacing-12);
+    max-width: 623px;
+}
+
+.sm .productImage {
+    max-width: 120px;
+    max-height: 120px;
+}
+
+.sm .productImage.circle {
+    aspect-ratio: 1;
+    max-width: 100px;
+    max-height: 100px;
+    border-radius: 50%;
+    padding: 10px;
+}
+
+.sm .textContainer {
+    margin-right: var(--spacing-32);
+}
+
+.sm .titleContainer {
+    padding: 0 0 var(--spacing-8) 0;
+}
+
+.sm .descriptionContainer {
+    padding: var(--spacing-8) 0 0 0;
+}
+
+@media (width <= 768px) {
+    .root {
+        flex-direction: column;
+        align-items: flex-start;
+        max-width: 100%;
+    }
+
+    .productImage {
+        margin: 0 auto var(--spacing-16) auto;
+    }
+
+    .textContainer {
+        width: 100%;
+        padding: 0 var(--spacing-24);
+        margin-right: 0;
+        margin-bottom: var(--spacing-24);
+    }
+
+    .buttonContainer {
+        margin-left: 0;
+    }
+
+    .lg.root {
+        padding: var(--spacing-12) 0 var(--spacing-24);
+    }
+
+    .lg .productInfo {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .lg .productImage {
+        max-width: 207px;
+        max-height: 207px;
+    }
+
+    .lg .textContainer {
+        margin-right: 0;
+    }
+
+    .lg .titleContainer {
+        padding: 0 0 var(--spacing-12) 0;
+    }
+
+    .lg .descriptionContainer {
+        padding: var(--spacing-12) 0 0 0;
+    }
+
+    .lg .description {
+        margin-bottom: var(--spacing-8);
+    }
+
+    .lg .buttonContainer {
+        padding: 0 var(--spacing-24);
+    }
+
+    .sm.root {
+        padding: var(--spacing-12);
+    }
+
+    .sm .productInfo {
+        flex-direction: row;
+        width: 100%;
+        margin-bottom: var(--spacing-20);
+    }
+
+    .sm .productImage {
+        max-width: 96px;
+        max-height: 96px;
+        margin: 0 var(--spacing-8) 0 0;
+    }
+
+    .sm .textContainer {
+        flex-grow: 1;
+        margin: 0;
+        padding: 0;
+    }
+
+    .sm .titleContainer {
+        padding: 0 0 var(--spacing-8) 0;
+    }
+
+    .sm .descriptionContainer {
+        padding: var(--spacing-8) 0 0 0;
+    }
+
+    .sm .description {
+        margin-bottom: var(--spacing-4);
+    }
+
+    .sm .buttonContainer {
+        padding: 0;
+        width: 100%;
+    }
+}

package/dist/components/Checkbox/Checkbox.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),m=require("./assets/checkbox-checkmark.svg.cjs.js"),p=require("./assets/checkbox-dash.svg.cjs.js"),k=require("./assets/checkbox-error.svg.cjs.js"),o=require("../../utils/cn/cn.cjs.js"),e=require("./checkbox.module.css.cjs.js"),y=({label:u,checkboxSize:n="lg",checkboxVariant:d="default",isError:c=!1,errorText:l,inverted:i=!1,disabled:r,checked:t,className:f,...h})=>{const x=b=>{switch(b){case"default":return a.jsx(m.default,{className:e.default.icon});case"undetermined":return a.jsx(p.default,{className:e.default.icon})}};return a.jsxs("label",{className:o.cn(e.default.root,i&&e.default.inverted,c&&e.default.error,r&&e.default.disabled,f),children:[a.jsx("input",{...h,type:"checkbox",disabled:r,checked:t,className:e.default.checkbox}),a.jsx("div",{className:o.cn(e.default.visibleCustomCheckbox,e.default[n]),children:t&&x(d)}),a.jsx(s.Typography,{defaultVariant:"labelSm",className:e.default.label,children:u}),c&&!!l&&a.jsxs("div",{className:e.default.errorTextContainer,children:[a.jsx(k.default,{className:e.default.errorIcon}),a.jsx(s.Typography,{defaultVariant:"labelSm",className:e.default.errorText,children:l})]})]})};exports.Checkbox=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),p=require("./assets/checkbox-checkmark.svg.cjs.js"),y=require("./assets/checkbox-dash.svg.cjs.js"),j=require("./assets/checkbox-error.svg.cjs.js"),o=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/Checkbox/checkbox.module.css"),l=require("../Typography/Typography.cjs.js"),f=({label:n,checkboxSize:i="lg",checkboxVariant:u="default",isError:c=!1,errorText:r,inverted:h=!1,disabled:a,checked:t,className:x,...d})=>{const m=b=>{switch(b){case"default":return s.jsx(p.default,{className:e.icon});case"undetermined":return s.jsx(y.default,{className:e.icon})}};return s.jsxs("label",{className:o.cn(e.root,h&&e.inverted,c&&e.error,a&&e.disabled,x),children:[s.jsx("input",{...d,type:"checkbox",disabled:a,checked:t,className:e.checkbox}),s.jsx("div",{className:o.cn(e.visibleCustomCheckbox,e[i]),children:t&&m(u)}),s.jsx(l.Typography,{defaultVariant:"labelSm",className:e.label,children:n}),c&&!!r&&s.jsxs("div",{className:e.errorTextContainer,children:[s.jsx(j.default,{className:e.errorIcon}),s.jsx(l.Typography,{defaultVariant:"labelSm",className:e.errorText,children:r})]})]})};exports.Checkbox=f;

package/dist/components/Checkbox/Checkbox.es.js

@@ -1,10 +1,10 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { Typography as t } from "../Typography/Typography.es.js";
 import u from "./assets/checkbox-checkmark.svg.es.js";
 import k from "./assets/checkbox-dash.svg.es.js";
 import N from "./assets/checkbox-error.svg.es.js";
-import { cn as m } from "../../utils/cn/cn.es.js";
-import e from "./checkbox.module.css.es.js";
+import { cn as t } from "../../utils/cn/cn.es.js";
+import e from "../../components/Checkbox/checkbox.module.css";
+import { Typography as m } from "../Typography/Typography.es.js";
 const T = ({
   label: i,
   checkboxSize: n = "lg",
@@ -28,7 +28,7 @@ const T = ({
   return /* @__PURE__ */ l(
     "label",
     {
-      className: m(
+      className: t(
         e.root,
         b && e.inverted,
         a && e.error,
@@ -37,11 +37,11 @@ const T = ({
       ),
       children: [
         /* @__PURE__ */ r("input", { ...f, type: "checkbox", disabled: c, checked: s, className: e.checkbox }),
-        /* @__PURE__ */ r("div", { className: m(e.visibleCustomCheckbox, e[n]), children: s && p(h) }),
-        /* @__PURE__ */ r(t, { defaultVariant: "labelSm", className: e.label, children: i }),
+        /* @__PURE__ */ r("div", { className: t(e.visibleCustomCheckbox, e[n]), children: s && p(h) }),
+        /* @__PURE__ */ r(m, { defaultVariant: "labelSm", className: e.label, children: i }),
         a && !!o && /* @__PURE__ */ l("div", { className: e.errorTextContainer, children: [
           /* @__PURE__ */ r(N, { className: e.errorIcon }),
-          /* @__PURE__ */ r(t, { defaultVariant: "labelSm", className: e.errorText, children: o })
+          /* @__PURE__ */ r(m, { defaultVariant: "labelSm", className: e.errorText, children: o })
         ] })
       ]
     }

package/dist/components/Checkbox/assets/checkbox-checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.95836 14.7114L3.51294 10.266L4.40377 9.37499L7.95836 12.9296L15.5963 5.29166L16.4871 6.1827L7.95836 14.7114Z" fill="currentColor"/>
+</svg>

package/dist/components/Checkbox/assets/checkbox-dash.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.58337 10.625V9.375H15.4167V10.625H4.58337Z" fill="currentColor"/>
+</svg>

package/dist/components/Checkbox/assets/checkbox-error.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.56242 9.77081H7.43742V6.41665H6.56242V9.77081ZM6.99992 5.41827C7.13341 5.41827 7.24531 5.37311 7.33563 5.28279C7.42595 5.19247 7.47111 5.08057 7.47111 4.94708C7.47111 4.8136 7.42595 4.7017 7.33563 4.61138C7.24531 4.52115 7.13341 4.47604 6.99992 4.47604C6.86643 4.47604 6.75453 4.52115 6.66421 4.61138C6.57389 4.7017 6.52873 4.8136 6.52873 4.94708C6.52873 5.08057 6.57389 5.19247 6.66421 5.28279C6.75453 5.37311 6.86643 5.41827 6.99992 5.41827ZM7.00094 12.5416C6.23444 12.5416 5.51397 12.3962 4.83954 12.1053C4.16511 11.8144 3.57847 11.4197 3.07963 10.921C2.58078 10.4223 2.18581 9.83595 1.89473 9.16181C1.60374 8.48767 1.45825 7.7674 1.45825 7.001C1.45825 6.2345 1.6037 5.51404 1.89459 4.8396C2.18547 4.16517 2.58025 3.57854 3.0789 3.07969C3.57755 2.58084 4.16395 2.18588 4.83809 1.89479C5.51222 1.60381 6.2325 1.45831 6.9989 1.45831C7.7654 1.45831 8.48586 1.60376 9.16029 1.89465C9.83473 2.18554 10.4214 2.58031 10.9202 3.07896C11.4191 3.57761 11.814 4.16401 12.1051 4.83815C12.3961 5.51229 12.5416 6.23256 12.5416 6.99896C12.5416 7.76546 12.3961 8.48593 12.1053 9.16036C11.8144 9.83479 11.4196 10.4214 10.9209 10.9203C10.4223 11.4191 9.83589 11.8141 9.16175 12.1052C8.48761 12.3962 7.76734 12.5416 7.00094 12.5416ZM6.99992 11.6666C8.3027 11.6666 9.40617 11.2146 10.3103 10.3104C11.2145 9.40623 11.6666 8.30276 11.6666 6.99998C11.6666 5.6972 11.2145 4.59373 10.3103 3.68956C9.40617 2.7854 8.3027 2.33331 6.99992 2.33331C5.69714 2.33331 4.59367 2.7854 3.6895 3.68956C2.78534 4.59373 2.33325 5.6972 2.33325 6.99998C2.33325 8.30276 2.78534 9.40623 3.6895 10.3104C4.59367 11.2146 5.69714 11.6666 6.99992 11.6666Z" fill="#E4271D"/>
+</svg>

package/dist/components/Checkbox/checkbox.module.css

@@ -0,0 +1,112 @@
+.root {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 337px;
+    gap: 8px;
+    position: relative;
+}
+
+.label {
+    cursor: pointer;
+    user-select: none;
+    text-transform: capitalize;
+}
+
+.checkbox {
+    cursor: pointer;
+    display: none;
+}
+
+.visibleCustomCheckbox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 0 0 auto;
+    width: 20px;
+    height: 20px;
+    border: var(--border-width-sm) solid var(--border-color-light);
+    border-radius: var(--border-radius-xxs);
+    cursor: pointer;
+}
+
+.errorTextContainer {
+    display: flex;
+    width: 100%;
+    max-width: 200px;
+    gap: 4px;
+    align-items: center;
+    position: absolute;
+    bottom: -14px;
+}
+
+.errorIcon {
+    display: flex;
+    flex: 0 0 auto;
+}
+
+.errorText {
+    user-select: none;
+    color: var(--color-text-danger-light);
+    text-wrap: balance;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.icon {
+    display: flex;
+    width: fit-content;
+}
+
+.sm {
+    width: 16px;
+    height: 16px;
+}
+
+.lg {
+    width: 20px;
+    height: 20px;
+}
+
+.sm ~ .errorTextContainer {
+    left: calc(16px + 4px);
+}
+
+.lg ~ .errorTextContainer {
+    left: calc(20px + 4px);
+}
+
+.inverted {
+    .visibleCustomCheckbox {
+        border-color: var(--border-color-alpha-black-10);
+        background-color: var(--color-bg-fill-brand-solar);
+    }
+    .label {
+        color: var(--color-text-primary-inverted);
+    }
+}
+
+.error {
+    .visibleCustomCheckbox {
+        border-color: var(--border-color-danger-en);
+        background-color: var(--color-urgent-red-100);
+    }
+    .label {
+        color: var(--color-text-primary);
+    }
+}
+
+.disabled {
+    .visibleCustomCheckbox {
+        border-color: var(--border-color-alpha-black-10);
+        background-color: var(--color-bg-fill-brand-disabled);
+        cursor: not-allowed;
+    }
+    .label {
+        color: var(--color-text-primary-disabled);
+        cursor: not-allowed;
+    }
+}

package/dist/components/ClaimBlock/ClaimBlock.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("../Typography/Typography.cjs.js"),e=require("./claimBlock.module.css.cjs.js");function n({value:t,subtitle:d,description:i,valuePrefix:r,valueSuffix:s}){return a.jsxs("div",{className:e.default.claimBlock,children:[a.jsxs("div",{className:e.default.valueContainer,children:[r&&a.jsx(l.Typography,{className:e.default.valuePrefix,as:"h3",defaultVariant:"headingSm",mobileVariant:"headingSm",children:r}),a.jsx(l.Typography,{className:e.default.value,as:"h3",defaultVariant:"displayXs",mobileVariant:"displayXs",children:t}),s&&a.jsx(l.Typography,{className:e.default.valueSuffix,as:"h3",defaultVariant:"headingSm",mobileVariant:"headingSm",children:s})]}),a.jsx(l.Typography,{className:e.default.subtitle,as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:d}),i&&a.jsx(l.Typography,{className:e.default.description,as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:i})]})}exports.ClaimBlock=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../../src/components/ClaimBlock/claimBlock.module.css"),i=require("../Typography/Typography.cjs.js");function o({value:n,subtitle:t,description:s,valuePrefix:l,valueSuffix:r}){return a.jsxs("div",{className:e.claimBlock,children:[a.jsxs("div",{className:e.valueContainer,children:[l&&a.jsx(i.Typography,{className:e.valuePrefix,as:"h3",defaultVariant:"headingSm",mobileVariant:"headingSm",children:l}),a.jsx(i.Typography,{className:e.value,as:"h3",defaultVariant:"displayXs",mobileVariant:"displayXs",children:n}),r&&a.jsx(i.Typography,{className:e.valueSuffix,as:"h3",defaultVariant:"headingSm",mobileVariant:"headingSm",children:r})]}),a.jsx(i.Typography,{className:e.subtitle,as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t}),s&&a.jsx(i.Typography,{className:e.description,as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:s})]})}exports.ClaimBlock=o;

package/dist/components/ClaimBlock/ClaimBlock.es.js

@@ -1,6 +1,6 @@
 import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import a from "../../components/ClaimBlock/claimBlock.module.css";
 import { Typography as e } from "../Typography/Typography.es.js";
-import a from "./claimBlock.module.css.es.js";
 function h({ value: m, subtitle: n, description: l, valuePrefix: s, valueSuffix: r }) {
   return /* @__PURE__ */ d("div", { className: a.claimBlock, children: [
     /* @__PURE__ */ d("div", { className: a.valueContainer, children: [

package/dist/components/ClaimBlock/claimBlock.module.css

@@ -0,0 +1,49 @@
+.claimBlock {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 264px;
+    padding: 32px 0;
+}
+
+.valueContainer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+    height: 100%;
+}
+
+.value sup,
+.value sub {
+    position: relative;
+    font-size: var(--font-size-heading-sm);
+    line-height: var(--line-height-sm);
+    letter-spacing: var(--letter-spacing-negative-sm);
+    vertical-align: super;
+    margin-left: 2px;
+}
+
+.value sub {
+    vertical-align: baseline;
+}
+
+.valuePrefix {
+    width: 20px;
+}
+
+.valueSuffix {
+    width: 20px;
+}
+
+.subtitle {
+    position: relative;
+    font-weight: var(--font-weight-medium);
+    margin-bottom: 12px;
+}
+
+.description {
+    position: relative;
+    color: var(--color-text-secondary);
+}

package/dist/components/ColoredDivider/ColoredDivider.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../Typography/Typography.cjs.js"),d=require("../../utils/cn/cn.cjs.js"),e=require("./coloredDivider.module.css.cjs.js"),t=({label:i,variant:o})=>r.jsxs("div",{className:e.default.root,children:[i&&r.jsxs(a.Typography,{as:"h3",defaultVariant:"headingLg",mobileVariant:"headingSm",className:e.default.label,children:["(",i,")"]}),r.jsx("div",{className:d.cn(e.default.divider,e.default[o])})]});exports.ColoredDivider=t;
+"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/ColoredDivider/coloredDivider.module.css"),n=require("../Typography/Typography.cjs.js"),t=({label:i,variant:s})=>r.jsxs("div",{className:e.root,children:[i&&r.jsxs(n.Typography,{as:"h3",defaultVariant:"headingLg",mobileVariant:"headingSm",className:e.label,children:["(",i,")"]}),r.jsx("div",{className:o.cn(e.divider,e[s])})]});exports.ColoredDivider=t;

package/dist/components/ColoredDivider/ColoredDivider.es.js

@@ -1,14 +1,14 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { Typography as m } from "../Typography/Typography.es.js";
-import { cn as s } from "../../utils/cn/cn.es.js";
-import r from "./coloredDivider.module.css.es.js";
+import { cn as m } from "../../utils/cn/cn.es.js";
+import r from "../../components/ColoredDivider/coloredDivider.module.css";
+import { Typography as s } from "../Typography/Typography.es.js";
 const c = ({ label: i, variant: a }) => /* @__PURE__ */ o("div", { className: r.root, children: [
-  i && /* @__PURE__ */ o(m, { as: "h3", defaultVariant: "headingLg", mobileVariant: "headingSm", className: r.label, children: [
+  i && /* @__PURE__ */ o(s, { as: "h3", defaultVariant: "headingLg", mobileVariant: "headingSm", className: r.label, children: [
     "(",
     i,
     ")"
   ] }),
-  /* @__PURE__ */ e("div", { className: s(r.divider, r[a]) })
+  /* @__PURE__ */ e("div", { className: m(r.divider, r[a]) })
 ] });
 export {
   c as ColoredDivider

package/dist/components/ColoredDivider/coloredDivider.module.css

@@ -0,0 +1,70 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: stretch;
+    gap: 20px;
+}
+
+.label {
+    white-space: nowrap;
+}
+
+.divider {
+    flex-grow: 1;
+    border-radius: var(--border-radius-xxs);
+    height: 35px;
+}
+
+.grey {
+    background: linear-gradient(93deg, var(--color-neutral-200) 40.44%, #888 160.95%);
+    box-shadow:
+        0px 3.41px 12.741px 0px rgba(0, 0, 0, 0.06),
+        0px 0px 6.5px 0px rgba(0, 0, 0, 0.05),
+        0px 0.26px 3.259px 0px rgba(0, 0, 0, 0.04);
+}
+
+.senescence {
+    background: linear-gradient(90deg, #81b1e2 -0.22%, #cadff3 50.35%, #2666a6 100.93%);
+    box-shadow:
+        0px 3.41px 12.741px 0px rgba(129, 177, 226, 0.06),
+        0px 0px 6.5px 0px rgba(129, 177, 226, 0.05),
+        0px 0.26px 3.259px 0px rgba(129, 177, 226, 0.04),
+        0px 9.93px 23.426px 0px rgba(129, 177, 226, 0.08),
+        0px 0.741px 1.574px 0px rgba(129, 177, 226, 0.02);
+}
+
+.metabolism {
+    background: linear-gradient(90deg, #fcc169 -0.22%, #feeacd 50.35%, #fba626 100.93%);
+    box-shadow:
+        0px 3.41px 12.741px 0px rgba(251, 165, 38, 0.07),
+        0px 0px 6.5px 0px rgba(251, 165, 38, 0.05),
+        0px 0.26px 3.259px 0px rgba(251, 165, 38, 0.04),
+        0px 9.93px 23.426px 0px rgba(251, 165, 38, 0.08),
+        0px 0.741px 1.574px 0px rgba(251, 165, 38, 0.02);
+}
+
+.energy {
+    background: linear-gradient(90deg, #fef38e -0.22%, #fffacc 50.35%, #feef67 100.93%);
+    box-shadow:
+        0px 3.41px 12.741px 0px rgba(254, 243, 142, 0.07),
+        0px 0px 6.5px 0px rgba(254, 243, 142, 0.05),
+        0px 0.26px 3.259px 0px rgba(254, 243, 142, 0.04),
+        0px 9.93px 23.426px 0px rgba(254, 243, 142, 0.08),
+        0px 0.741px 1.574px 0px rgba(254, 243, 142, 0.02);
+}
+
+.labs {
+    background: linear-gradient(90deg, #a5d088 -0.22%, #e3f1da 50.35%, #5d923a 100.93%);
+    box-shadow:
+        0px 3.41px 12.741px 0px rgba(165, 208, 136, 0.06),
+        0px 0px 6.5px 0px rgba(165, 208, 136, 0.05),
+        0px 0.26px 3.259px 0px rgba(165, 208, 136, 0.04),
+        0px 9.93px 23.426px 0px rgba(165, 208, 136, 0.08),
+        0px 0.741px 1.574px 0px rgba(165, 208, 136, 0.02);
+}
+
+@media screen and (width <= 768px) {
+    .root {
+        gap: 16px;
+    }
+}

package/dist/components/ComplexImageCarousel/ComplexCarousel/ComplexCarousel.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../utils/cn/cn.cjs.js"),v=require("../../ProgressButton/ProgressButton.cjs.js"),u=require("../../Typography/Typography.cjs.js"),b=require("../useComplexImageCarousel.cjs.js"),r=require("./complexImageCarousel.module.css.cjs.js"),I=({images:a})=>{const{MOBILE_BREAKPOINT:n,containerRef:m,carouselRef:f,imageRefs:p,descriptionRef:g,descriptionItemRef:h,progressButtonContainerRef:C,visible:s,cardSizes:o,handleCustomPrevClick:x,handleCustomNextClick:y,current:j,mobileCardIndex:l,xLargeCardIndex:d}=b.useComplexImageCarousel({images:a});return e.jsxs("div",{className:r.default.root,children:[e.jsxs("div",{ref:m,className:r.default.container,children:[e.jsx("div",{ref:f,className:r.default.carouselArea,children:s.length>0&&s.map((N,t)=>e.jsx("div",{className:i.cn(r.default.slideContainer,r.default[`size-${o[t]}`]),ref:c=>{c&&(p.current[t]=c)},"data-flip-id":`slide-${(j+t)%a.length}`,"data-size":o[t],children:e.jsx("img",{src:N.image,alt:`Slide ${t+1}`,className:r.default.image})},t+1))}),e.jsx("div",{ref:g,className:r.default.description,children:e.jsxs("div",{ref:h,className:i.cn("description-item",r.default.descriptionItem),children:[e.jsx(u.Typography,{as:"h3",defaultVariant:"headingLg",mobileVariant:"headingSm",children:typeof window<"u"&&window.innerWidth<=n?s[l].title:s[d].title}),e.jsx(u.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:r.default.text,children:typeof window<"u"&&window.innerWidth<=n?s[l].description:s[d].description})]})})]}),e.jsx("div",{ref:C,className:r.default.progressButtonContainer,children:e.jsx(v.ProgressButton,{left:{onClick:x},right:{onClick:y},className:i.cn("progress-buttons",r.default.progressButton)})})]})};exports.ComplexCarousel=I;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../utils/cn/cn.cjs.js"),v=require("../useComplexImageCarousel.cjs.js"),s=require("../../../src/components/ComplexImageCarousel/ComplexCarousel/complexImageCarousel.module.css"),u=require("../../Typography/Typography.cjs.js"),b=require("../../ProgressButton/ProgressButton.cjs.js"),w=({images:n})=>{const{MOBILE_BREAKPOINT:o,containerRef:m,carouselRef:p,imageRefs:g,descriptionRef:h,descriptionItemRef:f,progressButtonContainerRef:C,visible:r,cardSizes:a,handleCustomPrevClick:x,handleCustomNextClick:y,current:j,mobileCardIndex:c,xLargeCardIndex:l}=v.useComplexImageCarousel({images:n});return e.jsxs("div",{className:s.root,children:[e.jsxs("div",{ref:m,className:s.container,children:[e.jsx("div",{ref:p,className:s.carouselArea,children:r.length>0&&r.map((N,i)=>e.jsx("div",{className:t.cn(s.slideContainer,s[`size-${a[i]}`]),ref:d=>{d&&(g.current[i]=d)},"data-flip-id":`slide-${(j+i)%n.length}`,"data-size":a[i],children:e.jsx("img",{src:N.image,alt:`Slide ${i+1}`,className:s.image})},i+1))}),e.jsx("div",{ref:h,className:s.description,children:e.jsxs("div",{ref:f,className:t.cn("description-item",s.descriptionItem),children:[e.jsx(u.Typography,{as:"h3",defaultVariant:"headingLg",mobileVariant:"headingSm",children:typeof window!="undefined"&&window.innerWidth<=o?r[c].title:r[l].title}),e.jsx(u.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:s.text,children:typeof window!="undefined"&&window.innerWidth<=o?r[c].description:r[l].description})]})})]}),e.jsx("div",{ref:C,className:s.progressButtonContainer,children:e.jsx(b.ProgressButton,{left:{onClick:x},right:{onClick:y},className:t.cn("progress-buttons",s.progressButton)})})]})};exports.ComplexCarousel=w;

package/dist/components/ComplexImageCarousel/ComplexCarousel/ComplexCarousel.es.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import { cn as o } from "../../../utils/cn/cn.es.js";
-import { ProgressButton as I } from "../../ProgressButton/ProgressButton.es.js";
+import { useComplexImageCarousel as I } from "../useComplexImageCarousel.es.js";
+import e from "../../../components/ComplexImageCarousel/ComplexCarousel/complexImageCarousel.module.css";
 import { Typography as f } from "../../Typography/Typography.es.js";
-import { useComplexImageCarousel as R } from "../useComplexImageCarousel.es.js";
-import e from "./complexImageCarousel.module.css.es.js";
+import { ProgressButton as R } from "../../ProgressButton/ProgressButton.es.js";
 const L = ({ images: a }) => {
   const {
     MOBILE_BREAKPOINT: n,
@@ -21,7 +21,7 @@ const L = ({ images: a }) => {
     current: b,
     mobileCardIndex: l,
     xLargeCardIndex: c
-  } = R({ images: a });
+  } = I({ images: a });
   return /* @__PURE__ */ s("div", { className: e.root, children: [
     /* @__PURE__ */ s("div", { ref: p, className: e.container, children: [
       /* @__PURE__ */ i("div", { ref: h, className: e.carouselArea, children: r.length > 0 && r.map((y, t) => /* @__PURE__ */ i(
@@ -38,12 +38,12 @@ const L = ({ images: a }) => {
         t + 1
       )) }),
       /* @__PURE__ */ i("div", { ref: g, className: e.description, children: /* @__PURE__ */ s("div", { ref: C, className: o("description-item", e.descriptionItem), children: [
-        /* @__PURE__ */ i(f, { as: "h3", defaultVariant: "headingLg", mobileVariant: "headingSm", children: typeof window < "u" && window.innerWidth <= n ? r[l].title : r[c].title }),
-        /* @__PURE__ */ i(f, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: e.text, children: typeof window < "u" && window.innerWidth <= n ? r[l].description : r[c].description })
+        /* @__PURE__ */ i(f, { as: "h3", defaultVariant: "headingLg", mobileVariant: "headingSm", children: typeof window != "undefined" && window.innerWidth <= n ? r[l].title : r[c].title }),
+        /* @__PURE__ */ i(f, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: e.text, children: typeof window != "undefined" && window.innerWidth <= n ? r[l].description : r[c].description })
       ] }) })
     ] }),
     /* @__PURE__ */ i("div", { ref: N, className: e.progressButtonContainer, children: /* @__PURE__ */ i(
-      I,
+      R,
       {
         left: {
           onClick: v