@zenpatient-org/healthspan-marketing-ui 0.1.130 → 0.1.131

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),o=require("../../utils/cn/cn.cjs.js"),e=require("./imageWithText.module.css.cjs.js"),c=({image:d,text:t,title:l,view:i,colorScheme:r})=>a.jsx("section",{className:e.default.root,"data-scheme":r,children:a.jsxs("div",{className:e.default.container,"data-view":i,children:[a.jsx("div",{className:e.default.imageContainer,children:a.jsx("img",{src:d,alt:"background image",className:e.default.image})}),a.jsxs("div",{className:o.cn(e.default.content,{[e.default.textAlignLeft]:i==="plain"||i==="plain_with_title",[e.default.textAlignRight]:i==="complex"}),"data-view":i,children:[i==="complex"&&a.jsxs("div",{className:e.default.richTextContainer,children:[l&&a.jsx(s.HighlightedTitle,{colorScheme:"dark",title:l,defaultVariant:"displayXs",mobileVariant:"headingLg"}),t&&a.jsx(n.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t})]}),i==="plain"&&t&&a.jsx("div",{className:e.default.textContainer,children:a.jsx(n.Typography,{defaultVariant:"displayXs",mobileVariant:"headingXs",children:t})}),i==="plain_with_title"&&a.jsxs("div",{className:e.default.plainWithTitleContainer,children:[l&&a.jsx(n.Typography,{defaultVariant:"displayMd",mobileVariant:"headingLg",children:l}),t&&a.jsx(n.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodyMd",children:t})]})]})]})});exports.ImageWithText=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),h=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),d=require("../../components/Typography/Typography.cjs.js"),m=require("../../utils/cn/cn.cjs.js"),e=require("./imageWithText.module.css.cjs.js"),g=({image:n,text:t,title:l,view:i,colorScheme:s,textColor:r,mobileTextColor:o,mobileImage:c})=>a.jsx("section",{className:e.default.root,"data-scheme":s,children:a.jsxs("div",{className:e.default.container,"data-view":i,children:[a.jsxs("div",{className:e.default.imageContainer,children:[a.jsx("img",{src:n,alt:"background image",className:e.default.image,"data-color":r}),a.jsx("img",{src:c||n,alt:"mobile background image",className:e.default.mobileImage})]}),a.jsxs("div",{className:m.cn(e.default.content,{[e.default.textAlignLeft]:i==="plain"||i==="plain_with_title",[e.default.textAlignRight]:i==="complex"}),"data-view":i,"data-text-color":r,"data-mobile-text-color":o,children:[i==="complex"&&a.jsxs("div",{className:e.default.richTextContainer,children:[l&&a.jsx(h.HighlightedTitle,{colorScheme:"dark",title:l,defaultVariant:"displayXs",mobileVariant:"headingLg"}),t&&a.jsx(d.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t})]}),i==="plain"&&t&&a.jsx("div",{className:e.default.textContainer,children:a.jsx(d.Typography,{defaultVariant:"displayXs",mobileVariant:"headingXs",children:t})}),i==="plain_with_title"&&a.jsxs("div",{className:e.default.plainWithTitleContainer,children:[l&&a.jsx(d.Typography,{defaultVariant:"displayMd",mobileVariant:"headingLg",children:l}),t&&a.jsx(d.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodyMd",children:t})]})]})]})});exports.ImageWithText=g;

package/dist/modules/ImageWithText/ImageWithText.d.ts

@@ -1,3 +1,3 @@
 import { TImageWithTextProps } from './types';
 
-export declare const ImageWithText: ({ image, text, title, view, colorScheme }: TImageWithTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageWithText: ({ image, text, title, view, colorScheme, textColor, mobileTextColor, mobileImage, }: TImageWithTextProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,40 +1,54 @@
 import { jsx as i, jsxs as r } from "react/jsx-runtime";
-import { HighlightedTitle as m } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as d } from "../../components/Typography/Typography.es.js";
-import { cn as c } from "../../utils/cn/cn.es.js";
+import { HighlightedTitle as h } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as t } from "../../components/Typography/Typography.es.js";
+import { cn as g } from "../../utils/cn/cn.es.js";
 import a from "./imageWithText.module.css.es.js";
