@zenpatient-org/healthspan-marketing-ui 0.1.171 → 0.2.1

package/dist/modules/TrackProgress/components/TimelineContent/TimelineContent.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),d=require("../../../../node_modules/swiper/swiper-react.cjs.js");;/* empty css                                              */const t=require("../../../../components/Typography/Typography.cjs.js"),y=require("../../../../utils/cn/cn.cjs.js"),f=require("../../../../utils/useSwiper/useSwiper.cjs.js"),b=require("./utils.cjs.js"),a=require("./timelineContent.module.css.cjs.js"),v=[{key:"optimal",label:"Optimal"},{key:"inRange",label:"In Range"},{key:"outOfRange",label:"Out of Range"}],S=({tabs:s})=>{const{activeIndex:c,onSwiperInit:o,handleSlideTo:u,handleSlideChange:p,handleSwiperResize:m}=f.useSwiper(),h=g.useMemo(()=>s.map(l=>b.distributePoints(l.optimal,l.inRange,l.outOfRange)),[s]);return e.jsx("div",{className:a.default.root,children:e.jsxs("div",{className:a.default.container,children:[e.jsx(d.Swiper,{onSwiper:o,onResize:m,onSlideChange:p,slidesPerView:1,allowTouchMove:s.length>1,spaceBetween:0,initialSlide:0,className:a.default.swiper,children:s.map((l,n)=>e.jsx(d.SwiperSlide,{children:e.jsxs("div",{className:a.default.content,children:[e.jsx("div",{className:a.default.metricsContainer,children:v.map((i,r)=>e.jsxs("div",{className:a.default.metric,children:[e.jsx(t.Typography,{defaultVariant:"displayLg",mobileVariant:"displaySm",weight:"regular",children:l[i.key]}),e.jsxs("div",{className:a.default.metricTitle,children:[e.jsx(t.Typography,{as:"div",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:"("}),e.jsx(t.Typography,{as:"div",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:i.label}),e.jsx("div",{className:a.default.circle,"data-value":i.key}),e.jsx(t.Typography,{as:"div",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:")"})]})]},`${i.key}_${r}`))}),e.jsx("div",{className:a.default.canvas,children:h[n].map((i,r)=>e.jsx("div",{className:a.default.circle,"data-value":i},r))})]})},l.label))}),e.jsx("div",{className:a.default.tabsContainer,children:s.map((l,n)=>e.jsx("button",{className:y.cn(a.default.tab,c===n&&a.default.tabActive),onClick:()=>u(n),children:e.jsx(t.Typography,{defaultVariant:"labelMd",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:l.label})},l.label))})]})})};exports.TimelineContent=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),c=require("swiper/react");;/* empty css                                              */const y=require("../../../../utils/cn/cn.cjs.js"),b=require("../../../../utils/useSwiper/useSwiper.cjs.js"),j=require("./utils.cjs.js"),a=require("../../../../src/modules/TrackProgress/components/TimelineContent/timelineContent.module.css"),n=require("../../../../components/Typography/Typography.cjs.js"),v=[{key:"optimal",label:"Optimal"},{key:"inRange",label:"In Range"},{key:"outOfRange",label:"Out of Range"}],S=({tabs:s})=>{const{activeIndex:o,onSwiperInit:d,handleSlideTo:u,handleSlideChange:p,handleSwiperResize:h}=b.useSwiper(),m=g.useMemo(()=>s.map(i=>j.distributePoints(i.optimal,i.inRange,i.outOfRange)),[s]);return e.jsx("div",{className:a.root,children:e.jsxs("div",{className:a.container,children:[e.jsx(c.Swiper,{onSwiper:d,onResize:h,onSlideChange:p,slidesPerView:1,allowTouchMove:s.length>1,spaceBetween:0,initialSlide:0,className:a.swiper,children:s.map((i,r)=>e.jsx(c.SwiperSlide,{children:e.jsxs("div",{className:a.content,children:[e.jsx("div",{className:a.metricsContainer,children:v.map((l,t)=>e.jsxs("div",{className:a.metric,children:[e.jsx(n.Typography,{defaultVariant:"displayLg",mobileVariant:"displaySm",weight:"regular",children:i[l.key]}),e.jsxs("div",{className:a.metricTitle,children:[e.jsx(n.Typography,{as:"div",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:"("}),e.jsx(n.Typography,{as:"div",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:l.label}),e.jsx("div",{className:a.circle,"data-value":l.key}),e.jsx(n.Typography,{as:"div",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:")"})]})]},`${l.key}_${t}`))}),e.jsx("div",{className:a.canvas,children:m[r].map((l,t)=>e.jsx("div",{className:a.circle,"data-value":l},t))})]})},i.label))}),e.jsx("div",{className:a.tabsContainer,children:s.map((i,r)=>e.jsx("button",{className:y.cn(a.tab,o===r&&a.tabActive),onClick:()=>u(r),children:e.jsx(n.Typography,{defaultVariant:"labelMd",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:i.label})},i.label))})]})})};exports.TimelineContent=S;

