asma-ui-core 3.42.0 → 3.43.0

package/dist/components/miscellaneous/StyledFormControl.js

@@ -1,41 +1,23 @@
-import { cn as C } from "../../helpers/cn.js";
-import { resolveSx as I } from "../../helpers/sx.js";
-import { FormControlContext as S } from "./FormControlContext.js";
-import { useId as y, useMemo as g, useState as n } from "react";
-import { jsx as a } from "react/jsx-runtime";
-var P = ({ children: c, error: e = !1, disabled: o = !1, required: l = !1, size: t = "medium", fullWidth: i, className: d, style: u, sx: x, id: r }) => {
-  const s = y(), [m, p] = n(!1), [f, v] = n(!1), F = g(() => ({
-    focused: m,
-    filled: f,
-    error: e,
-    disabled: o,
-    required: l,
-    size: t,
-    labelId: r ?? s,
-    setFocused: p,
-    setFilled: v
-  }), [
-    m,
-    f,
-    e,
-    o,
-    l,
-    t,
-    r,
-    s
-  ]);
-  return /* @__PURE__ */ a(S.Provider, {
-    value: F,
-    children: /* @__PURE__ */ a("div", {
-      className: C("relative inline-flex flex-col", i && "w-full", d),
-      style: {
-        ...I(x),
-        ...u
-      },
-      children: c
-    })
-  });
-};
+import { FormControl as r } from "@mui/material";
+import { jsx as t } from "react/jsx-runtime";
+var l = (o) => /* @__PURE__ */ t(r, {
+  ...o,
+  sx: {
+    ...o.sx,
+    "& label.MuiInputLabel-shrink": {
+      background: "white !important",
+      color: "var(--colors-delta-800) !important"
+    },
+    "& label.MuiInputLabel-shrink.Mui-focused": {
+      background: "white !important",
+      color: "var(--colors-gama-500) !important"
+    },
+    "& label.MuiInputLabel-shrink.Mui-error.Mui-focused": {
+      background: "white !important",
+      color: "var(--colors-red-500) !important"
+    }
+  }
+});
 export {
-  P as StyledFormControl
+  l as StyledFormControl
 };

package/dist/components/miscellaneous/StyledFormControlLabel.js

@@ -1,29 +1,18 @@
-import { cn as s } from "../../helpers/cn.js";
-import { resolveSx as u } from "../../helpers/sx.js";
-import { cloneElement as v, isValidElement as a } from "react";
-import { jsx as h, jsxs as b } from "react/jsx-runtime";
-var g = {
-  end: "flex-row",
-  start: "flex-row-reverse",
-  top: "flex-col-reverse",
-  bottom: "flex-col"
-}, L = ({ control: e, label: t, checked: n, disabled: o, name: d, value: i, labelPlacement: m = "end", className: c, sx: p, onChange: x }) => {
-  const l = a(e) ? e.props : {}, r = o ?? l.disabled ?? !1, f = a(e) ? v(e, {
-    checked: l.checked ?? n,
-    onChange: l.onChange ?? x,
-    disabled: r,
-    name: l.name ?? d,
-    value: l.value ?? i
-  }) : e;
-  return /* @__PURE__ */ b("label", {
-    className: s("m-0 inline-flex items-center gap-2 align-middle text-delta-800", r ? "cursor-default" : "cursor-pointer", g[m], c),
-    style: u(p),
-    children: [f, t != null && /* @__PURE__ */ h("span", {
-      className: s("text-sm leading-5", r && "text-delta-300"),
-      children: t
-    })]
-  });
-};
+import { FormControlLabel as l } from "@mui/material";
+import { jsx as e } from "react/jsx-runtime";
+var i = ({ sx: o, ...r }) => /* @__PURE__ */ e(l, {
+  ...r,
+  sx: {
+    color: "var(--colors-delta-800)",
+    margin: 0,
+    "& .MuiFormControlLabel-label": {
+      fontSize: "var(--font-size-body-base)",
+      lineHeight: "var(--line-height-body-base)"
+    },
+    "&.Mui-disabled .MuiFormControlLabel-label": { color: "var(--colors-delta-300)" },
+    ...o
+  }
+});
 export {
-  L as StyledFormControlLabel
+  i as StyledFormControlLabel
 };

package/dist/components/miscellaneous/StyledFormGroup.js

