@zenpatient-org/healthspan-marketing-ui 0.2.84 → 0.2.86

package/dist/components/ContentTabs/contentTabs.module.css

@@ -25,6 +25,7 @@
     box-shadow: none;
     cursor: pointer;
     transition: background-color 0.3s ease;
+    text-align: left;
 }
 
 .light .tab {

package/dist/components/ImageGallery/imageGallery.module.css

@@ -14,7 +14,8 @@
 }
 
 .secondary {
-    padding: 10px 0 5px;
+    padding-bottom: 5px;
+    overflow: hidden;
     background-color: var(--color-bg-base-light);
 }
 
@@ -44,7 +45,7 @@
 }
 
 .secondary .imageWrapper {
-    aspect-ratio: 1 / 0.8;
+    aspect-ratio: initial;
 }
 
 .image {

package/dist/modules/BasicImageText/BasicImageText.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/BasicImageText/basicImageText.module.css"),t=require("../../components/Typography/Typography.cjs.js"),p=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),x=require("../../components/Button/Button.cjs.js"),y={solar:"color-text-primary-brand-solar",indigo:"color-text-primary-brand-indigo",primary:"color-text-primary",inverted:"color-text-primary-inverted"},j=({imagePosition:n,title:c,description:s,image:d,button:i,label:l,labelColor:o,mobileImage:m,colorScheme:r,buttonColor:g})=>{const h=o||(r==="dark"?"inverted":"primary");return e.jsx("section",{className:a.root,"data-color-scheme":r,children:e.jsxs("div",{className:a.container,"data-image-position":n,children:[e.jsxs("div",{className:a.textContainer,children:[l&&e.jsx(t.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.label,color:y[h],children:l}),e.jsxs("div",{className:a.titleContainer,children:[e.jsx(p.HighlightedTitle,{colorScheme:r==="dark"?"dark":"light",className:a.title,defaultVariant:"displayMd",mobileVariant:"headingXl",title:c}),e.jsx("div",{className:a.mobileImageContainer,children:e.jsx("img",{src:m,alt:"",className:a.mobileImage})}),s&&e.jsx(t.Typography,{className:a.description,defaultVariant:"bodyLg",mobileVariant:"bodyMd",children:s})]}),(i==null?void 0:i.link)&&e.jsx("div",{className:a.button,children:e.jsx(x.Button,{as:"a",href:i==null?void 0:i.link,variant:g||"secondary",size:"lg",children:(i==null?void 0:i.text)||"Get Started"})})]}),e.jsx("div",{className:a.imageContainer,children:e.jsx("img",{src:d,alt:"",className:a.image})})]})})};exports.BasicImageText=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../src/modules/BasicImageText/basicImageText.module.css"),d=require("../../components/Typography/Typography.cjs.js"),p=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Button/Button.cjs.js"),y={solar:"color-text-primary-brand-solar",indigo:"color-text-primary-brand-indigo",primary:"color-text-primary",inverted:"color-text-primary-inverted"},j=({imagePosition:t,title:m,description:r,image:o,button:a,label:l,labelColor:h,mobileImage:g,colorScheme:s,buttonColor:c})=>{const x=h||(s==="dark"?"inverted":"primary");return e.jsx("section",{className:i.root,"data-color-scheme":s,children:e.jsxs("div",{className:i.container,"data-image-position":t,children:[e.jsxs("div",{className:i.textContainer,children:[l&&e.jsx(d.Typography,{as:"p",defaultVariant:"labelSm",emphasis:!0,className:i.label,color:y[x],children:l}),e.jsxs("div",{className:i.titleContainer,children:[e.jsx(p.HighlightedTitle,{colorScheme:s==="dark"?"dark":"light",className:i.title,defaultVariant:"displayMd",mobileVariant:"headingXl",title:m}),e.jsx("div",{className:i.mobileImageContainer,children:e.jsx("img",{src:g,alt:"",className:i.mobileImage})}),r&&e.jsx(d.Typography,{className:i.description,defaultVariant:"bodyLg",mobileVariant:"bodyMd",children:r})]}),(a==null?void 0:a.link)&&e.jsxs("div",{className:i.buttonContainer,children:[e.jsx("div",{className:i.buttonDesktop,children:e.jsx(n.Button,{as:"a",href:a==null?void 0:a.link,variant:c||"secondary",size:"lg",children:(a==null?void 0:a.text)||"Get Started"})}),e.jsx("div",{className:i.buttonMobile,children:e.jsx(n.Button,{as:"a",href:a==null?void 0:a.link,variant:c||"secondary",size:"sm",children:(a==null?void 0:a.text)||"Get Started"})})]})]}),e.jsx("div",{className:i.imageContainer,children:e.jsx("img",{src:o,alt:"",className:i.image})})]})})};exports.BasicImageText=j;

