@zenpatient-org/healthspan-marketing-ui 0.2.72 → 0.2.74

package/dist/components/Button/Button.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("react"),B=require("../../utils/cn/cn.cjs.js"),n=require("../../src/components/Button/button.module.css"),r=require("../Icon/Icon.cjs.js"),d=N.forwardRef(({variant:u="primary",size:m="md",as:j="button",disabled:s=!1,children:v,prefixIcon:c,suffixIcon:a,analyticsProps:i,...t},b)=>{const x=n[u]||"",y=n[m]||"",C=s?n.disabled:"",h=q=>{var o,l;i&&((o=window.eventBus)==null||o.emit("analytics",i)),(l=t.onClick)==null||l.call(t,q)};return e.jsx(j,{ref:b,...t,className:B.cn(n.button,x,y,C),disabled:s,onClick:h,"data-type":"button",children:e.jsxs("div",{className:n.content,children:[c&&e.jsx("div",{className:n.iconWrap,children:e.jsx(r.Icon,{name:c})}),e.jsx("div",{children:v}),a&&e.jsx("div",{className:n.iconWrap,children:e.jsx(r.Icon,{name:a})})]})})});d.displayName="Button";exports.Button=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),B=require("react"),_=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/Button/button.module.css"),d=require("../Icon/Icon.cjs.js"),r=B.forwardRef(({variant:u="primary",size:m="md",as:j="button",disabled:s=!1,children:v,prefixIcon:c,suffixIcon:a,analyticsProps:i,loading:b,...t},x)=>{const y=e[u]||"",C=e[m]||"",h=s?e.disabled:"",q=N=>{var o,l;i&&((o=window.eventBus)==null||o.emit("analytics",i)),(l=t.onClick)==null||l.call(t,N)};return n.jsx(j,{ref:x,...t,className:_.cn(e.button,y,C,h),disabled:s,onClick:q,"data-type":"button","data-loading":b,children:n.jsxs("div",{className:e.content,children:[c&&n.jsx("div",{className:e.iconWrap,children:n.jsx(d.Icon,{name:c})}),n.jsx("div",{children:v}),a&&n.jsx("div",{className:e.iconWrap,children:n.jsx(d.Icon,{name:a})})]})})});r.displayName="Button";exports.Button=r;

package/dist/components/Button/Button.d.ts

@@ -11,6 +11,7 @@ interface BaseButtonProps {
     prefixIcon?: EIconName;
     suffixIcon?: EIconName;
     analyticsProps?: TAnalyticsEvent;
+    loading?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
 }
 export type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>;

package/dist/components/Button/Button.es.js

@@ -1,44 +1,46 @@
 "use client";
-import { jsx as n, jsxs as k } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import { cn as B } from "../../utils/cn/cn.es.js";
+import { jsx as a, jsxs as w } from "react/jsx-runtime";
+import { forwardRef as B } from "react";
+import { cn as j } from "../../utils/cn/cn.es.js";
 import t from "../../components/Button/button.module.css";
 import { Icon as m } from "../Icon/Icon.es.js";