package/dist/modules/TrackProgress/components/TimelineContent/TimelineContent.es.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { useMemo as g } from "react";
-import { Swiper as v, SwiperSlide as b } from "../../../../node_modules/swiper/swiper-react.es.js";
+import { Swiper as v, SwiperSlide as b } from "swiper/react";
 /* empty css                                            */
-import { Typography as n } from "../../../../components/Typography/Typography.es.js";
 import { cn as f } from "../../../../utils/cn/cn.es.js";
 import { useSwiper as S } from "../../../../utils/useSwiper/useSwiper.es.js";
 import { distributePoints as w } from "./utils.es.js";
-import a from "./timelineContent.module.css.es.js";
+import a from "../../../../modules/TrackProgress/components/TimelineContent/timelineContent.module.css";
+import { Typography as n } from "../../../../components/Typography/Typography.es.js";
 const y = [
   { key: "optimal", label: "Optimal" },
   { key: "inRange", label: "In Range" },

package/dist/modules/TrackProgress/components/TimelineContent/timelineContent.module.css

@@ -0,0 +1,183 @@
+.root {
+    position: relative;
+    width: 100%;
+    max-width: 1080px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        max-width: 960px;
+        height: 100%;
+        max-height: 473px;
+        border-radius: var(--border-radius-full);
+        opacity: 0.5;
+        background: radial-gradient(
+            50% 50% at 50% 50%,
+            var(--color-bg-fill-primary) 0%,
+            var(--color-bg-fill-brand-indigo) 100%
+        );
+        filter: blur(200px);
+    }
+}
+
+.container {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 30px 60px 60px;
+    border: var(--border-width-sm) solid var(--border-color-alpha-white-10);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 18px;
+    border-radius: var(--border-radius-xxl);
+    background: linear-gradient(180deg, rgba(129, 177, 226, 0.00) 50%, rgba(129, 177, 226, 0.10) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), var(--color-bg-base-dark);
+    box-shadow: 0 0 180px 0 rgba(129, 177, 226, 0.15) inset;
+    backdrop-filter: blur(25px);
+}
+
+.swiper {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.content {
+    padding: 30px 0;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 60px;
+    width: 100%;
+    max-width: 960px;
+}
+
+.metricsContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.metric {
+    display: flex;
+    min-width: 160px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+}
+
+.metricTitle {
+    padding: 6px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.canvas {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(15, 1fr);
+    justify-content: space-between;
+    row-gap: 28px;
+    column-gap: 8px;
+}
+
+.circle {
+    width: 12px;
+    min-width: 12px;
+    height: 12px;
+    min-height: 12px;
+    border-radius: var(--border-radius-full);
+    align-self: center;
+
+    &[data-value='optimal'] {
+        background-color: var(--color-bg-fill-alpha-white-10);
+    }
+
+    &[data-value='inRange'] {
+        background-color: var(--color-bg-fill-brand-indigo);
+        filter: drop-shadow(0px 0px 32px var(--color-bg-fill-brand-indigo));
+    }
+
+    &[data-value='outOfRange'] {
+        background-color: var(--color-bg-danger);
+        filter: drop-shadow(0px 0px 32px var(--color-bg-danger));
+    }
+}
+
+.tabsContainer {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 16px;
+}
+
+.tab {
+    padding: 12px 0;
+    min-width: 80px;
+    width: 100%;
+    text-align: left;
+    color: var(--color-text-primary-inverted);
+    background: none;
+    border: none;
+    border-top: var(--border-width-sm) solid var(--border-color-invert);
+    opacity: 0.5;
+    cursor: pointer;
+    transition: opacity 0.3s ease, color 0.3s ease, border-top-color 0.3s ease;
+}
+
+.tabActive {
+    color: var(--color-text-primary-brand-solar);
+    border-top-color: var(--border-color-solar);
+    opacity: 1;
+}
+
+@media screen and (width <= 768px) {
+    .container {
+        padding: 0 16px 16px;
+        gap: var(--spacing-8);
+        border-radius: var(--border-radius-lg);
+    }
+
+    .content {
+        gap: 8px;
+        padding: 28px 12px 12px;
+    }
+
+    .metric {
+        gap: 8px;
+        min-width: 136px;
+    }
+
+    .canvas {
+        grid-template-columns: repeat(8, 1fr);
+        gap: 10px;
+    }
+
+    .circle {
+        width: 6px;
+        min-width: 6px;
+        height: 6px;
+        min-height: 6px;
+    }
+
+    .tabsContainer {
+        overflow-x: auto;
+        white-space: nowrap;
+        gap: 8px;
+    }
+
+    .tab {
+        min-width: 0;
+    }
+}

package/dist/modules/TrackProgress/trackProgress.module.css

@@ -0,0 +1,50 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-bg-base-dark);
+    color: var(--color-text-primary-inverted);
+}
+
+.container {
+    display: flex;
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: var(--spacing-120);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 60px;
+}
+
+.headerContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    max-width: 828px;
+    gap: var(--spacing-32);
+}
+
+.headerDescription {
+    max-width: 680px;
+}
+
+@media (width <= 1024px) {
+    .container {
+        padding: var(--spacing-120) var(--spacing-20);
+    }
+}
+
+@media (width <= 768px) {
+    .container {
+        padding: 60px var(--spacing-20);
+        gap: var(--spacing-48);
+    }
+
+    .headerContainer {
+        gap: var(--spacing-24);
+    }
+}

