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

package/dist/components/StepsCarousel/stepsCarousel.module.css

@@ -0,0 +1,276 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+    gap: var(--spacing-20);
+    padding: 0 var(--spacing-120);
+    overflow: hidden;
+}
+
+.root[data-scheme='light'] {
+    color: var(--color-text-primary);
+}
+
+.root[data-scheme='dark'] {
+    color: var(--color-text-primary-inverted);
+}
+
+.stepsContainer {
+    min-height: 620px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: center;
+    flex-wrap: nowrap;
+    overflow-y: hidden;
+    overflow-x: auto;
+    gap: 28px;
+    touch-action: auto;
+    pointer-events: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.stepsContainer::-webkit-scrollbar {
+    display: none;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    outline: none;
+}
+
+.card.cardActive {
+    .image {
+        width: 420px;
+        height: 420px;
+        border-radius: var(--border-radius-lg);
+        opacity: 1;
+    }
+
+    .stepLabel::after {
+        transform: scaleX(1);
+    }
+
+    .textContainer {
+        opacity: 1;
+        pointer-events: auto;
+        transition-delay: 0.18s;
+    }
+}
+
+.imageWrapper {
+    max-width: 420px;
+    height: 420px;
+    min-height: 420px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--spacing-32);
+}
+
+.image {
+    width: 232px;
+    height: 232px;
+    object-fit: cover;
+    border-radius: var(--border-radius-full);
+    transition:
+        opacity 0.4s,
+        width 0.4s,
+        height 0.4s,
+        border-radius 0.4s;
+    opacity: 0.3;
+}
+
+.stepLabel {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: var(--spacing-16);
+    margin-bottom: var(--spacing-20);
+    color: var(--color-text-primary-disabled);
+}
+
+.stepLabel::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: -14px;
+    right: 14px;
+    width: calc(100% + var(--spacing-28));
+    height: var(--border-width-sm);
+    background-color: var(--border-color-alpha-white-20);
+}
+
+.card:first-child {
+    .stepLabel::before {
+        width: calc(100% + var(--spacing-14));
+        left: 0;
+    }
+}
+
+.card:last-child {
+    .stepLabel::before {
+        width: calc(100% + var(--spacing-14));
+        right: 0;
+    }
+}
+
+.stepLabel::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: var(--border-width-md);
+    background-color: var(--border-color-solar);
+    transform: scaleX(0);
+    transition: transform 0.4s;
+    pointer-events: none;
+}
+
+.root[data-scheme='light'] .stepLabel::after {
+    background-color: var(--border-color-indigo);
+}
+
+.labelText {
+    display: flex;
+    min-height: 28px;
+    align-items: center;
+    justify-content: center;
+}
+
+.textContainer {
+    max-width: 420px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+    padding: 0 var(--spacing-24);
+    opacity: 0;
+    transition: opacity 0.2s;
+    pointer-events: none;
+}
+
+.cardDescription {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.root[data-scheme='light'] .cardDescription {
+    color: var(--color-text-secondary);
+}
+
+.root[data-scheme='dark'] .cardDescription {
+    color: var(--color-text-secondary-inverted);
+}
+
+.mobile {
+    display: none;
+}
+
+@media (width <= 1440px) {
+    .root {
+        padding: 0 var(--spacing-64);
+    }
+}
+
+@media screen and (width <= 1024px) {
+    .root {
+        padding: 0 20px;
+    }
+
+    .stepsContainer {
+        min-height: 460px;
+    }
+
+    .card.cardActive {
+        .image {
+            width: 278px;
+            height: 278px;
+        }
+
+        .stepLabel {
+            max-width: 420px;
+        }
+
+        .stepLabel::after {
+            transform: scaleX(1);
+        }
+
+        .textContainer {
+            max-width: 420px;
+            transition-delay: 0.25s;
+        }
+    }
+
+    .imageWrapper {
+        height: 278px;
+        min-height: 278px;
+    }
+
+    .image {
+        width: 158px;
+        height: 158px;
+    }
+
+    .labelText {
+        min-height: 24px;
+    }
+
+    .textContainer {
+        max-width: 278px;
+        padding: 0 var(--spacing-8);
+        gap: var(--spacing-4);
+        height: 101px;
+        max-height: 101px;
+    }
+
+    .progressButtonContainer {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .mobile {
+        display: flex;
+    }
+
+    .desktop {
+        display: none;
+    }
+}
+
+@media (width <= 768px) {
+    .root {
+        padding: 0;
+    }
+    
+    .stepsContainer {
+        gap: 0;
+    }
+
+    .card {
+        width: 100%;
+        align-items: center;
+        flex-shrink: 0;
+        padding: 0 20px;
+    }
+}

package/dist/components/StudyGridCard/StudyGridCard.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("../../utils/formatDate.cjs.js");require("../Icon/Icon.cjs.js");const r=require("../Icon/constants.cjs.js"),g=require("../Label/Label.cjs.js"),d=require("../TextButton/TextButton.cjs.js"),i=require("../Typography/Typography.cjs.js"),o=require("../../utils/cn/cn.cjs.js"),b=require("../../types/analytics/analytics.cjs.js"),a=require("./studyGridCard.module.css.cjs.js");function x(t){const n=()=>{var s;if(t.trackingEvent){const l={event:t.trackingEvent,location:t.trackingLocation||"",type:b.EAnalyticsEventType.interaction,payload:{scienceCardTitle:t.title}};(s=window.eventBus)==null||s.emit("analytics",l)}};if(t.compressed===!0){const{title:s,link:l,image:c}=t;return e.jsxs("div",{className:o.cn(a.default.study,a.default.studyCompressed),children:[e.jsx("div",{className:o.cn(a.default.imagePart,a.default.imagePartCompressed),style:{backgroundImage:`url(${c})`}}),e.jsxs("div",{className:o.cn(a.default.dataPart,a.default.dataPartCompressed),children:[e.jsx(i.Typography,{className:o.cn(a.default.title,a.default.titleCompressed),defaultVariant:"headingSm",mobileVariant:"bodySm",as:"h6",children:s}),e.jsxs("div",{className:a.default.button,children:[e.jsx(d.TextButton,{hideOn:"desktop",className:a.default.mobileButton,size:"sm",as:"a",href:l,suffixIcon:r.EIconName.ARROW_FORWARD,onClick:n,children:"READ MORE"}),e.jsx(d.TextButton,{hideOn:"mobile",className:a.default.desktopButton,size:"lg",as:"a",href:l,suffixIcon:r.EIconName.ARROW_FORWARD,onClick:n,children:"READ MORE"})]})]}),e.jsx("div",{className:a.default.borderLeft}),e.jsx("div",{className:a.default.borderRight})]})}else{const{title:s,link:l,image:c,inverted:h,date:u,label:m,readTime:y}=t;return e.jsxs("div",{className:a.default.study,"data-inverted":h,children:[e.jsx("div",{className:a.default.imagePart,style:{backgroundImage:`url(${c})`},children:m&&e.jsx(g.Label,{...m})}),e.jsxs("div",{className:a.default.dataPart,children:[e.jsxs("div",{className:a.default.info,children:[e.jsx(i.Typography,{className:a.default.date,defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:f.formatDate(u)}),e.jsx(i.Typography,{className:a.default.mobileDate,defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:f.formatDate(u,{year:"2-digit"}).replaceAll(" / ","/")}),e.jsxs(e.Fragment,{children:[e.jsx(i.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",align:"center",children:"•"}),e.jsxs(i.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:[y," MIN READ"]})]})]}),e.jsx(i.Typography,{className:a.default.title,defaultVariant:"headingSm",mobileVariant:"bodySm",as:"h6",children:s}),e.jsxs("div",{className:a.default.button,children:[e.jsx(d.TextButton,{hideOn:"desktop",className:a.default.mobileButton,size:"sm",as:"a",href:l,suffixIcon:r.EIconName.ARROW_FORWARD,onClick:n,children:"READ MORE"}),e.jsx(d.TextButton,{hideOn:"mobile",className:a.default.desktopButton,size:"lg",as:"a",href:l,suffixIcon:r.EIconName.ARROW_FORWARD,onClick:n,children:"READ MORE"})]})]})]})}}exports.StudyGridCard=x;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../../utils/formatDate.cjs.js"),r=require("../../utils/cn/cn.cjs.js"),x=require("../../types/analytics/analytics.cjs.js"),a=require("../../src/components/StudyGridCard/studyGridCard.module.css"),n=require("../Typography/Typography.cjs.js"),c=require("../TextButton/TextButton.cjs.js"),o=require("../Icon/constants.cjs.js"),b=require("../Label/Label.cjs.js");function f(t){const l=()=>{var s;if(t.trackingEvent){const i={event:t.trackingEvent,location:t.trackingLocation||"",type:x.EAnalyticsEventType.interaction,payload:{scienceCardTitle:t.title}};(s=window.eventBus)==null||s.emit("analytics",i)}};if(t.compressed===!0){const{title:s,link:i,image:d}=t;return e.jsxs("div",{className:r.cn(a.study,a.studyCompressed),children:[e.jsx("div",{className:r.cn(a.imagePart,a.imagePartCompressed),style:{backgroundImage:`url(${d})`}}),e.jsxs("div",{className:r.cn(a.dataPart,a.dataPartCompressed),children:[e.jsx(n.Typography,{className:r.cn(a.title,a.titleCompressed),defaultVariant:"headingSm",mobileVariant:"bodySm",as:"h6",children:s}),e.jsxs("div",{className:a.button,children:[e.jsx(c.TextButton,{hideOn:"desktop",size:"sm",as:"a",href:i,suffixIcon:o.EIconName.ARROW_FORWARD,onClick:l,children:"READ MORE"}),e.jsx(c.TextButton,{hideOn:"mobile",size:"lg",as:"a",href:i,suffixIcon:o.EIconName.ARROW_FORWARD,onClick:l,children:"READ MORE"})]})]}),e.jsx("div",{className:a.borderLeft}),e.jsx("div",{className:a.borderRight})]})}else{const{title:s,link:i,image:d,inverted:y,date:m,label:u,readTime:g}=t;return e.jsxs("div",{className:a.study,"data-inverted":y,children:[e.jsx("div",{className:a.imagePart,style:{backgroundImage:`url(${d})`},children:u&&e.jsx(b.Label,{...u})}),e.jsxs("div",{className:a.dataPart,children:[e.jsxs("div",{className:a.info,children:[e.jsx(n.Typography,{className:a.date,defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:h.formatDate(m)}),e.jsx(n.Typography,{className:a.mobileDate,defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:h.formatDate(m,{year:"2-digit"}).replaceAll(" / ","/")}),e.jsxs(e.Fragment,{children:[e.jsx(n.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",align:"center",children:"•"}),e.jsxs(n.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:[g," MIN READ"]})]})]}),e.jsx(n.Typography,{className:a.title,defaultVariant:"headingSm",mobileVariant:"bodySm",as:"h6",children:s}),e.jsxs("div",{className:a.button,children:[e.jsx(c.TextButton,{hideOn:"desktop",size:"sm",as:"a",href:i,suffixIcon:o.EIconName.ARROW_FORWARD,onClick:l,children:"READ MORE"}),e.jsx(c.TextButton,{hideOn:"mobile",size:"lg",as:"a",href:i,suffixIcon:o.EIconName.ARROW_FORWARD,onClick:l,children:"READ MORE"})]})]})]})}}exports.StudyGridCard=f;

package/dist/components/StudyGridCard/StudyGridCard.es.js

@@ -1,15 +1,14 @@
 "use client";
 import { jsxs as i, jsx as a, Fragment as g } from "react/jsx-runtime";
 import { formatDate as f } from "../../utils/formatDate.es.js";
-import "../Icon/Icon.es.js";
-import { EIconName as m } from "../Icon/constants.es.js";
-import { Label as N } from "../Label/Label.es.js";
-import { TextButton as o } from "../TextButton/TextButton.es.js";
-import { Typography as n } from "../Typography/Typography.es.js";
-import { cn as d } from "../../utils/cn/cn.es.js";
+import { cn as m } from "../../utils/cn/cn.es.js";
 import { EAnalyticsEventType as v } from "../../types/analytics/analytics.es.js";
-import e from "./studyGridCard.module.css.es.js";
-function x(t) {
+import e from "../../components/StudyGridCard/studyGridCard.module.css";
+import { Typography as n } from "../Typography/Typography.es.js";
+import { TextButton as d } from "../TextButton/TextButton.es.js";
+import { EIconName as o } from "../Icon/constants.es.js";
+import { Label as y } from "../Label/Label.es.js";
+function S(t) {
   const s = () => {
     var r;
     if (t.trackingEvent) {
@@ -26,19 +25,19 @@ function x(t) {
   };
   if (t.compressed === !0) {
     const { title: r, link: l, image: c } = t;
-    return /* @__PURE__ */ i("div", { className: d(e.study, e.studyCompressed), children: [
+    return /* @__PURE__ */ i("div", { className: m(e.study, e.studyCompressed), children: [
       /* @__PURE__ */ a(
         "div",
         {
-          className: d(e.imagePart, e.imagePartCompressed),
+          className: m(e.imagePart, e.imagePartCompressed),
           style: { backgroundImage: `url(${c})` }
         }
       ),
-      /* @__PURE__ */ i("div", { className: d(e.dataPart, e.dataPartCompressed), children: [
+      /* @__PURE__ */ i("div", { className: m(e.dataPart, e.dataPartCompressed), children: [
         /* @__PURE__ */ a(
           n,
           {
-            className: d(e.title, e.titleCompressed),
+            className: m(e.title, e.titleCompressed),
             defaultVariant: "headingSm",
             mobileVariant: "bodySm",
             as: "h6",
@@ -47,27 +46,25 @@ function x(t) {
         ),
         /* @__PURE__ */ i("div", { className: e.button, children: [
           /* @__PURE__ */ a(
-            o,
+            d,
             {
               hideOn: "desktop",
-              className: e.mobileButton,
               size: "sm",
               as: "a",
               href: l,
-              suffixIcon: m.ARROW_FORWARD,
+              suffixIcon: o.ARROW_FORWARD,
               onClick: s,
               children: "READ MORE"
             }
           ),
           /* @__PURE__ */ a(
-            o,
+            d,
             {
               hideOn: "mobile",
-              className: e.desktopButton,
               size: "lg",
               as: "a",
               href: l,
-              suffixIcon: m.ARROW_FORWARD,
+              suffixIcon: o.ARROW_FORWARD,
               onClick: s,
               children: "READ MORE"
             }
@@ -78,9 +75,9 @@ function x(t) {
       /* @__PURE__ */ a("div", { className: e.borderRight })
     ] });
   } else {
-    const { title: r, link: l, image: c, inverted: b, date: u, label: h, readTime: R } = t;
+    const { title: r, link: l, image: c, inverted: b, date: h, label: u, readTime: R } = t;
     return /* @__PURE__ */ i("div", { className: e.study, "data-inverted": b, children: [
-      /* @__PURE__ */ a("div", { className: e.imagePart, style: { backgroundImage: `url(${c})` }, children: h && /* @__PURE__ */ a(N, { ...h }) }),
+      /* @__PURE__ */ a("div", { className: e.imagePart, style: { backgroundImage: `url(${c})` }, children: u && /* @__PURE__ */ a(y, { ...u }) }),
       /* @__PURE__ */ i("div", { className: e.dataPart, children: [
         /* @__PURE__ */ i("div", { className: e.info, children: [
           /* @__PURE__ */ a(
@@ -92,7 +89,7 @@ function x(t) {
               emphasis: !0,
               weight: "medium",
               color: "color-neutral-500",
-              children: f(u)
+              children: f(h)
             }
           ),
           /* @__PURE__ */ a(
@@ -104,7 +101,7 @@ function x(t) {
               emphasis: !0,
               weight: "medium",
               color: "color-neutral-500",
-              children: f(u, { year: "2-digit" }).replaceAll(" / ", "/")
+              children: f(h, { year: "2-digit" }).replaceAll(" / ", "/")
             }
           ),
           /* @__PURE__ */ i(g, { children: [
@@ -139,27 +136,25 @@ function x(t) {
         /* @__PURE__ */ a(n, { className: e.title, defaultVariant: "headingSm", mobileVariant: "bodySm", as: "h6", children: r }),
         /* @__PURE__ */ i("div", { className: e.button, children: [
           /* @__PURE__ */ a(
-            o,
+            d,
             {
               hideOn: "desktop",
-              className: e.mobileButton,
               size: "sm",
               as: "a",
               href: l,
-              suffixIcon: m.ARROW_FORWARD,
+              suffixIcon: o.ARROW_FORWARD,
               onClick: s,
               children: "READ MORE"
             }
           ),
           /* @__PURE__ */ a(
-            o,
+            d,
             {
               hideOn: "mobile",
-              className: e.desktopButton,
               size: "lg",
               as: "a",
               href: l,
-              suffixIcon: m.ARROW_FORWARD,
+              suffixIcon: o.ARROW_FORWARD,
               onClick: s,
               children: "READ MORE"
             }
@@ -170,5 +165,5 @@ function x(t) {
   }
 }
 export {
-  x as StudyGridCard
+  S as StudyGridCard
 };

package/dist/components/StudyGridCard/studyGridCard.module.css

@@ -0,0 +1,208 @@
+.study {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    column-gap: var(--spacing-16);
+    padding: var(--spacing-16);
+    max-width: 690px;
+}
+
+.study:hover {
+    background-color: var(--color-bg-neutral-light);
+}
+
+.study[data-inverted='true'] {
+    flex-direction: row-reverse;
+}
+
+.mobileDate {
+    display: none;
+}
+
+.imagePart {
+    display: flex;
+    align-items: flex-start;
+    aspect-ratio: 1 / 1;
+    flex-shrink: 0;
+    width: 289px;
+    height: 289px;
+    background-size: cover;
+    border-radius: var(--border-radius-lg);
+    padding: var(--spacing-16);
+}
+
+.dataPart {
+    display: flex;
+    flex-direction: column;
+}
+
+.dataPartCompressed {
+    padding: 4px 0;
+}
+
+.info {
+    display: flex;
+    gap: var(--spacing-8);
+    margin-bottom: var(--spacing-12);
+}
+
+.title {
+    padding-right: var(--spacing-36);
+}
+
+.button {
+    margin-top: auto;
+}
+
+.studyCompressed {
+    padding: var(--spacing-8);
+    max-width: 494px;
+    width: 100%;
+    min-width: 0;
+    padding: 20px;
+}
+
+.imagePartCompressed {
+    width: 120px;
+    height: 120px;
+    padding: var(--spacing-8);
+}
+
+.titleCompressed {
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+    white-space: normal;
+    padding-right: 0;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    max-width: 100%;
+}
+
+.studyCompressed::before,
+.studyCompressed::after {
+    content: '';
+    position: absolute;
+    left: 12px;
+    right: 12px;
+    height: 1px;
+    background-color: var(--border-color-light);
+    z-index: 10;
+}
+
+.studyCompressed::before {
+    top: 0;
+}
+
+.studyCompressed::after {
+    bottom: 0;
+}
+
+.borderLeft,
+.borderRight {
+    width: 1px;
+    position: absolute;
+    top: 12px;
+    bottom: 12px;
+    background-color: var(--border-color-light);
+    z-index: 10;
+}
+
+.borderLeft {
+    left: 0;
+}
+
+.borderRight {
+    right: 0;
+}
+
+@media (width <= 1380px) {
+    .study {
+        max-width: 600px;
+    }
+
+    .studyCompressed {
+        max-width: 350px;
+    }
+}
+
+@media (width <= 1200px) {
+    .title {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        -webkit-box-orient: vertical;
+    }
+
+    .study {
+        max-width: 500px;
+    }
+
+    .imagePart {
+        width: 200px;
+        height: 200px;
+    }
+
+    .imagePartCompressed {
+        width: 100px;
+        height: 100px;
+    }
+
+    .title {
+        padding-right: 0;
+    }
+
+    .titleCompressed {
+        padding-right: 0;
+    }
+}
+
+@media (width <= 1000px) {
+    .study {
+        column-gap: var(--spacing-8);
+        padding: var(--spacing-16) 0;
+        flex-shrink: 1;
+    }
+
+    .imagePart {
+        width: 164px;
+        height: 164px;
+    }
+
+    .studyCompressed {
+        padding: 12px 21px;
+        max-width: 297px;
+        width: 100%;
+        min-width: 0;
+    }
+
+    .imagePartCompressed {
+        width: 80px;
+        height: 80px;
+        padding: var(--spacing-8);
+    }
+
+    .titleCompressed {
+        font-size: var(--font-size-sm);
+        line-height: var(--line-height-lg);
+        white-space: normal;
+        padding-right: 0;
+        -webkit-line-clamp: 2;
+    }
+}
+
+@media (width < 420px) {
+    .studyCompressed {
+        padding: 12px 8px;
+    }
+
+    .date {
+        display: none;
+    }
+}

package/dist/components/Tabs/Tabs.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react"),f=require("../../utils/cn/cn.cjs.js"),a=require("../Icon/Icon.cjs.js"),n=require("./tabs.module.css.cjs.js");function m({activeTab:c,tabs:l,onTabClick:r,size:i="sm",activeLinePosition:d="bottom",inverted:o},u){return s.jsx("div",{ref:u,className:n.default.container,children:l.map(e=>s.jsxs("button",{className:f.cn(n.default.tab,n.default[i],{[n.default.inverted]:o,[n.default.activeTab]:c===e.value,[n.default.disabled]:e.disabled,[n.default.brackets]:i!=="sm"&&c===e.value&&l.length>1},n.default[d],e.className),disabled:e.disabled,onClick:()=>r(e.value),children:[e.prefixIcon&&s.jsx("div",{className:n.default.iconWrap,children:s.jsx(a.Icon,{name:e.prefixIcon})}),s.jsx("div",{children:e.label}),e.suffixIcon&&s.jsx("div",{className:n.default.iconWrap,children:s.jsx(a.Icon,{name:e.suffixIcon})})]},String(e.value)))})}const x=t.forwardRef(m);exports.Tabs=x;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react"),m=require("../../utils/cn/cn.cjs.js"),n=require("../../src/components/Tabs/tabs.module.css"),r=require("../Icon/Icon.cjs.js");function x({activeTab:c,tabs:i,onTabClick:l,size:o="sm",activeLinePosition:a="bottom",inverted:d},u){return s.jsx("div",{ref:u,className:n.container,children:i.map(e=>s.jsxs("button",{className:m.cn(n.tab,n[o],{[n.inverted]:d,[n.activeTab]:c===e.value,[n.disabled]:e.disabled,[n.brackets]:o!=="sm"&&c===e.value&&i.length>1},n[a],e.className),disabled:e.disabled,onClick:()=>l(e.value),children:[e.prefixIcon&&s.jsx("div",{className:n.iconWrap,children:s.jsx(r.Icon,{name:e.prefixIcon})}),s.jsx("div",{children:e.label}),e.suffixIcon&&s.jsx("div",{className:n.iconWrap,children:s.jsx(r.Icon,{name:e.suffixIcon})})]},String(e.value)))})}const f=t.forwardRef(x);exports.Tabs=f;

package/dist/components/Tabs/Tabs.es.js

@@ -2,8 +2,8 @@
 import { jsx as n, jsxs as f } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
 import { cn as t } from "../../utils/cn/cn.es.js";
+import i from "../../components/Tabs/tabs.module.css";
 import { Icon as c } from "../Icon/Icon.es.js";
-import i from "./tabs.module.css.es.js";
 function u({ activeTab: o, tabs: r, onTabClick: l, size: s = "sm", activeLinePosition: m = "bottom", inverted: d }, a) {
   return /* @__PURE__ */ n("div", { ref: a, className: i.container, children: r.map((e) => /* @__PURE__ */ f(
     "button",

package/dist/components/Tabs/TabsWithFade.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),d=require("../../utils/cn/cn.cjs.js"),f=require("./Tabs.cjs.js"),r=require("./tabs.module.css.cjs.js");function h(a){const n=s.useRef(null),[l,o]=s.useState(!1),[i,u]=s.useState(!1),t=s.useCallback(()=>{const e=n.current;e&&(o(e.scrollLeft>10),u(e.scrollLeft+e.clientWidth<e.scrollWidth-10))},[]);return s.useEffect(()=>{const e=n.current;if(e)return t(),e.addEventListener("scroll",t),window.addEventListener("resize",t),()=>{e.removeEventListener("scroll",t),window.removeEventListener("resize",t)}},[t]),c.jsx("div",{className:d.cn(r.default.tabsWrapper,{[r.default.showFadeLeft]:l,[r.default.showFadeRight]:i}),children:c.jsx("div",{ref:n,className:r.default.tabsTape,children:c.jsx(f.Tabs,{...a})})})}exports.TabsWithFade=h;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),d=require("../../utils/cn/cn.cjs.js"),f=require("./Tabs.cjs.js"),r=require("../../src/components/Tabs/tabs.module.css");function h(i){const n=s.useRef(null),[o,l]=s.useState(!1),[a,u]=s.useState(!1),t=s.useCallback(()=>{const e=n.current;e&&(l(e.scrollLeft>10),u(e.scrollLeft+e.clientWidth<e.scrollWidth-10))},[]);return s.useEffect(()=>{const e=n.current;if(e)return t(),e.addEventListener("scroll",t),window.addEventListener("resize",t),()=>{e.removeEventListener("scroll",t),window.removeEventListener("resize",t)}},[t]),c.jsx("div",{className:d.cn(r.tabsWrapper,{[r.showFadeLeft]:o,[r.showFadeRight]:a}),children:c.jsx("div",{ref:n,className:r.tabsTape,children:c.jsx(f.Tabs,{...i})})})}exports.TabsWithFade=h;

package/dist/components/Tabs/TabsWithFade.es.js

@@ -3,7 +3,7 @@ import { jsx as o } from "react/jsx-runtime";
 import { useRef as d, useState as n, useCallback as h, useEffect as m } from "react";
 import { cn as u } from "../../utils/cn/cn.es.js";
 import { Tabs as p } from "./Tabs.es.js";
-import r from "./tabs.module.css.es.js";
+import r from "../../components/Tabs/tabs.module.css";
 function R(i) {
   const s = d(null), [l, c] = n(!1), [a, f] = n(!1), t = h(() => {
     const e = s.current;