@mxenabled/mxui 2.4.0 → 2.5.0

package/dist/index.es.js

@@ -1,13 +1,13 @@
 import { jsx as a, jsxs as b } from "react/jsx-runtime";
 import N from "react";
 import A from "@mui/material/Stack";
-import { useTheme as E, createTheme as $ } from "@mui/material/styles";
+import { useTheme as I, createTheme as $ } from "@mui/material/styles";
 import { Icon as le, ExpandMore as se, Close as ce } from "@mxenabled/mx-icons";
 import { endOfMonth as U } from "date-fns/endOfMonth";
 import { endOfYear as de } from "date-fns/endOfYear";
 import { startOfToday as ue } from "date-fns/startOfToday";
-import { startOfMonth as G } from "date-fns/startOfMonth";
-import { startOfYear as V } from "date-fns/startOfYear";
+import { startOfMonth as V } from "date-fns/startOfMonth";
+import { startOfYear as G } from "date-fns/startOfYear";
 import { subDays as W } from "date-fns/subDays";
 import { subMonths as pe } from "date-fns/subMonths";
 import { subYears as he } from "date-fns/subYears";
@@ -28,7 +28,7 @@ import ye from "@mui/material/Typography";
 import Ie from "@mui/material/Drawer";
 import Ee from "@mui/material/Snackbar";
 import Oe from "@mui/material/Alert";
