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

package/dist/modules/IngredientHighlight/components/Ingredient/ingredient.module.css

@@ -0,0 +1,41 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 24px 0;
+    border-bottom: var(--border-width-sm) solid var(--border-color-light);
+    cursor: pointer;
+}
+
+.rootOpened {
+    border-color: var(--border-color-dark);
+}
+
+.header {
+    display: flex;
+    align-items: center;
+}
+
+.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: 16px;
+}

package/dist/modules/IngredientHighlight/ingredientHighlight.module.css

@@ -0,0 +1,73 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    width: 100%;
+    gap: 64px;
+    padding: 120px 180px;
+    max-width: var(--content-max-width);
+}
+
+.imageContainer {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 667px;
+    max-height: 500px;
+    overflow: hidden;
+    border-radius: var(--border-radius-lg);
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.ingredients {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 349px;
+}
+
+@media (width <= 1024px) {
+    .container {
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 24px;
+        padding: 120px 60px;
+    }
+
+    .ingredients {
+        max-width: 667px;
+    }
+}
+
+@media (width <= 768px) {
+    .container {
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 24px;
+        padding: 64px 20px;
+    }
+
+    .imageContainer {
+        max-height: 250px;
+        border-radius: var(--border-radius-md);
+    }
+
+    .ingredients {
+        max-width: 100%;
+    }
+}

package/dist/modules/LongevityPathways/LongevityPathways.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),r=require("../../components/ComplexImageCarousel/ComplexImageCarousel.cjs.js"),t=require("./longevityPathways.module.css.cjs.js"),n=require("../../utils/cn/cn.cjs.js"),c=({view:l,label:a,title:i,carousel:s})=>e.jsxs("section",{className:t.default.root,children:[e.jsx("div",{className:n.cn(t.default.header,{[t.default.complex]:l==="complex"}),children:e.jsx(o.HighlightedTitle,{title:i,label:a,className:t.default.title,defaultVariant:"displayMd",mobileVariant:"headingLg"})}),e.jsx(r.ComplexImageCarousel,{images:s,view:l})]});exports.LongevityPathways=c;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../src/modules/LongevityPathways/longevityPathways.module.css"),a=require("../../utils/cn/cn.cjs.js"),n=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),r=require("../../components/ComplexImageCarousel/ComplexImageCarousel.cjs.js"),c=({view:s,label:i,title:l,carousel:o})=>e.jsxs("section",{className:t.root,children:[e.jsx("div",{className:a.cn(t.header,{[t.complex]:s==="complex"}),children:e.jsx(n.HighlightedTitle,{title:l,label:i,className:t.title,defaultVariant:"displayMd",mobileVariant:"headingLg"})}),e.jsx(r.ComplexImageCarousel,{images:o,view:s})]});exports.LongevityPathways=c;

