@mxenabled/mxui 2.12.1 → 2.12.3

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { jsx as n, jsxs as b } from "react/jsx-runtime";
-import N from "react";
+import H from "react";
 import A from "@mui/material/Stack";
-import { useTheme as O, createTheme as G } from "@mui/material/styles";
+import { useTheme as v, createTheme as G } from "@mui/material/styles";
 import { Icon as se, ExpandMore as ce, Close as de } from "@mxenabled/mx-icons";
 import { endOfMonth as V } from "date-fns/endOfMonth";
 import { endOfYear as pe } from "date-fns/endOfYear";
@@ -11,27 +11,26 @@ 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 he } from "date-fns/subYears";
-import me from "@mui/material/useMediaQuery";
-import { usePickerContext as Z, useIsValidValue as Q, LocalizationProvider as fe, StaticDateRangePicker as be } from "@mui/x-date-pickers-pro";
+import fe from "@mui/material/useMediaQuery";
+import { usePickerContext as Z, useIsValidValue as Q, LocalizationProvider as me, StaticDateRangePicker as be } from "@mui/x-date-pickers-pro";
 import { AdapterDateFns as xe } from "@mui/x-date-pickers-pro/AdapterDateFns";
-import { MultiInputDateRangeField as Te } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
-import L from "@mui/material/Box";
-import Me from "@mui/material/ToggleButton";
-import Re from "@mui/material/ToggleButtonGroup";
-import Ce from "@mui/material/MenuItem";
+import N from "@mui/material/Box";
+import Te from "@mui/material/ToggleButton";
+import Me from "@mui/material/ToggleButtonGroup";
+import Re from "@mui/material/MenuItem";
 import J from "@mui/material/TextField";
-import { usePickerLayout as ye, PickersLayoutRoot as Se, PickersLayoutContentWrapper as Ae, pickersLayoutClasses as w } from "@mui/x-date-pickers/PickersLayout";
+import { usePickerLayout as Ce, PickersLayoutRoot as ye, PickersLayoutContentWrapper as Se, pickersLayoutClasses as P } from "@mui/x-date-pickers/PickersLayout";
 import q from "@mui/material/Slide";
 import $ from "@mui/material/Button";
 import ee from "@mui/material/IconButton";
 import re from "@mui/material/Typography";
