@mxenabled/mxui 1.5.9-alpha.al0 → 1.5.9

package/dist/index.es.js

@@ -36,7 +36,7 @@ const f = ({
   children: e,
   height: o,
   size: t = 16,
-  viewBox: n = "0 0 16 16",
+  viewBox: l = "0 0 16 16",
   width: r
 }) => /* @__PURE__ */ a(
   "svg",
@@ -45,7 +45,7 @@ const f = ({
     className: "mx-kmui-icon",
     focusable: !1,
     height: o || t,
-    viewBox: n,
+    viewBox: l,
     width: r || t,
     xmlns: "http://www.w3.org/2000/svg",
     children: e
@@ -56,20 +56,20 @@ const x = ({
   color: e,
   fill: o = !1,
   name: t,
-  size: n = 20,
+  size: l = 20,
   sx: r,
-  weight: c = 300,
-  ...l
+  weight: s = 300,
+  ...n
 }) => /* @__PURE__ */ a(
   se,
   {
     color: e,
     fill: o,
     name: t,
-    size: n,
+    size: l,
     sx: r,
-    weight: c,
-    ...l
+    weight: s,
+    ...n
   }
 ), w0 = ({
   color: e = "currentColor",
@@ -394,53 +394,53 @@ const ee = {
   categoryGuid: e,
   icon_ratio: o = ze,
   size: t = 32,
-  sx: n = {},
+  sx: l = {},
   variant: r = "filled"
 }) => {
-  const c = H(), l = R.useMemo(
+  const s = H(), n = R.useMemo(
     () => Be.find((u) => u.guid === e) ?? ee,
     [e]
-  ), s = c.palette.categories[l.colorName];
+  ), c = s.palette.categories[n.colorName];
   return /* @__PURE__ */ a(
     I,
     {
       alignItems: "center",
       bgcolor: () => {
-        let u = s;
+        let u = c;
         return r === "twotone" && (u = `${u}20`), r === "transparent" || r === "basic" ? "transparent" : u;
       },
       borderRadius: 1,
       color: () => {
-        const u = r === "filled" ? c.palette.common.white : s;
-        return r === "basic" ? c.palette.text.primary : u;
+        const u = r === "filled" ? s.palette.common.white : c;
+        return r === "basic" ? s.palette.text.primary : u;
       },
       height: t,
       justifyContent: "center",
-      sx: [...Array.isArray(n) ? n : [n]],
+      sx: [...Array.isArray(l) ? l : [l]],
       width: t,
-      children: /* @__PURE__ */ a(x, { name: l.icon, size: t * o })
+      children: /* @__PURE__ */ a(x, { name: n.icon, size: t * o })
     }
   );
 }, $e = ({
   items: e,
   onChange: o,
   isValid: t,
-  selected: n
+  selected: l
 }) => {
-  const r = H(), c = e?.map((l) => {
-    const s = l.getValue({ isValid: t });
+  const r = H(), s = e?.map((n) => {
+    const c = n.getValue({ isValid: t });
     return {
-      label: l.label,
+      label: n.label,
       onClick: () => {
-        o(s, "accept", l);
+        o(c, "accept", n);
       },
-      disabled: !t(s)
+      disabled: !t(c)
     };
   });
-  return /* @__PURE__ */ a(X, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Me, { color: "primary", orientation: "vertical", value: n, children: c?.map((l) => /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(X, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(Me, { color: "primary", orientation: "vertical", value: l, children: s?.map((n) => /* @__PURE__ */ a(
     xe,
     {
-      onClick: l.onClick,
+      onClick: n.onClick,
       sx: {
         borderWidth: 1,
         color: "secondary.main",
@@ -460,25 +460,26 @@ const ee = {
           color: "primary"
         }
       },
-      value: l.label,
-      children: l.label
+      value: n.label,
+      children: n.label
     },
-    l.label
+    n.label
   )) }) });
 }, Ge = ({
   items: e,
   onChange: o,
   isValid: t,
-  selected: n
+  selected: l,
+  selectLabel: r
 }) => {
-  const r = e?.map((c) => {
-    const l = c.getValue({ isValid: t });
+  const s = e?.map((n) => {
+    const c = n.getValue({ isValid: t });
     return {
-      label: c.label,
+      label: n.label,
       onClick: () => {
-        o(l, "accept", c);
+        o(c, "accept", n);
       },
-      disabled: !t(l)
+      disabled: !t(c)
     };
   });
   return /* @__PURE__ */ a(I, { sx: { py: 16 }, children: /* @__PURE__ */ a(
@@ -488,18 +489,18 @@ const ee = {
         shrink: !0
       },
       SelectProps: { IconComponent: de },
-      defaultValue: n,
+      defaultValue: l,
       id: "select",
-      label: "Select Date Range",
+      label: r,
       select: !0,
       sx: { width: "100%" },
-      value: n,
+      value: l,
       variant: "outlined",
-      children: r?.map((c) => /* @__PURE__ */ a(Ae, { onClick: c.onClick, value: c.label, children: c.label }, c.label))
+      children: s?.map((n) => /* @__PURE__ */ a(Ae, { onClick: n.onClick, value: n.label, children: n.label }, n.label))
     }
   ) });
 }, Ue = (e) => {
-  const { toolbar: o, content: t, shortcuts: n } = Ee(e);
+  const { toolbar: o, content: t, shortcuts: l } = Ee(e);
   return /* @__PURE__ */ T(
     Se,
     {
@@ -520,7 +521,7 @@ const ee = {
       },
       children: [
         /* @__PURE__ */ T(I, { sx: { gridColumn: 1, gridRow: 1, p: 16 }, children: [
-          n,
+          l,
           o
         ] }),
         /* @__PURE__ */ a(Ie, { className: P.contentWrapper, children: t })
@@ -531,10 +532,10 @@ const ee = {
   copy: e,
   dateRange: o,
   onRangeChanged: t,
-  selectedShortcut: n = e.dateRangeThisMonth,
+  selectedShortcut: l = e.dateRangeThisMonth,
   sx: r = {}
 }) => {
-  const c = H(), l = fe(c.breakpoints.down("sm")), s = R.useMemo(() => {
+  const s = H(), n = fe(s.breakpoints.down("sm")), c = R.useMemo(() => {
     const i = he(), u = ge(i, 1), C = me(i, 1);
     return [
       {
@@ -570,7 +571,7 @@ const ee = {
     const C = u.shortcut;
     t?.(i, C ? C.label : e.dateRangeCustom);
   };
-  return /* @__PURE__ */ a(I, { gap: l ? 0 : 16, m: l ? 0 : 8, children: /* @__PURE__ */ a(be, { dateAdapter: Ce, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(I, { gap: n ? 0 : 16, m: n ? 0 : 8, children: /* @__PURE__ */ a(be, { dateAdapter: Ce, children: /* @__PURE__ */ a(
     Te,
     {
       calendars: 1,
@@ -584,19 +585,38 @@ const ee = {
       slotProps: {
         actionBar: { actions: [] },
         shortcuts: {
-          items: s
+          items: c
         },
         toolbar: {
-          toolbarFormat: l ? "MM/dd/yyyy" : "MMM d, yyyy"
+          toolbarFormat: n ? "MM/dd/yyyy" : "MMM d, yyyy"
         }
       },
       slots: {
-        ...l && { layout: Ue },
+        ...n && { layout: Ue },
         leftArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_left", size: 28 }),
-        shortcuts: (i) => l ? /* @__PURE__ */ a(Ge, { selected: n, ...i }) : /* @__PURE__ */ a($e, { selected: n, ...i }),
+        shortcuts: (i) => n ? /* @__PURE__ */ a(
+          Ge,
+          {
+            selectLabel: e.dateRangeSelectARange,
+            selected: l,
+            ...i
+          }
+        ) : /* @__PURE__ */ a($e, { selected: l, ...i }),
         rightArrowIcon: () => /* @__PURE__ */ a(x, { name: "chevron_right", size: 28 }),
-        ...l && {
-          toolbar: (i) => /* @__PURE__ */ a(Re, { dateSeparator: "", ...i, sx: { gap: 8 } })
+        ...n && {
+          toolbar: (i) => /* @__PURE__ */ a(
+            Re,
+            {
+              dateSeparator: "",
+              ...i,
+              slotProps: {
+                textField: ({ position: u }) => ({
+                  label: u === "start" ? e.dateRangeFrom : e.dateRangeTo
+                })
+              },
+              sx: { gap: 8 }
+            }
+          )
         }
       },
       sx: { ...r },
@@ -609,11 +629,11 @@ const ee = {
   hasSecondaryAction: e = !0,
   isPrimaryDisabled: o,
   onPrimaryAction: t,
-  onSecondaryAction: n,
+  onSecondaryAction: l,
   primaryColor: r = "primary",
-  primaryText: c = "Save",
-  secondaryColor: l = "primary",
-  secondaryText: s = "Cancel"
+  primaryText: s = "Save",
+  secondaryColor: n = "primary",
+  secondaryText: c = "Cancel"
 }) => /* @__PURE__ */ T(
   I,
   {
@@ -625,10 +645,10 @@ const ee = {
       e && /* @__PURE__ */ a(
         V,
         {
-          color: l,
-          onClick: n,
+          color: n,
+          onClick: l,
           variant: t ? "outlined" : "contained",
-          children: s
+          children: c
         }
       ),
       t && /* @__PURE__ */ a(
@@ -638,7 +658,7 @@ const ee = {
           disabled: o,
           onClick: t,
           variant: "contained",
-          children: c
+          children: s
         }
       )
     ]
@@ -647,75 +667,75 @@ const ee = {
   bold: e,
   className: o = "",
   children: t,
-  color: n,
+  color: l,
   sx: r = {},
-  truncate: c = !0,
-  uppercase: l,
-  ...s
+  truncate: s = !0,
+  uppercase: n,
+  ...c
 }) => {
-  switch (s.variant) {
+  switch (c.variant) {
     case "Body":
-      s.variant = "body1";
+      c.variant = "body1";
       break;
     case "Button":
-      s.variant = "button";
+      c.variant = "button";
       break;
     case "H1":
-      s.variant = "h1";
+      c.variant = "h1";
       break;
     case "H2":
-      s.variant = "h2";
+      c.variant = "h2";
       break;
     case "H3":
-      s.variant = "h3";
+      c.variant = "h3";
       break;
     case "Paragraph":
-      s.variant = "subtitle1";
+      c.variant = "subtitle1";
       break;
     case "ParagraphSmall":
-      s.variant = "subtitle2";
+      c.variant = "subtitle2";
       break;
     case "Small":
-      s.variant = "body2";
+      c.variant = "body2";
       break;
     case "Tiny":
-      s.variant = "tiny";
+      c.variant = "tiny";
       break;
     case "XSmall":
-      s.variant = "caption";
+      c.variant = "caption";
       break;
   }
   return /* @__PURE__ */ a(
     ve,
     {
       className: `mx-kmui-text ${o}`,
-      color: n,
+      color: l,
       sx: [
         e ? {
           fontWeight: 600
         } : {},
-        c ? {
+        s ? {
           overflow: "hidden",
           textOverflow: "ellipsis",
           whiteSpace: "nowrap"
         } : {},
-        l ? {
+        n ? {
           textTransform: "uppercase"
         } : {},
         ...Array.isArray(r) ? r : [r]
       ],
-      ...s,
+      ...c,
       children: t
     }
   );
-}, Ze = ({ className: e = "", children: o, ...t }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...t, children: o }), oo = ({ className: e = "", children: o, ...t }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...t, children: o }), ro = ({ className: e = "", children: o, ...t }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...t, children: o }), to = ({ className: e = "", children: o, truncate: t, ...n }) => /* @__PURE__ */ a(
+}, Ze = ({ className: e = "", children: o, ...t }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...t, children: o }), oo = ({ className: e = "", children: o, ...t }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...t, children: o }), ro = ({ className: e = "", children: o, ...t }) => /* @__PURE__ */ a(k, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...t, children: o }), to = ({ className: e = "", children: o, truncate: t, ...l }) => /* @__PURE__ */ a(
   k,
   {
     className: `mx-kmui-text p ${e}`,
     component: "p",
     truncate: t || !1,
     variant: "body1",
-    ...n,
+    ...l,
     children: o
   }
 ), io = ({ copy: e, onClose: o }) => /* @__PURE__ */ T(
@@ -737,11 +757,11 @@ const ee = {
   className: e,
   disableSave: o,
   id: t,
-  isOpen: n,
+  isOpen: l,
   onClose: r,
-  onSave: c,
-  primaryText: l,
-  secondaryText: s,
+  onSave: s,
+  primaryText: n,
+  secondaryText: c,
   children: d,
   ...i
 }) => /* @__PURE__ */ T(
@@ -751,19 +771,19 @@ const ee = {
     className: `mx-kmui-drawer ${e}`,
     id: t ?? void 0,
     onClose: r,
-    open: n,
+    open: l,
     variant: "temporary",
     ...i,
     children: [
       d,
-      c && /* @__PURE__ */ a(
+      s && /* @__PURE__ */ a(
         We,
         {
           isPrimaryDisabled: o,
-          onPrimaryAction: c,
+          onPrimaryAction: s,
           onSecondaryAction: r,
-          primaryText: l,
-          secondaryText: s
+          primaryText: n,
+          secondaryText: c
         }
       )
     ]
@@ -772,54 +792,54 @@ const ee = {
   alt: e,
   institutionGuid: o,
   logoUrl: t,
-  size: n = oe,
+  size: l = oe,
   ...r
 }) => /* @__PURE__ */ a(
   "img",
   {
     alt: e,
-    height: n,
-    onError: (c) => c.target.src = Ke,
+    height: l,
+    onError: (s) => s.target.src = Ke,
     src: t || `${G}/Ipad%20Logos/100x100/${o}_100x100.png`,
     style: {
       borderRadius: 4
     },
-    width: n,
+    width: l,
     ...r
   }
 ), lo = ({
   alt: e = "",
   categoryGuid: o,
   merchantGuid: t,
-  size: n = oe,
+  size: l = oe,
   ...r
 }) => {
-  const [c, l] = R.useState(!1), s = H();
+  const [s, n] = R.useState(!1), c = H();
   return /* @__PURE__ */ T(X, { display: "inline-block", position: "relative", ...r, children: [
-    t && !c && /* @__PURE__ */ a(
+    t && !s && /* @__PURE__ */ a(
       "img",
       {
         alt: e,
         "aria-hidden": !e,
-        height: n,
-        onError: () => l(!0),
+        height: l,
+        onError: () => n(!0),
         src: `${G}/merchant_logos/${t}.png`,
         style: {
-          backgroundColor: s.palette.common.white,
+          backgroundColor: c.palette.common.white,
           borderRadius: 4,
           boxSizing: "border-box",
           position: "absolute"
         },
-        width: n
+        width: l
       }
     ),
-    /* @__PURE__ */ a(Ve, { categoryGuid: o, size: n })
+    /* @__PURE__ */ a(Ve, { categoryGuid: o, size: l })
   ] });
 }, co = ({
   disabled: e = !1,
   label: o = "",
   shrink: t = !0,
-  variant: n = "outlined",
+  variant: l = "outlined",
   ...r
 }) => /* @__PURE__ */ a(
   j,
@@ -829,7 +849,7 @@ const ee = {
     },
     disabled: e,
     label: o,
-    variant: n,
+    variant: l,
     ...r
   }
 );
@@ -840,11 +860,11 @@ const so = ({
   open: e,
   handleClose: o,
   message: t,
-  autoHideDuration: n = 3e3,
+  autoHideDuration: l = 3e3,
   severity: r = "success",
-  snackbarSx: c,
-  showAction: l = !1,
-  showClose: s = !1,
+  snackbarSx: s,
+  showAction: n = !1,
+  showClose: c = !1,
   actionText: d = "Undo",
   onActionClick: i,
   multiLine: u = !1
@@ -856,10 +876,10 @@ const so = ({
       direction: u ? "column-reverse" : "row",
       justifyContent: (
         // eslint-disable-next-line no-nested-ternary
-        u && l && s ? "space-between" : "flex-end"
+        u && n && c ? "space-between" : "flex-end"
       ),
       children: [
-        l && /* @__PURE__ */ a(
+        n && /* @__PURE__ */ a(
           V,
           {
             color: "inherit",
@@ -872,7 +892,7 @@ const so = ({
             children: d
           }
         ),
-        s && /* @__PURE__ */ a(
+        c && /* @__PURE__ */ a(
           J,
           {
             "aria-label": "close",
@@ -890,11 +910,11 @@ const so = ({
     {
       TransitionComponent: Ye,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      autoHideDuration: n,
+      autoHideDuration: l,
       onClose: o,
       open: e,
       sx: {
-        ...c,
+        ...s,
         width: u ? 400 : 325
       },
       children: /* @__PURE__ */ a(
@@ -905,7 +925,7 @@ const so = ({
           sx: {
             display: "flex",
             alignItems: "stretch",
-            minHeight: s && l && u ? 120 : 56,
+            minHeight: c && n && u ? 120 : 56,
             maxHeight: u ? 120 : 56,
             width: "100%",
             "& .MuiAlert-icon": {
@@ -952,27 +972,27 @@ const so = ({
   children: e,
   target: o = O.REACT,
   theme: t = N.LIGHT,
-  tokenOverrides: n
+  tokenOverrides: l
 }) => {
-  const [r, c] = R.useState(t === N.LIGHT ? q : Oe), l = R.useMemo(() => ({
-    ...n
-  }), [n]);
+  const [r, s] = R.useState(t === N.LIGHT ? q : Oe), n = R.useMemo(() => ({
+    ...l
+  }), [l]);
   return R.useEffect(() => {
-    const s = $(t, o, { ...l });
-    c(s);
-  }, [t, o, l]), o === O.REACT ? /* @__PURE__ */ a(re.Provider, { value: r, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(te.Provider, { value: r, children: e }));
+    const c = $(t, o, { ...n });
+    s(c);
+  }, [t, o, n]), o === O.REACT ? /* @__PURE__ */ a(re.Provider, { value: r, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(te.Provider, { value: r, children: e }));
 }, po = (e = O.REACT, o = {}) => {
-  const t = e === O.REACT ? re : te, n = R.useContext(t);
-  return n || $(N.LIGHT, e, { ...o });
+  const t = e === O.REACT ? re : te, l = R.useContext(t);
+  return l || $(N.LIGHT, e, { ...o });
 }, ho = ({
   component: e = B,
   variant: o = "outlined",
   selected: t,
-  onChange: n,
+  onChange: l,
   headline: r,
-  message: c,
-  name: l,
-  value: s,
+  message: s,
+  name: n,
+  value: c,
   disabled: d = !1,
   error: i = !1,
   icon: u = !1,
@@ -987,7 +1007,7 @@ const so = ({
       control: e === B ? /* @__PURE__ */ a(
         B,
         {
-          name: l,
+          name: n,
           sx: {
             p: 0,
             ml: 16,
@@ -1002,7 +1022,7 @@ const so = ({
       ) : /* @__PURE__ */ a(
         Le,
         {
-          name: l,
+          name: n,
           sx: {
             p: 0,
             ml: 16,
@@ -1020,11 +1040,11 @@ const so = ({
         u && /* @__PURE__ */ a(_, { sx: { mr: 12, mt: "8px", flexShrink: 0 }, children: u }),
         /* @__PURE__ */ T(_, { sx: { flex: 1, minWidth: 0, py: "8px" }, children: [
           r && /* @__PURE__ */ a(Y, { fontWeight: 600, sx: { lineHeight: "24px", pb: "4px" }, variant: "body1", children: r }),
-          /* @__PURE__ */ a(Y, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: c })
+          /* @__PURE__ */ a(Y, { sx: { lineHeight: "20px" }, variant: "subtitle2", children: s })
         ] })
       ] }),
       labelPlacement: "start",
-      onChange: n,
+      onChange: l,
       sx: {
         display: "flex",
         padding: "6px 16px",
@@ -1054,7 +1074,7 @@ const so = ({
         },
         ...C
       },
-      value: s
+      value: c
     }
   );
 }, y = {
@@ -1140,7 +1160,7 @@ const so = ({
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
 }, qe = (e, o) => {
-  const t = M(o?.primary || E.PRIMARY), n = M(o?.secondary || E.SECONDARY), r = M(o?.error || E.ERROR), c = M(o?.warning || E.WARNING), l = M(o?.info || E.INFO), s = M(o?.success || E.SUCCESS), d = M(o?.grey || E.GREY), i = e === y.LIGHT;
+  const t = M(o?.primary || E.PRIMARY), l = M(o?.secondary || E.SECONDARY), r = M(o?.error || E.ERROR), s = M(o?.warning || E.WARNING), n = M(o?.info || E.INFO), c = M(o?.success || E.SUCCESS), d = M(o?.grey || E.GREY), i = e === y.LIGHT;
   return {
     mode: e,
     // DEPRECATED: Use grey instead
@@ -1168,14 +1188,14 @@ const so = ({
       darker: i ? t[900] : t[100]
     },
     secondary: {
-      ...n,
+      ...l,
       /* DEPRECATED: Use light instead */
-      lighter: i ? n[100] : n[800],
-      light: i ? n[300] : n[600],
-      main: i ? n[500] : n[400],
-      dark: i ? n[700] : n[200],
+      lighter: i ? l[100] : l[800],
+      light: i ? l[300] : l[600],
+      main: i ? l[500] : l[400],
+      dark: i ? l[700] : l[200],
       /* DEPRECATED: Use dark instead */
-      darker: i ? n[900] : n[100]
+      darker: i ? l[900] : l[100]
     },
     neutral: {
       ...d,
@@ -1204,34 +1224,34 @@ const so = ({
       darker: i ? r[900] : r[100]
     },
     warning: {
-      ...c,
+      ...s,
       /* DEPRECATED: Use light instead */
-      lighter: i ? c[100] : c[800],
-      light: i ? c[300] : c[600],
-      main: i ? c[500] : c[400],
-      dark: i ? c[700] : c[200],
+      lighter: i ? s[100] : s[800],
+      light: i ? s[300] : s[600],
+      main: i ? s[500] : s[400],
+      dark: i ? s[700] : s[200],
       /* DEPRECATED: Use light instead */
-      darker: i ? c[900] : c[100]
+      darker: i ? s[900] : s[100]
     },
     info: {
-      ...l,
+      ...n,
       /* DEPRECATED: Use light instead */
-      lighter: i ? l[100] : l[800],
-      light: i ? l[300] : l[600],
-      main: i ? l[500] : l[400],
-      dark: i ? l[700] : l[200],
+      lighter: i ? n[100] : n[800],
+      light: i ? n[300] : n[600],
+      main: i ? n[500] : n[400],
+      dark: i ? n[700] : n[200],
       /* DEPRECATED: Use light instead */
-      darker: i ? l[900] : l[100]
+      darker: i ? n[900] : n[100]
     },
     success: {
-      ...s,
+      ...c,
       /* DEPRECATED: Use light instead */
-      lighter: i ? s[100] : s[800],
-      light: i ? s[300] : s[600],
-      main: i ? s[500] : s[400],
-      dark: i ? s[700] : s[200],
+      lighter: i ? c[100] : c[800],
+      light: i ? c[300] : c[600],
+      main: i ? c[500] : c[400],
+      dark: i ? c[700] : c[200],
       /* DEPRECATED: Use light instead */
-      darker: i ? s[900] : s[100]
+      darker: i ? c[900] : c[100]
     },
     grey: d,
     action: {
@@ -1427,7 +1447,7 @@ we.setLicenseKey(
   "702b0c04dc7df078768d2d45cd3a98c6Tz0xMjEzMDYsRT0xNzkzNzUwMzk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
 );
 const go = (e, o) => {
-  const t = qe(e, o?.paletteOptions), n = o0(o?.typographyOptions);
+  const t = qe(e, o?.paletteOptions), l = o0(o?.typographyOptions);
   return ce({
     breakpoints: {
       values: {
@@ -1444,7 +1464,7 @@ const go = (e, o) => {
     },
     spacing: 1,
     // TODO: update spacing, we're back to a 8-base which is default for MUI 2.x
-    typography: n,
+    typography: l,
     components: {
       MuiAlert: {
         defaultProps: {
@@ -1457,15 +1477,15 @@ const go = (e, o) => {
           variant: "outlined"
         },
         styleOverrides: {
-          root: ({ theme: r, ownerState: c }) => {
-            const l = c.severity || "info";
-            let s = r.palette.mode === y.LIGHT ? r.palette[l]?.[50] : r.palette[l]?.[800];
-            if (c.variant === "filled") {
-              const d = l === "warning";
-              s = r.palette[l]?.[d ? 400 : 600];
+          root: ({ theme: r, ownerState: s }) => {
+            const n = s.severity || "info";
+            let c = r.palette.mode === y.LIGHT ? r.palette[n]?.[50] : r.palette[n]?.[800];
+            if (s.variant === "filled") {
+              const d = n === "warning";
+              c = r.palette[n]?.[d ? 400 : 600];
             }
             return {
-              backgroundColor: s,
+              backgroundColor: c,
               borderRadius: r.shape.borderRadius,
               "& .MuiAlert-message": {
                 fontSize: r.typography.subtitle1.fontSize,
@@ -1755,7 +1775,7 @@ const go = (e, o) => {
       },
       MuiLink: {
         styleOverrides: {
-          root: ({ theme: r, color: c }) => ({
+          root: ({ theme: r, color: s }) => ({
             cursor: "pointer",
             fontWeight: 600,
             textDecoration: "none",
@@ -1770,7 +1790,7 @@ const go = (e, o) => {
               backgroundColor: r.palette.action.hover
             },
             "&:active": {
-              backgroundColor: r.palette.mode === y.LIGHT ? r.palette[c].light : r.palette[c].dark
+              backgroundColor: r.palette.mode === y.LIGHT ? r.palette[s].light : r.palette[s].dark
             }
           })
         }
@@ -1948,9 +1968,9 @@ const go = (e, o) => {
             gridColumn: "1/4",
             "& > .MuiTypography-root": {
               textTransform: "uppercase",
-              fontSize: n.body2.fontSize,
+              fontSize: l.body2.fontSize,
               fontWeight: 600,
-              lineHeight: n.body2.lineHeight
+              lineHeight: l.body2.lineHeight
             }
           }
         }