@zenpatient-org/healthspan-marketing-ui 0.2.43 → 0.2.45

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../src/modules/Citation/citation.module.css"),u=require("../../utils/cn/cn.cjs.js"),i=require("../../components/Typography/Typography.cjs.js");function l({orderPadding:e,items:t,className:a}){const o=isNaN(Number(e))?0:e;return!t||t.length===0?null:r.jsx("section",{className:u.cn(s.root,a),children:t==null?void 0:t.map((c,n)=>r.jsxs(i.Typography,{as:"p",className:s.text,defaultVariant:"bodySm",mobileVariant:"bodyXs",children:[r.jsx("sup",{children:o?o+n:n+1})," ",c.item]},n))})}exports.Citation=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("../../src/modules/Citation/citation.module.css"),i=require("../../utils/cn/cn.cjs.js"),p=require("../../components/Typography/Typography.cjs.js"),l=require("../../components/Superscript/Superscript.cjs.js");function y({orderPadding:e,items:t,className:u}){const n=isNaN(Number(e))?0:e;return!t||t.length===0?null:r.jsx("section",{className:i.cn(c.root,u),children:t==null?void 0:t.map((a,o)=>{const s=n?n+o:o+1;return r.jsxs(p.Typography,{as:"p",className:c.text,defaultVariant:"bodySm",mobileVariant:"bodyXs",children:[r.jsx(l.Superscript,{value:s.toString()})," ",a.item]},s)})})}exports.Citation=y;

package/dist/modules/Citation/Citation.es.js

@@ -1,15 +1,29 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import l from "../../modules/Citation/citation.module.css";
-import { cn as m } from "../../utils/cn/cn.es.js";
-import { Typography as e } from "../../components/Typography/Typography.es.js";
-function y({ orderPadding: t, items: r, className: p }) {
-  const a = isNaN(Number(t)) ? 0 : t;
-  return !r || r.length === 0 ? null : /* @__PURE__ */ n("section", { className: m(l.root, p), children: r == null ? void 0 : r.map((s, o) => /* @__PURE__ */ c(e, { as: "p", className: l.text, defaultVariant: "bodySm", mobileVariant: "bodyXs", children: [
-    /* @__PURE__ */ n("sup", { children: a ? a + o : o + 1 }),
-    " ",
-    s.item
-  ] }, o)) });
+import { cn as s } from "../../utils/cn/cn.es.js";
+import { Typography as c } from "../../components/Typography/Typography.es.js";
+import { Superscript as u } from "../../components/Superscript/Superscript.es.js";
+function x({ orderPadding: t, items: r, className: p }) {
+  const o = isNaN(Number(t)) ? 0 : t;
+  return !r || r.length === 0 ? null : /* @__PURE__ */ e("section", { className: s(l.root, p), children: r == null ? void 0 : r.map((i, a) => {
+    const n = o ? o + a : a + 1;
+    return /* @__PURE__ */ m(
+      c,
+      {
+        as: "p",
+        className: l.text,
+        defaultVariant: "bodySm",
+        mobileVariant: "bodyXs",
+        children: [
+          /* @__PURE__ */ e(u, { value: n.toString() }),
+          " ",
+          i.item
+        ]
+      },
+      n
+    );
+  }) });
 }
 export {
-  y as Citation
+  x as Citation
 };

package/dist/modules/Citation/citation.module.css

@@ -1,6 +1,6 @@
 .root {
     width: 100%;
-    padding: 48px 10vw;
+    padding: 16px 10vw 48px 10vw;
     max-width: var(--content-max-width);
     margin: 0 auto;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.43",
+    "version": "0.2.45",
     "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",