@mxenabled/mxui 1.5.9-alpha.al0 → 1.5.11-alpha.al0

package/dist/index.es.js

@@ -1,75 +1,75 @@
 import { jsx as a, jsxs as T } from "react/jsx-runtime";
-import R from "react";
+import x from "react";
 import I from "@mui/material/Stack";
-import { useTheme as H, createTheme as ce } from "@mui/material/styles";
+import { useTheme as H, createTheme as U } from "@mui/material/styles";
 import { Icon as se, ExpandMore as de, Close as ue } from "@mxenabled/mx-icons";
-import { endOfMonth as U } from "date-fns/endOfMonth";
+import { endOfMonth as W } from "date-fns/endOfMonth";
 import { endOfYear as pe } from "date-fns/endOfYear";
 import { startOfToday as he } from "date-fns/startOfToday";
-import { startOfMonth as W } from "date-fns/startOfMonth";
-import { startOfYear as Z } from "date-fns/startOfYear";
-import { subDays as K } from "date-fns/subDays";
+import { startOfMonth as Z } from "date-fns/startOfMonth";
+import { startOfYear as K } from "date-fns/startOfYear";
+import { subDays as Y } from "date-fns/subDays";
 import { subMonths as ge } from "date-fns/subMonths";
 import { subYears as me } from "date-fns/subYears";
 import fe from "@mui/material/useMediaQuery";
 import { LocalizationProvider as be, StaticDateRangePicker as Te } from "@mui/x-date-pickers-pro";
 import { AdapterDateFns as Ce } from "@mui/x-date-pickers-pro/AdapterDateFnsV3";
-import { MultiInputDateRangeField as Re } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
-import X from "@mui/material/Box";
-import xe from "@mui/material/ToggleButton";
+import { MultiInputDateRangeField as xe } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
+import j from "@mui/material/Box";
+import Re from "@mui/material/ToggleButton";
 import Me from "@mui/material/ToggleButtonGroup";
 import Ae from "@mui/material/MenuItem";
-import j from "@mui/material/TextField";
+import Q from "@mui/material/TextField";
 import { usePickerLayout as Ee, PickersLayoutRoot as Se, PickersLayoutContentWrapper as Ie, pickersLayoutClasses as P } from "@mui/x-date-pickers/PickersLayout";
-import Q from "@mui/material/Slide";
+import J from "@mui/material/Slide";
 import V from "@mui/material/Button";
-import J from "@mui/material/IconButton";
+import q from "@mui/material/IconButton";
 import ve from "@mui/material/Typography";
 import ye from "@mui/material/Drawer";
 import He from "@mui/material/Snackbar";
 import Fe from "@mui/material/Alert";
