@zenpatient-org/healthspan-marketing-ui 0.2.60 → 0.2.62

package/dist/components/PriceDisplay/PriceDisplay.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),e=require("../../src/components/PriceDisplay/priceDisplay.module.css"),l=require("../../utils/cn/cn.cjs.js"),o=require("../../utils/periodView.cjs.js"),c=({items:i})=>{if(!i||i.length===0)return null;const n=i.length>1?"double":"single";return r.jsx("div",{className:e.root,children:i.map(a=>r.jsxs("div",{className:l.cn(e.container,n==="double"?e.double:e.single),children:[r.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.description,children:a.description}),r.jsxs("div",{className:e.priceWrapper,children:[!!a.prefix&&r.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.prefix,children:a.prefix}),r.jsxs("div",{className:e.priceAmount,children:[r.jsx(s.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingLg",className:e.price,children:(a.price/100).toFixed(0)}),r.jsx(s.Typography,{as:"p",defaultVariant:"headingXs",mobileVariant:"headingXxs",className:e.currency,children:"$"}),a.period!=="none"&&r.jsxs(s.Typography,{as:"p",defaultVariant:"labelMd",className:e.period,children:["/",o.shortPeriod(a.period)]})]})]})]},a.description))})};exports.PriceDisplay=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),e=require("../../src/components/PriceDisplay/priceDisplay.module.css"),n=require("../../utils/cn/cn.cjs.js"),c=require("../../utils/periodView.cjs.js"),p=({items:l})=>{if(!l||l.length===0)return null;const i=l.length>1?"double":"single";return r.jsx("div",{className:e.root,children:l.map(a=>r.jsxs("div",{className:n.cn(e.container,i==="double"?e.double:e.single),children:[r.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.description,children:a.description}),r.jsxs("div",{className:e.priceWrapper,children:[a.initialPrice&&r.jsxs(s.Typography,{as:"p",defaultVariant:"labelSm",className:e.initialPrice,children:["$",(a.initialPrice/100).toFixed(0)]}),r.jsxs("div",{className:e.priceColumn,children:[a.prefix?r.jsx(s.Typography,{as:"p",defaultVariant:"bodyXs",className:e.prefix,children:a.prefix}):a.label?r.jsx(s.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:e.label,children:a.label}):null,r.jsxs("div",{className:e.priceAmount,children:[r.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.currency,children:"$"}),r.jsx(s.Typography,{as:"p",defaultVariant:"headingLg",className:e.price,children:(a.price/100).toFixed(0)}),r.jsxs("div",{className:e.periodWrapper,children:[a.prefix&&a.label&&r.jsx(s.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:e.label,children:a.label}),a.period!=="none"&&r.jsxs(s.Typography,{as:"p",defaultVariant:"labelSm",className:e.period,children:["/",c.shortPeriod(a.period)]})]})]})]})]})]},a.description))})};exports.PriceDisplay=p;

package/dist/components/PriceDisplay/PriceDisplay.d.ts

@@ -4,6 +4,8 @@ export type PriceDisplayProps = {
     description: string;
     prefix?: string;
     price: number;
+    initialPrice?: number;
+    label?: string;
     period: 'none' | 'month' | 'year' | 'quarter';
 };
 export declare const PriceDisplay: React.FC<{

package/dist/components/PriceDisplay/PriceDisplay.es.js

@@ -1,50 +1,41 @@
-import { jsx as a, jsxs as n } from "react/jsx-runtime";
-import { Typography as i } from "../Typography/Typography.es.js";
-import e from "../../components/PriceDisplay/priceDisplay.module.css";
-import { cn as d } from "../../utils/cn/cn.es.js";
-import { shortPeriod as s } from "../../utils/periodView.es.js";
-const f = ({ items: l }) => {
-  if (!l || l.length === 0)
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Typography as l } from "../Typography/Typography.es.js";
+import a from "../../components/PriceDisplay/priceDisplay.module.css";
+import { cn as c } from "../../utils/cn/cn.es.js";
+import { shortPeriod as d } from "../../utils/periodView.es.js";
+const f = ({ items: s }) => {
+  if (!s || s.length === 0)
     return null;
-  const o = l.length > 1 ? "double" : "single";
-  return /* @__PURE__ */ a("div", { className: e.root, children: l.map((r) => /* @__PURE__ */ n(
+  const n = s.length > 1 ? "double" : "single";
+  return /* @__PURE__ */ r("div", { className: a.root, children: s.map((e) => /* @__PURE__ */ i(
     "div",
     {
-      className: d(e.container, o === "double" ? e.double : e.single),
+      className: c(a.container, n === "double" ? a.double : a.single),
       children: [
-        /* @__PURE__ */ a(i, { as: "p", defaultVariant: "bodySm", className: e.description, children: r.description }),
-        /* @__PURE__ */ n("div", { className: e.priceWrapper, children: [
-          !!r.prefix && /* @__PURE__ */ a(i, { as: "p", defaultVariant: "bodySm", className: e.prefix, children: r.prefix }),
-          /* @__PURE__ */ n("div", { className: e.priceAmount, children: [
-            /* @__PURE__ */ a(
-              i,
-              {
-                as: "p",
-                defaultVariant: "headingXl",
-                mobileVariant: "headingLg",
-                className: e.price,
-                children: (r.price / 100).toFixed(0)
-              }
-            ),
-            /* @__PURE__ */ a(
-              i,
-              {
-                as: "p",
-                defaultVariant: "headingXs",
-                mobileVariant: "headingXxs",
-                className: e.currency,
-                children: "$"
-              }
-            ),
-            r.period !== "none" && /* @__PURE__ */ n(i, { as: "p", defaultVariant: "labelMd", className: e.period, children: [
-              "/",
-              s(r.period)
+        /* @__PURE__ */ r(l, { as: "p", defaultVariant: "bodySm", className: a.description, children: e.description }),
+        /* @__PURE__ */ i("div", { className: a.priceWrapper, children: [
+          e.initialPrice && /* @__PURE__ */ i(l, { as: "p", defaultVariant: "labelSm", className: a.initialPrice, children: [
+            "$",
+            (e.initialPrice / 100).toFixed(0)
+          ] }),
+          /* @__PURE__ */ i("div", { className: a.priceColumn, children: [
+            e.prefix ? /* @__PURE__ */ r(l, { as: "p", defaultVariant: "bodyXs", className: a.prefix, children: e.prefix }) : e.label ? /* @__PURE__ */ r(l, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: a.label, children: e.label }) : null,
+            /* @__PURE__ */ i("div", { className: a.priceAmount, children: [
+              /* @__PURE__ */ r(l, { as: "p", defaultVariant: "bodySm", className: a.currency, children: "$" }),
+              /* @__PURE__ */ r(l, { as: "p", defaultVariant: "headingLg", className: a.price, children: (e.price / 100).toFixed(0) }),
+              /* @__PURE__ */ i("div", { className: a.periodWrapper, children: [
+                e.prefix && e.label && /* @__PURE__ */ r(l, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: a.label, children: e.label }),
+                e.period !== "none" && /* @__PURE__ */ i(l, { as: "p", defaultVariant: "labelSm", className: a.period, children: [
+                  "/",
+                  d(e.period)
+                ] })
+              ] })
             ] })
           ] })
         ] })
       ]
     },
-    r.description
+    e.description
   )) });
 };
 export {

package/dist/components/PriceDisplay/priceDisplay.module.css

@@ -70,36 +70,59 @@
 
 .priceWrapper {
     display: flex;
-    gap: 4px;
-    flex-direction: column;
-    align-items: flex-start;
-    text-align: left;
+    align-items: flex-end;
     min-width: 90px;
 }
 
-.prefix {
-    color: var(--color-neutral-500);
+.priceColumn {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
 }
 
 .priceAmount {
     display: flex;
-    align-items: baseline;
-    line-height: 1;
+    align-items: stretch;
+}
+
+.periodWrapper {
+    display: flex;
+    flex-direction: column;
+    margin-left: 3px;
+    justify-content: flex-end;
+    align-self: stretch;
+}
+
+.periodWrapper:has(.label) {
+    justify-content: space-between;
+}
+
+.label {
+    background-color: var(--color-bg-fill-brand-indigo);
+    padding: 2.77px 5.54px;
+    font-size: 6.926px;
+    border-radius: var(--border-radius-xxs);
+    width: fit-content;
 }
 
 .price {
-    grid-column: 1 / 2;
-    grid-row: 1 / 3;
+    margin-bottom: -5px;
+    align-self: flex-start;
 }
 
 .currency {
-    grid-column: 2 / 3;
-    grid-row: 1 / 2;
     align-self: flex-start;
 }
 
 .period {
-    grid-column: 2 / 3;
-    grid-row: 2 / 3;
+    color: var(--color-neutral-500);
+}
+
+.initialPrice {
+    color: var(--color-neutral-300);
+    text-decoration: line-through;
+}
+
+.prefix {
     color: var(--color-neutral-500);
 }

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

@@ -33,6 +33,7 @@
     display: flex;
     flex-direction: column;
     gap: 32px;
+    flex: 1 1 50%;
 }
 
 .titleContainer {
@@ -48,6 +49,8 @@
 .imageContainer {
     max-width: 600px;
     max-height: 600px;
+    flex: 1 1 50%;
+    display: flex;
 }
 
 .image {
@@ -72,7 +75,8 @@
 }
 
 @media (width <= 960px) {
-    .container, .container[data-image-position='left'] {
+    .container,
+    .container[data-image-position='left'] {
         flex-direction: column;
         gap: 0px;
     }

package/dist/pageComponents/Footer/components/FooterLinksBlock/FooterLinksBlock.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../../src/pageComponents/Footer/components/FooterLinksBlock/footerLinksBlock.module.css"),n=require("../LinksColumn/LinksColumn.cjs.js"),r=require("../AccordionFooter/AccordionFooter.cjs.js"),i=[{title:"ABOUT",content:[{title:"Our Company",href:"/our-company"},{title:"Our Mission",href:"/our-mission"},{title:"How It Works",href:"/how-it-works"}]},{title:"SCIENCE",content:[{title:"Articles",href:"/research"},{title:"Senescence",href:"/science/senescence"},{title:"Metabolism",href:"/science/metabolism"},{title:"Energy",href:"/science/energy"}]},{title:"SUPPORT",content:[{title:"Contact Us",href:"/contact-us"},{title:"FAQs",href:"/faqs"},{title:"Community",href:"https://community.gethealthspan.com"},{title:"Log In",href:"https://app.gethealthspan.com/#/login"}]}],c=({disableLinks:o=!1})=>e.jsxs("div",{className:t.root,children:[e.jsx("div",{className:t.desktop,children:i.map(s=>e.jsx(n.LinksColumn,{title:s.title,links:s.content,className:t.column,disableLinks:o},s.title))}),e.jsx("div",{className:t.mobile,children:e.jsx(r.AccordionFooter,{items:i})})]});exports.FooterLinksBlock=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../../src/pageComponents/Footer/components/FooterLinksBlock/footerLinksBlock.module.css"),n=require("../LinksColumn/LinksColumn.cjs.js"),r=require("../AccordionFooter/AccordionFooter.cjs.js"),i=[{title:"ABOUT",content:[{title:"Our Company",href:"/our-company"},{title:"Our Mission",href:"/our-mission"},{title:"How It Works",href:"/how-it-works"}]},{title:"SCIENCE",content:[{title:"Articles",href:"/research"},{title:"Senescence",href:"/science/senescence"},{title:"Metabolism",href:"/science/metabolism"},{title:"Energy",href:"/science/energy"}]},{title:"SUPPORT",content:[{title:"(650) 563-8696",href:"tel:+16505638696"},{title:"Contact Us",href:"/contact-us"},{title:"FAQs",href:"/faqs"},{title:"Community",href:"https://community.gethealthspan.com"},{title:"Log In",href:"https://app.gethealthspan.com/#/login"}]}],c=({disableLinks:o=!1})=>e.jsxs("div",{className:t.root,children:[e.jsx("div",{className:t.desktop,children:i.map(s=>e.jsx(n.LinksColumn,{title:s.title,links:s.content,className:t.column,disableLinks:o},s.title))}),e.jsx("div",{className:t.mobile,children:e.jsx(r.AccordionFooter,{items:i})})]});exports.FooterLinksBlock=c;

package/dist/pageComponents/Footer/components/FooterLinksBlock/FooterLinksBlock.es.js

@@ -23,6 +23,7 @@ const o = [
   {
     title: "SUPPORT",
     content: [
+      { title: "(650) 563-8696", href: "tel:+16505638696" },
       { title: "Contact Us", href: "/contact-us" },
       { title: "FAQs", href: "/faqs" },
       { title: "Community", href: "https://community.gethealthspan.com" },

package/package.json

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