@mxenabled/mxui 2.0.0-alpha.1 → 2.0.0

package/dist/index.es.js

@@ -1,52 +1,52 @@
 import { jsx as a, jsxs as T } from "react/jsx-runtime";
 import L from "react";
 import E from "@mui/material/Stack";
-import { useTheme as O, createTheme as Y } from "@mui/material/styles";
-import { Icon as re, Close as te } from "@mxenabled/mx-icons";
+import { useTheme as y, createTheme as K } from "@mui/material/styles";
+import { Icon as re, Close as ie } from "@mxenabled/mx-icons";
 import { endOfMonth as $ } from "date-fns/endOfMonth";
-import { endOfYear as ie } from "date-fns/endOfYear";
-import { startOfToday as ae } from "date-fns/startOfToday";
+import { endOfYear as ae } from "date-fns/endOfYear";
+import { startOfToday as ne } from "date-fns/startOfToday";
 import { startOfMonth as U } from "date-fns/startOfMonth";
 import { startOfYear as G } from "date-fns/startOfYear";
-import { subDays as W } from "date-fns/subDays";
-import { subMonths as ne } from "date-fns/subMonths";
-import { subYears as le } from "date-fns/subYears";
-import se from "@mui/material/useMediaQuery";
-import { LocalizationProvider as ce, StaticDateRangePicker as de } from "@mui/x-date-pickers-pro";
-import { AdapterDateFns as pe } from "@mui/x-date-pickers-pro/AdapterDateFnsV3";
-import K from "@mui/material/Box";
-import ue from "@mui/material/ToggleButton";
-import he from "@mui/material/ToggleButtonGroup";
-import j from "@mui/material/Slide";
+import { subDays as V } from "date-fns/subDays";
+import { subMonths as le } from "date-fns/subMonths";
+import { subYears as se } from "date-fns/subYears";
+import ce from "@mui/material/useMediaQuery";
+import { usePickerContext as de, useIsValidValue as pe, LocalizationProvider as ue, StaticDateRangePicker as he } from "@mui/x-date-pickers-pro";
+import { AdapterDateFns as ge } from "@mui/x-date-pickers-pro/AdapterDateFns";
+import j from "@mui/material/Box";
+import fe from "@mui/material/ToggleButton";
+import me from "@mui/material/ToggleButtonGroup";
+import X from "@mui/material/Slide";
 import P from "@mui/material/Button";
-import X from "@mui/material/IconButton";
-import ge from "@mui/material/Typography";
-import fe from "@mui/material/Drawer";
-import me from "@mui/material/TextField";
-import be from "@mui/material/Snackbar";
-import Te from "@mui/material/Alert";
-import { FormControlLabel as xe, Box as B, Typography as V, Radio as _, Checkbox as Re, alpha as m, darken as N, lighten as I, getContrastRatio as Me } from "@mui/material";
-import { circularProgressClasses as Se } from "@mui/material/CircularProgress";
-import { LicenseInfo as Ce } from "@mui/x-license-pro";
+import Z from "@mui/material/IconButton";
+import be from "@mui/material/Typography";
+import Te from "@mui/material/Drawer";
+import xe from "@mui/material/TextField";
+import Re from "@mui/material/Snackbar";
+import Me from "@mui/material/Alert";
+import { FormControlLabel as Ce, Box as B, Typography as W, Radio as _, Checkbox as Se, alpha as m, darken as N, lighten as I, getContrastRatio as Ae } from "@mui/material";
+import { circularProgressClasses as Oe } from "@mui/material/CircularProgress";
+import { LicenseInfo as ye } from "@mui/x-license";
 const D = ({
   children: e,
   height: i,
-  size: r = 16,
+  size: o = 16,
   viewBox: n = "0 0 16 16",
-  width: o
+  width: t
 }) => /* @__PURE__ */ a(
   "svg",
   {
     "aria-hidden": !0,
     className: "mx-kmui-icon",
     focusable: !1,
-    height: i || r,
+    height: i || o,
     viewBox: n,
-    width: o || r,
+    width: t || o,
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
-), R = ({ color: e, fill: i = !1, name: r, size: n = 20, sx: o, ...s }) => /* @__PURE__ */ a(re, { color: e, fill: i, name: r, size: n, sx: o, ...s }), fo = ({
+), R = ({ color: e, fill: i = !1, name: o, size: n = 20, sx: t, ...s }) => /* @__PURE__ */ a(re, { color: e, fill: i, name: o, size: n, sx: t, ...s }), mt = ({
   color: e = "currentColor",
   ...i
 }) => /* @__PURE__ */ T(D, { ...i, children: [
@@ -64,7 +64,7 @@ const D = ({
       fill: e
     }
   )
-] }), mo = ({
+] }), bt = ({
   color: e = "currentColor",
   ...i
 }) => /* @__PURE__ */ T(D, { ...i, children: [
@@ -100,7 +100,7 @@ const D = ({
       fillRule: "evenodd"
     }
   )
-] }), bo = ({
+] }), Tt = ({
   color: e = "currentColor",
   ...i
 }) => /* @__PURE__ */ a(D, { ...i, children: /* @__PURE__ */ a(
@@ -111,7 +111,7 @@ const D = ({
     fill: e,
     fillRule: "evenodd"
   }
-) }), To = ({
+) }), xt = ({
   color: e = "currentColor",
   ...i
 }) => /* @__PURE__ */ T(D, { ...i, children: [
@@ -139,12 +139,12 @@ const D = ({
     }
   )
 ] });
