@mxenabled/mxui 2.16.0 → 2.17.1

package/dist/index.es.js

@@ -1,33 +1,33 @@
 import { jsx as n, jsxs as b } from "react/jsx-runtime";
 import H from "react";
-import S from "@mui/material/Stack";
-import { useTheme as O, createTheme as W } from "@mui/material/styles";
-import { Icon as se, ExpandMore as ce, Close as de } from "@mxenabled/mx-icons";
+import A from "@mui/material/Stack";
+import { useTheme as O, createTheme as U } from "@mui/material/styles";
+import { Icon as ce, ExpandMore as de, Close as pe } from "@mxenabled/mx-icons";
 import { endOfMonth as V } from "date-fns/endOfMonth";
-import { endOfYear as pe } from "date-fns/endOfYear";
-import { startOfToday as ue } from "date-fns/startOfToday";
+import { endOfYear as ue } from "date-fns/endOfYear";
+import { startOfToday as ge } from "date-fns/startOfToday";
 import { startOfMonth as G } from "date-fns/startOfMonth";
 import { startOfYear as K } from "date-fns/startOfYear";
 import { subDays as Y } from "date-fns/subDays";
-import { subMonths as ge } from "date-fns/subMonths";
-import { subYears as he } from "date-fns/subYears";
-import fe from "@mui/material/useMediaQuery";
-import { usePickerContext as Z, useIsValidValue as Q, LocalizationProvider as me, StaticDateRangePicker as be } from "@mui/x-date-pickers-pro";
-import { AdapterDateFns as xe } from "@mui/x-date-pickers-pro/AdapterDateFns";
+import { subMonths as he } from "date-fns/subMonths";
+import { subYears as fe } from "date-fns/subYears";
+import me from "@mui/material/useMediaQuery";
+import { usePickerContext as Q, useIsValidValue as J, LocalizationProvider as be, StaticDateRangePicker as xe } from "@mui/x-date-pickers-pro";
+import { AdapterDateFns as Te } from "@mui/x-date-pickers-pro/AdapterDateFns";
 import L from "@mui/material/Box";
-import Te from "@mui/material/ToggleButton";
-import Me from "@mui/material/ToggleButtonGroup";
-import Re from "@mui/material/MenuItem";
-import J from "@mui/material/TextField";
-import { usePickerLayout as Ce, PickersLayoutRoot as ye, PickersLayoutContentWrapper as Se, pickersLayoutClasses as P } from "@mui/x-date-pickers/PickersLayout";
-import q from "@mui/material/Slide";
+import Me from "@mui/material/ToggleButton";
+import Re from "@mui/material/ToggleButtonGroup";
+import Ce from "@mui/material/MenuItem";
+import q from "@mui/material/TextField";
+import { usePickerLayout as ye, PickersLayoutRoot as Se, PickersLayoutContentWrapper as Ae, pickersLayoutClasses as P } from "@mui/x-date-pickers/PickersLayout";
+import ee from "@mui/material/Slide";
 import $ from "@mui/material/Button";
