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

package/dist/modules/HighestStandards/components/TabsMenu/TabsMenu.es.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
 import { useState as m } from "react";
-import { TabsMenuItem as l } from "./components/TabsMenutem/TabsMenuItem.es.js";
-import i from "./tabsMenu.module.css.es.js";
+import l from "../../../../modules/HighestStandards/components/TabsMenu/tabsMenu.module.css";
+import { TabsMenuItem as i } from "./components/TabsMenutem/TabsMenuItem.es.js";
 const I = ({ items: n }) => {
   const [s, r] = m(0), c = (t) => {
     r((e) => e === t ? null : t);
   };
-  return /* @__PURE__ */ o("div", { className: i.root, children: n.map((t, e) => /* @__PURE__ */ o(
-    l,
+  return /* @__PURE__ */ o("div", { className: l.root, children: n.map((t, e) => /* @__PURE__ */ o(
+    i,
     {
       title: t.title,
       content: t.content,

package/dist/modules/HighestStandards/components/TabsMenu/components/TabsMenutem/TabsMenuItem.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../../../../utils/cn/cn.cjs.js"),a=require("../../../../../../components/Icon/Icon.cjs.js"),s=require("../../../../../../components/Icon/constants.cjs.js"),o=require("../../../../../../components/Typography/Typography.cjs.js"),n=require("./tabsMenuItem.module.css.cjs.js"),u=({title:r,content:i,isOpen:c,index:l,onClick:d})=>e.jsxs("div",{onClick:()=>d(l??0),className:n.default.root,children:[e.jsxs("div",{className:n.default.header,children:[e.jsxs("div",{className:n.default.titleWithPrefixIconWrapper,children:[e.jsx(a.Icon,{name:s.EIconName.CIRCLE_CHECK_FILL,className:n.default.prefixIcon}),e.jsx(o.Typography,{defaultVariant:"headingSm",mobileVariant:"headingXxs",children:r})]}),e.jsxs("div",{className:n.default.closeButtonWrapper,children:[e.jsx(a.Icon,{name:s.EIconName.BRACKET_LEFT}),e.jsx("div",{className:t.cn(n.default.closeButton,{[n.default.closeButtonActive]:c}),children:e.jsx(a.Icon,{name:s.EIconName.PLUS})}),e.jsx(a.Icon,{name:s.EIconName.BRACKET_RIGHT})]})]}),e.jsx("div",{className:t.cn(n.default.description,{[n.default.descriptionShow]:c}),children:e.jsx("div",{className:n.default.descriptionInner,children:e.jsx(o.Typography,{as:"p",defaultVariant:"bodySm",mobileVariant:"bodyXs",children:i})})})]});exports.TabsMenuItem=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../../../../utils/cn/cn.cjs.js"),n=require("../../../../../../src/modules/HighestStandards/components/TabsMenu/components/TabsMenutem/tabsMenuItem.module.css"),s=require("../../../../../../components/Icon/Icon.cjs.js"),c=require("../../../../../../components/Icon/constants.cjs.js"),t=require("../../../../../../components/Typography/Typography.cjs.js"),d=({title:i,content:l,isOpen:a,index:o,onClick:m})=>e.jsxs("div",{onClick:()=>m(o!=null?o:0),className:n.root,children:[e.jsxs("div",{className:n.header,children:[e.jsxs("div",{className:n.titleWithPrefixIconWrapper,children:[e.jsx(s.Icon,{name:c.EIconName.CIRCLE_CHECK_FILL,className:n.prefixIcon}),e.jsx(t.Typography,{defaultVariant:"headingSm",mobileVariant:"headingXxs",children:i})]}),e.jsxs("div",{className:n.closeButtonWrapper,children:[e.jsx(s.Icon,{name:c.EIconName.BRACKET_LEFT}),e.jsx("div",{className:r.cn(n.closeButton,{[n.closeButtonActive]:a}),children:e.jsx(s.Icon,{name:c.EIconName.PLUS})}),e.jsx(s.Icon,{name:c.EIconName.BRACKET_RIGHT})]})]}),e.jsx("div",{className:r.cn(n.description,{[n.descriptionShow]:a}),children:e.jsx("div",{className:n.descriptionInner,children:e.jsx(t.Typography,{as:"p",defaultVariant:"bodySm",mobileVariant:"bodyXs",children:l})})})]});exports.TabsMenuItem=d;

package/dist/modules/HighestStandards/components/TabsMenu/components/TabsMenutem/TabsMenuItem.es.js

@@ -1,31 +1,31 @@
 "use client";
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { cn as c } from "../../../../../../utils/cn/cn.es.js";
-import { Icon as a } from "../../../../../../components/Icon/Icon.es.js";
-import { EIconName as n } from "../../../../../../components/Icon/constants.es.js";
-import { Typography as s } from "../../../../../../components/Typography/Typography.es.js";
-import e from "./tabsMenuItem.module.css.es.js";
-const v = ({ title: t, content: m, isOpen: o, index: l, onClick: d }) => /* @__PURE__ */ r("div", { onClick: () => d(l ?? 0), className: e.root, children: [
-  /* @__PURE__ */ r("div", { className: e.header, children: [
-    /* @__PURE__ */ r("div", { className: e.titleWithPrefixIconWrapper, children: [
-      /* @__PURE__ */ i(a, { name: n.CIRCLE_CHECK_FILL, className: e.prefixIcon }),
-      /* @__PURE__ */ i(s, { defaultVariant: "headingSm", mobileVariant: "headingXxs", children: t })
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { cn as s } from "../../../../../../utils/cn/cn.es.js";
+import e from "../../../../../../modules/HighestStandards/components/TabsMenu/components/TabsMenutem/tabsMenuItem.module.css";
+import { Icon as i } from "../../../../../../components/Icon/Icon.es.js";
+import { EIconName as o } from "../../../../../../components/Icon/constants.es.js";
+import { Typography as t } from "../../../../../../components/Typography/Typography.es.js";
+const v = ({ title: m, content: l, isOpen: n, index: c, onClick: d }) => /* @__PURE__ */ a("div", { onClick: () => d(c != null ? c : 0), className: e.root, children: [
+  /* @__PURE__ */ a("div", { className: e.header, children: [
+    /* @__PURE__ */ a("div", { className: e.titleWithPrefixIconWrapper, children: [
+      /* @__PURE__ */ r(i, { name: o.CIRCLE_CHECK_FILL, className: e.prefixIcon }),
+      /* @__PURE__ */ r(t, { defaultVariant: "headingSm", mobileVariant: "headingXxs", children: m })
     ] }),
-    /* @__PURE__ */ r("div", { className: e.closeButtonWrapper, children: [
-      /* @__PURE__ */ i(a, { name: n.BRACKET_LEFT }),
-      /* @__PURE__ */ i(
+    /* @__PURE__ */ a("div", { className: e.closeButtonWrapper, children: [
+      /* @__PURE__ */ r(i, { name: o.BRACKET_LEFT }),
+      /* @__PURE__ */ r(
         "div",
         {
-          className: c(e.closeButton, {
-            [e.closeButtonActive]: o
+          className: s(e.closeButton, {
+            [e.closeButtonActive]: n
           }),
-          children: /* @__PURE__ */ i(a, { name: n.PLUS })
+          children: /* @__PURE__ */ r(i, { name: o.PLUS })
         }
       ),
-      /* @__PURE__ */ i(a, { name: n.BRACKET_RIGHT })
+      /* @__PURE__ */ r(i, { name: o.BRACKET_RIGHT })
     ] })
   ] }),
-  /* @__PURE__ */ i("div", { className: c(e.description, { [e.descriptionShow]: o }), children: /* @__PURE__ */ i("div", { className: e.descriptionInner, children: /* @__PURE__ */ i(s, { as: "p", defaultVariant: "bodySm", mobileVariant: "bodyXs", children: m }) }) })
+  /* @__PURE__ */ r("div", { className: s(e.description, { [e.descriptionShow]: n }), children: /* @__PURE__ */ r("div", { className: e.descriptionInner, children: /* @__PURE__ */ r(t, { as: "p", defaultVariant: "bodySm", mobileVariant: "bodyXs", children: l }) }) })
 ] });
 export {
   v as TabsMenuItem

package/dist/modules/HighestStandards/components/TabsMenu/components/TabsMenutem/tabsMenuItem.module.css

@@ -0,0 +1,78 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 32px 12px;
+    position: relative;
+    color: var(--color-text-primary-inverted);
+    cursor: pointer;
+}
+
+.root:not(:last-child) {
+    border-bottom: var(--border-width-sm) solid var(--border-color-alpha-white-10);
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 24px;
+}
+
+.titleWithPrefixIconWrapper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.prefixIcon {
+    color: var(--color-solar-200);
+}
+
+.closeButtonWrapper {
+    display: flex;
+    align-items: center;
+}
+
+.closeButton {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 12px;
+    transform: rotate(0);
+    transition: transform 0.3s ease-in-out;
+}
+
+.closeButton.closeButtonActive {
+    transform: rotate(45deg);
+}
+
+.description {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    width: 100%;
+    transition:
+        grid-template-rows 0.3s,
+        padding-top 0.3s;
+
+    strong,
+    b {
+        font-weight: var(--font-weight-bold);
+    }
+}
+
+.descriptionInner {
+    min-height: 0;
+}
+
+.descriptionShow {
+    grid-template-rows: 1fr;
+    padding-top: 12px;
+}
+
+@media (width <= 768px) {
+    .root {
+        padding: 20px 12px;
+    }
+}

package/dist/modules/HighestStandards/components/TabsMenu/tabsMenu.module.css

@@ -0,0 +1,14 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 8px 16px;
+    border-radius: var(--border-radius-lg);
+}
+
+@media (width <= 768px) {
+    .root {
+        padding: 8px;
+        border-radius: var(--border-radius-md);
+    }
+}

package/dist/modules/HighestStandards/highestStandards.module.css

@@ -0,0 +1,193 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    padding: 112px 60px;
+    max-width: var(--content-max-width);
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.description {
+    max-width: 690px;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 600px;
+    position: relative;
+}
+
+.imageContainer {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: var(--border-radius-xl);
+    position: absolute;
+    z-index: 10;
+    left: 0;
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    max-width: 670px;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+    transform: translate(100px, 10px);
+}
+
+.accordionBackground {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    max-width: 650px;
+    height: 600px;
+    padding-right: 90px;
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0;
+}
+
+.accordionBackground[data-gradient='orchre'] {
+    background: linear-gradient(90deg, rgba(135, 81, 45, 0) 0%, #6a3224 50%, #501a1a 100%);
+}
+
+.accordionBackground[data-gradient='indigo'] {
+    background: linear-gradient(90deg, rgba(35, 60, 82, 0) 0%, #132539 50%, #090c1b 100%);
+}
+
+.accordionBackground[data-gradient='solar'] {
+    background: linear-gradient(90deg, rgba(85, 81, 43, 0) 0%, rgba(38, 34, 9, 0.5) 50%, #060200 100%);
+}
+
+.accordionContainer {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: 420px;
+    border-radius: var(--border-radius-lg);
+    background-color: var(--color-bg-fill-alpha-white-20);
+    backdrop-filter: blur(6px);
+}
+
+@media (width <= 1400px) {
+    .image {
+        transform: translate(-40px, 20px);
+    }
+}
+
+@media (width <= 1200px) {
+    .image {
+        transform: translate(-40px, 20px);
+    }
+
+    .title {
+        text-align: center;
+    }
+}
+
+@media (width <= 1024px) {
+    .image {
+        transform: translate(-80px, 20px);
+    }
+
+    .accordionBackground {
+        padding-right: 20px;
+    }
+
+    .accordionContainer {
+        max-width: 335px;
+    }
+}
+
+@media (width <= 768px) {
+    .container {
+        gap: 40px;
+        padding: 40px 20px;
+    }
+
+    .header {
+        gap: 16px;
+    }
+
+    .description {
+        text-align: center;
+    }
+
+    .content {
+        justify-content: flex-start;
+        height: 592px;
+    }
+
+    .imageContainer {
+        justify-content: center;
+        max-height: 335px;
+        border-radius: var(--border-radius-md);
+    }
+
+    .image {
+        width: 100%;
+        height: auto;
+        transform: translate(0, 0);
+    }
+
+    .accordionBackground {
+        flex-direction: column;
+        max-width: 100%;
+        height: 356px;
+        bottom: 0;
+        padding-right: 0;
+        border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
+    }
+
+    .accordionBackground[data-gradient='orchre'] {
+        background: linear-gradient(180deg, rgba(80, 26, 26, 0) 0%, #501a1a 25%);
+    }
+
+    .accordionBackground[data-gradient='indigo'] {
+        background: linear-gradient(180deg, rgba(16, 33, 51, 0) 0%, #102133 25%);
+    }
+
+    .accordionBackground[data-gradient='solar'] {
+        background: linear-gradient(180deg, rgba(6, 2, 0, 0) 0%, #060200 25%);
+    }
+
+    .accordionContainer {
+        bottom: 12px;
+        left: 12px;
+        right: 12px;
+        width: auto;
+        max-width: 100%;
+        margin: 0 12px 12px;
+    }
+}

package/dist/modules/HowItWorks/HowItWorks.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../components/Button/Button.cjs.js"),c=require("../../components/ProgressButton/ProgressButton.cjs.js"),p=require("../../components/Typography/Typography.cjs.js"),v=require("./components/Content/Content.cjs.js"),t=require("./howItWorks.module.css.cjs.js"),y=require("../../utils/useSwiper/useSwiper.cjs.js"),d=require("../../types/analytics/analytics.cjs.js"),m=({title:u,getStartedLink:n,items:h,colorScheme:i="light"})=>{const s=y.useSwiper(),a=i==="dark"?"muted-invert":"muted",o=C=>{var r;(r=window.eventBus)==null||r.emit("analytics",{event:d.EAnalyticsEvent.ctaClicked,type:d.EAnalyticsEventType.interaction,component:"HowItWorks",payload:{link:n}})};return e.jsxs("section",{className:t.default.root,"data-color-scheme":i,children:[e.jsxs("div",{className:t.default.headerContainer,children:[e.jsx(p.Typography,{as:"h2",defaultVariant:"displayMd",mobileVariant:"headingXl",children:u}),n&&e.jsx("div",{className:t.default.desktop,children:e.jsx(l.Button,{as:"a",href:n,variant:a,size:"lg",onClick:o,children:"Get started"})}),n&&e.jsx("div",{className:t.default.mobile,children:e.jsx(l.Button,{as:"a",href:n,variant:a,size:"sm",onClick:o,children:"Get started"})}),!n&&e.jsx("div",{className:t.default.navigation,children:e.jsx(c.ProgressButton,{invert:i==="dark",left:{disabled:s.isBeginning,onClick:s.handlePrevClick},right:{disabled:s.isEnd,onClick:s.handleNextClick}})})]}),e.jsx(v.Content,{items:h,colorScheme:i,swiper:s,showBottomNav:!!n}),!n&&e.jsx("div",{className:t.default.mobileNavigation,children:e.jsx(c.ProgressButton,{invert:i==="dark",left:{disabled:s.isBeginning,onClick:s.handlePrevClick},right:{disabled:s.isEnd,onClick:s.handleNextClick}})})]})};exports.HowItWorks=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../src/modules/HowItWorks/howItWorks.module.css"),p=require("../../utils/useSwiper/useSwiper.cjs.js"),l=require("../../types/analytics/analytics.cjs.js"),v=require("../../components/Typography/Typography.cjs.js"),c=require("../../components/Button/Button.cjs.js"),d=require("../../components/ProgressButton/ProgressButton.cjs.js"),y=require("./components/Content/Content.cjs.js"),m=({title:u,getStartedLink:n,items:h,colorScheme:t="light"})=>{const s=p.useSwiper(),o=t==="dark"?"muted-invert":"muted",a=x=>{var r;(r=window.eventBus)==null||r.emit("analytics",{event:l.EAnalyticsEvent.ctaClicked,type:l.EAnalyticsEventType.interaction,component:"HowItWorks",payload:{link:n}})};return e.jsxs("section",{className:i.root,"data-color-scheme":t,children:[e.jsxs("div",{className:i.headerContainer,children:[e.jsx(v.Typography,{as:"h2",defaultVariant:"displayMd",mobileVariant:"headingXl",children:u}),n&&e.jsx("div",{className:i.desktop,children:e.jsx(c.Button,{as:"a",href:n,variant:o,size:"lg",onClick:a,children:"Get started"})}),n&&e.jsx("div",{className:i.mobile,children:e.jsx(c.Button,{as:"a",href:n,variant:o,size:"sm",onClick:a,children:"Get started"})}),!n&&e.jsx("div",{className:i.navigation,children:e.jsx(d.ProgressButton,{invert:t==="dark",left:{disabled:s.isBeginning,onClick:s.handlePrevClick},right:{disabled:s.isEnd,onClick:s.handleNextClick}})})]}),e.jsx(y.Content,{items:h,colorScheme:t,swiper:s,showBottomNav:!!n}),!n&&e.jsx("div",{className:i.mobileNavigation,children:e.jsx(d.ProgressButton,{invert:t==="dark",left:{disabled:s.isBeginning,onClick:s.handlePrevClick},right:{disabled:s.isEnd,onClick:s.handleNextClick}})})]})};exports.HowItWorks=m;

package/dist/modules/HowItWorks/HowItWorks.es.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import a from "../../modules/HowItWorks/howItWorks.module.css";
+import { useSwiper as v } from "../../utils/useSwiper/useSwiper.es.js";
+import { EAnalyticsEventType as p, EAnalyticsEvent as C } from "../../types/analytics/analytics.es.js";
+import { Typography as f } from "../../components/Typography/Typography.es.js";
 import { Button as d } from "../../components/Button/Button.es.js";
 import { ProgressButton as c } from "../../components/ProgressButton/ProgressButton.es.js";
-import { Typography as v } from "../../components/Typography/Typography.es.js";
-import { Content as p } from "./components/Content/Content.es.js";
-import a from "./howItWorks.module.css.es.js";
-import { useSwiper as C } from "../../utils/useSwiper/useSwiper.es.js";
-import { EAnalyticsEventType as f, EAnalyticsEvent as k } from "../../types/analytics/analytics.es.js";
+import { Content as k } from "./components/Content/Content.es.js";
 const P = ({ title: m, getStartedLink: e, items: h, colorScheme: t = "light" }) => {
-  const n = C(), s = t === "dark" ? "muted-invert" : "muted", l = (u) => {
+  const n = v(), s = t === "dark" ? "muted-invert" : "muted", l = (u) => {
     var o;
     (o = window.eventBus) == null || o.emit("analytics", {
-      event: k.ctaClicked,
-      type: f.interaction,
+      event: C.ctaClicked,
+      type: p.interaction,
       component: "HowItWorks",
       payload: {
         link: e
@@ -21,7 +21,7 @@ const P = ({ title: m, getStartedLink: e, items: h, colorScheme: t = "light" })
   };
   return /* @__PURE__ */ r("section", { className: a.root, "data-color-scheme": t, children: [
     /* @__PURE__ */ r("div", { className: a.headerContainer, children: [
-      /* @__PURE__ */ i(v, { as: "h2", defaultVariant: "displayMd", mobileVariant: "headingXl", children: m }),
+      /* @__PURE__ */ i(f, { as: "h2", defaultVariant: "displayMd", mobileVariant: "headingXl", children: m }),
       e && /* @__PURE__ */ i("div", { className: a.desktop, children: /* @__PURE__ */ i(
         d,
         {
@@ -59,7 +59,7 @@ const P = ({ title: m, getStartedLink: e, items: h, colorScheme: t = "light" })
         }
       ) })
     ] }),
-    /* @__PURE__ */ i(p, { items: h, colorScheme: t, swiper: n, showBottomNav: !!e }),
+    /* @__PURE__ */ i(k, { items: h, colorScheme: t, swiper: n, showBottomNav: !!e }),
     !e && /* @__PURE__ */ i("div", { className: a.mobileNavigation, children: /* @__PURE__ */ i(
       c,
       {

package/dist/modules/HowItWorks/components/Content/Content.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("../../../../node_modules/swiper/modules/navigation.cjs.js"),s=require("../../../../node_modules/swiper/swiper-react.cjs.js"),q=require("../../../../components/ProgressButton/ProgressButton.cjs.js"),t=require("../../../../components/Typography/Typography.cjs.js");;/* empty css                                              */;/* empty css                                                          */;/* empty css                                                          */const a=require("./content.module.css.cjs.js"),w=[x.default],N=({items:l,colorScheme:n,showBottomNav:d,swiper:o})=>{const{isEnd:c,isBeginning:u,hideNav:h,handleSlideChange:g,handlePrevClick:p,handleNextClick:m,onSwiperInit:f,handleSwiperResize:S,handleReachEnd:j,handleReachBeginning:y,handleSlideTo:v}=o;return e.jsxs("div",{className:a.default.root,children:[e.jsx("div",{className:a.default.carouselArea,"data-color-scheme":n,children:e.jsx(s.Swiper,{onSwiper:f,onResize:S,onSlideChange:g,onReachEnd:j,onReachBeginning:y,modules:w,spaceBetween:0,slidesPerView:"auto",className:a.default.swiper,children:l.map((i,r)=>e.jsx(s.SwiperSlide,{className:a.default.swiperSlide,"data-color-scheme":n,children:e.jsxs("div",{className:a.default.card,onClick:()=>v(r),children:[e.jsxs("div",{className:a.default.cardHeader,children:[e.jsx("img",{src:i.image,className:a.default.cardImage,alt:i.title}),e.jsx(t.Typography,{as:"h3",defaultVariant:"headingLg",mobileVariant:"headingXs",children:i.title})]}),e.jsx(t.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",children:i.description})]})},`${i.title}_${r}`))})}),!h&&d&&e.jsx("div",{className:a.default.navigation,children:e.jsx(q.ProgressButton,{invert:n==="dark",left:{disabled:u,onClick:p},right:{disabled:c,onClick:m}})})]})};exports.Content=N;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("swiper/modules"),r=require("swiper/react");;/* empty css                                              */;/* empty css                                                          */;/* empty css                                                          */const i=require("../../../../src/modules/HowItWorks/components/Content/content.module.css"),l=require("../../../../components/Typography/Typography.cjs.js"),q=require("../../../../components/ProgressButton/ProgressButton.cjs.js"),w=[N.Navigation],C=({items:t,colorScheme:a,showBottomNav:d,swiper:o})=>{const{isEnd:c,isBeginning:h,hideNav:g,handleSlideChange:u,handlePrevClick:p,handleNextClick:m,onSwiperInit:j,handleSwiperResize:y,handleReachEnd:S,handleReachBeginning:x,handleSlideTo:v}=o;return e.jsxs("div",{className:i.root,children:[e.jsx("div",{className:i.carouselArea,"data-color-scheme":a,children:e.jsx(r.Swiper,{onSwiper:j,onResize:y,onSlideChange:u,onReachEnd:S,onReachBeginning:x,modules:w,spaceBetween:0,slidesPerView:"auto",className:i.swiper,children:t.map((n,s)=>e.jsx(r.SwiperSlide,{className:i.swiperSlide,"data-color-scheme":a,children:e.jsxs("div",{className:i.card,onClick:()=>v(s),children:[e.jsxs("div",{className:i.cardHeader,children:[e.jsx("img",{src:n.image,className:i.cardImage,alt:n.title}),e.jsx(l.Typography,{as:"h3",defaultVariant:"headingLg",mobileVariant:"headingXs",children:n.title})]}),e.jsx(l.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",children:n.description})]})},`${n.title}_${s}`))})}),!g&&d&&e.jsx("div",{className:i.navigation,children:e.jsx(q.ProgressButton,{invert:a==="dark",left:{disabled:h,onClick:p},right:{disabled:c,onClick:m}})})]})};exports.Content=C;

package/dist/modules/HowItWorks/components/Content/Content.es.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import C from "../../../../node_modules/swiper/modules/navigation.es.js";
-import { Swiper as R, SwiperSlide as b } from "../../../../node_modules/swiper/swiper-react.es.js";
-import { ProgressButton as k } from "../../../../components/ProgressButton/ProgressButton.es.js";
-import { Typography as d } from "../../../../components/Typography/Typography.es.js";
+import { Navigation as C } from "swiper/modules";
+import { Swiper as R, SwiperSlide as b } from "swiper/react";
 /* empty css                                            */
 /* empty css                                                        */
 /* empty css                                                        */
-import i from "./content.module.css.es.js";
+import i from "../../../../modules/HowItWorks/components/Content/content.module.css";
+import { Typography as d } from "../../../../components/Typography/Typography.es.js";
+import { ProgressButton as k } from "../../../../components/ProgressButton/ProgressButton.es.js";
 const y = [C], T = ({ items: s, colorScheme: n, showBottomNav: o, swiper: t }) => {
   const {
     isEnd: c,

package/dist/modules/HowItWorks/components/Content/content.module.css

@@ -0,0 +1,126 @@
+.root {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-40);
+}
+
+.carouselArea {
+    border-top: var(--border-width-sm) solid var(--border-color-light);
+    border-bottom: var(--border-width-sm) solid var(--border-color-light);
+}
+
+.carouselArea[data-color-scheme='dark'] {
+    border-top: var(--border-width-sm) solid var(--border-color-alpha-white-20);
+    border-bottom: var(--border-width-sm) solid var(--border-color-alpha-white-20);
+}
+
+.swiper {
+    width: 100%;
+}
+
+.swiperSlide {
+    width: auto;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.swiperSlide:first-child {
+    padding-left: var(--spacing-80);
+}
+
+.swiperSlide:last-child {
+    padding-right: var(--spacing-80);
+}
+
+.card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 540px;
+    min-width: 540px;
+    gap: var(--spacing-32);
+    padding: var(--spacing-56);
+}
+
+.swiperSlide::after {
+    content: '';
+    position: absolute;
+    top: var(--spacing-24);
+    right: 0;
+    bottom: var(--spacing-24);
+    width: var(--border-width-sm);
+    background-color: var(--color-bg-fill-alpha-black-10);
+    padding: var(--spacing-24) 0;
+}
+
+.swiperSlide[data-color-scheme='dark']::after {
+    background-color: var(--color-bg-fill-alpha-white-20);
+}
+
+.swiperSlide:last-child::after {
+    width: 0;
+}
+
+.cardHeader {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    flex-wrap: nowrap;
+    gap: var(--spacing-16);
+}
+
+.cardImage {
+    width: 180px;
+    min-width: 180px;
+    height: 240px;
+    aspect-ratio: 3 / 4;
+    border-radius: var(--border-radius-full);
+    object-fit: cover;
+}
+
+.navigation {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.mobile {
+    display: none;
+}
+
+@media screen and (width <= 768px) {
+    .swiperSlide:first-child {
+        padding-left: var(--spacing-20);
+    }
+
+    .swiperSlide:last-child {
+        padding-right: var(--spacing-20);
+    }
+
+    .card {
+        width: 295px;
+        min-width: 295px;
+        padding: var(--spacing-24);
+        gap: var(--spacing-24);
+    }
+
+    .cardHeader {
+        gap: var(--spacing-12);
+    }
+
+    .cardImage {
+        width: 102px;
+        min-width: 102px;
+        height: 136px;
+    }
+
+    .mobile {
+        display: inline-flex;
+    }
+
+    .desktop {
+        display: none;
+    }
+}

package/dist/modules/HowItWorks/howItWorks.module.css

@@ -0,0 +1,64 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: var(--spacing-120) 0;
+    gap: var(--spacing-64);
+}
+
+.root[data-color-scheme='dark'] {
+    background-color: var(--color-bg-fill-primary);
+    color: var(--color-text-primary-inverted);
+}
+
+
+.headerContainer {
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: 0 var(--spacing-120);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: var(--spacing-24);
+    overflow: hidden;
+}
+
+.mobile {
+    display: none;
+}
+
+.mobileNavigation {
+    display: none;
+}
+
+@media screen and (width <= 768px) {
+    .root {
+        padding: var(--spacing-64) var(--spacing-20);
+        gap: var(--spacing-40);
+    }
+
+    .headerContainer {
+        padding: 0 var(--spacing-20);
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .navigation {
+        display: none;
+    }
+
+    .mobileNavigation {
+        display: inline-flex;
+    }
+
+    .mobile {
+        display: inline-flex;
+    }
+
+    .desktop {
+        display: none;
+    }
+}

package/dist/modules/ImageWithBenefits/ImageWithBenefits.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("../../components/TypeBadge/TypeBadge.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),a=require("./imageWithBenefits.module.css.cjs.js"),f=({image:s,label:i,title:o,benefits:r,benefitsColor:d,mobileLabelColor:n,mobileTitleColor:c,mobileBenefitsColor:m,mobileImage:u})=>e.jsx("section",{className:a.default.root,children:e.jsxs("div",{className:a.default.container,children:[e.jsxs("div",{className:a.default.imageContainer,children:[e.jsx("img",{src:s,alt:"background image",className:a.default.image}),e.jsx("img",{src:u||s,alt:"mobile background image",className:a.default.mobileImage})]}),e.jsxs("div",{className:a.default.content,"data-label-color":i.color,"data-mobile-label-color":n,"data-title-color":o.color,"data-mobile-title-color":c,"data-benefits-color":d,"data-mobile-benefits-color":m,children:[e.jsx(l.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.default.label,children:i.text}),e.jsx(l.Typography,{as:"h2",defaultVariant:"headingXl",mobileVariant:"headingMd",className:a.default.title,children:o.text}),e.jsx("div",{className:a.default.benefitContainer,children:r.map(t=>e.jsxs("div",{className:a.default.benefitItem,children:[e.jsx(g.TypeBadge,{type:t.badge}),e.jsx(l.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",className:a.default.benefitText,children:t.text})]},t.text))})]})]})});exports.ImageWithBenefits=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/ImageWithBenefits/imageWithBenefits.module.css"),t=require("../../components/Typography/Typography.cjs.js"),p=require("../../components/TypeBadge/TypeBadge.cjs.js"),b=({image:i,label:l,title:o,benefits:r,benefitsColor:n,mobileLabelColor:c,mobileTitleColor:d,mobileBenefitsColor:m,mobileImage:g})=>e.jsx("section",{className:a.root,children:e.jsxs("div",{className:a.container,children:[e.jsxs("div",{className:a.imageContainer,children:[e.jsx("img",{src:i,alt:"background image",className:a.image}),e.jsx("img",{src:g||i,alt:"mobile background image",className:a.mobileImage})]}),e.jsxs("div",{className:a.content,"data-label-color":l.color,"data-mobile-label-color":c,"data-title-color":o.color,"data-mobile-title-color":d,"data-benefits-color":n,"data-mobile-benefits-color":m,children:[e.jsx(t.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.label,children:l.text}),e.jsx(t.Typography,{as:"h2",defaultVariant:"headingXl",mobileVariant:"headingMd",className:a.title,children:o.text}),e.jsx("div",{className:a.benefitContainer,children:r.map(s=>e.jsxs("div",{className:a.benefitItem,children:[e.jsx(p.TypeBadge,{type:s.badge}),e.jsx(t.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",className:a.benefitText,children:s.text})]},s.text))})]})]})});exports.ImageWithBenefits=b;