@@ -1,18 +1,6 @@
-import { resolveSx as x } from "../../helpers/sx.js";
-import f from "clsx";
-import { jsx as a } from "react/jsx-runtime";
-var v = ({ row: e, className: r, sx: l, style: o, children: s, classes: c, ...m }) => {
-  const t = {
-    ...x(l),
-    ...o
-  };
-  return /* @__PURE__ */ a("div", {
-    className: f("flex flex-wrap", e ? "flex-row" : "flex-col", r),
-    style: t,
-    ...m,
-    children: s
-  });
-};
+import { FormGroup as o } from "@mui/material";
+import { jsx as m } from "react/jsx-runtime";
+var e = (r) => /* @__PURE__ */ m(o, { ...r });
 export {
-  v as StyledFormGroup
+  e as StyledFormGroup
 };

package/dist/components/miscellaneous/StyledFormHelperText.js

@@ -1,14 +1,6 @@
-import { cn as i } from "../../helpers/cn.js";
-import { useFormControlContext as n } from "./FormControlContext.js";
-import { jsx as x } from "react/jsx-runtime";
-var f = ({ children: t, error: e, disabled: o, className: s, ...m }) => {
-  const r = n(), a = e ?? r?.error ?? !1, l = o ?? r?.disabled ?? !1;
-  return /* @__PURE__ */ x("p", {
-    className: i("m-0 min-h-6 text-sm leading-6", a ? "text-error-500" : l ? "text-gray-300" : "text-delta-600", s),
-    ...m,
-    children: t
-  });
-};
+import { FormHelperText as e } from "@mui/material";
+import { jsx as o } from "react/jsx-runtime";
+var p = (r) => /* @__PURE__ */ o(e, { ...r });
 export {
-  f as StyledFormHelperText
+  p as StyledFormHelperText
 };

package/dist/components/miscellaneous/StyledInputLabel.js

@@ -1,22 +1,6 @@
-import { cn as m } from "../../helpers/cn.js";
-import { floatingLabelClass as u } from "../inputs/field-styles.js";
-import { useFormControlContext as b } from "./FormControlContext.js";
-import { jsxs as p } from "react/jsx-runtime";
-var q = ({ children: r, htmlFor: o, id: s, required: l, disabled: i, error: t, size: d, shrink: a, className: n }) => {
-  const e = b(), f = a ?? (e ? e.focused || e.filled : !1), c = l ?? e?.required ?? !1;
-  return /* @__PURE__ */ p("label", {
-    htmlFor: o,
-    id: s ?? e?.labelId,
-    className: m(u({
-      shrink: f,
-      focused: e?.focused,
-      error: t ?? e?.error,
-      disabled: i ?? e?.disabled,
-      size: d ?? e?.size
-    }), n),
-    children: [r, c && " *"]
-  });
-};
+import { InputLabel as t } from "@mui/material";
+import { jsx as o } from "react/jsx-runtime";
+var m = (r) => /* @__PURE__ */ o(t, { ...r });
 export {
-  q as StyledInputLabel
+  m as StyledInputLabel
 };

package/dist/components/navigation/drawer/StyledDrawer.js

