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

package/dist/modules/ThreeItemsPlainCarousel/ThreeItemsPlainCarousel.es.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs as s, jsx as e, Fragment as N } from "react/jsx-runtime";
 import { useState as V, useMemo as b } from "react";
+import i from "../../modules/ThreeItemsPlainCarousel/threeItemsPlainCarousel.module.css";
+import { cn as y } from "../../utils/cn/cn.es.js";
 import { Typography as r } from "../../components/Typography/Typography.es.js";
 import { ProgressButton as f } from "../../components/ProgressButton/ProgressButton.es.js";
-import i from "./threeItemsPlainCarousel.module.css.es.js";
-import { cn as y } from "../../utils/cn/cn.es.js";
 const p = 3, T = ({ title: g, cards: d }) => {
   const [o, m] = V(0), a = b(() => d.slice(0, p), [d]), C = b(() => a.length === 0 ? [] : [...a, ...a].slice(o, o + p), [a, o]), c = a.length, l = c > 1, h = () => {
     l && m((t) => t === 0 ? c - 1 : t - 1);

package/dist/modules/ThreeItemsPlainCarousel/threeItemsPlainCarousel.module.css

@@ -0,0 +1,197 @@
+.root {
+    max-width: var(--content-max-width);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    padding: 120px 180px;
+    gap: 60px;
+}
+
+.topContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 20px;
+    width: 100%;
+}
+
+.bottomContainer {
+    display: flex;
+    align-items: flex-start;
+    gap: 30px;
+    align-self: stretch;
+}
+
+.subtitle {
+    color: var(--color-text-secondary);
+}
+
+.mainCard {
+    border-radius: var(--border-radius-lg);
+    display: flex;
+    flex-direction: column;
+    max-width: 540px;
+    width: 100%;
+    gap: 24px;
+}
+
+.minorCard {
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--border-radius-lg);
+    width: 240px;
+    gap: 24px;
+}
+
+.minorCard > img {
+    width: 240px;
+    height: 240px;
+    aspect-ratio: 1/1;
+    border-radius: var(--border-radius-lg);
+    object-fit: cover;
+}
+
+.cardContent {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.mainCard > img {
+    width: 540px;
+    height: 540px;
+    aspect-ratio: 1/1;
+    border-radius: var(--border-radius-lg);
+    object-fit: cover;
+    background-size: cover;
+    background-position: center top;
+    background-repeat: no-repeat;
+}
+
+.bottomButton {
+    display: none;
+}
+
+@media (width <= 1440px) {
+    .root {
+        max-width: 1200px;
+        padding: 60px 120px;
+        gap: 60px;
+    }
+
+    .mainCard > img {
+        width: 480px;
+        height: 480px;
+    }
+
+    .minorCard {
+        width: 210px;
+    }
+
+    .secminorCardondCard > img {
+        width: 210px;
+        height: 210px;
+    }
+}
+
+@media (width <= 1200px) {
+    .root {
+        max-width: 1024px;
+        padding: 60px 120px;
+    }
+
+    .mainCard > img {
+        width: 400px;
+        height: 400px;
+    }
+
+    .minorCard {
+        width: 160px;
+    }
+
+    .minorCard > img {
+        width: 160px;
+        height: 160px;
+    }
+}
+
+@media (width <= 1024px) {
+    .root {
+        max-width: 768px;
+        padding: 40px 40px;
+    }
+
+    .mainCard > img {
+        width: 310px;
+        height: 310px;
+    }
+
+    .minorCard {
+        width: 160px;
+    }
+
+    .minorCard > img {
+        width: 160px;
+        height: 160px;
+    }
+}
+
+@media (width <= 768px) {
+    .root {
+        padding: 64px 0 64px 20px;
+        gap: 40px;
+    }
+
+    .topContainer {
+        padding-top: 0;
+    }
+
+    .topButton {
+        display: none;
+    }
+
+    .bottomContainer {
+        gap: 8px;
+        overflow: hidden;
+        width: 100%;
+        max-width: 100vw;
+    }
+
+    .bottomButton {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .mainCard {
+        max-width: 273px;
+        gap: 12px;
+
+        > img {
+            width: 273px;
+            height: 273px;
+        }
+    }
+
+    .mainCardContent {
+        gap: 4px;
+    }
+
+    .descriptionText {
+        letter-spacing: var(--letter-spacing-negative-lg);
+    }
+
+    .minorCard {
+        gap: 12px;
+        width: 181px;
+    }
+
+    .minorCard > img {
+        width: 181px;
+        height: 181px;
+    }
+}

package/dist/modules/TotalCare/TotalCare.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),d=require("../../components/ContentTabs/ContentTabs.cjs.js"),u=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),t=require("./totalCare.module.css.cjs.js"),m=({title:r,label:c,contentTabs:a,colorScheme:i,version:l="v1"})=>{const[s,o]=n.useState(a.tabs[0]);return e.jsx("section",{className:t.default.root,"data-scheme":i,"data-version":l,children:e.jsxs("div",{className:t.default.container,children:[e.jsx(u.HighlightedTitle,{title:r,label:c,className:t.default.header,colorScheme:i}),e.jsxs("div",{className:t.default.content,children:[e.jsx("div",{className:t.default.tags,children:e.jsx(d.ContentTabs,{activeTab:s,tabs:a.tabs,colorScheme:a.colorScheme,activeWithArrow:l==="v2",onTabClick:o})}),s.image&&e.jsx("div",{className:t.default.imageWrap,children:e.jsx("img",{src:s.image,alt:"Total Care",className:t.default.image})})]})]})})};exports.TotalCare=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),t=require("../../src/modules/TotalCare/totalCare.module.css"),m=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),d=require("../../components/ContentTabs/ContentTabs.cjs.js"),h=({title:r,label:l,contentTabs:s,colorScheme:i,version:c="v1"})=>{const[a,n]=o.useState(s.tabs[0]);return e.jsx("section",{className:t.root,"data-scheme":i,"data-version":c,children:e.jsxs("div",{className:t.container,children:[e.jsx(m.HighlightedTitle,{title:r,label:l,className:t.header,colorScheme:i}),e.jsxs("div",{className:t.content,children:[e.jsx("div",{className:t.tags,children:e.jsx(d.ContentTabs,{activeTab:a,tabs:s.tabs,colorScheme:s.colorScheme,activeWithArrow:c==="v2",onTabClick:n})}),a.image&&e.jsx("div",{className:t.imageWrap,children:e.jsx("img",{src:a.image,alt:"Total Care",className:t.image})})]})]})})};exports.TotalCare=h;

