@mxenabled/mxui 2.7.1 → 2.8.0

package/dist/index.es.js

@@ -16,8 +16,8 @@ import { usePickerContext as Z, useIsValidValue as Q, LocalizationProvider as fe
 import { AdapterDateFns as xe } from "@mui/x-date-pickers-pro/AdapterDateFns";
 import { MultiInputDateRangeField as Te } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
 import k from "@mui/material/Box";
-import Me from "@mui/material/ToggleButton";
-import Re from "@mui/material/ToggleButtonGroup";
+import Re from "@mui/material/ToggleButton";
+import Me from "@mui/material/ToggleButtonGroup";
 import Ce from "@mui/material/MenuItem";
 import J from "@mui/material/TextField";
 import { usePickerLayout as ye, PickersLayoutRoot as Se, PickersLayoutContentWrapper as Ae, pickersLayoutClasses as w } from "@mui/x-date-pickers/PickersLayout";
@@ -34,7 +34,7 @@ import { LicenseInfo as Ne } from "@mui/x-license";
 const H = ({
   children: e,
   height: i,
-  size: o = 16,
+  size: t = 16,
   viewBox: s = "0 0 16 16",
   width: l
 }) => /* @__PURE__ */ n(
@@ -43,13 +43,13 @@ const H = ({
     "aria-hidden": !0,
     className: "mx-kmui-icon",
     focusable: !1,
-    height: i || o,
+    height: i || t,
     viewBox: s,
-    width: l || o,
+    width: l || t,
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
-), T = ({ color: e, fill: i = !1, name: o, size: s = 20, sx: l, ...r }) => /* @__PURE__ */ n(se, { color: e, fill: i, name: o, size: s, sx: l, ...r }), Fr = ({
+), T = ({ color: e, fill: i = !1, name: t, size: s = 20, sx: l, ...r }) => /* @__PURE__ */ n(se, { color: e, fill: i, name: t, size: s, sx: l, ...r }), Fr = ({
   color: e = "currentColor",
   ...i
 }) => /* @__PURE__ */ b(H, { ...i, children: [
@@ -143,7 +143,7 @@ const H = ({
   )
 ] });
 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 || {}), He = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(He || {});
-const te = {
+const oe = {
   guid: g.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
@@ -248,16 +248,16 @@ const te = {
     colorName: "travel",
     icon: "airplane_ticket"
   },
-  te
+  oe
 ], we = 0.625, Pe = ({
   categoryGuid: e,
   icon_ratio: i = we,
-  size: o = 32,
+  size: t = 32,
   sx: s = {},
   variant: l = "filled"
 }) => {
   const r = O(), a = N.useMemo(
-    () => De.find((m) => m.guid === e) ?? te,
+    () => De.find((m) => m.guid === e) ?? oe,
     [e]
   ), c = r.palette.categories[a.colorName];
   return /* @__PURE__ */ n(
@@ -273,15 +273,15 @@ const te = {
         const m = l === "filled" ? r.palette.common.white : c;
         return l === "basic" ? r.palette.text.primary : m;
       },
-      height: o,
+      height: t,
       justifyContent: "center",
       sx: [...Array.isArray(s) ? s : [s]],
-      width: o,
-      children: /* @__PURE__ */ n(T, { name: a.icon, size: o * i })
+      width: t,
+      children: /* @__PURE__ */ n(T, { name: a.icon, size: t * i })
     }
   );
 }, Be = ({ items: e, selected: i }) => {
-  const o = O(), { setValue: s } = Z(), l = Q(), r = e?.map((a) => {
+  const t = O(), { setValue: s } = Z(), l = Q(), r = e?.map((a) => {
     const c = a.getValue({ isValid: l });
     return {
       label: a.label,
@@ -291,8 +291,8 @@ const te = {
       disabled: !l(c)
     };
   });
-  return /* @__PURE__ */ n(k, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ n(Re, { color: "primary", orientation: "vertical", value: i, children: r?.map((a) => /* @__PURE__ */ n(
-    Me,
+  return /* @__PURE__ */ n(k, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ n(Me, { color: "primary", orientation: "vertical", value: i, children: r?.map((a) => /* @__PURE__ */ n(
+    Re,
     {
       onClick: a.onClick,
       sx: {
@@ -305,11 +305,11 @@ const te = {
           boxShadow: "0px 0px 0px 2px rgba(82, 138, 224, 0.8)"
         },
         "&:hover": {
-          bgcolor: o.palette.action.hover,
-          borderTop: `1px solid ${o.palette.secondary.light}`
+          bgcolor: t.palette.action.hover,
+          borderTop: `1px solid ${t.palette.secondary.light}`
         },
         "&.Mui-selected": {
-          border: `2px solid ${o.palette.primary.main} !important`,
+          border: `2px solid ${t.palette.primary.main} !important`,
           marginTop: "-2px !important",
           color: "primary"
         }
@@ -322,7 +322,7 @@ const te = {
 }, _e = ({
   items: e,
   selected: i,
-  selectLabel: o
+  selectLabel: t
 }) => {
   const { setValue: s } = Z(), l = Q(), r = e?.map((a) => {
     const c = a.getValue({ isValid: l });
@@ -339,7 +339,7 @@ const te = {
     {
       defaultValue: i,
       id: "select",
-      label: o,
+      label: t,
       select: !0,
       slotProps: { inputLabel: { shrink: !0 }, select: { IconComponent: ce } },
       sx: { width: "100%" },
@@ -349,7 +349,7 @@ const te = {
     }
   ) });
 }, ze = (e) => {
-  const { toolbar: i, content: o, shortcuts: s, ownerState: l } = ye(e);
+  const { toolbar: i, content: t, shortcuts: s, ownerState: l } = ye(e);
   return /* @__PURE__ */ b(
     Se,
     {
@@ -378,7 +378,7 @@ const te = {
           {
             className: w.contentWrapper,
             ownerState: l,
-            children: o
+            children: t
           }
         )
       ]
@@ -387,16 +387,16 @@ const te = {
 }, Nr = ({
   copy: e,
   dateRange: i,
-  onRangeChanged: o,
+  onRangeChanged: t,
   selectedShortcut: s = e.dateRangeThisMonth,
   sx: l = {}
 }) => {
   const r = O(), a = me(r.breakpoints.down("sm")), c = N.useMemo(() => {
-    const t = ue(), m = ge(t, 1), x = he(t, 1);
+    const o = ue(), m = ge(o, 1), x = he(o, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [W(t), V(t)]
+        getValue: () => [W(o), V(o)]
       },
       {
         label: e.dateRangeLastMonth,
@@ -404,15 +404,15 @@ const te = {
       },
       {
         label: e.dateRangeLast30Days,
-        getValue: () => [Y(t, 30), t]
+        getValue: () => [Y(o, 30), o]
       },
       {
         label: e.dateRangeLast90Days,
-        getValue: () => [Y(t, 90), t]
+        getValue: () => [Y(o, 90), o]
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [K(t), t]
+        getValue: () => [K(o), o]
       },
       {
         label: e.dateRangeLastYear,
@@ -420,12 +420,12 @@ const te = {
       },
       {
         label: e.dateRangeCustom,
-        getValue: () => [t, t]
+        getValue: () => [o, o]
       }
     ];
-  }, [e]), d = (t, m) => {
+  }, [e]), d = (o, m) => {
     const x = m.shortcut;
-    o?.(t, x ? x.label : e.dateRangeCustom);
+    t?.(o, x ? x.label : e.dateRangeCustom);
   };
   return /* @__PURE__ */ n(A, { gap: a ? 0 : 16, m: a ? 0 : 8, children: /* @__PURE__ */ n(fe, { dateAdapter: xe, children: /* @__PURE__ */ n(
     be,
@@ -458,22 +458,22 @@ const te = {
       slots: {
         ...a && { layout: ze },
         leftArrowIcon: () => /* @__PURE__ */ n(T, { name: "chevron_left", size: 28 }),
-        shortcuts: (t) => a ? /* @__PURE__ */ n(
+        shortcuts: (o) => a ? /* @__PURE__ */ n(
           _e,
           {
             selectLabel: e.dateRangeSelectARange,
             selected: s,
-            ...t
+            ...o
           }
-        ) : /* @__PURE__ */ n(Be, { selected: s, ...t }),
+        ) : /* @__PURE__ */ n(Be, { selected: s, ...o }),
         rightArrowIcon: () => /* @__PURE__ */ n(T, { name: "chevron_right", size: 28 }),
         ...a && {
-          toolbar: (t) => /* @__PURE__ */ n(
+          toolbar: (o) => /* @__PURE__ */ n(
             Te,
             {
               dateSeparator: "",
               format: "MM/dd/yyyy",
-              ...t,
+              ...o,
               slotProps: {
                 textField: ({ position: m }) => ({
                   label: m === "start" ? e.dateRangeFrom : e.dateRangeTo
@@ -488,12 +488,12 @@ const te = {
       value: i
     }
   ) }) });
-}, Hr = N.forwardRef(function(i, o) {
-  return /* @__PURE__ */ n(q, { direction: "up", ref: o, ...i });
+}, Hr = N.forwardRef(function(i, t) {
+  return /* @__PURE__ */ n(q, { direction: "up", ref: t, ...i });
 }), $e = ({
   hasSecondaryAction: e = !0,
   isPrimaryDisabled: i,
-  onPrimaryAction: o,
+  onPrimaryAction: t,
   onSecondaryAction: s,
   primaryColor: l = "primary",
   primaryText: r = "Save",
@@ -512,16 +512,16 @@ const te = {
         {
           color: a,
           onClick: s,
-          variant: o ? "outlined" : "contained",
+          variant: t ? "outlined" : "contained",
           children: c
         }
       ),
-      o && /* @__PURE__ */ n(
+      t && /* @__PURE__ */ n(
         $,
         {
           color: l,
           disabled: i,
-          onClick: o,
+          onClick: t,
           variant: "contained",
           children: r
         }
@@ -531,7 +531,7 @@ const te = {
 ), F = ({
   bold: e,
   className: i = "",
-  children: o,
+  children: t,
   color: s,
   sx: l = {},
   truncate: r,
@@ -557,9 +557,9 @@ const te = {
       ...Array.isArray(l) ? l : [l]
     ],
     ...c,
-    children: o
+    children: t
   }
-), Ue = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...o, children: i }), Dr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...o, children: i }), wr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...o, children: i }), Pr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...o, children: i }), Br = ({ copy: e, onClose: i, truncate: o = !1 }) => /* @__PURE__ */ b(
+), Ue = ({ className: e = "", children: i, ...t }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...t, children: i }), Dr = ({ className: e = "", children: i, ...t }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...t, children: i }), wr = ({ className: e = "", children: i, ...t }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...t, children: i }), Pr = ({ className: e = "", children: i, ...t }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...t, children: i }), Br = ({ copy: e, onClose: i, truncate: t = !1 }) => /* @__PURE__ */ b(
   A,
   {
     sx: {
@@ -570,31 +570,31 @@ const te = {
       py: 14
     },
     children: [
-      /* @__PURE__ */ n(Ue, { truncate: o, variant: "h3", children: e.title }),
+      /* @__PURE__ */ n(Ue, { truncate: t, variant: "h3", children: e.title }),
       /* @__PURE__ */ n(ee, { "aria-label": e.close_aria, onClick: i, sx: { mr: -12 }, children: /* @__PURE__ */ n(de, {}) })
     ]
   }
 ), _r = ({
   className: e,
   disableSave: i,
-  id: o,
+  id: t,
   isOpen: s,
   onClose: l,
   onSave: r,
   primaryText: a,
   secondaryText: c,
   children: d,
-  ...t
+  ...o
 }) => /* @__PURE__ */ b(
   Ie,
   {
     anchor: "right",
     className: `mx-kmui-drawer ${e}`,
-    id: o ?? void 0,
+    id: t ?? void 0,
     onClose: l,
     open: s,
     variant: "temporary",
-    ...t,
+    ...o,
     children: [
       d,
       r && /* @__PURE__ */ n(
@@ -609,11 +609,11 @@ const te = {
       )
     ]
   }
-), oe = 32, U = "https://content.moneydesktop.com/storage/MD_Assets", j = `${U}/serenity/default_institution_logo.png`, zr = ({
+), te = 32, U = "https://content.moneydesktop.com/storage/MD_Assets", j = `${U}/serenity/default_institution_logo.png`, zr = ({
   alt: e,
   institutionGuid: i,
-  logoUrl: o,
-  size: s = oe,
+  logoUrl: t,
+  size: s = te,
   ...l
 }) => /* @__PURE__ */ n(
   "img",
@@ -624,7 +624,7 @@ const te = {
       const a = r.target;
       a.src !== j && (a.src = j);
     },
-    src: o || `${U}/Ipad%20Logos/100x100/${i}_100x100.png`,
+    src: t || `${U}/Ipad%20Logos/100x100/${i}_100x100.png`,
     style: {
       borderRadius: 4
     },
@@ -634,20 +634,20 @@ const te = {
 ), $r = ({
   alt: e = "",
   categoryGuid: i,
-  merchantGuid: o,
-  size: s = oe,
+  merchantGuid: t,
+  size: s = te,
   ...l
 }) => {
   const [r, a] = N.useState(!1), c = O();
   return /* @__PURE__ */ b(k, { display: "inline-block", position: "relative", ...l, children: [
-    o && !r && /* @__PURE__ */ n(
+    t && !r && /* @__PURE__ */ n(
       "img",
       {
         alt: e,
         "aria-hidden": !e,
         height: s,
         onError: () => a(!0),
-        src: `${U}/merchant_logos/${o}.png`,
+        src: `${U}/merchant_logos/${t}.png`,
         style: {
           backgroundColor: c.palette.common.white,
           borderRadius: 4,
@@ -662,7 +662,7 @@ const te = {
 }, Ur = ({
   disabled: e = !1,
   label: i = "",
-  shrink: o = !0,
+  shrink: t = !0,
   truncate: s = !1,
   variant: l = "outlined",
   ...r
@@ -673,7 +673,7 @@ const te = {
     label: i,
     slotProps: {
       inputLabel: {
-        shrink: o,
+        shrink: t,
         ...s && {
           sx: {
             maxWidth: "100%",
@@ -694,17 +694,17 @@ function Ge(e) {
 const Gr = ({
   open: e = !0,
   handleClose: i,
-  closeAriaLabel: o,
+  closeAriaLabel: t,
   message: s,
   autoHideDuration: l = 3e3,
   severity: r = "success",
   snackbarSx: a,
   showAction: c = !1,
   showClose: d = !1,
-  actionText: t = "Undo",
+  actionText: o = "Undo",
   onActionClick: m
 }) => {
-  const x = O(), v = d && /* @__PURE__ */ n(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ n(T, { fill: !0, name: "close" }) }), h = `${r}.main`;
+  const x = O(), v = d && /* @__PURE__ */ n(ee, { "aria-label": t, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ n(T, { fill: !0, name: "close" }) }), h = `${r}.main`;
   return /* @__PURE__ */ n(
     Oe,
     {
@@ -777,7 +777,7 @@ const Gr = ({
                       minWidth: "auto",
                       justifyContent: "flex-start"
                     },
-                    children: t
+                    children: o
                   }
                 )
               ]
@@ -790,23 +790,23 @@ const Gr = ({
 }, Vr = ({
   component: e = B,
   variant: i = "outlined",
-  selected: o,
+  selected: t,
   onChange: s,
   headline: l,
   message: r,
   name: a,
   value: c,
   disabled: d = !1,
-  error: t = !1,
+  error: o = !1,
   icon: m = !1,
   sx: x = {},
   ...v
 }) => {
-  const h = O(), ie = () => h.palette.background.paper, D = () => 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 ? D() : 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)}` : D(), le = () => d || t ? h.palette.background.paper : f(h.palette.primary.main, 0.3);
+  const h = O(), ie = () => h.palette.background.paper, D = () => o ? `inset 0px 0px 0px 2px ${h.palette.error.main}` : d ? t ? `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" ? t ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.common.black, 0.23)}` : t ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : h.shadows[1], ae = () => d || o ? h.palette.background.paper : f(h.palette.primary.main, 0.1), ne = () => d || o ? D() : i === "outlined" ? t ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.primary.main, 0.5)}` : D(), le = () => d || o ? h.palette.background.paper : f(h.palette.primary.main, 0.3);
   return /* @__PURE__ */ n(
     Fe,
     {
-      checked: o,
+      checked: t,
       control: e === B ? /* @__PURE__ */ n(
         B,
         {
@@ -882,7 +882,7 @@ const Gr = ({
   );
 }, S = {
   LIGHT: "light"
-}, Wr = ({ color: e = "neutral", icon: i, label: o, size: s = "small", sx: l, ...r }) => /* @__PURE__ */ b(
+}, Wr = ({ color: e = "neutral", icon: i, label: t, size: s = "small", sx: l, ...r }) => /* @__PURE__ */ b(
   k,
   {
     component: "span",
@@ -924,12 +924,12 @@ const Gr = ({
           component: "span",
           sx: { fontWeight: "bold", textTransform: "uppercase" },
           variant: "tiny",
-          children: o
+          children: t
         }
       )
     ]
   }
-), M = (e) => ({
+), R = (e) => ({
   50: E(e, 0.95),
   100: E(e, 0.85),
   200: E(e, 0.7),
@@ -940,7 +940,7 @@ const Gr = ({
   700: L(e, 0.5),
   800: L(e, 0.65),
   900: L(e, 0.75)
-}), R = "#FFFFFF", _ = "#000000", Ve = "#F9F9F9", We = "#000000", Ke = "#FFFFFF", Ye = "#000000", C = {
+}), M = "#FFFFFF", _ = "#000000", Ve = "#F9F9F9", We = "#000000", Ke = "#FFFFFF", Ye = "#000000", C = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -1010,112 +1010,112 @@ const Gr = ({
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
 }, Xe = (e, i) => {
-  const o = M(i?.primary || C.PRIMARY), s = M(i?.secondary || C.SECONDARY), l = M(i?.error || C.ERROR), r = M(i?.warning || C.WARNING), a = M(i?.info || C.INFO), c = M(i?.success || C.SUCCESS), d = M(i?.grey || C.GREY), t = e === S.LIGHT;
+  const t = R(i?.primary || C.PRIMARY), s = R(i?.secondary || C.SECONDARY), l = R(i?.error || C.ERROR), r = R(i?.warning || C.WARNING), a = R(i?.info || C.INFO), c = R(i?.success || C.SUCCESS), d = R(i?.grey || C.GREY), o = e === S.LIGHT;
   return {
     mode: e,
     common: {
-      white: R,
+      white: M,
       black: _
     },
     primary: {
-      ...o,
-      lighter: t ? o[100] : o[700],
-      light: t ? o[300] : o[600],
-      main: t ? o[500] : o[400],
-      dark: t ? o[700] : o[200],
-      darker: t ? o[800] : o[100]
+      ...t,
+      lighter: o ? t[100] : t[700],
+      light: o ? t[300] : t[600],
+      main: o ? t[500] : t[400],
+      dark: o ? t[700] : t[200],
+      darker: o ? t[800] : t[100]
     },
     secondary: {
       ...s,
-      lighter: t ? s[100] : s[800],
-      light: t ? s[300] : s[600],
-      main: t ? s[500] : s[400],
-      dark: t ? s[700] : s[200],
-      darker: t ? s[800] : s[100]
+      lighter: o ? s[100] : s[800],
+      light: o ? s[300] : s[600],
+      main: o ? s[500] : s[400],
+      dark: o ? s[700] : s[200],
+      darker: o ? s[800] : s[100]
     },
     neutral: {
       ...d,
-      lighter: t ? d[100] : d[800],
-      light: t ? d[300] : d[600],
-      main: t ? d[500] : d[400],
-      dark: t ? d[700] : d[200],
-      darker: t ? d[800] : d[100],
-      contrastText: Le(t ? d[700] : d[400], "#fff") > 4.5 ? R : d[900]
+      lighter: o ? d[100] : d[800],
+      light: o ? d[300] : d[600],
+      main: o ? d[500] : d[400],
+      dark: o ? d[700] : d[200],
+      darker: o ? d[800] : d[100],
+      contrastText: Le(o ? d[700] : d[400], "#fff") > 4.5 ? M : d[900]
     },
     text: {
-      primary: t ? d[900] : R,
-      secondary: t ? d[600] : f(R, 0.7),
-      disabled: t ? d[500] : f(R, 0.38)
+      primary: o ? d[900] : M,
+      secondary: o ? d[600] : f(M, 0.7),
+      disabled: o ? d[500] : f(M, 0.38)
     },
     error: {
       ...l,
-      lighter: t ? l[100] : l[700],
-      light: t ? l[300] : l[600],
-      main: t ? l[500] : l[400],
-      dark: t ? l[700] : l[200],
-      darker: t ? l[800] : l[100]
+      lighter: o ? l[100] : l[700],
+      light: o ? l[300] : l[600],
+      main: o ? l[500] : l[400],
+      dark: o ? l[700] : l[200],
+      darker: o ? l[800] : l[100]
     },
     warning: {
       ...r,
-      lighter: t ? r[100] : r[700],
-      light: t ? r[300] : r[600],
-      main: t ? r[500] : r[400],
-      dark: t ? r[700] : r[200],
-      darker: t ? r[800] : r[100]
+      lighter: o ? r[100] : r[700],
+      light: o ? r[300] : r[600],
+      main: o ? r[500] : r[400],
+      dark: o ? r[700] : r[200],
+      darker: o ? r[800] : r[100]
     },
     info: {
       ...a,
-      lighter: t ? a[100] : a[700],
-      light: t ? a[300] : a[600],
-      main: t ? a[500] : a[400],
-      dark: t ? a[700] : a[200],
-      darker: t ? a[800] : a[100]
+      lighter: o ? a[100] : a[700],
+      light: o ? a[300] : a[600],
+      main: o ? a[500] : a[400],
+      dark: o ? a[700] : a[200],
+      darker: o ? a[800] : a[100]
     },
     success: {
       ...c,
-      lighter: t ? c[100] : c[700],
-      light: t ? c[300] : c[600],
-      main: t ? c[500] : c[400],
-      dark: t ? c[700] : c[200],
-      darker: t ? c[800] : c[100]
+      lighter: o ? c[100] : c[700],
+      light: o ? c[300] : c[600],
+      main: o ? c[500] : c[400],
+      dark: o ? c[700] : c[200],
+      darker: o ? c[800] : c[100]
     },
     grey: d,
     action: {
-      active: t ? f(_, 0.56) : f(R, 0.56),
-      hoverOpacity: t ? 0.1 : 0.2,
-      selectedOpacity: t ? 0.16 : 0.25,
+      active: o ? f(_, 0.56) : f(M, 0.56),
+      hoverOpacity: o ? 0.1 : 0.2,
+      selectedOpacity: o ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: t ? i?.background?.default?.light || Ve : i?.background?.default?.dark || We,
-      paper: t ? i?.background?.paper?.light || Ke : i?.background?.paper?.dark || Ye,
-      highlight: t ? d[200] : d[600],
-      highlightPrimary: t ? o[100] : o[500]
+      default: o ? i?.background?.default?.light || Ve : i?.background?.default?.dark || We,
+      paper: o ? i?.background?.paper?.light || Ke : i?.background?.paper?.dark || Ye,
+      highlight: o ? d[200] : d[600],
+      highlightPrimary: o ? t[100] : t[500]
     },
-    divider: t ? f(_, 0.12) : f(R, 0.24),
+    divider: o ? f(_, 0.12) : f(M, 0.24),
     categories: {
-      autoTransport: t ? p.AUTO_TRANSPORTT : u.AUTO_TRANSPORTT,
-      billsUtilities: t ? p.BILLS_UTILITIES : u.BILLS_UTILITIES,
-      businessServices: t ? p.BUSINESS_SERVICES : u.BUSINESS_SERVICES,
-      education: t ? p.EDUCATION : u.EDUCATION,
-      entertainment: t ? p.ENTERTAINMENT : u.ENTERTAINMENT,
-      feesCharges: t ? p.FEES_CHARGES : u.FEES_CHARGES,
-      financial: t ? p.FINANCIAL : u.FINANCIAL,
-      foodDining: t ? p.FOOD_DINING : u.FOOD_DINING,
-      giftsDonations: t ? p.GIFTS_DONATIONS : u.GIFTS_DONATIONS,
-      healthFitness: t ? p.HEALTH_FITNESS : u.HEALTH_FITNESS,
-      home: t ? p.HOME : u.HOME,
-      income: t ? p.INCOME : u.INCOME,
-      investments: t ? p.INVESTMENTS : u.INVESTMENTS,
-      kids: t ? p.KIDS : u.KIDS,
-      others: t ? p.OTHERS : u.OTHERS,
-      personalCare: t ? p.PERSONAL_CARE : u.PERSONAL_CARE,
-      pets: t ? p.PETS : u.PETS,
-      shopping: t ? p.SHOPPING : u.SHOPPING,
-      taxes: t ? p.TAXES : u.TAXES,
-      transfer: t ? p.TRANSFER : u.TRANSFER,
-      travel: t ? p.TRAVEL : u.TRAVEL,
-      uncategorized: t ? p.UNCATEGORIZED : u.UNCATEGORIZED
+      autoTransport: o ? p.AUTO_TRANSPORTT : u.AUTO_TRANSPORTT,
+      billsUtilities: o ? p.BILLS_UTILITIES : u.BILLS_UTILITIES,
+      businessServices: o ? p.BUSINESS_SERVICES : u.BUSINESS_SERVICES,
+      education: o ? p.EDUCATION : u.EDUCATION,
+      entertainment: o ? p.ENTERTAINMENT : u.ENTERTAINMENT,
+      feesCharges: o ? p.FEES_CHARGES : u.FEES_CHARGES,
+      financial: o ? p.FINANCIAL : u.FINANCIAL,
+      foodDining: o ? p.FOOD_DINING : u.FOOD_DINING,
+      giftsDonations: o ? p.GIFTS_DONATIONS : u.GIFTS_DONATIONS,
+      healthFitness: o ? p.HEALTH_FITNESS : u.HEALTH_FITNESS,
+      home: o ? p.HOME : u.HOME,
+      income: o ? p.INCOME : u.INCOME,
+      investments: o ? p.INVESTMENTS : u.INVESTMENTS,
+      kids: o ? p.KIDS : u.KIDS,
+      others: o ? p.OTHERS : u.OTHERS,
+      personalCare: o ? p.PERSONAL_CARE : u.PERSONAL_CARE,
+      pets: o ? p.PETS : u.PETS,
+      shopping: o ? p.SHOPPING : u.SHOPPING,
+      taxes: o ? p.TAXES : u.TAXES,
+      transfer: o ? p.TRANSFER : u.TRANSFER,
+      travel: o ? p.TRAVEL : u.TRAVEL,
+      uncategorized: o ? p.UNCATEGORIZED : u.UNCATEGORIZED
     },
     chart: {
       chart1: y.CHART1,
@@ -1136,7 +1136,7 @@ const Gr = ({
     }
   };
 }, z = "Inter, Helvetica, Arial, sans-serif", je = (e) => {
-  const i = e?.fontFamily ? `${e?.fontFamily}, ${z}` : z, o = e?.headerFontFamily ? `${e.headerFontFamily}, ${z}` : i;
+  const i = e?.fontFamily ? `${e?.fontFamily}, ${z}` : z, t = e?.headerFontFamily ? `${e.headerFontFamily}, ${z}` : i;
   return {
     fontFamily: i,
     fontSize: 15,
@@ -1160,19 +1160,19 @@ const Gr = ({
       lineHeight: "16px"
     },
     h1: {
-      fontFamily: o,
+      fontFamily: t,
       fontWeight: 700,
       fontSize: 31,
       lineHeight: "40px"
     },
     h2: {
-      fontFamily: o,
+      fontFamily: t,
       fontWeight: 700,
       fontSize: 23,
       lineHeight: "32px"
     },
     h3: {
-      fontFamily: o,
+      fontFamily: t,
       fontWeight: 700,
       fontSize: 18,
       lineHeight: "24px"
@@ -1198,7 +1198,7 @@ Ne.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
 const Kr = (e, i) => {
-  const o = Xe(e, i?.paletteOptions), s = je(i?.typographyOptions), l = [...G().shadows];
+  const t = Xe(e, i?.paletteOptions), s = je(i?.typographyOptions), l = [...G().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)", G({
     breakpoints: i?.breakpoints || {
       values: {
@@ -1213,7 +1213,7 @@ const Kr = (e, i) => {
     cssVariables: {
       colorSchemeSelector: "class"
     },
-    palette: o,
+    palette: t,
     shape: {
       borderRadius: i?.shapeOptions?.borderRadius || 4
     },
@@ -1237,8 +1237,8 @@ const Kr = (e, i) => {
             const c = a.severity || "info";
             let d = r.palette.mode === S.LIGHT ? r.palette[c]?.[50] : r.palette[c]?.[800];
             if (a.variant === "filled") {
-              const t = c === "warning";
-              d = r.palette[c]?.[t ? 400 : 600];
+              const o = c === "warning";
+              d = r.palette[c]?.[o ? 400 : 600];
             }
             return {
               backgroundColor: d,
@@ -1323,7 +1323,7 @@ const Kr = (e, i) => {
         styleOverrides: {
           root: {
             "&.Mui-focusVisible": {
-              boxShadow: `inset 0 0 0 2px ${o.info.main}`
+              boxShadow: `inset 0 0 0 2px ${t.info.main}`
             }
           }
         }
@@ -1335,12 +1335,12 @@ const Kr = (e, i) => {
         },
         styleOverrides: {
           root: ({ theme: r, ownerState: a }) => {
-            const c = !a.color || a.color === "default" ? "primary" : a.color, d = a.size === "small", t = d ? r.typography.caption : r.typography.body2;
+            const c = !a.color || a.color === "default" ? "primary" : a.color, d = a.size === "small", o = d ? r.typography.caption : r.typography.body2;
             return {
               borderRadius: r.shape.borderRadius,
               color: r.palette[c].main,
-              fontSize: t.fontSize,
-              lineHeight: t.lineHeight,
+              fontSize: o.fontSize,
+              lineHeight: o.lineHeight,
               "&.Mui-focusVisible": {
                 outline: `2px solid ${r.palette.info.main}`,
                 outlineOffset: "2px"
@@ -1564,7 +1564,7 @@ const Kr = (e, i) => {
       MuiFormLabel: {
         styleOverrides: {
           asterisk: {
-            color: o.error.main
+            color: t.error.main
           }
         }
       },
@@ -1612,7 +1612,7 @@ const Kr = (e, i) => {
             borderRadius: 4
           },
           colorPrimary: {
-            backgroundColor: o.grey[300]
+            backgroundColor: t.grey[300]
           }
         }
       },
@@ -1672,14 +1672,8 @@ const Kr = (e, i) => {
       MuiListItemAvatar: {
         styleOverrides: {
           root: {
-            height: 32,
             marginRight: 12,
-            minWidth: 32,
-            width: 32,
-            "& .MuiAvatar-root": {
-              height: 32,
-              width: 32
-            }
+            minWidth: "unset"
           }
         }
       },
@@ -1717,7 +1711,7 @@ const Kr = (e, i) => {
             },
             secondary: {
               fontSize: 11,
-              color: o.text.secondary
+              color: t.text.secondary
             }
           }
         },
@@ -1738,7 +1732,7 @@ const Kr = (e, i) => {
             lineHeight: "inherit",
             top: -1,
             // This fixes an issue where there is a 1px gap when the subheader sticks to the top while scrolling
-            backgroundColor: o.background.default
+            backgroundColor: t.background.default
           }
         }
       },
@@ -1915,7 +1909,7 @@ const Kr = (e, i) => {
             fontWeight: 600,
             "&.Mui-focusVisible": {
               outline: "none",
-              boxShadow: `inset 0 0 0 2px ${o.info.main}`,
+              boxShadow: `inset 0 0 0 2px ${t.info.main}`,
               borderRadius: 4
             }
           }
@@ -1926,7 +1920,7 @@ const Kr = (e, i) => {
           root: {
             borderBottomStyle: "solid",
             borderBottomWidth: 1,
-            borderColor: o.divider,
+            borderColor: t.divider,
             marginBottom: 8
           }
         }
@@ -1942,7 +1936,7 @@ const Kr = (e, i) => {
         },
         styleOverrides: {
           root: {
-            backgroundColor: o.background.paper
+            backgroundColor: t.background.paper
           }
         }
       },
@@ -1957,13 +1951,13 @@ const Kr = (e, i) => {
             lineHeight: "16px",
             textTransform: "none",
             "&:focus-visible": {
-              outline: `2px solid ${o.info.main}`,
+              outline: `2px solid ${t.info.main}`,
               outlineOffset: "2px"
             },
             "&:hover": {
               backgroundColor: f(
                 r.palette.primary.main,
-                o.mode === S.LIGHT ? 0.1 : 0.2
+                t.mode === S.LIGHT ? 0.1 : 0.2
               ),
               borderColor: r.palette.primary.main
             },
@@ -1987,19 +1981,19 @@ const Kr = (e, i) => {
             props: { color: "error" },
             style: {
               "&:hover": {
-                backgroundColor: f(o.error.main, o.mode === S.LIGHT ? 0.1 : 0.2),
-                borderColor: o.error.main
+                backgroundColor: f(t.error.main, t.mode === S.LIGHT ? 0.1 : 0.2),
+                borderColor: t.error.main
               },
               "&.Mui-selected": {
-                borderColor: o.error.main,
+                borderColor: t.error.main,
                 "&:hover": {
-                  boxShadow: `inset 0px 0px 0px 2px ${o.error.main}`
+                  boxShadow: `inset 0px 0px 0px 2px ${t.error.main}`
                 }
               },
               "& .MuiTouchRipple-root": {
                 "& .MuiTouchRipple-ripple": {
                   "& .MuiTouchRipple-child": {
-                    backgroundColor: o.error.main
+                    backgroundColor: t.error.main
                   }
                 }
               }
@@ -2010,21 +2004,21 @@ const Kr = (e, i) => {
             style: {
               "&:hover": {
                 backgroundColor: f(
-                  o.secondary.main,
-                  o.mode === S.LIGHT ? 0.1 : 0.2
+                  t.secondary.main,
+                  t.mode === S.LIGHT ? 0.1 : 0.2
                 ),
-                borderColor: o.secondary.main
+                borderColor: t.secondary.main
               },
               "&.Mui-selected": {
-                borderColor: o.secondary.main,
+                borderColor: t.secondary.main,
                 "&:hover": {
-                  boxShadow: `inset 0px 0px 0px 2px ${o.secondary.main}`
+                  boxShadow: `inset 0px 0px 0px 2px ${t.secondary.main}`
                 }
               },
               "& .MuiTouchRipple-root": {
                 "& .MuiTouchRipple-ripple": {
                   "& .MuiTouchRipple-child": {
-                    backgroundColor: o.secondary.main
+                    backgroundColor: t.secondary.main
                   }
                 }
               }