package/dist/modules/LongevityPathways/LongevityPathways.es.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { HighlightedTitle as s } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { ComplexImageCarousel as l } from "../../components/ComplexImageCarousel/ComplexImageCarousel.es.js";
-import e from "./longevityPathways.module.css.es.js";
-import { cn as c } from "../../utils/cn/cn.es.js";
+import e from "../../modules/LongevityPathways/longevityPathways.module.css";
+import { cn as s } from "../../utils/cn/cn.es.js";
+import { HighlightedTitle as l } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { ComplexImageCarousel as c } from "../../components/ComplexImageCarousel/ComplexImageCarousel.es.js";
 const f = ({ view: t, label: i, title: r, carousel: a }) => /* @__PURE__ */ m("section", { className: e.root, children: [
   /* @__PURE__ */ o(
     "div",
     {
-      className: c(e.header, {
+      className: s(e.header, {
         [e.complex]: t === "complex"
       }),
       children: /* @__PURE__ */ o(
-        s,
+        l,
         {
           title: r,
           label: i,
@@ -23,7 +23,7 @@ const f = ({ view: t, label: i, title: r, carousel: a }) => /* @__PURE__ */ m("s
       )
     }
   ),
-  /* @__PURE__ */ o(l, { images: a, view: t })
+  /* @__PURE__ */ o(c, { images: a, view: t })
 ] });
 export {
   f as LongevityPathways

package/dist/modules/LongevityPathways/longevityPathways.module.css

@@ -0,0 +1,39 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacing-120) 0;
+}
+
+.header {
+    white-space: pre-line;
+    position: relative;
+    padding: 0 var(--spacing-120);
+    margin: 0 auto var(--spacing-20);
+    max-width: var(--content-max-width);
+    text-wrap: pretty;
+
+    @media (width <= 768px) {
+        padding: 0;
+        margin: 0 auto var(--spacing-16);
+        width: 90%;
+    }
+}
+
+.title {
+    max-width: 90ch;
+
+    @media (width <= 768px) {
+        max-width: 100%;
+    }
+}
+
+.complex {
+    padding: 0;
+    width: 82vw;
+    h2 {
+        margin: 0;
+    }
+    @media (width <= 768px) {
+        width: 90vw;
+    }
+}

package/dist/modules/OptimalHealth/OptimalHealth.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../components/Button/Button.cjs.js"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),c=require("../../components/Typography/Typography.cjs.js"),s=require("../../utils/cn/cn.cjs.js"),d=require("./components/ClockImages/ClockImages.cjs.js"),t=require("./optimalHealth.module.css.cjs.js"),u=({title:l,description:r,link:a,images:n})=>e.jsx("section",{className:t.default.root,children:e.jsx("div",{className:t.default.container,children:e.jsxs("div",{className:t.default.wrapper,children:[e.jsx(d.ClockImages,{images:n}),e.jsxs("div",{className:t.default.content,children:[e.jsx(o.HighlightedTitle,{title:l,className:t.default.title,defaultVariant:"displaySm",mobileVariant:"headingLg"}),e.jsx(c.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",className:t.default.description,children:r}),e.jsx("div",{className:s.cn(t.default.actions,t.default.desktop),children:e.jsx(i.Button,{as:"a",variant:"primary",size:"lg",href:a,children:"LEARN MORE"})}),e.jsx("div",{className:s.cn(t.default.actions,t.default.mobile),children:e.jsx(i.Button,{as:"a",variant:"primary",size:"sm",href:a,children:"LEARN MORE"})})]})]})})});exports.OptimalHealth=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn/cn.cjs.js"),s=require("../../src/modules/OptimalHealth/optimalHealth.module.css"),l=require("./components/ClockImages/ClockImages.cjs.js"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),d=require("../../components/Typography/Typography.cjs.js"),a=require("../../components/Button/Button.cjs.js"),m=({title:n,description:r,link:i,images:c})=>e.jsx("section",{className:s.root,children:e.jsx("div",{className:s.container,children:e.jsxs("div",{className:s.wrapper,children:[e.jsx(l.ClockImages,{images:c}),e.jsxs("div",{className:s.content,children:[e.jsx(o.HighlightedTitle,{title:n,className:s.title,defaultVariant:"displaySm",mobileVariant:"headingLg"}),e.jsx(d.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",className:s.description,children:r}),e.jsx("div",{className:t.cn(s.actions,s.desktop),children:e.jsx(a.Button,{as:"a",variant:"primary",size:"lg",href:i,children:"LEARN MORE"})}),e.jsx("div",{className:t.cn(s.actions,s.mobile),children:e.jsx(a.Button,{as:"a",variant:"primary",size:"sm",href:i,children:"LEARN MORE"})})]})]})})});exports.OptimalHealth=m;

package/dist/modules/OptimalHealth/OptimalHealth.es.js

@@ -1,15 +1,15 @@
 import { jsx as i, jsxs as e } from "react/jsx-runtime";