package/dist/modules/TypesOfTests/TypesOfTests.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),v=require("../../components/ComplexTooltip/ComplexTooltip.cjs.js"),k=require("../../components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.cjs.js"),g=require("../../components/Button/Button.cjs.js"),x=require("../../components/Typography/Typography.cjs.js"),r=require("../../utils/cn/cn.cjs.js"),t=require("./typesOfTests.module.css.cjs.js"),I=7,N=({title:C,items:s,colorScheme:n,buttonLabel:p})=>{const[u,y]=a.useState(!1),[i,h]=a.useState(null),[f,j]=a.useState(!1),c=a.useRef(null),m=()=>y(l=>!l),T=()=>{h(null)};return a.useLayoutEffect(()=>{var d;if(!c.current)return;const o=(((d=c.current.firstElementChild)==null?void 0:d.getBoundingClientRect().height)||0)*I;j(c.current.scrollHeight>o)},[s.length]),e.jsxs("section",{className:t.default.root,"data-scheme":n,children:[i!==null&&e.jsx("div",{className:r.cn(t.default.popover,t.default.mobile),children:e.jsx(k.ComplexTooltipContent,{title:s[i].title,description:s[i].description,onClose:T,style:n,link:s[i].link,className:t.default.popoverContent})}),e.jsxs("div",{className:t.default.container,children:[e.jsx("div",{className:t.default.header,children:e.jsxs(x.Typography,{as:"h2",defaultVariant:"displayMd",mobileVariant:"headingLg",children:["(",C,")"]})}),e.jsx("div",{ref:c,className:r.cn(t.default.content,!u&&f&&t.default.contentLimited),children:s.map((l,o)=>e.jsx("div",{className:r.cn(t.default.item,i===o&&t.default.selectedItem),onClick:()=>h(d=>d===o?null:o),children:e.jsx(v.ComplexTooltip,{title:l.title,description:l.description,style:"light",trigger:"hover",isBlurred:n==="dark",link:l.link,children:e.jsx(x.Typography,{as:"p",defaultVariant:"headingLg",mobileVariant:"headingXxs",className:t.default.itemTitle,children:l.title})})},l.title))}),f&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:r.cn(t.default.actions,t.default.desktop),children:e.jsxs(g.Button,{variant:n==="light"?"muted":"muted-invert",size:"lg",onClick:m,children:[u?"Hide":"View All"," ",p]})}),e.jsx("div",{className:r.cn(t.default.actions,t.default.mobile),children:e.jsxs(g.Button,{variant:n==="light"?"muted":"muted-invert",size:"md",onClick:m,children:[u?"Hide":"View All"," ",p]})})]})]})]})};exports.TypesOfTests=N;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),c=require("../../utils/cn/cn.cjs.js"),t=require("../../src/modules/TypesOfTests/typesOfTests.module.css"),f=require("../../components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.cjs.js"),x=require("../../components/Typography/Typography.cjs.js"),k=require("../../components/ComplexTooltip/ComplexTooltip.cjs.js"),C=require("../../components/Button/Button.cjs.js"),I=7,N=({title:j,items:n,colorScheme:l,buttonLabel:p})=>{const[u,y]=r.useState(!1),[i,h]=r.useState(null),[m,v]=r.useState(!1),a=r.useRef(null),g=()=>y(s=>!s),T=()=>{h(null)};return r.useLayoutEffect(()=>{var d;if(!a.current)return;const o=(((d=a.current.firstElementChild)==null?void 0:d.getBoundingClientRect().height)||0)*I;v(a.current.scrollHeight>o)},[n.length]),e.jsxs("section",{className:t.root,"data-scheme":l,children:[i!==null&&e.jsx("div",{className:c.cn(t.popover,t.mobile),children:e.jsx(f.ComplexTooltipContent,{title:n[i].title,description:n[i].description,onClose:T,style:l,link:n[i].link,className:t.popoverContent})}),e.jsxs("div",{className:t.container,children:[e.jsx("div",{className:t.header,children:e.jsxs(x.Typography,{as:"h2",defaultVariant:"displayMd",mobileVariant:"headingLg",children:["(",j,")"]})}),e.jsx("div",{ref:a,className:c.cn(t.content,!u&&m&&t.contentLimited),children:n.map((s,o)=>e.jsx("div",{className:c.cn(t.item,i===o&&t.selectedItem),onClick:()=>h(d=>d===o?null:o),children:e.jsx(k.ComplexTooltip,{title:s.title,description:s.description,style:"light",trigger:"hover",isBlurred:l==="dark",link:s.link,children:e.jsx(x.Typography,{as:"p",defaultVariant:"headingLg",mobileVariant:"headingXxs",className:t.itemTitle,children:s.title})})},s.title))}),m&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:c.cn(t.actions,t.desktop),children:e.jsxs(C.Button,{variant:l==="light"?"muted":"muted-invert",size:"lg",onClick:g,children:[u?"Hide":"View All"," ",p]})}),e.jsx("div",{className:c.cn(t.actions,t.mobile),children:e.jsxs(C.Button,{variant:l==="light"?"muted":"muted-invert",size:"md",onClick:g,children:[u?"Hide":"View All"," ",p]})})]})]})]})};exports.TypesOfTests=N;

