@mxenabled/mxui 2.5.4-alpha.al0 → 2.6.1

package/dist/index.es.js

@@ -1,43 +1,43 @@
-import { jsx as a, jsxs as b } from "react/jsx-runtime";
-import k from "react";
+import { jsx as n, jsxs as b } from "react/jsx-runtime";
+import N from "react";
 import A from "@mui/material/Stack";
-import { useTheme as I, createTheme as U } from "@mui/material/styles";
-import { Icon as le, ExpandMore as se, Close as ce } from "@mxenabled/mx-icons";
-import { endOfMonth as G } from "date-fns/endOfMonth";
-import { endOfYear as de } from "date-fns/endOfYear";
+import { useTheme as O, 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";
 import { startOfToday as ue } from "date-fns/startOfToday";
-import { startOfMonth as V } from "date-fns/startOfMonth";
-import { startOfYear as W } from "date-fns/startOfYear";
+import { startOfMonth as W } from "date-fns/startOfMonth";
+import { startOfYear as K } from "date-fns/startOfYear";
 import { subDays as Y } from "date-fns/subDays";
-import { subMonths as pe } from "date-fns/subMonths";
+import { subMonths as ge } from "date-fns/subMonths";
 import { subYears as he } from "date-fns/subYears";
-import ge from "@mui/material/useMediaQuery";
-import { usePickerContext as X, useIsValidValue as Z, 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 xe } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
-import Q from "@mui/material/Box";
-import Te from "@mui/material/ToggleButton";
+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 { AdapterDateFns as xe } from "@mui/x-date-pickers-pro/AdapterDateFns";
+import { MultiInputDateRangeField as Te } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
+import k from "@mui/material/Box";
+import Me from "@mui/material/ToggleButton";
 import Re from "@mui/material/ToggleButtonGroup";
-import Me from "@mui/material/MenuItem";
+import Ce from "@mui/material/MenuItem";
 import J from "@mui/material/TextField";
-import { usePickerLayout as Ce, PickersLayoutRoot as Se, PickersLayoutContentWrapper as Ae, pickersLayoutClasses as D } from "@mui/x-date-pickers/PickersLayout";
+import { usePickerLayout as Se, PickersLayoutRoot as ye, PickersLayoutContentWrapper as Ae, pickersLayoutClasses as w } from "@mui/x-date-pickers/PickersLayout";
 import q from "@mui/material/Slide";
-import z from "@mui/material/Button";
+import $ from "@mui/material/Button";
 import ee from "@mui/material/IconButton";
-import ye from "@mui/material/Typography";
+import re 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 K, Radio as P, Checkbox as Le, alpha as f, darken as v, lighten as E, getContrastRatio as ve } from "@mui/material";
+import Oe from "@mui/material/Snackbar";
+import Ee from "@mui/material/Alert";
+import { FormControlLabel as Fe, Box as P, Typography as X, Radio as B, Checkbox as ve, alpha as f, darken as L, lighten as E, getContrastRatio as Le } from "@mui/material";
 import { circularProgressClasses as ke } from "@mui/material/CircularProgress";
 import { LicenseInfo as Ne } from "@mui/x-license";
