@zenpatient-org/healthspan-marketing-ui 0.2.62 → 0.2.64

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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("../../utils/cn/cn.cjs.js"),l=require("./constants.cjs.js"),i=require("../../src/modules/ImageWithText/imageWithText.module.css"),b=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=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":l.COLORS[c||"white"],"--highlight-emphasize-custom":l.COLORS[r||"white"],"--highlight-color-custom-mobile":l.COLORS[o||"white"],"--highlight-emphasize-custom-mobile":l.COLORS[h||"white"]},children:[s&&a.jsx(b.HighlightedTitle,{colorScheme:c||r||o||h?"custom":"dark",className:i.richTextTitle,title:s,as:"div",defaultVariant:"displayXs",mobileVariant:"headingXl"}),t&&a.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t}),a.jsx(m.ButtonWithColors,{...d})]}),e==="plain"&&t&&a.jsxs("div",{className:i.textContainer,children:[a.jsx(n.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingXs",className:i.textOfPlain,children:t}),a.jsx(m.ButtonWithColors,{...d})]}),e==="plain_with_title"&&a.jsxs("div",{className:i.plainWithTitleContainer,children:[s&&a.jsx(n.Typography,{as:"h3",defaultVariant:"displaySm",mobileVariant:"headingXl",className:i.titleOfPlainWithTitle,children:s}),t&&a.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",className:i.textOfPlainWithTitle,children:t}),a.jsx(m.ButtonWithColors,{...d})]})]})]})});exports.ImageWithText=T;

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

@@ -1,67 +1,68 @@
 import { jsx as i, jsxs as l } from "react/jsx-runtime";
-import { cn as x } from "../../utils/cn/cn.es.js";
-import { COLORS as m } from "./constants.es.js";
+import { cn as y } from "../../utils/cn/cn.es.js";
+import { COLORS as c } from "./constants.es.js";
 import a from "../../modules/ImageWithText/imageWithText.module.css";
-import { HighlightedTitle as y } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { HighlightedTitle as V } 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 L = ({
-  image: p,
+import { ButtonWithColors as p } from "./components/ButtonWithColors/ButtonWithColors.es.js";
+const k = ({
+  image: g,
   text: t,
-  title: c,
+  title: m,
   view: e,
   colorScheme: N,
   textColor: f,
-  mobileTextColor: u,
-  titleColor: n,
-  mobileTitleColor: s,
-  titleHighlightColor: o,
-  mobileTitleHighlightColor: d,
-  mobileImage: b,
+  mobileTextColor: b,
+  titleColor: s,
+  mobileTitleColor: n,
+  titleHighlightColor: d,
+  mobileTitleHighlightColor: o,
+  mobileImage: u,
   button: h
 }) => /* @__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: b || p, alt: "mobile background image", className: a.mobileImage })
+    /* @__PURE__ */ i("img", { src: g, alt: "background image", className: a.image, "data-color": f }),
+    /* @__PURE__ */ i("img", { src: u || g, alt: "mobile background image", className: a.mobileImage })
   ] }),
   /* @__PURE__ */ l(
     "div",
     {
-      className: x(a.content, {
+      className: y(a.content, {
         [a.textAlignLeft]: e === "plain" || e === "plain_with_title",
         [a.textAlignRight]: e === "complex"
       }),
       "data-view": e,
       "data-text-color": f,
-      "data-mobile-text-color": u,
-      "data-title-color": n,
-      "data-mobile-title-color": s,
-      "data-title-highlight-color": o,
-      "data-mobile-title-highlight-color": d,
+      "data-mobile-text-color": b,
+      "data-title-color": s,
+      "data-mobile-title-color": n,
+      "data-title-highlight-color": d,
+      "data-mobile-title-highlight-color": o,
       children: [
         e === "complex" && /* @__PURE__ */ l(
           "div",
           {
             className: a.richTextContainer,
             style: {
-              "--highlight-color-custom": m[n || "white"],
-              "--highlight-emphasize-custom": m[o || "white"],
-              "--highlight-color-custom-mobile": m[s || "white"],
-              "--highlight-emphasize-custom-mobile": m[d || "white"]
+              "--highlight-color-custom": c[s || "white"],
+              "--highlight-emphasize-custom": c[d || "white"],
+              "--highlight-color-custom-mobile": c[n || "white"],
+              "--highlight-emphasize-custom-mobile": c[o || "white"]
             },
             children: [
-              c && /* @__PURE__ */ i(
-                y,
+              m && /* @__PURE__ */ i(
+                V,
                 {
-                  colorScheme: n || o || s || d ? "custom" : "dark",
-                  title: c,
-                  className: a.richTextContainerTitle,
-                  defaultVariant: "headingXl",
-                  mobileVariant: "headingLg"
+                  colorScheme: s || d || n || o ? "custom" : "dark",
+                  className: a.richTextTitle,
+                  title: m,
+                  as: "div",
+                  defaultVariant: "displayXs",
+                  mobileVariant: "headingXl"
                 }
               ),
               t && /* @__PURE__ */ i(r, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", children: t }),
-              /* @__PURE__ */ i(g, { ...h })
+              /* @__PURE__ */ i(p, { ...h })
             ]
           }
         ),
@@ -76,10 +77,19 @@ const L = ({
               children: t
             }
           ),
-          /* @__PURE__ */ i(g, { ...h })
+          /* @__PURE__ */ i(p, { ...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 }),
+          m && /* @__PURE__ */ i(
+            r,
+            {
+              as: "h3",
+              defaultVariant: "displaySm",
+              mobileVariant: "headingXl",
+              className: a.titleOfPlainWithTitle,
+              children: m
+            }
+          ),
           t && /* @__PURE__ */ i(
             r,
             {
@@ -90,12 +100,12 @@ const L = ({
               children: t
             }
           ),
-          /* @__PURE__ */ i(g, { ...h })
+          /* @__PURE__ */ i(p, { ...h })
         ] })
       ]
     }
   )
 ] }) });
 export {
-  L as ImageWithText
+  k as ImageWithText
 };

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