-import Ie from "@mui/material/Drawer";
-import Oe from "@mui/material/Snackbar";
-import Ee from "@mui/material/Alert";
-import { FormControlLabel as ve, Box as P, Typography as X, Radio as B, Checkbox as Fe, alpha as f, darken as k, lighten as E, getContrastRatio as ke } from "@mui/material";
-import { circularProgressClasses as Le } from "@mui/material/CircularProgress";
-import { LicenseInfo as Ne } from "@mui/x-license";
-const H = ({
+import Ae from "@mui/material/Drawer";
+import Ie from "@mui/material/Snackbar";
+import Oe from "@mui/material/Alert";
+import { FormControlLabel as ve, Box as B, Typography as X, Radio as _, Checkbox as Ee, alpha as f, darken as L, lighten as E, getContrastRatio as Fe } from "@mui/material";
+import { circularProgressClasses as ke } from "@mui/material/CircularProgress";
+import { LicenseInfo as Le } from "@mui/x-license";
+const D = ({
   children: r,
   height: i,
   size: o = 16,
@@ -49,10 +48,10 @@ const H = ({
     xmlns: "http://www.w3.org/2000/svg",
     children: r
   }
-), T = ({ color: r, fill: i = !1, name: o, size: s = 20, sx: l, ...e }) => /* @__PURE__ */ n(se, { color: r, fill: i, name: o, size: s, sx: l, ...e }), vr = ({
+), T = ({ color: r, fill: i = !1, name: o, size: s = 20, sx: l, ...e }) => /* @__PURE__ */ n(se, { color: r, fill: i, name: o, size: s, sx: l, ...e }), Or = ({
   color: r = "currentColor",
   ...i
-}) => /* @__PURE__ */ b(H, { ...i, children: [
+}) => /* @__PURE__ */ b(D, { ...i, children: [
   /* @__PURE__ */ n(
     "path",
     {
@@ -67,10 +66,10 @@ const H = ({
       fill: r
     }
   )
-] }), Fr = ({
+] }), vr = ({
   color: r = "currentColor",
   ...i
-}) => /* @__PURE__ */ b(H, { ...i, children: [
+}) => /* @__PURE__ */ b(D, { ...i, children: [
   /* @__PURE__ */ n(
     "path",
     {
@@ -103,10 +102,10 @@ const H = ({
       fillRule: "evenodd"
     }
   )
-] }), kr = ({
+] }), Er = ({
   color: r = "currentColor",
   ...i
-}) => /* @__PURE__ */ n(H, { ...i, children: /* @__PURE__ */ n(
+}) => /* @__PURE__ */ n(D, { ...i, children: /* @__PURE__ */ n(
   "path",
   {
     clipRule: "evenodd",
@@ -114,10 +113,10 @@ const H = ({
     fill: r,
     fillRule: "evenodd"
   }
-) }), Lr = ({
+) }), Fr = ({
   color: r = "currentColor",
   ...i
-}) => /* @__PURE__ */ b(H, { ...i, children: [
+}) => /* @__PURE__ */ b(D, { ...i, children: [
   /* @__PURE__ */ n(
     "path",
     {
@@ -142,12 +141,12 @@ const H = ({
     }
   )
 ] });
-var g = /* @__PURE__ */ ((r) => (r.AutoTransport = "CAT-7829f71c-2e8c-afa5-2f55-fa3634b89874", r.BillsUtilities = "CAT-79b02f2f-2adc-88f0-ac2b-4e71ead9cfc8", r.BusinessServices = "CAT-94b11142-e97b-941a-f67f-6e18d246a23f", r.Education = "CAT-bf5c9cca-c96b-b50d-440d-38d9adfda5b0", r.Entertainment = "CAT-e04e9d1e-e041-c315-2e50-094143ab3f73", r.FeesCharges = "CAT-d73ee74b-13a4-ac3e-4015-fc4ba9a62b2a", r.Financial = "CAT-6c7de3f8-de6c-7061-1dd2-b093044014bf", r.FoodDining = "CAT-bd56d35a-a9a7-6e10-66c1-5b9cc1b6c81a", r.GiftsDonations = "CAT-8edf9663-623e-4735-490e-31288f0a70b0", r.HealthFitness = "CAT-52fa4693-c088-afb2-2a99-7bc39bb23a0f", r.Home = "CAT-b709172b-4eb7-318e-3b5d-e0f0500b32ac", r.Income = "CAT-bf9f3294-4c40-1677-d269-54fbc189faf3", r.Investments = "CAT-ccd42390-9e8c-3fb6-a5d9-6c31182d9c5c", r.Kids = "CAT-0cb1d99d-f558-99e3-2282-b31f359b411a", r.PersonalCare = "CAT-e5154228-fe45-790d-a280-f6bf5ae5ac9f", r.Pets = "CAT-7cccbafa-87d7-c9a6-661b-8b3402fe9e78", r.Shopping = "CAT-aad51b46-d6f7-3da5-fd6e-492328b3023f", r.Taxes = "CAT-d00fc539-aa14-009b-4ffb-7e8c7b839954", r.Transfer = "CAT-bce48142-fea4-ff45-20d9-0a642d44de83", r.Travel = "CAT-ea23d844-cbd1-eb10-f6ac-0df9610e59ae", r.Uncategorized = "CAT-d7851c65-3353-e490-1953-fb9235e681e4", r))(g || {}), He = /* @__PURE__ */ ((r) => (r.Basic = "basic", r.Filled = "filled", r.Transparent = "transparent", r.TwoTone = "two-tone", r))(He || {});
+var g = /* @__PURE__ */ ((r) => (r.AutoTransport = "CAT-7829f71c-2e8c-afa5-2f55-fa3634b89874", r.BillsUtilities = "CAT-79b02f2f-2adc-88f0-ac2b-4e71ead9cfc8", r.BusinessServices = "CAT-94b11142-e97b-941a-f67f-6e18d246a23f", r.Education = "CAT-bf5c9cca-c96b-b50d-440d-38d9adfda5b0", r.Entertainment = "CAT-e04e9d1e-e041-c315-2e50-094143ab3f73", r.FeesCharges = "CAT-d73ee74b-13a4-ac3e-4015-fc4ba9a62b2a", r.Financial = "CAT-6c7de3f8-de6c-7061-1dd2-b093044014bf", r.FoodDining = "CAT-bd56d35a-a9a7-6e10-66c1-5b9cc1b6c81a", r.GiftsDonations = "CAT-8edf9663-623e-4735-490e-31288f0a70b0", r.HealthFitness = "CAT-52fa4693-c088-afb2-2a99-7bc39bb23a0f", r.Home = "CAT-b709172b-4eb7-318e-3b5d-e0f0500b32ac", r.Income = "CAT-bf9f3294-4c40-1677-d269-54fbc189faf3", r.Investments = "CAT-ccd42390-9e8c-3fb6-a5d9-6c31182d9c5c", r.Kids = "CAT-0cb1d99d-f558-99e3-2282-b31f359b411a", r.PersonalCare = "CAT-e5154228-fe45-790d-a280-f6bf5ae5ac9f", r.Pets = "CAT-7cccbafa-87d7-c9a6-661b-8b3402fe9e78", r.Shopping = "CAT-aad51b46-d6f7-3da5-fd6e-492328b3023f", r.Taxes = "CAT-d00fc539-aa14-009b-4ffb-7e8c7b839954", r.Transfer = "CAT-bce48142-fea4-ff45-20d9-0a642d44de83", r.Travel = "CAT-ea23d844-cbd1-eb10-f6ac-0df9610e59ae", r.Uncategorized = "CAT-d7851c65-3353-e490-1953-fb9235e681e4", r))(g || {}), Ne = /* @__PURE__ */ ((r) => (r.Basic = "basic", r.Filled = "filled", r.Transparent = "transparent", r.TwoTone = "two-tone", r))(Ne || {});
 const te = {
   guid: g.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
-}, De = [
+}, He = [
   {
     guid: g.AutoTransport,
     colorName: "autoTransport",
@@ -249,15 +248,15 @@ const te = {
     icon: "airplane_ticket"
   },
   te
-], we = 0.625, Pe = ({
+], De = 0.625, we = ({
   categoryGuid: r,
-  icon_ratio: i = we,
+  icon_ratio: i = De,
   size: o = 32,
   sx: s = {},
   variant: l = "filled"
 }) => {
-  const e = O(), a = N.useMemo(
-    () => De.find((m) => m.guid === r) ?? te,
+  const e = v(), a = H.useMemo(
+    () => He.find((m) => m.guid === r) ?? te,
     [r]
   ), c = e.palette.categories[a.colorName];
   return /* @__PURE__ */ n(
@@ -280,8 +279,8 @@ const te = {
       children: /* @__PURE__ */ n(T, { name: a.icon, size: o * i })
     }
   );
-}, Be = ({ items: r, selected: i }) => {
-  const o = O(), { setValue: s } = Z(), l = Q(), e = r?.map((a) => {
+}, Pe = ({ items: r, selected: i }) => {
+  const o = v(), { setValue: s } = Z(), l = Q(), e = r?.map((a) => {
     const c = a.getValue({ isValid: l });
     return {
       label: a.label,
@@ -291,8 +290,8 @@ const te = {
       disabled: !l(c)
     };
   });
-  return /* @__PURE__ */ n(L, { sx: { gridColumn: 1, gridRow: "2/3", ml: "4px", mt: "24px", mr: "32px" }, children: /* @__PURE__ */ n(Re, { color: "primary", orientation: "vertical", value: i, children: e?.map((a) => /* @__PURE__ */ n(
-    Me,
+  return /* @__PURE__ */ n(N, { sx: { gridColumn: 1, gridRow: "2/3", ml: "4px", mt: "24px", mr: "32px" }, children: /* @__PURE__ */ n(Me, { color: "primary", orientation: "vertical", value: i, children: e?.map((a) => /* @__PURE__ */ n(
+    Te,
     {
       onClick: a.onClick,
       sx: {
@@ -319,7 +318,7 @@ const te = {
     },
     a.label
   )) }) });
-}, _e = ({
+}, Be = ({
   items: r,
   selected: i,
   selectLabel: o
@@ -345,24 +344,24 @@ const te = {
       sx: { width: "100%" },
       value: i,
       variant: "outlined",
-      children: e?.map((a) => /* @__PURE__ */ n(Ce, { onClick: a.onClick, value: a.label, children: a.label }, a.label))
+      children: e?.map((a) => /* @__PURE__ */ n(Re, { onClick: a.onClick, value: a.label, children: a.label }, a.label))
     }
   ) });
-}, ze = (r) => {
-  const { toolbar: i, content: o, shortcuts: s, ownerState: l } = ye(r);
+}, _e = (r) => {
+  const { toolbar: i, content: o, shortcuts: s, ownerState: l } = Ce(r);
   return /* @__PURE__ */ b(
-    Se,
+    ye,
     {
       ownerState: l,
       sx: {
         gridTemplateColumns: "minmax(320px, 1fr)",
         overflow: "auto",
         p: 0,
-        [`.${w.toolbar}`]: {
+        [`.${P.toolbar}`]: {
           gridColumn: 1,
           gridRow: 2
         },
-        [`.${w.contentWrapper}`]: {
+        [`.${P.contentWrapper}`]: {
           alignItems: "center",
           gridColumn: 1,
           gridRow: 3
@@ -374,9 +373,9 @@ const te = {
           i
         ] }),
         /* @__PURE__ */ n(
-          Ae,
+          Se,
           {
-            className: w.contentWrapper,
+            className: P.contentWrapper,
             ownerState: l,
             children: o
           }
@@ -384,14 +383,14 @@ const te = {
       ]
     }
   );
-}, Nr = ({
+}, kr = ({
   copy: r,
   dateRange: i,
   onRangeChanged: o,
   selectedShortcut: s = r.dateRangeThisMonth,
   sx: l = {}
 }) => {
-  const e = O(), a = me(e.breakpoints.down("sm")), c = N.useMemo(() => {
+  const e = v(), a = fe(e.breakpoints.down("sm")), c = H.useMemo(() => {
     const t = ue(), m = ge(t, 1), x = he(t, 1);
     return [
       {
@@ -427,7 +426,7 @@ const te = {
     const x = m.shortcut;
     o?.(t, x ? x.label : r.dateRangeCustom);
   };
-  return /* @__PURE__ */ n(A, { gap: a ? 0 : "16px", m: a ? 0 : "8px", children: /* @__PURE__ */ n(fe, { dateAdapter: xe, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(A, { gap: a ? 0 : "16px", m: a ? 0 : "8px", children: /* @__PURE__ */ n(me, { dateAdapter: xe, children: /* @__PURE__ */ n(
     be,
     {
       calendars: 1,
@@ -456,41 +455,25 @@ const te = {
         }
       },
       slots: {
-        ...a && { layout: ze },
+        ...a && { layout: _e },
         leftArrowIcon: () => /* @__PURE__ */ n(T, { name: "chevron_left", size: 28 }),
         shortcuts: (t) => a ? /* @__PURE__ */ n(
-          _e,
+          Be,
           {
             selectLabel: r.dateRangeSelectARange,
             selected: s,
             ...t
           }
-        ) : /* @__PURE__ */ n(Be, { selected: s, ...t }),
-        rightArrowIcon: () => /* @__PURE__ */ n(T, { name: "chevron_right", size: 28 }),
-        ...a && {
-          toolbar: (t) => /* @__PURE__ */ n(
-            Te,
-            {
-              dateSeparator: "",
-              format: "MM/dd/yyyy",
-              ...t,
-              slotProps: {
-                textField: ({ position: m }) => ({
-                  label: m === "start" ? r.dateRangeFrom : r.dateRangeTo
-                })
-              },
-              sx: { gap: "8px" }
-            }
-          )
-        }
+        ) : /* @__PURE__ */ n(Pe, { selected: s, ...t }),
+        rightArrowIcon: () => /* @__PURE__ */ n(T, { name: "chevron_right", size: 28 })
       },
       sx: { ...l },
       value: i
     }
   ) }) });
-}, Hr = N.forwardRef(function(i, o) {
+}, Lr = H.forwardRef(function(i, o) {
   return /* @__PURE__ */ n(q, { direction: "up", ref: o, ...i });
-}), $e = ({
+}), ze = ({
   hasSecondaryAction: r = !0,
   isPrimaryDisabled: i,
   onPrimaryAction: o,
@@ -528,7 +511,7 @@ const te = {
       )
     ]
   }
-), v = ({
+), F = ({
   bold: r,
   className: i = "",
   children: o,
@@ -559,7 +542,7 @@ const te = {
     ...c,
     children: o
   }
-), Ue = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(v, { className: `mx-mxui-text h1 ${r}`, component: "h1", variant: "h1", ...o, children: i }), Dr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(v, { className: `mx-mxui-text h2 ${r}`, component: "h2", variant: "h2", ...o, children: i }), wr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(v, { className: `mx-mxui-text h3 ${r}`, component: "h3", variant: "h3", ...o, children: i }), Pr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(v, { className: `mx-mxui-text p ${r}`, component: "p", variant: "body1", ...o, children: i }), Br = ({
+), $e = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h1 ${r}`, component: "h1", variant: "h1", ...o, children: i }), Nr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h2 ${r}`, component: "h2", variant: "h2", ...o, children: i }), Hr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h3 ${r}`, component: "h3", variant: "h3", ...o, children: i }), Dr = ({ className: r = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text p ${r}`, component: "p", variant: "body1", ...o, children: i }), wr = ({
   ariaHidden: r = !1,
   copy: i,
   id: o,
@@ -577,7 +560,7 @@ const te = {
     },
     children: [
       /* @__PURE__ */ n(
-        Ue,
+        $e,
         {
           "aria-hidden": r && o ? !0 : void 0,
           id: o,
@@ -589,7 +572,7 @@ const te = {
       /* @__PURE__ */ n(ee, { "aria-label": i.close_aria, onClick: s, sx: { mr: "-12px" }, children: /* @__PURE__ */ n(de, {}) })
     ]
   }
-), _r = ({
+), Pr = ({
   className: r,
   disableSave: i,
   id: o,
@@ -601,7 +584,7 @@ const te = {
   children: d,
   ...t
 }) => /* @__PURE__ */ b(
-  Ie,
+  Ae,
   {
     anchor: "right",
     className: `mx-kmui-drawer ${r}`,
@@ -613,7 +596,7 @@ const te = {
     children: [
       d,
       e && /* @__PURE__ */ n(
-        $e,
+        ze,
         {
           isPrimaryDisabled: i,
           onPrimaryAction: e,
@@ -624,7 +607,7 @@ const te = {
       )
     ]
   }
-), oe = 32, U = "https://content.moneydesktop.com/storage/MD_Assets", j = `${U}/serenity/default_institution_logo.png`, zr = ({
+), oe = 32, U = "https://content.moneydesktop.com/storage/MD_Assets", j = `${U}/serenity/default_institution_logo.png`, Br = ({
   alt: r,
   institutionGuid: i,
   logoUrl: o,
@@ -646,15 +629,15 @@ const te = {
     width: s,
     ...l
   }
-), $r = ({
+), _r = ({
   alt: r = "",
   categoryGuid: i,
   merchantGuid: o,
   size: s = oe,
   ...l
 }) => {
-  const [e, a] = N.useState(!1), c = O();
-  return /* @__PURE__ */ b(L, { display: "inline-block", position: "relative", ...l, children: [
+  const [e, a] = H.useState(!1), c = v();
+  return /* @__PURE__ */ b(N, { display: "inline-block", position: "relative", ...l, children: [
     o && !e && /* @__PURE__ */ n(
       "img",
       {
@@ -672,9 +655,9 @@ const te = {
         width: s
       }
     ),
-    /* @__PURE__ */ n(Pe, { categoryGuid: i, size: s })
+    /* @__PURE__ */ n(we, { categoryGuid: i, size: s })
   ] });
-}, Ur = ({
+}, zr = ({
   disabled: r = !1,
   label: i = "",
   shrink: o = !0,
@@ -703,10 +686,10 @@ const te = {
     ...e
   }
 );
-function Ge(r) {
+function Ue(r) {
   return /* @__PURE__ */ n(q, { ...r, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
-const Gr = ({
+const $r = ({
   open: r = !0,
   handleClose: i,
   closeAriaLabel: o,
@@ -719,15 +702,15 @@ const Gr = ({
   actionText: t = "Undo",
   onActionClick: m
 }) => {
-  const x = O(), F = d && /* @__PURE__ */ n(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ n(T, { fill: !0, name: "close" }) }), h = `${e}.main`;
+  const x = v(), k = d && /* @__PURE__ */ n(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ n(T, { fill: !0, name: "close" }) }), h = `${e}.main`;
   return /* @__PURE__ */ n(
-    Oe,
+    Ie,
     {
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       autoHideDuration: l,
       onClose: i,
       open: r,
-      slots: { transition: Ge },
+      slots: { transition: Ue },
       sx: {
         ...a,
         maxWidth: 568,
@@ -735,9 +718,9 @@ const Gr = ({
         minHeight: 56
       },
       children: /* @__PURE__ */ n(
-        Ee,
+        Oe,
         {
-          action: F,
+          action: k,
           severity: e,
           sx: {
             backgroundColor: h,
@@ -768,7 +751,7 @@ const Gr = ({
               },
               children: [
                 /* @__PURE__ */ n(
-                  v,
+                  F,
                   {
                     sx: {
                       lineHeight: x.typography.body1.lineHeight,
@@ -802,8 +785,8 @@ const Gr = ({
       )
     }
   );
-}, Vr = ({
-  component: r = B,
+}, Ur = ({
+  component: r = _,
   variant: i = "outlined",
   selected: o,
   onChange: s,
@@ -815,15 +798,15 @@ const Gr = ({
   error: t = !1,
   icon: m = !1,
   sx: x = {},
-  ...F
+  ...k
 }) => {
-  const h = O(), ie = () => h.palette.background.paper, D = () => t ? `inset 0px 0px 0px 2px ${h.palette.error.main}` : d ? o ? `inset 0px 0px 0px 2px ${h.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${h.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${h.palette.action.disabled}` : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : h.shadows[1], ae = () => d || t ? h.palette.background.paper : f(h.palette.primary.main, 0.1), ne = () => d || t ? D() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.primary.main, 0.5)}` : D(), le = () => d || t ? h.palette.background.paper : f(h.palette.primary.main, 0.3);
+  const h = v(), ie = () => h.palette.background.paper, w = () => t ? `inset 0px 0px 0px 2px ${h.palette.error.main}` : d ? o ? `inset 0px 0px 0px 2px ${h.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${h.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${h.palette.action.disabled}` : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : h.shadows[1], ae = () => d || t ? h.palette.background.paper : f(h.palette.primary.main, 0.1), ne = () => d || t ? w() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(h.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(h.palette.primary.main, 0.5)}` : w(), le = () => d || t ? h.palette.background.paper : f(h.palette.primary.main, 0.3);
   return /* @__PURE__ */ n(
     ve,
     {
       checked: o,
-      control: r === B ? /* @__PURE__ */ n(
-        B,
+      control: r === _ ? /* @__PURE__ */ n(
+        _,
         {
           name: a,
           sx: {
@@ -835,10 +818,10 @@ const Gr = ({
               fontSize: "20px"
             }
           },
-          ...F
+          ...k
         }
       ) : /* @__PURE__ */ n(
-        Fe,
+        Ee,
         {
           name: a,
           sx: {
@@ -850,13 +833,13 @@ const Gr = ({
               fontSize: "20px"
             }
           },
-          ...F
+          ...k
         }
       ),
       disabled: d,
-      label: /* @__PURE__ */ b(P, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
-        m && /* @__PURE__ */ n(P, { sx: { mr: "12px", mt: "8px", flexShrink: 0 }, children: m }),
-        /* @__PURE__ */ b(P, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
+      label: /* @__PURE__ */ b(B, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
+        m && /* @__PURE__ */ n(B, { sx: { mr: "12px", mt: "8px", flexShrink: 0 }, children: m }),
+        /* @__PURE__ */ b(B, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
           l && /* @__PURE__ */ n(X, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: l }),
           /* @__PURE__ */ n(X, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: e })
         ] })
@@ -874,7 +857,7 @@ const Gr = ({
         opacity: d ? 0.6 : 1,
         backgroundColor: ie(),
         border: "none",
-        boxShadow: D(),
+        boxShadow: w(),
         boxSizing: "border-box",
         transition: h.transitions.create(["background-color", "box-shadow"], {
           duration: h.transitions.duration.short
@@ -897,8 +880,8 @@ const Gr = ({
   );
 }, S = {
   LIGHT: "light"
-}, Wr = ({ color: r = "neutral", icon: i, label: o, size: s = "small", sx: l, ...e }) => /* @__PURE__ */ b(
-  L,
+}, Gr = ({ color: r = "neutral", icon: i, label: o, size: s = "small", sx: l, ...e }) => /* @__PURE__ */ b(
+  N,
   {
     component: "span",
     sx: [
@@ -921,7 +904,7 @@ const Gr = ({
     ...e,
     children: [
       i && /* @__PURE__ */ n(
-        L,
+        N,
         {
           "aria-hidden": !0,
           component: "span",
@@ -951,11 +934,11 @@ const Gr = ({
   300: E(r, 0.55),
   400: E(r, 0.3),
   500: r,
-  600: k(r, 0.3),
-  700: k(r, 0.5),
-  800: k(r, 0.65),
-  900: k(r, 0.75)
-}), R = "#FFFFFF", _ = "#000000", Ve = "#F9F9F9", We = "#000000", Ke = "#FFFFFF", Ye = "#000000", C = {
+  600: L(r, 0.3),
+  700: L(r, 0.5),
+  800: L(r, 0.65),
+  900: L(r, 0.75)
+}), R = "#FFFFFF", I = "#000000", Ge = "#F9F9F9", Ve = "#000000", We = "#FFFFFF", Ke = "#000000", C = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -964,14 +947,14 @@ const Gr = ({
   ERROR: "#E32727",
   GREY: "#808080"
 }, y = {
-  CHART1: "#74E4DA",
-  CHART2: "#ED64A4",
+  CHART1: "#14A396",
+  CHART2: "#EC4899",
   CHART3: "#F3DC46",
   CHART4: "#BABFC5",
   CHART5: "#60A9FF",
   CHART6: "#C8BAEE",
   CHART7: "#585E67"
-}, I = {
+}, O = {
   CHART_MONO1: "#C3EAFF",
   CHART_MONO2: "#8ED7FF",
   CHART_MONO3: "#60A9FF",
@@ -1024,13 +1007,13 @@ const Gr = ({
   TRANSFER: "#75C7B7",
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
-}, Xe = (r, i) => {
+}, Ye = (r, i) => {
   const o = M(i?.primary || C.PRIMARY), s = M(i?.secondary || C.SECONDARY), l = M(i?.error || C.ERROR), e = M(i?.warning || C.WARNING), a = M(i?.info || C.INFO), c = M(i?.success || C.SUCCESS), d = M(i?.grey || C.GREY), t = r === S.LIGHT;
   return {
     mode: r,
     common: {
       white: R,
-      black: _
+      black: I
     },
     primary: {
       ...o,
@@ -1055,12 +1038,12 @@ const Gr = ({
       main: t ? d[500] : d[400],
       dark: t ? d[700] : d[200],
       darker: t ? d[800] : d[100],
-      contrastText: ke(t ? d[700] : d[400], "#fff") > 4.5 ? R : d[900]
+      contrastText: Fe(t ? d[700] : d[400], "#fff") > 4.5 ? R : d[900]
     },
     text: {
-      primary: t ? d[900] : R,
-      secondary: t ? d[600] : f(R, 0.7),
-      disabled: t ? d[500] : f(R, 0.38)
+      primary: t ? f(I, 0.87) : R,
+      secondary: t ? f(I, 0.6) : f(R, 0.7),
+      disabled: t ? f(I, 0.38) : f(R, 0.38)
     },
     error: {
       ...l,
@@ -1096,18 +1079,18 @@ const Gr = ({
     },
     grey: d,
     action: {
-      active: t ? f(_, 0.56) : f(R, 0.56),
+      active: t ? f(I, 0.56) : f(R, 0.56),
       hoverOpacity: t ? 0.1 : 0.2,
       selectedOpacity: t ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: t ? i?.background?.default?.light || Ve : i?.background?.default?.dark || We,
-      paper: t ? i?.background?.paper?.light || Ke : i?.background?.paper?.dark || Ye,
+      default: t ? i?.background?.default?.light || Ge : i?.background?.default?.dark || Ve,
+      paper: t ? i?.background?.paper?.light || We : i?.background?.paper?.dark || Ke,
       highlight: t ? d[200] : d[600],
       highlightPrimary: t ? o[100] : o[500]
     },
-    divider: t ? f(_, 0.12) : f(R, 0.24),
+    divider: t ? f(I, 0.12) : f(R, 0.24),
     categories: {
       autoTransport: t ? p.AUTO_TRANSPORTT : u.AUTO_TRANSPORTT,
       billsUtilities: t ? p.BILLS_UTILITIES : u.BILLS_UTILITIES,
@@ -1142,15 +1125,15 @@ const Gr = ({
       chart7: y.CHART7
     },
     chartMono: {
-      chartMono1: I.CHART_MONO1,
-      chartMono2: I.CHART_MONO2,
-      chartMono3: I.CHART_MONO3,
-      chartMono4: I.CHART_MONO4,
-      chartMono5: I.CHART_MONO5,
-      chartMono6: I.CHART_MONO6
+      chartMono1: O.CHART_MONO1,
+      chartMono2: O.CHART_MONO2,
+      chartMono3: O.CHART_MONO3,
+      chartMono4: O.CHART_MONO4,
+      chartMono5: O.CHART_MONO5,
+      chartMono6: O.CHART_MONO6
     }
   };
-}, z = "Inter, Helvetica, Arial, sans-serif", je = (r) => {
+}, z = "Inter, Helvetica, Arial, sans-serif", Xe = (r) => {
   const i = r?.fontFamily ? `${r?.fontFamily}, ${z}` : z, o = r?.headerFontFamily ? `${r.headerFontFamily}, ${z}` : i;
   return {
     fontFamily: i,
@@ -1209,11 +1192,11 @@ const Gr = ({
     }
   };
 };
-Ne.setLicenseKey(
+Le.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
-const Kr = (r, i) => {
-  const o = Xe(r, i?.paletteOptions), s = je(i?.typographyOptions), l = [...G().shadows];
+const Vr = (r, i) => {
+  const o = Ye(r, i?.paletteOptions), s = Xe(i?.typographyOptions), l = [...G().shadows];
   return l[1] = "0px 2px 8px 0 rgba(0, 0, 0, 0.12)", l[8] = "0px 6px 12px 0 rgba(0, 0, 0, 0.16), 0px 3px 8px 0 rgba(0, 0, 0, 0.06)", l[16] = "0px 12px 20px 0 rgba(0, 0, 0, 0.22)", G({
     breakpoints: i?.breakpoints || {
       values: {
@@ -1416,7 +1399,7 @@ const Kr = (r, i) => {
       MuiCircularProgress: {
         styleOverrides: {
           root: {
-            [`& .${Le.circle}`]: {
+            [`& .${ke.circle}`]: {
               strokeLinecap: "round"
             }
           }
@@ -1620,6 +1603,17 @@ const Kr = (r, i) => {
           })
         }
       },
+      MuiInputBase: {
+        styleOverrides: {
+          input: ({ theme: e }) => ({
+            "&::placeholder": {
+              color: e.palette.text.secondary,
+              opacity: 1
+              // MUI dims placeholders by default
+            }
+          })
+        }
+      },
       MuiInputLabel: {
         defaultProps: {
           shrink: !0
@@ -2108,34 +2102,34 @@ const Kr = (r, i) => {
   });
 };
 export {
-  H as BaseIcon,
-  Hr as BottomSheetTransition,
+  D as BaseIcon,
+  Lr as BottomSheetTransition,
   g as CategoryGuids,
-  Pe as CategoryIcon,
-  De as CategoryIconList,
-  He as CategoryIconVariants,
-  Nr as DateRangePicker,
-  $e as DialogFooter,
-  Br as DialogHeader,
-  _r as Drawer,
-  $e as Footer,
-  Ue as H1,
-  Dr as H2,
-  wr as H3,
+  we as CategoryIcon,
+  He as CategoryIconList,
+  Ne as CategoryIconVariants,
+  kr as DateRangePicker,
+  ze as DialogFooter,
+  wr as DialogHeader,
+  Pr as Drawer,
+  ze as Footer,
+  $e as H1,
+  Nr as H2,
+  Hr as H3,
   z as INTER,
   T as Icon,
-  zr as InstitutionLogo,
-  Fr as MXLogoCopyrightIcon,
-  kr as MXLogoFilledIcon,
-  vr as MXLogoIcon,
-  Lr as MXLogoOutlineIcon,
-  $r as MerchantLogo,
-  Pr as P,
-  Vr as SelectionBox,
-  Wr as Tag,
-  v as Text,
-  Ur as TextField,
-  Gr as Toast,
-  Kr as createMXTheme
+  Br as InstitutionLogo,
+  vr as MXLogoCopyrightIcon,
+  Er as MXLogoFilledIcon,
+  Or as MXLogoIcon,
+  Fr as MXLogoOutlineIcon,
+  _r as MerchantLogo,
+  Dr as P,
+  Ur as SelectionBox,
+  Gr as Tag,
+  F as Text,
+  zr as TextField,
+  $r as Toast,
+  Vr as createMXTheme
 };
 //# sourceMappingURL=index.es.js.map