-import { Button as t } from "../../components/Button/Button.es.js";
-import { HighlightedTitle as n } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as c } from "../../components/Typography/Typography.es.js";
-import { cn as s } from "../../utils/cn/cn.es.js";
-import { ClockImages as d } from "./components/ClockImages/ClockImages.es.js";
-import a from "./optimalHealth.module.css.es.js";
+import { cn as t } from "../../utils/cn/cn.es.js";
+import a from "../../modules/OptimalHealth/optimalHealth.module.css";
+import { ClockImages as n } from "./components/ClockImages/ClockImages.es.js";
+import { HighlightedTitle as c } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as d } from "../../components/Typography/Typography.es.js";
+import { Button as s } from "../../components/Button/Button.es.js";
 const b = ({ title: o, description: m, link: r, images: l }) => /* @__PURE__ */ i("section", { className: a.root, children: /* @__PURE__ */ i("div", { className: a.container, children: /* @__PURE__ */ e("div", { className: a.wrapper, children: [
-  /* @__PURE__ */ i(d, { images: l }),
+  /* @__PURE__ */ i(n, { images: l }),
   /* @__PURE__ */ e("div", { className: a.content, children: [
     /* @__PURE__ */ i(
-      n,
+      c,
       {
         title: o,
         className: a.title,
@@ -18,7 +18,7 @@ const b = ({ title: o, description: m, link: r, images: l }) => /* @__PURE__ */
       }
     ),
     /* @__PURE__ */ i(
-      c,
+      d,
       {
         as: "p",
         defaultVariant: "bodyLg",
@@ -27,8 +27,8 @@ const b = ({ title: o, description: m, link: r, images: l }) => /* @__PURE__ */
         children: m
       }
     ),
-    /* @__PURE__ */ i("div", { className: s(a.actions, a.desktop), children: /* @__PURE__ */ i(t, { as: "a", variant: "primary", size: "lg", href: r, children: "LEARN MORE" }) }),
-    /* @__PURE__ */ i("div", { className: s(a.actions, a.mobile), children: /* @__PURE__ */ i(t, { as: "a", variant: "primary", size: "sm", href: r, children: "LEARN MORE" }) })
+    /* @__PURE__ */ i("div", { className: t(a.actions, a.desktop), children: /* @__PURE__ */ i(s, { as: "a", variant: "primary", size: "lg", href: r, children: "LEARN MORE" }) }),
+    /* @__PURE__ */ i("div", { className: t(a.actions, a.mobile), children: /* @__PURE__ */ i(s, { as: "a", variant: "primary", size: "sm", href: r, children: "LEARN MORE" }) })
   ] })
 ] }) }) });
 export {

package/dist/modules/OptimalHealth/components/ClockImages/ClockImages.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),g=require("../../../../node_modules/gsap/index.cjs.js"),m=require("react"),n=require("../../../../node_modules/gsap/ScrollTrigger.cjs.js"),i=require("../../../../utils/cn/cn.cjs.js"),e=require("./clockImages.module.css.cjs.js");g.gsap.registerPlugin(n.ScrollTrigger);const o=[{key:"smallSquareImage1",className:e.default.smallSquareImage,to:{x:100,y:60}},{key:"rectImage2",className:e.default.rectImage,to:{x:70,y:70}},{key:"smallSquareImage3",className:e.default.smallSquareImage,to:{x:40,y:60}},{key:"largeSquareImage4",className:e.default.largeSquareImage,to:{x:-110,y:55}},{key:"rectImage5",className:e.default.rectImage,to:{x:-150,y:69}},{key:"smallSquareImage6",className:e.default.smallSquareImage,to:{x:-100,y:9}},{key:"rectImage7",className:e.default.rectImage,to:{x:-65,y:-100}},{key:"smallSquareImage8",className:e.default.smallSquareImage,to:{x:50,y:-100}},{key:"rectImage9",className:e.default.rectImage,to:{x:50,y:-50}},{key:"largeSquareImage10",className:e.default.largeSquareImage,to:{x:56,y:13}}],y=({images:l})=>{const r=m.useRef(null);return m.useEffect(()=>{r.current&&o.forEach(({key:a,to:t})=>{var c;const s=(c=r.current)==null?void 0:c.querySelector(`[data-ohealth-image-key="${a}"]`);s&&g.gsap.fromTo(s,{x:0,y:0},{x:t.x,y:t.y,duration:5,ease:"power2.out",scrollTrigger:{trigger:r.current,start:"top 80%",end:"+=500",once:!0,scrub:!1,toggleActions:"play none none reverse"}})})},[l]),u.jsx("div",{ref:r,className:e.default.root,children:o.map(({key:a,className:t})=>u.jsx("img",{src:l[a],className:i.cn(e.default.image,t,e.default[a]),"data-ohealth-image-key":a,alt:a},a))})};exports.ClockImages=y;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),u=require("gsap"),g=require("react"),n=require("../../../../node_modules/gsap/ScrollTrigger.cjs.js"),i=require("../../../../utils/cn/cn.cjs.js"),e=require("../../../../src/modules/OptimalHealth/components/ClockImages/clockImages.module.css");u.gsap.registerPlugin(n.ScrollTrigger);const o=[{key:"smallSquareImage1",className:e.smallSquareImage,to:{x:100,y:60}},{key:"rectImage2",className:e.rectImage,to:{x:70,y:70}},{key:"smallSquareImage3",className:e.smallSquareImage,to:{x:40,y:60}},{key:"largeSquareImage4",className:e.largeSquareImage,to:{x:-110,y:55}},{key:"rectImage5",className:e.rectImage,to:{x:-150,y:69}},{key:"smallSquareImage6",className:e.smallSquareImage,to:{x:-100,y:9}},{key:"rectImage7",className:e.rectImage,to:{x:-65,y:-100}},{key:"smallSquareImage8",className:e.smallSquareImage,to:{x:50,y:-100}},{key:"rectImage9",className:e.rectImage,to:{x:50,y:-50}},{key:"largeSquareImage10",className:e.largeSquareImage,to:{x:56,y:13}}],y=({images:t})=>{const r=g.useRef(null);return g.useEffect(()=>{r.current&&o.forEach(({key:a,to:s})=>{var c;const l=(c=r.current)==null?void 0:c.querySelector(`[data-ohealth-image-key="${a}"]`);l&&u.gsap.fromTo(l,{x:0,y:0},{x:s.x,y:s.y,duration:5,ease:"power2.out",scrollTrigger:{trigger:r.current,start:"top 80%",end:"+=500",once:!0,scrub:!1,toggleActions:"play none none reverse"}})})},[t]),m.jsx("div",{ref:r,className:e.root,children:o.map(({key:a,className:s})=>m.jsx("img",{src:t[a],className:i.cn(e.image,s,e[a]),"data-ohealth-image-key":a,alt:a},a))})};exports.ClockImages=y;

