@mxenabled/mxui 1.0.3 → 1.0.4

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import { jsx as a, jsxs as y } from "react/jsx-runtime";
+import { jsx as a, jsxs as M } from "react/jsx-runtime";
 import f from "react";
 import L from "@mui/material/Stack";
-import { useTheme as T, createTheme as B } from "@mui/material/styles";
+import { useTheme as v, createTheme as B } from "@mui/material/styles";
 import X from "@mui/material/Icon";
 import { endOfMonth as F } from "date-fns/endOfMonth";
 import { endOfYear as Y } from "date-fns/endOfYear";
@@ -18,9 +18,9 @@ import E from "@mui/material/Box";
 import ae from "@mui/material/ToggleButton";
 import ie from "@mui/material/ToggleButtonGroup";
 import O from "@mui/material/Slide";
-import k from "@mui/material/Button";
-import _ from "@mui/material/Toolbar";
-import V from "@mui/material/IconButton";
+import D from "@mui/material/Button";
+import V from "@mui/material/Toolbar";
+import _ from "@mui/material/IconButton";
 import ne from "@mui/material/Drawer";
 import le from "@mui/material/Typography";
 import ce from "@mui/material/TextField";
@@ -51,7 +51,7 @@ const g = ({
   }
 );
 var fe = /* @__PURE__ */ ((e) => (e[e.Lighter = 100] = "Lighter", e[e.Light = 200] = "Light", e[e.Normal = 300] = "Normal", e[e.Dark = 400] = "Dark", e[e.Darker = 500] = "Darker", e))(fe || {});
