@mxenabled/mxui 1.7.0 → 1.9.0

package/dist/index.es.js

@@ -1,35 +1,35 @@
 import { jsx as a, jsxs as T } from "react/jsx-runtime";
-import x from "react";
-import I from "@mui/material/Stack";
-import { useTheme as H, createTheme as U } from "@mui/material/styles";
-import { Icon as se, ExpandMore as de, Close as ue } from "@mxenabled/mx-icons";
-import { endOfMonth as W } from "date-fns/endOfMonth";
-import { endOfYear as pe } from "date-fns/endOfYear";
-import { startOfToday as he } from "date-fns/startOfToday";
+import C from "react";
+import y from "@mui/material/Stack";
+import { useTheme as H, createTheme as W } from "@mui/material/styles";
+import { Icon as de, ExpandMore as ue, Close as pe } from "@mxenabled/mx-icons";
+import { endOfMonth as K } from "date-fns/endOfMonth";
+import { endOfYear as he } from "date-fns/endOfYear";
+import { startOfToday as ge } from "date-fns/startOfToday";
 import { startOfMonth as Z } from "date-fns/startOfMonth";
-import { startOfYear as K } from "date-fns/startOfYear";
+import { startOfYear as X } from "date-fns/startOfYear";
 import { subDays as Y } from "date-fns/subDays";
-import { subMonths as ge } from "date-fns/subMonths";
-import { subYears as me } from "date-fns/subYears";
-import fe from "@mui/material/useMediaQuery";
-import { LocalizationProvider as be, StaticDateRangePicker as Te } from "@mui/x-date-pickers-pro";
+import { subMonths as me } from "date-fns/subMonths";
+import { subYears as fe } from "date-fns/subYears";
+import be from "@mui/material/useMediaQuery";
+import { LocalizationProvider as Te, StaticDateRangePicker as xe } from "@mui/x-date-pickers-pro";
 import { AdapterDateFns as Ce } from "@mui/x-date-pickers-pro/AdapterDateFnsV3";
-import { MultiInputDateRangeField as xe } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
-import j from "@mui/material/Box";
-import Re from "@mui/material/ToggleButton";
+import { MultiInputDateRangeField as Re } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
+import N from "@mui/material/Box";
+import Ae from "@mui/material/ToggleButton";
 import Me from "@mui/material/ToggleButtonGroup";
-import Ae from "@mui/material/MenuItem";
+import Ee from "@mui/material/MenuItem";
 import Q from "@mui/material/TextField";
-import { usePickerLayout as Ee, PickersLayoutRoot as Se, PickersLayoutContentWrapper as Ie, pickersLayoutClasses as P } from "@mui/x-date-pickers/PickersLayout";
+import { usePickerLayout as Se, PickersLayoutRoot as Ie, PickersLayoutContentWrapper as ye, pickersLayoutClasses as _ } from "@mui/x-date-pickers/PickersLayout";
 import J from "@mui/material/Slide";
-import V from "@mui/material/Button";
+import G from "@mui/material/Button";
 import q from "@mui/material/IconButton";
-import ye from "@mui/material/Typography";
+import ee from "@mui/material/Typography";
 import ve from "@mui/material/Drawer";
 import He from "@mui/material/Snackbar";
 import Le from "@mui/material/Alert";
