@mxenabled/mxui 2.2.0 → 2.2.2

package/dist/index.es.js

@@ -1,33 +1,36 @@
-import { jsx as a, jsxs as T } from "react/jsx-runtime";
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
 import H from "react";
-import y from "@mui/material/Stack";
-import { useTheme as O, createTheme as oe } from "@mui/material/styles";
-import { Icon as re, Close as ie } from "@mxenabled/mx-icons";
-import { endOfMonth as z } from "date-fns/endOfMonth";
-import { endOfYear as ae } from "date-fns/endOfYear";
-import { startOfToday as ne } from "date-fns/startOfToday";
-import { startOfMonth as $ } from "date-fns/startOfMonth";
-import { startOfYear as U } from "date-fns/startOfYear";
+import A from "@mui/material/Stack";
+import { useTheme as E, createTheme as ne } from "@mui/material/styles";
+import { Icon as le, ExpandMore as se, Close as ce } from "@mxenabled/mx-icons";
+import { endOfMonth as $ } from "date-fns/endOfMonth";
+import { endOfYear as de } from "date-fns/endOfYear";
+import { startOfToday as ue } from "date-fns/startOfToday";
+import { startOfMonth as U } from "date-fns/startOfMonth";
+import { startOfYear as V } from "date-fns/startOfYear";
 import { subDays as G } from "date-fns/subDays";
-import { subMonths as le } from "date-fns/subMonths";
-import { subYears as se } from "date-fns/subYears";
-import ce from "@mui/material/useMediaQuery";
-import { usePickerContext as de, useIsValidValue as ue, LocalizationProvider as pe, StaticDateRangePicker as he } from "@mui/x-date-pickers-pro";
-import { AdapterDateFns as ge } from "@mui/x-date-pickers-pro/AdapterDateFns";
-import K from "@mui/material/Box";
-import fe from "@mui/material/ToggleButton";
-import me from "@mui/material/ToggleButtonGroup";
-import X from "@mui/material/Slide";
+import { subMonths as pe } from "date-fns/subMonths";
+import { subYears as he } from "date-fns/subYears";
+import ge from "@mui/material/useMediaQuery";
+import { usePickerContext as X, useIsValidValue as j, LocalizationProvider as me, StaticDateRangePicker as fe } from "@mui/x-date-pickers-pro";
+import { AdapterDateFns as be } from "@mui/x-date-pickers-pro/AdapterDateFns";
+import { MultiInputDateRangeField as Te } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
+import Z from "@mui/material/Box";
+import xe from "@mui/material/ToggleButton";
+import Re from "@mui/material/ToggleButtonGroup";
+import Me from "@mui/material/MenuItem";
+import Q from "@mui/material/TextField";
+import { usePickerLayout as Ce, PickersLayoutRoot as Se, PickersLayoutContentWrapper as Ae, pickersLayoutClasses as D } from "@mui/x-date-pickers/PickersLayout";
+import J from "@mui/material/Slide";
 import B from "@mui/material/Button";