@@ -27,13 +27,20 @@
 .content {
     display: flex;
     align-items: center;
-    padding: 80px;
     position: absolute;
+    padding-inline: 80px;
     z-index: 10;
 }
 
+.content[data-view='plain'] {
+    padding: 40px;
+    width: 50%;
+}
+
 .content[data-view='plain_with_title'] {
     display: block;
+    padding: 0;
+    padding-left: 90px;
     width: 50%;
 }
 
@@ -46,9 +53,7 @@
 }
 
 .textContainer {
-    max-width: 55%;
     text-wrap: pretty;
-    font-weight: medium;
     color: var(--color-text-primary-inverted);
 }
 
@@ -92,41 +97,57 @@
     display: none;
 }
 
-@media (width <= 1090px) and (width >= 820px) {
+@media (width <= 1090px) and (width >= 900px) {
+    .container {
+        margin-inline: 20px;
+    }
     .content {
-        padding: 40px;
+        padding: 60px;
+    }
+    .content[data-view='plain_with_title'] {
+        padding-left: 40px;
     }
     .content[data-view='complex'] {
-        padding: 0px 20px;
+        padding-left: 0px 60px;
     }
-    .textOfPlain {
+    .textContainer span {
         font-size: var(--font-size-heading-lg);
     }
     .richTextContainer {
-        max-width: 440px;
-    }
-    .titleOfPlainWithTitle {
-        font-size: var(--font-size-heading-xl);
+        max-width: 300px;
     }
 }
 
-@media (width < 820px) and (width >= 768px) {
+@media (width < 900px) and (width >= 768px) {
+    .container {
+        margin-inline: 20px;
+    }
+    .container[data-view='plain_with_title'] {
+        padding: 0;
+        margin-inline: 20px;
+    }
     .content {
-        padding: 40px 20px;
+        padding: 40px;
+    }
+    .content[data-view='plain_with_title'] {
+        padding-left: 40px;
+    }
+    .content[data-view='complex'] {
+        padding: 0px 60px;
     }
     .textContainer {
         font-size: var(--font-size-heading-sm);
     }
+    .titleOfPlainWithTitle {
+        font-size: var(--font-size-heading-xl);
+    }
     .textOfPlain {
         font-size: var(--font-size-heading-md);
     }
     .richTextContainer {
-        max-width: 440px;
-    }
-    .richTextContainerTitle {
-        font-size: var(--font-size-heading-lg);
+        max-width: 300px;
     }
-    .titleOfPlainWithTitle {
+    .richTextTitle p {
         font-size: var(--font-size-heading-lg);
     }
 }
@@ -135,18 +156,16 @@
     .container[data-view='plain_with_title'] {
         margin: 64px 20px;
     }
-
     .container {
         gap: 20px;
         margin: 40px 20px;
     }
-
     .content {
         border-radius: var(--border-radius-lg);
         padding: 0;
     }
 
-    .content[data-view='plain_with_title'] {
+    .content[data-view='plain_with_title'], .content[data-view='plain'] {
         width: 100%;
         padding: 0;
     }

package/package.json

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