-import { FormControlLabel as Fe, Box as w, Typography as Y, Radio as P, Checkbox as ve, alpha as f, darken as L, lighten as O, getContrastRatio as Le } from "@mui/material";
+import { FormControlLabel as Fe, Box as w, Typography as Y, Radio as P, Checkbox as ve, alpha as f, darken as L, lighten as E, getContrastRatio as Le } from "@mui/material";
 import { circularProgressClasses as Ne } from "@mui/material/CircularProgress";
 import { LicenseInfo as ke } from "@mui/x-license";
 const k = ({
@@ -36,7 +36,7 @@ const k = ({
   height: i,
   size: o = 16,
   viewBox: s = "0 0 16 16",
-  width: l
+  width: n
 }) => /* @__PURE__ */ a(
   "svg",
   {
@@ -45,11 +45,11 @@ const k = ({
     focusable: !1,
     height: i || o,
     viewBox: s,
-    width: l || o,
+    width: n || o,
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
-), x = ({ color: e, fill: i = !1, name: o, size: s = 20, sx: l, ...t }) => /* @__PURE__ */ a(le, { color: e, fill: i, name: o, size: s, sx: l, ...t }), Ft = ({
+), x = ({ 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 }), Ft = ({
   color: e = "currentColor",
   ...i
 }) => /* @__PURE__ */ b(k, { ...i, children: [
@@ -254,47 +254,47 @@ const te = {
   icon_ratio: i = we,
   size: o = 32,
   sx: s = {},
-  variant: l = "filled"
+  variant: n = "filled"
 }) => {
-  const t = E(), n = N.useMemo(
+  const r = I(), l = N.useMemo(
     () => De.find((m) => m.guid === e) ?? te,
     [e]
-  ), c = t.palette.categories[n.colorName];
+  ), c = r.palette.categories[l.colorName];
   return /* @__PURE__ */ a(
     A,
     {
       alignItems: "center",
       bgcolor: () => {
         let m = c;
-        return l === "twotone" && (m = `${m}20`), l === "transparent" || l === "basic" ? "transparent" : m;
+        return n === "twotone" && (m = `${m}20`), n === "transparent" || n === "basic" ? "transparent" : m;
       },
       borderRadius: 1,
       color: () => {
-        const m = l === "filled" ? t.palette.common.white : c;
-        return l === "basic" ? t.palette.text.primary : m;
+        const m = n === "filled" ? r.palette.common.white : c;
+        return n === "basic" ? r.palette.text.primary : m;
       },
       height: o,
       justifyContent: "center",
       sx: [...Array.isArray(s) ? s : [s]],
       width: o,
-      children: /* @__PURE__ */ a(x, { name: n.icon, size: o * i })
+      children: /* @__PURE__ */ a(x, { name: l.icon, size: o * i })
     }
   );
 }, _e = ({ items: e, selected: i }) => {
-  const o = E(), { setValue: s } = X(), l = Z(), t = e?.map((n) => {
-    const c = n.getValue({ isValid: l });
+  const o = I(), { setValue: s } = X(), n = Z(), r = e?.map((l) => {
+    const c = l.getValue({ isValid: n });
     return {
-      label: n.label,
+      label: l.label,
       onClick: () => {
-        s(c, { changeImportance: "accept", shortcut: n });
+        s(c, { changeImportance: "accept", shortcut: l });
       },
-      disabled: !l(c)
+      disabled: !n(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: t?.map((n) => /* @__PURE__ */ a(
+  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(
     xe,
     {
-      onClick: n.onClick,
+      onClick: l.onClick,
       sx: {
         borderWidth: 1,
         color: "secondary.dark",
@@ -314,24 +314,24 @@ const te = {
           color: "primary"
         }
       },
-      value: n.label,
-      children: n.label
+      value: l.label,
+      children: l.label
     },
-    n.label
+    l.label
   )) }) });
 }, Be = ({
   items: e,
   selected: i,
   selectLabel: o
 }) => {
-  const { setValue: s } = X(), l = Z(), t = e?.map((n) => {
-    const c = n.getValue({ isValid: l });
+  const { setValue: s } = X(), n = Z(), r = e?.map((l) => {
+    const c = l.getValue({ isValid: n });
     return {
-      label: n.label,
+      label: l.label,
       onClick: () => {
-        s(c, { changeImportance: "accept", shortcut: n });
+        s(c, { changeImportance: "accept", shortcut: l });
       },
-      disabled: !l(c)
+      disabled: !n(c)
     };
   });
   return /* @__PURE__ */ a(A, { sx: { py: 16 }, children: /* @__PURE__ */ a(
@@ -345,15 +345,15 @@ const te = {
       sx: { width: "100%" },
       value: i,
       variant: "outlined",
-      children: t?.map((n) => /* @__PURE__ */ a(Me, { onClick: n.onClick, value: n.label, children: n.label }, n.label))
+      children: r?.map((l) => /* @__PURE__ */ a(Me, { onClick: l.onClick, value: l.label, children: l.label }, l.label))
     }
   ) });
 }, ze = (e) => {
-  const { toolbar: i, content: o, shortcuts: s, ownerState: l } = Ce(e);
+  const { toolbar: i, content: o, shortcuts: s, ownerState: n } = Ce(e);
   return /* @__PURE__ */ b(
     Se,
     {
-      ownerState: l,
+      ownerState: n,
       sx: {
         gridTemplateColumns: "minmax(320px, 1fr)",
         overflow: "auto",
@@ -377,7 +377,7 @@ const te = {
           Ae,
           {
             className: D.contentWrapper,
-            ownerState: l,
+            ownerState: n,
             children: o
           }
         )
@@ -389,45 +389,45 @@ const te = {
   dateRange: i,
   onRangeChanged: o,
   selectedShortcut: s = e.dateRangeThisMonth,
-  sx: l = {}
+  sx: n = {}
 }) => {
-  const t = E(), n = ge(t.breakpoints.down("sm")), c = N.useMemo(() => {
-    const r = ue(), m = pe(r, 1), T = he(r, 1);
+  const r = I(), l = ge(r.breakpoints.down("sm")), c = N.useMemo(() => {
+    const t = ue(), m = pe(t, 1), T = he(t, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [G(r), U(r)]
+        getValue: () => [V(t), U(t)]
       },
       {
         label: e.dateRangeLastMonth,
-        getValue: () => [G(m), U(m)]
+        getValue: () => [V(m), U(m)]
       },
       {
         label: e.dateRangeLast30Days,
-        getValue: () => [W(r, 30), r]
+        getValue: () => [W(t, 30), t]
       },
       {
         label: e.dateRangeLast90Days,
-        getValue: () => [W(r, 90), r]
+        getValue: () => [W(t, 90), t]
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [V(r), r]
+        getValue: () => [G(t), t]
       },
       {
         label: e.dateRangeLastYear,
-        getValue: () => [V(T), de(T)]
+        getValue: () => [G(T), de(T)]
       },
       {
         label: e.dateRangeCustom,
-        getValue: () => [r, r]
+        getValue: () => [t, t]
       }
     ];
-  }, [e]), d = (r, m) => {
+  }, [e]), d = (t, m) => {
     const T = m.shortcut;
-    o?.(r, T ? T.label : e.dateRangeCustom);
+    o?.(t, T ? T.label : e.dateRangeCustom);
   };
-  return /* @__PURE__ */ a(A, { gap: n ? 0 : 16, m: n ? 0 : 8, children: /* @__PURE__ */ a(me, { dateAdapter: be, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(A, { gap: l ? 0 : 16, m: l ? 0 : 8, children: /* @__PURE__ */ a(me, { dateAdapter: be, children: /* @__PURE__ */ a(
     fe,
     {
       calendars: 1,
@@ -456,24 +456,24 @@ const te = {
         }
       },
       slots: {
-        ...n && { layout: ze },
+        ...l && { layout: ze },
         leftArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_left", size: 28 }),
-        shortcuts: (r) => n ? /* @__PURE__ */ a(
+        shortcuts: (t) => l ? /* @__PURE__ */ a(
           Be,
           {
             selectLabel: e.dateRangeSelectARange,
             selected: s,
-            ...r
+            ...t
           }
-        ) : /* @__PURE__ */ a(_e, { selected: s, ...r }),
+        ) : /* @__PURE__ */ a(_e, { selected: s, ...t }),
         rightArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_right", size: 28 }),
-        ...n && {
-          toolbar: (r) => /* @__PURE__ */ a(
+        ...l && {
+          toolbar: (t) => /* @__PURE__ */ a(
             Te,
             {
               dateSeparator: "",
               format: "MM/dd/yyyy",
-              ...r,
+              ...t,
               slotProps: {
                 textField: ({ position: m }) => ({
                   label: m === "start" ? e.dateRangeFrom : e.dateRangeTo
@@ -484,7 +484,7 @@ const te = {
           )
         }
       },
-      sx: { ...l },
+      sx: { ...n },
       value: i
     }
   ) }) });
@@ -495,9 +495,9 @@ const te = {
   isPrimaryDisabled: i,
   onPrimaryAction: o,
   onSecondaryAction: s,
-  primaryColor: l = "primary",
-  primaryText: t = "Save",
-  secondaryColor: n = "primary",
+  primaryColor: n = "primary",
+  primaryText: r = "Save",
+  secondaryColor: l = "primary",
   secondaryText: c = "Cancel"
 }) => /* @__PURE__ */ b(
   A,
@@ -510,7 +510,7 @@ const te = {
       e && /* @__PURE__ */ a(
         B,
         {
-          color: n,
+          color: l,
           onClick: s,
           variant: o ? "outlined" : "contained",
           children: c
@@ -519,11 +519,11 @@ const te = {
       o && /* @__PURE__ */ a(
         B,
         {
-          color: l,
+          color: n,
           disabled: i,
           onClick: o,
           variant: "contained",
-          children: t
+          children: r
         }
       )
     ]
@@ -533,9 +533,9 @@ const te = {
   className: i = "",
   children: o,
   color: s,
-  sx: l = {},
-  truncate: t,
-  uppercase: n,
+  sx: n = {},
+  truncate: r,
+  uppercase: l,
   ...c
 }) => /* @__PURE__ */ a(
   ye,
@@ -546,15 +546,15 @@ const te = {
       e ? {
         fontWeight: 600
       } : {},
-      t ? {
+      r ? {
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap"
       } : {},
-      n ? {
+      l ? {
         textTransform: "uppercase"
       } : {},
-      ...Array.isArray(l) ? l : [l]
+      ...Array.isArray(n) ? n : [n]
     ],
     ...c,
     children: o
@@ -579,31 +579,31 @@ const te = {
   disableSave: i,
   id: o,
   isOpen: s,
-  onClose: l,
-  onSave: t,
-  primaryText: n,
+  onClose: n,
+  onSave: r,
+  primaryText: l,
   secondaryText: c,
   children: d,
-  ...r
+  ...t
 }) => /* @__PURE__ */ b(
   Ie,
   {
     anchor: "right",
     className: `mx-kmui-drawer ${e}`,
     id: o ?? void 0,
-    onClose: l,
+    onClose: n,
     open: s,
     variant: "temporary",
-    ...r,
+    ...t,
     children: [
       d,
-      t && /* @__PURE__ */ a(
+      r && /* @__PURE__ */ a(
         $e,
         {
           isPrimaryDisabled: i,
-          onPrimaryAction: t,
-          onSecondaryAction: l,
-          primaryText: n,
+          onPrimaryAction: r,
+          onSecondaryAction: n,
+          primaryText: l,
           secondaryText: c
         }
       )
@@ -614,39 +614,39 @@ const te = {
   institutionGuid: i,
   logoUrl: o,
   size: s = re,
-  ...l
+  ...n
 }) => /* @__PURE__ */ a(
   "img",
   {
     alt: e,
     height: s,
-    onError: (t) => {
-      const n = t.target;
-      n.src !== K && (n.src = K);
+    onError: (r) => {
+      const l = r.target;
+      l.src !== K && (l.src = K);
     },
     src: o || `${z}/Ipad%20Logos/100x100/${i}_100x100.png`,
     style: {
       borderRadius: 4
     },
     width: s,
-    ...l
+    ...n
   }
 ), $t = ({
   alt: e = "",
   categoryGuid: i,
   merchantGuid: o,
   size: s = re,
-  ...l
+  ...n
 }) => {
-  const [t, n] = N.useState(!1), c = E();
-  return /* @__PURE__ */ b(Q, { display: "inline-block", position: "relative", ...l, children: [
-    o && !t && /* @__PURE__ */ a(
+  const [r, l] = N.useState(!1), c = I();
+  return /* @__PURE__ */ b(Q, { display: "inline-block", position: "relative", ...n, children: [
+    o && !r && /* @__PURE__ */ a(
       "img",
       {
         alt: e,
         "aria-hidden": !e,
         height: s,
-        onError: () => n(!0),
+        onError: () => l(!0),
         src: `${z}/merchant_logos/${o}.png`,
         style: {
           backgroundColor: c.palette.common.white,
@@ -664,7 +664,7 @@ const te = {
   label: i = "",
   shrink: o = !0,
   variant: s = "outlined",
-  ...l
+  ...n
 }) => /* @__PURE__ */ a(
   J,
   {
@@ -674,36 +674,36 @@ const te = {
     disabled: e,
     label: i,
     variant: s,
-    ...l
+    ...n
   }
 );
-function Ge(e) {
+function Ve(e) {
   return /* @__PURE__ */ a(q, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
-const Gt = ({
+const Vt = ({
   open: e = !0,
   handleClose: i,
   closeAriaLabel: o,
   message: s,
-  autoHideDuration: l = 3e3,
-  severity: t = "success",
-  snackbarSx: n,
+  autoHideDuration: n = 3e3,
+  severity: r = "success",
+  snackbarSx: l,
   showAction: c = !1,
   showClose: d = !1,
-  actionText: r = "Undo",
+  actionText: t = "Undo",
   onActionClick: m
 }) => {
-  const T = E(), v = d && /* @__PURE__ */ a(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ a(x, { fill: !0, name: "close" }) }), g = `${t}.main`;
+  const T = I(), v = d && /* @__PURE__ */ a(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ a(x, { fill: !0, name: "close" }) }), g = `${r}.main`;
   return /* @__PURE__ */ a(
     Ee,
     {
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      autoHideDuration: l,
+      autoHideDuration: n,
       onClose: i,
       open: e,
-      slots: { transition: Ge },
+      slots: { transition: Ve },
       sx: {
-        ...n,
+        ...l,
         maxWidth: 568,
         minWidth: 288,
         minHeight: 56
@@ -712,7 +712,7 @@ const Gt = ({
         Oe,
         {
           action: v,
-          severity: t,
+          severity: r,
           sx: {
             backgroundColor: g,
             display: "flex",
@@ -766,7 +766,7 @@ const Gt = ({
                       minWidth: "auto",
                       justifyContent: "flex-start"
                     },
-                    children: r
+                    children: t
                   }
                 )
               ]
@@ -776,22 +776,22 @@ const Gt = ({
       )
     }
   );
-}, Vt = ({
+}, Gt = ({
   component: e = P,
   variant: i = "outlined",
   selected: o,
   onChange: s,
-  headline: l,
-  message: t,
-  name: n,
+  headline: n,
+  message: r,
+  name: l,
   value: c,
   disabled: d = !1,
-  error: r = !1,
+  error: t = !1,
   icon: m = !1,
   sx: T = {},
   ...v
 }) => {
-  const g = E(), oe = () => g.palette.background.paper, H = () => r ? `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 || r ? g.palette.background.paper : f(g.palette.primary.main, 0.1), ae = () => d || r ? 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 || r ? g.palette.background.paper : f(g.palette.primary.main, 0.3);
+  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(
     Fe,
     {
@@ -799,7 +799,7 @@ const Gt = ({
       control: e === P ? /* @__PURE__ */ a(
         P,
         {
-          name: n,
+          name: l,
           sx: {
             p: 0,
             ml: 16,
@@ -814,7 +814,7 @@ const Gt = ({
       ) : /* @__PURE__ */ a(
         ve,
         {
-          name: n,
+          name: l,
           sx: {
             p: 0,
             ml: 16,
@@ -831,8 +831,8 @@ const Gt = ({
       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: [
-          l && /* @__PURE__ */ a(Y, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: l }),
-          /* @__PURE__ */ a(Y, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: t })
+          n && /* @__PURE__ */ a(Y, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: n }),
+          /* @__PURE__ */ a(Y, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: r })
         ] })
       ] }),
       labelPlacement: "start",
@@ -869,20 +869,20 @@ const Gt = ({
       value: c
     }
   );
-}, I = {
+}, O = {
   LIGHT: "light"
 }, R = (e) => ({
-  50: O(e, 0.95),
-  100: O(e, 0.85),
-  200: O(e, 0.7),
-  300: O(e, 0.55),
-  400: O(e, 0.3),
+  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: L(e, 0.3),
   700: L(e, 0.5),
   800: L(e, 0.65),
   900: L(e, 0.75)
-}), M = "#FFFFFF", _ = "#000000", Ve = "#F9F9F9", We = "#000000", Ye = "#FFFFFF", Ke = "#000000", C = {
+}), M = "#FFFFFF", _ = "#000000", Ge = "#F9F9F9", We = "#000000", Ye = "#FFFFFF", Ke = "#000000", C = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -952,7 +952,7 @@ const Gt = ({
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
 }, je = (e, i) => {
-  const o = R(i?.primary || C.PRIMARY), s = R(i?.secondary || C.SECONDARY), l = R(i?.error || C.ERROR), t = R(i?.warning || C.WARNING), n = R(i?.info || C.INFO), c = R(i?.success || C.SUCCESS), d = R(i?.grey || C.GREY), r = e === I.LIGHT;
+  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;
   return {
     mode: e,
     common: {
@@ -961,103 +961,103 @@ const Gt = ({
     },
     primary: {
       ...o,
-      lighter: r ? o[100] : o[700],
-      light: r ? o[300] : o[600],
-      main: r ? o[500] : o[400],
-      dark: r ? o[700] : o[200],
-      darker: r ? o[800] : o[100]
+      lighter: t ? o[100] : o[700],
+      light: t ? o[300] : o[600],
+      main: t ? o[500] : o[400],
+      dark: t ? o[700] : o[200],
+      darker: t ? o[800] : o[100]
     },
     secondary: {
       ...s,
-      lighter: r ? s[100] : s[800],
-      light: r ? s[300] : s[600],
-      main: r ? s[500] : s[400],
-      dark: r ? s[700] : s[200],
-      darker: r ? s[800] : s[100]
+      lighter: t ? s[100] : s[800],
+      light: t ? s[300] : s[600],
+      main: t ? s[500] : s[400],
+      dark: t ? s[700] : s[200],
+      darker: t ? s[800] : s[100]
     },
     neutral: {
       ...d,
-      lighter: r ? d[100] : d[800],
-      light: r ? d[300] : d[600],
-      main: r ? d[500] : d[400],
-      dark: r ? d[700] : d[200],
-      darker: r ? d[800] : d[100],
-      contrastText: Le(r ? d[700] : d[400], "#fff") > 4.5 ? M : d[900]
+      lighter: t ? d[100] : d[800],
+      light: t ? d[300] : d[600],
+      main: t ? d[500] : d[400],
+      dark: t ? d[700] : d[200],
+      darker: t ? d[800] : d[100],
+      contrastText: Le(t ? d[700] : d[400], "#fff") > 4.5 ? M : d[900]
     },
     text: {
-      primary: r ? d[900] : M,
-      secondary: r ? d[600] : f(M, 0.7),
-      disabled: r ? d[500] : f(M, 0.38)
+      primary: t ? d[900] : M,
+      secondary: t ? d[600] : f(M, 0.7),
+      disabled: t ? d[500] : f(M, 0.38)
     },
     error: {
-      ...l,
-      lighter: r ? l[100] : l[700],
-      light: r ? l[300] : l[600],
-      main: r ? l[500] : l[400],
-      dark: r ? l[700] : l[200],
-      darker: r ? l[800] : l[100]
+      ...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]
     },
     warning: {
-      ...t,
-      lighter: r ? t[100] : t[700],
-      light: r ? t[300] : t[600],
-      main: r ? t[500] : t[400],
-      dark: r ? t[700] : t[200],
-      darker: r ? t[800] : t[100]
+      ...r,
+      lighter: t ? r[100] : r[700],
+      light: t ? r[300] : r[600],
+      main: t ? r[500] : r[400],
+      dark: t ? r[700] : r[200],
+      darker: t ? r[800] : r[100]
     },
     info: {
-      ...n,
-      lighter: r ? n[100] : n[700],
-      light: r ? n[300] : n[600],
-      main: r ? n[500] : n[400],
-      dark: r ? n[700] : n[200],
-      darker: r ? 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]
     },
     success: {
       ...c,
-      lighter: r ? c[100] : c[700],
-      light: r ? c[300] : c[600],
-      main: r ? c[500] : c[400],
-      dark: r ? c[700] : c[200],
-      darker: r ? c[800] : c[100]
+      lighter: t ? c[100] : c[700],
+      light: t ? c[300] : c[600],
+      main: t ? c[500] : c[400],
+      dark: t ? c[700] : c[200],
+      darker: t ? c[800] : c[100]
     },
     grey: d,
     action: {
-      active: r ? f(_, 0.56) : f(M, 0.56),
-      hoverOpacity: r ? 0.1 : 0.2,
-      selectedOpacity: r ? 0.16 : 0.25,
+      active: t ? f(_, 0.56) : f(M, 0.56),
+      hoverOpacity: t ? 0.1 : 0.2,
+      selectedOpacity: t ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: r ? i?.background?.default?.light || Ve : i?.background?.default?.dark || We,
-      paper: r ? i?.background?.paper?.light || Ye : i?.background?.paper?.dark || Ke,
-      highlight: r ? d[200] : d[600],
-      highlightPrimary: r ? o[100] : o[500]
+      default: t ? i?.background?.default?.light || Ge : i?.background?.default?.dark || We,
+      paper: t ? i?.background?.paper?.light || Ye : i?.background?.paper?.dark || Ke,
+      highlight: t ? d[200] : d[600],
+      highlightPrimary: t ? o[100] : o[500]
     },
-    divider: r ? f(_, 0.12) : f(M, 0.24),
+    divider: t ? f(_, 0.12) : f(M, 0.24),
     categories: {
-      autoTransport: r ? u.AUTO_TRANSPORTT : p.AUTO_TRANSPORTT,
-      billsUtilities: r ? u.BILLS_UTILITIES : p.BILLS_UTILITIES,
-      businessServices: r ? u.BUSINESS_SERVICES : p.BUSINESS_SERVICES,
-      education: r ? u.EDUCATION : p.EDUCATION,
-      entertainment: r ? u.ENTERTAINMENT : p.ENTERTAINMENT,
-      feesCharges: r ? u.FEES_CHARGES : p.FEES_CHARGES,
-      financial: r ? u.FINANCIAL : p.FINANCIAL,
-      foodDining: r ? u.FOOD_DINING : p.FOOD_DINING,
-      giftsDonations: r ? u.GIFTS_DONATIONS : p.GIFTS_DONATIONS,
-      healthFitness: r ? u.HEALTH_FITNESS : p.HEALTH_FITNESS,
-      home: r ? u.HOME : p.HOME,
-      income: r ? u.INCOME : p.INCOME,
-      investments: r ? u.INVESTMENTS : p.INVESTMENTS,
-      kids: r ? u.KIDS : p.KIDS,
-      others: r ? u.OTHERS : p.OTHERS,
-      personalCare: r ? u.PERSONAL_CARE : p.PERSONAL_CARE,
-      pets: r ? u.PETS : p.PETS,
-      shopping: r ? u.SHOPPING : p.SHOPPING,
-      taxes: r ? u.TAXES : p.TAXES,
-      transfer: r ? u.TRANSFER : p.TRANSFER,
-      travel: r ? u.TRAVEL : p.TRAVEL,
-      uncategorized: r ? u.UNCATEGORIZED : p.UNCATEGORIZED
+      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
     },
     chart: {
       chart1: S.CHART1,
@@ -1141,10 +1141,11 @@ ke.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
 const Wt = (e, i) => {
-  const o = je(e, i?.paletteOptions), s = Xe(i?.typographyOptions), l = [...$().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)", $({
-    breakpoints: {
+  const o = je(e, i?.paletteOptions), s = Xe(i?.typographyOptions), n = [...$().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)", $({
+    breakpoints: i?.breakpoints || {
       values: {
+        // TODO: Remove these default values in v3. Users should provide their own breakpoints if they want to.
         xs: 444,
         sm: 600,
         md: 900,
@@ -1157,7 +1158,7 @@ const Wt = (e, i) => {
     shape: {
       borderRadius: i?.shapeOptions?.borderRadius || 4
     },
-    shadows: l,
+    shadows: n,
     ...i?.useMUIStandardSpacing ? {} : { spacing: 1 },
     // TODO: update spacing, we're back to a 8-base which is default for MUI 2.x
     typography: s,
@@ -1173,19 +1174,19 @@ const Wt = (e, i) => {
           variant: "outlined"
         },
         styleOverrides: {
-          root: ({ theme: t, ownerState: n }) => {
-            const c = n.severity || "info";
-            let d = t.palette.mode === I.LIGHT ? t.palette[c]?.[50] : t.palette[c]?.[800];
-            if (n.variant === "filled") {
-              const r = c === "warning";
-              d = t.palette[c]?.[r ? 400 : 600];
+          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") {
+              const t = c === "warning";
+              d = r.palette[c]?.[t ? 400 : 600];
             }
             return {
               backgroundColor: d,
-              borderRadius: t.shape.borderRadius,
+              borderRadius: r.shape.borderRadius,
               "& .MuiAlert-message": {
-                fontSize: t.typography.subtitle1.fontSize,
-                lineHeight: t.typography.subtitle1.lineHeight,
+                fontSize: r.typography.subtitle1.fontSize,
+                lineHeight: r.typography.subtitle1.lineHeight,
                 marginTop: "auto",
                 marginBottom: "auto"
               },
@@ -1211,14 +1212,14 @@ const Wt = (e, i) => {
           disableElevation: !0
         },
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             fontWeight: 600,
             textTransform: "none",
             "&.Mui-disabled": {
               cursor: "not-allowed"
             },
             "&.Mui-focusVisible": {
-              outline: `2px solid ${t.palette.info.main}`,
+              outline: `2px solid ${r.palette.info.main}`,
               outlineOffset: "2px"
             }
           }),
@@ -1236,9 +1237,9 @@ const Wt = (e, i) => {
           },
           {
             props: { variant: "outlined", color: "error" },
-            style: ({ theme: t }) => ({
+            style: ({ theme: r }) => ({
               "&:hover, &:active": {
-                color: t.palette.error.dark
+                color: r.palette.error.dark
               }
             })
           }
@@ -1292,22 +1293,22 @@ const Wt = (e, i) => {
       },
       MuiDataGrid: {
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             border: "none",
             borderRadius: 0,
-            fontSize: t.typography.body2.fontSize,
+            fontSize: r.typography.body2.fontSize,
             "& .MuiDataGrid-cell": {
               display: "flex",
               alignItems: "center",
               borderTop: "1px solid",
-              borderColor: t.palette.background.highlight
+              borderColor: r.palette.background.highlight
             },
             "& .MuiDataGrid-cell:focus": { outline: "unset" },
             "& .MuiDataGrid-iconSeparator": { display: "none" },
             "& .MuiDataGrid-columnHeaders": {
-              backgroundColor: t.palette.background.paper,
+              backgroundColor: r.palette.background.paper,
               borderBottom: "2px solid",
-              borderColor: t.palette.divider
+              borderColor: r.palette.divider
             },
             "& .MuiDataGrid-columnHeaderTitle": {
               fontWeight: 600
@@ -1325,42 +1326,42 @@ const Wt = (e, i) => {
       },
       MuiDateRangePickerDay: {
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             ":first-of-type": {
-              borderTopLeftRadius: t.shape.borderRadius,
-              borderBottomLeftRadius: t.shape.borderRadius,
+              borderTopLeftRadius: r.shape.borderRadius,
+              borderBottomLeftRadius: r.shape.borderRadius,
               "& .MuiDateRangePickerDay-rangeIntervalDayPreview": {
-                borderTopLeftRadius: t.shape.borderRadius,
-                borderBottomLeftRadius: t.shape.borderRadius
+                borderTopLeftRadius: r.shape.borderRadius,
+                borderBottomLeftRadius: r.shape.borderRadius
               }
             },
             ":last-of-type": {
-              borderTopRightRadius: t.shape.borderRadius,
-              borderBottomRightRadius: t.shape.borderRadius,
+              borderTopRightRadius: r.shape.borderRadius,
+              borderBottomRightRadius: r.shape.borderRadius,
               "& .MuiDateRangePickerDay-rangeIntervalDayPreview": {
-                borderTopRightRadius: t.shape.borderRadius,
-                borderBottomRightRadius: t.shape.borderRadius
+                borderTopRightRadius: r.shape.borderRadius,
+                borderBottomRightRadius: r.shape.borderRadius
               }
             },
             "& .Mui-selected": {
-              borderRadius: t.shape.borderRadius
+              borderRadius: r.shape.borderRadius
             },
             "& .MuiPickersDay-dayOutsideMonth": {
-              color: t.palette.action.disabled
+              color: r.palette.action.disabled
             }
           }),
-          day: ({ theme: t }) => ({
-            borderRadius: t.shape.borderRadius
+          day: ({ theme: r }) => ({
+            borderRadius: r.shape.borderRadius
           }),
-          rangeIntervalDayPreview: ({ theme: t }) => ({
-            borderRadius: t.shape.borderRadius
+          rangeIntervalDayPreview: ({ theme: r }) => ({
+            borderRadius: r.shape.borderRadius
           })
         }
       },
       MuiDayCalendar: {
         styleOverrides: {
-          weekDayLabel: ({ theme: t }) => ({
-            fontSize: t.typography.body2.fontSize,
+          weekDayLabel: ({ theme: r }) => ({
+            fontSize: r.typography.body2.fontSize,
             fontWeight: 700
           })
         }
@@ -1402,14 +1403,14 @@ const Wt = (e, i) => {
       },
       MuiFormHelperText: {
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             fontSize: 13,
             // Small
             marginLeft: 0,
             display: "flex",
             alignItems: "center",
             position: "relative",
-            color: t.palette.text.secondary,
+            color: r.palette.text.secondary,
             "& .MuiSvgIcon-root": {
               height: "16px",
               width: "16px",
@@ -1440,19 +1441,19 @@ const Wt = (e, i) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: ({ theme: t }) => ({
-            borderRadius: t.shape.borderRadius,
+          root: ({ theme: r }) => ({
+            borderRadius: r.shape.borderRadius,
             minHeight: 44,
             // touch target
             minWidth: 44,
             // touch target
             "&.Mui-focusVisible": {
-              outline: `2px solid ${t.palette.info.main}`,
+              outline: `2px solid ${r.palette.info.main}`,
               outlineOffset: "2px"
             },
             "& .MuiTouchRipple-root": {
               "& .MuiTouchRipple-child": {
-                borderRadius: t.shape.borderRadius
+                borderRadius: r.shape.borderRadius
               }
             }
           })
@@ -1478,25 +1479,27 @@ const Wt = (e, i) => {
         }
       },
       MuiLink: {
+        defaultProps: {
+          underline: "none"
+        },
         styleOverrides: {
-          root: ({ theme: t, color: n }) => ({
+          root: {
             cursor: "pointer",
             fontWeight: 600,
-            textDecoration: "none",
             height: 20,
             marginLeft: 4,
             marginRight: 4,
-            "&.Mui-focusVisible": {
-              outline: "2px solid isLight",
-              outlineOffset: "2px"
-            },
             "&:hover": {
-              backgroundColor: t.palette.action.hover
+              backgroundColor: "transparent !important"
             },
             "&:active": {
-              backgroundColor: t.palette.mode === I.LIGHT ? t.palette[n].light : t.palette[n].dark
+              backgroundColor: "transparent !important"
+            },
+            "&.Mui-focusVisible": {
+              outline: "2px solid isLight",
+              outlineOffset: "2px"
             }
-          })
+          }
         }
       },
       MuiList: {
@@ -1521,9 +1524,9 @@ const Wt = (e, i) => {
           disablePadding: !0
         },
         styleOverrides: {
-          root: ({ ownerState: t }) => ({
+          root: ({ ownerState: r }) => ({
             minHeight: 64,
-            ...!t.disablePadding && {
+            ...!r.disablePadding && {
               paddingTop: 12,
               paddingBottom: 12,
               paddingLeft: 24
@@ -1547,7 +1550,7 @@ const Wt = (e, i) => {
       },
       MuiListItemButton: {
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             minHeight: 64,
             paddingLeft: 24,
             paddingRight: 24,
@@ -1556,7 +1559,7 @@ const Wt = (e, i) => {
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
               borderRadius: 8,
-              outline: `2px solid ${t.palette.info.main}`,
+              outline: `2px solid ${r.palette.info.main}`,
               outlineOffset: -2
             }
           })
@@ -1683,11 +1686,11 @@ const Wt = (e, i) => {
       },
       MuiPickersToolbar: {
         styleOverrides: {
-          content: ({ theme: t }) => ({
+          content: ({ theme: r }) => ({
             marginTop: 4,
             "& .MuiTypography-root": {
-              fontSize: t.typography.h3.fontSize,
-              lineHeight: t.typography.h3.lineHeight
+              fontSize: r.typography.h3.fontSize,
+              lineHeight: r.typography.h3.lineHeight
             }
           })
         }
@@ -1713,7 +1716,7 @@ const Wt = (e, i) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             width: 37,
             height: 20,
             padding: 0,
@@ -1724,7 +1727,7 @@ const Wt = (e, i) => {
               "&.Mui-checked": {
                 transform: "translateX(16px)",
                 "& + .MuiSwitch-track": {
-                  backgroundColor: t.palette.success.main,
+                  backgroundColor: r.palette.success.main,
                   opacity: 1,
                   border: 0
                 },
@@ -1733,27 +1736,27 @@ const Wt = (e, i) => {
                 }
               },
               "&.Mui-disabled .MuiSwitch-thumb": {
-                color: t.palette.common.white
+                color: r.palette.common.white
               },
               "&.Mui-disabled + .MuiSwitch-track": {
-                backgroundColor: t.palette.action.disabledBackground,
+                backgroundColor: r.palette.action.disabledBackground,
                 opacity: 1
               }
             },
             "& .MuiSwitch-input": {
               "&:focus-visible ~ .MuiSwitch-thumb": {
-                outline: `2px solid ${t.palette.info.main}`,
+                outline: `2px solid ${r.palette.info.main}`,
                 outlineOffset: 0
               }
             },
             "& .MuiSwitch-thumb": {
               boxSizing: "border-box",
-              backgroundColor: t.palette.background.paper,
+              backgroundColor: r.palette.background.paper,
               width: 16,
               height: 16
             },
             "& .MuiSwitch-track": {
-              backgroundColor: t.palette.action.active,
+              backgroundColor: r.palette.action.active,
               borderRadius: 20 / 2,
               opacity: 1
             }
@@ -1807,7 +1810,7 @@ const Wt = (e, i) => {
           disableFocusRipple: !0
         },
         styleOverrides: {
-          root: ({ theme: t }) => ({
+          root: ({ theme: r }) => ({
             fontSize: 13,
             lineHeight: "16px",
             textTransform: "none",
@@ -1817,22 +1820,22 @@ const Wt = (e, i) => {
             },
             "&:hover": {
               backgroundColor: f(
-                t.palette.primary.main,
-                o.mode === I.LIGHT ? 0.1 : 0.2
+                r.palette.primary.main,
+                o.mode === O.LIGHT ? 0.1 : 0.2
               ),
-              borderColor: t.palette.primary.main
+              borderColor: r.palette.primary.main
             },
             "&.Mui-selected": {
               fontWeight: 600,
-              borderColor: t.palette.primary.main,
+              borderColor: r.palette.primary.main,
               "&:hover": {
-                boxShadow: `inset 0px 0px 0px 2px ${t.palette.primary.main}`
+                boxShadow: `inset 0px 0px 0px 2px ${r.palette.primary.main}`
               }
             },
             "& .MuiTouchRipple-root": {
               "& .MuiTouchRipple-child": {
-                backgroundColor: t.palette.primary.main,
-                borderRadius: t.shape.borderRadius
+                backgroundColor: r.palette.primary.main,
+                borderRadius: r.shape.borderRadius
               }
             }
           })
@@ -1842,7 +1845,7 @@ const Wt = (e, i) => {
             props: { color: "error" },
             style: {
               "&:hover": {
-                backgroundColor: f(o.error.main, o.mode === I.LIGHT ? 0.1 : 0.2),
+                backgroundColor: f(o.error.main, o.mode === O.LIGHT ? 0.1 : 0.2),
                 borderColor: o.error.main
               },
               "&.Mui-selected": {
@@ -1866,7 +1869,7 @@ const Wt = (e, i) => {
               "&:hover": {
                 backgroundColor: f(
                   o.secondary.main,
-                  o.mode === I.LIGHT ? 0.1 : 0.2
+                  o.mode === O.LIGHT ? 0.1 : 0.2
                 ),
                 borderColor: o.secondary.main
               },
@@ -1929,10 +1932,10 @@ export {
   Nt as MXLogoOutlineIcon,
   $t as MerchantLogo,
   Pt as P,
-  Vt as SelectionBox,
+  Gt as SelectionBox,
   F as Text,
   Ut as TextField,
-  Gt as Toast,
+  Vt as Toast,
   Wt as createMXTheme
 };
 //# sourceMappingURL=index.es.js.map