@zenpatient-org/healthspan-marketing-ui 0.2.28 → 0.2.30

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

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

package/dist/components/HighlightCard/HighlightCard.d.ts

@@ -1,8 +1,11 @@
+import { TColorScheme } from '../../types/common';
+
 export type HighlightCardProps = {
     image: string;
     eyebrow?: string;
     title?: string;
     description?: string;
     link?: string;
+    colorScheme?: TColorScheme;
 };
-export declare const HighlightCard: ({ image, eyebrow, title, description, link }: HighlightCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HighlightCard: ({ image, eyebrow, title, description, link, colorScheme, }: HighlightCardProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,33 +1,40 @@
-import { jsxs as i, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { EIconName as m } from "../Icon/constants.es.js";
-import a from "../../components/HighlightCard/highlightCard.module.css";
-import { Typography as t } from "../Typography/Typography.es.js";
-import { IconButton as h } from "../IconButton/IconButton.es.js";
-const b = ({ image: g, eyebrow: n, title: s, description: l, link: r }) => {
-  const o = /* @__PURE__ */ i(d, { children: [
-    n && /* @__PURE__ */ e(t, { as: "p", defaultVariant: "labelSm", emphasis: !0, className: a.eyebrow, children: n }),
-    /* @__PURE__ */ i("div", { className: a.bottomContainer, children: [
-      /* @__PURE__ */ i("div", { className: a.titleContainer, children: [
-        s && /* @__PURE__ */ e(
-          t,
+import { jsxs as t, Fragment as h, jsx as a } from "react/jsx-runtime";
+import { EIconName as g } from "../Icon/constants.es.js";
+import e from "../../components/HighlightCard/highlightCard.module.css";
+import { Typography as n } from "../Typography/Typography.es.js";
+import { IconButton as p } from "../IconButton/IconButton.es.js";
+const y = ({
+  image: u,
+  eyebrow: s,
+  title: l,
+  description: d,
+  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 }),
+    /* @__PURE__ */ t("div", { className: e.bottomContainer, children: [
+      /* @__PURE__ */ t("div", { className: e.titleContainer, children: [
+        l && /* @__PURE__ */ a(
+          n,
           {
             as: "p",
             defaultVariant: "headingXl",
             mobileVariant: "headingLg",
-            className: a.title,
-            children: s
+            className: e.title,
+            children: l
           }
         ),
-        r && /* @__PURE__ */ i(d, { children: [
-          /* @__PURE__ */ e("div", { className: a.desktop, children: /* @__PURE__ */ e(h, { variant: "muted-invert", size: "lg", iconName: m.ARROW_FORWARD }) }),
-          /* @__PURE__ */ e("div", { className: a.mobile, children: /* @__PURE__ */ e(h, { variant: "muted-invert", size: "md", iconName: m.ARROW_FORWARD }) })
+        i && /* @__PURE__ */ t(h, { children: [
+          /* @__PURE__ */ a("div", { className: e.desktop, children: /* @__PURE__ */ a(p, { variant: c, size: "lg", iconName: g.ARROW_FORWARD }) }),
+          /* @__PURE__ */ a("div", { className: e.mobile, children: /* @__PURE__ */ a(p, { variant: c, size: "md", iconName: g.ARROW_FORWARD }) })
         ] })
       ] }),
-      l && /* @__PURE__ */ e(t, { as: "p", defaultVariant: "bodySm", className: a.description, children: l })
+      d && /* @__PURE__ */ a(n, { as: "p", defaultVariant: "bodySm", className: e.description, children: d })
     ] })
-  ] }), c = { backgroundImage: `url(${g})`, backgroundSize: "cover", backgroundPosition: "center" };
-  return r ? /* @__PURE__ */ e("a", { href: r, className: a.highlightCard, style: c, children: o }) : /* @__PURE__ */ e("div", { className: a.highlightCard, style: c, children: o });
+  ] }), 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 });
 };
 export {
-  b as HighlightCard
+  y as HighlightCard
 };

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

@@ -1,20 +1,36 @@
 .highlightCard {
+    --primary-inverted: var(--color-text-primary-inverted);
+    --secondary-inverted: var(--color-text-secondary-inverted);
+
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 32px;
     border-radius: var(--border-radius-lg);
-    height: 483px;
-    color: var(--color-text-primary-inverted);
+    aspect-ratio: 389 / 483;
+    color: var(--primary-inverted);
     text-decoration: none;
 }
 
+.highlightCard[data-scheme='dark'] {
+    --primary-inverted: var(--color-text-primary);
+    --secondary-inverted: var(--color-text-secondary);
+}
+
 .eyebrow {
     width: 100%;
-    color: var(--color-text-secondary-inverted);
+    color: var(--secondary-inverted);
     align-self: flex-start;
 }
 
+.title {
+    color: var(--primary-inverted);
+}
+
+.description {
+    color: var(--secondary-inverted);
+}
+
 .bottomContainer {
     display: flex;
     flex-direction: column;
@@ -43,7 +59,6 @@
 
 @media (width <= 1200px) {
     .highlightCard {
-        height: 477px;
         padding: 24px;
     }
 
@@ -55,7 +70,6 @@
 
 @media (width <= 768px) {
     .highlightCard {
-        height: 415.5px;
         padding: 24px;
     }
 

package/dist/modules/Citation/Citation.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("../../src/modules/Citation/citation.module.css"),i=require("../../utils/cn/cn.cjs.js"),u=require("../../components/Typography/Typography.cjs.js");function l({orderPadding:r,items:n,className:c}){const e=isNaN(Number(r))?0:r;return!n||n.length===0?null:t.jsx("section",{className:i.cn(a.root,c),children:n==null?void 0:n.map((o,s)=>t.jsxs(u.Typography,{as:"p",className:a.text,defaultVariant:"bodySm",mobileVariant:"bodyXs",children:[t.jsx("sup",{children:e?e+s:s+1})," ",o.item]},o.id))})}exports.Citation=l;

package/dist/modules/Citation/Citation.d.ts

@@ -0,0 +1,9 @@
+export type CitationProps = {
+    orderPadding?: number;
+    items?: Array<{
+        id: string | number;
+        item: string;
+    }>;
+    className?: string;
+};
+export declare function Citation({ orderPadding, items, className }: CitationProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/modules/Citation/Citation.es.js

@@ -0,0 +1,15 @@
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import p from "../../modules/Citation/citation.module.css";
+import { cn as i } from "../../utils/cn/cn.es.js";
+import { Typography as e } from "../../components/Typography/Typography.es.js";
+function y({ orderPadding: o, items: r, className: s }) {
+  const t = isNaN(Number(o)) ? 0 : o;
+  return !r || r.length === 0 ? null : /* @__PURE__ */ l("section", { className: i(p.root, s), children: r == null ? void 0 : r.map((a, n) => /* @__PURE__ */ c(e, { as: "p", className: p.text, defaultVariant: "bodySm", mobileVariant: "bodyXs", children: [
+    /* @__PURE__ */ l("sup", { children: t ? t + n : n + 1 }),
+    " ",
+    a.item
+  ] }, a.id)) });
+}
+export {
+  y as Citation
+};

package/dist/modules/Citation/citation.module.css

@@ -0,0 +1,23 @@
+.root {
+    width: 100%;
+    padding: 16px 120px 48px 120px;
+    max-width: var(--content-max-width);
+    margin: 0 auto;
+}
+
+.text {
+    width: 100%;
+    color: var(--color-text-secondary);
+}
+
+.text sup {
+    font-size: 0.8em;
+    vertical-align: super;
+    line-height: 1;
+}
+
+@media (width <= 768px) {
+    .text {
+        padding: 24px;
+    }
+}

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

@@ -0,0 +1,2 @@
+export { Citation } from './Citation';
+export type { CitationProps } from './Citation';

package/dist/modules/ComparisonV2/ComparisonV2.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),g=require("../../types/analytics/analytics.cjs.js"),f=require("../../utils/useIsMobile.cjs.js"),N=require("../Comparison/assets/company-logo.svg.cjs.js"),q=require("../Comparison/utils.cjs.js"),i=require("../../src/modules/ComparisonV2/comparisonV2.module.css"),T=require("../../utils/cn/cn.cjs.js"),_=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),c=require("../../components/Typography/Typography.cjs.js"),H=require("./components/ComparisonV2Tooltip/ComparisonV2Tooltip.cjs.js"),M=require("./components/ComparisonV2Description/ComparisonV2Description.cjs.js"),B=require("../../components/Button/Button.cjs.js"),E=({title:C,description:u,ctaBlock:m,getStartedLink:d,comparisonV2Columns:j})=>{const[t,r]=y.useState(null),[p,a]=y.useState(null),x=f.useIsMobile(768),b=s=>{var n;(n=window.eventBus)==null||n.emit("analytics",{event:g.EAnalyticsEvent.ctaClicked,type:g.EAnalyticsEventType.interaction,component:"Comparison V2",payload:{link:d}})},V=s=>{x&&(t===s?(a(s),setTimeout(()=>{r(null),a(null)},250)):t?(a(t),setTimeout(()=>{a(null),r(s)},250)):r(s))},v=s=>{s==null||s.stopPropagation(),t&&(a(t),setTimeout(()=>{r(null),a(null)},250))};return e.jsx("div",{className:i.root,children:e.jsxs("div",{className:i.container,children:[e.jsxs("div",{className:i.header,children:[e.jsx(_.HighlightedTitle,{title:C,defaultVariant:"displayMd",mobileVariant:"headingXl"}),u&&e.jsx(c.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",className:i.description,children:u})]}),e.jsxs("div",{className:i.tableContainer,children:[e.jsx("div",{className:i.table,children:j.map((s,n)=>e.jsxs("div",{className:T.cn(i.alternativeCol,{[i.featuredCol]:s.featured}),children:[e.jsx("div",{className:T.cn(i.alternativeHeaderCell,{[i.featuredHeaderCell]:s.featured}),children:q.isHealthspan(s.comparisonV2Header.type)?e.jsx(N.default,{className:i.logo,"aria-label":"Healthspan logo"}):e.jsx(c.Typography,{as:"h3",defaultVariant:"headingLg",mobileVariant:"preambleMd",className:i.headerText,children:s.comparisonV2Header.title})}),s.comparisonV2Cells.map((l,h)=>{const o=`comparison-${n}-${h}`;return e.jsxs("div",{className:i.alternativeContent,onClick:()=>V(o),children:[(t===o||p===o)&&e.jsx(H.ComparisonV2Tooltip,{title:l.title,description:l.description||"",onClose:v,isOpening:t===o&&!p,isClosing:p===o}),e.jsx(c.Typography,{as:"p",defaultVariant:"preambleMd",mobileVariant:"bodyXl",className:i.alternativeTitle,children:l.title}),l.description&&e.jsx(M.ComparisonV2Description,{title:l.title,description:l.description})]},h)})]},n))}),m&&d&&e.jsx("div",{className:i.ctaContainer,children:e.jsxs("div",{className:i.ctaBlock,children:[e.jsx(c.Typography,{as:"p",defaultVariant:"preambleMd",mobileVariant:"bodyXl",className:i.ctaText,children:m}),e.jsx("div",{className:i.ctaButton,children:e.jsx(B.Button,{as:"a",href:d||"#",size:"lg",onClick:b,children:"Get started"})})]})})]})]})})};exports.ComparisonV2=E;

package/dist/modules/ComparisonV2/ComparisonV2.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ComparisonV2Column } from './types';
+
+export type ComparisonV2Props = {
+    title: ReactNode;
+    description?: string;
+    ctaBlock?: string;
+    getStartedLink?: string;
+    comparisonV2Columns: Array<ComparisonV2Column>;
+};
+export declare const ComparisonV2: ({ title, description, ctaBlock, getStartedLink, comparisonV2Columns, }: ComparisonV2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/ComparisonV2/ComparisonV2.es.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
+import { useState as C } from "react";
+import { EAnalyticsEventType as H, EAnalyticsEvent as M } from "../../types/analytics/analytics.es.js";
+import { useIsMobile as B } from "../../utils/useIsMobile.es.js";
+import E from "../Comparison/assets/company-logo.svg.es.js";
+import { isHealthspan as k } from "../Comparison/utils.es.js";
+import e from "../../modules/ComparisonV2/comparisonV2.module.css";
+import { cn as b } from "../../utils/cn/cn.es.js";
+import { HighlightedTitle as x } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as c } from "../../components/Typography/Typography.es.js";
+import { ComparisonV2Tooltip as X } from "./components/ComparisonV2Tooltip/ComparisonV2Tooltip.es.js";
+import { ComparisonV2Description as j } from "./components/ComparisonV2Description/ComparisonV2Description.es.js";
+import { Button as A } from "../../components/Button/Button.es.js";
+const R = ({
+  title: g,
+  description: h,
+  ctaBlock: f,
+  getStartedLink: d,
+  comparisonV2Columns: v
+}) => {
+  const [t, m] = C(null), [p, l] = C(null), T = B(768), V = (i) => {
+    var s;
+    (s = window.eventBus) == null || s.emit("analytics", {
+      event: M.ctaClicked,
+      type: H.interaction,
+      component: "Comparison V2",
+      payload: {
+        link: d
+      }
+    });
+  }, y = (i) => {
+    T && (t === i ? (l(i), setTimeout(() => {
+      m(null), l(null);
+    }, 250)) : t ? (l(t), setTimeout(() => {
+      l(null), m(i);
+    }, 250)) : m(i));
+  }, N = (i) => {
+    i == null || i.stopPropagation(), t && (l(t), setTimeout(() => {
+      m(null), l(null);
+    }, 250));
+  };
+  return /* @__PURE__ */ a("div", { className: e.root, children: /* @__PURE__ */ n("div", { className: e.container, children: [
+    /* @__PURE__ */ n("div", { className: e.header, children: [
+      /* @__PURE__ */ a(x, { title: g, defaultVariant: "displayMd", mobileVariant: "headingXl" }),
+      h && /* @__PURE__ */ a(
+        c,
+        {
+          as: "p",
+          defaultVariant: "bodyLg",
+          mobileVariant: "bodySm",
+          className: e.description,
+          children: h
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n("div", { className: e.tableContainer, children: [
+      /* @__PURE__ */ a("div", { className: e.table, children: v.map((i, s) => /* @__PURE__ */ n(
+        "div",
+        {
+          className: b(e.alternativeCol, {
+            [e.featuredCol]: i.featured
+          }),
+          children: [
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: b(e.alternativeHeaderCell, {
+                  [e.featuredHeaderCell]: i.featured
+                }),
+                children: k(i.comparisonV2Header.type) ? /* @__PURE__ */ a(E, { className: e.logo, "aria-label": "Healthspan logo" }) : /* @__PURE__ */ a(
+                  c,
+                  {
+                    as: "h3",
+                    defaultVariant: "headingLg",
+                    mobileVariant: "preambleMd",
+                    className: e.headerText,
+                    children: i.comparisonV2Header.title
+                  }
+                )
+              }
+            ),
+            i.comparisonV2Cells.map((o, u) => {
+              const r = `comparison-${s}-${u}`;
+              return /* @__PURE__ */ n(
+                "div",
+                {
+                  className: e.alternativeContent,
+                  onClick: () => y(r),
+                  children: [
+                    (t === r || p === r) && /* @__PURE__ */ a(
+                      X,
+                      {
+                        title: o.title,
+                        description: o.description || "",
+                        onClose: N,
+                        isOpening: t === r && !p,
+                        isClosing: p === r
+                      }
+                    ),
+                    /* @__PURE__ */ a(
+                      c,
+                      {
+                        as: "p",
+                        defaultVariant: "preambleMd",
+                        mobileVariant: "bodyXl",
+                        className: e.alternativeTitle,
+                        children: o.title
+                      }
+                    ),
+                    o.description && /* @__PURE__ */ a(
+                      j,
+                      {
+                        title: o.title,
+                        description: o.description
+                      }
+                    )
+                  ]
+                },
+                u
+              );
+            })
+          ]
+        },
+        s
+      )) }),
+      f && d && /* @__PURE__ */ a("div", { className: e.ctaContainer, children: /* @__PURE__ */ n("div", { className: e.ctaBlock, children: [
+        /* @__PURE__ */ a(
+          c,
+          {
+            as: "p",
+            defaultVariant: "preambleMd",
+            mobileVariant: "bodyXl",
+            className: e.ctaText,
+            children: f
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: e.ctaButton, children: /* @__PURE__ */ a(A, { as: "a", href: d || "#", size: "lg", onClick: V, children: "Get started" }) })
+      ] }) })
+    ] })
+  ] }) });
+};
+export {
+  R as ComparisonV2
+};

package/dist/modules/ComparisonV2/comparisonV2.module.css

@@ -0,0 +1,254 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--spacing-64, 64px);
+}
+
+.container {
+    width: 100%;
+    min-width: fit-content;
+    max-width: 1080px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--spacing-64, 64px);
+    padding: 5vw;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 2vw;
+    }
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--spacing-20);
+    text-align: center;
+    width: 100%;
+    max-width: 670px;
+}
+
+.description {
+    max-width: 570px;
+}
+
+.tableContainer {
+    width: 100%;
+    background-color: var(--color-bg-neutral-light);
+    border-radius: var(--border-radius-xl);
+    padding: var(--spacing-24, 24px) 2vw;
+    padding-left: 0;
+    padding-bottom: 0;
+}
+
+.table {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 100%;
+    position: relative;
+    text-align: center;
+}
+
+.alternativeHeaderCell, .featuredHeaderCell {
+    padding: 2vw;
+    padding-bottom: 2vw;
+    height: 137px;
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    margin: 1vw;
+    margin-bottom: 0;
+}
+
+.featuredHeaderCell {
+    border-radius: var(--border-radius-md);
+    background: linear-gradient(0deg, #7A87A6 0%, #496E8D 16%, #195675 33%, #13435B 50%, #0E3041 66%, #081D27 83%, #000 100%);
+    color: var(--color-solar-200);
+}
+
+.alternativeCol, .featuredCol {
+    padding-right: 0;
+    padding-bottom: 32px;
+
+}
+
+.featuredCol {
+    background-color: var(--color-bg-base-light);
+    border: 1px solid var(--color-indigo-300);
+    box-shadow: 0 44px 12px 0 rgba(0, 0, 0, 0.00), 0 28px 11px 0 rgba(0, 0, 0, 0.01), 0 16px 10px 0 rgba(0, 0, 0, 0.02), 0 7px 7px 0 rgba(0, 0, 0, 0.04), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
+    border-radius: var(--border-radius-lg);
+}
+
+.alternativeCol {
+    border: 1px solid transparent;
+}
+
+.alternativeContent, .featuredContent {
+    cursor: pointer;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    justify-content: flex-end;
+    gap: var(--spacing-8, 8px);
+    padding: var(--spacing-24, 24px) 2vw;
+    border-bottom: 1px solid var(--color-bg-fill-alpha-black-10);
+    text-wrap: pretty;
+    height: 120px;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.alternativeContent {
+    padding-right: 0;
+    padding-left: 2.2vw;
+}
+
+.featuredContent {
+    padding-left: 0;
+}
+
+.featuredTitle, .alternativeTitle {
+    align-self: flex-start;
+}
+
+.featuredTitle, .featuredDescription, .alternativeTitle, .alternativeDescription {
+    padding-inline: 3vw;
+}
+
+@media (max-width: 768px) {
+    .featuredTitle, .alternativeTitle {
+        color: var(--color-text-secondary);
+    }
+}
+
+.featuredDescription, .alternativeDescription {
+    color: var(--color-text-secondary);
+}
+
+.rowDescriptionContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ctaContainer {
+    padding: var(--spacing-24, 24px) 2vw;
+    padding-right: 0;
+}
+
+.ctaBlock {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-16, 16px);
+    background-color: var(--color-bg-base-light);
+    border-radius: var(--border-radius-lg);
+    padding: var(--spacing-24, 24px) 2.22vw;
+}
+
+.ctaButton {
+    flex-shrink: 0;
+}
+
+.hideMobile {
+    display: none;
+}
+
+@media (min-width: 769px) {
+    .hideMobile {
+        display: block;
+    }
+}
+
+.hideDesktop {
+    display: block;
+}
+
+@media (min-width: 769px) {
+    .hideDesktop {
+        display: none;
+    }
+}
+
+/* Tooltip */
+
+.tooltip {
+    padding: var(--spacing-24, 24px);
+    background-color: var(--color-bg-base-light);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16, 16px);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: fit-content;
+    z-index: 1000;
+}
+
+.tooltipOpening {
+    animation: slideInDown 0.25s ease-in-out forwards;
+}
+
+.tooltipClosing {
+    animation: slideOutUp 0.25s ease-in-out forwards;
+}
+
+.tooltipHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.tooltipDescription {
+    text-align: left;
+}
+
+.closeButtonWrapper {
+    appearance: none;
+    border: none;
+    background: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.closeIcon {
+    width: 16px;
+    height: 16px;
+    padding-inline: 8px;
+}
+
+@keyframes slideInDown {
+    from {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOutUp {
+    from {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+}

package/dist/modules/ComparisonV2/components/ComparisonV2Description/ComparisonV2Description.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("../../../../utils/cn/cn.cjs.js"),e=require("../../../../src/modules/ComparisonV2/comparisonV2.module.css"),r=require("../../../../components/Typography/Typography.cjs.js"),t=require("../../../../components/Icon/Icon.cjs.js"),c=require("../../../../components/Icon/constants.cjs.js"),i=({description:s})=>o.jsxs("div",{className:e.rowDescriptionContainer,children:[o.jsx(r.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:n.cn(e.featuredDescription,e.hideMobile),children:s}),o.jsx(t.Icon,{name:c.EIconName.DOT,className:n.cn(e.dot,e.hideDesktop)})]});exports.ComparisonV2Description=i;

package/dist/modules/ComparisonV2/components/ComparisonV2Description/ComparisonV2Description.d.ts

@@ -0,0 +1,4 @@
+export declare const ComparisonV2Description: ({ description }: {
+    title: string;
+    description: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/ComparisonV2/components/ComparisonV2Description/ComparisonV2Description.es.js

@@ -0,0 +1,22 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { cn as i } from "../../../../utils/cn/cn.es.js";
+import o from "../../../../modules/ComparisonV2/comparisonV2.module.css";
+import { Typography as t } from "../../../../components/Typography/Typography.es.js";
+import { Icon as a } from "../../../../components/Icon/Icon.es.js";
+import { EIconName as s } from "../../../../components/Icon/constants.es.js";
+const h = ({ description: e }) => /* @__PURE__ */ m("div", { className: o.rowDescriptionContainer, children: [
+  /* @__PURE__ */ r(
+    t,
+    {
+      as: "p",
+      defaultVariant: "bodyMd",
+      mobileVariant: "bodySm",
+      className: i(o.featuredDescription, o.hideMobile),
+      children: e
+    }
+  ),
+  /* @__PURE__ */ r(a, { name: s.DOT, className: i(o.dot, o.hideDesktop) })
+] });
+export {
+  h as ComparisonV2Description
+};

package/dist/modules/ComparisonV2/components/ComparisonV2Description/index.d.ts

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

package/dist/modules/ComparisonV2/components/ComparisonV2Tooltip/ComparisonV2Tooltip.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),o=require("../../../../src/modules/ComparisonV2/comparisonV2.module.css"),h=require("../../../../utils/cn/cn.cjs.js"),l=require("../../../../components/Typography/Typography.cjs.js"),s=require("../../../../components/Icon/Icon.cjs.js"),c=require("../../../../components/Icon/constants.cjs.js"),y=({title:p,description:m,onClose:n,isOpening:u,isClosing:d})=>{const t=a.useRef(null);return a.useEffect(()=>{const i=r=>{r.stopPropagation(),t.current&&!t.current.contains(r.target)&&n()};return document.addEventListener("mousedown",i),()=>{document.removeEventListener("mousedown",i)}},[n]),e.jsxs("div",{className:h.cn(o.tooltip,u&&o.tooltipOpening,d&&o.tooltipClosing),ref:t,children:[e.jsxs("div",{className:o.tooltipHeader,children:[e.jsx(l.Typography,{as:"h4",defaultVariant:"headingSm",mobileVariant:"headingXs",className:o.tooltipTitle,children:p}),e.jsxs("button",{className:o.closeButtonWrapper,onClick:n,children:[e.jsx(s.Icon,{name:c.EIconName.BRACKET_LEFT}),e.jsx(s.Icon,{className:o.closeIcon,name:c.EIconName.CLOSE}),e.jsx(s.Icon,{name:c.EIconName.BRACKET_RIGHT})]})]}),e.jsx(l.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:o.tooltipDescription,children:m})]})};exports.ComparisonV2Tooltip=y;

package/dist/modules/ComparisonV2/components/ComparisonV2Tooltip/ComparisonV2Tooltip.d.ts

@@ -0,0 +1,7 @@
+export declare const ComparisonV2Tooltip: ({ title, description, onClose, isOpening, isClosing, }: {
+    title: string;
+    description: string;
+    onClose: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    isOpening: boolean;
+    isClosing: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/ComparisonV2/components/ComparisonV2Tooltip/ComparisonV2Tooltip.es.js

@@ -0,0 +1,53 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { useRef as f, useEffect as h } from "react";
+import o from "../../../../modules/ComparisonV2/comparisonV2.module.css";
+import { cn as E } from "../../../../utils/cn/cn.es.js";
+import { Typography as l } from "../../../../components/Typography/Typography.es.js";
+import { Icon as n } from "../../../../components/Icon/Icon.es.js";
+import { EIconName as a } from "../../../../components/Icon/constants.es.js";
+const V = ({
+  title: c,
+  description: p,
+  onClose: e,
+  isOpening: d,
+  isClosing: u
+}) => {
+  const i = f(null);
+  return h(() => {
+    const s = (m) => {
+      m.stopPropagation(), i.current && !i.current.contains(m.target) && e();
+    };
+    return document.addEventListener("mousedown", s), () => {
+      document.removeEventListener("mousedown", s);
+    };
+  }, [e]), /* @__PURE__ */ r(
+    "div",
+    {
+      className: E(o.tooltip, d && o.tooltipOpening, u && o.tooltipClosing),
+      ref: i,
+      children: [
+        /* @__PURE__ */ r("div", { className: o.tooltipHeader, children: [
+          /* @__PURE__ */ t(
+            l,
+            {
+              as: "h4",
+              defaultVariant: "headingSm",
+              mobileVariant: "headingXs",
+              className: o.tooltipTitle,
+              children: c
+            }
+          ),
+          /* @__PURE__ */ r("button", { className: o.closeButtonWrapper, onClick: e, children: [
+            /* @__PURE__ */ t(n, { name: a.BRACKET_LEFT }),
+            /* @__PURE__ */ t(n, { className: o.closeIcon, name: a.CLOSE }),
+            /* @__PURE__ */ t(n, { name: a.BRACKET_RIGHT })
+          ] })
+        ] }),
+        /* @__PURE__ */ t(l, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: o.tooltipDescription, children: p })
+      ]
+    }
+  );
+};
+export {
+  V as ComparisonV2Tooltip
+};

package/dist/modules/ComparisonV2/components/ComparisonV2Tooltip/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export { ComparisonV2 } from './ComparisonV2';
+export type { ComparisonV2Props } from './ComparisonV2';

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

@@ -0,0 +1,11 @@
+export type ComparisonV2Column = {
+    featured: boolean;
+    comparisonV2Header: {
+        title: string;
+        type: string;
+    };
+    comparisonV2Cells: Array<{
+        title: string;
+        description: string;
+    }>;
+};

package/dist/modules/Highlight/Highlight.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("swiper/modules"),o=require("swiper/react"),_=require("../../utils/useSwiper/useSwiper.cjs.js"),s=require("../../src/modules/Highlight/highlight.module.css");;/* empty css                                        */;/* empty css                                                    */const c=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/HighlightCard/HighlightCard.cjs.js"),q=require("../../components/ProgressButton/ProgressButton.cjs.js"),P=[v.Navigation],k=({title:r,subtitle:t,highlightCards:n})=>{const h=_.useSwiper(),a=n.length===3,g=n.length>3,{isEnd:p,isBeginning:m,hideNav:u,handleSlideChange:w,handlePrevClick:x,handleNextClick:y,onSwiperInit:j,handleSwiperResize:S,handleReachEnd:N,handleReachBeginning:b}=h;return e.jsx("section",{className:s.root,children:e.jsxs("div",{className:s.container,children:[(r||t)&&e.jsxs("div",{className:s.textContent,children:[r&&e.jsx(c.Typography,{as:"h2",defaultVariant:"displayMd",mobileVariant:"headingLg",className:s.title,children:r}),t&&e.jsx(c.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",className:s.subtitle,children:t})]}),a&&e.jsx("div",{className:s.cardGrid,children:n.map((i,l)=>e.jsx("div",{className:s.cardGridItem,children:e.jsx(d.HighlightCard,{image:i.image,eyebrow:i.eyebrow,title:i.title,description:i.description,link:i.link})},`${i.title}_${l}`))}),!a&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.carouselArea,children:e.jsx(o.Swiper,{onSwiper:j,onResize:S,onSlideChange:w,onReachEnd:N,onReachBeginning:b,modules:P,spaceBetween:16,slidesPerView:3,breakpoints:{0:{slidesPerView:1},769:{slidesPerView:2},1201:{slidesPerView:3}},className:s.swiper,children:n.map((i,l)=>e.jsx(o.SwiperSlide,{className:s.swiperSlide,children:e.jsx(d.HighlightCard,{image:i.image,eyebrow:i.eyebrow,title:i.title,description:i.description,link:i.link})},`${i.title}_${l}`))})}),g&&!u&&e.jsx("div",{className:s.navigation,children:e.jsx(q.ProgressButton,{left:{disabled:m,onClick:x},right:{disabled:p,onClick:y}})})]})]})})};exports.Highlight=k;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("swiper/modules"),a=require("swiper/react"),_=require("../../utils/useSwiper/useSwiper.cjs.js"),s=require("../../src/modules/Highlight/highlight.module.css");;/* empty css                                        */;/* empty css                                                    */const c=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/HighlightCard/HighlightCard.cjs.js"),q=require("../../components/ProgressButton/ProgressButton.cjs.js"),P=[v.Navigation],k=({title:r,subtitle:t,highlightCards:n})=>{const h=_.useSwiper(),o=n.length===3,g=n.length>3,{isEnd:p,isBeginning:m,hideNav:u,handleSlideChange:w,handlePrevClick:S,handleNextClick:x,onSwiperInit:y,handleSwiperResize:j,handleReachEnd:N,handleReachBeginning:b}=h;return e.jsx("section",{className:s.root,children:e.jsxs("div",{className:s.container,children:[(r||t)&&e.jsxs("div",{className:s.textContent,children:[r&&e.jsx(c.Typography,{as:"h2",defaultVariant:"displayMd",mobileVariant:"headingLg",className:s.title,children:r}),t&&e.jsx(c.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",className:s.subtitle,children:t})]}),o&&e.jsx("div",{className:s.cardGrid,children:n.map((i,l)=>e.jsx("div",{className:s.cardGridItem,children:e.jsx(d.HighlightCard,{image:i.image,eyebrow:i.eyebrow,title:i.title,description:i.description,link:i.link,colorScheme:i.colorScheme})},`${i.title}_${l}`))}),!o&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.carouselArea,children:e.jsx(a.Swiper,{onSwiper:y,onResize:j,onSlideChange:w,onReachEnd:N,onReachBeginning:b,modules:P,spaceBetween:16,slidesPerView:3,breakpoints:{0:{slidesPerView:1},769:{slidesPerView:2},1201:{slidesPerView:3}},className:s.swiper,children:n.map((i,l)=>e.jsx(a.SwiperSlide,{className:s.swiperSlide,children:e.jsx(d.HighlightCard,{image:i.image,eyebrow:i.eyebrow,title:i.title,description:i.description,link:i.link,colorScheme:i.colorScheme})},`${i.title}_${l}`))})}),g&&!u&&e.jsx("div",{className:s.navigation,children:e.jsx(q.ProgressButton,{left:{disabled:m,onClick:S},right:{disabled:p,onClick:x}})})]})]})})};exports.Highlight=k;