package/dist/modules/BasicImageText/BasicImageText.es.js

@@ -1,57 +1,59 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import a from "../../modules/BasicImageText/basicImageText.module.css";
-import { Typography as d } from "../../components/Typography/Typography.es.js";
-import { HighlightedTitle as y } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Button as N } from "../../components/Button/Button.es.js";
+import { jsx as i, jsxs as r } from "react/jsx-runtime";
+import e from "../../modules/BasicImageText/basicImageText.module.css";
+import { Typography as c } from "../../components/Typography/Typography.es.js";
+import { HighlightedTitle as N } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Button as n } from "../../components/Button/Button.es.js";
 const v = {
   solar: "color-text-primary-brand-solar",
   indigo: "color-text-primary-brand-indigo",
   primary: "color-text-primary",
   inverted: "color-text-primary-inverted"
 }, M = ({
-  imagePosition: t,
-  title: c,
+  imagePosition: o,
+  title: t,
   description: s,
-  image: o,
-  button: i,
-  label: m,
-  labelColor: n,
-  mobileImage: p,
-  colorScheme: r,
-  buttonColor: g
+  image: h,
+  button: a,
+  label: d,
+  labelColor: p,
+  mobileImage: g,
+  colorScheme: l,
+  buttonColor: m
 }) => {
-  const h = n || (r === "dark" ? "inverted" : "primary");
-  return /* @__PURE__ */ e("section", { className: a.root, "data-color-scheme": r, children: /* @__PURE__ */ l("div", { className: a.container, "data-image-position": t, children: [
-    /* @__PURE__ */ l("div", { className: a.textContainer, children: [
-      m && /* @__PURE__ */ e(
-        d,
+  const y = p || (l === "dark" ? "inverted" : "primary");
+  return /* @__PURE__ */ i("section", { className: e.root, "data-color-scheme": l, children: /* @__PURE__ */ r("div", { className: e.container, "data-image-position": o, children: [
+    /* @__PURE__ */ r("div", { className: e.textContainer, children: [
+      d && /* @__PURE__ */ i(
+        c,
         {
           as: "p",
-          defaultVariant: "labelMd",
-          mobileVariant: "labelSm",
+          defaultVariant: "labelSm",
           emphasis: !0,
-          className: a.label,
-          color: v[h],
-          children: m
+          className: e.label,
+          color: v[y],
+          children: d
         }
       ),
-      /* @__PURE__ */ l("div", { className: a.titleContainer, children: [
-        /* @__PURE__ */ e(
-          y,
+      /* @__PURE__ */ r("div", { className: e.titleContainer, children: [
+        /* @__PURE__ */ i(
+          N,
           {
-            colorScheme: r === "dark" ? "dark" : "light",
-            className: a.title,
+            colorScheme: l === "dark" ? "dark" : "light",
+            className: e.title,
             defaultVariant: "displayMd",
             mobileVariant: "headingXl",
-            title: c
+            title: t
           }
         ),
-        /* @__PURE__ */ e("div", { className: a.mobileImageContainer, children: /* @__PURE__ */ e("img", { src: p, alt: "", className: a.mobileImage }) }),
-        s && /* @__PURE__ */ e(d, { className: a.description, defaultVariant: "bodyLg", mobileVariant: "bodyMd", children: s })
+        /* @__PURE__ */ i("div", { className: e.mobileImageContainer, children: /* @__PURE__ */ i("img", { src: g, alt: "", className: e.mobileImage }) }),
+        s && /* @__PURE__ */ i(c, { className: e.description, defaultVariant: "bodyLg", mobileVariant: "bodyMd", children: s })
       ] }),
-      (i == null ? void 0 : i.link) && /* @__PURE__ */ e("div", { className: a.button, children: /* @__PURE__ */ e(N, { as: "a", href: i == null ? void 0 : i.link, variant: g || "secondary", size: "lg", children: (i == null ? void 0 : i.text) || "Get Started" }) })
+      (a == null ? void 0 : a.link) && /* @__PURE__ */ r("div", { className: e.buttonContainer, children: [
+        /* @__PURE__ */ i("div", { className: e.buttonDesktop, children: /* @__PURE__ */ i(n, { as: "a", href: a == null ? void 0 : a.link, variant: m || "secondary", size: "lg", children: (a == null ? void 0 : a.text) || "Get Started" }) }),
+        /* @__PURE__ */ i("div", { className: e.buttonMobile, children: /* @__PURE__ */ i(n, { as: "a", href: a == null ? void 0 : a.link, variant: m || "secondary", size: "sm", children: (a == null ? void 0 : a.text) || "Get Started" }) })
+      ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: a.imageContainer, children: /* @__PURE__ */ e("img", { src: o, alt: "", className: a.image }) })
+    /* @__PURE__ */ i("div", { className: e.imageContainer, children: /* @__PURE__ */ i("img", { src: h, alt: "", className: e.image }) })
   ] }) });
 };
 export {

package/dist/modules/BasicImageText/basicImageText.module.css

@@ -18,7 +18,7 @@
     display: flex;
     width: 100%;
     max-width: var(--content-max-width);
-    padding: 64px 120px;
+    padding: 60px 120px;
     position: relative;
     align-items: center;
     gap: 96px;
@@ -39,10 +39,10 @@
 .titleContainer {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 8px;
 }
 
-.button {
+.buttonContainer {
     width: fit-content;
 }
 
@@ -62,31 +62,65 @@
     display: none;
 }
 
-@media (width <= 1200px) {
+.buttonMobile {
+    display: none;
+}
+
+@media (width <= 1240px) {
+    .container {
+        gap: 48px;
+    }
+}
+
+@media (width <= 1024px) {
+    .container {
+        padding: 60px 64px;
+        gap: 40px;
+    }
+
+    .title h2 {
+        font-size: var(--font-size-display-xs);
+    }
+
+    .description {
+        font-size: var(--font-size-body-md);
+    }
+}
+
+@media (width <= 820px) {
     .container {
-        padding: 64px 20px;
-        gap: 64px;
+        padding: 56px 48px;
+        gap: 36px;
+    }
+
+    .title h2 {
+        font-size: var(--font-size-heading-xl);
+        line-height: var(--line-height-sm);
+    }
+
+    .buttonDesktop {
+        display: none;
     }
 
-    .imageContainer {
-        max-width: 414px;
-        max-height: 414px;
+    .buttonMobile {
+        display: block;
     }
 }
 
-@media (width <= 960px) {
+@media (width <= 768px) {
     .container,
     .container[data-image-position='left'] {
         flex-direction: column;
         gap: 0px;
+        padding: 40px 20px;
     }
 
     .textContainer {
         gap: 32px;
     }
 
-    .button {
-        width: 100%;
+    .titleContainer {
+        gap: 24px;
     }
 
     .image {
@@ -105,22 +139,9 @@
         height: 100%;
         object-fit: cover;
     }
-}
-
-@media (width <= 768px) {
-    .container {
-        padding: 40px 20px;
-    }
-
-    .textContainer {
-        gap: 16px;
-    }
 
-    .titleContainer {
-        gap: 24px;
-    }
-
-    .button {
+    .buttonContainer {
+        width: 100%;
         margin-top: 16px;
     }
 }

package/dist/modules/ComparisonV2/comparisonV2.module.css

@@ -14,7 +14,7 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    gap: var(--spacing-64, 64px);
+    gap: 48px;
     padding: 5vw;
 }
 
@@ -26,7 +26,7 @@
     gap: var(--spacing-20);
     text-align: center;
     width: 100%;
-    max-width: 670px;
+    max-width: 940px;
 }
 
 .description {
@@ -162,6 +162,21 @@
     display: none;
 }
 
+@media (width <= 1024px) {
+    .header {
+        gap: 16px;
+    }
+    .header h2 {
+        font-size: var(--font-size-display-sm);
+    }
+}
+
+@media (width <= 820px) {
+    .header h2 {
+        font-size: var(--font-size-display-xs);
+    }
+}
+
 @media (min-width: 769px) {
     .hideMobile {
         display: block;

package/dist/modules/ProgramDetails/ProgramDetails.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/ProgramDetails/programDetails.module.css"),t=require("../../components/Typography/Typography.cjs.js"),n=require("./components/Features/Features.cjs.js"),o=({label:r,description:i,image:l,features:s})=>e.jsx("section",{className:a.root,children:e.jsxs("div",{className:a.container,children:[e.jsxs("div",{className:a.header,children:[r&&e.jsx(t.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,children:r}),e.jsx(t.Typography,{as:"p",defaultVariant:"preambleLg",mobileVariant:"preambleSm",children:i})]}),e.jsxs("div",{className:a.content,children:[e.jsx("img",{className:a.image,src:l,alt:"program detatils"}),s.length>0&&e.jsx(n.Features,{features:s})]})]})});exports.ProgramDetails=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../src/modules/ProgramDetails/programDetails.module.css"),t=require("../../components/Typography/Typography.cjs.js"),l=require("./components/Features/Features.cjs.js"),o=({label:r,description:i,image:n,features:a})=>e.jsx("section",{className:s.root,children:e.jsxs("div",{className:s.container,children:[e.jsxs("div",{className:s.header,children:[r&&e.jsx(t.Typography,{as:"p",defaultVariant:"labelSm",emphasis:!0,children:r}),e.jsx(t.Typography,{as:"p",defaultVariant:"preambleLg",mobileVariant:"preambleSm",children:i})]}),e.jsxs("div",{className:s.content,children:[e.jsx("img",{className:s.image,src:n,alt:"program detatils"}),a.length>0&&e.jsx(l.Features,{features:a})]})]})});exports.ProgramDetails=o;

package/dist/modules/ProgramDetails/ProgramDetails.es.js

@@ -1,15 +1,15 @@
 import { jsx as a, jsxs as r } from "react/jsx-runtime";
 import e from "../../modules/ProgramDetails/programDetails.module.css";
-import { Typography as l } from "../../components/Typography/Typography.es.js";
+import { Typography as t } from "../../components/Typography/Typography.es.js";
 import { Features as o } from "./components/Features/Features.es.js";
-const h = ({ label: i, description: m, image: s, features: t }) => /* @__PURE__ */ a("section", { className: e.root, children: /* @__PURE__ */ r("div", { className: e.container, children: [
+const h = ({ label: i, description: m, image: l, features: s }) => /* @__PURE__ */ a("section", { className: e.root, children: /* @__PURE__ */ r("div", { className: e.container, children: [
   /* @__PURE__ */ r("div", { className: e.header, children: [
-    i && /* @__PURE__ */ a(l, { as: "p", defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, children: i }),
-    /* @__PURE__ */ a(l, { as: "p", defaultVariant: "preambleLg", mobileVariant: "preambleSm", children: m })
+    i && /* @__PURE__ */ a(t, { as: "p", defaultVariant: "labelSm", emphasis: !0, children: i }),
+    /* @__PURE__ */ a(t, { as: "p", defaultVariant: "preambleLg", mobileVariant: "preambleSm", children: m })
   ] }),
   /* @__PURE__ */ r("div", { className: e.content, children: [
-    /* @__PURE__ */ a("img", { className: e.image, src: s, alt: "program detatils" }),
-    t.length > 0 && /* @__PURE__ */ a(o, { features: t })
+    /* @__PURE__ */ a("img", { className: e.image, src: l, alt: "program detatils" }),
+    s.length > 0 && /* @__PURE__ */ a(o, { features: s })
   ] })
 ] }) });
 export {

package/dist/modules/ProgramDetails/programDetails.module.css

@@ -39,7 +39,34 @@
     aspect-ratio: 1 / 1;
 }
 
+@media (width <= 1240px) {
+    .image {
+        max-width: 470px;
+    }
+}
+
 @media (width <= 1024px) {
+    .container {
+        padding: 64px;
+        gap: 32px;
+    }
+
+    .content {
+        gap: 40px;
+    }
+
+    .image {
+        max-width: 410px;
+    }
+}
+
+@media (width <= 820px) {
+    .container {
+        padding: 56px 48px;
+    }
+}
+
+@media (width <= 768px) {
     .container {
         padding: 64px 20px 20px;
         gap: 40px;

package/dist/modules/TotalCare/totalCare.module.css

@@ -37,6 +37,10 @@
     padding-top: var(--spacing-48);
 }
 
+.tags > div {
+    text-align: left;
+}
+
 .imageWrap {
     display: flex;
     align-items: center;
@@ -109,19 +113,41 @@
 
 @media (width <= 1024px) {
     .container {
-        padding: var(--spacing-120) var(--spacing-20);
+        padding: var(--spacing-64);
     }
 
     .root[data-version='v1'] .image {
         padding: var(--spacing-12);
     }
+
+    .header h2 {
+        font-size: var(--font-size-display-sm);
+    }
+
+    .content {
+        gap: 40px;
+    }
 }
 
-@media screen and (width <= 768px) {
+@media (width <= 820px) {
     .container {
-        padding: var(--spacing-64) var(--spacing-20);
+        padding: var(--spacing-56) var(--spacing-48);
     }
+    
+    .header {
+        margin-bottom: 48px;
+    }
+
+    .header h2 {
+        font-size: var(--font-size-display-xs);
+    }
+
+    .content {
+        gap: 36px;
+    }
+}
 
+@media screen and (width <= 768px) {
     .header {
         margin-bottom: var(--spacing-40);
     }

package/dist/modules/YourProtocol/YourProtocol.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/YourProtocol/yourProtocol.module.css"),n=require("../../types/analytics/analytics.cjs.js"),h=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),y=require("../../components/Icon/Icon.cjs.js"),r=require("../../components/Typography/Typography.cjs.js"),g=require("../../components/Button/Button.cjs.js"),j=({title:t,image:o,tags:c,button:s,colorScheme:l="light"})=>{const d={event:n.EAnalyticsEvent.ctaClicked,type:n.EAnalyticsEventType.interaction,component:"YourProtocol",element:"Callback",payload:{ctaLink:(s==null?void 0:s.link)||"no_link"}},p=l==="dark"?"secondary":"primary";return e.jsx("section",{className:a.root,"data-scheme":l,children:e.jsxs("div",{className:a.container,children:[e.jsx(h.HighlightedTitle,{title:t,className:a.title,defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:l}),c.length>0&&e.jsx("div",{className:a.tagsList,children:c.map((i,m)=>e.jsxs("div",{className:a.tagItem,children:[i.icon&&e.jsx("div",{className:a.iconWrapper,children:e.jsx(y.Icon,{name:i.icon,className:a.icon})}),e.jsxs("div",{className:a.tagText,children:[e.jsx(r.Typography,{className:a.tagLabel,as:"p",defaultVariant:"headingXs",children:i.label}),i.description&&e.jsx(r.Typography,{className:a.tagDescription,as:"p",defaultVariant:"bodyMd",children:i.description})]})]},m))}),(s==null?void 0:s.link)&&(s==null?void 0:s.label)&&e.jsx("div",{className:a.callbackButton,children:e.jsx(g.Button,{href:s.link,as:"a",analyticsProps:d,size:"lg",variant:p,children:s.label})}),e.jsx("img",{src:o,alt:"Your Protocol",className:a.image})]})})};exports.YourProtocol=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/YourProtocol/yourProtocol.module.css"),n=require("../../types/analytics/analytics.cjs.js"),y=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),h=require("../../components/Icon/Icon.cjs.js"),r=require("../../components/Typography/Typography.cjs.js"),g=require("../../components/Button/Button.cjs.js"),j=({title:t,image:o,tags:c,button:i,colorScheme:l="light"})=>{const d={event:n.EAnalyticsEvent.ctaClicked,type:n.EAnalyticsEventType.interaction,component:"YourProtocol",element:"Callback",payload:{ctaLink:(i==null?void 0:i.link)||"no_link"}},m=l==="dark"?"secondary":"primary";return e.jsx("section",{className:a.root,"data-scheme":l,children:e.jsxs("div",{className:a.container,children:[e.jsx(y.HighlightedTitle,{title:t,className:a.title,defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:l}),c.length>0&&e.jsx("div",{className:a.tagsList,children:c.map((s,p)=>e.jsxs("div",{className:a.tagItem,children:[s.icon&&e.jsx("div",{className:a.iconWrapper,children:e.jsx(h.Icon,{name:s.icon,className:a.icon})}),e.jsxs("div",{className:a.tagText,children:[e.jsx(r.Typography,{className:a.tagLabel,as:"p",defaultVariant:"preambleSm",children:s.label}),s.description&&e.jsx(r.Typography,{className:a.tagDescription,as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:s.description})]})]},p))}),(i==null?void 0:i.link)&&(i==null?void 0:i.label)&&e.jsx("div",{className:a.callbackButton,children:e.jsx(g.Button,{href:i.link,as:"a",analyticsProps:d,size:"lg",variant:m,children:i.label})}),e.jsx("img",{src:o,alt:"Your Protocol",className:a.image})]})})};exports.YourProtocol=j;

package/dist/modules/YourProtocol/YourProtocol.es.js

@@ -1,11 +1,11 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import a from "../../modules/YourProtocol/yourProtocol.module.css";
 import { EAnalyticsEventType as h, EAnalyticsEvent as y } from "../../types/analytics/analytics.es.js";
 import { HighlightedTitle as N } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { Icon as f } from "../../components/Icon/Icon.es.js";
 import { Typography as n } from "../../components/Typography/Typography.es.js";
 import { Button as v } from "../../components/Button/Button.es.js";
-const L = ({ title: o, image: m, tags: c, button: i, colorScheme: r = "light" }) => {
+const L = ({ title: m, image: o, tags: s, button: i, colorScheme: r = "light" }) => {
   const d = {
     event: y.ctaClicked,
     type: h.interaction,
@@ -15,26 +15,35 @@ const L = ({ title: o, image: m, tags: c, button: i, colorScheme: r = "light" })
       ctaLink: (i == null ? void 0 : i.link) || "no_link"
     }
   }, t = r === "dark" ? "secondary" : "primary";
-  return /* @__PURE__ */ e("section", { className: a.root, "data-scheme": r, children: /* @__PURE__ */ s("div", { className: a.container, children: [
+  return /* @__PURE__ */ e("section", { className: a.root, "data-scheme": r, children: /* @__PURE__ */ c("div", { className: a.container, children: [
     /* @__PURE__ */ e(
       N,
       {
-        title: o,
+        title: m,
         className: a.title,
         defaultVariant: "displayMd",
         mobileVariant: "headingXl",
         colorScheme: r
       }
     ),
-    c.length > 0 && /* @__PURE__ */ e("div", { className: a.tagsList, children: c.map((l, p) => /* @__PURE__ */ s("div", { className: a.tagItem, children: [
+    s.length > 0 && /* @__PURE__ */ e("div", { className: a.tagsList, children: s.map((l, p) => /* @__PURE__ */ c("div", { className: a.tagItem, children: [
       l.icon && /* @__PURE__ */ e("div", { className: a.iconWrapper, children: /* @__PURE__ */ e(f, { name: l.icon, className: a.icon }) }),
-      /* @__PURE__ */ s("div", { className: a.tagText, children: [
-        /* @__PURE__ */ e(n, { className: a.tagLabel, as: "p", defaultVariant: "headingXs", children: l.label }),
-        l.description && /* @__PURE__ */ e(n, { className: a.tagDescription, as: "p", defaultVariant: "bodyMd", children: l.description })
+      /* @__PURE__ */ c("div", { className: a.tagText, children: [
+        /* @__PURE__ */ e(n, { className: a.tagLabel, as: "p", defaultVariant: "preambleSm", children: l.label }),
+        l.description && /* @__PURE__ */ e(
+          n,
+          {
+            className: a.tagDescription,
+            as: "p",
+            defaultVariant: "bodyMd",
+            mobileVariant: "bodySm",
+            children: l.description
+          }
+        )
       ] })
     ] }, p)) }),
     (i == null ? void 0 : i.link) && (i == null ? void 0 : i.label) && /* @__PURE__ */ e("div", { className: a.callbackButton, children: /* @__PURE__ */ e(v, { href: i.link, as: "a", analyticsProps: d, size: "lg", variant: t, children: i.label }) }),
-    /* @__PURE__ */ e("img", { src: m, alt: "Your Protocol", className: a.image })
+    /* @__PURE__ */ e("img", { src: o, alt: "Your Protocol", className: a.image })
   ] }) });
 };
 export {

package/dist/modules/YourProtocol/yourProtocol.module.css

@@ -14,52 +14,54 @@
     display: grid;
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
-    gap: 32px;
-    padding: 70px 120px;
+    grid-template-areas:
+        'title title'
+        'tags image'
+        'button image';
+    gap: 32px 96px;
+    padding: 72px 120px;
     max-width: var(--content-max-width);
-    align-items: start;
 }
 
 .title {
-    grid-column: 1;
-    grid-row: 1;
+    grid-area: title;
+    max-width: 780px;
+    margin-bottom: 16px;
 }
 
 .tagsList {
-    grid-column: 1;
-    grid-row: 2;
+    grid-area: tags;
     display: flex;
     flex-direction: column;
 }
 
 .callbackButton {
-    grid-column: 1;
-    grid-row: 3;
+    grid-area: button;
 }
 
 .image {
-    grid-column: 2;
-    grid-row: 1 / 4;
-    width: 477px;
-    height: 636px;
-    object-fit: cover;
+    grid-area: image;
+    max-width: 477px;
+    max-height: 622px;
     border-radius: 19px;
-}
-
-.title,
-.tagsList,
-.callbackButton {
-    width: 100%;
-    max-width: 627px;
+    object-fit: cover;
 }
 
 .tagItem {
-    padding: 16px 0;
+    padding: 18px 0;
     display: flex;
     gap: 16px;
     border-bottom: 1px solid var(--border-color-light);
 }
 
+.tagItem:first-child {
+    padding-top: 0;
+}
+
+.tagItem:last-child {
+    padding-bottom: 0;
+}
+
 .root[data-scheme='dark'] .tagItem {
     border-bottom: 1px solid var(--border-color-alpha-white-10);
 }
@@ -113,56 +115,156 @@
     color: var(--color-white);
 }
 
-@media (max-width: 1300px) {
+@media (max-width: 1240px) {
+    .container {
+        padding: 64px 120px;
+        gap: 32px 64px;
+    }
+
+    .title h2 {
+        font-size: var(--font-size-display-md);
+        line-height: var(--line-height-xs);
+        letter-spacing: var(--letter-spacing-negative-xl);
+    }
+}
+
+@media (max-width: 1150px) {
+    .container {
+        gap: 32px 56px;
+        padding: 56px 64px;
+    }
+
+    .title {
+        margin-bottom: 8px;
+    }
+
+    .title h2 {
+        font-size: var(--font-size-display-sm);
+        line-height: var(--line-height-xs);
+        letter-spacing: var(--letter-spacing-negative-xl);
+    }
+
+    .image {
+        grid-area: image;
+        max-width: 360px;
+        max-height: 480px;
+        border-radius: 14px;
+    }
+}
+
+@media (max-width: 820px) {
     .container {
         grid-template-columns: 1fr;
         grid-template-rows: auto auto auto auto;
-        padding: 64px 17px;
+        grid-template-areas:
+            'title'
+            'image'
+            'tags'
+            'button';
+        padding: 56px 48px;
+        gap: 32px;
     }
 
     .title {
-        grid-column: 1;
-        grid-row: 1;
-        max-width: 685px;
+        max-width: unset;
+    }
+
+    .title h2 {
+        font-size: var(--font-size-display-xs);
     }
 
     .image {
-        grid-column: 1;
-        grid-row: 2;
         width: 100%;
-        height: 350px;
+        max-width: unset;
+        max-height: 350px;
     }
 
     .tagsList {
-        grid-column: 1;
-        grid-row: 3;
+        margin-top: 16px;
     }
+}
 
-    .tagsList,
-    .callbackButton {
-        max-width: unset;
+@media (max-width: 768px) {
+    .container {
+        padding: 48px 32px;
     }
 
-    .callbackButton {
-        grid-column: 1;
-        grid-row: 4;
+    .title {
+        margin-bottom: unset;
+    }
+
+    .tagsList {
+        margin-top: 8px;
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 600px) {
+
+    .image {
+        max-height: 270px;
+    }
     .container {
-        gap: 20px;
+        padding: 48px 28px;
+    }
+
+    .tagsList {
+        margin-top: unset;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 40px 24px; 
+    }
+
+    .title {
+        margin-bottom: -4px;
     }
 
-    .tagItem {
-        padding: 24px 0;
+    .title h2 {
+        font-size: var(--font-size-heading-xl);
+        line-height: var(--line-height-sm);
+        letter-spacing: var(--letter-spacing-negative-xl);
     }
 
     .image {
-        height: 240px;
+        max-height: 215px;
+    }
+
+    .iconWrapper {
+        width: 42px;
+        height: 42px;
+        padding: 10px;
+        border-radius: 6.3px;
+    }
+
+    .icon {
+        width: 22px;
+        height: 22px;
+    }
+}
+
+@media (max-width: 375px) {
+    .container {
+        padding: 32px 20px;
     }
 
     .title {
-        max-width: 335px;
+        margin-bottom: -8px;
+    }
+
+    .image {
+        max-height: 167px;
     }
 }
+
+@media (max-width: 320px) {
+    .container {
+        padding: 28px 16px;
+        gap: 24px;
+    }
+
+    .title {
+        margin-bottom: -4px;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.84",
+    "version": "0.2.86",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",