-import { light as ee, buildTheme as G, dark as Fe } from "@mxenabled/design-tokens";
-import { FormControlLabel as ke, Box as _, Typography as X, Radio as B, Checkbox as Oe, alpha as b, darken as D, lighten as L, getContrastRatio as De } from "@mui/material";
+import { light as oe, buildTheme as $, dark as ke } from "@mxenabled/design-tokens";
+import { FormControlLabel as Fe, Box as B, Typography as j, Radio as z, Checkbox as Oe, alpha as b, darken as D, lighten as L, getContrastRatio as De } from "@mui/material";
 import { circularProgressClasses as Ne } from "@mui/material/CircularProgress";
 import { LicenseInfo as we } from "@mui/x-license-pro";
 const f = ({
@@ -61,7 +61,7 @@ const R = ({
   weight: r = 300,
   ...n
 }) => /* @__PURE__ */ a(
-  se,
+  de,
   {
     color: e,
     fill: o,
@@ -163,7 +163,7 @@ const R = ({
     d: "M13.79 2.21a.72.72 0 0 1 0 1.02L9.018 8l4.77 4.77a.72.72 0 1 1-1.018 1.02L8 9.018l-4.77 4.77a.72.72 0 1 1-1.02-1.018L6.982 8l-4.77-4.77A.72.72 0 0 1 3.23 2.21L8 6.982l4.77-4.77a.72.72 0 0 1 1.02 0Z",
     fill: e
   }
-) })), Z0 = ({
+) })), K0 = ({
   color: e = "currentColor",
   ...o
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ a(f, { ...o, children: /* @__PURE__ */ a(
@@ -172,7 +172,7 @@ const R = ({
     d: "M12.644.156l3.2 3.2a.533.533 0 010 .754L5.177 14.777a.534.534 0 01-.247.14L.663 15.984a.533.533 0 01-.647-.647l1.067-4.267a.534.534 0 01.14-.248L11.89.156a.533.533 0 01.754 0zM10.133 3.42l-8.051 8.052-.815 3.261 3.26-.815 8.052-8.052-2.446-2.446zm2.134-2.132l-1.38 1.378 2.446 2.446 1.38-1.379-2.446-2.445z",
     fill: e
   }
-) })), K0 = ({
+) })), Z0 = ({
   color: e = "currentColor",
   ...o
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ a(f, { ...o, children: /* @__PURE__ */ a(
@@ -181,7 +181,7 @@ const R = ({
     d: "M1.5 1.933l5.4 6.72c.066.081.1.18.1.28v5.134h2V8.933c0-.1.036-.199.1-.28l5.4-6.72h-13zM6 9.09L.1 1.747C-.145 1.439.09 1 .5 1h15c.413 0 .648.439.4.747L10 9.089v5.444c0 .258-.223.467-.5.467h-3c-.275 0-.5-.209-.5-.467V9.09z",
     fill: e
   }
-) })), Y0 = ({
+) })), X0 = ({
   color: e = "currentColor",
   ...o
 }) => (console.warn('<HeartIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ a(f, { ...o, children: /* @__PURE__ */ a(
@@ -190,7 +190,7 @@ const R = ({
     d: "M1.317 2.317a4.5 4.5 0 016.364 0c.117.117.223.238.32.363.095-.124.2-.245.316-.362a4.5 4.5 0 016.364 6.364l-.004.004-6.328 6.172a.5.5 0 01-.698 0L1.317 8.682a4.5 4.5 0 010-6.365zm5.657.708a3.5 3.5 0 00-4.952 4.947L8 13.802l5.977-5.83a3.5 3.5 0 00-4.952-4.947c-.235.235-.42.51-.586.815a.5.5 0 01-.878 0 3.46 3.46 0 00-.587-.815z",
     fill: e
   }
-) })), X0 = ({
+) })), Y0 = ({
   color: e = "currentColor",
   ...o
 }) => /* @__PURE__ */ T(f, { ...o, children: [
@@ -284,7 +284,7 @@ const R = ({
   )
 ] });
 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 || {}), _e = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(_e || {});