-const b = ({ image: t, text: n, title: l, view: e, colorScheme: o }) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": o, children: /* @__PURE__ */ r("div", { className: a.container, "data-view": e, children: [
-  /* @__PURE__ */ i("div", { className: a.imageContainer, children: /* @__PURE__ */ i("img", { src: t, alt: "background image", className: a.image }) }),
+const N = ({
+  image: d,
+  text: l,
+  title: n,
+  view: e,
+  colorScheme: m,
+  textColor: o,
+  mobileTextColor: c,
+  mobileImage: s
+}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": m, children: /* @__PURE__ */ r("div", { className: a.container, "data-view": e, children: [
+  /* @__PURE__ */ r("div", { className: a.imageContainer, children: [
+    /* @__PURE__ */ i("img", { src: d, alt: "background image", className: a.image, "data-color": o }),
+    /* @__PURE__ */ i("img", { src: s || d, alt: "mobile background image", className: a.mobileImage })
+  ] }),
   /* @__PURE__ */ r(
     "div",
     {
-      className: c(a.content, {
+      className: g(a.content, {
         [a.textAlignLeft]: e === "plain" || e === "plain_with_title",
         [a.textAlignRight]: e === "complex"
       }),
       "data-view": e,
+      "data-text-color": o,
+      "data-mobile-text-color": c,
       children: [
         e === "complex" && /* @__PURE__ */ r("div", { className: a.richTextContainer, children: [
-          l && /* @__PURE__ */ i(
-            m,
+          n && /* @__PURE__ */ i(
+            h,
             {
               colorScheme: "dark",
-              title: l,
+              title: n,
               defaultVariant: "displayXs",
               mobileVariant: "headingLg"
             }
           ),
-          n && /* @__PURE__ */ i(d, { defaultVariant: "bodyMd", mobileVariant: "bodySm", children: n })
+          l && /* @__PURE__ */ i(t, { defaultVariant: "bodyMd", mobileVariant: "bodySm", children: l })
         ] }),
-        e === "plain" && n && /* @__PURE__ */ i("div", { className: a.textContainer, children: /* @__PURE__ */ i(d, { defaultVariant: "displayXs", mobileVariant: "headingXs", children: n }) }),
+        e === "plain" && l && /* @__PURE__ */ i("div", { className: a.textContainer, children: /* @__PURE__ */ i(t, { defaultVariant: "displayXs", mobileVariant: "headingXs", children: l }) }),
         e === "plain_with_title" && /* @__PURE__ */ r("div", { className: a.plainWithTitleContainer, children: [
-          l && /* @__PURE__ */ i(d, { defaultVariant: "displayMd", mobileVariant: "headingLg", children: l }),
-          n && /* @__PURE__ */ i(d, { defaultVariant: "bodyMd", mobileVariant: "bodyMd", children: n })
+          n && /* @__PURE__ */ i(t, { defaultVariant: "displayMd", mobileVariant: "headingLg", children: n }),
+          l && /* @__PURE__ */ i(t, { defaultVariant: "bodyMd", mobileVariant: "bodyMd", children: l })
         ] })
       ]
     }
   )
 ] }) });
 export {
-  b as ImageWithText
+  N as ImageWithText
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="imageWithText-module__root___Uq9G7",e="imageWithText-module__container___aRFfK",i="imageWithText-module__content___IKyX1",n="imageWithText-module__textAlignLeft___nxRQf",o="imageWithText-module__textAlignRight___ldGBP",_="imageWithText-module__textContainer___m5Jfs",a="imageWithText-module__richTextContainer___ochKF",l="imageWithText-module__plainWithTitleContainer___VPVtI",r="imageWithText-module__imageContainer___bcAmi",g="imageWithText-module__image___paWe4",m={root:t,container:e,content:i,textAlignLeft:n,textAlignRight:o,textContainer:_,richTextContainer:a,plainWithTitleContainer:l,imageContainer:r,image:g};exports.container=e;exports.content=i;exports.default=m;exports.image=g;exports.imageContainer=r;exports.plainWithTitleContainer=l;exports.richTextContainer=a;exports.root=t;exports.textAlignLeft=n;exports.textAlignRight=o;exports.textContainer=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="imageWithText-module__root___Uq9G7",e="imageWithText-module__container___aRFfK",i="imageWithText-module__content___IKyX1",n="imageWithText-module__textAlignLeft___nxRQf",o="imageWithText-module__textAlignRight___ldGBP",_="imageWithText-module__textContainer___m5Jfs",a="imageWithText-module__richTextContainer___ochKF",m="imageWithText-module__plainWithTitleContainer___VPVtI",l="imageWithText-module__imageContainer___bcAmi",g="imageWithText-module__image___paWe4",r="imageWithText-module__mobileImage___hA0RB",c={root:t,container:e,content:i,textAlignLeft:n,textAlignRight:o,textContainer:_,richTextContainer:a,plainWithTitleContainer:m,imageContainer:l,image:g,mobileImage:r};exports.container=e;exports.content=i;exports.default=c;exports.image=g;exports.imageContainer=l;exports.mobileImage=r;exports.plainWithTitleContainer=m;exports.richTextContainer=a;exports.root=t;exports.textAlignLeft=n;exports.textAlignRight=o;exports.textContainer=_;

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

@@ -1,4 +1,4 @@
-const t = "imageWithText-module__root___Uq9G7", e = "imageWithText-module__container___aRFfK", i = "imageWithText-module__content___IKyX1", n = "imageWithText-module__textAlignLeft___nxRQf", _ = "imageWithText-module__textAlignRight___ldGBP", o = "imageWithText-module__textContainer___m5Jfs", a = "imageWithText-module__richTextContainer___ochKF", m = "imageWithText-module__plainWithTitleContainer___VPVtI", g = "imageWithText-module__imageContainer___bcAmi", l = "imageWithText-module__image___paWe4", x = {
+const t = "imageWithText-module__root___Uq9G7", e = "imageWithText-module__container___aRFfK", i = "imageWithText-module__content___IKyX1", n = "imageWithText-module__textAlignLeft___nxRQf", _ = "imageWithText-module__textAlignRight___ldGBP", o = "imageWithText-module__textContainer___m5Jfs", a = "imageWithText-module__richTextContainer___ochKF", m = "imageWithText-module__plainWithTitleContainer___VPVtI", g = "imageWithText-module__imageContainer___bcAmi", l = "imageWithText-module__image___paWe4", x = "imageWithText-module__mobileImage___hA0RB", c = {
   root: t,
   container: e,
   content: i,
@@ -8,14 +8,16 @@ const t = "imageWithText-module__root___Uq9G7", e = "imageWithText-module__conta
   richTextContainer: a,
   plainWithTitleContainer: m,
   imageContainer: g,
-  image: l
+  image: l,
+  mobileImage: x
 };
 export {
   e as container,
   i as content,
-  x as default,
+  c as default,
   l as image,
   g as imageContainer,
+  x as mobileImage,
   m as plainWithTitleContainer,
   a as richTextContainer,
   t as root,

package/dist/modules/ImageWithText/types.d.ts

@@ -4,6 +4,9 @@ import { TColorScheme } from '../../types/common';
 export type TImageWithTextView = 'plain' | 'complex' | 'plain_with_title';
 export type TImageWithTextProps = {
     image: string;
+    mobileImage?: string;
+    textColor?: 'black' | 'white' | 'solar' | 'indigo';
+    mobileTextColor?: 'black' | 'white' | 'solar' | 'indigo';
     title?: ReactNode;
     text?: ReactNode;
     view: TImageWithTextView;

package/dist/modules/ProductsDisplay/ProductsDisplay.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),T=require("../../components/ProductGallery/ProductGallery.cjs.js"),g=require("../../components/ProductGalleryCard/ProductGalleryCard.cjs.js"),i=require("../../components/Typography/Typography.cjs.js"),q=require("./components/ProductsDisplayTabs/ProductsDisplayTabs.cjs.js"),s=require("./productsDisplay.module.css.cjs.js"),j=require("./useProductsData.cjs.js"),x=({labelText:d,productDisplays:u})=>{var l;const{isTabbed:t,title:n,description:y,tabs:a,slidesByTabs:o}=j.useProductsData({productDisplays:u}),[r,p]=c.useState(((l=a[0])==null?void 0:l.value)??""),b=c.useMemo(()=>(o[r]??[]).map((m,P)=>e.jsx(g.ProductGalleryCard,{...m},P)),[r,o]),h=t?e.jsx(q.ProductsDisplayTabs,{label:d,tabs:a,activeTab:r,onTabChange:p}):e.jsxs("div",{className:s.default.header,children:[e.jsx(i.Typography,{className:s.default.headerTitle,defaultVariant:"displayMd",mobileVariant:"headingLg",children:n}),e.jsx(i.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodySm",children:y})]});return e.jsx("section",{className:s.default.root,children:e.jsx(T.ProductGallery,{header:h,slides:b,isTabbed:t})})};exports.ProductsDisplay=x;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),h=require("../../components/ProductGallery/ProductGallery.cjs.js"),i=require("../../components/Typography/Typography.cjs.js"),T=require("./components/ProductsDisplayTabs/ProductsDisplayTabs.cjs.js"),s=require("./productsDisplay.module.css.cjs.js"),g=require("./useProductsData.cjs.js"),m=({labelText:c,productDisplays:l})=>{var o;const{isTabbed:a,title:d,description:u,tabs:t,slidesByTabs:n}=g.useProductsData({productDisplays:l}),[r,y]=b.useState(((o=t[0])==null?void 0:o.value)??""),p=a?e.jsx(T.ProductsDisplayTabs,{label:c,tabs:t,activeTab:r,onTabChange:y}):e.jsxs("div",{className:s.default.header,children:[e.jsx(i.Typography,{className:s.default.headerTitle,defaultVariant:"displayMd",mobileVariant:"headingLg",children:d}),e.jsx(i.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodySm",children:u})]});return e.jsx("section",{className:s.default.root,children:e.jsx(h.ProductGallery,{header:p,slides:n[r],isTabbed:a})})};exports.ProductsDisplay=m;

package/dist/modules/ProductsDisplay/ProductsDisplay.es.js

@@ -1,22 +1,21 @@
 "use client";
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
-import { useState as T, useMemo as g } from "react";
-import { ProductGallery as P } from "../../components/ProductGallery/ProductGallery.es.js";
-import { ProductGalleryCard as v } from "../../components/ProductGalleryCard/ProductGalleryCard.es.js";
-import { Typography as l } from "../../components/Typography/Typography.es.js";
-import { ProductsDisplayTabs as V } from "./components/ProductsDisplayTabs/ProductsDisplayTabs.es.js";
-import r from "./productsDisplay.module.css.es.js";
-import { useProductsData as x } from "./useProductsData.es.js";
-const B = ({ labelText: d, productDisplays: m }) => {
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { ProductGallery as y } from "../../components/ProductGallery/ProductGallery.es.js";
+import { Typography as o } from "../../components/Typography/Typography.es.js";
+import { ProductsDisplayTabs as f } from "./components/ProductsDisplayTabs/ProductsDisplayTabs.es.js";
+import a from "./productsDisplay.module.css.es.js";
+import { useProductsData as T } from "./useProductsData.es.js";
+const j = ({ labelText: l, productDisplays: d }) => {
   var i;
-  const { isTabbed: a, title: c, description: n, tabs: s, slidesByTabs: o } = x({
-    productDisplays: m
-  }), [e, p] = T(((i = s[0]) == null ? void 0 : i.value) ?? ""), u = g(() => (o[e] ?? []).map((y, f) => /* @__PURE__ */ t(v, { ...y }, f)), [e, o]), b = a ? /* @__PURE__ */ t(V, { label: d, tabs: s, activeTab: e, onTabChange: p }) : /* @__PURE__ */ h("div", { className: r.header, children: [
-    /* @__PURE__ */ t(l, { className: r.headerTitle, defaultVariant: "displayMd", mobileVariant: "headingLg", children: c }),
-    /* @__PURE__ */ t(l, { defaultVariant: "bodyLg", mobileVariant: "bodySm", children: n })
+  const { isTabbed: t, title: c, description: m, tabs: r, slidesByTabs: n } = T({
+    productDisplays: d
+  }), [s, p] = h(((i = r[0]) == null ? void 0 : i.value) ?? ""), b = t ? /* @__PURE__ */ e(f, { label: l, tabs: r, activeTab: s, onTabChange: p }) : /* @__PURE__ */ u("div", { className: a.header, children: [
+    /* @__PURE__ */ e(o, { className: a.headerTitle, defaultVariant: "displayMd", mobileVariant: "headingLg", children: c }),
+    /* @__PURE__ */ e(o, { defaultVariant: "bodyLg", mobileVariant: "bodySm", children: m })
   ] });
-  return /* @__PURE__ */ t("section", { className: r.root, children: /* @__PURE__ */ t(P, { header: b, slides: u, isTabbed: a }) });
+  return /* @__PURE__ */ e("section", { className: a.root, children: /* @__PURE__ */ e(y, { header: b, slides: n[s], isTabbed: t }) });
 };
 export {
-  B as ProductsDisplay
+  j as ProductsDisplay
 };

package/dist/modules/ProductsDisplay/useProductsData.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=({productDisplays:t})=>{const l=t.length>1,n=t[0],a=n.title,r=n.description??"",o=t.map(e=>({value:e.title.replace(" ","_").toLocaleLowerCase(),label:e.title})),d=o.reduce((e,c)=>{const s=t.find(u=>u.title===c.label),i=s==null?void 0:s.productCards;return i&&(e[c.value]=i),e},{});return{isTabbed:l,title:a,description:r,tabs:o,slidesByTabs:d}};exports.useProductsData=b;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),f=({productDisplays:e})=>{const a=e.length>1,o=e[0],l=o.title,u=o.description??"",n=i.useMemo(()=>e.map(t=>({value:t.title.replace(" ","_").toLocaleLowerCase(),label:t.title})),[e]),b=i.useMemo(()=>n.reduce((t,r)=>{const s=e.find(d=>d.title===r.label),c=s==null?void 0:s.productCards;return c&&(t[r.value]=c),t},{}),[n,e]);return{isTabbed:a,title:l,description:u,tabs:n,slidesByTabs:b}};exports.useProductsData=f;

package/dist/modules/ProductsDisplay/useProductsData.es.js

@@ -1,20 +1,21 @@
 "use client";
-const u = ({ productDisplays: t }) => {
-  const l = t.length > 1, s = t[0], a = s.title, r = s.description ?? "", c = t.map((e) => ({
-    value: e.title.replace(" ", "_").toLocaleLowerCase(),
-    label: e.title
-  })), d = c.reduce((e, i) => {
-    const n = t.find((b) => b.title === i.label), o = n == null ? void 0 : n.productCards;
-    return o && (e[i.value] = o), e;
-  }, {});
+import { useMemo as c } from "react";
+const m = ({ productDisplays: e }) => {
+  const l = e.length > 1, r = e[0], a = r.title, b = r.description ?? "", n = c(() => e.map((t) => ({
+    value: t.title.replace(" ", "_").toLocaleLowerCase(),
+    label: t.title
+  })), [e]), u = c(() => n.reduce((t, s) => {
+    const o = e.find((d) => d.title === s.label), i = o == null ? void 0 : o.productCards;
+    return i && (t[s.value] = i), t;
+  }, {}), [n, e]);
   return {
     isTabbed: l,
     title: a,
-    description: r,
-    tabs: c,
-    slidesByTabs: d
+    description: b,
+    tabs: n,
+    slidesByTabs: u
   };
 };
 export {
-  u as useProductsData
+  m as useProductsData
 };

package/package.json

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