@movable/ui 3.5.0 → 3.7.0-alpha.0

package/lib/components/Header/HeaderMetadata.d.ts

@@ -1,7 +1,7 @@
 type HeaderMetadataType = {
     icon?: string | JSX.Element;
     label: string;
-    value: string | JSX.Element;
+    value?: string | JSX.Element | null;
 };
 type MetaDataProps = {
     metadata: HeaderMetadataType[];

package/lib/index.d.ts

@@ -209,7 +209,7 @@ declare class HeaderMetaDataPageObject {
 declare type HeaderMetadataType = {
     icon?: string | JSX.Element;
     label: string;
-    value: string | JSX.Element;
+    value?: string | JSX.Element | null;
 };
 
 export declare function HeaderSubtitle({ subtitle, sx, ...rest }: HeaderSubtitleType): JSX_2.Element;

package/lib/index.mjs

@@ -3,7 +3,7 @@ var wp = (e, t, n) => t in e ? Cp(e, t, { enumerable: !0, configurable: !0, writ
 var Ee = (e, t, n) => wp(e, typeof t != "symbol" ? t + "" : t, n);
 import * as S from "react";
 import dt, { useRef as Ha, useState as mt, useEffect as _c, Children as qa, isValidElement as gn, cloneElement as sr, forwardRef as mo } from "react";
-import { Typography as ut, Chip as ma, Tooltip as Ya, Box as Ve, Menu as oi, MenuItem as pr, Button as ht, Dialog as Sp, IconButton as ho, Icon as Rn, DialogTitle as Ep, Stack as Re, DialogActions as Op, CircularProgress as Uo, styled as Bc, Drawer as Dc, AppBar as Rp, useScrollTrigger as jp, Breadcrumbs as kp, Link as Pp, RadioGroup as Ap, FormControlLabel as Ka, Radio as Mp, Card as Lc, ToggleButton as Fc, ToggleButtonGroup as zc, ListSubheader as Ip, FormControl as $p, InputLabel as Np, Select as _p, FormHelperText as Bp, Alert as Dp, Skeleton as Qr, Checkbox as Vc, CardMedia as Lp, CardContent as Fp, CardActions as zp, Fade as Vp, TextField as Wp, Divider as Up, List as Gp, ListItem as Hp, Paper as qp, Badge as Yp } from "@mui/material";
+import { Typography as st, Chip as ma, Tooltip as Ya, Box as Ve, Menu as oi, MenuItem as pr, Button as ht, Dialog as Sp, IconButton as ho, Icon as Rn, DialogTitle as Ep, Stack as Re, DialogActions as Op, CircularProgress as Uo, styled as Bc, Drawer as Dc, AppBar as Rp, useScrollTrigger as jp, Breadcrumbs as kp, Link as Pp, RadioGroup as Ap, FormControlLabel as Ka, Radio as Mp, Card as Lc, ToggleButton as Fc, ToggleButtonGroup as zc, ListSubheader as Ip, FormControl as $p, InputLabel as Np, Select as _p, FormHelperText as Bp, Alert as Dp, Skeleton as Qr, Checkbox as Vc, CardMedia as Lp, CardContent as Fp, CardActions as zp, Fade as Vp, TextField as Wp, Divider as Up, List as Gp, ListItem as Hp, Paper as qp, Badge as Yp } from "@mui/material";
 import Kp from "@emotion/styled";
 import { Global as Xp, ThemeContext as Jp, keyframes as go, css as Wc } from "@emotion/react";
 import { WarningAmberRounded as Zp, ReportRounded as Qp, Close as ef, ViewList as tf } from "@mui/icons-material";
@@ -649,7 +649,7 @@ React keys must be passed directly to JSX without using spread:
 process.env.NODE_ENV === "production" ? ha.exports = Sf() : ha.exports = Ef();
 var p = ha.exports;
 function JE({ stringToDisplay: e }) {
-  return p.jsxs(ut, { children: ["stringToDisplay prop is:", " ", p.jsx("span", { "data-test-string-to-display": !0, children: e })] });
+  return p.jsxs(st, { children: ["stringToDisplay prop is:", " ", p.jsx("span", { "data-test-string-to-display": !0, children: e })] });
 }
 function an(e, ...t) {
   const n = new URL(`https://mui.com/production-error/?code=${e}`);
@@ -3299,7 +3299,7 @@ function yn(e) {
     (0, t.current)(...n)
   )).current;
 }
-function st(...e) {
+function lt(...e) {
   const t = S.useRef(void 0), n = S.useCallback((o) => {
     const i = e.map((a) => {
       if (a == null)
@@ -3496,7 +3496,7 @@ function wu(e) {
   } = Tu({
     ...a,
     externalSlotProps: s
-  }), u = st(c, s == null ? void 0 : s.ref, (m = e.additionalProps) == null ? void 0 : m.ref);
+  }), u = lt(c, s == null ? void 0 : s.ref, (m = e.additionalProps) == null ? void 0 : m.ref);
   return vu(t, {
     ...l,
     ref: u
@@ -4218,7 +4218,7 @@ function QE({ Title: e, Content: t, Actions: n, onClose: o, hideCloseButton: i,
     right: "15px",
     p: "4px",
     color: (x) => x.palette.grey[500]
-  }, children: p.jsx(Rn, { children: "close_filled" }) }), typeof e != "string" ? p.jsx(p.Fragment, { children: e }) : p.jsx(Ep, { "data-test": "ink-dialog-title", children: p.jsxs(Re, { direction: "row", alignItems: "center", children: [((u = a == null ? void 0 : a.primary) == null ? void 0 : u.variant) && p.jsx(lg, { variant: a.primary.variant }), p.jsx(ut, { variant: "h6", children: p.jsx("strong", { children: e }) })] }) }), t, l, a && p.jsxs(Op, { sx: { m: 1 }, children: [a.cancel && p.jsx(ht, { "data-test": "ink-dialog-cancel-action", onClick: a.cancel.onClick, children: (d = a.cancel) == null ? void 0 : d.label }), a.secondary && p.jsx(ht, { "data-test": "ink-dialog-secondary-action", color: ((m = a.secondary) == null ? void 0 : m.variant) === "destructive" ? "error" : "primary", endIcon: a.secondary.loading ? p.jsx(Uo, { size: 20, color: "inherit" }) : void 0, disabled: a.secondary.disabled || a.secondary.loading, ...a.secondary, variant: (h = a.secondary) != null && h.variant ? "contained" : "text", children: (g = a.secondary) == null ? void 0 : g.label }), a.primary && p.jsx(ht, { "data-test": "ink-dialog-primary-action", color: ((b = a.primary) == null ? void 0 : b.variant) === "destructive" ? "error" : "primary", endIcon: a.primary.loading ? p.jsx(Uo, { size: 20, color: "inherit" }) : void 0, disabled: a.primary.disabled || a.primary.loading, ...a.primary, variant: "contained", children: (f = a.primary) == null ? void 0 : f.label })] })] });
+  }, children: p.jsx(Rn, { children: "close_filled" }) }), typeof e != "string" ? p.jsx(p.Fragment, { children: e }) : p.jsx(Ep, { "data-test": "ink-dialog-title", children: p.jsxs(Re, { direction: "row", alignItems: "center", children: [((u = a == null ? void 0 : a.primary) == null ? void 0 : u.variant) && p.jsx(lg, { variant: a.primary.variant }), p.jsx(st, { variant: "h6", children: p.jsx("strong", { children: e }) })] }) }), t, l, a && p.jsxs(Op, { sx: { m: 1 }, children: [a.cancel && p.jsx(ht, { "data-test": "ink-dialog-cancel-action", onClick: a.cancel.onClick, children: (d = a.cancel) == null ? void 0 : d.label }), a.secondary && p.jsx(ht, { "data-test": "ink-dialog-secondary-action", color: ((m = a.secondary) == null ? void 0 : m.variant) === "destructive" ? "error" : "primary", endIcon: a.secondary.loading ? p.jsx(Uo, { size: 20, color: "inherit" }) : void 0, disabled: a.secondary.disabled || a.secondary.loading, ...a.secondary, variant: (h = a.secondary) != null && h.variant ? "contained" : "text", children: (g = a.secondary) == null ? void 0 : g.label }), a.primary && p.jsx(ht, { "data-test": "ink-dialog-primary-action", color: ((b = a.primary) == null ? void 0 : b.variant) === "destructive" ? "error" : "primary", endIcon: a.primary.loading ? p.jsx(Uo, { size: 20, color: "inherit" }) : void 0, disabled: a.primary.disabled || a.primary.loading, ...a.primary, variant: "contained", children: (f = a.primary) == null ? void 0 : f.label })] })] });
 }
 const Ou = 280, cg = Bc(Ve, { shouldForwardProp: (e) => e !== "open" })(({ theme: e, open: t }) => ({
   flexGrow: 1,
@@ -4264,7 +4264,7 @@ function eO({
       ...u && { position: "absolute" }
     },
     variant: "outlined"
-  }, variant: "persistent", anchor: "left", open: e, children: p.jsxs(Re, { height: "100%", justifyContent: "space-between", children: [p.jsxs(Re, { direction: "column", spacing: 3, sx: { p: 2 }, children: [p.jsxs(Re, { direction: "row", alignItems: "center", children: [p.jsxs(Re, { direction: "row", alignItems: "center", children: [p.jsx(Rn, { sx: { color: "text.primary" }, fontSize: "small", children: "filter_list_icon" }), p.jsx(ut, { sx: { ml: 1 }, "data-cy": "drawer-header", children: l })] }), p.jsx(Ya, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
+  }, variant: "persistent", anchor: "left", open: e, children: p.jsxs(Re, { height: "100%", justifyContent: "space-between", children: [p.jsxs(Re, { direction: "column", spacing: 3, sx: { p: 2 }, children: [p.jsxs(Re, { direction: "row", alignItems: "center", children: [p.jsxs(Re, { direction: "row", alignItems: "center", children: [p.jsx(Rn, { sx: { color: "text.primary" }, fontSize: "small", children: "filter_list_icon" }), p.jsx(st, { sx: { ml: 1 }, "data-cy": "drawer-header", children: l })] }), p.jsx(Ya, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
     popper: {
       modifiers: [
         {
@@ -4288,7 +4288,8 @@ function eO({
   }, children: s })] }) }), p.jsx(cg, { component: "main", open: e, ...d, children: n })] });
 }
 function tO({ metadata: e }) {
-  return p.jsx(Re, { direction: "row", spacing: 2, "data-test-ink-page-header-metadata": !0, children: e.map(({ icon: t, label: n, value: o }) => p.jsxs(Re, { direction: "row", alignItems: "center", spacing: 0.5, "data-cy": `metadata-${n}`, children: [t && typeof t == "string" ? p.jsx(Rn, { sx: { color: "neutral600", fontSize: "1rem" }, children: t }) : t, p.jsx(ut, { variant: "body2", color: "text.secondary", children: n }), typeof o == "string" ? p.jsx(ut, { variant: "body2", children: o }) : o] }, n)) });
+  const t = (n) => n == null || n === "" ? p.jsx(st, { variant: "body2", color: "text.disabled", children: "--" }) : typeof n == "string" ? p.jsx(st, { variant: "body2", children: n }) : n;
+  return p.jsx(Re, { direction: "row", spacing: 2, "data-test-ink-page-header-metadata": !0, children: e.map(({ icon: n, label: o, value: i }) => p.jsxs(Re, { direction: "row", alignItems: "center", spacing: 0.5, "data-cy": `metadata-${o}`, children: [n && typeof n == "string" ? p.jsx(Rn, { sx: { color: "neutral600", fontSize: "1rem" }, children: n }) : n, p.jsx(st, { variant: "body2", color: "text.secondary", children: o }), t(i)] }, o)) });
 }
 const ug = ({ children: e }) => {
   const t = jp({
@@ -4326,7 +4327,7 @@ const dg = {
   }
 };
 function pg({ label: e }) {
-  return p.jsx(ut, { "data-cy": "page-title", variant: "h5", component: "h1", sx: { wordBreak: "break-word", fontWeight: "600", color: "text.primary" }, children: e });
+  return p.jsx(st, { "data-cy": "page-title", variant: "h5", component: "h1", sx: { wordBreak: "break-word", fontWeight: "600", color: "text.primary" }, children: e });
 }
 function fg({ breadcrumb: e, i: t, onClick: n }) {
   return p.jsx(Pp, { href: e.path, ...e.LinkProps, underline: "hover", "data-cy": `breadcrumb-${t}`, variant: "h5", color: "action.active", onClick: n, children: e.label });
@@ -4335,7 +4336,7 @@ function rO({ breadcrumbs: e }) {
   return p.jsx(kp, { sx: dg, "data-test-ink-page-header-breadcrumbs": !0, children: e == null ? void 0 : e.map((t, n) => n === e.length - 1 ? p.jsx(pg, { label: t.label }, `breadcrumb-${n}`) : p.jsx(fg, { breadcrumb: t, i: n, onClick: t.onClick }, `breadcrumb-${n}`)) });
 }
 function ju({ sx: e }) {
-  return p.jsx(ut, { variant: "overline", sx: { color: "neutral500", fontWeight: 600, lineHeight: 2.25, ...e }, children: "Internal Use Only" });
+  return p.jsx(st, { variant: "overline", sx: { color: "neutral500", fontWeight: 600, lineHeight: 2.25, ...e }, children: "Internal Use Only" });
 }
 function oO({ primaryAction: e, secondaryAction: t, dropdownAction: n }) {
   const [o, i] = mt(null), a = !!o, s = (h) => {
@@ -4358,7 +4359,7 @@ function oO({ primaryAction: e, secondaryAction: t, dropdownAction: n }) {
   }, ...b, children: h }, f))] })] })] }), t && p.jsx(ht, { "data-cy": "secondary", variant: "contained", color: "inherit", ...t, children: t.label }), e && p.jsx(ht, { "data-cy": "primary", variant: "contained", ...e, sx: { whiteSpace: "nowrap" }, children: e.label })] });
 }
 function mg({ subtitle: e, sx: t, ...n }) {
-  return p.jsx(ut, { variant: "body2", color: "text.secondary", "data-cy": "header-subtitle", sx: { ...t }, ...n, children: e });
+  return p.jsx(st, { variant: "body2", color: "text.secondary", "data-cy": "header-subtitle", sx: { ...t }, ...n, children: e });
 }
 function iO({ label: e, Stepper: t, ButtonGroup: n, subtitle: o }) {
   const i = (a) => typeof a == "object" && a !== null && ("primary" in a || "close" in a);
@@ -4367,7 +4368,7 @@ function iO({ label: e, Stepper: t, ButtonGroup: n, subtitle: o }) {
     py: 2.25,
     borderBottom: "1px solid",
     borderBottomColor: "neutral200"
-  }, children: ({ position: a }) => p.jsxs(Re, { position: a, direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [p.jsx(ut, { "data-test-ink-workflow-header-label": !0, variant: "h6", sx: { fontWeight: "600", flexGrow: "1" }, children: p.jsxs(Re, { direction: "column", spacing: 0, children: [e, o && p.jsx(mg, { component: "span", subtitle: o })] }) }), t && p.jsx(Ve, { sx: { flexGrow: "2" }, "data-test-ink-workflow-header-stepper": !0, children: t }), n && p.jsx(Ve, { sx: { flexGrow: "1", justifyContent: "end", display: "flex" }, "data-test-ink-workflow-header-button-group": !0, children: i(n) ? p.jsxs(Re, { direction: "row", spacing: 1, children: [n.primary && p.jsx(ht, { variant: "contained", endIcon: n.primary.loading ? p.jsx(Uo, { size: 20, color: "inherit" }) : void 0, disabled: n.primary.disabled || n.primary.loading, ...n.primary, "data-test-ink-workflow-header-primary-action": !0, children: n.primary.label }), n.close && p.jsx(ho, { onClick: n.close.onClick, "data-test-ink-workflow-header-close-action": !0, children: p.jsx(Rn, { children: "close_rounded" }) })] }) : n })] }) });
+  }, children: ({ position: a }) => p.jsxs(Re, { position: a, direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [p.jsx(st, { "data-test-ink-workflow-header-label": !0, variant: "h6", sx: { fontWeight: "600", flexGrow: "1" }, children: p.jsxs(Re, { direction: "column", spacing: 0, children: [e, o && p.jsx(mg, { component: "span", subtitle: o })] }) }), t && p.jsx(Ve, { sx: { flexGrow: "2" }, "data-test-ink-workflow-header-stepper": !0, children: t }), n && p.jsx(Ve, { sx: { flexGrow: "1", justifyContent: "end", display: "flex" }, "data-test-ink-workflow-header-button-group": !0, children: i(n) ? p.jsxs(Re, { direction: "row", spacing: 1, children: [n.primary && p.jsx(ht, { variant: "contained", endIcon: n.primary.loading ? p.jsx(Uo, { size: 20, color: "inherit" }) : void 0, disabled: n.primary.disabled || n.primary.loading, ...n.primary, "data-test-ink-workflow-header-primary-action": !0, children: n.primary.label }), n.close && p.jsx(ho, { onClick: n.close.onClick, "data-test-ink-workflow-header-close-action": !0, children: p.jsx(Rn, { children: "close_rounded" }) })] }) : n })] }) });
 }
 const no = {
   black: "#000",
@@ -4417,7 +4418,7 @@ const no = {
   A200: "#ff5252",
   A400: "#ff1744",
   A700: "#d50000"
-}, lt = {
+}, ct = {
   50: "#fff3e0",
   100: "#ffe0b2",
   200: "#ffcc80",
@@ -4432,7 +4433,7 @@ const no = {
   A200: "#ffab40",
   A400: "#ff9100",
   A700: "#ff6d00"
-}, ct = {
+}, ut = {
   50: "#e3f2fd",
   100: "#bbdefb",
   200: "#90caf9",
@@ -4554,13 +4555,13 @@ function yl(e, t, n, o) {
 }
 function gg(e = "light") {
   return e === "dark" ? {
-    main: ct[200],
-    light: ct[50],
-    dark: ct[400]
+    main: ut[200],
+    light: ut[50],
+    dark: ut[400]
   } : {
-    main: ct[700],
-    light: ct[400],
-    dark: ct[800]
+    main: ut[700],
+    light: ut[400],
+    dark: ut[800]
   };
 }
 function yg(e = "light") {
@@ -4609,14 +4610,14 @@ function xg(e = "light") {
 }
 function Tg(e = "light") {
   return e === "dark" ? {
-    main: lt[400],
-    light: lt[300],
-    dark: lt[700]
+    main: ct[400],
+    light: ct[300],
+    dark: ct[700]
   } : {
     main: "#ed6c02",
     // closest to orange[800] that pass 3:1.
-    light: lt[500],
-    dark: lt[900]
+    light: ct[500],
+    dark: ct[900]
   };
 }
 function ns(e) {
@@ -5826,7 +5827,7 @@ const sO = ({ name: e, options: t, value: n, ref: o, direction: i = "row", cardS
     }, children: [p.jsxs(Re, { direction: "column", alignItems: "center", width: "100%", children: [b && p.jsx(Ve, { sx: {
       color: v ? "neutral500" : n === g ? "text.primary" : "action.active",
       ".MuiSvgIcon-root": { fontSize: "2rem" }
-    }, children: b }), p.jsx(ut, { variant: "subtitle1", textAlign: "center", lineHeight: "20px", mt: 0.5, color: v ? n === g ? "text.secondary" : "neutral500" : "text.primary", children: f }), x && p.jsx(ut, { variant: "body2", textAlign: "center", mt: 1, color: `${v ? "neutral500" : "text.secondary"}`, children: x }), C && p.jsx(ut, { variant: "body2", color: `${v ? "neutral500" : "text.secondary"}`, textAlign: "center", mt: 1, children: C })] }), T && p.jsx(Ve, { mt: 2, display: "flex", justifyContent: "center", minHeight: h ? "24px" : 0, children: T })] }) }, g);
+    }, children: b }), p.jsx(st, { variant: "subtitle1", textAlign: "center", lineHeight: "20px", mt: 0.5, color: v ? n === g ? "text.secondary" : "neutral500" : "text.primary", children: f }), x && p.jsx(st, { variant: "body2", textAlign: "center", mt: 1, color: `${v ? "neutral500" : "text.secondary"}`, children: x }), C && p.jsx(st, { variant: "body2", color: `${v ? "neutral500" : "text.secondary"}`, textAlign: "center", mt: 1, children: C })] }), T && p.jsx(Ve, { mt: 2, display: "flex", justifyContent: "center", minHeight: h ? "24px" : 0, children: T })] }) }, g);
   }) }) });
 };
 function Sl({ value: e, label: t, size: n = "small", ariaLabel: o, ...i }) {
@@ -6002,7 +6003,7 @@ const Ol = {
 };
 function uO({ title: e, description: t, action: n, variant: o, icon: i, sx: a }) {
   const s = o === "search" ? "neutral00" : "neutral50", l = oy[o], { fontSize: c, fontSizeDescription: u, titleVariant: d, descriptionVariant: m } = l;
-  return p.jsxs(Re, { alignItems: "center", justifyContent: "center", textAlign: "center", "data-cy": `empty-state-${o}-container`, sx: { backgroundColor: s, p: 5, ...a }, children: [i && p.jsx(ry, { icon: i, variant: o }), e && p.jsx(ut, { variant: d, sx: { fontSize: c }, "data-cy": "empty-state-title", children: p.jsx("strong", { children: e }) }), p.jsx(ut, { variant: m, color: "text.secondary", sx: { fontSize: u, maxWidth: "500px" }, "data-cy": "empty-state-description", children: t }), n && p.jsx(Ve, { mt: 3, children: p.jsx(ht, { onClick: n.onClick, "data-cy": "empty-state-action-button", children: n.title }) })] });
+  return p.jsxs(Re, { alignItems: "center", justifyContent: "center", textAlign: "center", "data-cy": `empty-state-${o}-container`, sx: { backgroundColor: s, p: 5, ...a }, children: [i && p.jsx(ry, { icon: i, variant: o }), e && p.jsx(st, { variant: d, sx: { fontSize: c }, "data-cy": "empty-state-title", children: p.jsx("strong", { children: e }) }), p.jsx(st, { variant: m, color: "text.secondary", sx: { fontSize: u, maxWidth: "500px", mt: 1 }, "data-cy": "empty-state-description", children: t }), n && p.jsx(Ve, { mt: 3, children: p.jsx(ht, { onClick: n.onClick, "data-cy": "empty-state-action-button", children: n.title }) })] });
 }
 function Pn({
   props: e,
@@ -7552,7 +7553,7 @@ const $y = ge("MuiButtonBase", ["root", "disabled", "focusVisible"]), Ny = (e) =
     touchRippleRef: N,
     type: M,
     ...W
-  } = o, U = S.useRef(null), L = yy(), A = st(L.ref, N), [V, ee] = S.useState(!1);
+  } = o, U = S.useRef(null), L = yy(), A = lt(L.ref, N), [V, ee] = S.useState(!1);
   u && V && ee(!1), S.useImperativeHandle(i, () => ({
     focusVisible: () => {
       ee(!0), U.current.focus();
@@ -7584,7 +7585,7 @@ const $y = ge("MuiButtonBase", ["root", "disabled", "focusVisible"]), Ny = (e) =
   We === "button" && (W.href || W.to) && (We = b);
   const Me = {};
   We === "button" ? (Me.type = M === void 0 ? "button" : M, Me.disabled = u) : (!W.href && !W.to && (Me.role = "button"), u && (Me["aria-disabled"] = u));
-  const qe = st(n, U), Ie = {
+  const qe = lt(n, U), Ie = {
     ...o,
     centerRipple: a,
     component: c,
@@ -8021,7 +8022,7 @@ const zy = (e, t) => {
     disablePadding: f,
     divider: x,
     hasSecondaryAction: _
-  }, j = Vy(y), $ = st(P, n), k = T.root || c.Root || Wy, z = E.root || u.root || {}, N = {
+  }, j = Vy(y), $ = lt(P, n), k = T.root || c.Root || Wy, z = E.root || u.root || {}, N = {
     className: se(j.root, z.className, s),
     ...v
   };
@@ -8216,7 +8217,7 @@ function Te(e, t) {
     ...c,
     externalForwardedProps: e === "root" ? h : void 0,
     externalSlotProps: b
-  }), E = st(C, b == null ? void 0 : b.ref, t.ref), T = e === "root" ? f || u : f, v = vu(g, {
+  }), E = lt(C, b == null ? void 0 : b.ref, t.ref), T = e === "root" ? f || u : f, v = vu(g, {
     ...e === "root" && !u && !d[e] && s,
     ...e !== "root" && !d[e] && s,
     ...x,
@@ -8889,7 +8890,7 @@ const ab = {
     // eslint-disable-next-line react/prop-types
     TransitionComponent: x = Qt,
     ...C
-  } = t, E = ar(), T = S.useRef(), v = Xn(), w = S.useRef(null), R = st(w, Kn(a), n), P = (N) => (M) => {
+  } = t, E = ar(), T = S.useRef(), v = Xn(), w = S.useRef(null), R = lt(w, Kn(a), n), P = (N) => (M) => {
     if (N) {
       const W = w.current;
       M === void 0 ? N(W) : N(W, M);
@@ -9956,7 +9957,7 @@ const lo = /* @__PURE__ */ S.forwardRef(function(t, n) {
     children: o,
     container: i,
     disablePortal: a = !1
-  } = t, [s, l] = S.useState(null), c = st(/* @__PURE__ */ S.isValidElement(o) ? Kn(o) : null, n);
+  } = t, [s, l] = S.useState(null), c = lt(/* @__PURE__ */ S.isValidElement(o) ? Kn(o) : null, n);
   if (bn(() => {
     a || l(f0(i) || document.body);
   }, [i, a]), bn(() => {
@@ -10056,7 +10057,7 @@ const y0 = (e) => {
     ownerState: f,
     // prevent from spreading to DOM, it can come from the parent component e.g. Select.
     ...x
-  } = t, C = S.useRef(null), E = st(C, n), T = S.useRef(null), v = st(T, m), w = S.useRef(v);
+  } = t, C = S.useRef(null), E = lt(C, n), T = S.useRef(null), v = lt(T, m), w = S.useRef(v);
   bn(() => {
     w.current = v;
   }, [v]), S.useImperativeHandle(m, () => T.current, []);
@@ -10875,7 +10876,7 @@ const Qu = /* @__PURE__ */ S.forwardRef(function(t, n) {
       document.removeEventListener("keydown", pe);
     };
   }, [We, F]);
-  const Ct = st(Kn(W), V, n);
+  const Ct = lt(Kn(W), V, n);
   !k && k !== 0 && (F = !1);
   const ft = S.useRef(), Lt = (pe) => {
     const Pt = W.props;
@@ -11298,7 +11299,7 @@ function fO(e) {
       ...h
     },
     variant: "outlined"
-  }, anchor: "left", open: ia(e) ? e.isOpen : !0, variant: t === "panel" ? "permanent" : "persistent", ...g, children: p.jsxs(Re, { height: "100%", justifyContent: "space-between", children: [p.jsxs(Re, { direction: "column", spacing: 3, sx: { p: 2 }, children: [p.jsxs(Re, { direction: "row", alignItems: "center", children: [p.jsxs(Re, { direction: "row", alignItems: "center", children: [b && p.jsx(j0, { Icon: b }), p.jsx(ut, { sx: { ml: b && 1 }, "data-cy": "drawer-header", children: i })] }), ia(e) && p.jsx(Ya, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
+  }, anchor: "left", open: ia(e) ? e.isOpen : !0, variant: t === "panel" ? "permanent" : "persistent", ...g, children: p.jsxs(Re, { height: "100%", justifyContent: "space-between", children: [p.jsxs(Re, { direction: "column", spacing: 3, sx: { p: 2 }, children: [p.jsxs(Re, { direction: "row", alignItems: "center", children: [p.jsxs(Re, { direction: "row", alignItems: "center", children: [b && p.jsx(j0, { Icon: b }), p.jsx(st, { sx: { ml: b && 1 }, "data-cy": "drawer-header", children: i })] }), ia(e) && p.jsx(Ya, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
     popper: {
       modifiers: [
         {
@@ -14635,7 +14636,7 @@ const Xv = (e) => {
       E || (E = m.current.querySelector("input:not(:disabled)")), E && E.focus();
     }
   }), []);
-  const f = st(n, m), x = wr(l), C = S.useMemo(() => ({
+  const f = lt(n, m), x = wr(l), C = S.useMemo(() => ({
     name: x,
     onChange(E) {
       b(E.target.value), c && c(E, E.target.value);
@@ -15128,7 +15129,7 @@ const dd = /* @__PURE__ */ S.forwardRef(function(t, n) {
     ...c
   } = t, {
     current: u
-  } = S.useRef(l != null), d = S.useRef(null), m = st(n, d), h = S.useRef(null), g = S.useRef(null), b = S.useCallback(() => {
+  } = S.useRef(l != null), d = S.useRef(null), m = lt(n, d), h = S.useRef(null), g = S.useRef(null), b = S.useCallback(() => {
     const T = d.current, v = g.current;
     if (!T || !v)
       return;
@@ -15496,7 +15497,7 @@ const Mi = (e, t) => {
   } = S.useRef(J != null), re = S.useRef(), Y = S.useCallback((de) => {
     process.env.NODE_ENV !== "production" && de && de.nodeName !== "INPUT" && !de.focus && console.error(["MUI: You have provided a `inputComponent` to the input component", "that does not correctly handle the `ref` prop.", "Make sure the `ref` prop is called with a HTMLInputElement."].join(`
 `));
-  }, []), oe = st(re, v, T.ref, Y), [F, fe] = S.useState(!1), le = un();
+  }, []), oe = lt(re, v, T.ref, Y), [F, fe] = S.useState(!1), le = un();
   process.env.NODE_ENV !== "production" && S.useEffect(() => {
     if (le)
       return le.registerEffect();
@@ -17318,7 +17319,7 @@ const md = /* @__PURE__ */ S.forwardRef(function(t, n) {
       I.previousKeyMatched && (j || _r(v, P, !1, c, sa, I)) ? T.preventDefault() : I.previousKeyMatched = !1;
     }
     d && d(T);
-  }, x = st(g, n);
+  }, x = lt(g, n);
   let C = -1;
   S.Children.forEach(s, (T, v) => {
     if (!/* @__PURE__ */ S.isValidElement(T)) {
@@ -17549,7 +17550,7 @@ function ti(e) {
     getTabbable: a = Ix,
     isEnabled: s = $x,
     open: l
-  } = e, c = S.useRef(!1), u = S.useRef(null), d = S.useRef(null), m = S.useRef(null), h = S.useRef(null), g = S.useRef(!1), b = S.useRef(null), f = st(Kn(t), b), x = S.useRef(null);
+  } = e, c = S.useRef(!1), u = S.useRef(null), d = S.useRef(null), m = S.useRef(null), h = S.useRef(null), g = S.useRef(!1), b = S.useRef(null), f = lt(Kn(t), b), x = S.useRef(null);
   S.useEffect(() => {
     !l || !b.current || (g.current = !n);
   }, [n, l]), S.useEffect(() => {
@@ -17704,7 +17705,7 @@ const Nx = {
     // eslint-disable-next-line react/prop-types
     TransitionComponent: E = Qt,
     ...T
-  } = t, v = S.useRef(null), w = st(v, Kn(l), n), R = (z) => (N) => {
+  } = t, v = S.useRef(null), w = lt(v, Kn(l), n), R = (z) => (N) => {
     if (z) {
       const M = v.current;
       N === void 0 ? z(M) : z(M, N);
@@ -18040,7 +18041,7 @@ function zx(e) {
     onClose: c,
     open: u,
     rootRef: d
-  } = e, m = S.useRef({}), h = S.useRef(null), g = S.useRef(null), b = st(g, d), [f, x] = S.useState(!u), C = Fx(l);
+  } = e, m = S.useRef({}), h = S.useRef(null), g = S.useRef(null), b = lt(g, d), [f, x] = S.useState(!u), C = Fx(l);
   let E = !0;
   (e["aria-hidden"] === "false" || e["aria-hidden"] === !1) && (E = !1);
   const T = () => Bt(h.current), v = () => (m.current.modalRef = g.current, m.current.mount = h.current, m.current), w = () => {
@@ -19546,7 +19547,7 @@ const uT = (e) => {
     name: "Select"
   }), Z = S.useRef(null), q = S.useRef(null), [G, X] = S.useState(null), {
     current: J
-  } = S.useRef(_ != null), [ne, re] = S.useState(), Y = st(n, f), oe = S.useCallback((ae) => {
+  } = S.useRef(_ != null), [ne, re] = S.useState(), Y = lt(n, f), oe = S.useCallback((ae) => {
     q.current = ae, ae && X(ae);
   }, []), F = G == null ? void 0 : G.parentNode;
   S.useImperativeHandle(Y, () => ({
@@ -19973,7 +19974,7 @@ const dT = ot(/* @__PURE__ */ p.jsx("path", {
     filled: /* @__PURE__ */ p.jsx(hT, {
       ownerState: z
     })
-  }[k], L = st(n, Kn(U));
+  }[k], L = lt(n, Kn(U));
   return /* @__PURE__ */ p.jsx(S.Fragment, {
     children: /* @__PURE__ */ S.cloneElement(U, {
       // Most of the logic is implemented in `SelectInput`.
@@ -20644,7 +20645,7 @@ const Rd = ot(/* @__PURE__ */ p.jsx("path", {
 function TO({ message: e, sx: t, messageSx: n }) {
   return p.jsx(Dp, { severity: "info", "data-cy": "internal-user-only-alert", sx: { alignItems: "center", ...t }, iconMapping: {
     info: p.jsx(Rd, {})
-  }, children: p.jsxs(Re, { direction: "row", gap: 1, alignItems: "center", children: [p.jsx(ju, { sx: { color: "text.secondary" } }), p.jsx(Re, { children: "-" }), p.jsx(ut, { variant: "body2", sx: n, "data-cy": "internal-user-only-alert-message", children: e || "This page has limited access to internal users only." })] }) });
+  }, children: p.jsxs(Re, { direction: "row", gap: 1, alignItems: "center", children: [p.jsx(ju, { sx: { color: "text.secondary" } }), p.jsx(Re, { children: "-" }), p.jsx(st, { variant: "body2", sx: n, "data-cy": "internal-user-only-alert-message", children: e || "This page has limited access to internal users only." })] }) });
 }
 function ET() {
   this.__data__ = [], this.size = 0;
@@ -21458,7 +21459,7 @@ function CO({ chartOptions: e, type: t, data: n, customColors: o, height: i = 20
 function bS({ checkboxProps: e, title: t, size: n = "medium", subheader: o, adornment: i, titleProps: a, onClose: s }) {
   if (!(e || t || o || i || s))
     return null;
-  const c = n === "medium" ? "body1" : "body2", u = n === "medium" ? "body2" : "caption", d = !!e, m = () => p.jsxs(Ve, { sx: { position: "relative" }, children: [t && p.jsx(ut, { variant: c, fontWeight: 600, "data-cy": "inkcardheader-title", ...a, children: t }), o && p.jsx(ut, { variant: u, color: "text.secondary", "data-cy": "inkcardheader-subheader", sx: {
+  const c = n === "medium" ? "body1" : "body2", u = n === "medium" ? "body2" : "caption", d = !!e, m = () => p.jsxs(Ve, { sx: { position: "relative" }, children: [t && p.jsx(st, { variant: c, fontWeight: 600, "data-cy": "inkcardheader-title", ...a, children: t }), o && p.jsx(st, { variant: u, color: "text.secondary", "data-cy": "inkcardheader-subheader", sx: {
     position: "absolute",
     top: "100%",
     left: d ? 2 : 1,
@@ -21544,7 +21545,7 @@ const CS = 382, kc = (e, t, n, o, i) => i ? o : e ? t : n, wS = (e, t, n, o, i)
   }
 });
 function ES({ description: e, buttonProps: t }) {
-  return p.jsxs(p.Fragment, { children: [p.jsx(Fp, { children: p.jsx(ut, { variant: "body2", color: "text.secondary", children: e }) }), t && p.jsx(zp, { children: p.jsx(ht, { variant: "card", ...t, children: t.label }) })] });
+  return p.jsxs(p.Fragment, { children: [p.jsx(Fp, { children: p.jsx(st, { variant: "body2", color: "text.secondary", children: e }) }), t && p.jsx(zp, { children: p.jsx(ht, { variant: "card", ...t, children: t.label }) })] });
 }
 function wO({ cardMedia: e, cardHeader: t, cardType: n = "default", galleryContent: o, children: i, ...a }) {
   var d, m;
@@ -21759,21 +21760,21 @@ const St = {
     secondary: at[700],
     disabled: at[500]
   },
-  focusVisible: Oe(ct[700], 0.3),
-  blue50: ct[50],
-  blue100: ct[100],
-  blue200: ct[200],
-  blue300: ct[300],
-  blue400: ct[400],
-  blue500: ct[500],
+  focusVisible: Oe(ut[700], 0.3),
+  blue50: ut[50],
+  blue100: ut[100],
+  blue200: ut[200],
+  blue300: ut[300],
+  blue400: ut[400],
+  blue500: ut[500],
   blue600: ce.blue600,
   blue700: ce.blue700,
   blue800: ce.blue800,
   blue900: ce.blue900,
-  blueA100: ct.A100,
-  blueA200: ct.A200,
-  blueA400: ct.A400,
-  blueA700: ct.A700,
+  blueA100: ut.A100,
+  blueA200: ut.A200,
+  blueA400: ut.A400,
+  blueA700: ut.A700,
   blue1000: ce.blue1000,
   green50: ce.green50,
   green100: ce.green100,
@@ -21832,22 +21833,22 @@ const St = {
   neutralA200: ce.neutralA200,
   neutralA400: ce.neutralA400,
   neutralA700: ce.neutralA700,
-  orange50: lt[50],
+  orange50: ct[50],
   //warningFill
-  orange100: lt[100],
-  orange200: lt[200],
-  orange300: lt[300],
-  orange400: lt[400],
-  orange500: lt[500],
-  orange600: lt[600],
-  orange700: lt[700],
-  orange800: lt[800],
-  orange900: lt[900],
+  orange100: ct[100],
+  orange200: ct[200],
+  orange300: ct[300],
+  orange400: ct[400],
+  orange500: ct[500],
+  orange600: ct[600],
+  orange700: ct[700],
+  orange800: ct[800],
+  orange900: ct[900],
   orange1000: ce.orange1000,
-  orangeA100: lt.A100,
-  orangeA200: lt.A200,
-  orangeA400: lt.A400,
-  orangeA700: lt.A700,
+  orangeA100: ct.A100,
+  orangeA200: ct.A200,
+  orangeA400: ct.A400,
+  orangeA700: ct.A700,
   purple50: _e[50],
   purple100: _e[100],
   purple200: _e[200],
@@ -21926,9 +21927,9 @@ const St = {
   deepPurpleA700: St.A700,
   deepPurpleA800: ce.deepPurpleA800,
   primary: {
-    main: ct.A700,
+    main: ut.A700,
     dark: ce.blue800,
-    light: ct.A200,
+    light: ut.A200,
     contrastText: ce.neutral00,
     hover: Oe(ze[400], 0.04),
     selected: Oe(ze[400], 0.08),
@@ -22800,7 +22801,10 @@ var Vn = {
   return null;
 }, fE = DS(tE, oE, op)(pE), Ga = dE(fE);
 Ga.renderStatic = Ga.rewind;
-const _O = ({ title: e, addTitleSuffix: t = !0, description: n, children: o }) => p.jsxs(p.Fragment, { children: [p.jsxs(Ga, { children: [!!e && p.jsxs("title", { children: [e, t && " | Movable Ink"] }), !!n && p.jsx("meta", { name: "description", content: n })] }), o] }), BO = ({ skeletonRows: e, skeletonColumns: t }) => p.jsx(p.Fragment, { children: Array.from({ length: e }).map((n, o) => p.jsx(Ze, { container: !0, spacing: 2, sx: { mb: 2 }, children: Array.from({ length: t }).map((i, a) => p.jsxs(Ze, { size: "grow", children: [p.jsx(Qr, { variant: "text", width: 100, height: 20 }), p.jsx(Qr, { variant: "rectangular", height: 40, sx: { borderRadius: 1 }, "data-test": "loading-skeleton" })] }, a)) }, o)) });
+const _O = ({ title: e, addTitleSuffix: t = !0, description: n, children: o }) => {
+  const i = e + (t ? " | Movable Ink" : "");
+  return p.jsxs(p.Fragment, { children: [p.jsxs(Ga, { children: [!!e && p.jsx("title", { children: i }), !!n && p.jsx("meta", { name: "description", content: n })] }), o] });
+}, BO = ({ skeletonRows: e, skeletonColumns: t }) => p.jsx(p.Fragment, { children: Array.from({ length: e }).map((n, o) => p.jsx(Ze, { container: !0, spacing: 2, sx: { mb: 2 }, children: Array.from({ length: t }).map((i, a) => p.jsxs(Ze, { size: "grow", children: [p.jsx(Qr, { variant: "text", width: 100, height: 20 }), p.jsx(Qr, { variant: "rectangular", height: 40, sx: { borderRadius: 1 }, "data-test": "loading-skeleton" })] }, a)) }, o)) });
 function DO() {
   const [e, t] = mt(null);
   return [e, async (o) => {
@@ -23538,7 +23542,7 @@ const pp = /* @__PURE__ */ S.forwardRef(function(t, n) {
     // eslint-disable-next-line react/prop-types
     TransitionComponent: w = Qt,
     ...R
-  } = t, P = S.useRef(null), I = st(Kn(c), P, n), _ = (U) => (L) => {
+  } = t, P = S.useRef(null), I = lt(Kn(c), P, n), _ = (U) => (L) => {
     U && (L === void 0 ? U(P.current) : U(P.current, L));
   }, y = _((U, L) => {
     Lo(d, U, u), us(U), g && g(U, L);