@movable/ui 4.2.1 → 4.3.0

package/lib/index.mjs

@@ -4,7 +4,7 @@ import Md from "@emotion/styled";
 import { Global as Vh, ThemeContext as Wh, keyframes as ii, css as Nd } from "@emotion/react";
 import * as Hh from "react-dom";
 import vi from "react-dom";
-import { Chip as Ls, Tooltip as sa, CircularProgress as hl, Box as he, Menu as la, MenuItem as Rr, Button as It, Dialog as Uh, IconButton as Pn, Icon as Un, DialogTitle as Gh, Stack as Ie, Typography as Ne, DialogActions as qh, styled as Ld, Drawer as _d, AppBar as Kh, useScrollTrigger as Yh, Breadcrumbs as Xh, Link as Dd, RadioGroup as Jh, Card as Vi, FormControlLabel as ml, Radio as Qh, ToggleButton as Bd, ToggleButtonGroup as Fd, ListSubheader as Zh, FormControl as em, InputLabel as tm, Select as nm, FormHelperText as rm, GlobalStyles as om, Divider as gl, Alert as zd, Skeleton as Uo, Checkbox as Vd, CardHeader as im, CardMedia as am, CardContent as sm, CardActions as lm, Fade as cm, TextField as um, List as dm, ListItem as pm, Paper as fm, Badge as hm, CardActionArea as mm, Grid2 as Lo } from "@mui/material";
+import { Chip as Ls, Tooltip as sa, CircularProgress as hl, Box as he, Menu as la, MenuItem as Rr, Button as It, Dialog as Uh, IconButton as Pn, Icon as Un, DialogTitle as Gh, Stack as $e, Typography as Ne, DialogActions as qh, styled as Ld, Drawer as _d, AppBar as Kh, useScrollTrigger as Yh, Breadcrumbs as Xh, Link as Dd, RadioGroup as Jh, Card as Vi, FormControlLabel as ml, Radio as Qh, ToggleButton as Bd, ToggleButtonGroup as Fd, ListSubheader as Zh, FormControl as em, InputLabel as tm, Select as nm, FormHelperText as rm, GlobalStyles as om, Divider as gl, Alert as zd, Skeleton as Uo, Checkbox as Vd, CardHeader as im, CardMedia as am, CardContent as sm, CardActions as lm, Fade as cm, TextField as um, List as dm, ListItem as pm, Paper as fm, Badge as hm, CardActionArea as mm, Grid2 as Lo } from "@mui/material";
 import { WarningAmberRounded as gm, ReportRounded as ym, HourglassTopRounded as bm, BoltRounded as vm, Close as xm, ViewList as Tm } from "@mui/icons-material";
 import { Controller as ai } from "react-hook-form";
 import { SnackbarProvider as Cm, SnackbarContent as wm } from "notistack";
@@ -6764,7 +6764,7 @@ function hv() {
   return Sa;
 }
 process.env.NODE_ENV !== "production" && (r.node, r.object.isRequired);
-function $e(e) {
+function Ie(e) {
   return s0(e);
 }
 const mv = J(vp, {
@@ -6772,7 +6772,7 @@ const mv = J(vp, {
   slot: "Root",
   overridesResolver: (e, t) => t.root
 })({}), hi = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = Tl(), i = $e({
+  const o = Tl(), i = Ie({
     props: t,
     name: "MuiPopper"
   }), {
@@ -7023,7 +7023,7 @@ const yv = (e) => {
     }
   }]
 }))), Yi = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiListSubheader"
   }), {
@@ -7151,7 +7151,7 @@ const xv = (e) => {
     }
   }]
 }))), Dr = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiPaper"
   }), i = dr(), {
@@ -7351,7 +7351,7 @@ const wv = (e) => {
     }
   ]
 }))), Xi = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiSvgIcon"
   }), {
@@ -8294,7 +8294,7 @@ const sn = ke("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsa
     animation-delay: 200ms;
   }
 `, Gp = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiTouchRipple"
   }), {
@@ -8481,7 +8481,7 @@ const Hv = ke("MuiButtonBase", ["root", "disabled", "focusVisible"]), Uv = (e) =
     colorAdjust: "exact"
   }
 }), Ir = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiButtonBase"
   }), {
@@ -8873,7 +8873,7 @@ const er = 44, Xs = ii`
     }
   }]
 }))), Nl = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiCircularProgress"
   }), {
@@ -9140,7 +9140,7 @@ const ou = ke("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimar
     }
   }]
 })), uo = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiIconButton"
   }), {
@@ -9595,7 +9595,7 @@ function iu(e) {
   return e.key === "Backspace" || e.key === "Delete";
 }
 const qp = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiChip"
   }), {
@@ -10157,7 +10157,7 @@ const Ra = (e, t) => {
     }
   }
 }), Ia = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiInputBase"
   }), {
@@ -11004,7 +11004,7 @@ const bx = (e) => {
     paddingLeft: 24
   }
 }), Jp = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiAutocomplete"
   }), {
@@ -12974,31 +12974,34 @@ const sf = (e) => {
     children: pl.map(n.children, (o) => lf(o, t))
   }) : e;
 };
