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

package/dist/components/ProductGalleryCard/ProductGalleryCard.es.js

@@ -1,21 +1,43 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { Button as n } from "../Button/Button.es.js";
-import { Typography as s } from "../Typography/Typography.es.js";
-import l from "./productGalleryCard.module.css.es.js";
-const g = ({ name: c, price: m, image: d, link: p, buttons: i }) => {
-  const o = (e) => {
-    e.preventDefault(), e.stopPropagation();
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { Button as s } from "../Button/Button.es.js";
+import { Typography as c } from "../Typography/Typography.es.js";
+import { cn as m } from "../../utils/cn/cn.es.js";
+import e from "./productGalleryCard.module.css.es.js";
+const k = ({
+  name: d,
+  price: p,
+  image: h,
+  link: u,
+  buttons: t,
+  isHoverable: o = !0
+}) => {
+  const i = (r) => {
+    r.preventDefault(), r.stopPropagation();
   };
-  return /* @__PURE__ */ t("a", { href: p, target: "_blank", rel: "noopener noreferrer", className: l.root, children: [
-    /* @__PURE__ */ t("div", { className: l.productInfo, children: [
-      /* @__PURE__ */ a(s, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: l.title, children: c }),
-      /* @__PURE__ */ a(s, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: l.price, children: m })
+  return /* @__PURE__ */ n("a", { href: u, target: "_blank", rel: "noopener noreferrer", className: e.root, children: [
+    /* @__PURE__ */ n("div", { className: e.productInfo, children: [
+      /* @__PURE__ */ a(c, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: e.title, children: d }),
+      /* @__PURE__ */ a(c, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: e.price, children: p })
     ] }),
-    /* @__PURE__ */ a("img", { src: d, alt: "product image", className: l.productImage }),
-    /* @__PURE__ */ a("div", { onClick: o, className: l.buttonContainerDesktop, children: i.map((e, r) => /* @__PURE__ */ a(n, { size: "sm", ...e, children: e.label }, r)) }),
-    /* @__PURE__ */ a("div", { onClick: o, className: l.buttonContainerMobile, children: i.map((e, r) => /* @__PURE__ */ a(n, { size: "xs", ...e, children: e.label }, r)) })
+    /* @__PURE__ */ a("img", { src: h, alt: "product image", className: e.productImage }),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        onClick: i,
+        className: m(e.buttonContainerDesktop, o && e.hoverableButtons),
+        children: t.map((r, l) => /* @__PURE__ */ a(s, { size: "sm", ...r, children: r.label }, l))
+      }
+    ),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        onClick: i,
+        className: m(e.buttonContainerMobile, o && e.hoverableButtons),
+        children: t.map((r, l) => /* @__PURE__ */ a(s, { size: "xs", ...r, children: r.label }, l))
+      }
+    )
   ] });
 };
 export {
-  g as ProductGalleryCard
+  k as ProductGalleryCard
 };

package/dist/components/ProductGalleryCard/productGalleryCard.module.css.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="productGalleryCard-module__root___oGJjs",t="productGalleryCard-module__buttonContainerDesktop___A9g0U",e="productGalleryCard-module__productInfo___IZeoL",r="productGalleryCard-module__title___dnRaF",n="productGalleryCard-module__price___dNy0O",u="productGalleryCard-module__buttonContainerMobile___molmH",l="productGalleryCard-module__productImage___uSNso",_={root:o,buttonContainerDesktop:t,productInfo:e,title:r,price:n,buttonContainerMobile:u,productImage:l};exports.buttonContainerDesktop=t;exports.buttonContainerMobile=u;exports.default=_;exports.price=n;exports.productImage=l;exports.productInfo=e;exports.root=o;exports.title=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="productGalleryCard-module__root___oGJjs",t="productGalleryCard-module__productInfo___IZeoL",e="productGalleryCard-module__title___dnRaF",r="productGalleryCard-module__price___dNy0O",l="productGalleryCard-module__buttonContainerDesktop___A9g0U",n="productGalleryCard-module__hoverableButtons___9AE80",u="productGalleryCard-module__buttonContainerMobile___molmH",_="productGalleryCard-module__productImage___uSNso",d={root:o,productInfo:t,title:e,price:r,buttonContainerDesktop:l,hoverableButtons:n,buttonContainerMobile:u,productImage:_};exports.buttonContainerDesktop=l;exports.buttonContainerMobile=u;exports.default=d;exports.hoverableButtons=n;exports.price=r;exports.productImage=_;exports.productInfo=t;exports.root=o;exports.title=e;