-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 || {}), Ae = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(Ae || {});
-const Z = {
+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 || {}), Ie = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(Ie || {});
+const Q = {
   guid: g.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
-}, ye = [
+}, Ee = [
   {
     guid: g.AutoTransport,
     colorName: "autoTransport",
@@ -245,16 +245,16 @@ const Z = {
     colorName: "travel",
     icon: "airplane_ticket"
   },
-  Z
-], Oe = 0.625, Ie = ({
+  Q
+], ve = 0.625, Fe = ({
   categoryGuid: e,
-  icon_ratio: i = Oe,
-  size: r = 32,
+  icon_ratio: i = ve,
+  size: o = 32,
   sx: n = {},
-  variant: o = "filled"
+  variant: t = "filled"
 }) => {
-  const s = O(), l = L.useMemo(
-    () => ye.find((p) => p.guid === e) ?? Z,
+  const s = y(), l = L.useMemo(
+    () => Ee.find((p) => p.guid === e) ?? Q,
     [e]
   ), d = s.palette.categories[l.colorName];
   return /* @__PURE__ */ a(
@@ -263,38 +263,33 @@ const Z = {
       alignItems: "center",
       bgcolor: () => {
         let p = d;
-        return o === "twotone" && (p = `${p}20`), o === "transparent" || o === "basic" ? "transparent" : p;
+        return t === "twotone" && (p = `${p}20`), t === "transparent" || t === "basic" ? "transparent" : p;
       },
       borderRadius: 1,
       color: () => {
-        const p = o === "filled" ? s.palette.common.white : d;
-        return o === "basic" ? s.palette.text.primary : p;
+        const p = t === "filled" ? s.palette.common.white : d;
+        return t === "basic" ? s.palette.text.primary : p;
       },
-      height: r,
+      height: o,
       justifyContent: "center",
       sx: [...Array.isArray(n) ? n : [n]],
-      width: r,
-      children: /* @__PURE__ */ a(R, { name: l.icon, size: r * i })
+      width: o,
+      children: /* @__PURE__ */ a(R, { name: l.icon, size: o * i })
     }
   );
-}, Ee = ({
-  items: e,
-  onChange: i,
-  isValid: r,
-  selected: n
-}) => {
-  const o = O(), s = e?.map((l) => {
-    const d = l.getValue({ isValid: r });
+}, Ne = ({ items: e, selected: i }) => {
+  const o = y(), { setValue: n } = de(), t = pe(), s = e?.map((l) => {
+    const d = l.getValue({ isValid: t });
     return {
       label: l.label,
       onClick: () => {
-        i(d, "accept", l);
+        n(d, { changeImportance: "accept", shortcut: l });
       },
-      disabled: !r(d)
+      disabled: !t(d)
     };
   });
-  return /* @__PURE__ */ a(K, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(he, { color: "primary", orientation: "vertical", value: n, children: s?.map((l) => /* @__PURE__ */ a(
-    ue,
+  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: i, children: s?.map((l) => /* @__PURE__ */ a(
+    fe,
     {
       onClick: l.onClick,
       sx: {
@@ -321,19 +316,19 @@ const Z = {
     },
     l.label
   )) }) });
-}, xo = ({
+}, Rt = ({
   copy: e,
   dateRange: i,
-  onRangeChanged: r,
+  onRangeChanged: o,
   selectedShortcut: n = e.dateRangeThisMonth,
-  sx: o = {}
+  sx: t = {}
 }) => {
-  const s = O(), l = se(s.breakpoints.down("sm")), d = L.useMemo(() => {
-    const t = ae(), p = ne(t, 1), b = le(t, 1);
+  const s = y(), l = ce(s.breakpoints.down("sm")), d = L.useMemo(() => {
+    const r = ne(), p = le(r, 1), b = se(r, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [U(t), $(t)]
+        getValue: () => [U(r), $(r)]
       },
       {
         label: e.dateRangeLastMonth,
@@ -341,31 +336,31 @@ const Z = {
       },
       {
         label: e.dateRangeLast30Days,
-        getValue: () => [W(t, 30), t]
+        getValue: () => [V(r, 30), r]
       },
       {
         label: e.dateRangeLast90Days,
-        getValue: () => [W(t, 90), t]
+        getValue: () => [V(r, 90), r]
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [G(t), t]
+        getValue: () => [G(r), r]
       },
       {
         label: e.dateRangeLastYear,
-        getValue: () => [G(b), ie(b)]
+        getValue: () => [G(b), ae(b)]
       },
       {
         label: e.dateRangeCustom,
-        getValue: () => [t, t]
+        getValue: () => [r, r]
       }
     ];
-  }, [e]), c = (t, p) => {
+  }, [e]), c = (r, p) => {
     const b = p.shortcut;
-    r?.(t, b ? b.label : e.dateRangeCustom);
+    o?.(r, b ? b.label : e.dateRangeCustom);
   };
-  return /* @__PURE__ */ a(E, { gap: 16, m: 8, children: /* @__PURE__ */ a(ce, { dateAdapter: pe, children: /* @__PURE__ */ a(
-    de,
+  return /* @__PURE__ */ a(E, { gap: 16, m: 8, children: /* @__PURE__ */ a(ue, { dateAdapter: ge, children: /* @__PURE__ */ a(
+    he,
     {
       calendars: 1,
       localeText: {
@@ -386,21 +381,21 @@ const Z = {
       },
       slots: {
         leftArrowIcon: () => /* @__PURE__ */ a(R, { name: "chevron_left", size: 28 }),
-        shortcuts: (t) => /* @__PURE__ */ a(Ee, { selected: n, ...t }),
+        shortcuts: (r) => /* @__PURE__ */ a(Ne, { selected: n, ...r }),
         rightArrowIcon: () => /* @__PURE__ */ a(R, { name: "chevron_right", size: 28 })
       },
-      sx: { ...o },
+      sx: { ...t },
       value: i
     }
   ) }) });
-}, Ro = L.forwardRef(function(i, r) {
-  return /* @__PURE__ */ a(j, { direction: "up", ref: r, ...i });
-}), ve = ({
+}, Mt = L.forwardRef(function(i, o) {
+  return /* @__PURE__ */ a(X, { direction: "up", ref: o, ...i });
+}), He = ({
   hasSecondaryAction: e = !0,
   isPrimaryDisabled: i,
-  onPrimaryAction: r,
+  onPrimaryAction: o,
   onSecondaryAction: n,
-  primaryColor: o = "primary",
+  primaryColor: t = "primary",
   primaryText: s = "Save",
   secondaryColor: l = "primary",
   secondaryText: d = "Cancel"
@@ -410,23 +405,23 @@ const Z = {
     direction: "row",
     gap: 16,
     justifyContent: "flex-end",
-    sx: { bgcolor: "background.paper", width: "100%", p: 24 },
+    sx: { bgcolor: "background.paper", p: 24 },
     children: [
       e && /* @__PURE__ */ a(
         P,
         {
           color: l,
           onClick: n,
-          variant: r ? "outlined" : "contained",
+          variant: o ? "outlined" : "contained",
           children: d
         }
       ),
-      r && /* @__PURE__ */ a(
+      o && /* @__PURE__ */ a(
         P,
         {
-          color: o,
+          color: t,
           disabled: i,
-          onClick: r,
+          onClick: o,
           variant: "contained",
           children: s
         }
@@ -436,14 +431,14 @@ const Z = {
 ), v = ({
   bold: e,
   className: i = "",
-  children: r,
+  children: o,
   color: n,
-  sx: o = {},
+  sx: t = {},
   truncate: s = !0,
   uppercase: l,
   ...d
 }) => /* @__PURE__ */ a(
-  ge,
+  be,
   {
     className: `mx-kmui-text ${i}`,
     color: n,
@@ -459,22 +454,22 @@ const Z = {
       l ? {
         textTransform: "uppercase"
       } : {},
-      ...Array.isArray(o) ? o : [o]
+      ...Array.isArray(t) ? t : [t]
     ],
     ...d,
-    children: r
+    children: o
   }
-), Fe = ({ className: e = "", children: i, ...r }) => /* @__PURE__ */ a(v, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...r, children: i }), Mo = ({ className: e = "", children: i, ...r }) => /* @__PURE__ */ a(v, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...r, children: i }), So = ({ className: e = "", children: i, ...r }) => /* @__PURE__ */ a(v, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...r, children: i }), Co = ({ className: e = "", children: i, truncate: r, ...n }) => /* @__PURE__ */ a(
+), Le = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(v, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...o, children: i }), Ct = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(v, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...o, children: i }), St = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(v, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...o, children: i }), At = ({ className: e = "", children: i, truncate: o, ...n }) => /* @__PURE__ */ a(
   v,
   {
     className: `mx-mxui-text p ${e}`,
     component: "p",
-    truncate: r || !1,
+    truncate: o || !1,
     variant: "body1",
     ...n,
     children: i
   }
-), Ao = ({ copy: e, onClose: i }) => /* @__PURE__ */ T(
+), Ot = ({ copy: e, onClose: i }) => /* @__PURE__ */ T(
   E,
   {
     sx: {
@@ -485,81 +480,81 @@ const Z = {
       py: 14
     },
     children: [
-      /* @__PURE__ */ a(Fe, { variant: "h3", children: e.title }),
-      /* @__PURE__ */ a(X, { "aria-label": e.close_aria, onClick: i, sx: { mr: -12 }, children: /* @__PURE__ */ a(te, {}) })
+      /* @__PURE__ */ a(Le, { variant: "h3", children: e.title }),
+      /* @__PURE__ */ a(Z, { "aria-label": e.close_aria, onClick: i, sx: { mr: -12 }, children: /* @__PURE__ */ a(ie, {}) })
     ]
   }
-), yo = ({
+), yt = ({
   className: e,
   disableSave: i,
-  id: r,
+  id: o,
   isOpen: n,
-  onClose: o,
+  onClose: t,
   onSave: s,
   primaryText: l,
   secondaryText: d,
   children: c,
-  ...t
+  ...r
 }) => /* @__PURE__ */ T(
-  fe,
+  Te,
   {
     anchor: "right",
     className: `mx-kmui-drawer ${e}`,
-    id: r ?? void 0,
-    onClose: o,
+    id: o ?? void 0,
+    onClose: t,
     open: n,
     variant: "temporary",
-    ...t,
+    ...r,
     children: [
       c,
       s && /* @__PURE__ */ a(
-        ve,
+        He,
         {
           isPrimaryDisabled: i,
           onPrimaryAction: s,
-          onSecondaryAction: o,
+          onSecondaryAction: t,
           primaryText: l,
           secondaryText: d
         }
       )
     ]
   }
-), Q = 32, z = "https://content.moneydesktop.com/storage/MD_Assets", Ne = `${z}/serenity/default_institution_logo.png`, Oo = ({
+), J = 32, z = "https://content.moneydesktop.com/storage/MD_Assets", De = `${z}/serenity/default_institution_logo.png`, It = ({
   alt: e,
   institutionGuid: i,
-  logoUrl: r,
-  size: n = Q,
-  ...o
+  logoUrl: o,
+  size: n = J,
+  ...t
 }) => /* @__PURE__ */ a(
   "img",
   {
     alt: e,
     height: n,
-    onError: (s) => s.target.src = Ne,
-    src: r || `${z}/Ipad%20Logos/100x100/${i}_100x100.png`,
+    onError: (s) => s.target.src = De,
+    src: o || `${z}/Ipad%20Logos/100x100/${i}_100x100.png`,
     style: {
       borderRadius: 4
     },
     width: n,
-    ...o
+    ...t
   }
-), Io = ({
+), Et = ({
   alt: e = "",
   categoryGuid: i,
-  merchantGuid: r,
-  size: n = Q,
-  ...o
+  merchantGuid: o,
+  size: n = J,
+  ...t
 }) => {
-  const [s, l] = L.useState(!1), d = O();
-  return /* @__PURE__ */ T(K, { display: "inline-block", position: "relative", ...o, children: [
-    r && !s && /* @__PURE__ */ a(
+  const [s, l] = L.useState(!1), d = y();
+  return /* @__PURE__ */ T(j, { display: "inline-block", position: "relative", ...t, children: [
+    o && !s && /* @__PURE__ */ a(
       "img",
       {
         alt: e,
         "aria-hidden": !e,
         height: n,
         onError: () => l(!0),
-        src: `${z}/merchant_logos/${r}.png`,
+        src: `${z}/merchant_logos/${o}.png`,
         style: {
           backgroundColor: d.palette.common.white,
           borderRadius: 4,
@@ -569,43 +564,43 @@ const Z = {
         width: n
       }
     ),
-    /* @__PURE__ */ a(Ie, { categoryGuid: i, size: n })
+    /* @__PURE__ */ a(Fe, { categoryGuid: i, size: n })
   ] });
-}, Eo = ({
+}, vt = ({
   disabled: e = !1,
   label: i = "",
-  shrink: r = !0,
+  shrink: o = !0,
   variant: n = "outlined",
-  ...o
+  ...t
 }) => /* @__PURE__ */ a(
-  me,
+  xe,
   {
     InputLabelProps: {
-      shrink: r
+      shrink: o
     },
     disabled: e,
     label: i,
     variant: n,
-    ...o
+    ...t
   }
 );
-function He(e) {
-  return /* @__PURE__ */ a(j, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
+function ke(e) {
+  return /* @__PURE__ */ a(X, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
-const vo = ({
+const Ft = ({
   open: e,
   handleClose: i,
-  message: r,
+  message: o,
   autoHideDuration: n = 3e3,
-  severity: o = "success",
+  severity: t = "success",
   snackbarSx: s,
   showAction: l = !1,
   showClose: d = !1,
   actionText: c = "Undo",
-  onActionClick: t,
+  onActionClick: r,
   multiLine: p = !1
 }) => {
-  const b = O(), F = /* @__PURE__ */ T(
+  const b = y(), F = /* @__PURE__ */ T(
     E,
     {
       alignItems: p ? "flex-end" : "center",
@@ -619,7 +614,7 @@ const vo = ({
           P,
           {
             color: "inherit",
-            onClick: t || i,
+            onClick: r || i,
             size: "small",
             sx: {
               color: b.palette.success.contrastText,
@@ -629,7 +624,7 @@ const vo = ({
           }
         ),
         d && /* @__PURE__ */ a(
-          X,
+          Z,
           {
             "aria-label": "close",
             color: "inherit",
@@ -642,9 +637,9 @@ const vo = ({
     }
   );
   return /* @__PURE__ */ a(
-    be,
+    Re,
     {
-      TransitionComponent: He,
+      TransitionComponent: ke,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       autoHideDuration: n,
       onClose: i,
@@ -654,10 +649,10 @@ const vo = ({
         width: p ? 400 : 325
       },
       children: /* @__PURE__ */ a(
-        Te,
+        Me,
         {
           action: F,
-          severity: o,
+          severity: t,
           sx: {
             display: "flex",
             alignItems: "stretch",
@@ -688,33 +683,33 @@ const vo = ({
                 textOverflow: p ? "clip" : "ellipsis"
               },
               truncate: !p,
-              children: r
+              children: o
             }
           )
         }
       )
     }
   );
-}, Fo = ({
+}, Nt = ({
   component: e = _,
   variant: i = "outlined",
-  selected: r,
+  selected: o,
   onChange: n,
-  headline: o,
+  headline: t,
   message: s,
   name: l,
   value: d,
   disabled: c = !1,
-  error: t = !1,
+  error: r = !1,
   icon: p = !1,
   sx: b = {},
   ...F
 }) => {
-  const f = O(), J = () => f.palette.background.paper, w = () => t ? `inset 0px 0px 0px 2px ${f.palette.error.main}` : c ? 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], q = () => c || t ? f.palette.background.paper : m(f.palette.primary.main, 0.1), ee = () => c || t ? w() : 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)}` : w(), oe = () => c || t ? f.palette.background.paper : m(f.palette.primary.main, 0.3);
+  const f = y(), q = () => f.palette.background.paper, w = () => r ? `inset 0px 0px 0px 2px ${f.palette.error.main}` : c ? o ? `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" ? o ? `inset 0px 0px 0px 2px ${m(f.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(f.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${m(f.palette.primary.main, 0.5)}` : f.shadows[1], ee = () => c || r ? f.palette.background.paper : m(f.palette.primary.main, 0.1), te = () => c || r ? w() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${m(f.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(f.palette.primary.main, 0.5)}` : w(), oe = () => c || r ? f.palette.background.paper : m(f.palette.primary.main, 0.3);
   return /* @__PURE__ */ a(
-    xe,
+    Ce,
     {
-      checked: r,
+      checked: o,
       control: e === _ ? /* @__PURE__ */ a(
         _,
         {
@@ -731,7 +726,7 @@ const vo = ({
           ...F
         }
       ) : /* @__PURE__ */ a(
-        Re,
+        Se,
         {
           name: l,
           sx: {
@@ -750,8 +745,8 @@ const vo = ({
       label: /* @__PURE__ */ T(B, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
         p && /* @__PURE__ */ a(B, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: p }),
         /* @__PURE__ */ T(B, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
-          o && /* @__PURE__ */ a(V, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: o }),
-          /* @__PURE__ */ a(V, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: s })
+          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 })
         ] })
       ] }),
       labelPlacement: "start",
@@ -765,7 +760,7 @@ const vo = ({
         mb: 16,
         cursor: c ? "not-allowed" : "pointer",
         opacity: c ? 0.6 : 1,
-        backgroundColor: J(),
+        backgroundColor: q(),
         border: "none",
         boxShadow: w(),
         boxSizing: "border-box",
@@ -773,8 +768,8 @@ const vo = ({
           duration: f.transitions.duration.short
         }),
         "&:hover": {
-          backgroundColor: q(),
-          boxShadow: ee()
+          backgroundColor: ee(),
+          boxShadow: te()
         },
         "&:active": {
           backgroundColor: oe()
@@ -788,7 +783,7 @@ const vo = ({
       value: d
     }
   );
-}, y = {
+}, O = {
   LIGHT: "light"
 }, M = (e) => ({
   50: I(e, 0.95),
@@ -801,7 +796,7 @@ const vo = ({
   700: N(e, 0.5),
   800: N(e, 0.65),
   900: N(e, 0.75)
-}), x = "#FFFFFF", H = "#000000", Le = "#F9F9F9", De = "#1A1A1A", S = {
+}), x = "#FFFFFF", H = "#000000", we = "#F9F9F9", Be = "#1A1A1A", C = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -809,7 +804,7 @@ const vo = ({
   WARNING: "#FF7B00",
   ERROR: "#E32727",
   GREY: "#808080"
-}, C = {
+}, S = {
   CHART1: "#74E4DA",
   CHART2: "#ED64A4",
   CHART3: "#F3DC46",
@@ -870,8 +865,8 @@ const vo = ({
   TRANSFER: "#75C7B7",
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
-}, ke = (e, i) => {
-  const r = M(i?.primary || S.PRIMARY), n = M(i?.secondary || S.SECONDARY), o = M(i?.error || S.ERROR), s = M(i?.warning || S.WARNING), l = M(i?.info || S.INFO), d = M(i?.success || S.SUCCESS), c = M(i?.grey || S.GREY), t = e === y.LIGHT;
+}, _e = (e, i) => {
+  const o = M(i?.primary || C.PRIMARY), n = M(i?.secondary || C.SECONDARY), t = M(i?.error || C.ERROR), s = M(i?.warning || C.WARNING), l = M(i?.info || C.INFO), d = M(i?.success || C.SUCCESS), c = M(i?.grey || C.GREY), r = e === O.LIGHT;
   return {
     mode: e,
     common: {
@@ -879,99 +874,99 @@ const vo = ({
       black: H
     },
     primary: {
-      ...r,
-      light: t ? r[300] : r[600],
-      main: t ? r[500] : r[400],
-      dark: t ? r[700] : r[200]
+      ...o,
+      light: r ? o[300] : o[600],
+      main: r ? o[500] : o[400],
+      dark: r ? o[700] : o[200]
     },
     secondary: {
       ...n,
-      light: t ? n[300] : n[600],
-      main: t ? n[500] : n[400],
-      dark: t ? n[700] : n[200]
+      light: r ? n[300] : n[600],
+      main: r ? n[500] : n[400],
+      dark: r ? n[700] : n[200]
     },
     neutral: {
       ...c,
-      light: t ? c[300] : c[600],
-      main: t ? c[500] : c[400],
-      dark: t ? c[700] : c[200],
-      contrastText: Me(t ? c[700] : c[400], "#fff") > 4.5 ? x : c[900]
+      light: r ? c[300] : c[600],
+      main: r ? c[500] : c[400],
+      dark: r ? c[700] : c[200],
+      contrastText: Ae(r ? c[700] : c[400], "#fff") > 4.5 ? x : c[900]
     },
     text: {
-      primary: t ? c[900] : x,
-      secondary: t ? c[600] : m(x, 0.7),
-      disabled: t ? c[500] : m(x, 0.38)
+      primary: r ? c[900] : x,
+      secondary: r ? c[600] : m(x, 0.7),
+      disabled: r ? c[500] : m(x, 0.38)
     },
     error: {
-      ...o,
-      light: t ? o[300] : o[600],
-      main: t ? o[500] : o[400],
-      dark: t ? o[700] : o[200]
+      ...t,
+      light: r ? t[300] : t[600],
+      main: r ? t[500] : t[400],
+      dark: r ? t[700] : t[200]
     },
     warning: {
       ...s,
-      light: t ? s[300] : s[600],
-      main: t ? s[500] : s[400],
-      dark: t ? s[700] : s[200]
+      light: r ? s[300] : s[600],
+      main: r ? s[500] : s[400],
+      dark: r ? s[700] : s[200]
     },
     info: {
       ...l,
-      light: t ? l[300] : l[600],
-      main: t ? l[500] : l[400],
-      dark: t ? l[700] : l[200]
+      light: r ? l[300] : l[600],
+      main: r ? l[500] : l[400],
+      dark: r ? l[700] : l[200]
     },
     success: {
       ...d,
-      light: t ? d[300] : d[600],
-      main: t ? d[500] : d[400],
-      dark: t ? d[700] : d[200]
+      light: r ? d[300] : d[600],
+      main: r ? d[500] : d[400],
+      dark: r ? d[700] : d[200]
     },
     grey: c,
     action: {
-      active: t ? m(H, 0.56) : m(x, 0.56),
-      hoverOpacity: t ? 0.1 : 0.2,
-      selectedOpacity: t ? 0.16 : 0.25,
+      active: r ? m(H, 0.56) : m(x, 0.56),
+      hoverOpacity: r ? 0.1 : 0.2,
+      selectedOpacity: r ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: t ? i?.background?.default?.light || Le : i?.background?.default?.dark || H,
-      paper: t ? i?.background?.paper?.light || x : i?.background?.paper?.dark || De,
-      highlight: t ? c[200] : c[600],
-      highlightPrimary: t ? r[100] : r[500]
+      default: r ? i?.background?.default?.light || we : i?.background?.default?.dark || H,
+      paper: r ? i?.background?.paper?.light || x : i?.background?.paper?.dark || Be,
+      highlight: r ? c[200] : c[600],
+      highlightPrimary: r ? o[100] : o[500]
     },
-    divider: t ? m(H, 0.12) : m(x, 0.24),
+    divider: r ? m(H, 0.12) : m(x, 0.24),
     categories: {
-      autoTransport: t ? u.AUTO_TRANSPORTT : h.AUTO_TRANSPORTT,
-      billsUtilities: t ? u.BILLS_UTILITIES : h.BILLS_UTILITIES,
-      businessServices: t ? u.BUSINESS_SERVICES : h.BUSINESS_SERVICES,
-      education: t ? u.EDUCATION : h.EDUCATION,
-      entertainment: t ? u.ENTERTAINMENT : h.ENTERTAINMENT,
-      feesCharges: t ? u.FEES_CHARGES : h.FEES_CHARGES,
-      financial: t ? u.FINANCIAL : h.FINANCIAL,
-      foodDining: t ? u.FOOD_DINING : h.FOOD_DINING,
-      giftsDonations: t ? u.GIFTS_DONATIONS : h.GIFTS_DONATIONS,
-      healthFitness: t ? u.HEALTH_FITNESS : h.HEALTH_FITNESS,
-      home: t ? u.HOME : h.HOME,
-      income: t ? u.INCOME : h.INCOME,
-      investments: t ? u.INVESTMENTS : h.INVESTMENTS,
-      kids: t ? u.KIDS : h.KIDS,
-      others: t ? u.OTHERS : h.OTHERS,
-      personalCare: t ? u.PERSONAL_CARE : h.PERSONAL_CARE,
-      pets: t ? u.PETS : h.PETS,
-      shopping: t ? u.SHOPPING : h.SHOPPING,
-      taxes: t ? u.TAXES : h.TAXES,
-      transfer: t ? u.TRANSFER : h.TRANSFER,
-      travel: t ? u.TRAVEL : h.TRAVEL,
-      uncategorized: t ? u.UNCATEGORIZED : h.UNCATEGORIZED
+      autoTransport: r ? u.AUTO_TRANSPORTT : h.AUTO_TRANSPORTT,
+      billsUtilities: r ? u.BILLS_UTILITIES : h.BILLS_UTILITIES,
+      businessServices: r ? u.BUSINESS_SERVICES : h.BUSINESS_SERVICES,
+      education: r ? u.EDUCATION : h.EDUCATION,
+      entertainment: r ? u.ENTERTAINMENT : h.ENTERTAINMENT,
+      feesCharges: r ? u.FEES_CHARGES : h.FEES_CHARGES,
+      financial: r ? u.FINANCIAL : h.FINANCIAL,
+      foodDining: r ? u.FOOD_DINING : h.FOOD_DINING,
+      giftsDonations: r ? u.GIFTS_DONATIONS : h.GIFTS_DONATIONS,
+      healthFitness: r ? u.HEALTH_FITNESS : h.HEALTH_FITNESS,
+      home: r ? u.HOME : h.HOME,
+      income: r ? u.INCOME : h.INCOME,
+      investments: r ? u.INVESTMENTS : h.INVESTMENTS,
+      kids: r ? u.KIDS : h.KIDS,
+      others: r ? u.OTHERS : h.OTHERS,
+      personalCare: r ? u.PERSONAL_CARE : h.PERSONAL_CARE,
+      pets: r ? u.PETS : h.PETS,
+      shopping: r ? u.SHOPPING : h.SHOPPING,
+      taxes: r ? u.TAXES : h.TAXES,
+      transfer: r ? u.TRANSFER : h.TRANSFER,
+      travel: r ? u.TRAVEL : h.TRAVEL,
+      uncategorized: r ? u.UNCATEGORIZED : h.UNCATEGORIZED
     },
     chart: {
-      chart1: C.CHART1,
-      chart2: C.CHART2,
-      chart3: C.CHART3,
-      chart4: C.CHART4,
-      chart5: C.CHART5,
-      chart6: C.CHART6,
-      chart7: C.CHART7
+      chart1: S.CHART1,
+      chart2: S.CHART2,
+      chart3: S.CHART3,
+      chart4: S.CHART4,
+      chart5: S.CHART5,
+      chart6: S.CHART6,
+      chart7: S.CHART7
     },
     chartMono: {
       chartMono1: A.CHART_MONO1,
@@ -982,8 +977,8 @@ const vo = ({
       chartMono6: A.CHART_MONO6
     }
   };
-}, we = "Inter, Helvetica, Arial, sans-serif", Be = (e) => {
-  const i = e?.fontFamily || we;
+}, Y = "Inter, Helvetica, Arial, sans-serif", Pe = (e) => {
+  const i = e?.fontFamily ? `${e?.fontFamily}, ${Y}` : Y;
   return {
     fontFamily: i,
     fontSize: 15,
@@ -1042,16 +1037,16 @@ const vo = ({
     ...e
   };
 };
-Ce.setLicenseKey(
+ye.setLicenseKey(
   "6e7dd593526efa1f157230ecf06c9b02Tz0xMDA5NjAsRT0xNzYyMDQxNjAwMDAwLFM9cHJvLExNPWFubnVhbCxQVj1RMy0yMDI0LEtWPTI="
 );
-const k = [...Y().shadows];
+const k = [...K().shadows];
 k[1] = "0px 2px 8px rgba(106, 115, 129, 0.12)";
 k[2] = "0px 6px 12px rgba(106, 115, 129, 0.16), 0px 3px 8px rgba(87, 102, 117, 0.06)";
 k[3] = "0px 12px 20px rgba(106, 115, 129, 0.22)";
-const No = (e, i) => {
-  const r = ke(e, i?.paletteOptions), n = Be(i?.typographyOptions);
-  return Y({
+const Ht = (e, i) => {
+  const o = _e(e, i?.paletteOptions), n = Pe(i?.typographyOptions);
+  return K({
     breakpoints: {
       values: {
         xs: 444,
@@ -1061,7 +1056,7 @@ const No = (e, i) => {
         xl: 1536
       }
     },
-    palette: r,
+    palette: o,
     shadows: k,
     shape: {
       borderRadius: i?.shapeOptions?.borderRadius || 4
@@ -1081,19 +1076,19 @@ const No = (e, i) => {
           variant: "outlined"
         },
         styleOverrides: {
-          root: ({ theme: o, ownerState: s }) => {
+          root: ({ theme: t, ownerState: s }) => {
             const l = s.severity || "info";
-            let d = o.palette.mode === y.LIGHT ? o.palette[l]?.[50] : o.palette[l]?.[800];
+            let d = t.palette.mode === O.LIGHT ? t.palette[l]?.[50] : t.palette[l]?.[800];
             if (s.variant === "filled") {
               const c = l === "warning";
-              d = o.palette[l]?.[c ? 400 : 600];
+              d = t.palette[l]?.[c ? 400 : 600];
             }
             return {
               backgroundColor: d,
-              borderRadius: o.shape.borderRadius,
+              borderRadius: t.shape.borderRadius,
               "& .MuiAlert-message": {
-                fontSize: o.typography.subtitle1.fontSize,
-                lineHeight: o.typography.subtitle1.lineHeight,
+                fontSize: t.typography.subtitle1.fontSize,
+                lineHeight: t.typography.subtitle1.lineHeight,
                 marginTop: "auto",
                 marginBottom: "auto"
               },
@@ -1119,14 +1114,14 @@ const No = (e, i) => {
           disableElevation: !0
         },
         styleOverrides: {
-          root: ({ theme: o }) => ({
+          root: ({ theme: t }) => ({
             fontWeight: 600,
             textTransform: "none",
             "&.Mui-disabled": {
               cursor: "not-allowed"
             },
             "&.Mui-focusVisible": {
-              outline: `2px solid ${o.palette.info.main}`,
+              outline: `2px solid ${t.palette.info.main}`,
               outlineOffset: "2px"
             }
           }),
@@ -1163,7 +1158,7 @@ const No = (e, i) => {
         styleOverrides: {
           root: {
             "&.Mui-focusVisible": {
-              boxShadow: `inset 0 0 0 2px ${r.info.main}`
+              boxShadow: `inset 0 0 0 2px ${o.info.main}`
             }
           }
         }
@@ -1171,7 +1166,7 @@ const No = (e, i) => {
       MuiCircularProgress: {
         styleOverrides: {
           root: {
-            [`& .${Se.circle}`]: {
+            [`& .${Oe.circle}`]: {
               strokeLinecap: "round"
             }
           }
@@ -1192,22 +1187,22 @@ const No = (e, i) => {
       },
       MuiDataGrid: {
         styleOverrides: {
-          root: ({ theme: o }) => ({
+          root: ({ theme: t }) => ({
             border: "none",
             borderRadius: 0,
-            fontSize: o.typography.body2.fontSize,
+            fontSize: t.typography.body2.fontSize,
             "& .MuiDataGrid-cell": {
               display: "flex",
               alignItems: "center",
               borderTop: "1px solid",
-              borderColor: o.palette.background.highlight
+              borderColor: t.palette.background.highlight
             },
             "& .MuiDataGrid-cell:focus": { outline: "unset" },
             "& .MuiDataGrid-iconSeparator": { display: "none" },
             "& .MuiDataGrid-columnHeaders": {
-              backgroundColor: o.palette.background.paper,
+              backgroundColor: t.palette.background.paper,
               borderBottom: "2px solid",
-              borderColor: o.palette.divider
+              borderColor: t.palette.divider
             },
             "& .MuiDataGrid-columnHeaderTitle": {
               fontWeight: 600
@@ -1225,42 +1220,42 @@ const No = (e, i) => {
       },
       MuiDateRangePickerDay: {
         styleOverrides: {
-          root: ({ theme: o }) => ({
+          root: ({ theme: t }) => ({
             ":first-of-type": {
-              borderTopLeftRadius: o.shape.borderRadius,
-              borderBottomLeftRadius: o.shape.borderRadius,
+              borderTopLeftRadius: t.shape.borderRadius,
+              borderBottomLeftRadius: t.shape.borderRadius,
               "& .MuiDateRangePickerDay-rangeIntervalDayPreview": {
-                borderTopLeftRadius: o.shape.borderRadius,
-                borderBottomLeftRadius: o.shape.borderRadius
+                borderTopLeftRadius: t.shape.borderRadius,
+                borderBottomLeftRadius: t.shape.borderRadius
               }
             },
             ":last-of-type": {
-              borderTopRightRadius: o.shape.borderRadius,
-              borderBottomRightRadius: o.shape.borderRadius,
+              borderTopRightRadius: t.shape.borderRadius,
+              borderBottomRightRadius: t.shape.borderRadius,
               "& .MuiDateRangePickerDay-rangeIntervalDayPreview": {
-                borderTopRightRadius: o.shape.borderRadius,
-                borderBottomRightRadius: o.shape.borderRadius
+                borderTopRightRadius: t.shape.borderRadius,
+                borderBottomRightRadius: t.shape.borderRadius
               }
             },
             "& .Mui-selected": {
-              borderRadius: o.shape.borderRadius
+              borderRadius: t.shape.borderRadius
             },
             "& .MuiPickersDay-dayOutsideMonth": {
-              color: o.palette.action.disabled
+              color: t.palette.action.disabled
             }
           }),
-          day: ({ theme: o }) => ({
-            borderRadius: o.shape.borderRadius
+          day: ({ theme: t }) => ({
+            borderRadius: t.shape.borderRadius
           }),
-          rangeIntervalDayPreview: ({ theme: o }) => ({
-            borderRadius: o.shape.borderRadius
+          rangeIntervalDayPreview: ({ theme: t }) => ({
+            borderRadius: t.shape.borderRadius
           })
         }
       },
       MuiDayCalendar: {
         styleOverrides: {
-          weekDayLabel: ({ theme: o }) => ({
-            fontSize: o.typography.body2.fontSize,
+          weekDayLabel: ({ theme: t }) => ({
+            fontSize: t.typography.body2.fontSize,
             fontWeight: 700
           })
         }
@@ -1302,14 +1297,14 @@ const No = (e, i) => {
       },
       MuiFormHelperText: {
         styleOverrides: {
-          root: ({ theme: o }) => ({
+          root: ({ theme: t }) => ({
             fontSize: 13,
             // Small
             marginLeft: 0,
             display: "flex",
             alignItems: "center",
             position: "relative",
-            color: o.palette.text.secondary,
+            color: t.palette.text.secondary,
             "& .MuiSvgIcon-root": {
               height: "16px",
               width: "16px",
@@ -1325,7 +1320,7 @@ const No = (e, i) => {
       MuiFormLabel: {
         styleOverrides: {
           asterisk: {
-            color: r.error.main
+            color: o.error.main
           }
         }
       },
@@ -1340,19 +1335,19 @@ const No = (e, i) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: ({ theme: o }) => ({
-            borderRadius: o.shape.borderRadius,
+          root: ({ theme: t }) => ({
+            borderRadius: t.shape.borderRadius,
             minHeight: 44,
             // touch target
             minWidth: 44,
             // touch target
             "&.Mui-focusVisible": {
-              outline: `2px solid ${o.palette.info.main}`,
+              outline: `2px solid ${t.palette.info.main}`,
               outlineOffset: "2px"
             },
             "& .MuiTouchRipple-root": {
               "& .MuiTouchRipple-child": {
-                borderRadius: o.shape.borderRadius
+                borderRadius: t.shape.borderRadius
               }
             }
           })
@@ -1373,13 +1368,13 @@ const No = (e, i) => {
             borderRadius: 4
           },
           colorPrimary: {
-            backgroundColor: r.grey[300]
+            backgroundColor: o.grey[300]
           }
         }
       },
       MuiLink: {
         styleOverrides: {
-          root: ({ theme: o, color: s }) => ({
+          root: ({ theme: t, color: s }) => ({
             cursor: "pointer",
             fontWeight: 600,
             textDecoration: "none",
@@ -1391,10 +1386,10 @@ const No = (e, i) => {
               outlineOffset: "2px"
             },
             "&:hover": {
-              backgroundColor: o.palette.action.hover
+              backgroundColor: t.palette.action.hover
             },
             "&:active": {
-              backgroundColor: o.palette.mode === y.LIGHT ? o.palette[s].light : o.palette[s].dark
+              backgroundColor: t.palette.mode === O.LIGHT ? t.palette[s].light : t.palette[s].dark
             }
           })
         }
@@ -1421,9 +1416,9 @@ const No = (e, i) => {
           disablePadding: !0
         },
         styleOverrides: {
-          root: ({ ownerState: o }) => ({
+          root: ({ ownerState: t }) => ({
             minHeight: 64,
-            ...!o.disablePadding && {
+            ...!t.disablePadding && {
               paddingTop: 12,
               paddingBottom: 12,
               paddingLeft: 24
@@ -1447,7 +1442,7 @@ const No = (e, i) => {
       },
       MuiListItemButton: {
         styleOverrides: {
-          root: ({ theme: o }) => ({
+          root: ({ theme: t }) => ({
             minHeight: 64,
             paddingLeft: 24,
             paddingRight: 24,
@@ -1456,7 +1451,7 @@ const No = (e, i) => {
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
               borderRadius: 8,
-              outline: `2px solid ${o.palette.info.main}`,
+              outline: `2px solid ${t.palette.info.main}`,
               outlineOffset: -2
             }
           })
@@ -1479,12 +1474,8 @@ const No = (e, i) => {
             },
             secondary: {
               fontSize: 11,
-              color: "text.primary"
+              color: o.text.secondary
             }
-          },
-          secondaryTypographyProps: {
-            fontSize: 11,
-            color: r.text.secondary
           }
         },
         styleOverrides: {
@@ -1504,7 +1495,7 @@ const No = (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: r.background.default
+            backgroundColor: o.background.default
           }
         }
       },
@@ -1587,11 +1578,11 @@ const No = (e, i) => {
       },
       MuiPickersToolbar: {
         styleOverrides: {
-          content: ({ theme: o }) => ({
+          content: ({ theme: t }) => ({
             marginTop: 4,
             "& .MuiTypography-root": {
-              fontSize: o.typography.h3.fontSize,
-              lineHeight: o.typography.h3.lineHeight
+              fontSize: t.typography.h3.fontSize,
+              lineHeight: t.typography.h3.lineHeight
             }
           })
         }
@@ -1617,7 +1608,7 @@ const No = (e, i) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: ({ theme: o }) => ({
+          root: ({ theme: t }) => ({
             width: 37,
             height: 20,
             padding: 0,
@@ -1628,7 +1619,7 @@ const No = (e, i) => {
               "&.Mui-checked": {
                 transform: "translateX(16px)",
                 "& + .MuiSwitch-track": {
-                  backgroundColor: o.palette.success.main,
+                  backgroundColor: t.palette.success.main,
                   opacity: 1,
                   border: 0
                 },
@@ -1637,27 +1628,27 @@ const No = (e, i) => {
                 }
               },
               "&.Mui-disabled .MuiSwitch-thumb": {
-                color: o.palette.common.white
+                color: t.palette.common.white
               },
               "&.Mui-disabled + .MuiSwitch-track": {
-                backgroundColor: o.palette.action.disabledBackground,
+                backgroundColor: t.palette.action.disabledBackground,
                 opacity: 1
               }
             },
             "& .MuiSwitch-input": {
               "&:focus-visible ~ .MuiSwitch-thumb": {
-                outline: `2px solid ${o.palette.info.main}`,
+                outline: `2px solid ${t.palette.info.main}`,
                 outlineOffset: 0
               }
             },
             "& .MuiSwitch-thumb": {
               boxSizing: "border-box",
-              backgroundColor: o.palette.background.paper,
+              backgroundColor: t.palette.background.paper,
               width: 16,
               height: 16
             },
             "& .MuiSwitch-track": {
-              backgroundColor: o.palette.action.active,
+              backgroundColor: t.palette.action.active,
               borderRadius: 20 / 2,
               opacity: 1
             }
@@ -1674,7 +1665,7 @@ const No = (e, i) => {
             fontWeight: 600,
             "&.Mui-focusVisible": {
               outline: "none",
-              boxShadow: `inset 0 0 0 2px ${r.info.main}`,
+              boxShadow: `inset 0 0 0 2px ${o.info.main}`,
               borderRadius: 4
             }
           }
@@ -1685,21 +1676,23 @@ const No = (e, i) => {
           root: {
             borderBottomStyle: "solid",
             borderBottomWidth: 1,
-            borderColor: r.divider,
+            borderColor: o.divider,
             marginBottom: 8
           }
         }
       },
       MuiTextField: {
         defaultProps: {
-          InputLabelProps: {
-            shrink: !0
+          slotProps: {
+            inputLabel: {
+              shrink: !0
+            }
           },
           variant: "outlined"
         },
         styleOverrides: {
           root: {
-            backgroundColor: r.background.paper
+            backgroundColor: o.background.paper
           }
         }
       },
@@ -1710,29 +1703,29 @@ const No = (e, i) => {
         },
         styleOverrides: {
           root: {
-            color: r.text.primary,
+            color: o.text.primary,
             fontSize: 13,
             lineHeight: "16px",
             textTransform: "none",
             "&:focus-visible": {
-              outline: `2px solid ${r.info.main}`,
+              outline: `2px solid ${o.info.main}`,
               outlineOffset: "2px"
             },
             "&:hover": {
-              backgroundColor: m(r.primary.main, r.mode === y.LIGHT ? 0.1 : 0.2),
-              borderColor: r.primary.main
+              backgroundColor: m(o.primary.main, o.mode === O.LIGHT ? 0.1 : 0.2),
+              borderColor: o.primary.main
             },
             "&.Mui-selected": {
               fontWeight: 600,
-              borderColor: r.primary.main,
+              borderColor: o.primary.main,
               "&:hover": {
-                boxShadow: `inset 0px 0px 0px 2px ${r.primary.main}`
+                boxShadow: `inset 0px 0px 0px 2px ${o.primary.main}`
               }
             },
             "& .MuiTouchRipple-root": {
               "& .MuiTouchRipple-ripple": {
                 "& .MuiTouchRipple-child": {
-                  backgroundColor: r.primary.main
+                  backgroundColor: o.primary.main
                 }
               }
             }
@@ -1743,19 +1736,19 @@ const No = (e, i) => {
             props: { color: "error" },
             style: {
               "&:hover": {
-                backgroundColor: m(r.error.main, r.mode === y.LIGHT ? 0.1 : 0.2),
-                borderColor: r.error.main
+                backgroundColor: m(o.error.main, o.mode === O.LIGHT ? 0.1 : 0.2),
+                borderColor: o.error.main
               },
               "&.Mui-selected": {
-                borderColor: r.error.main,
+                borderColor: o.error.main,
                 "&:hover": {
-                  boxShadow: `inset 0px 0px 0px 2px ${r.error.main}`
+                  boxShadow: `inset 0px 0px 0px 2px ${o.error.main}`
                 }
               },
               "& .MuiTouchRipple-root": {
                 "& .MuiTouchRipple-ripple": {
                   "& .MuiTouchRipple-child": {
-                    backgroundColor: r.error.main
+                    backgroundColor: o.error.main
                   }
                 }
               }
@@ -1766,21 +1759,21 @@ const No = (e, i) => {
             style: {
               "&:hover": {
                 backgroundColor: m(
-                  r.secondary.main,
-                  r.mode === y.LIGHT ? 0.1 : 0.2
+                  o.secondary.main,
+                  o.mode === O.LIGHT ? 0.1 : 0.2
                 ),
-                borderColor: r.secondary.main
+                borderColor: o.secondary.main
               },
               "&.Mui-selected": {
-                borderColor: r.secondary.main,
+                borderColor: o.secondary.main,
                 "&:hover": {
-                  boxShadow: `inset 0px 0px 0px 2px ${r.secondary.main}`
+                  boxShadow: `inset 0px 0px 0px 2px ${o.secondary.main}`
                 }
               },
               "& .MuiTouchRipple-root": {
                 "& .MuiTouchRipple-ripple": {
                   "& .MuiTouchRipple-child": {
-                    backgroundColor: r.secondary.main
+                    backgroundColor: o.secondary.main
                   }
                 }
               }
@@ -1808,32 +1801,32 @@ const No = (e, i) => {
 };
 export {
   D as BaseIcon,
-  Ro as BottomSheetTransition,
+  Mt as BottomSheetTransition,
   g as CategoryGuids,
-  Ie as CategoryIcon,
-  ye as CategoryIconList,
-  Ae as CategoryIconVariants,
-  xo as DateRangePicker,
-  ve as DialogFooter,
-  Ao as DialogHeader,
-  yo as Drawer,
-  ve as Footer,
-  Fe as H1,
-  Mo as H2,
-  So as H3,
-  we as INTER,
+  Fe as CategoryIcon,
+  Ee as CategoryIconList,
+  Ie as CategoryIconVariants,
+  Rt as DateRangePicker,
+  He as DialogFooter,
+  Ot as DialogHeader,
+  yt as Drawer,
+  He as Footer,
+  Le as H1,
+  Ct as H2,
+  St as H3,
+  Y as INTER,
   R as Icon,
-  Oo as InstitutionLogo,
-  mo as MXLogoCopyrightIcon,
-  bo as MXLogoFilledIcon,
-  fo as MXLogoIcon,
-  To as MXLogoOutlineIcon,
-  Io as MerchantLogo,
-  Co as P,
-  Fo as SelectionBox,
+  It as InstitutionLogo,
+  bt as MXLogoCopyrightIcon,
+  Tt as MXLogoFilledIcon,
+  mt as MXLogoIcon,
+  xt as MXLogoOutlineIcon,
+  Et as MerchantLogo,
+  At as P,
+  Nt as SelectionBox,
   v as Text,
-  Eo as TextField,
-  vo as Toast,
-  No as createMXTheme
+  vt as TextField,
+  Ft as Toast,
+  Ht as createMXTheme
 };
 //# sourceMappingURL=index.es.js.map