package/dist/modules/OptimalHealth/components/ClockImages/ClockImages.es.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
-import { gsap as g } from "../../../../node_modules/gsap/index.es.js";
+import { gsap as g } from "gsap";
 import { useRef as u, useEffect as n } from "react";
-import { ScrollTrigger as i } from "../../../../node_modules/gsap/ScrollTrigger.es.js";
-import { cn as y } from "../../../../utils/cn/cn.es.js";
-import e from "./clockImages.module.css.es.js";
-g.registerPlugin(i);
+import { ScrollTrigger as y } from "../../../../node_modules/gsap/ScrollTrigger.es.js";
+import { cn as i } from "../../../../utils/cn/cn.es.js";
+import e from "../../../../modules/OptimalHealth/components/ClockImages/clockImages.module.css";
+g.registerPlugin(y);
 const c = [
   { key: "smallSquareImage1", className: e.smallSquareImage, to: { x: 100, y: 60 } },
   { key: "rectImage2", className: e.rectImage, to: { x: 70, y: 70 } },
@@ -17,7 +17,7 @@ const c = [
   { key: "smallSquareImage8", className: e.smallSquareImage, to: { x: 50, y: -100 } },
   { key: "rectImage9", className: e.rectImage, to: { x: 50, y: -50 } },
   { key: "largeSquareImage10", className: e.largeSquareImage, to: { x: 56, y: 13 } }
-], N = ({ images: t }) => {
+], p = ({ images: t }) => {
   const r = u(null);
   return n(() => {
     r.current && c.forEach(({ key: a, to: m }) => {
@@ -46,7 +46,7 @@ const c = [
     "img",
     {
       src: t[a],
-      className: y(e.image, m, e[a]),
+      className: i(e.image, m, e[a]),
       "data-ohealth-image-key": a,
       alt: a
     },
@@ -54,5 +54,5 @@ const c = [
   )) });
 };
 export {
-  N as ClockImages
+  p as ClockImages
 };

package/dist/modules/OptimalHealth/components/ClockImages/clockImages.module.css

@@ -0,0 +1,150 @@
+.root {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    min-width: 900px;
+    max-height: var(--content-max-height);
+    aspect-ratio: 1 / 1.5;
+}
+
+.image {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    object-fit: cover;
+    box-shadow:
+        0 20px 25px -5px var(--color-bg-fill-alpha-black-10),
+        0 8px 10px -6px var(--color-bg-fill-alpha-black-10);
+}
+
+.smallSquareImage {
+    width: 140px;
+    height: 140px;
+    border-radius: var(--border-radius-md);
+}
+
+.largeSquareImage {
+    width: 290px;
+    height: 290px;
+    border-radius: var(--border-radius-md);
+}
+
+.rectImage {
+    width: 290px;
+    height: 146px;
+    border-radius: var(--border-radius-lg);
+}
+
+.smallSquareImage1 {
+    top: 5%;
+    left: 38%;
+}
+.rectImage2 {
+    top: 7%;
+    left: 57%;
+}
+.smallSquareImage3 {
+    top: 22%;
+    left: 81%;
+}
+.largeSquareImage4 {
+    top: 40%;
+    left: 80%;
+}
+.rectImage5 {
+    top: 70%;
+    left: 75%;
+}
+.smallSquareImage6 {
+    top: 75%;
+    left: 52%;
+}
+.rectImage7 {
+    top: 80%;
+    left: 20%;
+}
+.smallSquareImage8 {
+    top: 65%;
+    left: 15%;
+}
+.rectImage9 {
+    top: 45%;
+    left: 0;
+}
+.largeSquareImage10 {
+    top: 12%;
+    left: 10%;
+}
+
+@media (width <= 1200px) and (width > 768px) {
+    .smallSquareImage {
+        width: 110px;
+        height: 110px;
+        border-radius: var(--border-radius-sm);
+    }
+
+    .largeSquareImage {
+        width: 177px;
+        height: 177px;
+    }
+
+    .rectImage {
+        width: 224px;
+        height: 113px;
+        border-radius: var(--border-radius-md);
+    }
+
+    .largeSquareImage4 {
+        top: 40%;
+        left: 90%;
+    }
+
+    .smallSquareImage8 {
+        top: 65%;
+        left: 10%;
+    }
+
+    .rectImage9 {
+        top: 45%;
+        left: -10%;
+    }
+}
+
+@media (width <= 768px) {
+    .smallSquareImage {
+        width: 80px;
+        height: 80px;
+        border-radius: var(--border-radius-sm);
+    }
+
+    .largeSquareImage {
+        width: 164px;
+        height: 164px;
+    }
+
+    .rectImage {
+        width: 159px;
+        height: 80px;
+        border-radius: var(--border-radius-sm);
+    }
+
+    .rectImage5 {
+        top: 70%;
+        left: 78%;
+    }
+
+    .smallSquareImage6 {
+        top: 80%;
+        left: 58%;
+    }
+
+    .rectImage7 {
+        top: 90%;
+        left: 30%;
+    }
+
+    .largeSquareImage10 {
+        top: 12%;
+        left: 14%;
+    }
+}

package/dist/modules/OptimalHealth/optimalHealth.module.css

@@ -0,0 +1,86 @@
+.root {
+    width: 100%;
+}
+
+.wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    max-width: var(--content-max-width);
+    max-height: var(--content-max-height);
+    aspect-ratio: 1 / 1.5;
+    display: grid;
+    place-items: center;
+}
+
+.container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    max-width: var(--content-max-width);
+    max-height: var(--content-max-height);
+    aspect-ratio: 1 / 1.5;
+    margin: 0 auto;
+}
+
+.content {
+    width: 100%;
+    max-width: 488px;
+    padding: 0 var(--spacing-20);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    z-index: 1;
+}
+
+.description {
+    margin-top: var(--spacing-20);
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: var(--spacing-32);
+}
+
+.mobile {
+    display: none;
+}
+
+@media (width <= 1200px) and (width > 768px) {
+    .content {
+        padding: 0;
+        max-width: 450px;
+    }
+}
+
+@media (width <= 768px) {
+    .root {
+        height: 726px;
+    }
+
+    .content {
+        padding: 0 var(--spacing-32);
+        max-width: 375px;
+    }
+
+    .description {
+        margin-top: var(--spacing-12);
+    }
+
+    .actions {
+        margin-top: var(--spacing-12);
+    }
+
+    .mobile {
+        display: flex;
+    }
+
+    .desktop {
+        display: none;
+    }
+}

package/dist/modules/OurProcess/OurProcess.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../components/StepsCarousel/StepsCarousel.cjs.js"),a=require("../../components/Button/Button.cjs.js"),d=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),t=require("./ourProcess.module.css.cjs.js"),c=({title:i,label:n,colorScheme:s,steps:o,buttonLabel:u,buttonLink:r})=>e.jsx("section",{className:t.default.root,"data-scheme":s,children:e.jsxs("div",{className:t.default.container,children:[e.jsxs("div",{className:t.default.header,children:[e.jsx(d.HighlightedTitle,{title:i,label:n,colorScheme:s}),r&&e.jsx("div",{children:e.jsx(a.Button,{as:"a",variant:s==="light"?"muted":"muted-invert",size:"lg",href:r,children:u||"How it works"})})]}),e.jsx(l.StepsCarousel,{steps:o,colorScheme:s})]})});exports.OurProcess=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../src/modules/OurProcess/ourProcess.module.css"),a=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),u=require("../../components/Button/Button.cjs.js"),c=require("../../components/StepsCarousel/StepsCarousel.cjs.js"),d=({title:r,label:n,colorScheme:s,steps:o,buttonLabel:l,buttonLink:i})=>e.jsx("section",{className:t.root,"data-scheme":s,children:e.jsxs("div",{className:t.container,children:[e.jsxs("div",{className:t.header,children:[e.jsx(a.HighlightedTitle,{title:r,label:n,colorScheme:s}),i&&e.jsx("div",{children:e.jsx(u.Button,{as:"a",variant:s==="light"?"muted":"muted-invert",size:"lg",href:i,children:l||"How it works"})})]}),e.jsx(c.StepsCarousel,{steps:o,colorScheme:s})]})});exports.OurProcess=d;

