@zenpatient-org/healthspan-marketing-ui 0.2.17 → 0.2.18

package/dist/modules/FeaturesGallery/FeaturesGallery.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../src/modules/FeaturesGallery/featuresGallery.module.css"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),d=require("../../components/Typography/Typography.cjs.js"),c=require("./components/FeatureGrid/FeatureGrid.cjs.js"),h=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),m=({label:s,url:i})=>e.jsx("a",{href:i,className:r.label,children:e.jsx(d.Typography,{defaultVariant:"labelMd",emphasis:!0,mobileVariant:"labelSm",weight:"regular",children:s})}),y=({title:s,description:i,features:l,labels:n})=>e.jsxs("section",{className:r.root,children:[e.jsxs("div",{className:r.container,children:[e.jsxs("div",{className:r.header,children:[e.jsx(o.HighlightedTitle,{title:s,className:r.title,defaultVariant:"displayMd",mobileVariant:"headingXl"}),i&&e.jsx(d.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",children:i})]}),e.jsxs("div",{className:r.features,children:[e.jsx("div",{className:r.primaryFeatures,children:l.slice(0,2).map((a,t)=>e.jsx(c.FeatureGrid,{feature:a,index:t,type:"primary"},a.label))}),l.length>2&&e.jsx("div",{className:r.secondaryFeatures,children:l.slice(2).map((a,t)=>e.jsx(c.FeatureGrid,{feature:a,index:t,type:"secondary"},a.label))})]})]}),n.length>0&&e.jsx("div",{className:r.footer,children:e.jsx(h.InfiniteScroll,{items:n,renderItem:m})})]});exports.FeaturesGallery=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../src/modules/FeaturesGallery/featuresGallery.module.css"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),c=require("../../components/Typography/Typography.cjs.js"),n=require("./components/FeatureGrid/FeatureGrid.cjs.js"),h=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),m=({label:s,url:a})=>e.jsx("a",{href:a,className:r.label,children:e.jsx(c.Typography,{defaultVariant:"labelMd",emphasis:!0,mobileVariant:"labelSm",weight:"regular",children:s})}),y=({title:s,description:a,features:l,labels:t})=>e.jsxs("section",{className:r.root,children:[e.jsxs("div",{className:r.container,children:[e.jsxs("div",{className:r.header,children:[e.jsx(o.HighlightedTitle,{title:s,className:r.title,defaultVariant:"displayMd",mobileVariant:"headingXl"}),a&&e.jsx(c.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",children:a})]}),e.jsxs("div",{className:r.features,children:[e.jsx("div",{className:r.primaryFeatures,children:l.slice(0,2).map((i,d)=>e.jsx(n.FeatureGrid,{feature:i,type:"primary"},i.label))}),l.length>2&&e.jsx("div",{className:r.secondaryFeatures,children:l.slice(2).map((i,d)=>e.jsx(n.FeatureGrid,{feature:i,type:"secondary"},i.label))})]})]}),t.length>0&&e.jsx("div",{className:r.footer,children:e.jsx(h.InfiniteScroll,{items:t,renderItem:m})})]});exports.FeaturesGallery=y;

package/dist/modules/FeaturesGallery/FeaturesGallery.es.js

@@ -1,12 +1,12 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import a from "../../modules/FeaturesGallery/featuresGallery.module.css";
 import { HighlightedTitle as c } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as o } from "../../components/Typography/Typography.es.js";
-import { FeatureGrid as n } from "./components/FeatureGrid/FeatureGrid.es.js";
+import { Typography as n } from "../../components/Typography/Typography.es.js";
+import { FeatureGrid as m } from "./components/FeatureGrid/FeatureGrid.es.js";
 import { InfiniteScroll as h } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
