@zenpatient-org/healthspan-marketing-ui 0.4.21 → 0.4.22

package/dist/components/labs/BiomarkerHero/BiomarkerHero.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../../../utils/cn/cn.cjs.js"),f=require("./assets/hero-desktop-borderline.webp.cjs.js"),v=require("./assets/hero-desktop-healthy.webp.cjs.js"),S=require("./assets/hero-desktop-optimal.webp.cjs.js"),q=require("./assets/hero-desktop-priority.webp.cjs.js"),B=require("./assets/hero-mobile-borderline.webp.cjs.js"),V=require("./assets/hero-mobile-healthy.webp.cjs.js"),O=require("./assets/hero-mobile-optimal.webp.cjs.js"),_=require("./assets/hero-mobile-priority.webp.cjs.js"),e=require("../../../src/components/labs/BiomarkerHero/biomarkerHero.module.css"),k=require("../../IconButton/IconButton.cjs.js"),I=require("../../Icon/constants.cjs.js"),r=require("../../Typography/Typography.cjs.js"),g={optimal:"Optimal",healthy:"Opportunity",borderline:"Borderline",priority:"Priority"},D={optimal:S.default,healthy:v.default,borderline:f.default,priority:q.default},H={optimal:O.default,healthy:V.default,borderline:B.default,priority:_.default},M=({name:t,category:c,value:o,unit:d,status:i,statusLabel:n,date:h,onBack:j,backLabel:N="Back",notes:l,children:m,mobile:T=!1,className:p})=>{const u=a.jsx(k.IconButton,{iconName:I.EIconName.ARROW_BACK,variant:"muted-invert",size:"sm","aria-label":N,onClick:j}),y=l&&l.length>0&&a.jsx("div",{className:e.notes,children:l.map((x,b)=>a.jsxs("div",{className:e.note,children:[a.jsx("span",{className:e.noteLabel,children:x.label}),a.jsx("span",{"aria-hidden":!0,className:e.noteDivider}),a.jsx(r.Typography,{defaultVariant:"bodySm",className:e.noteText,children:x.sentence})]},b))});return T?a.jsxs("div",{className:s.cn(e.root,e.mobileRoot,p),"data-status":i,children:[a.jsx("span",{"aria-hidden":!0,className:e.bg,children:a.jsx("span",{className:e.bgBlob,style:{backgroundImage:`url(${H[i]})`}})}),a.jsxs("div",{className:e.mobileHeader,children:[u,a.jsxs("div",{className:e.mobileCopy,children:[a.jsx(r.Typography,{as:"h1",defaultVariant:"headingSm",align:"center",className:s.cn(e.gradientText,e.title),children:t}),a.jsx(r.Typography,{defaultVariant:"labelSm",align:"center",className:e.category,children:c})]})]}),y,a.jsxs("div",{className:e.mobileCard,children:[a.jsxs("div",{className:e.mobileValues,children:[a.jsxs("span",{className:e.mobileValueGroup,children:[a.jsx("span",{className:s.cn(e.gradientText,e.mobileValue),children:o}),a.jsx(r.Typography,{defaultVariant:"bodySm",className:s.cn(e.gradientText,e.unit),children:d})]}),a.jsxs("span",{className:e.mobileStatusDate,children:[a.jsx("span",{className:s.cn(e.gradientText,e.mobileStatus),children:n!=null?n:g[i]}),a.jsx(r.Typography,{defaultVariant:"labelXs",emphasis:!0,className:e.date,children:h})]})]}),a.jsx("div",{className:e.chart,children:m})]})]}):a.jsx("div",{className:s.cn(e.root,p),"data-status":i,children:a.jsxs("div",{className:e.card,style:{backgroundImage:`url(${D[i]})`},children:[a.jsxs("div",{className:e.details,children:[a.jsxs("div",{className:e.left,children:[u,a.jsxs("div",{className:e.copy,children:[a.jsx(r.Typography,{as:"h1",defaultVariant:"headingSm",className:s.cn(e.gradientText,e.title),children:t}),a.jsx(r.Typography,{defaultVariant:"labelMd",className:e.category,children:c})]})]}),a.jsxs("div",{className:e.right,children:[a.jsxs("span",{className:e.statusGroup,children:[a.jsxs("span",{className:e.valueGroup,children:[a.jsx(r.Typography,{defaultVariant:"headingSm",className:e.gradientText,children:o}),a.jsx(r.Typography,{defaultVariant:"headingSm",className:s.cn(e.gradientText,e.unit),children:d})]}),a.jsx(r.Typography,{defaultVariant:"headingSm",className:e.gradientText,children:n!=null?n:g[i]})]}),a.jsx(r.Typography,{defaultVariant:"labelXs",emphasis:!0,className:e.date,children:h})]})]}),a.jsxs("div",{className:e.chart,children:[y,m]})]})})};exports.BiomarkerHero=M;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../../../utils/cn/cn.cjs.js"),f=require("./assets/hero-desktop-borderline.webp.cjs.js"),v=require("./assets/hero-desktop-healthy.webp.cjs.js"),S=require("./assets/hero-desktop-optimal.webp.cjs.js"),B=require("./assets/hero-desktop-priority.webp.cjs.js"),q=require("./assets/hero-mobile-borderline.webp.cjs.js"),V=require("./assets/hero-mobile-healthy.webp.cjs.js"),O=require("./assets/hero-mobile-optimal.webp.cjs.js"),_=require("./assets/hero-mobile-priority.webp.cjs.js"),e=require("../../../src/components/labs/BiomarkerHero/biomarkerHero.module.css"),k=require("../../IconButton/IconButton.cjs.js"),I=require("../../Icon/constants.cjs.js"),r=require("../../Typography/Typography.cjs.js"),x={optimal:"Optimal",healthy:"Opportunity",borderline:"Borderline",priority:"Priority"},D={optimal:S.default,healthy:v.default,borderline:f.default,priority:B.default},H={optimal:O.default,healthy:V.default,borderline:q.default,priority:_.default},M=({name:t,category:c,value:o,unit:d,status:i,statusLabel:n,date:h,onBack:g,backLabel:j="Back",notes:l,children:m,mobile:N=!1,className:p})=>{const u=a.jsx(k.IconButton,{iconName:I.EIconName.ARROW_BACK,variant:"muted-invert",size:"sm","aria-label":j,onClick:g}),y=l&&l.sentences.length>0&&a.jsxs("div",{className:e.notes,children:[a.jsx("span",{className:e.noteLabel,children:l.label}),a.jsx("span",{"aria-hidden":!0,className:e.noteDivider}),a.jsx("div",{className:e.noteBody,children:l.sentences.map((T,b)=>a.jsx(r.Typography,{defaultVariant:"bodySm",className:e.noteText,children:T},b))})]});return N?a.jsxs("div",{className:s.cn(e.root,e.mobileRoot,p),"data-status":i,children:[a.jsx("span",{"aria-hidden":!0,className:e.bg,children:a.jsx("span",{className:e.bgBlob,style:{backgroundImage:`url(${H[i]})`}})}),a.jsxs("div",{className:e.mobileHeader,children:[u,a.jsxs("div",{className:e.mobileCopy,children:[a.jsx(r.Typography,{as:"h1",defaultVariant:"headingSm",align:"center",className:s.cn(e.gradientText,e.title),children:t}),a.jsx(r.Typography,{defaultVariant:"labelSm",align:"center",className:e.category,children:c})]})]}),y,a.jsxs("div",{className:e.mobileCard,children:[a.jsxs("div",{className:e.mobileValues,children:[a.jsxs("span",{className:e.mobileValueGroup,children:[a.jsx("span",{className:s.cn(e.gradientText,e.mobileValue),children:o}),a.jsx(r.Typography,{defaultVariant:"bodySm",className:s.cn(e.gradientText,e.unit),children:d})]}),a.jsxs("span",{className:e.mobileStatusDate,children:[a.jsx("span",{className:s.cn(e.gradientText,e.mobileStatus),children:n!=null?n:x[i]}),a.jsx(r.Typography,{defaultVariant:"labelXs",emphasis:!0,className:e.date,children:h})]})]}),a.jsx("div",{className:e.chart,children:m})]})]}):a.jsx("div",{className:s.cn(e.root,p),"data-status":i,children:a.jsxs("div",{className:e.card,style:{backgroundImage:`url(${D[i]})`},children:[a.jsxs("div",{className:e.details,children:[a.jsxs("div",{className:e.left,children:[u,a.jsxs("div",{className:e.copy,children:[a.jsx(r.Typography,{as:"h1",defaultVariant:"headingSm",className:s.cn(e.gradientText,e.title),children:t}),a.jsx(r.Typography,{defaultVariant:"labelMd",className:e.category,children:c})]})]}),a.jsxs("div",{className:e.right,children:[a.jsxs("span",{className:e.statusGroup,children:[a.jsxs("span",{className:e.valueGroup,children:[a.jsx(r.Typography,{defaultVariant:"headingSm",className:e.gradientText,children:o}),a.jsx(r.Typography,{defaultVariant:"headingSm",className:s.cn(e.gradientText,e.unit),children:d})]}),a.jsx(r.Typography,{defaultVariant:"headingSm",className:e.gradientText,children:n!=null?n:x[i]})]}),a.jsx(r.Typography,{defaultVariant:"labelXs",emphasis:!0,className:e.date,children:h})]})]}),a.jsxs("div",{className:e.chart,children:[y,m]})]})})};exports.BiomarkerHero=M;