-import { light as q, buildTheme as $, dark as Oe } from "@mxenabled/design-tokens";
-import { FormControlLabel as ke, Box as _, Typography as Y, Radio as B, Checkbox as Le, alpha as b, darken as D, lighten as F, getContrastRatio as De } from "@mui/material";
+import { light as ee, buildTheme as $, dark as Oe } from "@mxenabled/design-tokens";
+import { FormControlLabel as ke, Box as _, Typography as X, Radio as B, Checkbox as Le, alpha as b, darken as D, lighten as F, getContrastRatio as De } from "@mui/material";
 import { circularProgressClasses as Ne } from "@mui/material/CircularProgress";
 import { LicenseInfo as we } from "@mui/x-license-pro";
 const f = ({
   children: e,
   height: o,
-  size: t = 16,
-  viewBox: n = "0 0 16 16",
-  width: r
+  size: i = 16,
+  viewBox: l = "0 0 16 16",
+  width: c
 }) => /* @__PURE__ */ a(
   "svg",
   {
     "aria-hidden": !0,
     className: "mx-kmui-icon",
     focusable: !1,
-    height: o || t,
-    viewBox: n,
-    width: r || t,
+    height: o || i,
+    viewBox: l,
+    width: c || i,
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
 );
 var Pe = /* @__PURE__ */ ((e) => (e[e.Lighter = 100] = "Lighter", e[e.Light = 200] = "Light", e[e.Normal = 300] = "Normal", e[e.Dark = 400] = "Dark", e[e.Darker = 500] = "Darker", e))(Pe || {});
-const x = ({
+const R = ({
   color: e,
   fill: o = !1,
-  name: t,
-  size: n = 20,
-  sx: r,
-  weight: c = 300,
-  ...l
+  name: i,
+  size: l = 20,
+  sx: c,
+  weight: t = 300,
+  ...n
 }) => /* @__PURE__ */ a(
   se,
   {
     color: e,
     fill: o,
-    name: t,
-    size: n,
-    sx: r,
-    weight: c,
-    ...l
+    name: i,
+    size: l,
+    sx: c,
+    weight: t,
+    ...n
   }
 ), w0 = ({
   color: e = "currentColor",
@@ -284,7 +284,7 @@ const x = ({
   )
 ] });
 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 || {}), _e = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(_e || {});
-const ee = {
+const oe = {
   guid: g.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
@@ -389,58 +389,58 @@ const ee = {
     colorName: "travel",
     icon: "airplane_ticket"
   },
-  ee
+  oe
 ], ze = 0.625, Ve = ({
   categoryGuid: e,
   icon_ratio: o = ze,
-  size: t = 32,
-  sx: n = {},
-  variant: r = "filled"
+  size: i = 32,
+  sx: l = {},
+  variant: c = "filled"
 }) => {
-  const c = H(), l = R.useMemo(
-    () => Be.find((u) => u.guid === e) ?? ee,
+  const t = H(), n = x.useMemo(
+    () => Be.find((u) => u.guid === e) ?? oe,
     [e]
-  ), s = c.palette.categories[l.colorName];
+  ), s = t.palette.categories[n.colorName];
   return /* @__PURE__ */ a(
     I,
     {
       alignItems: "center",
       bgcolor: () => {
         let u = s;
-        return r === "twotone" && (u = `${u}20`), r === "transparent" || r === "basic" ? "transparent" : u;
+        return c === "twotone" && (u = `${u}20`), c === "transparent" || c === "basic" ? "transparent" : u;
       },
       borderRadius: 1,
       color: () => {
-        const u = r === "filled" ? c.palette.common.white : s;
-        return r === "basic" ? c.palette.text.primary : u;
+        const u = c === "filled" ? t.palette.common.white : s;
+        return c === "basic" ? t.palette.text.primary : u;
       },
-      height: t,
+      height: i,
       justifyContent: "center",
-      sx: [...Array.isArray(n) ? n : [n]],
-      width: t,
-      children: /* @__PURE__ */ a(x, { name: l.icon, size: t * o })
+      sx: [...Array.isArray(l) ? l : [l]],
+      width: i,
+      children: /* @__PURE__ */ a(R, { name: n.icon, size: i * o })
     }
   );
 }, $e = ({
   items: e,
   onChange: o,
-  isValid: t,
-  selected: n
+  isValid: i,
+  selected: l
 }) => {
-  const r = H(), c = e?.map((l) => {
-    const s = l.getValue({ isValid: t });
+  const c = H(), t = e?.map((n) => {
+    const s = n.getValue({ isValid: i });
     return {
-      label: l.label,
+      label: n.label,
       onClick: () => {
-        o(s, "accept", l);
+        o(s, "accept", n);
       },
-      disabled: !t(s)
+      disabled: !i(s)
     };
   });
-  return /* @__PURE__ */ a(X, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Me, { color: "primary", orientation: "vertical", value: n, children: c?.map((l) => /* @__PURE__ */ a(
-    xe,
+  return /* @__PURE__ */ a(j, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Me, { color: "primary", orientation: "vertical", value: l, children: t?.map((n) => /* @__PURE__ */ a(
+    Re,
     {
-      onClick: l.onClick,
+      onClick: n.onClick,
       sx: {
         borderWidth: 1,
         color: "secondary.main",
@@ -451,55 +451,56 @@ const ee = {
           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: c.palette.action.hover,
+          borderTop: `1px solid ${c.palette.secondary.light}`
         },
         "&.Mui-selected": {
-          border: `2px solid ${r.palette.primary.main} !important`,
+          border: `2px solid ${c.palette.primary.main} !important`,
           marginTop: "-2px !important",
           color: "primary"
         }
       },
-      value: l.label,
-      children: l.label
+      value: n.label,
+      children: n.label
     },
-    l.label
+    n.label
   )) }) });
 }, Ge = ({
   items: e,
   onChange: o,
-  isValid: t,
-  selected: n
+  isValid: i,
+  selected: l,
+  selectLabel: c
 }) => {
-  const r = e?.map((c) => {
-    const l = c.getValue({ isValid: t });
+  const t = e?.map((n) => {
+    const s = n.getValue({ isValid: i });
     return {
-      label: c.label,
+      label: n.label,
       onClick: () => {
-        o(l, "accept", c);
+        o(s, "accept", n);
       },
-      disabled: !t(l)
+      disabled: !i(s)
     };
   });
   return /* @__PURE__ */ a(I, { sx: { py: 16 }, children: /* @__PURE__ */ a(
-    j,
+    Q,
     {
       InputLabelProps: {
         shrink: !0
       },
       SelectProps: { IconComponent: de },
-      defaultValue: n,
+      defaultValue: l,
       id: "select",
-      label: "Select Date Range",
+      label: c,
       select: !0,
       sx: { width: "100%" },
-      value: n,
+      value: l,
       variant: "outlined",
-      children: r?.map((c) => /* @__PURE__ */ a(Ae, { onClick: c.onClick, value: c.label, children: c.label }, c.label))
+      children: t?.map((n) => /* @__PURE__ */ a(Ae, { onClick: n.onClick, value: n.label, children: n.label }, n.label))
     }
   ) });
 }, Ue = (e) => {
-  const { toolbar: o, content: t, shortcuts: n } = Ee(e);
+  const { toolbar: o, content: i, shortcuts: l } = Ee(e);
   return /* @__PURE__ */ T(
     Se,
     {
@@ -520,57 +521,57 @@ const ee = {
       },
       children: [
         /* @__PURE__ */ T(I, { sx: { gridColumn: 1, gridRow: 1, p: 16 }, children: [
-          n,
+          l,
           o
         ] }),
-        /* @__PURE__ */ a(Ie, { className: P.contentWrapper, children: t })
+        /* @__PURE__ */ a(Ie, { className: P.contentWrapper, children: i })
       ]
     }
   );
 }, q0 = ({
   copy: e,
   dateRange: o,
-  onRangeChanged: t,
-  selectedShortcut: n = e.dateRangeThisMonth,
-  sx: r = {}
+  onRangeChanged: i,
+  selectedShortcut: l = e.dateRangeThisMonth,
+  sx: c = {}
 }) => {
-  const c = H(), l = fe(c.breakpoints.down("sm")), s = R.useMemo(() => {
-    const i = he(), u = ge(i, 1), C = me(i, 1);
+  const t = H(), n = fe(t.breakpoints.down("sm")), s = x.useMemo(() => {
+    const r = he(), u = ge(r, 1), C = me(r, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [W(i), U(i)]
+        getValue: () => [Z(r), W(r)]
       },
       {
         label: e.dateRangeLastMonth,
-        getValue: () => [W(u), U(u)]
+        getValue: () => [Z(u), W(u)]
       },
       {
         label: e.dateRangeLast30Days,
-        getValue: () => [K(i, 30), i]
+        getValue: () => [Y(r, 30), r]
       },
       {
         label: e.dateRangeLast90Days,
-        getValue: () => [K(i, 90), i]
+        getValue: () => [Y(r, 90), r]
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [Z(i), i]
+        getValue: () => [K(r), r]
       },
       {
         label: e.dateRangeLastYear,
-        getValue: () => [Z(C), pe(C)]
+        getValue: () => [K(C), pe(C)]
       },
       {
         label: e.dateRangeCustom,
-        getValue: () => [i, i]
+        getValue: () => [r, r]
       }
     ];
-  }, [e]), d = (i, u) => {
+  }, [e]), d = (r, u) => {
     const C = u.shortcut;
-    t?.(i, C ? C.label : e.dateRangeCustom);
+    i?.(r, C ? C.label : e.dateRangeCustom);
   };
-  return /* @__PURE__ */ a(I, { gap: l ? 0 : 16, m: l ? 0 : 8, children: /* @__PURE__ */ a(be, { dateAdapter: Ce, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(I, { gap: n ? 0 : 16, m: n ? 0 : 8, children: /* @__PURE__ */ a(be, { dateAdapter: Ce, children: /* @__PURE__ */ a(
     Te,
     {
       calendars: 1,
@@ -587,32 +588,51 @@ const ee = {
           items: s
         },
         toolbar: {
-          toolbarFormat: l ? "MM/dd/yyyy" : "MMM d, yyyy"
+          toolbarFormat: n ? "MM/dd/yyyy" : "MMM d, yyyy"
         }
       },
       slots: {
-        ...l && { layout: Ue },
-        leftArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_left", size: 28 }),
-        shortcuts: (i) => l ? /* @__PURE__ */ a(Ge, { selected: n, ...i }) : /* @__PURE__ */ a($e, { selected: n, ...i }),
-        rightArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_right", size: 28 }),
-        ...l && {
-          toolbar: (i) => /* @__PURE__ */ a(Re, { dateSeparator: "", ...i, sx: { gap: 8 } })
+        ...n && { layout: Ue },
+        leftArrowIcon: () => /* @__PURE__ */ a(R, { name: "chevron_left", size: 28 }),
+        shortcuts: (r) => n ? /* @__PURE__ */ a(
+          Ge,
+          {
+            selectLabel: e.dateRangeSelectARange,
+            selected: l,
+            ...r
+          }
+        ) : /* @__PURE__ */ a($e, { selected: l, ...r }),
+        rightArrowIcon: () => /* @__PURE__ */ a(R, { name: "chevron_right", size: 28 }),
+        ...n && {
+          toolbar: (r) => /* @__PURE__ */ a(
+            xe,
+            {
+              dateSeparator: "",
+              ...r,
+              slotProps: {
+                textField: ({ position: u }) => ({
+                  label: u === "start" ? e.dateRangeFrom : e.dateRangeTo
+                })
+              },
+              sx: { gap: 8 }
+            }
+          )
         }
       },
-      sx: { ...r },
+      sx: { ...c },
       value: o
     }
   ) }) });
-}, eo = R.forwardRef(function(o, t) {
-  return /* @__PURE__ */ a(Q, { direction: "up", ref: t, ...o });
+}, eo = x.forwardRef(function(o, i) {
+  return /* @__PURE__ */ a(J, { direction: "up", ref: i, ...o });
 }), We = ({
   hasSecondaryAction: e = !0,
   isPrimaryDisabled: o,
-  onPrimaryAction: t,
-  onSecondaryAction: n,
-  primaryColor: r = "primary",
-  primaryText: c = "Save",
-  secondaryColor: l = "primary",
+  onPrimaryAction: i,
+  onSecondaryAction: l,
+  primaryColor: c = "primary",
+  primaryText: t = "Save",
+  secondaryColor: n = "primary",
   secondaryText: s = "Cancel"
 }) => /* @__PURE__ */ T(
   I,
@@ -625,20 +645,20 @@ const ee = {
       e && /* @__PURE__ */ a(
         V,
         {
-          color: l,
-          onClick: n,
-          variant: t ? "outlined" : "contained",
+          color: n,
+          onClick: l,
+          variant: i ? "outlined" : "contained",
           children: s
         }
       ),
-      t && /* @__PURE__ */ a(
+      i && /* @__PURE__ */ a(
         V,
         {
-          color: r,
+          color: c,
           disabled: o,
-          onClick: t,
+          onClick: i,
           variant: "contained",
-          children: c
+          children: t
         }
       )
     ]
@@ -646,11 +666,11 @@ const ee = {
 ), k = ({
   bold: e,
   className: o = "",
-  children: t,
-  color: n,
-  sx: r = {},
-  truncate: c = !0,
-  uppercase: l,
+  children: i,
+  color: l,
+  sx: c = {},
+  truncate: t = !0,
+  uppercase: n,
   ...s
 }) => {
   switch (s.variant) {
@@ -689,33 +709,33 @@ const ee = {
     ve,
     {
       className: `mx-kmui-text ${o}`,
-      color: n,
+      color: l,
       sx: [
         e ? {
           fontWeight: 600
         } : {},
-        c ? {
+        t ? {
           overflow: "hidden",
           textOverflow: "ellipsis",
           whiteSpace: "nowrap"
         } : {},
-        l ? {
+        n ? {
           textTransform: "uppercase"
         } : {},
-        ...Array.isArray(r) ? r : [r]
+        ...Array.isArray(c) ? c : [c]
       ],
       ...s,
-      children: t
+      children: i
     }
   );
-}, Ze = ({ className: e = "", children: o, ...t }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...t, children: o }), oo = ({ className: e = "", children: o, ...t }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...t, children: o }), ro = ({ className: e = "", children: o, ...t }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...t, children: o }), to = ({ className: e = "", children: o, truncate: t, ...n }) => /* @__PURE__ */ a(
+}, Ze = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...i, children: o }), oo = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...i, children: o }), to = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...i, children: o }), ro = ({ className: e = "", children: o, truncate: i, ...l }) => /* @__PURE__ */ a(
   k,
   {
     className: `mx-kmui-text p ${e}`,
     component: "p",
-    truncate: t || !1,
+    truncate: i || !1,
     variant: "body1",
-    ...n,
+    ...l,
     children: o
   }
 ), io = ({ copy: e, onClose: o }) => /* @__PURE__ */ T(
@@ -730,123 +750,123 @@ const ee = {
     },
     children: [
       /* @__PURE__ */ a(Ze, { variant: "h3", children: e.title }),
-      /* @__PURE__ */ a(J, { "aria-label": e.close_aria, onClick: o, sx: { mr: -12 }, children: /* @__PURE__ */ a(ue, {}) })
+      /* @__PURE__ */ a(q, { "aria-label": e.close_aria, onClick: o, sx: { mr: -12 }, children: /* @__PURE__ */ a(ue, {}) })
     ]
   }
 ), ao = ({
   className: e,
   disableSave: o,
-  id: t,
-  isOpen: n,
-  onClose: r,
-  onSave: c,
-  primaryText: l,
+  id: i,
+  isOpen: l,
+  onClose: c,
+  onSave: t,
+  primaryText: n,
   secondaryText: s,
   children: d,
-  ...i
+  ...r
 }) => /* @__PURE__ */ T(
   ye,
   {
     anchor: "right",
     className: `mx-kmui-drawer ${e}`,
-    id: t ?? void 0,
-    onClose: r,
-    open: n,
+    id: i ?? void 0,
+    onClose: c,
+    open: l,
     variant: "temporary",
-    ...i,
+    ...r,
     children: [
       d,
-      c && /* @__PURE__ */ a(
+      t && /* @__PURE__ */ a(
         We,
         {
           isPrimaryDisabled: o,
-          onPrimaryAction: c,
-          onSecondaryAction: r,
-          primaryText: l,
+          onPrimaryAction: t,
+          onSecondaryAction: c,
+          primaryText: n,
           secondaryText: s
         }
       )
     ]
   }
-), oe = 32, G = "https://content.moneydesktop.com/storage/MD_Assets", Ke = `${G}/serenity/default_institution_logo.png`, no = ({
+), te = 32, G = "https://content.moneydesktop.com/storage/MD_Assets", Ke = `${G}/serenity/default_institution_logo.png`, no = ({
   alt: e,
   institutionGuid: o,
-  logoUrl: t,
-  size: n = oe,
-  ...r
+  logoUrl: i,
+  size: l = te,
+  ...c
 }) => /* @__PURE__ */ a(
   "img",
   {
     alt: e,
-    height: n,
-    onError: (c) => c.target.src = Ke,
-    src: t || `${G}/Ipad%20Logos/100x100/${o}_100x100.png`,
+    height: l,
+    onError: (t) => t.target.src = Ke,
+    src: i || `${G}/Ipad%20Logos/100x100/${o}_100x100.png`,
     style: {
       borderRadius: 4
     },
-    width: n,
-    ...r
+    width: l,
+    ...c
   }
 ), lo = ({
   alt: e = "",
   categoryGuid: o,
-  merchantGuid: t,
-  size: n = oe,
-  ...r
+  merchantGuid: i,
+  size: l = te,
+  ...c
 }) => {
-  const [c, l] = R.useState(!1), s = H();
-  return /* @__PURE__ */ T(X, { display: "inline-block", position: "relative", ...r, children: [
-    t && !c && /* @__PURE__ */ a(
+  const [t, n] = x.useState(!1), s = H();
+  return /* @__PURE__ */ T(j, { display: "inline-block", position: "relative", ...c, children: [
+    i && !t && /* @__PURE__ */ a(
       "img",
       {
         alt: e,
         "aria-hidden": !e,
-        height: n,
-        onError: () => l(!0),
-        src: `${G}/merchant_logos/${t}.png`,
+        height: l,
+        onError: () => n(!0),
+        src: `${G}/merchant_logos/${i}.png`,
         style: {
           backgroundColor: s.palette.common.white,
           borderRadius: 4,
           boxSizing: "border-box",
           position: "absolute"
         },
-        width: n
+        width: l
       }
     ),
-    /* @__PURE__ */ a(Ve, { categoryGuid: o, size: n })
+    /* @__PURE__ */ a(Ve, { categoryGuid: o, size: l })
   ] });
 }, co = ({
   disabled: e = !1,
   label: o = "",
-  shrink: t = !0,
-  variant: n = "outlined",
-  ...r
+  shrink: i = !0,
+  variant: l = "outlined",
+  ...c
 }) => /* @__PURE__ */ a(
-  j,
+  Q,
   {
     InputLabelProps: {
-      shrink: t
+      shrink: i
     },
     disabled: e,
     label: o,
-    variant: n,
-    ...r
+    variant: l,
+    ...c
   }
 );
 function Ye(e) {
-  return /* @__PURE__ */ a(Q, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
+  return /* @__PURE__ */ a(J, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
 const so = ({
   open: e,
   handleClose: o,
-  message: t,
-  autoHideDuration: n = 3e3,
-  severity: r = "success",
-  snackbarSx: c,
-  showAction: l = !1,
+  message: i,
+  autoHideDuration: l = 3e3,
+  severity: c = "success",
+  snackbarSx: t,
+  showAction: n = !1,
   showClose: s = !1,
   actionText: d = "Undo",
-  onActionClick: i,
+  onActionClick: r,
   multiLine: u = !1
 }) => {
   const C = H(), L = /* @__PURE__ */ T(
@@ -856,14 +876,14 @@ const so = ({
       direction: u ? "column-reverse" : "row",
       justifyContent: (
         // eslint-disable-next-line no-nested-ternary
-        u && l && s ? "space-between" : "flex-end"
+        u && n && s ? "space-between" : "flex-end"
       ),
       children: [
-        l && /* @__PURE__ */ a(
+        n && /* @__PURE__ */ a(
           V,
           {
             color: "inherit",
-            onClick: i || o,
+            onClick: r || o,
             size: "small",
             sx: {
               color: C.palette.success.contrastText,
@@ -873,13 +893,13 @@ const so = ({
           }
         ),
         s && /* @__PURE__ */ a(
-          J,
+          q,
           {
             "aria-label": "close",
             color: "inherit",
             onClick: o,
             sx: { height: 44, width: 44 },
-            children: /* @__PURE__ */ a(x, { fill: !0, name: "close", size: 24, weight: 400 })
+            children: /* @__PURE__ */ a(R, { fill: !0, name: "close", size: 24, weight: 400 })
           }
         )
       ]
@@ -890,22 +910,22 @@ const so = ({
     {
       TransitionComponent: Ye,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      autoHideDuration: n,
+      autoHideDuration: l,
       onClose: o,
       open: e,
       sx: {
-        ...c,
+        ...t,
         width: u ? 400 : 325
       },
       children: /* @__PURE__ */ a(
         Fe,
         {
           action: L,
-          severity: r,
+          severity: c,
           sx: {
             display: "flex",
             alignItems: "stretch",
-            minHeight: s && l && u ? 120 : 56,
+            minHeight: s && n && u ? 120 : 56,
             maxHeight: u ? 120 : 56,
             width: "100%",
             "& .MuiAlert-icon": {
@@ -932,7 +952,7 @@ const so = ({
                 textOverflow: u ? "clip" : "ellipsis"
               },
               truncate: !u,
-              children: t
+              children: i
             }
           )
         }
@@ -946,48 +966,48 @@ const so = ({
 }, N = {
   LIGHT: "light",
   DARK: "dark"
-}, re = R.createContext(q), te = R.createContext(
+}, re = x.createContext(ee), ie = x.createContext(
   $(N.LIGHT, O.REACT_NATIVE)
 ), uo = ({
   children: e,
   target: o = O.REACT,
-  theme: t = N.LIGHT,
-  tokenOverrides: n
+  theme: i = N.LIGHT,
+  tokenOverrides: l
 }) => {
-  const [r, c] = R.useState(t === N.LIGHT ? q : Oe), l = R.useMemo(() => ({
-    ...n
-  }), [n]);
-  return R.useEffect(() => {
-    const s = $(t, o, { ...l });
-    c(s);
-  }, [t, o, l]), o === O.REACT ? /* @__PURE__ */ a(re.Provider, { value: r, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(te.Provider, { value: r, children: e }));
+  const [c, t] = x.useState(i === N.LIGHT ? ee : Oe), n = x.useMemo(() => ({
+    ...l
+  }), [l]);
+  return x.useEffect(() => {
+    const s = $(i, o, { ...n });
+    t(s);
+  }, [i, o, n]), o === O.REACT ? /* @__PURE__ */ a(re.Provider, { value: c, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(ie.Provider, { value: c, children: e }));
 }, po = (e = O.REACT, o = {}) => {
-  const t = e === O.REACT ? re : te, n = R.useContext(t);
-  return n || $(N.LIGHT, e, { ...o });
+  const i = e === O.REACT ? re : ie, l = x.useContext(i);
+  return l || $(N.LIGHT, e, { ...o });
 }, ho = ({
   component: e = B,
   variant: o = "outlined",
-  selected: t,
-  onChange: n,
-  headline: r,
-  message: c,
-  name: l,
+  selected: i,
+  onChange: l,
+  headline: c,
+  message: t,
+  name: n,
   value: s,
   disabled: d = !1,
-  error: i = !1,
+  error: r = !1,
   icon: u = !1,
   sx: C = {},
   ...L
 }) => {
-  const m = H(), ie = () => m.palette.background.paper, w = () => i ? `inset 0px 0px 0px 2px ${m.palette.error.main}` : d ? t ? `inset 0px 0px 0px 2px ${m.palette.action.disabled}` : o === "outlined" ? `inset 0px 0px 0px 1px ${m.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${m.palette.action.disabled}` : o === "outlined" ? t ? `inset 0px 0px 0px 2px ${b(m.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(m.palette.common.black, 0.23)}` : t ? `inset 0px 0px 0px 2px ${b(m.palette.primary.main, 0.5)}` : m.shadows[1], ae = () => d || i ? m.palette.background.paper : b(m.palette.primary.main, 0.1), ne = () => d || i ? w() : o === "outlined" ? t ? `inset 0px 0px 0px 2px ${b(m.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(m.palette.primary.main, 0.5)}` : w(), le = () => d || i ? m.palette.background.paper : b(m.palette.primary.main, 0.3);
+  const m = H(), ae = () => m.palette.background.paper, w = () => r ? `inset 0px 0px 0px 2px ${m.palette.error.main}` : d ? i ? `inset 0px 0px 0px 2px ${m.palette.action.disabled}` : o === "outlined" ? `inset 0px 0px 0px 1px ${m.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${m.palette.action.disabled}` : o === "outlined" ? i ? `inset 0px 0px 0px 2px ${b(m.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(m.palette.common.black, 0.23)}` : i ? `inset 0px 0px 0px 2px ${b(m.palette.primary.main, 0.5)}` : m.shadows[1], ne = () => d || r ? m.palette.background.paper : b(m.palette.primary.main, 0.1), le = () => d || r ? w() : o === "outlined" ? i ? `inset 0px 0px 0px 2px ${b(m.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(m.palette.primary.main, 0.5)}` : w(), ce = () => d || r ? m.palette.background.paper : b(m.palette.primary.main, 0.3);
   return /* @__PURE__ */ a(
     ke,
     {
-      checked: t,
+      checked: i,
       control: e === B ? /* @__PURE__ */ a(
         B,
         {
-          name: l,
+          name: n,
           sx: {
             p: 0,
             ml: 16,
@@ -1002,7 +1022,7 @@ const so = ({
       ) : /* @__PURE__ */ a(
         Le,
         {
-          name: l,
+          name: n,
           sx: {
             p: 0,
             ml: 16,
@@ -1019,12 +1039,12 @@ const so = ({
       label: /* @__PURE__ */ T(_, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
         u && /* @__PURE__ */ a(_, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: u }),
         /* @__PURE__ */ T(_, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
-          r && /* @__PURE__ */ a(Y, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: r }),
-          /* @__PURE__ */ a(Y, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: c })
+          c && /* @__PURE__ */ a(X, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: c }),
+          /* @__PURE__ */ a(X, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: t })
         ] })
       ] }),
       labelPlacement: "start",
-      onChange: n,
+      onChange: l,
       sx: {
         display: "flex",
         padding: "6px 16px",
@@ -1034,7 +1054,7 @@ const so = ({
         mb: 16,
         cursor: d ? "not-allowed" : "pointer",
         opacity: d ? 0.6 : 1,
-        backgroundColor: ie(),
+        backgroundColor: ae(),
         border: "none",
         boxShadow: w(),
         boxSizing: "border-box",
@@ -1042,11 +1062,11 @@ const so = ({
           duration: m.transitions.duration.short
         }),
         "&:hover": {
-          backgroundColor: ae(),
-          boxShadow: ne()
+          backgroundColor: ne(),
+          boxShadow: le()
         },
         "&:active": {
-          backgroundColor: le()
+          backgroundColor: ce()
         },
         "&:focus-visible": {
           outline: `2px solid ${m.palette.info.main}`,
@@ -1140,15 +1160,15 @@ const so = ({
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
 }, qe = (e, o) => {
-  const t = M(o?.primary || E.PRIMARY), n = M(o?.secondary || E.SECONDARY), r = M(o?.error || E.ERROR), c = M(o?.warning || E.WARNING), l = M(o?.info || E.INFO), s = M(o?.success || E.SUCCESS), d = M(o?.grey || E.GREY), i = e === y.LIGHT;
+  const i = M(o?.primary || E.PRIMARY), l = M(o?.secondary || E.SECONDARY), c = M(o?.error || E.ERROR), t = M(o?.warning || E.WARNING), n = M(o?.info || E.INFO), s = M(o?.success || E.SUCCESS), d = M(o?.grey || E.GREY), r = e === y.LIGHT;
   return {
     mode: e,
     // DEPRECATED: Use grey instead
     border: {
       /* DEPRECATED: Use light instead */
-      lighter: i ? d[300] : d[700],
-      light: i ? d[300] : d[700],
-      main: i ? d[400] : d[600],
+      lighter: r ? d[300] : d[700],
+      light: r ? d[300] : d[700],
+      main: r ? d[400] : d[600],
       dark: d[500],
       /* DEPRECATED: Use light instead */
       darker: d[500]
@@ -1158,118 +1178,118 @@ const so = ({
       black: z
     },
     primary: {
-      ...t,
+      ...i,
       /* DEPRECATED: Use light instead */
-      lighter: i ? t[100] : t[800],
-      light: i ? t[300] : t[600],
-      main: i ? t[500] : t[400],
-      dark: i ? t[700] : t[200],
+      lighter: r ? i[100] : i[800],
+      light: r ? i[300] : i[600],
+      main: r ? i[500] : i[400],
+      dark: r ? i[700] : i[200],
       /* DEPRECATED: Use dark instead */
-      darker: i ? t[900] : t[100]
+      darker: r ? i[900] : i[100]
     },
     secondary: {
-      ...n,
+      ...l,
       /* DEPRECATED: Use light instead */
-      lighter: i ? n[100] : n[800],
-      light: i ? n[300] : n[600],
-      main: i ? n[500] : n[400],
-      dark: i ? n[700] : n[200],
+      lighter: r ? l[100] : l[800],
+      light: r ? l[300] : l[600],
+      main: r ? l[500] : l[400],
+      dark: r ? l[700] : l[200],
       /* DEPRECATED: Use dark instead */
-      darker: i ? n[900] : n[100]
+      darker: r ? l[900] : l[100]
     },
     neutral: {
       ...d,
       /* DEPRECATED: Use light instead */
-      lighter: i ? d[100] : d[800],
-      light: i ? d[300] : d[600],
-      main: i ? d[500] : d[400],
-      dark: i ? d[700] : d[200],
+      lighter: r ? d[100] : d[800],
+      light: r ? d[300] : d[600],
+      main: r ? d[500] : d[400],
+      dark: r ? d[700] : d[200],
       /* DEPRECATED: Use dark instead */
-      darker: i ? d[900] : d[100],
-      contrastText: De(i ? d[700] : d[400], "#fff") > 4.5 ? A : d[900]
+      darker: r ? d[900] : d[100],
+      contrastText: De(r ? d[700] : d[400], "#fff") > 4.5 ? A : d[900]
     },
     text: {
-      primary: i ? d[900] : A,
-      secondary: i ? d[600] : b(A, 0.7),
-      disabled: i ? d[500] : b(A, 0.38)
+      primary: r ? d[900] : A,
+      secondary: r ? d[600] : b(A, 0.7),
+      disabled: r ? d[500] : b(A, 0.38)
     },
     error: {
-      ...r,
+      ...c,
       /* DEPRECATED: Use light instead */
-      lighter: i ? r[100] : r[800],
-      light: i ? r[300] : r[600],
-      main: i ? r[500] : r[400],
-      dark: i ? r[700] : r[200],
+      lighter: r ? c[100] : c[800],
+      light: r ? c[300] : c[600],
+      main: r ? c[500] : c[400],
+      dark: r ? c[700] : c[200],
       /* DEPRECATED: Use light instead */
-      darker: i ? r[900] : r[100]
+      darker: r ? c[900] : c[100]
     },
     warning: {
-      ...c,
+      ...t,
       /* DEPRECATED: Use light instead */
-      lighter: i ? c[100] : c[800],
-      light: i ? c[300] : c[600],
-      main: i ? c[500] : c[400],
-      dark: i ? c[700] : c[200],
+      lighter: r ? t[100] : t[800],
+      light: r ? t[300] : t[600],
+      main: r ? t[500] : t[400],
+      dark: r ? t[700] : t[200],
       /* DEPRECATED: Use light instead */
-      darker: i ? c[900] : c[100]
+      darker: r ? t[900] : t[100]
     },
     info: {
-      ...l,
+      ...n,
       /* DEPRECATED: Use light instead */
-      lighter: i ? l[100] : l[800],
-      light: i ? l[300] : l[600],
-      main: i ? l[500] : l[400],
-      dark: i ? l[700] : l[200],
+      lighter: r ? n[100] : n[800],
+      light: r ? n[300] : n[600],
+      main: r ? n[500] : n[400],
+      dark: r ? n[700] : n[200],
       /* DEPRECATED: Use light instead */
-      darker: i ? l[900] : l[100]
+      darker: r ? n[900] : n[100]
     },
     success: {
       ...s,
       /* DEPRECATED: Use light instead */
-      lighter: i ? s[100] : s[800],
-      light: i ? s[300] : s[600],
-      main: i ? s[500] : s[400],
-      dark: i ? 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],
       /* DEPRECATED: Use light instead */
-      darker: i ? s[900] : s[100]
+      darker: r ? s[900] : s[100]
     },
     grey: d,
     action: {
-      active: i ? b(z, 0.56) : b(A, 0.56),
-      hoverOpacity: i ? 0.1 : 0.2,
-      selectedOpacity: i ? 0.16 : 0.25,
+      active: r ? b(z, 0.56) : b(A, 0.56),
+      hoverOpacity: r ? 0.1 : 0.2,
+      selectedOpacity: r ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: i ? o?.background?.default?.light || Xe : o?.background?.default?.dark || je,
-      paper: i ? o?.background?.paper?.light || Qe : o?.background?.paper?.dark || Je,
-      highlight: i ? d[200] : d[600],
-      highlightPrimary: i ? t[100] : t[500]
+      default: r ? o?.background?.default?.light || Xe : o?.background?.default?.dark || je,
+      paper: r ? o?.background?.paper?.light || Qe : o?.background?.paper?.dark || Je,
+      highlight: r ? d[200] : d[600],
+      highlightPrimary: r ? i[100] : i[500]
     },
-    divider: i ? b(z, 0.12) : b(A, 0.24),
+    divider: r ? b(z, 0.12) : b(A, 0.24),
     categories: {
-      autoTransport: i ? p.AUTO_TRANSPORTT : h.AUTO_TRANSPORTT,
-      billsUtilities: i ? p.BILLS_UTILITIES : h.BILLS_UTILITIES,
-      businessServices: i ? p.BUSINESS_SERVICES : h.BUSINESS_SERVICES,
-      education: i ? p.EDUCATION : h.EDUCATION,
-      entertainment: i ? p.ENTERTAINMENT : h.ENTERTAINMENT,
-      feesCharges: i ? p.FEES_CHARGES : h.FEES_CHARGES,
-      financial: i ? p.FINANCIAL : h.FINANCIAL,
-      foodDining: i ? p.FOOD_DINING : h.FOOD_DINING,
-      giftsDonations: i ? p.GIFTS_DONATIONS : h.GIFTS_DONATIONS,
-      healthFitness: i ? p.HEALTH_FITNESS : h.HEALTH_FITNESS,
-      home: i ? p.HOME : h.HOME,
-      income: i ? p.INCOME : h.INCOME,
-      investments: i ? p.INVESTMENTS : h.INVESTMENTS,
-      kids: i ? p.KIDS : h.KIDS,
-      others: i ? p.OTHERS : h.OTHERS,
-      personalCare: i ? p.PERSONAL_CARE : h.PERSONAL_CARE,
-      pets: i ? p.PETS : h.PETS,
-      shopping: i ? p.SHOPPING : h.SHOPPING,
-      taxes: i ? p.TAXES : h.TAXES,
-      transfer: i ? p.TRANSFER : h.TRANSFER,
-      travel: i ? p.TRAVEL : h.TRAVEL,
-      uncategorized: i ? p.UNCATEGORIZED : h.UNCATEGORIZED
+      autoTransport: r ? p.AUTO_TRANSPORTT : h.AUTO_TRANSPORTT,
+      billsUtilities: r ? p.BILLS_UTILITIES : h.BILLS_UTILITIES,
+      businessServices: r ? p.BUSINESS_SERVICES : h.BUSINESS_SERVICES,
+      education: r ? p.EDUCATION : h.EDUCATION,
+      entertainment: r ? p.ENTERTAINMENT : h.ENTERTAINMENT,
+      feesCharges: r ? p.FEES_CHARGES : h.FEES_CHARGES,
+      financial: r ? p.FINANCIAL : h.FINANCIAL,
+      foodDining: r ? p.FOOD_DINING : h.FOOD_DINING,
+      giftsDonations: r ? p.GIFTS_DONATIONS : h.GIFTS_DONATIONS,
+      healthFitness: r ? p.HEALTH_FITNESS : h.HEALTH_FITNESS,
+      home: r ? p.HOME : h.HOME,
+      income: r ? p.INCOME : h.INCOME,
+      investments: r ? p.INVESTMENTS : h.INVESTMENTS,
+      kids: r ? p.KIDS : h.KIDS,
+      others: r ? p.OTHERS : h.OTHERS,
+      personalCare: r ? p.PERSONAL_CARE : h.PERSONAL_CARE,
+      pets: r ? p.PETS : h.PETS,
+      shopping: r ? p.SHOPPING : h.SHOPPING,
+      taxes: r ? p.TAXES : h.TAXES,
+      transfer: r ? p.TRANSFER : h.TRANSFER,
+      travel: r ? p.TRAVEL : h.TRAVEL,
+      uncategorized: r ? p.UNCATEGORIZED : h.UNCATEGORIZED
     },
     chart: {
       chart1: S.CHART1,
@@ -1427,8 +1447,8 @@ we.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
 const go = (e, o) => {
-  const t = qe(e, o?.paletteOptions), n = o0(o?.typographyOptions);
-  return ce({
+  const i = qe(e, o?.paletteOptions), l = o0(o?.typographyOptions), c = [...U().shadows];
+  return c[1] = "0px 2px 8px 0 rgba(0, 0, 0, 0.12)", c[8] = "0px 6px 12px 0 rgba(0, 0, 0, 0.16), 0px 3px 8px 0 rgba(0, 0, 0, 0.06)", c[16] = "0px 12px 20px 0 rgba(0, 0, 0, 0.22)", U({
     breakpoints: {
       values: {
         xs: 444,
@@ -1438,38 +1458,39 @@ const go = (e, o) => {
         xl: 1536
       }
     },
-    palette: t,
+    palette: i,
     shape: {
       borderRadius: o?.shapeOptions?.borderRadius || 4
     },
+    shadows: c,
     spacing: 1,
     // TODO: update spacing, we're back to a 8-base which is default for MUI 2.x
-    typography: n,
+    typography: l,
     components: {
       MuiAlert: {
         defaultProps: {
           iconMapping: {
-            success: /* @__PURE__ */ a(x, { fill: !0, name: "check_circle", size: 24, weight: 400 }),
-            error: /* @__PURE__ */ a(x, { fill: !0, name: "error", size: 24, weight: 400 }),
-            warning: /* @__PURE__ */ a(x, { fill: !0, name: "warning", size: 24, weight: 400 }),
-            info: /* @__PURE__ */ a(x, { fill: !0, name: "info", size: 24, weight: 400 })
+            success: /* @__PURE__ */ a(R, { fill: !0, name: "check_circle", size: 24, weight: 400 }),
+            error: /* @__PURE__ */ a(R, { fill: !0, name: "error", size: 24, weight: 400 }),
+            warning: /* @__PURE__ */ a(R, { fill: !0, name: "warning", size: 24, weight: 400 }),
+            info: /* @__PURE__ */ a(R, { fill: !0, name: "info", size: 24, weight: 400 })
           },
           variant: "outlined"
         },
         styleOverrides: {
-          root: ({ theme: r, ownerState: c }) => {
-            const l = c.severity || "info";
-            let s = r.palette.mode === y.LIGHT ? r.palette[l]?.[50] : r.palette[l]?.[800];
-            if (c.variant === "filled") {
-              const d = l === "warning";
-              s = r.palette[l]?.[d ? 400 : 600];
+          root: ({ theme: t, ownerState: n }) => {
+            const s = n.severity || "info";
+            let d = t.palette.mode === y.LIGHT ? t.palette[s]?.[50] : t.palette[s]?.[800];
+            if (n.variant === "filled") {
+              const r = s === "warning";
+              d = t.palette[s]?.[r ? 400 : 600];
             }
             return {
-              backgroundColor: s,
-              borderRadius: r.shape.borderRadius,
+              backgroundColor: d,
+              borderRadius: t.shape.borderRadius,
               "& .MuiAlert-message": {
-                fontSize: r.typography.subtitle1.fontSize,
-                lineHeight: r.typography.subtitle1.lineHeight,
+                fontSize: t.typography.subtitle1.fontSize,
+                lineHeight: t.typography.subtitle1.lineHeight,
                 marginTop: "auto",
                 marginBottom: "auto"
               },
@@ -1495,14 +1516,14 @@ const go = (e, o) => {
           disableElevation: !0
         },
         styleOverrides: {
-          root: ({ theme: r }) => ({
+          root: ({ theme: t }) => ({
             fontWeight: 600,
             textTransform: "none",
             "&.Mui-disabled": {
               cursor: "not-allowed"
             },
             "&.Mui-focusVisible": {
-              outline: `2px solid ${r.palette.info.main}`,
+              outline: `2px solid ${t.palette.info.main}`,
               outlineOffset: "2px"
             }
           }),
@@ -1539,7 +1560,7 @@ const go = (e, o) => {
         styleOverrides: {
           root: {
             "&.Mui-focusVisible": {
-              boxShadow: `inset 0 0 0 2px ${t.info.main}`
+              boxShadow: `inset 0 0 0 2px ${i.info.main}`
             }
           }
         }
@@ -1568,22 +1589,22 @@ const go = (e, o) => {
       },
       MuiDataGrid: {
         styleOverrides: {
-          root: ({ theme: r }) => ({
+          root: ({ theme: t }) => ({
             border: "none",
             borderRadius: 0,
-            fontSize: r.typography.body2.fontSize,
+            fontSize: t.typography.body2.fontSize,
             "& .MuiDataGrid-cell": {
               display: "flex",
               alignItems: "center",
               borderTop: "1px solid",
-              borderColor: r.palette.background.highlight
+              borderColor: t.palette.background.highlight
             },
             "& .MuiDataGrid-cell:focus": { outline: "unset" },
             "& .MuiDataGrid-iconSeparator": { display: "none" },
             "& .MuiDataGrid-columnHeaders": {
-              backgroundColor: r.palette.background.paper,
+              backgroundColor: t.palette.background.paper,
               borderBottom: "2px solid",
-              borderColor: r.palette.divider
+              borderColor: t.palette.divider
             },
             "& .MuiDataGrid-columnHeaderTitle": {
               fontWeight: 600
@@ -1601,42 +1622,42 @@ const go = (e, o) => {
       },
       MuiDateRangePickerDay: {
         styleOverrides: {
-          root: ({ theme: r }) => ({
+          root: ({ theme: t }) => ({
             ":first-of-type": {
-              borderTopLeftRadius: r.shape.borderRadius,
-              borderBottomLeftRadius: r.shape.borderRadius,
+              borderTopLeftRadius: t.shape.borderRadius,
+              borderBottomLeftRadius: t.shape.borderRadius,
               "& .MuiDateRangePickerDay-rangeIntervalDayPreview": {
-                borderTopLeftRadius: r.shape.borderRadius,
-                borderBottomLeftRadius: r.shape.borderRadius
+                borderTopLeftRadius: t.shape.borderRadius,
+                borderBottomLeftRadius: t.shape.borderRadius
               }
             },
             ":last-of-type": {
-              borderTopRightRadius: r.shape.borderRadius,
-              borderBottomRightRadius: r.shape.borderRadius,
+              borderTopRightRadius: t.shape.borderRadius,
+              borderBottomRightRadius: t.shape.borderRadius,
               "& .MuiDateRangePickerDay-rangeIntervalDayPreview": {
-                borderTopRightRadius: r.shape.borderRadius,
-                borderBottomRightRadius: r.shape.borderRadius
+                borderTopRightRadius: t.shape.borderRadius,
+                borderBottomRightRadius: t.shape.borderRadius
               }
             },
             "& .Mui-selected": {
-              borderRadius: r.shape.borderRadius
+              borderRadius: t.shape.borderRadius
             },
             "& .MuiPickersDay-dayOutsideMonth": {
-              color: r.palette.action.disabled
+              color: t.palette.action.disabled
             }
           }),
-          day: ({ theme: r }) => ({
-            borderRadius: r.shape.borderRadius
+          day: ({ theme: t }) => ({
+            borderRadius: t.shape.borderRadius
           }),
-          rangeIntervalDayPreview: ({ theme: r }) => ({
-            borderRadius: r.shape.borderRadius
+          rangeIntervalDayPreview: ({ theme: t }) => ({
+            borderRadius: t.shape.borderRadius
           })
         }
       },
       MuiDayCalendar: {
         styleOverrides: {
-          weekDayLabel: ({ theme: r }) => ({
-            fontSize: r.typography.body2.fontSize,
+          weekDayLabel: ({ theme: t }) => ({
+            fontSize: t.typography.body2.fontSize,
             fontWeight: 700
           })
         }
@@ -1678,14 +1699,14 @@ const go = (e, o) => {
       },
       MuiFormHelperText: {
         styleOverrides: {
-          root: ({ theme: r }) => ({
+          root: ({ theme: t }) => ({
             fontSize: 13,
             // Small
             marginLeft: 0,
             display: "flex",
             alignItems: "center",
             position: "relative",
-            color: r.palette.text.secondary,
+            color: t.palette.text.secondary,
             "& .MuiSvgIcon-root": {
               height: "16px",
               width: "16px",
@@ -1701,7 +1722,7 @@ const go = (e, o) => {
       MuiFormLabel: {
         styleOverrides: {
           asterisk: {
-            color: t.error.main
+            color: i.error.main
           }
         }
       },
@@ -1716,19 +1737,19 @@ const go = (e, o) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: ({ theme: r }) => ({
-            borderRadius: r.shape.borderRadius,
+          root: ({ theme: t }) => ({
+            borderRadius: t.shape.borderRadius,
             minHeight: 44,
             // touch target
             minWidth: 44,
             // touch target
             "&.Mui-focusVisible": {
-              outline: `2px solid ${r.palette.info.main}`,
+              outline: `2px solid ${t.palette.info.main}`,
               outlineOffset: "2px"
             },
             "& .MuiTouchRipple-root": {
               "& .MuiTouchRipple-child": {
-                borderRadius: r.shape.borderRadius
+                borderRadius: t.shape.borderRadius
               }
             }
           })
@@ -1749,13 +1770,13 @@ const go = (e, o) => {
             borderRadius: 4
           },
           colorPrimary: {
-            backgroundColor: t.grey[300]
+            backgroundColor: i.grey[300]
           }
         }
       },
       MuiLink: {
         styleOverrides: {
-          root: ({ theme: r, color: c }) => ({
+          root: ({ theme: t, color: n }) => ({
             cursor: "pointer",
             fontWeight: 600,
             textDecoration: "none",
@@ -1767,10 +1788,10 @@ const go = (e, o) => {
               outlineOffset: "2px"
             },
             "&:hover": {
-              backgroundColor: r.palette.action.hover
+              backgroundColor: t.palette.action.hover
             },
             "&:active": {
-              backgroundColor: r.palette.mode === y.LIGHT ? r.palette[c].light : r.palette[c].dark
+              backgroundColor: t.palette.mode === y.LIGHT ? t.palette[n].light : t.palette[n].dark
             }
           })
         }
@@ -1797,9 +1818,9 @@ const go = (e, o) => {
           disablePadding: !0
         },
         styleOverrides: {
-          root: ({ ownerState: r }) => ({
+          root: ({ ownerState: t }) => ({
             minHeight: 64,
-            ...!r.disablePadding && {
+            ...!t.disablePadding && {
               paddingTop: 12,
               paddingBottom: 12,
               paddingLeft: 24
@@ -1823,7 +1844,7 @@ const go = (e, o) => {
       },
       MuiListItemButton: {
         styleOverrides: {
-          root: ({ theme: r }) => ({
+          root: ({ theme: t }) => ({
             minHeight: 64,
             paddingLeft: 24,
             paddingRight: 24,
@@ -1832,7 +1853,7 @@ const go = (e, o) => {
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
               borderRadius: 8,
-              outline: `2px solid ${r.palette.info.main}`,
+              outline: `2px solid ${t.palette.info.main}`,
               outlineOffset: -2
             }
           })
@@ -1854,7 +1875,7 @@ const go = (e, o) => {
           },
           secondaryTypographyProps: {
             fontSize: 11,
-            color: t.text.secondary
+            color: i.text.secondary
           }
         },
         styleOverrides: {
@@ -1874,7 +1895,7 @@ const go = (e, o) => {
             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: i.background.default
           }
         }
       },
@@ -1948,20 +1969,20 @@ const go = (e, o) => {
             gridColumn: "1/4",
             "& > .MuiTypography-root": {
               textTransform: "uppercase",
-              fontSize: n.body2.fontSize,
+              fontSize: l.body2.fontSize,
               fontWeight: 600,
-              lineHeight: n.body2.lineHeight
+              lineHeight: l.body2.lineHeight
             }
           }
         }
       },
       MuiPickersToolbar: {
         styleOverrides: {
-          content: ({ theme: r }) => ({
+          content: ({ theme: t }) => ({
             marginTop: 4,
             "& .MuiTypography-root": {
-              fontSize: r.typography.h3.fontSize,
-              lineHeight: r.typography.h3.lineHeight
+              fontSize: t.typography.h3.fontSize,
+              lineHeight: t.typography.h3.lineHeight
             }
           })
         }
@@ -1987,7 +2008,7 @@ const go = (e, o) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: ({ theme: r }) => ({
+          root: ({ theme: t }) => ({
             width: 37,
             height: 20,
             padding: 0,
@@ -1998,7 +2019,7 @@ const go = (e, o) => {
               "&.Mui-checked": {
                 transform: "translateX(16px)",
                 "& + .MuiSwitch-track": {
-                  backgroundColor: r.palette.success.main,
+                  backgroundColor: t.palette.success.main,
                   opacity: 1,
                   border: 0
                 },
@@ -2007,27 +2028,27 @@ const go = (e, o) => {
                 }
               },
               "&.Mui-disabled .MuiSwitch-thumb": {
-                color: r.palette.common.white
+                color: t.palette.common.white
               },
               "&.Mui-disabled + .MuiSwitch-track": {
-                backgroundColor: r.palette.action.disabledBackground,
+                backgroundColor: t.palette.action.disabledBackground,
                 opacity: 1
               }
             },
             "& .MuiSwitch-input": {
               "&:focus-visible ~ .MuiSwitch-thumb": {
-                outline: `2px solid ${r.palette.info.main}`,
+                outline: `2px solid ${t.palette.info.main}`,
                 outlineOffset: 0
               }
             },
             "& .MuiSwitch-thumb": {
               boxSizing: "border-box",
-              backgroundColor: r.palette.background.paper,
+              backgroundColor: t.palette.background.paper,
               width: 16,
               height: 16
             },
             "& .MuiSwitch-track": {
-              backgroundColor: r.palette.action.active,
+              backgroundColor: t.palette.action.active,
               borderRadius: 20 / 2,
               opacity: 1
             }
@@ -2044,7 +2065,7 @@ const go = (e, o) => {
             fontWeight: 600,
             "&.Mui-focusVisible": {
               outline: "none",
-              boxShadow: `inset 0 0 0 2px ${t.info.main}`,
+              boxShadow: `inset 0 0 0 2px ${i.info.main}`,
               borderRadius: 4
             }
           }
@@ -2055,7 +2076,7 @@ const go = (e, o) => {
           root: {
             borderBottomStyle: "solid",
             borderBottomWidth: 1,
-            borderColor: t.divider,
+            borderColor: i.divider,
             marginBottom: 8
           }
         }
@@ -2069,7 +2090,7 @@ const go = (e, o) => {
         },
         styleOverrides: {
           root: {
-            backgroundColor: t.background.paper
+            backgroundColor: i.background.paper
           }
         }
       },
@@ -2079,53 +2100,56 @@ const go = (e, o) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: {
-            color: t.text.primary,
+          root: ({ theme: t }) => ({
+            color: t.palette.text.primary,
             fontSize: 13,
             lineHeight: "16px",
             textTransform: "none",
             "&:focus-visible": {
-              outline: `2px solid ${t.info.main}`,
+              outline: `2px solid ${t.palette.info.main}`,
               outlineOffset: "2px"
             },
             "&:hover": {
-              backgroundColor: b(t.primary.main, t.mode === y.LIGHT ? 0.1 : 0.2),
-              borderColor: t.primary.main
+              backgroundColor: b(
+                t.palette.primary.main,
+                t.palette.mode === y.LIGHT ? 0.1 : 0.2
+              ),
+              borderColor: t.palette.primary.main
             },
             "&.Mui-selected": {
               fontWeight: 600,
-              borderColor: t.primary.main,
+              borderColor: t.palette.primary.main,
               "&:hover": {
-                boxShadow: `inset 0px 0px 0px 2px ${t.primary.main}`
+                boxShadow: `inset 0px 0px 0px 2px ${t.palette.primary.main}`
               }
             },
             "& .MuiTouchRipple-root": {
               "& .MuiTouchRipple-ripple": {
                 "& .MuiTouchRipple-child": {
-                  backgroundColor: t.primary.main
+                  backgroundColor: t.palette.primary.main
                 }
               }
             }
-          }
+          })
         },
         variants: [
           {
             props: { color: "error" },
             style: {
               "&:hover": {
-                backgroundColor: b(t.error.main, t.mode === y.LIGHT ? 0.1 : 0.2),
-                borderColor: t.error.main
+                backgroundColor: b(i.error.main, i.mode === y.LIGHT ? 0.1 : 0.2),
+                borderColor: i.error.main
               },
               "&.Mui-selected": {
-                borderColor: t.error.main,
+                borderColor: i.error.main,
                 "&:hover": {
-                  boxShadow: `inset 0px 0px 0px 2px ${t.error.main}`
+                  boxShadow: `inset 0px 0px 0px 2px ${i.error.main}`
                 }
               },
               "& .MuiTouchRipple-root": {
                 "& .MuiTouchRipple-ripple": {
                   "& .MuiTouchRipple-child": {
-                    backgroundColor: t.error.main
+                    backgroundColor: i.error.main
                   }
                 }
               }
@@ -2136,21 +2160,21 @@ const go = (e, o) => {
             style: {
               "&:hover": {
                 backgroundColor: b(
-                  t.secondary.main,
-                  t.mode === y.LIGHT ? 0.1 : 0.2
+                  i.secondary.main,
+                  i.mode === y.LIGHT ? 0.1 : 0.2
                 ),
-                borderColor: t.secondary.main
+                borderColor: i.secondary.main
               },
               "&.Mui-selected": {
-                borderColor: t.secondary.main,
+                borderColor: i.secondary.main,
                 "&:hover": {
-                  boxShadow: `inset 0px 0px 0px 2px ${t.secondary.main}`
+                  boxShadow: `inset 0px 0px 0px 2px ${i.secondary.main}`
                 }
               },
               "& .MuiTouchRipple-root": {
                 "& .MuiTouchRipple-ripple": {
                   "& .MuiTouchRipple-child": {
-                    backgroundColor: t.secondary.main
+                    backgroundColor: i.secondary.main
                   }
                 }
               }
@@ -2202,10 +2226,10 @@ export {
   We as Footer,
   Ze as H1,
   oo as H2,
-  ro as H3,
+  to as H3,
   Y0 as HeartIcon,
   e0 as INTER,
-  x as Icon,
+  R as Icon,
   Pe as IconWeight,
   no as InstitutionLogo,
   j0 as MXLogoCopyrightIcon,
@@ -2213,7 +2237,7 @@ export {
   X0 as MXLogoIcon,
   J0 as MXLogoOutlineIcon,
   lo as MerchantLogo,
-  to as P,
+  ro as P,
   ho as SelectionBox,
   O as TARGETS,
   N as THEMES,