@zenpatient-org/healthspan-marketing-ui 0.2.52 → 0.2.54

package/dist/components/AdvancedGallery/components/VideoSlide/VideoSlide.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("react"),x=require("../../../../utils/cn/cn.cjs.js"),r=require("../../../../src/components/AdvancedGallery/components/VideoSlide/videoSlide.module.css"),h=require("../../../Icon/Icon.cjs.js"),j=require("../../../Icon/constants.cjs.js"),P=require("../../../AudioButton/AudioButton.cjs.js"),I=({item:o,isActive:l,onClick:a})=>{const[c,u]=s.useState(!1),[p,i]=s.useState(!0),e=s.useRef(null),f=s.useRef(null);s.useEffect(()=>{const t=e.current;if(!t)return;const d=()=>{u(!1)};return l?(t.muted=!0,i(!0),t.play().then(()=>{u(!0)})):(t.pause(),t.currentTime=0,u(!1)),t.addEventListener("ended",d),()=>{t.removeEventListener("ended",d)}},[l]);const m=s.useCallback(t=>{t.stopPropagation(),e.current&&(e.current.play(),u(!0)),a()},[a]),v=s.useCallback(t=>{t.stopPropagation(),e.current&&(e.current.muted=!e.current.muted,i(e.current.muted))},[]),y=s.useCallback(()=>{e.current&&o.videoType==="complex"&&(c?(e.current.pause(),u(!1)):(e.current.play(),u(!0))),a()},[o.videoType,c,a]);return n.jsx("div",{className:r.root,ref:f,onClick:y,children:n.jsxs("div",{className:r.videoContainer,children:[n.jsx("video",{ref:e,src:o.url,playsInline:!0,autoPlay:!0,muted:!0,controls:!1,poster:o.preview,className:x.cn(r.video,!c&&r.mediaHidden)}),o.videoType==="complex"&&!c&&n.jsx("div",{className:r.playButton,children:n.jsx("button",{className:r.customPlayButton,onClick:m,children:n.jsx(h.Icon,{className:r.icon,name:j.EIconName.ALT_PLAY})})}),o.videoType==="complex"&&c&&n.jsx("div",{className:r.audioButton,children:n.jsx(P.AudioButton,{isMuted:p,onClick:v})})]})})};exports.VideoSlide=I;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("react"),x=require("../../../../utils/cn/cn.cjs.js"),r=require("../../../../src/components/AdvancedGallery/components/VideoSlide/videoSlide.module.css"),h=require("../../../Icon/Icon.cjs.js"),j=require("../../../Icon/constants.cjs.js"),P=require("../../../AudioButton/AudioButton.cjs.js"),I=({item:o,isActive:l,onClick:a})=>{const[c,u]=s.useState(!1),[p,i]=s.useState(!0),e=s.useRef(null),f=s.useRef(null);s.useEffect(()=>{const t=e.current;if(!t)return;const d=()=>{u(!1)};return l?(t.muted=!0,i(!0),t.play().then(()=>{u(!0)})):(t.pause(),t.currentTime=0,u(!1)),t.addEventListener("ended",d),()=>{t.removeEventListener("ended",d)}},[l]);const m=s.useCallback(t=>{t.stopPropagation(),e.current&&(e.current.play(),u(!0)),a()},[a]),v=s.useCallback(t=>{t.stopPropagation(),e.current&&(e.current.muted=!e.current.muted,i(e.current.muted))},[]),y=s.useCallback(()=>{e.current&&o.videoType==="complex"&&(c?(e.current.pause(),u(!1)):(e.current.play(),u(!0))),a()},[o.videoType,c,a]);return n.jsx("div",{className:r.root,ref:f,onClick:y,children:n.jsxs("div",{className:r.videoContainer,children:[n.jsx("video",{ref:e,src:o.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,controls:!1,poster:o.preview,className:x.cn(r.video,!c&&r.mediaHidden)}),o.videoType==="complex"&&!c&&n.jsx("div",{className:r.playButton,children:n.jsx("button",{className:r.customPlayButton,onClick:m,children:n.jsx(h.Icon,{className:r.icon,name:j.EIconName.ALT_PLAY})})}),o.videoType==="complex"&&c&&n.jsx("div",{className:r.audioButton,children:n.jsx(P.AudioButton,{isMuted:p,onClick:v})})]})})};exports.VideoSlide=I;

