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

package/dist/components/ProgramCard/programCard.module.css

@@ -0,0 +1,97 @@
+.card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    padding: 24px;
+    gap: 10px;
+    text-align: left;
+    color: var(--color-text-primary-inverted);
+    text-decoration: none;
+}
+
+a.card {
+    cursor: pointer;
+}
+
+.card[data-type='active'] {
+    width: 540px;
+    height: 320px;
+    border-radius: var(--border-radius-full);
+    background-size: cover;
+    padding: 24px 48px;
+}
+
+.card[data-type='coming_soon'] {
+    width: 320px;
+    height: 320px;
+    background: linear-gradient(180deg, var(--color-bg-fill-primary) 7.66%, var(--color-bg-fill-brand-disabled) 100%);
+    border-radius: var(--border-radius-md);
+    cursor: default;
+}
+
+.card[data-type='active'].cardRounded {
+    position: relative;
+    width: 100%;
+    height: 496px;
+    border-radius: var(--border-radius-xxxl);
+    padding: 120px 60px;
+    transition: padding-right 0.3s, padding-left 0.3s, border-radius 0.3s;
+
+    &:hover {
+        border-radius: 250px;
+        padding: 120px 96px;
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--border-radius-xxxl);
+    }
+}
+
+.label {
+    width: 100%;
+}
+
+.arrow {
+    width: 128px;
+    height: 128px;
+    flex-shrink: 0;
+}
+
+@media (width <= 768px) {
+    .card {
+        padding: 12px;
+    }
+
+    .card[data-type='active'] {
+        width: 270px;
+        height: 160px;
+    }
+
+    .card[data-type='coming_soon'] {
+        width: 160px;
+        height: 160px;
+    }
+
+    .card[data-type='active'].cardRounded {
+        height: 176px;
+        border-radius: 250px;
+        padding: 12px 36px;
+
+        &:hover {
+            border-radius: 250px;
+            padding: 12px 36px;
+        }
+    }
+
+    .arrow {
+        width: 64px;
+        height: 64px;
+    }
+}

package/dist/components/ProgressButton/ProgressButton.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../utils/cn/cn.cjs.js"),a=require("../Icon/Icon.cjs.js"),r=require("../Icon/constants.cjs.js"),e=require("./progressButton.module.css.cjs.js"),l=({orientation:n,icon:o,disabled:s=!1,onClick:c})=>t.jsx("button",{className:i.cn(e.default.button,{[e.default.buttonLeft]:n==="left",[e.default.buttonRight]:n==="right"}),disabled:s,onClick:c,children:t.jsx("div",{className:e.default.iconWrap,children:t.jsx(a.Icon,{name:o,className:e.default.icon})})}),u=({invert:n=!1,left:o,right:s,className:c})=>t.jsxs("div",{className:i.cn(e.default.root,{[e.default.inverted]:n},c),children:[t.jsx(l,{orientation:"left",icon:r.EIconName.ARROW_BACK,disabled:o.disabled,onClick:o.onClick}),t.jsx("div",{className:i.cn(e.default.divider,{[e.default.inverted]:n})}),t.jsx(l,{orientation:"right",icon:r.EIconName.ARROW_FORWARD,disabled:s.disabled,onClick:s.onClick})]});exports.ProgressButton=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../utils/cn/cn.cjs.js"),n=require("../../src/components/ProgressButton/progressButton.module.css"),r=require("../Icon/constants.cjs.js"),a=require("../Icon/Icon.cjs.js"),l=({orientation:s,icon:t,disabled:o=!1,onClick:c})=>e.jsx("button",{className:i.cn(n.button,{[n.buttonLeft]:s==="left",[n.buttonRight]:s==="right"}),disabled:o,onClick:c,children:e.jsx("div",{className:n.iconWrap,children:e.jsx(a.Icon,{name:t,className:n.icon})})}),d=({invert:s=!1,left:t,right:o,className:c})=>e.jsxs("div",{className:i.cn(n.root,{[n.inverted]:s},c),children:[e.jsx(l,{orientation:"left",icon:r.EIconName.ARROW_BACK,disabled:t.disabled,onClick:t.onClick}),e.jsx("div",{className:i.cn(n.divider,{[n.inverted]:s})}),e.jsx(l,{orientation:"right",icon:r.EIconName.ARROW_FORWARD,disabled:o.disabled,onClick:o.onClick})]});exports.ProgressButton=d;

