@zenpatient-org/healthspan-marketing-ui 0.2.59 → 0.2.60

package/dist/modules/ImageWithBenefits/imageWithBenefits.module.css

@@ -124,12 +124,20 @@
     .content {
         padding: 60px 40px;
     }
+    .title {
+        max-width: 380px;
+        font-size: var(--font-size-heading-lg)
+    }
 }
 
 @media (width < 820px) and (width >= 768px) {
     .content {
         padding: 32px 48px;
     }
+    .title {
+        max-width: 320px;
+        font-size: var(--font-size-heading-md)
+    }
 }
 
 @media (width <= 768px) {

package/dist/modules/ImageWithText/ImageWithText.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("../../utils/cn/cn.cjs.js"),n=require("./constants.cjs.js"),i=require("../../src/modules/ImageWithText/imageWithText.module.css"),b=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),m=require("./components/ButtonWithColors/ButtonWithColors.cjs.js"),T=({image:g,text:t,title:s,view:e,colorScheme:u,textColor:p,mobileTextColor:x,titleColor:c,mobileTitleColor:o,titleHighlightColor:r,mobileTitleHighlightColor:h,mobileImage:y,button:d})=>a.jsx("section",{className:i.root,"data-scheme":u,children:a.jsxs("div",{className:i.container,"data-view":e,children:[a.jsxs("div",{className:i.imageContainer,children:[a.jsx("img",{src:g,alt:"background image",className:i.image,"data-color":p}),a.jsx("img",{src:y||g,alt:"mobile background image",className:i.mobileImage})]}),a.jsxs("div",{className:j.cn(i.content,{[i.textAlignLeft]:e==="plain"||e==="plain_with_title",[i.textAlignRight]:e==="complex"}),"data-view":e,"data-text-color":p,"data-mobile-text-color":x,"data-title-color":c,"data-mobile-title-color":o,"data-title-highlight-color":r,"data-mobile-title-highlight-color":h,children:[e==="complex"&&a.jsxs("div",{className:i.richTextContainer,style:{"--highlight-color-custom":n.COLORS[c||"white"],"--highlight-emphasize-custom":n.COLORS[r||"white"],"--highlight-color-custom-mobile":n.COLORS[o||"white"],"--highlight-emphasize-custom-mobile":n.COLORS[h||"white"]},children:[s&&a.jsx(b.HighlightedTitle,{colorScheme:c||r||o||h?"custom":"dark",title:s,defaultVariant:"displayXs",mobileVariant:"headingLg"}),t&&a.jsx(l.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t}),a.jsx(m.ButtonWithColors,{...d})]}),e==="plain"&&t&&a.jsxs("div",{className:i.textContainer,children:[a.jsx(l.Typography,{defaultVariant:"displayXs",mobileVariant:"headingXs",children:t}),a.jsx(m.ButtonWithColors,{...d})]}),e==="plain_with_title"&&a.jsxs("div",{className:i.plainWithTitleContainer,children:[s&&a.jsx(l.Typography,{defaultVariant:"displayMd",mobileVariant:"headingLg",className:i.titleOfPlainWithTitle,children:s}),t&&a.jsx(l.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodyMd",className:i.textOfPlainWithTitle,children:t}),a.jsx(m.ButtonWithColors,{...d})]})]})]})});exports.ImageWithText=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("../../utils/cn/cn.cjs.js"),n=require("./constants.cjs.js"),e=require("../../src/modules/ImageWithText/imageWithText.module.css"),T=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),m=require("./components/ButtonWithColors/ButtonWithColors.cjs.js"),b=({image:g,text:t,title:s,view:i,colorScheme:u,textColor:p,mobileTextColor:x,titleColor:c,mobileTitleColor:o,titleHighlightColor:r,mobileTitleHighlightColor:h,mobileImage:y,button:d})=>a.jsx("section",{className:e.root,"data-scheme":u,children:a.jsxs("div",{className:e.container,"data-view":i,children:[a.jsxs("div",{className:e.imageContainer,children:[a.jsx("img",{src:g,alt:"background image",className:e.image,"data-color":p}),a.jsx("img",{src:y||g,alt:"mobile background image",className:e.mobileImage})]}),a.jsxs("div",{className:j.cn(e.content,{[e.textAlignLeft]:i==="plain"||i==="plain_with_title",[e.textAlignRight]:i==="complex"}),"data-view":i,"data-text-color":p,"data-mobile-text-color":x,"data-title-color":c,"data-mobile-title-color":o,"data-title-highlight-color":r,"data-mobile-title-highlight-color":h,children:[i==="complex"&&a.jsxs("div",{className:e.richTextContainer,style:{"--highlight-color-custom":n.COLORS[c||"white"],"--highlight-emphasize-custom":n.COLORS[r||"white"],"--highlight-color-custom-mobile":n.COLORS[o||"white"],"--highlight-emphasize-custom-mobile":n.COLORS[h||"white"]},children:[s&&a.jsx(T.HighlightedTitle,{colorScheme:c||r||o||h?"custom":"dark",title:s,className:e.richTextContainerTitle,defaultVariant:"headingXl",mobileVariant:"headingLg"}),t&&a.jsx(l.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t}),a.jsx(m.ButtonWithColors,{...d})]}),i==="plain"&&t&&a.jsxs("div",{className:e.textContainer,children:[a.jsx(l.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingXs",className:e.textOfPlain,children:t}),a.jsx(m.ButtonWithColors,{...d})]}),i==="plain_with_title"&&a.jsxs("div",{className:e.plainWithTitleContainer,children:[s&&a.jsx(l.Typography,{as:"h3",defaultVariant:"displaySm",className:e.titleOfPlainWithTitle,children:s}),t&&a.jsx(l.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",className:e.textOfPlainWithTitle,children:t}),a.jsx(m.ButtonWithColors,{...d})]})]})]})});exports.ImageWithText=b;

package/dist/modules/ImageWithText/ImageWithText.es.js

@@ -1,90 +1,93 @@
 import { jsx as i, jsxs as l } from "react/jsx-runtime";
-import { cn as N } from "../../utils/cn/cn.es.js";
+import { cn as x } from "../../utils/cn/cn.es.js";
 import { COLORS as m } from "./constants.es.js";
 import a from "../../modules/ImageWithText/imageWithText.module.css";
-import { HighlightedTitle as V } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as c } from "../../components/Typography/Typography.es.js";
+import { HighlightedTitle as y } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as r } from "../../components/Typography/Typography.es.js";
 import { ButtonWithColors as g } from "./components/ButtonWithColors/ButtonWithColors.es.js";
-const S = ({
+const L = ({
   image: p,
-  text: e,
-  title: r,
-  view: t,
-  colorScheme: b,
+  text: t,
+  title: c,
+  view: e,
+  colorScheme: N,
   textColor: f,
   mobileTextColor: u,
-  titleColor: d,
-  mobileTitleColor: n,
+  titleColor: n,
+  mobileTitleColor: s,
   titleHighlightColor: o,
-  mobileTitleHighlightColor: s,
-  mobileImage: y,
+  mobileTitleHighlightColor: d,
+  mobileImage: b,
   button: h
-}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": b, children: /* @__PURE__ */ l("div", { className: a.container, "data-view": t, children: [
+}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": N, children: /* @__PURE__ */ l("div", { className: a.container, "data-view": e, children: [
   /* @__PURE__ */ l("div", { className: a.imageContainer, children: [
     /* @__PURE__ */ i("img", { src: p, alt: "background image", className: a.image, "data-color": f }),
-    /* @__PURE__ */ i("img", { src: y || p, alt: "mobile background image", className: a.mobileImage })
+    /* @__PURE__ */ i("img", { src: b || p, alt: "mobile background image", className: a.mobileImage })
   ] }),
   /* @__PURE__ */ l(
     "div",
     {
-      className: N(a.content, {
-        [a.textAlignLeft]: t === "plain" || t === "plain_with_title",
-        [a.textAlignRight]: t === "complex"
+      className: x(a.content, {
+        [a.textAlignLeft]: e === "plain" || e === "plain_with_title",
+        [a.textAlignRight]: e === "complex"
       }),
-      "data-view": t,
+      "data-view": e,
       "data-text-color": f,
       "data-mobile-text-color": u,
-      "data-title-color": d,
-      "data-mobile-title-color": n,
+      "data-title-color": n,
+      "data-mobile-title-color": s,
       "data-title-highlight-color": o,
-      "data-mobile-title-highlight-color": s,
+      "data-mobile-title-highlight-color": d,
       children: [
-        t === "complex" && /* @__PURE__ */ l(
+        e === "complex" && /* @__PURE__ */ l(
           "div",
           {
             className: a.richTextContainer,
             style: {
-              "--highlight-color-custom": m[d || "white"],
+              "--highlight-color-custom": m[n || "white"],
               "--highlight-emphasize-custom": m[o || "white"],
-              "--highlight-color-custom-mobile": m[n || "white"],
-              "--highlight-emphasize-custom-mobile": m[s || "white"]
+              "--highlight-color-custom-mobile": m[s || "white"],
+              "--highlight-emphasize-custom-mobile": m[d || "white"]
             },
             children: [
-              r && /* @__PURE__ */ i(
-                V,
+              c && /* @__PURE__ */ i(
+                y,
                 {
-                  colorScheme: d || o || n || s ? "custom" : "dark",
-                  title: r,
-                  defaultVariant: "displayXs",
+                  colorScheme: n || o || s || d ? "custom" : "dark",
+                  title: c,
+                  className: a.richTextContainerTitle,
+                  defaultVariant: "headingXl",
                   mobileVariant: "headingLg"
                 }
               ),
-              e && /* @__PURE__ */ i(c, { defaultVariant: "bodyMd", mobileVariant: "bodySm", children: e }),
+              t && /* @__PURE__ */ i(r, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", children: t }),
               /* @__PURE__ */ i(g, { ...h })
             ]
           }
         ),
-        t === "plain" && e && /* @__PURE__ */ l("div", { className: a.textContainer, children: [
-          /* @__PURE__ */ i(c, { defaultVariant: "displayXs", mobileVariant: "headingXs", children: e }),
-          /* @__PURE__ */ i(g, { ...h })
-        ] }),
-        t === "plain_with_title" && /* @__PURE__ */ l("div", { className: a.plainWithTitleContainer, children: [
-          r && /* @__PURE__ */ i(
-            c,
+        e === "plain" && t && /* @__PURE__ */ l("div", { className: a.textContainer, children: [
+          /* @__PURE__ */ i(
+            r,
             {
-              defaultVariant: "displayMd",
-              mobileVariant: "headingLg",
-              className: a.titleOfPlainWithTitle,
-              children: r
+              as: "p",
+              defaultVariant: "headingXl",
+              mobileVariant: "headingXs",
+              className: a.textOfPlain,
+              children: t
             }
           ),
-          e && /* @__PURE__ */ i(
-            c,
+          /* @__PURE__ */ i(g, { ...h })
+        ] }),
+        e === "plain_with_title" && /* @__PURE__ */ l("div", { className: a.plainWithTitleContainer, children: [
+          c && /* @__PURE__ */ i(r, { as: "h3", defaultVariant: "displaySm", className: a.titleOfPlainWithTitle, children: c }),
+          t && /* @__PURE__ */ i(
+            r,
             {
+              as: "p",
               defaultVariant: "bodyMd",
               mobileVariant: "bodyMd",
               className: a.textOfPlainWithTitle,
-              children: e
+              children: t
             }
           ),
           /* @__PURE__ */ i(g, { ...h })
@@ -94,5 +97,5 @@ const S = ({
   )
 ] }) });
 export {
-  S as ImageWithText
+  L as ImageWithText
 };

package/dist/modules/ImageWithText/imageWithText.module.css

@@ -16,12 +16,12 @@
     align-items: center;
     width: 100%;
     max-width: var(--content-max-width);
-    padding: 64px 60px 120px;
+    margin: 64px 60px 120px;
     position: relative;
 }
 
 .container[data-view='plain_with_title'] {
-    padding: 120px 60px;
+    margin: 120px 60px;
 }
 
 .content {
@@ -33,15 +33,16 @@
 }
 
 .content[data-view='plain_with_title'] {
-    padding: 0px 90px;
+    display: block;
+    width: 50%;
 }
 
 .textAlignLeft {
-    left: 60px;
+    left: 0;
 }
 
 .textAlignRight {
-    right: 60px;
+    right: 0;
 }
 
 .textContainer {
@@ -63,7 +64,6 @@
     display: flex;
     flex-direction: column;
     gap: 24px;
-    max-width: 480px;
     color: var(--color-text-primary-inverted);
 }
 
@@ -96,28 +96,49 @@
     .content {
         padding: 40px;
     }
-    .textContainer span {
+    .content[data-view='complex'] {
+        padding: 0px 20px;
+    }
+    .textOfPlain {
         font-size: var(--font-size-heading-lg);
     }
+    .richTextContainer {
+        max-width: 440px;
+    }
+    .titleOfPlainWithTitle {
+        font-size: var(--font-size-heading-xl);
+    }
 }
 
 @media (width < 820px) and (width >= 768px) {
     .content {
         padding: 40px 20px;
     }
-    .textContainer span {
+    .textContainer {
+        font-size: var(--font-size-heading-sm);
+    }
+    .textOfPlain {
         font-size: var(--font-size-heading-md);
     }
+    .richTextContainer {
+        max-width: 440px;
+    }
+    .richTextContainerTitle {
+        font-size: var(--font-size-heading-lg);
+    }
+    .titleOfPlainWithTitle {
+        font-size: var(--font-size-heading-lg);
+    }
 }
 
 @media (width <= 768px) {
     .container[data-view='plain_with_title'] {
-        padding: 64px 20px;
+        margin: 64px 20px;
     }
 
     .container {
         gap: 20px;
-        padding: 40px 20px;
+        margin: 40px 20px;
     }
 
     .content {
@@ -126,6 +147,7 @@
     }
 
     .content[data-view='plain_with_title'] {
+        width: 100%;
         padding: 0;
     }
 
@@ -143,6 +165,10 @@
         gap: 16px;
     }
 
+    .richTextContainerTitle {
+        font-size: var(--font-size-heading-xl);
+    }
+
     .imageContainer {
         border-radius: var(--border-radius-lg);
     }

package/package.json

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