package/dist/components/AdvancedGallery/components/VideoSlide/VideoSlide.es.js

@@ -6,8 +6,8 @@ import r from "../../../../components/AdvancedGallery/components/VideoSlide/vide
 import { Icon as E } from "../../../Icon/Icon.es.js";
 import { EIconName as I } from "../../../Icon/constants.es.js";
 import { AudioButton as g } from "../../../AudioButton/AudioButton.es.js";
-const k = ({ item: n, isActive: c, onClick: u }) => {
-  const [a, s] = m(!1), [f, i] = m(!0), e = p(null), v = p(null);
+const k = ({ item: n, isActive: c, onClick: a }) => {
+  const [u, s] = m(!1), [f, i] = m(!0), e = p(null), v = p(null);
   x(() => {
     const t = e.current;
     if (!t) return;
@@ -22,14 +22,14 @@ const k = ({ item: n, isActive: c, onClick: u }) => {
   }, [c]);
   const y = l(
     (t) => {
-      t.stopPropagation(), e.current && (e.current.play(), s(!0)), u();
+      t.stopPropagation(), e.current && (e.current.play(), s(!0)), a();
     },
-    [u]
+    [a]
   ), h = l((t) => {
     t.stopPropagation(), e.current && (e.current.muted = !e.current.muted, i(e.current.muted));
   }, []), N = l(() => {
-    e.current && n.videoType === "complex" && (a ? (e.current.pause(), s(!1)) : (e.current.play(), s(!0))), u();
-  }, [n.videoType, a, u]);
+    e.current && n.videoType === "complex" && (u ? (e.current.pause(), s(!1)) : (e.current.play(), s(!0))), a();
+  }, [n.videoType, u, a]);
   return /* @__PURE__ */ o("div", { className: r.root, ref: v, onClick: N, children: /* @__PURE__ */ P("div", { className: r.videoContainer, children: [
     /* @__PURE__ */ o(
       "video",
@@ -39,13 +39,14 @@ const k = ({ item: n, isActive: c, onClick: u }) => {
         playsInline: !0,
         autoPlay: !0,
         muted: !0,
+        loop: !0,
         controls: !1,
         poster: n.preview,
-        className: T(r.video, !a && r.mediaHidden)
+        className: T(r.video, !u && r.mediaHidden)
       }
     ),
-    n.videoType === "complex" && !a && /* @__PURE__ */ o("div", { className: r.playButton, children: /* @__PURE__ */ o("button", { className: r.customPlayButton, onClick: y, children: /* @__PURE__ */ o(E, { className: r.icon, name: I.ALT_PLAY }) }) }),
-    n.videoType === "complex" && a && /* @__PURE__ */ o("div", { className: r.audioButton, children: /* @__PURE__ */ o(g, { isMuted: f, onClick: h }) })
+    n.videoType === "complex" && !u && /* @__PURE__ */ o("div", { className: r.playButton, children: /* @__PURE__ */ o("button", { className: r.customPlayButton, onClick: y, children: /* @__PURE__ */ o(E, { className: r.icon, name: I.ALT_PLAY }) }) }),
+    n.videoType === "complex" && u && /* @__PURE__ */ o("div", { className: r.audioButton, children: /* @__PURE__ */ o(g, { isMuted: f, onClick: h }) })
   ] }) });
 };
 export {

package/dist/components/Button/Button.d.ts

@@ -2,7 +2,7 @@ import { default as React, ElementType, ButtonHTMLAttributes, AnchorHTMLAttribut
 import { EIconName } from '../Icon';
 import { TAnalyticsEvent } from '../../types/analytics';
 
-type ButtonVariant = 'primary' | 'primary-invert' | 'secondary' | 'muted' | 'muted-invert' | 'ghost';
+export type ButtonVariant = 'primary' | 'primary-invert' | 'secondary' | 'muted' | 'muted-invert' | 'ghost';
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 interface BaseButtonProps {
     variant?: ButtonVariant;

package/dist/modules/ImageWithBenefits/ImageWithBenefits.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/ImageWithBenefits/imageWithBenefits.module.css"),t=require("../../components/Typography/Typography.cjs.js"),p=require("../../components/TypeBadge/TypeBadge.cjs.js"),b=({image:i,label:l,title:o,benefits:r,benefitsColor:n,mobileLabelColor:c,mobileTitleColor:d,mobileBenefitsColor:m,mobileImage:g})=>e.jsx("section",{className:a.root,children:e.jsxs("div",{className:a.container,children:[e.jsxs("div",{className:a.imageContainer,children:[e.jsx("img",{src:i,alt:"background image",className:a.image}),e.jsx("img",{src:g||i,alt:"mobile background image",className:a.mobileImage})]}),e.jsxs("div",{className:a.content,"data-label-color":l.color,"data-mobile-label-color":c,"data-title-color":o.color,"data-mobile-title-color":d,"data-benefits-color":n,"data-mobile-benefits-color":m,children:[e.jsx(t.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.label,children:l.text}),e.jsx(t.Typography,{as:"h2",defaultVariant:"headingXl",mobileVariant:"headingMd",className:a.title,children:o.text}),e.jsx("div",{className:a.benefitContainer,children:r.map(s=>e.jsxs("div",{className:a.benefitItem,children:[e.jsx(p.TypeBadge,{type:s.badge}),e.jsx(t.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",className:a.benefitText,children:s.text})]},s.text))})]})]})});exports.ImageWithBenefits=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/ImageWithBenefits/imageWithBenefits.module.css"),s=require("../../components/Typography/Typography.cjs.js"),p=require("../../components/TypeBadge/TypeBadge.cjs.js"),b=require("../ImageWithText/components/ButtonWithColors/ButtonWithColors.cjs.js"),x=({image:o,label:i,title:l,benefits:r,benefitsColor:n,mobileLabelColor:c,mobileTitleColor:d,mobileBenefitsColor:m,mobileImage:g,button:h})=>e.jsx("section",{className:a.root,children:e.jsxs("div",{className:a.container,children:[e.jsxs("div",{className:a.imageContainer,children:[e.jsx("img",{src:o,alt:"background image",className:a.image}),e.jsx("img",{src:g||o,alt:"mobile background image",className:a.mobileImage})]}),e.jsxs("div",{className:a.content,"data-label-color":i.color,"data-mobile-label-color":c,"data-title-color":l.color,"data-mobile-title-color":d,"data-benefits-color":n,"data-mobile-benefits-color":m,children:[e.jsx(s.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.label,children:i.text}),e.jsx(s.Typography,{as:"h2",defaultVariant:"headingXl",mobileVariant:"headingMd",className:a.title,children:l.text}),e.jsx("div",{className:a.benefitContainer,children:r.map(t=>e.jsxs("div",{className:a.benefitItem,children:[e.jsx(p.TypeBadge,{type:t.badge}),e.jsx(s.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",className:a.benefitText,children:t.text})]},t.text))}),e.jsx(b.ButtonWithColors,{...h})]})]})});exports.ImageWithBenefits=x;