package/dist/modules/OurProcess/OurProcess.es.js

@@ -1,11 +1,11 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { StepsCarousel as l } from "../../components/StepsCarousel/StepsCarousel.es.js";
+import t from "../../modules/OurProcess/ourProcess.module.css";
+import { HighlightedTitle as l } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { Button as n } from "../../components/Button/Button.es.js";
-import { HighlightedTitle as h } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import t from "./ourProcess.module.css.es.js";
+import { StepsCarousel as h } from "../../components/StepsCarousel/StepsCarousel.es.js";
 const g = ({ title: a, label: o, colorScheme: i, steps: d, buttonLabel: m, buttonLink: e }) => /* @__PURE__ */ r("section", { className: t.root, "data-scheme": i, children: /* @__PURE__ */ s("div", { className: t.container, children: [
   /* @__PURE__ */ s("div", { className: t.header, children: [
-    /* @__PURE__ */ r(h, { title: a, label: o, colorScheme: i }),
+    /* @__PURE__ */ r(l, { title: a, label: o, colorScheme: i }),
     e && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
       n,
       {
@@ -17,7 +17,7 @@ const g = ({ title: a, label: o, colorScheme: i, steps: d, buttonLabel: m, butto
       }
     ) })
   ] }),
-  /* @__PURE__ */ r(l, { steps: d, colorScheme: i })
+  /* @__PURE__ */ r(h, { steps: d, colorScheme: i })
 ] }) });
 export {
   g as OurProcess

package/dist/modules/OurProcess/ourProcess.module.css

@@ -0,0 +1,44 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.root[data-scheme='light'] {
+    background-color: var(--color-bg-base-light);
+    color: var(--color-text-primary);
+}
+
+.root[data-scheme='dark'] {
+    background-color: var(--color-bg-base-dark);
+    color: var(--color-text-primary-inverted);
+}
+
+.container {
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: var(--spacing-120) 0;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 32px;
+    padding: 0 var(--spacing-120);
+    align-items: flex-end;
+}
+
+@media screen and (width <= 768px) {
+    .container {
+        padding: var(--spacing-64) 0;
+    }
+
+    .header {
+        margin-bottom: var(--spacing-40);
+        padding: 0 var(--spacing-20);
+        align-items: center;
+        text-align: center;
+    }
+}

package/dist/modules/PairedProducts/PairedProducts.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../components/Button/Button.cjs.js"),c=require("../../components/Typography/Typography.cjs.js"),n=require("../../components/ProductPairs/ProductPairs.cjs.js"),t=require("../../utils/cn/cn.cjs.js"),r=require("./pairedProducts.module.css.cjs.js"),o=({title:d,button:a,productCards:i})=>e.jsx("section",{className:r.default.root,children:e.jsxs("div",{className:r.default.container,children:[e.jsxs("div",{className:r.default.header,children:[e.jsx(c.Typography,{as:"h2",defaultVariant:"displaySm",mobileVariant:"headingLg",children:d}),e.jsx("div",{className:t.cn(r.default.buttonWrap,r.default.mobile),children:e.jsx(s.Button,{as:"a",href:a.href,variant:"muted",size:"sm",children:a.label})}),e.jsx("div",{className:t.cn(r.default.buttonWrap,r.default.desktop),children:e.jsx(s.Button,{as:"a",href:a.href,variant:"muted",size:"lg",children:a.label})})]}),e.jsx("div",{className:r.default.productCards,children:e.jsx(n.ProductPairs,{productCards:i})})]})});exports.PairedProducts=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../utils/cn/cn.cjs.js"),r=require("../../src/modules/PairedProducts/pairedProducts.module.css"),c=require("../../components/Typography/Typography.cjs.js"),t=require("../../components/Button/Button.cjs.js"),o=require("../../components/ProductPairs/ProductPairs.cjs.js"),d=({title:i,button:s,productCards:n})=>e.jsx("section",{className:r.root,children:e.jsxs("div",{className:r.container,children:[e.jsxs("div",{className:r.header,children:[e.jsx(c.Typography,{as:"h2",defaultVariant:"displaySm",mobileVariant:"headingLg",children:i}),e.jsx("div",{className:a.cn(r.buttonWrap,r.mobile),children:e.jsx(t.Button,{as:"a",href:s.href,variant:"muted",size:"sm",children:s.label})}),e.jsx("div",{className:a.cn(r.buttonWrap,r.desktop),children:e.jsx(t.Button,{as:"a",href:s.href,variant:"muted",size:"lg",children:s.label})})]}),e.jsx("div",{className:r.productCards,children:e.jsx(o.ProductPairs,{productCards:n})})]})});exports.PairedProducts=d;