package/dist/modules/Highlight/Highlight.es.js

@@ -1,31 +1,31 @@
 "use client";
-import { jsx as i, jsxs as o, Fragment as V } from "react/jsx-runtime";
+import { jsx as i, jsxs as t, Fragment as V } from "react/jsx-runtime";
 import { Navigation as u } from "swiper/modules";
 import { Swiper as P, SwiperSlide as R } from "swiper/react";
 import { useSwiper as x } from "../../utils/useSwiper/useSwiper.es.js";
 import n from "../../modules/Highlight/highlight.module.css";
 /* empty css                                      */
 /* empty css                                                  */
-import { Typography as d } from "../../components/Typography/Typography.es.js";
+import { Typography as c } from "../../components/Typography/Typography.es.js";
 import { HighlightCard as m } from "../../components/HighlightCard/HighlightCard.es.js";
 import { ProgressButton as E } from "../../components/ProgressButton/ProgressButton.es.js";
-const B = [u], T = ({ title: l, subtitle: r, highlightCards: s }) => {
-  const c = x(), t = s.length === 3, p = s.length > 3, {
-    isEnd: h,
+const B = [u], T = ({ title: l, subtitle: r, highlightCards: o }) => {
+  const d = x(), a = o.length === 3, h = o.length > 3, {
+    isEnd: p,
     isBeginning: g,
     hideNav: w,
-    handleSlideChange: N,
-    handlePrevClick: S,
+    handleSlideChange: S,
+    handlePrevClick: N,
     handleNextClick: f,
     onSwiperInit: v,
     handleSwiperResize: y,
     handleReachEnd: b,
     handleReachBeginning: k
-  } = c;
-  return /* @__PURE__ */ i("section", { className: n.root, children: /* @__PURE__ */ o("div", { className: n.container, children: [
-    (l || r) && /* @__PURE__ */ o("div", { className: n.textContent, children: [
+  } = d;
+  return /* @__PURE__ */ i("section", { className: n.root, children: /* @__PURE__ */ t("div", { className: n.container, children: [
+    (l || r) && /* @__PURE__ */ t("div", { className: n.textContent, children: [
       l && /* @__PURE__ */ i(
-        d,
+        c,
         {
           as: "h2",
           defaultVariant: "displayMd",
@@ -35,7 +35,7 @@ const B = [u], T = ({ title: l, subtitle: r, highlightCards: s }) => {
         }
       ),
       r && /* @__PURE__ */ i(
-        d,
+        c,
         {
           as: "p",
           defaultVariant: "bodyLg",
@@ -45,23 +45,24 @@ const B = [u], T = ({ title: l, subtitle: r, highlightCards: s }) => {
         }
       )
     ] }),
-    t && /* @__PURE__ */ i("div", { className: n.cardGrid, children: s.map((e, a) => /* @__PURE__ */ i("div", { className: n.cardGridItem, children: /* @__PURE__ */ i(
+    a && /* @__PURE__ */ i("div", { className: n.cardGrid, children: o.map((e, s) => /* @__PURE__ */ i("div", { className: n.cardGridItem, children: /* @__PURE__ */ i(
       m,
       {
         image: e.image,
         eyebrow: e.eyebrow,
         title: e.title,
         description: e.description,
-        link: e.link
+        link: e.link,
+        colorScheme: e.colorScheme
       }
-    ) }, `${e.title}_${a}`)) }),
-    !t && /* @__PURE__ */ o(V, { children: [
+    ) }, `${e.title}_${s}`)) }),
+    !a && /* @__PURE__ */ t(V, { children: [
       /* @__PURE__ */ i("div", { className: n.carouselArea, children: /* @__PURE__ */ i(
         P,
         {
           onSwiper: v,
           onResize: y,
-          onSlideChange: N,
+          onSlideChange: S,
           onReachEnd: b,
           onReachBeginning: k,
           modules: B,
@@ -79,27 +80,28 @@ const B = [u], T = ({ title: l, subtitle: r, highlightCards: s }) => {
             }
           },
           className: n.swiper,
-          children: s.map((e, a) => /* @__PURE__ */ i(R, { className: n.swiperSlide, children: /* @__PURE__ */ i(
+          children: o.map((e, s) => /* @__PURE__ */ i(R, { className: n.swiperSlide, children: /* @__PURE__ */ i(
             m,
             {
               image: e.image,
               eyebrow: e.eyebrow,
               title: e.title,
               description: e.description,
-              link: e.link
+              link: e.link,
+              colorScheme: e.colorScheme
             }
-          ) }, `${e.title}_${a}`))
+          ) }, `${e.title}_${s}`))
         }
       ) }),
-      p && !w && /* @__PURE__ */ i("div", { className: n.navigation, children: /* @__PURE__ */ i(
+      h && !w && /* @__PURE__ */ i("div", { className: n.navigation, children: /* @__PURE__ */ i(
         E,
         {
           left: {
             disabled: g,
-            onClick: S
+            onClick: N
           },
           right: {
-            disabled: h,
+            disabled: p,
             onClick: f
           }
         }

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

@@ -74,16 +74,17 @@
     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: 335px;
-        width: 100%;
-    }
-
     .title {
         font-size: 56px;
         letter-spacing: -2.24px;
@@ -99,7 +100,7 @@
     }
 }
 
-@media (max-width: 979px) {
+@media (max-width: 900px) {
     .cardGrid {
         flex-direction: column;
         align-items: center;
@@ -109,6 +110,7 @@
 @media (max-width: 768px) {
     .cardGridItem {
         max-width: 335px;
+        min-width: 250px;
         width: 100%;
     }
     .container {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.28",
+    "version": "0.2.30",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -341,11 +341,21 @@
             "import": "./dist/modules/Comparison/Comparison.es.js",
             "require": "./dist/modules/Comparison/Comparison.cjs.js"
         },
+        "./ComparisonV2": {
+            "types": "./dist/modules/ComparisonV2/ComparisonV2.d.ts",
+            "import": "./dist/modules/ComparisonV2/ComparisonV2.es.js",
+            "require": "./dist/modules/ComparisonV2/ComparisonV2.cjs.js"
+        },
         "./CircleHighlights": {
             "types": "./dist/modules/CircleHighlights/CircleHighlights.d.ts",
             "import": "./dist/modules/CircleHighlights/CircleHighlights.es.js",
             "require": "./dist/modules/CircleHighlights/CircleHighlights.cjs.js"
         },
+        "./Citation": {
+            "types": "./dist/modules/Citation/Citation.d.ts",
+            "import": "./dist/modules/Citation/Citation.es.js",
+            "require": "./dist/modules/Citation/Citation.cjs.js"
+        },
         "./FeaturedIn": {
             "types": "./dist/modules/FeaturedIn/FeaturedIn.d.ts",
             "import": "./dist/modules/FeaturedIn/FeaturedIn.es.js",