-const oe = {
+const re = {
   guid: h.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
@@ -389,7 +389,7 @@ const oe = {
     colorName: "travel",
     icon: "airplane_ticket"
   },
-  oe
+  re
 ], ze = 0.625, Ve = ({
   categoryGuid: e,
   icon_ratio: o = ze,
@@ -397,12 +397,12 @@ const oe = {
   sx: l = {},
   variant: c = "filled"
 }) => {
-  const r = H(), n = x.useMemo(
-    () => Be.find((m) => m.guid === e) ?? oe,
+  const r = H(), n = C.useMemo(
+    () => Be.find((m) => m.guid === e) ?? re,
     [e]
   ), s = r.palette.categories[n.colorName];
   return /* @__PURE__ */ a(
-    I,
+    y,
     {
       alignItems: "center",
       bgcolor: () => {
@@ -437,8 +437,8 @@ const oe = {
       disabled: !i(s)
     };
   });
-  return /* @__PURE__ */ a(j, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Me, { color: "primary", orientation: "vertical", value: l, children: r?.map((n) => /* @__PURE__ */ a(
-    Re,
+  return /* @__PURE__ */ a(N, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Me, { color: "primary", orientation: "vertical", value: l, children: r?.map((n) => /* @__PURE__ */ a(
+    Ae,
     {
       onClick: n.onClick,
       sx: {
@@ -482,13 +482,13 @@ const oe = {
       disabled: !i(s)
     };
   });
-  return /* @__PURE__ */ a(I, { sx: { py: 16 }, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(y, { sx: { py: 16 }, children: /* @__PURE__ */ a(
     Q,
     {
       InputLabelProps: {
         shrink: !0
       },
-      SelectProps: { IconComponent: de },
+      SelectProps: { IconComponent: ue },
       defaultValue: l,
       id: "select",
       label: c,
@@ -496,35 +496,35 @@ const oe = {
       sx: { width: "100%" },
       value: l,
       variant: "outlined",
-      children: r?.map((n) => /* @__PURE__ */ a(Ae, { onClick: n.onClick, value: n.label, children: n.label }, n.label))
+      children: r?.map((n) => /* @__PURE__ */ a(Ee, { onClick: n.onClick, value: n.label, children: n.label }, n.label))
     }
   ) });
 }, Ue = (e) => {
-  const { toolbar: o, content: i, shortcuts: l } = Ee(e);
+  const { toolbar: o, content: i, shortcuts: l } = Se(e);
   return /* @__PURE__ */ T(
-    Se,
+    Ie,
     {
       ownerState: e,
       sx: {
         gridTemplateColumns: "minmax(320px, 1fr)",
         overflow: "auto",
         p: 0,
-        [`.${P.toolbar}`]: {
+        [`.${_.toolbar}`]: {
           gridColumn: 1,
           gridRow: 2
         },
-        [`.${P.contentWrapper}`]: {
+        [`.${_.contentWrapper}`]: {
           alignItems: "center",
           gridColumn: 1,
           gridRow: 3
         }
       },
       children: [
-        /* @__PURE__ */ T(I, { sx: { gridColumn: 1, gridRow: 1, p: 16 }, children: [
+        /* @__PURE__ */ T(y, { sx: { gridColumn: 1, gridRow: 1, p: 16 }, children: [
           l,
           o
         ] }),
-        /* @__PURE__ */ a(Ie, { className: P.contentWrapper, children: i })
+        /* @__PURE__ */ a(ye, { className: _.contentWrapper, children: i })
       ]
     }
   );
@@ -535,16 +535,16 @@ const oe = {
   selectedShortcut: l = e.dateRangeThisMonth,
   sx: c = {}
 }) => {
-  const r = H(), n = fe(r.breakpoints.down("sm")), s = x.useMemo(() => {
-    const t = he(), m = ge(t, 1), C = me(t, 1);
+  const r = H(), n = be(r.breakpoints.down("sm")), s = C.useMemo(() => {
+    const t = ge(), m = me(t, 1), x = fe(t, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [Z(t), W(t)]
+        getValue: () => [Z(t), K(t)]
       },
       {
         label: e.dateRangeLastMonth,
-        getValue: () => [Z(m), W(m)]
+        getValue: () => [Z(m), K(m)]
       },
       {
         label: e.dateRangeLast30Days,
@@ -556,11 +556,11 @@ const oe = {
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [K(t), t]
+        getValue: () => [X(t), t]
       },
       {
         label: e.dateRangeLastYear,
-        getValue: () => [K(C), pe(C)]
+        getValue: () => [X(x), he(x)]
       },
       {
         label: e.dateRangeCustom,
@@ -568,11 +568,11 @@ const oe = {
       }
     ];
   }, [e]), d = (t, m) => {
-    const C = m.shortcut;
-    i?.(t, C ? C.label : e.dateRangeCustom);
+    const x = m.shortcut;
+    i?.(t, x ? x.label : e.dateRangeCustom);
   };
-  return /* @__PURE__ */ a(I, { gap: n ? 0 : 16, m: n ? 0 : 8, children: /* @__PURE__ */ a(be, { dateAdapter: Ce, children: /* @__PURE__ */ a(
-    Te,
+  return /* @__PURE__ */ a(y, { gap: n ? 0 : 16, m: n ? 0 : 8, children: /* @__PURE__ */ a(Te, { dateAdapter: Ce, children: /* @__PURE__ */ a(
+    xe,
     {
       calendars: 1,
       localeText: {
@@ -613,7 +613,7 @@ const oe = {
         rightArrowIcon: () => /* @__PURE__ */ a(R, { name: "chevron_right", size: 28 }),
         ...n && {
           toolbar: (t) => /* @__PURE__ */ a(
-            xe,
+            Re,
             {
               dateSeparator: "",
               ...t,
@@ -631,7 +631,7 @@ const oe = {
       value: o
     }
   ) }) });
-}, eo = x.forwardRef(function(o, i) {
+}, eo = C.forwardRef(function(o, i) {
   return /* @__PURE__ */ a(J, { direction: "up", ref: i, ...o });
 }), We = ({
   hasSecondaryAction: e = !0,
@@ -643,7 +643,7 @@ const oe = {
   secondaryColor: n = "primary",
   secondaryText: s = "Cancel"
 }) => /* @__PURE__ */ T(
-  I,
+  y,
   {
     direction: "row",
     gap: 16,
@@ -651,7 +651,7 @@ const oe = {
     sx: { bgcolor: "background.paper", p: 24 },
     children: [
       e && /* @__PURE__ */ a(
-        V,
+        G,
         {
           color: n,
           onClick: l,
@@ -660,7 +660,7 @@ const oe = {
         }
       ),
       i && /* @__PURE__ */ a(
-        V,
+        G,
         {
           color: c,
           disabled: o,
@@ -671,7 +671,7 @@ const oe = {
       )
     ]
   }
-), k = ({
+), F = ({
   bold: e,
   className: o = "",
   children: i,
@@ -714,7 +714,7 @@ const oe = {
       break;
   }
   return /* @__PURE__ */ a(
-    ye,
+    ee,
     {
       className: `mx-kmui-text ${o}`,
       color: l,
@@ -736,8 +736,8 @@ const oe = {
       children: i
     }
   );
-}, Ze = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...i, children: o }), oo = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...i, children: o }), ro = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...i, children: o }), to = ({ className: e = "", children: o, truncate: i, ...l }) => /* @__PURE__ */ a(
-  k,
+}, Ke = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(F, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...i, children: o }), oo = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(F, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...i, children: o }), ro = ({ className: e = "", children: o, ...i }) => /* @__PURE__ */ a(F, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...i, children: o }), to = ({ className: e = "", children: o, truncate: i, ...l }) => /* @__PURE__ */ a(
+  F,
   {
     className: `mx-kmui-text p ${e}`,
     component: "p",
@@ -747,7 +747,7 @@ const oe = {
     children: o
   }
 ), io = ({ copy: e, onClose: o }) => /* @__PURE__ */ T(
-  I,
+  y,
   {
     sx: {
       alignItems: "center",
@@ -757,8 +757,8 @@ const oe = {
       py: 14
     },
     children: [
-      /* @__PURE__ */ a(Ze, { variant: "h3", children: e.title }),
-      /* @__PURE__ */ a(q, { "aria-label": e.close_aria, onClick: o, sx: { mr: -12 }, children: /* @__PURE__ */ a(ue, {}) })
+      /* @__PURE__ */ a(Ke, { variant: "h3", children: e.title }),
+      /* @__PURE__ */ a(q, { "aria-label": e.close_aria, onClick: o, sx: { mr: -12 }, children: /* @__PURE__ */ a(pe, {}) })
     ]
   }
 ), ao = ({
@@ -796,19 +796,19 @@ const oe = {
       )
     ]
   }
-), re = 32, $ = "https://content.moneydesktop.com/storage/MD_Assets", Ke = `${$}/serenity/default_institution_logo.png`, no = ({
+), te = 32, U = "https://content.moneydesktop.com/storage/MD_Assets", Ze = `${U}/serenity/default_institution_logo.png`, no = ({
   alt: e,
   institutionGuid: o,
   logoUrl: i,
-  size: l = re,
+  size: l = te,
   ...c
 }) => /* @__PURE__ */ a(
   "img",
   {
     alt: e,
     height: l,
-    onError: (r) => r.target.src = Ke,
-    src: i || `${$}/Ipad%20Logos/100x100/${o}_100x100.png`,
+    onError: (r) => r.target.src = Ze,
+    src: i || `${U}/Ipad%20Logos/100x100/${o}_100x100.png`,
     style: {
       borderRadius: 4
     },
@@ -819,11 +819,11 @@ const oe = {
   alt: e = "",
   categoryGuid: o,
   merchantGuid: i,
-  size: l = re,
+  size: l = te,
   ...c
 }) => {
-  const [r, n] = x.useState(!1), s = H();
-  return /* @__PURE__ */ T(j, { display: "inline-block", position: "relative", ...c, children: [
+  const [r, n] = C.useState(!1), s = H();
+  return /* @__PURE__ */ T(N, { display: "inline-block", position: "relative", ...c, children: [
     i && !r && /* @__PURE__ */ a(
       "img",
       {
@@ -831,7 +831,7 @@ const oe = {
         "aria-hidden": !e,
         height: l,
         onError: () => n(!0),
-        src: `${$}/merchant_logos/${i}.png`,
+        src: `${U}/merchant_logos/${i}.png`,
         style: {
           backgroundColor: s.palette.common.white,
           borderRadius: 4,
@@ -861,7 +861,7 @@ const oe = {
     ...c
   }
 );
-function Ye(e) {
+function Xe(e) {
   return /* @__PURE__ */ a(J, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
 const so = ({
@@ -877,11 +877,11 @@ const so = ({
   actionText: t = "Undo",
   onActionClick: m
 }) => {
-  const C = H(), O = d && /* @__PURE__ */ a(q, { "aria-label": i, color: "inherit", onClick: o, size: "small", children: /* @__PURE__ */ a(R, { fill: !0, name: "close" }) }), g = `${r}.main`;
+  const x = H(), O = d && /* @__PURE__ */ a(q, { "aria-label": i, color: "inherit", onClick: o, size: "small", children: /* @__PURE__ */ a(R, { fill: !0, name: "close" }) }), g = `${r}.main`;
   return /* @__PURE__ */ a(
     He,
     {
-      TransitionComponent: Ye,
+      TransitionComponent: Xe,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       autoHideDuration: c,
       onClose: o,
@@ -913,7 +913,7 @@ const so = ({
           },
           variant: "filled",
           children: /* @__PURE__ */ T(
-            I,
+            y,
             {
               sx: {
                 flexDirection: "row",
@@ -926,10 +926,10 @@ const so = ({
               },
               children: [
                 /* @__PURE__ */ a(
-                  k,
+                  F,
                   {
                     sx: {
-                      lineHeight: C.typography.body1.lineHeight,
+                      lineHeight: x.typography.body1.lineHeight,
                       flex: 1,
                       minWidth: "70%",
                       px: 5
@@ -939,13 +939,13 @@ const so = ({
                   }
                 ),
                 s && /* @__PURE__ */ a(
-                  V,
+                  G,
                   {
                     color: "inherit",
                     onClick: m || o,
                     size: "small",
                     sx: {
-                      color: C.palette.success.contrastText,
+                      color: x.palette.success.contrastText,
                       whiteSpace: "nowrap",
                       flexShrink: 0,
                       minWidth: "auto",
@@ -961,33 +961,33 @@ const so = ({
       )
     }
   );
-}, F = {
+}, k = {
   REACT: "react",
   REACT_NATIVE: "react_native",
   NATIVE: "native"
-}, N = {
+}, w = {
   LIGHT: "light",
   DARK: "dark"
-}, te = x.createContext(ee), ie = x.createContext(
-  G(N.LIGHT, F.REACT_NATIVE)
+}, ie = C.createContext(oe), ae = C.createContext(
+  $(w.LIGHT, k.REACT_NATIVE)
 ), uo = ({
   children: e,
-  target: o = F.REACT,
-  theme: i = N.LIGHT,
+  target: o = k.REACT,
+  theme: i = w.LIGHT,
   tokenOverrides: l
 }) => {
-  const [c, r] = x.useState(i === N.LIGHT ? ee : Fe), n = x.useMemo(() => ({
+  const [c, r] = C.useState(i === w.LIGHT ? oe : ke), n = C.useMemo(() => ({
     ...l
   }), [l]);
-  return x.useEffect(() => {
-    const s = G(i, o, { ...n });
+  return C.useEffect(() => {
+    const s = $(i, o, { ...n });
     r(s);
-  }, [i, o, n]), o === F.REACT ? /* @__PURE__ */ a(te.Provider, { value: c, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(ie.Provider, { value: c, children: e }));
-}, po = (e = F.REACT, o = {}) => {
-  const i = e === F.REACT ? te : ie, l = x.useContext(i);
-  return l || G(N.LIGHT, e, { ...o });
+  }, [i, o, n]), o === k.REACT ? /* @__PURE__ */ a(ie.Provider, { value: c, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(ae.Provider, { value: c, children: e }));
+}, po = (e = k.REACT, o = {}) => {
+  const i = e === k.REACT ? ie : ae, l = C.useContext(i);
+  return l || $(w.LIGHT, e, { ...o });
 }, ho = ({
-  component: e = B,
+  component: e = z,
   variant: o = "outlined",
   selected: i,
   onChange: l,
@@ -998,16 +998,16 @@ const so = ({
   disabled: d = !1,
   error: t = !1,
   icon: m = !1,
-  sx: C = {},
+  sx: x = {},
   ...O
 }) => {
-  const g = H(), ae = () => g.palette.background.paper, w = () => t ? `inset 0px 0px 0px 2px ${g.palette.error.main}` : d ? i ? `inset 0px 0px 0px 2px ${g.palette.action.disabled}` : o === "outlined" ? `inset 0px 0px 0px 1px ${g.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${g.palette.action.disabled}` : o === "outlined" ? i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(g.palette.common.black, 0.23)}` : i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : g.shadows[1], ne = () => d || t ? g.palette.background.paper : b(g.palette.primary.main, 0.1), le = () => d || t ? w() : o === "outlined" ? i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(g.palette.primary.main, 0.5)}` : w(), ce = () => d || t ? g.palette.background.paper : b(g.palette.primary.main, 0.3);
+  const g = H(), ne = () => g.palette.background.paper, P = () => t ? `inset 0px 0px 0px 2px ${g.palette.error.main}` : d ? i ? `inset 0px 0px 0px 2px ${g.palette.action.disabled}` : o === "outlined" ? `inset 0px 0px 0px 1px ${g.palette.action.disabledBackground}` : `inset 0px 0px 0px 1px ${g.palette.action.disabled}` : o === "outlined" ? i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(g.palette.common.black, 0.23)}` : i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : g.shadows[1], le = () => d || t ? g.palette.background.paper : b(g.palette.primary.main, 0.1), ce = () => d || t ? P() : o === "outlined" ? i ? `inset 0px 0px 0px 2px ${b(g.palette.primary.main, 0.5)}` : `inset 0px 0px 0px 1px ${b(g.palette.primary.main, 0.5)}` : P(), se = () => d || t ? g.palette.background.paper : b(g.palette.primary.main, 0.3);
   return /* @__PURE__ */ a(
-    ke,
+    Fe,
     {
       checked: i,
-      control: e === B ? /* @__PURE__ */ a(
-        B,
+      control: e === z ? /* @__PURE__ */ a(
+        z,
         {
           name: n,
           sx: {
@@ -1038,11 +1038,11 @@ const so = ({
         }
       ),
       disabled: d,
-      label: /* @__PURE__ */ T(_, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
-        m && /* @__PURE__ */ a(_, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: m }),
-        /* @__PURE__ */ T(_, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
-          c && /* @__PURE__ */ a(X, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: c }),
-          /* @__PURE__ */ a(X, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: r })
+      label: /* @__PURE__ */ T(B, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
+        m && /* @__PURE__ */ a(B, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: m }),
+        /* @__PURE__ */ T(B, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
+          c && /* @__PURE__ */ a(j, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: c }),
+          /* @__PURE__ */ a(j, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: r })
         ] })
       ] }),
       labelPlacement: "start",
@@ -1056,32 +1056,79 @@ const so = ({
         mb: 16,
         cursor: d ? "not-allowed" : "pointer",
         opacity: d ? 0.6 : 1,
-        backgroundColor: ae(),
+        backgroundColor: ne(),
         border: "none",
-        boxShadow: w(),
+        boxShadow: P(),
         boxSizing: "border-box",
         transition: g.transitions.create(["background-color", "box-shadow"], {
           duration: g.transitions.duration.short
         }),
         "&:hover": {
-          backgroundColor: ne(),
-          boxShadow: le()
+          backgroundColor: le(),
+          boxShadow: ce()
         },
         "&:active": {
-          backgroundColor: ce()
+          backgroundColor: se()
         },
         "&:focus-visible": {
           outline: `2px solid ${g.palette.info.main}`,
           outlineOffset: "2px"
         },
-        ...C
+        ...x
       },
       value: s
     }
   );
-}, v = {
+}, I = {
   LIGHT: "light"
-}, M = (e) => ({
+}, go = ({ color: e = "neutral", icon: o, label: i, size: l = "small", sx: c, ...r }) => /* @__PURE__ */ T(
+  N,
+  {
+    component: "span",
+    sx: [
+      (n) => {
+        const s = n.palette.mode === I.LIGHT, d = e === "default" ? "neutral" : e;
+        return {
+          alignItems: "center",
+          borderRadius: 999,
+          // pill shape
+          display: "inline-flex",
+          gap: "4px",
+          height: l === "xsmall" ? "16px" : "24px",
+          paddingX: l === "xsmall" ? "6px" : "8px",
+          backgroundColor: n.palette[d][s ? 100 : 800],
+          color: s ? n.palette[d].dark : n.palette[d][100]
+        };
+      },
+      ...Array.isArray(c) ? c : [c]
+    ],
+    ...r,
+    children: [
+      o && /* @__PURE__ */ a(
+        N,
+        {
+          "aria-hidden": !0,
+          component: "span",
+          sx: {
+            alignItems: "center",
+            display: "inline-flex",
+            "& .MuiSvgIcon-root": { fontSize: "16px" }
+          },
+          children: o
+        }
+      ),
+      /* @__PURE__ */ a(
+        ee,
+        {
+          component: "span",
+          sx: { fontWeight: "bold", textTransform: "uppercase" },
+          variant: "tiny",
+          children: i
+        }
+      )
+    ]
+  }
+), A = (e) => ({
   50: L(e, 0.95),
   100: L(e, 0.85),
   200: L(e, 0.7),
@@ -1092,7 +1139,7 @@ const so = ({
   700: D(e, 0.5),
   800: D(e, 0.65),
   900: D(e, 0.75)
-}), A = "#FFFFFF", z = "#000000", Xe = "#F9F9F9", je = "#000000", Qe = "#FFFFFF", Je = "#1A1A1A", E = {
+}), M = "#FFFFFF", V = "#000000", Ye = "#F9F9F9", je = "#000000", Qe = "#FFFFFF", Je = "#1A1A1A", E = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -1108,7 +1155,7 @@ const so = ({
   CHART5: "#60A9FF",
   CHART6: "#C8BAEE",
   CHART7: "#585E67"
-}, y = {
+}, v = {
   CHART_MONO1: "#C3EAFF",
   CHART_MONO2: "#8ED7FF",
   CHART_MONO3: "#60A9FF",
@@ -1162,7 +1209,7 @@ const so = ({
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
 }, qe = (e, o) => {
-  const i = M(o?.primary || E.PRIMARY), l = M(o?.secondary || E.SECONDARY), c = M(o?.error || E.ERROR), r = M(o?.warning || E.WARNING), n = M(o?.info || E.INFO), s = M(o?.success || E.SUCCESS), d = M(o?.grey || E.GREY), t = e === v.LIGHT;
+  const i = A(o?.primary || E.PRIMARY), l = A(o?.secondary || E.SECONDARY), c = A(o?.error || E.ERROR), r = A(o?.warning || E.WARNING), n = A(o?.info || E.INFO), s = A(o?.success || E.SUCCESS), d = A(o?.grey || E.GREY), t = e === I.LIGHT;
   return {
     mode: e,
     // DEPRECATED: Use grey instead
@@ -1174,8 +1221,8 @@ const so = ({
       darker: d[500]
     },
     common: {
-      white: A,
-      black: z
+      white: M,
+      black: V
     },
     primary: {
       ...i,
@@ -1200,12 +1247,12 @@ const so = ({
       main: t ? d[500] : d[400],
       dark: t ? d[700] : d[200],
       darker: t ? d[800] : d[100],
-      contrastText: De(t ? d[700] : d[400], "#fff") > 4.5 ? A : d[900]
+      contrastText: De(t ? d[700] : d[400], "#fff") > 4.5 ? M : d[900]
     },
     text: {
-      primary: t ? d[900] : A,
-      secondary: t ? d[600] : b(A, 0.7),
-      disabled: t ? d[500] : b(A, 0.38)
+      primary: t ? d[900] : M,
+      secondary: t ? d[600] : b(M, 0.7),
+      disabled: t ? d[500] : b(M, 0.38)
     },
     error: {
       ...c,
@@ -1241,18 +1288,18 @@ const so = ({
     },
     grey: d,
     action: {
-      active: t ? b(z, 0.56) : b(A, 0.56),
+      active: t ? b(V, 0.56) : b(M, 0.56),
       hoverOpacity: t ? 0.1 : 0.2,
       selectedOpacity: t ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: t ? o?.background?.default?.light || Xe : o?.background?.default?.dark || je,
+      default: t ? o?.background?.default?.light || Ye : o?.background?.default?.dark || je,
       paper: t ? o?.background?.paper?.light || Qe : o?.background?.paper?.dark || Je,
       highlight: t ? d[200] : d[600],
       highlightPrimary: t ? i[100] : i[500]
     },
-    divider: t ? b(z, 0.12) : b(A, 0.24),
+    divider: t ? b(V, 0.12) : b(M, 0.24),
     categories: {
       autoTransport: t ? u.AUTO_TRANSPORTT : p.AUTO_TRANSPORTT,
       billsUtilities: t ? u.BILLS_UTILITIES : p.BILLS_UTILITIES,
@@ -1287,12 +1334,12 @@ const so = ({
       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: v.CHART_MONO1,
+      chartMono2: v.CHART_MONO2,
+      chartMono3: v.CHART_MONO3,
+      chartMono4: v.CHART_MONO4,
+      chartMono5: v.CHART_MONO5,
+      chartMono6: v.CHART_MONO6
     }
   };
 }, e0 = "Inter, Helvetica, Arial, sans-serif", o0 = (e) => {
@@ -1432,9 +1479,9 @@ const so = ({
 we.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
-const go = (e, o) => {
-  const i = qe(e, o?.paletteOptions), l = o0(o?.typographyOptions), c = [...U().shadows];
-  return c[1] = "0px 2px 8px 0 rgba(0, 0, 0, 0.12)", c[8] = "0px 6px 12px 0 rgba(0, 0, 0, 0.16), 0px 3px 8px 0 rgba(0, 0, 0, 0.06)", c[16] = "0px 12px 20px 0 rgba(0, 0, 0, 0.22)", U({
+const mo = (e, o) => {
+  const i = qe(e, o?.paletteOptions), l = o0(o?.typographyOptions), c = [...W().shadows];
+  return c[1] = "0px 2px 8px 0 rgba(0, 0, 0, 0.12)", c[8] = "0px 6px 12px 0 rgba(0, 0, 0, 0.16), 0px 3px 8px 0 rgba(0, 0, 0, 0.06)", c[16] = "0px 12px 20px 0 rgba(0, 0, 0, 0.22)", W({
     breakpoints: {
       values: {
         xs: 444,
@@ -1466,7 +1513,7 @@ const go = (e, o) => {
         styleOverrides: {
           root: ({ theme: r, ownerState: n }) => {
             const s = n.severity || "info";
-            let d = r.palette.mode === v.LIGHT ? r.palette[s]?.[50] : r.palette[s]?.[800];
+            let d = r.palette.mode === I.LIGHT ? r.palette[s]?.[50] : r.palette[s]?.[800];
             if (n.variant === "filled") {
               const t = s === "warning";
               d = r.palette[s]?.[t ? 400 : 600];
@@ -1785,7 +1832,7 @@ const go = (e, o) => {
               backgroundColor: r.palette.action.hover
             },
             "&:active": {
-              backgroundColor: r.palette.mode === v.LIGHT ? r.palette[n].light : r.palette[n].dark
+              backgroundColor: r.palette.mode === I.LIGHT ? r.palette[n].light : r.palette[n].dark
             }
           })
         }
@@ -2099,7 +2146,7 @@ const go = (e, o) => {
             "&:hover": {
               backgroundColor: b(
                 r.palette.primary.main,
-                i.mode === v.LIGHT ? 0.1 : 0.2
+                i.mode === I.LIGHT ? 0.1 : 0.2
               ),
               borderColor: r.palette.primary.main
             },
@@ -2123,7 +2170,7 @@ const go = (e, o) => {
             props: { color: "error" },
             style: {
               "&:hover": {
-                backgroundColor: b(i.error.main, i.mode === v.LIGHT ? 0.1 : 0.2),
+                backgroundColor: b(i.error.main, i.mode === I.LIGHT ? 0.1 : 0.2),
                 borderColor: i.error.main
               },
               "&.Mui-selected": {
@@ -2147,7 +2194,7 @@ const go = (e, o) => {
               "&:hover": {
                 backgroundColor: b(
                   i.secondary.main,
-                  i.mode === v.LIGHT ? 0.1 : 0.2
+                  i.mode === I.LIGHT ? 0.1 : 0.2
                 ),
                 borderColor: i.secondary.main
               },
@@ -2207,31 +2254,32 @@ export {
   We as DialogFooter,
   io as DialogHeader,
   ao as Drawer,
-  Z0 as EditIcon,
-  K0 as FilterIcon,
+  K0 as EditIcon,
+  Z0 as FilterIcon,
   We as Footer,
-  Ze as H1,
+  Ke as H1,
   oo as H2,
   ro as H3,
-  Y0 as HeartIcon,
+  X0 as HeartIcon,
   e0 as INTER,
   R as Icon,
   Pe as IconWeight,
   no as InstitutionLogo,
   j0 as MXLogoCopyrightIcon,
   Q0 as MXLogoFilledIcon,
-  X0 as MXLogoIcon,
+  Y0 as MXLogoIcon,
   J0 as MXLogoOutlineIcon,
   lo as MerchantLogo,
   to as P,
   ho as SelectionBox,
-  F as TARGETS,
-  N as THEMES,
-  k as Text,
+  k as TARGETS,
+  w as THEMES,
+  go as Tag,
+  F as Text,
   co as TextField,
   so as Toast,
   uo as TokenProvider,
-  go as createMXTheme,
+  mo as createMXTheme,
   po as useTokens
 };
 //# sourceMappingURL=index.es.js.map