@mxenabled/mxui 2.2.2 → 2.2.4

package/dist/index.es.js

@@ -1,55 +1,55 @@
 import { jsx as a, jsxs as b } from "react/jsx-runtime";
 import H from "react";
 import A from "@mui/material/Stack";
-import { useTheme as E, createTheme as ne } from "@mui/material/styles";
+import { useTheme as E, createTheme as $ } from "@mui/material/styles";
 import { Icon as le, ExpandMore as se, Close as ce } from "@mxenabled/mx-icons";
-import { endOfMonth as $ } from "date-fns/endOfMonth";
+import { endOfMonth as U } from "date-fns/endOfMonth";
 import { endOfYear as de } from "date-fns/endOfYear";
-import { startOfToday as ue } from "date-fns/startOfToday";
-import { startOfMonth as U } from "date-fns/startOfMonth";
-import { startOfYear as V } from "date-fns/startOfYear";
-import { subDays as G } from "date-fns/subDays";
-import { subMonths as pe } from "date-fns/subMonths";
+import { startOfToday as pe } from "date-fns/startOfToday";
+import { startOfMonth as V } from "date-fns/startOfMonth";
+import { startOfYear as G } from "date-fns/startOfYear";
+import { subDays as W } from "date-fns/subDays";
+import { subMonths as ue } from "date-fns/subMonths";
 import { subYears as he } from "date-fns/subYears";
 import ge from "@mui/material/useMediaQuery";
-import { usePickerContext as X, useIsValidValue as j, LocalizationProvider as me, StaticDateRangePicker as fe } from "@mui/x-date-pickers-pro";
+import { usePickerContext as j, useIsValidValue as Z, LocalizationProvider as fe, StaticDateRangePicker as me } from "@mui/x-date-pickers-pro";
 import { AdapterDateFns as be } from "@mui/x-date-pickers-pro/AdapterDateFns";
 import { MultiInputDateRangeField as Te } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
-import Z from "@mui/material/Box";
+import Q from "@mui/material/Box";
 import xe from "@mui/material/ToggleButton";
 import Re from "@mui/material/ToggleButtonGroup";
 import Me from "@mui/material/MenuItem";
-import Q from "@mui/material/TextField";
+import J from "@mui/material/TextField";
 import { usePickerLayout as Ce, PickersLayoutRoot as Se, PickersLayoutContentWrapper as Ae, pickersLayoutClasses as D } from "@mui/x-date-pickers/PickersLayout";
-import J from "@mui/material/Slide";
+import q from "@mui/material/Slide";
 import B from "@mui/material/Button";
-import q from "@mui/material/IconButton";
-import ye from "@mui/material/Typography";
-import Ie from "@mui/material/Drawer";
+import ee from "@mui/material/IconButton";
+import Ie from "@mui/material/Typography";
+import ye from "@mui/material/Drawer";
 import Ee from "@mui/material/Snackbar";
 import Oe from "@mui/material/Alert";
