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

package/dist/modules/Grid/grid.module.css

@@ -0,0 +1,257 @@
+.root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.root[data-background='blue'] {
+    background: linear-gradient(180deg, #9293b2 0%, #195675 25%, #142839 50%, #071015 75%, #111016 100%), #fff;
+}
+
+.root[data-background='yellow'] {
+    background: linear-gradient(180deg, #d09b4d 0%, #d09b4d 25%, #613300 50%, #391c00 75%, #241100 100%), #fff;
+}
+
+.root[data-background='grey'] {
+    background: linear-gradient(180deg, #b2b2b2 0%, #757575 25%, #393939 50%, #151515 75%, #161616 100%), #fff;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+    max-width: var(--content-max-width);
+    height: 100%;
+    overflow: hidden;
+}
+
+.headline {
+    margin-top: 65px;
+    color: var(--color-text-primary-inverted);
+    margin-bottom: 60px;
+}
+
+.desktopGrid {
+    width: 100%;
+    height: 810px;
+    position: relative;
+    display: flex;
+    margin-bottom: 45px;
+}
+
+.halfVector:first-child {
+    top: 0;
+    gap: 60px;
+    display: flex;
+    width: 100%;
+    position: absolute;
+}
+
+.halfVector:last-child {
+    bottom: 0;
+    gap: 60px;
+    display: flex;
+    width: 100%;
+    position: absolute;
+}
+
+.leftColumn,
+.rightColumn {
+    padding: 30px 0;
+    flex: 1;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    align-items: center;
+}
+
+.midColumn {
+    padding: 57px 0;
+    gap: 24px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    justify-content: center;
+}
+
+.midColumn::before {
+    top: 0;
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 1px;
+    background: var(--border-color-alpha-white-20);
+}
+
+.midColumn::after {
+    bottom: 0;
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 1px;
+    background: var(--border-color-alpha-white-20);
+}
+
+.row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 30px;
+}
+
+.horizontalVector {
+    position: relative;
+    flex: 1;
+    width: 100%;
+    height: var(--border-width-sm);
+    background: var(--border-color-alpha-white-20);
+}
+
+.leftText,
+.rightTopText,
+.rightBotText {
+    position: relative;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 16px;
+    color: var(--color-text-primary-inverted);
+    max-width: 300px;
+}
+
+.leftText {
+    margin-top: 52px;
+    margin-bottom: 48px;
+}
+
+.rightTopText {
+    margin-top: 32px;
+    margin-bottom: 48px;
+}
+.rightBotText {
+    margin-top: 52px;
+    margin-bottom: 28px;
+}
+.image {
+    object-fit: cover;
+    width: 216px;
+    height: 216px;
+    border-radius: var(--border-radius-full);
+}
+
+.leftColumn::before,
+.leftColumn::after,
+.rightColumn::before,
+.rightColumn::after {
+    content: '';
+    flex-grow: 1;
+    position: relative;
+    width: var(--border-width-sm);
+    background: var(--border-color-alpha-white-20);
+}
+
+.rightVector {
+    height: 250px;
+    width: var(--border-width-sm);
+    background: var(--border-color-alpha-white-20);
+}
+
+.mobileGrid {
+    display: none;
+}
+
+@media screen and (width <= 768px) {
+    .desktopGrid {
+        display: none;
+    }
+
+    .container {
+        padding: 40px 0;
+        height: 100%;
+    }
+
+    .headline {
+        margin: 0;
+        padding: 40px;
+        color: var(--color-text-primary-inverted);
+        text-align: center;
+    }
+
+    .mobileGrid {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        flex-direction: column;
+        padding: 20px;
+        gap: 32px;
+    }
+
+    .mobileColumn {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding-left: 16px;
+        padding-right: 16px;
+    }
+
+    .mobileText {
+        margin-top: 32px;
+        margin-bottom: 16px;
+        display: flex;
+        flex-direction: column;
+        padding: 0 8px;
+        color: var(--color-text-primary-inverted);
+        gap: 12px;
+    }
+
+    .image {
+        margin-top: 60px;
+        width: 240px;
+        height: 240px;
+    }
+
+    .mobileContent {
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
+
+    .leftBorder,
+    .rightBorder {
+        top: 16px;
+        position: absolute;
+        height: 100%;
+        width: var(--border-width-sm);
+        background: var(--border-color-alpha-white-20);
+    }
+
+    .rightBorder {
+        right: 0px;
+    }
+
+    .mobileColumn::before {
+        content: '';
+        position: relative;
+        height: var(--border-width-sm);
+        width: 100%;
+        background: var(--border-color-alpha-white-20);
+    }
+
+    .mobileContent:last-child .mobileColumn::after {
+        top: 32px;
+        content: '';
+        position: relative;
+        height: var(--border-width-sm);
+        width: 100%;
+        background: var(--border-color-alpha-white-20);
+    }
+}

package/dist/modules/HSModal/HSModal.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./components/MailchimpModal/MailchimpModal.cjs.js"),r=require("./useHSModal.cjs.js"),d=require("./hsModal.module.css.cjs.js"),u=l=>{const{isOpen:a,closeModal:i,handleClick:n,handleOverlayClick:c}=r.useHSModal({id:l.id,initiallyOpen:l.initiallyOpen,trigger:l.trigger,onCloseCallback:l.onCloseCallback,onClickCallback:l.onClickCallback}),o=()=>{switch(l.type){case"mailchimp":return e.jsx(t.MailchimpModal,{...l,onCloseCallback:i,onClickCallback:n});default:return null}};return a?e.jsx("div",{className:d.default.overlay,onClick:c,children:o()}):null};exports.HSModal=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./useHSModal.cjs.js"),r=require("../../src/modules/HSModal/hsModal.module.css"),s=require("./components/MailchimpModal/MailchimpModal.cjs.js"),d=l=>{const{isOpen:i,closeModal:a,handleClick:n,handleOverlayClick:c}=o.useHSModal({id:l.id,initiallyOpen:l.initiallyOpen,trigger:l.trigger,onCloseCallback:l.onCloseCallback,onClickCallback:l.onClickCallback}),t=()=>{switch(l.type){case"mailchimp":return e.jsx(s.MailchimpModal,{...l,onCloseCallback:a,onClickCallback:n});default:return null}};return i?e.jsx("div",{className:r.overlay,onClick:c,children:t()}):null};exports.HSModal=d;

package/dist/modules/HSModal/HSModal.es.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { MailchimpModal as t } from "./components/MailchimpModal/MailchimpModal.es.js";
-import { useHSModal as r } from "./useHSModal.es.js";
-import C from "./hsModal.module.css.es.js";
+import { useHSModal as t } from "./useHSModal.es.js";
+import r from "../../modules/HSModal/hsModal.module.css";
+import { MailchimpModal as C } from "./components/MailchimpModal/MailchimpModal.es.js";
 const u = (l) => {
-  const { isOpen: i, closeModal: a, handleClick: n, handleOverlayClick: o } = r({
+  const { isOpen: i, closeModal: a, handleClick: n, handleOverlayClick: o } = t({
     id: l.id,
     initiallyOpen: l.initiallyOpen,
     trigger: l.trigger,
@@ -13,12 +13,12 @@ const u = (l) => {
   }), c = () => {
     switch (l.type) {
       case "mailchimp":
-        return /* @__PURE__ */ e(t, { ...l, onCloseCallback: a, onClickCallback: n });
+        return /* @__PURE__ */ e(C, { ...l, onCloseCallback: a, onClickCallback: n });
       default:
         return null;
     }
   };
-  return i ? /* @__PURE__ */ e("div", { className: C.overlay, onClick: o, children: c() }) : null;
+  return i ? /* @__PURE__ */ e("div", { className: r.overlay, onClick: o, children: c() }) : null;
 };
 export {
   u as HSModal

package/dist/modules/HSModal/components/MailchimpModal/MailchimpModal.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../../components/Typography/Typography.cjs.js"),c=require("../../../../utils/cn/cn.cjs.js"),x=require("./components/Newsletter/Newsletter.cjs.js"),a=require("./mailchimpModal.module.css.cjs.js"),N=({title:n,description:t,buttonText:d,image:s,layout:i="plain-column",colorScheme:l="light",onCloseCallback:o,onClickCallback:u,cancelButtonText:p="no, thanks",tags:m,placeholder:h,trackingEvent:g,trackingLocation:y})=>{const f=j=>{j.stopPropagation()};return e.jsxs("div",{className:c.cn(a.default.contentWrapper,a.default[l]),"data-image-position":i,onClick:f,children:[e.jsxs("div",{className:c.cn(a.default.content,a.default[l]),children:[(n||t)&&e.jsxs("div",{className:a.default.text,children:[n&&e.jsx(r.Typography,{defaultVariant:"headingLg",children:n}),t&&e.jsx(r.Typography,{defaultVariant:"bodySm",children:t})]}),e.jsx(x.Newsletter,{buttonText:d,cancelButtonText:p,colorScheme:l,onCloseCallback:o,onClickCallback:u,tags:m,placeholder:h,trackingEvent:g,trackingLocation:y})]}),s&&i!=="plain-column"&&e.jsx("div",{className:a.default.imageWrapper,children:e.jsx("div",{style:{backgroundImage:`url(${s})`},className:a.default.image})})]})};exports.MailchimpModal=N;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../../utils/cn/cn.cjs.js"),n=require("../../../../src/modules/HSModal/components/MailchimpModal/mailchimpModal.module.css"),c=require("../../../../components/Typography/Typography.cjs.js"),N=require("./components/Newsletter/Newsletter.cjs.js"),v=({title:a,description:s,buttonText:o,image:i,layout:r="plain-column",colorScheme:t="light",onCloseCallback:d,onClickCallback:p,cancelButtonText:u="no, thanks",tags:g,placeholder:h,trackingEvent:m,trackingLocation:y})=>{const j=x=>{x.stopPropagation()};return e.jsxs("div",{className:l.cn(n.contentWrapper,n[t]),"data-image-position":r,onClick:j,children:[e.jsxs("div",{className:l.cn(n.content,n[t]),children:[(a||s)&&e.jsxs("div",{className:n.text,children:[a&&e.jsx(c.Typography,{defaultVariant:"headingLg",children:a}),s&&e.jsx(c.Typography,{defaultVariant:"bodySm",children:s})]}),e.jsx(N.Newsletter,{buttonText:o,cancelButtonText:u,colorScheme:t,onCloseCallback:d,onClickCallback:p,tags:g,placeholder:h,trackingEvent:m,trackingLocation:y})]}),i&&r!=="plain-column"&&e.jsx("div",{className:n.imageWrapper,children:e.jsx("div",{style:{backgroundImage:`url(${i})`},className:n.image})})]})};exports.MailchimpModal=v;

package/dist/modules/HSModal/components/MailchimpModal/MailchimpModal.es.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs as t, jsx as n } from "react/jsx-runtime";
-import { Typography as s } from "../../../../components/Typography/Typography.es.js";
-import { cn as m } from "../../../../utils/cn/cn.es.js";
+import { cn as s } from "../../../../utils/cn/cn.es.js";
+import a from "../../../../modules/HSModal/components/MailchimpModal/mailchimpModal.module.css";
+import { Typography as m } from "../../../../components/Typography/Typography.es.js";
 import { Newsletter as x } from "./components/Newsletter/Newsletter.es.js";
-import a from "./mailchimpModal.module.css.es.js";
 const V = ({
   title: i,
   description: r,
@@ -25,14 +25,14 @@ const V = ({
   return /* @__PURE__ */ t(
     "div",
     {
-      className: m(a.contentWrapper, a[e]),
+      className: s(a.contentWrapper, a[e]),
       "data-image-position": o,
       onClick: v,
       children: [
-        /* @__PURE__ */ t("div", { className: m(a.content, a[e]), children: [
+        /* @__PURE__ */ t("div", { className: s(a.content, a[e]), children: [
           (i || r) && /* @__PURE__ */ t("div", { className: a.text, children: [
-            i && /* @__PURE__ */ n(s, { defaultVariant: "headingLg", children: i }),
-            r && /* @__PURE__ */ n(s, { defaultVariant: "bodySm", children: r })
+            i && /* @__PURE__ */ n(m, { defaultVariant: "headingLg", children: i }),
+            r && /* @__PURE__ */ n(m, { defaultVariant: "bodySm", children: r })
           ] }),
           /* @__PURE__ */ n(
             x,

package/dist/modules/HSModal/components/MailchimpModal/components/Newsletter/Newsletter.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react"),I=require("../../../../../../components/TextInput/TextInput.cjs.js"),N=require("../../../../../../node_modules/react-mailchimp-subscribe/es/index.cjs.js"),P=require("../../../../../../utils/isValidEmail.cjs.js"),q=require("../../../../../../components/Button/Button.cjs.js"),V=require("../../../../../../types/analytics/analytics.cjs.js"),E=require("./newsletter.module.css.cjs.js"),A=e=>`//gethealthspan.us21.list-manage.com/subscribe/post?u=664ad54ec243b3582164cf116&id=2483a4d606&f_id=0050e6e6f0&tags=${e}`,$=({status:e,message:c,subscribe:m,buttonText:p,colorScheme:l,onCloseCallback:i,cancelButtonText:f,onClickCallback:a,placeholder:h,trackingEvent:d,trackingLocation:g})=>{const[t,v]=o.useState(""),[y,n]=o.useState(!1),[j,s]=o.useState(""),[S,x]=o.useState(!1),T=u=>{v(u.target.value),y&&(n(!1),s("")),x(u.target.value.length>0)},_=()=>{var u;if(!t){n(!0),s("Please enter your email address");return}if(!P.isValidEmail(t)){n(!0),s("Please enter a valid email address");return}if(n(!1),s(""),m({EMAIL:t}),a==null||a(),d){const B={event:d,location:g||"",type:V.EAnalyticsEventType.interaction,payload:{email:t,component:"HSModal",element:"MailchimpCustomForm",pageTitle:document.title}};(u=window.eventBus)==null||u.emit("analytics",B)}};o.useEffect(()=>{e==="success"&&(v(""),n(!1),s(""),x(!1),i==null||i()),e==="error"&&typeof c=="string"&&(n(!0),s("Subscription failed. Please try again."))},[e,c]);const M=l==="light"?"primary":"primary-invert",w=l==="light"?"primary":"primary-invert";return r.jsxs("div",{className:E.default.interface,children:[r.jsx(I.TextInput,{placeholder:h||"Email",variant:M,value:t,handleChange:T,error:y,errorText:j,active:S}),r.jsxs("div",{className:E.default.buttonContainer,children:[r.jsx(q.Button,{size:"md",variant:w,onClick:_,children:e==="sending"?"submitting…":p}),r.jsx(q.Button,{size:"md",variant:"ghost",onClick:i,children:f})]})]})},z=({buttonText:e,colorScheme:c,onCloseCallback:m,cancelButtonText:p,tags:l,onClickCallback:i,placeholder:f,trackingEvent:a,trackingLocation:h})=>r.jsx(N.default,{url:A(l),render:({subscribe:d,status:g,message:t})=>r.jsx($,{status:g,message:t,subscribe:d,buttonText:e,colorScheme:c,onCloseCallback:m,onClickCallback:i,cancelButtonText:p,placeholder:f,trackingEvent:a,trackingLocation:h})});exports.Newsletter=z;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("react"),w=require("react-mailchimp-subscribe"),N=require("../../../../../../utils/isValidEmail.cjs.js"),P=require("../../../../../../types/analytics/analytics.cjs.js"),j=require("../../../../../../src/modules/HSModal/components/MailchimpModal/components/Newsletter/newsletter.module.css"),V=require("../../../../../../components/TextInput/TextInput.cjs.js"),E=require("../../../../../../components/Button/Button.cjs.js"),b=e=>`//gethealthspan.us21.list-manage.com/subscribe/post?u=664ad54ec243b3582164cf116&id=2483a4d606&f_id=0050e6e6f0&tags=${e}`,A=({status:e,message:c,subscribe:d,buttonText:p,colorScheme:l,onCloseCallback:r,cancelButtonText:f,onClickCallback:a,placeholder:h,trackingEvent:m,trackingLocation:y})=>{const[t,g]=o.useState(""),[v,n]=o.useState(!1),[S,s]=o.useState(""),[q,x]=o.useState(!1),T=u=>{g(u.target.value),v&&(n(!1),s("")),x(u.target.value.length>0)},M=()=>{var u;if(!t){n(!0),s("Please enter your email address");return}if(!N.isValidEmail(t)){n(!0),s("Please enter a valid email address");return}if(n(!1),s(""),d({EMAIL:t}),a==null||a(),m){const I={event:m,location:y||"",type:P.EAnalyticsEventType.interaction,payload:{email:t,component:"HSModal",element:"MailchimpCustomForm",pageTitle:document.title}};(u=window.eventBus)==null||u.emit("analytics",I)}};o.useEffect(()=>{e==="success"&&(g(""),n(!1),s(""),x(!1),r==null||r()),e==="error"&&typeof c=="string"&&(n(!0),s("Subscription failed. Please try again."))},[e,c]);const _=l==="light"?"primary":"primary-invert",B=l==="light"?"primary":"primary-invert";return i.jsxs("div",{className:j.interface,children:[i.jsx(V.TextInput,{placeholder:h||"Email",variant:_,value:t,handleChange:T,error:v,errorText:S,active:q}),i.jsxs("div",{className:j.buttonContainer,children:[i.jsx(E.Button,{size:"md",variant:B,onClick:M,children:e==="sending"?"submitting…":p}),i.jsx(E.Button,{size:"md",variant:"ghost",onClick:r,children:f})]})]})},z=({buttonText:e,colorScheme:c,onCloseCallback:d,cancelButtonText:p,tags:l,onClickCallback:r,placeholder:f,trackingEvent:a,trackingLocation:h})=>i.jsx(w,{url:b(l),render:({subscribe:m,status:y,message:t})=>i.jsx(A,{status:y,message:t,subscribe:m,buttonText:e,colorScheme:c,onCloseCallback:d,onClickCallback:r,cancelButtonText:p,placeholder:f,trackingEvent:a,trackingLocation:h})});exports.Newsletter=z;

package/dist/modules/HSModal/components/MailchimpModal/components/Newsletter/Newsletter.es.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as m, jsxs as x } from "react/jsx-runtime";
 import { useState as d, useEffect as j } from "react";
-import { TextInput as z } from "../../../../../../components/TextInput/TextInput.es.js";
-import B from "../../../../../../node_modules/react-mailchimp-subscribe/es/index.es.js";
-import { isValidEmail as F } from "../../../../../../utils/isValidEmail.es.js";
-import { Button as M } from "../../../../../../components/Button/Button.es.js";
-import { EAnalyticsEventType as b } from "../../../../../../types/analytics/analytics.es.js";
-import T from "./newsletter.module.css.es.js";
+import z from "react-mailchimp-subscribe";
+import { isValidEmail as B } from "../../../../../../utils/isValidEmail.es.js";
+import { EAnalyticsEventType as F } from "../../../../../../types/analytics/analytics.es.js";
+import M from "../../../../../../modules/HSModal/components/MailchimpModal/components/Newsletter/newsletter.module.css";
+import { TextInput as b } from "../../../../../../components/TextInput/TextInput.es.js";
+import { Button as T } from "../../../../../../components/Button/Button.es.js";
 const H = (e) => `//gethealthspan.us21.list-manage.com/subscribe/post?u=664ad54ec243b3582164cf116&id=2483a4d606&f_id=0050e6e6f0&tags=${e}`, L = ({
   status: e,
   message: o,
@@ -28,7 +28,7 @@ const H = (e) => `//gethealthspan.us21.list-manage.com/subscribe/post?u=664ad54e
       i(!0), n("Please enter your email address");
       return;
     }
-    if (!F(t)) {
+    if (!B(t)) {
       i(!0), n("Please enter a valid email address");
       return;
     }
@@ -38,7 +38,7 @@ const H = (e) => `//gethealthspan.us21.list-manage.com/subscribe/post?u=664ad54e
       const V = {
         event: u,
         location: v || "",
-        type: b.interaction,
+        type: F.interaction,
         payload: {
           email: t,
           component: "HSModal",
@@ -53,9 +53,9 @@ const H = (e) => `//gethealthspan.us21.list-manage.com/subscribe/post?u=664ad54e
     e === "success" && (g(""), i(!1), n(""), E(!1), r == null || r()), e === "error" && typeof o == "string" && (i(!0), n("Subscription failed. Please try again."));
   }, [e, o]);
   const N = p === "light" ? "primary" : "primary-invert", P = p === "light" ? "primary" : "primary-invert";
-  return /* @__PURE__ */ x("div", { className: T.interface, children: [
+  return /* @__PURE__ */ x("div", { className: M.interface, children: [
     /* @__PURE__ */ m(
-      z,
+      b,
       {
         placeholder: h || "Email",
         variant: N,
@@ -66,9 +66,9 @@ const H = (e) => `//gethealthspan.us21.list-manage.com/subscribe/post?u=664ad54e
         active: w
       }
     ),
-    /* @__PURE__ */ x("div", { className: T.buttonContainer, children: [
-      /* @__PURE__ */ m(M, { size: "md", variant: P, onClick: I, children: e === "sending" ? "submitting…" : f }),
-      /* @__PURE__ */ m(M, { size: "md", variant: "ghost", onClick: r, children: l })
+    /* @__PURE__ */ x("div", { className: M.buttonContainer, children: [
+      /* @__PURE__ */ m(T, { size: "md", variant: P, onClick: I, children: e === "sending" ? "submitting…" : f }),
+      /* @__PURE__ */ m(T, { size: "md", variant: "ghost", onClick: r, children: l })
     ] })
   ] });
 }, O = ({
@@ -82,7 +82,7 @@ const H = (e) => `//gethealthspan.us21.list-manage.com/subscribe/post?u=664ad54e
   trackingEvent: a,
   trackingLocation: h
 }) => /* @__PURE__ */ m(
-  B,
+  z,
   {
     url: H(p),
     render: ({

package/dist/modules/HSModal/components/MailchimpModal/components/Newsletter/newsletter.module.css

@@ -0,0 +1,17 @@
+.interface {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    gap: 16px;
+}
+
+.input {
+    border: var(--border-width-sm) solid var(--border-color-light);
+}
+
+.buttonContainer {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}

package/dist/modules/HSModal/components/MailchimpModal/mailchimpModal.module.css

@@ -0,0 +1,119 @@
+.contentWrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 540px;
+    border-radius: var(--border-radius-lg);
+    cursor: auto;
+    pointer-events: auto;
+}
+
+.contentWrapper.light {
+    background-color: var(--color-bg-base-light);
+}
+
+.contentWrapper.dark {
+    background-color: var(--color-bg-fill-alpha-white-10);
+    backdrop-filter: blur(25px);
+}
+
+.contentWrapper[data-image-position='side-image'] {
+    width: 720px;
+    height: 465px;
+
+    & > .content {
+        order: 1;
+    }
+
+    & > .imageWrapper {
+        order: 2;
+    }
+}
+
+.contentWrapper[data-image-position='header-image'] {
+    width: 600px;
+    height: 627px;
+    flex-direction: column;
+
+    & > .content {
+        order: 2;
+        padding: 32px 48px;
+    }
+
+    & > .imageWrapper {
+        order: 1;
+        width: 100%;
+        height: 240px;
+    }
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 60px;
+    border-radius: var(--border-radius-lg);
+    gap: 32px;
+    cursor: auto;
+}
+
+.text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    text-align: center;
+}
+
+.imageWrapper {
+    display: flex;
+    padding: 8px;
+    width: 240px;
+    height: 100%;
+    flex: 0 0 auto;
+}
+
+.image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: top;
+    background-size: cover;
+    border-radius: 20px;
+}
+
+@media (width <= 768px) {
+    .contentWrapper {
+        width: calc(100% - 20px - 20px); /* paddings from left and right */
+    }
+
+    .imageWrapper {
+        display: none;
+    }
+
+    .contentWrapper[data-image-position='side-image'],
+    .contentWrapper[data-image-position='header-image'] {
+        width: calc(100% - 20px - 20px); /* paddings from left and right */
+        height: fit-content;
+        flex-direction: column;
+
+        & > .content {
+            order: 2;
+            padding: 32px;
+        }
+
+        & > .imageWrapper {
+            order: 1;
+            width: 100%;
+            height: 240px;
+        }
+    }
+
+    .content {
+        padding: 48px 32px;
+    }
+}

package/dist/modules/HSModal/hsModal.module.css

@@ -0,0 +1,23 @@
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+    cursor: pointer;
+    background-color: var(--color-bg-fill-alpha-black-40);
+    position: fixed;
+    top: 0;
+    left: 0;
+    animation: fade-in 0.3s ease-in-out;
+}

package/dist/modules/HighestStandards/HighestStandards.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),c=require("./components/TabsMenu/TabsMenu.cjs.js"),o=require("./assets/hs-bg-orchre.jpg.cjs.js"),u=require("./assets/hs-bg-indigo.jpg.cjs.js"),g=require("./assets/hs-bg-solar.jpg.cjs.js"),a=require("./highestStandards.module.css.cjs.js"),h={orchre:o.default,indigo:u.default,solar:g.default},m=({title:t,description:i,image:r,background:s,accordionItems:d})=>e.jsx("section",{className:a.default.root,children:e.jsxs("div",{className:a.default.container,children:[e.jsxs("div",{className:a.default.header,children:[e.jsx(l.HighlightedTitle,{title:t,defaultVariant:"displayMd",mobileVariant:"headingXl",className:a.default.title}),e.jsx(n.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodySm",className:a.default.description,children:i})]}),e.jsxs("div",{className:a.default.content,children:[e.jsx("div",{style:{backgroundImage:`url(${h[s]})`},className:a.default.imageContainer,children:e.jsx("img",{src:r,alt:"background image",className:a.default.image})}),e.jsx("div",{"data-gradient":s,className:a.default.accordionBackground,children:e.jsx("div",{className:a.default.accordionContainer,children:e.jsx(c.TabsMenu,{items:d})})})]})]})});exports.HighestStandards=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("./assets/hs-bg-orchre.jpg.cjs.js"),o=require("./assets/hs-bg-indigo.jpg.cjs.js"),d=require("./assets/hs-bg-solar.jpg.cjs.js"),s=require("../../src/modules/HighestStandards/highestStandards.module.css"),l=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),g=require("../../components/Typography/Typography.cjs.js"),h=require("./components/TabsMenu/TabsMenu.cjs.js"),m={orchre:c.default,indigo:o.default,solar:d.default},u=({title:i,description:r,image:t,background:a,accordionItems:n})=>e.jsx("section",{className:s.root,children:e.jsxs("div",{className:s.container,children:[e.jsxs("div",{className:s.header,children:[e.jsx(l.HighlightedTitle,{title:i,defaultVariant:"displayMd",mobileVariant:"headingXl",className:s.title}),e.jsx(g.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodySm",className:s.description,children:r})]}),e.jsxs("div",{className:s.content,children:[e.jsx("div",{style:{backgroundImage:`url(${m[a]})`},className:s.imageContainer,children:e.jsx("img",{src:t,alt:"background image",className:s.image})}),e.jsx("div",{"data-gradient":a,className:s.accordionBackground,children:e.jsx("div",{className:s.accordionContainer,children:e.jsx(h.TabsMenu,{items:n})})})]})]})});exports.HighestStandards=u;

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

@@ -1,19 +1,19 @@
 import { jsx as i, jsxs as r } from "react/jsx-runtime";
-import { HighlightedTitle as n } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as d } from "../../components/Typography/Typography.es.js";
-import { TabsMenu as c } from "./components/TabsMenu/TabsMenu.es.js";
-import l from "./assets/hs-bg-orchre.jpg.es.js";
-import g from "./assets/hs-bg-indigo.jpg.es.js";
-import h from "./assets/hs-bg-solar.jpg.es.js";
-import a from "./highestStandards.module.css.es.js";
+import n from "./assets/hs-bg-orchre.jpg.es.js";
+import d from "./assets/hs-bg-indigo.jpg.es.js";
+import c from "./assets/hs-bg-solar.jpg.es.js";
+import a from "../../modules/HighestStandards/highestStandards.module.css";
+import { HighlightedTitle as l } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as g } from "../../components/Typography/Typography.es.js";
+import { TabsMenu as h } from "./components/TabsMenu/TabsMenu.es.js";
 const p = {
-  orchre: l,
-  indigo: g,
-  solar: h
+  orchre: n,
+  indigo: d,
+  solar: c
 }, V = ({ title: o, description: t, image: s, background: e, accordionItems: m }) => /* @__PURE__ */ i("section", { className: a.root, children: /* @__PURE__ */ r("div", { className: a.container, children: [
   /* @__PURE__ */ r("div", { className: a.header, children: [
     /* @__PURE__ */ i(
-      n,
+      l,
       {
         title: o,
         defaultVariant: "displayMd",
@@ -21,7 +21,7 @@ const p = {
         className: a.title
       }
     ),
-    /* @__PURE__ */ i(d, { defaultVariant: "bodyLg", mobileVariant: "bodySm", className: a.description, children: t })
+    /* @__PURE__ */ i(g, { defaultVariant: "bodyLg", mobileVariant: "bodySm", className: a.description, children: t })
   ] }),
   /* @__PURE__ */ r("div", { className: a.content, children: [
     /* @__PURE__ */ i(
@@ -32,7 +32,7 @@ const p = {
         children: /* @__PURE__ */ i("img", { src: s, alt: "background image", className: a.image })
       }
     ),
-    /* @__PURE__ */ i("div", { "data-gradient": e, className: a.accordionBackground, children: /* @__PURE__ */ i("div", { className: a.accordionContainer, children: /* @__PURE__ */ i(c, { items: m }) }) })
+    /* @__PURE__ */ i("div", { "data-gradient": e, className: a.accordionBackground, children: /* @__PURE__ */ i("div", { className: a.accordionContainer, children: /* @__PURE__ */ i(h, { items: m }) }) })
   ] })
 ] }) });
 export {

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("react"),a=require("./components/TabsMenutem/TabsMenuItem.cjs.js"),l=require("./tabsMenu.module.css.cjs.js"),i=({items:s})=>{const[u,c]=r.useState(0),o=e=>{c(t=>t===e?null:e)};return n.jsx("div",{className:l.default.root,children:s.map((e,t)=>n.jsx(a.TabsMenuItem,{title:e.title,content:e.content,isOpen:u===t,index:t,onClick:o},t))})};exports.TabsMenu=i;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),u=require("react"),i=require("../../../../src/modules/HighestStandards/components/TabsMenu/tabsMenu.module.css"),l=require("./components/TabsMenutem/TabsMenuItem.cjs.js"),a=({items:n})=>{const[c,o]=u.useState(0),r=e=>{o(t=>t===e?null:e)};return s.jsx("div",{className:i.root,children:n.map((e,t)=>s.jsx(l.TabsMenuItem,{title:e.title,content:e.content,isOpen:c===t,index:t,onClick:r},t))})};exports.TabsMenu=a;