package/dist/components/labs/BiomarkerHero/BiomarkerHero.es.js

@@ -13,7 +13,7 @@ import e from "../../../components/labs/BiomarkerHero/biomarkerHero.module.css";
 import { IconButton as P } from "../../IconButton/IconButton.es.js";
 import { EIconName as I } from "../../Icon/constants.es.js";
 import { Typography as i } from "../../Typography/Typography.es.js";
-const b = {
+const u = {
   optimal: "Optimal",
   healthy: "Opportunity",
   borderline: "Borderline",
@@ -37,10 +37,10 @@ const b = {
   statusLabel: t,
   date: h,
   onBack: y,
-  backLabel: v = "Back",
+  backLabel: b = "Back",
   notes: o,
   children: p,
-  mobile: S = !1,
+  mobile: v = !1,
   className: N
 }) => {
   const f = /* @__PURE__ */ a(
@@ -49,15 +49,15 @@ const b = {
       iconName: I.ARROW_BACK,
       variant: "muted-invert",
       size: "sm",
-      "aria-label": v,
+      "aria-label": b,
       onClick: y
     }
-  ), g = o && o.length > 0 && /* @__PURE__ */ a("div", { className: e.notes, children: o.map((u, T) => /* @__PURE__ */ r("div", { className: e.note, children: [
-    /* @__PURE__ */ a("span", { className: e.noteLabel, children: u.label }),
+  ), g = o && o.sentences.length > 0 && /* @__PURE__ */ r("div", { className: e.notes, children: [
+    /* @__PURE__ */ a("span", { className: e.noteLabel, children: o.label }),
     /* @__PURE__ */ a("span", { "aria-hidden": !0, className: e.noteDivider }),
-    /* @__PURE__ */ a(i, { defaultVariant: "bodySm", className: e.noteText, children: u.sentence })
-  ] }, T)) });
-  return S ? /* @__PURE__ */ r("div", { className: l(e.root, e.mobileRoot, N), "data-status": n, children: [
+    /* @__PURE__ */ a("div", { className: e.noteBody, children: o.sentences.map((S, T) => /* @__PURE__ */ a(i, { defaultVariant: "bodySm", className: e.noteText, children: S }, T)) })
+  ] });
+  return v ? /* @__PURE__ */ r("div", { className: l(e.root, e.mobileRoot, N), "data-status": n, children: [
     /* @__PURE__ */ a("span", { "aria-hidden": !0, className: e.bg, children: /* @__PURE__ */ a("span", { className: e.bgBlob, style: { backgroundImage: `url(${C[n]})` } }) }),
     /* @__PURE__ */ r("div", { className: e.mobileHeader, children: [
       f,
@@ -83,7 +83,7 @@ const b = {
           /* @__PURE__ */ a(i, { defaultVariant: "bodySm", className: l(e.gradientText, e.unit), children: c })
         ] }),
         /* @__PURE__ */ r("span", { className: e.mobileStatusDate, children: [
-          /* @__PURE__ */ a("span", { className: l(e.gradientText, e.mobileStatus), children: t != null ? t : b[n] }),
+          /* @__PURE__ */ a("span", { className: l(e.gradientText, e.mobileStatus), children: t != null ? t : u[n] }),
           /* @__PURE__ */ a(i, { defaultVariant: "labelXs", emphasis: !0, className: e.date, children: h })
         ] })
       ] }),
@@ -112,7 +112,7 @@ const b = {
             /* @__PURE__ */ a(i, { defaultVariant: "headingSm", className: e.gradientText, children: s }),
             /* @__PURE__ */ a(i, { defaultVariant: "headingSm", className: l(e.gradientText, e.unit), children: c })
           ] }),
-          /* @__PURE__ */ a(i, { defaultVariant: "headingSm", className: e.gradientText, children: t != null ? t : b[n] })
+          /* @__PURE__ */ a(i, { defaultVariant: "headingSm", className: e.gradientText, children: t != null ? t : u[n] })
         ] }),
         /* @__PURE__ */ a(i, { defaultVariant: "labelXs", emphasis: !0, className: e.date, children: h })
       ] })

