@zenpatient-org/healthspan-marketing-ui 0.2.42 → 0.2.44

package/dist/modules/BasicImageText/BasicImageText.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/BasicImageText/basicImageText.module.css"),t=require("../../components/Typography/Typography.cjs.js"),p=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),x=require("../../components/Button/Button.cjs.js"),y={solar:"color-text-primary-brand-solar",indigo:"color-text-primary-brand-indigo",primary:"color-text-primary",inverted:"color-text-primary-inverted"},j=({imagePosition:n,title:c,description:s,image:d,button:i,label:l,labelColor:o,mobileImage:m,colorScheme:r,buttonColor:g})=>{const h=o||(r==="dark"?"inverted":"primary");return e.jsx("section",{className:a.root,"data-color-scheme":r,children:e.jsxs("div",{className:a.container,"data-image-position":n,children:[e.jsxs("div",{className:a.textContainer,children:[l&&e.jsx(t.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.label,color:y[h],children:l}),e.jsxs("div",{className:a.titleContainer,children:[e.jsx(p.HighlightedTitle,{colorScheme:r==="dark"?"dark":"light",className:a.title,defaultVariant:"displayMd",mobileVariant:"headingXl",title:c}),e.jsx("div",{className:a.mobileImageContainer,children:e.jsx("img",{src:m,alt:"",className:a.mobileImage})}),s&&e.jsx(t.Typography,{className:a.description,defaultVariant:"bodyLg",mobileVariant:"bodyMd",children:s})]}),(i==null?void 0:i.link)&&e.jsx("div",{className:a.button,children:e.jsx(x.Button,{as:"a",href:i==null?void 0:i.link,variant:g||"secondary",size:"lg",children:(i==null?void 0:i.text)||"Get Started"})})]}),e.jsx("div",{className:a.imageContainer,children:e.jsx("img",{src:d,alt:"",className:a.image})})]})})};exports.BasicImageText=j;

