@mxenabled/mxui 2.2.9 → 2.4.0

package/dist/index.es.js

@@ -34,7 +34,7 @@ import { LicenseInfo as ke } from "@mui/x-license";
 const k = ({
   children: e,
   height: i,
-  size: r = 16,
+  size: o = 16,
   viewBox: s = "0 0 16 16",
   width: l
 }) => /* @__PURE__ */ a(
@@ -43,13 +43,13 @@ const k = ({
     "aria-hidden": !0,
     className: "mx-kmui-icon",
     focusable: !1,
-    height: i || r,
+    height: i || o,
     viewBox: s,
-    width: l || r,
+    width: l || o,
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
-), x = ({ color: e, fill: i = !1, name: r, size: s = 20, sx: l, ...t }) => /* @__PURE__ */ a(le, { color: e, fill: i, name: r, size: s, sx: l, ...t }), Ft = ({
+), x = ({ color: e, fill: i = !1, name: o, size: s = 20, sx: l, ...t }) => /* @__PURE__ */ a(le, { color: e, fill: i, name: o, size: s, sx: l, ...t }), Ft = ({
   color: e = "currentColor",
   ...i
 }) => /* @__PURE__ */ b(k, { ...i, children: [
@@ -252,7 +252,7 @@ const te = {
 ], we = 0.625, Pe = ({
   categoryGuid: e,
   icon_ratio: i = we,
-  size: r = 32,
+  size: o = 32,
   sx: s = {},
   variant: l = "filled"
 }) => {
@@ -273,15 +273,15 @@ const te = {
         const m = l === "filled" ? t.palette.common.white : c;
         return l === "basic" ? t.palette.text.primary : m;
       },
-      height: r,
+      height: o,
       justifyContent: "center",
       sx: [...Array.isArray(s) ? s : [s]],
-      width: r,
-      children: /* @__PURE__ */ a(x, { name: n.icon, size: r * i })
+      width: o,
+      children: /* @__PURE__ */ a(x, { name: n.icon, size: o * i })
     }
   );
 }, _e = ({ items: e, selected: i }) => {
-  const r = E(), { setValue: s } = X(), l = Z(), t = e?.map((n) => {
+  const o = E(), { setValue: s } = X(), l = Z(), t = e?.map((n) => {
     const c = n.getValue({ isValid: l });
     return {
       label: n.label,
@@ -305,11 +305,11 @@ const te = {
           boxShadow: "0px 0px 0px 2px rgba(82, 138, 224, 0.8)"
         },
         "&:hover": {
-          bgcolor: r.palette.action.hover,
-          borderTop: `1px solid ${r.palette.secondary.light}`
+          bgcolor: o.palette.action.hover,
+          borderTop: `1px solid ${o.palette.secondary.light}`
         },
         "&.Mui-selected": {
-          border: `2px solid ${r.palette.primary.main} !important`,
+          border: `2px solid ${o.palette.primary.main} !important`,
           marginTop: "-2px !important",
           color: "primary"
         }
@@ -322,7 +322,7 @@ const te = {
 }, Be = ({
   items: e,
   selected: i,
-  selectLabel: r
+  selectLabel: o
 }) => {
   const { setValue: s } = X(), l = Z(), t = e?.map((n) => {
     const c = n.getValue({ isValid: l });
@@ -339,7 +339,7 @@ const te = {
     {
       defaultValue: i,
       id: "select",
-      label: r,
+      label: o,
       select: !0,
       slotProps: { inputLabel: { shrink: !0 }, select: { IconComponent: se } },
       sx: { width: "100%" },
@@ -349,7 +349,7 @@ const te = {
     }
   ) });
 }, ze = (e) => {
-  const { toolbar: i, content: r, shortcuts: s, ownerState: l } = Ce(e);
+  const { toolbar: i, content: o, shortcuts: s, ownerState: l } = Ce(e);
   return /* @__PURE__ */ b(
     Se,
     {
@@ -378,7 +378,7 @@ const te = {
           {
             className: D.contentWrapper,
             ownerState: l,
-            children: r
+            children: o
           }
         )
       ]
@@ -387,16 +387,16 @@ const te = {
 }, kt = ({
   copy: e,
   dateRange: i,
-  onRangeChanged: r,
+  onRangeChanged: o,
   selectedShortcut: s = e.dateRangeThisMonth,
   sx: l = {}
 }) => {
   const t = E(), n = ge(t.breakpoints.down("sm")), c = N.useMemo(() => {
-    const o = ue(), m = pe(o, 1), T = he(o, 1);
+    const r = ue(), m = pe(r, 1), T = he(r, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [G(o), U(o)]
+        getValue: () => [G(r), U(r)]
       },
       {
         label: e.dateRangeLastMonth,
@@ -404,15 +404,15 @@ const te = {
       },
       {
         label: e.dateRangeLast30Days,
-        getValue: () => [W(o, 30), o]
+        getValue: () => [W(r, 30), r]
       },
       {
         label: e.dateRangeLast90Days,
-        getValue: () => [W(o, 90), o]
+        getValue: () => [W(r, 90), r]
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [V(o), o]
+        getValue: () => [V(r), r]
       },
       {
         label: e.dateRangeLastYear,
@@ -420,12 +420,12 @@ const te = {
       },
       {
         label: e.dateRangeCustom,
-        getValue: () => [o, o]
+        getValue: () => [r, r]
       }
     ];
-  }, [e]), d = (o, m) => {
+  }, [e]), d = (r, m) => {
     const T = m.shortcut;
-    r?.(o, T ? T.label : e.dateRangeCustom);
+    o?.(r, T ? T.label : e.dateRangeCustom);
   };
   return /* @__PURE__ */ a(A, { gap: n ? 0 : 16, m: n ? 0 : 8, children: /* @__PURE__ */ a(me, { dateAdapter: be, children: /* @__PURE__ */ a(
     fe,
@@ -458,22 +458,22 @@ const te = {
       slots: {
         ...n && { layout: ze },
         leftArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_left", size: 28 }),
-        shortcuts: (o) => n ? /* @__PURE__ */ a(
+        shortcuts: (r) => n ? /* @__PURE__ */ a(
           Be,
           {
             selectLabel: e.dateRangeSelectARange,
             selected: s,
-            ...o
+            ...r
           }
-        ) : /* @__PURE__ */ a(_e, { selected: s, ...o }),
+        ) : /* @__PURE__ */ a(_e, { selected: s, ...r }),
         rightArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_right", size: 28 }),
         ...n && {
-          toolbar: (o) => /* @__PURE__ */ a(
+          toolbar: (r) => /* @__PURE__ */ a(
             Te,
             {
               dateSeparator: "",
               format: "MM/dd/yyyy",
-              ...o,
+              ...r,
               slotProps: {
                 textField: ({ position: m }) => ({
                   label: m === "start" ? e.dateRangeFrom : e.dateRangeTo
@@ -488,12 +488,12 @@ const te = {
       value: i
     }
   ) }) });
-}, Ht = N.forwardRef(function(i, r) {
-  return /* @__PURE__ */ a(q, { direction: "up", ref: r, ...i });
+}, Ht = N.forwardRef(function(i, o) {
+  return /* @__PURE__ */ a(q, { direction: "up", ref: o, ...i });
 }), $e = ({
   hasSecondaryAction: e = !0,
   isPrimaryDisabled: i,
-  onPrimaryAction: r,
+  onPrimaryAction: o,
   onSecondaryAction: s,
   primaryColor: l = "primary",
   primaryText: t = "Save",
@@ -512,16 +512,16 @@ const te = {
         {
           color: n,
           onClick: s,
-          variant: r ? "outlined" : "contained",
+          variant: o ? "outlined" : "contained",
           children: c
         }
       ),
-      r && /* @__PURE__ */ a(
+      o && /* @__PURE__ */ a(
         B,
         {
           color: l,
           disabled: i,
-          onClick: r,
+          onClick: o,
           variant: "contained",
           children: t
         }
@@ -531,7 +531,7 @@ const te = {
 ), F = ({
   bold: e,
   className: i = "",
-  children: r,
+  children: o,
   color: s,
   sx: l = {},
   truncate: t,
@@ -557,9 +557,9 @@ const te = {
       ...Array.isArray(l) ? l : [l]
     ],
     ...c,
-    children: r
+    children: o
   }
-), Ue = ({ className: e = "", children: i, ...r }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...r, children: i }), Dt = ({ className: e = "", children: i, ...r }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...r, children: i }), wt = ({ className: e = "", children: i, ...r }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...r, children: i }), Pt = ({ className: e = "", children: i, ...r }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...r, children: i }), _t = ({ copy: e, onClose: i }) => /* @__PURE__ */ b(
+), Ue = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...o, children: i }), Dt = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...o, children: i }), wt = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...o, children: i }), Pt = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...o, children: i }), _t = ({ copy: e, onClose: i }) => /* @__PURE__ */ b(
   A,
   {
     sx: {
@@ -577,24 +577,24 @@ const te = {
 ), Bt = ({
   className: e,
   disableSave: i,
-  id: r,
+  id: o,
   isOpen: s,
   onClose: l,
   onSave: t,
   primaryText: n,
   secondaryText: c,
   children: d,
-  ...o
+  ...r
 }) => /* @__PURE__ */ b(
   Ie,
   {
     anchor: "right",
     className: `mx-kmui-drawer ${e}`,
-    id: r ?? void 0,
+    id: o ?? void 0,
     onClose: l,
     open: s,
     variant: "temporary",
-    ...o,
+    ...r,
     children: [
       d,
       t && /* @__PURE__ */ a(
@@ -609,11 +609,11 @@ const te = {
       )
     ]
   }
-), oe = 32, z = "https://content.moneydesktop.com/storage/MD_Assets", K = `${z}/serenity/default_institution_logo.png`, zt = ({
+), re = 32, z = "https://content.moneydesktop.com/storage/MD_Assets", K = `${z}/serenity/default_institution_logo.png`, zt = ({
   alt: e,
   institutionGuid: i,
-  logoUrl: r,
-  size: s = oe,
+  logoUrl: o,
+  size: s = re,
   ...l
 }) => /* @__PURE__ */ a(
   "img",
@@ -624,7 +624,7 @@ const te = {
       const n = t.target;
       n.src !== K && (n.src = K);
     },
-    src: r || `${z}/Ipad%20Logos/100x100/${i}_100x100.png`,
+    src: o || `${z}/Ipad%20Logos/100x100/${i}_100x100.png`,
     style: {
       borderRadius: 4
     },
@@ -634,20 +634,20 @@ const te = {
 ), $t = ({
   alt: e = "",
   categoryGuid: i,
-  merchantGuid: r,
-  size: s = oe,
+  merchantGuid: o,
+  size: s = re,
   ...l
 }) => {
   const [t, n] = N.useState(!1), c = E();
   return /* @__PURE__ */ b(Q, { display: "inline-block", position: "relative", ...l, children: [
-    r && !t && /* @__PURE__ */ a(
+    o && !t && /* @__PURE__ */ a(
       "img",
       {
         alt: e,
         "aria-hidden": !e,
         height: s,
         onError: () => n(!0),
-        src: `${z}/merchant_logos/${r}.png`,
+        src: `${z}/merchant_logos/${o}.png`,
         style: {
           backgroundColor: c.palette.common.white,
           borderRadius: 4,
@@ -662,14 +662,14 @@ const te = {
 }, Ut = ({
   disabled: e = !1,
   label: i = "",
-  shrink: r = !0,
+  shrink: o = !0,
   variant: s = "outlined",
   ...l
 }) => /* @__PURE__ */ a(
   J,
   {
     InputLabelProps: {
-      shrink: r
+      shrink: o
     },
     disabled: e,
     label: i,
@@ -683,17 +683,17 @@ function Ge(e) {
 const Gt = ({
   open: e = !0,
   handleClose: i,
-  closeAriaLabel: r,
+  closeAriaLabel: o,
   message: s,
   autoHideDuration: l = 3e3,
   severity: t = "success",
   snackbarSx: n,
   showAction: c = !1,
   showClose: d = !1,
-  actionText: o = "Undo",
+  actionText: r = "Undo",
   onActionClick: m
 }) => {
-  const T = E(), v = d && /* @__PURE__ */ a(ee, { "aria-label": r, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ a(x, { fill: !0, name: "close" }) }), g = `${t}.main`;
+  const T = E(), v = d && /* @__PURE__ */ a(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ a(x, { fill: !0, name: "close" }) }), g = `${t}.main`;
   return /* @__PURE__ */ a(
     Ee,
     {
@@ -766,7 +766,7 @@ const Gt = ({
                       minWidth: "auto",
                       justifyContent: "flex-start"
                     },
-                    children: o
+                    children: r
                   }
                 )
               ]
@@ -779,23 +779,23 @@ const Gt = ({
 }, Vt = ({
   component: e = P,
   variant: i = "outlined",
-  selected: r,
+  selected: o,
   onChange: s,
   headline: l,
   message: t,
   name: n,
   value: c,
   disabled: d = !1,
-  error: o = !1,
+  error: r = !1,
   icon: m = !1,
   sx: T = {},
   ...v
 }) => {
-  const g = E(), re = () => g.palette.background.paper, H = () => o ? `inset 0px 0px 0px 2px ${g.palette.error.main}` : d ? r ? `inset 0px 0px 0px 2px ${g.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${g.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${g.palette.action.disabled}` : i === "outlined" ? r ? `inset 0px 0px 0px 2px ${f(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(g.palette.common.black, 0.23)}` : r ? `inset 0px 0px 0px 2px ${f(g.palette.primary.main, 0.5)}` : g.shadows[1], ie = () => d || o ? g.palette.background.paper : f(g.palette.primary.main, 0.1), ae = () => d || o ? H() : i === "outlined" ? r ? `inset 0px 0px 0px 2px ${f(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(g.palette.primary.main, 0.5)}` : H(), ne = () => d || o ? g.palette.background.paper : f(g.palette.primary.main, 0.3);
+  const g = E(), oe = () => g.palette.background.paper, H = () => r ? `inset 0px 0px 0px 2px ${g.palette.error.main}` : d ? o ? `inset 0px 0px 0px 2px ${g.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${g.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${g.palette.action.disabled}` : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(g.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${f(g.palette.primary.main, 0.5)}` : g.shadows[1], ie = () => d || r ? g.palette.background.paper : f(g.palette.primary.main, 0.1), ae = () => d || r ? H() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(g.palette.primary.main, 0.5)}` : H(), ne = () => d || r ? g.palette.background.paper : f(g.palette.primary.main, 0.3);
   return /* @__PURE__ */ a(
     Fe,
     {
-      checked: r,
+      checked: o,
       control: e === P ? /* @__PURE__ */ a(
         P,
         {
@@ -846,7 +846,7 @@ const Gt = ({
         mb: 16,
         cursor: d ? "not-allowed" : "pointer",
         opacity: d ? 0.6 : 1,
-        backgroundColor: re(),
+        backgroundColor: oe(),
         border: "none",
         boxShadow: H(),
         boxSizing: "border-box",
@@ -952,7 +952,7 @@ const Gt = ({
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
 }, je = (e, i) => {
-  const r = R(i?.primary || C.PRIMARY), s = R(i?.secondary || C.SECONDARY), l = R(i?.error || C.ERROR), t = R(i?.warning || C.WARNING), n = R(i?.info || C.INFO), c = R(i?.success || C.SUCCESS), d = R(i?.grey || C.GREY), o = e === I.LIGHT;
+  const o = R(i?.primary || C.PRIMARY), s = R(i?.secondary || C.SECONDARY), l = R(i?.error || C.ERROR), t = R(i?.warning || C.WARNING), n = R(i?.info || C.INFO), c = R(i?.success || C.SUCCESS), d = R(i?.grey || C.GREY), r = e === I.LIGHT;
   return {
     mode: e,
     common: {
@@ -960,90 +960,104 @@ const Gt = ({
       black: _
     },
     primary: {
-      ...r,
-      light: o ? r[300] : r[600],
-      main: o ? r[500] : r[400],
-      dark: o ? r[700] : r[200]
+      ...o,
+      lighter: r ? o[100] : o[700],
+      light: r ? o[300] : o[600],
+      main: r ? o[500] : o[400],
+      dark: r ? o[700] : o[200],
+      darker: r ? o[800] : o[100]
     },
     secondary: {
       ...s,
-      light: o ? s[300] : s[600],
-      main: o ? s[500] : s[400],
-      dark: o ? s[700] : s[200]
+      lighter: r ? s[100] : s[800],
+      light: r ? s[300] : s[600],
+      main: r ? s[500] : s[400],
+      dark: r ? s[700] : s[200],
+      darker: r ? s[800] : s[100]
     },
     neutral: {
       ...d,
-      light: o ? d[300] : d[600],
-      main: o ? d[500] : d[400],
-      dark: o ? d[700] : d[200],
-      contrastText: Le(o ? d[700] : d[400], "#fff") > 4.5 ? M : d[900]
+      lighter: r ? d[100] : d[800],
+      light: r ? d[300] : d[600],
+      main: r ? d[500] : d[400],
+      dark: r ? d[700] : d[200],
+      darker: r ? d[800] : d[100],
+      contrastText: Le(r ? d[700] : d[400], "#fff") > 4.5 ? M : d[900]
     },
     text: {
-      primary: o ? d[900] : M,
-      secondary: o ? d[600] : f(M, 0.7),
-      disabled: o ? d[500] : f(M, 0.38)
+      primary: r ? d[900] : M,
+      secondary: r ? d[600] : f(M, 0.7),
+      disabled: r ? d[500] : f(M, 0.38)
     },
     error: {
       ...l,
-      light: o ? l[300] : l[600],
-      main: o ? l[500] : l[400],
-      dark: o ? l[700] : l[200]
+      lighter: r ? l[100] : l[700],
+      light: r ? l[300] : l[600],
+      main: r ? l[500] : l[400],
+      dark: r ? l[700] : l[200],
+      darker: r ? l[800] : l[100]
     },
     warning: {
       ...t,
-      light: o ? t[300] : t[600],
-      main: o ? t[500] : t[400],
-      dark: o ? t[700] : t[200]
+      lighter: r ? t[100] : t[700],
+      light: r ? t[300] : t[600],
+      main: r ? t[500] : t[400],
+      dark: r ? t[700] : t[200],
+      darker: r ? t[800] : t[100]
     },
     info: {
       ...n,
-      light: o ? n[300] : n[600],
-      main: o ? n[500] : n[400],
-      dark: o ? n[700] : n[200]
+      lighter: r ? n[100] : n[700],
+      light: r ? n[300] : n[600],
+      main: r ? n[500] : n[400],
+      dark: r ? n[700] : n[200],
+      darker: r ? n[800] : n[100]
     },
     success: {
       ...c,
-      light: o ? c[300] : c[600],
-      main: o ? c[500] : c[400],
-      dark: o ? c[700] : c[200]
+      lighter: r ? c[100] : c[700],
+      light: r ? c[300] : c[600],
+      main: r ? c[500] : c[400],
+      dark: r ? c[700] : c[200],
+      darker: r ? c[800] : c[100]
     },
     grey: d,
     action: {
-      active: o ? f(_, 0.56) : f(M, 0.56),
-      hoverOpacity: o ? 0.1 : 0.2,
-      selectedOpacity: o ? 0.16 : 0.25,
+      active: r ? f(_, 0.56) : f(M, 0.56),
+      hoverOpacity: r ? 0.1 : 0.2,
+      selectedOpacity: r ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: o ? i?.background?.default?.light || Ve : i?.background?.default?.dark || We,
-      paper: o ? i?.background?.paper?.light || Ye : i?.background?.paper?.dark || Ke,
-      highlight: o ? d[200] : d[600],
-      highlightPrimary: o ? r[100] : r[500]
+      default: r ? i?.background?.default?.light || Ve : i?.background?.default?.dark || We,
+      paper: r ? i?.background?.paper?.light || Ye : i?.background?.paper?.dark || Ke,
+      highlight: r ? d[200] : d[600],
+      highlightPrimary: r ? o[100] : o[500]
     },
-    divider: o ? f(_, 0.12) : f(M, 0.24),
+    divider: r ? f(_, 0.12) : f(M, 0.24),
     categories: {
-      autoTransport: o ? u.AUTO_TRANSPORTT : p.AUTO_TRANSPORTT,
-      billsUtilities: o ? u.BILLS_UTILITIES : p.BILLS_UTILITIES,
-      businessServices: o ? u.BUSINESS_SERVICES : p.BUSINESS_SERVICES,
-      education: o ? u.EDUCATION : p.EDUCATION,
-      entertainment: o ? u.ENTERTAINMENT : p.ENTERTAINMENT,
-      feesCharges: o ? u.FEES_CHARGES : p.FEES_CHARGES,
-      financial: o ? u.FINANCIAL : p.FINANCIAL,
-      foodDining: o ? u.FOOD_DINING : p.FOOD_DINING,
-      giftsDonations: o ? u.GIFTS_DONATIONS : p.GIFTS_DONATIONS,
-      healthFitness: o ? u.HEALTH_FITNESS : p.HEALTH_FITNESS,
-      home: o ? u.HOME : p.HOME,
-      income: o ? u.INCOME : p.INCOME,
-      investments: o ? u.INVESTMENTS : p.INVESTMENTS,
-      kids: o ? u.KIDS : p.KIDS,
-      others: o ? u.OTHERS : p.OTHERS,
-      personalCare: o ? u.PERSONAL_CARE : p.PERSONAL_CARE,
-      pets: o ? u.PETS : p.PETS,
-      shopping: o ? u.SHOPPING : p.SHOPPING,
-      taxes: o ? u.TAXES : p.TAXES,
-      transfer: o ? u.TRANSFER : p.TRANSFER,
-      travel: o ? u.TRAVEL : p.TRAVEL,
-      uncategorized: o ? u.UNCATEGORIZED : p.UNCATEGORIZED
+      autoTransport: r ? u.AUTO_TRANSPORTT : p.AUTO_TRANSPORTT,
+      billsUtilities: r ? u.BILLS_UTILITIES : p.BILLS_UTILITIES,
+      businessServices: r ? u.BUSINESS_SERVICES : p.BUSINESS_SERVICES,
+      education: r ? u.EDUCATION : p.EDUCATION,
+      entertainment: r ? u.ENTERTAINMENT : p.ENTERTAINMENT,
+      feesCharges: r ? u.FEES_CHARGES : p.FEES_CHARGES,
+      financial: r ? u.FINANCIAL : p.FINANCIAL,
+      foodDining: r ? u.FOOD_DINING : p.FOOD_DINING,
+      giftsDonations: r ? u.GIFTS_DONATIONS : p.GIFTS_DONATIONS,
+      healthFitness: r ? u.HEALTH_FITNESS : p.HEALTH_FITNESS,
+      home: r ? u.HOME : p.HOME,
+      income: r ? u.INCOME : p.INCOME,
+      investments: r ? u.INVESTMENTS : p.INVESTMENTS,
+      kids: r ? u.KIDS : p.KIDS,
+      others: r ? u.OTHERS : p.OTHERS,
+      personalCare: r ? u.PERSONAL_CARE : p.PERSONAL_CARE,
+      pets: r ? u.PETS : p.PETS,
+      shopping: r ? u.SHOPPING : p.SHOPPING,
+      taxes: r ? u.TAXES : p.TAXES,
+      transfer: r ? u.TRANSFER : p.TRANSFER,
+      travel: r ? u.TRAVEL : p.TRAVEL,
+      uncategorized: r ? u.UNCATEGORIZED : p.UNCATEGORIZED
     },
     chart: {
       chart1: S.CHART1,
@@ -1127,7 +1141,7 @@ ke.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
 const Wt = (e, i) => {
-  const r = je(e, i?.paletteOptions), s = Xe(i?.typographyOptions), l = [...$().shadows];
+  const o = je(e, i?.paletteOptions), s = Xe(i?.typographyOptions), l = [...$().shadows];
   return l[1] = "0px 2px 8px 0 rgba(0, 0, 0, 0.12)", l[8] = "0px 6px 12px 0 rgba(0, 0, 0, 0.16), 0px 3px 8px 0 rgba(0, 0, 0, 0.06)", l[16] = "0px 12px 20px 0 rgba(0, 0, 0, 0.22)", $({
     breakpoints: {
       values: {
@@ -1139,12 +1153,12 @@ const Wt = (e, i) => {
       }
     },
     cssVariables: !0,
-    palette: r,
+    palette: o,
     shape: {
       borderRadius: i?.shapeOptions?.borderRadius || 4
     },
     shadows: l,
-    spacing: 1,
+    ...i?.useMUIStandardSpacing ? {} : { spacing: 1 },
     // TODO: update spacing, we're back to a 8-base which is default for MUI 2.x
     typography: s,
     components: {
@@ -1163,8 +1177,8 @@ const Wt = (e, i) => {
             const c = n.severity || "info";
             let d = t.palette.mode === I.LIGHT ? t.palette[c]?.[50] : t.palette[c]?.[800];
             if (n.variant === "filled") {
-              const o = c === "warning";
-              d = t.palette[c]?.[o ? 400 : 600];
+              const r = c === "warning";
+              d = t.palette[c]?.[r ? 400 : 600];
             }
             return {
               backgroundColor: d,
@@ -1249,7 +1263,7 @@ const Wt = (e, i) => {
         styleOverrides: {
           root: {
             "&.Mui-focusVisible": {
-              boxShadow: `inset 0 0 0 2px ${r.info.main}`
+              boxShadow: `inset 0 0 0 2px ${o.info.main}`
             }
           }
         }
@@ -1411,7 +1425,7 @@ const Wt = (e, i) => {
       MuiFormLabel: {
         styleOverrides: {
           asterisk: {
-            color: r.error.main
+            color: o.error.main
           }
         }
       },
@@ -1459,7 +1473,7 @@ const Wt = (e, i) => {
             borderRadius: 4
           },
           colorPrimary: {
-            backgroundColor: r.grey[300]
+            backgroundColor: o.grey[300]
           }
         }
       },
@@ -1565,7 +1579,7 @@ const Wt = (e, i) => {
             },
             secondary: {
               fontSize: 11,
-              color: r.text.secondary
+              color: o.text.secondary
             }
           }
         },
@@ -1586,7 +1600,7 @@ const Wt = (e, i) => {
             lineHeight: "inherit",
             top: -1,
             // This fixes an issue where there is a 1px gap when the subheader sticks to the top while scrolling
-            backgroundColor: r.background.default
+            backgroundColor: o.background.default
           }
         }
       },
@@ -1756,7 +1770,7 @@ const Wt = (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
             }
           }
@@ -1767,7 +1781,7 @@ const Wt = (e, i) => {
           root: {
             borderBottomStyle: "solid",
             borderBottomWidth: 1,
-            borderColor: r.divider,
+            borderColor: o.divider,
             marginBottom: 8
           }
         }
@@ -1783,7 +1797,7 @@ const Wt = (e, i) => {
         },
         styleOverrides: {
           root: {
-            backgroundColor: r.background.paper
+            backgroundColor: o.background.paper
           }
         }
       },
@@ -1798,13 +1812,13 @@ const Wt = (e, i) => {
             lineHeight: "16px",
             textTransform: "none",
             "&:focus-visible": {
-              outline: `2px solid ${r.info.main}`,
+              outline: `2px solid ${o.info.main}`,
               outlineOffset: "2px"
             },
             "&:hover": {
               backgroundColor: f(
                 t.palette.primary.main,
-                r.mode === I.LIGHT ? 0.1 : 0.2
+                o.mode === I.LIGHT ? 0.1 : 0.2
               ),
               borderColor: t.palette.primary.main
             },
@@ -1828,19 +1842,19 @@ const Wt = (e, i) => {
             props: { color: "error" },
             style: {
               "&:hover": {
-                backgroundColor: f(r.error.main, r.mode === I.LIGHT ? 0.1 : 0.2),
-                borderColor: r.error.main
+                backgroundColor: f(o.error.main, o.mode === I.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
                   }
                 }
               }
@@ -1851,21 +1865,21 @@ const Wt = (e, i) => {
             style: {
               "&:hover": {
                 backgroundColor: f(
-                  r.secondary.main,
-                  r.mode === I.LIGHT ? 0.1 : 0.2
+                  o.secondary.main,
+                  o.mode === I.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
                   }
                 }
               }