package/dist/modules/TypesOfTests/TypesOfTests.es.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs as l, jsx as t, Fragment as y } from "react/jsx-runtime";
 import { useState as h, useRef as V, useLayoutEffect as x } from "react";
-import { ComplexTooltip as B } from "../../components/ComplexTooltip/ComplexTooltip.es.js";
-import { ComplexTooltipContent as H } from "../../components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.es.js";
-import { Button as v } from "../../components/Button/Button.es.js";
-import { Typography as C } from "../../components/Typography/Typography.es.js";
 import { cn as a } from "../../utils/cn/cn.es.js";
-import e from "./typesOfTests.module.css.es.js";
+import e from "../../modules/TypesOfTests/typesOfTests.module.css";
+import { ComplexTooltipContent as B } from "../../components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.es.js";
+import { Typography as v } from "../../components/Typography/Typography.es.js";
+import { ComplexTooltip as H } from "../../components/ComplexTooltip/ComplexTooltip.es.js";
+import { Button as C } from "../../components/Button/Button.es.js";
 const T = 7, M = ({ title: k, items: n, colorScheme: s, buttonLabel: p }) => {
   const [m, I] = h(!1), [o, u] = h(null), [g, N] = h(!1), c = V(null), f = () => I((i) => !i), w = () => {
     u(null);
@@ -18,7 +18,7 @@ const T = 7, M = ({ title: k, items: n, colorScheme: s, buttonLabel: p }) => {
     N(c.current.scrollHeight > r);
   }, [n.length]), /* @__PURE__ */ l("section", { className: e.root, "data-scheme": s, children: [
     o !== null && /* @__PURE__ */ t("div", { className: a(e.popover, e.mobile), children: /* @__PURE__ */ t(
-      H,
+      B,
       {
         title: n[o].title,
         description: n[o].description,
@@ -29,7 +29,7 @@ const T = 7, M = ({ title: k, items: n, colorScheme: s, buttonLabel: p }) => {
       }
     ) }),
     /* @__PURE__ */ l("div", { className: e.container, children: [
-      /* @__PURE__ */ t("div", { className: e.header, children: /* @__PURE__ */ l(C, { as: "h2", defaultVariant: "displayMd", mobileVariant: "headingLg", children: [
+      /* @__PURE__ */ t("div", { className: e.header, children: /* @__PURE__ */ l(v, { as: "h2", defaultVariant: "displayMd", mobileVariant: "headingLg", children: [
         "(",
         k,
         ")"
@@ -45,7 +45,7 @@ const T = 7, M = ({ title: k, items: n, colorScheme: s, buttonLabel: p }) => {
               className: a(e.item, o === r && e.selectedItem),
               onClick: () => u((d) => d === r ? null : r),
               children: /* @__PURE__ */ t(
-                B,
+                H,
                 {
                   title: i.title,
                   description: i.description,
@@ -54,7 +54,7 @@ const T = 7, M = ({ title: k, items: n, colorScheme: s, buttonLabel: p }) => {
                   isBlurred: s === "dark",
                   link: i.link,
                   children: /* @__PURE__ */ t(
-                    C,
+                    v,
                     {
                       as: "p",
                       defaultVariant: "headingLg",
@@ -72,7 +72,7 @@ const T = 7, M = ({ title: k, items: n, colorScheme: s, buttonLabel: p }) => {
       ),
       g && /* @__PURE__ */ l(y, { children: [
         /* @__PURE__ */ t("div", { className: a(e.actions, e.desktop), children: /* @__PURE__ */ l(
-          v,
+          C,
           {
             variant: s === "light" ? "muted" : "muted-invert",
             size: "lg",
@@ -85,7 +85,7 @@ const T = 7, M = ({ title: k, items: n, colorScheme: s, buttonLabel: p }) => {
           }
         ) }),
         /* @__PURE__ */ t("div", { className: a(e.actions, e.mobile), children: /* @__PURE__ */ l(
-          v,
+          C,
           {
             variant: s === "light" ? "muted" : "muted-invert",
             size: "md",

package/dist/modules/TypesOfTests/typesOfTests.module.css

@@ -0,0 +1,196 @@
+.root {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.root[data-scheme='light'] {
+    background-color: var(--color-bg-neutral-light);
+    color: var(--color-text-primary);
+}
+
+.root[data-scheme='dark'] {
+    background-color: var(--color-bg-base-dark);
+    color: var(--color-text-primary-inverted);
+}
+
+.container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: var(--spacing-120);
+    max-width: var(--content-max-width);
+}
+
+.header {
+    margin-bottom: var(--spacing-64);
+}
+
+.content {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: var(--spacing-16);
+    padding: 0 60px;
+    justify-content: space-between;
+    align-items: stretch;
+}
+
+.contentLimited {
+    position: relative;
+    max-height: calc(35px * 7 + var(--spacing-16) * 6);
+    overflow: hidden;
+}
+
+.contentLimited::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.root[data-scheme='light'] .contentLimited::before {
+    background: linear-gradient(180deg, rgba(247, 247, 247, 0) 50%, rgba(247, 247, 247, 0.9) 100%);
+}
+
+.root[data-scheme='dark'] .contentLimited::before {
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%);
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: var(--spacing-40);
+}
+
+.item {
+    min-width: 0;
+    cursor: default;
+    opacity: 0.2;
+    transition:
+        opacity 0.3s ease,
+        color 0.3s ease;
+}
+
+.item:hover {
+    opacity: 1;
+    z-index: 2;
+}
+
+.itemTitle {
+    position: relative;
+    display: inline-block;
+}
+
+.itemTitle::before,
+.itemTitle::after {
+    opacity: 0;
+    transition: opacity 0.3s;
+    position: absolute;
+    top: 0;
+    font-weight: inherit;
+    color: inherit;
+    pointer-events: none;
+}
+
+.itemTitle::before {
+    content: '(';
+    left: -0.3em;
+}
+
+.itemTitle::after {
+    content: ')';
+    right: -0.3em;
+}
+
+.item:hover .itemTitle::before,
+.item:hover .itemTitle::after {
+    opacity: 1;
+}
+
+.root[data-scheme='light'] .item:hover {
+    color: var(--color-text-primary);
+}
+
+.root[data-scheme='dark'] .item:hover {
+    color: var(--color-text-primary-brand-solar);
+}
+
+.popover {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+}
+
+.popoverContent {
+    width: 100%;
+    max-width: 100%;
+    border-radius: var(--border-radius-none);
+    border-width: 0;
+}
+
+.mobile {
+    display: none;
+}
+
+@media screen and (width <= 768px) {
+    .container {
+        padding: var(--spacing-64) var(--spacing-20);
+    }
+
+    .header {
+        margin-bottom: var(--spacing-40);
+        padding: 0 var(--spacing-20);
+    }
+
+    .content {
+        padding: 0 var(--spacing-20);
+    }
+
+    .actions {
+        margin-top: var(--spacing-28);
+    }
+
+    .contentLimited {
+        max-height: calc(20px * 7 + var(--spacing-16) * 6);
+    }
+
+    .root[data-scheme='dark'] .item:not(.selectedItem):hover,
+    .root[data-scheme='light'] .item:not(.selectedItem):hover {
+        color: inherit;
+        opacity: 0.2;
+    }
+
+    .selectedItem {
+        color: var(--color-text-primary-brand-solar);
+        opacity: 1;
+        z-index: 2;
+    }
+
+
+    .selectedItem .itemTitle::before,
+    .selectedItem .itemTitle::after {
+        opacity: 1;
+    }
+
+    .mobile {
+        display: block;
+    }
+
+    .desktop {
+        display: none;
+    }
+}

package/dist/modules/WhatIs/WhatIs.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../../components/Typography/Typography.cjs.js"),e=require("./whatIs.module.css.cjs.js"),n=({image:r,title:i,label:t,description:l})=>a.jsx("section",{className:e.default.root,children:a.jsxs("div",{className:e.default.container,children:[a.jsx("img",{src:r,alt:"Illustration"}),a.jsxs("div",{className:e.default.textContainer,children:[a.jsxs("div",{className:e.default.headline,children:[a.jsx(s.Typography,{as:"h2",defaultVariant:"displayXs",mobileVariant:"headingLg",children:i}),t&&a.jsx(s.Typography,{as:"p",defaultVariant:"labelXl",mobileVariant:"labelMd",emphasis:!0,children:t})]}),a.jsx(s.Typography,{className:e.default.description,as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",children:l})]})]})});exports.WhatIs=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../../src/modules/WhatIs/whatIs.module.css"),s=require("../../components/Typography/Typography.cjs.js"),l=({image:r,title:t,label:i,description:n})=>a.jsx("section",{className:e.root,children:a.jsxs("div",{className:e.container,children:[a.jsx("img",{src:r,alt:"Illustration"}),a.jsxs("div",{className:e.textContainer,children:[a.jsxs("div",{className:e.headline,children:[a.jsx(s.Typography,{as:"h2",defaultVariant:"displayXs",mobileVariant:"headingLg",children:t}),i&&a.jsx(s.Typography,{as:"p",defaultVariant:"labelXl",mobileVariant:"labelMd",emphasis:!0,children:i})]}),a.jsx(s.Typography,{className:e.description,as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",children:n})]})]})});exports.WhatIs=l;

package/dist/modules/WhatIs/WhatIs.es.js

@@ -1,6 +1,6 @@
 import { jsx as a, jsxs as e } from "react/jsx-runtime";
+import i from "../../modules/WhatIs/whatIs.module.css";
 import { Typography as r } from "../../components/Typography/Typography.es.js";
-import i from "./whatIs.module.css.es.js";
 const m = ({ image: t, title: l, label: s, description: n }) => /* @__PURE__ */ a("section", { className: i.root, children: /* @__PURE__ */ e("div", { className: i.container, children: [
   /* @__PURE__ */ a("img", { src: t, alt: "Illustration" }),
   /* @__PURE__ */ e("div", { className: i.textContainer, children: [

package/dist/modules/WhatIs/whatIs.module.css

@@ -0,0 +1,61 @@
+.root {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: 60px;
+}
+
+.container img {
+    border-radius: var(--border-radius-lg);
+    object-fit: cover;
+    object-position: center;
+    height: 662px;
+    width: 100%;
+}
+
+.textContainer {
+    display: flex;
+    gap: 60px;
+    margin-top: 48px;
+}
+
+.headline {
+    flex: 1;
+    gap: 8px;
+}
+
+.headline p {
+    color: var(--color-text-secondary);
+}
+
+.description {
+    flex: 1;
+    color: var(--color-midnight-500);
+}
+
+@media screen and (width <= 768px) {
+    .container {
+        justify-content: center;
+        align-items: center;
+        padding: 40px 20px;
+    }
+
+    .container img {
+        height: 223px;
+        width: 100%;
+    }
+
+    .textContainer {
+        margin-top: 16px;
+        flex-direction: column;
+        gap: 24px;
+    }
+}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../components/Callback/Callback.cjs.js"),c=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),u=require("../../utils/cn/cn.cjs.js"),d=require("./components/ProtocolTags/ProtocolTags.cjs.js"),o=require("./yourProtocol.module.css.cjs.js"),s=require("../../types/analytics/analytics.cjs.js"),m=({title:r,image:n,tags:i,callbackView:t})=>{const a={event:s.EAnalyticsEvent.ctaClicked,type:s.EAnalyticsEventType.interaction,component:"YourProtocol",element:"Callback",payload:{ctaLink:(t==null?void 0:t.signupUrl)??""}};return e.jsx("section",{className:o.default.root,children:e.jsxs("div",{className:o.default.container,children:[e.jsxs("div",{className:o.default.content,children:[e.jsx(c.HighlightedTitle,{title:r,className:o.default.title,defaultVariant:"displaySm",mobileVariant:"headingXl"}),e.jsx(d.ProtocolTags,{tags:i}),t&&e.jsx("div",{className:o.default.callback,children:e.jsx(l.Callback,{title:t.title,description:t.description??"",price:t.price??"",image:t.image,button:{href:t.signupUrl??"",as:"a",analyticsProps:a},size:"sm",shape:t.shape})})]}),e.jsx("img",{src:n,alt:"Your Protocol",className:u.cn(o.default.image,o.default.desktop),width:481})]})})};exports.YourProtocol=m;
+"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;