@@ -1,44 +1,6 @@
-import { cn as s } from "../../../helpers/cn.js";
-import { resolveSx as n } from "../../../helpers/sx.js";
-import { useEffect as v } from "react";
-import { jsx as f, jsxs as x } from "react/jsx-runtime";
-import { FloatingPortal as p } from "@floating-ui/react";
-var w = {
-  left: "inset-y-0 left-0 h-full",
-  right: "inset-y-0 right-0 h-full",
-  top: "inset-x-0 top-0 w-full",
-  bottom: "inset-x-0 bottom-0 w-full"
-}, g = {
-  left: "-translate-x-full",
-  right: "translate-x-full",
-  top: "-translate-y-full",
-  bottom: "translate-y-full"
-}, D = ({ open: t = !1, onClose: l, anchor: o = "left", variant: m = "temporary", hideBackdrop: d, className: u, sx: c, PaperProps: a, children: y }) => {
-  const e = m === "temporary";
-  return v(() => {
-    if (!t || !e) return;
-    const r = (i) => {
-      i.key === "Escape" && l?.(i, "escapeKeyDown");
-    };
-    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [
-    t,
-    e,
-    l
-  ]), /* @__PURE__ */ x(p, { children: [e && !d && t && /* @__PURE__ */ f("div", {
-    className: "fixed inset-0 z-[1200] bg-black/50",
-    onClick: (r) => l?.(r, "backdropClick")
-  }), /* @__PURE__ */ f("div", {
-    role: e ? "dialog" : void 0,
-    "aria-hidden": !t,
-    className: s("fixed z-[1200] overflow-auto bg-white shadow-lg transition-transform duration-300", w[o], !t && s(g[o], "pointer-events-none"), u, a?.className),
-    style: {
-      ...n(c),
-      ...n(a?.sx)
-    },
-    children: y
-  })] });
-};
+import { Drawer as o } from "@mui/material";
+import { jsx as e } from "react/jsx-runtime";
+var a = (r) => /* @__PURE__ */ e(o, { ...r });
 export {
-  D as StyledDrawer
+  a as StyledDrawer
 };

package/dist/components/navigation/listbox/Listbox.js

@@ -1,13 +1,13 @@
-import { ClickAwayListener as p } from "../../mui-compat/ClickAwayListener.js";
-import { createContext as x, useContext as d, useEffect as b, useMemo as v, useState as m } from "react";
+import { createContext as p, useContext as x, useEffect as d, useMemo as b, useState as v } from "react";
+import { ClickAwayListener as m } from "@mui/material";
 import { jsx as s } from "react/jsx-runtime";
-var a = x(null), l = () => {
-  const t = d(a);
+var a = p(null), l = () => {
+  const t = x(a);
   if (!t) throw new Error("Listbox.Button/Options/Option must be rendered inside <Listbox>");
   return t;
 }, f = (t, e) => typeof t == "function" ? t(e) : t;
 function L({ value: t, onChange: e, children: r }) {
-  const [o, n] = m(!1), u = v(() => ({
+  const [o, n] = v(!1), u = b(() => ({
     open: o,
     select: (i) => {
       e(i), n(!1);
@@ -19,7 +19,7 @@ function L({ value: t, onChange: e, children: r }) {
     t,
     e
   ]);
-  return b(() => {
+  return d(() => {
     if (!o) return;
     const i = (c) => {
       c.key === "Escape" && n(!1);
@@ -27,7 +27,7 @@ function L({ value: t, onChange: e, children: r }) {
     return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
   }, [o]), /* @__PURE__ */ s(a.Provider, {
     value: u,
-    children: /* @__PURE__ */ s(p, {
+    children: /* @__PURE__ */ s(m, {
       onClickAway: () => n(!1),
       children: /* @__PURE__ */ s("div", {
         className: "relative w-full",

package/dist/components/navigation/menu/StyledMenu.js

@@ -1,31 +1,14 @@
-import { cn as y } from "../../../helpers/cn.js";
-import { StyledPopover as S } from "../../utils/popover/StyledPopover.js";
-import { StyledMenuList as f } from "./StyledMenuList.js";
-import { jsx as p } from "react/jsx-runtime";
-var u = {
-  border: "1px solid var(--colors-delta-300)",
-  boxShadow: "0px 2px 4px 0px rgba(34, 33, 51, 0.15)"
-}, M = ({ open: a, anchorEl: o, onClose: t, anchorOrigin: l, transformOrigin: m, id: d, className: s, sx: x, classes: e, slotProps: r, autoFocus: i = !0, onClick: c, children: n }) => /* @__PURE__ */ p(S, {
-  open: a,
-  anchorEl: o,
-  onClose: t,
-  anchorOrigin: l,
-  transformOrigin: m,
-  id: d,
-  className: s,
-  sx: x,
-  slotProps: { paper: {
-    className: y("rounded", e?.paper, r?.paper?.className),
-    sx: [u, r?.paper?.sx],
-    style: r?.paper?.style
-  } },
-  children: /* @__PURE__ */ p(f, {
-    autoFocus: i,
-    className: e?.list,
-    onClick: c,
-    children: n
-  })
+import e from "clsx";
+import { Menu as r } from "@mui/material";
+import { jsx as a } from "react/jsx-runtime";
+var d = (s) => /* @__PURE__ */ a(r, {
+  ...s,
+  classes: {
+    paper: e("border border-solid border-delta-300 shadow-[0px_2px_4px_0px_rgba(34,_33,_51,_0.15)]", s.classes?.paper),
+    list: e("py-1", s.classes?.list),
+    ...s.classes
+  }
 });
 export {
-  M as StyledMenu
+  d as StyledMenu
 };

package/dist/components/navigation/menu/StyledMenuItem.js

@@ -1,20 +1,23 @@
-import { cn as a } from "../../../helpers/cn.js";
-import { resolveSx as s } from "../../../helpers/sx.js";
-import { jsx as y } from "react/jsx-runtime";
-var D = ({ children: n, onClick: o, disabled: e, selected: l, dense: i, className: m, classes: r, sx: d, "data-test": u, "data-testid": p, value: f }) => /* @__PURE__ */ y("li", {
-  role: "menuitem",
-  "aria-disabled": e ? !0 : void 0,
-  tabIndex: -1,
-  "data-test": u,
-  "data-testid": p,
-  onClick: e ? void 0 : o,
-  onKeyDown: (t) => {
-    e || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o?.(t));
+import o from "clsx";
+import { MenuItem as t } from "@mui/material";
+import { jsx as r } from "react/jsx-runtime";
+var n = (e) => /* @__PURE__ */ r(t, {
+  ...e,
+  classes: {
+    selected: "bg-gama-50",
+    root: o("h-10 pl-4 pr-2 hover:bg-delta-50", e.classes?.root),
+    ...e.classes
   },
-  className: a("flex items-center px-3 outline-none", i ? "py-1.5" : "py-2.5", e ? "cursor-not-allowed" : "cursor-pointer hover:bg-delta-50", l && a("bg-gama-50", r?.selected), r?.root, m),
-  style: s(d),
-  children: n
+  sx: {
+    fontSize: "var(--font-size-body-base)",
+    "&.Mui-disabled": {
+      pointerEvents: "auto",
+      cursor: "not-allowed",
+      "&:hover": { backgroundColor: "transparent !important" }
+    },
+    ...e.sx
+  }
 });
 export {
-  D as StyledMenuItem
+  n as StyledMenuItem
 };

package/dist/components/navigation/menu/StyledMenuList.js

@@ -1,34 +1,6 @@
-import { cn as y } from "../../../helpers/cn.js";
-import { useEffect as p, useRef as w } from "react";
-import { jsx as h } from "react/jsx-runtime";
-var i = (o) => o ? Array.from(o.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) : [], k = ({ children: o, className: s, autoFocus: f, disablePadding: u, onClick: m, onKeyDown: c }) => {
-  const t = w(null);
-  p(() => {
-    f && i(t.current)[0]?.focus();
-  }, [f]);
-  const a = (e) => {
-    if (c?.(e), ![
-      "ArrowDown",
-      "ArrowUp",
-      "Home",
-      "End"
-    ].includes(e.key)) return;
-    e.preventDefault();
-    const r = i(t.current);
-    if (r.length === 0) return;
-    const l = r.findIndex((d) => d === document.activeElement);
-    let n = l;
-    e.key === "ArrowDown" ? n = (l + 1) % r.length : e.key === "ArrowUp" ? n = (l - 1 + r.length) % r.length : e.key === "Home" ? n = 0 : e.key === "End" && (n = r.length - 1), r[n]?.focus();
-  };
-  return /* @__PURE__ */ h("ul", {
-    ref: t,
-    role: "menu",
-    className: y("m-0 list-none outline-none", u ? "py-0" : "py-1", s),
-    onClick: m,
-    onKeyDown: a,
-    children: o
-  });
-};
+import { MenuList as t } from "@mui/material";
+import { jsx as o } from "react/jsx-runtime";
+var m = (r) => /* @__PURE__ */ o(t, { ...r });
 export {
-  k as StyledMenuList
+  m as StyledMenuList
 };

package/dist/components/navigation/tabs/StyledTab.js

@@ -1,27 +1,15 @@
-import { cn as l } from "../../../helpers/cn.js";
-import { resolveSx as p } from "../../../helpers/sx.js";
-import { useTabsContext as f } from "./TabsContext.js";
-import { useCallback as x } from "react";
-import { jsx as u } from "react/jsx-runtime";
-var d = ({ value: n, label: i, disabled: r, className: s, sx: m, index: c }) => {
-  const e = f(), t = n !== void 0 ? n : c, o = e ? e.value === t : !1;
-  return /* @__PURE__ */ u("button", {
-    ref: x((a) => {
-      e?.register(t, a);
-    }, [e, t]),
-    type: "button",
-    role: "tab",
-    "aria-selected": o,
-    "aria-disabled": r ? !0 : void 0,
-    disabled: r,
-    tabIndex: o ? 0 : -1,
-    "data-tab-value": typeof t == "string" || typeof t == "number" ? String(t) : void 0,
-    onClick: (a) => !r && e?.onSelect(a, t),
-    className: l("inline-flex min-h-12 shrink-0 items-center justify-center whitespace-nowrap px-4 py-3 text-sm font-medium normal-case tracking-normal transition-colors", e?.size === "small" && "min-h-9 px-3 py-2", o ? "text-gama-500" : "text-gray-600", r && "text-gray-300", !r && "cursor-pointer hover:text-gama-500", s),
-    style: p(m),
-    children: i
-  });
-};
+import { Tab as o } from "@mui/material";
+import { jsx as a } from "react/jsx-runtime";
+var e = (r) => /* @__PURE__ */ a(o, {
+  ...r,
+  sx: {
+    textTransform: "none",
+    letterSpacing: "normal",
+    "&.MuiTab-textColorPrimary.Mui-selected": { color: "var(--colors-gama-500)" },
+    "&.MuiTab-textColorPrimary": { color: "var(--colors-gray-600)" },
+    "&.MuiTab-textColorPrimary.Mui-disabled": { color: "var(--colors-gray-300)" }
+  }
+});
 export {
-  d as StyledTab
+  e as StyledTab
 };

package/dist/components/navigation/tabs/StyledTabs.js

@@ -1,116 +1,70 @@
-import { cn as d } from "../../../helpers/cn.js";
-import { resolveSx as T } from "../../../helpers/sx.js";
-import { ChevronRightIcon as H } from "../../icons/chevron-right-icon/ChevronRightIcon.js";
-import { ChevronLeftIcon as K } from "../../icons/chevron-left-icon/ChevronLeftIcon.js";
-import { TabsContext as M } from "./TabsContext.js";
-import { Children as P, cloneElement as V, isValidElement as _, useCallback as u, useLayoutEffect as q, useMemo as z, useRef as R, useState as S } from "react";
-import { jsx as o, jsxs as E } from "react/jsx-runtime";
-var I = 120, Z = ({ value: n, onChange: m, variant: b = "standard", scrollButtons: w = "auto", centered: A, size: h = "default", className: N, sx: j, children: g }) => {
-  const i = R(null), a = R(/* @__PURE__ */ new Map()), [x, W] = S({
-    left: 0,
-    width: 0
-  }), [c, B] = S({
-    left: !1,
-    right: !1
-  }), y = b === "scrollable", p = u((e, t) => {
-    t ? a.current.set(e, t) : a.current.delete(e);
-  }, []), v = u((e, t) => m?.(e, t), [m]), f = u(() => {
-    const e = a.current.get(n), t = i.current;
-    if (e && W({
-      left: e.offsetLeft,
-      width: e.offsetWidth
-    }), t) {
-      const { scrollLeft: l, scrollWidth: r, clientWidth: s } = t;
-      B({
-        left: l > 1,
-        right: l + s < r - 1
-      });
-    }
-  }, [n]);
-  q(() => {
-    f();
-    const e = i.current;
-    if (!e) return;
-    const t = new ResizeObserver(f);
-    return t.observe(e), () => t.disconnect();
-  }, [f, g]);
-  const k = (e) => {
-    i.current?.scrollBy({
-      left: e,
-      behavior: "smooth"
-    });
-  }, D = (e) => {
-    if (![
-      "ArrowRight",
-      "ArrowLeft",
-      "Home",
-      "End"
-    ].includes(e.key)) return;
-    e.preventDefault();
-    const t = Array.from(a.current.values()).filter((s) => !s.disabled);
-    if (t.length === 0) return;
-    const l = t.findIndex((s) => s === document.activeElement);
-    let r = l;
-    e.key === "ArrowRight" ? r = (l + 1) % t.length : e.key === "ArrowLeft" ? r = (l - 1 + t.length) % t.length : e.key === "Home" ? r = 0 : e.key === "End" && (r = t.length - 1), t[r]?.focus();
-  }, C = y && w !== !1 && (w === !0 || c.left || c.right), O = z(() => ({
-    value: n,
-    size: h,
-    onSelect: v,
-    register: p
-  }), [
-    n,
-    h,
-    v,
-    p
-  ]), L = "flex h-10 w-10 shrink-0 items-center justify-center self-center rounded-[10%] border border-delta-500 text-delta-700 transition-colors hover:bg-gama-50 disabled:invisible";
-  return /* @__PURE__ */ o(M.Provider, {
-    value: O,
-    children: /* @__PURE__ */ E("div", {
-      className: d("relative flex items-center rounded-t-lg bg-white px-4", N),
-      style: T(j),
-      children: [
-        C && /* @__PURE__ */ o("button", {
-          type: "button",
-          "aria-label": "scroll tabs left",
-          className: d(L, "mr-2"),
-          disabled: !c.left,
-          onClick: () => k(-I),
-          children: /* @__PURE__ */ o(K, {
-            width: 24,
-            height: 24
-          })
-        }),
-        /* @__PURE__ */ E("div", {
-          ref: i,
-          role: "tablist",
-          "aria-orientation": "horizontal",
-          onKeyDown: D,
-          onScroll: f,
-          className: d("relative flex border-b border-delta-200 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", y ? "flex-1 overflow-x-auto" : "w-full", b === "fullWidth" && "[&>*]:flex-1", A && "justify-center", h === "small" && "min-h-9"),
-          children: [P.map(g, (e, t) => _(e) ? V(e, { index: t }) : e), /* @__PURE__ */ o("span", {
-            "aria-hidden": !0,
-            className: "absolute bottom-0 h-0.5 bg-gama-500 transition-all duration-300",
-            style: {
-              left: x.left,
-              width: x.width
-            }
-          })]
-        }),
-        C && /* @__PURE__ */ o("button", {
-          type: "button",
-          "aria-label": "scroll tabs right",
-          className: d(L, "ml-2"),
-          disabled: !c.right,
-          onClick: () => k(I),
-          children: /* @__PURE__ */ o(H, {
-            width: 24,
-            height: 24
-          })
-        })
-      ]
-    })
+import { cn as s } from "../../../helpers/cn.js";
+import { Tabs as e } from "@mui/material";
+import { jsx as l } from "react/jsx-runtime";
+function n(o) {
+  return Array.isArray(o);
+}
+function d(o) {
+  return o != null && !Array.isArray(o);
+}
+var c = {
+  "& .MuiTab-root": { fontSize: "var(--font-size-body-lg)" },
+  "& .MuiTabs-scroller": { borderBottom: "1px solid var(--colors-delta-200)" },
+  "& .MuiTabs-scrollButtons": {
+    border: "1px solid var(--colors-delta-500)",
+    width: 40,
+    height: 40,
+    borderRadius: "10%",
+    display: "none",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "center",
+    "& svg": {
+      fontSize: 24,
+      color: "var(--colors-delta-700)"
+    },
+    "&:hover": { backgroundColor: "var(--colors-gama-50)" },
+    "&:first-of-type": { marginRight: "8px" },
+    "&:last-of-type": { marginLeft: "8px" },
+    transition: "opacity 0.3s ease, transform 0.3s ease",
+    opacity: 0,
+    transform: "scale(0)"
+  },
+  "& .MuiTabs-scrollButtons.Mui-disabled": { display: "none" },
+  "& .MuiTabs-scrollButtons:not(.Mui-disabled)": {
+    display: "flex",
+    opacity: 1,
+    transform: "scale(1)"
+  }
+}, p = {
+  minHeight: 36,
+  "& .MuiTab-root": {
+    fontSize: "var(--font-size-body-base)",
+    height: 36,
+    minHeight: 36,
+    paddingLeft: "12px",
+    paddingRight: "12px",
+    paddingTop: "8px",
+    paddingBottom: "8px"
+  }
+}, m = ({ className: o, size: i = "default", sx: r, ...a }) => {
+  const t = [c];
+  return i === "small" && t.push(p), n(r) ? t.push(...r) : d(r) && t.push(r), /* @__PURE__ */ l(e, {
+    ...a,
+    className: s("relative rounded-t-lg bg-white px-4", o),
+    slotProps: {
+      ...a.slotProps,
+      indicator: {
+        style: {
+          background: "var(--colors-gama-500)",
+          color: "var(--colors-gama-500)"
+        },
+        ...a.slotProps?.indicator ?? {}
+      }
+    },
+    sx: t
   });
 };
 export {
-  Z as StyledTabs
+  m as StyledTabs
 };