@mxenabled/mxui 1.2.1-alpha.bb1 → 1.2.1-alpha.bb3

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as E } from "react/jsx-runtime";
-import b from "react";
-import O from "@mui/material/Stack";
+import C from "react";
+import x from "@mui/material/Stack";
 import { useTheme as D, createTheme as $ } from "@mui/material/styles";
 import o0 from "@mui/material/Icon";
 import { endOfMonth as B } from "date-fns/endOfMonth";
@@ -20,24 +20,24 @@ import h0 from "@mui/material/ToggleButtonGroup";
 import Z from "@mui/material/Slide";
 import w from "@mui/material/Button";
 import { Close as p0 } from "@mui/icons-material";
-import X from "@mui/material/IconButton";
+import K from "@mui/material/IconButton";
 import f0 from "@mui/material/Typography";
 import g0 from "@mui/material/Drawer";
 import m0 from "@mui/material/TextField";
 import T0 from "@mui/material/Snackbar";
 import b0 from "@mui/material/Alert";
-import { light as Y, buildTheme as P, dark as C0 } from "@mxenabled/design-tokens";
+import { light as X, buildTheme as _, dark as C0 } from "@mxenabled/design-tokens";
 import { circularProgressClasses as A0 } from "@mui/material/CircularProgress";
-import { LicenseInfo as E0 } from "@mui/x-license-pro";
-import { darken as N, lighten as F, alpha as m } from "@mui/material";
-import R0 from "@mui/material/styles/createPalette";
+import { LicenseInfo as R0 } from "@mui/x-license-pro";
+import { darken as N, lighten as v, alpha as m } from "@mui/material";
+import E0 from "@mui/material/styles/createPalette";
 import M0 from "@mui/material/styles/createTypography";
 const g = ({
   children: e,
   height: t,
   size: a = 16,
   viewBox: r = "0 0 16 16",
-  width: l
+  width: n
 }) => /* @__PURE__ */ o(
   "svg",
   {
@@ -46,30 +46,30 @@ const g = ({
     focusable: !1,
     height: t || a,
     viewBox: r,
-    width: l || a,
+    width: n || a,
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
 );
 var S0 = /* @__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))(S0 || {});
-const A = ({
+const R = ({
   color: e,
   fill: t = !1,
   name: a,
   size: r = 20,
-  sx: l,
+  sx: n,
   weight: s = 300,
   ...c
 }) => {
-  const [n, i] = b.useState(!1);
-  return b.useEffect(() => {
+  const [l, i] = C.useState(!1);
+  return C.useEffect(() => {
     document.fonts.ready.then(() => {
       i(!0);
     });
   }, []), /* @__PURE__ */ o(
     o0,
     {
-      color: n ? e && e : void 0,
+      color: l ? e && e : void 0,
       sx: [
         {
           fontSize: r,
@@ -80,16 +80,16 @@ const A = ({
             'opsz' ${r}
           `
         },
-        ...Array.isArray(l) ? l : [l],
+        ...Array.isArray(n) ? n : [n],
         {
-          ...!n && { color: "transparent" }
+          ...!l && { color: "transparent" }
         }
       ],
       ...c,
       children: a
     }
   );
-}, me = ({
+}, be = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -98,7 +98,7 @@ const A = ({
     d: "M2.24801 6.76647H0.573286C0.327604 6.76647 0.110586 6.60678 0.0327867 6.37748C-0.0450124 6.14408 0.0327866 5.88612 0.229332 5.73871L7.6571 0.116699C7.85774 -0.0388996 8.14027 -0.0388996 8.34501 0.116699L15.7728 5.73871C15.9693 5.89021 16.0471 6.14408 15.9693 6.37748C15.8915 6.61088 15.6745 6.76647 15.4288 6.76647H13.7582V12.323H14.3929C14.7122 12.323 14.9661 12.5809 14.9661 12.8962C14.9661 13.2156 14.7082 13.4695 14.3929 13.4695H1.60924C1.28986 13.4695 1.03599 13.2115 1.03599 12.8962C1.03599 12.5768 1.29395 12.323 1.60924 12.323H2.24801V6.76647ZM5.70393 6.76647H3.39043V12.323H5.70393V6.76647ZM9.15985 12.323V6.76647H6.84635V12.323H9.15985ZM10.3023 12.3189H12.6158V6.76647H10.3023V12.3189ZM0.573256 14.8535H15.4288C15.7441 14.8535 15.998 15.1115 15.998 15.4267C15.998 15.7461 15.74 16 15.4247 16H0.573256C0.253871 16 0 15.742 0 15.4267C0 15.1074 0.257965 14.8535 0.573256 14.8535Z",
     fill: e
   }
-) })), Te = ({
+) })), Ce = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -107,7 +107,7 @@ const A = ({
     d: "M15.429 14.854H.573a.572.572 0 100 1.146h14.852a.572.572 0 00.004-1.146zM.573 6.766h1.675v5.557h-.639a.572.572 0 100 1.146h12.784a.572.572 0 100-1.146h-.635V6.766h1.67a.568.568 0 00.541-.389.574.574 0 00-.196-.638L8.345.117a.565.565 0 00-.688 0L.23 5.739a.572.572 0 00.344 1.027zm2.817 0h2.314v5.557H3.39V6.766zm5.77 0v5.557H6.846V6.766H9.16zm3.456 5.553h-2.314V6.766h2.314v5.553zM8 1.288l5.724 4.336H2.277L8 1.288z",
     fill: e
   }
-) })), be = ({
+) })), Ae = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -116,7 +116,7 @@ const A = ({
     d: "M5.854 3.133a.426.426 0 010 .643L1.757 7.5h13.774c.26 0 .469.224.469.5s-.21.5-.469.5H1.757l4.097 3.724a.426.426 0 010 .643.536.536 0 01-.708 0l-5-4.546a.426.426 0 010-.642l5-4.546a.536.536 0 01.708 0z",
     fill: e
   }
-) })), Ce = ({
+) })), Re = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -127,7 +127,7 @@ const A = ({
     fill: e,
     fillRule: "evenodd"
   }
-) })), Ae = ({
+) })), Ee = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -136,7 +136,7 @@ const A = ({
     d: "M11.5 0a.5.5 0 01.5.5V2h2.5A1.5 1.5 0 0116 3.5v11a1.5 1.5 0 01-1.5 1.5h-13A1.5 1.5 0 010 14.5v-11A1.5 1.5 0 011.5 2H4V.5a.5.5 0 011 0V2h6V.5a.5.5 0 01.5-.5zM15 6H1v8.5a.5.5 0 00.5.5h13a.5.5 0 00.5-.5V6zm-4.5 1a.5.5 0 01.5.5V10h2.5a.5.5 0 010 1H11v2.5a.5.5 0 01-1 0V11H6v2.5a.5.5 0 01-1 0V11H2.5a.5.5 0 010-1H5V7.5a.5.5 0 011 0V10h4V7.5a.5.5 0 01.5-.5zm4-4h-13a.5.5 0 00-.5.5V5h14V3.5a.5.5 0 00-.5-.5z",
     fill: e
   }
-) })), Ee = ({
+) })), Me = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -145,7 +145,7 @@ const A = ({
     d: "M8 0c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm4.358 5.151a.5.5 0 00-.707-.01L6.858 9.803 4.35 7.363a.5.5 0 10-.698.718l2.858 2.777a.5.5 0 00.697 0l5.142-5a.5.5 0 00.01-.707z",
     fill: e
   }
-) })), Re = ({
+) })), Se = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -154,7 +154,7 @@ const A = ({
     d: "M2.68 5.201a.6.6 0 01.848-.011L8 9.543l4.472-4.353a.6.6 0 11.837.86l-4.89 4.76a.6.6 0 01-.838 0l-4.89-4.76a.6.6 0 01-.012-.849z",
     fill: e
   }
-) })), Me = ({
+) })), Ie = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -163,7 +163,7 @@ const A = ({
     d: "M10.799 2.68a.6.6 0 01.011.848L6.457 8l4.353 4.472a.6.6 0 01-.86.837L5.19 8.42a.6.6 0 010-.838l4.76-4.89a.6.6 0 01.849-.012z",
     fill: e
   }
-) })), Se = ({
+) })), He = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -172,7 +172,7 @@ const A = ({
     d: "M5.207 13.32a.6.6 0 01-.012-.848L9.55 8 5.195 3.528a.6.6 0 11.86-.837l4.76 4.89a.6.6 0 010 .838l-4.76 4.89a.6.6 0 01-.848.012z",
     fill: e
   }
-) })), Ie = ({
+) })), Fe = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -181,7 +181,7 @@ const A = ({
     d: "M13.79 2.21a.72.72 0 0 1 0 1.02L9.018 8l4.77 4.77a.72.72 0 1 1-1.018 1.02L8 9.018l-4.77 4.77a.72.72 0 1 1-1.02-1.018L6.982 8l-4.77-4.77A.72.72 0 0 1 3.23 2.21L8 6.982l4.77-4.77a.72.72 0 0 1 1.02 0Z",
     fill: e
   }
-) })), He = ({
+) })), ve = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -190,7 +190,7 @@ const A = ({
     d: "M12.644.156l3.2 3.2a.533.533 0 010 .754L5.177 14.777a.534.534 0 01-.247.14L.663 15.984a.533.533 0 01-.647-.647l1.067-4.267a.534.534 0 01.14-.248L11.89.156a.533.533 0 01.754 0zM10.133 3.42l-8.051 8.052-.815 3.261 3.26-.815 8.052-8.052-2.446-2.446zm2.134-2.132l-1.38 1.378 2.446 2.446 1.38-1.379-2.446-2.445z",
     fill: e
   }
-) })), ve = ({
+) })), Oe = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -199,7 +199,7 @@ const A = ({
     d: "M1.5 1.933l5.4 6.72c.066.081.1.18.1.28v5.134h2V8.933c0-.1.036-.199.1-.28l5.4-6.72h-13zM6 9.09L.1 1.747C-.145 1.439.09 1 .5 1h15c.413 0 .648.439.4.747L10 9.089v5.444c0 .258-.223.467-.5.467h-3c-.275 0-.5-.209-.5-.467V9.09z",
     fill: e
   }
-) })), Fe = ({
+) })), xe = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -208,7 +208,7 @@ const A = ({
     d: "M1.317 2.317a4.5 4.5 0 016.364 0c.117.117.223.238.32.363.095-.124.2-.245.316-.362a4.5 4.5 0 016.364 6.364l-.004.004-6.328 6.172a.5.5 0 01-.698 0L1.317 8.682a4.5 4.5 0 010-6.365zm5.657.708a3.5 3.5 0 00-4.952 4.947L8 13.802l5.977-5.83a3.5 3.5 0 00-4.952-4.947c-.235.235-.42.51-.586.815a.5.5 0 01-.878 0 3.46 3.46 0 00-.587-.815z",
     fill: e
   }
-) })), xe = ({
+) })), De = ({
   color: e = "currentColor",
   ...t
 }) => /* @__PURE__ */ E(g, { ...t, children: [
@@ -226,7 +226,7 @@ const A = ({
       fill: e
     }
   )
-] }), Oe = ({
+] }), Le = ({
   color: e = "currentColor",
   ...t
 }) => /* @__PURE__ */ E(g, { ...t, children: [
@@ -262,7 +262,7 @@ const A = ({
       fillRule: "evenodd"
     }
   )
-] }), De = ({
+] }), Ne = ({
   color: e = "currentColor",
   ...t
 }) => /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -273,7 +273,7 @@ const A = ({
     fill: e,
     fillRule: "evenodd"
   }
-) }), Le = ({
+) }), ye = ({
   color: e = "currentColor",
   ...t
 }) => /* @__PURE__ */ E(g, { ...t, children: [
@@ -302,7 +302,7 @@ const A = ({
   )
 ] });
 var p = /* @__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))(p || {}), I0 = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(I0 || {});
-const K = {
+const Y = {
   guid: p.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
@@ -407,52 +407,52 @@ const K = {
     colorName: "travel",
     icon: "airplane_ticket"
   },
-  K
-], v0 = 0.625, F0 = ({
+  Y
+], F0 = 0.625, v0 = ({
   categoryGuid: e,
-  icon_ratio: t = v0,
+  icon_ratio: t = F0,
   size: a = 32,
   sx: r = {},
-  variant: l = "filled"
+  variant: n = "filled"
 }) => {
-  const s = D(), c = b.useMemo(
-    () => H0.find((d) => d.guid === e) ?? K,
+  const s = D(), c = C.useMemo(
+    () => H0.find((d) => d.guid === e) ?? Y,
     [e]
-  ), n = s.palette.categories[c.colorName];
+  ), l = s.palette.categories[c.colorName];
   return /* @__PURE__ */ o(
-    O,
+    x,
     {
       alignItems: "center",
       bgcolor: () => {
-        let d = n;
-        return l === "twotone" && (d = `${d}20`), l === "transparent" || l === "basic" ? "transparent" : d;
+        let d = l;
+        return n === "twotone" && (d = `${d}20`), n === "transparent" || n === "basic" ? "transparent" : d;
       },
       borderRadius: 1,
       color: () => {
-        const d = l === "filled" ? s.palette.common.white : n;
-        return l === "basic" ? s.palette.text.primary : d;
+        const d = n === "filled" ? s.palette.common.white : l;
+        return n === "basic" ? s.palette.text.primary : d;
       },
       height: a,
       justifyContent: "center",
       sx: [...Array.isArray(r) ? r : [r]],
       width: a,
-      children: /* @__PURE__ */ o(A, { name: c.icon, size: a * t })
+      children: /* @__PURE__ */ o(R, { name: c.icon, size: a * t })
     }
   );
-}, x0 = ({
+}, O0 = ({
   items: e,
   onChange: t,
   isValid: a,
   selected: r
 }) => {
-  const l = D(), s = e?.map((c) => {
-    const n = c.getValue({ isValid: a });
+  const n = D(), s = e?.map((c) => {
+    const l = c.getValue({ isValid: a });
     return {
       label: c.label,
       onClick: () => {
-        t(n, "accept", c);
+        t(l, "accept", c);
       },
-      disabled: !a(n)
+      disabled: !a(l)
     };
   });
   return /* @__PURE__ */ o(W, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ o(h0, { color: "primary", orientation: "vertical", value: r, children: s?.map((c) => /* @__PURE__ */ o(
@@ -469,11 +469,11 @@ const K = {
           boxShadow: "0px 0px 0px 2px rgba(82, 138, 224, 0.8)"
         },
         "&:hover": {
-          bgcolor: l.palette.action.hover,
-          borderTop: `1px solid ${l.palette.secondary.light}`
+          bgcolor: n.palette.action.hover,
+          borderTop: `1px solid ${n.palette.secondary.light}`
         },
         "&.Mui-selected": {
-          border: `2px solid ${l.palette.primary.main} !important`,
+          border: `2px solid ${n.palette.primary.main} !important`,
           marginTop: "-2px !important",
           color: "primary"
         }
@@ -483,14 +483,14 @@ const K = {
     },
     c.label
   )) }) });
-}, Ne = ({
+}, ke = ({
   copy: e,
   dateRange: t,
   onRangeChanged: a,
   selectedShortcut: r = e.dateRangeThisMonth,
-  sx: l = {}
+  sx: n = {}
 }) => {
-  const s = D(), c = l0(s.breakpoints.down("sm")), n = b.useMemo(() => {
+  const s = D(), c = l0(s.breakpoints.down("sm")), l = C.useMemo(() => {
     const f = i0(), d = a0(f, 1), T = n0(f, 1);
     return [
       {
@@ -526,7 +526,7 @@ const K = {
     const T = d.shortcut;
     a?.(f, T ? T.label : e.dateRangeCustom);
   };
-  return /* @__PURE__ */ o(O, { gap: 16, m: 8, children: /* @__PURE__ */ o(c0, { dateAdapter: d0, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(x, { gap: 16, m: 8, children: /* @__PURE__ */ o(c0, { dateAdapter: d0, children: /* @__PURE__ */ o(
     s0,
     {
       calendars: 1,
@@ -540,46 +540,46 @@ const K = {
       slotProps: {
         actionBar: { actions: [] },
         shortcuts: {
-          items: c ? [] : n
+          items: c ? [] : l
         },
         toolbar: {
           toolbarFormat: "MMM d, yyyy"
         }
       },
       slots: {
-        leftArrowIcon: () => /* @__PURE__ */ o(A, { name: "chevron_left", size: 28 }),
-        shortcuts: (f) => /* @__PURE__ */ o(x0, { selected: r, ...f }),
-        rightArrowIcon: () => /* @__PURE__ */ o(A, { name: "chevron_right", size: 28 })
+        leftArrowIcon: () => /* @__PURE__ */ o(R, { name: "chevron_left", size: 28 }),
+        shortcuts: (f) => /* @__PURE__ */ o(O0, { selected: r, ...f }),
+        rightArrowIcon: () => /* @__PURE__ */ o(R, { name: "chevron_right", size: 28 })
       },
-      sx: { ...l },
+      sx: { ...n },
       value: t
     }
   ) }) });
-}, ye = b.forwardRef(function(t, a) {
+}, we = C.forwardRef(function(t, a) {
   return /* @__PURE__ */ o(Z, { direction: "up", ref: a, ...t });
-}), O0 = ({
+}), x0 = ({
   hasSecondaryAction: e = !0,
   isPrimaryDisabled: t,
   onPrimaryAction: a,
   onSecondaryAction: r,
-  primaryColor: l = "primary",
+  primaryColor: n = "primary",
   primaryText: s = "Save",
   secondaryColor: c = "primary",
-  secondaryText: n = "Cancel"
-}) => /* @__PURE__ */ E(O, { direction: "row", gap: 16, justifyContent: "flex-end", sx: { width: "100%", p: 24 }, children: [
+  secondaryText: l = "Cancel"
+}) => /* @__PURE__ */ E(x, { direction: "row", gap: 16, justifyContent: "flex-end", sx: { width: "100%", p: 24 }, children: [
   e && /* @__PURE__ */ o(
     w,
     {
       color: c,
       onClick: r,
       variant: a ? "outlined" : "contained",
-      children: n
+      children: l
     }
   ),
   a && /* @__PURE__ */ o(
     w,
     {
-      color: l,
+      color: n,
       disabled: t,
       onClick: a,
       variant: "contained",
@@ -591,41 +591,41 @@ const K = {
   className: t = "",
   children: a,
   color: r,
-  sx: l = {},
+  sx: n = {},
   truncate: s = !0,
   uppercase: c,
-  ...n
+  ...l
 }) => {
-  switch (n.variant) {
+  switch (l.variant) {
     case "Body":
-      n.variant = "body1";
+      l.variant = "body1";
       break;
     case "Button":
-      n.variant = "button";
+      l.variant = "button";
       break;
     case "H1":
-      n.variant = "h1";
+      l.variant = "h1";
       break;
     case "H2":
-      n.variant = "h2";
+      l.variant = "h2";
       break;
     case "H3":
-      n.variant = "h3";
+      l.variant = "h3";
       break;
     case "Paragraph":
-      n.variant = "subtitle1";
+      l.variant = "subtitle1";
       break;
     case "ParagraphSmall":
-      n.variant = "subtitle2";
+      l.variant = "subtitle2";
       break;
     case "Small":
-      n.variant = "body2";
+      l.variant = "body2";
       break;
     case "Tiny":
-      n.variant = "tiny";
+      l.variant = "tiny";
       break;
     case "XSmall":
-      n.variant = "caption";
+      l.variant = "caption";
       break;
   }
   return /* @__PURE__ */ o(
@@ -645,13 +645,13 @@ const K = {
         c ? {
           textTransform: "uppercase"
         } : {},
-        ...Array.isArray(l) ? l : [l]
+        ...Array.isArray(n) ? n : [n]
       ],
-      ...n,
+      ...l,
       children: a
     }
   );
-}, D0 = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(L, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...a, children: t }), ke = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(L, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...a, children: t }), we = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(L, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...a, children: t }), Pe = ({ className: e = "", children: t, truncate: a, ...r }) => /* @__PURE__ */ o(
+}, D0 = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(L, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...a, children: t }), _e = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(L, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...a, children: t }), Pe = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(L, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...a, children: t }), ze = ({ className: e = "", children: t, truncate: a, ...r }) => /* @__PURE__ */ o(
   L,
   {
     className: `mx-kmui-text p ${e}`,
@@ -661,8 +661,8 @@ const K = {
     ...r,
     children: t
   }
-), _e = ({ copy: e, onClose: t }) => /* @__PURE__ */ E(
-  O,
+), Be = ({ copy: e, onClose: t }) => /* @__PURE__ */ E(
+  x,
   {
     sx: {
       alignItems: "center",
@@ -673,18 +673,18 @@ const K = {
     },
     children: [
       /* @__PURE__ */ o(D0, { variant: "h3", children: e.title }),
-      /* @__PURE__ */ o(X, { "aria-label": e.close_aria, onClick: t, sx: { mr: -12 }, children: /* @__PURE__ */ o(p0, {}) })
+      /* @__PURE__ */ o(K, { "aria-label": e.close_aria, onClick: t, sx: { mr: -12 }, children: /* @__PURE__ */ o(p0, {}) })
     ]
   }
-), ze = ({
+), Ve = ({
   className: e,
   disableSave: t,
   id: a,
   isOpen: r,
-  onClose: l,
+  onClose: n,
   onSave: s,
   primaryText: c,
-  secondaryText: n,
+  secondaryText: l,
   children: i,
   ...f
 }) => /* @__PURE__ */ E(
@@ -693,52 +693,52 @@ const K = {
     anchor: "right",
     className: `mx-kmui-drawer ${e}`,
     id: a ?? void 0,
-    onClose: l,
+    onClose: n,
     open: r,
     variant: "temporary",
     ...f,
     children: [
       i,
       s && /* @__PURE__ */ o(
-        O0,
+        x0,
         {
           isPrimaryDisabled: t,
           onPrimaryAction: s,
-          onSecondaryAction: l,
+          onSecondaryAction: n,
           primaryText: c,
-          secondaryText: n
+          secondaryText: l
         }
       )
     ]
   }
-), j = 32, _ = "https://content.moneydesktop.com/storage/MD_Assets", L0 = `${_}/serenity/default_institution_logo.png`, Be = ({
+), j = 32, P = "https://content.moneydesktop.com/storage/MD_Assets", L0 = `${P}/serenity/default_institution_logo.png`, Ue = ({
   alt: e,
   institutionGuid: t,
   logoUrl: a,
   size: r = j,
-  ...l
+  ...n
 }) => /* @__PURE__ */ o(
   "img",
   {
     alt: e,
     height: r,
     onError: (s) => s.target.src = L0,
-    src: a || `${_}/Ipad%20Logos/100x100/${t}_100x100.png`,
+    src: a || `${P}/Ipad%20Logos/100x100/${t}_100x100.png`,
     style: {
       borderRadius: 4
     },
     width: r,
-    ...l
+    ...n
   }
-), Ve = ({
+), Ge = ({
   alt: e = "",
   categoryGuid: t,
   merchantGuid: a,
   size: r = j,
-  ...l
+  ...n
 }) => {
-  const [s, c] = b.useState(!1), n = D();
-  return /* @__PURE__ */ E(W, { display: "inline-block", position: "relative", ...l, children: [
+  const [s, c] = C.useState(!1), l = D();
+  return /* @__PURE__ */ E(W, { display: "inline-block", position: "relative", ...n, children: [
     a && !s && /* @__PURE__ */ o(
       "img",
       {
@@ -746,9 +746,9 @@ const K = {
         "aria-hidden": !e,
         height: r,
         onError: () => c(!0),
-        src: `${_}/merchant_logos/${a}.png`,
+        src: `${P}/merchant_logos/${a}.png`,
         style: {
-          backgroundColor: n.palette.common.white,
+          backgroundColor: l.palette.common.white,
           borderRadius: 4,
           boxSizing: "border-box",
           position: "absolute"
@@ -756,14 +756,14 @@ const K = {
         width: r
       }
     ),
-    /* @__PURE__ */ o(F0, { categoryGuid: t, size: r })
+    /* @__PURE__ */ o(v0, { categoryGuid: t, size: r })
   ] });
-}, Ue = ({
+}, $e = ({
   disabled: e = !1,
   label: t = "",
   shrink: a = !0,
   variant: r = "outlined",
-  ...l
+  ...n
 }) => /* @__PURE__ */ o(
   m0,
   {
@@ -773,21 +773,21 @@ const K = {
     disabled: e,
     label: t,
     variant: r,
-    ...l
+    ...n
   }
 );
 function N0(e) {
   return /* @__PURE__ */ o(Z, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
-const Ge = ({
+const We = ({
   open: e,
   handleClose: t,
   message: a,
   autoHideDuration: r = 3e3,
-  severity: l = "success",
+  severity: n = "success",
   snackbarSx: s,
   showAction: c = !1,
-  showClose: n = !1,
+  showClose: l = !1,
   actionText: i = "Undo",
   onActionClick: f,
   multiLine: d = !1
@@ -798,13 +798,13 @@ const Ge = ({
     info: T.palette.info.lighter,
     warning: T.palette.warning.lighter
   }, t0 = /* @__PURE__ */ E(
-    O,
+    x,
     {
       alignItems: d ? "flex-end" : "center",
       direction: d ? "column-reverse" : "row",
       justifyContent: (
         // eslint-disable-next-line no-nested-ternary
-        d && c && n ? "space-between" : "flex-end"
+        d && c && l ? "space-between" : "flex-end"
       ),
       children: [
         c && /* @__PURE__ */ o(
@@ -820,14 +820,14 @@ const Ge = ({
             children: i
           }
         ),
-        n && /* @__PURE__ */ o(
-          X,
+        l && /* @__PURE__ */ o(
+          K,
           {
             "aria-label": "close",
             color: "inherit",
             onClick: t,
             sx: { height: 44, width: 44 },
-            children: /* @__PURE__ */ o(A, { fill: !0, name: "close", size: 24, weight: 400 })
+            children: /* @__PURE__ */ o(R, { fill: !0, name: "close", size: 24, weight: 400 })
           }
         )
       ]
@@ -849,13 +849,13 @@ const Ge = ({
         b0,
         {
           action: t0,
-          severity: l,
+          severity: n,
           sx: {
             display: "flex",
             alignItems: "stretch",
-            minHeight: n && c && d ? 120 : 56,
+            minHeight: l && c && d ? 120 : 56,
             maxHeight: d ? 120 : 56,
-            backgroundColor: (z) => z.palette.mode === "light" ? z.palette[l].main : e0[l],
+            backgroundColor: (z) => z.palette.mode === "light" ? z.palette[n].main : e0[n],
             width: "100%",
             "& .MuiAlert-icon": {
               alignSelf: d ? "flex-start" : "center"
@@ -888,45 +888,45 @@ const Ge = ({
       )
     }
   );
-}, x = {
+}, O = {
   REACT: "react",
   REACT_NATIVE: "react_native",
   NATIVE: "native"
 }, y = {
   LIGHT: "light",
   DARK: "dark"
-}, Q = b.createContext(Y), J = b.createContext(
-  P(y.LIGHT, x.REACT_NATIVE)
-), $e = ({
+}, Q = C.createContext(X), J = C.createContext(
+  _(y.LIGHT, O.REACT_NATIVE)
+), Ze = ({
   children: e,
-  target: t = x.REACT,
+  target: t = O.REACT,
   theme: a = y.LIGHT,
   tokenOverrides: r
 }) => {
-  const [l, s] = b.useState(a === y.LIGHT ? Y : C0), c = b.useMemo(() => ({
+  const [n, s] = C.useState(a === y.LIGHT ? X : C0), c = C.useMemo(() => ({
     ...r
   }), [r]);
-  return b.useEffect(() => {
-    const n = P(a, t, { ...c });
-    s(n);
-  }, [a, t, c]), t === x.REACT ? /* @__PURE__ */ o(Q.Provider, { value: l, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ o(J.Provider, { value: l, children: e }));
-}, We = (e = x.REACT, t = {}) => {
-  const a = e === x.REACT ? Q : J, r = b.useContext(a);
-  return r || P(y.LIGHT, e, { ...t });
+  return C.useEffect(() => {
+    const l = _(a, t, { ...c });
+    s(l);
+  }, [a, t, c]), t === O.REACT ? /* @__PURE__ */ o(Q.Provider, { value: n, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ o(J.Provider, { value: n, children: e }));
+}, Ke = (e = O.REACT, t = {}) => {
+  const a = e === O.REACT ? Q : J, r = C.useContext(a);
+  return r || _(y.LIGHT, e, { ...t });
 }, q = {
   LIGHT: "light"
-}, R = (e) => ({
-  50: F(e, 0.95),
-  100: F(e, 0.85),
-  200: F(e, 0.7),
-  300: F(e, 0.55),
-  400: F(e, 0.3),
+}, M = (e) => ({
+  50: v(e, 0.95),
+  100: v(e, 0.85),
+  200: v(e, 0.7),
+  300: v(e, 0.55),
+  400: v(e, 0.3),
   500: e,
   600: N(e, 0.3),
   700: N(e, 0.5),
   800: N(e, 0.65),
   900: N(e, 0.75)
-}), C = "#FFFFFF", M = "#000000", S = {
+}), b = "#FFFFFF", A = "#000000", y0 = "#F9F9F9", k0 = "#1A1A1A", S = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -942,7 +942,7 @@ const Ge = ({
   CHART5: "#60A9FF",
   CHART6: "#C8BAEE",
   CHART7: "#585E67"
-}, v = {
+}, F = {
   CHART_MONO1: "#C3EAFF",
   CHART_MONO2: "#8ED7FF",
   CHART_MONO3: "#60A9FF",
@@ -995,23 +995,23 @@ const Ge = ({
   TRANSFER: "#75C7B7",
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
-}, y0 = (e) => {
-  const t = R(S.PRIMARY), a = R(S.SECONDARY), r = R(S.ERROR), l = R(S.WARNING), s = R(S.INFO), c = R(S.SUCCESS), n = R(S.NEUTRAL), i = e === q.LIGHT;
-  return R0({
+}, w0 = (e) => {
+  const t = M(S.PRIMARY), a = M(S.SECONDARY), r = M(S.ERROR), n = M(S.WARNING), s = M(S.INFO), c = M(S.SUCCESS), l = M(S.NEUTRAL), i = e === q.LIGHT;
+  return E0({
     mode: e,
     // DEPRECATED: Use Neutral instead
     border: {
       /* DEPRECATED: Use light instead */
-      lighter: i ? n[300] : n[700],
-      light: i ? n[300] : n[700],
-      main: i ? n[400] : n[600],
-      dark: n[500],
+      lighter: i ? l[300] : l[700],
+      light: i ? l[300] : l[700],
+      main: i ? l[400] : l[600],
+      dark: l[500],
       /* DEPRECATED: Use light instead */
-      darker: n[500]
+      darker: l[500]
     },
     common: {
-      white: C,
-      black: M
+      white: b,
+      black: A
     },
     primary: {
       ...t,
@@ -1034,9 +1034,9 @@ const Ge = ({
       darker: i ? a[900] : a[50]
     },
     text: {
-      primary: i ? n[900] : C,
-      secondary: i ? n[600] : m(C, 0.7),
-      disabled: i ? n[500] : m(C, 0.38)
+      primary: i ? l[900] : b,
+      secondary: i ? l[600] : m(b, 0.7),
+      disabled: i ? l[500] : m(b, 0.38)
     },
     error: {
       ...r,
@@ -1049,14 +1049,14 @@ const Ge = ({
       darker: i ? r[900] : r[100]
     },
     warning: {
-      ...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: i ? n[100] : n[800],
+      light: i ? n[300] : n[600],
+      main: i ? n[500] : n[400],
+      dark: i ? n[700] : n[200],
       /* DEPRECATED: Use light instead */
-      darker: i ? l[900] : l[100]
+      darker: i ? n[900] : n[100]
     },
     info: {
       ...s,
@@ -1078,23 +1078,23 @@ const Ge = ({
       /* DEPRECATED: Use light instead */
       darker: i ? c[900] : c[100]
     },
-    grey: n,
+    grey: l,
     action: {
-      active: e === "light" ? m(M, 0.56) : m(C, 0.56),
-      hover: e === "light" ? m(M, 0.04) : m(C, 0.08),
+      active: e === "light" ? m(A, 0.56) : m(b, 0.56),
+      hover: e === "light" ? m(A, 0.04) : m(b, 0.08),
       // also used for text hover
-      selected: e === "light" ? m(M, 0.08) : m(C, 0.16),
-      focus: e === "light" ? m(M, 0.12) : m(C, 0.12),
-      disabled: e === "light" ? m(M, 0.38) : m(C, 0.38),
-      disabledBackground: e === "light" ? m(M, 0.12) : m(C, 0.12)
+      selected: e === "light" ? m(A, 0.08) : m(b, 0.16),
+      focus: e === "light" ? m(A, 0.12) : m(b, 0.12),
+      disabled: e === "light" ? m(A, 0.38) : m(b, 0.38),
+      disabledBackground: e === "light" ? m(A, 0.12) : m(b, 0.12)
     },
     background: {
-      default: i ? n[100] : n[800],
-      paper: i ? C : n[900],
-      highlight: i ? n[200] : n[600],
+      default: i ? y0 : k0,
+      paper: i ? b : A,
+      highlight: i ? l[200] : l[600],
       highlightPrimary: i ? t[100] : t[500]
     },
-    // divider: isLight ? neutral[400] : neutral[700],
+    divider: i ? m(A, 0.12) : m(b, 0.12),
     categories: {
       autoTransport: i ? u.AUTO_TRANSPORTT : h.AUTO_TRANSPORTT,
       billsUtilities: i ? u.BILLS_UTILITIES : h.BILLS_UTILITIES,
@@ -1129,15 +1129,15 @@ const Ge = ({
       chart7: I.CHART7
     },
     chartMono: {
-      chartMono1: v.CHART_MONO1,
-      chartMono2: v.CHART_MONO2,
-      chartMono3: v.CHART_MONO3,
-      chartMono4: v.CHART_MONO4,
-      chartMono5: v.CHART_MONO5,
-      chartMono6: v.CHART_MONO6
+      chartMono1: F.CHART_MONO1,
+      chartMono2: F.CHART_MONO2,
+      chartMono3: F.CHART_MONO3,
+      chartMono4: F.CHART_MONO4,
+      chartMono5: F.CHART_MONO5,
+      chartMono6: F.CHART_MONO6
     }
   });
-}, H = "Inter, Helvetica, Arial, sans-serif", k0 = (e) => M0(e, {
+}, H = "Inter, Helvetica, Arial, sans-serif", _0 = (e) => M0(e, {
   fontFamily: H,
   fontSize: 15,
   Body: {
@@ -1245,15 +1245,15 @@ const Ge = ({
     lineHeight: "12px"
   }
 });
-E0.setLicenseKey(
+R0.setLicenseKey(
   "6e7dd593526efa1f157230ecf06c9b02Tz0xMDA5NjAsRT0xNzYyMDQxNjAwMDAwLFM9cHJvLExNPWFubnVhbCxQVj1RMy0yMDI0LEtWPTI="
 );
 const k = [...$().shadows];
 k[1] = "0px 2px 8px rgba(106, 115, 129, 0.12)";
 k[2] = "0px 6px 12px rgba(106, 115, 129, 0.16), 0px 3px 8px rgba(87, 102, 117, 0.06)";
 k[3] = "0px 12px 20px rgba(106, 115, 129, 0.22)";
-const Ze = (e) => {
-  const t = y0(e), a = k0(t);
+const Xe = (e) => {
+  const t = w0(e), a = _0(t);
   return $({
     breakpoints: {
       values: {
@@ -1276,10 +1276,10 @@ const Ze = (e) => {
       MuiAlert: {
         defaultProps: {
           iconMapping: {
-            success: /* @__PURE__ */ o(A, { fill: !0, name: "check_circle", size: 24, weight: 400 }),
-            error: /* @__PURE__ */ o(A, { fill: !0, name: "error", size: 24, weight: 400 }),
-            warning: /* @__PURE__ */ o(A, { fill: !0, name: "warning", size: 24, weight: 400 }),
-            info: /* @__PURE__ */ o(A, { fill: !0, name: "info", size: 24, weight: 400 })
+            success: /* @__PURE__ */ o(R, { fill: !0, name: "check_circle", size: 24, weight: 400 }),
+            error: /* @__PURE__ */ o(R, { fill: !0, name: "error", size: 24, weight: 400 }),
+            warning: /* @__PURE__ */ o(R, { fill: !0, name: "warning", size: 24, weight: 400 }),
+            info: /* @__PURE__ */ o(R, { fill: !0, name: "info", size: 24, weight: 400 })
           },
           variant: "filled"
         },
@@ -1835,6 +1835,16 @@ const Ze = (e) => {
           }
         }
       },
+      MuiTabs: {
+        styleOverrides: {
+          root: {
+            borderBottomStyle: "solid",
+            borderBottomWidth: 1,
+            borderColor: t.divider,
+            marginBottom: 8
+          }
+        }
+      },
       MuiTextField: {
         defaultProps: {
           InputLabelProps: {
@@ -1865,50 +1875,50 @@ const Ze = (e) => {
   });
 };
 export {
-  me as AccountsFilledIcon,
-  Te as AccountsIcon,
-  be as ArrowLeftIcon,
-  Ce as AttentionFilledIcon,
+  be as AccountsFilledIcon,
+  Ce as AccountsIcon,
+  Ae as ArrowLeftIcon,
+  Re as AttentionFilledIcon,
   g as BaseIcon,
-  ye as BottomSheetTransition,
-  Ae as CalendarIcon,
+  we as BottomSheetTransition,
+  Ee as CalendarIcon,
   p as CategoryGuids,
-  F0 as CategoryIcon,
+  v0 as CategoryIcon,
   H0 as CategoryIconList,
   I0 as CategoryIconVariants,
-  Ee as CheckmarkFilledIcon,
-  Re as ChevronDownIcon,
-  Me as ChevronLeftIcon,
-  Se as ChevronRightIcon,
-  Ie as CloseIcon,
-  Ne as DateRangePicker,
-  O0 as DialogFooter,
-  _e as DialogHeader,
-  ze as Drawer,
-  He as EditIcon,
-  ve as FilterIcon,
-  O0 as Footer,
+  Me as CheckmarkFilledIcon,
+  Se as ChevronDownIcon,
+  Ie as ChevronLeftIcon,
+  He as ChevronRightIcon,
+  Fe as CloseIcon,
+  ke as DateRangePicker,
+  x0 as DialogFooter,
+  Be as DialogHeader,
+  Ve as Drawer,
+  ve as EditIcon,
+  Oe as FilterIcon,
+  x0 as Footer,
   D0 as H1,
-  ke as H2,
-  we as H3,
-  Fe as HeartIcon,
+  _e as H2,
+  Pe as H3,
+  xe as HeartIcon,
   H as INTER,
-  A as Icon,
+  R as Icon,
   S0 as IconWeight,
-  Be as InstitutionLogo,
-  Oe as MXLogoCopyrightIcon,
-  De as MXLogoFilledIcon,
-  xe as MXLogoIcon,
-  Le as MXLogoOutlineIcon,
-  Ve as MerchantLogo,
-  Pe as P,
-  x as TARGETS,
+  Ue as InstitutionLogo,
+  Le as MXLogoCopyrightIcon,
+  Ne as MXLogoFilledIcon,
+  De as MXLogoIcon,
+  ye as MXLogoOutlineIcon,
+  Ge as MerchantLogo,
+  ze as P,
+  O as TARGETS,
   y as THEMES,
   L as Text,
-  Ue as TextField,
-  Ge as Toast,
-  $e as TokenProvider,
-  Ze as createMXTheme,
-  We as useTokens
+  $e as TextField,
+  We as Toast,
+  Ze as TokenProvider,
+  Xe as createMXTheme,
+  Ke as useTokens
 };
 //# sourceMappingURL=index.es.js.map