@mxenabled/mxui 2.14.0 → 2.16.0

package/dist/index.es.js

@@ -1,20 +1,20 @@
 import { jsx as n, jsxs as b } from "react/jsx-runtime";
 import H from "react";
-import A from "@mui/material/Stack";
-import { useTheme as v, createTheme as W } from "@mui/material/styles";
+import S from "@mui/material/Stack";
+import { useTheme as O, createTheme as W } from "@mui/material/styles";
 import { Icon as se, ExpandMore as ce, Close as de } from "@mxenabled/mx-icons";
-import { endOfMonth as G } from "date-fns/endOfMonth";
+import { endOfMonth as V } from "date-fns/endOfMonth";
 import { endOfYear as pe } from "date-fns/endOfYear";
 import { startOfToday as ue } from "date-fns/startOfToday";
-import { startOfMonth as V } from "date-fns/startOfMonth";
+import { startOfMonth as G } from "date-fns/startOfMonth";
 import { startOfYear as K } from "date-fns/startOfYear";
 import { subDays as Y } from "date-fns/subDays";
 import { subMonths as ge } from "date-fns/subMonths";
 import { subYears as he } from "date-fns/subYears";
-import me from "@mui/material/useMediaQuery";
-import { usePickerContext as Z, useIsValidValue as Q, LocalizationProvider as fe, StaticDateRangePicker as be } from "@mui/x-date-pickers-pro";
+import fe from "@mui/material/useMediaQuery";
+import { usePickerContext as Z, useIsValidValue as Q, LocalizationProvider as me, StaticDateRangePicker as be } from "@mui/x-date-pickers-pro";
 import { AdapterDateFns as xe } from "@mui/x-date-pickers-pro/AdapterDateFns";
-import N from "@mui/material/Box";
+import L from "@mui/material/Box";
 import Te from "@mui/material/ToggleButton";
 import Me from "@mui/material/ToggleButtonGroup";
 import Re from "@mui/material/MenuItem";
@@ -27,7 +27,7 @@ import re from "@mui/material/Typography";
 import Ae from "@mui/material/Drawer";
 import Ie from "@mui/material/Snackbar";
 import Oe from "@mui/material/Alert";
