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

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/dist/modules/HomepageHeroV2/HomepageHeroV2.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../pageComponents/HomepageHero/components/MiddleCarousel/MiddleCarousel.cjs.js"),o=require("../../components/Button/Button.cjs.js"),s=require("../../src/modules/HomepageHeroV2/homepageHeroV2.module.css"),l=require("../../components/Icon/Icon.cjs.js"),d=require("../../components/Icon/constants.cjs.js"),n=require("../../components/Typography/Typography.cjs.js");function m({title:t,description:i,button:r,buttonInverted:a}){return e.jsx("section",{className:s.root,"data-type":"hero",children:e.jsxs("div",{className:s.container,children:[e.jsxs("div",{className:s.textContent,children:[e.jsxs("div",{className:s.hsaContainer,children:[e.jsx(l.Icon,{name:d.EIconName.CIRCLE_CHECK,className:s.checkIcon}),e.jsx(n.Typography,{className:s.hsaText,as:"p",defaultVariant:"bodySm",children:"HSA/FSA Eligible"})]}),e.jsx(n.Typography,{className:s.title,as:"h2",defaultVariant:"displayXs",mobileVariant:"headingLg",children:t}),e.jsx(n.Typography,{className:s.description,as:"p",defaultVariant:"bodySm",mobileVariant:"bodyXs",children:i}),e.jsxs("div",{className:s.buttonContainer,children:[e.jsx(o.Button,{as:"a",href:r.link,variant:"secondary",size:"md",children:r.text}),a&&e.jsx(o.Button,{as:"a",href:a.link,variant:"muted-invert",size:"md",children:a.text})]})]}),e.jsx("div",{className:s.carouselArea,children:e.jsx(c.MiddleCarousel,{})})]})})}exports.HomepageHeroV2=m;

package/dist/modules/HomepageHeroV2/HomepageHeroV2.d.ts

@@ -0,0 +1,13 @@
+export type HomepageHeroV2Props = {
+    title: string;
+    description: string;
+    button: {
+        text: string;
+        link: string;
+    };
+    buttonInverted?: {
+        text: string;
+        link: string;
+    };
+};
+export declare function HomepageHeroV2({ title, description, button, buttonInverted }: HomepageHeroV2Props): import("react/jsx-runtime").JSX.Element;

package/dist/modules/HomepageHeroV2/HomepageHeroV2.es.js

@@ -0,0 +1,27 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { MiddleCarousel as m } from "../../pageComponents/HomepageHero/components/MiddleCarousel/MiddleCarousel.es.js";
+import { Button as t } from "../../components/Button/Button.es.js";
+import a from "../../modules/HomepageHeroV2/homepageHeroV2.module.css";
+import { Icon as c } from "../../components/Icon/Icon.es.js";
+import { EIconName as d } from "../../components/Icon/constants.es.js";
+import { Typography as s } from "../../components/Typography/Typography.es.js";
+function x({ title: n, description: l, button: o, buttonInverted: r }) {
+  return /* @__PURE__ */ e("section", { className: a.root, "data-type": "hero", children: /* @__PURE__ */ i("div", { className: a.container, children: [
+    /* @__PURE__ */ i("div", { className: a.textContent, children: [
+      /* @__PURE__ */ i("div", { className: a.hsaContainer, children: [
+        /* @__PURE__ */ e(c, { name: d.CIRCLE_CHECK, className: a.checkIcon }),
+        /* @__PURE__ */ e(s, { className: a.hsaText, as: "p", defaultVariant: "bodySm", children: "HSA/FSA Eligible" })
+      ] }),
+      /* @__PURE__ */ e(s, { className: a.title, as: "h2", defaultVariant: "displayXs", mobileVariant: "headingLg", children: n }),
+      /* @__PURE__ */ e(s, { className: a.description, as: "p", defaultVariant: "bodySm", mobileVariant: "bodyXs", children: l }),
+      /* @__PURE__ */ i("div", { className: a.buttonContainer, children: [
+        /* @__PURE__ */ e(t, { as: "a", href: o.link, variant: "secondary", size: "md", children: o.text }),
+        r && /* @__PURE__ */ e(t, { as: "a", href: r.link, variant: "muted-invert", size: "md", children: r.text })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: a.carouselArea, children: /* @__PURE__ */ e(m, {}) })
+  ] }) });
+}
+export {
+  x as HomepageHeroV2
+};

package/dist/modules/HomepageHeroV2/homepageHeroV2.module.css

@@ -0,0 +1,125 @@
+.root {
+    position: relative;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    padding: 0 32px;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    max-width: var(--content-max-width);
+    align-items: center;
+    border-radius: var(--border-radius-lg);
+    background-image: url('./assets/bg.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.textContent {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    color: var(--color-text-primary-inverted);
+    max-width: 480px;
+    margin-left: 88px;
+    margin-bottom: 196px;
+    margin-top: 196px;
+    justify-content: flex-start;
+}
+
+.hsaContainer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.checkIcon {
+    margin-top: -2px;
+    width: 20px;
+    height: 20px;
+}
+
+.buttonContainer {
+    display: flex;
+    gap: 12px;
+}
+
+.buttonContainer a {
+    width: fit-content;
+}
+
+.carouselArea {
+    display: flex;
+    position: absolute;
+    width: 360px;
+    height: 540px;
+    left: 50%;
+    transform: translateX(30px);
+    overflow: visible;
+}
+
+@media (width <= 1150px) {
+    .textContent {
+        max-width: 319px;
+        gap: 12px;
+        margin-top: 222px;
+        margin-bottom: 287px;
+        margin-left: 32px;
+    }
+
+    .title {
+        font-size: 32px;
+        line-height: 110%;
+        letter-spacing: -1.28px;
+    }
+
+    .description {
+        font-size: 14px;
+        letter-spacing: -0.28px;
+    }
+
+    .buttonContainer {
+        margin-top: 4px;
+    }
+}
+
+@media (width <= 868px) {
+    .root {
+        padding: 0 4px;
+    }
+
+    .container {
+        background-image: url('./assets/bgmobile.jpg');
+        align-items: center;
+        justify-content: center;
+    }
+
+    .textContent {
+        justify-content: center;
+        text-align: center;
+        margin: unset;
+        margin-top: 221px;
+        padding: 32px 24px;
+        max-width: 510px;
+    }
+
+    .hsaContainer {
+        justify-content: inherit;
+    }
+
+    .buttonContainer {
+        justify-content: inherit;
+    }
+
+    .carouselArea {
+        display: none;
+    }
+}

package/dist/modules/HomepageHeroV2/index.d.ts

@@ -0,0 +1 @@
+export { HomepageHeroV2 } from './HomepageHeroV2';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.17",
+    "version": "0.2.19",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -595,6 +595,11 @@
             "import": "./dist/modules/ScrollingText/ScrollingText.es.js",
             "require": "./dist/modules/ScrollingText/ScrollingText.cjs.js"
         },
+        "./HomepageHeroV2": {
+            "types": "./dist/modules/HomepageHeroV2/HomepageHeroV2.d.ts",
+            "import": "./dist/modules/HomepageHeroV2/HomepageHeroV2.es.js",
+            "require": "./dist/modules/HomepageHeroV2/HomepageHeroV2.cjs.js"
+        },
         "./Bubbles": {
             "types": "./dist/pageComponents/Bubbles/Bubbles.d.ts",
             "import": "./dist/pageComponents/Bubbles/Bubbles.es.js",