-const j = w(
+const W = B(
   ({
-    variant: r = "primary",
-    size: d = "md",
+    variant: d = "primary",
+    size: r = "md",
     as: u = "button",
-    disabled: e = !1,
+    disabled: i = !1,
     children: f,
-    prefixIcon: i,
+    prefixIcon: e,
     suffixIcon: s,
     analyticsProps: o,
-    ...a
-  }, v) => {
-    const C = t[r] || "", h = t[d] || "", N = e ? t.disabled : "", b = (y) => {
-      var c, l;
-      o && ((c = window.eventBus) == null || c.emit("analytics", o)), (l = a.onClick) == null || l.call(a, y);
+    loading: v,
+    ...n
+  }, C) => {
+    const h = t[d] || "", N = t[r] || "", b = i ? t.disabled : "", y = (k) => {
+      var l, c;
+      o && ((l = window.eventBus) == null || l.emit("analytics", o)), (c = n.onClick) == null || c.call(n, k);
     };
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ a(
       u,
       {
-        ref: v,
-        ...a,
-        className: B(t.button, C, h, N),
-        disabled: e,
-        onClick: b,
+        ref: C,
+        ...n,
+        className: j(t.button, h, N, b),
+        disabled: i,
+        onClick: y,
         "data-type": "button",
-        children: /* @__PURE__ */ k("div", { className: t.content, children: [
-          i && /* @__PURE__ */ n("div", { className: t.iconWrap, children: /* @__PURE__ */ n(m, { name: i }) }),
-          /* @__PURE__ */ n("div", { children: f }),
-          s && /* @__PURE__ */ n("div", { className: t.iconWrap, children: /* @__PURE__ */ n(m, { name: s }) })
+        "data-loading": v,
+        children: /* @__PURE__ */ w("div", { className: t.content, children: [
+          e && /* @__PURE__ */ a("div", { className: t.iconWrap, children: /* @__PURE__ */ a(m, { name: e }) }),
+          /* @__PURE__ */ a("div", { children: f }),
+          s && /* @__PURE__ */ a("div", { className: t.iconWrap, children: /* @__PURE__ */ a(m, { name: s }) })
         ] })
       }
     );
   }
 );
-j.displayName = "Button";
+W.displayName = "Button";
 export {
-  j as Button
+  W as Button
 };

package/dist/components/Button/button.module.css

@@ -1,4 +1,5 @@
 .button {
+    position: relative;
     text-align: center;
     display: inline-flex;
     align-items: center;
@@ -18,6 +19,7 @@
     text-transform: uppercase;
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-xs);
+    --spinner-color: var(--color-text-primary);
 }
 
 .button:hover {
@@ -27,50 +29,59 @@
 .primary {
     background-color: var(--color-bg-fill-primary);
     color: var(--color-text-primary-inverted);
+    --spinner-color: var(--color-text-primary-inverted);
 }
 
 .primary-invert {
     background-color: var(--color-bg-fill-brand-inverse);
     color: var(--color-text-primary);
+    --spinner-color: var(--color-text-primary);
 }
 
 .secondary {
     background-color: var(--color-bg-fill-brand-solar);
     color: var(--color-text-primary);
+    --spinner-color: var(--color-text-primary);
 }
 
 .tertiary {
     background-color: var(--color-bg-fill-brand-indigo);
     color: var(--color-text-primary);
+    --spinner-color: var(--color-text-primary);
 }
 
 .muted {
     background-color: transparent;
     color: var(--color-text-primary);
     border-color: var(--border-color-alpha-black-20);
+    --spinner-color: var(--color-text-primary);
 }
 
 .muted:hover {
     background-color: var(--color-bg-fill-primary);
     border-color: var(--color-bg-fill-primary);
     color: var(--color-text-primary-inverted);
+    --spinner-color: var(--color-text-primary-inverted);
 }
 
 .muted-invert {
     background-color: transparent;
     color: var(--color-text-primary-inverted);
     border-color: var(--border-color-invert);
+    --spinner-color: var(--color-text-primary-inverted);
 }
 
 .muted-invert:hover {
     background-color: var(--color-bg-fill-brand-inverse);
     border-color: var(--border-color-invert);
     color: var(--color-text-primary);
+    --spinner-color: var(--color-text-primary);
 }
 
 .ghost {
     background-color: transparent;
     color: var(--color-text-primary);
+    --spinner-color: var(--color-text-primary);
 }
 
 .xs {
@@ -167,3 +178,39 @@
     height: 16px;
     max-height: 16px;
 }
+
+.button[data-loading='true'] {
+    &, &:disabled, &:focus {
+        color: transparent;
+        pointer-events: none;
+        cursor: default;
+    }
+
+    &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: block;
+        width: 1.5em;
+        height: 1.5em;
+        border-radius: 50%;
+        border: var(--border-width-md) solid var(--spinner-color);
+        border-bottom-color: transparent;
+        opacity: 0.6;
+        animation: button-loading-spinner 1s ease infinite;
+        margin: auto;
+    }
+}
+
+@keyframes button-loading-spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/dist/components/HighlightCard/HighlightCard.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../Icon/constants.cjs.js"),a=require("../../src/components/HighlightCard/highlightCard.module.css"),s=require("../Typography/Typography.cjs.js"),m=require("../IconButton/IconButton.cjs.js"),u=({image:g,eyebrow:i,title:r,description:o,link:t,colorScheme:n="light"})=>{const c=n==="light"?"muted-invert":"muted",l=e.jsxs(e.Fragment,{children:[i&&e.jsx(s.Typography,{as:"p",defaultVariant:"labelSm",emphasis:!0,className:a.eyebrow,children:i}),e.jsxs("div",{className:a.bottomContainer,children:[e.jsxs("div",{className:a.titleContainer,children:[r&&e.jsx(s.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingLg",className:a.title,children:r}),t&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.desktop,children:e.jsx(m.IconButton,{variant:c,size:"lg",iconName:h.EIconName.ARROW_FORWARD})}),e.jsx("div",{className:a.mobile,children:e.jsx(m.IconButton,{variant:c,size:"md",iconName:h.EIconName.ARROW_FORWARD})})]})]}),o&&e.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:a.description,children:o})]})]}),d={backgroundImage:`url(${g})`,backgroundSize:"cover",backgroundPosition:"center"};return t?e.jsx("a",{href:t,className:a.highlightCard,style:d,"data-scheme":n,children:l}):e.jsx("div",{className:a.highlightCard,style:d,"data-scheme":n,children:l})};exports.HighlightCard=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../Icon/constants.cjs.js"),a=require("../../src/components/HighlightCard/highlightCard.module.css"),s=require("../Typography/Typography.cjs.js"),m=require("../IconButton/IconButton.cjs.js"),u=({image:g,eyebrow:i,title:r,description:o,link:t,colorScheme:n="light"})=>{const c=n==="light"?"muted-invert":"muted",l=e.jsxs(e.Fragment,{children:[i&&e.jsx(s.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.eyebrow,children:i}),e.jsxs("div",{className:a.bottomContainer,children:[e.jsxs("div",{className:a.titleContainer,children:[r&&e.jsx(s.Typography,{as:"p",defaultVariant:"headingLg",mobileVariant:"headingLg",className:a.title,children:r}),t&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.desktop,children:e.jsx(m.IconButton,{variant:c,size:"lg",iconName:h.EIconName.ARROW_FORWARD})}),e.jsx("div",{className:a.mobile,children:e.jsx(m.IconButton,{variant:c,size:"md",iconName:h.EIconName.ARROW_FORWARD})})]})]}),o&&e.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:a.description,children:o})]})]}),d={backgroundImage:`url(${g})`,backgroundSize:"cover",backgroundPosition:"center"};return t?e.jsx("a",{href:t,className:a.highlightCard,style:d,"data-scheme":n,children:l}):e.jsx("div",{className:a.highlightCard,style:d,"data-scheme":n,children:l})};exports.HighlightCard=u;

