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

package/dist/modules/FeaturesGallery/FeaturesGallery.es.js

@@ -1,9 +1,9 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import a from "../../modules/FeaturesGallery/featuresGallery.module.css";
 import { HighlightedTitle as c } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { InfiniteScroll as h } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
 import { Typography as o } from "../../components/Typography/Typography.es.js";
 import { FeatureGrid as n } from "./components/FeatureGrid/FeatureGrid.es.js";
-import a from "./featuresGallery.module.css.es.js";
+import { InfiniteScroll as h } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
 const p = ({ label: t, url: l }) => /* @__PURE__ */ e("a", { href: l, className: a.label, children: /* @__PURE__ */ e(o, { defaultVariant: "labelMd", emphasis: !0, mobileVariant: "labelSm", weight: "regular", children: t }) }), v = ({ title: t, description: l, features: s, labels: d }) => /* @__PURE__ */ i("section", { className: a.root, children: [
   /* @__PURE__ */ i("div", { className: a.container, children: [
     /* @__PURE__ */ i("div", { className: a.header, children: [

package/dist/modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../../components/Icon/constants.cjs.js"),s=require("../../../../components/IconButton/IconButton.cjs.js"),c=require("../../../../components/Typography/Typography.cjs.js"),d=require("../../../../utils/cn/cn.cjs.js"),a=require("./FeatureGrid.module.css.cjs.js"),r={primary:{default:"headingXl",mobile:"headingXs"},secondary:{default:"headingSm",mobile:"headingXxs"}},u=({feature:t,className:i,index:l,type:n})=>e.jsxs("a",{className:d.cn(a.default.root,a.default[n],i),style:{backgroundImage:`url("${t.image}")`},href:t.url,children:[e.jsx("div",{className:a.default.smoke,"data-smoke":l%3}),e.jsxs("div",{className:a.default.content,children:[e.jsx(c.Typography,{as:"h3",defaultVariant:r[n].default,mobileVariant:r[n].mobile,className:a.default.label,children:t.label}),e.jsx("div",{className:a.default.desktop,children:e.jsx(s.IconButton,{iconName:o.EIconName.ARROW_FORWARD,variant:"muted-invert",size:n==="primary"?"lg":"md"})}),e.jsx("div",{className:a.default.mobile,children:e.jsx(s.IconButton,{iconName:o.EIconName.ARROW_FORWARD,variant:"muted-invert",size:"sm"})})]})]});exports.FeatureGrid=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../../components/Icon/constants.cjs.js"),l=require("../../../../utils/cn/cn.cjs.js"),n=require("../../../../src/modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.module.css"),m=require("../../../../components/Typography/Typography.cjs.js"),t=require("../../../../components/IconButton/IconButton.cjs.js"),i={primary:{default:"headingXl",mobile:"headingXs"},secondary:{default:"headingSm",mobile:"headingXxs"}},d=({feature:a,className:r,index:c,type:s})=>e.jsxs("a",{className:l.cn(n.root,n[s],r),style:{backgroundImage:`url("${a.image}")`},href:a.url,children:[e.jsx("div",{className:n.smoke,"data-smoke":c%3}),e.jsxs("div",{className:n.content,children:[e.jsx(m.Typography,{as:"h3",defaultVariant:i[s].default,mobileVariant:i[s].mobile,className:n.label,children:a.label}),e.jsx("div",{className:n.desktop,children:e.jsx(t.IconButton,{iconName:o.EIconName.ARROW_FORWARD,variant:"muted-invert",size:s==="primary"?"lg":"md"})}),e.jsx("div",{className:n.mobile,children:e.jsx(t.IconButton,{iconName:o.EIconName.ARROW_FORWARD,variant:"muted-invert",size:"sm"})})]})]});exports.FeatureGrid=d;

package/dist/modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.es.js

@@ -1,23 +1,23 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { EIconName as o } from "../../../../components/Icon/constants.es.js";
+import { cn as d } from "../../../../utils/cn/cn.es.js";
+import a from "../../../../modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.module.css";
+import { Typography as c } from "../../../../components/Typography/Typography.es.js";
 import { IconButton as l } from "../../../../components/IconButton/IconButton.es.js";
-import { Typography as d } from "../../../../components/Typography/Typography.es.js";
-import { cn as c } from "../../../../utils/cn/cn.es.js";
-import a from "./FeatureGrid.module.css.es.js";
 const s = {
   primary: { default: "headingXl", mobile: "headingXs" },
   secondary: { default: "headingSm", mobile: "headingXxs" }
 }, R = ({ feature: m, className: n, index: t, type: i }) => /* @__PURE__ */ r(
   "a",
   {
-    className: c(a.root, a[i], n),
+    className: d(a.root, a[i], n),
     style: { backgroundImage: `url("${m.image}")` },
     href: m.url,
     children: [
       /* @__PURE__ */ e("div", { className: a.smoke, "data-smoke": t % 3 }),
       /* @__PURE__ */ r("div", { className: a.content, children: [
         /* @__PURE__ */ e(
-          d,
+          c,
           {
             as: "h3",
             defaultVariant: s[i].default,

package/dist/modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.module.css

@@ -0,0 +1,131 @@
+.root {
+    position: relative;
+    display: flex;
+    width: 100%;
+    color: var(--color-text-primary-inverted);
+    background: lightgray 50% / cover no-repeat;
+    overflow: hidden;
+    cursor: pointer;
+    text-decoration: none;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: inherit;
+        background-size: cover;
+        z-index: 0;
+        transition: transform 0.3s ease-in-out;
+        transform: scale(1);
+    }
+
+    &:hover::before,
+    &:focus::before {
+        transform: scale(1.05);
+    }
+}
+
+.primary {
+    max-width: 100%;
+    width: 100%;
+    height: 398px;
+    align-items: flex-end;
+    border-radius: var(--border-radius-lg);
+}
+
+.secondary {
+    max-width: 100%;
+    width: 100%;
+    height: 147px;
+    align-items: center;
+    border-radius: var(--border-radius-md);
+}
+
+.smoke {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    filter: blur(5.5px);
+    mix-blend-mode: screen;
+    background: lightgray -44.215px 0 / 114.84% 100% no-repeat;
+    transition: opacity 0.3s ease-in-out;
+
+    &[data-smoke='0'] {
+        background: url('./assets/smoke-1.jpg') lightgray 50% / cover no-repeat;
+    }
+
+    &[data-smoke='1'] {
+        background: url('./assets/smoke-2.jpg') lightgray 1.232px 0 / 114.84% 100% no-repeat;
+    }
+
+    &[data-smoke='2'] {
+        background: url('./assets/smoke-3.jpg') lightgray -44.215px 0 / 114.84% 100% no-repeat;
+    }
+}
+
+.root:hover .smoke,
+.root:focus .smoke {
+    opacity: 0.2;
+}
+
+.content {
+    z-index: 1;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-16);
+}
+
+.primary .content {
+    padding: var(--spacing-32);
+}
+
+.secondary .content {
+    padding: var(--spacing-48) var(--spacing-16);
+}
+
+.label {
+    width: 100%;
+    max-width: 142px;
+}
+
+.mobile {
+    display: none;
+}
+
+@media screen and (width <= 768px) {
+    .primary {
+        width: 100%;
+        height: 245px;
+    }
+
+    .secondary {
+        width: 100%;
+        height: 80px;
+    }
+
+    .primary .content {
+        padding: var(--spacing-20) var(--spacing-12);
+    }
+
+    .secondary .content {
+        padding: var(--spacing-24) var(--spacing-12);
+    }
+
+    .label {
+        max-width: 100%;
+    }
+
+    .mobile {
+        display: flex;
+    }
+
+    .desktop {
+        display: none;
+    }
+}

package/dist/modules/FeaturesGallery/featuresGallery.module.css

@@ -0,0 +1,111 @@
+.root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    padding: var(--spacing-120) 0 var(--spacing-64);
+    gap: var(--spacing-64);
+    overflow: hidden;
+}
+
+.container {
+    display: flex;
+    width: 100%;
+    max-width: var(--content-max-width);
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--spacing-64);
+    padding: 0 var(--spacing-120);
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--spacing-20);
+    text-align: center;
+    width: 100%;
+    max-width: 690px;
+}
+
+.features {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--spacing-8);
+}
+
+.primaryFeatures {
+    display: grid;
+    gap: var(--spacing-8);
+    grid-template-columns: 1fr 1fr;
+}
+
+.secondaryFeatures {
+    display: grid;
+    gap: var(--spacing-8);
+    grid-template-columns: repeat(4, 1fr);
+}
+
+.footer {
+    width: 100%;
+    display: flex;
+    border-top: var(--border-width-sm) solid var(--border-color-light);
+    border-bottom: var(--border-width-sm) solid var(--border-color-light);
+}
+
+.label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--color-text-primary);
+    text-decoration: none;
+    white-space: nowrap;
+    padding: var(--spacing-12) var(--spacing-32);
+    border-right: var(--border-width-sm) solid var(--border-color-light);
+    cursor: pointer;
+    padding: 9px 32px;
+    position: relative;
+
+    &:hover {
+        text-decoration: none;
+        color: inherit;
+    }
+
+    &::after {
+        content: "";
+        display: flex;
+        width: 1px;
+        height: 32px;
+        background-color: var(--border-color-light);
+        position: absolute;
+        right: 0;
+    }
+}
+
+@media screen and (width <= 768px) {
+    .root {
+        padding: var(--spacing-64) 0;
+        gap: var(--spacing-40);
+    }
+
+    .container {
+        gap: var(--spacing-40);
+        padding: 0 var(--spacing-20);
+    }
+
+    .header {
+        gap: var(--spacing-16);
+    }
+
+    .secondaryFeatures {
+        grid-template-columns: 1fr;
+    }
+
+    .label {
+        padding: 10px 24px;
+    }
+}

package/dist/modules/FollowTheScience/FollowTheScience.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const w=require("../../node_modules/swiper/modules/navigation.cjs.js"),c=require("../../node_modules/swiper/swiper-react.cjs.js"),g=require("../../components/Benefit/Benefit.cjs.js"),_=require("../../components/Icon/constants.cjs.js"),f=require("../../components/Label/Label.cjs.js"),a=require("../../components/ProgressButton/ProgressButton.cjs.js"),q=require("../../components/TextButton/TextButton.cjs.js"),B=require("../../utils/useSwiper/useSwiper.cjs.js"),s=require("./followTheScience.module.css.cjs.js"),j=[w.default];function v({labelText:d,benefits:u}){const{setIsEnd:h,isEnd:t,isBeginning:n,hideNav:o,handleSlideChange:p,handlePrevClick:r,handleNextClick:l,onSwiperInit:m,handleSwiperResize:x}=B.useSwiper();return e.jsxs("section",{className:s.default.container,children:[e.jsxs("div",{className:s.default.heading,children:[e.jsx(f.Label,{color:"white",size:"lg",children:d}),!o&&e.jsx("div",{className:s.default.progressButtons,"data-device":"desktop",children:e.jsx(a.ProgressButton,{left:{onClick:r,disabled:n},right:{disabled:t,onClick:l}})})]}),e.jsx("div",{className:s.default.content,children:e.jsx(c.Swiper,{onSwiper:m,onResize:x,onSlideChange:p,onReachEnd:()=>h(!0),modules:j,spaceBetween:0,slidesPerView:"auto",className:s.default.swiper,children:u.map((i,S)=>e.jsx(c.SwiperSlide,{className:s.default.swiperSlide,children:e.jsx(g.Benefit,{title:i.title,description:i.description,button:i.link&&i.buttonText?e.jsx(q.TextButton,{as:"a",size:"sm",color:"white",suffixIcon:_.EIconName.ARROW_FORWARD,href:i.link,children:i.buttonText}):void 0})},S))})}),!o&&e.jsx("div",{className:s.default.progressButtons,"data-device":"mobile",children:e.jsx(a.ProgressButton,{left:{onClick:r,disabled:n},right:{onClick:l,disabled:t}})})]})}exports.FollowTheScience=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const g=require("swiper/modules"),l=require("swiper/react"),w=require("../../components/Icon/constants.cjs.js"),j=require("../../components/Label/Label.cjs.js"),B=require("../../components/TextButton/TextButton.cjs.js"),_=require("../../utils/useSwiper/useSwiper.cjs.js"),s=require("../../src/modules/FollowTheScience/followTheScience.module.css"),a=require("../../components/ProgressButton/ProgressButton.cjs.js"),q=require("../../components/Benefit/Benefit.cjs.js"),v=[g.Navigation];function N({labelText:d,benefits:u}){const{setIsEnd:h,isEnd:n,isBeginning:t,hideNav:o,handleSlideChange:p,handlePrevClick:r,handleNextClick:c,onSwiperInit:m,handleSwiperResize:x}=_.useSwiper();return e.jsxs("section",{className:s.container,children:[e.jsxs("div",{className:s.heading,children:[e.jsx(j.Label,{color:"white",size:"lg",children:d}),!o&&e.jsx("div",{className:s.progressButtons,"data-device":"desktop",children:e.jsx(a.ProgressButton,{left:{onClick:r,disabled:t},right:{disabled:n,onClick:c}})})]}),e.jsx("div",{className:s.content,children:e.jsx(l.Swiper,{onSwiper:m,onResize:x,onSlideChange:p,onReachEnd:()=>h(!0),modules:v,spaceBetween:0,slidesPerView:"auto",className:s.swiper,children:u.map((i,S)=>e.jsx(l.SwiperSlide,{className:s.swiperSlide,children:e.jsx(q.Benefit,{title:i.title,description:i.description,button:i.link&&i.buttonText?e.jsx(B.TextButton,{as:"a",size:"sm",color:"white",suffixIcon:w.EIconName.ARROW_FORWARD,href:i.link,children:i.buttonText}):void 0})},S))})}),!o&&e.jsx("div",{className:s.progressButtons,"data-device":"mobile",children:e.jsx(a.ProgressButton,{left:{onClick:r,disabled:t},right:{onClick:c,disabled:n}})})]})}exports.FollowTheScience=N;

package/dist/modules/FollowTheScience/FollowTheScience.es.js

@@ -3,15 +3,15 @@ import { jsxs as d, jsx as e } from "react/jsx-runtime";
 /* empty css                                      */
 /* empty css                                                  */
 /* empty css                                                  */
-import f from "../../node_modules/swiper/modules/navigation.es.js";
-import { Swiper as g, SwiperSlide as N } from "../../node_modules/swiper/swiper-react.es.js";
-import { Benefit as v } from "../../components/Benefit/Benefit.es.js";
-import { EIconName as k } from "../../components/Icon/constants.es.js";
-import { Label as x } from "../../components/Label/Label.es.js";
+import { Navigation as f } from "swiper/modules";
+import { Swiper as g, SwiperSlide as N } from "swiper/react";
+import { EIconName as v } from "../../components/Icon/constants.es.js";
+import { Label as k } from "../../components/Label/Label.es.js";
+import { TextButton as x } from "../../components/TextButton/TextButton.es.js";
+import { useSwiper as C } from "../../utils/useSwiper/useSwiper.es.js";
+import i from "../../modules/FollowTheScience/followTheScience.module.css";
 import { ProgressButton as a } from "../../components/ProgressButton/ProgressButton.es.js";
-import { TextButton as C } from "../../components/TextButton/TextButton.es.js";
-import { useSwiper as R } from "../../utils/useSwiper/useSwiper.es.js";
-import i from "./followTheScience.module.css.es.js";
+import { Benefit as R } from "../../components/Benefit/Benefit.es.js";
 const B = [f];
 function _({ labelText: c, benefits: m }) {
   const {
@@ -24,10 +24,10 @@ function _({ labelText: c, benefits: m }) {
     handleNextClick: l,
     onSwiperInit: u,
     handleSwiperResize: w
-  } = R();
+  } = C();
   return /* @__PURE__ */ d("section", { className: i.container, children: [
     /* @__PURE__ */ d("div", { className: i.heading, children: [
-      /* @__PURE__ */ e(x, { color: "white", size: "lg", children: c }),
+      /* @__PURE__ */ e(k, { color: "white", size: "lg", children: c }),
       !s && /* @__PURE__ */ e("div", { className: i.progressButtons, "data-device": "desktop", children: /* @__PURE__ */ e(
         a,
         {
@@ -54,17 +54,17 @@ function _({ labelText: c, benefits: m }) {
         slidesPerView: "auto",
         className: i.swiper,
         children: m.map((o, S) => /* @__PURE__ */ e(N, { className: i.swiperSlide, children: /* @__PURE__ */ e(
-          v,
+          R,
           {
             title: o.title,
             description: o.description,
             button: o.link && o.buttonText ? /* @__PURE__ */ e(
-              C,
+              x,
               {
                 as: "a",
                 size: "sm",
                 color: "white",
-                suffixIcon: k.ARROW_FORWARD,
+                suffixIcon: v.ARROW_FORWARD,
                 href: o.link,
                 children: o.buttonText
               }

package/dist/modules/FollowTheScience/followTheScience.module.css

@@ -0,0 +1,96 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 120px 0;
+}
+
+.heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding-left: calc(120px - 12px);
+    padding-right: 120px;
+}
+
+.content {
+    width: 100%;
+}
+
+.swiper {
+    margin-top: 48px;
+    width: 100%;
+    border-top: var(--border-width-sm) solid var(--border-color-light);
+    border-bottom: var(--border-width-sm) solid var(--border-color-light);
+}
+
+.swiperSlide {
+    height: auto;
+    width: auto;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.swiperSlide:first-child {
+    padding-left: 96px;
+}
+.swiperSlide:last-child {
+    padding-right: 96px;
+}
+
+.swiperSlide:not(:last-child)::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 1px;
+    background-color: var(--border-color-light);
+    height: 85%;
+    top: 7%;
+    right: 0;
+}
+
+.progressButtons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.progressButtons[data-device='mobile'] {
+    display: none;
+}
+
+@media (width <= 1024px) {
+    .progressButtons[data-device='desktop'] {
+        display: none;
+    }
+    .progressButtons[data-device='mobile'] {
+        display: flex;
+        justify-content: flex-start;
+        margin-left: 20px;
+    }
+}
+
+@media (width <= 768px) {
+    .container {
+        padding: 64px 0;
+    }
+
+    .heading {
+        padding: 0 20px;
+    }
+
+    .swiperSlide:first-child {
+        padding-left: 20px;
+    }
+    .swiperSlide:last-child {
+        padding-right: 20px;
+    }
+
+    .swiper {
+        padding: 16px 0;
+        margin-bottom: 40px;
+    }
+}

package/dist/modules/Grid/Grid.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../../components/Typography/Typography.cjs.js"),e=require("./grid.module.css.cjs.js"),r=({image:t,title:i,description:l})=>a.jsxs("div",{className:e.default.mobileContent,children:[a.jsx("div",{className:e.default.leftBorder}),a.jsxs("div",{className:e.default.mobileColumn,children:[a.jsx("img",{className:e.default.image,src:t}),a.jsxs("div",{className:e.default.mobileText,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingSm",children:i}),a.jsx(s.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",children:l})]})]}),a.jsx("div",{className:e.default.rightBorder})]}),n=({headline:t,topRow:i,middleRow:l,bottomRow:d,backgroundGradient:c})=>a.jsx("section",{className:e.default.root,"data-background":c,children:a.jsxs("div",{className:e.default.container,children:[a.jsx(s.Typography,{className:e.default.headline,as:"h2",defaultVariant:"displayXs",mobileVariant:"headingXl",children:t}),a.jsxs("div",{className:e.default.desktopGrid,children:[a.jsxs("div",{className:e.default.leftColumn,children:[a.jsxs("div",{className:e.default.halfVector,children:[a.jsx("div",{className:e.default.horizontalVector}),a.jsx("div",{className:e.default.horizontalVector})]}),a.jsxs("div",{className:e.default.row,children:[a.jsx("div",{className:e.default.horizontalVector}),a.jsxs("div",{className:e.default.leftText,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingSm",children:l.title}),a.jsx(s.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",children:l.description})]}),a.jsx("div",{className:e.default.horizontalVector})]}),a.jsxs("div",{className:e.default.halfVector,children:[a.jsx("div",{className:e.default.horizontalVector}),a.jsx("div",{className:e.default.horizontalVector})]})]}),a.jsxs("div",{className:e.default.midColumn,children:[a.jsx("img",{className:e.default.image,src:i.image}),a.jsx("img",{className:e.default.image,src:l.image}),a.jsx("img",{className:e.default.image,src:d.image})]}),a.jsxs("div",{className:e.default.rightColumn,children:[a.jsxs("div",{className:e.default.halfVector,children:[a.jsx("div",{className:e.default.horizontalVector}),a.jsx("div",{className:e.default.horizontalVector})]}),a.jsxs("div",{className:e.default.row,children:[a.jsx("div",{className:e.default.horizontalVector}),a.jsxs("div",{className:e.default.rightTopText,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingSm",children:i.title}),a.jsx(s.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",children:i.description})]}),a.jsx("div",{className:e.default.horizontalVector})]}),a.jsx("div",{className:e.default.rightVector}),a.jsxs("div",{className:e.default.row,children:[a.jsx("div",{className:e.default.horizontalVector}),a.jsxs("div",{className:e.default.rightBotText,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingSm",children:d.title}),a.jsx(s.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",children:d.description})]}),a.jsx("div",{className:e.default.horizontalVector})]}),a.jsxs("div",{className:e.default.halfVector,children:[a.jsx("div",{className:e.default.horizontalVector}),a.jsx("div",{className:e.default.horizontalVector})]})]})]}),a.jsxs("div",{className:e.default.mobileGrid,children:[a.jsx(r,{image:i.image,title:i.title,description:i.description}),a.jsx(r,{image:l.image,title:l.title,description:l.description}),a.jsx(r,{image:d.image,title:d.title,description:d.description})]})]})});exports.Grid=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../../src/modules/Grid/grid.module.css"),e=require("../../components/Typography/Typography.cjs.js"),d=({image:c,title:i,description:r})=>a.jsxs("div",{className:s.mobileContent,children:[a.jsx("div",{className:s.leftBorder}),a.jsxs("div",{className:s.mobileColumn,children:[a.jsx("img",{className:s.image,src:c}),a.jsxs("div",{className:s.mobileText,children:[a.jsx(e.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingSm",children:i}),a.jsx(e.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",children:r})]})]}),a.jsx("div",{className:s.rightBorder})]}),n=({headline:c,topRow:i,middleRow:r,bottomRow:l,backgroundGradient:t})=>a.jsx("section",{className:s.root,"data-background":t,children:a.jsxs("div",{className:s.container,children:[a.jsx(e.Typography,{className:s.headline,as:"h2",defaultVariant:"displayXs",mobileVariant:"headingXl",children:c}),a.jsxs("div",{className:s.desktopGrid,children:[a.jsxs("div",{className:s.leftColumn,children:[a.jsxs("div",{className:s.halfVector,children:[a.jsx("div",{className:s.horizontalVector}),a.jsx("div",{className:s.horizontalVector})]}),a.jsxs("div",{className:s.row,children:[a.jsx("div",{className:s.horizontalVector}),a.jsxs("div",{className:s.leftText,children:[a.jsx(e.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingSm",children:r.title}),a.jsx(e.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",children:r.description})]}),a.jsx("div",{className:s.horizontalVector})]}),a.jsxs("div",{className:s.halfVector,children:[a.jsx("div",{className:s.horizontalVector}),a.jsx("div",{className:s.horizontalVector})]})]}),a.jsxs("div",{className:s.midColumn,children:[a.jsx("img",{className:s.image,src:i.image}),a.jsx("img",{className:s.image,src:r.image}),a.jsx("img",{className:s.image,src:l.image})]}),a.jsxs("div",{className:s.rightColumn,children:[a.jsxs("div",{className:s.halfVector,children:[a.jsx("div",{className:s.horizontalVector}),a.jsx("div",{className:s.horizontalVector})]}),a.jsxs("div",{className:s.row,children:[a.jsx("div",{className:s.horizontalVector}),a.jsxs("div",{className:s.rightTopText,children:[a.jsx(e.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingSm",children:i.title}),a.jsx(e.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",children:i.description})]}),a.jsx("div",{className:s.horizontalVector})]}),a.jsx("div",{className:s.rightVector}),a.jsxs("div",{className:s.row,children:[a.jsx("div",{className:s.horizontalVector}),a.jsxs("div",{className:s.rightBotText,children:[a.jsx(e.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingSm",children:l.title}),a.jsx(e.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",children:l.description})]}),a.jsx("div",{className:s.horizontalVector})]}),a.jsxs("div",{className:s.halfVector,children:[a.jsx("div",{className:s.horizontalVector}),a.jsx("div",{className:s.horizontalVector})]})]})]}),a.jsxs("div",{className:s.mobileGrid,children:[a.jsx(d,{image:i.image,title:i.title,description:i.description}),a.jsx(d,{image:r.image,title:r.title,description:r.description}),a.jsx(d,{image:l.image,title:l.title,description:l.description})]})]})});exports.Grid=n;

package/dist/modules/Grid/Grid.es.js

@@ -1,6 +1,6 @@
 import { jsx as i, jsxs as e } from "react/jsx-runtime";
+import a from "../../modules/Grid/grid.module.css";
 import { Typography as l } from "../../components/Typography/Typography.es.js";
-import a from "./grid.module.css.es.js";
 const t = ({ image: c, title: r, description: s }) => /* @__PURE__ */ e("div", { className: a.mobileContent, children: [
   /* @__PURE__ */ i("div", { className: a.leftBorder }),
   /* @__PURE__ */ e("div", { className: a.mobileColumn, children: [