-const p = ({ label: t, url: l }) => /* @__PURE__ */ e("a", { href: l, className: a.label, children: /* @__PURE__ */ e(o, { defaultVariant: "labelMd", emphasis: !0, mobileVariant: "labelSm", weight: "regular", children: t }) }), v = ({ title: t, description: l, features: s, labels: d }) => /* @__PURE__ */ i("section", { className: a.root, children: [
-  /* @__PURE__ */ i("div", { className: a.container, children: [
-    /* @__PURE__ */ i("div", { className: a.header, children: [
+const p = ({ label: t, url: i }) => /* @__PURE__ */ e("a", { href: i, className: a.label, children: /* @__PURE__ */ e(n, { defaultVariant: "labelMd", emphasis: !0, mobileVariant: "labelSm", weight: "regular", children: t }) }), v = ({ title: t, description: i, features: s, labels: d }) => /* @__PURE__ */ l("section", { className: a.root, children: [
+  /* @__PURE__ */ l("div", { className: a.container, children: [
+    /* @__PURE__ */ l("div", { className: a.header, children: [
       /* @__PURE__ */ e(
         c,
         {
@@ -16,11 +16,11 @@ const p = ({ label: t, url: l }) => /* @__PURE__ */ e("a", { href: l, className:
           mobileVariant: "headingXl"
         }
       ),
-      l && /* @__PURE__ */ e(o, { as: "p", defaultVariant: "bodyLg", mobileVariant: "bodySm", children: l })
+      i && /* @__PURE__ */ e(n, { as: "p", defaultVariant: "bodyLg", mobileVariant: "bodySm", children: i })
     ] }),
-    /* @__PURE__ */ i("div", { className: a.features, children: [
-      /* @__PURE__ */ e("div", { className: a.primaryFeatures, children: s.slice(0, 2).map((r, m) => /* @__PURE__ */ e(n, { feature: r, index: m, type: "primary" }, r.label)) }),
-      s.length > 2 && /* @__PURE__ */ e("div", { className: a.secondaryFeatures, children: s.slice(2).map((r, m) => /* @__PURE__ */ e(n, { feature: r, index: m, type: "secondary" }, r.label)) })
+    /* @__PURE__ */ l("div", { className: a.features, children: [
+      /* @__PURE__ */ e("div", { className: a.primaryFeatures, children: s.slice(0, 2).map((r, o) => /* @__PURE__ */ e(m, { feature: r, type: "primary" }, r.label)) }),
+      s.length > 2 && /* @__PURE__ */ e("div", { className: a.secondaryFeatures, children: s.slice(2).map((r, o) => /* @__PURE__ */ e(m, { feature: r, type: "secondary" }, r.label)) })
     ] })
   ] }),
   d.length > 0 && /* @__PURE__ */ e("div", { className: a.footer, children: /* @__PURE__ */ e(h, { items: d, renderItem: p }) })

package/dist/modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../../components/Icon/constants.cjs.js"),l=require("../../../../utils/cn/cn.cjs.js"),n=require("../../../../src/modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.module.css"),m=require("../../../../components/Typography/Typography.cjs.js"),t=require("../../../../components/IconButton/IconButton.cjs.js"),i={primary:{default:"headingXl",mobile:"headingXs"},secondary:{default:"headingSm",mobile:"headingXxs"}},d=({feature:a,className:r,index:c,type:s})=>e.jsxs("a",{className:l.cn(n.root,n[s],r),style:{backgroundImage:`url("${a.image}")`},href:a.url,children:[e.jsx("div",{className:n.smoke,"data-smoke":c%3}),e.jsxs("div",{className:n.content,children:[e.jsx(m.Typography,{as:"h3",defaultVariant:i[s].default,mobileVariant:i[s].mobile,className:n.label,children:a.label}),e.jsx("div",{className:n.desktop,children:e.jsx(t.IconButton,{iconName:o.EIconName.ARROW_FORWARD,variant:"muted-invert",size:s==="primary"?"lg":"md"})}),e.jsx("div",{className:n.mobile,children:e.jsx(t.IconButton,{iconName:o.EIconName.ARROW_FORWARD,variant:"muted-invert",size:"sm"})})]})]});exports.FeatureGrid=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../../components/Icon/constants.cjs.js"),c=require("../../../../utils/cn/cn.cjs.js"),n=require("../../../../src/modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.module.css"),l=require("../../../../components/Typography/Typography.cjs.js"),i=require("../../../../components/IconButton/IconButton.cjs.js"),t={primary:{default:"headingXl",mobile:"headingXs"},secondary:{default:"headingSm",mobile:"headingXxs"}},m=({feature:s,className:r,type:o})=>e.jsxs("a",{className:c.cn(n.root,n[o],r),style:{backgroundImage:`url("${s.image}")`},href:s.url,children:[s.hoverTint&&e.jsx("div",{className:n.smoke,"data-smoke":s.hoverTint}),e.jsxs("div",{className:n.content,children:[e.jsx(l.Typography,{as:"h3",defaultVariant:t[o].default,mobileVariant:t[o].mobile,className:n.label,children:s.label}),e.jsx("div",{className:n.desktop,children:e.jsx(i.IconButton,{iconName:a.EIconName.ARROW_FORWARD,variant:"muted-invert",size:o==="primary"?"lg":"md"})}),e.jsx("div",{className:n.mobile,children:e.jsx(i.IconButton,{iconName:a.EIconName.ARROW_FORWARD,variant:"muted-invert",size:"sm"})})]})]});exports.FeatureGrid=m;

package/dist/modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.d.ts

@@ -2,9 +2,8 @@ import { TFeature } from '../../types';
 
 type Props = {
     feature: TFeature;
-    index: number;
     type: 'primary' | 'secondary';
     className?: string;
 };
-export declare const FeatureGrid: ({ feature, className, index, type }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FeatureGrid: ({ feature, className, type }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.es.js

@@ -1,29 +1,29 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { EIconName as o } from "../../../../components/Icon/constants.es.js";
-import { cn as d } from "../../../../utils/cn/cn.es.js";
+import { cn as t } from "../../../../utils/cn/cn.es.js";
 import a from "../../../../modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.module.css";
-import { Typography as c } from "../../../../components/Typography/Typography.es.js";
+import { Typography as d } from "../../../../components/Typography/Typography.es.js";
 import { IconButton as l } from "../../../../components/IconButton/IconButton.es.js";
-const s = {
+const n = {
   primary: { default: "headingXl", mobile: "headingXs" },
   secondary: { default: "headingSm", mobile: "headingXxs" }
-}, R = ({ feature: m, className: n, index: t, type: i }) => /* @__PURE__ */ r(
+}, R = ({ feature: i, className: s, type: m }) => /* @__PURE__ */ r(
   "a",
   {
-    className: d(a.root, a[i], n),
-    style: { backgroundImage: `url("${m.image}")` },
-    href: m.url,
+    className: t(a.root, a[m], s),
+    style: { backgroundImage: `url("${i.image}")` },
+    href: i.url,
     children: [
-      /* @__PURE__ */ e("div", { className: a.smoke, "data-smoke": t % 3 }),
+      i.hoverTint && /* @__PURE__ */ e("div", { className: a.smoke, "data-smoke": i.hoverTint }),
       /* @__PURE__ */ r("div", { className: a.content, children: [
         /* @__PURE__ */ e(
-          c,
+          d,
           {
             as: "h3",
-            defaultVariant: s[i].default,
-            mobileVariant: s[i].mobile,
+            defaultVariant: n[m].default,
+            mobileVariant: n[m].mobile,
             className: a.label,
-            children: m.label
+            children: i.label
           }
         ),
         /* @__PURE__ */ e("div", { className: a.desktop, children: /* @__PURE__ */ e(
@@ -31,7 +31,7 @@ const s = {
           {
             iconName: o.ARROW_FORWARD,
             variant: "muted-invert",
-            size: i === "primary" ? "lg" : "md"
+            size: m === "primary" ? "lg" : "md"
           }
         ) }),
         /* @__PURE__ */ e("div", { className: a.mobile, children: /* @__PURE__ */ e(l, { iconName: o.ARROW_FORWARD, variant: "muted-invert", size: "sm" }) })

package/dist/modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.module.css

@@ -54,15 +54,15 @@
     background: lightgray -44.215px 0 / 114.84% 100% no-repeat;
     transition: opacity 0.3s ease-in-out;
 
-    &[data-smoke='0'] {
+    &[data-smoke='orange'] {
         background: url('./assets/smoke-1.jpg') lightgray 50% / cover no-repeat;
     }
 
-    &[data-smoke='1'] {
+    &[data-smoke='blue'] {
         background: url('./assets/smoke-2.jpg') lightgray 1.232px 0 / 114.84% 100% no-repeat;
     }
 
-    &[data-smoke='2'] {
+    &[data-smoke='red'] {
         background: url('./assets/smoke-3.jpg') lightgray -44.215px 0 / 114.84% 100% no-repeat;
     }
 }
@@ -77,7 +77,7 @@
     display: flex;
     width: 100%;
     justify-content: space-between;
-    align-items: center;
+    align-items: inherit;
     gap: var(--spacing-16);
 }
 

package/dist/modules/FeaturesGallery/types.d.ts

@@ -2,4 +2,5 @@ export type TFeature = {
     image: string;
     label: string;
     url: string;
+    hoverTint?: 'red' | 'orange' | 'blue';
 };

package/package.json

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