asma-ui-core 3.44.0 → 3.45.0

package/dist/components/mui-compat/Paper.js

@@ -0,0 +1,44 @@
+import { resolveSx as l } from "../../helpers/sx.js";
+import d from "clsx";
+import { createElement as m } from "react";
+var n = [
+  "none",
+  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)"
+], u = ({ elevation: p = 1, square: r, variant: x = "elevation", className: a, sx: b, style: g, component: e = "div", children: o, classes: i, ...t }) => {
+  const s = {
+    boxShadow: x === "outlined" ? "none" : n[Math.min(Math.max(p, 0), 24)],
+    ...l(b),
+    ...g
+  };
+  return m(e, {
+    className: d("bg-white text-[rgba(0,0,0,0.87)]", !r && "rounded-[4px]", x === "outlined" && "border border-solid border-[rgba(0,0,0,0.12)]", a),
+    style: s,
+    ...t
+  }, o);
+};
+export {
+  u as Paper
+};

package/dist/components/mui-compat/Popper.js

@@ -0,0 +1,35 @@
+import { useState as P } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { FloatingPortal as y, autoUpdate as E, flip as F, shift as h, useFloating as w, useMergeRefs as M } from "@floating-ui/react";
+var j = ({ open: e = !1, anchorEl: s, id: l, placement: a = "bottom", transition: f, disablePortal: d, className: m, style: c, children: t }) => {
+  const [o, n] = P(!0);
+  e && o && n(!1);
+  const { refs: p, floatingStyles: u, placement: g } = w({
+    open: e,
+    placement: a,
+    whileElementsMounted: E,
+    elements: { reference: s ?? void 0 },
+    middleware: [F({ padding: 8 }), h({ padding: 8 })]
+  }), x = M([p.setFloating]);
+  if (!(e || f && !o)) return null;
+  const v = typeof t == "function" ? t({
+    TransitionProps: {
+      in: e,
+      onExited: () => n(!0)
+    },
+    placement: g
+  }) : t, i = /* @__PURE__ */ r("div", {
+    ref: x,
+    id: l,
+    style: {
+      ...u,
+      ...c
+    },
+    className: m,
+    children: v
+  });
+  return d ? i : /* @__PURE__ */ r(y, { children: i });
+};
+export {
+  j as Popper
+};

package/dist/components/mui-compat/Skeleton.js

@@ -0,0 +1,27 @@
+import { resolveSx as p } from "../../helpers/sx.js";
+import u from "clsx";
+import "react";
+import { jsx as d } from "react/jsx-runtime";
+var i = {
+  text: "rounded-[4px] origin-[0_55%] scale-y-[0.6] my-0",
+  circular: "rounded-full",
+  rectangular: "",
+  rounded: "rounded-[4px]"
+}, b = ({ variant: e = "text", width: o, height: r, animation: t = "pulse", className: l, sx: s, style: a, children: n, classes: x, component: g, ...c }) => {
+  const m = {
+    width: o,
+    height: r ?? (e === "text" ? "auto" : void 0),
+    backgroundColor: "rgba(0,0,0,0.11)",
+    ...p(s),
+    ...a
+  };
+  return /* @__PURE__ */ d("span", {
+    className: u("block", t !== !1 && "animate-pulse", i[e] ?? "", l),
+    style: m,
+    ...c,
+    children: n
+  });
+};
+export {
+  b as Skeleton
+};

package/dist/components/mui-compat/Stack.js

@@ -0,0 +1,24 @@
+import { resolveSx as c } from "../../helpers/sx.js";
+import n from "clsx";
+import { Children as p, Fragment as u, createElement as i, isValidElement as w } from "react";
+import { jsxs as y } from "react/jsx-runtime";
+var S = {
+  row: "flex-row",
+  "row-reverse": "flex-row-reverse",
+  column: "flex-col",
+  "column-reverse": "flex-col-reverse"
+}, C = (l, e) => p.toArray(l).map((r, o) => /* @__PURE__ */ y(u, { children: [o > 0 && e, r] }, o)), D = ({ direction: l = "column", spacing: e, divider: r, className: o, sx: s, style: f, component: a = "div", children: t, useFlexGap: E, ...x }) => {
+  const m = typeof e == "number" ? e * 8 : typeof e == "string" ? e : void 0, v = {
+    ...m !== void 0 ? { gap: m } : {},
+    ...c(s),
+    ...f
+  };
+  return i(a, {
+    className: n("flex", S[l] ?? "flex-col", o),
+    style: v,
+    ...x
+  }, r && w(r) ? C(t, r) : t);
+};
+export {
+  D as Stack
+};

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

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