package/dist/modules/ImageWithBenefits/ImageWithBenefits.d.ts

@@ -1,4 +1,5 @@
 import { ETypeBadge } from '../../components/TypeBadge';
+import { TButtonWithColors } from '../ImageWithText/types';
 
 type TColor = 'black' | 'white' | 'solar' | 'indigo';
 export type ImageWithBenefitsProps = {
@@ -20,6 +21,7 @@ export type ImageWithBenefitsProps = {
     mobileTitleColor?: TColor;
     mobileBenefitsColor?: TColor;
     mobileImage?: string;
+    button?: TButtonWithColors;
 };
-export declare const ImageWithBenefits: ({ image, label, title, benefits, benefitsColor, mobileLabelColor, mobileTitleColor, mobileBenefitsColor, mobileImage, }: ImageWithBenefitsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageWithBenefits: ({ image, label, title, benefits, benefitsColor, mobileLabelColor, mobileTitleColor, mobileBenefitsColor, mobileImage, button, }: ImageWithBenefitsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modules/ImageWithBenefits/ImageWithBenefits.es.js

@@ -1,52 +1,55 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import a from "../../modules/ImageWithBenefits/imageWithBenefits.module.css";
-import { Typography as i } from "../../components/Typography/Typography.es.js";
-import { TypeBadge as h } from "../../components/TypeBadge/TypeBadge.es.js";
-const u = ({
+import { Typography as l } from "../../components/Typography/Typography.es.js";
+import { TypeBadge as p } from "../../components/TypeBadge/TypeBadge.es.js";
+import { ButtonWithColors as f } from "../ImageWithText/components/ButtonWithColors/ButtonWithColors.es.js";
+const V = ({
   image: o,
   label: r,
   title: s,
-  benefits: c,
-  benefitsColor: m,
-  mobileLabelColor: d,
-  mobileTitleColor: n,
+  benefits: m,
+  benefitsColor: c,
+  mobileLabelColor: n,
+  mobileTitleColor: d,
   mobileBenefitsColor: b,
-  mobileImage: g
+  mobileImage: h,
+  button: g
 }) => /* @__PURE__ */ e("section", { className: a.root, children: /* @__PURE__ */ t("div", { className: a.container, children: [
   /* @__PURE__ */ t("div", { className: a.imageContainer, children: [
     /* @__PURE__ */ e("img", { src: o, alt: "background image", className: a.image }),
-    /* @__PURE__ */ e("img", { src: g || o, alt: "mobile background image", className: a.mobileImage })
+    /* @__PURE__ */ e("img", { src: h || o, alt: "mobile background image", className: a.mobileImage })
   ] }),
   /* @__PURE__ */ t(
     "div",
     {
       className: a.content,
       "data-label-color": r.color,
-      "data-mobile-label-color": d,
+      "data-mobile-label-color": n,
       "data-title-color": s.color,
-      "data-mobile-title-color": n,
-      "data-benefits-color": m,
+      "data-mobile-title-color": d,
+      "data-benefits-color": c,
       "data-mobile-benefits-color": b,
       children: [
-        /* @__PURE__ */ e(i, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: a.label, children: r.text }),
-        /* @__PURE__ */ e(i, { as: "h2", defaultVariant: "headingXl", mobileVariant: "headingMd", className: a.title, children: s.text }),
-        /* @__PURE__ */ e("div", { className: a.benefitContainer, children: c.map((l) => /* @__PURE__ */ t("div", { className: a.benefitItem, children: [
-          /* @__PURE__ */ e(h, { type: l.badge }),
+        /* @__PURE__ */ e(l, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: a.label, children: r.text }),
+        /* @__PURE__ */ e(l, { as: "h2", defaultVariant: "headingXl", mobileVariant: "headingMd", className: a.title, children: s.text }),
+        /* @__PURE__ */ e("div", { className: a.benefitContainer, children: m.map((i) => /* @__PURE__ */ t("div", { className: a.benefitItem, children: [
+          /* @__PURE__ */ e(p, { type: i.badge }),
           /* @__PURE__ */ e(
-            i,
+            l,
             {
               as: "p",
               defaultVariant: "bodyLg",
               mobileVariant: "bodyMd",
               className: a.benefitText,
-              children: l.text
+              children: i.text
             }
           )
-        ] }, l.text)) })
+        ] }, i.text)) }),
+        /* @__PURE__ */ e(f, { ...g })
       ]
     }
   )
 ] }) });
 export {
-  u as ImageWithBenefits
+  V as ImageWithBenefits
 };

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

@@ -120,6 +120,18 @@
     color: var(--color-text-primary-brand-indigo);
 }
 
+@media (width <= 1024px) and (width >= 820px) {
+    .content {
+        padding: 60px 40px;
+    }
+}
+
+@media (width < 820px) and (width >= 768px) {
+    .content {
+        padding: 32px 48px;
+    }
+}
+
 @media (width <= 768px) {
     .container {
         padding: 40px 20px 40px;

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

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

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

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

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

@@ -1,39 +1,41 @@
 import { jsx as i, jsxs as l } from "react/jsx-runtime";
-import { cn as u } from "../../utils/cn/cn.es.js";
-import { COLORS as n } from "./constants.es.js";
+import { cn as N } 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 y } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as d } from "../../components/Typography/Typography.es.js";
-const W = ({
-  image: h,
+import { HighlightedTitle as V } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as c } from "../../components/Typography/Typography.es.js";
+import { ButtonWithColors as g } from "./components/ButtonWithColors/ButtonWithColors.es.js";
+const S = ({
+  image: p,
   text: e,
-  title: c,
+  title: r,
   view: t,
-  colorScheme: p,
-  textColor: g,
-  mobileTextColor: b,
-  titleColor: m,
-  mobileTitleColor: r,
+  colorScheme: b,
+  textColor: f,
+  mobileTextColor: u,
+  titleColor: d,
+  mobileTitleColor: n,
   titleHighlightColor: o,
   mobileTitleHighlightColor: s,
-  mobileImage: f
-}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": p, children: /* @__PURE__ */ l("div", { className: a.container, "data-view": t, children: [
+  mobileImage: y,
+  button: h
+}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": b, children: /* @__PURE__ */ l("div", { className: a.container, "data-view": t, children: [
   /* @__PURE__ */ l("div", { className: a.imageContainer, children: [
-    /* @__PURE__ */ i("img", { src: h, alt: "background image", className: a.image, "data-color": g }),
-    /* @__PURE__ */ i("img", { src: f || h, alt: "mobile background image", className: a.mobileImage })
+    /* @__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__ */ l(
     "div",
     {
-      className: u(a.content, {
+      className: N(a.content, {
         [a.textAlignLeft]: t === "plain" || t === "plain_with_title",
         [a.textAlignRight]: t === "complex"
       }),
       "data-view": t,
-      "data-text-color": g,
-      "data-mobile-text-color": b,
-      "data-title-color": m,
-      "data-mobile-title-color": r,
+      "data-text-color": f,
+      "data-mobile-text-color": u,
+      "data-title-color": d,
+      "data-mobile-title-color": n,
       "data-title-highlight-color": o,
       "data-mobile-title-highlight-color": s,
       children: [
@@ -42,50 +44,55 @@ const W = ({
           {
             className: a.richTextContainer,
             style: {
-              "--highlight-color-custom": n[m || "white"],
-              "--highlight-emphasize-custom": n[o || "white"],
-              "--highlight-color-custom-mobile": n[r || "white"],
-              "--highlight-emphasize-custom-mobile": n[s || "white"]
+              "--highlight-color-custom": m[d || "white"],
+              "--highlight-emphasize-custom": m[o || "white"],
+              "--highlight-color-custom-mobile": m[n || "white"],
+              "--highlight-emphasize-custom-mobile": m[s || "white"]
             },
             children: [
-              c && /* @__PURE__ */ i(
-                y,
+              r && /* @__PURE__ */ i(
+                V,
                 {
-                  colorScheme: m || o || r || s ? "custom" : "dark",
-                  title: c,
+                  colorScheme: d || o || n || s ? "custom" : "dark",
+                  title: r,
                   defaultVariant: "displayXs",
                   mobileVariant: "headingLg"
                 }
               ),
-              e && /* @__PURE__ */ i(d, { defaultVariant: "bodyMd", mobileVariant: "bodySm", children: e })
+              e && /* @__PURE__ */ i(c, { defaultVariant: "bodyMd", mobileVariant: "bodySm", children: e }),
+              /* @__PURE__ */ i(g, { ...h })
             ]
           }
         ),
-        t === "plain" && e && /* @__PURE__ */ i("div", { className: a.textContainer, children: /* @__PURE__ */ i(d, { defaultVariant: "displayXs", mobileVariant: "headingXs", children: e }) }),
+        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: [
-          c && /* @__PURE__ */ i(
-            d,
+          r && /* @__PURE__ */ i(
+            c,
             {
               defaultVariant: "displayMd",
               mobileVariant: "headingLg",
               className: a.titleOfPlainWithTitle,
-              children: c
+              children: r
             }
           ),
           e && /* @__PURE__ */ i(
-            d,
+            c,
             {
               defaultVariant: "bodyMd",
               mobileVariant: "bodyMd",
               className: a.textOfPlainWithTitle,
               children: e
             }
-          )
+          ),
+          /* @__PURE__ */ i(g, { ...h })
         ] })
       ]
     }
   )
 ] }) });
 export {
-  W as ImageWithText
+  S as ImageWithText
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("../../../../src/modules/ImageWithText/components/ButtonWithColors/buttonWithColors.module.css"),i=require("../../../../components/Button/Button.cjs.js"),s=e=>!e||!e.label||!e.link?null:r.jsxs("div",{className:t.buttonContainer,children:[r.jsx("div",{className:t.desktopButton,children:r.jsx(i.Button,{variant:e.variant||"primary-invert",as:"a",size:"lg",href:e.link||"#",children:e.label||"Get Started"})}),r.jsx("div",{className:t.mobileButton,children:r.jsx(i.Button,{variant:"primary",as:"a",size:"lg",href:e.link||"#",children:e.label||"Get Started"})})]});exports.ButtonWithColors=s;

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

@@ -0,0 +1,3 @@
+import { TButtonWithColors } from '../../types';
+
+export declare const ButtonWithColors: (button: TButtonWithColors) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,10 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import i from "../../../../modules/ImageWithText/components/ButtonWithColors/buttonWithColors.module.css";
+import { Button as a } from "../../../../components/Button/Button.es.js";
+const m = (r) => !r || !r.label || !r.link ? null : /* @__PURE__ */ l("div", { className: i.buttonContainer, children: [
+  /* @__PURE__ */ e("div", { className: i.desktopButton, children: /* @__PURE__ */ e(a, { variant: r.variant || "primary-invert", as: "a", size: "lg", href: r.link || "#", children: r.label || "Get Started" }) }),
+  /* @__PURE__ */ e("div", { className: i.mobileButton, children: /* @__PURE__ */ e(a, { variant: "primary", as: "a", size: "lg", href: r.link || "#", children: r.label || "Get Started" }) })
+] });
+export {
+  m as ButtonWithColors
+};

package/dist/modules/ImageWithText/components/ButtonWithColors/buttonWithColors.module.css

@@ -0,0 +1,32 @@
+.buttonContainer {
+    margin-top: 32px;
+    max-width: fit-content;
+}
+
+.desktopButton {
+    display: block;
+}
+
+.mobileButton {
+    display: none;
+}
+
+@media (width <= 1090px) and (width >= 768px) {
+    .buttonContainer {
+        margin-top: 24px;
+    }
+}
+
+@media (width < 768px) {
+    .buttonContainer {
+        max-width: 100%;
+    }
+
+    .desktopButton {
+        display: none;
+    }
+
+    .mobileButton {
+        display: block;
+    }
+}

package/dist/modules/ImageWithText/components/ButtonWithColors/index.d.ts

@@ -0,0 +1 @@
+export { ButtonWithColors } from './ButtonWithColors';

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

@@ -37,15 +37,17 @@
 }
 
 .textAlignLeft {
-    left: 80px;
+    left: 60px;
 }
 
 .textAlignRight {
-    right: 80px;
+    right: 60px;
 }
 
 .textContainer {
-    max-width: 572px;
+    max-width: 55%;
+    text-wrap: pretty;
+    font-weight: medium;
     color: var(--color-text-primary-inverted);
 }
 
@@ -90,16 +92,21 @@
     display: none;
 }
 
-@media (width <= 1024px) and (width >= 768px) {
+@media (width <= 1090px) and (width >= 820px) {
     .content {
         padding: 40px;
     }
+    .textContainer span {
+        font-size: var(--font-size-heading-lg);
+    }
+}
 
-    .textContainer {
-        max-width: 472px;
+@media (width < 820px) and (width >= 768px) {
+    .content {
+        padding: 40px 20px;
     }
     .textContainer span {
-        font-size: var(--font-size-heading-xl);
+        font-size: var(--font-size-heading-md);
     }
 }
 

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

@@ -1,7 +1,13 @@
 import { ReactNode } from 'react';
 import { TColorScheme } from '../../types/common';
+import { ButtonVariant } from '../../components/Button/Button';
 
 export type TImageWithTextView = 'plain' | 'complex' | 'plain_with_title';
+export type TButtonWithColors = {
+    label?: string;
+    link?: string;
+    variant?: ButtonVariant;
+};
 export type TImageWithTextProps = {
     image: string;
     mobileImage?: string;
@@ -11,6 +17,7 @@ export type TImageWithTextProps = {
     mobileTitleColor?: 'black' | 'white' | 'solar' | 'indigo';
     titleHighlightColor?: 'black' | 'white' | 'solar' | 'indigo';
     mobileTitleHighlightColor?: 'black' | 'white' | 'solar' | 'indigo';
+    button?: TButtonWithColors;
     title?: ReactNode;
     text?: ReactNode;
     view: TImageWithTextView;

package/package.json

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