@mxenabled/mxui 2.9.2 → 2.10.0

package/dist/index.es.js

@@ -28,13 +28,13 @@ import re from "@mui/material/Typography";
 import Ie from "@mui/material/Drawer";
 import Oe from "@mui/material/Snackbar";
 import Ee from "@mui/material/Alert";
-import { FormControlLabel as Fe, Box as P, Typography as X, Radio as B, Checkbox as ve, alpha as m, darken as L, lighten as E, getContrastRatio as Le } from "@mui/material";
+import { FormControlLabel as ve, Box as P, Typography as X, Radio as B, Checkbox as Fe, alpha as m, darken as L, lighten as E, getContrastRatio as Le } from "@mui/material";
 import { circularProgressClasses as ke } from "@mui/material/CircularProgress";
 import { LicenseInfo as Ne } from "@mui/x-license";
 const H = ({
   children: r,
   height: i,
-  size: t = 16,
+  size: o = 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 || t,
+    height: i || o,
     viewBox: s,
-    width: l || t,
+    width: l || o,
     xmlns: "http://www.w3.org/2000/svg",
     children: r
   }
-), T = ({ color: r, fill: i = !1, name: t, size: s = 20, sx: l, ...e }) => /* @__PURE__ */ n(se, { color: r, fill: i, name: t, size: s, sx: l, ...e }), Fr = ({
+), T = ({ color: r, fill: i = !1, name: o, size: s = 20, sx: l, ...e }) => /* @__PURE__ */ n(se, { color: r, fill: i, name: o, size: s, sx: l, ...e }), vr = ({
   color: r = "currentColor",
   ...i
 }) => /* @__PURE__ */ b(H, { ...i, children: [
@@ -67,7 +67,7 @@ const H = ({
       fill: r
     }
   )
-] }), vr = ({
+] }), Fr = ({
   color: r = "currentColor",
   ...i
 }) => /* @__PURE__ */ b(H, { ...i, children: [
@@ -143,7 +143,7 @@ const H = ({
   )
 ] });
 var g = /* @__PURE__ */ ((r) => (r.AutoTransport = "CAT-7829f71c-2e8c-afa5-2f55-fa3634b89874", r.BillsUtilities = "CAT-79b02f2f-2adc-88f0-ac2b-4e71ead9cfc8", r.BusinessServices = "CAT-94b11142-e97b-941a-f67f-6e18d246a23f", r.Education = "CAT-bf5c9cca-c96b-b50d-440d-38d9adfda5b0", r.Entertainment = "CAT-e04e9d1e-e041-c315-2e50-094143ab3f73", r.FeesCharges = "CAT-d73ee74b-13a4-ac3e-4015-fc4ba9a62b2a", r.Financial = "CAT-6c7de3f8-de6c-7061-1dd2-b093044014bf", r.FoodDining = "CAT-bd56d35a-a9a7-6e10-66c1-5b9cc1b6c81a", r.GiftsDonations = "CAT-8edf9663-623e-4735-490e-31288f0a70b0", r.HealthFitness = "CAT-52fa4693-c088-afb2-2a99-7bc39bb23a0f", r.Home = "CAT-b709172b-4eb7-318e-3b5d-e0f0500b32ac", r.Income = "CAT-bf9f3294-4c40-1677-d269-54fbc189faf3", r.Investments = "CAT-ccd42390-9e8c-3fb6-a5d9-6c31182d9c5c", r.Kids = "CAT-0cb1d99d-f558-99e3-2282-b31f359b411a", r.PersonalCare = "CAT-e5154228-fe45-790d-a280-f6bf5ae5ac9f", r.Pets = "CAT-7cccbafa-87d7-c9a6-661b-8b3402fe9e78", r.Shopping = "CAT-aad51b46-d6f7-3da5-fd6e-492328b3023f", r.Taxes = "CAT-d00fc539-aa14-009b-4ffb-7e8c7b839954", r.Transfer = "CAT-bce48142-fea4-ff45-20d9-0a642d44de83", r.Travel = "CAT-ea23d844-cbd1-eb10-f6ac-0df9610e59ae", r.Uncategorized = "CAT-d7851c65-3353-e490-1953-fb9235e681e4", r))(g || {}), He = /* @__PURE__ */ ((r) => (r.Basic = "basic", r.Filled = "filled", r.Transparent = "transparent", r.TwoTone = "two-tone", r))(He || {});
-const oe = {
+const te = {
   guid: g.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
@@ -248,16 +248,16 @@ const oe = {
     colorName: "travel",
     icon: "airplane_ticket"
   },
-  oe
+  te
 ], we = 0.625, Pe = ({
   categoryGuid: r,
   icon_ratio: i = we,
-  size: t = 32,
+  size: o = 32,
   sx: s = {},
   variant: l = "filled"
 }) => {
   const e = O(), a = N.useMemo(
-    () => De.find((f) => f.guid === r) ?? oe,
+    () => De.find((f) => f.guid === r) ?? te,
     [r]
   ), c = e.palette.categories[a.colorName];
   return /* @__PURE__ */ n(
@@ -273,15 +273,15 @@ const oe = {
         const f = l === "filled" ? e.palette.common.white : c;
         return l === "basic" ? e.palette.text.primary : f;
       },
-      height: t,
+      height: o,
       justifyContent: "center",
       sx: [...Array.isArray(s) ? s : [s]],
-      width: t,
-      children: /* @__PURE__ */ n(T, { name: a.icon, size: t * i })
+      width: o,
+      children: /* @__PURE__ */ n(T, { name: a.icon, size: o * i })
     }
   );
 }, Be = ({ items: r, selected: i }) => {
-  const t = O(), { setValue: s } = Z(), l = Q(), e = r?.map((a) => {
+  const o = O(), { setValue: s } = Z(), l = Q(), e = r?.map((a) => {
     const c = a.getValue({ isValid: l });
     return {
       label: a.label,
@@ -305,11 +305,11 @@ const oe = {
           boxShadow: "0px 0px 0px 2px rgba(82, 138, 224, 0.8)"
         },
         "&:hover": {
-          bgcolor: t.palette.action.hover,
-          borderTop: `1px solid ${t.palette.secondary.light}`
+          bgcolor: o.palette.action.hover,
+          borderTop: `1px solid ${o.palette.secondary.light}`
         },
         "&.Mui-selected": {
-          border: `2px solid ${t.palette.primary.main} !important`,
+          border: `2px solid ${o.palette.primary.main} !important`,
           marginTop: "-2px !important",
           color: "primary"
         }
@@ -322,7 +322,7 @@ const oe = {
 }, _e = ({
   items: r,
   selected: i,
-  selectLabel: t
+  selectLabel: o
 }) => {
   const { setValue: s } = Z(), l = Q(), e = r?.map((a) => {
     const c = a.getValue({ isValid: l });
@@ -339,7 +339,7 @@ const oe = {
     {
       defaultValue: i,
       id: "select",
-      label: t,
+      label: o,
       select: !0,
       slotProps: { inputLabel: { shrink: !0 }, select: { IconComponent: ce } },
       sx: { width: "100%" },
@@ -349,7 +349,7 @@ const oe = {
     }
   ) });
 }, ze = (r) => {
-  const { toolbar: i, content: t, shortcuts: s, ownerState: l } = ye(r);
+  const { toolbar: i, content: o, shortcuts: s, ownerState: l } = ye(r);
   return /* @__PURE__ */ b(
     Se,
     {
@@ -378,7 +378,7 @@ const oe = {
           {
             className: w.contentWrapper,
             ownerState: l,
-            children: t
+            children: o
           }
         )
       ]
@@ -387,16 +387,16 @@ const oe = {
 }, Nr = ({
   copy: r,
   dateRange: i,
-  onRangeChanged: t,
+  onRangeChanged: o,
   selectedShortcut: s = r.dateRangeThisMonth,
   sx: l = {}
 }) => {
   const e = O(), a = fe(e.breakpoints.down("sm")), c = N.useMemo(() => {
-    const o = ue(), f = ge(o, 1), x = he(o, 1);
+    const t = ue(), f = ge(t, 1), x = he(t, 1);
     return [
       {
         label: r.dateRangeThisMonth,
-        getValue: () => [W(o), V(o)]
+        getValue: () => [W(t), V(t)]
       },
       {
         label: r.dateRangeLastMonth,
@@ -404,15 +404,15 @@ const oe = {
       },
       {
         label: r.dateRangeLast30Days,
-        getValue: () => [Y(o, 30), o]
+        getValue: () => [Y(t, 30), t]
       },
       {
         label: r.dateRangeLast90Days,
-        getValue: () => [Y(o, 90), o]
+        getValue: () => [Y(t, 90), t]
       },
       {
         label: r.dateRangeYTD,
-        getValue: () => [K(o), o]
+        getValue: () => [K(t), t]
       },
       {
         label: r.dateRangeLastYear,
@@ -420,12 +420,12 @@ const oe = {
       },
       {
         label: r.dateRangeCustom,
-        getValue: () => [o, o]
+        getValue: () => [t, t]
       }
     ];
-  }, [r]), d = (o, f) => {
+  }, [r]), d = (t, f) => {
     const x = f.shortcut;
-    t?.(o, x ? x.label : r.dateRangeCustom);
+    o?.(t, x ? x.label : r.dateRangeCustom);
   };
   return /* @__PURE__ */ n(A, { gap: a ? 0 : "16px", m: a ? 0 : "8px", children: /* @__PURE__ */ n(me, { dateAdapter: xe, children: /* @__PURE__ */ n(
     be,
@@ -458,22 +458,22 @@ const oe = {
       slots: {
         ...a && { layout: ze },
         leftArrowIcon: () => /* @__PURE__ */ n(T, { name: "chevron_left", size: 28 }),
-        shortcuts: (o) => a ? /* @__PURE__ */ n(
+        shortcuts: (t) => a ? /* @__PURE__ */ n(
           _e,
           {
             selectLabel: r.dateRangeSelectARange,
             selected: s,
-            ...o
+            ...t
           }
-        ) : /* @__PURE__ */ n(Be, { selected: s, ...o }),
+        ) : /* @__PURE__ */ n(Be, { selected: s, ...t }),
         rightArrowIcon: () => /* @__PURE__ */ n(T, { name: "chevron_right", size: 28 }),
         ...a && {
-          toolbar: (o) => /* @__PURE__ */ n(
+          toolbar: (t) => /* @__PURE__ */ n(
             Te,
             {
               dateSeparator: "",
               format: "MM/dd/yyyy",
-              ...o,
+              ...t,
               slotProps: {
                 textField: ({ position: f }) => ({
                   label: f === "start" ? r.dateRangeFrom : r.dateRangeTo
@@ -488,12 +488,12 @@ const oe = {
       value: i
     }
   ) }) });
-}, Hr = N.forwardRef(function(i, t) {
-  return /* @__PURE__ */ n(q, { direction: "up", ref: t, ...i });
+}, Hr = N.forwardRef(function(i, o) {
+  return /* @__PURE__ */ n(q, { direction: "up", ref: o, ...i });
 }), $e = ({
   hasSecondaryAction: r = !0,
   isPrimaryDisabled: i,
-  onPrimaryAction: t,
+  onPrimaryAction: o,
   onSecondaryAction: s,
   primaryColor: l = "primary",
   primaryText: e = "Save",
@@ -512,26 +512,26 @@ const oe = {
         {
           color: a,
           onClick: s,
-          variant: t ? "outlined" : "contained",
+          variant: o ? "outlined" : "contained",
           children: c
         }
       ),
-      t && /* @__PURE__ */ n(
+      o && /* @__PURE__ */ n(
         $,
         {
           color: l,
           disabled: i,
-          onClick: t,
+          onClick: o,
           variant: "contained",
           children: e
         }
       )
     ]
   }
-), F = ({
+), v = ({
   bold: r,
   className: i = "",
-  children: t,
+  children: o,
   color: s,
   sx: l = {},
   truncate: e,
@@ -557,12 +557,12 @@ const oe = {
       ...Array.isArray(l) ? l : [l]
     ],
     ...c,
-    children: t
+    children: o
   }
-), Ue = ({ className: r = "", children: i, ...t }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h1 ${r}`, component: "h1", variant: "h1", ...t, children: i }), Dr = ({ className: r = "", children: i, ...t }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h2 ${r}`, component: "h2", variant: "h2", ...t, children: i }), wr = ({ className: r = "", children: i, ...t }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h3 ${r}`, component: "h3", variant: "h3", ...t, children: i }), Pr = ({ className: r = "", children: i, ...t }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text p ${r}`, component: "p", variant: "body1", ...t, children: i }), Br = ({
+), Ue = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(v, { className: `mx-mxui-text h1 ${r}`, component: "h1", variant: "h1", ...o, children: i }), Dr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(v, { className: `mx-mxui-text h2 ${r}`, component: "h2", variant: "h2", ...o, children: i }), wr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(v, { className: `mx-mxui-text h3 ${r}`, component: "h3", variant: "h3", ...o, children: i }), Pr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(v, { className: `mx-mxui-text p ${r}`, component: "p", variant: "body1", ...o, children: i }), Br = ({
   ariaHidden: r = !1,
   copy: i,
-  id: t,
+  id: o,
   onClose: s,
   truncate: l = !1
 }) => /* @__PURE__ */ b(
@@ -579,8 +579,8 @@ const oe = {
       /* @__PURE__ */ n(
         Ue,
         {
-          "aria-hidden": r && t ? !0 : void 0,
-          id: t,
+          "aria-hidden": r && o ? !0 : void 0,
+          id: o,
           truncate: l,
           variant: "h3",
           children: i.title
@@ -592,24 +592,24 @@ const oe = {
 ), _r = ({
   className: r,
   disableSave: i,
-  id: t,
+  id: o,
   isOpen: s,
   onClose: l,
   onSave: e,
   primaryText: a,
   secondaryText: c,
   children: d,
-  ...o
+  ...t
 }) => /* @__PURE__ */ b(
   Ie,
   {
     anchor: "right",
     className: `mx-kmui-drawer ${r}`,
-    id: t ?? void 0,
+    id: o ?? void 0,
     onClose: l,
     open: s,
     variant: "temporary",
-    ...o,
+    ...t,
     children: [
       d,
       e && /* @__PURE__ */ n(
@@ -624,11 +624,11 @@ const oe = {
       )
     ]
   }
-), te = 32, U = "https://content.moneydesktop.com/storage/MD_Assets", j = `${U}/serenity/default_institution_logo.png`, zr = ({
+), oe = 32, U = "https://content.moneydesktop.com/storage/MD_Assets", j = `${U}/serenity/default_institution_logo.png`, zr = ({
   alt: r,
   institutionGuid: i,
-  logoUrl: t,
-  size: s = te,
+  logoUrl: o,
+  size: s = oe,
   ...l
 }) => /* @__PURE__ */ n(
   "img",
@@ -639,7 +639,7 @@ const oe = {
       const a = e.target;
       a.src !== j && (a.src = j);
     },
-    src: t || `${U}/Ipad%20Logos/100x100/${i}_100x100.png`,
+    src: o || `${U}/Ipad%20Logos/100x100/${i}_100x100.png`,
     style: {
       borderRadius: 4
     },
@@ -649,20 +649,20 @@ const oe = {
 ), $r = ({
   alt: r = "",
   categoryGuid: i,
-  merchantGuid: t,
-  size: s = te,
+  merchantGuid: o,
+  size: s = oe,
   ...l
 }) => {
   const [e, a] = N.useState(!1), c = O();
   return /* @__PURE__ */ b(k, { display: "inline-block", position: "relative", ...l, children: [
-    t && !e && /* @__PURE__ */ n(
+    o && !e && /* @__PURE__ */ n(
       "img",
       {
         alt: r,
         "aria-hidden": !r,
         height: s,
         onError: () => a(!0),
-        src: `${U}/merchant_logos/${t}.png`,
+        src: `${U}/merchant_logos/${o}.png`,
         style: {
           backgroundColor: c.palette.common.white,
           borderRadius: 4,
@@ -677,7 +677,7 @@ const oe = {
 }, Ur = ({
   disabled: r = !1,
   label: i = "",
-  shrink: t = !0,
+  shrink: o = !0,
   truncate: s = !1,
   variant: l = "outlined",
   ...e
@@ -688,7 +688,7 @@ const oe = {
     label: i,
     slotProps: {
       inputLabel: {
-        shrink: t,
+        shrink: o,
         ...s && {
           sx: {
             maxWidth: "100%",
@@ -709,17 +709,17 @@ function Ge(r) {
 const Gr = ({
   open: r = !0,
   handleClose: i,
-  closeAriaLabel: t,
+  closeAriaLabel: o,
   message: s,
   autoHideDuration: l = 3e3,
   severity: e = "success",
   snackbarSx: a,
   showAction: c = !1,
   showClose: d = !1,
-  actionText: o = "Undo",
+  actionText: t = "Undo",
   onActionClick: f
 }) => {
-  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 = `${e}.main`;
+  const x = O(), F = d && /* @__PURE__ */ n(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ n(T, { fill: !0, name: "close" }) }), h = `${e}.main`;
   return /* @__PURE__ */ n(
     Oe,
     {
@@ -737,7 +737,7 @@ const Gr = ({
       children: /* @__PURE__ */ n(
         Ee,
         {
-          action: v,
+          action: F,
           severity: e,
           sx: {
             backgroundColor: h,
@@ -768,7 +768,7 @@ const Gr = ({
               },
               children: [
                 /* @__PURE__ */ n(
-                  F,
+                  v,
                   {
                     sx: {
                       lineHeight: x.typography.body1.lineHeight,
@@ -792,7 +792,7 @@ const Gr = ({
                       minWidth: "auto",
                       justifyContent: "flex-start"
                     },
-                    children: o
+                    children: t
                   }
                 )
               ]
@@ -805,23 +805,23 @@ const Gr = ({
 }, Vr = ({
   component: r = B,
   variant: i = "outlined",
-  selected: t,
+  selected: o,
   onChange: s,
   headline: l,
   message: e,
   name: a,
   value: c,
   disabled: d = !1,
-  error: o = !1,
+  error: t = !1,
   icon: f = !1,
   sx: x = {},
-  ...v
+  ...F
 }) => {
-  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 ${m(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(h.palette.common.black, 0.23)}` : t ? `inset 0px 0px 0px 2px ${m(h.palette.primary.main, 0.5)}` : h.shadows[1], ae = () => d || o ? h.palette.background.paper : m(h.palette.primary.main, 0.1), ne = () => d || o ? D() : i === "outlined" ? t ? `inset 0px 0px 0px 2px ${m(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(h.palette.primary.main, 0.5)}` : D(), le = () => d || o ? h.palette.background.paper : m(h.palette.primary.main, 0.3);
+  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 ${m(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(h.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${m(h.palette.primary.main, 0.5)}` : h.shadows[1], ae = () => d || t ? h.palette.background.paper : m(h.palette.primary.main, 0.1), ne = () => d || t ? D() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${m(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(h.palette.primary.main, 0.5)}` : D(), le = () => d || t ? h.palette.background.paper : m(h.palette.primary.main, 0.3);
   return /* @__PURE__ */ n(
-    Fe,
+    ve,
     {
-      checked: t,
+      checked: o,
       control: r === B ? /* @__PURE__ */ n(
         B,
         {
@@ -835,10 +835,10 @@ const Gr = ({
               fontSize: "20px"
             }
           },
-          ...v
+          ...F
         }
       ) : /* @__PURE__ */ n(
-        ve,
+        Fe,
         {
           name: a,
           sx: {
@@ -850,7 +850,7 @@ const Gr = ({
               fontSize: "20px"
             }
           },
-          ...v
+          ...F
         }
       ),
       disabled: d,
@@ -897,7 +897,7 @@ const Gr = ({
   );
 }, S = {
   LIGHT: "light"
-}, Wr = ({ color: r = "neutral", icon: i, label: t, size: s = "small", sx: l, ...e }) => /* @__PURE__ */ b(
+}, Wr = ({ color: r = "neutral", icon: i, label: o, size: s = "small", sx: l, ...e }) => /* @__PURE__ */ b(
   k,
   {
     component: "span",
@@ -939,7 +939,7 @@ const Gr = ({
           component: "span",
           sx: { fontWeight: "bold", textTransform: "uppercase" },
           variant: "tiny",
-          children: t
+          children: o
         }
       )
     ]
@@ -1025,7 +1025,7 @@ const Gr = ({
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
 }, Xe = (r, i) => {
-  const t = R(i?.primary || C.PRIMARY), s = R(i?.secondary || C.SECONDARY), l = R(i?.error || C.ERROR), e = R(i?.warning || C.WARNING), a = R(i?.info || C.INFO), c = R(i?.success || C.SUCCESS), d = R(i?.grey || C.GREY), o = r === S.LIGHT;
+  const o = R(i?.primary || C.PRIMARY), s = R(i?.secondary || C.SECONDARY), l = R(i?.error || C.ERROR), e = R(i?.warning || C.WARNING), a = R(i?.info || C.INFO), c = R(i?.success || C.SUCCESS), d = R(i?.grey || C.GREY), t = r === S.LIGHT;
   return {
     mode: r,
     common: {
@@ -1033,104 +1033,104 @@ const Gr = ({
       black: _
     },
     primary: {
-      ...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]
+      ...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]
     },
     secondary: {
       ...s,
-      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]
+      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]
     },
     neutral: {
       ...d,
-      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]
+      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 ? M : d[900]
     },
     text: {
-      primary: o ? d[900] : M,
-      secondary: o ? d[600] : m(M, 0.7),
-      disabled: o ? d[500] : m(M, 0.38)
+      primary: t ? d[900] : M,
+      secondary: t ? d[600] : m(M, 0.7),
+      disabled: t ? d[500] : m(M, 0.38)
     },
     error: {
       ...l,
-      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]
+      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]
     },
     warning: {
       ...e,
-      lighter: o ? e[100] : e[700],
-      light: o ? e[300] : e[600],
-      main: o ? e[500] : e[400],
-      dark: o ? e[700] : e[200],
-      darker: o ? e[800] : e[100]
+      lighter: t ? e[100] : e[700],
+      light: t ? e[300] : e[600],
+      main: t ? e[500] : e[400],
+      dark: t ? e[700] : e[200],
+      darker: t ? e[800] : e[100]
     },
     info: {
       ...a,
-      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]
+      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]
     },
     success: {
       ...c,
-      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]
+      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]
     },
     grey: d,
     action: {
-      active: o ? m(_, 0.56) : m(M, 0.56),
-      hoverOpacity: o ? 0.1 : 0.2,
-      selectedOpacity: o ? 0.16 : 0.25,
+      active: t ? m(_, 0.56) : m(M, 0.56),
+      hoverOpacity: t ? 0.1 : 0.2,
+      selectedOpacity: t ? 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 || Ke : i?.background?.paper?.dark || Ye,
-      highlight: o ? d[200] : d[600],
-      highlightPrimary: o ? t[100] : t[500]
+      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]
     },
-    divider: o ? m(_, 0.12) : m(M, 0.24),
+    divider: t ? m(_, 0.12) : m(M, 0.24),
     categories: {
-      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
+      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
     },
     chart: {
       chart1: y.CHART1,
@@ -1151,7 +1151,7 @@ const Gr = ({
     }
   };
 }, z = "Inter, Helvetica, Arial, sans-serif", je = (r) => {
-  const i = r?.fontFamily ? `${r?.fontFamily}, ${z}` : z, t = r?.headerFontFamily ? `${r.headerFontFamily}, ${z}` : i;
+  const i = r?.fontFamily ? `${r?.fontFamily}, ${z}` : z, o = r?.headerFontFamily ? `${r.headerFontFamily}, ${z}` : i;
   return {
     fontFamily: i,
     fontSize: 15,
@@ -1175,19 +1175,19 @@ const Gr = ({
       lineHeight: "16px"
     },
     h1: {
-      fontFamily: t,
+      fontFamily: o,
       fontWeight: 700,
       fontSize: 31,
       lineHeight: "40px"
     },
     h2: {
-      fontFamily: t,
+      fontFamily: o,
       fontWeight: 700,
       fontSize: 23,
       lineHeight: "32px"
     },
     h3: {
-      fontFamily: t,
+      fontFamily: o,
       fontWeight: 700,
       fontSize: 18,
       lineHeight: "24px"
@@ -1213,7 +1213,7 @@ Ne.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
 const Kr = (r, i) => {
-  const t = Xe(r, i?.paletteOptions), s = je(i?.typographyOptions), l = [...G().shadows];
+  const o = Xe(r, 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: {
@@ -1228,7 +1228,7 @@ const Kr = (r, i) => {
     cssVariables: {
       colorSchemeSelector: "class"
     },
-    palette: t,
+    palette: o,
     shape: {
       borderRadius: i?.shapeOptions?.borderRadius || 4
     },
@@ -1252,8 +1252,8 @@ const Kr = (r, i) => {
             const c = a.severity || "info";
             let d = e.palette.mode === S.LIGHT ? e.palette[c]?.[50] : e.palette[c]?.[800];
             if (a.variant === "filled") {
-              const o = c === "warning";
-              d = e.palette[c]?.[o ? 400 : 600];
+              const t = c === "warning";
+              d = e.palette[c]?.[t ? 400 : 600];
             }
             return {
               backgroundColor: d,
@@ -1338,7 +1338,7 @@ const Kr = (r, i) => {
         styleOverrides: {
           root: {
             "&.Mui-focusVisible": {
-              boxShadow: `inset 0 0 0 2px ${t.info.main}`
+              boxShadow: `inset 0 0 0 2px ${o.info.main}`
             }
           }
         }
@@ -1350,12 +1350,12 @@ const Kr = (r, i) => {
         },
         styleOverrides: {
           root: ({ theme: e, ownerState: a }) => {
-            const c = !a.color || a.color === "default" ? "primary" : a.color, d = a.size === "small", o = d ? e.typography.caption : e.typography.body2;
+            const c = !a.color || a.color === "default" ? "primary" : a.color, d = a.size === "small", t = d ? e.typography.caption : e.typography.body2;
             return {
               borderRadius: e.shape.borderRadius,
               color: e.palette[c].main,
-              fontSize: o.fontSize,
-              lineHeight: o.lineHeight,
+              fontSize: t.fontSize,
+              lineHeight: t.lineHeight,
               "&.Mui-focusVisible": {
                 outline: `2px solid ${e.palette.info.main}`,
                 outlineOffset: "2px"
@@ -1526,7 +1526,15 @@ const Kr = (r, i) => {
       MuiDivider: {
         defaultProps: {
           "aria-hidden": !0
-        }
+        },
+        variants: [
+          {
+            props: { variant: "partialInset" },
+            style: {
+              marginLeft: "24px"
+            }
+          }
+        ]
       },
       MuiDrawer: {
         styleOverrides: {
@@ -1579,7 +1587,7 @@ const Kr = (r, i) => {
       MuiFormLabel: {
         styleOverrides: {
           asterisk: {
-            color: t.error.main
+            color: o.error.main
           }
         }
       },
@@ -1627,7 +1635,7 @@ const Kr = (r, i) => {
             borderRadius: 4
           },
           colorPrimary: {
-            backgroundColor: t.grey[300]
+            backgroundColor: o.grey[300]
           }
         }
       },
@@ -1679,7 +1687,8 @@ const Kr = (r, i) => {
             ...!e.disablePadding && {
               paddingTop: 12,
               paddingBottom: 12,
-              paddingLeft: 24
+              paddingLeft: 24,
+              paddingRight: 24
             }
           })
         }
@@ -1726,7 +1735,7 @@ const Kr = (r, i) => {
             },
             secondary: {
               fontSize: 11,
-              color: t.text.secondary
+              color: o.text.secondary
             }
           }
         },
@@ -1747,7 +1756,7 @@ const Kr = (r, 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: t.background.default
+            backgroundColor: o.background.default
           }
         }
       },
@@ -1924,7 +1933,7 @@ const Kr = (r, i) => {
             fontWeight: 600,
             "&.Mui-focusVisible": {
               outline: "none",
-              boxShadow: `inset 0 0 0 2px ${t.info.main}`,
+              boxShadow: `inset 0 0 0 2px ${o.info.main}`,
               borderRadius: 4
             }
           }
@@ -1935,7 +1944,7 @@ const Kr = (r, i) => {
           root: {
             borderBottomStyle: "solid",
             borderBottomWidth: 1,
-            borderColor: t.divider,
+            borderColor: o.divider,
             marginBottom: 8
           }
         }
@@ -1951,7 +1960,7 @@ const Kr = (r, i) => {
         },
         styleOverrides: {
           root: {
-            backgroundColor: t.background.paper
+            backgroundColor: o.background.paper
           }
         }
       },
@@ -1966,13 +1975,13 @@ const Kr = (r, i) => {
             lineHeight: "16px",
             textTransform: "none",
             "&:focus-visible": {
-              outline: `2px solid ${t.info.main}`,
+              outline: `2px solid ${o.info.main}`,
               outlineOffset: "2px"
             },
             "&:hover": {
               backgroundColor: m(
                 e.palette.primary.main,
-                t.mode === S.LIGHT ? 0.1 : 0.2
+                o.mode === S.LIGHT ? 0.1 : 0.2
               ),
               borderColor: e.palette.primary.main
             },
@@ -1996,19 +2005,19 @@ const Kr = (r, i) => {
             props: { color: "error" },
             style: {
               "&:hover": {
-                backgroundColor: m(t.error.main, t.mode === S.LIGHT ? 0.1 : 0.2),
-                borderColor: t.error.main
+                backgroundColor: m(o.error.main, o.mode === S.LIGHT ? 0.1 : 0.2),
+                borderColor: o.error.main
               },
               "&.Mui-selected": {
-                borderColor: t.error.main,
+                borderColor: o.error.main,
                 "&:hover": {
-                  boxShadow: `inset 0px 0px 0px 2px ${t.error.main}`
+                  boxShadow: `inset 0px 0px 0px 2px ${o.error.main}`
                 }
               },
               "& .MuiTouchRipple-root": {
                 "& .MuiTouchRipple-ripple": {
                   "& .MuiTouchRipple-child": {
-                    backgroundColor: t.error.main
+                    backgroundColor: o.error.main
                   }
                 }
               }
@@ -2019,21 +2028,21 @@ const Kr = (r, i) => {
             style: {
               "&:hover": {
                 backgroundColor: m(
-                  t.secondary.main,
-                  t.mode === S.LIGHT ? 0.1 : 0.2
+                  o.secondary.main,
+                  o.mode === S.LIGHT ? 0.1 : 0.2
                 ),
-                borderColor: t.secondary.main
+                borderColor: o.secondary.main
               },
               "&.Mui-selected": {
-                borderColor: t.secondary.main,
+                borderColor: o.secondary.main,
                 "&:hover": {
-                  boxShadow: `inset 0px 0px 0px 2px ${t.secondary.main}`
+                  boxShadow: `inset 0px 0px 0px 2px ${o.secondary.main}`
                 }
               },
               "& .MuiTouchRipple-root": {
                 "& .MuiTouchRipple-ripple": {
                   "& .MuiTouchRipple-child": {
-                    backgroundColor: t.secondary.main
+                    backgroundColor: o.secondary.main
                   }
                 }
               }
@@ -2077,15 +2086,15 @@ export {
   z as INTER,
   T as Icon,
   zr as InstitutionLogo,
-  vr as MXLogoCopyrightIcon,
+  Fr as MXLogoCopyrightIcon,
   Lr as MXLogoFilledIcon,
-  Fr as MXLogoIcon,
+  vr as MXLogoIcon,
   kr as MXLogoOutlineIcon,
   $r as MerchantLogo,
   Pr as P,
   Vr as SelectionBox,
   Wr as Tag,
-  F as Text,
+  v as Text,
   Ur as TextField,
   Gr as Toast,
   Kr as createMXTheme