@mxenabled/mxui 1.0.1-alpha.JB0 → 1.0.2-alpha.JB0

package/dist/index.es.js

@@ -35,8 +35,8 @@ const h = ({
   children: e,
   height: o,
   size: r = 16,
-  viewBox: t = "0 0 16 16",
-  width: i
+  viewBox: l = "0 0 16 16",
+  width: t
 }) => /* @__PURE__ */ a(
   "svg",
   {
@@ -44,8 +44,8 @@ const h = ({
     className: "mx-kmui-icon",
     focusable: !1,
     height: o || r,
-    viewBox: t,
-    width: i || r,
+    viewBox: l,
+    width: t || r,
     xmlns: "http://www.w3.org/2000/svg",
     children: e
   }
@@ -55,12 +55,12 @@ const b = ({
   color: e,
   fill: o = !1,
   name: r,
-  size: t = 20,
-  sx: i,
-  weight: n = 300,
-  ...l
+  size: l = 20,
+  sx: t,
+  weight: i = 300,
+  ...n
 }) => {
-  const [s, f] = m.useState(!1);
+  const [c, f] = m.useState(!1);
   return m.useEffect(() => {
     document.fonts.ready.then(() => {
       f(!0);
@@ -68,23 +68,23 @@ const b = ({
   }, []), /* @__PURE__ */ a(
     j,
     {
-      color: s ? e && e : void 0,
+      color: c ? e && e : void 0,
       sx: [
         {
-          fontSize: t,
+          fontSize: l,
           fontVariationSettings: `
             'FILL' ${o ? 1 : 0}, 
-            'wght' ${n}, 
+            'wght' ${i}, 
             'GRAD' 0, 
-            'opsz' ${t}
+            'opsz' ${l}
           `
         },
-        ...Array.isArray(i) ? i : [i],
+        ...Array.isArray(t) ? t : [t],
         {
-          ...!s && { color: "transparent" }
+          ...!c && { color: "transparent" }
         }
       ],
-      ...l,
+      ...n,
       children: r
     }
   );
@@ -411,53 +411,53 @@ const W = {
   categoryGuid: e,
   icon_ratio: o = M0,
   size: r = 32,
-  sx: t = {},
-  variant: i = "filled"
+  sx: l = {},
+  variant: t = "filled"
 }) => {
-  const n = C(), l = m.useMemo(
-    () => y0.find((c) => c.guid === e) ?? W,
+  const i = C(), n = m.useMemo(
+    () => y0.find((s) => s.guid === e) ?? W,
     [e]
-  ), s = n.palette.categories[l.colorName];
+  ), c = i.palette.categories[n.colorName];
   return /* @__PURE__ */ a(
     k,
     {
       alignItems: "center",
       bgcolor: () => {
-        let c = s;
-        return i === "twotone" && (c = `${c}20`), i === "transparent" || i === "basic" ? "transparent" : c;
+        let s = c;
+        return t === "twotone" && (s = `${s}20`), t === "transparent" || t === "basic" ? "transparent" : s;
       },
       borderRadius: 1,
       color: () => {
-        const c = i === "filled" ? n.palette.common.white : s;
-        return i === "basic" ? n.palette.text.primary : c;
+        const s = t === "filled" ? i.palette.common.white : c;
+        return t === "basic" ? i.palette.text.primary : s;
       },
       height: r,
       justifyContent: "center",
-      sx: [...Array.isArray(t) ? t : [t]],
+      sx: [...Array.isArray(l) ? l : [l]],
       width: r,
-      children: /* @__PURE__ */ a(b, { name: l.icon, size: r * o })
+      children: /* @__PURE__ */ a(b, { name: n.icon, size: r * o })
     }
   );
 }, T0 = ({
   items: e,
   onChange: o,
   isValid: r,
-  selected: t
+  selected: l
 }) => {
-  const i = C(), n = e?.map((l) => {
-    const s = l.getValue({ isValid: r });
+  const t = C(), i = e?.map((n) => {
+    const c = n.getValue({ isValid: r });
     return {
-      label: l.label,
+      label: n.label,
       onClick: () => {
-        o(s, "accept", l);
+        o(c, "accept", n);
       },
-      disabled: !r(s)
+      disabled: !r(c)
     };
   });
-  return /* @__PURE__ */ a(L, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(a0, { color: "primary", orientation: "vertical", value: t, children: n?.map((l) => /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(L, { sx: { gridColumn: 1, gridRow: "2/3", ml: 4, mt: 24, mr: 32 }, children: /* @__PURE__ */ a(a0, { color: "primary", orientation: "vertical", value: l, children: i?.map((n) => /* @__PURE__ */ a(
     o0,
     {
-      onClick: l.onClick,
+      onClick: n.onClick,
       sx: {
         borderWidth: 1,
         color: "secondary.main",
@@ -468,29 +468,29 @@ const W = {
           boxShadow: "0px 0px 0px 2px rgba(82, 138, 224, 0.8)"
         },
         "&:hover": {
-          bgcolor: i.palette.action.hover,
-          borderTop: `1px solid ${i.palette.secondary.lighter}`
+          bgcolor: t.palette.action.hover,
+          borderTop: `1px solid ${t.palette.secondary.lighter}`
         },
         "&.Mui-selected": {
-          border: `2px solid ${i.palette.mode === "light" ? i.palette.primary.main : i.palette.primary.light} !important`,
+          border: `2px solid ${t.palette.mode === "light" ? t.palette.primary.main : t.palette.primary.light} !important`,
           marginTop: "-2px !important",
-          color: i.palette.mode === "light" ? "primary" : "primary.light"
+          color: t.palette.mode === "light" ? "primary" : "primary.light"
         }
       },
-      value: l.label,
-      children: l.label
+      value: n.label,
+      children: n.label
     },
-    l.label
+    n.label
   )) }) });
 }, De = ({
   copy: e,
   dateRange: o,
   onRangeChanged: r,
-  selectedShortcut: t = e.dateRangeThisMonth,
-  sx: i = {}
+  selectedShortcut: l = e.dateRangeThisMonth,
+  sx: t = {}
 }) => {
-  const n = C(), l = q(n.breakpoints.down("sm")), s = m.useMemo(() => {
-    const u = Y(), c = Q(u, 1), g = J(u, 1);
+  const i = C(), n = q(i.breakpoints.down("sm")), c = m.useMemo(() => {
+    const u = Y(), s = Q(u, 1), g = J(u, 1);
     return [
       {
         label: e.dateRangeThisMonth,
@@ -498,7 +498,7 @@ const W = {
       },
       {
         label: e.dateRangeLastMonth,
-        getValue: () => [F(c), S(c)]
+        getValue: () => [F(s), S(s)]
       },
       {
         label: e.dateRangeLast30Days,
@@ -521,8 +521,8 @@ const W = {
         getValue: () => [u, u]
       }
     ];
-  }, [e]), f = (u, c) => {
-    const g = c.shortcut;
+  }, [e]), f = (u, s) => {
+    const g = s.shortcut;
     r?.(u, g ? g.label : e.dateRangeCustom);
   };
   return /* @__PURE__ */ a(k, { gap: 16, m: 8, children: /* @__PURE__ */ a(e0, { dateAdapter: t0, children: /* @__PURE__ */ a(
@@ -539,7 +539,7 @@ const W = {
       slotProps: {
         actionBar: { actions: [] },
         shortcuts: {
-          items: l ? [] : s
+          items: n ? [] : c
         },
         toolbar: {
           toolbarFormat: "MMM d, yyyy"
@@ -547,10 +547,10 @@ const W = {
       },
       slots: {
         leftArrowIcon: () => /* @__PURE__ */ a(b, { name: "chevron_left", size: 28 }),
-        shortcuts: (u) => /* @__PURE__ */ a(T0, { selected: t, ...u }),
+        shortcuts: (u) => /* @__PURE__ */ a(T0, { selected: l, ...u }),
         rightArrowIcon: () => /* @__PURE__ */ a(b, { name: "chevron_right", size: 28 })
       },
-      sx: { ...i },
+      sx: { ...t },
       value: o
     }
   ) }) });
@@ -560,11 +560,11 @@ const W = {
   hasSecondaryAction: e = !0,
   isPrimaryDisabled: o,
   onPrimaryAction: r,
-  onSecondaryAction: t,
-  primaryColor: i = "primary",
-  primaryText: n = "Save",
-  secondaryColor: l = "primary",
-  secondaryText: s = "Cancel",
+  onSecondaryAction: l,
+  primaryColor: t = "primary",
+  primaryText: i = "Save",
+  secondaryColor: n = "primary",
+  secondaryText: c = "Cancel",
   ...f
 }) => /* @__PURE__ */ y(
   O,
@@ -582,26 +582,26 @@ const W = {
       e && /* @__PURE__ */ a(
         D,
         {
-          color: l,
-          onClick: t,
+          color: n,
+          onClick: l,
           variant: r ? "outlined" : "contained",
-          children: s
+          children: c
         }
       ),
       r && /* @__PURE__ */ a(
         D,
         {
-          color: i,
+          color: t,
           disabled: o,
           onClick: r,
           variant: "contained",
-          children: n
+          children: i
         }
       )
     ]
   }
 ), Le = ({ copy: e, onClose: o, ...r }) => {
-  const t = C();
+  const l = C();
   return /* @__PURE__ */ y(
     O,
     {
@@ -613,7 +613,7 @@ const W = {
       ...r,
       children: [
         /* @__PURE__ */ a(L, { sx: { flexGrow: 1 }, children: /* @__PURE__ */ a(A0, { sx: { fontWeight: 600 }, variant: "H3", children: e.title }) }),
-        /* @__PURE__ */ a(_, { "aria-label": e.close_aria, onClick: o, sx: { mr: -12 }, children: /* @__PURE__ */ a(f0, { color: t.palette.primary.main }) })
+        /* @__PURE__ */ a(_, { "aria-label": e.close_aria, onClick: o, sx: { mr: -12 }, children: /* @__PURE__ */ a(f0, { color: l.palette.primary.main }) })
       ]
     }
   );
@@ -621,11 +621,11 @@ const W = {
   className: e,
   disableSave: o,
   id: r,
-  isOpen: t,
-  onClose: i,
-  onSave: n,
-  primaryText: l,
-  secondaryText: s,
+  isOpen: l,
+  onClose: t,
+  onSave: i,
+  primaryText: n,
+  secondaryText: c,
   children: f,
   ...u
 }) => /* @__PURE__ */ y(
@@ -634,20 +634,20 @@ const W = {
     anchor: "right",
     className: `mx-kmui-drawer ${e}`,
     id: r ?? void 0,
-    onClose: i,
-    open: t,
+    onClose: t,
+    open: l,
     variant: "temporary",
     ...u,
     children: [
       f,
-      n && /* @__PURE__ */ a(
+      i && /* @__PURE__ */ a(
         v0,
         {
           isPrimaryDisabled: o,
-          onPrimaryAction: n,
-          onSecondaryAction: i,
-          primaryText: l,
-          secondaryText: s
+          onPrimaryAction: i,
+          onSecondaryAction: t,
+          primaryText: n,
+          secondaryText: c
         }
       )
     ]
@@ -656,95 +656,95 @@ const W = {
   alt: e,
   institutionGuid: o,
   logoUrl: r,
-  size: t = $,
-  ...i
+  size: l = $,
+  ...t
 }) => /* @__PURE__ */ a(
   "img",
   {
     alt: e,
-    height: t,
-    onError: (n) => n.target.src = x0,
+    height: l,
+    onError: (i) => i.target.src = x0,
     src: r || `${H}/Ipad%20Logos/100x100/${o}_100x100.png`,
     style: {
       borderRadius: 4
     },
-    width: t,
-    ...i
+    width: l,
+    ...t
   }
 ), Ie = ({
   alt: e = "",
   categoryGuid: o,
   merchantGuid: r,
-  size: t = $,
-  ...i
+  size: l = $,
+  ...t
 }) => {
-  const [n, l] = m.useState(!1);
-  return /* @__PURE__ */ y(L, { display: "inline-block", position: "relative", ...i, children: [
-    r && !n && /* @__PURE__ */ a(
+  const [i, n] = m.useState(!1);
+  return /* @__PURE__ */ y(L, { display: "inline-block", position: "relative", ...t, children: [
+    r && !i && /* @__PURE__ */ a(
       "img",
       {
         alt: e,
         "aria-hidden": !e,
-        height: t,
-        onError: () => l(!0),
+        height: l,
+        onError: () => n(!0),
         src: `${H}/merchant_logos/${r}.png`,
         style: {
           borderRadius: 4,
           boxSizing: "border-box",
           position: "absolute"
         },
-        width: t
+        width: l
       }
     ),
-    /* @__PURE__ */ a(C0, { categoryGuid: o, size: t })
+    /* @__PURE__ */ a(C0, { categoryGuid: o, size: l })
   ] });
 }, T = ({
   bold: e,
   className: o = "",
   children: r,
-  color: t,
-  sx: i = {},
-  truncate: n = !0,
-  uppercase: l,
-  ...s
+  color: l,
+  sx: t = {},
+  truncate: i = !0,
+  uppercase: n,
+  ...c
 }) => /* @__PURE__ */ a(
   n0,
   {
     className: `mx-kmui-text ${o}`,
-    color: t,
+    color: l,
     sx: [
       e ? {
         fontWeight: 600
       } : {},
-      n ? {
+      i ? {
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap"
       } : {},
-      l ? {
+      n ? {
         textTransform: "uppercase"
       } : {},
-      ...Array.isArray(i) ? i : [i]
+      ...Array.isArray(t) ? t : [t]
     ],
-    ...s,
+    ...c,
     children: r
   }
-), A0 = ({ className: e = "", children: o, ...r }) => /* @__PURE__ */ a(T, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "H1", ...r, children: o }), Se = ({ className: e = "", children: o, ...r }) => /* @__PURE__ */ a(T, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "H2", ...r, children: o }), Fe = ({ className: e = "", children: o, ...r }) => /* @__PURE__ */ a(T, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "H3", ...r, children: o }), we = ({ className: e = "", children: o, truncate: r, ...t }) => /* @__PURE__ */ a(
+), A0 = ({ className: e = "", children: o, ...r }) => /* @__PURE__ */ a(T, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "H1", ...r, children: o }), Se = ({ className: e = "", children: o, ...r }) => /* @__PURE__ */ a(T, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "H2", ...r, children: o }), Fe = ({ className: e = "", children: o, ...r }) => /* @__PURE__ */ a(T, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "H3", ...r, children: o }), we = ({ className: e = "", children: o, truncate: r, ...l }) => /* @__PURE__ */ a(
   T,
   {
     className: `mx-kmui-text p ${e}`,
     component: "p",
     truncate: r || !1,
     variant: "Body",
-    ...t,
+    ...l,
     children: o
   }
 ), Re = ({
   disabled: e = !1,
   label: o = "",
   shrink: r = !0,
-  variant: t = "outlined",
-  ...i
+  variant: l = "outlined",
+  ...t
 }) => /* @__PURE__ */ a(
   l0,
   {
@@ -753,8 +753,8 @@ const W = {
     },
     disabled: e,
     label: o,
-    variant: t,
-    ...i
+    variant: l,
+    ...t
   }
 );
 function D0(e) {
@@ -764,14 +764,14 @@ const Ne = ({
   open: e,
   handleClose: o,
   message: r,
-  autoHideDuration: t = 3e3,
-  severity: i = "success",
-  snackbarSx: n,
-  showAction: l = !1,
-  showClose: s = !1,
+  autoHideDuration: l = 3e3,
+  severity: t = "success",
+  snackbarSx: i,
+  showAction: n = !1,
+  showClose: c = !1,
   actionText: f = "Undo",
   onActionClick: u,
-  multiLine: c = !1
+  multiLine: s = !1
 }) => {
   const g = C(), K = {
     success: g.palette.success.dark,
@@ -781,14 +781,14 @@ const Ne = ({
   }, Z = /* @__PURE__ */ y(
     k,
     {
-      alignItems: c ? "flex-end" : "center",
-      direction: c ? "column-reverse" : "row",
+      alignItems: s ? "flex-end" : "center",
+      direction: s ? "column-reverse" : "row",
       justifyContent: (
         // eslint-disable-next-line no-nested-ternary
-        c && l && s ? "space-between" : "flex-end"
+        s && n && c ? "space-between" : "flex-end"
       ),
       children: [
-        l && /* @__PURE__ */ a(
+        n && /* @__PURE__ */ a(
           D,
           {
             color: "inherit",
@@ -801,7 +801,7 @@ const Ne = ({
             children: f
           }
         ),
-        s && /* @__PURE__ */ a(
+        c && /* @__PURE__ */ a(
           _,
           {
             "aria-label": "close",
@@ -819,32 +819,32 @@ const Ne = ({
     {
       TransitionComponent: D0,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      autoHideDuration: t,
+      autoHideDuration: l,
       onClose: o,
       open: e,
       sx: {
-        ...n,
-        width: c ? 400 : 325
+        ...i,
+        width: s ? 400 : 325
       },
       children: /* @__PURE__ */ a(
         s0,
         {
           action: Z,
-          severity: i,
+          severity: t,
           sx: {
             display: "flex",
             alignItems: "stretch",
-            minHeight: s && l && c ? 120 : 56,
-            maxHeight: c ? 120 : 56,
-            backgroundColor: (I) => I.palette.mode === "light" ? I.palette[i].darker : K[i],
+            minHeight: c && n && s ? 120 : 56,
+            maxHeight: s ? 120 : 56,
+            backgroundColor: (I) => I.palette.mode === "light" ? I.palette[t].darker : K[t],
             width: "100%",
             "& .MuiAlert-icon": {
-              alignSelf: c ? "flex-start" : "center"
+              alignSelf: s ? "flex-start" : "center"
             },
             "& .MuiAlert-message": {
-              paddingTop: c ? 12 : 8,
-              paddingBottom: c ? 12 : 8,
-              alignSelf: c ? "flex-start" : "center"
+              paddingTop: s ? 12 : 8,
+              paddingBottom: s ? 12 : 8,
+              alignSelf: s ? "flex-start" : "center"
             },
             "& .MuiAlert-action": {
               alignItems: "stretch",
@@ -857,11 +857,11 @@ const Ne = ({
             {
               sx: {
                 lineHeight: g.typography.Body.lineHeight,
-                whiteSpace: c ? "normal" : "nowrap",
-                overflow: c ? "visible" : "hidden",
-                textOverflow: c ? "clip" : "ellipsis"
+                whiteSpace: s ? "normal" : "nowrap",
+                overflow: s ? "visible" : "hidden",
+                textOverflow: s ? "clip" : "ellipsis"
               },
-              truncate: !c,
+              truncate: !s,
               children: r
             }
           )
@@ -882,18 +882,18 @@ const Ne = ({
   children: e,
   target: o = M.REACT,
   theme: r = x.LIGHT,
-  tokenOverrides: t
+  tokenOverrides: l
 }) => {
-  const [i, n] = m.useState(r === x.LIGHT ? V : d0), l = m.useMemo(() => ({
-    ...t
-  }), [t]);
+  const [t, i] = m.useState(r === x.LIGHT ? V : d0), n = m.useMemo(() => ({
+    ...l
+  }), [l]);
   return m.useEffect(() => {
-    const s = E(r, o, { ...l });
-    n(s);
-  }, [r, o, l]), o === M.REACT ? /* @__PURE__ */ a(G.Provider, { value: i, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(U.Provider, { value: i, children: e }));
+    const c = E(r, o, { ...n });
+    i(c);
+  }, [r, o, n]), o === M.REACT ? /* @__PURE__ */ a(G.Provider, { value: t, children: e }) : (console.warn("DEPRECATED: Use static values instead of tokens"), /* @__PURE__ */ a(U.Provider, { value: t, children: e }));
 }, Pe = (e = M.REACT, o = {}) => {
-  const r = e === M.REACT ? G : U, t = m.useContext(r);
-  return t || E(x.LIGHT, e, { ...o });
+  const r = e === M.REACT ? G : U, l = m.useContext(r);
+  return l || E(x.LIGHT, e, { ...o });
 }, p = {
   LIGHT: "light",
   DARK: "dark"
@@ -1131,8 +1131,8 @@ const A = [...P().shadows];
 A[1] = "0px 2px 8px rgba(106, 115, 129, 0.12)";
 A[2] = "0px 6px 12px rgba(106, 115, 129, 0.16), 0px 3px 8px rgba(87, 102, 117, 0.06)";
 A[3] = "0px 12px 20px rgba(106, 115, 129, 0.22)";
-const N = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", z = "inset 0px 0px 0px 2px rgba(82, 138, 224, 0.8)", H0 = "cubic-bezier(.475,.425,0,.995)", Be = (e) => {
-  const o = L0(e), r = E0(o);
+const N = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", z = "inset 0px 0px 0px 2px rgba(82, 138, 224, 0.8)", H0 = "cubic-bezier(.475,.425,0,.995)", Be = (e, o = {}) => {
+  const r = L0(e, o), l = E0(r);
   return P({
     breakpoints: {
       values: {
@@ -1143,13 +1143,13 @@ const N = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", z = "inset 0px 0px 0px 2px
         xl: 1200
       }
     },
-    palette: o,
+    palette: r,
     shadows: A,
     shape: {
       borderRadius: 4
     },
     spacing: 1,
-    typography: r,
+    typography: l,
     components: {
       MuiAutocomplete: {
         styleOverrides: {
@@ -1350,18 +1350,18 @@ const N = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", z = "inset 0px 0px 0px 2px
       MuiChip: {
         styleOverrides: {
           outlined: ({ theme: t }) => {
-            const { common: i, grey: n, mode: l } = t.palette;
+            const { common: i, grey: n, mode: c } = t.palette;
             return {
               backgroundColor: "transparent",
-              borderColor: l === p.LIGHT ? n[600] : n[500],
+              borderColor: c === p.LIGHT ? n[600] : n[500],
               borderWidth: 1,
-              color: l === p.LIGHT ? n[900] : i.white,
+              color: c === p.LIGHT ? n[900] : i.white,
               fontSize: 11,
               // XSmall
               height: 24,
               "&:hover": {
-                borderColor: l === p.LIGHT ? n[300] : n[600],
-                backgroundColor: l === p.LIGHT ? n[300] : n[600]
+                borderColor: c === p.LIGHT ? n[300] : n[600],
+                backgroundColor: c === p.LIGHT ? n[300] : n[600]
               }
             };
           },
@@ -1628,7 +1628,7 @@ const N = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", z = "inset 0px 0px 0px 2px
         },
         styleOverrides: {
           root: ({ ownerState: t, theme: i }) => {
-            const { mode: n, primary: l } = i.palette;
+            const { mode: n, primary: c } = i.palette;
             return {
               minHeight: 64,
               ...!t.disablePadding && {
@@ -1637,7 +1637,7 @@ const N = "0px 0px 0px 2px rgba(82, 138, 224, 0.8)", z = "inset 0px 0px 0px 2px
                 paddingLeft: 24
               },
               "& .MuiIconButton-root": {
-                color: n === p.LIGHT ? l.main : l.light
+                color: n === p.LIGHT ? c.main : c.light
               }
             };
           }