package/dist/components/ProgressButton/ProgressButton.es.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { cn as s } from "../../utils/cn/cn.es.js";
-import { Icon as d } from "../Icon/Icon.es.js";
+import o from "../../components/ProgressButton/progressButton.module.css";
 import { EIconName as c } from "../Icon/constants.es.js";
-import o from "./progressButton.module.css.es.js";
+import { Icon as d } from "../Icon/Icon.es.js";
 const l = ({ orientation: i, icon: e, disabled: n = !1, onClick: r }) => /* @__PURE__ */ t(
   "button",
   {

package/dist/components/ProgressButton/progressButton.module.css

@@ -0,0 +1,76 @@
+.root {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    flex: 0 0 auto;
+    width: 145px;
+    border: 1px solid var(--border-color-alpha-black-10);
+    border-radius: var(--border-radius-sm);
+}
+
+.inverted {
+    border-color: var(--border-color-alpha-white-10);
+}
+
+.inverted .icon {
+    color: var(--color-bg-fill-brand-inverse);
+}
+
+.inverted .divider {
+    background-color: var(--border-color-alpha-white-10);
+}
+
+.button {
+    display: flex;
+    flex-wrap: nowrap;
+    flex: 0 1 auto;
+    justify-content: center;
+    align-items: center;
+    height: 46px;
+    padding: var(--spacing-8) var(--spacing-24);
+    border: none;
+    outline: none;
+    background: none;
+    cursor: pointer;
+}
+
+.button:disabled {
+    cursor: not-allowed;
+}
+
+.button:disabled .icon {
+    color: var(--color-neutral-300);
+}
+
+.buttonLeft {
+    border-radius: 11px 0 0 11px;
+}
+
+.buttonRight {
+    border-radius: 0 11px 11px 0;
+}
+
+.iconWrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    & > * {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.icon {
+    color: var(--color-bg-fill-primary);
+}
+
+.divider {
+    display: flex;
+    flex: 0 0 auto;
+    width: 1px;
+    height: 32px;
+    background-color: var(--border-color-light);
+}

package/dist/components/RadioButton/RadioButton.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../utils/cn/cn.cjs.js"),o=require("../Typography/Typography.cjs.js"),e=require("./radioButton.module.css.cjs.js"),c=({label:s,checked:a=!1,disabled:l=!1,inverted:u=!1,onChange:r})=>t.jsxs("label",{className:i.cn(e.default.root,a&&e.default.checked,l&&e.default.disabled,u&&e.default.inverted),children:[t.jsx("input",{type:"radio",checked:a,disabled:l,onChange:()=>!l&&(r==null?void 0:r(!a)),className:e.default.input}),t.jsx("div",{className:e.default.circle,children:t.jsx("div",{className:e.default.innerCircle})}),s&&t.jsx(o.Typography,{defaultVariant:"labelMd",className:e.default.label,children:s})]});exports.RadioButton=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/RadioButton/radioButton.module.css"),n=require("../Typography/Typography.cjs.js"),o=({label:a,checked:r=!1,disabled:t=!1,inverted:l=!1,onChange:i})=>s.jsxs("label",{className:c.cn(e.root,r&&e.checked,t&&e.disabled,l&&e.inverted),children:[s.jsx("input",{type:"radio",checked:r,disabled:t,onChange:()=>!t&&(i==null?void 0:i(!r)),className:e.input}),s.jsx("div",{className:e.circle,children:s.jsx("div",{className:e.innerCircle})}),a&&s.jsx(n.Typography,{defaultVariant:"labelMd",className:e.label,children:a})]});exports.RadioButton=o;

package/dist/components/RadioButton/RadioButton.es.js

@@ -1,7 +1,7 @@
 import { jsxs as m, jsx as l } from "react/jsx-runtime";
 import { cn as o } from "../../utils/cn/cn.es.js";
+import r from "../../components/RadioButton/radioButton.module.css";
 import { Typography as c } from "../Typography/Typography.es.js";
-import r from "./radioButton.module.css.es.js";
 const u = ({
   label: i,
   checked: s = !1,

package/dist/components/RadioButton/radioButton.module.css

@@ -0,0 +1,75 @@
+.root {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.input {
+    display: none;
+}
+
+.circle {
+    position: relative;
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    min-height: 20px;
+    border: var(--border-width-sm) solid var(--border-color-medium);
+    border-radius: var(--border-radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-bg-fill-brand-inverse);
+    transition: border-color 0.3s, background-color 0.3s;
+}
+
+.innerCircle {
+    position: absolute;
+    opacity: 0;
+    width: 12px;
+    height: 12px;
+    border-radius: var(--border-radius-full);
+    background-color: var(--color-bg-fill-neutral-dark);
+    transition: background-color 0.3s, opacity 0.3s;
+}
+
+.checked .circle {
+    border-color: var(--color-bg-fill-neutral-dark);
+}
+
+.checked .innerCircle {
+    opacity: 1;
+    background-color: var(--color-bg-fill-neutral-dark);
+}
+
+.inverted {
+    color: var(--color-text-primary-inverted);
+}
+
+.inverted .circle {
+    border-color: var(--border-color-invert);
+    background-color: var(--border-color-alpha-white-10);
+}
+
+.inverted .innerCircle {
+    background-color: var(--color-bg-fill-brand-inverse);
+}
+
+.disabled {
+    color: var(--color-text-primary-disabled);
+}
+
+.disabled .circle {
+    border-color: var(--border-color-medium);
+    background-color: var(--color-bg-fill-brand-disabled);
+}
+
+.disabled .innerCircle {
+    opacity: 0.5;
+    background-color: var(--color-bg-fill-brand-disabled);
+}
+
+.label {
+    margin-left: 8px;
+}

package/dist/components/RatingStars/RatingStars.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("../../utils/cn/cn.cjs.js"),u=require("../Icon/Icon.cjs.js"),s=require("../Icon/constants.cjs.js"),a=require("./ratingStars.module.css.cjs.js"),i=(e,t)=>{const n=t<Math.floor(e),o=!n&&t<e;return n?s.EIconName.STAR_FILL:o?s.EIconName.STAR_HALF:s.EIconName.STAR_OUTLINE},m=({rating:e,className:t,size:n})=>r.jsx("div",{className:l.cn(a.default.stars,t),"data-size":n,children:Array.from({length:5}).map((o,c)=>r.jsx("div",{className:a.default.starContainer,children:r.jsx(u.Icon,{name:i(e,c),className:a.default.starIcon})},c))});exports.RatingStars=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("../../utils/cn/cn.cjs.js"),r=require("../../src/components/RatingStars/ratingStars.module.css"),l=require("../Icon/Icon.cjs.js"),c=require("../Icon/constants.cjs.js"),u=(e,n)=>{const t=n<Math.floor(e),o=!t&&n<e;return t?c.EIconName.STAR_FILL:o?c.EIconName.STAR_HALF:c.EIconName.STAR_OUTLINE},m=({rating:e,className:n,size:t})=>s.jsx("div",{className:i.cn(r.stars,n),"data-size":t,children:Array.from({length:5}).map((o,a)=>s.jsx("div",{className:r.starContainer,children:s.jsx(l.Icon,{name:u(e,a),className:r.starIcon})},a))});exports.RatingStars=m;

package/dist/components/RatingStars/RatingStars.es.js

@@ -1,12 +1,12 @@
 import { jsx as a } from "react/jsx-runtime";
 import { cn as c } from "../../utils/cn/cn.es.js";
+import s from "../../components/RatingStars/ratingStars.module.css";
 import { Icon as l } from "../Icon/Icon.es.js";
-import { EIconName as s } from "../Icon/constants.es.js";
-import e from "./ratingStars.module.css.es.js";
+import { EIconName as e } from "../Icon/constants.es.js";
 const f = (r, t) => {
   const o = t < Math.floor(r), m = !o && t < r;
-  return o ? s.STAR_FILL : m ? s.STAR_HALF : s.STAR_OUTLINE;
-}, u = ({ rating: r, className: t, size: o }) => /* @__PURE__ */ a("div", { className: c(e.stars, t), "data-size": o, children: Array.from({ length: 5 }).map((m, n) => /* @__PURE__ */ a("div", { className: e.starContainer, children: /* @__PURE__ */ a(l, { name: f(r, n), className: e.starIcon }) }, n)) });
+  return o ? e.STAR_FILL : m ? e.STAR_HALF : e.STAR_OUTLINE;
+}, u = ({ rating: r, className: t, size: o }) => /* @__PURE__ */ a("div", { className: c(s.stars, t), "data-size": o, children: Array.from({ length: 5 }).map((m, n) => /* @__PURE__ */ a("div", { className: s.starContainer, children: /* @__PURE__ */ a(l, { name: f(r, n), className: s.starIcon }) }, n)) });
 export {
   u as RatingStars
 };

package/dist/components/RatingStars/ratingStars.module.css

@@ -0,0 +1,56 @@
+.stars {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-4);
+    gap: var(--spacing-4);
+}
+
+.starContainer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.starIcon {
+    flex: 0 0 auto;
+}
+
+.stars[data-size="sm"] {
+    .starIcon {
+        width: 16px;
+        height: 16px;
+    }
+}
+
+.stars[data-size="md"] {
+    .starIcon {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+.stars[data-size="lg"] {
+    .starIcon {
+        width: 24px;
+        height: 24px;
+    }
+}
+
+@media screen and (width <= 768px) {
+    .stars[data-size="md"] {
+        .starIcon {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    .stars[data-size="lg"] {
+        .starIcon {
+            width: 20px;
+            height: 20px;
+        }
+    }
+}

package/dist/components/Skeleton/Skeleton.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),c=require("../../utils/cn/cn.cjs.js"),e=require("./skeleton.module.css.cjs.js"),i=({height:t,width:r,radius:n,variant:o="default",className:s})=>{const l={height:t,width:r,borderRadius:n};return u.jsx("div",{className:c.cn(e.default.skeleton,e.default[o],s),style:l})};exports.Skeleton=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),u=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/Skeleton/skeleton.module.css"),i=({height:t,width:s,radius:n,variant:r="default",className:o})=>{const c={height:t,width:s,borderRadius:n};return l.jsx("div",{className:u.cn(e.skeleton,e[r],o),style:c})};exports.Skeleton=i;

package/dist/components/Skeleton/Skeleton.es.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import { cn as i } from "../../utils/cn/cn.es.js";
-import o from "./skeleton.module.css.es.js";
+import o from "../../components/Skeleton/skeleton.module.css";
 const f = ({ height: t, width: e, radius: r, variant: s = "default", className: m }) => {
   const l = {
     height: t,

package/dist/components/Skeleton/skeleton.module.css

@@ -0,0 +1,28 @@
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+.skeleton {
+    display: inline-block;
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite linear;
+    width: 100%;
+    max-width: 100%;
+    height: 12px;
+}
+
+.default {
+    border-radius: var(--border-radius-xs);
+    background: linear-gradient(90deg, #F1EFEF -24.18%, #F9F8F8 50.26%, #E7E5E5 114.84%), var(--color-bg-fill-brand-inverse);
+}
+
+.banner {
+    border-radius: var(--border-radius-sm);
+    opacity: 0.5;
+    background: linear-gradient(270deg, #F1EFEF -15.93%, #F9F8F8 58.5%, #E7E5E5 123.08%);
+}

package/dist/components/SmartCallout/SmartCallout.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../Typography/Typography.cjs.js"),o=require("./smartCallout.module.css.cjs.js"),a=({label:r})=>e.jsx("div",{className:o.default.root,children:e.jsx(t.Typography,{defaultVariant:"labelMd",children:r})});exports.SmartCallout=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../src/components/SmartCallout/smartCallout.module.css"),o=require("../Typography/Typography.cjs.js"),a=({label:r})=>e.jsx("div",{className:t.root,children:e.jsx(o.Typography,{defaultVariant:"labelMd",children:r})});exports.SmartCallout=a;

package/dist/components/SmartCallout/SmartCallout.es.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Typography as t } from "../Typography/Typography.es.js";
-import a from "./smartCallout.module.css.es.js";
-const i = ({ label: o }) => /* @__PURE__ */ r("div", { className: a.root, children: /* @__PURE__ */ r(t, { defaultVariant: "labelMd", children: o }) });
+import t from "../../components/SmartCallout/smartCallout.module.css";
+import { Typography as a } from "../Typography/Typography.es.js";
+const i = ({ label: o }) => /* @__PURE__ */ r("div", { className: t.root, children: /* @__PURE__ */ r(a, { defaultVariant: "labelMd", children: o }) });
 export {
   i as SmartCallout
 };

package/dist/components/SmartCallout/smartCallout.module.css

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

package/dist/components/StepsCarousel/StepsCarousel.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("react"),f=require("../../utils/cn/cn.cjs.js"),g=require("../Label/Label.cjs.js"),k=require("../ProgressButton/ProgressButton.cjs.js"),m=require("../Typography/Typography.cjs.js"),n=require("./stepsCarousel.module.css.cjs.js"),v=50,T=({steps:d,colorScheme:o})=>{const[r,y]=s.useState(0),p=s.useRef(null),b=s.useRef([]),l=s.useRef(null),h=s.useRef(null),j=s.useCallback(e=>{l.current={x:e.touches[0].clientX,y:e.touches[0].clientY}},[]),i=s.useCallback(e=>{var t;y(e),(t=b.current[e])==null||t.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[]),x=s.useCallback(()=>{if(l.current!==null&&h.current!==null){const e=h.current-l.current.x;let t=r;e>v&&r>0?t=r-1:e<-v&&r<d.length-1&&(t=r+1),t!==r&&i(t)}l.current=null,h.current=null},[r,d.length,i]);return s.useEffect(()=>{const e=p.current;if(!e)return;const t=c=>{if(l.current===null)return;const u=c.touches[0].clientX,S=c.touches[0].clientY,C=Math.abs(u-l.current.x),N=Math.abs(S-l.current.y);C>N&&(c.preventDefault(),h.current=u)};return e.addEventListener("touchmove",t,{passive:!1}),()=>{e.removeEventListener("touchmove",t)}},[]),a.jsxs("div",{className:n.default.root,"data-scheme":o,children:[a.jsx("div",{ref:p,className:n.default.stepsContainer,"data-scheme":o,onTouchStart:j,onTouchEnd:x,children:d.map((e,t)=>{const c=r===t;return a.jsxs("button",{ref:u=>{u&&(b.current[t]=u)},className:f.cn(n.default.card,{[n.default.cardActive]:c}),onClick:()=>i(t),type:"button",children:[a.jsx("div",{className:f.cn(n.default.imageWrapper,c&&n.default.imageWrapperActive),children:a.jsx("img",{src:e.image,alt:e.title,className:n.default.image})}),a.jsx("div",{className:n.default.stepLabel,children:c?a.jsxs(a.Fragment,{children:[a.jsx(g.Label,{size:"lg",className:n.default.desktop,color:o==="dark"?"white":"black",children:e.name||`Step ${t+1}`}),a.jsx(g.Label,{size:"sm",className:n.default.mobile,color:o==="dark"?"white":"black",children:e.name||`Step ${t+1}`})]}):a.jsx(m.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,className:n.default.labelText,children:e.name||`Step ${t+1}`})}),a.jsxs("div",{className:n.default.textContainer,children:[a.jsx(m.Typography,{as:"h3",defaultVariant:"headingSm",mobileVariant:"headingXxs",children:e.title}),e.description&&a.jsx(m.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:n.default.cardDescription,children:e.description})]})]},`step-${t}`)})}),a.jsx("div",{className:f.cn(n.default.mobile,n.default.progressButtonContainer),children:a.jsx(k.ProgressButton,{invert:o==="dark",left:{disabled:r<=0,onClick:()=>i(r-1)},right:{disabled:r>=d.length-1,onClick:()=>i(r+1)}})})]})};exports.StepsCarousel=T;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("react"),m=require("../../utils/cn/cn.cjs.js"),r=require("../../src/components/StepsCarousel/stepsCarousel.module.css"),g=require("../Label/Label.cjs.js"),b=require("../Typography/Typography.cjs.js"),C=require("../ProgressButton/ProgressButton.cjs.js"),v=50,T=({steps:d,colorScheme:i})=>{const[s,j]=a.useState(0),p=a.useRef(null),f=a.useRef([]),c=a.useRef(null),h=a.useRef(null),x=a.useCallback(e=>{c.current={x:e.touches[0].clientX,y:e.touches[0].clientY}},[]),o=a.useCallback(e=>{var t;j(e),(t=f.current[e])==null||t.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[]),y=a.useCallback(()=>{if(c.current!==null&&h.current!==null){const e=h.current-c.current.x;let t=s;e>v&&s>0?t=s-1:e<-v&&s<d.length-1&&(t=s+1),t!==s&&o(t)}c.current=null,h.current=null},[s,d.length,o]);return a.useEffect(()=>{const e=p.current;if(!e)return;const t=l=>{if(c.current===null)return;const u=l.touches[0].clientX,S=l.touches[0].clientY,N=Math.abs(u-c.current.x),k=Math.abs(S-c.current.y);N>k&&(l.preventDefault(),h.current=u)};return e.addEventListener("touchmove",t,{passive:!1}),()=>{e.removeEventListener("touchmove",t)}},[]),n.jsxs("div",{className:r.root,"data-scheme":i,children:[n.jsx("div",{ref:p,className:r.stepsContainer,"data-scheme":i,onTouchStart:x,onTouchEnd:y,children:d.map((e,t)=>{const l=s===t;return n.jsxs("button",{ref:u=>{u&&(f.current[t]=u)},className:m.cn(r.card,{[r.cardActive]:l}),onClick:()=>o(t),type:"button",children:[n.jsx("div",{className:m.cn(r.imageWrapper,l&&r.imageWrapperActive),children:n.jsx("img",{src:e.image,alt:e.title,className:r.image})}),n.jsx("div",{className:r.stepLabel,children:l?n.jsxs(n.Fragment,{children:[n.jsx("div",{className:r.desktop,children:n.jsx(g.Label,{size:"lg",color:i==="dark"?"white":"black",children:e.name||`Step ${t+1}`})}),n.jsx("div",{className:r.mobile,children:n.jsx(g.Label,{size:"sm",color:i==="dark"?"white":"black",children:e.name||`Step ${t+1}`})})]}):n.jsx(b.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,className:r.labelText,children:e.name||`Step ${t+1}`})}),n.jsxs("div",{className:r.textContainer,children:[n.jsx(b.Typography,{as:"h3",defaultVariant:"headingSm",mobileVariant:"headingXxs",children:e.title}),e.description&&n.jsx(b.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:r.cardDescription,children:e.description})]})]},`step-${t}`)})}),n.jsx("div",{className:m.cn(r.mobile,r.progressButtonContainer),children:n.jsx(C.ProgressButton,{invert:i==="dark",left:{disabled:s<=0,onClick:()=>o(s-1)},right:{disabled:s>=d.length-1,onClick:()=>o(s+1)}})})]})};exports.StepsCarousel=T;

package/dist/components/StepsCarousel/StepsCarousel.es.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsxs as m, jsx as a, Fragment as V } from "react/jsx-runtime";
+import { jsxs as m, jsx as n, Fragment as V } from "react/jsx-runtime";
 import { useState as A, useRef as h, useCallback as f, useEffect as M } from "react";
 import { cn as p } from "../../utils/cn/cn.es.js";
+import r from "../../components/StepsCarousel/stepsCarousel.module.css";
 import { Label as N } from "../Label/Label.es.js";
-import { ProgressButton as x } from "../ProgressButton/ProgressButton.es.js";
 import { Typography as b } from "../Typography/Typography.es.js";
-import r from "./stepsCarousel.module.css.es.js";
+import { ProgressButton as x } from "../ProgressButton/ProgressButton.es.js";
 const S = 50, W = ({ steps: u, colorScheme: i }) => {
-  const [n, k] = A(0), v = h(null), g = h([]), c = h(null), d = h(null), C = f((e) => {
+  const [a, k] = A(0), v = h(null), g = h([]), c = h(null), d = h(null), C = f((e) => {
     c.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
   }, []), s = f((e) => {
     var t;
@@ -15,11 +15,11 @@ const S = 50, W = ({ steps: u, colorScheme: i }) => {
   }, []), y = f(() => {
     if (c.current !== null && d.current !== null) {
       const e = d.current - c.current.x;
-      let t = n;
-      e > S && n > 0 ? t = n - 1 : e < -S && n < u.length - 1 && (t = n + 1), t !== n && s(t);
+      let t = a;
+      e > S && a > 0 ? t = a - 1 : e < -S && a < u.length - 1 && (t = a + 1), t !== a && s(t);
     }
     c.current = null, d.current = null;
-  }, [n, u.length, s]);
+  }, [a, u.length, s]);
   return M(() => {
     const e = v.current;
     if (!e) return;
@@ -32,7 +32,7 @@ const S = 50, W = ({ steps: u, colorScheme: i }) => {
       e.removeEventListener("touchmove", t);
     };
   }, []), /* @__PURE__ */ m("div", { className: r.root, "data-scheme": i, children: [
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ n(
       "div",
       {
         ref: v,
@@ -41,7 +41,7 @@ const S = 50, W = ({ steps: u, colorScheme: i }) => {
         onTouchStart: C,
         onTouchEnd: y,
         children: u.map((e, t) => {
-          const l = n === t;
+          const l = a === t;
           return /* @__PURE__ */ m(
             "button",
             {
@@ -54,27 +54,11 @@ const S = 50, W = ({ steps: u, colorScheme: i }) => {
               onClick: () => s(t),
               type: "button",
               children: [
-                /* @__PURE__ */ a("div", { className: p(r.imageWrapper, l && r.imageWrapperActive), children: /* @__PURE__ */ a("img", { src: e.image, alt: e.title, className: r.image }) }),
-                /* @__PURE__ */ a("div", { className: r.stepLabel, children: l ? /* @__PURE__ */ m(V, { children: [
-                  /* @__PURE__ */ a(
-                    N,
-                    {
-                      size: "lg",
-                      className: r.desktop,
-                      color: i === "dark" ? "white" : "black",
-                      children: e.name || `Step ${t + 1}`
-                    }
-                  ),
-                  /* @__PURE__ */ a(
-                    N,
-                    {
-                      size: "sm",
-                      className: r.mobile,
-                      color: i === "dark" ? "white" : "black",
-                      children: e.name || `Step ${t + 1}`
-                    }
-                  )
-                ] }) : /* @__PURE__ */ a(
+                /* @__PURE__ */ n("div", { className: p(r.imageWrapper, l && r.imageWrapperActive), children: /* @__PURE__ */ n("img", { src: e.image, alt: e.title, className: r.image }) }),
+                /* @__PURE__ */ n("div", { className: r.stepLabel, children: l ? /* @__PURE__ */ m(V, { children: [
+                  /* @__PURE__ */ n("div", { className: r.desktop, children: /* @__PURE__ */ n(N, { size: "lg", color: i === "dark" ? "white" : "black", children: e.name || `Step ${t + 1}` }) }),
+                  /* @__PURE__ */ n("div", { className: r.mobile, children: /* @__PURE__ */ n(N, { size: "sm", color: i === "dark" ? "white" : "black", children: e.name || `Step ${t + 1}` }) })
+                ] }) : /* @__PURE__ */ n(
                   b,
                   {
                     defaultVariant: "labelSm",
@@ -85,8 +69,8 @@ const S = 50, W = ({ steps: u, colorScheme: i }) => {
                   }
                 ) }),
                 /* @__PURE__ */ m("div", { className: r.textContainer, children: [
-                  /* @__PURE__ */ a(b, { as: "h3", defaultVariant: "headingSm", mobileVariant: "headingXxs", children: e.title }),
-                  e.description && /* @__PURE__ */ a(
+                  /* @__PURE__ */ n(b, { as: "h3", defaultVariant: "headingSm", mobileVariant: "headingXxs", children: e.title }),
+                  e.description && /* @__PURE__ */ n(
                     b,
                     {
                       as: "p",
@@ -104,17 +88,17 @@ const S = 50, W = ({ steps: u, colorScheme: i }) => {
         })
       }
     ),
-    /* @__PURE__ */ a("div", { className: p(r.mobile, r.progressButtonContainer), children: /* @__PURE__ */ a(
+    /* @__PURE__ */ n("div", { className: p(r.mobile, r.progressButtonContainer), children: /* @__PURE__ */ n(
       x,
       {
         invert: i === "dark",
         left: {
-          disabled: n <= 0,
-          onClick: () => s(n - 1)
+          disabled: a <= 0,
+          onClick: () => s(a - 1)
         },
         right: {
-          disabled: n >= u.length - 1,
-          onClick: () => s(n + 1)
+          disabled: a >= u.length - 1,
+          onClick: () => s(a + 1)
         }
       }
     ) })