@zenpatient-org/healthspan-marketing-ui 0.2.38 → 0.2.39

package/dist/modules/YourProtocol/YourProtocol.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../utils/cn/cn.cjs.js"),s=require("../../src/modules/YourProtocol/yourProtocol.module.css"),c=require("../../types/analytics/analytics.cjs.js"),p=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),g=require("./components/ProtocolTags/ProtocolTags.cjs.js"),h=require("../../components/Callback/Callback.cjs.js"),y=({title:a,image:l,tags:d,callbackView:t})=>{var o,n,i,r;const u={event:c.EAnalyticsEvent.ctaClicked,type:c.EAnalyticsEventType.interaction,component:"YourProtocol",element:"Callback",payload:{ctaLink:(o=t==null?void 0:t.signupUrl)!=null?o:""}};return e.jsx("section",{className:s.root,children:e.jsxs("div",{className:s.container,children:[e.jsxs("div",{className:s.content,children:[e.jsx(p.HighlightedTitle,{title:a,className:s.title,defaultVariant:"displaySm",mobileVariant:"headingXl"}),e.jsx(g.ProtocolTags,{tags:d}),t&&e.jsx("div",{className:s.callback,children:e.jsx(h.Callback,{title:t.title,description:(n=t.description)!=null?n:"",price:(i=t.price)!=null?i:"",image:t.image,button:{href:(r=t.signupUrl)!=null?r:"",as:"a",analyticsProps:u},size:"sm",shape:t.shape})})]}),e.jsx("img",{src:l,alt:"Your Protocol",className:m.cn(s.image,s.desktop),width:481})]})})};exports.YourProtocol=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/YourProtocol/yourProtocol.module.css"),c=require("../../types/analytics/analytics.cjs.js"),h=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),y=require("../../components/Icon/Icon.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),u=require("../../components/Button/Button.cjs.js"),g=({title:o,image:r,tags:n,button:t,colorScheme:i="light"})=>{const d={event:c.EAnalyticsEvent.ctaClicked,type:c.EAnalyticsEventType.interaction,component:"YourProtocol",element:"Callback",payload:{ctaLink:t.link}},p=i==="dark"?"secondary":"primary";return e.jsx("section",{className:a.root,"data-scheme":i,children:e.jsxs("div",{className:a.container,children:[e.jsx(h.HighlightedTitle,{title:o,className:a.title,defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:i}),n.length>0&&e.jsx("div",{className:a.tagsList,children:n.map((s,m)=>e.jsxs("div",{className:a.tagItem,children:[s.icon&&e.jsx("div",{className:a.iconWrapper,children:e.jsx(y.Icon,{name:s.icon,className:a.icon})}),e.jsxs("div",{className:a.tagText,children:[e.jsx(l.Typography,{className:a.tagLabel,as:"p",defaultVariant:"headingXs",children:s.label}),s.description&&e.jsx(l.Typography,{className:a.tagDescription,as:"p",defaultVariant:"bodyMd",children:s.description})]})]},m))}),t&&e.jsx("div",{className:a.callbackButton,children:e.jsx(u.Button,{href:t.link,as:"a",analyticsProps:d,size:"lg",variant:p,children:t.label})}),e.jsx("img",{src:r,alt:"Your Protocol",className:a.image})]})})};exports.YourProtocol=g;

package/dist/modules/YourProtocol/YourProtocol.d.ts

@@ -1,11 +1,16 @@
 import { ReactNode } from 'react';
-import { TCallbackView, TTagView } from './types';
+import { TTagView } from './types';
+import { TColorScheme } from '../../types/common';
 
 type Props = {
     title: ReactNode;
     tags: Array<TTagView>;
-    callbackView: TCallbackView | null;
+    button: {
+        label: string;
+        link: string;
+    };
     image: string;
+    colorScheme?: TColorScheme;
 };
-export declare const YourProtocol: ({ title, image, tags, callbackView }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const YourProtocol: ({ title, image, tags, button, colorScheme }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modules/YourProtocol/YourProtocol.es.js

@@ -1,53 +1,42 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { cn as c } from "../../utils/cn/cn.es.js";
-import o from "../../modules/YourProtocol/yourProtocol.module.css";
-import { EAnalyticsEventType as h, EAnalyticsEvent as g } from "../../types/analytics/analytics.es.js";
-import { HighlightedTitle as f } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { ProtocolTags as u } from "./components/ProtocolTags/ProtocolTags.es.js";
-import { Callback as y } from "../../components/Callback/Callback.es.js";
-const Y = ({ title: a, image: p, tags: d, callbackView: t }) => {
-  var e, i, s, n;
-  const l = {
-    event: g.ctaClicked,
+import { jsx as i, jsxs as r } from "react/jsx-runtime";
+import a from "../../modules/YourProtocol/yourProtocol.module.css";
+import { EAnalyticsEventType as h, EAnalyticsEvent as y } from "../../types/analytics/analytics.es.js";
+import { HighlightedTitle as N } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Icon as f } from "../../components/Icon/Icon.es.js";
+import { Typography as s } from "../../components/Typography/Typography.es.js";
+import { Button as v } from "../../components/Button/Button.es.js";
+const P = ({ title: c, image: o, tags: n, button: t, colorScheme: l = "light" }) => {
+  const m = {
+    event: y.ctaClicked,
     type: h.interaction,
     component: "YourProtocol",
     element: "Callback",
     payload: {
-      ctaLink: (e = t == null ? void 0 : t.signupUrl) != null ? e : ""
+      ctaLink: t.link
     }
-  };
-  return /* @__PURE__ */ r("section", { className: o.root, children: /* @__PURE__ */ m("div", { className: o.container, children: [
-    /* @__PURE__ */ m("div", { className: o.content, children: [
-      /* @__PURE__ */ r(
-        f,
-        {
-          title: a,
-          className: o.title,
-          defaultVariant: "displaySm",
-          mobileVariant: "headingXl"
-        }
-      ),
-      /* @__PURE__ */ r(u, { tags: d }),
-      t && /* @__PURE__ */ r("div", { className: o.callback, children: /* @__PURE__ */ r(
-        y,
-        {
-          title: t.title,
-          description: (i = t.description) != null ? i : "",
-          price: (s = t.price) != null ? s : "",
-          image: t.image,
-          button: {
-            href: (n = t.signupUrl) != null ? n : "",
-            as: "a",
-            analyticsProps: l
-          },
-          size: "sm",
-          shape: t.shape
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ r("img", { src: p, alt: "Your Protocol", className: c(o.image, o.desktop), width: 481 })
+  }, d = l === "dark" ? "secondary" : "primary";
+  return /* @__PURE__ */ i("section", { className: a.root, "data-scheme": l, children: /* @__PURE__ */ r("div", { className: a.container, children: [
+    /* @__PURE__ */ i(
+      N,
+      {
+        title: c,
+        className: a.title,
+        defaultVariant: "displayMd",
+        mobileVariant: "headingXl",
+        colorScheme: l
+      }
+    ),
+    n.length > 0 && /* @__PURE__ */ i("div", { className: a.tagsList, children: n.map((e, p) => /* @__PURE__ */ r("div", { className: a.tagItem, children: [
+      e.icon && /* @__PURE__ */ i("div", { className: a.iconWrapper, children: /* @__PURE__ */ i(f, { name: e.icon, className: a.icon }) }),
+      /* @__PURE__ */ r("div", { className: a.tagText, children: [
+        /* @__PURE__ */ i(s, { className: a.tagLabel, as: "p", defaultVariant: "headingXs", children: e.label }),
+        e.description && /* @__PURE__ */ i(s, { className: a.tagDescription, as: "p", defaultVariant: "bodyMd", children: e.description })
+      ] })
+    ] }, p)) }),
+    t && /* @__PURE__ */ i("div", { className: a.callbackButton, children: /* @__PURE__ */ i(v, { href: t.link, as: "a", analyticsProps: m, size: "lg", variant: d, children: t.label }) }),
+    /* @__PURE__ */ i("img", { src: o, alt: "Your Protocol", className: a.image })
   ] }) });
 };
 export {
-  Y as YourProtocol
+  P as YourProtocol
 };

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

@@ -1,16 +1,7 @@
-import { CallbackShape } from '../../components/Callback';
+import { EIconName } from '../../components/Icon/constants';
 
 export type TTagView = {
     label: string;
     description?: string;
-};
-export type TCallbackView = {
-    title: string;
-    description?: string;
-    price: string | null;
-    signupUrl?: string;
-    image: string;
-    buttonLabel: string;
-    size: string;
-    shape: CallbackShape;
+    icon?: EIconName;
 };

package/dist/modules/YourProtocol/yourProtocol.module.css

@@ -1,98 +1,168 @@
 .root {
-    display: flex;
     width: 100%;
-    align-items: center;
+    display: flex;
     justify-content: center;
+    align-items: center;
+}
+
+.root[data-scheme='dark'] {
+    background-color: var(--color-bg-base-dark);
 }
 
 .container {
     width: 100%;
-    min-width: 0;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    gap: 32px;
+    padding: 70px 120px;
     max-width: var(--content-max-width);
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    gap: var(--spacing-96);
-    padding: var(--spacing-120);
-    box-sizing: border-box;
+    align-items: start;
 }
 
-.content {
+.title {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.tagsList {
+    grid-column: 1;
+    grid-row: 2;
     display: flex;
-    width: 623px;
-    min-width: 0;
     flex-direction: column;
-    gap: var(--spacing-32);
-    flex: 1 0 0;
 }
 
-.title {
-    margin: 80px 0 0;
-    max-width: 623px;
+.callbackButton {
+    grid-column: 1;
+    grid-row: 3;
 }
 
 .image {
-    flex-shrink: 1;
-    width: 481px;
-    border-radius: var(--border-radius-lg);
+    grid-column: 2;
+    grid-row: 1 / 4;
+    width: 477px;
+    height: 636px;
+    object-fit: cover;
+    border-radius: 19px;
+}
+
+.title,
+.tagsList,
+.callbackButton {
+    width: 100%;
+    max-width: 627px;
 }
 
-.mobile {
-    display: none;
+.tagItem {
+    padding: 16px 0;
+    display: flex;
+    gap: 16px;
+    border-bottom: 1px solid var(--border-color-light);
 }
 
-@media screen and (width <= 1300px) {
-    .container {
-        gap: var(--spacing-64);
-        padding: var(--spacing-64) var(--spacing-20);
-    }
+.root[data-scheme='dark'] .tagItem {
+    border-bottom: 1px solid var(--border-color-alpha-white-10);
+}
 
-    .content {
-        width: 500px;
-    }
+.tagItem:last-child {
+    border-bottom: none;
+}
 
-    .image {
-        width: auto;
-        height: 440px;
-    }
+.tagText {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
 }
 
-@media screen and (width <= 1024px) {
+.tagLabel {
+    color: var(--color-text-primary);
+}
+
+.tagDescription {
+    color: var(--color-text-secondary);
+}
+
+/* Dark mode overrides */
+.root[data-scheme='dark'] .tagLabel {
+    color: var(--color-text-primary-inverted);
+}
+
+.root[data-scheme='dark'] .tagDescription {
+    color: var(--color-text-secondary-inverted);
+}
+
+.iconWrapper {
+    display: flex;
+    width: 52px;
+    height: 52px;
+    padding: 12px;
+    border-radius: 7.8px;
+    background: var(--Gradient-01, linear-gradient(93deg, #81b1e2 8.06%, #2666a6 160.95%));
+}
+
+.root[data-scheme='dark'] .iconWrapper {
+    background:
+        linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%),
+        var(--Background-fill-neutral-dark, #1a1a1a);
+}
+
+.icon {
+    width: 28px;
+    height: 28px;
+    color: var(--color-white);
+}
+
+@media (max-width: 1300px) {
     .container {
         grid-template-columns: 1fr;
-        padding: var(--spacing-64) var(--spacing-20);
+        grid-template-rows: auto auto auto auto;
+        padding: 64px 17px;
     }
 
-    .content {
+    .title {
+        grid-column: 1;
+        grid-row: 1;
+        max-width: 685px;
+    }
+
+    .image {
+        grid-column: 1;
+        grid-row: 2;
         width: 100%;
-        align-items: center;
+        height: 350px;
     }
 
-    .title {
-        margin: 0;
-        text-align: center;
+    .tagsList {
+        grid-column: 1;
+        grid-row: 3;
     }
 
-    .content {
-        gap: 16px;
+    .tagsList,
+    .callbackButton {
+        max-width: unset;
     }
 
-    .callback {
-        margin-top: var(--spacing-48);
+    .callbackButton {
+        grid-column: 1;
+        grid-row: 4;
     }
+}
 
-    .mobile {
-        display: block;
+@media (max-width: 768px) {
+    .container {
+        gap: 20px;
     }
 
-    .desktop {
-        display: none;
+    .tagItem {
+        padding: 24px 0;
     }
-}
 
-@media screen and (width <= 768px) {
-    .callback {
-        max-width: 513px;
-        width: 100%;
+    .image {
+        height: 240px;
+    }
+
+    .title {
+        max-width: 335px;
     }
 }

package/package.json

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

package/dist/modules/YourProtocol/components/ProtocolTags/ProtocolTags.cjs.js

@@ -1 +0,0 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),i=require("../../../../utils/cn/cn.cjs.js"),c=require("../../../../src/modules/YourProtocol/components/ProtocolTags/protocolTags.module.css"),p=require("../../../../components/Tag/Tag.cjs.js"),t=require("../../../../components/Typography/Typography.cjs.js"),m=({tags:o})=>{var n;const[a,d]=r.useState(((n=o[0])==null?void 0:n.label)||null),l=r.useMemo(()=>{var e;return(e=o.find(u=>u.label===a))==null?void 0:e.description},[a,o]);return s.jsxs("div",{className:c.root,children:[s.jsx("div",{className:c.tags,children:o.map(e=>s.jsx(p.Tag,{value:e.label,size:"md",active:e.label===a,onClick:d,children:e.label},e.label))}),l&&s.jsxs(s.Fragment,{children:[s.jsx(t.Typography,{as:"p",defaultVariant:"bodyLg",className:i.cn(c.description,c.desktop),children:l}),s.jsx(t.Typography,{as:"p",defaultVariant:"bodyMd",className:i.cn(c.description,c.mobile),children:l})]})]})};exports.ProtocolTags=m;

package/dist/modules/YourProtocol/components/ProtocolTags/ProtocolTags.d.ts

@@ -1,7 +0,0 @@
-import { TTagView } from '../../types';
-
-type Props = {
-    tags: Array<TTagView>;
-};
-export declare const ProtocolTags: ({ tags }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/modules/YourProtocol/components/ProtocolTags/ProtocolTags.es.js

@@ -1,37 +0,0 @@
-"use client";
-import { jsxs as t, jsx as o, Fragment as p } from "react/jsx-runtime";
-import { useState as b, useMemo as f } from "react";
-import { cn as c } from "../../../../utils/cn/cn.es.js";
-import l from "../../../../modules/YourProtocol/components/ProtocolTags/protocolTags.module.css";
-import { Tag as u } from "../../../../components/Tag/Tag.es.js";
-import { Typography as n } from "../../../../components/Typography/Typography.es.js";
-const V = ({ tags: i }) => {
-  var s;
-  const [r, m] = b(((s = i[0]) == null ? void 0 : s.label) || null), a = f(
-    () => {
-      var e;
-      return (e = i.find((d) => d.label === r)) == null ? void 0 : e.description;
-    },
-    [r, i]
-  );
-  return /* @__PURE__ */ t("div", { className: l.root, children: [
-    /* @__PURE__ */ o("div", { className: l.tags, children: i.map((e) => /* @__PURE__ */ o(
-      u,
-      {
-        value: e.label,
-        size: "md",
-        active: e.label === r,
-        onClick: m,
-        children: e.label
-      },
-      e.label
-    )) }),
-    a && /* @__PURE__ */ t(p, { children: [
-      /* @__PURE__ */ o(n, { as: "p", defaultVariant: "bodyLg", className: c(l.description, l.desktop), children: a }),
-      /* @__PURE__ */ o(n, { as: "p", defaultVariant: "bodyMd", className: c(l.description, l.mobile), children: a })
-    ] })
-  ] });
-};
-export {
-  V as ProtocolTags
-};

package/dist/modules/YourProtocol/components/ProtocolTags/index.d.ts

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

package/dist/modules/YourProtocol/components/ProtocolTags/protocolTags.module.css

@@ -1,37 +0,0 @@
-.root {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-32);
-    max-width: 100%;
-}
-
-.tags {
-    display: flex;
-    gap: var(--spacing-8);
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
-
-.mobile {
-    display: none;
-}
-
-@media screen and (width <= 768px) {
-    .root {
-        margin-top: var(--spacing-20);
-        gap: var(--spacing-16);
-    }
-
-    .mobile {
-        display: block;
-    }
-
-    .desktop {
-        display: none;
-    }
-}