package/dist/components/labs/BiomarkerHero/biomarkerHero.module.css

@@ -105,8 +105,8 @@
 .notes {
     box-sizing: border-box;
     display: flex;
-    flex-direction: column;
     gap: var(--spacing-20);
+    align-items: center;
     width: 100%;
     padding: var(--spacing-20) var(--spacing-28);
     border: 1px solid var(--border-color-alpha-white-10);
@@ -118,13 +118,6 @@
         0 8px 10px 0 rgba(0, 0, 0, 0.1);
 }
 
-.note {
-    display: flex;
-    gap: var(--spacing-20);
-    align-items: center;
-    width: 100%;
-}
-
 .noteLabel {
     font-family: var(--font-decorative), monospace;
     font-weight: var(--font-weight-regular);
@@ -143,9 +136,15 @@
     background: var(--border-color-alpha-white-10);
 }
 
-.noteText {
+.noteBody {
+    display: flex;
     flex: 1;
+    flex-direction: column;
+    gap: var(--spacing-20);
     min-width: 0;
+}
+
+.noteText {
     margin: 0;
     color: var(--color-text-primary-inverted);
 }
@@ -258,14 +257,14 @@
 .mobileRoot .notes {
     position: relative;
     z-index: 1;
+    flex-direction: column;
     gap: var(--spacing-8);
+    align-items: flex-start;
     padding: var(--spacing-16) var(--spacing-20);
 }
 
-.mobileRoot .note {
-    flex-direction: column;
+.mobileRoot .noteBody {
     gap: var(--spacing-8);
-    align-items: flex-start;
 }
 
 .mobileRoot .noteLabel {

package/dist/components/labs/BiomarkerHero/types.d.ts

@@ -10,12 +10,12 @@ export type BiomarkerHeroProps = {
     date: string;
     onBack?: () => void;
     backLabel?: string;
-    notes?: BiomarkerHeroNote[];
+    notes?: BiomarkerHeroNotes;
     children: ReactNode;
     mobile?: boolean;
     className?: string;
 };
-export type BiomarkerHeroNote = {
+export type BiomarkerHeroNotes = {
     label: string;
-    sentence: string;
+    sentences: string[];
 };

package/package.json

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