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

package/dist/modules/FeaturedIn/FeaturedIn.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),l=require("../../utils/cn/cn.cjs.js"),a=require("../../src/modules/FeaturedIn/featuredIn.module.css"),u=require("./components/CtaFeaturedIn.cjs.js"),s=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js");function m({media:n}){return e.jsx("div",{className:a.mediaFeaturedInBlock,children:n.filter(r=>!!r.logo).map(({logo:r,url:t},o)=>{const i=t?"a":"div";return e.jsx(i,{href:t,target:"_blank",rel:"noopener noreferrer",className:a.mediaFeaturedInImageContainer,children:e.jsx("div",{className:a.mediaFeaturedInImage,style:{backgroundImage:`url(${r})`}})},`${t}_${o}`)})})}function p({quote:n}){return e.jsx("div",{className:a.quoteFeaturedInBlock,children:e.jsxs(s.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingXxs",className:a.quoteFeaturedInText,children:["“",n,"”"]})})}function I({label:n,content:r}){return e.jsxs("section",{className:a.container,children:[e.jsx("p",{className:l.cn(a.title,a.customTitle),children:"(Featured In)"}),e.jsx(s.Typography,{as:"p",defaultVariant:"displayMd",className:l.cn(a.title,a.defaultTitle),children:"(Featured In)"}),e.jsx(s.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.label,children:n}),e.jsx(d.InfiniteScroll,{items:r,contentClassName:a.content,itemClassName:a.item,rootClassName:a.scrollRoot,renderItem:t=>e.jsxs(c.Fragment,{children:[t.type==="media"&&e.jsx(m,{media:t.media}),t.type==="quote"&&e.jsx(p,{quote:t.quote}),t.type==="cta"&&e.jsx(u.CtaFeaturedIn,{button_label:t.button_label})]},t.type)})]})}exports.FeaturedIn=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),i=require("../../utils/cn/cn.cjs.js"),u=require("./components/CtaFeaturedIn.cjs.js"),a=require("../../src/modules/FeaturedIn/featuredIn.module.css"),l=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js");function m({media:r}){return e.jsx("div",{className:a.mediaFeaturedInBlock,children:r.filter(t=>!!t.logo).map(({logo:t,url:s},o)=>{const n=s?"a":"div";return e.jsx(n,{href:s,target:"_blank",rel:"noopener noreferrer",className:a.mediaFeaturedInImageContainer,children:e.jsx("div",{className:a.mediaFeaturedInImage,style:{backgroundImage:`url(${t})`}})},`${s}_${o}`)})})}function p({quote:r,source:t}){return e.jsxs("div",{className:a.quoteFeaturedInBlock,children:[e.jsxs(l.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingXxs",className:a.quoteFeaturedInText,children:["“",r,"”"]}),t&&e.jsxs(l.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.quoteFeaturedInSource,children:["— ",t]})]})}function h({label:r,title:t,content:s,colorScheme:o="light"}){return e.jsxs("section",{className:i.cn(a.container,a[o]),children:[e.jsx(l.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.label,children:r}),t&&e.jsxs(e.Fragment,{children:[e.jsx("p",{className:i.cn(a.title,a.customTitle),children:t}),e.jsx(l.Typography,{as:"p",defaultVariant:"displayMd",className:i.cn(a.title,a.defaultTitle),children:t})]}),e.jsx(d.InfiniteScroll,{items:s,contentClassName:a.content,itemClassName:a.item,rootClassName:a.scrollRoot,renderItem:n=>e.jsxs(c.Fragment,{children:[n.type==="media"&&e.jsx(m,{media:n.media}),n.type==="quote"&&e.jsx(p,{quote:n.quote,source:n.source}),n.type==="cta"&&e.jsx(u.CtaFeaturedIn,{button_label:n.button_label})]},n.type)})]})}exports.FeaturedIn=h;

package/dist/modules/FeaturedIn/FeaturedIn.d.ts

