@mxenabled/mxui 2.5.2 → 2.5.3-alpha.al1

package/dist/components/dialog/Header.d.ts

@@ -6,6 +6,7 @@ export type CopyObject = {
 type DialogHeaderProps = {
     copy: CopyObject;
     onClose: () => void;
+    truncate?: boolean;
 };
 declare const DialogHeader: React.FC<DialogHeaderProps>;
 export default DialogHeader;

package/dist/components/textfield/TextField.d.ts

@@ -4,6 +4,7 @@ type TextFieldProps = {
     disabled?: boolean;
     label?: React.ReactNode;
     shrink?: boolean;
+    truncate?: boolean;
     variant?: 'filled' | 'outlined' | 'standard';
 } & MuiTextFieldProps;
 declare const TextField: React.FC<TextFieldProps>;

package/dist/index.es.js

@@ -1,37 +1,37 @@
 import { jsx as a, jsxs as b } from "react/jsx-runtime";
-import N from "react";
+import k from "react";
 import A from "@mui/material/Stack";
-import { useTheme as I, createTheme as $ } from "@mui/material/styles";
+import { useTheme as I, createTheme as U } from "@mui/material/styles";
 import { Icon as le, ExpandMore as se, Close as ce } from "@mxenabled/mx-icons";
-import { endOfMonth as U } from "date-fns/endOfMonth";
+import { endOfMonth as G } from "date-fns/endOfMonth";
 import { endOfYear as de } from "date-fns/endOfYear";
 import { startOfToday as ue } from "date-fns/startOfToday";
 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 { startOfYear as W } from "date-fns/startOfYear";
+import { subDays as Y } from "date-fns/subDays";
 import { subMonths as pe } from "date-fns/subMonths";
 import { subYears as he } from "date-fns/subYears";
 import ge from "@mui/material/useMediaQuery";
 import { usePickerContext as X, useIsValidValue as Z, LocalizationProvider as me, StaticDateRangePicker as fe } from "@mui/x-date-pickers-pro";
 import { AdapterDateFns as be } from "@mui/x-date-pickers-pro/AdapterDateFns";
-import { MultiInputDateRangeField as Te } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
+import { MultiInputDateRangeField as xe } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
 import Q from "@mui/material/Box";
-import xe from "@mui/material/ToggleButton";
+import Te from "@mui/material/ToggleButton";
 import Re from "@mui/material/ToggleButtonGroup";
 import Me from "@mui/material/MenuItem";
 import J from "@mui/material/TextField";
 import { usePickerLayout as Ce, PickersLayoutRoot as Se, PickersLayoutContentWrapper as Ae, pickersLayoutClasses as D } from "@mui/x-date-pickers/PickersLayout";
 import q from "@mui/material/Slide";
-import B from "@mui/material/Button";
+import z from "@mui/material/Button";
 import ee from "@mui/material/IconButton";
 import ye from "@mui/material/Typography";
 import Ie from "@mui/material/Drawer";
 import Ee from "@mui/material/Snackbar";
 import Oe from "@mui/material/Alert";
-import { FormControlLabel as Fe, Box as w, Typography as Y, Radio as P, Checkbox as Le, alpha as f, darken as v, lighten as E, getContrastRatio as ve } from "@mui/material";
-import { circularProgressClasses as Ne } from "@mui/material/CircularProgress";
-import { LicenseInfo as ke } from "@mui/x-license";
-const k = ({
+import { FormControlLabel as Fe, Box as w, Typography as K, Radio as P, Checkbox as Le, alpha as f, darken as v, lighten as E, getContrastRatio as ve } from "@mui/material";
+import { circularProgressClasses as ke } from "@mui/material/CircularProgress";
+import { LicenseInfo as Ne } from "@mui/x-license";
+const N = ({
   children: e,
   height: i,
   size: o = 16,
@@ -49,10 +49,10 @@ const k = ({
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
-), 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 }), Fr = ({
+), T = ({ color: e, fill: i = !1, name: o, size: s = 20, sx: n, ...r }) => /* @__PURE__ */ a(le, { color: e, fill: i, name: o, size: s, sx: n, ...r }), Fr = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ b(k, { ...i, children: [
+}) => /* @__PURE__ */ b(N, { ...i, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -70,7 +70,7 @@ const k = ({
 ] }), Lr = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ b(k, { ...i, children: [
+}) => /* @__PURE__ */ b(N, { ...i, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -106,7 +106,7 @@ const k = ({
 ] }), vr = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ a(k, { ...i, children: /* @__PURE__ */ a(
+}) => /* @__PURE__ */ a(N, { ...i, children: /* @__PURE__ */ a(
   "path",
   {
     clipRule: "evenodd",
@@ -114,10 +114,10 @@ const k = ({
     fill: e,
     fillRule: "evenodd"
   }
-) }), Nr = ({
+) }), kr = ({
   color: e = "currentColor",
   ...i
-}) => /* @__PURE__ */ b(k, { ...i, children: [
+}) => /* @__PURE__ */ b(N, { ...i, children: [
   /* @__PURE__ */ a(
     "path",
     {
@@ -256,7 +256,7 @@ const re = {
   sx: s = {},
   variant: n = "filled"
 }) => {
-  const r = I(), l = N.useMemo(
+  const r = I(), l = k.useMemo(
     () => De.find((m) => m.guid === e) ?? re,
     [e]
   ), c = r.palette.categories[l.colorName];
@@ -277,10 +277,10 @@ const re = {
       justifyContent: "center",
       sx: [...Array.isArray(s) ? s : [s]],
       width: o,
-      children: /* @__PURE__ */ a(x, { name: l.icon, size: o * i })
+      children: /* @__PURE__ */ a(T, { name: l.icon, size: o * i })
     }
   );
-}, _e = ({ items: e, selected: i }) => {
+}, Be = ({ items: e, selected: i }) => {
   const o = I(), { setValue: s } = X(), n = Z(), r = e?.map((l) => {
     const c = l.getValue({ isValid: n });
     return {
@@ -292,7 +292,7 @@ const re = {
     };
   });
   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,
+    Te,
     {
       onClick: l.onClick,
       sx: {
@@ -319,7 +319,7 @@ const re = {
     },
     l.label
   )) }) });
-}, Be = ({
+}, _e = ({
   items: e,
   selected: i,
   selectLabel: o
@@ -384,39 +384,39 @@ const re = {
       ]
     }
   );
-}, kr = ({
+}, Nr = ({
   copy: e,
   dateRange: i,
   onRangeChanged: o,
   selectedShortcut: s = e.dateRangeThisMonth,
   sx: n = {}
 }) => {
-  const r = I(), l = ge(r.breakpoints.down("sm")), c = N.useMemo(() => {
-    const t = ue(), m = pe(t, 1), T = he(t, 1);
+  const r = I(), l = ge(r.breakpoints.down("sm")), c = k.useMemo(() => {
+    const t = ue(), m = pe(t, 1), x = he(t, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [V(t), U(t)]
+        getValue: () => [V(t), G(t)]
       },
       {
         label: e.dateRangeLastMonth,
-        getValue: () => [V(m), U(m)]
+        getValue: () => [V(m), G(m)]
       },
       {
         label: e.dateRangeLast30Days,
-        getValue: () => [W(t, 30), t]
+        getValue: () => [Y(t, 30), t]
       },
       {
         label: e.dateRangeLast90Days,
-        getValue: () => [W(t, 90), t]
+        getValue: () => [Y(t, 90), t]
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [G(t), t]
+        getValue: () => [W(t), t]
       },
       {
         label: e.dateRangeLastYear,
-        getValue: () => [G(T), de(T)]
+        getValue: () => [W(x), de(x)]
       },
       {
         label: e.dateRangeCustom,
@@ -424,8 +424,8 @@ const re = {
       }
     ];
   }, [e]), d = (t, m) => {
-    const T = m.shortcut;
-    o?.(t, T ? T.label : e.dateRangeCustom);
+    const x = m.shortcut;
+    o?.(t, x ? x.label : e.dateRangeCustom);
   };
   return /* @__PURE__ */ a(A, { gap: l ? 0 : 16, m: l ? 0 : 8, children: /* @__PURE__ */ a(me, { dateAdapter: be, children: /* @__PURE__ */ a(
     fe,
@@ -457,19 +457,19 @@ const re = {
       },
       slots: {
         ...l && { layout: ze },
-        leftArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_left", size: 28 }),
+        leftArrowIcon: () => /* @__PURE__ */ a(T, { name: "chevron_left", size: 28 }),
         shortcuts: (t) => l ? /* @__PURE__ */ a(
-          Be,
+          _e,
           {
             selectLabel: e.dateRangeSelectARange,
             selected: s,
             ...t
           }
-        ) : /* @__PURE__ */ a(_e, { selected: s, ...t }),
-        rightArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_right", size: 28 }),
+        ) : /* @__PURE__ */ a(Be, { selected: s, ...t }),
+        rightArrowIcon: () => /* @__PURE__ */ a(T, { name: "chevron_right", size: 28 }),
         ...l && {
           toolbar: (t) => /* @__PURE__ */ a(
-            Te,
+            xe,
             {
               dateSeparator: "",
               format: "MM/dd/yyyy",
@@ -488,7 +488,7 @@ const re = {
       value: i
     }
   ) }) });
-}, Hr = N.forwardRef(function(i, o) {
+}, Hr = k.forwardRef(function(i, o) {
   return /* @__PURE__ */ a(q, { direction: "up", ref: o, ...i });
 }), $e = ({
   hasSecondaryAction: e = !0,
@@ -508,7 +508,7 @@ const re = {
     sx: { bgcolor: "background.paper", p: 24 },
     children: [
       e && /* @__PURE__ */ a(
-        B,
+        z,
         {
           color: l,
           onClick: s,
@@ -517,7 +517,7 @@ const re = {
         }
       ),
       o && /* @__PURE__ */ a(
-        B,
+        z,
         {
           color: n,
           disabled: i,
@@ -559,7 +559,7 @@ const re = {
     ...c,
     children: o
   }
-), Ue = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...o, children: i }), Dr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...o, children: i }), wr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...o, children: i }), Pr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...o, children: i }), _r = ({ copy: e, onClose: i }) => /* @__PURE__ */ b(
+), Ue = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h1 ${e}`, component: "h1", variant: "h1", ...o, children: i }), Dr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h2 ${e}`, component: "h2", variant: "h2", ...o, children: i }), wr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text h3 ${e}`, component: "h3", variant: "h3", ...o, children: i }), Pr = ({ className: e = "", children: i, ...o }) => /* @__PURE__ */ a(F, { className: `mx-mxui-text p ${e}`, component: "p", variant: "body1", ...o, children: i }), Br = ({ copy: e, onClose: i, truncate: o = !1 }) => /* @__PURE__ */ b(
   A,
   {
     sx: {
@@ -570,11 +570,11 @@ const re = {
       py: 14
     },
     children: [
-      /* @__PURE__ */ a(Ue, { variant: "h3", children: e.title }),
+      /* @__PURE__ */ a(Ue, { truncate: o, variant: "h3", children: e.title }),
       /* @__PURE__ */ a(ee, { "aria-label": e.close_aria, onClick: i, sx: { mr: -12 }, children: /* @__PURE__ */ a(ce, {}) })
     ]
   }
-), Br = ({
+), _r = ({
   className: e,
   disableSave: i,
   id: o,
@@ -609,7 +609,7 @@ const re = {
       )
     ]
   }
-), te = 32, z = "https://content.moneydesktop.com/storage/MD_Assets", K = `${z}/serenity/default_institution_logo.png`, zr = ({
+), te = 32, $ = "https://content.moneydesktop.com/storage/MD_Assets", j = `${$}/serenity/default_institution_logo.png`, zr = ({
   alt: e,
   institutionGuid: i,
   logoUrl: o,
@@ -622,9 +622,9 @@ const re = {
     height: s,
     onError: (r) => {
       const l = r.target;
-      l.src !== K && (l.src = K);
+      l.src !== j && (l.src = j);
     },
-    src: o || `${z}/Ipad%20Logos/100x100/${i}_100x100.png`,
+    src: o || `${$}/Ipad%20Logos/100x100/${i}_100x100.png`,
     style: {
       borderRadius: 4
     },
@@ -638,7 +638,7 @@ const re = {
   size: s = te,
   ...n
 }) => {
-  const [r, l] = N.useState(!1), c = I();
+  const [r, l] = k.useState(!1), c = I();
   return /* @__PURE__ */ b(Q, { display: "inline-block", position: "relative", ...n, children: [
     o && !r && /* @__PURE__ */ a(
       "img",
@@ -647,7 +647,7 @@ const re = {
         "aria-hidden": !e,
         height: s,
         onError: () => l(!0),
-        src: `${z}/merchant_logos/${o}.png`,
+        src: `${$}/merchant_logos/${o}.png`,
         style: {
           backgroundColor: c.palette.common.white,
           borderRadius: 4,
@@ -663,24 +663,33 @@ const re = {
   disabled: e = !1,
   label: i = "",
   shrink: o = !0,
-  variant: s = "outlined",
-  ...n
+  truncate: s = !1,
+  variant: n = "outlined",
+  ...r
 }) => /* @__PURE__ */ a(
   J,
   {
     InputLabelProps: {
-      shrink: o
+      shrink: o,
+      ...s && {
+        sx: {
+          maxWidth: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }
+      }
     },
     disabled: e,
     label: i,
-    variant: s,
-    ...n
+    variant: n,
+    ...r
   }
 );
-function Ve(e) {
+function Ge(e) {
   return /* @__PURE__ */ a(q, { ...e, direction: "left", mountOnEnter: !0, unmountOnExit: !0 });
 }
-const Vr = ({
+const Gr = ({
   open: e = !0,
   handleClose: i,
   closeAriaLabel: o,
@@ -693,7 +702,7 @@ const Vr = ({
   actionText: t = "Undo",
   onActionClick: m
 }) => {
-  const T = I(), L = d && /* @__PURE__ */ a(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ a(x, { fill: !0, name: "close" }) }), g = `${r}.main`;
+  const x = I(), L = d && /* @__PURE__ */ a(ee, { "aria-label": o, color: "inherit", onClick: i, size: "small", children: /* @__PURE__ */ a(T, { fill: !0, name: "close" }) }), g = `${r}.main`;
   return /* @__PURE__ */ a(
     Ee,
     {
@@ -701,7 +710,7 @@ const Vr = ({
       autoHideDuration: n,
       onClose: i,
       open: e,
-      slots: { transition: Ve },
+      slots: { transition: Ge },
       sx: {
         ...l,
         maxWidth: 568,
@@ -745,7 +754,7 @@ const Vr = ({
                   F,
                   {
                     sx: {
-                      lineHeight: T.typography.body1.lineHeight,
+                      lineHeight: x.typography.body1.lineHeight,
                       flex: 1,
                       minWidth: "70%",
                       px: 5
@@ -754,13 +763,13 @@ const Vr = ({
                   }
                 ),
                 c && /* @__PURE__ */ a(
-                  B,
+                  z,
                   {
                     color: "inherit",
                     onClick: m || i,
                     size: "small",
                     sx: {
-                      color: T.palette.success.contrastText,
+                      color: x.palette.success.contrastText,
                       whiteSpace: "nowrap",
                       flexShrink: 0,
                       minWidth: "auto",
@@ -776,7 +785,7 @@ const Vr = ({
       )
     }
   );
-}, Gr = ({
+}, Vr = ({
   component: e = P,
   variant: i = "outlined",
   selected: o,
@@ -788,7 +797,7 @@ const Vr = ({
   disabled: d = !1,
   error: t = !1,
   icon: m = !1,
-  sx: T = {},
+  sx: x = {},
   ...L
 }) => {
   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);
@@ -831,8 +840,8 @@ const Vr = ({
       label: /* @__PURE__ */ b(w, { sx: { display: "flex", alignItems: "flex-start", width: "100%" }, children: [
         m && /* @__PURE__ */ a(w, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: m }),
         /* @__PURE__ */ b(w, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
-          n && /* @__PURE__ */ a(Y, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: n }),
-          /* @__PURE__ */ a(Y, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: r })
+          n && /* @__PURE__ */ a(K, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: n }),
+          /* @__PURE__ */ a(K, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: r })
         ] })
       ] }),
       labelPlacement: "start",
@@ -864,7 +873,7 @@ const Vr = ({
           outline: `2px solid ${g.palette.info.main}`,
           outlineOffset: "2px"
         },
-        ...T
+        ...x
       },
       value: c
     }
@@ -882,7 +891,7 @@ const Vr = ({
   700: v(e, 0.5),
   800: v(e, 0.65),
   900: v(e, 0.75)
-}), M = "#FFFFFF", _ = "#000000", Ge = "#F9F9F9", We = "#000000", Ye = "#FFFFFF", Ke = "#000000", C = {
+}), M = "#FFFFFF", B = "#000000", Ve = "#F9F9F9", We = "#000000", Ye = "#FFFFFF", Ke = "#000000", C = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -957,7 +966,7 @@ const Vr = ({
     mode: e,
     common: {
       white: M,
-      black: _
+      black: B
     },
     primary: {
       ...o,
@@ -1023,18 +1032,18 @@ const Vr = ({
     },
     grey: d,
     action: {
-      active: t ? f(_, 0.56) : f(M, 0.56),
+      active: t ? f(B, 0.56) : f(M, 0.56),
       hoverOpacity: t ? 0.1 : 0.2,
       selectedOpacity: t ? 0.16 : 0.25,
       focusOpacity: 0.3
     },
     background: {
-      default: t ? i?.background?.default?.light || Ge : i?.background?.default?.dark || We,
+      default: t ? i?.background?.default?.light || Ve : 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: t ? f(_, 0.12) : f(M, 0.24),
+    divider: t ? f(B, 0.12) : f(M, 0.24),
     categories: {
       autoTransport: t ? u.AUTO_TRANSPORTT : p.AUTO_TRANSPORTT,
       billsUtilities: t ? u.BILLS_UTILITIES : p.BILLS_UTILITIES,
@@ -1077,8 +1086,8 @@ const Vr = ({
       chartMono6: y.CHART_MONO6
     }
   };
-}, j = "Inter, Helvetica, Arial, sans-serif", Xe = (e) => {
-  const i = e?.fontFamily ? `${e?.fontFamily}, ${j}` : j;
+}, _ = "Inter, Helvetica, Arial, sans-serif", Xe = (e) => {
+  const i = e?.fontFamily ? `${e?.fontFamily}, ${_}` : _, o = e?.headerFontFamily ? `${e.headerFontFamily}, ${_}` : i;
   return {
     fontFamily: i,
     fontSize: 15,
@@ -1102,19 +1111,19 @@ const Vr = ({
       lineHeight: "16px"
     },
     h1: {
-      fontFamily: i,
+      fontFamily: o,
       fontWeight: 700,
       fontSize: 31,
       lineHeight: "40px"
     },
     h2: {
-      fontFamily: i,
+      fontFamily: o,
       fontWeight: 700,
       fontSize: 23,
       lineHeight: "32px"
     },
     h3: {
-      fontFamily: i,
+      fontFamily: o,
       fontWeight: 700,
       fontSize: 18,
       lineHeight: "24px"
@@ -1137,12 +1146,12 @@ const Vr = ({
     ...e
   };
 };
-ke.setLicenseKey(
+Ne.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
 const Wr = (e, i) => {
-  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)", $({
+  const o = je(e, i?.paletteOptions), s = Xe(i?.typographyOptions), n = [...U().shadows];
+  return n[1] = "0px 2px 8px 0 rgba(0, 0, 0, 0.12)", n[8] = "0px 6px 12px 0 rgba(0, 0, 0, 0.16), 0px 3px 8px 0 rgba(0, 0, 0, 0.06)", n[16] = "0px 12px 20px 0 rgba(0, 0, 0, 0.22)", U({
     breakpoints: i?.breakpoints || {
       values: {
         // TODO: Remove these default values in v3. Users should provide their own breakpoints if they want to.
@@ -1153,7 +1162,9 @@ const Wr = (e, i) => {
         xl: 1536
       }
     },
-    cssVariables: !0,
+    cssVariables: {
+      colorSchemeSelector: "class"
+    },
     palette: o,
     shape: {
       borderRadius: i?.shapeOptions?.borderRadius || 4
@@ -1166,10 +1177,10 @@ const Wr = (e, i) => {
       MuiAlert: {
         defaultProps: {
           iconMapping: {
-            success: /* @__PURE__ */ a(x, { fill: !0, name: "check_circle", size: 24 }),
-            error: /* @__PURE__ */ a(x, { fill: !0, name: "error", size: 24 }),
-            warning: /* @__PURE__ */ a(x, { fill: !0, name: "warning", size: 24 }),
-            info: /* @__PURE__ */ a(x, { fill: !0, name: "info", size: 24 })
+            success: /* @__PURE__ */ a(T, { fill: !0, name: "check_circle", size: 24 }),
+            error: /* @__PURE__ */ a(T, { fill: !0, name: "error", size: 24 }),
+            warning: /* @__PURE__ */ a(T, { fill: !0, name: "warning", size: 24 }),
+            info: /* @__PURE__ */ a(T, { fill: !0, name: "info", size: 24 })
           },
           variant: "outlined"
         },
@@ -1272,7 +1283,7 @@ const Wr = (e, i) => {
       MuiCircularProgress: {
         styleOverrides: {
           root: {
-            [`& .${Ne.circle}`]: {
+            [`& .${ke.circle}`]: {
               strokeLinecap: "round"
             }
           }
@@ -1654,6 +1665,13 @@ const Wr = (e, i) => {
         styleOverrides: {
           rounded: {
             borderRadius: 8
+          },
+          ...i?.paletteOptions?.useGlass && {
+            root: {
+              backgroundColor: "rgba(255, 255, 255, 0.1)",
+              backdropFilter: "blur(10px)",
+              WebkitBackdropFilter: "blur(10px)"
+            }
           }
         }
       },
@@ -1918,33 +1936,33 @@ const Wr = (e, i) => {
   });
 };
 export {
-  k as BaseIcon,
+  N as BaseIcon,
   Hr as BottomSheetTransition,
   h as CategoryGuids,
   Pe as CategoryIcon,
   De as CategoryIconList,
   He as CategoryIconVariants,
-  kr as DateRangePicker,
+  Nr as DateRangePicker,
   $e as DialogFooter,
-  _r as DialogHeader,
-  Br as Drawer,
+  Br as DialogHeader,
+  _r as Drawer,
   $e as Footer,
   Ue as H1,
   Dr as H2,
   wr as H3,
-  j as INTER,
-  x as Icon,
+  _ as INTER,
+  T as Icon,
   zr as InstitutionLogo,
   Lr as MXLogoCopyrightIcon,
   vr as MXLogoFilledIcon,
   Fr as MXLogoIcon,
-  Nr as MXLogoOutlineIcon,
+  kr as MXLogoOutlineIcon,
   $r as MerchantLogo,
   Pr as P,
-  Gr as SelectionBox,
+  Vr as SelectionBox,
   F as Text,
   Ur as TextField,
-  Vr as Toast,
+  Gr as Toast,
   Wr as createMXTheme
 };
 //# sourceMappingURL=index.es.js.map