-function L$({ Title: e, Content: t, Actions: n, onClose: o, hideCloseButton: i, ActionsProp: a, children: s, ...l }) {
-  t !== void 0 && s !== void 0 && console.warn("InkDialog: both `Content` prop and `children` were provided. `Content` will take precedence.");
-  const c = t ?? s;
-  let d = n;
+function L$({ Title: e, Content: t, Actions: n, onClose: o, hideCloseButton: i, ActionsProp: a, ActionDescription: s, children: l, ...c }) {
+  t !== void 0 && l !== void 0 && console.warn("InkDialog: both `Content` prop and `children` were provided. `Content` will take precedence.");
+  const d = t ?? l;
+  let p = n;
   if (n) {
-    const h = sf(n);
-    if (h.length > 1) {
-      const f = h[h.length - 1];
-      d = jt.Children.map(n, (b) => lf(b, f));
+    const f = sf(n);
+    if (f.length > 1) {
+      const b = f[f.length - 1];
+      p = jt.Children.map(n, (v) => lf(v, b));
     }
   }
-  const p = (h) => {
-    h.stopPropagation();
+  const h = (f) => {
+    f.stopPropagation();
   };
-  return u.jsxs(Uh, { ...l, onClose: o, "data-test": "ink-dialog", onMouseMove: p, onMouseDown: p, onMouseUp: p, onClick: p, children: [!i && u.jsx(Pn, { onClick: o, "data-test": "ink-dialog-close", sx: {
+  return u.jsxs(Uh, { ...c, onClose: o, "data-test": "ink-dialog", onMouseMove: h, onMouseDown: h, onMouseUp: h, onClick: h, children: [!i && u.jsx(Pn, { onClick: o, "data-test": "ink-dialog-close", sx: {
     position: "absolute",
     top: "16px",
     right: "15px",
     p: "4px",
-    color: (h) => h.palette.grey[500]
-  }, children: u.jsx(Un, { children: "close_filled" }) }), typeof e != "string" ? u.jsx(u.Fragment, { children: e }) : u.jsx(Gh, { "data-test": "ink-dialog-title", children: u.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", children: [a?.primary?.variant && u.jsx(W1, { variant: a.primary.variant }), u.jsx(Ne, { variant: "h6", children: u.jsx("strong", { children: e }) })] }) }), c, d, a && u.jsxs(qh, { sx: { m: 1 }, children: [a.cancel && u.jsx(It, { "data-test": "ink-dialog-cancel-action", onClick: a.cancel.onClick, children: a.cancel?.label }), a.secondary && u.jsx(It, { sx: {
+    color: (f) => f.palette.grey[500]
+  }, children: u.jsx(Un, { children: "close_filled" }) }), typeof e != "string" ? u.jsx(u.Fragment, { children: e }) : u.jsx(Gh, { "data-test": "ink-dialog-title", children: u.jsxs($e, { sx: { alignItems: "center" }, direction: "row", children: [a?.primary?.variant && u.jsx(W1, { variant: a.primary.variant }), u.jsx(Ne, { variant: "h6", children: u.jsx("strong", { children: e }) })] }) }), d, p, a && u.jsxs(qh, { sx: {
+    m: 1,
+    justifyContent: s ? "space-between" : "flex-end"
+  }, children: [typeof s == "string" ? u.jsx(Ne, { variant: "caption", sx: { color: "text.secondary" }, "data-test": "ink-dialog-action-description", children: s }) : s, u.jsxs($e, { direction: "row", spacing: 1, children: [a.cancel && u.jsx(It, { "data-test": "ink-dialog-cancel-action", onClick: a.cancel.onClick, children: a.cancel?.label }), a.secondary && u.jsx(It, { sx: {
     color: a.secondary?.variant === "destructive" ? "error" : "primary"
   }, "data-test": "ink-dialog-secondary-action", disabled: a.secondary.disabled || a.secondary.loading, ...a.secondary, variant: a.secondary?.variant ? "contained" : "text", loadingPosition: "end", children: a.secondary?.label }), a.primary && u.jsx(It, { sx: {
     color: a.primary?.variant === "destructive" ? "error" : "primary"
-  }, "data-test": "ink-dialog-primary-action", disabled: a.primary.disabled || a.primary.loading, ...a.primary, variant: "contained", loadingPosition: "end", children: a.primary?.label })] })] });
+  }, "data-test": "ink-dialog-primary-action", disabled: a.primary.disabled || a.primary.loading, ...a.primary, variant: "contained", loadingPosition: "end", children: a.primary?.label })] })] })] });
 }
 const cf = 280, H1 = Ld(he, { shouldForwardProp: (e) => e !== "open" })(({ theme: e, open: t }) => ({
   flexGrow: 1,
@@ -13047,7 +13050,7 @@ function _$({
     sx: {
       padding: 0
     }
-  }, variant: "persistent", anchor: "left", open: e, children: u.jsxs(Ie, { sx: { height: "100%", justifyContent: "space-between" }, children: [u.jsxs(Ie, { direction: "column", spacing: 3, sx: { p: 2 }, children: [u.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", children: [u.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", children: [u.jsx(Un, { sx: { fontSize: "small", color: "text.primary" }, children: "filter_list_icon" }), u.jsx(Ne, { sx: { ml: 1 }, "data-cy": "drawer-header", children: l })] }), u.jsx(sa, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
+  }, variant: "persistent", anchor: "left", open: e, children: u.jsxs($e, { sx: { height: "100%", justifyContent: "space-between" }, children: [u.jsxs($e, { direction: "column", spacing: 3, sx: { p: 2 }, children: [u.jsxs($e, { sx: { alignItems: "center" }, direction: "row", children: [u.jsxs($e, { sx: { alignItems: "center" }, direction: "row", children: [u.jsx(Un, { sx: { fontSize: "small", color: "text.primary" }, children: "filter_list_icon" }), u.jsx(Ne, { sx: { ml: 1 }, "data-cy": "drawer-header", children: l })] }), u.jsx(sa, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
     popper: {
       modifiers: [
         {
@@ -13072,7 +13075,7 @@ function _$({
 }
 function D$({ metadata: e }) {
   const t = (n) => n == null || n === "" ? u.jsx(Ne, { sx: { color: "text.disabled" }, variant: "body2", children: "--" }) : typeof n == "string" ? u.jsx(Ne, { variant: "body2", children: n }) : n;
-  return u.jsx(Ie, { direction: "row", spacing: 2, "data-test-ink-page-header-metadata": !0, children: e.map(({ icon: n, label: o, value: i }) => u.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", spacing: 0.5, "data-cy": `metadata-${o}`, children: [n && typeof n == "string" ? u.jsx(Un, { sx: { color: "neutral600", fontSize: "1rem" }, children: n }) : n, u.jsx(Ne, { sx: { color: "text.secondary" }, variant: "body2", children: o }), t(i)] }, o)) });
+  return u.jsx($e, { direction: "row", spacing: 2, "data-test-ink-page-header-metadata": !0, children: e.map(({ icon: n, label: o, value: i }) => u.jsxs($e, { sx: { alignItems: "center" }, direction: "row", spacing: 0.5, "data-cy": `metadata-${o}`, children: [n && typeof n == "string" ? u.jsx(Un, { sx: { color: "neutral600", fontSize: "1rem" }, children: n }) : n, u.jsx(Ne, { sx: { color: "text.secondary" }, variant: "body2", children: o }), t(i)] }, o)) });
 }
 const U1 = ({ children: e }) => {
   const t = Yh({
@@ -13096,7 +13099,7 @@ const U1 = ({ children: e }) => {
   ...t
 }, children: e({ position: o }) }) });
 function B$({ Breadcrumbs: e, Subtitle: t, Metadata: n, Chips: o, ButtonGroup: i, Tabs: a, sx: s }) {
-  return u.jsx(uf, { children: ({ position: l }) => u.jsxs(Ie, { "data-test-ink-page-header": !0, direction: "column", spacing: 2, sx: {
+  return u.jsx(uf, { children: ({ position: l }) => u.jsxs($e, { "data-test-ink-page-header": !0, direction: "column", spacing: 2, sx: {
     position: l,
     borderBottom: 1,
     borderColor: "divider",
@@ -13104,11 +13107,11 @@ function B$({ Breadcrumbs: e, Subtitle: t, Metadata: n, Chips: o, ButtonGroup: i
     py: 3,
     ...a && { pb: -3 },
     ...s
-  }, children: [u.jsxs(Ie, { direction: "row", spacing: 2, sx: {
+  }, children: [u.jsxs($e, { direction: "row", spacing: 2, sx: {
     justifyContent: "space-between",
     alignItems: "center",
     minHeight: 36
-  }, children: [u.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", spacing: 1, children: [e, o] }), i] }), n, t, a] }) });
+  }, children: [u.jsxs($e, { sx: { alignItems: "center" }, direction: "row", spacing: 1, children: [e, o] }), i] }), n, t, a] }) });
 }
 const G1 = {
   ".MuiBreadcrumbs-separator": {
@@ -13133,7 +13136,7 @@ function z$({ primaryAction: e, secondaryAction: t, dropdownAction: n }) {
   }, l = () => {
     i(null);
   }, { internalUseOnlyItems: c, menuOptions: d } = n ?? {}, p = d?.filter((f) => c?.includes(f.label)), h = d?.filter((f) => !c?.includes(f.label));
-  return u.jsxs(Ie, { direction: "row", spacing: 1, "data-test-ink-page-header-action-buttons": !0, children: [n && u.jsxs(he, { children: [u.jsx(It, { id: "action-dd", "aria-controls": a ? "action-menu" : void 0, "aria-haspopup": "true", "aria-expanded": a ? "true" : void 0, onClick: s, variant: "contained", color: "inherit", endIcon: u.jsx(Un, { children: "arrow_drop_down" }), children: n.label }), u.jsxs(la, { id: "action-menu", anchorEl: o, open: a, onClose: l, MenuListProps: {
+  return u.jsxs($e, { direction: "row", spacing: 1, "data-test-ink-page-header-action-buttons": !0, children: [n && u.jsxs(he, { children: [u.jsx(It, { id: "action-dd", "aria-controls": a ? "action-menu" : void 0, "aria-haspopup": "true", "aria-expanded": a ? "true" : void 0, onClick: s, variant: "contained", color: "inherit", endIcon: u.jsx(Un, { children: "arrow_drop_down" }), children: n.label }), u.jsxs(la, { id: "action-menu", anchorEl: o, open: a, onClose: l, MenuListProps: {
     "aria-labelledby": "action-dd"
   }, anchorOrigin: {
     vertical: "bottom",
@@ -13157,11 +13160,11 @@ function V$({ label: e, Stepper: t, ButtonGroup: n, subtitle: o }) {
     py: 2.25,
     borderBottom: "1px solid",
     borderBottomColor: "neutral200"
-  }, children: ({ position: a }) => u.jsxs(Ie, { sx: {
+  }, children: ({ position: a }) => u.jsxs($e, { sx: {
     position: a,
     justifyContent: "space-between",
     alignItems: "center"
-  }, direction: "row", spacing: 2, children: [u.jsx(Ne, { "data-test-ink-workflow-header-label": !0, variant: "h6", sx: { fontWeight: "600", flexGrow: "1" }, children: u.jsxs(Ie, { direction: "column", spacing: 0, children: [e, o && u.jsx(Y1, { component: "span", subtitle: o })] }) }), t && u.jsx(he, { sx: { flexGrow: "2" }, "data-test-ink-workflow-header-stepper": !0, children: t }), n && u.jsx(he, { sx: { flexGrow: "1", justifyContent: "end", display: "flex" }, "data-test-ink-workflow-header-button-group": !0, children: i(n) ? u.jsxs(Ie, { direction: "row", spacing: 1, children: [n.primary && u.jsx(It, { variant: "contained", endIcon: n.primary.loading ? u.jsx(hl, { 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 && u.jsx(Pn, { onClick: n.close.onClick, "data-test-ink-workflow-header-close-action": !0, children: u.jsx(Un, { children: "close_rounded" }) })] }) : n })] }) });
+  }, direction: "row", spacing: 2, children: [u.jsx(Ne, { "data-test-ink-workflow-header-label": !0, variant: "h6", sx: { fontWeight: "600", flexGrow: "1" }, children: u.jsxs($e, { direction: "column", spacing: 0, children: [e, o && u.jsx(Y1, { component: "span", subtitle: o })] }) }), t && u.jsx(he, { sx: { flexGrow: "2" }, "data-test-ink-workflow-header-stepper": !0, children: t }), n && u.jsx(he, { sx: { flexGrow: "1", justifyContent: "end", display: "flex" }, "data-test-ink-workflow-header-button-group": !0, children: i(n) ? u.jsxs($e, { direction: "row", spacing: 1, children: [n.primary && u.jsx(It, { variant: "contained", endIcon: n.primary.loading ? u.jsx(hl, { 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 && u.jsx(Pn, { onClick: n.close.onClick, "data-test-ink-workflow-header-close-action": !0, children: u.jsx(Un, { children: "close_rounded" }) })] }) : n })] }) });
 }
 const Qo = _0({
   createStyledComponent: J("div", {
@@ -13169,7 +13172,7 @@ const Qo = _0({
     slot: "Root",
     overridesResolver: (e, t) => t.root
   }),
-  useThemeProps: (e) => $e({
+  useThemeProps: (e) => Ie({
     props: e,
     name: "MuiStack"
   })
@@ -13332,7 +13335,7 @@ const bu = ke("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "sub
   const {
     color: o,
     ...i
-  } = $e({
+  } = Ie({
     props: t,
     name: "MuiTypography"
   }), a = !J1[o], s = Q1({
@@ -13588,7 +13591,7 @@ const nT = (e) => {
     }
   }]
 }), ra = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiCollapse"
   }), {
@@ -13923,7 +13926,7 @@ const Ri = ke("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabl
 })({
   all: "unset"
 }), pf = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiAccordion"
   }), {
@@ -14119,7 +14122,7 @@ const dT = (e) => {
 }) => ({
   padding: e.spacing(1, 2, 2)
 }))), ff = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiAccordionDetails"
   }), {
@@ -14244,7 +14247,7 @@ const qr = ke("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disab
     transform: "rotate(180deg)"
   }
 }))), hf = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiAccordionSummary"
   }), {
@@ -14427,7 +14430,7 @@ function H$({ label: e, children: t, leftAdornment: n, chip: o, details: i, onDe
 }
 const U$ = ({ name: e, options: t, value: n, ref: o, direction: i = "row", cardSx: a, fullWidth: s = !0, disabled: l = !1, onChange: c, onBlur: d }) => {
   const p = (b, v, g, S) => S ? b ? v : "inherit" : g, h = (b, v, g, S, m) => m ? b ? v : S : b ? v : g, f = t.some((b) => !!b.bottomContent);
-  return u.jsx(Jh, { name: e, onChange: c, onBlur: d, value: n, ref: o, "aria-label": e, "aria-readonly": l, "aria-disabled": l, sx: { width: s ? "100%" : "fit-content" }, children: u.jsx(Ie, { direction: i, spacing: 2, children: t.map(({ value: b, icon: v, title: g, description: S, subDescription: m, disabled: C, bottomContent: y, tooltipProps: T }) => {
+  return u.jsx(Jh, { name: e, onChange: c, onBlur: d, value: n, ref: o, "aria-label": e, "aria-readonly": l, "aria-disabled": l, sx: { width: s ? "100%" : "fit-content" }, children: u.jsx($e, { direction: i, spacing: 2, children: t.map(({ value: b, icon: v, title: g, description: S, subDescription: m, disabled: C, bottomContent: y, tooltipProps: T }) => {
     const w = l || C, E = u.jsxs(Vi, { elevation: 0, id: b, sx: {
       px: 3,
       py: 2,
@@ -14451,7 +14454,7 @@ const U$ = ({ name: e, options: t, value: n, ref: o, direction: i = "row", cardS
       borderRadius: 1,
       outlineColor: (k) => h(n === b, k.palette.primary.dark, k.palette.neutral200, k.palette.neutral200, w),
       ...a
-    }, children: [u.jsxs(Ie, { sx: { alignItems: "center", width: "100%" }, direction: "column", children: [v && u.jsx(he, { sx: {
+    }, children: [u.jsxs($e, { sx: { alignItems: "center", width: "100%" }, direction: "column", children: [v && u.jsx(he, { sx: {
       color: w ? "neutral500" : n === b ? "text.primary" : "action.active",
       ".MuiSvgIcon-root": { fontSize: "2rem" }
     }, children: v }), u.jsx(Ne, { sx: {
@@ -14662,7 +14665,7 @@ const Cu = {
 function K$({ title: e, description: t, action: n, variant: o, icon: i, isLongLoading: a, sx: s }) {
   a && (e = e || ms.title, t = t || ms.description, i = i || ms.icon);
   const l = o === "search" ? "neutral00" : "neutral50", c = wT[o], { fontSize: d, fontSizeDescription: p, titleVariant: h, descriptionVariant: f } = c, b = (v) => !!v && "onClick" in v;
-  return u.jsxs(Ie, { "data-cy": `empty-state-${o}-${a ? "long-loading-" : ""}container`, sx: {
+  return u.jsxs($e, { "data-cy": `empty-state-${o}-${a ? "long-loading-" : ""}container`, sx: {
     alignItems: "center",
     justifyContent: "center",
     textAlign: "center",
@@ -14741,7 +14744,7 @@ const zo = ke("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled",
     color: (e.vars || e).palette.error.main
   }
 }))), Va = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiFormLabel"
   }), {
@@ -14993,7 +14996,7 @@ const PT = (e) => {
     }
   }]
 }))), Fl = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     name: "MuiInputLabel",
     props: t
   }), {
@@ -15143,7 +15146,7 @@ const IT = (e) => {
     }
   }]
 }), zl = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiList"
   }), {
@@ -15257,7 +15260,7 @@ const _T = (e) => {
     }
   }]
 }), Vl = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiListItemSecondaryAction"
   }), {
@@ -15422,7 +15425,7 @@ const BT = (e, t) => {
 })({
   position: "relative"
 }), mf = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiListItem"
   }), {
@@ -15676,7 +15679,7 @@ const Pi = ke("MuiListItemText", ["root", "multiline", "dense", "inset", "primar
     }
   }]
 }), gf = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiListItemText"
   }), {
@@ -15855,7 +15858,7 @@ const qT = (e) => {
     }
   }]
 }))), Qs = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiListItemIcon"
   }), {
@@ -16143,7 +16146,7 @@ const oC = (e) => {
   slot: "Input",
   overridesResolver: Pa
 })({}), Wa = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiInput"
   }), {
@@ -16609,7 +16612,7 @@ const sC = (e) => {
     }
   }]
 }))), Ha = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiFilledInput"
   }), {
@@ -17148,7 +17151,7 @@ const pC = (e) => {
     }
   }]
 }))), Ua = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiOutlinedInput"
   }), {
@@ -17446,7 +17449,7 @@ const yC = (e) => {
     }
   }]
 }), Ga = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiFormControl"
   }), {
@@ -17678,7 +17681,7 @@ const xC = (e) => {
     }
   }]
 }))), qa = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiFormHelperText"
   }), {
@@ -18612,7 +18615,7 @@ const LC = (e) => {
     }
   }]
 }), wf = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiBackdrop"
   }), {
@@ -18897,7 +18900,7 @@ const VC = (e) => {
 })({
   zIndex: -1
 }), Sf = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     name: "MuiModal",
     props: t
   }), {
@@ -19243,7 +19246,7 @@ const GC = (e) => {
   // We disable the focus ring for mouse, touch and keyboard users.
   outline: 0
 }), Ef = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiPopover"
   }), {
@@ -19694,7 +19697,7 @@ const YC = {
   // We disable the focus ring for mouse, touch and keyboard users.
   outline: 0
 }), kf = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiMenu"
   }), {
@@ -20652,7 +20655,7 @@ const uw = (e) => {
   shouldForwardProp: (e) => zt(e) && e !== "variant",
   slot: "Root"
 }, dw = J(Wa, Hl)(""), pw = J(Ua, Hl)(""), fw = J(Ha, Hl)(""), Ul = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     name: "MuiSelect",
     props: t
   }), {
@@ -20916,7 +20919,7 @@ const mw = {
   slot: "Root",
   overridesResolver: (e, t) => t.root
 })({}), Af = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiTextField"
   }), {
@@ -21943,7 +21946,7 @@ const $S = (e) => {
   "& .MuiSvgIcon-root": {
     fontSize: 16
   }
-}, children: n }), _S = ({ onCopy: e, onFeedback: t, className: n, sx: o }) => u.jsxs(Ie, { direction: "row", spacing: 1, className: n, sx: { alignItems: "center", ...o }, "data-test-ink-ai-message-actions": !0, children: [u.jsx(Os, { ariaLabel: "Good response", onClick: () => t?.("up"), children: u.jsx(Xu, { sx: { transform: "rotate(180deg)" } }) }), u.jsx(Os, { ariaLabel: "Bad response", onClick: () => t?.("down"), children: u.jsx(Xu, {}) }), u.jsx(Os, { ariaLabel: "Copy message", onClick: e, children: u.jsx(LS, {}) })] }), DS = {
+}, children: n }), _S = ({ onCopy: e, onFeedback: t, className: n, sx: o }) => u.jsxs($e, { direction: "row", spacing: 1, className: n, sx: { alignItems: "center", ...o }, "data-test-ink-ai-message-actions": !0, children: [u.jsx(Os, { ariaLabel: "Good response", onClick: () => t?.("up"), children: u.jsx(Xu, { sx: { transform: "rotate(180deg)" } }) }), u.jsx(Os, { ariaLabel: "Bad response", onClick: () => t?.("down"), children: u.jsx(Xu, {}) }), u.jsx(Os, { ariaLabel: "Copy message", onClick: e, children: u.jsx(LS, {}) })] }), DS = {
   p: ({ children: e }) => u.jsx(Ne, { variant: "body2", sx: { color: "text.primary", m: 0 }, children: e }),
   ul: ({ children: e }) => u.jsx(he, { component: "ul", sx: {
     m: 0,
@@ -21979,7 +21982,7 @@ const $S = (e) => {
   if (t || !e.trim())
     return u.jsx(AS, { label: i, className: l, sx: c });
   const h = o && !n;
-  return u.jsxs(Ie, { direction: "column", spacing: 2, className: l, sx: { alignItems: "flex-start", width: "100%", ...c }, "data-test-ink-ai-assistant-message": !0, children: [u.jsx($S, { options: {
+  return u.jsxs($e, { direction: "column", spacing: 2, className: l, sx: { alignItems: "flex-start", width: "100%", ...c }, "data-test-ink-ai-assistant-message": !0, children: [u.jsx($S, { options: {
     overrides: DS,
     disableParsingRawHTML: !0,
     forceWrapper: !0,
@@ -22274,7 +22277,7 @@ function Mi(e, t) {
   };
 }
 const Hf = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiTooltip"
   }), {
@@ -22799,7 +22802,7 @@ function rI(e) {
       ...f
     },
     variant: "outlined"
-  }, anchor: "left", open: ks(e) ? e.isOpen : !0, variant: t === "panel" ? "permanent" : "persistent", ...b, children: u.jsxs(Ie, { sx: { height: "100%", justifyContent: "space-between" }, children: [u.jsxs(Ie, { direction: "column", spacing: 3, sx: { p: 2 }, children: [u.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", children: [u.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", children: [v && u.jsx(KS, { Icon: v }), u.jsx(Ne, { sx: { ml: v && 1 }, "data-cy": "drawer-header", children: i })] }), ks(e) && u.jsx(sa, { title: e.closeTooltipText ?? "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
+  }, anchor: "left", open: ks(e) ? e.isOpen : !0, variant: t === "panel" ? "permanent" : "persistent", ...b, children: u.jsxs($e, { sx: { height: "100%", justifyContent: "space-between" }, children: [u.jsxs($e, { direction: "column", spacing: 3, sx: { p: 2 }, children: [u.jsxs($e, { sx: { alignItems: "center" }, direction: "row", children: [u.jsxs($e, { sx: { alignItems: "center" }, direction: "row", children: [v && u.jsx(KS, { Icon: v }), u.jsx(Ne, { sx: { ml: v && 1 }, "data-cy": "drawer-header", children: i })] }), ks(e) && u.jsx(sa, { title: e.closeTooltipText ?? "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
     popper: {
       modifiers: [
         {
@@ -22822,7 +22825,7 @@ function rI(e) {
     borderColor: "neutral200"
   }, children: o })] }) }), u.jsx(YS, { component: "main", open: ks(e) ? e.isOpen : !0, drawerWidth: g, ...h, children: p })] });
 }
-const XS = ({ iconComponent: e, isDragging: t = !1, "data-cy": n }) => e ? u.jsx(Ie, { sx: {
+const XS = ({ iconComponent: e, isDragging: t = !1, "data-cy": n }) => e ? u.jsx($e, { sx: {
   justifyContent: "center",
   alignItems: "center",
   width: t ? 24 : 32,
@@ -22832,7 +22835,7 @@ const XS = ({ iconComponent: e, isDragging: t = !1, "data-cy": n }) => e ? u.jsx
   boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);"
 }, "data-cy": n, children: u.jsx(e, { size: t ? "small" : "normal" }) }) : null, oI = Mr(({ label: e, icon: t, description: n, disabled: o = !1, isDynamic: i = !1, isDragging: a = !1, fullWidth: s = !1, "data-cy": l, sx: c, ...d }, p) => {
   const h = l || "tile", f = `${h}-label`, b = `${h}-description`, v = `${h}-icon`;
-  return u.jsxs(Ie, { ref: p, direction: "row", sx: {
+  return u.jsxs($e, { ref: p, direction: "row", sx: {
     alignItems: "center",
     gap: a ? 2.5 : 1.5,
     py: 1,
@@ -22851,7 +22854,7 @@ const XS = ({ iconComponent: e, isDragging: t = !1, "data-cy": n }) => e ? u.jsx
       backgroundColor: o ? (g) => g.palette.neutral100 : (g) => g.palette.neutral200
     },
     ...c
-  }, "data-cy": l, ...d, children: [t && u.jsx(XS, { iconComponent: t, isDragging: a, "data-cy": v }), u.jsxs(he, { sx: { flex: 1 }, children: [u.jsxs(Ie, { sx: { alignItems: "center", gap: 0.5 }, direction: "row", children: [u.jsx(Ne, { sx: {
+  }, "data-cy": l, ...d, children: [t && u.jsx(XS, { iconComponent: t, isDragging: a, "data-cy": v }), u.jsxs(he, { sx: { flex: 1 }, children: [u.jsxs($e, { sx: { alignItems: "center", gap: 0.5 }, direction: "row", children: [u.jsx(Ne, { sx: {
     display: "block",
     color: o ? "text.disabled" : "text.primary",
     fontWeight: a ? 400 : 600
@@ -23004,7 +23007,7 @@ const Qu = ke("MuiAlert", ["root", "action", "icon", "message", "filled", "color
     fontSize: "inherit"
   })
 }, Kl = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiAlert"
   }), {
@@ -23252,7 +23255,7 @@ const lO = (e) => {
   fontWeight: e.typography.fontWeightMedium,
   marginTop: -2
 }))), Yl = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiAlertTitle"
   }), {
@@ -23747,7 +23750,7 @@ const pO = (e) => {
   width: "1em",
   height: "1em"
 }), Yf = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = O.useContext(Gf), i = O.useContext(qf), a = Go(o, t), s = $e({
+  const o = O.useContext(Gf), i = O.useContext(qf), a = Go(o, t), s = Ie({
     props: a,
     name: "MuiButton"
   }), {
@@ -24350,7 +24353,7 @@ const Rs = ke("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "c
     }
   }]
 }))), kO = /* @__PURE__ */ u.jsx(CO, {}), RO = /* @__PURE__ */ u.jsx(TO, {}), PO = /* @__PURE__ */ u.jsx(wO, {}), Jf = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiCheckbox"
   }), {
@@ -24608,7 +24611,7 @@ const No = ke("MuiFormControlLabel", ["root", "labelPlacementStart", "labelPlace
     color: (e.vars || e).palette.error.main
   }
 }))), Ja = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiFormControlLabel"
   }), {
@@ -24800,7 +24803,7 @@ const NO = (e) => {
     }
   }]
 }), Xl = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiFormGroup"
   }), {
@@ -25030,7 +25033,7 @@ function qO(e, t) {
 const KO = /* @__PURE__ */ u.jsx(Jl, {
   checked: !0
 }), YO = /* @__PURE__ */ u.jsx(Jl, {}), Qf = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiRadio"
   }), {
@@ -25498,7 +25501,7 @@ const Bt = ke("MuiSwitch", ["root", "edgeStart", "edgeEnd", "switchBase", "color
   height: 20,
   borderRadius: "50%"
 }))), eh = /* @__PURE__ */ O.forwardRef(function(t, n) {
-  const o = $e({
+  const o = Ie({
     props: t,
     name: "MuiSwitch"
   }), {
@@ -25706,7 +25709,7 @@ const th = We(/* @__PURE__ */ u.jsx("path", {
 function uI({ message: e, sx: t, messageSx: n }) {
   return u.jsx(zd, { severity: "info", "data-cy": "internal-user-only-alert", sx: { alignItems: "center", ...t }, iconMapping: {
     info: u.jsx(th, {})
-  }, children: u.jsxs(Ie, { sx: { gap: 1, alignItems: "center" }, direction: "row", children: [u.jsx(df, { sx: { color: "text.secondary" } }), u.jsx(Ie, { children: "-" }), u.jsx(Ne, { variant: "body2", sx: n, "data-cy": "internal-user-only-alert-message", children: e || "This page has limited access to internal users only." })] }) });
+  }, children: u.jsxs($e, { sx: { gap: 1, alignItems: "center" }, direction: "row", children: [u.jsx(df, { sx: { color: "text.secondary" } }), u.jsx($e, { children: "-" }), u.jsx(Ne, { variant: "body2", sx: n, "data-cy": "internal-user-only-alert-message", children: e || "This page has limited access to internal users only." })] }) });
 }
 function aE() {
   this.__data__ = [], this.size = 0;
@@ -26548,13 +26551,13 @@ function fI({ checkboxProps: e, title: t, avatar: n, size: o = "medium", subhead
       color: "text.secondary"
     }
   } }), g = h || a || l && !f;
-  return u.jsxs(Ie, { children: [g && u.jsxs(Ie, { direction: "row", sx: {
+  return u.jsxs($e, { children: [g && u.jsxs($e, { direction: "row", sx: {
     alignItems: "center",
     justifyContent: "space-between",
     mt: 1,
     mb: 1,
     mr: 1
-  }, children: [u.jsx(Ie, { sx: { flex: 1, alignItems: "center" }, direction: "row", children: h && u.jsx(ml, { sx: { ml: 0.5 }, control: u.jsx(Vd, { size: "small", "data-cy": "inkcardheader-selection-checkbox", ...e, disabled: c ?? e?.disabled }), label: u.jsx(he, { component: "span", sx: bg, children: t }) }) }), u.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", spacing: 1, children: [a && u.jsx(he, { sx: { pr: l ? 0 : 1 }, children: a }), l && !f && b] })] }), v()] });
+  }, children: [u.jsx($e, { sx: { flex: 1, alignItems: "center" }, direction: "row", children: h && u.jsx(ml, { sx: { ml: 0.5 }, control: u.jsx(Vd, { size: "small", "data-cy": "inkcardheader-selection-checkbox", ...e, disabled: c ?? e?.disabled }), label: u.jsx(he, { component: "span", sx: bg, children: t }) }) }), u.jsxs($e, { sx: { alignItems: "center" }, direction: "row", spacing: 1, children: [a && u.jsx(he, { sx: { pr: l ? 0 : 1 }, children: a }), l && !f && b] })] }), v()] });
 }
 const tj = We(/* @__PURE__ */ u.jsx("path", {
   d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2M8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z"
@@ -26692,7 +26695,7 @@ function sj({ columnData: e, handleColumnFilterChange: t, customGridVisibility:
     paddingBottom: 0
   }, children: u.jsx(ml, { control: u.jsx(Vd, { checked: n[y], onChange: (w) => v(w.target.checked, y) }), label: T, sx: {
     display: i?.includes(y) ? "none" : void 0
-  } }) }, y)) }), u.jsx(fm, { sx: { position: "sticky", bottom: 0, zIndex: 1, padding: 0 }, variant: "outlined", children: u.jsxs(Ie, { sx: {
+  } }) }, y)) }), u.jsx(fm, { sx: { position: "sticky", bottom: 0, zIndex: 1, padding: 0 }, variant: "outlined", children: u.jsxs($e, { sx: {
     flexDirection: "row",
     justifyContent: "space-between",
     mx: 1.5,
@@ -26701,14 +26704,14 @@ function sj({ columnData: e, handleColumnFilterChange: t, customGridVisibility:
 }
 function yI({ groupingProps: e, filterDrawerBtnProps: t, showFilterDrawerBtn: n = !1, showQuickFilter: o = !0, showExportButton: i = !1, showDensitySelector: a = !1, onExportClick: s, loadingExport: l, columnPickerProps: c, children: d, py: p = 2 }) {
   const { value: h, onChange: f, options: b } = e ?? {};
-  return u.jsx(_m, { sx: { py: p }, children: u.jsxs(Ie, { direction: "column", sx: { width: "100%" }, children: [u.jsxs(Ie, { sx: {
+  return u.jsx(_m, { sx: { py: p }, children: u.jsxs($e, { direction: "column", sx: { width: "100%" }, children: [u.jsxs($e, { sx: {
     justifyContent: o ? "space-between" : "end",
     alignItems: "center",
     width: "100%"
-  }, direction: "row", children: [u.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", spacing: 2, children: [o && u.jsx(Dm, { sx: {
+  }, direction: "row", children: [u.jsxs($e, { sx: { alignItems: "center" }, direction: "row", spacing: 2, children: [o && u.jsx(Dm, { sx: {
     ".MuiInputBase-input": { p: 0 },
     ".MuiInput-root:after": { borderBottom: "none" }
-  }, "data-cy": "grid-tool-bar-quick-filter" }), n && t && u.jsx(hm, { badgeContent: t.filterBtnBadgeContent, color: "primary", "data-cy": "grid-tool-bar-filter-badge", children: u.jsx(oj, { onClick: t.onShowFilterDrawerClick }) })] }), u.jsxs(Ie, { direction: "row", spacing: 1, children: [a && u.jsx(Bm, { slotProps: { button: { size: "small" } } }), c && u.jsx(sj, { columnData: c.columnData, handleColumnFilterChange: c.handleColumnFilterChange, customGridVisibility: c.customGridVisibility, lockedFields: c.lockedFields, hiddenInColumnPicker: c.hiddenInColumnPicker }), i && u.jsx(Fm, { slotProps: { button: { size: "small" } } }), h !== void 0 && f && b && u.jsx(ij, { value: h, onChange: f, options: b }), s && u.jsx(rj, { onClick: s, loadingExport: l })] })] }), d] }) });
+  }, "data-cy": "grid-tool-bar-quick-filter" }), n && t && u.jsx(hm, { badgeContent: t.filterBtnBadgeContent, color: "primary", "data-cy": "grid-tool-bar-filter-badge", children: u.jsx(oj, { onClick: t.onShowFilterDrawerClick }) })] }), u.jsxs($e, { direction: "row", spacing: 1, children: [a && u.jsx(Bm, { slotProps: { button: { size: "small" } } }), c && u.jsx(sj, { columnData: c.columnData, handleColumnFilterChange: c.handleColumnFilterChange, customGridVisibility: c.customGridVisibility, lockedFields: c.lockedFields, hiddenInColumnPicker: c.hiddenInColumnPicker }), i && u.jsx(Fm, { slotProps: { button: { size: "small" } } }), h !== void 0 && f && b && u.jsx(ij, { value: h, onChange: f, options: b }), s && u.jsx(rj, { onClick: s, loadingExport: l })] })] }), d] }) });
 }
 function bI({ testSelector: e = "", disableColumnReorder: t = !0, sx: n, rows: o, ...i }) {
   const a = o?.length ? null : {
@@ -26764,7 +26767,7 @@ function TI(e, t, n = {}) {
     ...s
   };
 }
-const uj = ({ action: e, onClose: t }) => u.jsxs(Ie, { direction: "row", spacing: 1, children: [e && u.jsx(It, { "data-test-ink-highlight-alert-action": !0, onClick: e.callback, variant: "contained", color: "inherit", size: "medium", sx: { color: "text.primary" }, children: e.label }), t && u.jsx(Pn, { onClick: t, sx: { color: "neutral00" }, "data-test-ink-highlight-alert-close": !0, children: u.jsx(Xf, {}) })] });
+const uj = ({ action: e, onClose: t }) => u.jsxs($e, { direction: "row", spacing: 1, children: [e && u.jsx(It, { "data-test-ink-highlight-alert-action": !0, onClick: e.callback, variant: "contained", color: "inherit", size: "medium", sx: { color: "text.primary" }, children: e.label }), t && u.jsx(Pn, { onClick: t, sx: { color: "neutral00" }, "data-test-ink-highlight-alert-close": !0, children: u.jsx(Xf, {}) })] });
 function CI({ testSelector: e = "ink-highlight-alert", onClose: t, action: n, alertProps: o, message: i }) {
   return u.jsx(zd, { "data-test-ink-highlight-alert": e, variant: "highlight", icon: !1, onClose: t && !n ? t : void 0, action: (n || t) && u.jsx(uj, { onClose: t, action: n ?? void 0 }), ...o, sx: {
     px: 3,
@@ -27126,13 +27129,13 @@ const dj = We(/* @__PURE__ */ u.jsx("path", {
 }, ri = "—";
 function pj({ trend: e }) {
   const t = e.direction === "up", n = t ? yf : dj, o = t ? V.greenA700 : V.error.main;
-  return u.jsxs(Ie, { direction: "row", spacing: 0.25, sx: { alignItems: "center", color: o }, children: [u.jsx(n, { sx: { fontSize: "1rem" } }), u.jsx(Ne, { variant: "body2", sx: { fontWeight: 500, color: o }, children: e.value })] });
+  return u.jsxs($e, { direction: "row", spacing: 0.25, sx: { alignItems: "center", color: o }, children: [u.jsx(n, { sx: { fontSize: "1rem" } }), u.jsx(Ne, { variant: "body2", sx: { fontWeight: 500, color: o }, children: e.value })] });
 }
 function fj({ primaryMetric: e, graph: t, isEmpty: n }) {
-  return u.jsxs(Ie, { sx: { justifyContent: "space-between", alignItems: "flex-start" }, direction: "row", children: [u.jsxs(he, { children: [u.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", spacing: 1, children: [u.jsx(Ne, { sx: { fontWeight: 700, lineHeight: 1.2 }, variant: "h4", children: n ? ri : e.value }), !n && e.trend && u.jsx(pj, { trend: e.trend })] }), u.jsx(Ne, { sx: { color: "text.secondary" }, variant: "body2", children: e.label })] }), t && !n && u.jsx(he, { sx: { flexShrink: 0 }, children: t })] });
+  return u.jsxs($e, { sx: { justifyContent: "space-between", alignItems: "flex-start" }, direction: "row", children: [u.jsxs(he, { children: [u.jsxs($e, { sx: { alignItems: "center" }, direction: "row", spacing: 1, children: [u.jsx(Ne, { sx: { fontWeight: 700, lineHeight: 1.2 }, variant: "h4", children: n ? ri : e.value }), !n && e.trend && u.jsx(pj, { trend: e.trend })] }), u.jsx(Ne, { sx: { color: "text.secondary" }, variant: "body2", children: e.label })] }), t && !n && u.jsx(he, { sx: { flexShrink: 0 }, children: t })] });
 }
 function hj({ metrics: e, isEmpty: t }) {
-  return u.jsx(Ie, { direction: "row", divider: u.jsx(gl, { orientation: "vertical", flexItem: !0 }), spacing: 2, children: e.slice(0, 3).map((n, o) => u.jsxs(he, { children: [u.jsx(Ne, { sx: { fontWeight: 700 }, variant: "body1", children: t ? ri : n.value }), u.jsx(Ne, { sx: { color: "text.secondary" }, variant: "body2", children: n.label })] }, o)) });
+  return u.jsx($e, { direction: "row", divider: u.jsx(gl, { orientation: "vertical", flexItem: !0 }), spacing: 2, children: e.slice(0, 3).map((n, o) => u.jsxs(he, { children: [u.jsx(Ne, { sx: { fontWeight: 700 }, variant: "body1", children: t ? ri : n.value }), u.jsx(Ne, { sx: { color: "text.secondary" }, variant: "body2", children: n.label })] }, o)) });
 }
 function mj({ directIndirect: e, isEmpty: t }) {
   const { directPercent: n, directLabel: o = "Direct", indirectLabel: i = "Indirect" } = e, a = 100 - n;
@@ -27145,7 +27148,7 @@ function mj({ directIndirect: e, isEmpty: t }) {
     width: t ? "0%" : `${n}%`,
     bgcolor: V.primary.main,
     transition: "width 0.3s"
-  } }), u.jsx(he, { sx: { flex: 1, bgcolor: V.blue200 } })] }), u.jsxs(Ie, { sx: { justifyContent: "space-between", mt: 0.5 }, direction: "row", children: [u.jsxs(Ne, { variant: "body2", children: [u.jsx("strong", { children: t ? ri : `${n}%` }), " ", u.jsx(Ne, { sx: { color: "text.secondary" }, component: "span", variant: "body2", children: o })] }), u.jsxs(Ne, { variant: "body2", children: [u.jsx("strong", { children: t ? ri : `${a}%` }), " ", u.jsx(Ne, { sx: { color: "text.secondary" }, component: "span", variant: "body2", children: i })] })] })] });
+  } }), u.jsx(he, { sx: { flex: 1, bgcolor: V.blue200 } })] }), u.jsxs($e, { sx: { justifyContent: "space-between", mt: 0.5 }, direction: "row", children: [u.jsxs(Ne, { variant: "body2", children: [u.jsx("strong", { children: t ? ri : `${n}%` }), " ", u.jsx(Ne, { sx: { color: "text.secondary" }, component: "span", variant: "body2", children: o })] }), u.jsxs(Ne, { variant: "body2", children: [u.jsx("strong", { children: t ? ri : `${a}%` }), " ", u.jsx(Ne, { sx: { color: "text.secondary" }, component: "span", variant: "body2", children: i })] })] })] });
 }
 function SI(e) {
   const { isEmpty: t, sx: n } = e;
@@ -27158,7 +27161,7 @@ function SI(e) {
     }, "data-cy": "ink-metric-card-content", children: f }) : u.jsx(he, { sx: { p: 2 }, "data-cy": "ink-metric-card-content", children: f }) });
   }
   const { title: o, primaryMetric: i, secondaryMetrics: a, graph: s } = e, l = e.variant === "robust" ? e.directIndirect : void 0;
-  return u.jsx(Vi, { variant: "outlined", sx: n, "data-cy": "ink-metric-card", "data-cy-variant": e.variant, children: u.jsx(he, { sx: { p: 2 }, children: u.jsxs(Ie, { spacing: 2, children: [u.jsx(Ne, { variant: "overline", sx: { color: "text.secondary", lineHeight: 1 }, "data-cy": "ink-metric-card-title", children: o }), u.jsx(fj, { primaryMetric: i, graph: s, isEmpty: t }), a && a.length > 0 && u.jsx(hj, { metrics: a, isEmpty: t }), l && u.jsx(mj, { directIndirect: l, isEmpty: t })] }) }) });
+  return u.jsx(Vi, { variant: "outlined", sx: n, "data-cy": "ink-metric-card", "data-cy-variant": e.variant, children: u.jsx(he, { sx: { p: 2 }, children: u.jsxs($e, { spacing: 2, children: [u.jsx(Ne, { variant: "overline", sx: { color: "text.secondary", lineHeight: 1 }, "data-cy": "ink-metric-card-title", children: o }), u.jsx(fj, { primaryMetric: i, graph: s, isEmpty: t }), a && a.length > 0 && u.jsx(hj, { metrics: a, isEmpty: t }), l && u.jsx(mj, { directIndirect: l, isEmpty: t })] }) }) });
 }
 const ct = j0({
   createStyledComponent: J("div", {
@@ -27172,7 +27175,7 @@ const ct = j0({
     }
   }),
   componentName: "MuiGrid2",
-  useThemeProps: (e) => $e({
+  useThemeProps: (e) => Ie({
     props: e,
     name: "MuiGrid2"
   }),