package/dist/components/navigation/link/StyledLink.module.js

@@ -1,9 +1,9 @@
 var l = {
-  "styled-link": "_styled-link_um6g7_1",
-  "styled-link-disabled": "_styled-link-disabled_um6g7_16",
-  "styled-link-xs": "_styled-link-xs_um6g7_32",
-  "styled-link-small": "_styled-link-small_um6g7_37",
-  "styled-link-large": "_styled-link-large_um6g7_42"
+  "styled-link": "_styled-link_f4qlz_1",
+  "styled-link-disabled": "_styled-link-disabled_f4qlz_16",
+  "styled-link-xs": "_styled-link-xs_f4qlz_32",
+  "styled-link-small": "_styled-link-small_f4qlz_37",
+  "styled-link-large": "_styled-link-large_f4qlz_42"
 };
 export {
   l as default

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

@@ -1,13 +1,13 @@
-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 { 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 { jsx as s } from "react/jsx-runtime";
-var a = p(null), l = () => {
-  const t = x(a);
+var a = x(null), l = () => {
+  const t = d(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] = v(!1), u = b(() => ({
+  const [o, n] = m(!1), u = v(() => ({
     open: o,
     select: (i) => {
       e(i), n(!1);
@@ -19,7 +19,7 @@ function L({ value: t, onChange: e, children: r }) {
     t,
     e
   ]);
-  return d(() => {
+  return b(() => {
     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(m, {
+    children: /* @__PURE__ */ s(p, {
       onClickAway: () => n(!1),
       children: /* @__PURE__ */ s("div", {
         className: "relative w-full",

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

@@ -1,14 +1,31 @@
-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
-  }
+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
+  })
 });
 export {
-  d as StyledMenu
+  M as StyledMenu
 };

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

@@ -1,23 +1,25 @@
-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
+import { cn as a } from "../../../helpers/cn.js";
+import { resolveSx as y } from "../../../helpers/sx.js";
+import { jsx as f } from "react/jsx-runtime";
+var b = ({ children: n, onClick: o, onMouseDown: i, onMouseUp: l, disabled: e, selected: m, dense: s, className: u, classes: r, sx: d, "data-test": p, "data-testid": x, value: v }) => /* @__PURE__ */ f("li", {
+  role: "menuitem",
+  "aria-disabled": e ? !0 : void 0,
+  tabIndex: -1,
+  "data-test": p,
+  "data-testid": x,
+  onClick: e ? void 0 : o,
+  onMouseDown: e ? void 0 : i,
+  onMouseUp: e ? void 0 : l,
+  onKeyDown: (t) => {
+    e || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o?.(t));
   },
-  sx: {
-    fontSize: "var(--font-size-body-base)",
-    "&.Mui-disabled": {
-      pointerEvents: "auto",
-      cursor: "not-allowed",
-      "&:hover": { backgroundColor: "transparent !important" }
-    },
-    ...e.sx
-  }
+  className: a("box-border flex items-center px-4 text-base outline-none", s ? "min-h-8 py-1" : "min-h-10 py-2", e ? "cursor-not-allowed text-delta-300" : "cursor-pointer text-delta-700 hover:bg-delta-50", m && a("bg-gama-50", r?.selected), r?.root, u),
+  style: {
+    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+    ...y(d)
+  },
+  children: n
 });
 export {
-  n as StyledMenuItem
+  b as StyledMenuItem
 };

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

@@ -1,6 +1,36 @@
-import { MenuList as t } from "@mui/material";
-import { jsx as o } from "react/jsx-runtime";
-var m = (r) => /* @__PURE__ */ o(t, { ...r });
+import { cn as p } from "../../../helpers/cn.js";
+import { consumerOverrides as w } from "../../../helpers/classOverride.js";
+import { useEffect as g, useRef as h } from "react";
+import { jsx as x } from "react/jsx-runtime";
+var m = (o) => o ? Array.from(o.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) : [], I = ({ children: o, className: i, autoFocus: s, disablePadding: u, onClick: c, onKeyDown: a }) => {
+  const t = h(null), f = w(i, "padding");
+  g(() => {
+    s && m(t.current)[0]?.focus();
+  }, [s]);
+  const d = (e) => {
+    if (a?.(e), ![
+      "ArrowDown",
+      "ArrowUp",
+      "Home",
+      "End"
+    ].includes(e.key)) return;
+    e.preventDefault();
+    const r = m(t.current);
+    if (r.length === 0) return;
+    const l = r.findIndex((y) => y === 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__ */ x("ul", {
+    ref: t,
+    role: "menu",
+    className: p("m-0 list-none outline-none", !f && "px-0", !f && (u ? "py-0" : "py-2"), i),
+    style: { fontFamily: "Roboto, Helvetica, Arial, sans-serif" },
+    onClick: c,
+    onKeyDown: d,
+    children: o
+  });
+};
 export {
-  m as StyledMenuList
+  I as StyledMenuList
 };

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

@@ -1,15 +1,30 @@
-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)" }
-  }
-});
+import { cn as b } from "../../../helpers/cn.js";
+import { resolveSx as f } from "../../../helpers/sx.js";
+import { useTabsContext as u } from "./TabsContext.js";
+import { useCallback as h } from "react";
+import { jsx as d } from "react/jsx-runtime";
+var k = ({ value: a, label: i, disabled: e, className: s, sx: l, index: m }) => {
+  const t = u(), o = a !== void 0 ? a : m, r = t ? t.value === o : !1, c = /\btext-(?:xs|sm|base|lg|xl|\[)/.test(s ?? ""), p = /\bfont-(?:thin|extralight|light|normal|medium|semibold|bold|extrabold|black)\b/.test(s ?? ""), x = /\b(?:uppercase|lowercase|capitalize|normal-case)\b/.test(s ?? "");
+  return /* @__PURE__ */ d("button", {
+    ref: h((n) => {
+      t?.register(o, n);
+    }, [t, o]),
+    type: "button",
+    role: "tab",
+    "aria-selected": r,
+    "aria-disabled": e ? !0 : void 0,
+    disabled: e,
+    tabIndex: r ? 0 : -1,
+    "data-tab-value": typeof o == "string" || typeof o == "number" ? String(o) : void 0,
+    onClick: (n) => !e && t?.onSelect(n, o),
+    className: b("inline-flex min-h-12 min-w-[90px] shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-t-lg border-0 bg-transparent px-4 py-3 tracking-normal outline-none transition-colors", !c && (t?.size === "small" ? "text-base" : "text-lg"), !p && (t?.size === "small" || r || e ? "font-semibold" : "font-medium hover:font-semibold focus-visible:font-semibold"), !x && "normal-case", t?.size === "small" && "min-h-10 px-3 py-2", e ? "text-delta-300" : r ? "text-gama-500" : "text-delta-600", !e && "cursor-pointer", "focus-visible:shadow-[inset_0_0_0_2px_var(--colors-gama-400)]", !e && !r && "hover:shadow-[inset_0_-2px_0_0_var(--colors-delta-300)]", s),
+    style: {
+      fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+      ...f(l)
+    },
+    children: i
+  });
+};
 export {
-  e as StyledTab
+  k as StyledTab
 };

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

@@ -1,70 +1,119 @@
-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
+import { cn as n } 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 { consumerOverrides as M } from "../../../helpers/classOverride.js";
+import { TabsContext as V } from "./TabsContext.js";
+import { Children as _, cloneElement as q, isValidElement as z, useCallback as u, useLayoutEffect as F, useMemo as G, useRef as R, useState as E } from "react";
+import { jsx as l, jsxs as A } from "react/jsx-runtime";
+var I = 120, te = ({ value: i, onChange: m, variant: g = "standard", scrollButtons: w = "auto", centered: j, size: b = "default", className: x, sx: N, children: y }) => {
+  const a = R(null), d = R(/* @__PURE__ */ new Map()), [h, O] = E({
+    left: 0,
+    width: 0,
+    disabled: !1
+  }), [c, W] = E({
+    left: !1,
+    right: !1
+  }), p = g === "scrollable", v = u((e, t) => {
+    t ? d.current.set(e, t) : d.current.delete(e);
+  }, []), k = u((e, t) => m?.(e, t), [m]), f = u(() => {
+    const e = d.current.get(i), t = a.current;
+    if (e && O({
+      left: e.offsetLeft,
+      width: e.offsetWidth,
+      disabled: e.disabled || e.getAttribute("aria-disabled") === "true"
+    }), t) {
+      const { scrollLeft: o, scrollWidth: r, clientWidth: s } = t;
+      W({
+        left: o > 1,
+        right: o + s < r - 1
+      });
+    }
+  }, [i]);
+  F(() => {
+    f();
+    const e = a.current;
+    if (!e) return;
+    const t = new ResizeObserver(f);
+    return t.observe(e), () => t.disconnect();
+  }, [f, y]);
+  const S = (e) => {
+    a.current?.scrollBy({
+      left: e,
+      behavior: "smooth"
+    });
+  }, B = (e) => {
+    if (![
+      "ArrowRight",
+      "ArrowLeft",
+      "Home",
+      "End"
+    ].includes(e.key)) return;
+    e.preventDefault();
+    const t = Array.from(d.current.values()).filter((s) => !s.disabled);
+    if (t.length === 0) return;
+    const o = t.findIndex((s) => s === document.activeElement);
+    let r = o;
+    e.key === "ArrowRight" ? r = (o + 1) % t.length : e.key === "ArrowLeft" ? r = (o - 1 + t.length) % t.length : e.key === "Home" ? r = 0 : e.key === "End" && (r = t.length - 1), t[r]?.focus();
+  }, C = p && w !== !1 && (w === !0 || c.left || c.right), D = M(x, "padding-x"), P = G(() => ({
+    value: i,
+    size: b,
+    onSelect: k,
+    register: v
+  }), [
+    i,
+    b,
+    k,
+    v
+  ]), L = "flex h-10 w-10 shrink-0 items-center justify-center self-center rounded-[10%] border border-solid border-delta-500 text-delta-700 transition-colors hover:bg-gama-50 disabled:invisible";
+  return /* @__PURE__ */ l(V.Provider, {
+    value: P,
+    children: /* @__PURE__ */ A("div", {
+      className: n("relative flex items-center rounded-t-lg bg-white", !D && "px-4", x),
+      style: T(N),
+      children: [
+        C && /* @__PURE__ */ l("button", {
+          type: "button",
+          "aria-label": "scroll tabs left",
+          className: n(L, "mr-2"),
+          disabled: !c.left,
+          onClick: () => S(-I),
+          children: /* @__PURE__ */ l(K, {
+            width: 24,
+            height: 24
+          })
+        }),
+        /* @__PURE__ */ A("div", {
+          ref: a,
+          role: "tablist",
+          "aria-orientation": "horizontal",
+          onKeyDown: B,
+          onScroll: f,
+          className: n("relative flex border-x-0 border-b border-t-0 border-solid border-delta-200 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", p ? "flex-1 overflow-x-auto" : "w-full", g === "fullWidth" && "[&>*]:flex-1", j && "justify-center", b === "small" && "min-h-9"),
+          children: [_.map(y, (e, t) => z(e) ? q(e, { index: t }) : e), /* @__PURE__ */ l("span", {
+            "aria-hidden": !0,
+            className: n("absolute bottom-0 h-0.5 transition-all duration-300", h.disabled ? "bg-delta-300" : "bg-gama-500"),
+            style: {
+              left: h.left,
+              width: h.width
+            }
+          })]
+        }),
+        C && /* @__PURE__ */ l("button", {
+          type: "button",
+          "aria-label": "scroll tabs right",
+          className: n(L, "ml-2"),
+          disabled: !c.right,
+          onClick: () => S(I),
+          children: /* @__PURE__ */ l(H, {
+            width: 24,
+            height: 24
+          })
+        })
+      ]
+    })
   });
 };
 export {
-  m as StyledTabs
+  te as StyledTabs
 };

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

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as e } from "react";
+var o = t(null), a = () => e(o);
+export {
+  o as TabsContext,
+  a as useTabsContext
+};

package/dist/components/utils/accordion/base-ui/AccordionContext.js

@@ -0,0 +1,10 @@
+import { createContext as r, useContext as t } from "react";
+var o = r(null), c = () => {
+  const e = t(o);
+  if (!e) throw new Error("StyledAccordionSummary/Details must be rendered inside StyledAccordion");
+  return e;
+};
+export {
+  o as AccordionContext,
+  c as useAccordionContext
+};