-import { FormControlLabel as Fe, Box as w, Typography as W, Radio as P, Checkbox as ve, alpha as f, darken as N, lighten as O, getContrastRatio as Ne } from "@mui/material";
+import { FormControlLabel as Fe, Box as w, Typography as Y, Radio as P, Checkbox as ve, alpha as m, darken as N, lighten as O, getContrastRatio as Ne } from "@mui/material";
 import { circularProgressClasses as He } from "@mui/material/CircularProgress";
 import { LicenseInfo as Le } from "@mui/x-license";
 const L = ({
   children: e,
   height: i,
-  size: o = 16,
-  viewBox: l = "0 0 16 16",
-  width: t
+  size: r = 16,
+  viewBox: s = "0 0 16 16",
+  width: l
 }) => /* @__PURE__ */ a(
   "svg",
   {
     "aria-hidden": !0,
     className: "mx-kmui-icon",
     focusable: !1,
-    height: i || o,
-    viewBox: l,
-    width: t || o,
+    height: i || r,
+    viewBox: s,
+    width: l || r,
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
-), x = ({ color: e, fill: i = !1, name: o, size: l = 20, sx: t, ...s }) => /* @__PURE__ */ a(le, { color: e, fill: i, name: o, size: l, sx: t, ...s }), Ft = ({
+), x = ({ color: e, fill: i = !1, name: r, size: s = 20, sx: l, ...t }) => /* @__PURE__ */ a(le, { color: e, fill: i, name: r, size: s, sx: l, ...t }), Ft = ({
   color: e = "currentColor",
   ...i
 }) => /* @__PURE__ */ b(L, { ...i, children: [
@@ -143,7 +143,7 @@ const L = ({
   )
 ] });
 var g = /* @__PURE__ */ ((e) => (e.AutoTransport = "CAT-7829f71c-2e8c-afa5-2f55-fa3634b89874", e.BillsUtilities = "CAT-79b02f2f-2adc-88f0-ac2b-4e71ead9cfc8", e.BusinessServices = "CAT-94b11142-e97b-941a-f67f-6e18d246a23f", e.Education = "CAT-bf5c9cca-c96b-b50d-440d-38d9adfda5b0", e.Entertainment = "CAT-e04e9d1e-e041-c315-2e50-094143ab3f73", e.FeesCharges = "CAT-d73ee74b-13a4-ac3e-4015-fc4ba9a62b2a", e.Financial = "CAT-6c7de3f8-de6c-7061-1dd2-b093044014bf", e.FoodDining = "CAT-bd56d35a-a9a7-6e10-66c1-5b9cc1b6c81a", e.GiftsDonations = "CAT-8edf9663-623e-4735-490e-31288f0a70b0", e.HealthFitness = "CAT-52fa4693-c088-afb2-2a99-7bc39bb23a0f", e.Home = "CAT-b709172b-4eb7-318e-3b5d-e0f0500b32ac", e.Income = "CAT-bf9f3294-4c40-1677-d269-54fbc189faf3", e.Investments = "CAT-ccd42390-9e8c-3fb6-a5d9-6c31182d9c5c", e.Kids = "CAT-0cb1d99d-f558-99e3-2282-b31f359b411a", e.PersonalCare = "CAT-e5154228-fe45-790d-a280-f6bf5ae5ac9f", e.Pets = "CAT-7cccbafa-87d7-c9a6-661b-8b3402fe9e78", e.Shopping = "CAT-aad51b46-d6f7-3da5-fd6e-492328b3023f", e.Taxes = "CAT-d00fc539-aa14-009b-4ffb-7e8c7b839954", e.Transfer = "CAT-bce48142-fea4-ff45-20d9-0a642d44de83", e.Travel = "CAT-ea23d844-cbd1-eb10-f6ac-0df9610e59ae", e.Uncategorized = "CAT-d7851c65-3353-e490-1953-fb9235e681e4", e))(g || {}), ke = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(ke || {});
-const ee = {
+const te = {
   guid: g.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
@@ -248,50 +248,50 @@ const ee = {
     colorName: "travel",
     icon: "airplane_ticket"
   },
-  ee
+  te
 ], we = 0.625, Pe = ({
   categoryGuid: e,
   icon_ratio: i = we,
-  size: o = 32,
-  sx: l = {},
-  variant: t = "filled"
+  size: r = 32,
+  sx: s = {},
+  variant: l = "filled"
 }) => {
-  const s = E(), n = H.useMemo(
-    () => De.find((u) => u.guid === e) ?? ee,
+  const t = E(), n = H.useMemo(
+    () => De.find((p) => p.guid === e) ?? te,
     [e]
-  ), c = s.palette.categories[n.colorName];
+  ), c = t.palette.categories[n.colorName];
   return /* @__PURE__ */ a(
     A,
     {
       alignItems: "center",
       bgcolor: () => {
-        let u = c;
-        return t === "twotone" && (u = `${u}20`), t === "transparent" || t === "basic" ? "transparent" : u;
+        let p = c;
+        return l === "twotone" && (p = `${p}20`), l === "transparent" || l === "basic" ? "transparent" : p;
       },
       borderRadius: 1,
       color: () => {
-        const u = t === "filled" ? s.palette.common.white : c;
-        return t === "basic" ? s.palette.text.primary : u;
+        const p = l === "filled" ? t.palette.common.white : c;
+        return l === "basic" ? t.palette.text.primary : p;
       },
-      height: o,
+      height: r,
       justifyContent: "center",
-      sx: [...Array.isArray(l) ? l : [l]],
-      width: o,
-      children: /* @__PURE__ */ a(x, { name: n.icon, size: o * i })
+      sx: [...Array.isArray(s) ? s : [s]],
+      width: r,
+      children: /* @__PURE__ */ a(x, { name: n.icon, size: r * i })
     }
   );
 }, _e = ({ items: e, selected: i }) => {
-  const o = E(), { setValue: l } = X(), t = j(), s = e?.map((n) => {
-    const c = n.getValue({ isValid: t });
+  const r = E(), { setValue: s } = j(), l = Z(), t = e?.map((n) => {
+    const c = n.getValue({ isValid: l });
     return {
       label: n.label,
       onClick: () => {
-        l(c, { changeImportance: "accept", shortcut: n });
+        s(c, { changeImportance: "accept", shortcut: n });
       },
-      disabled: !t(c)
+      disabled: !l(c)
     };
   });
-  return /* @__PURE__ */ a(Z, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Re, { color: "primary", orientation: "vertical", value: i, children: s?.map((n) => /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(Q, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Re, { color: "primary", orientation: "vertical", value: i, children: t?.map((n) => /* @__PURE__ */ a(
     xe,
     {
       onClick: n.onClick,
@@ -305,11 +305,11 @@ const ee = {
           boxShadow: "0px 0px 0px 2px rgba(82, 138, 224, 0.8)"
         },
         "&:hover": {
-          bgcolor: o.palette.action.hover,
-          borderTop: `1px solid ${o.palette.secondary.light}`
+          bgcolor: r.palette.action.hover,
+          borderTop: `1px solid ${r.palette.secondary.light}`
         },
         "&.Mui-selected": {
-          border: `2px solid ${o.palette.primary.main} !important`,
+          border: `2px solid ${r.palette.primary.main} !important`,
           marginTop: "-2px !important",
           color: "primary"
         }
@@ -322,38 +322,38 @@ const ee = {
 }, Be = ({
   items: e,
   selected: i,
-  selectLabel: o
+  selectLabel: r
 }) => {
-  const { setValue: l } = X(), t = j(), s = e?.map((n) => {
-    const c = n.getValue({ isValid: t });
+  const { setValue: s } = j(), l = Z(), t = e?.map((n) => {
+    const c = n.getValue({ isValid: l });
     return {
       label: n.label,
       onClick: () => {
-        l(c, { changeImportance: "accept", shortcut: n });
+        s(c, { changeImportance: "accept", shortcut: n });
       },
-      disabled: !t(c)
+      disabled: !l(c)
     };
   });
   return /* @__PURE__ */ a(A, { sx: { py: 16 }, children: /* @__PURE__ */ a(
-    Q,
+    J,
     {
       defaultValue: i,
       id: "select",
-      label: o,
+      label: r,
       select: !0,
       slotProps: { inputLabel: { shrink: !0 }, select: { IconComponent: se } },
       sx: { width: "100%" },
       value: i,
       variant: "outlined",
-      children: s?.map((n) => /* @__PURE__ */ a(Me, { onClick: n.onClick, value: n.label, children: n.label }, n.label))
+      children: t?.map((n) => /* @__PURE__ */ a(Me, { onClick: n.onClick, value: n.label, children: n.label }, n.label))
     }
   ) });
 }, ze = (e) => {
-  const { toolbar: i, content: o, shortcuts: l, ownerState: t } = Ce(e);
+  const { toolbar: i, content: r, shortcuts: s, ownerState: l } = Ce(e);
   return /* @__PURE__ */ b(
     Se,
     {
-      ownerState: t,
+      ownerState: l,
       sx: {
         gridTemplateColumns: "minmax(320px, 1fr)",
         overflow: "auto",
@@ -370,15 +370,15 @@ const ee = {
       },
       children: [
         /* @__PURE__ */ b(A, { sx: { gridColumn: 1, gridRow: 1, p: 16 }, children: [
-          l,
+          s,
           i
         ] }),
         /* @__PURE__ */ a(
           Ae,
           {
             className: D.contentWrapper,
-            ownerState: t,
-            children: o
+            ownerState: l,
+            children: r
           }
         )
       ]
@@ -387,48 +387,48 @@ const ee = {
 }, Lt = ({
   copy: e,
   dateRange: i,
-  onRangeChanged: o,
-  selectedShortcut: l = e.dateRangeThisMonth,
-  sx: t = {}
+  onRangeChanged: r,
+  selectedShortcut: s = e.dateRangeThisMonth,
+  sx: l = {}
 }) => {
-  const s = E(), n = ge(s.breakpoints.down("sm")), c = H.useMemo(() => {
-    const r = ue(), u = pe(r, 1), T = he(r, 1);
+  const t = E(), n = ge(t.breakpoints.down("sm")), c = H.useMemo(() => {
+    const o = pe(), p = ue(o, 1), T = he(o, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [U(r), $(r)]
+        getValue: () => [V(o), U(o)]
       },
       {
         label: e.dateRangeLastMonth,
-        getValue: () => [U(u), $(u)]
+        getValue: () => [V(p), U(p)]
       },
       {
         label: e.dateRangeLast30Days,
-        getValue: () => [G(r, 30), r]
+        getValue: () => [W(o, 30), o]
       },
       {
         label: e.dateRangeLast90Days,
-        getValue: () => [G(r, 90), r]
+        getValue: () => [W(o, 90), o]
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [V(r), r]
+        getValue: () => [G(o), o]
       },
       {
         label: e.dateRangeLastYear,
-        getValue: () => [V(T), de(T)]
+        getValue: () => [G(T), de(T)]
       },
       {
         label: e.dateRangeCustom,
-        getValue: () => [r, r]
+        getValue: () => [o, o]
       }
     ];
-  }, [e]), d = (r, u) => {
-    const T = u.shortcut;
-    o?.(r, T ? T.label : e.dateRangeCustom);
+  }, [e]), d = (o, p) => {
+    const T = p.shortcut;
+    r?.(o, T ? T.label : e.dateRangeCustom);
   };
-  return /* @__PURE__ */ a(A, { gap: n ? 0 : 16, m: n ? 0 : 8, children: /* @__PURE__ */ a(me, { dateAdapter: be, children: /* @__PURE__ */ a(
-    fe,
+  return /* @__PURE__ */ a(A, { gap: n ? 0 : 16, m: n ? 0 : 8, children: /* @__PURE__ */ a(fe, { dateAdapter: be, children: /* @__PURE__ */ a(
+    me,
     {
       calendars: 1,
       localeText: {
@@ -450,25 +450,25 @@ const ee = {
       slots: {
         ...n && { layout: ze },
         leftArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_left", size: 28 }),
-        shortcuts: (r) => n ? /* @__PURE__ */ a(
+        shortcuts: (o) => n ? /* @__PURE__ */ a(
           Be,
           {
             selectLabel: e.dateRangeSelectARange,
-            selected: l,
-            ...r
+            selected: s,
+            ...o
           }
-        ) : /* @__PURE__ */ a(_e, { selected: l, ...r }),
+        ) : /* @__PURE__ */ a(_e, { selected: s, ...o }),
         rightArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_right", size: 28 }),
         ...n && {
-          toolbar: (r) => /* @__PURE__ */ a(
+          toolbar: (o) => /* @__PURE__ */ a(
             Te,
             {
               dateSeparator: "",
               format: "MM/dd/yyyy",
-              ...r,
+              ...o,
               slotProps: {
-                textField: ({ position: u }) => ({
-                  label: u === "start" ? e.dateRangeFrom : e.dateRangeTo
+                textField: ({ position: p }) => ({
+                  label: p === "start" ? e.dateRangeFrom : e.dateRangeTo
                 })
               },
               sx: { gap: 8 }
@@ -476,19 +476,19 @@ const ee = {
           )
         }
       },
-      sx: { ...t },
+      sx: { ...l },
       value: i
     }
   ) }) });
-}, kt = H.forwardRef(function(i, o) {
-  return /* @__PURE__ */ a(J, { direction: "up", ref: o, ...i });
+}, kt = H.forwardRef(function(i, r) {
+  return /* @__PURE__ */ a(q, { direction: "up", ref: r, ...i });
 }), $e = ({
   hasSecondaryAction: e = !0,
   isPrimaryDisabled: i,
-  onPrimaryAction: o,
-  onSecondaryAction: l,
-  primaryColor: t = "primary",
-  primaryText: s = "Save",
+  onPrimaryAction: r,
+  onSecondaryAction: s,
+  primaryColor: l = "primary",
+  primaryText: t = "Save",
   secondaryColor: n = "primary",
   secondaryText: c = "Cancel"
 }) => /* @__PURE__ */ b(
@@ -503,19 +503,19 @@ const ee = {
         B,
         {
           color: n,
-          onClick: l,
-          variant: o ? "outlined" : "contained",
+          onClick: s,
+          variant: r ? "outlined" : "contained",
           children: c
         }
       ),
-      o && /* @__PURE__ */ a(
+      r && /* @__PURE__ */ a(
         B,
         {
-          color: t,
+          color: l,
           disabled: i,
-          onClick: o,
+          onClick: r,
           variant: "contained",
-          children: s
+          children: t
         }
       )
     ]
@@ -523,22 +523,22 @@ const ee = {
 ), F = ({
   bold: e,
   className: i = "",
-  children: o,
-  color: l,
-  sx: t = {},
-  truncate: s,
+  children: r,
+  color: s,
+  sx: l = {},
+  truncate: t,
   uppercase: n,
   ...c
 }) => /* @__PURE__ */ a(
-  ye,
+  Ie,
   {
     className: `mx-kmui-text ${i}`,
-    color: l,
+    color: s,
     sx: [
       e ? {
         fontWeight: 600
       } : {},
-      s ? {
+      t ? {
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap"
@@ -546,12 +546,12 @@ const ee = {
       n ? {
         textTransform: "uppercase"
       } : {},
-      ...Array.isArray(t) ? t : [t]
+      ...Array.isArray(l) ? l : [l]
     ],
     ...c,
-    children: o
+    children: r
   }
-), Ue = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...o, children: i }), Dt = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...o, children: i }), wt = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...o, children: i }), Pt = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...o, children: i }), _t = ({ copy: e, onClose: i }) => /* @__PURE__ */ b(
+), Ue = ({ className: e = "", children: i, ...r }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...r, children: i }), Dt = ({ className: e = "", children: i, ...r }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...r, children: i }), wt = ({ className: e = "", children: i, ...r }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...r, children: i }), Pt = ({ className: e = "", children: i, ...r }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...r, children: i }), _t = ({ copy: e, onClose: i }) => /* @__PURE__ */ b(
   A,
   {
     sx: {
@@ -563,143 +563,143 @@ const ee = {
     },
     children: [
       /* @__PURE__ */ a(Ue, { variant: "h3", children: e.title }),
-      /* @__PURE__ */ a(q, { "aria-label": e.close_aria, onClick: i, sx: { mr: -12 }, children: /* @__PURE__ */ a(ce, {}) })
+      /* @__PURE__ */ a(ee, { "aria-label": e.close_aria, onClick: i, sx: { mr: -12 }, children: /* @__PURE__ */ a(ce, {}) })
     ]
   }
 ), Bt = ({
   className: e,
   disableSave: i,
-  id: o,
-  isOpen: l,
-  onClose: t,
-  onSave: s,
+  id: r,
+  isOpen: s,
+  onClose: l,
+  onSave: t,
   primaryText: n,
   secondaryText: c,
   children: d,
-  ...r
+  ...o
 }) => /* @__PURE__ */ b(
-  Ie,
+  ye,
   {
     anchor: "right",
     className: `mx-kmui-drawer ${e}`,
-    id: o ?? void 0,
-    onClose: t,
-    open: l,
+    id: r ?? void 0,
+    onClose: l,
+    open: s,
     variant: "temporary",
-    ...r,
+    ...o,
     children: [
       d,
-      s && /* @__PURE__ */ a(
+      t && /* @__PURE__ */ a(
         $e,
         {
           isPrimaryDisabled: i,
-          onPrimaryAction: s,
-          onSecondaryAction: t,
+          onPrimaryAction: t,
+          onSecondaryAction: l,
           primaryText: n,
           secondaryText: c
         }
       )
     ]
   }
-), te = 32, z = "https://content.moneydesktop.com/storage/MD_Assets", Y = `${z}/serenity/default_institution_logo.png`, zt = ({
+), oe = 32, z = "https://content.moneydesktop.com/storage/MD_Assets", K = `${z}/serenity/default_institution_logo.png`, zt = ({
   alt: e,
   institutionGuid: i,
-  logoUrl: o,
-  size: l = te,
-  ...t
+  logoUrl: r,
+  size: s = oe,
+  ...l
 }) => /* @__PURE__ */ a(
   "img",
   {
     alt: e,
-    height: l,
-    onError: (s) => {
-      const n = s.target;
-      n.src !== Y && (n.src = Y);
+    height: s,
+    onError: (t) => {
+      const n = t.target;
+      n.src !== K && (n.src = K);
     },
-    src: o || `${z}/Ipad%20Logos/100x100/${i}_100x100.png`,
+    src: r || `${z}/Ipad%20Logos/100x100/${i}_100x100.png`,
     style: {
       borderRadius: 4
     },
-    width: l,
-    ...t
+    width: s,
+    ...l
   }
 ), $t = ({
   alt: e = "",
   categoryGuid: i,
-  merchantGuid: o,
-  size: l = te,
-  ...t
+  merchantGuid: r,
+  size: s = oe,
+  ...l
 }) => {
-  const [s, n] = H.useState(!1), c = E();
-  return /* @__PURE__ */ b(Z, { display: "inline-block", position: "relative", ...t, children: [
-    o && !s && /* @__PURE__ */ a(
+  const [t, n] = H.useState(!1), c = E();
+  return /* @__PURE__ */ b(Q, { display: "inline-block", position: "relative", ...l, children: [
+    r && !t && /* @__PURE__ */ a(
       "img",
       {
         alt: e,
         "aria-hidden": !e,
-        height: l,
+        height: s,
         onError: () => n(!0),
-        src: `${z}/merchant_logos/${o}.png`,
+        src: `${z}/merchant_logos/${r}.png`,
         style: {
           backgroundColor: c.palette.common.white,
           borderRadius: 4,
           boxSizing: "border-box",
           position: "absolute"
         },
-        width: l
+        width: s
       }
     ),
-    /* @__PURE__ */ a(Pe, { categoryGuid: i, size: l })
+    /* @__PURE__ */ a(Pe, { categoryGuid: i, size: s })
   ] });
 }, Ut = ({
   disabled: e = !1,
   label: i = "",
-  shrink: o = !0,
-  variant: l = "outlined",
-  ...t
+  shrink: r = !0,
+  variant: s = "outlined",
+  ...l
 }) => /* @__PURE__ */ a(
-  Q,
+  J,
   {
     InputLabelProps: {
-      shrink: o
+      shrink: r
     },
     disabled: e,
     label: i,
-    variant: l,
-    ...t
+    variant: s,
+    ...l
   }
 );
 function Ve(e) {
-  return /* @__PURE__ */ a(J, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
+  return /* @__PURE__ */ a(q, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
 const Vt = ({
   open: e,
   handleClose: i,
-  message: o,
-  autoHideDuration: l = 3e3,
-  severity: t = "success",
-  snackbarSx: s,
+  message: r,
+  autoHideDuration: s = 3e3,
+  severity: l = "success",
+  snackbarSx: t,
   showAction: n = !1,
   showClose: c = !1,
   actionText: d = "Undo",
-  onActionClick: r,
-  multiLine: u = !1
+  onActionClick: o,
+  multiLine: p = !1
 }) => {
   const T = E(), v = /* @__PURE__ */ b(
     A,
     {
-      alignItems: u ? "flex-end" : "center",
-      direction: u ? "column-reverse" : "row",
+      alignItems: p ? "flex-end" : "center",
+      direction: p ? "column-reverse" : "row",
       justifyContent: (
         // eslint-disable-next-line no-nested-ternary
-        u && n && c ? "space-between" : "flex-end"
+        p && n && c ? "space-between" : "flex-end"
       ),
       children: [
         n && /* @__PURE__ */ a(
           B,
           {
             color: "inherit",
-            onClick: r || i,
+            onClick: o || i,
             size: "small",
             sx: {
               color: T.palette.success.contrastText,
@@ -709,7 +709,7 @@ const Vt = ({
           }
         ),
         c && /* @__PURE__ */ a(
-          q,
+          ee,
           {
             "aria-label": "close",
             color: "inherit",
@@ -726,31 +726,31 @@ const Vt = ({
     {
       TransitionComponent: Ve,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      autoHideDuration: l,
+      autoHideDuration: s,
       onClose: i,
       open: e,
       sx: {
-        ...s,
-        width: u ? 400 : 325
+        ...t,
+        width: p ? 400 : 325
       },
       children: /* @__PURE__ */ a(
         Oe,
         {
           action: v,
-          severity: t,
+          severity: l,
           sx: {
             display: "flex",
             alignItems: "stretch",
-            minHeight: c && n && u ? 120 : 56,
-            maxHeight: u ? 120 : 56,
+            minHeight: c && n && p ? 120 : 56,
+            maxHeight: p ? 120 : 56,
             width: "100%",
             "& .MuiAlert-icon": {
-              alignSelf: u ? "flex-start" : "center"
+              alignSelf: p ? "flex-start" : "center"
             },
             "& .MuiAlert-message": {
-              paddingTop: u ? 12 : 8,
-              paddingBottom: u ? 12 : 8,
-              alignSelf: u ? "flex-start" : "center"
+              paddingTop: p ? 12 : 8,
+              paddingBottom: p ? 12 : 8,
+              alignSelf: p ? "flex-start" : "center"
             },
             "& .MuiAlert-action": {
               alignItems: "stretch",
@@ -763,12 +763,12 @@ const Vt = ({
             {
               sx: {
                 lineHeight: T.typography.body1.lineHeight,
-                whiteSpace: u ? "normal" : "nowrap",
-                overflow: u ? "visible" : "hidden",
-                textOverflow: u ? "clip" : "ellipsis"
+                whiteSpace: p ? "normal" : "nowrap",
+                overflow: p ? "visible" : "hidden",
+                textOverflow: p ? "clip" : "ellipsis"
               },
-              truncate: !u,
-              children: o
+              truncate: !p,
+              children: r
             }
           )
         }
@@ -778,23 +778,23 @@ const Vt = ({
 }, Gt = ({
   component: e = P,
   variant: i = "outlined",
-  selected: o,
-  onChange: l,
-  headline: t,
-  message: s,
+  selected: r,
+  onChange: s,
+  headline: l,
+  message: t,
   name: n,
   value: c,
   disabled: d = !1,
-  error: r = !1,
-  icon: u = !1,
+  error: o = !1,
+  icon: p = !1,
   sx: T = {},
   ...v
 }) => {
-  const m = E(), oe = () => m.palette.background.paper, k = () => r ? `inset 0px 0px 0px 2px ${m.palette.error.main}` : d ? o ? `inset 0px 0px 0px 2px ${m.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${m.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${m.palette.action.disabled}` : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(m.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(m.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${f(m.palette.primary.main, 0.5)}` : m.shadows[1], re = () => d || r ? m.palette.background.paper : f(m.palette.primary.main, 0.1), ie = () => d || r ? k() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(m.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(m.palette.primary.main, 0.5)}` : k(), ae = () => d || r ? m.palette.background.paper : f(m.palette.primary.main, 0.3);
+  const f = E(), re = () => f.palette.background.paper, k = () => o ? `inset 0px 0px 0px 2px ${f.palette.error.main}` : d ? r ? `inset 0px 0px 0px 2px ${f.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${f.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${f.palette.action.disabled}` : i === "outlined" ? r ? `inset 0px 0px 0px 2px ${m(f.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(f.palette.common.black, 0.23)}` : r ? `inset 0px 0px 0px 2px ${m(f.palette.primary.main, 0.5)}` : f.shadows[1], ie = () => d || o ? f.palette.background.paper : m(f.palette.primary.main, 0.1), ae = () => d || o ? k() : i === "outlined" ? r ? `inset 0px 0px 0px 2px ${m(f.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(f.palette.primary.main, 0.5)}` : k(), ne = () => d || o ? f.palette.background.paper : m(f.palette.primary.main, 0.3);
   return /* @__PURE__ */ a(
     Fe,
     {
-      checked: o,
+      checked: r,
       control: e === P ? /* @__PURE__ */ a(
         P,
         {
@@ -828,39 +828,39 @@ const Vt = ({
       ),
       disabled: d,
       label: /* @__PURE__ */ b(w, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
-        u && /* @__PURE__ */ a(w, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: u }),
+        p && /* @__PURE__ */ a(w, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: p }),
         /* @__PURE__ */ b(w, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
-          t && /* @__PURE__ */ a(W, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: t }),
-          /* @__PURE__ */ a(W, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: s })
+          l && /* @__PURE__ */ a(Y, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: l }),
+          /* @__PURE__ */ a(Y, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: t })
         ] })
       ] }),
       labelPlacement: "start",
-      onChange: l,
+      onChange: s,
       sx: {
         display: "flex",
         padding: "6px 16px",
         alignItems: "flex-start",
         justifyContent: "space-between",
-        borderRadius: m.shape.borderRadius / 2,
+        borderRadius: f.shape.borderRadius / 2,
         mb: 16,
         cursor: d ? "not-allowed" : "pointer",
         opacity: d ? 0.6 : 1,
-        backgroundColor: oe(),
+        backgroundColor: re(),
         border: "none",
         boxShadow: k(),
         boxSizing: "border-box",
-        transition: m.transitions.create(["background-color", "box-shadow"], {
-          duration: m.transitions.duration.short
+        transition: f.transitions.create(["background-color", "box-shadow"], {
+          duration: f.transitions.duration.short
         }),
         "&:hover": {
-          backgroundColor: re(),
-          boxShadow: ie()
+          backgroundColor: ie(),
+          boxShadow: ae()
         },
         "&:active": {
-          backgroundColor: ae()
+          backgroundColor: ne()
         },
         "&:focus-visible": {
-          outline: `2px solid ${m.palette.info.main}`,
+          outline: `2px solid ${f.palette.info.main}`,
           outlineOffset: "2px"
         },
         ...T
@@ -868,7 +868,7 @@ const Vt = ({
       value: c
     }
   );
-}, I = {
+}, y = {
   LIGHT: "light"
 }, R = (e) => ({
   50: O(e, 0.95),
@@ -897,14 +897,14 @@ const Vt = ({
   CHART5: "#60A9FF",
   CHART6: "#C8BAEE",
   CHART7: "#585E67"
-}, y = {
+}, I = {
   CHART_MONO1: "#C3EAFF",
   CHART_MONO2: "#8ED7FF",
   CHART_MONO3: "#60A9FF",
   CHART_MONO4: "#2F73DA",
   CHART_MONO5: "#034AB3",
   CHART_MONO6: "#002966"
-}, p = {
+}, u = {
   AUTO_TRANSPORTT: "#00B0FF",
   BILLS_UTILITIES: "#F949BD",
   BUSINESS_SERVICES: "#2979FF",
@@ -951,7 +951,7 @@ const Vt = ({
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
 }, Xe = (e, i) => {
-  const o = R(i?.primary || C.PRIMARY), l = R(i?.secondary || C.SECONDARY), t = R(i?.error || C.ERROR), s = R(i?.warning || C.WARNING), n = R(i?.info || C.INFO), c = R(i?.success || C.SUCCESS), d = R(i?.grey || C.GREY), r = e === I.LIGHT;
+  const r = R(i?.primary || C.PRIMARY), s = R(i?.secondary || C.SECONDARY), l = R(i?.error || C.ERROR), t = R(i?.warning || C.WARNING), n = R(i?.info || C.INFO), c = R(i?.success || C.SUCCESS), d = R(i?.grey || C.GREY), o = e === y.LIGHT;
   return {
     mode: e,
     common: {
@@ -959,90 +959,90 @@ const Vt = ({
       black: _
     },
     primary: {
-      ...o,
-      light: r ? o[300] : o[600],
-      main: r ? o[500] : o[400],
-      dark: r ? o[700] : o[200]
+      ...r,
+      light: o ? r[300] : r[600],
+      main: o ? r[500] : r[400],
+      dark: o ? r[700] : r[200]
     },
     secondary: {
-      ...l,
-      light: r ? l[300] : l[600],
-      main: r ? l[500] : l[400],
-      dark: r ? l[700] : l[200]
+      ...s,
+      light: o ? s[300] : s[600],
+      main: o ? s[500] : s[400],
+      dark: o ? s[700] : s[200]
     },
     neutral: {
       ...d,
-      light: r ? d[300] : d[600],
-      main: r ? d[500] : d[400],
-      dark: r ? d[700] : d[200],
-      contrastText: Ne(r ? d[700] : d[400], "#fff") > 4.5 ? M : d[900]
+      light: o ? d[300] : d[600],
+      main: o ? d[500] : d[400],
+      dark: o ? d[700] : d[200],
+      contrastText: Ne(o ? d[700] : d[400], "#fff") > 4.5 ? M : d[900]
     },
     text: {
-      primary: r ? d[900] : M,
-      secondary: r ? d[600] : f(M, 0.7),
-      disabled: r ? d[500] : f(M, 0.38)
+      primary: o ? d[900] : M,
+      secondary: o ? d[600] : m(M, 0.7),
+      disabled: o ? d[500] : m(M, 0.38)
     },
     error: {
-      ...t,
-      light: r ? t[300] : t[600],
-      main: r ? t[500] : t[400],
-      dark: r ? t[700] : t[200]
+      ...l,
+      light: o ? l[300] : l[600],
+      main: o ? l[500] : l[400],
+      dark: o ? l[700] : l[200]
     },
     warning: {
-      ...s,
-      light: r ? s[300] : s[600],
-      main: r ? s[500] : s[400],
-      dark: r ? s[700] : s[200]
+      ...t,
+      light: o ? t[300] : t[600],
+      main: o ? t[500] : t[400],
+      dark: o ? t[700] : t[200]
     },
     info: {
       ...n,
-      light: r ? n[300] : n[600],
-      main: r ? n[500] : n[400],
-      dark: r ? n[700] : n[200]
+      light: o ? n[300] : n[600],
+      main: o ? n[500] : n[400],
+      dark: o ? n[700] : n[200]
     },
     success: {
       ...c,
-      light: r ? c[300] : c[600],
-      main: r ? c[500] : c[400],
-      dark: r ? c[700] : c[200]
+      light: o ? c[300] : c[600],
+      main: o ? c[500] : c[400],
+      dark: o ? c[700] : c[200]
     },
     grey: d,
     action: {
-      active: r ? f(_, 0.56) : f(M, 0.56),
-      hoverOpacity: r ? 0.1 : 0.2,
-      selectedOpacity: r ? 0.16 : 0.25,
+      active: o ? m(_, 0.56) : m(M, 0.56),
+      hoverOpacity: o ? 0.1 : 0.2,
+      selectedOpacity: o ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: r ? i?.background?.default?.light || Ge : i?.background?.default?.dark || We,
-      paper: r ? i?.background?.paper?.light || Ye : i?.background?.paper?.dark || Ke,
-      highlight: r ? d[200] : d[600],
-      highlightPrimary: r ? o[100] : o[500]
+      default: o ? i?.background?.default?.light || Ge : i?.background?.default?.dark || We,
+      paper: o ? i?.background?.paper?.light || Ye : i?.background?.paper?.dark || Ke,
+      highlight: o ? d[200] : d[600],
+      highlightPrimary: o ? r[100] : r[500]
     },
-    divider: r ? f(_, 0.12) : f(M, 0.24),
+    divider: o ? m(_, 0.12) : m(M, 0.24),
     categories: {
-      autoTransport: r ? p.AUTO_TRANSPORTT : h.AUTO_TRANSPORTT,
-      billsUtilities: r ? p.BILLS_UTILITIES : h.BILLS_UTILITIES,
-      businessServices: r ? p.BUSINESS_SERVICES : h.BUSINESS_SERVICES,
-      education: r ? p.EDUCATION : h.EDUCATION,
-      entertainment: r ? p.ENTERTAINMENT : h.ENTERTAINMENT,
-      feesCharges: r ? p.FEES_CHARGES : h.FEES_CHARGES,
-      financial: r ? p.FINANCIAL : h.FINANCIAL,
-      foodDining: r ? p.FOOD_DINING : h.FOOD_DINING,
-      giftsDonations: r ? p.GIFTS_DONATIONS : h.GIFTS_DONATIONS,
-      healthFitness: r ? p.HEALTH_FITNESS : h.HEALTH_FITNESS,
-      home: r ? p.HOME : h.HOME,
-      income: r ? p.INCOME : h.INCOME,
-      investments: r ? p.INVESTMENTS : h.INVESTMENTS,
-      kids: r ? p.KIDS : h.KIDS,
-      others: r ? p.OTHERS : h.OTHERS,
-      personalCare: r ? p.PERSONAL_CARE : h.PERSONAL_CARE,
-      pets: r ? p.PETS : h.PETS,
-      shopping: r ? p.SHOPPING : h.SHOPPING,
-      taxes: r ? p.TAXES : h.TAXES,
-      transfer: r ? p.TRANSFER : h.TRANSFER,
-      travel: r ? p.TRAVEL : h.TRAVEL,
-      uncategorized: r ? p.UNCATEGORIZED : h.UNCATEGORIZED
+      autoTransport: o ? u.AUTO_TRANSPORTT : h.AUTO_TRANSPORTT,
+      billsUtilities: o ? u.BILLS_UTILITIES : h.BILLS_UTILITIES,
+      businessServices: o ? u.BUSINESS_SERVICES : h.BUSINESS_SERVICES,
+      education: o ? u.EDUCATION : h.EDUCATION,
+      entertainment: o ? u.ENTERTAINMENT : h.ENTERTAINMENT,
+      feesCharges: o ? u.FEES_CHARGES : h.FEES_CHARGES,
+      financial: o ? u.FINANCIAL : h.FINANCIAL,
+      foodDining: o ? u.FOOD_DINING : h.FOOD_DINING,
+      giftsDonations: o ? u.GIFTS_DONATIONS : h.GIFTS_DONATIONS,
+      healthFitness: o ? u.HEALTH_FITNESS : h.HEALTH_FITNESS,
+      home: o ? u.HOME : h.HOME,
+      income: o ? u.INCOME : h.INCOME,
+      investments: o ? u.INVESTMENTS : h.INVESTMENTS,
+      kids: o ? u.KIDS : h.KIDS,
+      others: o ? u.OTHERS : h.OTHERS,
+      personalCare: o ? u.PERSONAL_CARE : h.PERSONAL_CARE,
+      pets: o ? u.PETS : h.PETS,
+      shopping: o ? u.SHOPPING : h.SHOPPING,
+      taxes: o ? u.TAXES : h.TAXES,
+      transfer: o ? u.TRANSFER : h.TRANSFER,
+      travel: o ? u.TRAVEL : h.TRAVEL,
+      uncategorized: o ? u.UNCATEGORIZED : h.UNCATEGORIZED
     },
     chart: {
       chart1: S.CHART1,
@@ -1054,16 +1054,16 @@ const Vt = ({
       chart7: S.CHART7
     },
     chartMono: {
-      chartMono1: y.CHART_MONO1,
-      chartMono2: y.CHART_MONO2,
-      chartMono3: y.CHART_MONO3,
-      chartMono4: y.CHART_MONO4,
-      chartMono5: y.CHART_MONO5,
-      chartMono6: y.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
     }
   };
-}, K = "Inter, Helvetica, Arial, sans-serif", je = (e) => {
-  const i = e?.fontFamily ? `${e?.fontFamily}, ${K}` : K;
+}, X = "Inter, Helvetica, Arial, sans-serif", je = (e) => {
+  const i = e?.fontFamily ? `${e?.fontFamily}, ${X}` : X;
   return {
     fontFamily: i,
     fontSize: 15,
@@ -1126,8 +1126,8 @@ Le.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
 const Wt = (e, i) => {
-  const o = Xe(e, i?.paletteOptions), l = je(i?.typographyOptions);
-  return ne({
+  const r = Xe(e, i?.paletteOptions), s = je(i?.typographyOptions), l = [...$().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)", $({
     breakpoints: {
       values: {
         xs: 444,
@@ -1138,13 +1138,14 @@ const Wt = (e, i) => {
       }
     },
     cssVariables: !0,
-    palette: o,
+    palette: r,
     shape: {
       borderRadius: i?.shapeOptions?.borderRadius || 4
     },
+    shadows: l,
     spacing: 1,
     // TODO: update spacing, we're back to a 8-base which is default for MUI 2.x
-    typography: l,
+    typography: s,
     components: {
       MuiAlert: {
         defaultProps: {
@@ -1157,15 +1158,15 @@ const Wt = (e, i) => {
           variant: "outlined"
         },
         styleOverrides: {
-          root: ({ theme: t, ownerState: s }) => {
-            const n = s.severity || "info";
-            let c = t.palette.mode === I.LIGHT ? t.palette[n]?.[50] : t.palette[n]?.[800];
-            if (s.variant === "filled") {
-              const d = n === "warning";
-              c = t.palette[n]?.[d ? 400 : 600];
+          root: ({ theme: t, ownerState: n }) => {
+            const c = n.severity || "info";
+            let d = t.palette.mode === y.LIGHT ? t.palette[c]?.[50] : t.palette[c]?.[800];
+            if (n.variant === "filled") {
+              const o = c === "warning";
+              d = t.palette[c]?.[o ? 400 : 600];
             }
             return {
-              backgroundColor: c,
+              backgroundColor: d,
               borderRadius: t.shape.borderRadius,
               "& .MuiAlert-message": {
                 fontSize: t.typography.subtitle1.fontSize,
@@ -1239,7 +1240,7 @@ const Wt = (e, i) => {
         styleOverrides: {
           root: {
             "&.Mui-focusVisible": {
-              boxShadow: `inset 0 0 0 2px ${o.info.main}`
+              boxShadow: `inset 0 0 0 2px ${r.info.main}`
             }
           }
         }
@@ -1401,7 +1402,7 @@ const Wt = (e, i) => {
       MuiFormLabel: {
         styleOverrides: {
           asterisk: {
-            color: o.error.main
+            color: r.error.main
           }
         }
       },
@@ -1449,13 +1450,13 @@ const Wt = (e, i) => {
             borderRadius: 4
           },
           colorPrimary: {
-            backgroundColor: o.grey[300]
+            backgroundColor: r.grey[300]
           }
         }
       },
       MuiLink: {
         styleOverrides: {
-          root: ({ theme: t, color: s }) => ({
+          root: ({ theme: t, color: n }) => ({
             cursor: "pointer",
             fontWeight: 600,
             textDecoration: "none",
@@ -1470,7 +1471,7 @@ const Wt = (e, i) => {
               backgroundColor: t.palette.action.hover
             },
             "&:active": {
-              backgroundColor: t.palette.mode === I.LIGHT ? t.palette[s].light : t.palette[s].dark
+              backgroundColor: t.palette.mode === y.LIGHT ? t.palette[n].light : t.palette[n].dark
             }
           })
         }
@@ -1555,7 +1556,7 @@ const Wt = (e, i) => {
             },
             secondary: {
               fontSize: 11,
-              color: o.text.secondary
+              color: r.text.secondary
             }
           }
         },
@@ -1576,7 +1577,7 @@ const Wt = (e, i) => {
             lineHeight: "inherit",
             top: -1,
             // This fixes an issue where there is a 1px gap when the subheader sticks to the top while scrolling
-            backgroundColor: o.background.default
+            backgroundColor: r.background.default
           }
         }
       },
@@ -1650,9 +1651,9 @@ const Wt = (e, i) => {
             gridColumn: "1/4",
             "& > .MuiTypography-root": {
               textTransform: "uppercase",
-              fontSize: l.body2.fontSize,
+              fontSize: s.body2.fontSize,
               fontWeight: 600,
-              lineHeight: l.body2.lineHeight
+              lineHeight: s.body2.lineHeight
             }
           }
         }
@@ -1746,7 +1747,7 @@ const Wt = (e, i) => {
             fontWeight: 600,
             "&.Mui-focusVisible": {
               outline: "none",
-              boxShadow: `inset 0 0 0 2px ${o.info.main}`,
+              boxShadow: `inset 0 0 0 2px ${r.info.main}`,
               borderRadius: 4
             }
           }
@@ -1757,7 +1758,7 @@ const Wt = (e, i) => {
           root: {
             borderBottomStyle: "solid",
             borderBottomWidth: 1,
-            borderColor: o.divider,
+            borderColor: r.divider,
             marginBottom: 8
           }
         }
@@ -1773,7 +1774,7 @@ const Wt = (e, i) => {
         },
         styleOverrides: {
           root: {
-            backgroundColor: o.background.paper
+            backgroundColor: r.background.paper
           }
         }
       },
@@ -1783,53 +1784,54 @@ const Wt = (e, i) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: {
-            color: o.text.primary,
+          root: ({ theme: t }) => ({
             fontSize: 13,
             lineHeight: "16px",
             textTransform: "none",
             "&:focus-visible": {
-              outline: `2px solid ${o.info.main}`,
+              outline: `2px solid ${r.info.main}`,
               outlineOffset: "2px"
             },
             "&:hover": {
-              backgroundColor: f(o.primary.main, o.mode === I.LIGHT ? 0.1 : 0.2),
-              borderColor: o.primary.main
+              backgroundColor: m(
+                t.palette.primary.main,
+                r.mode === y.LIGHT ? 0.1 : 0.2
+              ),
+              borderColor: t.palette.primary.main
             },
             "&.Mui-selected": {
               fontWeight: 600,
-              borderColor: o.primary.main,
+              borderColor: t.palette.primary.main,
               "&:hover": {
-                boxShadow: `inset 0px 0px 0px 2px ${o.primary.main}`
+                boxShadow: `inset 0px 0px 0px 2px ${t.palette.primary.main}`
               }
             },
             "& .MuiTouchRipple-root": {
-              "& .MuiTouchRipple-ripple": {
-                "& .MuiTouchRipple-child": {
-                  backgroundColor: o.primary.main
-                }
+              "& .MuiTouchRipple-child": {
+                backgroundColor: t.palette.primary.main,
+                borderRadius: t.shape.borderRadius
               }
             }
-          }
+          })
         },
         variants: [
           {
             props: { color: "error" },
             style: {
               "&:hover": {
-                backgroundColor: f(o.error.main, o.mode === I.LIGHT ? 0.1 : 0.2),
-                borderColor: o.error.main
+                backgroundColor: m(r.error.main, r.mode === y.LIGHT ? 0.1 : 0.2),
+                borderColor: r.error.main
               },
               "&.Mui-selected": {
-                borderColor: o.error.main,
+                borderColor: r.error.main,
                 "&:hover": {
-                  boxShadow: `inset 0px 0px 0px 2px ${o.error.main}`
+                  boxShadow: `inset 0px 0px 0px 2px ${r.error.main}`
                 }
               },
               "& .MuiTouchRipple-root": {
                 "& .MuiTouchRipple-ripple": {
                   "& .MuiTouchRipple-child": {
-                    backgroundColor: o.error.main
+                    backgroundColor: r.error.main
                   }
                 }
               }
@@ -1839,22 +1841,22 @@ const Wt = (e, i) => {
             props: { color: "standard" },
             style: {
               "&:hover": {
-                backgroundColor: f(
-                  o.secondary.main,
-                  o.mode === I.LIGHT ? 0.1 : 0.2
+                backgroundColor: m(
+                  r.secondary.main,
+                  r.mode === y.LIGHT ? 0.1 : 0.2
                 ),
-                borderColor: o.secondary.main
+                borderColor: r.secondary.main
               },
               "&.Mui-selected": {
-                borderColor: o.secondary.main,
+                borderColor: r.secondary.main,
                 "&:hover": {
-                  boxShadow: `inset 0px 0px 0px 2px ${o.secondary.main}`
+                  boxShadow: `inset 0px 0px 0px 2px ${r.secondary.main}`
                 }
               },
               "& .MuiTouchRipple-root": {
                 "& .MuiTouchRipple-ripple": {
                   "& .MuiTouchRipple-child": {
-                    backgroundColor: o.secondary.main
+                    backgroundColor: r.secondary.main
                   }
                 }
               }
@@ -1895,7 +1897,7 @@ export {
   Ue as H1,
   Dt as H2,
   wt as H3,
-  K as INTER,
+  X as INTER,
   x as Icon,
   zt as InstitutionLogo,
   vt as MXLogoCopyrightIcon,