@@ -1,3 +1,5 @@
+import { TColorScheme } from '../../types/common';
+
 type TMediaView = {
     type: 'media';
     media: Array<{
@@ -8,6 +10,7 @@ type TMediaView = {
 type TFeaturedQuoteView = {
     type: 'quote';
     quote: string;
+    source?: string;
 };
 type TFeaturedButtonView = {
     type: 'cta';
@@ -15,7 +18,9 @@ type TFeaturedButtonView = {
 };
 export type FeaturedInProps = {
     label: string;
+    title?: string;
     content: Array<TMediaView | TFeaturedQuoteView | TFeaturedButtonView>;
+    colorScheme?: TColorScheme;
 };
-export declare function FeaturedIn({ label, content }: FeaturedInProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedIn({ label, title, content, colorScheme }: FeaturedInProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modules/FeaturedIn/FeaturedIn.es.js

@@ -1,60 +1,68 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { Fragment as d } from "react";
-import { cn as i } from "../../utils/cn/cn.es.js";
+import { jsxs as n, jsx as t, Fragment as d } from "react/jsx-runtime";
+import { Fragment as c } from "react";
+import { cn as m } from "../../utils/cn/cn.es.js";
+import { CtaFeaturedIn as u } from "./components/CtaFeaturedIn.es.js";
 import e from "../../modules/FeaturedIn/featuredIn.module.css";
-import { CtaFeaturedIn as s } from "./components/CtaFeaturedIn.es.js";
-import { Typography as o } from "../../components/Typography/Typography.es.js";
-import { InfiniteScroll as c } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
-function u({ media: r }) {
-  return /* @__PURE__ */ t("div", { className: e.mediaFeaturedInBlock, children: r.filter((n) => !!n.logo).map(({ logo: n, url: a }, m) => /* @__PURE__ */ t(
-    a ? "a" : "div",
+import { Typography as i } from "../../components/Typography/Typography.es.js";
+import { InfiniteScroll as p } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
+function f({ media: l }) {
+  return /* @__PURE__ */ t("div", { className: e.mediaFeaturedInBlock, children: l.filter((a) => !!a.logo).map(({ logo: a, url: o }, s) => /* @__PURE__ */ t(
+    o ? "a" : "div",
     {
-      href: a,
+      href: o,
       target: "_blank",
       rel: "noopener noreferrer",
       className: e.mediaFeaturedInImageContainer,
-      children: /* @__PURE__ */ t("div", { className: e.mediaFeaturedInImage, style: { backgroundImage: `url(${n})` } })
+      children: /* @__PURE__ */ t("div", { className: e.mediaFeaturedInImage, style: { backgroundImage: `url(${a})` } })
     },
-    `${a}_${m}`
+    `${o}_${s}`
   )) });
 }
-function p({ quote: r }) {
-  return /* @__PURE__ */ t("div", { className: e.quoteFeaturedInBlock, children: /* @__PURE__ */ l(
-    o,
-    {
-      as: "p",
-      defaultVariant: "headingSm",
-      mobileVariant: "headingXxs",
-      className: e.quoteFeaturedInText,
-      children: [
-        "“",
-        r,
-        "”"
-      ]
-    }
-  ) });
+function h({ quote: l, source: a }) {
+  return /* @__PURE__ */ n("div", { className: e.quoteFeaturedInBlock, children: [
+    /* @__PURE__ */ n(
+      i,
+      {
+        as: "p",
+        defaultVariant: "headingSm",
+        mobileVariant: "headingXxs",
+        className: e.quoteFeaturedInText,
+        children: [
+          "“",
+          l,
+          "”"
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ n(i, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: e.quoteFeaturedInSource, children: [
+      "— ",
+      a
+    ] })
+  ] });
 }
-function q({ label: r, content: n }) {
-  return /* @__PURE__ */ l("section", { className: e.container, children: [
-    /* @__PURE__ */ t("p", { className: i(e.title, e.customTitle), children: "(Featured In)" }),
-    /* @__PURE__ */ t(o, { as: "p", defaultVariant: "displayMd", className: i(e.title, e.defaultTitle), children: "(Featured In)" }),
-    /* @__PURE__ */ t(o, { as: "p", defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: r }),
+function V({ label: l, title: a, content: o, colorScheme: s = "light" }) {
+  return /* @__PURE__ */ n("section", { className: m(e.container, e[s]), children: [
+    /* @__PURE__ */ t(i, { as: "p", defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: l }),
+    a && /* @__PURE__ */ n(d, { children: [
+      /* @__PURE__ */ t("p", { className: m(e.title, e.customTitle), children: a }),
+      /* @__PURE__ */ t(i, { as: "p", defaultVariant: "displayMd", className: m(e.title, e.defaultTitle), children: a })
+    ] }),
     /* @__PURE__ */ t(
-      c,
+      p,
       {
-        items: n,
+        items: o,
         contentClassName: e.content,
         itemClassName: e.item,
         rootClassName: e.scrollRoot,
-        renderItem: (a) => /* @__PURE__ */ l(d, { children: [
-          a.type === "media" && /* @__PURE__ */ t(u, { media: a.media }),
-          a.type === "quote" && /* @__PURE__ */ t(p, { quote: a.quote }),
-          a.type === "cta" && /* @__PURE__ */ t(s, { button_label: a.button_label })
-        ] }, a.type)
+        renderItem: (r) => /* @__PURE__ */ n(c, { children: [
+          r.type === "media" && /* @__PURE__ */ t(f, { media: r.media }),
+          r.type === "quote" && /* @__PURE__ */ t(h, { quote: r.quote, source: r.source }),
+          r.type === "cta" && /* @__PURE__ */ t(u, { button_label: r.button_label })
+        ] }, r.type)
       }
     )
   ] });
 }
 export {
-  q as FeaturedIn
+  V as FeaturedIn
 };

package/dist/modules/FeaturedIn/featuredIn.module.css

@@ -2,16 +2,18 @@
     width: 100%;
     display: flex;
     flex-direction: column;
+    gap: var(--spacing-24, 24px);
     padding: var(--spacing-120) 0;
     position: relative;
 }
 
-.label {
-    text-align: center;
+.container.dark {
+    background-color: var(--color-bg-fill-alpha-black-5);
+    color: var(--color-text-primary-inverted);
 }
 
-.scrollRoot {
-    margin-top: 67px;
+.label {
+    text-align: center;
 }
 
 .label + .scrollRoot {
@@ -25,15 +27,21 @@
     border-right: var(--border-width-sm) solid var(--color-bg-fill-alpha-black-10);
 }
 
+.container.dark .item {
+    border-color: var(--color-bg-fill-alpha-white-20);
+}
+
 .title {
-    position: absolute;
     color: var(--color-text-primary);
     text-align: center;
     opacity: 0.2;
-    margin-top: 48px;
     width: 100%;
 }
 
+.container.dark .title {
+    color: var(--color-text-primary-inverted);
+}
+
 .customTitle {
     font-family: var(--font-default);
     font-size: 144px;
@@ -55,6 +63,10 @@
     border-top: var(--border-width-sm) solid var(--color-bg-fill-alpha-black-10);
 }
 
+.container.dark .content {
+    border-color: var(--color-bg-fill-alpha-white-20);
+}
+
 .mediaFeaturedInBlock {
     display: flex;
     align-items: center;
@@ -76,6 +88,10 @@
     padding: 25px;
 }
 
+.container.dark .mediaFeaturedInImageContainer {
+    background: var(--background-fill-alpha-white-20, rgba(255, 255, 255, 0.20))
+}
+
 .mediaFeaturedInImage {
     height: 100%;
     width: 100%;
@@ -86,10 +102,28 @@
 
 .quoteFeaturedInBlock {
     display: flex;
+    flex-direction: column;
+    gap: var(--spacing-24, 24px);
     align-items: center;
     width: 320px;
 }
 
+.quoteFeaturedInSource {
+    width: 100%;
+    text-align: center;
+    color: var(--color-text-secondary-disabled);
+}
+
+.container.dark .quoteFeaturedInSource {
+    color: var(--color-text-secondary-inverted);
+}
+
+.container.dark {
+    .label, .quoteFeaturedInBlock {
+        color: var(--color-text-primary-brand-solar);
+    }
+}
+
 .quoteFeaturedInText {
     white-space: normal;
     text-align: center;

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

@@ -1 +1 @@
-"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;
+"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;

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

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

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

@@ -1,42 +1,53 @@
-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,
+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,
     type: h.interaction,
     component: "YourProtocol",
     element: "Callback",
     payload: {
-      ctaLink: t.link
+      ctaLink: (e = t == null ? void 0 : t.signupUrl) != null ? e : ""
     }
-  }, 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 })
+  };
+  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 })
   ] }) });
 };
 export {
-  P as YourProtocol
+  Y as YourProtocol
 };

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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,37 @@
+"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

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

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

@@ -0,0 +1,37 @@
+.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;
+    }
+}

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

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

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

@@ -1,168 +1,98 @@
 .root {
-    width: 100%;
     display: flex;
-    justify-content: center;
+    width: 100%;
     align-items: center;
-}
-
-.root[data-scheme='dark'] {
-    background-color: var(--color-bg-base-dark);
+    justify-content: center;
 }
 
 .container {
     width: 100%;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: auto auto auto;
-    gap: 32px;
-    padding: 70px 120px;
+    min-width: 0;
     max-width: var(--content-max-width);
-    align-items: start;
-}
-
-.title {
-    grid-column: 1;
-    grid-row: 1;
-}
-
-.tagsList {
-    grid-column: 1;
-    grid-row: 2;
-    display: flex;
-    flex-direction: column;
-}
-
-.callbackButton {
-    grid-column: 1;
-    grid-row: 3;
-}
-
-.image {
-    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;
-}
-
-.tagItem {
-    padding: 16px 0;
     display: flex;
-    gap: 16px;
-    border-bottom: 1px solid var(--border-color-light);
-}
-
-.root[data-scheme='dark'] .tagItem {
-    border-bottom: 1px solid var(--border-color-alpha-white-10);
-}
-
-.tagItem:last-child {
-    border-bottom: none;
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--spacing-96);
+    padding: var(--spacing-120);
+    box-sizing: border-box;
 }
 
-.tagText {
+.content {
     display: flex;
+    width: 623px;
+    min-width: 0;
     flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-}
-
-.tagLabel {
-    color: var(--color-text-primary);
+    gap: var(--spacing-32);
+    flex: 1 0 0;
 }
 
-.tagDescription {
-    color: var(--color-text-secondary);
+.title {
+    margin: 80px 0 0;
+    max-width: 623px;
 }
 
-/* Dark mode overrides */
-.root[data-scheme='dark'] .tagLabel {
-    color: var(--color-text-primary-inverted);
+.image {
+    flex-shrink: 1;
+    width: 481px;
+    border-radius: var(--border-radius-lg);
 }
 
-.root[data-scheme='dark'] .tagDescription {
-    color: var(--color-text-secondary-inverted);
+.mobile {
+    display: none;
 }
 
-.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%));
-}
+@media screen and (width <= 1300px) {
+    .container {
+        gap: var(--spacing-64);
+        padding: var(--spacing-64) var(--spacing-20);
+    }
 
-.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);
-}
+    .content {
+        width: 500px;
+    }
 
-.icon {
-    width: 28px;
-    height: 28px;
-    color: var(--color-white);
+    .image {
+        width: auto;
+        height: 440px;
+    }
 }
 
-@media (max-width: 1300px) {
+@media screen and (width <= 1024px) {
     .container {
         grid-template-columns: 1fr;
-        grid-template-rows: auto auto auto auto;
-        padding: 64px 17px;
+        padding: var(--spacing-64) var(--spacing-20);
     }
 
-    .title {
-        grid-column: 1;
-        grid-row: 1;
-        max-width: 685px;
-    }
-
-    .image {
-        grid-column: 1;
-        grid-row: 2;
+    .content {
         width: 100%;
-        height: 350px;
+        align-items: center;
     }
 
-    .tagsList {
-        grid-column: 1;
-        grid-row: 3;
+    .title {
+        margin: 0;
+        text-align: center;
     }
 
-    .tagsList,
-    .callbackButton {
-        max-width: unset;
+    .content {
+        gap: 16px;
     }
 
-    .callbackButton {
-        grid-column: 1;
-        grid-row: 4;
+    .callback {
+        margin-top: var(--spacing-48);
     }
-}
 
-@media (max-width: 768px) {
-    .container {
-        gap: 20px;
+    .mobile {
+        display: block;
     }
 
-    .tagItem {
-        padding: 24px 0;
-    }
-
-    .image {
-        height: 240px;
+    .desktop {
+        display: none;
     }
+}
 
-    .title {
-        max-width: 335px;
+@media screen and (width <= 768px) {
+    .callback {
+        max-width: 513px;
+        width: 100%;
     }
 }

package/package.json

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