package/dist/modules/BasicImageText/BasicImageText.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+export type BasicImageTextProps = {
+    imagePosition: 'left' | 'right';
+    title: ReactNode;
+    description?: string;
+    label?: string;
+    labelColor?: 'solar' | 'indigo' | 'primary' | 'inverted';
+    image: string;
+    mobileImage: string;
+    button?: {
+        text: string;
+        link: string;
+    };
+    colorScheme: 'light' | 'dark' | 'neutral';
+    buttonColor?: 'secondary' | 'muted-invert' | 'primary';
+};
+export declare const BasicImageText: ({ imagePosition, title, description, image, button, label, labelColor, mobileImage, colorScheme, buttonColor, }: BasicImageTextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/BasicImageText/BasicImageText.es.js

@@ -0,0 +1,59 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import a from "../../modules/BasicImageText/basicImageText.module.css";
+import { Typography as d } from "../../components/Typography/Typography.es.js";
+import { HighlightedTitle as y } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Button as N } from "../../components/Button/Button.es.js";
+const v = {
+  solar: "color-text-primary-brand-solar",
+  indigo: "color-text-primary-brand-indigo",
+  primary: "color-text-primary",
+  inverted: "color-text-primary-inverted"
+}, M = ({
+  imagePosition: t,
+  title: c,
+  description: s,
+  image: o,
+  button: i,
+  label: m,
+  labelColor: n,
+  mobileImage: p,
+  colorScheme: r,
+  buttonColor: g
+}) => {
+  const h = n || (r === "dark" ? "inverted" : "primary");
+  return /* @__PURE__ */ e("section", { className: a.root, "data-color-scheme": r, children: /* @__PURE__ */ l("div", { className: a.container, "data-image-position": t, children: [
+    /* @__PURE__ */ l("div", { className: a.textContainer, children: [
+      m && /* @__PURE__ */ e(
+        d,
+        {
+          as: "p",
+          defaultVariant: "labelMd",
+          mobileVariant: "labelSm",
+          emphasis: !0,
+          className: a.label,
+          color: v[h],
+          children: m
+        }
+      ),
+      /* @__PURE__ */ l("div", { className: a.titleContainer, children: [
+        /* @__PURE__ */ e(
+          y,
+          {
+            colorScheme: r === "dark" ? "dark" : "light",
+            className: a.title,
+            defaultVariant: "displayMd",
+            mobileVariant: "headingXl",
+            title: c
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: a.mobileImageContainer, children: /* @__PURE__ */ e("img", { src: p, alt: "", className: a.mobileImage }) }),
+        s && /* @__PURE__ */ e(d, { className: a.description, defaultVariant: "bodyLg", mobileVariant: "bodyMd", children: s })
+      ] }),
+      (i == null ? void 0 : i.link) && /* @__PURE__ */ e("div", { className: a.button, children: /* @__PURE__ */ e(N, { as: "a", href: i == null ? void 0 : i.link, variant: g || "secondary", size: "lg", children: (i == null ? void 0 : i.text) || "Get Started" }) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: a.imageContainer, children: /* @__PURE__ */ e("img", { src: o, alt: "", className: a.image }) })
+  ] }) });
+};
+export {
+  M as BasicImageText
+};

package/dist/modules/BasicImageText/basicImageText.module.css

@@ -0,0 +1,122 @@
+.root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.root[data-color-scheme='dark'] {
+    background-color: var(--color-bg-fill-primary);
+    color: var(--color-text-primary-inverted);
+}
+
+.root[data-color-scheme='neutral'] {
+    background-color: var(--color-bg-neutral-light);
+}
+
+.container {
+    display: flex;
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: 64px 120px;
+    position: relative;
+    align-items: center;
+    gap: 96px;
+    overflow: hidden;
+}
+
+.container[data-image-position='left'] {
+    flex-direction: row-reverse;
+}
+
+.textContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+.titleContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.button {
+    width: fit-content;
+}
+
+.imageContainer {
+    max-width: 600px;
+    max-height: 600px;
+}
+
+.image {
+    width: 100%;
+    object-fit: contain;
+}
+
+.mobileImage {
+    display: none;
+}
+
+@media (width <= 1200px) {
+    .container {
+        padding: 64px 20px;
+        gap: 64px;
+    }
+
+    .imageContainer {
+        max-width: 414px;
+        max-height: 414px;
+    }
+}
+
+@media (width <= 960px) {
+    .container {
+        flex-direction: column;
+        gap: 0px;
+    }
+
+    .textContainer {
+        gap: 32px;
+    }
+
+    .button {
+        width: 100%;
+    }
+
+    .image {
+        display: none;
+    }
+
+    .mobileImageContainer {
+        align-self: center;
+        max-width: 728px;
+        max-height: 728px;
+    }
+
+    .mobileImage {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+@media (width <= 768px) {
+    .container {
+        padding: 40px 20px;
+    }
+
+    .textContainer {
+        gap: 16px;
+    }
+
+    .titleContainer {
+        gap: 24px;
+    }
+
+    .button {
+        margin-top: 16px;
+    }
+}

package/dist/modules/BasicImageText/index.d.ts

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

package/dist/modules/FeaturedIn/FeaturedIn.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),i=require("../../utils/cn/cn.cjs.js"),u=require("./components/CtaFeaturedIn.cjs.js"),a=require("../../src/modules/FeaturedIn/featuredIn.module.css"),l=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js");function m({media:r}){return e.jsx("div",{className:a.mediaFeaturedInBlock,children:r.filter(t=>!!t.logo).map(({logo:t,url:s},o)=>{const n=s?"a":"div";return e.jsx(n,{href:s,target:"_blank",rel:"noopener noreferrer",className:a.mediaFeaturedInImageContainer,children:e.jsx("div",{className:a.mediaFeaturedInImage,style:{backgroundImage:`url(${t})`}})},`${s}_${o}`)})})}function p({quote:r,source:t}){return e.jsxs("div",{className:a.quoteFeaturedInBlock,children:[e.jsxs(l.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingXxs",className:a.quoteFeaturedInText,children:["“",r,"”"]}),t&&e.jsxs(l.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.quoteFeaturedInSource,children:["— ",t]})]})}function h({label:r,title:t,content:s,colorScheme:o="light"}){return e.jsxs("section",{className:i.cn(a.container,a[o]),children:[e.jsx(l.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.label,children:r}),t&&e.jsxs(e.Fragment,{children:[e.jsx("p",{className:i.cn(a.title,a.customTitle),children:t}),e.jsx(l.Typography,{as:"p",defaultVariant:"displayMd",className:i.cn(a.title,a.defaultTitle),children:t})]}),e.jsx(d.InfiniteScroll,{items:s,contentClassName:a.content,itemClassName:a.item,rootClassName:a.scrollRoot,renderItem:n=>e.jsxs(c.Fragment,{children:[n.type==="media"&&e.jsx(m,{media:n.media}),n.type==="quote"&&e.jsx(p,{quote:n.quote,source:n.source}),n.type==="cta"&&e.jsx(u.CtaFeaturedIn,{button_label:n.button_label})]},n.type)})]})}exports.FeaturedIn=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),i=require("../../utils/cn/cn.cjs.js"),u=require("./components/CtaFeaturedIn.cjs.js"),a=require("../../src/modules/FeaturedIn/featuredIn.module.css"),l=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js");function m({media:r}){return e.jsx("div",{className:a.mediaFeaturedInBlock,children:r.filter(n=>!!n.logo).map(({logo:n,url:s},o)=>{const t=s?"a":"div";return e.jsx(t,{href:s,target:"_blank",rel:"noopener noreferrer",className:a.mediaFeaturedInImageContainer,children:e.jsx("div",{className:a.mediaFeaturedInImage,style:{backgroundImage:`url(${n})`}})},`${s}_${o}`)})})}function p({quote:r,source:n}){return e.jsxs("div",{className:a.quoteFeaturedInBlock,children:[e.jsxs(l.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingXxs",className:a.quoteFeaturedInText,children:["“",r,"”"]}),n&&e.jsxs(l.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.quoteFeaturedInSource,children:["— ",n]})]})}function h({label:r,title:n,content:s,colorScheme:o="light"}){return e.jsxs("section",{className:i.cn(a.container,a[o]),children:[e.jsx(l.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.label,children:r}),n&&e.jsxs(e.Fragment,{children:[e.jsx("p",{className:i.cn(a.title,a.customTitle),children:n}),e.jsx(l.Typography,{as:"p",defaultVariant:"displayMd",className:i.cn(a.title,a.defaultTitle),children:n})]}),e.jsx(d.InfiniteScroll,{items:s,contentClassName:a.content,itemClassName:a.item,rootClassName:a.scrollRoot,renderItem:t=>e.jsxs(c.Fragment,{children:[t.type==="media"&&e.jsx(m,{media:t.media}),t.type==="quote"&&e.jsx(p,{quote:t.quote,source:t.source}),t.type==="cta"&&e.jsx(u.CtaFeaturedIn,{buttonLabel:t.button_label,buttonLink:t.button_link})]},t.type)})]})}exports.FeaturedIn=h;

