asma-ui-core 3.41.0 → 3.42.1

package/dist/components/inputs/slider/StyledSlider.js

@@ -1,82 +1,56 @@
-import { cn as e } from "../../../helpers/cn.js";
-import { ErrorOutlineIcon as J } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { StyledFormHelperText as Q } from "../../miscellaneous/StyledFormHelperText.js";
-import d from "./StyledSlider.module.js";
-import { jsx as m, jsxs as b } from "react/jsx-runtime";
-var A = (s, a, u) => u === a ? 0 : Math.min(100, Math.max(0, (s - a) / (u - a) * 100)), W = (s) => Array.isArray(s) ? [s[0] ?? 0, s[1] ?? 0] : null, I = ({ dataTest: s, min: a = 0, max: u = 100, step: R = 1, value: U, defaultValue: _, disabled: p, size: q = "medium", orientation: M = "horizontal", marks: T, name: B, className: E, classes: c, slotProps: y, error: v, errorText: F, helperText: L, onChange: K, onChangeCommitted: P }) => {
-  const o = M === "vertical", g = U ?? _ ?? a, n = W(g), f = n !== null, O = (v ?? !1) || !!L, k = v ? F ?? "Required" : L, N = Array.isArray(T) ? T : [], H = f ? Math.min(n[0], n[1]) : a, w = f ? Math.max(n[0], n[1]) : g, j = (t) => f ? t >= H && t <= w : t <= w, x = f ? A(H, a, u) : 0, z = A(w, a, u) - x, G = o ? {
-    bottom: `${x}%`,
-    height: `${z}%`
-  } : {
-    left: `${x}%`,
-    width: `${z}%`
-  }, D = (t) => {
-    const i = A(t, a, u);
-    return o ? { bottom: `${i}%` } : { left: `${i}%` };
-  }, S = (t, i, l, h) => {
-    if (!t) return;
-    if (!f) {
-      t(i, l, 0);
-      return;
+import { ErrorOutlineIcon as c } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledFormHelperText as b } from "../../miscellaneous/StyledFormHelperText.js";
+import e from "clsx";
+import { Slider as n } from "@mui/material";
+import { Fragment as g, jsx as t, jsxs as l } from "react/jsx-runtime";
+var k = ({ dataTest: i, error: a, errorText: d, helperText: o, ...r }) => {
+  const s = (a ?? !1) || (o ?? !1), m = a ? d ?? "Required" : o;
+  return /* @__PURE__ */ l(g, { children: [/* @__PURE__ */ t(n, {
+    ...r,
+    "data-testid": i,
+    slotProps: {
+      ...r.slotProps,
+      thumb: {
+        className: e("h-4 w-4", "before:shadow-none", 'after:h-8 after:w-8 after:content-[""]', r.orientation === "vertical" ? "mb-1 ml-0" : "ml-1", r.disabled ? "bg-delta-200" : "bg-gama-500"),
+        ...r.slotProps?.thumb
+      },
+      rail: {
+        className: "bg-delta-200",
+        ...r.slotProps?.rail
+      },
+      markLabel: {
+        className: e("ml-1 text-sm font-semibold text-delta-600", r.orientation === "vertical" && "mb-1"),
+        ...r.slotProps?.markLabel
+      }
+    },
+    sx: {
+      ...r.sx,
+      "& .MuiSlider-track": {
+        backgroundColor: r.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
+        borderColor: r.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)"
+      },
+      "& .MuiSlider-mark": {
+        backgroundColor: "white",
+        border: "1px solid var(--colors-delta-300)",
+        borderRadius: "50%",
+        height: "8px",
+        width: "8px",
+        "&.MuiSlider-markActive": {
+          backgroundColor: r.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
+          border: "1px solid",
+          borderColor: r.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
+          opacity: 1
+        }
+      }
     }
-    const r = [n?.[0] ?? 0, n?.[1] ?? 0];
-    r[h] = l, h === 0 && r[0] > r[1] && (r[0] = r[1]), h === 1 && r[1] < r[0] && (r[1] = r[0]), t(i, r, h);
-  }, $ = (t, i) => /* @__PURE__ */ m("input", {
-    type: "range",
-    "data-testid": f ? `${s}-thumb-${t}` : s,
-    name: B,
-    min: a,
-    max: u,
-    step: R,
-    value: i,
-    disabled: p,
-    "aria-orientation": M,
-    className: e(d.SliderInput, o ? d.Vertical : d.Horizontal, q === "small" && d.Small, p && d.Disabled, c?.thumb, y?.thumb?.className),
-    onChange: (l) => S(K, l, Number(l.currentTarget.value), t),
-    onPointerUp: (l) => S(P, l, Number(l.currentTarget.value), t),
-    onKeyUp: (l) => S(P, l, Number(l.currentTarget.value), t)
-  }, t);
-  return /* @__PURE__ */ b("div", {
-    className: e("flex", o ? "h-full w-8 flex-col items-center" : "w-full flex-col", c?.root, E),
-    children: [
-      /* @__PURE__ */ b("div", {
-        className: e("relative", o ? "h-full w-8" : "h-4 w-full"),
-        children: [/* @__PURE__ */ b("div", {
-          className: e("absolute", o ? "inset-y-2 left-1/2 w-1 -translate-x-1/2" : "inset-x-2 top-1/2 h-1 -translate-y-1/2"),
-          children: [
-            /* @__PURE__ */ m("div", { className: e("absolute inset-0 rounded-full bg-delta-200", c?.rail, y?.rail?.className) }),
-            /* @__PURE__ */ m("div", {
-              className: e("absolute rounded-full", o ? "left-0 w-full" : "top-0 h-full", p ? "bg-delta-200" : "bg-gama-500", c?.track),
-              style: G
-            }),
-            N.map((t) => {
-              const i = j(t.value);
-              return /* @__PURE__ */ m("span", {
-                className: e("absolute h-2 w-2 -translate-x-1/2 rounded-full border", o ? "left-1/2 translate-y-1/2" : "top-1/2 -translate-y-1/2", i ? e("border-gama-500", p ? "bg-delta-200" : "bg-gama-500", c?.markActive) : e("border-delta-300 bg-white", c?.mark)),
-                style: D(t.value)
-              }, t.value);
-            })
-          ]
-        }), f ? [$(0, n[0]), $(1, n[1])] : $(0, g)]
-      }),
-      N.some((t) => t.label != null) && /* @__PURE__ */ m("div", {
-        className: e("relative", o ? "h-full w-full" : "mt-1 h-5 w-full"),
-        children: N.map((t) => t.label == null ? null : /* @__PURE__ */ m("span", {
-          className: e("absolute -translate-x-1/2 text-sm font-semibold", j(t.value) ? e("text-delta-800", c?.markLabelActive) : "text-delta-600", c?.markLabel, y?.markLabel?.className),
-          style: D(t.value),
-          children: t.label
-        }, t.value))
-      }),
-      O && /* @__PURE__ */ b(Q, {
-        className: e("m-0 flex items-center gap-1 pt-1 text-sm", v ? "text-error-500" : "text-delta-600"),
-        children: [v && /* @__PURE__ */ m(J, {
-          width: 20,
-          height: 20
-        }), k]
-      })
-    ]
-  });
+  }), s && /* @__PURE__ */ l(b, {
+    className: e("m-0 flex items-center gap-1 pt-1 text-sm", a ? "text-error-500" : "text-delta-600"),
+    children: [a && /* @__PURE__ */ t(c, {
+      width: 20,
+      height: 20
+    }), m]
+  })] });
 };
 export {
-  I as StyledSlider
+  k as StyledSlider
 };