-import ee from "@mui/material/IconButton";
-import re from "@mui/material/Typography";
-import Ae from "@mui/material/Drawer";
-import Ie from "@mui/material/Snackbar";
-import Oe from "@mui/material/Alert";
-import { FormControlLabel as ve, Box as B, Typography as X, Radio as _, Checkbox as Ee, alpha as f, darken as F, lighten as v, getContrastRatio as ke } from "@mui/material";
+import re from "@mui/material/IconButton";
+import te from "@mui/material/Typography";
+import Ie from "@mui/material/Drawer";
+import Oe from "@mui/material/Snackbar";
+import ve from "@mui/material/Alert";
+import { FormControlLabel as Ee, Box as _, Typography as X, Radio as B, Checkbox as ke, alpha as f, darken as F, lighten as v, getContrastRatio as j } from "@mui/material";
 import { circularProgressClasses as Fe } from "@mui/material/CircularProgress";
 import { LicenseInfo as Le } from "@mui/x-license";
 const D = ({
@@ -48,7 +48,7 @@ const D = ({
     xmlns: "http://www.w3.org/2000/svg",
     children: r
   }
-), T = ({ color: r, fill: i = !1, name: o, size: s = 20, sx: l, ...e }) => /* @__PURE__ */ n(se, { color: r, fill: i, name: o, size: s, sx: l, ...e }), Or = ({
+), M = ({ color: r, fill: i = !1, name: o, size: s = 20, sx: l, ...e }) => /* @__PURE__ */ n(ce, { color: r, fill: i, name: o, size: s, sx: l, ...e }), vr = ({
   color: r = "currentColor",
   ...i
 }) => /* @__PURE__ */ b(D, { ...i, children: [
@@ -66,7 +66,7 @@ const D = ({
       fill: r
     }
   )
-] }), vr = ({
+] }), Er = ({
   color: r = "currentColor",
   ...i
 }) => /* @__PURE__ */ b(D, { ...i, children: [
@@ -102,7 +102,7 @@ const D = ({
       fillRule: "evenodd"
     }
   )
-] }), Er = ({
+] }), kr = ({
   color: r = "currentColor",
   ...i
 }) => /* @__PURE__ */ n(D, { ...i, children: /* @__PURE__ */ n(
@@ -113,7 +113,7 @@ const D = ({
     fill: r,
     fillRule: "evenodd"
   }
-) }), kr = ({
+) }), Fr = ({
   color: r = "currentColor",
   ...i
 }) => /* @__PURE__ */ b(D, { ...i, children: [
@@ -142,7 +142,7 @@ const D = ({
   )
 ] });
 var g = /* @__PURE__ */ ((r) => (r.AutoTransport = "CAT-7829f71c-2e8c-afa5-2f55-fa3634b89874", r.BillsUtilities = "CAT-79b02f2f-2adc-88f0-ac2b-4e71ead9cfc8", r.BusinessServices = "CAT-94b11142-e97b-941a-f67f-6e18d246a23f", r.Education = "CAT-bf5c9cca-c96b-b50d-440d-38d9adfda5b0", r.Entertainment = "CAT-e04e9d1e-e041-c315-2e50-094143ab3f73", r.FeesCharges = "CAT-d73ee74b-13a4-ac3e-4015-fc4ba9a62b2a", r.Financial = "CAT-6c7de3f8-de6c-7061-1dd2-b093044014bf", r.FoodDining = "CAT-bd56d35a-a9a7-6e10-66c1-5b9cc1b6c81a", r.GiftsDonations = "CAT-8edf9663-623e-4735-490e-31288f0a70b0", r.HealthFitness = "CAT-52fa4693-c088-afb2-2a99-7bc39bb23a0f", r.Home = "CAT-b709172b-4eb7-318e-3b5d-e0f0500b32ac", r.Income = "CAT-bf9f3294-4c40-1677-d269-54fbc189faf3", r.Investments = "CAT-ccd42390-9e8c-3fb6-a5d9-6c31182d9c5c", r.Kids = "CAT-0cb1d99d-f558-99e3-2282-b31f359b411a", r.PersonalCare = "CAT-e5154228-fe45-790d-a280-f6bf5ae5ac9f", r.Pets = "CAT-7cccbafa-87d7-c9a6-661b-8b3402fe9e78", r.Shopping = "CAT-aad51b46-d6f7-3da5-fd6e-492328b3023f", r.Taxes = "CAT-d00fc539-aa14-009b-4ffb-7e8c7b839954", r.Transfer = "CAT-bce48142-fea4-ff45-20d9-0a642d44de83", r.Travel = "CAT-ea23d844-cbd1-eb10-f6ac-0df9610e59ae", r.Uncategorized = "CAT-d7851c65-3353-e490-1953-fb9235e681e4", r))(g || {}), Ne = /* @__PURE__ */ ((r) => (r.Basic = "basic", r.Filled = "filled", r.Transparent = "transparent", r.TwoTone = "two-tone", r))(Ne || {});
-const te = {
+const oe = {
   guid: g.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
@@ -247,7 +247,7 @@ const te = {
     colorName: "travel",
     icon: "airplane_ticket"
   },
-  te
+  oe
 ], De = 0.625, we = ({
   categoryGuid: r,
   icon_ratio: i = De,
@@ -256,11 +256,11 @@ const te = {
   variant: l = "filled"
 }) => {
   const e = O(), a = H.useMemo(
-    () => He.find((m) => m.guid === r) ?? te,
+    () => He.find((m) => m.guid === r) ?? oe,
     [r]
   ), c = e.palette.categories[a.colorName];
   return /* @__PURE__ */ n(
-    S,
+    A,
     {
       alignItems: "center",
       bgcolor: () => {
@@ -276,11 +276,11 @@ const te = {
       justifyContent: "center",
       sx: [...Array.isArray(s) ? s : [s]],
       width: o,
-      children: /* @__PURE__ */ n(T, { name: a.icon, size: o * i })
+      children: /* @__PURE__ */ n(M, { name: a.icon, size: o * i })
     }
   );
 }, Pe = ({ items: r, selected: i }) => {
-  const o = O(), { setValue: s } = Z(), l = Q(), e = r?.map((a) => {
+  const o = O(), { setValue: s } = Q(), l = J(), e = r?.map((a) => {
     const c = a.getValue({ isValid: l });
     return {
       label: a.label,
@@ -290,8 +290,8 @@ const te = {
       disabled: !l(c)
     };
   });
-  return /* @__PURE__ */ n(L, { sx: { gridColumn: 1, gridRow: "2/3", ml: "4px", mt: "24px", mr: "32px" }, children: /* @__PURE__ */ n(Me, { color: "primary", orientation: "vertical", value: i, children: e?.map((a) => /* @__PURE__ */ n(
-    Te,
+  return /* @__PURE__ */ n(L, { sx: { gridColumn: 1, gridRow: "2/3", ml: "4px", mt: "24px", mr: "32px" }, children: /* @__PURE__ */ n(Re, { color: "primary", orientation: "vertical", value: i, children: e?.map((a) => /* @__PURE__ */ n(
+    Me,
     {
       onClick: a.onClick,
       sx: {
@@ -318,12 +318,12 @@ const te = {
     },
     a.label
   )) }) });
-}, Be = ({
+}, _e = ({
   items: r,
   selected: i,
   selectLabel: o
 }) => {
-  const { setValue: s } = Z(), l = Q(), e = r?.map((a) => {
+  const { setValue: s } = Q(), l = J(), e = r?.map((a) => {
     const c = a.getValue({ isValid: l });
     return {
       label: a.label,
@@ -333,24 +333,24 @@ const te = {
       disabled: !l(c)
     };
   });
-  return /* @__PURE__ */ n(S, { sx: { py: "16px" }, children: /* @__PURE__ */ n(
-    J,
+  return /* @__PURE__ */ n(A, { sx: { py: "16px" }, children: /* @__PURE__ */ n(
+    q,
     {
       defaultValue: i,
       id: "select",
       label: o,
       select: !0,
-      slotProps: { inputLabel: { shrink: !0 }, select: { IconComponent: ce } },
+      slotProps: { inputLabel: { shrink: !0 }, select: { IconComponent: de } },
       sx: { width: "100%" },
       value: i,
       variant: "outlined",
-      children: e?.map((a) => /* @__PURE__ */ n(Re, { onClick: a.onClick, value: a.label, children: a.label }, a.label))
+      children: e?.map((a) => /* @__PURE__ */ n(Ce, { onClick: a.onClick, value: a.label, children: a.label }, a.label))
     }
   ) });
-}, _e = (r) => {
-  const { toolbar: i, content: o, shortcuts: s, ownerState: l } = Ce(r);
+}, Be = (r) => {
+  const { toolbar: i, content: o, shortcuts: s, ownerState: l } = ye(r);
   return /* @__PURE__ */ b(
-    ye,
+    Se,
     {
       ownerState: l,
       sx: {
@@ -368,12 +368,12 @@ const te = {
         }
       },
       children: [
-        /* @__PURE__ */ b(S, { sx: { gridColumn: 1, gridRow: 1, p: "16px" }, children: [
+        /* @__PURE__ */ b(A, { sx: { gridColumn: 1, gridRow: 1, p: "16px" }, children: [
           s,
           i
         ] }),
         /* @__PURE__ */ n(
-          Se,
+          Ae,
           {
             className: P.contentWrapper,
             ownerState: l,
@@ -383,15 +383,15 @@ const te = {
       ]
     }
   );
-}, Fr = ({
+}, Lr = ({
   copy: r,
   dateRange: i,
   onRangeChanged: o,
   selectedShortcut: s = r.dateRangeThisMonth,
   sx: l = {}
 }) => {
-  const e = O(), a = fe(e.breakpoints.down("sm")), c = H.useMemo(() => {
-    const t = ue(), m = ge(t, 1), x = he(t, 1);
+  const e = O(), a = me(e.breakpoints.down("sm")), c = H.useMemo(() => {
+    const t = ge(), m = he(t, 1), x = fe(t, 1);
     return [
       {
         label: r.dateRangeThisMonth,
@@ -415,7 +415,7 @@ const te = {
       },
       {
         label: r.dateRangeLastYear,
-        getValue: () => [K(x), pe(x)]
+        getValue: () => [K(x), ue(x)]
       },
       {
         label: r.dateRangeCustom,
@@ -426,8 +426,8 @@ const te = {
     const x = m.shortcut;
     o?.(t, x ? x.label : r.dateRangeCustom);
   };
-  return /* @__PURE__ */ n(S, { gap: a ? 0 : "16px", m: a ? 0 : "8px", children: /* @__PURE__ */ n(me, { dateAdapter: xe, children: /* @__PURE__ */ n(
-    be,
+  return /* @__PURE__ */ n(A, { gap: a ? 0 : "16px", m: a ? 0 : "8px", children: /* @__PURE__ */ n(be, { dateAdapter: Te, children: /* @__PURE__ */ n(
+    xe,
     {
       calendars: 1,
       localeText: {
@@ -455,24 +455,24 @@ const te = {
         }
       },
       slots: {
-        ...a && { layout: _e },
-        leftArrowIcon: () => /* @__PURE__ */ n(T, { name: "chevron_left", size: 28 }),
+        ...a && { layout: Be },
+        leftArrowIcon: () => /* @__PURE__ */ n(M, { name: "chevron_left", size: 28 }),
         shortcuts: (t) => a ? /* @__PURE__ */ n(
-          Be,
+          _e,
           {
             selectLabel: r.dateRangeSelectARange,
             selected: s,
             ...t
           }
         ) : /* @__PURE__ */ n(Pe, { selected: s, ...t }),
-        rightArrowIcon: () => /* @__PURE__ */ n(T, { name: "chevron_right", size: 28 })
+        rightArrowIcon: () => /* @__PURE__ */ n(M, { name: "chevron_right", size: 28 })
       },
       sx: { ...l },
       value: i
     }
   ) }) });
-}, Lr = H.forwardRef(function(i, o) {
-  return /* @__PURE__ */ n(q, { direction: "up", ref: o, ...i });
+}, Nr = H.forwardRef(function(i, o) {
+  return /* @__PURE__ */ n(ee, { direction: "up", ref: o, ...i });
 }), ze = ({
   hasSecondaryAction: r = !0,
   isPrimaryDisabled: i,
@@ -483,7 +483,7 @@ const te = {
   secondaryColor: a = "primary",
   secondaryText: c = "Cancel"
 }) => /* @__PURE__ */ b(
-  S,
+  A,
   {
     direction: "row",
     gap: "16px",
@@ -521,7 +521,7 @@ const te = {
   uppercase: a,
   ...c
 }) => /* @__PURE__ */ n(
-  re,
+  te,
   {
     className: `mx-kmui-text ${i}`,
     color: s,
@@ -542,14 +542,14 @@ const te = {
     ...c,
     children: o
   }
-), $e = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text h1 ${r}`, component: "h1", variant: "h1", ...o, children: i }), Nr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text h2 ${r}`, component: "h2", variant: "h2", ...o, children: i }), Hr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text h3 ${r}`, component: "h3", variant: "h3", ...o, children: i }), Dr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text p ${r}`, component: "p", variant: "body1", ...o, children: i }), wr = ({
+), $e = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text h1 ${r}`, component: "h1", variant: "h1", ...o, children: i }), Hr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text h2 ${r}`, component: "h2", variant: "h2", ...o, children: i }), Dr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text h3 ${r}`, component: "h3", variant: "h3", ...o, children: i }), wr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(E, { className: `mx-mxui-text p ${r}`, component: "p", variant: "body1", ...o, children: i }), Pr = ({
   ariaHidden: r = !1,
   copy: i,
   id: o,
   onClose: s,
   truncate: l = !1
 }) => /* @__PURE__ */ b(
-  S,
+  A,
   {
     sx: {
       alignItems: "center",
@@ -569,10 +569,10 @@ const te = {
           children: i.title
         }
       ),
-      /* @__PURE__ */ n(ee, { "aria-label": i.close_aria, onClick: s, sx: { mr: "-12px" }, children: /* @__PURE__ */ n(de, {}) })
+      /* @__PURE__ */ n(re, { "aria-label": i.close_aria, onClick: s, sx: { mr: "-12px" }, children: /* @__PURE__ */ n(pe, {}) })
     ]
   }
-), Pr = ({
+), _r = ({
   className: r,
   disableSave: i,
   id: o,
@@ -584,7 +584,7 @@ const te = {
   children: d,
   ...t
 }) => /* @__PURE__ */ b(
-  Ae,
+  Ie,
   {
     anchor: "right",
     className: `mx-kmui-drawer ${r}`,
@@ -607,11 +607,11 @@ const te = {
       )
     ]
   }
-), oe = 32, U = "https://content.moneydesktop.com/storage/MD_Assets", j = `${U}/serenity/default_institution_logo.png`, Br = ({
+), ie = 32, W = "https://content.moneydesktop.com/storage/MD_Assets", Z = `${W}/serenity/default_institution_logo.png`, Br = ({
   alt: r,
   institutionGuid: i,
   logoUrl: o,
-  size: s = oe,
+  size: s = ie,
   ...l
 }) => /* @__PURE__ */ n(
   "img",
@@ -620,20 +620,20 @@ const te = {
     height: s,
     onError: (e) => {
       const a = e.target;
-      a.src !== j && (a.src = j);
+      a.src !== Z && (a.src = Z);
     },
-    src: o || `${U}/Ipad%20Logos/100x100/${i}_100x100.png`,
+    src: o || `${W}/Ipad%20Logos/100x100/${i}_100x100.png`,
     style: {
       borderRadius: 4
     },
     width: s,
     ...l
   }
-), _r = ({
+), zr = ({
   alt: r = "",
   categoryGuid: i,
   merchantGuid: o,
-  size: s = oe,
+  size: s = ie,
   ...l
 }) => {
   const [e, a] = H.useState(!1), c = O();
@@ -645,7 +645,7 @@ const te = {
         "aria-hidden": !r,
         height: s,
         onError: () => a(!0),
-        src: `${U}/merchant_logos/${o}.png`,
+        src: `${W}/merchant_logos/${o}.png`,
         style: {
           backgroundColor: c.palette.common.white,
           borderRadius: 4,
@@ -657,7 +657,7 @@ const te = {
     ),
     /* @__PURE__ */ n(we, { categoryGuid: i, size: s })
   ] });
-}, zr = ({
+}, $r = ({
   disabled: r = !1,
   label: i = "",
   shrink: o = !0,
@@ -665,7 +665,7 @@ const te = {
   variant: l = "outlined",
   ...e
 }) => /* @__PURE__ */ n(
-  J,
+  q,
   {
     disabled: r,
     label: i,
@@ -686,10 +686,10 @@ const te = {
     ...e
   }
 );
-function Ue(r) {
-  return /* @__PURE__ */ n(q, { ...r, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
+function We(r) {
+  return /* @__PURE__ */ n(ee, { ...r, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
-const $r = ({
+const Wr = ({
   open: r = !0,
   handleClose: i,
   closeAriaLabel: o,
@@ -702,15 +702,15 @@ const $r = ({
   actionText: t = "Undo",
   onActionClick: m
 }) => {
-  const x = O(), k = d && /* @__PURE__ */ n(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ n(T, { fill: !0, name: "close" }) }), h = `${e}.main`;
+  const x = O(), k = d && /* @__PURE__ */ n(re, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ n(M, { fill: !0, name: "close" }) }), h = `${e}.main`;
   return /* @__PURE__ */ n(
-    Ie,
+    Oe,
     {
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       autoHideDuration: l,
       onClose: i,
       open: r,
-      slots: { transition: Ue },
+      slots: { transition: We },
       sx: {
         ...a,
         maxWidth: 568,
@@ -718,7 +718,7 @@ const $r = ({
         minHeight: 56
       },
       children: /* @__PURE__ */ n(
-        Oe,
+        ve,
         {
           action: k,
           severity: e,
@@ -738,7 +738,7 @@ const $r = ({
           },
           variant: "filled",
           children: /* @__PURE__ */ b(
-            S,
+            A,
             {
               sx: {
                 flexDirection: "row",
@@ -786,7 +786,7 @@ const $r = ({
     }
   );
 }, Ur = ({
-  component: r = _,
+  component: r = B,
   variant: i = "outlined",
   selected: o,
   onChange: s,
@@ -800,13 +800,13 @@ const $r = ({
   sx: x = {},
   ...k
 }) => {
-  const h = O(), ie = () => h.palette.background.paper, w = () => t ? `inset 0px 0px 0px 2px ${h.palette.error.main}` : d ? o ? `inset 0px 0px 0px 2px ${h.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${h.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${h.palette.action.disabled}` : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : h.shadows[1], ae = () => d || t ? h.palette.background.paper : f(h.palette.primary.main, 0.1), ne = () => d || t ? w() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.primary.main, 0.5)}` : w(), le = () => d || t ? h.palette.background.paper : f(h.palette.primary.main, 0.3);
+  const h = O(), ae = () => h.palette.background.paper, w = () => t ? `inset 0px 0px 0px 2px ${h.palette.error.main}` : d ? o ? `inset 0px 0px 0px 2px ${h.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${h.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${h.palette.action.disabled}` : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : h.shadows[1], ne = () => d || t ? h.palette.background.paper : f(h.palette.primary.main, 0.1), le = () => d || t ? w() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.primary.main, 0.5)}` : w(), se = () => d || t ? h.palette.background.paper : f(h.palette.primary.main, 0.3);
   return /* @__PURE__ */ n(
-    ve,
+    Ee,
     {
       checked: o,
-      control: r === _ ? /* @__PURE__ */ n(
-        _,
+      control: r === B ? /* @__PURE__ */ n(
+        B,
         {
           name: a,
           sx: {
@@ -821,7 +821,7 @@ const $r = ({
           ...k
         }
       ) : /* @__PURE__ */ n(
-        Ee,
+        ke,
         {
           name: a,
           sx: {
@@ -837,9 +837,9 @@ const $r = ({
         }
       ),
       disabled: d,
-      label: /* @__PURE__ */ b(B, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
-        m && /* @__PURE__ */ n(B, { sx: { mr: "12px", mt: "8px", flexShrink: 0 }, children: m }),
-        /* @__PURE__ */ b(B, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
+      label: /* @__PURE__ */ b(_, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
+        m && /* @__PURE__ */ n(_, { sx: { mr: "12px", mt: "8px", flexShrink: 0 }, children: m }),
+        /* @__PURE__ */ b(_, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
           l && /* @__PURE__ */ n(X, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: l }),
           /* @__PURE__ */ n(X, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: e })
         ] })
@@ -855,7 +855,7 @@ const $r = ({
         mb: "16px",
         cursor: d ? "not-allowed" : "pointer",
         opacity: d ? 0.6 : 1,
-        backgroundColor: ie(),
+        backgroundColor: ae(),
         border: "none",
         boxShadow: w(),
         boxSizing: "border-box",
@@ -863,11 +863,11 @@ const $r = ({
           duration: h.transitions.duration.short
         }),
         "&:hover": {
-          backgroundColor: ae(),
-          boxShadow: ne()
+          backgroundColor: ne(),
+          boxShadow: le()
         },
         "&:active": {
-          backgroundColor: le()
+          backgroundColor: se()
         },
         "&:focus-visible": {
           outline: `2px solid ${h.palette.info.main}`,
@@ -880,7 +880,7 @@ const $r = ({
   );
 }, N = {
   LIGHT: "light"
-}, Wr = ({ color: r = "neutral", icon: i, label: o, size: s = "small", sx: l, ...e }) => /* @__PURE__ */ b(
+}, Vr = ({ color: r = "neutral", icon: i, label: o, size: s = "small", sx: l, ...e }) => /* @__PURE__ */ b(
   L,
   {
     component: "span",
@@ -917,7 +917,7 @@ const $r = ({
         }
       ),
       /* @__PURE__ */ n(
-        re,
+        te,
         {
           component: "span",
           sx: { fontWeight: "bold", textTransform: "uppercase" },
@@ -927,7 +927,7 @@ const $r = ({
       )
     ]
   }
-), M = (r) => ({
+), R = (r) => ({
   50: v(r, 0.95),
   100: v(r, 0.85),
   200: v(r, 0.7),
@@ -938,7 +938,7 @@ const $r = ({
   700: F(r, 0.5),
   800: F(r, 0.65),
   900: F(r, 0.75)
-}), R = "#FFFFFF", A = "#000000", We = "#F9F9F9", Ve = "#000000", Ge = "#FFFFFF", Ke = "#000000", C = {
+}), T = "#FFFFFF", C = "#000000", Ue = "#F9F9F9", Ve = "#000000", Ge = "#FFFFFF", Ke = "#000000", y = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -946,7 +946,7 @@ const $r = ({
   WARNING: "#FF7B00",
   ERROR: "#E32727",
   GREY: "#808080"
-}, y = {
+}, S = {
   CHART1: "#14A396",
   CHART2: "#EC4899",
   CHART3: "#F3DC46",
@@ -1007,13 +1007,13 @@ const $r = ({
   TRANSFER: "#75C7B7",
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
-}, Ye = (r, i) => {
-  const o = M(i?.primary || C.PRIMARY), s = M(i?.secondary || C.SECONDARY), l = M(i?.error || C.ERROR), e = M(i?.warning || C.WARNING), a = M(i?.info || C.INFO), c = M(i?.success || C.SUCCESS), d = M(i?.grey || C.GREY), t = r === N.LIGHT;
+}, Ye = 4.5, Xe = (r, i) => {
+  const o = R(i?.primary || y.PRIMARY), s = R(i?.secondary || y.SECONDARY), l = R(i?.error || y.ERROR), e = R(i?.warning || y.WARNING), a = R(i?.info || y.INFO), c = R(i?.success || y.SUCCESS), d = R(i?.grey || y.GREY), t = r === N.LIGHT, m = t ? l[500] : l[400];
   return {
     mode: r,
     common: {
-      white: R,
-      black: A
+      white: T,
+      black: C
     },
     primary: {
       ...o,
@@ -1038,20 +1038,21 @@ const $r = ({
       main: t ? d[500] : d[400],
       dark: t ? d[700] : d[200],
       darker: t ? d[800] : d[100],
-      contrastText: ke(t ? d[700] : d[400], "#fff") > 4.5 ? R : d[900]
+      contrastText: j(t ? d[700] : d[400], "#fff") > 4.5 ? T : d[900]
     },
     text: {
-      primary: t ? f(A, 0.87) : R,
-      secondary: t ? f(A, 0.6) : f(R, 0.7),
-      disabled: t ? f(A, 0.38) : f(R, 0.38)
+      primary: t ? f(C, 0.87) : T,
+      secondary: t ? f(C, 0.6) : f(T, 0.7),
+      disabled: t ? f(C, 0.38) : f(T, 0.38)
     },
     error: {
       ...l,
       lighter: t ? l[100] : l[700],
       light: t ? l[300] : l[600],
-      main: t ? l[500] : l[400],
+      main: m,
       dark: t ? l[700] : l[200],
-      darker: t ? l[800] : l[100]
+      darker: t ? l[800] : l[100],
+      contrastText: j(m, T) > Ye ? T : C
     },
     warning: {
       ...e,
@@ -1079,15 +1080,15 @@ const $r = ({
     },
     grey: d,
     action: {
-      active: t ? f(A, 0.56) : f(R, 0.56)
+      active: t ? f(C, 0.56) : f(T, 0.56)
     },
     background: {
-      default: t ? i?.background?.default?.light || We : i?.background?.default?.dark || Ve,
+      default: t ? i?.background?.default?.light || Ue : i?.background?.default?.dark || Ve,
       paper: t ? i?.background?.paper?.light || Ge : i?.background?.paper?.dark || Ke,
       highlight: t ? d[200] : d[600],
       highlightPrimary: t ? o[100] : o[500]
     },
-    divider: t ? f(A, 0.12) : f(R, 0.24),
+    divider: t ? f(C, 0.12) : f(T, 0.24),
     categories: {
       autoTransport: t ? p.AUTO_TRANSPORTT : u.AUTO_TRANSPORTT,
       billsUtilities: t ? p.BILLS_UTILITIES : u.BILLS_UTILITIES,
@@ -1113,13 +1114,13 @@ const $r = ({
       uncategorized: t ? p.UNCATEGORIZED : u.UNCATEGORIZED
     },
     chart: {
-      chart1: y.CHART1,
-      chart2: y.CHART2,
-      chart3: y.CHART3,
-      chart4: y.CHART4,
-      chart5: y.CHART5,
-      chart6: y.CHART6,
-      chart7: y.CHART7
+      chart1: S.CHART1,
+      chart2: S.CHART2,
+      chart3: S.CHART3,
+      chart4: S.CHART4,
+      chart5: S.CHART5,
+      chart6: S.CHART6,
+      chart7: S.CHART7
     },
     chartMono: {
       chartMono1: I.CHART_MONO1,
@@ -1130,7 +1131,7 @@ const $r = ({
       chartMono6: I.CHART_MONO6
     }
   };
-}, z = "Inter, Helvetica, Arial, sans-serif", Xe = (r) => {
+}, z = "Inter, Helvetica, Arial, sans-serif", je = (r) => {
   const i = r?.fontFamily ? `${r?.fontFamily}, ${z}` : z, o = r?.headerFontFamily ? `${r.headerFontFamily}, ${z}` : i;
   return {
     fontFamily: i,
@@ -1192,9 +1193,9 @@ const $r = ({
 Le.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
-const Vr = (r, i) => {
-  const o = Ye(r, i?.paletteOptions), s = Xe(i?.typographyOptions), l = [...W().shadows];
-  return l[1] = "0px 2px 8px 0 rgba(0, 0, 0, 0.12)", l[8] = "0px 6px 12px 0 rgba(0, 0, 0, 0.16), 0px 3px 8px 0 rgba(0, 0, 0, 0.06)", l[16] = "0px 12px 20px 0 rgba(0, 0, 0, 0.22)", W({
+const Gr = (r, i) => {
+  const o = Xe(r, i?.paletteOptions), s = je(i?.typographyOptions), l = [...U().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)", U({
     breakpoints: i?.breakpoints || {
       values: {
         // TODO: Remove these default values in v3. Users should provide their own breakpoints if they want to.
@@ -1221,10 +1222,10 @@ const Vr = (r, i) => {
       MuiAlert: {
         defaultProps: {
           iconMapping: {
-            success: /* @__PURE__ */ n(T, { fill: !0, name: "check_circle", size: 24 }),
-            error: /* @__PURE__ */ n(T, { fill: !0, name: "error", size: 24 }),
-            warning: /* @__PURE__ */ n(T, { fill: !0, name: "warning", size: 24 }),
-            info: /* @__PURE__ */ n(T, { fill: !0, name: "info", size: 24 })
+            success: /* @__PURE__ */ n(M, { fill: !0, name: "check_circle", size: 24 }),
+            error: /* @__PURE__ */ n(M, { fill: !0, name: "error", size: 24 }),
+            warning: /* @__PURE__ */ n(M, { fill: !0, name: "warning", size: 24 }),
+            info: /* @__PURE__ */ n(M, { fill: !0, name: "info", size: 24 })
           },
           variant: "outlined"
         },
@@ -1328,7 +1329,7 @@ const Vr = (r, i) => {
       MuiChip: {
         defaultProps: {
           color: "primary",
-          deleteIcon: /* @__PURE__ */ n("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ n(T, { name: "close" }) })
+          deleteIcon: /* @__PURE__ */ n("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ n(M, { name: "close" }) })
         },
         styleOverrides: {
           root: ({ theme: e, ownerState: a }) => {
@@ -2131,33 +2132,33 @@ const Vr = (r, i) => {
 };
 export {
   D as BaseIcon,
-  Lr as BottomSheetTransition,
+  Nr as BottomSheetTransition,
   g as CategoryGuids,
   we as CategoryIcon,
   He as CategoryIconList,
   Ne as CategoryIconVariants,
-  Fr as DateRangePicker,
+  Lr as DateRangePicker,
   ze as DialogFooter,
-  wr as DialogHeader,
-  Pr as Drawer,
+  Pr as DialogHeader,
+  _r as Drawer,
   ze as Footer,
   $e as H1,
-  Nr as H2,
-  Hr as H3,
+  Hr as H2,
+  Dr as H3,
   z as INTER,
-  T as Icon,
+  M as Icon,
   Br as InstitutionLogo,
-  vr as MXLogoCopyrightIcon,
-  Er as MXLogoFilledIcon,
-  Or as MXLogoIcon,
-  kr as MXLogoOutlineIcon,
-  _r as MerchantLogo,
-  Dr as P,
+  Er as MXLogoCopyrightIcon,
+  kr as MXLogoFilledIcon,
+  vr as MXLogoIcon,
+  Fr as MXLogoOutlineIcon,
+  zr as MerchantLogo,
+  wr as P,
   Ur as SelectionBox,
-  Wr as Tag,
+  Vr as Tag,
   E as Text,
-  zr as TextField,
-  $r as Toast,
-  Vr as createMXTheme
+  $r as TextField,
+  Wr as Toast,
+  Gr as createMXTheme
 };
 //# sourceMappingURL=index.es.js.map