@mxenabled/mxui 1.5.13 → 1.5.15-alpha.al0

package/dist/index.es.js

@@ -17,8 +17,8 @@ import { AdapterDateFns as Ce } from "@mui/x-date-pickers-pro/AdapterDateFnsV3";
 import { MultiInputDateRangeField as xe } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
 import j from "@mui/material/Box";
 import Re from "@mui/material/ToggleButton";
-import Ae from "@mui/material/ToggleButtonGroup";
-import Me from "@mui/material/MenuItem";
+import Me from "@mui/material/ToggleButtonGroup";
+import Ae from "@mui/material/MenuItem";
 import Q from "@mui/material/TextField";
 import { usePickerLayout as Ee, PickersLayoutRoot as Se, PickersLayoutContentWrapper as Ie, pickersLayoutClasses as P } from "@mui/x-date-pickers/PickersLayout";
 import J from "@mui/material/Slide";
@@ -58,7 +58,7 @@ const R = ({
   name: i,
   size: l = 20,
   sx: c,
-  weight: t = 300,
+  weight: r = 300,
   ...n
 }) => /* @__PURE__ */ a(
   se,
@@ -68,7 +68,7 @@ const R = ({
     name: i,
     size: l,
     sx: c,
-    weight: t,
+    weight: r,
     ...n
   }
 ), w0 = ({
@@ -397,10 +397,10 @@ const oe = {
   sx: l = {},
   variant: c = "filled"
 }) => {
-  const t = H(), n = x.useMemo(
+  const r = H(), n = x.useMemo(
     () => Be.find((m) => m.guid === e) ?? oe,
     [e]
-  ), s = t.palette.categories[n.colorName];
+  ), s = r.palette.categories[n.colorName];
   return /* @__PURE__ */ a(
     I,
     {
@@ -411,8 +411,8 @@ const oe = {
       },
       borderRadius: 1,
       color: () => {
-        const m = c === "filled" ? t.palette.common.white : s;
-        return c === "basic" ? t.palette.text.primary : m;
+        const m = c === "filled" ? r.palette.common.white : s;
+        return c === "basic" ? r.palette.text.primary : m;
       },
       height: i,
       justifyContent: "center",
@@ -427,7 +427,7 @@ const oe = {
   isValid: i,
   selected: l
 }) => {
-  const c = H(), t = e?.map((n) => {
+  const c = H(), r = e?.map((n) => {
     const s = n.getValue({ isValid: i });
     return {
       label: n.label,
@@ -437,7 +437,7 @@ const oe = {
       disabled: !i(s)
     };
   });
-  return /* @__PURE__ */ a(j, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Ae, { color: "primary", orientation: "vertical", value: l, children: t?.map((n) => /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(j, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Me, { color: "primary", orientation: "vertical", value: l, children: r?.map((n) => /* @__PURE__ */ a(
     Re,
     {
       onClick: n.onClick,
@@ -472,7 +472,7 @@ const oe = {
   selected: l,
   selectLabel: c
 }) => {
-  const t = e?.map((n) => {
+  const r = e?.map((n) => {
     const s = n.getValue({ isValid: i });
     return {
       label: n.label,
@@ -496,7 +496,7 @@ const oe = {
       sx: { width: "100%" },
       value: l,
       variant: "outlined",
-      children: t?.map((n) => /* @__PURE__ */ a(Me, { onClick: n.onClick, value: n.label, children: n.label }, n.label))
+      children: r?.map((n) => /* @__PURE__ */ a(Ae, { onClick: n.onClick, value: n.label, children: n.label }, n.label))
     }
   ) });
 }, Ue = (e) => {
@@ -535,12 +535,12 @@ const oe = {
   selectedShortcut: l = e.dateRangeThisMonth,
   sx: c = {}
 }) => {
-  const t = H(), n = fe(t.breakpoints.down("sm")), s = x.useMemo(() => {
-    const r = he(), m = ge(r, 1), C = me(r, 1);
+  const r = H(), n = fe(r.breakpoints.down("sm")), s = x.useMemo(() => {
+    const t = he(), m = ge(t, 1), C = me(t, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [Z(r), W(r)]
+        getValue: () => [Z(t), W(t)]
       },
       {
         label: e.dateRangeLastMonth,
@@ -548,15 +548,15 @@ const oe = {
       },
       {
         label: e.dateRangeLast30Days,
-        getValue: () => [Y(r, 30), r]
+        getValue: () => [Y(t, 30), t]
       },
       {
         label: e.dateRangeLast90Days,
-        getValue: () => [Y(r, 90), r]
+        getValue: () => [Y(t, 90), t]
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [K(r), r]
+        getValue: () => [K(t), t]
       },
       {
         label: e.dateRangeLastYear,
@@ -564,12 +564,12 @@ const oe = {
       },
       {
         label: e.dateRangeCustom,
-        getValue: () => [r, r]
+        getValue: () => [t, t]
       }
     ];
-  }, [e]), d = (r, m) => {
+  }, [e]), d = (t, m) => {
     const C = m.shortcut;
-    i?.(r, C ? C.label : e.dateRangeCustom);
+    i?.(t, C ? C.label : e.dateRangeCustom);
   };
   return /* @__PURE__ */ a(I, { gap: n ? 0 : 16, m: n ? 0 : 8, children: /* @__PURE__ */ a(be, { dateAdapter: Ce, children: /* @__PURE__ */ a(
     Te,
@@ -584,6 +584,14 @@ const oe = {
       showDaysOutsideCurrentMonth: !0,
       slotProps: {
         actionBar: { actions: [] },
+        layout: {
+          sx: {
+            "& .MuiPickersLayout-toolbar": {
+              gridColumn: "1/4",
+              gridRow: 1
+            }
+          }
+        },
         shortcuts: {
           items: s
         },
@@ -594,21 +602,21 @@ const oe = {
       slots: {
         ...n && { layout: Ue },
         leftArrowIcon: () => /* @__PURE__ */ a(R, { name: "chevron_left", size: 28 }),
-        shortcuts: (r) => n ? /* @__PURE__ */ a(
+        shortcuts: (t) => n ? /* @__PURE__ */ a(
           $e,
           {
             selectLabel: e.dateRangeSelectARange,
             selected: l,
-            ...r
+            ...t
           }
-        ) : /* @__PURE__ */ a(Ge, { selected: l, ...r }),
+        ) : /* @__PURE__ */ a(Ge, { selected: l, ...t }),
         rightArrowIcon: () => /* @__PURE__ */ a(R, { name: "chevron_right", size: 28 }),
         ...n && {
-          toolbar: (r) => /* @__PURE__ */ a(
+          toolbar: (t) => /* @__PURE__ */ a(
             xe,
             {
               dateSeparator: "",
-              ...r,
+              ...t,
               slotProps: {
                 textField: ({ position: m }) => ({
                   label: m === "start" ? e.dateRangeFrom : e.dateRangeTo
@@ -631,7 +639,7 @@ const oe = {
   onPrimaryAction: i,
   onSecondaryAction: l,
   primaryColor: c = "primary",
-  primaryText: t = "Save",
+  primaryText: r = "Save",
   secondaryColor: n = "primary",
   secondaryText: s = "Cancel"
 }) => /* @__PURE__ */ T(
@@ -658,7 +666,7 @@ const oe = {
           disabled: o,
           onClick: i,
           variant: "contained",
-          children: t
+          children: r
         }
       )
     ]
@@ -669,7 +677,7 @@ const oe = {
   children: i,
   color: l,
   sx: c = {},
-  truncate: t = !0,
+  truncate: r = !0,
   uppercase: n,
   ...s
 }) => {
@@ -714,7 +722,7 @@ const oe = {
         e ? {
           fontWeight: 600
         } : {},
-        t ? {
+        r ? {
           overflow: "hidden",
           textOverflow: "ellipsis",
           whiteSpace: "nowrap"
@@ -728,7 +736,7 @@ const oe = {
       children: i
     }
   );
-}, Ze = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...i, children: o }), oo = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...i, children: o }), to = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...i, children: o }), ro = ({ className: e = "", children: o, truncate: i, ...l }) => /* @__PURE__ */ a(
+}, Ze = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...i, children: o }), oo = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...i, children: o }), ro = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...i, children: o }), to = ({ className: e = "", children: o, truncate: i, ...l }) => /* @__PURE__ */ a(
   k,
   {
     className: `mx-kmui-text p ${e}`,
@@ -759,11 +767,11 @@ const oe = {
   id: i,
   isOpen: l,
   onClose: c,
-  onSave: t,
+  onSave: r,
   primaryText: n,
   secondaryText: s,
   children: d,
-  ...r
+  ...t
 }) => /* @__PURE__ */ T(
   ve,
   {
@@ -773,14 +781,14 @@ const oe = {
     onClose: c,
     open: l,
     variant: "temporary",
-    ...r,
+    ...t,
     children: [
       d,
-      t && /* @__PURE__ */ a(
+      r && /* @__PURE__ */ a(
         We,
         {
           isPrimaryDisabled: o,
-          onPrimaryAction: t,
+          onPrimaryAction: r,
           onSecondaryAction: c,
           primaryText: n,
           secondaryText: s
@@ -788,18 +796,18 @@ const oe = {
       )
     ]
   }
-), te = 32, $ = "https://content.moneydesktop.com/storage/MD_Assets", Ke = `${$}/serenity/default_institution_logo.png`, no = ({
+), re = 32, $ = "https://content.moneydesktop.com/storage/MD_Assets", Ke = `${$}/serenity/default_institution_logo.png`, no = ({
   alt: e,
   institutionGuid: o,
   logoUrl: i,
-  size: l = te,
+  size: l = re,
   ...c
 }) => /* @__PURE__ */ a(
   "img",
   {
     alt: e,
     height: l,
-    onError: (t) => t.target.src = Ke,
+    onError: (r) => r.target.src = Ke,
     src: i || `${$}/Ipad%20Logos/100x100/${o}_100x100.png`,
     style: {
       borderRadius: 4
@@ -811,12 +819,12 @@ const oe = {
   alt: e = "",
   categoryGuid: o,
   merchantGuid: i,
-  size: l = te,
+  size: l = re,
   ...c
 }) => {
-  const [t, n] = x.useState(!1), s = H();
+  const [r, n] = x.useState(!1), s = H();
   return /* @__PURE__ */ T(j, { display: "inline-block", position: "relative", ...c, children: [
-    i && !t && /* @__PURE__ */ a(
+    i && !r && /* @__PURE__ */ a(
       "img",
       {
         alt: e,
@@ -862,14 +870,14 @@ const so = ({
   closeAriaLabel: i,
   message: l,
   autoHideDuration: c = 3e3,
-  severity: t = "success",
+  severity: r = "success",
   snackbarSx: n,
   showAction: s = !1,
   showClose: d = !1,
-  actionText: r = "Undo",
+  actionText: t = "Undo",
   onActionClick: m
 }) => {
-  const C = H(), O = d && /* @__PURE__ */ a(q, { "aria-label": i, color: "inherit", onClick: o, size: "small", children: /* @__PURE__ */ a(R, { fill: !0, name: "close" }) }), g = `${t}.main`;
+  const C = H(), O = d && /* @__PURE__ */ a(q, { "aria-label": i, color: "inherit", onClick: o, size: "small", children: /* @__PURE__ */ a(R, { fill: !0, name: "close" }) }), g = `${r}.main`;
   return /* @__PURE__ */ a(
     He,
     {
@@ -888,7 +896,7 @@ const so = ({
         Le,
         {
           action: O,
-          severity: t,
+          severity: r,
           sx: {
             backgroundColor: g,
             display: "flex",
@@ -943,7 +951,7 @@ const so = ({
                       minWidth: "auto",
                       justifyContent: "flex-start"
                     },
-                    children: r
+                    children: t
                   }
                 )
               ]
@@ -960,7 +968,7 @@ const so = ({
 }, N = {
   LIGHT: "light",
   DARK: "dark"
-}, re = x.createContext(ee), ie = x.createContext(
+}, te = x.createContext(ee), ie = x.createContext(
   G(N.LIGHT, F.REACT_NATIVE)
 ), uo = ({
   children: e,
@@ -968,15 +976,15 @@ const so = ({
   theme: i = N.LIGHT,
   tokenOverrides: l
 }) => {
-  const [c, t] = x.useState(i === N.LIGHT ? ee : Fe), n = x.useMemo(() => ({
+  const [c, r] = x.useState(i === N.LIGHT ? ee : Fe), n = x.useMemo(() => ({
     ...l
   }), [l]);
   return x.useEffect(() => {
     const s = G(i, o, { ...n });
-    t(s);
-  }, [i, o, n]), o === F.REACT ? /* @__PURE__ */ a(re.Provider, { value: c, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(ie.Provider, { value: c, children: e }));
+    r(s);
+  }, [i, o, n]), o === F.REACT ? /* @__PURE__ */ a(te.Provider, { value: c, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(ie.Provider, { value: c, children: e }));
 }, po = (e = F.REACT, o = {}) => {
-  const i = e === F.REACT ? re : ie, l = x.useContext(i);
+  const i = e === F.REACT ? te : ie, l = x.useContext(i);
   return l || G(N.LIGHT, e, { ...o });
 }, ho = ({
   component: e = B,
@@ -984,16 +992,16 @@ const so = ({
   selected: i,
   onChange: l,
   headline: c,
-  message: t,
+  message: r,
   name: n,
   value: s,
   disabled: d = !1,
-  error: r = !1,
+  error: t = !1,
   icon: m = !1,
   sx: C = {},
   ...O
 }) => {
-  const g = H(), ae = () => g.palette.background.paper, w = () => r ? `inset 0px 0px 0px 2px ${g.palette.error.main}` : d ? i ? `inset 0px 0px 0px 2px ${g.palette.action.disabled}` : o === "outlined" ? `inset 0px 0px 0px 1px ${g.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${g.palette.action.disabled}` : o === "outlined" ? i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(g.palette.common.black, 0.23)}` : i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : g.shadows[1], ne = () => d || r ? g.palette.background.paper : b(g.palette.primary.main, 0.1), le = () => d || r ? w() : o === "outlined" ? i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(g.palette.primary.main, 0.5)}` : w(), ce = () => d || r ? g.palette.background.paper : b(g.palette.primary.main, 0.3);
+  const g = H(), ae = () => g.palette.background.paper, w = () => t ? `inset 0px 0px 0px 2px ${g.palette.error.main}` : d ? i ? `inset 0px 0px 0px 2px ${g.palette.action.disabled}` : o === "outlined" ? `inset 0px 0px 0px 1px ${g.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${g.palette.action.disabled}` : o === "outlined" ? i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(g.palette.common.black, 0.23)}` : i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : g.shadows[1], ne = () => d || t ? g.palette.background.paper : b(g.palette.primary.main, 0.1), le = () => d || t ? w() : o === "outlined" ? i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(g.palette.primary.main, 0.5)}` : w(), ce = () => d || t ? g.palette.background.paper : b(g.palette.primary.main, 0.3);
   return /* @__PURE__ */ a(
     ke,
     {
@@ -1034,7 +1042,7 @@ const so = ({
         m && /* @__PURE__ */ a(_, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: m }),
         /* @__PURE__ */ T(_, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
           c && /* @__PURE__ */ a(X, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: c }),
-          /* @__PURE__ */ a(X, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: t })
+          /* @__PURE__ */ a(X, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: r })
         ] })
       ] }),
       labelPlacement: "start",
@@ -1073,7 +1081,7 @@ const so = ({
   );
 }, v = {
   LIGHT: "light"
-}, A = (e) => ({
+}, M = (e) => ({
   50: L(e, 0.95),
   100: L(e, 0.85),
   200: L(e, 0.7),
@@ -1084,7 +1092,7 @@ const so = ({
   700: D(e, 0.5),
   800: D(e, 0.65),
   900: D(e, 0.75)
-}), M = "#FFFFFF", z = "#000000", Xe = "#F9F9F9", je = "#000000", Qe = "#FFFFFF", Je = "#1A1A1A", E = {
+}), A = "#FFFFFF", z = "#000000", Xe = "#F9F9F9", je = "#000000", Qe = "#FFFFFF", Je = "#1A1A1A", E = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -1154,136 +1162,136 @@ const so = ({
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
 }, qe = (e, o) => {
-  const i = A(o?.primary || E.PRIMARY), l = A(o?.secondary || E.SECONDARY), c = A(o?.error || E.ERROR), t = A(o?.warning || E.WARNING), n = A(o?.info || E.INFO), s = A(o?.success || E.SUCCESS), d = A(o?.grey || E.GREY), r = e === v.LIGHT;
+  const i = M(o?.primary || E.PRIMARY), l = M(o?.secondary || E.SECONDARY), c = M(o?.error || E.ERROR), r = M(o?.warning || E.WARNING), n = M(o?.info || E.INFO), s = M(o?.success || E.SUCCESS), d = M(o?.grey || E.GREY), t = e === v.LIGHT;
   return {
     mode: e,
     // DEPRECATED: Use grey instead
     border: {
       /* DEPRECATED: Use light instead */
-      lighter: r ? d[300] : d[700],
-      light: r ? d[300] : d[700],
-      main: r ? d[400] : d[600],
+      lighter: t ? d[300] : d[700],
+      light: t ? d[300] : d[700],
+      main: t ? d[400] : d[600],
       dark: d[500],
       /* DEPRECATED: Use light instead */
       darker: d[500]
     },
     common: {
-      white: M,
+      white: A,
       black: z
     },
     primary: {
       ...i,
       /* DEPRECATED: Use light instead */
-      lighter: r ? i[100] : i[800],
-      light: r ? i[300] : i[600],
-      main: r ? i[500] : i[400],
-      dark: r ? i[700] : i[200],
+      lighter: t ? i[100] : i[800],
+      light: t ? i[300] : i[600],
+      main: t ? i[500] : i[400],
+      dark: t ? i[700] : i[200],
       /* DEPRECATED: Use dark instead */
-      darker: r ? i[900] : i[100]
+      darker: t ? i[900] : i[100]
     },
     secondary: {
       ...l,
       /* DEPRECATED: Use light instead */
-      lighter: r ? l[100] : l[800],
-      light: r ? l[300] : l[600],
-      main: r ? l[500] : l[400],
-      dark: r ? l[700] : l[200],
+      lighter: t ? l[100] : l[800],
+      light: t ? l[300] : l[600],
+      main: t ? l[500] : l[400],
+      dark: t ? l[700] : l[200],
       /* DEPRECATED: Use dark instead */
-      darker: r ? l[900] : l[100]
+      darker: t ? l[900] : l[100]
     },
     neutral: {
       ...d,
       /* DEPRECATED: Use light instead */
-      lighter: r ? d[100] : d[800],
-      light: r ? d[300] : d[600],
-      main: r ? d[500] : d[400],
-      dark: r ? d[700] : d[200],
+      lighter: t ? d[100] : d[800],
+      light: t ? d[300] : d[600],
+      main: t ? d[500] : d[400],
+      dark: t ? d[700] : d[200],
       /* DEPRECATED: Use dark instead */
-      darker: r ? d[900] : d[100],
-      contrastText: De(r ? d[700] : d[400], "#fff") > 4.5 ? M : d[900]
+      darker: t ? d[900] : d[100],
+      contrastText: De(t ? d[700] : d[400], "#fff") > 4.5 ? A : d[900]
     },
     text: {
-      primary: r ? d[900] : M,
-      secondary: r ? d[600] : b(M, 0.7),
-      disabled: r ? d[500] : b(M, 0.38)
+      primary: t ? d[900] : A,
+      secondary: t ? d[600] : b(A, 0.7),
+      disabled: t ? d[500] : b(A, 0.38)
     },
     error: {
       ...c,
       /* DEPRECATED: Use light instead */
-      lighter: r ? c[100] : c[800],
-      light: r ? c[300] : c[600],
-      main: r ? c[500] : c[400],
-      dark: r ? c[700] : c[200],
+      lighter: t ? c[100] : c[800],
+      light: t ? c[300] : c[600],
+      main: t ? c[500] : c[400],
+      dark: t ? c[700] : c[200],
       /* DEPRECATED: Use light instead */
-      darker: r ? c[900] : c[100]
+      darker: t ? c[900] : c[100]
     },
     warning: {
-      ...t,
+      ...r,
       /* DEPRECATED: Use light instead */
-      lighter: r ? t[100] : t[800],
-      light: r ? t[300] : t[600],
-      main: r ? t[500] : t[400],
-      dark: r ? t[700] : t[200],
+      lighter: t ? r[100] : r[800],
+      light: t ? r[300] : r[600],
+      main: t ? r[500] : r[400],
+      dark: t ? r[700] : r[200],
       /* DEPRECATED: Use light instead */
-      darker: r ? t[900] : t[100]
+      darker: t ? r[900] : r[100]
     },
     info: {
       ...n,
       /* DEPRECATED: Use light instead */
-      lighter: r ? n[100] : n[800],
-      light: r ? n[300] : n[600],
-      main: r ? n[500] : n[400],
-      dark: r ? n[700] : n[200],
+      lighter: t ? n[100] : n[800],
+      light: t ? n[300] : n[600],
+      main: t ? n[500] : n[400],
+      dark: t ? n[700] : n[200],
       /* DEPRECATED: Use light instead */
-      darker: r ? n[900] : n[100]
+      darker: t ? n[900] : n[100]
     },
     success: {
       ...s,
       /* DEPRECATED: Use light instead */
-      lighter: r ? s[100] : s[800],
-      light: r ? s[300] : s[600],
-      main: r ? s[500] : s[400],
-      dark: r ? s[700] : s[200],
+      lighter: t ? s[100] : s[800],
+      light: t ? s[300] : s[600],
+      main: t ? s[500] : s[400],
+      dark: t ? s[700] : s[200],
       /* DEPRECATED: Use light instead */
-      darker: r ? s[900] : s[100]
+      darker: t ? s[900] : s[100]
     },
     grey: d,
     action: {
-      active: r ? b(z, 0.56) : b(M, 0.56),
-      hoverOpacity: r ? 0.1 : 0.2,
-      selectedOpacity: r ? 0.16 : 0.25,
+      active: t ? b(z, 0.56) : b(A, 0.56),
+      hoverOpacity: t ? 0.1 : 0.2,
+      selectedOpacity: t ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: r ? o?.background?.default?.light || Xe : o?.background?.default?.dark || je,
-      paper: r ? o?.background?.paper?.light || Qe : o?.background?.paper?.dark || Je,
-      highlight: r ? d[200] : d[600],
-      highlightPrimary: r ? i[100] : i[500]
+      default: t ? o?.background?.default?.light || Xe : o?.background?.default?.dark || je,
+      paper: t ? o?.background?.paper?.light || Qe : o?.background?.paper?.dark || Je,
+      highlight: t ? d[200] : d[600],
+      highlightPrimary: t ? i[100] : i[500]
     },
-    divider: r ? b(z, 0.12) : b(M, 0.24),
+    divider: t ? b(z, 0.12) : b(A, 0.24),
     categories: {
-      autoTransport: r ? u.AUTO_TRANSPORTT : p.AUTO_TRANSPORTT,
-      billsUtilities: r ? u.BILLS_UTILITIES : p.BILLS_UTILITIES,
-      businessServices: r ? u.BUSINESS_SERVICES : p.BUSINESS_SERVICES,
-      education: r ? u.EDUCATION : p.EDUCATION,
-      entertainment: r ? u.ENTERTAINMENT : p.ENTERTAINMENT,
-      feesCharges: r ? u.FEES_CHARGES : p.FEES_CHARGES,
-      financial: r ? u.FINANCIAL : p.FINANCIAL,
-      foodDining: r ? u.FOOD_DINING : p.FOOD_DINING,
-      giftsDonations: r ? u.GIFTS_DONATIONS : p.GIFTS_DONATIONS,
-      healthFitness: r ? u.HEALTH_FITNESS : p.HEALTH_FITNESS,
-      home: r ? u.HOME : p.HOME,
-      income: r ? u.INCOME : p.INCOME,
-      investments: r ? u.INVESTMENTS : p.INVESTMENTS,
-      kids: r ? u.KIDS : p.KIDS,
-      others: r ? u.OTHERS : p.OTHERS,
-      personalCare: r ? u.PERSONAL_CARE : p.PERSONAL_CARE,
-      pets: r ? u.PETS : p.PETS,
-      shopping: r ? u.SHOPPING : p.SHOPPING,
-      taxes: r ? u.TAXES : p.TAXES,
-      transfer: r ? u.TRANSFER : p.TRANSFER,
-      travel: r ? u.TRAVEL : p.TRAVEL,
-      uncategorized: r ? u.UNCATEGORIZED : p.UNCATEGORIZED
+      autoTransport: t ? u.AUTO_TRANSPORTT : p.AUTO_TRANSPORTT,
+      billsUtilities: t ? u.BILLS_UTILITIES : p.BILLS_UTILITIES,
+      businessServices: t ? u.BUSINESS_SERVICES : p.BUSINESS_SERVICES,
+      education: t ? u.EDUCATION : p.EDUCATION,
+      entertainment: t ? u.ENTERTAINMENT : p.ENTERTAINMENT,
+      feesCharges: t ? u.FEES_CHARGES : p.FEES_CHARGES,
+      financial: t ? u.FINANCIAL : p.FINANCIAL,
+      foodDining: t ? u.FOOD_DINING : p.FOOD_DINING,
+      giftsDonations: t ? u.GIFTS_DONATIONS : p.GIFTS_DONATIONS,
+      healthFitness: t ? u.HEALTH_FITNESS : p.HEALTH_FITNESS,
+      home: t ? u.HOME : p.HOME,
+      income: t ? u.INCOME : p.INCOME,
+      investments: t ? u.INVESTMENTS : p.INVESTMENTS,
+      kids: t ? u.KIDS : p.KIDS,
+      others: t ? u.OTHERS : p.OTHERS,
+      personalCare: t ? u.PERSONAL_CARE : p.PERSONAL_CARE,
+      pets: t ? u.PETS : p.PETS,
+      shopping: t ? u.SHOPPING : p.SHOPPING,
+      taxes: t ? u.TAXES : p.TAXES,
+      transfer: t ? u.TRANSFER : p.TRANSFER,
+      travel: t ? u.TRAVEL : p.TRAVEL,
+      uncategorized: t ? u.UNCATEGORIZED : p.UNCATEGORIZED
     },
     chart: {
       chart1: S.CHART1,
@@ -1472,19 +1480,19 @@ const go = (e, o) => {
           variant: "outlined"
         },
         styleOverrides: {
-          root: ({ theme: t, ownerState: n }) => {
+          root: ({ theme: r, ownerState: n }) => {
             const s = n.severity || "info";
-            let d = t.palette.mode === v.LIGHT ? t.palette[s]?.[50] : t.palette[s]?.[800];
+            let d = r.palette.mode === v.LIGHT ? r.palette[s]?.[50] : r.palette[s]?.[800];
             if (n.variant === "filled") {
-              const r = s === "warning";
-              d = t.palette[s]?.[r ? 400 : 600];
+              const t = s === "warning";
+              d = r.palette[s]?.[t ? 400 : 600];
             }
             return {
               backgroundColor: d,
-              borderRadius: t.shape.borderRadius,
+              borderRadius: r.shape.borderRadius,
               "& .MuiAlert-message": {
-                fontSize: t.typography.subtitle1.fontSize,
-                lineHeight: t.typography.subtitle1.lineHeight,
+                fontSize: r.typography.subtitle1.fontSize,
+                lineHeight: r.typography.subtitle1.lineHeight,
                 marginTop: "auto",
                 marginBottom: "auto"
               },
@@ -1510,14 +1518,14 @@ const go = (e, o) => {
           disableElevation: !0
         },
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             fontWeight: 600,
             textTransform: "none",
             "&.Mui-disabled": {
               cursor: "not-allowed"
             },
             "&.Mui-focusVisible": {
-              outline: `2px solid ${t.palette.info.main}`,
+              outline: `2px solid ${r.palette.info.main}`,
               outlineOffset: "2px"
             }
           }),
@@ -1526,6 +1534,14 @@ const go = (e, o) => {
           }
         },
         variants: [
+          {
+            props: { variant: "outlined", color: "error" },
+            style: ({ theme: r }) => ({
+              "&:hover, &:active": {
+                color: r.palette.error.dark
+              }
+            })
+          },
           {
             props: { size: "small" },
             style: {
@@ -1583,22 +1599,22 @@ const go = (e, o) => {
       },
       MuiDataGrid: {
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             border: "none",
             borderRadius: 0,
-            fontSize: t.typography.body2.fontSize,
+            fontSize: r.typography.body2.fontSize,
             "& .MuiDataGrid-cell": {
               display: "flex",
               alignItems: "center",
               borderTop: "1px solid",
-              borderColor: t.palette.background.highlight
+              borderColor: r.palette.background.highlight
             },
             "& .MuiDataGrid-cell:focus": { outline: "unset" },
             "& .MuiDataGrid-iconSeparator": { display: "none" },
             "& .MuiDataGrid-columnHeaders": {
-              backgroundColor: t.palette.background.paper,
+              backgroundColor: r.palette.background.paper,
               borderBottom: "2px solid",
-              borderColor: t.palette.divider
+              borderColor: r.palette.divider
             },
             "& .MuiDataGrid-columnHeaderTitle": {
               fontWeight: 600
@@ -1616,42 +1632,42 @@ const go = (e, o) => {
       },
       MuiDateRangePickerDay: {
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             ":first-of-type": {
-              borderTopLeftRadius: t.shape.borderRadius,
-              borderBottomLeftRadius: t.shape.borderRadius,
+              borderTopLeftRadius: r.shape.borderRadius,
+              borderBottomLeftRadius: r.shape.borderRadius,
               "& .MuiDateRangePickerDay-rangeIntervalDayPreview": {
-                borderTopLeftRadius: t.shape.borderRadius,
-                borderBottomLeftRadius: t.shape.borderRadius
+                borderTopLeftRadius: r.shape.borderRadius,
+                borderBottomLeftRadius: r.shape.borderRadius
               }
             },
             ":last-of-type": {
-              borderTopRightRadius: t.shape.borderRadius,
-              borderBottomRightRadius: t.shape.borderRadius,
+              borderTopRightRadius: r.shape.borderRadius,
+              borderBottomRightRadius: r.shape.borderRadius,
               "& .MuiDateRangePickerDay-rangeIntervalDayPreview": {
-                borderTopRightRadius: t.shape.borderRadius,
-                borderBottomRightRadius: t.shape.borderRadius
+                borderTopRightRadius: r.shape.borderRadius,
+                borderBottomRightRadius: r.shape.borderRadius
               }
             },
             "& .Mui-selected": {
-              borderRadius: t.shape.borderRadius
+              borderRadius: r.shape.borderRadius
             },
             "& .MuiPickersDay-dayOutsideMonth": {
-              color: t.palette.action.disabled
+              color: r.palette.action.disabled
             }
           }),
-          day: ({ theme: t }) => ({
-            borderRadius: t.shape.borderRadius
+          day: ({ theme: r }) => ({
+            borderRadius: r.shape.borderRadius
           }),
-          rangeIntervalDayPreview: ({ theme: t }) => ({
-            borderRadius: t.shape.borderRadius
+          rangeIntervalDayPreview: ({ theme: r }) => ({
+            borderRadius: r.shape.borderRadius
           })
         }
       },
       MuiDayCalendar: {
         styleOverrides: {
-          weekDayLabel: ({ theme: t }) => ({
-            fontSize: t.typography.body2.fontSize,
+          weekDayLabel: ({ theme: r }) => ({
+            fontSize: r.typography.body2.fontSize,
             fontWeight: 700
           })
         }
@@ -1693,14 +1709,14 @@ const go = (e, o) => {
       },
       MuiFormHelperText: {
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             fontSize: 13,
             // Small
             marginLeft: 0,
             display: "flex",
             alignItems: "center",
             position: "relative",
-            color: t.palette.text.secondary,
+            color: r.palette.text.secondary,
             "& .MuiSvgIcon-root": {
               height: "16px",
               width: "16px",
@@ -1731,19 +1747,19 @@ const go = (e, o) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: ({ theme: t }) => ({
-            borderRadius: t.shape.borderRadius,
+          root: ({ theme: r }) => ({
+            borderRadius: r.shape.borderRadius,
             minHeight: 44,
             // touch target
             minWidth: 44,
             // touch target
             "&.Mui-focusVisible": {
-              outline: `2px solid ${t.palette.info.main}`,
+              outline: `2px solid ${r.palette.info.main}`,
               outlineOffset: "2px"
             },
             "& .MuiTouchRipple-root": {
               "& .MuiTouchRipple-child": {
-                borderRadius: t.shape.borderRadius
+                borderRadius: r.shape.borderRadius
               }
             }
           })
@@ -1770,7 +1786,7 @@ const go = (e, o) => {
       },
       MuiLink: {
         styleOverrides: {
-          root: ({ theme: t, color: n }) => ({
+          root: ({ theme: r, color: n }) => ({
             cursor: "pointer",
             fontWeight: 600,
             textDecoration: "none",
@@ -1782,10 +1798,10 @@ const go = (e, o) => {
               outlineOffset: "2px"
             },
             "&:hover": {
-              backgroundColor: t.palette.action.hover
+              backgroundColor: r.palette.action.hover
             },
             "&:active": {
-              backgroundColor: t.palette.mode === v.LIGHT ? t.palette[n].light : t.palette[n].dark
+              backgroundColor: r.palette.mode === v.LIGHT ? r.palette[n].light : r.palette[n].dark
             }
           })
         }
@@ -1812,9 +1828,9 @@ const go = (e, o) => {
           disablePadding: !0
         },
         styleOverrides: {
-          root: ({ ownerState: t }) => ({
+          root: ({ ownerState: r }) => ({
             minHeight: 64,
-            ...!t.disablePadding && {
+            ...!r.disablePadding && {
               paddingTop: 12,
               paddingBottom: 12,
               paddingLeft: 24
@@ -1838,7 +1854,7 @@ const go = (e, o) => {
       },
       MuiListItemButton: {
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             minHeight: 64,
             paddingLeft: 24,
             paddingRight: 24,
@@ -1847,7 +1863,7 @@ const go = (e, o) => {
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
               borderRadius: 8,
-              outline: `2px solid ${t.palette.info.main}`,
+              outline: `2px solid ${r.palette.info.main}`,
               outlineOffset: -2
             }
           })
@@ -1972,11 +1988,11 @@ const go = (e, o) => {
       },
       MuiPickersToolbar: {
         styleOverrides: {
-          content: ({ theme: t }) => ({
+          content: ({ theme: r }) => ({
             marginTop: 4,
             "& .MuiTypography-root": {
-              fontSize: t.typography.h3.fontSize,
-              lineHeight: t.typography.h3.lineHeight
+              fontSize: r.typography.h3.fontSize,
+              lineHeight: r.typography.h3.lineHeight
             }
           })
         }
@@ -2002,7 +2018,7 @@ const go = (e, o) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             width: 37,
             height: 20,
             padding: 0,
@@ -2013,7 +2029,7 @@ const go = (e, o) => {
               "&.Mui-checked": {
                 transform: "translateX(16px)",
                 "& + .MuiSwitch-track": {
-                  backgroundColor: t.palette.success.main,
+                  backgroundColor: r.palette.success.main,
                   opacity: 1,
                   border: 0
                 },
@@ -2022,27 +2038,27 @@ const go = (e, o) => {
                 }
               },
               "&.Mui-disabled .MuiSwitch-thumb": {
-                color: t.palette.common.white
+                color: r.palette.common.white
               },
               "&.Mui-disabled + .MuiSwitch-track": {
-                backgroundColor: t.palette.action.disabledBackground,
+                backgroundColor: r.palette.action.disabledBackground,
                 opacity: 1
               }
             },
             "& .MuiSwitch-input": {
               "&:focus-visible ~ .MuiSwitch-thumb": {
-                outline: `2px solid ${t.palette.info.main}`,
+                outline: `2px solid ${r.palette.info.main}`,
                 outlineOffset: 0
               }
             },
             "& .MuiSwitch-thumb": {
               boxSizing: "border-box",
-              backgroundColor: t.palette.background.paper,
+              backgroundColor: r.palette.background.paper,
               width: 16,
               height: 16
             },
             "& .MuiSwitch-track": {
-              backgroundColor: t.palette.action.active,
+              backgroundColor: r.palette.action.active,
               borderRadius: 20 / 2,
               opacity: 1
             }
@@ -2094,7 +2110,7 @@ const go = (e, o) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             fontSize: 13,
             lineHeight: "16px",
             textTransform: "none",
@@ -2104,22 +2120,22 @@ const go = (e, o) => {
             },
             "&:hover": {
               backgroundColor: b(
-                t.palette.primary.main,
+                r.palette.primary.main,
                 i.mode === v.LIGHT ? 0.1 : 0.2
               ),
-              borderColor: t.palette.primary.main
+              borderColor: r.palette.primary.main
             },
             "&.Mui-selected": {
               fontWeight: 600,
-              borderColor: t.palette.primary.main,
+              borderColor: r.palette.primary.main,
               "&:hover": {
-                boxShadow: `inset 0px 0px 0px 2px ${t.palette.primary.main}`
+                boxShadow: `inset 0px 0px 0px 2px ${r.palette.primary.main}`
               }
             },
             "& .MuiTouchRipple-root": {
               "& .MuiTouchRipple-child": {
-                backgroundColor: t.palette.primary.main,
-                borderRadius: t.shape.borderRadius
+                backgroundColor: r.palette.primary.main,
+                borderRadius: r.shape.borderRadius
               }
             }
           })
@@ -2218,7 +2234,7 @@ export {
   We as Footer,
   Ze as H1,
   oo as H2,
-  to as H3,
+  ro as H3,
   Y0 as HeartIcon,
   e0 as INTER,
   R as Icon,
@@ -2229,7 +2245,7 @@ export {
   X0 as MXLogoIcon,
   J0 as MXLogoOutlineIcon,
   lo as MerchantLogo,
-  ro as P,
+  to as P,
   ho as SelectionBox,
   F as TARGETS,
   N as THEMES,