-const N = ({
+const H = ({
   children: e,
   height: i,
   size: o = 16,
   viewBox: s = "0 0 16 16",
-  width: n
-}) => /* @__PURE__ */ a(
+  width: l
+}) => /* @__PURE__ */ n(
   "svg",
   {
     "aria-hidden": !0,
@@ -45,47 +45,47 @@ const N = ({
     focusable: !1,
     height: i || o,
     viewBox: s,
-    width: n || o,
+    width: l || o,
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
-), T = ({ color: e, fill: i = !1, name: o, size: s = 20, sx: n, ...r }) => /* @__PURE__ */ a(le, { color: e, fill: i, name: o, size: s, sx: n, ...r }), Fr = ({
+), T = ({ color: e, fill: i = !1, name: o, size: s = 20, sx: l, ...r }) => /* @__PURE__ */ n(se, { color: e, fill: i, name: o, size: s, sx: l, ...r }), Fr = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ b(N, { ...i, children: [
-  /* @__PURE__ */ a(
+}) => /* @__PURE__ */ b(H, { ...i, children: [
+  /* @__PURE__ */ n(
     "path",
     {
       d: "M14.368 4.5h1.604c.024 0 .037.028.021.044L13.28 7.992c-.008.008-.008.025 0 .032l2.714 3.448c.016.02 0 .045-.021.045h-1.604a.023.023 0 01-.02-.013l-1.895-2.46c-.009-.01-.029-.01-.041 0l-1.895 2.46a.022.022 0 01-.02.013H8.892c-.02 0-.031-.03-.02-.045l2.713-3.448c.008-.007.008-.024 0-.032L8.871 4.544a.027.027 0 01.021-.044h1.605c.008 0 .015.004.02.013l1.895 2.458c.008.013.028.013.04 0l1.896-2.458a.023.023 0 01.02-.013z",
       fill: e
     }
   ),
-  /* @__PURE__ */ a(
+  /* @__PURE__ */ n(
     "path",
     {
       d: "M8.242 11.363l1.056-1.293a.047.047 0 00.012-.029l-.81-5.5c-.004-.02-.02-.036-.04-.036H7.39c-.016 0-.032.008-.036.024L4.816 9.668c-.015.032-.06.032-.073 0l-2.562-5.14c-.009-.015-.02-.023-.036-.023h-1.08c-.021 0-.038.016-.043.036L.001 11.472a.042.042 0 00.04.049H1.29c.02 0 .042-.016.042-.036l.616-4.505c.004-.04.063-.048.08-.011L4.287 11.5c.008.017.021.024.037.024h.884c.016 0 .033-.008.037-.024l2.235-4.508c.015-.037.074-.029.078.011l.608 4.338c.005.037.054.048.075.021z",
       fill: e
     }
   )
-] }), Lr = ({
+] }), vr = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ b(N, { ...i, children: [
-  /* @__PURE__ */ a(
+}) => /* @__PURE__ */ b(H, { ...i, children: [
+  /* @__PURE__ */ n(
     "path",
     {
       d: "M7.93 11l.871-1.124c.01-.01.01-.02.01-.03l-.77-5.305c0-.02-.02-.041-.04-.041H7a.059.059 0 00-.024.008.077.077 0 00-.017.012l-2.4 4.89c-.005.019-.026.026-.043.023a.034.034 0 01-.027-.022l-2.42-4.89a.139.139 0 00-.01-.01.046.046 0 00-.031-.011H1.016c-.02 0-.04.01-.04.04l-.972 6.673c-.01.02.01.04.04.04h1.175c.02 0 .04-.01.04-.04l.587-4.273c.01-.04.061-.05.081-.01l2.137 4.303a.17.17 0 00.01.009.045.045 0 00.03.011h.83c.01 0 .03-.01.041-.02L7.08 6.981c.02-.04.07-.03.08.01l.578 4.14c.01.041.05.051.07.021L7.93 11z",
       fill: e
     }
   ),
-  /* @__PURE__ */ a(
+  /* @__PURE__ */ n(
     "path",
     {
       d: "M15.079 4.5H13.6c-.004 0-.008.002-.013.004h-.002a.1.1 0 01-.009.004.057.057 0 01-.016.002L11.788 6.83c-.01.02-.05.02-.07 0L9.944 4.51a.03.03 0 00-.01-.007c-.008-.003-.017-.003-.03-.003H8.427c-.04 0-.051.04-.04.07l2.54 3.291c.01.01.01.041 0 .051l-2.52 3.28c-.02.031 0 .071.04.071h1.478a.031.031 0 00.011-.002c.008-.003.016-.008.03-.008l1.771-2.318c.01-.02.051-.02.071 0l1.772 2.318c.01.01.02.01.04.01h1.469c.04 0 .05-.04.04-.07l-2.541-3.291a.023.023 0 01-.005-.01.047.047 0 01-.002-.008c-.002-.012 0-.026.007-.033l2.541-3.29c0-.02-.01-.061-.05-.061z",
       fill: e
     }
   ),
-  /* @__PURE__ */ a(
+  /* @__PURE__ */ n(
     "path",
     {
       clipRule: "evenodd",
@@ -94,7 +94,7 @@ const N = ({
       fillRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ a(
+  /* @__PURE__ */ n(
     "path",
     {
       clipRule: "evenodd",
@@ -103,10 +103,10 @@ const N = ({
       fillRule: "evenodd"
     }
   )
-] }), vr = ({
+] }), Lr = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ a(N, { ...i, children: /* @__PURE__ */ a(
+}) => /* @__PURE__ */ n(H, { ...i, children: /* @__PURE__ */ n(
   "path",
   {
     clipRule: "evenodd",
@@ -117,22 +117,22 @@ const N = ({
 ) }), kr = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ b(N, { ...i, children: [
-  /* @__PURE__ */ a(
+}) => /* @__PURE__ */ b(H, { ...i, children: [
+  /* @__PURE__ */ n(
     "path",
     {
       d: "M12.662 5.973h-.94a.013.013 0 00-.012.007L10.6 7.42c-.007.008-.019.008-.024 0l-1.11-1.44a.013.013 0 00-.011-.007h-.94c-.012 0-.02.014-.012.026l1.59 2.02c.004.004.004.014 0 .018l-1.59 2.02c-.006.009 0 .026.012.026h.94c.005 0 .009-.002.012-.008l1.11-1.44c.007-.007.018-.007.024 0l1.11 1.44a.013.013 0 00.011.008h.94a.016.016 0 00.012-.027l-1.59-2.019c-.004-.004-.004-.014 0-.019l1.59-2.02c.01-.008.002-.025-.012-.025z",
       fill: e
     }
   ),
-  /* @__PURE__ */ a(
+  /* @__PURE__ */ n(
     "path",
     {
       d: "M8.753 9.235l-.619.758c-.012.015-.041.009-.044-.013l-.356-2.54c-.003-.024-.037-.029-.046-.007l-1.308 2.64c-.003.01-.013.014-.022.014H5.84c-.01 0-.017-.004-.022-.014L4.494 7.42c-.01-.022-.044-.018-.047.006l-.36 2.639c0 .011-.013.02-.026.02h-.73a.025.025 0 01-.024-.027l.599-4.06c.002-.012.012-.022.024-.022h.633c.01 0 .016.005.02.015L6.086 9c.007.019.033.019.043 0l1.486-3.01c.002-.01.012-.015.021-.015h.626c.012 0 .022.01.024.022l.475 3.221a.027.027 0 01-.007.017z",
       fill: e
     }
   ),
-  /* @__PURE__ */ a(
+  /* @__PURE__ */ n(
     "path",
     {
       clipRule: "evenodd",
@@ -142,159 +142,159 @@ const N = ({
     }
   )
 ] });
-var h = /* @__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))(h || {}), He = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(He || {});
-const re = {
-  guid: h.Uncategorized,
+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 || {}), He = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(He || {});
+const te = {
+  guid: g.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
 }, De = [
   {
-    guid: h.AutoTransport,
+    guid: g.AutoTransport,
     colorName: "autoTransport",
     icon: "directions_car"
   },
   {
-    guid: h.BillsUtilities,
+    guid: g.BillsUtilities,
     colorName: "billsUtilities",
     icon: "electrical_services"
   },
   {
-    guid: h.BusinessServices,
+    guid: g.BusinessServices,
     colorName: "businessServices",
     icon: "business_center"
   },
   {
-    guid: h.Education,
+    guid: g.Education,
     colorName: "education",
     icon: "school"
   },
   {
-    guid: h.Entertainment,
+    guid: g.Entertainment,
     colorName: "entertainment",
     icon: "stadium"
   },
   {
-    guid: h.FeesCharges,
+    guid: g.FeesCharges,
     colorName: "feesCharges",
     icon: "problem"
   },
   {
-    guid: h.Financial,
+    guid: g.Financial,
     colorName: "financial",
     icon: "price_check"
   },
   {
-    guid: h.FoodDining,
+    guid: g.FoodDining,
     colorName: "foodDining",
     icon: "grocery"
   },
   {
-    guid: h.GiftsDonations,
+    guid: g.GiftsDonations,
     colorName: "giftsDonations",
     icon: "featured_seasonal_and_gifts"
   },
   {
-    guid: h.HealthFitness,
+    guid: g.HealthFitness,
     colorName: "healthFitness",
     icon: "ecg_heart"
   },
   {
-    guid: h.Home,
+    guid: g.Home,
     colorName: "home",
     icon: "cottage"
   },
   {
-    guid: h.Income,
+    guid: g.Income,
     colorName: "income",
     icon: "monetization_on"
   },
   {
-    guid: h.Investments,
+    guid: g.Investments,
     colorName: "investments",
     icon: "bid_landscape"
   },
   {
-    guid: h.Kids,
+    guid: g.Kids,
     colorName: "kids",
     icon: "face"
   },
   {
-    guid: h.PersonalCare,
+    guid: g.PersonalCare,
     colorName: "personalCare",
     icon: "volunteer_activism"
   },
   {
-    guid: h.Pets,
+    guid: g.Pets,
     colorName: "pets",
     icon: "pet_supplies"
   },
   {
-    guid: h.Shopping,
+    guid: g.Shopping,
     colorName: "shopping",
     icon: "shopping_cart"
   },
   {
-    guid: h.Taxes,
+    guid: g.Taxes,
     colorName: "taxes",
     icon: "heap_snapshot_large"
   },
   {
-    guid: h.Transfer,
+    guid: g.Transfer,
     colorName: "transfer",
     icon: "compare_arrows"
   },
   {
-    guid: h.Travel,
+    guid: g.Travel,
     colorName: "travel",
     icon: "airplane_ticket"
   },
-  re
+  te
 ], we = 0.625, Pe = ({
   categoryGuid: e,
   icon_ratio: i = we,
   size: o = 32,
   sx: s = {},
-  variant: n = "filled"
+  variant: l = "filled"
 }) => {
-  const r = I(), l = k.useMemo(
-    () => De.find((m) => m.guid === e) ?? re,
+  const r = O(), a = N.useMemo(
+    () => De.find((m) => m.guid === e) ?? te,
     [e]
-  ), c = r.palette.categories[l.colorName];
-  return /* @__PURE__ */ a(
+  ), c = r.palette.categories[a.colorName];
+  return /* @__PURE__ */ n(
     A,
     {
       alignItems: "center",
       bgcolor: () => {
         let m = c;
-        return n === "twotone" && (m = `${m}20`), n === "transparent" || n === "basic" ? "transparent" : m;
+        return l === "twotone" && (m = `${m}20`), l === "transparent" || l === "basic" ? "transparent" : m;
       },
       borderRadius: 1,
       color: () => {
-        const m = n === "filled" ? r.palette.common.white : c;
-        return n === "basic" ? r.palette.text.primary : m;
+        const m = l === "filled" ? r.palette.common.white : c;
+        return l === "basic" ? r.palette.text.primary : m;
       },
       height: o,
       justifyContent: "center",
       sx: [...Array.isArray(s) ? s : [s]],
       width: o,
-      children: /* @__PURE__ */ a(T, { name: l.icon, size: o * i })
+      children: /* @__PURE__ */ n(T, { name: a.icon, size: o * i })
     }
   );
 }, Be = ({ items: e, selected: i }) => {
-  const o = I(), { setValue: s } = X(), n = Z(), r = e?.map((l) => {
-    const c = l.getValue({ isValid: n });
+  const o = O(), { setValue: s } = Z(), l = Q(), r = e?.map((a) => {
+    const c = a.getValue({ isValid: l });
     return {
-      label: l.label,
+      label: a.label,
       onClick: () => {
-        s(c, { changeImportance: "accept", shortcut: l });
+        s(c, { changeImportance: "accept", shortcut: a });
       },
-      disabled: !n(c)
+      disabled: !l(c)
     };
   });
-  return /* @__PURE__ */ a(Q, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Re, { color: "primary", orientation: "vertical", value: i, children: r?.map((l) => /* @__PURE__ */ a(
-    Te,
+  return /* @__PURE__ */ n(k, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ n(Re, { color: "primary", orientation: "vertical", value: i, children: r?.map((a) => /* @__PURE__ */ n(
+    Me,
     {
-      onClick: l.onClick,
+      onClick: a.onClick,
       sx: {
         borderWidth: 1,
         color: "secondary.dark",
@@ -314,55 +314,55 @@ const re = {
           color: "primary"
         }
       },
-      value: l.label,
-      children: l.label
+      value: a.label,
+      children: a.label
     },
-    l.label
+    a.label
   )) }) });
 }, _e = ({
   items: e,
   selected: i,
   selectLabel: o
 }) => {
-  const { setValue: s } = X(), n = Z(), r = e?.map((l) => {
-    const c = l.getValue({ isValid: n });
+  const { setValue: s } = Z(), l = Q(), r = e?.map((a) => {
+    const c = a.getValue({ isValid: l });
     return {
-      label: l.label,
+      label: a.label,
       onClick: () => {
-        s(c, { changeImportance: "accept", shortcut: l });
+        s(c, { changeImportance: "accept", shortcut: a });
       },
-      disabled: !n(c)
+      disabled: !l(c)
     };
   });
-  return /* @__PURE__ */ a(A, { sx: { py: 16 }, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ n(A, { sx: { py: 16 }, children: /* @__PURE__ */ n(
     J,
     {
       defaultValue: i,
       id: "select",
       label: o,
       select: !0,
-      slotProps: { inputLabel: { shrink: !0 }, select: { IconComponent: se } },
+      slotProps: { inputLabel: { shrink: !0 }, select: { IconComponent: ce } },
       sx: { width: "100%" },
       value: i,
       variant: "outlined",
-      children: r?.map((l) => /* @__PURE__ */ a(Me, { onClick: l.onClick, value: l.label, children: l.label }, l.label))
+      children: r?.map((a) => /* @__PURE__ */ n(Ce, { onClick: a.onClick, value: a.label, children: a.label }, a.label))
     }
   ) });
 }, ze = (e) => {
-  const { toolbar: i, content: o, shortcuts: s, ownerState: n } = Ce(e);
+  const { toolbar: i, content: o, shortcuts: s, ownerState: l } = Se(e);
   return /* @__PURE__ */ b(
-    Se,
+    ye,
     {
-      ownerState: n,
+      ownerState: l,
       sx: {
         gridTemplateColumns: "minmax(320px, 1fr)",
         overflow: "auto",
         p: 0,
-        [`.${D.toolbar}`]: {
+        [`.${w.toolbar}`]: {
           gridColumn: 1,
           gridRow: 2
         },
-        [`.${D.contentWrapper}`]: {
+        [`.${w.contentWrapper}`]: {
           alignItems: "center",
           gridColumn: 1,
           gridRow: 3
@@ -373,11 +373,11 @@ const re = {
           s,
           i
         ] }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ n(
           Ae,
           {
-            className: D.contentWrapper,
-            ownerState: n,
+            className: w.contentWrapper,
+            ownerState: l,
             children: o
           }
         )
@@ -389,18 +389,18 @@ const re = {
   dateRange: i,
   onRangeChanged: o,
   selectedShortcut: s = e.dateRangeThisMonth,
-  sx: n = {}
+  sx: l = {}
 }) => {
-  const r = I(), l = ge(r.breakpoints.down("sm")), c = k.useMemo(() => {
-    const t = ue(), m = pe(t, 1), x = he(t, 1);
+  const r = O(), a = me(r.breakpoints.down("sm")), c = N.useMemo(() => {
+    const t = ue(), m = ge(t, 1), x = he(t, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [V(t), G(t)]
+        getValue: () => [W(t), V(t)]
       },
       {
         label: e.dateRangeLastMonth,
-        getValue: () => [V(m), G(m)]
+        getValue: () => [W(m), V(m)]
       },
       {
         label: e.dateRangeLast30Days,
@@ -412,11 +412,11 @@ const re = {
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [W(t), t]
+        getValue: () => [K(t), t]
       },
       {
         label: e.dateRangeLastYear,
-        getValue: () => [W(x), de(x)]
+        getValue: () => [K(x), pe(x)]
       },
       {
         label: e.dateRangeCustom,
@@ -427,8 +427,8 @@ const re = {
     const x = m.shortcut;
     o?.(t, x ? x.label : e.dateRangeCustom);
   };
-  return /* @__PURE__ */ a(A, { gap: l ? 0 : 16, m: l ? 0 : 8, children: /* @__PURE__ */ a(me, { dateAdapter: be, children: /* @__PURE__ */ a(
-    fe,
+  return /* @__PURE__ */ n(A, { gap: a ? 0 : 16, m: a ? 0 : 8, children: /* @__PURE__ */ n(fe, { dateAdapter: xe, children: /* @__PURE__ */ n(
+    be,
     {
       calendars: 1,
       localeText: {
@@ -456,20 +456,20 @@ const re = {
         }
       },
       slots: {
-        ...l && { layout: ze },
-        leftArrowIcon: () => /* @__PURE__ */ a(T, { name: "chevron_left", size: 28 }),
-        shortcuts: (t) => l ? /* @__PURE__ */ a(
+        ...a && { layout: ze },
+        leftArrowIcon: () => /* @__PURE__ */ n(T, { name: "chevron_left", size: 28 }),
+        shortcuts: (t) => a ? /* @__PURE__ */ n(
           _e,
           {
             selectLabel: e.dateRangeSelectARange,
             selected: s,
             ...t
           }
-        ) : /* @__PURE__ */ a(Be, { selected: s, ...t }),
-        rightArrowIcon: () => /* @__PURE__ */ a(T, { name: "chevron_right", size: 28 }),
-        ...l && {
-          toolbar: (t) => /* @__PURE__ */ a(
-            xe,
+        ) : /* @__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",
@@ -484,20 +484,20 @@ const re = {
           )
         }
       },
-      sx: { ...n },
+      sx: { ...l },
       value: i
     }
   ) }) });
-}, Hr = k.forwardRef(function(i, o) {
-  return /* @__PURE__ */ a(q, { direction: "up", ref: o, ...i });
+}, Hr = N.forwardRef(function(i, o) {
+  return /* @__PURE__ */ n(q, { direction: "up", ref: o, ...i });
 }), $e = ({
   hasSecondaryAction: e = !0,
   isPrimaryDisabled: i,
   onPrimaryAction: o,
   onSecondaryAction: s,
-  primaryColor: n = "primary",
+  primaryColor: l = "primary",
   primaryText: r = "Save",
-  secondaryColor: l = "primary",
+  secondaryColor: a = "primary",
   secondaryText: c = "Cancel"
 }) => /* @__PURE__ */ b(
   A,
@@ -507,19 +507,19 @@ const re = {
     justifyContent: "flex-end",
     sx: { bgcolor: "background.paper", p: 24 },
     children: [
-      e && /* @__PURE__ */ a(
-        z,
+      e && /* @__PURE__ */ n(
+        $,
         {
-          color: l,
+          color: a,
           onClick: s,
           variant: o ? "outlined" : "contained",
           children: c
         }
       ),
-      o && /* @__PURE__ */ a(
-        z,
+      o && /* @__PURE__ */ n(
+        $,
         {
-          color: n,
+          color: l,
           disabled: i,
           onClick: o,
           variant: "contained",
@@ -533,12 +533,12 @@ const re = {
   className: i = "",
   children: o,
   color: s,
-  sx: n = {},
+  sx: l = {},
   truncate: r,
-  uppercase: l,
+  uppercase: a,
   ...c
-}) => /* @__PURE__ */ a(
-  ye,
+}) => /* @__PURE__ */ n(
+  re,
   {
     className: `mx-kmui-text ${i}`,
     color: s,
@@ -551,15 +551,15 @@ const re = {
         textOverflow: "ellipsis",
         whiteSpace: "nowrap"
       } : {},
-      l ? {
+      a ? {
         textTransform: "uppercase"
       } : {},
-      ...Array.isArray(n) ? n : [n]
+      ...Array.isArray(l) ? l : [l]
     ],
     ...c,
     children: o
   }
-), Ue = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...o, children: i }), Dr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...o, children: i }), wr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...o, children: i }), Pr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...o, children: i }), Br = ({ copy: e, onClose: i, truncate: o = !1 }) => /* @__PURE__ */ b(
+), Ue = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...o, children: i }), Dr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...o, children: i }), wr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...o, children: i }), Pr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ n(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...o, children: i }), Br = ({ copy: e, onClose: i, truncate: o = !1 }) => /* @__PURE__ */ b(
   A,
   {
     sx: {
@@ -570,8 +570,8 @@ const re = {
       py: 14
     },
     children: [
-      /* @__PURE__ */ a(Ue, { truncate: o, variant: "h3", children: e.title }),
-      /* @__PURE__ */ a(ee, { "aria-label": e.close_aria, onClick: i, sx: { mr: -12 }, children: /* @__PURE__ */ a(ce, {}) })
+      /* @__PURE__ */ n(Ue, { truncate: o, variant: "h3", children: e.title }),
+      /* @__PURE__ */ n(ee, { "aria-label": e.close_aria, onClick: i, sx: { mr: -12 }, children: /* @__PURE__ */ n(de, {}) })
     ]
   }
 ), _r = ({
@@ -579,9 +579,9 @@ const re = {
   disableSave: i,
   id: o,
   isOpen: s,
-  onClose: n,
+  onClose: l,
   onSave: r,
-  primaryText: l,
+  primaryText: a,
   secondaryText: c,
   children: d,
   ...t
@@ -591,63 +591,63 @@ const re = {
     anchor: "right",
     className: `mx-kmui-drawer ${e}`,
     id: o ?? void 0,
-    onClose: n,
+    onClose: l,
     open: s,
     variant: "temporary",
     ...t,
     children: [
       d,
-      r && /* @__PURE__ */ a(
+      r && /* @__PURE__ */ n(
         $e,
         {
           isPrimaryDisabled: i,
           onPrimaryAction: r,
-          onSecondaryAction: n,
-          primaryText: l,
+          onSecondaryAction: l,
+          primaryText: a,
           secondaryText: c
         }
       )
     ]
   }
-), te = 32, $ = "https://content.moneydesktop.com/storage/MD_Assets", j = `${$}/serenity/default_institution_logo.png`, zr = ({
+), oe = 32, U = "https://content.moneydesktop.com/storage/MD_Assets", j = `${U}/serenity/default_institution_logo.png`, zr = ({
   alt: e,
   institutionGuid: i,
   logoUrl: o,
-  size: s = te,
-  ...n
-}) => /* @__PURE__ */ a(
+  size: s = oe,
+  ...l
+}) => /* @__PURE__ */ n(
   "img",
   {
     alt: e,
     height: s,
     onError: (r) => {
-      const l = r.target;
-      l.src !== j && (l.src = j);
+      const a = r.target;
+      a.src !== j && (a.src = j);
     },
-    src: o || `${$}/Ipad%20Logos/100x100/${i}_100x100.png`,
+    src: o || `${U}/Ipad%20Logos/100x100/${i}_100x100.png`,
     style: {
       borderRadius: 4
     },
     width: s,
-    ...n
+    ...l
   }
 ), $r = ({
   alt: e = "",
   categoryGuid: i,
   merchantGuid: o,
-  size: s = te,
-  ...n
+  size: s = oe,
+  ...l
 }) => {
-  const [r, l] = k.useState(!1), c = I();
-  return /* @__PURE__ */ b(Q, { display: "inline-block", position: "relative", ...n, children: [
-    o && !r && /* @__PURE__ */ a(
+  const [r, a] = N.useState(!1), c = O();
+  return /* @__PURE__ */ b(k, { display: "inline-block", position: "relative", ...l, children: [
+    o && !r && /* @__PURE__ */ n(
       "img",
       {
         alt: e,
         "aria-hidden": !e,
         height: s,
-        onError: () => l(!0),
-        src: `${$}/merchant_logos/${o}.png`,
+        onError: () => a(!0),
+        src: `${U}/merchant_logos/${o}.png`,
         style: {
           backgroundColor: c.palette.common.white,
           borderRadius: 4,
@@ -657,16 +657,16 @@ const re = {
         width: s
       }
     ),
-    /* @__PURE__ */ a(Pe, { categoryGuid: i, size: s })
+    /* @__PURE__ */ n(Pe, { categoryGuid: i, size: s })
   ] });
 }, Ur = ({
   disabled: e = !1,
   label: i = "",
   shrink: o = !0,
   truncate: s = !1,
-  variant: n = "outlined",
+  variant: l = "outlined",
   ...r
-}) => /* @__PURE__ */ a(
+}) => /* @__PURE__ */ n(
   J,
   {
     disabled: e,
@@ -684,48 +684,48 @@ const re = {
         }
       }
     },
-    variant: n,
+    variant: l,
     ...r
   }
 );
 function Ge(e) {
-  return /* @__PURE__ */ a(q, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
+  return /* @__PURE__ */ n(q, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
 const Gr = ({
   open: e = !0,
   handleClose: i,
   closeAriaLabel: o,
   message: s,
-  autoHideDuration: n = 3e3,
+  autoHideDuration: l = 3e3,
   severity: r = "success",
-  snackbarSx: l,
+  snackbarSx: a,
   showAction: c = !1,
   showClose: d = !1,
   actionText: t = "Undo",
   onActionClick: m
 }) => {
-  const x = I(), L = d && /* @__PURE__ */ a(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ a(T, { fill: !0, name: "close" }) }), g = `${r}.main`;
-  return /* @__PURE__ */ a(
-    Ee,
+  const x = O(), v = d && /* @__PURE__ */ n(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ n(T, { fill: !0, name: "close" }) }), h = `${r}.main`;
+  return /* @__PURE__ */ n(
+    Oe,
     {
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      autoHideDuration: n,
+      autoHideDuration: l,
       onClose: i,
       open: e,
       slots: { transition: Ge },
       sx: {
-        ...l,
+        ...a,
         maxWidth: 568,
         minWidth: 288,
         minHeight: 56
       },
-      children: /* @__PURE__ */ a(
-        Oe,
+      children: /* @__PURE__ */ n(
+        Ee,
         {
-          action: L,
+          action: v,
           severity: r,
           sx: {
-            backgroundColor: g,
+            backgroundColor: h,
             display: "flex",
             width: "100%",
             py: 8,
@@ -752,7 +752,7 @@ const Gr = ({
                 columnGap: "16px"
               },
               children: [
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ n(
                   F,
                   {
                     sx: {
@@ -764,8 +764,8 @@ const Gr = ({
                     children: s
                   }
                 ),
-                c && /* @__PURE__ */ a(
-                  z,
+                c && /* @__PURE__ */ n(
+                  $,
                   {
                     color: "inherit",
                     onClick: m || i,
@@ -788,29 +788,29 @@ const Gr = ({
     }
   );
 }, Vr = ({
-  component: e = P,
+  component: e = B,
   variant: i = "outlined",
   selected: o,
   onChange: s,
-  headline: n,
+  headline: l,
   message: r,
-  name: l,
+  name: a,
   value: c,
   disabled: d = !1,
   error: t = !1,
   icon: m = !1,
   sx: x = {},
-  ...L
+  ...v
 }) => {
-  const g = I(), oe = () => g.palette.background.paper, H = () => t ? `inset 0px 0px 0px 2px ${g.palette.error.main}` : d ? o ? `inset 0px 0px 0px 2px ${g.palette.action.disabled}` : i === "outlined" ? `inset 0px 0px 0px 1px ${g.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${g.palette.action.disabled}` : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(g.palette.common.black, 0.23)}` : o ? `inset 0px 0px 0px 2px ${f(g.palette.primary.main, 0.5)}` : g.shadows[1], ie = () => d || t ? g.palette.background.paper : f(g.palette.primary.main, 0.1), ae = () => d || t ? H() : i === "outlined" ? o ? `inset 0px 0px 0px 2px ${f(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${f(g.palette.primary.main, 0.5)}` : H(), ne = () => d || t ? g.palette.background.paper : f(g.palette.primary.main, 0.3);
-  return /* @__PURE__ */ a(
+  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);
+  return /* @__PURE__ */ n(
     Fe,
     {
       checked: o,
-      control: e === P ? /* @__PURE__ */ a(
-        P,
+      control: e === B ? /* @__PURE__ */ n(
+        B,
         {
-          name: l,
+          name: a,
           sx: {
             p: 0,
             ml: 16,
@@ -820,12 +820,12 @@ const Gr = ({
               fontSize: "20px"
             }
           },
-          ...L
+          ...v
         }
-      ) : /* @__PURE__ */ a(
-        Le,
+      ) : /* @__PURE__ */ n(
+        ve,
         {
-          name: l,
+          name: a,
           sx: {
             p: 0,
             ml: 16,
@@ -835,15 +835,15 @@ const Gr = ({
               fontSize: "20px"
             }
           },
-          ...L
+          ...v
         }
       ),
       disabled: d,
-      label: /* @__PURE__ */ b(w, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
-        m && /* @__PURE__ */ a(w, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: m }),
-        /* @__PURE__ */ b(w, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
-          n && /* @__PURE__ */ a(K, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: n }),
-          /* @__PURE__ */ a(K, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: r })
+      label: /* @__PURE__ */ b(P, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
+        m && /* @__PURE__ */ n(P, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: m }),
+        /* @__PURE__ */ b(P, { 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: r })
         ] })
       ] }),
       labelPlacement: "start",
@@ -853,26 +853,26 @@ const Gr = ({
         padding: "6px 16px",
         alignItems: "flex-start",
         justifyContent: "space-between",
-        borderRadius: g.shape.borderRadius / 2,
+        borderRadius: h.shape.borderRadius / 2,
         mb: 16,
         cursor: d ? "not-allowed" : "pointer",
         opacity: d ? 0.6 : 1,
-        backgroundColor: oe(),
+        backgroundColor: ie(),
         border: "none",
-        boxShadow: H(),
+        boxShadow: D(),
         boxSizing: "border-box",
-        transition: g.transitions.create(["background-color", "box-shadow"], {
-          duration: g.transitions.duration.short
+        transition: h.transitions.create(["background-color", "box-shadow"], {
+          duration: h.transitions.duration.short
         }),
         "&:hover": {
-          backgroundColor: ie(),
-          boxShadow: ae()
+          backgroundColor: ae(),
+          boxShadow: ne()
         },
         "&:active": {
-          backgroundColor: ne()
+          backgroundColor: le()
         },
         "&:focus-visible": {
-          outline: `2px solid ${g.palette.info.main}`,
+          outline: `2px solid ${h.palette.info.main}`,
           outlineOffset: "2px"
         },
         ...x
@@ -880,20 +880,67 @@ const Gr = ({
       value: c
     }
   );
-}, O = {
+}, y = {
   LIGHT: "light"
-}, R = (e) => ({
+}, Wr = ({ color: e = "neutral", icon: i, label: o, size: s = "small", sx: l, ...r }) => /* @__PURE__ */ b(
+  k,
+  {
+    component: "span",
+    sx: [
+      (a) => {
+        const c = a.palette.mode === y.LIGHT, d = e === "default" ? "neutral" : e;
+        return {
+          alignItems: "center",
+          borderRadius: 999,
+          // pill shape
+          display: "inline-flex",
+          gap: "4px",
+          height: s === "xsmall" ? "16px" : "24px",
+          paddingX: s === "xsmall" ? "6px" : "8px",
+          backgroundColor: a.palette[d][c ? 100 : 800],
+          color: c ? a.palette[d].dark : a.palette[d][100]
+        };
+      },
+      ...Array.isArray(l) ? l : [l]
+    ],
+    ...r,
+    children: [
+      i && /* @__PURE__ */ n(
+        k,
+        {
+          "aria-hidden": !0,
+          component: "span",
+          sx: {
+            alignItems: "center",
+            display: "inline-flex",
+            "& .MuiSvgIcon-root": { fontSize: "16px" }
+          },
+          children: i
+        }
+      ),
+      /* @__PURE__ */ n(
+        re,
+        {
+          component: "span",
+          sx: { fontWeight: "bold", textTransform: "uppercase" },
+          variant: "tiny",
+          children: o
+        }
+      )
+    ]
+  }
+), M = (e) => ({
   50: E(e, 0.95),
   100: E(e, 0.85),
   200: E(e, 0.7),
   300: E(e, 0.55),
   400: E(e, 0.3),
   500: e,
-  600: v(e, 0.3),
-  700: v(e, 0.5),
-  800: v(e, 0.65),
-  900: v(e, 0.75)
-}), M = "#FFFFFF", B = "#000000", Ve = "#F9F9F9", We = "#000000", Ye = "#FFFFFF", Ke = "#000000", C = {
+  600: L(e, 0.3),
+  700: L(e, 0.5),
+  800: L(e, 0.65),
+  900: L(e, 0.75)
+}), R = "#FFFFFF", _ = "#000000", Ve = "#F9F9F9", We = "#000000", Ke = "#FFFFFF", Ye = "#000000", C = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -909,14 +956,14 @@ const Gr = ({
   CHART5: "#60A9FF",
   CHART6: "#C8BAEE",
   CHART7: "#585E67"
-}, y = {
+}, I = {
   CHART_MONO1: "#C3EAFF",
   CHART_MONO2: "#8ED7FF",
   CHART_MONO3: "#60A9FF",
   CHART_MONO4: "#2F73DA",
   CHART_MONO5: "#034AB3",
   CHART_MONO6: "#002966"
-}, u = {
+}, p = {
   AUTO_TRANSPORTT: "#00B0FF",
   BILLS_UTILITIES: "#F949BD",
   BUSINESS_SERVICES: "#2979FF",
@@ -939,7 +986,7 @@ const Gr = ({
   TRANSFER: "#2B9580",
   TRAVEL: "#3D5AFE",
   UNCATEGORIZED: "#8495AD"
-}, p = {
+}, u = {
   AUTO_TRANSPORTT: "#77DAFF",
   BILLS_UTILITIES: "#FF81D4",
   BUSINESS_SERVICES: "#4BBAFF",
@@ -962,13 +1009,13 @@ const Gr = ({
   TRANSFER: "#75C7B7",
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
-}, je = (e, i) => {
-  const o = R(i?.primary || C.PRIMARY), s = R(i?.secondary || C.SECONDARY), n = R(i?.error || C.ERROR), r = R(i?.warning || C.WARNING), l = R(i?.info || C.INFO), c = R(i?.success || C.SUCCESS), d = R(i?.grey || C.GREY), t = e === O.LIGHT;
+}, Xe = (e, i) => {
+  const o = M(i?.primary || C.PRIMARY), s = M(i?.secondary || C.SECONDARY), l = M(i?.error || C.ERROR), r = M(i?.warning || C.WARNING), a = M(i?.info || C.INFO), c = M(i?.success || C.SUCCESS), d = M(i?.grey || C.GREY), t = e === y.LIGHT;
   return {
     mode: e,
     common: {
-      white: M,
-      black: B
+      white: R,
+      black: _
     },
     primary: {
       ...o,
@@ -993,20 +1040,20 @@ const Gr = ({
       main: t ? d[500] : d[400],
       dark: t ? d[700] : d[200],
       darker: t ? d[800] : d[100],
-      contrastText: ve(t ? d[700] : d[400], "#fff") > 4.5 ? M : d[900]
+      contrastText: Le(t ? d[700] : d[400], "#fff") > 4.5 ? R : d[900]
     },
     text: {
-      primary: t ? d[900] : M,
-      secondary: t ? d[600] : f(M, 0.7),
-      disabled: t ? d[500] : f(M, 0.38)
+      primary: t ? d[900] : R,
+      secondary: t ? d[600] : f(R, 0.7),
+      disabled: t ? d[500] : f(R, 0.38)
     },
     error: {
-      ...n,
-      lighter: t ? n[100] : n[700],
-      light: t ? n[300] : n[600],
-      main: t ? n[500] : n[400],
-      dark: t ? n[700] : n[200],
-      darker: t ? n[800] : n[100]
+      ...l,
+      lighter: t ? l[100] : l[700],
+      light: t ? l[300] : l[600],
+      main: t ? l[500] : l[400],
+      dark: t ? l[700] : l[200],
+      darker: t ? l[800] : l[100]
     },
     warning: {
       ...r,
@@ -1017,12 +1064,12 @@ const Gr = ({
       darker: t ? r[800] : r[100]
     },
     info: {
-      ...l,
-      lighter: t ? l[100] : l[700],
-      light: t ? l[300] : l[600],
-      main: t ? l[500] : l[400],
-      dark: t ? l[700] : l[200],
-      darker: t ? l[800] : l[100]
+      ...a,
+      lighter: t ? a[100] : a[700],
+      light: t ? a[300] : a[600],
+      main: t ? a[500] : a[400],
+      dark: t ? a[700] : a[200],
+      darker: t ? a[800] : a[100]
     },
     success: {
       ...c,
@@ -1034,41 +1081,41 @@ const Gr = ({
     },
     grey: d,
     action: {
-      active: t ? f(B, 0.56) : f(M, 0.56),
+      active: t ? f(_, 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 || Ye : i?.background?.paper?.dark || Ke,
+      paper: t ? i?.background?.paper?.light || Ke : i?.background?.paper?.dark || Ye,
       highlight: t ? d[200] : d[600],
       highlightPrimary: t ? o[100] : o[500]
     },
-    divider: t ? f(B, 0.12) : f(M, 0.24),
+    divider: t ? f(_, 0.12) : f(R, 0.24),
     categories: {
-      autoTransport: t ? u.AUTO_TRANSPORTT : p.AUTO_TRANSPORTT,
-      billsUtilities: t ? u.BILLS_UTILITIES : p.BILLS_UTILITIES,
-      businessServices: t ? u.BUSINESS_SERVICES : p.BUSINESS_SERVICES,
-      education: t ? u.EDUCATION : p.EDUCATION,
-      entertainment: t ? u.ENTERTAINMENT : p.ENTERTAINMENT,
-      feesCharges: t ? u.FEES_CHARGES : p.FEES_CHARGES,
-      financial: t ? u.FINANCIAL : p.FINANCIAL,
-      foodDining: t ? u.FOOD_DINING : p.FOOD_DINING,
-      giftsDonations: t ? u.GIFTS_DONATIONS : p.GIFTS_DONATIONS,
-      healthFitness: t ? u.HEALTH_FITNESS : p.HEALTH_FITNESS,
-      home: t ? u.HOME : p.HOME,
-      income: t ? u.INCOME : p.INCOME,
-      investments: t ? u.INVESTMENTS : p.INVESTMENTS,
-      kids: t ? u.KIDS : p.KIDS,
-      others: t ? u.OTHERS : p.OTHERS,
-      personalCare: t ? u.PERSONAL_CARE : p.PERSONAL_CARE,
-      pets: t ? u.PETS : p.PETS,
-      shopping: t ? u.SHOPPING : p.SHOPPING,
-      taxes: t ? u.TAXES : p.TAXES,
-      transfer: t ? u.TRANSFER : p.TRANSFER,
-      travel: t ? u.TRAVEL : p.TRAVEL,
-      uncategorized: t ? u.UNCATEGORIZED : p.UNCATEGORIZED
+      autoTransport: t ? p.AUTO_TRANSPORTT : u.AUTO_TRANSPORTT,
+      billsUtilities: t ? p.BILLS_UTILITIES : u.BILLS_UTILITIES,
+      businessServices: t ? p.BUSINESS_SERVICES : u.BUSINESS_SERVICES,
+      education: t ? p.EDUCATION : u.EDUCATION,
+      entertainment: t ? p.ENTERTAINMENT : u.ENTERTAINMENT,
+      feesCharges: t ? p.FEES_CHARGES : u.FEES_CHARGES,
+      financial: t ? p.FINANCIAL : u.FINANCIAL,
+      foodDining: t ? p.FOOD_DINING : u.FOOD_DINING,
+      giftsDonations: t ? p.GIFTS_DONATIONS : u.GIFTS_DONATIONS,
+      healthFitness: t ? p.HEALTH_FITNESS : u.HEALTH_FITNESS,
+      home: t ? p.HOME : u.HOME,
+      income: t ? p.INCOME : u.INCOME,
+      investments: t ? p.INVESTMENTS : u.INVESTMENTS,
+      kids: t ? p.KIDS : u.KIDS,
+      others: t ? p.OTHERS : u.OTHERS,
+      personalCare: t ? p.PERSONAL_CARE : u.PERSONAL_CARE,
+      pets: t ? p.PETS : u.PETS,
+      shopping: t ? p.SHOPPING : u.SHOPPING,
+      taxes: t ? p.TAXES : u.TAXES,
+      transfer: t ? p.TRANSFER : u.TRANSFER,
+      travel: t ? p.TRAVEL : u.TRAVEL,
+      uncategorized: t ? p.UNCATEGORIZED : u.UNCATEGORIZED
     },
     chart: {
       chart1: S.CHART1,
@@ -1080,16 +1127,16 @@ const Gr = ({
       chart7: S.CHART7
     },
     chartMono: {
-      chartMono1: y.CHART_MONO1,
-      chartMono2: y.CHART_MONO2,
-      chartMono3: y.CHART_MONO3,
-      chartMono4: y.CHART_MONO4,
-      chartMono5: y.CHART_MONO5,
-      chartMono6: y.CHART_MONO6
+      chartMono1: I.CHART_MONO1,
+      chartMono2: I.CHART_MONO2,
+      chartMono3: I.CHART_MONO3,
+      chartMono4: I.CHART_MONO4,
+      chartMono5: I.CHART_MONO5,
+      chartMono6: I.CHART_MONO6
     }
   };
-}, _ = "Inter, Helvetica, Arial, sans-serif", Xe = (e) => {
-  const i = e?.fontFamily ? `${e?.fontFamily}, ${_}` : _, o = e?.headerFontFamily ? `${e.headerFontFamily}, ${_}` : i;
+}, z = "Inter, Helvetica, Arial, sans-serif", je = (e) => {
+  const i = e?.fontFamily ? `${e?.fontFamily}, ${z}` : z, o = e?.headerFontFamily ? `${e.headerFontFamily}, ${z}` : i;
   return {
     fontFamily: i,
     fontSize: 15,
@@ -1150,9 +1197,9 @@ const Gr = ({
 Ne.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
-const Wr = (e, i) => {
-  const o = je(e, i?.paletteOptions), s = Xe(i?.typographyOptions), n = [...U().shadows];
-  return n[1] = "0px 2px 8px 0 rgba(0, 0, 0, 0.12)", n[8] = "0px 6px 12px 0 rgba(0, 0, 0, 0.16), 0px 3px 8px 0 rgba(0, 0, 0, 0.06)", n[16] = "0px 12px 20px 0 rgba(0, 0, 0, 0.22)", U({
+const Kr = (e, i) => {
+  const o = Xe(e, i?.paletteOptions), s = je(i?.typographyOptions), l = [...G().shadows];
+  return l[1] = "0px 2px 8px 0 rgba(0, 0, 0, 0.12)", l[8] = "0px 6px 12px 0 rgba(0, 0, 0, 0.16), 0px 3px 8px 0 rgba(0, 0, 0, 0.06)", l[16] = "0px 12px 20px 0 rgba(0, 0, 0, 0.22)", G({
     breakpoints: i?.breakpoints || {
       values: {
         // TODO: Remove these default values in v3. Users should provide their own breakpoints if they want to.
@@ -1170,7 +1217,7 @@ const Wr = (e, i) => {
     shape: {
       borderRadius: i?.shapeOptions?.borderRadius || 4
     },
-    shadows: n,
+    shadows: l,
     ...i?.useMUIStandardSpacing ? {} : { spacing: 1 },
     // TODO: update spacing, we're back to a 8-base which is default for MUI 2.x
     typography: s,
@@ -1178,18 +1225,18 @@ const Wr = (e, i) => {
       MuiAlert: {
         defaultProps: {
           iconMapping: {
-            success: /* @__PURE__ */ a(T, { fill: !0, name: "check_circle", size: 24 }),
-            error: /* @__PURE__ */ a(T, { fill: !0, name: "error", size: 24 }),
-            warning: /* @__PURE__ */ a(T, { fill: !0, name: "warning", size: 24 }),
-            info: /* @__PURE__ */ a(T, { fill: !0, name: "info", size: 24 })
+            success: /* @__PURE__ */ n(T, { fill: !0, name: "check_circle", size: 24 }),
+            error: /* @__PURE__ */ n(T, { fill: !0, name: "error", size: 24 }),
+            warning: /* @__PURE__ */ n(T, { fill: !0, name: "warning", size: 24 }),
+            info: /* @__PURE__ */ n(T, { fill: !0, name: "info", size: 24 })
           },
           variant: "outlined"
         },
         styleOverrides: {
-          root: ({ theme: r, ownerState: l }) => {
-            const c = l.severity || "info";
-            let d = r.palette.mode === O.LIGHT ? r.palette[c]?.[50] : r.palette[c]?.[800];
-            if (l.variant === "filled") {
+          root: ({ theme: r, ownerState: a }) => {
+            const c = a.severity || "info";
+            let d = r.palette.mode === y.LIGHT ? r.palette[c]?.[50] : r.palette[c]?.[800];
+            if (a.variant === "filled") {
               const t = c === "warning";
               d = r.palette[c]?.[t ? 400 : 600];
             }
@@ -1281,6 +1328,76 @@ const Wr = (e, i) => {
           }
         }
       },
+      MuiChip: {
+        defaultProps: {
+          color: "primary",
+          deleteIcon: /* @__PURE__ */ n("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ n(T, { name: "close" }) })
+        },
+        styleOverrides: {
+          root: ({ theme: r, ownerState: a }) => {
+            const c = !a.color || a.color === "default" ? "primary" : a.color, d = a.size === "small", t = d ? r.typography.caption : r.typography.body2;
+            return {
+              borderRadius: r.shape.borderRadius,
+              color: r.palette[c].main,
+              fontSize: t.fontSize,
+              lineHeight: t.lineHeight,
+              "&.Mui-focusVisible": {
+                outline: `2px solid ${r.palette.info.main}`,
+                outlineOffset: "2px"
+              },
+              "& > .MuiSvgIcon-root": {
+                marginLeft: "4px"
+              },
+              "& .MuiSvgIcon-root": {
+                fontSize: d ? "16px" : "18px"
+              },
+              "& .MuiChip-avatar": {
+                width: d ? "18px" : "24px",
+                height: d ? "18px" : "24px"
+              },
+              "& .MuiChip-deleteIcon": {
+                color: r.palette[c].main,
+                "&:hover": {
+                  color: r.palette[c].dark
+                }
+              },
+              "&.MuiChip-clickable:hover, &.Mui-focusVisible": {
+                backgroundColor: f(
+                  r.palette[c].main,
+                  r.palette.action.hoverOpacity
+                )
+              },
+              "&.MuiChip-clickable:active": {
+                backgroundColor: f(
+                  r.palette[c].main,
+                  r.palette.action.focusOpacity
+                )
+              }
+            };
+          },
+          label: ({ ownerState: r }) => ({
+            ...r.icon && {
+              paddingLeft: "4px"
+            }
+          })
+        },
+        variants: [
+          {
+            props: { variant: "filled" },
+            style: ({ theme: r }) => ({
+              "& .MuiChip-label, & > .MuiSvgIcon-root": {
+                color: r.palette.text.primary
+              }
+            })
+          },
+          ...["primary", "secondary", "error", "warning", "info", "success", "neutral"].map((r) => ({
+            props: { variant: "filled", color: r },
+            style: ({ theme: a }) => ({
+              backgroundColor: a.palette[r][a.palette.mode === y.LIGHT ? 100 : 800]
+            })
+          }))
+        ]
+      },
       MuiCircularProgress: {
         styleOverrides: {
           root: {
@@ -1849,7 +1966,7 @@ const Wr = (e, i) => {
             "&:hover": {
               backgroundColor: f(
                 r.palette.primary.main,
-                o.mode === O.LIGHT ? 0.1 : 0.2
+                o.mode === y.LIGHT ? 0.1 : 0.2
               ),
               borderColor: r.palette.primary.main
             },
@@ -1873,7 +1990,7 @@ const Wr = (e, i) => {
             props: { color: "error" },
             style: {
               "&:hover": {
-                backgroundColor: f(o.error.main, o.mode === O.LIGHT ? 0.1 : 0.2),
+                backgroundColor: f(o.error.main, o.mode === y.LIGHT ? 0.1 : 0.2),
                 borderColor: o.error.main
               },
               "&.Mui-selected": {
@@ -1897,7 +2014,7 @@ const Wr = (e, i) => {
               "&:hover": {
                 backgroundColor: f(
                   o.secondary.main,
-                  o.mode === O.LIGHT ? 0.1 : 0.2
+                  o.mode === y.LIGHT ? 0.1 : 0.2
                 ),
                 borderColor: o.secondary.main
               },
@@ -1937,9 +2054,9 @@ const Wr = (e, i) => {
   });
 };
 export {
-  N as BaseIcon,
+  H as BaseIcon,
   Hr as BottomSheetTransition,
-  h as CategoryGuids,
+  g as CategoryGuids,
   Pe as CategoryIcon,
   De as CategoryIconList,
   He as CategoryIconVariants,
@@ -1951,19 +2068,20 @@ export {
   Ue as H1,
   Dr as H2,
   wr as H3,
-  _ as INTER,
+  z as INTER,
   T as Icon,
   zr as InstitutionLogo,
-  Lr as MXLogoCopyrightIcon,
-  vr as MXLogoFilledIcon,
+  vr as MXLogoCopyrightIcon,
+  Lr as MXLogoFilledIcon,
   Fr as MXLogoIcon,
   kr as MXLogoOutlineIcon,
   $r as MerchantLogo,
   Pr as P,
   Vr as SelectionBox,
+  Wr as Tag,
   F as Text,
   Ur as TextField,
   Gr as Toast,
-  Wr as createMXTheme
+  Kr as createMXTheme
 };
 //# sourceMappingURL=index.es.js.map