package/dist/components/ProductGalleryCard/productGalleryCard.module.css.es.js

@@ -1,19 +1,21 @@
-const o = "productGalleryCard-module__root___oGJjs", t = "productGalleryCard-module__buttonContainerDesktop___A9g0U", r = "productGalleryCard-module__productInfo___IZeoL", e = "productGalleryCard-module__title___dnRaF", _ = "productGalleryCard-module__price___dNy0O", d = "productGalleryCard-module__buttonContainerMobile___molmH", l = "productGalleryCard-module__productImage___uSNso", n = {
+const o = "productGalleryCard-module__root___oGJjs", t = "productGalleryCard-module__productInfo___IZeoL", e = "productGalleryCard-module__title___dnRaF", r = "productGalleryCard-module__price___dNy0O", _ = "productGalleryCard-module__buttonContainerDesktop___A9g0U", l = "productGalleryCard-module__hoverableButtons___9AE80", n = "productGalleryCard-module__buttonContainerMobile___molmH", d = "productGalleryCard-module__productImage___uSNso", u = {
   root: o,
-  buttonContainerDesktop: t,
-  productInfo: r,
+  productInfo: t,
   title: e,
-  price: _,
-  buttonContainerMobile: d,
-  productImage: l
+  price: r,
+  buttonContainerDesktop: _,
+  hoverableButtons: l,
+  buttonContainerMobile: n,
+  productImage: d
 };
 export {
-  t as buttonContainerDesktop,
-  d as buttonContainerMobile,
-  n as default,
-  _ as price,
-  l as productImage,
-  r as productInfo,
+  _ as buttonContainerDesktop,
+  n as buttonContainerMobile,
+  u as default,
+  l as hoverableButtons,
+  r as price,
+  d as productImage,
+  t as productInfo,
   o as root,
   e as title
 };

package/dist/components/ProductPairs/ProductPairs.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),P=require("../../node_modules/swiper/modules/navigation.cjs.js"),s=require("../../node_modules/swiper/swiper-react.cjs.js"),h=require("../../utils/useSwiper/useSwiper.cjs.js"),w=require("../ProgressButton/ProgressButton.cjs.js"),m=require("../ProductGalleryCard/ProductGalleryCard.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const r=require("./productPairs.module.css.cjs.js"),g=[P.default],q=({productCards:i})=>{const{isBeginning:l,isEnd:t,setIsEnd:n,handleSlideChange:a,handlePrevClick:o,handleNextClick:d,onSwiperInit:c,handleSwiperResize:u}=h.useSwiper();return e.jsxs("div",{className:r.default.root,children:[e.jsx("div",{className:r.default.carouselArea,children:e.jsx(s.Swiper,{onSwiper:c,onResize:u,onSlideChange:a,onReachEnd:()=>n(!0),modules:g,spaceBetween:0,slidesPerView:"auto",className:r.default.swiper,children:i.slice(0,2).map((p,S)=>e.jsx(s.SwiperSlide,{className:r.default.swiperSlide,children:e.jsx("div",{className:r.default.card,children:e.jsx(m.ProductGalleryCard,{...p,isHoverable:!1})})},S))})}),e.jsx("div",{className:r.default.swiperControlsMobile,children:e.jsx(w.ProgressButton,{left:{disabled:l,onClick:o},right:{disabled:t,onClick:d}})})]})};exports.ProductPairs=q;

package/dist/components/ProductPairs/ProductPairs.d.ts

@@ -0,0 +1,7 @@
+import { TProductGalleryCardView } from '../ProductGalleryCard';
+
+type ProductPairsProps = {
+    productCards: Array<TProductGalleryCardView>;
+};
+export declare const ProductPairs: ({ productCards }: ProductPairsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ProductPairs/ProductPairs.es.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import S from "../../node_modules/swiper/modules/navigation.es.js";
+import { Swiper as w, SwiperSlide as u } from "../../node_modules/swiper/swiper-react.es.js";
+import { useSwiper as f } from "../../utils/useSwiper/useSwiper.es.js";
+import { ProgressButton as C } from "../ProgressButton/ProgressButton.es.js";
+import { ProductGalleryCard as N } from "../ProductGalleryCard/ProductGalleryCard.es.js";
+/* empty css                                      */
+/* empty css                                                  */
+/* empty css                                                  */
+import i from "./productPairs.module.css.es.js";
+const g = [S], y = ({ productCards: r }) => {
+  const {
+    isBeginning: s,
+    isEnd: o,
+    setIsEnd: l,
+    handleSlideChange: n,
+    handlePrevClick: a,
+    handleNextClick: t,
+    onSwiperInit: d,
+    handleSwiperResize: c
+  } = f();
+  return /* @__PURE__ */ h("div", { className: i.root, children: [
+    /* @__PURE__ */ e("div", { className: i.carouselArea, children: /* @__PURE__ */ e(
+      w,
+      {
+        onSwiper: d,
+        onResize: c,
+        onSlideChange: n,
+        onReachEnd: () => l(!0),
+        modules: g,
+        spaceBetween: 0,
+        slidesPerView: "auto",
+        className: i.swiper,
+        children: r.slice(0, 2).map((m, p) => /* @__PURE__ */ e(u, { className: i.swiperSlide, children: /* @__PURE__ */ e("div", { className: i.card, children: /* @__PURE__ */ e(N, { ...m, isHoverable: !1 }) }) }, p))
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: i.swiperControlsMobile, children: /* @__PURE__ */ e(
+      C,
+      {
+        left: {
+          disabled: s,
+          onClick: a
+        },
+        right: {
+          disabled: o,
+          onClick: t
+        }
+      }
+    ) })
+  ] });
+};
+export {
+  y as ProductPairs
+};

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

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

package/dist/components/ProductPairs/productPairs.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r="productPairs-module__root___TubBM",e="productPairs-module__carouselArea___ukTIF",o="productPairs-module__swiper___uuzGb",s="productPairs-module__swiperControlsMobile___ar7DY",_="productPairs-module__swiperSlide___fblEe",i="productPairs-module__card___n47uN",l={root:r,carouselArea:e,swiper:o,swiperControlsMobile:s,swiperSlide:_,card:i};exports.card=i;exports.carouselArea=e;exports.default=l;exports.root=r;exports.swiper=o;exports.swiperControlsMobile=s;exports.swiperSlide=_;

package/dist/components/ProductPairs/productPairs.module.css.es.js

@@ -0,0 +1,17 @@
+const o = "productPairs-module__root___TubBM", r = "productPairs-module__carouselArea___ukTIF", e = "productPairs-module__swiper___uuzGb", s = "productPairs-module__swiperControlsMobile___ar7DY", _ = "productPairs-module__swiperSlide___fblEe", t = "productPairs-module__card___n47uN", i = {
+  root: o,
+  carouselArea: r,
+  swiper: e,
+  swiperControlsMobile: s,
+  swiperSlide: _,
+  card: t
+};
+export {
+  t as card,
+  r as carouselArea,
+  i as default,
+  o as root,
+  e as swiper,
+  s as swiperControlsMobile,
+  _ as swiperSlide
+};

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

@@ -23,7 +23,15 @@ const c = ({ orientation: i, icon: e, disabled: n = !1, onClick: a }) => /* @__P
     children: [
       /* @__PURE__ */ t(c, { orientation: "left", icon: s.ARROW_BACK, disabled: e.disabled, onClick: e.onClick }),
       /* @__PURE__ */ t("div", { className: r(o.divider, { [o.inverted]: i }) }),
-      /* @__PURE__ */ t(c, { orientation: "right", icon: s.ARROW_FORWARD, disabled: n.disabled, onClick: n.onClick })
+      /* @__PURE__ */ t(
+        c,
+        {
+          orientation: "right",
+          icon: s.ARROW_FORWARD,
+          disabled: n.disabled,
+          onClick: n.onClick
+        }
+      )
     ]
   }
 );

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

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

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

@@ -1,72 +1,126 @@
 "use client";
-import { jsxs as i, jsx as t, Fragment as u } from "react/jsx-runtime";
-import { useState as f, useRef as g, useEffect as v } from "react";
-import { cn as m } from "../../utils/cn/cn.es.js";
-import { Label as h } from "../Label/Label.es.js";
-import { ProgressButton as N } from "../ProgressButton/ProgressButton.es.js";
-import { Typography as d } from "../Typography/Typography.es.js";
-import e from "./stepsCarousel.module.css.es.js";
-const X = ({ steps: p, colorScheme: l }) => {
-  const [s, c] = f(0), n = g([]);
-  return v(() => {
-    var a;
-    n.current[s] && ((a = n.current[s]) == null || a.scrollIntoView({
+import { jsxs as l, jsx as n, Fragment as T } from "react/jsx-runtime";
+import { useState as X, useRef as h, useCallback as b, useEffect as V } from "react";
+import { cn as f } from "../../utils/cn/cn.es.js";
+import { Label as N } from "../Label/Label.es.js";
+import { ProgressButton as y } from "../ProgressButton/ProgressButton.es.js";
+import { Typography as p } from "../Typography/Typography.es.js";
+import t from "./stepsCarousel.module.css.es.js";
+const B = ({ steps: s, colorScheme: i }) => {
+  const [c, o] = X(0), m = h([]), u = h(null), d = h(null), k = b((e) => {
+    u.current = e.touches[0].clientX;
+  }, []), v = b((e) => {
+    d.current = e.touches[0].clientX;
+  }, []), C = b(() => {
+    if (u.current !== null && d.current !== null) {
+      const e = d.current - u.current, r = 50;
+      o((a) => e > r && a > 0 ? a - 1 : e < -r && a < s.length - 1 ? a + 1 : a);
+    }
+    u.current = null, d.current = null;
+  }, [s.length]);
+  return V(() => {
+    var e;
+    m.current[c] && ((e = m.current[c]) == null || e.scrollIntoView({
       behavior: "smooth",
       inline: "center",
       block: "nearest"
     }));
-  }, [s]), /* @__PURE__ */ i("div", { className: e.root, "data-scheme": l, children: [
-    /* @__PURE__ */ t("div", { className: e.stepsContainer, "data-scheme": l, children: p.map((a, r) => {
-      const o = s === r;
-      return /* @__PURE__ */ i(
-        "button",
-        {
-          ref: (b) => {
-            n.current.splice(r, 1, b);
-          },
-          className: m(e.card, o && e.cardActive),
-          onClick: () => c(r),
-          type: "button",
-          children: [
-            /* @__PURE__ */ t("div", { className: m(e.imageWrapper, o && e.imageWrapperActive), children: /* @__PURE__ */ t("img", { src: a.image, alt: a.title, className: e.image }) }),
-            /* @__PURE__ */ t("div", { className: e.stepLabel, children: o ? /* @__PURE__ */ i(u, { children: [
-              /* @__PURE__ */ i(h, { size: "lg", className: e.desktop, color: l === "dark" ? "white" : "black", children: [
-                "Step ",
-                r + 1
-              ] }),
-              /* @__PURE__ */ i(h, { size: "sm", className: e.mobile, color: l === "dark" ? "white" : "black", children: [
-                "Step ",
-                r + 1
-              ] })
-            ] }) : /* @__PURE__ */ i(d, { defaultVariant: "labelSm", mobileVariant: "labelXs", emphasis: !0, className: e.labelText, children: [
-              "Step ",
-              r + 1
-            ] }) }),
-            /* @__PURE__ */ i("div", { className: e.textContainer, children: [
-              /* @__PURE__ */ t(d, { as: "h3", defaultVariant: "headingXs", mobileVariant: "headingXxs", children: a.title }),
-              a.description && /* @__PURE__ */ t(d, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: e.cardDescription, children: a.description })
-            ] })
-          ]
-        },
-        `step-${r}`
-      );
-    }) }),
-    /* @__PURE__ */ t("div", { className: m(e.mobile, e.progressButtonContainer), children: /* @__PURE__ */ t(
-      N,
+  }, [c]), /* @__PURE__ */ l("div", { className: t.root, "data-scheme": i, children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: t.stepsContainer,
+        "data-scheme": i,
+        onTouchStart: k,
+        onTouchMove: v,
+        onTouchEnd: C,
+        children: s.map((e, r) => {
+          const a = c === r;
+          return /* @__PURE__ */ l(
+            "button",
+            {
+              ref: (g) => {
+                g && (m.current[r] = g);
+              },
+              className: f(t.card, a && t.cardActive),
+              onClick: () => o(r),
+              type: "button",
+              children: [
+                /* @__PURE__ */ n("div", { className: f(t.imageWrapper, a && t.imageWrapperActive), children: /* @__PURE__ */ n("img", { src: e.image, alt: e.title, className: t.image }) }),
+                /* @__PURE__ */ n("div", { className: t.stepLabel, children: a ? /* @__PURE__ */ l(T, { children: [
+                  /* @__PURE__ */ l(
+                    N,
+                    {
+                      size: "lg",
+                      className: t.desktop,
+                      color: i === "dark" ? "white" : "black",
+                      children: [
+                        "Step ",
+                        r + 1
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ l(
+                    N,
+                    {
+                      size: "sm",
+                      className: t.mobile,
+                      color: i === "dark" ? "white" : "black",
+                      children: [
+                        "Step ",
+                        r + 1
+                      ]
+                    }
+                  )
+                ] }) : /* @__PURE__ */ l(
+                  p,
+                  {
+                    defaultVariant: "labelSm",
+                    mobileVariant: "labelXs",
+                    emphasis: !0,
+                    className: t.labelText,
+                    children: [
+                      "Step ",
+                      r + 1
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ l("div", { className: t.textContainer, children: [
+                  /* @__PURE__ */ n(p, { as: "h3", defaultVariant: "headingXs", mobileVariant: "headingXxs", children: e.title }),
+                  e.description && /* @__PURE__ */ n(
+                    p,
+                    {
+                      as: "p",
+                      defaultVariant: "bodyMd",
+                      mobileVariant: "bodySm",
+                      className: t.cardDescription,
+                      children: e.description
+                    }
+                  )
+                ] })
+              ]
+            },
+            `step-${r}`
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: f(t.mobile, t.progressButtonContainer), children: /* @__PURE__ */ n(
+      y,
       {
-        invert: l === "dark",
+        invert: i === "dark",
         left: {
-          disabled: s <= 0,
-          onClick: () => c((a) => a - 1)
+          disabled: c <= 0,
+          onClick: () => o((e) => e - 1)
         },
         right: {
-          disabled: s >= p.length - 1,
-          onClick: () => c((a) => a + 1)
+          disabled: c >= s.length - 1,
+          onClick: () => o((e) => e + 1)
         }
       }
     ) })
   ] });
 };
 export {
-  X as StepsCarousel
+  B as StepsCarousel
 };

package/dist/components/StudyGridCard/StudyGridCard.es.js

@@ -17,13 +17,43 @@ function S({ title: i, link: l, inverted: o, image: c, date: u, label: n, readTi
     /* @__PURE__ */ a("div", { className: e.imagePart, style: { backgroundImage: `url(${c})` }, children: n && /* @__PURE__ */ a(f, { ...n }) }),
     /* @__PURE__ */ t("div", { className: e.dataPart, children: [
       /* @__PURE__ */ t("div", { className: e.info, children: [
-        /* @__PURE__ */ a(r, { defaultVariant: "labelSm", mobileVariant: "labelXs", emphasis: !0, weight: "medium", color: "color-neutral-500", children: b(u) }),
+        /* @__PURE__ */ a(
+          r,
+          {
+            defaultVariant: "labelSm",
+            mobileVariant: "labelXs",
+            emphasis: !0,
+            weight: "medium",
+            color: "color-neutral-500",
+            children: b(u)
+          }
+        ),
         !!m && /* @__PURE__ */ t(h, { children: [
-          /* @__PURE__ */ a(r, { defaultVariant: "labelSm", mobileVariant: "labelXs", emphasis: !0, weight: "medium", color: "color-neutral-500", children: "•" }),
-          /* @__PURE__ */ t(r, { defaultVariant: "labelSm", mobileVariant: "labelXs", emphasis: !0, weight: "medium", color: "color-neutral-500", children: [
-            m,
-            " MIN READ"
-          ] })
+          /* @__PURE__ */ a(
+            r,
+            {
+              defaultVariant: "labelSm",
+              mobileVariant: "labelXs",
+              emphasis: !0,
+              weight: "medium",
+              color: "color-neutral-500",
+              children: "•"
+            }
+          ),
+          /* @__PURE__ */ t(
+            r,
+            {
+              defaultVariant: "labelSm",
+              mobileVariant: "labelXs",
+              emphasis: !0,
+              weight: "medium",
+              color: "color-neutral-500",
+              children: [
+                m,
+                " MIN READ"
+              ]
+            }
+          )
         ] })
       ] }),
       /* @__PURE__ */ a(r, { className: e.title, defaultVariant: "headingSm", mobileVariant: "bodySm", as: "h6", children: i }),

package/dist/components/Tabs/TabsWithFade.es.js

@@ -22,7 +22,16 @@ function g({ tabs: n, activeTab: l, onTabChange: c }) {
         [r.showFadeLeft]: a,
         [r.showFadeRight]: d
       }),
-      children: /* @__PURE__ */ o("div", { ref: s, className: r.tabsTape, children: /* @__PURE__ */ o(L, { activeTab: l, tabs: n, size: "lg", activeLinePosition: "bottom", onTabClick: c }) })
+      children: /* @__PURE__ */ o("div", { ref: s, className: r.tabsTape, children: /* @__PURE__ */ o(
+        L,
+        {
+          activeTab: l,
+          tabs: n,
+          size: "lg",
+          activeLinePosition: "bottom",
+          onTabClick: c
+        }
+      ) })
     }
   );
 }

package/dist/components/Typography/Typography.es.js

@@ -16,7 +16,14 @@ const _ = ({
   let s = e;
   l && !e && (s = "medium");
   const n = s ? o[`weight${s.charAt(0).toUpperCase()}${s.slice(1)}`] : "", h = t.startsWith("label") && l ? o.labelEmphasis : "", f = r ? o[`mobile__${r}`] : "";
-  return /* @__PURE__ */ y(i, { style: g(p), className: C(c, n, h, f, m), children: a });
+  return /* @__PURE__ */ y(
+    i,
+    {
+      style: g(p),
+      className: C(c, n, h, f, m),
+      children: a
+    }
+  );
 };
 export {
   _ as Typography