@mxenabled/mxui 2.0.0 → 2.1.0

package/dist/index.es.js

@@ -1,34 +1,34 @@
 import { jsx as a, jsxs as T } from "react/jsx-runtime";
-import L from "react";
-import E from "@mui/material/Stack";
-import { useTheme as y, createTheme as K } from "@mui/material/styles";
+import H from "react";
+import y from "@mui/material/Stack";
+import { useTheme as O, createTheme as oe } from "@mui/material/styles";
 import { Icon as re, Close as ie } from "@mxenabled/mx-icons";
-import { endOfMonth as $ } from "date-fns/endOfMonth";
+import { endOfMonth as z } from "date-fns/endOfMonth";
 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 V } from "date-fns/subDays";
+import { startOfMonth as $ } from "date-fns/startOfMonth";
+import { startOfYear as U } from "date-fns/startOfYear";
+import { subDays as G } 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 { usePickerContext as de, useIsValidValue as ue, LocalizationProvider as pe, 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 K 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 Z from "@mui/material/IconButton";
+import B from "@mui/material/Button";
+import j 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 = ({
+import { FormControlLabel as Se, Box as k, Typography as V, Radio as w, Checkbox as Ce, alpha as m, darken as N, lighten as I, getContrastRatio as Ae } from "@mui/material";
+import { circularProgressClasses as Ee } from "@mui/material/CircularProgress";
+import { LicenseInfo as Oe } from "@mui/x-license";
+const L = ({
   children: e,
   height: i,
   size: o = 16,
@@ -46,10 +46,10 @@ const D = ({
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
-), 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 = ({
+), x = ({ 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 }), bt = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ T(D, { ...i, children: [
+}) => /* @__PURE__ */ T(L, { ...i, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -64,10 +64,10 @@ const D = ({
       fill: e
     }
   )
-] }), bt = ({
+] }), Tt = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ T(D, { ...i, children: [
+}) => /* @__PURE__ */ T(L, { ...i, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -100,10 +100,10 @@ const D = ({
       fillRule: "evenodd"
     }
   )
-] }), Tt = ({
+] }), xt = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ a(D, { ...i, children: /* @__PURE__ */ a(
+}) => /* @__PURE__ */ a(L, { ...i, children: /* @__PURE__ */ a(
   "path",
   {
     clipRule: "evenodd",
@@ -111,10 +111,10 @@ const D = ({
     fill: e,
     fillRule: "evenodd"
   }
-) }), xt = ({
+) }), Rt = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ T(D, { ...i, children: [
+}) => /* @__PURE__ */ T(L, { ...i, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -140,11 +140,11 @@ 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 || {}), Ie = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(Ie || {});
-const Q = {
+const Z = {
   guid: g.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
-}, Ee = [
+}, ye = [
   {
     guid: g.AutoTransport,
     colorName: "autoTransport",
@@ -245,40 +245,40 @@ const Q = {
     colorName: "travel",
     icon: "airplane_ticket"
   },
-  Q
-], ve = 0.625, Fe = ({
+  Z
+], Fe = 0.625, ve = ({
   categoryGuid: e,
-  icon_ratio: i = ve,
+  icon_ratio: i = Fe,
   size: o = 32,
   sx: n = {},
   variant: t = "filled"
 }) => {
-  const s = y(), l = L.useMemo(
-    () => Ee.find((p) => p.guid === e) ?? Q,
+  const s = O(), l = H.useMemo(
+    () => ye.find((u) => u.guid === e) ?? Z,
     [e]
   ), d = s.palette.categories[l.colorName];
   return /* @__PURE__ */ a(
-    E,
+    y,
     {
       alignItems: "center",
       bgcolor: () => {
-        let p = d;
-        return t === "twotone" && (p = `${p}20`), t === "transparent" || t === "basic" ? "transparent" : p;
+        let u = d;
+        return t === "twotone" && (u = `${u}20`), t === "transparent" || t === "basic" ? "transparent" : u;
       },
       borderRadius: 1,
       color: () => {
-        const p = t === "filled" ? s.palette.common.white : d;
-        return t === "basic" ? s.palette.text.primary : p;
+        const u = t === "filled" ? s.palette.common.white : d;
+        return t === "basic" ? s.palette.text.primary : u;
       },
       height: o,
       justifyContent: "center",
       sx: [...Array.isArray(n) ? n : [n]],
       width: o,
-      children: /* @__PURE__ */ a(R, { name: l.icon, size: o * i })
+      children: /* @__PURE__ */ a(x, { name: l.icon, size: o * i })
     }
   );
 }, Ne = ({ items: e, selected: i }) => {
-  const o = y(), { setValue: n } = de(), t = pe(), s = e?.map((l) => {
+  const o = O(), { setValue: n } = de(), t = ue(), s = e?.map((l) => {
     const d = l.getValue({ isValid: t });
     return {
       label: l.label,
@@ -288,7 +288,7 @@ const Q = {
       disabled: !t(d)
     };
   });
-  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(
+  return /* @__PURE__ */ a(K, { 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,
@@ -316,50 +316,50 @@ const Q = {
     },
     l.label
   )) }) });
-}, Rt = ({
+}, Mt = ({
   copy: e,
   dateRange: i,
   onRangeChanged: o,
   selectedShortcut: n = e.dateRangeThisMonth,
   sx: t = {}
 }) => {
-  const s = y(), l = ce(s.breakpoints.down("sm")), d = L.useMemo(() => {
-    const r = ne(), p = le(r, 1), b = se(r, 1);
+  const s = O(), l = ce(s.breakpoints.down("sm")), d = H.useMemo(() => {
+    const r = ne(), u = le(r, 1), b = se(r, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [U(r), $(r)]
+        getValue: () => [$(r), z(r)]
       },
       {
         label: e.dateRangeLastMonth,
-        getValue: () => [U(p), $(p)]
+        getValue: () => [$(u), z(u)]
       },
       {
         label: e.dateRangeLast30Days,
-        getValue: () => [V(r, 30), r]
+        getValue: () => [G(r, 30), r]
       },
       {
         label: e.dateRangeLast90Days,
-        getValue: () => [V(r, 90), r]
+        getValue: () => [G(r, 90), r]
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [G(r), r]
+        getValue: () => [U(r), r]
       },
       {
         label: e.dateRangeLastYear,
-        getValue: () => [G(b), ae(b)]
+        getValue: () => [U(b), ae(b)]
       },
       {
         label: e.dateRangeCustom,
         getValue: () => [r, r]
       }
     ];
-  }, [e]), c = (r, p) => {
-    const b = p.shortcut;
+  }, [e]), c = (r, u) => {
+    const b = u.shortcut;
     o?.(r, b ? b.label : e.dateRangeCustom);
   };
-  return /* @__PURE__ */ a(E, { gap: 16, m: 8, children: /* @__PURE__ */ a(ue, { dateAdapter: ge, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(y, { gap: 16, m: 8, children: /* @__PURE__ */ a(pe, { dateAdapter: ge, children: /* @__PURE__ */ a(
     he,
     {
       calendars: 1,
@@ -380,15 +380,15 @@ const Q = {
         }
       },
       slots: {
-        leftArrowIcon: () => /* @__PURE__ */ a(R, { name: "chevron_left", size: 28 }),
+        leftArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_left", size: 28 }),
         shortcuts: (r) => /* @__PURE__ */ a(Ne, { selected: n, ...r }),
-        rightArrowIcon: () => /* @__PURE__ */ a(R, { name: "chevron_right", size: 28 })
+        rightArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_right", size: 28 })
       },
       sx: { ...t },
       value: i
     }
   ) }) });
-}, Mt = L.forwardRef(function(i, o) {
+}, St = H.forwardRef(function(i, o) {
   return /* @__PURE__ */ a(X, { direction: "up", ref: o, ...i });
 }), He = ({
   hasSecondaryAction: e = !0,
@@ -400,7 +400,7 @@ const Q = {
   secondaryColor: l = "primary",
   secondaryText: d = "Cancel"
 }) => /* @__PURE__ */ T(
-  E,
+  y,
   {
     direction: "row",
     gap: 16,
@@ -408,7 +408,7 @@ const Q = {
     sx: { bgcolor: "background.paper", p: 24 },
     children: [
       e && /* @__PURE__ */ a(
-        P,
+        B,
         {
           color: l,
           onClick: n,
@@ -417,7 +417,7 @@ const Q = {
         }
       ),
       o && /* @__PURE__ */ a(
-        P,
+        B,
         {
           color: t,
           disabled: i,
@@ -428,7 +428,7 @@ const Q = {
       )
     ]
   }
-), v = ({
+), F = ({
   bold: e,
   className: i = "",
   children: o,
@@ -459,8 +459,8 @@ const Q = {
     ...d,
     children: o
   }
-), 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,
+), Le = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...o, children: i }), Ct = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...o, children: i }), At = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...o, children: i }), Et = ({ className: e = "", children: i, truncate: o, ...n }) => /* @__PURE__ */ a(
+  F,
   {
     className: `mx-mxui-text p ${e}`,
     component: "p",
@@ -470,7 +470,7 @@ const Q = {
     children: i
   }
 ), Ot = ({ copy: e, onClose: i }) => /* @__PURE__ */ T(
-  E,
+  y,
   {
     sx: {
       alignItems: "center",
@@ -481,10 +481,10 @@ const Q = {
     },
     children: [
       /* @__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, {}) })
+      /* @__PURE__ */ a(j, { "aria-label": e.close_aria, onClick: i, sx: { mr: -12 }, children: /* @__PURE__ */ a(ie, {}) })
     ]
   }
-), yt = ({
+), It = ({
   className: e,
   disableSave: i,
   id: o,
@@ -519,34 +519,37 @@ const Q = {
       )
     ]
   }
-), J = 32, z = "https://content.moneydesktop.com/storage/MD_Assets", De = `${z}/serenity/default_institution_logo.png`, It = ({
+), Q = 32, P = "https://content.moneydesktop.com/storage/MD_Assets", W = `${P}/serenity/default_institution_logo.png`, yt = ({
   alt: e,
   institutionGuid: i,
   logoUrl: o,
-  size: n = J,
+  size: n = Q,
   ...t
 }) => /* @__PURE__ */ a(
   "img",
   {
     alt: e,
     height: n,
-    onError: (s) => s.target.src = De,
-    src: o || `${z}/Ipad%20Logos/100x100/${i}_100x100.png`,
+    onError: (s) => {
+      const l = s.target;
+      l.src !== W && (l.src = W);
+    },
+    src: o || `${P}/Ipad%20Logos/100x100/${i}_100x100.png`,
     style: {
       borderRadius: 4
     },
     width: n,
     ...t
   }
-), Et = ({
+), Ft = ({
   alt: e = "",
   categoryGuid: i,
   merchantGuid: o,
-  size: n = J,
+  size: n = Q,
   ...t
 }) => {
-  const [s, l] = L.useState(!1), d = y();
-  return /* @__PURE__ */ T(j, { display: "inline-block", position: "relative", ...t, children: [
+  const [s, l] = H.useState(!1), d = O();
+  return /* @__PURE__ */ T(K, { display: "inline-block", position: "relative", ...t, children: [
     o && !s && /* @__PURE__ */ a(
       "img",
       {
@@ -554,7 +557,7 @@ const Q = {
         "aria-hidden": !e,
         height: n,
         onError: () => l(!0),
-        src: `${z}/merchant_logos/${o}.png`,
+        src: `${P}/merchant_logos/${o}.png`,
         style: {
           backgroundColor: d.palette.common.white,
           borderRadius: 4,
@@ -564,7 +567,7 @@ const Q = {
         width: n
       }
     ),
-    /* @__PURE__ */ a(Fe, { categoryGuid: i, size: n })
+    /* @__PURE__ */ a(ve, { categoryGuid: i, size: n })
   ] });
 }, vt = ({
   disabled: e = !1,
@@ -584,10 +587,10 @@ const Q = {
     ...t
   }
 );
-function ke(e) {
+function De(e) {
   return /* @__PURE__ */ a(X, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
-const Ft = ({
+const Nt = ({
   open: e,
   handleClose: i,
   message: o,
@@ -598,20 +601,20 @@ const Ft = ({
   showClose: d = !1,
   actionText: c = "Undo",
   onActionClick: r,
-  multiLine: p = !1
+  multiLine: u = !1
 }) => {
-  const b = y(), F = /* @__PURE__ */ T(
-    E,
+  const b = O(), v = /* @__PURE__ */ T(
+    y,
     {
-      alignItems: p ? "flex-end" : "center",
-      direction: p ? "column-reverse" : "row",
+      alignItems: u ? "flex-end" : "center",
+      direction: u ? "column-reverse" : "row",
       justifyContent: (
         // eslint-disable-next-line no-nested-ternary
-        p && l && d ? "space-between" : "flex-end"
+        u && l && d ? "space-between" : "flex-end"
       ),
       children: [
         l && /* @__PURE__ */ a(
-          P,
+          B,
           {
             color: "inherit",
             onClick: r || i,
@@ -624,13 +627,13 @@ const Ft = ({
           }
         ),
         d && /* @__PURE__ */ a(
-          Z,
+          j,
           {
             "aria-label": "close",
             color: "inherit",
             onClick: i,
             sx: { height: 44, width: 44 },
-            children: /* @__PURE__ */ a(R, { fill: !0, name: "close", size: 24 })
+            children: /* @__PURE__ */ a(x, { fill: !0, name: "close", size: 24 })
           }
         )
       ]
@@ -639,33 +642,33 @@ const Ft = ({
   return /* @__PURE__ */ a(
     Re,
     {
-      TransitionComponent: ke,
+      TransitionComponent: De,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       autoHideDuration: n,
       onClose: i,
       open: e,
       sx: {
         ...s,
-        width: p ? 400 : 325
+        width: u ? 400 : 325
       },
       children: /* @__PURE__ */ a(
         Me,
         {
-          action: F,
+          action: v,
           severity: t,
           sx: {
             display: "flex",
             alignItems: "stretch",
-            minHeight: d && l && p ? 120 : 56,
-            maxHeight: p ? 120 : 56,
+            minHeight: d && l && u ? 120 : 56,
+            maxHeight: u ? 120 : 56,
             width: "100%",
             "& .MuiAlert-icon": {
-              alignSelf: p ? "flex-start" : "center"
+              alignSelf: u ? "flex-start" : "center"
             },
             "& .MuiAlert-message": {
-              paddingTop: p ? 12 : 8,
-              paddingBottom: p ? 12 : 8,
-              alignSelf: p ? "flex-start" : "center"
+              paddingTop: u ? 12 : 8,
+              paddingBottom: u ? 12 : 8,
+              alignSelf: u ? "flex-start" : "center"
             },
             "& .MuiAlert-action": {
               alignItems: "stretch",
@@ -674,15 +677,15 @@ const Ft = ({
           },
           variant: "filled",
           children: /* @__PURE__ */ a(
-            v,
+            F,
             {
               sx: {
                 lineHeight: b.typography.body1.lineHeight,
-                whiteSpace: p ? "normal" : "nowrap",
-                overflow: p ? "visible" : "hidden",
-                textOverflow: p ? "clip" : "ellipsis"
+                whiteSpace: u ? "normal" : "nowrap",
+                overflow: u ? "visible" : "hidden",
+                textOverflow: u ? "clip" : "ellipsis"
               },
-              truncate: !p,
+              truncate: !u,
               children: o
             }
           )
@@ -690,8 +693,8 @@ const Ft = ({
       )
     }
   );
-}, Nt = ({
-  component: e = _,
+}, Ht = ({
+  component: e = w,
   variant: i = "outlined",
   selected: o,
   onChange: n,
@@ -701,17 +704,17 @@ const Ft = ({
   value: d,
   disabled: c = !1,
   error: r = !1,
-  icon: p = !1,
+  icon: u = !1,
   sx: b = {},
-  ...F
+  ...v
 }) => {
-  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);
+  const f = O(), J = () => f.palette.background.paper, D = () => 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], q = () => c || r ? f.palette.background.paper : m(f.palette.primary.main, 0.1), ee = () => c || r ? D() : 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)}` : D(), te = () => c || r ? f.palette.background.paper : m(f.palette.primary.main, 0.3);
   return /* @__PURE__ */ a(
-    Ce,
+    Se,
     {
       checked: o,
-      control: e === _ ? /* @__PURE__ */ a(
-        _,
+      control: e === w ? /* @__PURE__ */ a(
+        w,
         {
           name: l,
           sx: {
@@ -723,10 +726,10 @@ const Ft = ({
               fontSize: "20px"
             }
           },
-          ...F
+          ...v
         }
       ) : /* @__PURE__ */ a(
-        Se,
+        Ce,
         {
           name: l,
           sx: {
@@ -738,15 +741,15 @@ const Ft = ({
               fontSize: "20px"
             }
           },
-          ...F
+          ...v
         }
       ),
       disabled: c,
-      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: [
-          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 })
+      label: /* @__PURE__ */ T(k, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
+        u && /* @__PURE__ */ a(k, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: u }),
+        /* @__PURE__ */ T(k, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
+          t && /* @__PURE__ */ a(V, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: t }),
+          /* @__PURE__ */ a(V, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: s })
         ] })
       ] }),
       labelPlacement: "start",
@@ -760,19 +763,19 @@ const Ft = ({
         mb: 16,
         cursor: c ? "not-allowed" : "pointer",
         opacity: c ? 0.6 : 1,
-        backgroundColor: q(),
+        backgroundColor: J(),
         border: "none",
-        boxShadow: w(),
+        boxShadow: D(),
         boxSizing: "border-box",
         transition: f.transitions.create(["background-color", "box-shadow"], {
           duration: f.transitions.duration.short
         }),
         "&:hover": {
-          backgroundColor: ee(),
-          boxShadow: te()
+          backgroundColor: q(),
+          boxShadow: ee()
         },
         "&:active": {
-          backgroundColor: oe()
+          backgroundColor: te()
         },
         "&:focus-visible": {
           outline: `2px solid ${f.palette.info.main}`,
@@ -783,9 +786,9 @@ const Ft = ({
       value: d
     }
   );
-}, O = {
+}, E = {
   LIGHT: "light"
-}, M = (e) => ({
+}, R = (e) => ({
   50: I(e, 0.95),
   100: I(e, 0.85),
   200: I(e, 0.7),
@@ -796,7 +799,7 @@ const Ft = ({
   700: N(e, 0.5),
   800: N(e, 0.65),
   900: N(e, 0.75)
-}), x = "#FFFFFF", H = "#000000", we = "#F9F9F9", Be = "#1A1A1A", C = {
+}), M = "#FFFFFF", _ = "#000000", ke = "#F9F9F9", we = "#000000", _e = "#FFFFFF", Be = "#1A1A1A", S = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -804,7 +807,7 @@ const Ft = ({
   WARNING: "#FF7B00",
   ERROR: "#E32727",
   GREY: "#808080"
-}, S = {
+}, C = {
   CHART1: "#74E4DA",
   CHART2: "#ED64A4",
   CHART3: "#F3DC46",
@@ -819,7 +822,7 @@ const Ft = ({
   CHART_MONO4: "#2F73DA",
   CHART_MONO5: "#034AB3",
   CHART_MONO6: "#002966"
-}, u = {
+}, p = {
   AUTO_TRANSPORTT: "#00B0FF",
   BILLS_UTILITIES: "#F949BD",
   BUSINESS_SERVICES: "#2979FF",
@@ -865,13 +868,13 @@ const Ft = ({
   TRANSFER: "#75C7B7",
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
-}, _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;
+}, Pe = (e, i) => {
+  const o = R(i?.primary || S.PRIMARY), n = R(i?.secondary || S.SECONDARY), t = R(i?.error || S.ERROR), s = R(i?.warning || S.WARNING), l = R(i?.info || S.INFO), d = R(i?.success || S.SUCCESS), c = R(i?.grey || S.GREY), r = e === E.LIGHT;
   return {
     mode: e,
     common: {
-      white: x,
-      black: H
+      white: M,
+      black: _
     },
     primary: {
       ...o,
@@ -890,12 +893,12 @@ const Ft = ({
       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]
+      contrastText: Ae(r ? c[700] : c[400], "#fff") > 4.5 ? M : c[900]
     },
     text: {
-      primary: r ? c[900] : x,
-      secondary: r ? c[600] : m(x, 0.7),
-      disabled: r ? c[500] : m(x, 0.38)
+      primary: r ? c[900] : M,
+      secondary: r ? c[600] : m(M, 0.7),
+      disabled: r ? c[500] : m(M, 0.38)
     },
     error: {
       ...t,
@@ -923,50 +926,50 @@ const Ft = ({
     },
     grey: c,
     action: {
-      active: r ? m(H, 0.56) : m(x, 0.56),
+      active: r ? m(_, 0.56) : m(M, 0.56),
       hoverOpacity: r ? 0.1 : 0.2,
       selectedOpacity: r ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: r ? i?.background?.default?.light || we : i?.background?.default?.dark || H,
-      paper: r ? i?.background?.paper?.light || x : i?.background?.paper?.dark || Be,
+      default: r ? i?.background?.default?.light || ke : i?.background?.default?.dark || we,
+      paper: r ? i?.background?.paper?.light || _e : i?.background?.paper?.dark || Be,
       highlight: r ? c[200] : c[600],
       highlightPrimary: r ? o[100] : o[500]
     },
-    divider: r ? m(H, 0.12) : m(x, 0.24),
+    divider: r ? m(_, 0.12) : m(M, 0.24),
     categories: {
-      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
+      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
     },
     chart: {
-      chart1: S.CHART1,
-      chart2: S.CHART2,
-      chart3: S.CHART3,
-      chart4: S.CHART4,
-      chart5: S.CHART5,
-      chart6: S.CHART6,
-      chart7: S.CHART7
+      chart1: C.CHART1,
+      chart2: C.CHART2,
+      chart3: C.CHART3,
+      chart4: C.CHART4,
+      chart5: C.CHART5,
+      chart6: C.CHART6,
+      chart7: C.CHART7
     },
     chartMono: {
       chartMono1: A.CHART_MONO1,
@@ -977,7 +980,7 @@ const Ft = ({
       chartMono6: A.CHART_MONO6
     }
   };
-}, Y = "Inter, Helvetica, Arial, sans-serif", Pe = (e) => {
+}, Y = "Inter, Helvetica, Arial, sans-serif", ze = (e) => {
   const i = e?.fontFamily ? `${e?.fontFamily}, ${Y}` : Y;
   return {
     fontFamily: i,
@@ -1037,16 +1040,12 @@ const Ft = ({
     ...e
   };
 };
-ye.setLicenseKey(
-  "6e7dd593526efa1f157230ecf06c9b02Tz0xMDA5NjAsRT0xNzYyMDQxNjAwMDAwLFM9cHJvLExNPWFubnVhbCxQVj1RMy0yMDI0LEtWPTI="
+Oe.setLicenseKey(
+  "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
-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 Ht = (e, i) => {
-  const o = _e(e, i?.paletteOptions), n = Pe(i?.typographyOptions);
-  return K({
+const Lt = (e, i) => {
+  const o = Pe(e, i?.paletteOptions), n = ze(i?.typographyOptions);
+  return oe({
     breakpoints: {
       values: {
         xs: 444,
@@ -1056,8 +1055,8 @@ const Ht = (e, i) => {
         xl: 1536
       }
     },
+    cssVariables: !0,
     palette: o,
-    shadows: k,
     shape: {
       borderRadius: i?.shapeOptions?.borderRadius || 4
     },
@@ -1068,17 +1067,17 @@ const Ht = (e, i) => {
       MuiAlert: {
         defaultProps: {
           iconMapping: {
-            success: /* @__PURE__ */ a(R, { fill: !0, name: "check_circle", size: 24 }),
-            error: /* @__PURE__ */ a(R, { fill: !0, name: "error", size: 24 }),
-            warning: /* @__PURE__ */ a(R, { fill: !0, name: "warning", size: 24 }),
-            info: /* @__PURE__ */ a(R, { fill: !0, name: "info", size: 24 })
+            success: /* @__PURE__ */ a(x, { fill: !0, name: "check_circle", size: 24 }),
+            error: /* @__PURE__ */ a(x, { fill: !0, name: "error", size: 24 }),
+            warning: /* @__PURE__ */ a(x, { fill: !0, name: "warning", size: 24 }),
+            info: /* @__PURE__ */ a(x, { fill: !0, name: "info", size: 24 })
           },
           variant: "outlined"
         },
         styleOverrides: {
           root: ({ theme: t, ownerState: s }) => {
             const l = s.severity || "info";
-            let d = t.palette.mode === O.LIGHT ? t.palette[l]?.[50] : t.palette[l]?.[800];
+            let d = t.palette.mode === E.LIGHT ? t.palette[l]?.[50] : t.palette[l]?.[800];
             if (s.variant === "filled") {
               const c = l === "warning";
               d = t.palette[l]?.[c ? 400 : 600];
@@ -1166,7 +1165,7 @@ const Ht = (e, i) => {
       MuiCircularProgress: {
         styleOverrides: {
           root: {
-            [`& .${Oe.circle}`]: {
+            [`& .${Ee.circle}`]: {
               strokeLinecap: "round"
             }
           }
@@ -1389,7 +1388,7 @@ const Ht = (e, i) => {
               backgroundColor: t.palette.action.hover
             },
             "&:active": {
-              backgroundColor: t.palette.mode === O.LIGHT ? t.palette[s].light : t.palette[s].dark
+              backgroundColor: t.palette.mode === E.LIGHT ? t.palette[s].light : t.palette[s].dark
             }
           })
         }
@@ -1712,7 +1711,7 @@ const Ht = (e, i) => {
               outlineOffset: "2px"
             },
             "&:hover": {
-              backgroundColor: m(o.primary.main, o.mode === O.LIGHT ? 0.1 : 0.2),
+              backgroundColor: m(o.primary.main, o.mode === E.LIGHT ? 0.1 : 0.2),
               borderColor: o.primary.main
             },
             "&.Mui-selected": {
@@ -1736,7 +1735,7 @@ const Ht = (e, i) => {
             props: { color: "error" },
             style: {
               "&:hover": {
-                backgroundColor: m(o.error.main, o.mode === O.LIGHT ? 0.1 : 0.2),
+                backgroundColor: m(o.error.main, o.mode === E.LIGHT ? 0.1 : 0.2),
                 borderColor: o.error.main
               },
               "&.Mui-selected": {
@@ -1760,7 +1759,7 @@ const Ht = (e, i) => {
               "&:hover": {
                 backgroundColor: m(
                   o.secondary.main,
-                  o.mode === O.LIGHT ? 0.1 : 0.2
+                  o.mode === E.LIGHT ? 0.1 : 0.2
                 ),
                 borderColor: o.secondary.main
               },
@@ -1800,33 +1799,33 @@ const Ht = (e, i) => {
   });
 };
 export {
-  D as BaseIcon,
-  Mt as BottomSheetTransition,
+  L as BaseIcon,
+  St as BottomSheetTransition,
   g as CategoryGuids,
-  Fe as CategoryIcon,
-  Ee as CategoryIconList,
+  ve as CategoryIcon,
+  ye as CategoryIconList,
   Ie as CategoryIconVariants,
-  Rt as DateRangePicker,
+  Mt as DateRangePicker,
   He as DialogFooter,
   Ot as DialogHeader,
-  yt as Drawer,
+  It as Drawer,
   He as Footer,
   Le as H1,
   Ct as H2,
-  St as H3,
+  At as H3,
   Y as INTER,
-  R as Icon,
-  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,
+  x as Icon,
+  yt as InstitutionLogo,
+  Tt as MXLogoCopyrightIcon,
+  xt as MXLogoFilledIcon,
+  bt as MXLogoIcon,
+  Rt as MXLogoOutlineIcon,
+  Ft as MerchantLogo,
+  Et as P,
+  Ht as SelectionBox,
+  F as Text,
   vt as TextField,
-  Ft as Toast,
-  Ht as createMXTheme
+  Nt as Toast,
+  Lt as createMXTheme
 };
 //# sourceMappingURL=index.es.js.map