-import j from "@mui/material/IconButton";
-import be from "@mui/material/Typography";
-import Te from "@mui/material/Drawer";
-import xe from "@mui/material/TextField";
-import Re from "@mui/material/Snackbar";
-import Me from "@mui/material/Alert";
-import { FormControlLabel as Se, Box as k, Typography as V, Radio as w, Checkbox as Ce, alpha as m, darken as N, lighten as I, getContrastRatio as Ae } from "@mui/material";
-import { circularProgressClasses as Ee } from "@mui/material/CircularProgress";
-import { LicenseInfo as Oe } from "@mui/x-license";
+import q from "@mui/material/IconButton";
+import ye from "@mui/material/Typography";
+import Ie from "@mui/material/Drawer";
+import Ee from "@mui/material/Snackbar";
+import Oe from "@mui/material/Alert";
+import { FormControlLabel as Fe, Box as w, Typography as W, Radio as P, Checkbox as ve, alpha as f, darken as N, lighten as O, getContrastRatio as Ne } from "@mui/material";
+import { circularProgressClasses as He } from "@mui/material/CircularProgress";
+import { LicenseInfo as Le } from "@mui/x-license";
 const L = ({
   children: e,
   height: i,
@@ -46,10 +49,10 @@ const L = ({
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
-), x = ({ color: e, fill: i = !1, name: o, size: l = 20, sx: t, ...s }) => /* @__PURE__ */ a(re, { color: e, fill: i, name: o, size: l, sx: t, ...s }), bt = ({
+), x = ({ color: e, fill: i = !1, name: o, size: l = 20, sx: t, ...s }) => /* @__PURE__ */ a(le, { color: e, fill: i, name: o, size: l, sx: t, ...s }), Ft = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ T(L, { ...i, children: [
+}) => /* @__PURE__ */ b(L, { ...i, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -64,10 +67,10 @@ const L = ({
       fill: e
     }
   )
-] }), Tt = ({
+] }), vt = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ T(L, { ...i, children: [
+}) => /* @__PURE__ */ b(L, { ...i, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -100,7 +103,7 @@ const L = ({
       fillRule: "evenodd"
     }
   )
-] }), xt = ({
+] }), Nt = ({
   color: e = "currentColor",
   ...i
 }) => /* @__PURE__ */ a(L, { ...i, children: /* @__PURE__ */ a(
@@ -111,10 +114,10 @@ const L = ({
     fill: e,
     fillRule: "evenodd"
   }
-) }), Rt = ({
+) }), Ht = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ T(L, { ...i, children: [
+}) => /* @__PURE__ */ b(L, { ...i, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -139,12 +142,12 @@ const L = ({
     }
   )
 ] });
-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 || {}), Ie = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(Ie || {});
-const Z = {
+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 || {}), ke = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(ke || {});
+const ee = {
   guid: g.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
-}, ye = [
+}, De = [
   {
     guid: g.AutoTransport,
     colorName: "autoTransport",
@@ -245,29 +248,29 @@ const Z = {
     colorName: "travel",
     icon: "airplane_ticket"
   },
-  Z
-], Fe = 0.625, ve = ({
+  ee
+], we = 0.625, Pe = ({
   categoryGuid: e,
-  icon_ratio: i = Fe,
+  icon_ratio: i = we,
   size: o = 32,
   sx: l = {},
   variant: t = "filled"
 }) => {
-  const s = O(), n = H.useMemo(
-    () => ye.find((u) => u.guid === e) ?? Z,
+  const s = E(), n = H.useMemo(
+    () => De.find((u) => u.guid === e) ?? ee,
     [e]
-  ), d = s.palette.categories[n.colorName];
+  ), c = s.palette.categories[n.colorName];
   return /* @__PURE__ */ a(
-    y,
+    A,
     {
       alignItems: "center",
       bgcolor: () => {
-        let u = d;
+        let u = c;
         return t === "twotone" && (u = `${u}20`), t === "transparent" || t === "basic" ? "transparent" : u;
       },
       borderRadius: 1,
       color: () => {
-        const u = t === "filled" ? s.palette.common.white : d;
+        const u = t === "filled" ? s.palette.common.white : c;
         return t === "basic" ? s.palette.text.primary : u;
       },
       height: o,
@@ -277,19 +280,19 @@ const Z = {
       children: /* @__PURE__ */ a(x, { name: n.icon, size: o * i })
     }
   );
-}, Ne = ({ items: e, selected: i }) => {
-  const o = O(), { setValue: l } = de(), t = ue(), s = e?.map((n) => {
-    const d = n.getValue({ isValid: t });
+}, _e = ({ items: e, selected: i }) => {
+  const o = E(), { setValue: l } = X(), t = j(), s = e?.map((n) => {
+    const c = n.getValue({ isValid: t });
     return {
       label: n.label,
       onClick: () => {
-        l(d, { changeImportance: "accept", shortcut: n });
+        l(c, { changeImportance: "accept", shortcut: n });
       },
-      disabled: !t(d)
+      disabled: !t(c)
     };
   });
-  return /* @__PURE__ */ a(K, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(me, { color: "primary", orientation: "vertical", value: i, children: s?.map((n) => /* @__PURE__ */ a(
-    fe,
+  return /* @__PURE__ */ a(Z, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Re, { color: "primary", orientation: "vertical", value: i, children: s?.map((n) => /* @__PURE__ */ a(
+    xe,
     {
       onClick: n.onClick,
       sx: {
@@ -316,23 +319,88 @@ const Z = {
     },
     n.label
   )) }) });
-}, Mt = ({
+}, Be = ({
+  items: e,
+  selected: i,
+  selectLabel: o
+}) => {
+  const { setValue: l } = X(), t = j(), s = e?.map((n) => {
+    const c = n.getValue({ isValid: t });
+    return {
+      label: n.label,
+      onClick: () => {
+        l(c, { changeImportance: "accept", shortcut: n });
+      },
+      disabled: !t(c)
+    };
+  });
+  return /* @__PURE__ */ a(A, { sx: { py: 16 }, children: /* @__PURE__ */ a(
+    Q,
+    {
+      defaultValue: i,
+      id: "select",
+      label: o,
+      select: !0,
+      slotProps: { inputLabel: { shrink: !0 }, select: { IconComponent: se } },
+      sx: { width: "100%" },
+      value: i,
+      variant: "outlined",
+      children: s?.map((n) => /* @__PURE__ */ a(Me, { onClick: n.onClick, value: n.label, children: n.label }, n.label))
+    }
+  ) });
+}, ze = (e) => {
+  const { toolbar: i, content: o, shortcuts: l, ownerState: t } = Ce(e);
+  return /* @__PURE__ */ b(
+    Se,
+    {
+      ownerState: t,
+      sx: {
+        gridTemplateColumns: "minmax(320px, 1fr)",
+        overflow: "auto",
+        p: 0,
+        [`.${D.toolbar}`]: {
+          gridColumn: 1,
+          gridRow: 2
+        },
+        [`.${D.contentWrapper}`]: {
+          alignItems: "center",
+          gridColumn: 1,
+          gridRow: 3
+        }
+      },
+      children: [
+        /* @__PURE__ */ b(A, { sx: { gridColumn: 1, gridRow: 1, p: 16 }, children: [
+          l,
+          i
+        ] }),
+        /* @__PURE__ */ a(
+          Ae,
+          {
+            className: D.contentWrapper,
+            ownerState: t,
+            children: o
+          }
+        )
+      ]
+    }
+  );
+}, Lt = ({
   copy: e,
   dateRange: i,
   onRangeChanged: o,
   selectedShortcut: l = e.dateRangeThisMonth,
   sx: t = {}
 }) => {
-  const s = O(), n = ce(s.breakpoints.down("sm")), d = H.useMemo(() => {
-    const r = ne(), u = le(r, 1), b = se(r, 1);
+  const s = E(), n = ge(s.breakpoints.down("sm")), c = H.useMemo(() => {
+    const r = ue(), u = pe(r, 1), T = he(r, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [$(r), z(r)]
+        getValue: () => [U(r), $(r)]
       },
       {
         label: e.dateRangeLastMonth,
-        getValue: () => [$(u), z(u)]
+        getValue: () => [U(u), $(u)]
       },
       {
         label: e.dateRangeLast30Days,
@@ -344,23 +412,23 @@ const Z = {
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [U(r), r]
+        getValue: () => [V(r), r]
       },
       {
         label: e.dateRangeLastYear,
-        getValue: () => [U(b), ae(b)]
+        getValue: () => [V(T), de(T)]
       },
       {
         label: e.dateRangeCustom,
         getValue: () => [r, r]
       }
     ];
-  }, [e]), c = (r, u) => {
-    const b = u.shortcut;
-    o?.(r, b ? b.label : e.dateRangeCustom);
+  }, [e]), d = (r, u) => {
+    const T = u.shortcut;
+    o?.(r, T ? T.label : e.dateRangeCustom);
   };
-  return /* @__PURE__ */ a(y, { gap: 16, m: 8, children: /* @__PURE__ */ a(pe, { dateAdapter: ge, children: /* @__PURE__ */ a(
-    he,
+  return /* @__PURE__ */ a(A, { gap: n ? 0 : 16, m: n ? 0 : 8, children: /* @__PURE__ */ a(me, { dateAdapter: be, children: /* @__PURE__ */ a(
+    fe,
     {
       calendars: 1,
       localeText: {
@@ -368,29 +436,53 @@ const Z = {
         end: e.dateRangeTo,
         toolbarTitle: e.dateRangeToolbarTitle
       },
-      onChange: c,
+      onChange: d,
       showDaysOutsideCurrentMonth: !0,
       slotProps: {
         actionBar: { actions: [] },
         shortcuts: {
-          items: n ? [] : d
+          items: c
         },
         toolbar: {
           toolbarFormat: "MMM d, yyyy"
         }
       },
       slots: {
+        ...n && { layout: ze },
         leftArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_left", size: 28 }),
-        shortcuts: (r) => /* @__PURE__ */ a(Ne, { selected: l, ...r }),
-        rightArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_right", size: 28 })
+        shortcuts: (r) => n ? /* @__PURE__ */ a(
+          Be,
+          {
+            selectLabel: e.dateRangeSelectARange,
+            selected: l,
+            ...r
+          }
+        ) : /* @__PURE__ */ a(_e, { selected: l, ...r }),
+        rightArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_right", size: 28 }),
+        ...n && {
+          toolbar: (r) => /* @__PURE__ */ a(
+            Te,
+            {
+              dateSeparator: "",
+              format: "MM/dd/yyyy",
+              ...r,
+              slotProps: {
+                textField: ({ position: u }) => ({
+                  label: u === "start" ? e.dateRangeFrom : e.dateRangeTo
+                })
+              },
+              sx: { gap: 8 }
+            }
+          )
+        }
       },
       sx: { ...t },
       value: i
     }
   ) }) });
-}, St = H.forwardRef(function(i, o) {
-  return /* @__PURE__ */ a(X, { direction: "up", ref: o, ...i });
-}), He = ({
+}, kt = H.forwardRef(function(i, o) {
+  return /* @__PURE__ */ a(J, { direction: "up", ref: o, ...i });
+}), $e = ({
   hasSecondaryAction: e = !0,
   isPrimaryDisabled: i,
   onPrimaryAction: o,
@@ -398,9 +490,9 @@ const Z = {
   primaryColor: t = "primary",
   primaryText: s = "Save",
   secondaryColor: n = "primary",
-  secondaryText: d = "Cancel"
-}) => /* @__PURE__ */ T(
-  y,
+  secondaryText: c = "Cancel"
+}) => /* @__PURE__ */ b(
+  A,
   {
     direction: "row",
     gap: 16,
@@ -413,7 +505,7 @@ const Z = {
           color: n,
           onClick: l,
           variant: o ? "outlined" : "contained",
-          children: d
+          children: c
         }
       ),
       o && /* @__PURE__ */ a(
@@ -436,9 +528,9 @@ const Z = {
   sx: t = {},
   truncate: s,
   uppercase: n,
-  ...d
+  ...c
 }) => /* @__PURE__ */ a(
-  be,
+  ye,
   {
     className: `mx-kmui-text ${i}`,
     color: l,
@@ -456,11 +548,11 @@ const Z = {
       } : {},
       ...Array.isArray(t) ? t : [t]
     ],
-    ...d,
+    ...c,
     children: o
   }
-), Le = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...o, children: i }), Ct = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...o, children: i }), At = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...o, children: i }), Et = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...o, children: i }), Ot = ({ copy: e, onClose: i }) => /* @__PURE__ */ T(
-  y,
+), Ue = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...o, children: i }), Dt = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...o, children: i }), wt = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...o, children: i }), Pt = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...o, children: i }), _t = ({ copy: e, onClose: i }) => /* @__PURE__ */ b(
+  A,
   {
     sx: {
       alignItems: "center",
@@ -470,11 +562,11 @@ const Z = {
       py: 14
     },
     children: [
-      /* @__PURE__ */ a(Le, { variant: "h3", children: e.title }),
-      /* @__PURE__ */ a(j, { "aria-label": e.close_aria, onClick: i, sx: { mr: -12 }, children: /* @__PURE__ */ a(ie, {}) })
+      /* @__PURE__ */ a(Ue, { variant: "h3", children: e.title }),
+      /* @__PURE__ */ a(q, { "aria-label": e.close_aria, onClick: i, sx: { mr: -12 }, children: /* @__PURE__ */ a(ce, {}) })
     ]
   }
-), It = ({
+), Bt = ({
   className: e,
   disableSave: i,
   id: o,
@@ -482,11 +574,11 @@ const Z = {
   onClose: t,
   onSave: s,
   primaryText: n,
-  secondaryText: d,
-  children: c,
+  secondaryText: c,
+  children: d,
   ...r
-}) => /* @__PURE__ */ T(
-  Te,
+}) => /* @__PURE__ */ b(
+  Ie,
   {
     anchor: "right",
     className: `mx-kmui-drawer ${e}`,
@@ -496,24 +588,24 @@ const Z = {
     variant: "temporary",
     ...r,
     children: [
-      c,
+      d,
       s && /* @__PURE__ */ a(
-        He,
+        $e,
         {
           isPrimaryDisabled: i,
           onPrimaryAction: s,
           onSecondaryAction: t,
           primaryText: n,
-          secondaryText: d
+          secondaryText: c
         }
       )
     ]
   }
-), Q = 32, P = "https://content.moneydesktop.com/storage/MD_Assets", W = `${P}/serenity/default_institution_logo.png`, yt = ({
+), te = 32, z = "https://content.moneydesktop.com/storage/MD_Assets", Y = `${z}/serenity/default_institution_logo.png`, zt = ({
   alt: e,
   institutionGuid: i,
   logoUrl: o,
-  size: l = Q,
+  size: l = te,
   ...t
 }) => /* @__PURE__ */ a(
   "img",
@@ -522,24 +614,24 @@ const Z = {
     height: l,
     onError: (s) => {
       const n = s.target;
-      n.src !== W && (n.src = W);
+      n.src !== Y && (n.src = Y);
     },
-    src: o || `${P}/Ipad%20Logos/100x100/${i}_100x100.png`,
+    src: o || `${z}/Ipad%20Logos/100x100/${i}_100x100.png`,
     style: {
       borderRadius: 4
     },
     width: l,
     ...t
   }
-), Ft = ({
+), $t = ({
   alt: e = "",
   categoryGuid: i,
   merchantGuid: o,
-  size: l = Q,
+  size: l = te,
   ...t
 }) => {
-  const [s, n] = H.useState(!1), d = O();
-  return /* @__PURE__ */ T(K, { display: "inline-block", position: "relative", ...t, children: [
+  const [s, n] = H.useState(!1), c = E();
+  return /* @__PURE__ */ b(Z, { display: "inline-block", position: "relative", ...t, children: [
     o && !s && /* @__PURE__ */ a(
       "img",
       {
@@ -547,9 +639,9 @@ const Z = {
         "aria-hidden": !e,
         height: l,
         onError: () => n(!0),
-        src: `${P}/merchant_logos/${o}.png`,
+        src: `${z}/merchant_logos/${o}.png`,
         style: {
-          backgroundColor: d.palette.common.white,
+          backgroundColor: c.palette.common.white,
           borderRadius: 4,
           boxSizing: "border-box",
           position: "absolute"
@@ -557,16 +649,16 @@ const Z = {
         width: l
       }
     ),
-    /* @__PURE__ */ a(ve, { categoryGuid: i, size: l })
+    /* @__PURE__ */ a(Pe, { categoryGuid: i, size: l })
   ] });
-}, vt = ({
+}, Ut = ({
   disabled: e = !1,
   label: i = "",
   shrink: o = !0,
   variant: l = "outlined",
   ...t
 }) => /* @__PURE__ */ a(
-  xe,
+  Q,
   {
     InputLabelProps: {
       shrink: o
@@ -577,10 +669,10 @@ const Z = {
     ...t
   }
 );
-function De(e) {
-  return /* @__PURE__ */ a(X, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
+function Ve(e) {
+  return /* @__PURE__ */ a(J, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
-const Nt = ({
+const Vt = ({
   open: e,
   handleClose: i,
   message: o,
@@ -588,19 +680,19 @@ const Nt = ({
   severity: t = "success",
   snackbarSx: s,
   showAction: n = !1,
-  showClose: d = !1,
-  actionText: c = "Undo",
+  showClose: c = !1,
+  actionText: d = "Undo",
   onActionClick: r,
   multiLine: u = !1
 }) => {
-  const b = O(), v = /* @__PURE__ */ T(
-    y,
+  const T = E(), v = /* @__PURE__ */ b(
+    A,
     {
       alignItems: u ? "flex-end" : "center",
       direction: u ? "column-reverse" : "row",
       justifyContent: (
         // eslint-disable-next-line no-nested-ternary
-        u && n && d ? "space-between" : "flex-end"
+        u && n && c ? "space-between" : "flex-end"
       ),
       children: [
         n && /* @__PURE__ */ a(
@@ -610,14 +702,14 @@ const Nt = ({
             onClick: r || i,
             size: "small",
             sx: {
-              color: b.palette.success.contrastText,
+              color: T.palette.success.contrastText,
               height: 44
             },
-            children: c
+            children: d
           }
         ),
-        d && /* @__PURE__ */ a(
-          j,
+        c && /* @__PURE__ */ a(
+          q,
           {
             "aria-label": "close",
             color: "inherit",
@@ -630,9 +722,9 @@ const Nt = ({
     }
   );
   return /* @__PURE__ */ a(
-    Re,
+    Ee,
     {
-      TransitionComponent: De,
+      TransitionComponent: Ve,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       autoHideDuration: l,
       onClose: i,
@@ -642,14 +734,14 @@ const Nt = ({
         width: u ? 400 : 325
       },
       children: /* @__PURE__ */ a(
-        Me,
+        Oe,
         {
           action: v,
           severity: t,
           sx: {
             display: "flex",
             alignItems: "stretch",
-            minHeight: d && n && u ? 120 : 56,
+            minHeight: c && n && u ? 120 : 56,
             maxHeight: u ? 120 : 56,
             width: "100%",
             "& .MuiAlert-icon": {
@@ -670,7 +762,7 @@ const Nt = ({
             F,
             {
               sx: {
-                lineHeight: b.typography.body1.lineHeight,
+                lineHeight: T.typography.body1.lineHeight,
                 whiteSpace: u ? "normal" : "nowrap",
                 overflow: u ? "visible" : "hidden",
                 textOverflow: u ? "clip" : "ellipsis"
@@ -683,28 +775,28 @@ const Nt = ({
       )
     }
   );
-}, Ht = ({
-  component: e = w,
+}, Gt = ({
+  component: e = P,
   variant: i = "outlined",
   selected: o,
   onChange: l,
   headline: t,
   message: s,
   name: n,
-  value: d,
-  disabled: c = !1,
+  value: c,
+  disabled: d = !1,
   error: r = !1,
   icon: u = !1,
-  sx: b = {},
+  sx: T = {},
   ...v
 }) => {
-  const f = O(), J = () => f.palette.background.paper, D = () => r ? `inset 0px 0px 0px 2px ${f.palette.error.main}` : c ? o ? `inset 0px 0px 0px 2px ${f.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${f.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${f.palette.action.disabled}` : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${m(f.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(f.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${m(f.palette.primary.main, 0.5)}` : f.shadows[1], q = () => c || r ? f.palette.background.paper : m(f.palette.primary.main, 0.1), ee = () => c || r ? D() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${m(f.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${m(f.palette.primary.main, 0.5)}` : D(), te = () => c || r ? f.palette.background.paper : m(f.palette.primary.main, 0.3);
+  const m = E(), oe = () => m.palette.background.paper, k = () => r ? `inset 0px 0px 0px 2px ${m.palette.error.main}` : d ? o ? `inset 0px 0px 0px 2px ${m.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${m.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${m.palette.action.disabled}` : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(m.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(m.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${f(m.palette.primary.main, 0.5)}` : m.shadows[1], re = () => d || r ? m.palette.background.paper : f(m.palette.primary.main, 0.1), ie = () => d || r ? k() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(m.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(m.palette.primary.main, 0.5)}` : k(), ae = () => d || r ? m.palette.background.paper : f(m.palette.primary.main, 0.3);
   return /* @__PURE__ */ a(
-    Se,
+    Fe,
     {
       checked: o,
-      control: e === w ? /* @__PURE__ */ a(
-        w,
+      control: e === P ? /* @__PURE__ */ a(
+        P,
         {
           name: n,
           sx: {
@@ -719,7 +811,7 @@ const Nt = ({
           ...v
         }
       ) : /* @__PURE__ */ a(
-        Ce,
+        ve,
         {
           name: n,
           sx: {
@@ -734,12 +826,12 @@ const Nt = ({
           ...v
         }
       ),
-      disabled: c,
-      label: /* @__PURE__ */ T(k, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
-        u && /* @__PURE__ */ a(k, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: u }),
-        /* @__PURE__ */ T(k, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
-          t && /* @__PURE__ */ a(V, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: t }),
-          /* @__PURE__ */ a(V, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: s })
+      disabled: d,
+      label: /* @__PURE__ */ b(w, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
+        u && /* @__PURE__ */ a(w, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: u }),
+        /* @__PURE__ */ b(w, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
+          t && /* @__PURE__ */ a(W, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: t }),
+          /* @__PURE__ */ a(W, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: s })
         ] })
       ] }),
       labelPlacement: "start",
@@ -749,47 +841,47 @@ const Nt = ({
         padding: "6px 16px",
         alignItems: "flex-start",
         justifyContent: "space-between",
-        borderRadius: f.shape.borderRadius / 2,
+        borderRadius: m.shape.borderRadius / 2,
         mb: 16,
-        cursor: c ? "not-allowed" : "pointer",
-        opacity: c ? 0.6 : 1,
-        backgroundColor: J(),
+        cursor: d ? "not-allowed" : "pointer",
+        opacity: d ? 0.6 : 1,
+        backgroundColor: oe(),
         border: "none",
-        boxShadow: D(),
+        boxShadow: k(),
         boxSizing: "border-box",
-        transition: f.transitions.create(["background-color", "box-shadow"], {
-          duration: f.transitions.duration.short
+        transition: m.transitions.create(["background-color", "box-shadow"], {
+          duration: m.transitions.duration.short
         }),
         "&:hover": {
-          backgroundColor: q(),
-          boxShadow: ee()
+          backgroundColor: re(),
+          boxShadow: ie()
         },
         "&:active": {
-          backgroundColor: te()
+          backgroundColor: ae()
         },
         "&:focus-visible": {
-          outline: `2px solid ${f.palette.info.main}`,
+          outline: `2px solid ${m.palette.info.main}`,
           outlineOffset: "2px"
         },
-        ...b
+        ...T
       },
-      value: d
+      value: c
     }
   );
-}, E = {
+}, I = {
   LIGHT: "light"
 }, R = (e) => ({
-  50: I(e, 0.95),
-  100: I(e, 0.85),
-  200: I(e, 0.7),
-  300: I(e, 0.55),
-  400: I(e, 0.3),
+  50: O(e, 0.95),
+  100: O(e, 0.85),
+  200: O(e, 0.7),
+  300: O(e, 0.55),
+  400: O(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)
-}), M = "#FFFFFF", _ = "#000000", ke = "#F9F9F9", we = "#000000", _e = "#FFFFFF", Be = "#000000", S = {
+}), M = "#FFFFFF", _ = "#000000", Ge = "#F9F9F9", We = "#000000", Ye = "#FFFFFF", Ke = "#000000", C = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -797,7 +889,7 @@ const Nt = ({
   WARNING: "#FF7B00",
   ERROR: "#E32727",
   GREY: "#808080"
-}, C = {
+}, S = {
   CHART1: "#74E4DA",
   CHART2: "#ED64A4",
   CHART3: "#F3DC46",
@@ -805,7 +897,7 @@ const Nt = ({
   CHART5: "#60A9FF",
   CHART6: "#C8BAEE",
   CHART7: "#585E67"
-}, A = {
+}, y = {
   CHART_MONO1: "#C3EAFF",
   CHART_MONO2: "#8ED7FF",
   CHART_MONO3: "#60A9FF",
@@ -858,8 +950,8 @@ const Nt = ({
   TRANSFER: "#75C7B7",
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
-}, Pe = (e, i) => {
-  const o = R(i?.primary || S.PRIMARY), l = R(i?.secondary || S.SECONDARY), t = R(i?.error || S.ERROR), s = R(i?.warning || S.WARNING), n = R(i?.info || S.INFO), d = R(i?.success || S.SUCCESS), c = R(i?.grey || S.GREY), r = e === E.LIGHT;
+}, Xe = (e, i) => {
+  const o = R(i?.primary || C.PRIMARY), l = R(i?.secondary || C.SECONDARY), t = R(i?.error || C.ERROR), s = R(i?.warning || C.WARNING), n = R(i?.info || C.INFO), c = R(i?.success || C.SUCCESS), d = R(i?.grey || C.GREY), r = e === I.LIGHT;
   return {
     mode: e,
     common: {
@@ -879,16 +971,16 @@ const Nt = ({
       dark: r ? l[700] : l[200]
     },
     neutral: {
-      ...c,
-      light: r ? c[300] : c[600],
-      main: r ? c[500] : c[400],
-      dark: r ? c[700] : c[200],
-      contrastText: Ae(r ? c[700] : c[400], "#fff") > 4.5 ? M : c[900]
+      ...d,
+      light: r ? d[300] : d[600],
+      main: r ? d[500] : d[400],
+      dark: r ? d[700] : d[200],
+      contrastText: Ne(r ? d[700] : d[400], "#fff") > 4.5 ? M : d[900]
     },
     text: {
-      primary: r ? c[900] : M,
-      secondary: r ? c[600] : m(M, 0.7),
-      disabled: r ? c[500] : m(M, 0.38)
+      primary: r ? d[900] : M,
+      secondary: r ? d[600] : f(M, 0.7),
+      disabled: r ? d[500] : f(M, 0.38)
     },
     error: {
       ...t,
@@ -909,25 +1001,25 @@ const Nt = ({
       dark: r ? n[700] : n[200]
     },
     success: {
-      ...d,
-      light: r ? d[300] : d[600],
-      main: r ? d[500] : d[400],
-      dark: r ? d[700] : d[200]
+      ...c,
+      light: r ? c[300] : c[600],
+      main: r ? c[500] : c[400],
+      dark: r ? c[700] : c[200]
     },
-    grey: c,
+    grey: d,
     action: {
-      active: r ? m(_, 0.56) : m(M, 0.56),
+      active: r ? f(_, 0.56) : f(M, 0.56),
       hoverOpacity: r ? 0.1 : 0.2,
       selectedOpacity: r ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: r ? i?.background?.default?.light || ke : i?.background?.default?.dark || we,
-      paper: r ? i?.background?.paper?.light || _e : i?.background?.paper?.dark || Be,
-      highlight: r ? c[200] : c[600],
+      default: r ? i?.background?.default?.light || Ge : i?.background?.default?.dark || We,
+      paper: r ? i?.background?.paper?.light || Ye : i?.background?.paper?.dark || Ke,
+      highlight: r ? d[200] : d[600],
       highlightPrimary: r ? o[100] : o[500]
     },
-    divider: r ? m(_, 0.12) : m(M, 0.24),
+    divider: r ? f(_, 0.12) : f(M, 0.24),
     categories: {
       autoTransport: r ? p.AUTO_TRANSPORTT : h.AUTO_TRANSPORTT,
       billsUtilities: r ? p.BILLS_UTILITIES : h.BILLS_UTILITIES,
@@ -953,25 +1045,25 @@ const Nt = ({
       uncategorized: r ? p.UNCATEGORIZED : h.UNCATEGORIZED
     },
     chart: {
-      chart1: C.CHART1,
-      chart2: C.CHART2,
-      chart3: C.CHART3,
-      chart4: C.CHART4,
-      chart5: C.CHART5,
-      chart6: C.CHART6,
-      chart7: C.CHART7
+      chart1: S.CHART1,
+      chart2: S.CHART2,
+      chart3: S.CHART3,
+      chart4: S.CHART4,
+      chart5: S.CHART5,
+      chart6: S.CHART6,
+      chart7: S.CHART7
     },
     chartMono: {
-      chartMono1: A.CHART_MONO1,
-      chartMono2: A.CHART_MONO2,
-      chartMono3: A.CHART_MONO3,
-      chartMono4: A.CHART_MONO4,
-      chartMono5: A.CHART_MONO5,
-      chartMono6: A.CHART_MONO6
+      chartMono1: y.CHART_MONO1,
+      chartMono2: y.CHART_MONO2,
+      chartMono3: y.CHART_MONO3,
+      chartMono4: y.CHART_MONO4,
+      chartMono5: y.CHART_MONO5,
+      chartMono6: y.CHART_MONO6
     }
   };
-}, Y = "Inter, Helvetica, Arial, sans-serif", ze = (e) => {
-  const i = e?.fontFamily ? `${e?.fontFamily}, ${Y}` : Y;
+}, K = "Inter, Helvetica, Arial, sans-serif", je = (e) => {
+  const i = e?.fontFamily ? `${e?.fontFamily}, ${K}` : K;
   return {
     fontFamily: i,
     fontSize: 15,
@@ -1030,12 +1122,12 @@ const Nt = ({
     ...e
   };
 };
-Oe.setLicenseKey(
+Le.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
-const Lt = (e, i) => {
-  const o = Pe(e, i?.paletteOptions), l = ze(i?.typographyOptions);
-  return oe({
+const Wt = (e, i) => {
+  const o = Xe(e, i?.paletteOptions), l = je(i?.typographyOptions);
+  return ne({
     breakpoints: {
       values: {
         xs: 444,
@@ -1067,13 +1159,13 @@ const Lt = (e, i) => {
         styleOverrides: {
           root: ({ theme: t, ownerState: s }) => {
             const n = s.severity || "info";
-            let d = t.palette.mode === E.LIGHT ? t.palette[n]?.[50] : t.palette[n]?.[800];
+            let c = t.palette.mode === I.LIGHT ? t.palette[n]?.[50] : t.palette[n]?.[800];
             if (s.variant === "filled") {
-              const c = n === "warning";
-              d = t.palette[n]?.[c ? 400 : 600];
+              const d = n === "warning";
+              c = t.palette[n]?.[d ? 400 : 600];
             }
             return {
-              backgroundColor: d,
+              backgroundColor: c,
               borderRadius: t.shape.borderRadius,
               "& .MuiAlert-message": {
                 fontSize: t.typography.subtitle1.fontSize,
@@ -1155,7 +1247,7 @@ const Lt = (e, i) => {
       MuiCircularProgress: {
         styleOverrides: {
           root: {
-            [`& .${Ee.circle}`]: {
+            [`& .${He.circle}`]: {
               strokeLinecap: "round"
             }
           }
@@ -1378,7 +1470,7 @@ const Lt = (e, i) => {
               backgroundColor: t.palette.action.hover
             },
             "&:active": {
-              backgroundColor: t.palette.mode === E.LIGHT ? t.palette[s].light : t.palette[s].dark
+              backgroundColor: t.palette.mode === I.LIGHT ? t.palette[s].light : t.palette[s].dark
             }
           })
         }
@@ -1701,7 +1793,7 @@ const Lt = (e, i) => {
               outlineOffset: "2px"
             },
             "&:hover": {
-              backgroundColor: m(o.primary.main, o.mode === E.LIGHT ? 0.1 : 0.2),
+              backgroundColor: f(o.primary.main, o.mode === I.LIGHT ? 0.1 : 0.2),
               borderColor: o.primary.main
             },
             "&.Mui-selected": {
@@ -1725,7 +1817,7 @@ const Lt = (e, i) => {
             props: { color: "error" },
             style: {
               "&:hover": {
-                backgroundColor: m(o.error.main, o.mode === E.LIGHT ? 0.1 : 0.2),
+                backgroundColor: f(o.error.main, o.mode === I.LIGHT ? 0.1 : 0.2),
                 borderColor: o.error.main
               },
               "&.Mui-selected": {
@@ -1747,9 +1839,9 @@ const Lt = (e, i) => {
             props: { color: "standard" },
             style: {
               "&:hover": {
-                backgroundColor: m(
+                backgroundColor: f(
                   o.secondary.main,
-                  o.mode === E.LIGHT ? 0.1 : 0.2
+                  o.mode === I.LIGHT ? 0.1 : 0.2
                 ),
                 borderColor: o.secondary.main
               },
@@ -1790,32 +1882,32 @@ const Lt = (e, i) => {
 };
 export {
   L as BaseIcon,
-  St as BottomSheetTransition,
+  kt as BottomSheetTransition,
   g as CategoryGuids,
-  ve as CategoryIcon,
-  ye as CategoryIconList,
-  Ie as CategoryIconVariants,
-  Mt as DateRangePicker,
-  He as DialogFooter,
-  Ot as DialogHeader,
-  It as Drawer,
-  He as Footer,
-  Le as H1,
-  Ct as H2,
-  At as H3,
-  Y as INTER,
+  Pe as CategoryIcon,
+  De as CategoryIconList,
+  ke as CategoryIconVariants,
+  Lt as DateRangePicker,
+  $e as DialogFooter,
+  _t as DialogHeader,
+  Bt as Drawer,
+  $e as Footer,
+  Ue as H1,
+  Dt as H2,
+  wt as H3,
+  K as INTER,
   x as Icon,
-  yt as InstitutionLogo,
-  Tt as MXLogoCopyrightIcon,
-  xt as MXLogoFilledIcon,
-  bt as MXLogoIcon,
-  Rt as MXLogoOutlineIcon,
-  Ft as MerchantLogo,
-  Et as P,
-  Ht as SelectionBox,
+  zt as InstitutionLogo,
+  vt as MXLogoCopyrightIcon,
+  Nt as MXLogoFilledIcon,
+  Ft as MXLogoIcon,
+  Ht as MXLogoOutlineIcon,
+  $t as MerchantLogo,
+  Pt as P,
+  Gt as SelectionBox,
   F as Text,
-  vt as TextField,
-  Nt as Toast,
-  Lt as createMXTheme
+  Ut as TextField,
+  Vt as Toast,
+  Wt as createMXTheme
 };
 //# sourceMappingURL=index.es.js.map