package/dist/modules/TotalCare/TotalCare.es.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import { useState as d } from "react";
-import { ContentTabs as n } from "../../components/ContentTabs/ContentTabs.es.js";
-import { HighlightedTitle as h } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import a from "./totalCare.module.css.es.js";
+import a from "../../modules/TotalCare/totalCare.module.css";
+import { HighlightedTitle as n } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { ContentTabs as h } from "../../components/ContentTabs/ContentTabs.es.js";
 const f = ({ title: m, label: o, contentTabs: t, colorScheme: s, version: r = "v1" }) => {
   const [i, l] = d(t.tabs[0]);
   return /* @__PURE__ */ e("section", { className: a.root, "data-scheme": s, "data-version": r, children: /* @__PURE__ */ c("div", { className: a.container, children: [
-    /* @__PURE__ */ e(h, { title: m, label: o, className: a.header, colorScheme: s }),
+    /* @__PURE__ */ e(n, { title: m, label: o, className: a.header, colorScheme: s }),
     /* @__PURE__ */ c("div", { className: a.content, children: [
       /* @__PURE__ */ e("div", { className: a.tags, children: /* @__PURE__ */ e(
-        n,
+        h,
         {
           activeTab: i,
           tabs: t.tabs,

package/dist/modules/TotalCare/totalCare.module.css

@@ -0,0 +1,150 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &[data-scheme='light'] {
+        background-color: var(--color-bg-base-light);
+        color: var(--color-text-primary);
+    }
+
+    &[data-scheme='dark'] {
+        background-color: var(--color-bg-base-dark);
+        color: var(--color-text-primary-inverted);
+    }
+}
+
+.container {
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: var(--spacing-120) var(--spacing-180);
+}
+
+.header {
+    max-width: 1050px;
+    margin-bottom: 60px;
+}
+
+.content {
+    display: grid;
+    width: 100%;
+    grid-template-columns: 360px 1fr;
+    gap: var(--spacing-64);
+}
+
+.tags {
+    padding-top: var(--spacing-48);
+}
+
+.imageWrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    max-width: 660px;
+    height: max-content;
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        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-solar) 100%
+        );
+        filter: blur(200px);
+        z-index: 0;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-image: url('./assets/ipad.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        z-index: 2;
+    }
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    padding: var(--spacing-16);
+    border-radius: var(--border-radius-lg);
+    z-index: 1;
+}
+
+.root[data-version='v2'] {
+    .imageWrap::before,
+    .imageWrap::after {
+        display: none;
+    }
+
+    .image {
+        padding: 0;
+    }
+}
+
+.mobile {
+    display: none;
+}
+
+@media (width <= 1440px) {
+    .container {
+        padding: var(--spacing-120);
+    }
+
+    .content {
+        grid-template-columns: 300px 1fr;
+    }
+}
+
+@media (width <= 1024px) {
+    .container {
+        padding: var(--spacing-120) var(--spacing-20);
+    }
+
+    .root[data-version='v1'] .image {
+        padding: var(--spacing-12);
+    }
+}
+
+@media screen and (width <= 768px) {
+    .container {
+        padding: var(--spacing-64) var(--spacing-20);
+    }
+
+    .header {
+        margin-bottom: var(--spacing-40);
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column-reverse;
+        gap: var(--spacing-40);
+    }
+
+    .tags {
+        padding: 0;
+    }
+
+    .root[data-version='v1'] .image {
+        padding: var(--spacing-16);
+    }
+
+    .mobile {
+        display: block;
+    }
+
+    .desktop {
+        display: none;
+    }
+}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),a=require("../../components/Typography/Typography.cjs.js"),n=require("./components/TimelineContent/TimelineContent.cjs.js"),r=require("./trackProgress.module.css.cjs.js"),l=({title:t,description:i,tabs:s})=>e.jsx("section",{className:r.default.root,children:e.jsxs("div",{className:r.default.container,children:[e.jsxs("div",{className:r.default.headerContainer,children:[e.jsx(o.HighlightedTitle,{title:t,colorScheme:"dark"}),e.jsx(a.Typography,{as:"p",defaultVariant:"bodyXl",mobileVariant:"bodySm",className:r.default.headerDescription,children:i})]}),e.jsx(n.TimelineContent,{tabs:s})]})});exports.TrackProgress=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../src/modules/TrackProgress/trackProgress.module.css"),n=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),o=require("../../components/Typography/Typography.cjs.js"),a=require("./components/TimelineContent/TimelineContent.cjs.js"),c=({title:i,description:s,tabs:t})=>e.jsx("section",{className:r.root,children:e.jsxs("div",{className:r.container,children:[e.jsxs("div",{className:r.headerContainer,children:[e.jsx(n.HighlightedTitle,{title:i,colorScheme:"dark"}),e.jsx(o.Typography,{as:"p",defaultVariant:"bodyXl",mobileVariant:"bodySm",className:r.headerDescription,children:s})]}),e.jsx(a.TimelineContent,{tabs:t})]})});exports.TrackProgress=c;

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

@@ -1,8 +1,8 @@
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import e from "../../modules/TrackProgress/trackProgress.module.css";
 import { HighlightedTitle as s } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { Typography as m } from "../../components/Typography/Typography.es.js";
 import { TimelineContent as n } from "./components/TimelineContent/TimelineContent.es.js";
-import e from "./trackProgress.module.css.es.js";
 const f = ({ title: i, description: a, tabs: t }) => /* @__PURE__ */ r("section", { className: e.root, children: /* @__PURE__ */ o("div", { className: e.container, children: [
   /* @__PURE__ */ o("div", { className: e.headerContainer, children: [
     /* @__PURE__ */ r(s, { title: i, colorScheme: "dark" }),

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);
+    }
+}