package/dist/components/HighlightCard/HighlightCard.es.js

@@ -6,23 +6,23 @@ import { IconButton as p } from "../IconButton/IconButton.es.js";
 const y = ({
   image: u,
   eyebrow: s,
-  title: l,
-  description: d,
+  title: d,
+  description: l,
   link: i,
   colorScheme: r = "light"
 }) => {
   const c = r === "light" ? "muted-invert" : "muted", o = /* @__PURE__ */ t(h, { children: [
-    s && /* @__PURE__ */ a(n, { as: "p", defaultVariant: "labelSm", emphasis: !0, className: e.eyebrow, children: s }),
+    s && /* @__PURE__ */ a(n, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: e.eyebrow, children: s }),
     /* @__PURE__ */ t("div", { className: e.bottomContainer, children: [
       /* @__PURE__ */ t("div", { className: e.titleContainer, children: [
-        l && /* @__PURE__ */ a(
+        d && /* @__PURE__ */ a(
           n,
           {
             as: "p",
-            defaultVariant: "headingXl",
+            defaultVariant: "headingLg",
             mobileVariant: "headingLg",
             className: e.title,
-            children: l
+            children: d
           }
         ),
         i && /* @__PURE__ */ t(h, { children: [
@@ -30,7 +30,7 @@ const y = ({
           /* @__PURE__ */ a("div", { className: e.mobile, children: /* @__PURE__ */ a(p, { variant: c, size: "md", iconName: g.ARROW_FORWARD }) })
         ] })
       ] }),
-      d && /* @__PURE__ */ a(n, { as: "p", defaultVariant: "bodySm", className: e.description, children: d })
+      l && /* @__PURE__ */ a(n, { as: "p", defaultVariant: "bodySm", className: e.description, children: l })
     ] })
   ] }), m = { backgroundImage: `url(${u})`, backgroundSize: "cover", backgroundPosition: "center" };
   return i ? /* @__PURE__ */ a("a", { href: i, className: e.highlightCard, style: m, "data-scheme": r, children: o }) : /* @__PURE__ */ a("div", { className: e.highlightCard, style: m, "data-scheme": r, children: o });

package/dist/components/HighlightCard/highlightCard.module.css

@@ -7,7 +7,7 @@
     justify-content: space-between;
     padding: 32px;
     border-radius: var(--border-radius-lg);
-    aspect-ratio: 389 / 483;
+    aspect-ratio: 309 / 383;
     color: var(--primary-inverted);
     text-decoration: none;
 }
@@ -58,19 +58,21 @@
 }
 
 @media (width <= 1200px) {
-    .highlightCard {
-        padding: 24px;
-    }
-
     .bottomContainer {
         max-width: 321px;
-        gap: 8px;
+    }
+}
+
+@media (width <= 930px) {
+    .highlightCard {
+        aspect-ratio: 380 / 397;
     }
 }
 
 @media (width <= 768px) {
     .highlightCard {
         padding: 24px;
+        aspect-ratio: 309 / 383;
     }
 
     .bottomContainer {

package/dist/modules/Highlight/highlight.module.css

@@ -74,17 +74,15 @@
     width: 100%;
 }
 
-@media (min-width: 900px) and (max-width: 1200px) {
-    .cardGridItem {
-        max-width: 290px;
-        width: 100%;
-    }
-}
 @media (min-width: 769px) and (max-width: 1200px) {
     .cardGrid {
         max-width: 100%;
     }
 
+    .cardGridItem {
+        max-width: 309px;
+    }
+
     .title {
         font-size: 56px;
         letter-spacing: -2.24px;
@@ -96,15 +94,18 @@
 
     .container {
         padding: 64px 17px;
-        gap: 32px;
     }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 930px) {
     .cardGrid {
         flex-direction: column;
         align-items: center;
     }
+
+    .cardGridItem {
+        max-width: 389px;
+    }
 }
 
 @media (max-width: 768px) {

package/package.json

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