-import { FormControlLabel as ve, Box as B, Typography as X, Radio as _, Checkbox as Ee, alpha as m, darken as L, lighten as E, getContrastRatio as ke } from "@mui/material";
+import { FormControlLabel as ve, Box as B, Typography as X, Radio as _, Checkbox as Ee, alpha as f, darken as F, lighten as v, getContrastRatio as ke } from "@mui/material";
 import { circularProgressClasses as Fe } from "@mui/material/CircularProgress";
 import { LicenseInfo as Le } from "@mui/x-license";
 const D = ({
@@ -255,22 +255,22 @@ const te = {
   sx: s = {},
   variant: l = "filled"
 }) => {
-  const e = v(), a = H.useMemo(
-    () => He.find((f) => f.guid === r) ?? te,
+  const e = O(), a = H.useMemo(
+    () => He.find((m) => m.guid === r) ?? te,
     [r]
   ), c = e.palette.categories[a.colorName];
   return /* @__PURE__ */ n(
-    A,
+    S,
     {
       alignItems: "center",
       bgcolor: () => {
-        let f = c;
-        return l === "twotone" && (f = `${f}20`), l === "transparent" || l === "basic" ? "transparent" : f;
+        let m = c;
+        return l === "twotone" && (m = `${m}20`), l === "transparent" || l === "basic" ? "transparent" : m;
       },
       borderRadius: 1,
       color: () => {
-        const f = l === "filled" ? e.palette.common.white : c;
-        return l === "basic" ? e.palette.text.primary : f;
+        const m = l === "filled" ? e.palette.common.white : c;
+        return l === "basic" ? e.palette.text.primary : m;
       },
       height: o,
       justifyContent: "center",
@@ -280,7 +280,7 @@ const te = {
     }
   );
 }, Pe = ({ items: r, selected: i }) => {
-  const o = v(), { setValue: s } = Z(), l = Q(), e = r?.map((a) => {
+  const o = O(), { setValue: s } = Z(), l = Q(), e = r?.map((a) => {
     const c = a.getValue({ isValid: l });
     return {
       label: a.label,
@@ -290,7 +290,7 @@ const te = {
       disabled: !l(c)
     };
   });
-  return /* @__PURE__ */ n(N, { sx: { gridColumn: 1, gridRow: "2/3", ml: "4px", mt: "24px", mr: "32px" }, children: /* @__PURE__ */ n(Me, { color: "primary", orientation: "vertical", value: i, children: e?.map((a) => /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(L, { sx: { gridColumn: 1, gridRow: "2/3", ml: "4px", mt: "24px", mr: "32px" }, children: /* @__PURE__ */ n(Me, { color: "primary", orientation: "vertical", value: i, children: e?.map((a) => /* @__PURE__ */ n(
     Te,
     {
       onClick: a.onClick,
@@ -333,7 +333,7 @@ const te = {
       disabled: !l(c)
     };
   });
-  return /* @__PURE__ */ n(A, { sx: { py: "16px" }, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(S, { sx: { py: "16px" }, children: /* @__PURE__ */ n(
     J,
     {
       defaultValue: i,
@@ -368,7 +368,7 @@ const te = {
         }
       },
       children: [
-        /* @__PURE__ */ b(A, { sx: { gridColumn: 1, gridRow: 1, p: "16px" }, children: [
+        /* @__PURE__ */ b(S, { sx: { gridColumn: 1, gridRow: 1, p: "16px" }, children: [
           s,
           i
         ] }),
@@ -390,16 +390,16 @@ const te = {
   selectedShortcut: s = r.dateRangeThisMonth,
   sx: l = {}
 }) => {
-  const e = v(), a = me(e.breakpoints.down("sm")), c = H.useMemo(() => {
-    const t = ue(), f = ge(t, 1), x = he(t, 1);
+  const e = O(), a = fe(e.breakpoints.down("sm")), c = H.useMemo(() => {
+    const t = ue(), m = ge(t, 1), x = he(t, 1);
     return [
       {
         label: r.dateRangeThisMonth,
-        getValue: () => [V(t), G(t)]
+        getValue: () => [G(t), V(t)]
       },
       {
         label: r.dateRangeLastMonth,
-        getValue: () => [V(f), G(f)]
+        getValue: () => [G(m), V(m)]
       },
       {
         label: r.dateRangeLast30Days,
@@ -422,11 +422,11 @@ const te = {
         getValue: () => [t, t]
       }
     ];
-  }, [r]), d = (t, f) => {
-    const x = f.shortcut;
+  }, [r]), d = (t, m) => {
+    const x = m.shortcut;
     o?.(t, x ? x.label : r.dateRangeCustom);
   };
-  return /* @__PURE__ */ n(A, { gap: a ? 0 : "16px", m: a ? 0 : "8px", children: /* @__PURE__ */ n(fe, { dateAdapter: xe, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(S, { gap: a ? 0 : "16px", m: a ? 0 : "8px", children: /* @__PURE__ */ n(me, { dateAdapter: xe, children: /* @__PURE__ */ n(
     be,
     {
       calendars: 1,
@@ -483,7 +483,7 @@ const te = {
   secondaryColor: a = "primary",
   secondaryText: c = "Cancel"
 }) => /* @__PURE__ */ b(
-  A,
+  S,
   {
     direction: "row",
     gap: "16px",
@@ -511,7 +511,7 @@ const te = {
       )
     ]
   }
-), k = ({
+), E = ({
   bold: r,
   className: i = "",
   children: o,
@@ -542,14 +542,14 @@ const te = {
     ...c,
     children: o
   }
-), $e = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(k, { className: `mx-mxui-text h1 ${r}`, component: "h1", variant: "h1", ...o, children: i }), Nr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(k, { className: `mx-mxui-text h2 ${r}`, component: "h2", variant: "h2", ...o, children: i }), Hr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(k, { className: `mx-mxui-text h3 ${r}`, component: "h3", variant: "h3", ...o, children: i }), Dr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(k, { className: `mx-mxui-text p ${r}`, component: "p", variant: "body1", ...o, children: i }), wr = ({
+), $e = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text h1 ${r}`, component: "h1", variant: "h1", ...o, children: i }), Nr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text h2 ${r}`, component: "h2", variant: "h2", ...o, children: i }), Hr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text h3 ${r}`, component: "h3", variant: "h3", ...o, children: i }), Dr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text p ${r}`, component: "p", variant: "body1", ...o, children: i }), wr = ({
   ariaHidden: r = !1,
   copy: i,
   id: o,
   onClose: s,
   truncate: l = !1
 }) => /* @__PURE__ */ b(
-  A,
+  S,
   {
     sx: {
       alignItems: "center",
@@ -636,8 +636,8 @@ const te = {
   size: s = oe,
   ...l
 }) => {
-  const [e, a] = H.useState(!1), c = v();
-  return /* @__PURE__ */ b(N, { display: "inline-block", position: "relative", ...l, children: [
+  const [e, a] = H.useState(!1), c = O();
+  return /* @__PURE__ */ b(L, { display: "inline-block", position: "relative", ...l, children: [
     o && !e && /* @__PURE__ */ n(
       "img",
       {
@@ -700,9 +700,9 @@ const $r = ({
   showAction: c = !1,
   showClose: d = !1,
   actionText: t = "Undo",
-  onActionClick: f
+  onActionClick: m
 }) => {
-  const x = v(), F = d && /* @__PURE__ */ n(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ n(T, { fill: !0, name: "close" }) }), h = `${e}.main`;
+  const x = O(), k = d && /* @__PURE__ */ n(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ n(T, { fill: !0, name: "close" }) }), h = `${e}.main`;
   return /* @__PURE__ */ n(
     Ie,
     {
@@ -720,7 +720,7 @@ const $r = ({
       children: /* @__PURE__ */ n(
         Oe,
         {
-          action: F,
+          action: k,
           severity: e,
           sx: {
             backgroundColor: h,
@@ -738,7 +738,7 @@ const $r = ({
           },
           variant: "filled",
           children: /* @__PURE__ */ b(
-            A,
+            S,
             {
               sx: {
                 flexDirection: "row",
@@ -751,7 +751,7 @@ const $r = ({
               },
               children: [
                 /* @__PURE__ */ n(
-                  k,
+                  E,
                   {
                     sx: {
                       lineHeight: x.typography.body1.lineHeight,
@@ -766,7 +766,7 @@ const $r = ({
                   $,
                   {
                     color: "inherit",
-                    onClick: f || i,
+                    onClick: m || i,
                     size: "small",
                     sx: {
                       color: x.palette.success.contrastText,
@@ -796,11 +796,11 @@ const $r = ({
   value: c,
   disabled: d = !1,
   error: t = !1,
-  icon: f = !1,
+  icon: m = !1,
   sx: x = {},
-  ...F
+  ...k
 }) => {
-  const h = v(), ie = () => h.palette.background.paper, w = () => t ? `inset 0px 0px 0px 2px ${h.palette.error.main}` : d ? o ? `inset 0px 0px 0px 2px ${h.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${h.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${h.palette.action.disabled}` : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${m(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(h.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${m(h.palette.primary.main, 0.5)}` : h.shadows[1], ae = () => d || t ? h.palette.background.paper : m(h.palette.primary.main, 0.1), ne = () => d || t ? w() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${m(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(h.palette.primary.main, 0.5)}` : w(), le = () => d || t ? h.palette.background.paper : m(h.palette.primary.main, 0.3);
+  const h = O(), ie = () => h.palette.background.paper, w = () => t ? `inset 0px 0px 0px 2px ${h.palette.error.main}` : d ? o ? `inset 0px 0px 0px 2px ${h.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${h.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${h.palette.action.disabled}` : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : h.shadows[1], ae = () => d || t ? h.palette.background.paper : f(h.palette.primary.main, 0.1), ne = () => d || t ? w() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.primary.main, 0.5)}` : w(), le = () => d || t ? h.palette.background.paper : f(h.palette.primary.main, 0.3);
   return /* @__PURE__ */ n(
     ve,
     {
@@ -818,7 +818,7 @@ const $r = ({
               fontSize: "20px"
             }
           },
-          ...F
+          ...k
         }
       ) : /* @__PURE__ */ n(
         Ee,
@@ -833,12 +833,12 @@ const $r = ({
               fontSize: "20px"
             }
           },
-          ...F
+          ...k
         }
       ),
       disabled: d,
       label: /* @__PURE__ */ b(B, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
-        f && /* @__PURE__ */ n(B, { sx: { mr: "12px", mt: "8px", flexShrink: 0 }, children: f }),
+        m && /* @__PURE__ */ n(B, { sx: { mr: "12px", mt: "8px", flexShrink: 0 }, children: m }),
         /* @__PURE__ */ b(B, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
           l && /* @__PURE__ */ n(X, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: l }),
           /* @__PURE__ */ n(X, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: e })
@@ -878,15 +878,15 @@ const $r = ({
       value: c
     }
   );
-}, S = {
+}, N = {
   LIGHT: "light"
 }, Wr = ({ color: r = "neutral", icon: i, label: o, size: s = "small", sx: l, ...e }) => /* @__PURE__ */ b(
-  N,
+  L,
   {
     component: "span",
     sx: [
       (a) => {
-        const c = a.palette.mode === S.LIGHT, d = r === "default" ? "neutral" : r;
+        const c = a.palette.mode === N.LIGHT, d = r === "default" ? "neutral" : r;
         return {
           alignItems: "center",
           borderRadius: 999,
@@ -904,7 +904,7 @@ const $r = ({
     ...e,
     children: [
       i && /* @__PURE__ */ n(
-        N,
+        L,
         {
           "aria-hidden": !0,
           component: "span",
@@ -928,17 +928,17 @@ const $r = ({
     ]
   }
 ), M = (r) => ({
-  50: E(r, 0.95),
-  100: E(r, 0.85),
-  200: E(r, 0.7),
-  300: E(r, 0.55),
-  400: E(r, 0.3),
+  50: v(r, 0.95),
+  100: v(r, 0.85),
+  200: v(r, 0.7),
+  300: v(r, 0.55),
+  400: v(r, 0.3),
   500: r,
-  600: L(r, 0.3),
-  700: L(r, 0.5),
-  800: L(r, 0.65),
-  900: L(r, 0.75)
-}), R = "#FFFFFF", I = "#000000", We = "#F9F9F9", Ge = "#000000", Ve = "#FFFFFF", Ke = "#000000", C = {
+  600: F(r, 0.3),
+  700: F(r, 0.5),
+  800: F(r, 0.65),
+  900: F(r, 0.75)
+}), R = "#FFFFFF", A = "#000000", We = "#F9F9F9", Ve = "#000000", Ge = "#FFFFFF", Ke = "#000000", C = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -954,7 +954,7 @@ const $r = ({
   CHART5: "#60A9FF",
   CHART6: "#C8BAEE",
   CHART7: "#585E67"
-}, O = {
+}, I = {
   CHART_MONO1: "#C3EAFF",
   CHART_MONO2: "#8ED7FF",
   CHART_MONO3: "#60A9FF",
@@ -1008,12 +1008,12 @@ const $r = ({
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
 }, Ye = (r, i) => {
-  const o = M(i?.primary || C.PRIMARY), s = M(i?.secondary || C.SECONDARY), l = M(i?.error || C.ERROR), e = M(i?.warning || C.WARNING), a = M(i?.info || C.INFO), c = M(i?.success || C.SUCCESS), d = M(i?.grey || C.GREY), t = r === S.LIGHT;
+  const o = M(i?.primary || C.PRIMARY), s = M(i?.secondary || C.SECONDARY), l = M(i?.error || C.ERROR), e = M(i?.warning || C.WARNING), a = M(i?.info || C.INFO), c = M(i?.success || C.SUCCESS), d = M(i?.grey || C.GREY), t = r === N.LIGHT;
   return {
     mode: r,
     common: {
       white: R,
-      black: I
+      black: A
     },
     primary: {
       ...o,
@@ -1041,9 +1041,9 @@ const $r = ({
       contrastText: ke(t ? d[700] : d[400], "#fff") > 4.5 ? R : d[900]
     },
     text: {
-      primary: t ? m(I, 0.87) : R,
-      secondary: t ? m(I, 0.6) : m(R, 0.7),
-      disabled: t ? m(I, 0.38) : m(R, 0.38)
+      primary: t ? f(A, 0.87) : R,
+      secondary: t ? f(A, 0.6) : f(R, 0.7),
+      disabled: t ? f(A, 0.38) : f(R, 0.38)
     },
     error: {
       ...l,
@@ -1079,18 +1079,15 @@ const $r = ({
     },
     grey: d,
     action: {
-      active: t ? m(I, 0.56) : m(R, 0.56),
-      hoverOpacity: t ? 0.1 : 0.2,
-      selectedOpacity: t ? 0.16 : 0.25,
-      focusOpacity: 0.3
+      active: t ? f(A, 0.56) : f(R, 0.56)
     },
     background: {
-      default: t ? i?.background?.default?.light || We : i?.background?.default?.dark || Ge,
-      paper: t ? i?.background?.paper?.light || Ve : i?.background?.paper?.dark || Ke,
+      default: t ? i?.background?.default?.light || We : i?.background?.default?.dark || Ve,
+      paper: t ? i?.background?.paper?.light || Ge : i?.background?.paper?.dark || Ke,
       highlight: t ? d[200] : d[600],
       highlightPrimary: t ? o[100] : o[500]
     },
-    divider: t ? m(I, 0.12) : m(R, 0.24),
+    divider: t ? f(A, 0.12) : f(R, 0.24),
     categories: {
       autoTransport: t ? p.AUTO_TRANSPORTT : u.AUTO_TRANSPORTT,
       billsUtilities: t ? p.BILLS_UTILITIES : u.BILLS_UTILITIES,
@@ -1125,12 +1122,12 @@ const $r = ({
       chart7: y.CHART7
     },
     chartMono: {
-      chartMono1: O.CHART_MONO1,
-      chartMono2: O.CHART_MONO2,
-      chartMono3: O.CHART_MONO3,
-      chartMono4: O.CHART_MONO4,
-      chartMono5: O.CHART_MONO5,
-      chartMono6: O.CHART_MONO6
+      chartMono1: I.CHART_MONO1,
+      chartMono2: I.CHART_MONO2,
+      chartMono3: I.CHART_MONO3,
+      chartMono4: I.CHART_MONO4,
+      chartMono5: I.CHART_MONO5,
+      chartMono6: I.CHART_MONO6
     }
   };
 }, z = "Inter, Helvetica, Arial, sans-serif", Xe = (r) => {
@@ -1195,7 +1192,7 @@ const $r = ({
 Le.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
-const Gr = (r, i) => {
+const Vr = (r, i) => {
   const o = Ye(r, i?.paletteOptions), s = Xe(i?.typographyOptions), l = [...W().shadows];
   return l[1] = "0px 2px 8px 0 rgba(0, 0, 0, 0.12)", l[8] = "0px 6px 12px 0 rgba(0, 0, 0, 0.16), 0px 3px 8px 0 rgba(0, 0, 0, 0.06)", l[16] = "0px 12px 20px 0 rgba(0, 0, 0, 0.22)", W({
     breakpoints: i?.breakpoints || {
@@ -1213,7 +1210,8 @@ const Gr = (r, i) => {
     },
     palette: o,
     shape: {
-      borderRadius: i?.shapeOptions?.borderRadius || 4
+      // Always a number, because Card and ListItemButton multiply it
+      borderRadius: Number(i?.shapeOptions?.borderRadius) || 4
     },
     shadows: l,
     ...i?.useMUIStandardSpacing ? {} : { spacing: 1 },
@@ -1233,7 +1231,7 @@ const Gr = (r, i) => {
         styleOverrides: {
           root: ({ theme: e, ownerState: a }) => {
             const c = a.severity || "info";
-            let d = e.palette.mode === S.LIGHT ? e.palette[c]?.[50] : e.palette[c]?.[800];
+            let d = e.palette.mode === N.LIGHT ? e.palette[c]?.[50] : e.palette[c]?.[800];
             if (a.variant === "filled") {
               const t = c === "warning";
               d = e.palette[c]?.[t ? 400 : 600];
@@ -1309,9 +1307,9 @@ const Gr = (r, i) => {
       },
       MuiCard: {
         styleOverrides: {
-          root: {
-            borderRadius: 8
-          }
+          root: ({ theme: e }) => ({
+            borderRadius: e.shape.borderRadius * 2
+          })
         }
       },
       MuiCheckbox: {
@@ -1321,7 +1319,8 @@ const Gr = (r, i) => {
         styleOverrides: {
           root: {
             "&.Mui-focusVisible": {
-              boxShadow: `inset 0 0 0 2px ${o.info.main}`
+              outline: `2px solid ${o.info.main}`,
+              outlineOffset: "-2px"
             }
           }
         }
@@ -1360,15 +1359,15 @@ const Gr = (r, i) => {
                 }
               },
               "&.MuiChip-clickable:hover, &.Mui-focusVisible": {
-                backgroundColor: m(
+                backgroundColor: f(
                   e.palette[c].main,
                   e.palette.action.hoverOpacity
                 )
               },
               "&.MuiChip-clickable:active": {
-                backgroundColor: m(
+                backgroundColor: f(
                   e.palette[c].main,
-                  e.palette.action.focusOpacity
+                  e.palette.action.activatedOpacity
                 )
               }
             };
@@ -1391,7 +1390,7 @@ const Gr = (r, i) => {
           ...["primary", "secondary", "error", "warning", "info", "success", "neutral"].map((e) => ({
             props: { variant: "filled", color: e },
             style: ({ theme: a }) => ({
-              backgroundColor: a.palette[e][a.palette.mode === S.LIGHT ? 100 : 800]
+              backgroundColor: a.palette[e][a.palette.mode === N.LIGHT ? 100 : 800]
             })
           }))
         ]
@@ -1710,9 +1709,9 @@ const Gr = (r, i) => {
             paddingBottom: 12,
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
-              borderRadius: 8,
+              borderRadius: e.shape.borderRadius * 2,
               outline: `2px solid ${e.palette.info.main}`,
-              outlineOffset: -2
+              outlineOffset: "-2px"
             }
           })
         }
@@ -1976,17 +1975,20 @@ const Gr = (r, i) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: {
+          root: ({ theme: e }) => ({
             minHeight: "44px",
             gap: "4px",
             textTransform: "none",
             fontWeight: 600,
             "&.Mui-focusVisible": {
-              outline: "none",
-              boxShadow: `inset 0 0 0 2px ${o.info.main}`,
-              borderRadius: 4
+              borderRadius: e.shape.borderRadius,
+              outline: `2px solid ${e.palette.info.main}`,
+              outlineOffset: "-2px",
+              // The selected-tab underline sits in the same 2px as the bottom of the ring
+              // and paints over it; in forced-colors mode it is the page color and erases it
+              zIndex: 1
             }
-          },
+          }),
           iconWrapper: {
             margin: "0px"
           }
@@ -2033,10 +2035,7 @@ const Gr = (r, i) => {
               outlineOffset: "2px"
             },
             "&:hover": {
-              backgroundColor: m(
-                e.palette.primary.main,
-                o.mode === S.LIGHT ? 0.1 : 0.2
-              ),
+              backgroundColor: f(e.palette.primary.main, e.palette.action.hoverOpacity),
               borderColor: e.palette.primary.main
             },
             "&.Mui-selected": {
@@ -2065,9 +2064,9 @@ const Gr = (r, i) => {
           },
           {
             props: { color: "error" },
-            style: {
+            style: ({ theme: e }) => ({
               "&:hover": {
-                backgroundColor: m(o.error.main, o.mode === S.LIGHT ? 0.1 : 0.2),
+                backgroundColor: f(e.palette.error.main, e.palette.action.hoverOpacity),
                 borderColor: o.error.main
               },
               "&.Mui-selected": {
@@ -2083,15 +2082,15 @@ const Gr = (r, i) => {
                   }
                 }
               }
-            }
+            })
           },
           {
             props: { color: "standard" },
-            style: {
+            style: ({ theme: e }) => ({
               "&:hover": {
-                backgroundColor: m(
-                  o.secondary.main,
-                  o.mode === S.LIGHT ? 0.1 : 0.2
+                backgroundColor: f(
+                  e.palette.secondary.main,
+                  e.palette.action.hoverOpacity
                 ),
                 borderColor: o.secondary.main
               },
@@ -2108,7 +2107,7 @@ const Gr = (r, i) => {
                   }
                 }
               }
-            }
+            })
           }
         ]
       },
@@ -2156,9 +2155,9 @@ export {
   Dr as P,
   Ur as SelectionBox,
   Wr as Tag,
-  k as Text,
+  E as Text,
   zr as TextField,
   $r as Toast,
-  Gr as createMXTheme
+  Vr as createMXTheme
 };
 //# sourceMappingURL=index.es.js.map