@zenpatient-org/healthspan-marketing-ui 0.2.53 → 0.2.55

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/HomepageHeroV2/HomepageHeroV2.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../pageComponents/HomepageHero/components/MiddleCarousel/MiddleCarousel.cjs.js"),o=require("../../components/Button/Button.cjs.js"),s=require("../../src/modules/HomepageHeroV2/homepageHeroV2.module.css"),l=require("../../components/Icon/Icon.cjs.js"),d=require("../../components/Icon/constants.cjs.js"),n=require("../../components/Typography/Typography.cjs.js");function m({title:t,description:i,button:r,buttonInverted:a}){return e.jsx("section",{className:s.root,"data-type":"hero",children:e.jsxs("div",{className:s.container,children:[e.jsxs("div",{className:s.textContent,children:[e.jsxs("div",{className:s.hsaContainer,children:[e.jsx(l.Icon,{name:d.EIconName.CIRCLE_CHECK,className:s.checkIcon}),e.jsx(n.Typography,{className:s.hsaText,as:"p",defaultVariant:"bodySm",children:"HSA/FSA Eligible"})]}),e.jsx(n.Typography,{className:s.title,as:"h2",defaultVariant:"displayXs",mobileVariant:"headingLg",children:t}),e.jsx(n.Typography,{className:s.description,as:"p",defaultVariant:"bodySm",mobileVariant:"bodyXs",children:i}),e.jsxs("div",{className:s.buttonContainer,children:[e.jsx(o.Button,{as:"a",href:r.link,variant:"secondary",size:"md",children:r.text}),a&&e.jsx(o.Button,{as:"a",href:a.link,variant:"muted-invert",size:"md",children:a.text})]})]}),e.jsx("div",{className:s.carouselArea,children:e.jsx(c.MiddleCarousel,{})})]})})}exports.HomepageHeroV2=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../pageComponents/HomepageHero/components/MiddleCarousel/MiddleCarousel.cjs.js"),i=require("../../components/Button/Button.cjs.js"),s=require("../../src/modules/HomepageHeroV2/homepageHeroV2.module.css"),l=require("../../components/Icon/Icon.cjs.js"),d=require("../../components/Icon/constants.cjs.js"),n=require("../../components/Typography/Typography.cjs.js");function m({title:t,description:o,button:r,buttonInverted:a}){return e.jsx("section",{className:s.root,"data-type":"hero",children:e.jsxs("div",{className:s.container,children:[e.jsxs("div",{className:s.textContent,children:[e.jsxs("div",{className:s.hsaContainer,children:[e.jsx(l.Icon,{name:d.EIconName.CIRCLE_CHECK,className:s.checkIcon}),e.jsx(n.Typography,{className:s.hsaText,as:"p",defaultVariant:"bodySm",children:"HSA/FSA Eligible"})]}),e.jsx("div",{className:s.titleWrapper,children:e.jsx(n.Typography,{className:s.title,as:"h2",defaultVariant:"displayXs",mobileVariant:"headingLg",children:t})}),e.jsx(n.Typography,{className:s.description,as:"p",defaultVariant:"bodySm",mobileVariant:"bodyXs",children:o}),e.jsxs("div",{className:s.buttonContainer,children:[e.jsx(i.Button,{as:"a",href:r.link,variant:"secondary",size:"md",children:r.text}),a&&e.jsx(i.Button,{as:"a",href:a.link,variant:"muted-invert",size:"md",children:a.text})]})]}),e.jsx("div",{className:s.carouselArea,children:e.jsx(c.MiddleCarousel,{})})]})})}exports.HomepageHeroV2=m;

package/dist/modules/HomepageHeroV2/HomepageHeroV2.es.js

@@ -1,27 +1,36 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import { MiddleCarousel as m } from "../../pageComponents/HomepageHero/components/MiddleCarousel/MiddleCarousel.es.js";
-import { Button as t } from "../../components/Button/Button.es.js";
+import { Button as l } from "../../components/Button/Button.es.js";
 import a from "../../modules/HomepageHeroV2/homepageHeroV2.module.css";
 import { Icon as c } from "../../components/Icon/Icon.es.js";
 import { EIconName as d } from "../../components/Icon/constants.es.js";
 import { Typography as s } from "../../components/Typography/Typography.es.js";
-function x({ title: n, description: l, button: o, buttonInverted: r }) {
+function v({ title: n, description: o, button: t, buttonInverted: r }) {
   return /* @__PURE__ */ e("section", { className: a.root, "data-type": "hero", children: /* @__PURE__ */ i("div", { className: a.container, children: [
     /* @__PURE__ */ i("div", { className: a.textContent, children: [
       /* @__PURE__ */ i("div", { className: a.hsaContainer, children: [
         /* @__PURE__ */ e(c, { name: d.CIRCLE_CHECK, className: a.checkIcon }),
         /* @__PURE__ */ e(s, { className: a.hsaText, as: "p", defaultVariant: "bodySm", children: "HSA/FSA Eligible" })
       ] }),
-      /* @__PURE__ */ e(s, { className: a.title, as: "h2", defaultVariant: "displayXs", mobileVariant: "headingLg", children: n }),
-      /* @__PURE__ */ e(s, { className: a.description, as: "p", defaultVariant: "bodySm", mobileVariant: "bodyXs", children: l }),
+      /* @__PURE__ */ e("div", { className: a.titleWrapper, children: /* @__PURE__ */ e(
+        s,
+        {
+          className: a.title,
+          as: "h2",
+          defaultVariant: "displayXs",
+          mobileVariant: "headingLg",
+          children: n
+        }
+      ) }),
+      /* @__PURE__ */ e(s, { className: a.description, as: "p", defaultVariant: "bodySm", mobileVariant: "bodyXs", children: o }),
       /* @__PURE__ */ i("div", { className: a.buttonContainer, children: [
-        /* @__PURE__ */ e(t, { as: "a", href: o.link, variant: "secondary", size: "md", children: o.text }),
-        r && /* @__PURE__ */ e(t, { as: "a", href: r.link, variant: "muted-invert", size: "md", children: r.text })
+        /* @__PURE__ */ e(l, { as: "a", href: t.link, variant: "secondary", size: "md", children: t.text }),
+        r && /* @__PURE__ */ e(l, { as: "a", href: r.link, variant: "muted-invert", size: "md", children: r.text })
       ] })
     ] }),
     /* @__PURE__ */ e("div", { className: a.carouselArea, children: /* @__PURE__ */ e(m, {}) })
   ] }) });
 }
 export {
-  x as HomepageHeroV2
+  v as HomepageHeroV2
 };

package/dist/modules/HomepageHeroV2/homepageHeroV2.module.css

@@ -64,6 +64,7 @@
     left: 50%;
     transform: translateX(30px);
     overflow: visible;
+    pointer-events: none;
 }
 
 @media (width <= 1150px) {
@@ -108,6 +109,18 @@
         margin: unset;
         margin-top: 221px;
         padding: 32px 24px;
+        max-width: unset;
+        min-width: 367px;
+        width: 100%;
+        background: linear-gradient(180deg, rgba(13, 12, 17, 0) 0%, #0d0c11 75%);
+    }
+
+    .titleWrapper {
+        display: flex;
+        justify-content: center;
+    }
+
+    .title {
         max-width: 510px;
     }
 

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.53",
+    "version": "0.2.55",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",