@fluidattacks/design 3.1.12 → 3.1.13

package/dist/components/slide-out-menu/menu-item/index.js

@@ -1,14 +1,66 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { useTheme as m } from "styled-components";
-import { Container as i } from "../../container/index.js";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useTheme as c } from "styled-components";
+import { Container as t } from "../../container/index.js";
 import { Icon as d } from "../../icon/index.js";
 import { PremiumFeature as g } from "../../premium-feature/index.js";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import { Text as o } from "../../typography/text/index.js";
-const j = ({ customBadge: a, description: l, icon: s, onClick: n, requiresUpgrade: p = !1, title: c }) => {
-  const e = m();
-  return t(i, { bgColor: e.palette.white, bgColorHover: e.palette.gray[100], cursor: "pointer", display: "flex", gap: 0.5, onClick: n, px: 1.25, py: 1, width: "100%", children: [r(i, { alignItems: "center", bgColor: e.palette.gray[300], borderRadius: e.spacing[0.25], display: "flex", height: "24px", justify: "center", width: "24px", children: r(d, { icon: s, iconColor: e.palette.gray[800], iconSize: "xxs", ml: 0.5, mr: 0.5 }) }), t(i, { children: [t(i, { alignItems: "center", display: "inline-flex", gap: 0.5, children: [r(o, { color: e.palette.gray[800], size: "sm", children: c }), p ? r(g, { text: "Upgrade" }) : void 0, a] }), r(o, { color: e.palette.gray[400], size: "xs", children: l })] })] });
+const j = ({
+  customBadge: l = void 0,
+  description: n,
+  icon: p,
+  onClick: a,
+  requiresUpgrade: m = !1,
+  title: s
+}) => {
+  const e = c();
+  return /* @__PURE__ */ i(
+    t,
+    {
+      bgColor: e.palette.white,
+      bgColorHover: e.palette.gray[100],
+      cursor: "pointer",
+      display: "flex",
+      gap: 0.5,
+      onClick: a,
+      px: 1.25,
+      py: 1,
+      width: "100%",
+      children: [
+        /* @__PURE__ */ r(
+          t,
+          {
+            alignItems: "center",
+            bgColor: e.palette.gray[300],
+            borderRadius: e.spacing[0.25],
+            display: "flex",
+            height: "24px",
+            justify: "center",
+            width: "24px",
+            children: /* @__PURE__ */ r(
+              d,
+              {
+                icon: p,
+                iconColor: e.palette.gray[800],
+                iconSize: "xxs",
+                ml: 0.5,
+                mr: 0.5
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ i(t, { children: [
+          /* @__PURE__ */ i(t, { alignItems: "center", display: "inline-flex", gap: 0.5, children: [
+            /* @__PURE__ */ r(o, { color: e.palette.gray[800], size: "sm", children: s }),
+            m ? /* @__PURE__ */ r(g, { text: "Upgrade" }) : void 0,
+            l
+          ] }),
+          /* @__PURE__ */ r(o, { color: e.palette.gray[400], size: "xs", children: n })
+        ] })
+      ]
+    }
+  );
 };
 export {
   j as MenuItem

package/dist/components/slider/index.js

@@ -1,44 +1,44 @@
-import { jsxs as s, jsx as n } from "react/jsx-runtime";
-import { useRef as u } from "react";
-import { useNumberFormatter as y, useSlider as f } from "react-aria";
-import { useSliderState as x } from "react-stately";
-import { styled as o, useTheme as b } from "styled-components";
-import { Thumb as w } from "./thumb/index.js";
-import { Container as k } from "../container/index.js";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { useRef as $ } from "react";
+import { useNumberFormatter as u, useSlider as y } from "react-aria";
+import { useSliderState as m } from "react-stately";
+import { styled as o, useTheme as f } from "styled-components";
+import { Thumb as b } from "./thumb/index.js";
+import { Container as x } from "../container/index.js";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as j } from "../typography/text/index.js";
-const v = o.div`
-  ${({ theme: e, $min: p, $value: r }) => `
+import { Text as h } from "../typography/text/index.js";
+const w = (r, t) => t >= 50 ? `
+      ${r.palette.gray[200]} 50%,
+      ${r.palette.primary[500]} 50.05%,
+      ${r.palette.primary[500]} ${t}%,
+      ${r.palette.gray[200]} ${t}%
+    ` : `
+      ${r.palette.gray[200]} ${t}%,
+      ${r.palette.primary[500]} ${t}%,
+      ${r.palette.primary[500]} 50%,
+      ${r.palette.gray[200]} 50.05%,
+      ${r.palette.gray[200]} 100%
+    `, k = o.div`
+  ${({ theme: r, $min: t, $value: i }) => `
     align-items: center;
     align-self: stretch;
     display: flex;
     flex-direction: column;
     justify-content: end;
-    gap: ${e.spacing[0.75]};
+    gap: ${r.spacing[0.75]};
     width: 304px;
 
     .track {
       background: linear-gradient(
         to right,
-        ${p >= 0 ? `
-              ${e.palette.primary[500]} ${r}%,
-              ${e.palette.gray[200]} ${r}%
-            ` : ((a, t) => t >= 50 ? `
-      ${a.palette.gray[200]} 50%,
-      ${a.palette.primary[500]} 50.05%,
-      ${a.palette.primary[500]} ${t}%,
-      ${a.palette.gray[200]} ${t}%
-    ` : `
-      ${a.palette.gray[200]} ${t}%,
-      ${a.palette.primary[500]} ${t}%,
-      ${a.palette.primary[500]} 50%,
-      ${a.palette.gray[200]} 50.05%,
-      ${a.palette.gray[200]} 100%
-    `)(e, r)}
+        ${t >= 0 ? `
+              ${r.palette.primary[500]} ${i}%,
+              ${r.palette.gray[200]} ${i}%
+            ` : w(r, i)}
       );
-      border-radius: ${e.spacing[0.125]};
-      height: ${e.spacing[0.25]};
+      border-radius: ${r.spacing[0.125]};
+      height: ${r.spacing[0.25]};
       width: 100%;
     }
 
@@ -47,8 +47,8 @@ const v = o.div`
     }
 
     .thumb {
-      background: ${e.palette.white};
-      border-radius: ${e.spacing[1.25]};
+      background: ${r.palette.white};
+      border-radius: ${r.spacing[1.25]};
       box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
       top: 50%;
       height: 20px;
@@ -56,38 +56,69 @@ const v = o.div`
     }
 
     .thumb.dragging {
-      border: 1px solid ${e.palette.primary[500]};
+      border: 1px solid ${r.palette.primary[500]};
     }
   `}
-`, T = o.div`
-  ${({ theme: e }) => `
+`, S = o.div`
+  ${({ theme: r }) => `
     align-items: center;
     display: flex;
     justify-content: space-between;
-    height: ${e.spacing[0.625]};
+    height: ${r.spacing[0.625]};
     width: 100%;
 
     p {
-      color: ${e.palette.gray[400]};
-      font-family: ${e.typography.type.primary};
-      font-size: ${e.spacing[0.5]};
+      color: ${r.palette.gray[400]};
+      font-family: ${r.typography.type.primary};
+      font-size: ${r.spacing[0.5]};
     }
   `}
-`, S = o.output`
-  ${({ theme: e }) => `
+`, V = o.output`
+  ${({ theme: r }) => `
     align-items: flex-end;
-    border-radius: ${e.spacing[0.5]};
-    border: 1px solid ${e.palette.gray[300]};
-    background: ${e.palette.white};
+    border-radius: ${r.spacing[0.5]};
+    border: 1px solid ${r.palette.gray[300]};
+    background: ${r.palette.white};
     display: flex;
-    gap: ${e.spacing[0.625]};
-    padding: ${e.spacing[0.625]} ${e.spacing[0.75]};
+    gap: ${r.spacing[0.625]};
+    padding: ${r.spacing[0.625]} ${r.spacing[0.75]};
     width: 59px;
   `}
-`, H = (e) => {
-  const p = b(), r = u(null), { minValue: a = 0, maxValue: t = 100 } = e, l = y(), i = x({ ...e, numberFormatter: l }), m = ((d, c, h) => Math.round((h - d) / (c - d) * 100))(a, t, i.getThumbValue(0)), { groupProps: g, trackProps: $ } = f({ ...e, "aria-label": "slider" }, i, r);
-  return s(k, { alignItems: "center", display: "inline-flex", gap: 1.25, children: [s(v, { ...g, $min: a ?? 0, $value: m, className: "slider", children: [n("div", { ...$, className: "track " + (i.isDisabled ? "disabled" : ""), ref: r, children: n(w, { index: 0, state: i, trackRef: r }) }), s(T, { children: [n("p", { children: `${l.format(a)} (Low)` }), a < 0 && n("p", { children: "0" }), n("p", { children: `${l.format(t)} (High)` })] })] }), n(S, { children: n(j, { color: p.palette.gray[800], size: "sm", textAlign: "right", children: i.getThumbValueLabel(0) }) })] });
+`, T = (r, t, i) => Math.round((i - r) / (t - r) * 100), D = (r) => {
+  const t = f(), i = $(null), { minValue: p = 0, maxValue: s = 100 } = r, l = u(), e = m({ ...r, numberFormatter: l }), d = T(p, s, e.getThumbValue(0)), { groupProps: c, trackProps: g } = y(
+    { ...r, "aria-label": "slider" },
+    e,
+    i
+  );
+  return /* @__PURE__ */ n(x, { alignItems: "center", display: "inline-flex", gap: 1.25, children: [
+    /* @__PURE__ */ n(
+      k,
+      {
+        ...c,
+        $min: p ?? 0,
+        $value: d,
+        className: "slider",
+        children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              ...g,
+              className: `track ${e.isDisabled ? "disabled" : ""}`,
+              ref: i,
+              children: /* @__PURE__ */ a(b, { index: 0, state: e, trackRef: i })
+            }
+          ),
+          /* @__PURE__ */ n(S, { children: [
+            /* @__PURE__ */ a("p", { children: `${l.format(p)} (Low)` }),
+            p < 0 && /* @__PURE__ */ a("p", { children: "0" }),
+            /* @__PURE__ */ a("p", { children: `${l.format(s)} (High)` })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ a(V, { children: /* @__PURE__ */ a(h, { color: t.palette.gray[800], size: "sm", textAlign: "right", children: e.getThumbValueLabel(0) }) })
+  ] });
 };
 export {
-  H as Slider
+  D as Slider
 };

package/dist/components/slider/thumb/index.js

@@ -1,10 +1,17 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useRef as u } from "react";
-import { useSliderThumb as o, VisuallyHidden as p } from "react-aria";
-const l = ({ state: i, trackRef: s, index: t }) => {
-  const e = u(null), { thumbProps: n, inputProps: a, isDragging: m } = o({ index: t, trackRef: s, inputRef: e }, i);
-  return r("div", { ...n, className: "thumb " + (m ? "dragging" : ""), children: r(p, { children: r("input", { ref: e, ...a }) }) });
+import { useRef as m } from "react";
+import { useSliderThumb as p, VisuallyHidden as l } from "react-aria";
+const g = ({
+  state: n,
+  trackRef: t,
+  index: e
+}) => {
+  const i = m(null), { thumbProps: o, inputProps: s, isDragging: u } = p(
+    { index: e, trackRef: t, inputRef: i },
+    n
+  );
+  return /* @__PURE__ */ r("div", { ...o, className: `thumb ${u ? "dragging" : ""}`, children: /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r("input", { ref: i, ...s }) }) });
 };
 export {
-  l as Thumb
+  g as Thumb
 };

package/dist/components/step-lapse/index.js

@@ -1,29 +1,33 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { useState as v, useCallback as k } from "react";
-import { styled as o } from "styled-components";
-import { v as w } from "../../utils-CQvBF-wY.mjs";
-import "../../styles-C3cZmKVJ.mjs";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useState as k, useCallback as S } from "react";
+import { styled as e } from "styled-components";
+import { v as w } from "../../utils-V0EumEPM.mjs";
+import "../../styles-CplEd2kw.mjs";
 import { Button as d } from "../button/index.js";
 import { Container as g } from "../container/index.js";
 import { Icon as C } from "../icon/index.js";
 import { Heading as z } from "../typography/heading/index.js";
 import "../typography/span/index.js";
 import "../typography/text/index.js";
-const { getVariant: S } = w((t) => ({ completed: `
+const { getVariant: B } = w(
+  (t) => ({
+    completed: `
       background-color: ${t.palette.primary[500]};
       color: ${t.palette.white};
 
       &::after {
         background-color: ${t.palette.primary[500]};
       }
-    `, current: `
+    `,
+    current: `
       background-color: ${t.palette.primary[500]};
       color: ${t.palette.white};
 
       &::after {
         background-color: ${t.palette.gray[200]};
       }
-    `, disabled: `
+    `,
+    disabled: `
       background-color: ${t.palette.gray[200]};
       outline: 1px solid ${t.palette.gray[400]};
       outline-offset: -1px;
@@ -32,17 +36,19 @@ const { getVariant: S } = w((t) => ({ completed: `
       &::after {
         background-color: ${t.palette.gray[200]};
       }
-    ` })), j = o.div`
+    `
+  })
+), N = e.div`
   ${({ theme: t }) => `
     align-items: stretch;
     background-color: ${t.palette.white};
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding: ${t.spacing[1]} ${t.spacing[1]};
+    padding: ${`${t.spacing[1]} ${t.spacing[1]}`};
     scroll-behavior: unset;
   `}
-`, A = o.div`
+`, j = e.div`
   display: flex;
   flex-direction: row;
   margin-bottom: ${({ theme: t }) => t.spacing[2]};
@@ -50,7 +56,7 @@ const { getVariant: S } = w((t) => ({ completed: `
   &:last-child > div:first-child > span::after {
     display: none;
   }
-`, D = o.div`
+`, A = e.div`
   ${({ theme: t }) => `
     display: inline-flex;
     font-family: ${t.typography.type.primary};
@@ -62,7 +68,7 @@ const { getVariant: S } = w((t) => ({ completed: `
       margin-right: ${t.spacing[0.5]};
     }
   `}
-`, N = o.span`
+`, D = e.span`
   ${({ theme: t, $variant: l }) => `
     border-radius: 6px;
     display: inline-block;
@@ -71,7 +77,7 @@ const { getVariant: S } = w((t) => ({ completed: `
     font-weight: ${t.typography.weight.bold};
     font-family: ${t.typography.type.primary};
     line-height: ${t.spacing[1]};
-    padding: ${t.spacing[0.5]} ${t.spacing[0.5]};
+    padding: ${`${t.spacing[0.5]} ${t.spacing[0.5]}`};
     height: ${t.spacing[2]};
     width: ${t.spacing[2]};
 
@@ -85,17 +91,69 @@ const { getVariant: S } = w((t) => ({ completed: `
       height: calc(100% - ${t.spacing[1]});
     }
 
-    ${S(t, l)}
+    ${B(t, l)}
   `}
-`, G = ({ button: { disabled: t = !1, text: l, type: y = "button", onClick: $ }, steps: h }) => {
-  const [a, f] = v(1), m = k((n, i) => () => {
-    f((p) => p + n), i == null || i();
-  }, []);
-  return e(j, { children: h.map((n, i) => {
-    const { content: p, title: b, nextAction: u, previousAction: x } = n, c = i + 1, s = c < a ? "completed" : c === a ? "current" : "disabled";
-    return r(A, { children: [e(g, { maxWidth: "40px", position: "relative", children: e(N, { $variant: s, children: s === "completed" ? e(C, { icon: "check", iconSize: "xs", iconType: "fa-solid" }) : c }) }), r(g, { ml: 1.5, width: "100%", children: [e(z, { fontWeight: "bold", lineSpacing: 1.25, mb: 1.5, size: "xs", children: b }), s === "current" && r(g, { children: [p, r(D, { children: [a > 1 && e(d, { disabled: n.isDisabledPrevious ?? !1, onClick: m(-1, x), variant: "tertiary", children: "Previous" }), a < h.length ? e(d, { disabled: n.isDisabledNext ?? !1, onClick: m(1, u), variant: "primary", children: "Next step" }) : e(d, { disabled: t, onClick: $, type: y, variant: "primary", children: l })] })] })] })] }, n.title);
+`, J = ({
+  button: { disabled: t = !1, text: l, type: f = "button", onClick: u },
+  steps: y
+}) => {
+  const [n, b] = k(1), $ = S(
+    (r, o) => () => {
+      b((p) => p + r), o == null || o();
+    },
+    []
+  );
+  return /* @__PURE__ */ i(N, { children: y.map((r, o) => {
+    const { content: p, title: x, nextAction: h, previousAction: m } = r, c = o + 1, v = c === n ? "current" : "disabled", s = c < n ? "completed" : v;
+    return /* @__PURE__ */ a(j, { children: [
+      /* @__PURE__ */ i(g, { maxWidth: "40px", position: "relative", children: /* @__PURE__ */ i(D, { $variant: s, children: s === "completed" ? /* @__PURE__ */ i(C, { icon: "check", iconSize: "xs", iconType: "fa-solid" }) : c }) }),
+      /* @__PURE__ */ a(g, { ml: 1.5, width: "100%", children: [
+        /* @__PURE__ */ i(
+          z,
+          {
+            fontWeight: "bold",
+            lineSpacing: 1.25,
+            mb: 1.5,
+            size: "xs",
+            children: x
+          }
+        ),
+        s === "current" && /* @__PURE__ */ a(g, { children: [
+          p,
+          /* @__PURE__ */ a(A, { children: [
+            n > 1 && /* @__PURE__ */ i(
+              d,
+              {
+                disabled: r.isDisabledPrevious ?? !1,
+                onClick: $(-1, m),
+                variant: "tertiary",
+                children: "Previous"
+              }
+            ),
+            n < y.length ? /* @__PURE__ */ i(
+              d,
+              {
+                disabled: r.isDisabledNext ?? !1,
+                onClick: $(1, h),
+                variant: "primary",
+                children: "Next step"
+              }
+            ) : /* @__PURE__ */ i(
+              d,
+              {
+                disabled: t,
+                onClick: u,
+                type: f,
+                variant: "primary",
+                children: l
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }, r.title);
   }) });
 };
 export {
-  G as StepLapse
+  J as StepLapse
 };

package/dist/components/table-button/index.js

@@ -1,21 +1,21 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { styled as m, useTheme as b } from "styled-components";
-import { Container as u } from "../container/index.js";
-import { Icon as g } from "../icon/index.js";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { styled as u, useTheme as g } from "styled-components";
+import { Container as b } from "../container/index.js";
+import { Icon as y } from "../icon/index.js";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as h } from "../typography/text/index.js";
-const y = m.button`
-  ${({ theme: e }) => `
+import { Text as f } from "../typography/text/index.js";
+const x = u.button`
+  ${({ theme: o }) => `
     align-items: center;
-    background-color: ${e.palette.white};
-    border: 1px solid ${e.palette.gray[100]};
-    border-radius: ${e.spacing[0.25]};
-    color: ${e.palette.gray[800]};
+    background-color: ${o.palette.white};
+    border: 1px solid ${o.palette.gray[100]};
+    border-radius: ${o.spacing[0.25]};
+    color: ${o.palette.gray[800]};
     cursor: pointer;
     display: flex;
-    font-size: ${e.typography.text.sm};
-    gap: ${e.spacing[0.25]};
+    font-size: ${o.typography.text.sm};
+    gap: ${o.spacing[0.25]};
     height: 21px;
     width: 21px;
     justify-content: center;
@@ -28,29 +28,70 @@ const y = m.button`
     }
 
     &.success {
-      border-color: ${e.palette.success[500]};
-      color: ${e.palette.success[500]};
+      border-color: ${o.palette.success[500]};
+      color: ${o.palette.success[500]};
 
       &:hover {
-        background-color: ${e.palette.success[200]};
+        background-color: ${o.palette.success[200]};
       }
     }
 
     &:disabled {
       cursor: not-allowed;
-      background: ${e.palette.gray[200]};
-      border-color: ${e.palette.gray[200]};
-      color: ${e.palette.gray[300]};
+      background: ${o.palette.gray[200]};
+      border-color: ${o.palette.gray[200]};
+      color: ${o.palette.gray[300]};
     }
 
     &:hover:not(.success) {
-      background-color: ${e.palette.gray[100]};
+      background-color: ${o.palette.gray[100]};
     }
   `}
-`, x = { add: { icon: "plus" }, approve: { icon: "check" }, disabled: { icon: "ban" }, reject: { icon: "xmark" }, submit: { icon: "arrow-right" }, success: { icon: "check" } }, z = ({ disabled: e = !1, icon: i, id: s, label: n, name: o, onClick: c, type: l = "button", variant: t }) => {
-  const p = b(), d = a(y, { "aria-label": o ?? void 0, className: t, disabled: e, id: s, onClick: c, type: l, children: [r(g, { clickable: !1, icon: i ?? x[t].icon, iconSize: o === void 0 ? "xxs" : "xs", iconType: "fa-light" }), o ?? void 0] });
-  return a(u, { alignItems: "center", display: "flex", children: [d, n && r(h, { color: p.palette.gray[800], ml: 0.5, size: "sm", children: n })] });
+`, $ = {
+  add: { icon: "plus" },
+  approve: { icon: "check" },
+  disabled: { icon: "ban" },
+  reject: { icon: "xmark" },
+  submit: { icon: "arrow-right" },
+  success: { icon: "check" }
+}, v = ({
+  disabled: o = !1,
+  icon: a,
+  id: i,
+  label: e,
+  name: r,
+  onClick: n,
+  type: l = "button",
+  variant: t
+}) => {
+  const p = g(), d = /* @__PURE__ */ c(
+    x,
+    {
+      "aria-label": r ?? void 0,
+      className: t,
+      disabled: o,
+      id: i,
+      onClick: n,
+      type: l,
+      children: [
+        /* @__PURE__ */ s(
+          y,
+          {
+            clickable: !1,
+            icon: a ?? $[t].icon,
+            iconSize: r === void 0 ? "xxs" : "xs",
+            iconType: "fa-light"
+          }
+        ),
+        r ?? void 0
+      ]
+    }
+  );
+  return /* @__PURE__ */ c(b, { alignItems: "center", display: "flex", children: [
+    d,
+    e && /* @__PURE__ */ s(f, { color: p.palette.gray[800], ml: 0.5, size: "sm", children: e })
+  ] });
 };
 export {
-  z as TableButton
+  v as TableButton
 };

package/dist/components/tabs/fixed-tabs/index.js

@@ -1,9 +1,29 @@
 import { jsx as i } from "react/jsx-runtime";
-import { S as r, a } from "../../../styles-BA0WIQL-.mjs";
-import { Heading as c } from "../../typography/heading/index.js";
+import { S as s, a } from "../../../styles-ePGii_9g.mjs";
+import { Heading as d } from "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import "../../typography/text/index.js";
-const b = ({ items: o }) => i(r, { children: o.map(({ isActive: s, label: e, onClick: t }, m) => i(a, { className: s ? "active" : "", onClick: t, type: "button", children: i(c, { color: "inherit", fontWeight: "semibold", size: "sm", sizeSm: "xs", children: e }) }, `${e}-${m}`)) });
+const h = ({ items: t }) => /* @__PURE__ */ i(s, { children: t.map(
+  ({ isActive: r, label: e, onClick: o }, m) => /* @__PURE__ */ i(
+    a,
+    {
+      className: r ? "active" : "",
+      onClick: o,
+      type: "button",
+      children: /* @__PURE__ */ i(
+        d,
+        {
+          color: "inherit",
+          fontWeight: "semibold",
+          size: "sm",
+          sizeSm: "xs",
+          children: e
+        }
+      )
+    },
+    `${e}-${m}`
+  )
+) });
 export {
-  b as FixedTabs
+  h as FixedTabs
 };

package/dist/components/tabs/index.js

@@ -1,14 +1,57 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useTheme as m } from "styled-components";
-import { FixedTabs as u } from "./fixed-tabs/index.js";
-import { Tab as c } from "./tab/index.js";
-import { Container as v } from "../container/index.js";
-const T = ({ items: a, borders: t = !0, box: i = !1 }) => {
-  const o = m();
-  return e(v, { bgColor: o.palette.white, border: i ? "1px solid" : void 0, borderBottom: t ? `1px solid ${o.palette.gray[300]}` : void 0, borderColor: i ? o.palette.gray[200] : void 0, borderRadius: i ? o.spacing[0.25] : void 0, display: "inline-flex", gap: 0.25, padding: i ? [0, 0, 0, 0] : void 0, pl: t ? 1.25 : void 0, pr: t ? 1.25 : void 0, role: "tablist", width: i ? "max-content" : "100%", children: a.map(({ id: r, isActive: l, link: s, label: d, notificationSign: p, onClick: n, tooltip: b }) => e(c, { id: r, isActive: l, label: d, link: s, notificationSign: p, onClick: n, tooltip: b }, r)) });
+import { jsx as d } from "react/jsx-runtime";
+import { useTheme as s } from "styled-components";
+import { FixedTabs as w } from "./fixed-tabs/index.js";
+import { Tab as u } from "./tab/index.js";
+import { Container as g } from "../container/index.js";
+const b = ({
+  items: i,
+  borders: r = !0,
+  box: e = !1
+}) => {
+  const n = s();
+  return /* @__PURE__ */ d(
+    g,
+    {
+      bgColor: n.palette.white,
+      border: e ? "1px solid" : void 0,
+      borderBottom: r ? `1px solid ${n.palette.gray[300]}` : void 0,
+      borderColor: e ? n.palette.gray[200] : void 0,
+      borderRadius: e ? n.spacing[0.25] : void 0,
+      display: "inline-flex",
+      gap: 0.25,
+      padding: e ? [0, 0, 0, 0] : void 0,
+      pl: r ? 1.25 : void 0,
+      pr: r ? 1.25 : void 0,
+      role: "tablist",
+      width: e ? "max-content" : "100%",
+      children: i.map(
+        ({
+          id: t,
+          isActive: o,
+          link: a,
+          label: p,
+          notificationSign: l,
+          onClick: f,
+          tooltip: m
+        }) => /* @__PURE__ */ d(
+          u,
+          {
+            id: t,
+            isActive: o,
+            label: p,
+            link: a,
+            notificationSign: l,
+            onClick: f,
+            tooltip: m
+          },
+          t
+        )
+      )
+    }
+  );
 };
 export {
-  u as FixedTabs,
-  c as Tab,
-  T as Tabs
+  w as FixedTabs,
+  u as Tab,
+  b as Tabs
 };