package/dist/modules/FeaturedIn/FeaturedIn.d.ts

@@ -1,5 +1,3 @@
-import { TColorScheme } from '../../types/common';
-
 type TMediaView = {
     type: 'media';
     media: Array<{
@@ -15,12 +13,13 @@ type TFeaturedQuoteView = {
 type TFeaturedButtonView = {
     type: 'cta';
     button_label: string;
+    button_link?: string;
 };
 export type FeaturedInProps = {
     label: string;
     title?: string;
     content: Array<TMediaView | TFeaturedQuoteView | TFeaturedButtonView>;
-    colorScheme?: TColorScheme;
+    colorScheme?: 'light' | 'dark';
 };
 export declare function FeaturedIn({ label, title, content, colorScheme }: FeaturedInProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modules/FeaturedIn/FeaturedIn.es.js

@@ -1,4 +1,4 @@
-import { jsxs as n, jsx as t, Fragment as d } from "react/jsx-runtime";
+import { jsxs as n, jsx as r, Fragment as d } from "react/jsx-runtime";
 import { Fragment as c } from "react";
 import { cn as m } from "../../utils/cn/cn.es.js";
 import { CtaFeaturedIn as u } from "./components/CtaFeaturedIn.es.js";
@@ -6,14 +6,14 @@ import e from "../../modules/FeaturedIn/featuredIn.module.css";
 import { Typography as i } from "../../components/Typography/Typography.es.js";
 import { InfiniteScroll as p } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
 function f({ media: l }) {
-  return /* @__PURE__ */ t("div", { className: e.mediaFeaturedInBlock, children: l.filter((a) => !!a.logo).map(({ logo: a, url: o }, s) => /* @__PURE__ */ t(
+  return /* @__PURE__ */ r("div", { className: e.mediaFeaturedInBlock, children: l.filter((a) => !!a.logo).map(({ logo: a, url: o }, s) => /* @__PURE__ */ r(
     o ? "a" : "div",
     {
       href: o,
       target: "_blank",
       rel: "noopener noreferrer",
       className: e.mediaFeaturedInImageContainer,
-      children: /* @__PURE__ */ t("div", { className: e.mediaFeaturedInImage, style: { backgroundImage: `url(${a})` } })
+      children: /* @__PURE__ */ r("div", { className: e.mediaFeaturedInImage, style: { backgroundImage: `url(${a})` } })
     },
     `${o}_${s}`
   )) });
@@ -40,29 +40,29 @@ function h({ quote: l, source: a }) {
     ] })
   ] });
 }
-function V({ label: l, title: a, content: o, colorScheme: s = "light" }) {
+function q({ label: l, title: a, content: o, colorScheme: s = "light" }) {
   return /* @__PURE__ */ n("section", { className: m(e.container, e[s]), children: [
-    /* @__PURE__ */ t(i, { as: "p", defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: l }),
+    /* @__PURE__ */ r(i, { as: "p", defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: l }),
     a && /* @__PURE__ */ n(d, { children: [
-      /* @__PURE__ */ t("p", { className: m(e.title, e.customTitle), children: a }),
-      /* @__PURE__ */ t(i, { as: "p", defaultVariant: "displayMd", className: m(e.title, e.defaultTitle), children: a })
+      /* @__PURE__ */ r("p", { className: m(e.title, e.customTitle), children: a }),
+      /* @__PURE__ */ r(i, { as: "p", defaultVariant: "displayMd", className: m(e.title, e.defaultTitle), children: a })
     ] }),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ r(
       p,
       {
         items: o,
         contentClassName: e.content,
         itemClassName: e.item,
         rootClassName: e.scrollRoot,
-        renderItem: (r) => /* @__PURE__ */ n(c, { children: [
-          r.type === "media" && /* @__PURE__ */ t(f, { media: r.media }),
-          r.type === "quote" && /* @__PURE__ */ t(h, { quote: r.quote, source: r.source }),
-          r.type === "cta" && /* @__PURE__ */ t(u, { button_label: r.button_label })
-        ] }, r.type)
+        renderItem: (t) => /* @__PURE__ */ n(c, { children: [
+          t.type === "media" && /* @__PURE__ */ r(f, { media: t.media }),
+          t.type === "quote" && /* @__PURE__ */ r(h, { quote: t.quote, source: t.source }),
+          t.type === "cta" && /* @__PURE__ */ r(u, { buttonLabel: t.button_label, buttonLink: t.button_link })
+        ] }, t.type)
       }
     )
   ] });
 }
 export {
-  V as FeaturedIn
+  q as FeaturedIn
 };

package/dist/modules/FeaturedIn/components/CtaFeaturedIn.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("../../../types/analytics/analytics.cjs.js"),c=require("../../../src/modules/FeaturedIn/featuredIn.module.css");function r({button_label:s}){const e="https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",i=()=>{var t;(t=window.eventBus)==null||t.emit("analytics",{event:a.EAnalyticsEvent.ctaClicked,type:a.EAnalyticsEventType.interaction,component:"FeaturedIn",element:"primary_button",payload:{link:e}})};return n.jsx("a",{href:e,onClick:i,className:c.ctaFeaturedIn,children:n.jsx("span",{className:c.ctaFeaturedInText,children:s})})}exports.CtaFeaturedIn=r;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("../../../types/analytics/analytics.cjs.js"),c=require("../../../src/modules/FeaturedIn/featuredIn.module.css");function l({buttonLabel:s,buttonLink:i}){const e=i||"https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",r=()=>{var t;(t=window.eventBus)==null||t.emit("analytics",{event:a.EAnalyticsEvent.ctaClicked,type:a.EAnalyticsEventType.interaction,component:"FeaturedIn",element:"primary_button",payload:{link:e}})};return n.jsx("a",{href:e,onClick:r,className:c.ctaFeaturedIn,children:n.jsx("span",{className:c.ctaFeaturedInText,children:s})})}exports.CtaFeaturedIn=l;

package/dist/modules/FeaturedIn/components/CtaFeaturedIn.d.ts

@@ -1,5 +1,6 @@
 type CtaFeaturedInProps = {
-    button_label: string;
+    buttonLabel: string;
+    buttonLink?: string;
 };
-export declare function CtaFeaturedIn({ button_label }: CtaFeaturedInProps): import("react/jsx-runtime").JSX.Element;
+export declare function CtaFeaturedIn({ buttonLabel, buttonLink }: CtaFeaturedInProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modules/FeaturedIn/components/CtaFeaturedIn.es.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as n } from "react/jsx-runtime";
-import { EAnalyticsEventType as i, EAnalyticsEvent as o } from "../../../types/analytics/analytics.es.js";
+import { EAnalyticsEventType as o, EAnalyticsEvent as r } from "../../../types/analytics/analytics.es.js";
 import a from "../../../modules/FeaturedIn/featuredIn.module.css";
-function d({ button_label: c }) {
-  const t = "https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948";
+function m({ buttonLabel: c, buttonLink: i }) {
+  const t = i || "https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948";
   return /* @__PURE__ */ n("a", { href: t, onClick: () => {
     var e;
     (e = window.eventBus) == null || e.emit("analytics", {
-      event: o.ctaClicked,
-      type: i.interaction,
+      event: r.ctaClicked,
+      type: o.interaction,
       component: "FeaturedIn",
       element: "primary_button",
       payload: {
@@ -18,5 +18,5 @@ function d({ button_label: c }) {
   }, className: a.ctaFeaturedIn, children: /* @__PURE__ */ n("span", { className: a.ctaFeaturedInText, children: c }) });
 }
 export {
-  d as CtaFeaturedIn
+  m as CtaFeaturedIn
 };

package/dist/modules/FeaturedIn/featuredIn.module.css

@@ -2,7 +2,7 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-24, 24px);
+    gap: var(--spacing-18, 18px);
     padding: var(--spacing-120) 0;
     position: relative;
 }
@@ -16,10 +16,6 @@
     text-align: center;
 }
 
-.label + .scrollRoot {
-    margin-top: 91px;
-}
-
 .item {
     display: flex;
     flex-direction: row;
@@ -40,6 +36,7 @@
 
 .container.dark .title {
     color: var(--color-text-primary-inverted);
+    opacity: 0.4;
 }
 
 .customTitle {
@@ -112,6 +109,7 @@
     width: 100%;
     text-align: center;
     color: var(--color-text-secondary-disabled);
+    opacity: 0.5;
 }
 
 .container.dark .quoteFeaturedInSource {
@@ -173,13 +171,6 @@
 }
 
 @media (width <= 900px) {
-    .customTitle {
-        display: none;
-    }
-    .defaultTitle {
-        display: block;
-        font-feature-settings: "case";
-    }
     .mediaFeaturedInBlock {
         column-gap: var(--spacing-16, 16px);
     }
@@ -189,18 +180,14 @@
 }
 
 @media (width <= 768px) {
-    .scrollRoot {
-        margin-top: 36px;
-    }
-
-    .label + .scrollRoot {
-        margin-top: 52px;
+    .customTitle {
+        display: none;
     }
-
-    .title {
-        margin-top: 32px;
+    .defaultTitle {
+        display: block;
+        font-feature-settings: "case";
     }
-
+    
     .content {
         padding: 15px 0;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.42",
+    "version": "0.2.44",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -626,6 +626,11 @@
             "import": "./dist/modules/Highlight/Highlight.es.js",
             "require": "./dist/modules/Highlight/Highlight.cjs.js"
         },
+        "./BasicImageText": {
+            "types": "./dist/modules/BasicImageText/BasicImageText.d.ts",
+            "import": "./dist/modules/BasicImageText/BasicImageText.es.js",
+            "require": "./dist/modules/BasicImageText/BasicImageText.cjs.js"
+        },
         "./Bubbles": {
             "types": "./dist/pageComponents/Bubbles/Bubbles.d.ts",
             "import": "./dist/pageComponents/Bubbles/Bubbles.es.js",