package/dist/modules/PairedProducts/PairedProducts.es.js

@@ -1,14 +1,14 @@
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Button as s } from "../../components/Button/Button.es.js";
+import { cn as s } from "../../utils/cn/cn.es.js";
+import a from "../../modules/PairedProducts/pairedProducts.module.css";
 import { Typography as m } from "../../components/Typography/Typography.es.js";
+import { Button as d } from "../../components/Button/Button.es.js";
 import { ProductPairs as t } from "../../components/ProductPairs/ProductPairs.es.js";
-import { cn as d } from "../../utils/cn/cn.es.js";
-import a from "./pairedProducts.module.css.es.js";
 const v = ({ title: l, button: e, productCards: o }) => /* @__PURE__ */ r("section", { className: a.root, children: /* @__PURE__ */ i("div", { className: a.container, children: [
   /* @__PURE__ */ i("div", { className: a.header, children: [
     /* @__PURE__ */ r(m, { as: "h2", defaultVariant: "displaySm", mobileVariant: "headingLg", children: l }),
-    /* @__PURE__ */ r("div", { className: d(a.buttonWrap, a.mobile), children: /* @__PURE__ */ r(s, { as: "a", href: e.href, variant: "muted", size: "sm", children: e.label }) }),
-    /* @__PURE__ */ r("div", { className: d(a.buttonWrap, a.desktop), children: /* @__PURE__ */ r(s, { as: "a", href: e.href, variant: "muted", size: "lg", children: e.label }) })
+    /* @__PURE__ */ r("div", { className: s(a.buttonWrap, a.mobile), children: /* @__PURE__ */ r(d, { as: "a", href: e.href, variant: "muted", size: "sm", children: e.label }) }),
+    /* @__PURE__ */ r("div", { className: s(a.buttonWrap, a.desktop), children: /* @__PURE__ */ r(d, { as: "a", href: e.href, variant: "muted", size: "lg", children: e.label }) })
   ] }),
   /* @__PURE__ */ r("div", { className: a.productCards, children: /* @__PURE__ */ r(t, { productCards: o }) })
 ] }) });