package/dist/components/inputs/switch/base-ui/StyledSwitch.js

@@ -1,13 +1,13 @@
-import { cn as x } from "../../../../helpers/cn.js";
 import { getSvgIconStyle as C } from "../../../icons/iconStyle.js";
-import a from "./StyledSwitch.module.js";
-import { forwardRef as S, useState as y } from "react";
-import { jsx as e } from "react/jsx-runtime";
-var N = ({ className: t }) => /* @__PURE__ */ e("svg", {
+import r from "./StyledSwitch.module.js";
+import { forwardRef as y, useState as N } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Switch as d } from "@base-ui/react/switch";
+var b = ({ className: e }) => /* @__PURE__ */ t("svg", {
   viewBox: "0 0 24 24",
-  className: t,
+  className: e,
   fill: "none",
-  children: /* @__PURE__ */ e("rect", {
+  children: /* @__PURE__ */ t("rect", {
     x: "6",
     y: "10.5",
     width: "11",
@@ -15,55 +15,50 @@ var N = ({ className: t }) => /* @__PURE__ */ e("svg", {
     fill: "currentColor",
     rx: "0.75"
   })
-}), I = ({ width: t = 11, height: n = 11, className: i = "", onClick: c, color: r }) => /* @__PURE__ */ e("svg", {
+}), I = ({ width: e = 11, height: o = 11, className: c = "", onClick: n, color: s }) => /* @__PURE__ */ t("svg", {
   xmlns: "http://www.w3.org/2000/svg",
-  width: t,
-  height: n,
+  width: e,
+  height: o,
   viewBox: "0 0 448 512",
-  className: i,
-  onClick: c,
-  style: C(r),
+  className: c,
+  onClick: n,
+  style: C(s),
   "aria-hidden": "true",
   focusable: "false",
-  children: /* @__PURE__ */ e("path", {
+  children: /* @__PURE__ */ t("path", {
     fill: "currentColor",
     d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7L393.4 105.4c12.5-12.5 32.8-12.5 45.2 0"
   })
-}), q = S(({ checked: t, defaultChecked: n = !1, onChange: i, disabled: c, readOnly: r, required: m, id: l, dataTest: f, className: u, ...v }, w) => {
-  const [p, g] = y(n), d = t !== void 0, o = d ? t : p, k = () => {
-    if (r || c) return;
-    const s = !o;
-    d || g(s), i?.({ target: {
-      checked: s,
-      name: l
-    } }, s);
-  }, h = a.iconContent;
-  return /* @__PURE__ */ e("button", {
+}), M = y(({ checked: e, defaultChecked: o = !1, onChange: c, disabled: n, readOnly: s, required: f, id: a, dataTest: u, ...v }, w) => {
+  const [g, p] = N(o), l = e !== void 0, h = l ? e : g, S = (i) => {
+    l || p(i), c?.({ target: {
+      checked: i,
+      name: a
+    } }, i);
+  }, x = l ? { checked: h } : { defaultChecked: o }, m = r.iconContent;
+  return /* @__PURE__ */ t(d.Root, {
     ...v,
+    ...x,
+    nativeButton: !0,
+    render: /* @__PURE__ */ t("button", {}),
     ref: w,
-    type: "button",
-    role: "switch",
-    "aria-checked": o,
-    "aria-readonly": r,
-    "aria-required": m,
-    className: x(a.switch, u),
-    onClick: k,
-    disabled: c,
-    id: l,
-    name: l,
-    "data-testid": f,
-    "data-checked": o ? "" : void 0,
-    "data-unchecked": o ? void 0 : "",
-    "data-disabled": c ? "" : void 0,
-    children: /* @__PURE__ */ e("span", {
-      className: a.thumb,
-      children: /* @__PURE__ */ e("span", {
-        className: a.icon,
-        children: o ? /* @__PURE__ */ e(I, { className: h }) : /* @__PURE__ */ e(N, { className: h })
+    className: r.switch,
+    onCheckedChange: S,
+    disabled: n,
+    readOnly: s,
+    required: f,
+    id: a,
+    name: a,
+    "data-testid": u,
+    children: /* @__PURE__ */ t(d.Thumb, {
+      className: r.thumb,
+      children: /* @__PURE__ */ t("span", {
+        className: r.icon,
+        children: h ? /* @__PURE__ */ t(I, { className: m }) : /* @__PURE__ */ t(b, { className: m })
       })
     })
   });
 });
 export {
-  q as StyledSwitch
+  M as StyledSwitch
 };

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 r } from "@mui/material";
+import { jsx as e } from "react/jsx-runtime";
+var i = ({ sx: o, ...l }) => /* @__PURE__ */ e(r, {
+  ...l,
+  sx: {
+    color: "var(--colors-delta-800)",
+    margin: 0,
+    "& .MuiFormControlLabel-label": {
+      fontSize: "14px",
+      lineHeight: "20px"
+    },
+    "&.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,22 @@
-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 m = (e) => /* @__PURE__ */ r(t, {
+  ...e,
+  classes: {
+    selected: "bg-gama-50",
+    root: o("px-3 py-2.5 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: {
+    "&.Mui-disabled": {
+      pointerEvents: "auto",
+      cursor: "not-allowed",
+      "&:hover": { backgroundColor: "transparent !important" }
+    },
+    ...e.sx
+  }
 });
 export {
-  D as StyledMenuItem
+  m 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
 };