-const M = ({
+const y = ({
   color: e,
   fill: o = !1,
   name: n,
@@ -60,7 +60,7 @@ const M = ({
   weight: l = 300,
   ...c
 }) => {
-  const [d, b] = f.useState(!1);
+  const [s, b] = f.useState(!1);
   return f.useEffect(() => {
     document.fonts.ready.then(() => {
       b(!0);
@@ -68,7 +68,7 @@ const M = ({
   }, []), /* @__PURE__ */ a(
     X,
     {
-      color: d ? e && e : void 0,
+      color: s ? e && e : void 0,
       sx: [
         {
           fontSize: r,
@@ -81,7 +81,7 @@ const M = ({
         },
         ...Array.isArray(i) ? i : [i],
         {
-          ...!d && { color: "transparent" }
+          ...!s && { color: "transparent" }
         }
       ],
       ...c,
@@ -180,7 +180,7 @@ const M = ({
     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
   }
-) })), M0 = ({
+) })), y0 = ({
   color: e = "currentColor",
   ...o
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ a(g, { ...o, children: /* @__PURE__ */ a(
@@ -189,7 +189,7 @@ const M = ({
     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
   }
-) })), y0 = ({
+) })), M0 = ({
   color: e = "currentColor",
   ...o
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ a(g, { ...o, children: /* @__PURE__ */ a(
@@ -207,10 +207,10 @@ const M = ({
     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
   }
-) })), T0 = ({
+) })), v0 = ({
   color: e = "currentColor",
   ...o
-}) => /* @__PURE__ */ y(g, { ...o, children: [
+}) => /* @__PURE__ */ M(g, { ...o, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -225,10 +225,10 @@ const M = ({
       fill: e
     }
   )
-] }), v0 = ({
+] }), T0 = ({
   color: e = "currentColor",
   ...o
-}) => /* @__PURE__ */ y(g, { ...o, children: [
+}) => /* @__PURE__ */ M(g, { ...o, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -275,7 +275,7 @@ const M = ({
 ) }), A0 = ({
   color: e = "currentColor",
   ...o
-}) => /* @__PURE__ */ y(g, { ...o, children: [
+}) => /* @__PURE__ */ M(g, { ...o, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -300,12 +300,12 @@ const M = ({
     }
   )
 ] });
-var u = /* @__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))(u || {}), Me = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(Me || {});
+var u = /* @__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))(u || {}), ye = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(ye || {});
 const $ = {
   guid: u.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
-}, ye = [
+}, Me = [
   {
     guid: u.AutoTransport,
     colorName: "autoTransport",
@@ -407,51 +407,51 @@ const $ = {
     icon: "airplane_ticket"
   },
   $
-], Ce = 0.625, Te = ({
+], Ce = 0.625, ve = ({
   categoryGuid: e,
   icon_ratio: o = Ce,
   size: n = 32,
   sx: r = {},
   variant: i = "filled"
 }) => {
-  const l = T(), c = f.useMemo(
-    () => ye.find((s) => s.guid === e) ?? $,
+  const l = v(), c = f.useMemo(
+    () => Me.find((d) => d.guid === e) ?? $,
     [e]
-  ), d = l.palette.categories[c.colorName];
+  ), s = l.palette.categories[c.colorName];
   return /* @__PURE__ */ a(
     L,
     {
       alignItems: "center",
       bgcolor: () => {
-        let s = d;
-        return i === "twotone" && (s = `${s}20`), i === "transparent" || i === "basic" ? "transparent" : s;
+        let d = s;
+        return i === "twotone" && (d = `${d}20`), i === "transparent" || i === "basic" ? "transparent" : d;
       },
       borderRadius: 1,
       color: () => {
-        const s = i === "filled" ? l.palette.common.white : d;
-        return i === "basic" ? l.palette.text.primary : s;
+        const d = i === "filled" ? l.palette.common.white : s;
+        return i === "basic" ? l.palette.text.primary : d;
       },
       height: n,
       justifyContent: "center",
       sx: [...Array.isArray(r) ? r : [r]],
       width: n,
-      children: /* @__PURE__ */ a(M, { name: c.icon, size: n * o })
+      children: /* @__PURE__ */ a(y, { name: c.icon, size: n * o })
     }
   );
-}, ve = ({
+}, Te = ({
   items: e,
   onChange: o,
   isValid: n,
   selected: r
 }) => {
-  const i = T(), l = e?.map((c) => {
-    const d = c.getValue({ isValid: n });
+  const i = v(), l = e?.map((c) => {
+    const s = c.getValue({ isValid: n });
     return {
       label: c.label,
       onClick: () => {
-        o(d, "accept", c);
+        o(s, "accept", c);
       },
-      disabled: !n(d)
+      disabled: !n(s)
     };
   });
   return /* @__PURE__ */ a(E, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(ie, { color: "primary", orientation: "vertical", value: r, children: l?.map((c) => /* @__PURE__ */ a(
@@ -482,15 +482,15 @@ const $ = {
     },
     c.label
   )) }) });
-}, D0 = ({
+}, k0 = ({
   copy: e,
   dateRange: o,
   onRangeChanged: n,
   selectedShortcut: r = e.dateRangeThisMonth,
   sx: i = {}
 }) => {
-  const l = T(), c = ee(l.breakpoints.down("sm")), d = f.useMemo(() => {
-    const p = Q(), s = J(p, 1), m = q(p, 1);
+  const l = v(), c = ee(l.breakpoints.down("sm")), s = f.useMemo(() => {
+    const p = Q(), d = J(p, 1), m = q(p, 1);
     return [
       {
         label: e.dateRangeThisMonth,
@@ -498,7 +498,7 @@ const $ = {
       },
       {
         label: e.dateRangeLastMonth,
-        getValue: () => [w(s), F(s)]
+        getValue: () => [w(d), F(d)]
       },
       {
         label: e.dateRangeLast30Days,
@@ -521,8 +521,8 @@ const $ = {
         getValue: () => [p, p]
       }
     ];
-  }, [e]), b = (p, s) => {
-    const m = s.shortcut;
+  }, [e]), b = (p, d) => {
+    const m = d.shortcut;
     n?.(p, m ? m.label : e.dateRangeCustom);
   };
   return /* @__PURE__ */ a(L, { gap: 16, m: 8, children: /* @__PURE__ */ a(re, { dateAdapter: oe, children: /* @__PURE__ */ a(
@@ -539,22 +539,22 @@ const $ = {
       slotProps: {
         actionBar: { actions: [] },
         shortcuts: {
-          items: c ? [] : d
+          items: c ? [] : s
         },
         toolbar: {
           toolbarFormat: "MMM d, yyyy"
         }
       },
       slots: {
-        leftArrowIcon: () => /* @__PURE__ */ a(M, { name: "chevron_left", size: 28 }),
-        shortcuts: (p) => /* @__PURE__ */ a(ve, { selected: r, ...p }),
-        rightArrowIcon: () => /* @__PURE__ */ a(M, { name: "chevron_right", size: 28 })
+        leftArrowIcon: () => /* @__PURE__ */ a(y, { name: "chevron_left", size: 28 }),
+        shortcuts: (p) => /* @__PURE__ */ a(Te, { selected: r, ...p }),
+        rightArrowIcon: () => /* @__PURE__ */ a(y, { name: "chevron_right", size: 28 })
       },
       sx: { ...i },
       value: o
     }
   ) }) });
-}, k0 = f.forwardRef(function(o, n) {
+}, D0 = f.forwardRef(function(o, n) {
   return /* @__PURE__ */ a(O, { direction: "up", ref: n, ...o });
 }), xe = ({
   hasSecondaryAction: e = !0,
@@ -564,10 +564,10 @@ const $ = {
   primaryColor: i = "primary",
   primaryText: l = "Save",
   secondaryColor: c = "primary",
-  secondaryText: d = "Cancel",
+  secondaryText: s = "Cancel",
   ...b
-}) => /* @__PURE__ */ y(
-  _,
+}) => /* @__PURE__ */ M(
+  V,
   {
     sx: {
       display: "flex",
@@ -580,16 +580,16 @@ const $ = {
     ...b,
     children: [
       e && /* @__PURE__ */ a(
-        k,
+        D,
         {
           color: c,
           onClick: r,
           variant: n ? "outlined" : "contained",
-          children: d
+          children: s
         }
       ),
       n && /* @__PURE__ */ a(
-        k,
+        D,
         {
           color: i,
           disabled: o,
@@ -601,9 +601,9 @@ const $ = {
     ]
   }
 ), L0 = ({ copy: e, onClose: o, ...n }) => {
-  const r = T();
-  return /* @__PURE__ */ y(
-    _,
+  const r = v();
+  return /* @__PURE__ */ M(
+    V,
     {
       sx: {
         "&.MuiToolbar-gutters": {
@@ -612,8 +612,8 @@ const $ = {
       },
       ...n,
       children: [
-        /* @__PURE__ */ a(E, { sx: { flexGrow: 1 }, children: /* @__PURE__ */ a(De, { sx: { fontWeight: 600 }, variant: "H3", children: e.title }) }),
-        /* @__PURE__ */ a(V, { "aria-label": e.close_aria, onClick: o, sx: { mr: -12 }, children: /* @__PURE__ */ a(be, { color: r.palette.primary.main }) })
+        /* @__PURE__ */ a(E, { sx: { flexGrow: 1 }, children: /* @__PURE__ */ a(ke, { sx: { fontWeight: 600 }, variant: "H3", children: e.title }) }),
+        /* @__PURE__ */ a(_, { "aria-label": e.close_aria, onClick: o, sx: { mr: -12 }, children: /* @__PURE__ */ a(be, { color: r.palette.primary.main }) })
       ]
     }
   );
@@ -625,10 +625,10 @@ const $ = {
   onClose: i,
   onSave: l,
   primaryText: c,
-  secondaryText: d,
+  secondaryText: s,
   children: b,
   ...p
-}) => /* @__PURE__ */ y(
+}) => /* @__PURE__ */ M(
   ne,
   {
     anchor: "right",
@@ -647,16 +647,16 @@ const $ = {
           onPrimaryAction: l,
           onSecondaryAction: i,
           primaryText: c,
-          secondaryText: d
+          secondaryText: s
         }
       )
     ]
   }
-), G = 32, I = "https://content.moneydesktop.com/storage/MD_Assets", Ae = `${I}/serenity/default_institution_logo.png`, H0 = ({
+), U = 32, I = "https://content.moneydesktop.com/storage/MD_Assets", Ae = `${I}/serenity/default_institution_logo.png`, H0 = ({
   alt: e,
   institutionGuid: o,
   logoUrl: n,
-  size: r = G,
+  size: r = U,
   ...i
 }) => /* @__PURE__ */ a(
   "img",
@@ -675,11 +675,11 @@ const $ = {
   alt: e = "",
   categoryGuid: o,
   merchantGuid: n,
-  size: r = G,
+  size: r = U,
   ...i
 }) => {
   const [l, c] = f.useState(!1);
-  return /* @__PURE__ */ y(E, { display: "inline-block", position: "relative", ...i, children: [
+  return /* @__PURE__ */ M(E, { display: "inline-block", position: "relative", ...i, children: [
     n && !l && /* @__PURE__ */ a(
       "img",
       {
@@ -696,9 +696,9 @@ const $ = {
         width: r
       }
     ),
-    /* @__PURE__ */ a(Te, { categoryGuid: o, size: r })
+    /* @__PURE__ */ a(ve, { categoryGuid: o, size: r })
   ] });
-}, v = ({
+}, T = ({
   bold: e,
   className: o = "",
   children: n,
@@ -706,36 +706,70 @@ const $ = {
   sx: i = {},
   truncate: l = !0,
   uppercase: c,
-  ...d
-}) => /* @__PURE__ */ a(
-  le,
-  {
-    className: `mx-kmui-text ${o}`,
-    color: r,
-    sx: [
-      e ? {
-        fontWeight: 600
-      } : {},
-      l ? {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap"
-      } : {},
-      c ? {
-        textTransform: "uppercase"
-      } : {},
-      ...Array.isArray(i) ? i : [i]
-    ],
-    ...d,
-    children: n
+  ...s
+}) => {
+  switch (s.variant) {
+    case "Body":
+      s.variant = "body1", console.error("Variant `Body` is deprecated. Use `body1` instead");
+      break;
+    case "Button":
+      s.variant = "button", console.error("Variant `Button` is deprecated. Use `button` instead");
+      break;
+    case "H1":
+      s.variant = "h1", console.error("Variant `H1` is deprecated. Use `h1` instead");
+      break;
+    case "H2":
+      s.variant = "h2", console.error("Variant `H2` is deprecated. Use `h2` instead");
+      break;
+    case "H3":
+      s.variant = "h3", console.error("Variant `H3` is deprecated. Use `h3` instead");
+      break;
+    case "Paragraph":
+      s.variant = "subtitle1", console.error("Variant `Paragraph` is deprecated. Use `subtitle1` instead");
+      break;
+    case "ParagraphSmall":
+      s.variant = "body2", console.error("Variant `ParagraphSmall` is deprecated. Use `subtitle2` instead");
+      break;
+    case "Small":
+      s.variant = "body2", console.error("Variant `Small` is deprecated. Use `body2` instead");
+      break;
+    case "Tiny":
+      s.variant = "tiny", console.error("Variant `Tiny` is deprecated. Use `tiny` instead");
+      break;
+    case "XSmall":
+      s.variant = "caption", console.error("Variant `XSmall` is deprecated. Use `caption` instead");
+      break;
   }
-), De = ({ className: e = "", children: o, ...n }) => /* @__PURE__ */ a(v, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "H1", ...n, children: o }), S0 = ({ className: e = "", children: o, ...n }) => /* @__PURE__ */ a(v, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "H2", ...n, children: o }), F0 = ({ className: e = "", children: o, ...n }) => /* @__PURE__ */ a(v, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "H3", ...n, children: o }), w0 = ({ className: e = "", children: o, truncate: n, ...r }) => /* @__PURE__ */ a(
-  v,
+  return /* @__PURE__ */ a(
+    le,
+    {
+      className: `mx-kmui-text ${o}`,
+      color: r,
+      sx: [
+        e ? {
+          fontWeight: 600
+        } : {},
+        l ? {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        } : {},
+        c ? {
+          textTransform: "uppercase"
+        } : {},
+        ...Array.isArray(i) ? i : [i]
+      ],
+      ...s,
+      children: n
+    }
+  );
+}, ke = ({ className: e = "", children: o, ...n }) => /* @__PURE__ */ a(T, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...n, children: o }), S0 = ({ className: e = "", children: o, ...n }) => /* @__PURE__ */ a(T, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...n, children: o }), F0 = ({ className: e = "", children: o, ...n }) => /* @__PURE__ */ a(T, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...n, children: o }), w0 = ({ className: e = "", children: o, truncate: n, ...r }) => /* @__PURE__ */ a(
+  T,
   {
     className: `mx-kmui-text p ${e}`,
     component: "p",
     truncate: n || !1,
-    variant: "Body",
+    variant: "body1",
     ...r,
     children: o
   }
@@ -757,7 +791,7 @@ const $ = {
     ...i
   }
 );
-function ke(e) {
+function De(e) {
   return /* @__PURE__ */ a(O, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
 const N0 = ({
@@ -768,28 +802,28 @@ const N0 = ({
   severity: i = "success",
   snackbarSx: l,
   showAction: c = !1,
-  showClose: d = !1,
+  showClose: s = !1,
   actionText: b = "Undo",
   onActionClick: p,
-  multiLine: s = !1
+  multiLine: d = !1
 }) => {
-  const m = T(), Z = {
+  const m = v(), Z = {
     success: m.palette.success.dark,
     error: m.palette.error.light,
     info: m.palette.info.lighter,
     warning: m.palette.warning.lighter
-  }, j = /* @__PURE__ */ y(
+  }, j = /* @__PURE__ */ M(
     L,
     {
-      alignItems: s ? "flex-end" : "center",
-      direction: s ? "column-reverse" : "row",
+      alignItems: d ? "flex-end" : "center",
+      direction: d ? "column-reverse" : "row",
       justifyContent: (
         // eslint-disable-next-line no-nested-ternary
-        s && c && d ? "space-between" : "flex-end"
+        d && c && s ? "space-between" : "flex-end"
       ),
       children: [
         c && /* @__PURE__ */ a(
-          k,
+          D,
           {
             color: "inherit",
             onClick: p || o,
@@ -801,14 +835,14 @@ const N0 = ({
             children: b
           }
         ),
-        d && /* @__PURE__ */ a(
-          V,
+        s && /* @__PURE__ */ a(
+          _,
           {
             "aria-label": "close",
             color: "inherit",
             onClick: o,
             sx: { height: 44, width: 44 },
-            children: /* @__PURE__ */ a(M, { fill: !0, name: "close", size: 24, weight: 400 })
+            children: /* @__PURE__ */ a(y, { fill: !0, name: "close", size: 24, weight: 400 })
           }
         )
       ]
@@ -817,14 +851,14 @@ const N0 = ({
   return /* @__PURE__ */ a(
     se,
     {
-      TransitionComponent: ke,
+      TransitionComponent: De,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       autoHideDuration: r,
       onClose: o,
       open: e,
       sx: {
         ...l,
-        width: s ? 400 : 325
+        width: d ? 400 : 325
       },
       children: /* @__PURE__ */ a(
         de,
@@ -834,17 +868,17 @@ const N0 = ({
           sx: {
             display: "flex",
             alignItems: "stretch",
-            minHeight: d && c && s ? 120 : 56,
-            maxHeight: s ? 120 : 56,
+            minHeight: s && c && d ? 120 : 56,
+            maxHeight: d ? 120 : 56,
             backgroundColor: (S) => S.palette.mode === "light" ? S.palette[i].darker : Z[i],
             width: "100%",
             "& .MuiAlert-icon": {
-              alignSelf: s ? "flex-start" : "center"
+              alignSelf: d ? "flex-start" : "center"
             },
             "& .MuiAlert-message": {
-              paddingTop: s ? 12 : 8,
-              paddingBottom: s ? 12 : 8,
-              alignSelf: s ? "flex-start" : "center"
+              paddingTop: d ? 12 : 8,
+              paddingBottom: d ? 12 : 8,
+              alignSelf: d ? "flex-start" : "center"
             },
             "& .MuiAlert-action": {
               alignItems: "stretch",
@@ -853,15 +887,15 @@ const N0 = ({
           },
           variant: "filled",
           children: /* @__PURE__ */ a(
-            v,
+            T,
             {
               sx: {
-                lineHeight: m.typography.Body.lineHeight,
-                whiteSpace: s ? "normal" : "nowrap",
-                overflow: s ? "visible" : "hidden",
-                textOverflow: s ? "clip" : "ellipsis"
+                lineHeight: m.typography.body1.lineHeight,
+                whiteSpace: d ? "normal" : "nowrap",
+                overflow: d ? "visible" : "hidden",
+                textOverflow: d ? "clip" : "ellipsis"
               },
-              truncate: !s,
+              truncate: !d,
               children: n
             }
           )
@@ -876,9 +910,9 @@ const N0 = ({
 }, A = {
   LIGHT: "light",
   DARK: "dark"
-}, U = f.createContext(W), K = f.createContext(
+}, G = f.createContext(W), K = f.createContext(
   H(A.LIGHT, C.REACT_NATIVE)
-), z0 = ({
+), P0 = ({
   children: e,
   target: o = C.REACT,
   theme: n = A.LIGHT,
@@ -888,11 +922,11 @@ const N0 = ({
     ...r
   }), [r]);
   return f.useEffect(() => {
-    const d = H(n, o, { ...c });
-    l(d);
-  }, [n, o, c]), o === C.REACT ? /* @__PURE__ */ a(U.Provider, { value: i, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(K.Provider, { value: i, children: e }));
-}, P0 = (e = C.REACT, o = {}) => {
-  const n = e === C.REACT ? U : K, r = f.useContext(n);
+    const s = H(n, o, { ...c });
+    l(s);
+  }, [n, o, c]), o === C.REACT ? /* @__PURE__ */ a(G.Provider, { value: i, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(K.Provider, { value: i, children: e }));
+}, z0 = (e = C.REACT, o = {}) => {
+  const n = e === C.REACT ? G : K, r = f.useContext(n);
   return r || H(A.LIGHT, e, { ...o });
 }, h = {
   LIGHT: "light",
@@ -1060,68 +1094,63 @@ const N0 = ({
 }), x = "Inter, Helvetica, Arial, sans-serif", Ee = (e) => me(e, {
   fontFamily: x,
   fontSize: 15,
-  Body: {
+  body1: {
     fontSize: 15,
     lineHeight: "20px"
   },
-  body2: void 0,
-  Button: {
+  body2: {
+    fontSize: 13,
+    lineHeight: "16px"
+  },
+  button: {
     fontSize: 15
   },
-  caption: void 0,
-  H1: {
+  caption: {
+    fontSize: 11,
+    lineHeight: "16px"
+  },
+  h1: {
     fontFamily: x,
     fontWeight: 700,
     fontSize: 31,
     lineHeight: "40px"
   },
-  H2: {
+  h2: {
     fontFamily: x,
     fontWeight: 700,
     fontSize: 23,
     lineHeight: "32px"
   },
-  H3: {
+  h3: {
     fontFamily: x,
     fontWeight: 700,
     fontSize: 18,
     lineHeight: "24px"
   },
-  h4: void 0,
   h5: void 0,
   h6: void 0,
   overline: void 0,
-  Paragraph: {
+  subtitle1: {
     fontSize: 15,
     lineHeight: "24px"
   },
-  ParagraphSmall: {
+  subtitle2: {
     fontSize: 13,
     lineHeight: "20px"
   },
-  Small: {
-    fontSize: 13,
-    lineHeight: "16px"
-  },
-  subtitle1: void 0,
-  subtitle2: void 0,
-  Tiny: {
+  tiny: {
     fontSize: 9,
     lineHeight: "12px"
-  },
-  XSmall: {
-    fontSize: 11,
-    lineHeight: "16px"
   }
 });
 pe.setLicenseKey(
   "6e7dd593526efa1f157230ecf06c9b02Tz0xMDA5NjAsRT0xNzYyMDQxNjAwMDAwLFM9cHJvLExNPWFubnVhbCxQVj1RMy0yMDI0LEtWPTI="
 );
-const D = [...B().shadows];
-D[1] = "0px 2px 8px rgba(106, 115, 129, 0.12)";
-D[2] = "0px 6px 12px rgba(106, 115, 129, 0.16), 0px 3px 8px rgba(87, 102, 117, 0.06)";
-D[3] = "0px 12px 20px rgba(106, 115, 129, 0.22)";
-const z = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", P = "inset 0px 0px 0px 2px rgba(82, 138, 224, 0.8)", He = "cubic-bezier(.475,.425,0,.995)", B0 = (e) => {
+const k = [...B().shadows];
+k[1] = "0px 2px 8px rgba(106, 115, 129, 0.12)";
+k[2] = "0px 6px 12px rgba(106, 115, 129, 0.16), 0px 3px 8px rgba(87, 102, 117, 0.06)";
+k[3] = "0px 12px 20px rgba(106, 115, 129, 0.22)";
+const P = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", z = "inset 0px 0px 0px 2px rgba(82, 138, 224, 0.8)", He = "cubic-bezier(.475,.425,0,.995)", B0 = (e) => {
   const o = Le(e), n = Ee(o);
   return B({
     breakpoints: {
@@ -1134,7 +1163,7 @@ const z = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", P = "inset 0px 0px 0px 2px
       }
     },
     palette: o,
-    shadows: D,
+    shadows: k,
     shape: {
       borderRadius: 4
     },
@@ -1160,10 +1189,10 @@ const z = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", P = "inset 0px 0px 0px 2px
       MuiAlert: {
         defaultProps: {
           iconMapping: {
-            success: /* @__PURE__ */ a(M, { fill: !0, name: "check_circle", size: 24, weight: 400 }),
-            error: /* @__PURE__ */ a(M, { fill: !0, name: "error", size: 24, weight: 400 }),
-            warning: /* @__PURE__ */ a(M, { fill: !0, name: "warning", size: 24, weight: 400 }),
-            info: /* @__PURE__ */ a(M, { fill: !0, name: "info", size: 24, weight: 400 })
+            success: /* @__PURE__ */ a(y, { fill: !0, name: "check_circle", size: 24, weight: 400 }),
+            error: /* @__PURE__ */ a(y, { fill: !0, name: "error", size: 24, weight: 400 }),
+            warning: /* @__PURE__ */ a(y, { fill: !0, name: "warning", size: 24, weight: 400 }),
+            info: /* @__PURE__ */ a(y, { fill: !0, name: "info", size: 24, weight: 400 })
           }
         },
         styleOverrides: {
@@ -1200,7 +1229,7 @@ const z = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", P = "inset 0px 0px 0px 2px
         styleOverrides: {
           root: {
             "&.Mui-focusVisible": {
-              boxShadow: z
+              boxShadow: P
             }
           }
         }
@@ -1267,7 +1296,7 @@ const z = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", P = "inset 0px 0px 0px 2px
               cursor: "not-allowed"
             },
             "&.Mui-focusVisible": {
-              boxShadow: z
+              boxShadow: P
             }
           },
           sizeMedium: {
@@ -1310,7 +1339,7 @@ const z = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", P = "inset 0px 0px 0px 2px
             textTransform: "none",
             fontWeight: 600,
             "&.Mui-focusVisible": {
-              boxShadow: P
+              boxShadow: z
             },
             "&:not(.Mui-selected)": {
               borderBottom: `2px solid ${r.palette.divider}`
@@ -1674,7 +1703,7 @@ const z = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", P = "inset 0px 0px 0px 2px
             paddingTop: 12,
             paddingBottom: 12,
             "&.Mui-focusVisible": {
-              boxShadow: P
+              boxShadow: z
             },
             "&:active": {
               backgroundColor: `${r.palette.secondary.lighter}33`
@@ -1930,45 +1959,45 @@ export {
   u0 as ArrowLeftIcon,
   p0 as AttentionFilledIcon,
   g as BaseIcon,
-  k0 as BottomSheetTransition,
+  D0 as BottomSheetTransition,
   h0 as CalendarIcon,
   u as CategoryGuids,
-  Te as CategoryIcon,
-  ye as CategoryIconList,
-  Me as CategoryIconVariants,
+  ve as CategoryIcon,
+  Me as CategoryIconList,
+  ye as CategoryIconVariants,
   g0 as CheckmarkFilledIcon,
   m0 as ChevronDownIcon,
   f0 as ChevronLeftIcon,
   b0 as ChevronRightIcon,
   be as CloseIcon,
-  D0 as DateRangePicker,
+  k0 as DateRangePicker,
   xe as DialogFooter,
   L0 as DialogHeader,
   E0 as Drawer,
-  M0 as EditIcon,
-  y0 as FilterIcon,
+  y0 as EditIcon,
+  M0 as FilterIcon,
   xe as Footer,
-  De as H1,
+  ke as H1,
   S0 as H2,
   F0 as H3,
   C0 as HeartIcon,
   x as INTER,
-  M as Icon,
+  y as Icon,
   fe as IconWeight,
   H0 as InstitutionLogo,
-  v0 as MXLogoCopyrightIcon,
+  T0 as MXLogoCopyrightIcon,
   x0 as MXLogoFilledIcon,
-  T0 as MXLogoIcon,
+  v0 as MXLogoIcon,
   A0 as MXLogoOutlineIcon,
   I0 as MerchantLogo,
   w0 as P,
   C as TARGETS,
   A as THEMES,
-  v as Text,
+  T as Text,
   R0 as TextField,
   N0 as Toast,
-  z0 as TokenProvider,
+  P0 as TokenProvider,
   B0 as createMXTheme,
-  P0 as useTokens
+  z0 as useTokens
 };
 //# sourceMappingURL=index.es.js.map