@movable/ui 4.0.2 → 4.0.3

package/lib/index.mjs

@@ -12937,7 +12937,7 @@ function hj({ chipList: e, numTagsToDisplay: t, size: n = "medium", maxChipWidth
   }, f = () => {
     a(null);
   }, g = e?.length - p, y = !!i;
-  return d.jsxs(Me, { py: 0.5, sx: { width: "100%" }, ref: s, children: [e?.slice(0, p).map((h, T) => d.jsx(Me, { sx: { display: "inline-block", mr: 1, my: 0.5 }, "data-cy": "ink-chip", children: d.jsx(Vx, { chipProps: h, maxWidth: o, size: n }) }, T)), g > 0 && d.jsxs(Me, { sx: { display: "inline-block", mr: 0.5, my: 0.5 }, children: [d.jsx(gs, { "data-cy": "more-btn", size: n, label: `${g} more`, onClick: m }), d.jsx(Ji, { id: "basic-menu", "data-cy": "chip-menu", anchorEl: i, open: y, onClose: f, MenuListProps: {
+  return d.jsxs(Me, { sx: { py: 0.5, width: "100%" }, ref: s, children: [e?.slice(0, p).map((h, T) => d.jsx(Me, { sx: { display: "inline-block", mr: 1, my: 0.5 }, "data-cy": "ink-chip", children: d.jsx(Vx, { chipProps: h, maxWidth: o, size: n }) }, T)), g > 0 && d.jsxs(Me, { sx: { display: "inline-block", mr: 0.5, my: 0.5 }, children: [d.jsx(gs, { "data-cy": "more-btn", size: n, label: `${g} more`, onClick: m }), d.jsx(Ji, { id: "basic-menu", "data-cy": "chip-menu", anchorEl: i, open: y, onClose: f, MenuListProps: {
     "aria-labelledby": "basic-button"
   }, slotProps: {
     paper: {
@@ -12994,7 +12994,11 @@ function gj({ Title: e, Content: t, Actions: n, onClose: o, hideCloseButton: i,
     right: "15px",
     p: "4px",
     color: (m) => m.palette.grey[500]
-  }, children: d.jsx(nr, { children: "close_filled" }) }), typeof e != "string" ? d.jsx(d.Fragment, { children: e }) : d.jsx(qf, { "data-test": "ink-dialog-title", children: d.jsxs(Ie, { direction: "row", alignItems: "center", children: [a?.primary?.variant && d.jsx(Hx, { variant: a.primary.variant }), d.jsx(Ue, { variant: "h6", children: d.jsx("strong", { children: e }) })] }) }), c, u, a && d.jsxs(Kf, { sx: { m: 1 }, children: [a.cancel && d.jsx($t, { "data-test": "ink-dialog-cancel-action", onClick: a.cancel.onClick, children: a.cancel?.label }), a.secondary && d.jsx($t, { "data-test": "ink-dialog-secondary-action", color: a.secondary?.variant === "destructive" ? "error" : "primary", disabled: a.secondary.disabled || a.secondary.loading, ...a.secondary, variant: a.secondary?.variant ? "contained" : "text", loadingPosition: "end", children: a.secondary?.label }), a.primary && d.jsx($t, { "data-test": "ink-dialog-primary-action", color: a.primary?.variant === "destructive" ? "error" : "primary", disabled: a.primary.disabled || a.primary.loading, ...a.primary, variant: "contained", loadingPosition: "end", children: a.primary?.label })] })] });
+  }, children: d.jsx(nr, { children: "close_filled" }) }), typeof e != "string" ? d.jsx(d.Fragment, { children: e }) : d.jsx(qf, { "data-test": "ink-dialog-title", children: d.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", children: [a?.primary?.variant && d.jsx(Hx, { variant: a.primary.variant }), d.jsx(Ue, { variant: "h6", children: d.jsx("strong", { children: e }) })] }) }), c, u, a && d.jsxs(Kf, { sx: { m: 1 }, children: [a.cancel && d.jsx($t, { "data-test": "ink-dialog-cancel-action", onClick: a.cancel.onClick, children: a.cancel?.label }), a.secondary && d.jsx($t, { 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 && d.jsx($t, { 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 })] })] });
 }
 const wp = 280, Gx = Qu(Me, { shouldForwardProp: (e) => e !== "open" })(({ theme: e, open: t }) => ({
   flexGrow: 1,
@@ -13043,7 +13047,7 @@ function yj({
     sx: {
       padding: 0
     }
-  }, variant: "persistent", anchor: "left", open: e, children: d.jsxs(Ie, { height: "100%", justifyContent: "space-between", children: [d.jsxs(Ie, { direction: "column", spacing: 3, sx: { p: 2 }, children: [d.jsxs(Ie, { direction: "row", alignItems: "center", children: [d.jsxs(Ie, { direction: "row", alignItems: "center", children: [d.jsx(nr, { sx: { color: "text.primary" }, fontSize: "small", children: "filter_list_icon" }), d.jsx(Ue, { sx: { ml: 1 }, "data-cy": "drawer-header", children: l })] }), d.jsx(Xi, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
+  }, variant: "persistent", anchor: "left", open: e, children: d.jsxs(Ie, { sx: { height: "100%", justifyContent: "space-between" }, children: [d.jsxs(Ie, { direction: "column", spacing: 3, sx: { p: 2 }, children: [d.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", children: [d.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", children: [d.jsx(nr, { sx: { fontSize: "small", color: "text.primary" }, children: "filter_list_icon" }), d.jsx(Ue, { sx: { ml: 1 }, "data-cy": "drawer-header", children: l })] }), d.jsx(Xi, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
     popper: {
       modifiers: [
         {
@@ -13059,7 +13063,7 @@ function yj({
     width: "40px",
     height: "40px",
     zIndex: (m) => m.zIndex.tooltip
-  }, children: d.jsx(nr, { fontSize: "small", children: "close_icon" }) }) })] }), a] }), s && d.jsx(Me, { "data-cy": "bottom-filter", sx: {
+  }, children: d.jsx(nr, { sx: { fontSize: "small" }, children: "close_icon" }) }) })] }), a] }), s && d.jsx(Me, { "data-cy": "bottom-filter", sx: {
     px: 2,
     py: 1,
     borderTop: "1px solid",
@@ -13067,8 +13071,8 @@ function yj({
   }, children: s })] }) }), d.jsx(Gx, { component: "main", open: e, ...p, children: n })] });
 }
 function bj({ metadata: e }) {
-  const t = (n) => n == null || n === "" ? d.jsx(Ue, { variant: "body2", color: "text.disabled", children: "--" }) : typeof n == "string" ? d.jsx(Ue, { variant: "body2", children: n }) : n;
-  return d.jsx(Ie, { direction: "row", spacing: 2, "data-test-ink-page-header-metadata": !0, children: e.map(({ icon: n, label: o, value: i }) => d.jsxs(Ie, { direction: "row", alignItems: "center", spacing: 0.5, "data-cy": `metadata-${o}`, children: [n && typeof n == "string" ? d.jsx(nr, { sx: { color: "neutral600", fontSize: "1rem" }, children: n }) : n, d.jsx(Ue, { variant: "body2", color: "text.secondary", children: o }), t(i)] }, o)) });
+  const t = (n) => n == null || n === "" ? d.jsx(Ue, { sx: { color: "text.disabled" }, variant: "body2", children: "--" }) : typeof n == "string" ? d.jsx(Ue, { variant: "body2", children: n }) : n;
+  return d.jsx(Ie, { direction: "row", spacing: 2, "data-test-ink-page-header-metadata": !0, children: e.map(({ icon: n, label: o, value: i }) => d.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", spacing: 0.5, "data-cy": `metadata-${o}`, children: [n && typeof n == "string" ? d.jsx(nr, { sx: { color: "neutral600", fontSize: "1rem" }, children: n }) : n, d.jsx(Ue, { sx: { color: "text.secondary" }, variant: "body2", children: o }), t(i)] }, o)) });
 }
 const qx = ({ children: e }) => {
   const t = Xf({
@@ -13080,7 +13084,8 @@ const qx = ({ children: e }) => {
     //@nic-steffens - I am not sure elevation works
     position: t ? "sticky" : "static"
   });
-}, Sp = ({ children: e, sx: t }) => d.jsx(qx, { children: ({ elevation: n, position: o }) => d.jsx(Yf, { position: o, sx: {
+}, Sp = ({ children: e, sx: t }) => d.jsx(qx, { children: ({ elevation: n, position: o }) => d.jsx(Yf, { sx: {
+  position: o,
   p: 0,
   background: (i) => i.palette.neutral00,
   border: "none",
@@ -13091,14 +13096,19 @@ const qx = ({ children: e }) => {
   ...t
 }, children: e({ position: o }) }) });
 function vj({ Breadcrumbs: e, Subtitle: t, Metadata: n, Chips: o, ButtonGroup: i, Tabs: a, sx: s }) {
-  return d.jsx(Sp, { children: ({ position: l }) => d.jsxs(Ie, { "data-test-ink-page-header": !0, direction: "column", spacing: 2, position: l, sx: {
+  return d.jsx(Sp, { children: ({ position: l }) => d.jsxs(Ie, { "data-test-ink-page-header": !0, direction: "column", spacing: 2, sx: {
+    position: l,
     borderBottom: 1,
     borderColor: "divider",
     px: 3,
     py: 3,
     ...a && { pb: -3 },
     ...s
-  }, children: [d.jsxs(Ie, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", sx: { minHeight: 36 }, children: [d.jsxs(Ie, { direction: "row", spacing: 1, alignItems: "center", children: [e, o] }), i] }), n, t, a] }) });
+  }, children: [d.jsxs(Ie, { direction: "row", spacing: 2, sx: {
+    justifyContent: "space-between",
+    alignItems: "center",
+    minHeight: 36
+  }, children: [d.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", spacing: 1, children: [e, o] }), i] }), n, t, a] }) });
 }
 const Kx = {
   ".MuiBreadcrumbs-separator": {
@@ -13109,7 +13119,7 @@ function Yx({ label: e }) {
   return d.jsx(Ue, { "data-cy": "page-title", variant: "h5", component: "h1", sx: { wordBreak: "break-word", fontWeight: "600", color: "text.primary" }, children: e });
 }
 function Xx({ breadcrumb: e, i: t, onClick: n }) {
-  return d.jsx(Qf, { href: e.path, ...e.LinkProps, underline: "hover", "data-cy": `breadcrumb-${t}`, variant: "h5", color: "action.active", onClick: n, children: e.label });
+  return d.jsx(Qf, { sx: { color: "action.active" }, href: e.path, ...e.LinkProps, underline: "hover", "data-cy": `breadcrumb-${t}`, variant: "h5", onClick: n, children: e.label });
 }
 function xj({ breadcrumbs: e }) {
   return d.jsx(Jf, { sx: Kx, "data-test-ink-page-header-breadcrumbs": !0, children: e?.map((t, n) => n === e.length - 1 ? d.jsx(Yx, { label: t.label }, `breadcrumb-${n}`) : d.jsx(Xx, { breadcrumb: t, i: n, onClick: t.onClick }, `breadcrumb-${n}`)) });
@@ -13138,7 +13148,7 @@ function Tj({ primaryAction: e, secondaryAction: t, dropdownAction: n }) {
   }, ...y, children: f }, h))] })] })] }), t && d.jsx($t, { "data-cy": "secondary", variant: "contained", color: "inherit", ...t, children: t.label }), e && d.jsx($t, { "data-cy": "primary", variant: "contained", ...e, sx: { whiteSpace: "nowrap" }, children: e.label })] });
 }
 function Jx({ subtitle: e, sx: t, ...n }) {
-  return d.jsx(Ue, { variant: "body2", color: "text.secondary", "data-cy": "header-subtitle", sx: { ...t }, ...n, children: e });
+  return d.jsx(Ue, { variant: "body2", "data-cy": "header-subtitle", sx: { color: "text.secondary", ...t }, ...n, children: e });
 }
 function Cj({ label: e, Stepper: t, ButtonGroup: n, subtitle: o }) {
   const i = (a) => typeof a == "object" && a !== null && ("primary" in a || "close" in a);
@@ -13147,7 +13157,11 @@ function Cj({ label: e, Stepper: t, ButtonGroup: n, subtitle: o }) {
     py: 2.25,
     borderBottom: "1px solid",
     borderBottomColor: "neutral200"
-  }, children: ({ position: a }) => d.jsxs(Ie, { position: a, direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [d.jsx(Ue, { "data-test-ink-workflow-header-label": !0, variant: "h6", sx: { fontWeight: "600", flexGrow: "1" }, children: d.jsxs(Ie, { direction: "column", spacing: 0, children: [e, o && d.jsx(Jx, { component: "span", subtitle: o })] }) }), t && d.jsx(Me, { sx: { flexGrow: "2" }, "data-test-ink-workflow-header-stepper": !0, children: t }), n && d.jsx(Me, { sx: { flexGrow: "1", justifyContent: "end", display: "flex" }, "data-test-ink-workflow-header-button-group": !0, children: i(n) ? d.jsxs(Ie, { direction: "row", spacing: 1, children: [n.primary && d.jsx($t, { variant: "contained", endIcon: n.primary.loading ? d.jsx(Ks, { 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 && d.jsx(no, { onClick: n.close.onClick, "data-test-ink-workflow-header-close-action": !0, children: d.jsx(nr, { children: "close_rounded" }) })] }) : n })] }) });
+  }, children: ({ position: a }) => d.jsxs(Ie, { sx: {
+    position: a,
+    justifyContent: "space-between",
+    alignItems: "center"
+  }, direction: "row", spacing: 2, children: [d.jsx(Ue, { "data-test-ink-workflow-header-label": !0, variant: "h6", sx: { fontWeight: "600", flexGrow: "1" }, children: d.jsxs(Ie, { direction: "column", spacing: 0, children: [e, o && d.jsx(Jx, { component: "span", subtitle: o })] }) }), t && d.jsx(Me, { sx: { flexGrow: "2" }, "data-test-ink-workflow-header-stepper": !0, children: t }), n && d.jsx(Me, { sx: { flexGrow: "1", justifyContent: "end", display: "flex" }, "data-test-ink-workflow-header-button-group": !0, children: i(n) ? d.jsxs(Ie, { direction: "row", spacing: 1, children: [n.primary && d.jsx($t, { variant: "contained", endIcon: n.primary.loading ? d.jsx(Ks, { 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 && d.jsx(no, { onClick: n.close.onClick, "data-test-ink-workflow-header-close-action": !0, children: d.jsx(nr, { children: "close_rounded" }) })] }) : n })] }) });
 }
 const Uo = Db({
   createStyledComponent: J("div", {
@@ -13462,7 +13476,7 @@ function wj({ Header: e, Description: t, Icon: n, CTA: o, children: i, shouldSho
     flexBasis: "100%",
     overflow: "hidden",
     textOverflow: "ellipsis"
-  }, children: [typeof e != "string" ? d.jsx(d.Fragment, { children: e }) : d.jsx(vn, { "data-test": "ink-paper-header", variant: "subtitle1", color: "text.primary", component: "strong", fontWeight: 600, children: e }), t && d.jsx(d.Fragment, { children: typeof t != "string" ? t : d.jsx(vn, { "data-test": "ink-paper-description", variant: "caption", color: "text.secondary", noWrap: !a, children: t }) })] }), o] }), u()] });
+  }, children: [typeof e != "string" ? d.jsx(d.Fragment, { children: e }) : d.jsx(vn, { sx: { color: "text.primary", fontWeight: 600 }, "data-test": "ink-paper-header", variant: "subtitle1", component: "strong", children: e }), t && d.jsx(d.Fragment, { children: typeof t != "string" ? t : d.jsx(vn, { sx: { color: "text.secondary" }, "data-test": "ink-paper-description", variant: "caption", noWrap: !a, children: t }) })] }), o] }), u()] });
 }
 const yl = (e) => e.scrollTop;
 function or(e, t) {
@@ -14437,10 +14451,28 @@ const Oj = ({ name: e, options: t, value: n, ref: o, direction: i = "row", cardS
       borderRadius: 1,
       outlineColor: (R) => m(n === g, R.palette.primary.dark, R.palette.neutral200, R.palette.neutral200, S),
       ...a
-    }, children: [d.jsxs(Ie, { direction: "column", alignItems: "center", width: "100%", children: [y && d.jsx(Me, { sx: {
+    }, children: [d.jsxs(Ie, { sx: { alignItems: "center", width: "100%" }, direction: "column", children: [y && d.jsx(Me, { sx: {
       color: S ? "neutral500" : n === g ? "text.primary" : "action.active",
       ".MuiSvgIcon-root": { fontSize: "2rem" }
-    }, children: y }), d.jsx(Ue, { variant: "subtitle1", textAlign: "center", lineHeight: "20px", mt: 0.5, color: S ? n === g ? "text.secondary" : "neutral500" : "text.primary", children: h }), T && d.jsx(Ue, { variant: "body2", textAlign: "center", mt: 1, color: `${S ? "neutral500" : "text.secondary"}`, children: T }), w && d.jsx(Ue, { variant: "body2", color: `${S ? "neutral500" : "text.secondary"}`, textAlign: "center", mt: 1, children: w })] }), v && d.jsx(Me, { mt: 2, display: "flex", justifyContent: "center", minHeight: f ? "24px" : 0, children: v })] });
+    }, children: y }), d.jsx(Ue, { sx: {
+      textAlign: "center",
+      lineHeight: "20px",
+      mt: 0.5,
+      color: S ? n === g ? "text.secondary" : "neutral500" : "text.primary"
+    }, variant: "subtitle1", children: h }), T && d.jsx(Ue, { sx: {
+      textAlign: "center",
+      mt: 1,
+      color: `${S ? "neutral500" : "text.secondary"}`
+    }, variant: "body2", children: T }), w && d.jsx(Ue, { sx: {
+      color: `${S ? "neutral500" : "text.secondary"}`,
+      textAlign: "center",
+      mt: 1
+    }, variant: "body2", children: w })] }), v && d.jsx(Me, { sx: {
+      mt: 2,
+      display: "flex",
+      justifyContent: "center",
+      minHeight: f ? "24px" : 0
+    }, children: v })] });
     return d.jsx(Ys, { value: g, disabled: S, control: d.jsx(em, { sx: { display: "none" } }), sx: {
       width: s ? "100%" : "auto",
       ".MuiFormControlLabel-label": {
@@ -14630,7 +14662,19 @@ const Zc = {
 function Rj({ title: e, description: t, action: n, variant: o, icon: i, isLongLoading: a, sx: s }) {
   a && (e = e || ns.title, t = t || ns.description, i = i || ns.icon);
   const l = o === "search" ? "neutral00" : "neutral50", c = O1[o], { fontSize: u, fontSizeDescription: p, titleVariant: m, descriptionVariant: f } = c, g = (y) => !!y && "onClick" in y;
-  return d.jsxs(Ie, { alignItems: "center", justifyContent: "center", textAlign: "center", "data-cy": `empty-state-${o}-${a ? "long-loading-" : ""}container`, sx: { backgroundColor: l, p: 5, ...s }, children: [i && d.jsx(S1, { icon: i, variant: o }), e && d.jsx(Ue, { variant: m, sx: { fontSize: u }, "data-cy": "empty-state-title", children: d.jsx("strong", { children: e }) }), d.jsx(Ue, { variant: f, color: "text.secondary", sx: { fontSize: p, maxWidth: "500px", mt: 1 }, "data-cy": "empty-state-description", children: t }), n && d.jsx(Me, { mt: 3, children: g(n) ? d.jsx($t, { onClick: n.onClick, "data-cy": "empty-state-action-button", children: n.title }) : n })] });
+  return d.jsxs(Ie, { "data-cy": `empty-state-${o}-${a ? "long-loading-" : ""}container`, sx: {
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    backgroundColor: l,
+    p: 5,
+    ...s
+  }, children: [i && d.jsx(S1, { icon: i, variant: o }), e && d.jsx(Ue, { variant: m, sx: { fontSize: u }, "data-cy": "empty-state-title", children: d.jsx("strong", { children: e }) }), d.jsx(Ue, { variant: f, sx: {
+    color: "text.secondary",
+    fontSize: p,
+    maxWidth: "500px",
+    mt: 1
+  }, "data-cy": "empty-state-description", children: t }), n && d.jsx(Me, { sx: { mt: 3 }, children: g(n) ? d.jsx($t, { onClick: n.onClick, "data-cy": "empty-state-action-button", children: n.title }) : n })] });
 }
 function E1(e) {
   return Se("MuiFormLabel", e);
@@ -16874,7 +16918,7 @@ function $j(e) {
       ...f
     },
     variant: "outlined"
-  }, anchor: "left", open: is(e) ? e.isOpen : !0, variant: t === "panel" ? "permanent" : "persistent", ...g, children: d.jsxs(Ie, { height: "100%", justifyContent: "space-between", children: [d.jsxs(Ie, { direction: "column", spacing: 3, sx: { p: 2 }, children: [d.jsxs(Ie, { direction: "row", alignItems: "center", children: [d.jsxs(Ie, { direction: "row", alignItems: "center", children: [y && d.jsx(cT, { Icon: y }), d.jsx(Ue, { sx: { ml: y && 1 }, "data-cy": "drawer-header", children: i })] }), is(e) && d.jsx(Xi, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
+  }, anchor: "left", open: is(e) ? e.isOpen : !0, variant: t === "panel" ? "permanent" : "persistent", ...g, children: d.jsxs(Ie, { sx: { height: "100%", justifyContent: "space-between" }, children: [d.jsxs(Ie, { direction: "column", spacing: 3, sx: { p: 2 }, children: [d.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", children: [d.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", children: [y && d.jsx(cT, { Icon: y }), d.jsx(Ue, { sx: { ml: y && 1 }, "data-cy": "drawer-header", children: i })] }), is(e) && d.jsx(Xi, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
     popper: {
       modifiers: [
         {
@@ -16890,20 +16934,29 @@ function $j(e) {
     width: "40px",
     height: "40px",
     zIndex: (T) => T.zIndex.tooltip
-  }, children: d.jsx(nr, { fontSize: "small", children: "close_icon" }) }) })] }), n] }), o && d.jsx(Me, { "data-cy": "bottom-filter", sx: {
+  }, children: d.jsx(nr, { sx: { fontSize: "small" }, children: "close_icon" }) }) })] }), n] }), o && d.jsx(Me, { "data-cy": "bottom-filter", sx: {
     px: 2,
     py: 1,
     borderTop: "1px solid",
     borderColor: "neutral200"
   }, children: o })] }) }), d.jsx(uT, { component: "main", open: is(e) ? e.isOpen : !0, drawerWidth: h, ...m, children: p })] });
 }
-const dT = ({ iconComponent: e, isDragging: t = !1, "data-cy": n }) => e ? d.jsx(Ie, { justifyContent: "center", alignItems: "center", width: t ? 24 : 32, height: t ? 24 : 32, sx: {
+const dT = ({ iconComponent: e, isDragging: t = !1, "data-cy": n }) => e ? d.jsx(Ie, { sx: {
+  justifyContent: "center",
+  alignItems: "center",
+  width: t ? 24 : 32,
+  height: t ? 24 : 32,
   backgroundColor: (o) => o.palette.neutral00,
   borderRadius: 1,
   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: d.jsx(e, { size: t ? "small" : "normal" }) }) : null, Ij = to(({ label: e, icon: t, description: n, disabled: o = !1, isDynamic: i = !1, isDragging: a = !1, fullWidth: s = !1, "data-cy": l, sx: c, ...u }, p) => {
   const m = l || "tile", f = `${m}-label`, g = `${m}-description`, y = `${m}-icon`;
-  return d.jsxs(Ie, { ref: p, direction: "row", alignItems: "center", gap: a ? 2.5 : 1.5, py: 1, px: a ? 1 : 1.5, pr: a ? 2 : void 0, sx: {
+  return d.jsxs(Ie, { ref: p, direction: "row", sx: {
+    alignItems: "center",
+    gap: a ? 2.5 : 1.5,
+    py: 1,
+    px: a ? 1 : 1.5,
+    pr: a ? 2 : void 0,
     cursor: o ? "not-allowed" : "grab",
     backgroundColor: (h) => h.palette.neutral100,
     borderRadius: 1,
@@ -16917,12 +16970,20 @@ const dT = ({ iconComponent: e, isDragging: t = !1, "data-cy": n }) => e ? d.jsx
       backgroundColor: o ? (h) => h.palette.neutral100 : (h) => h.palette.neutral200
     },
     ...c
-  }, "data-cy": l, ...u, children: [t && d.jsx(dT, { iconComponent: t, isDragging: a, "data-cy": y }), d.jsxs(Me, { flex: 1, children: [d.jsxs(Ie, { direction: "row", alignItems: "center", gap: 0.5, children: [d.jsx(Ue, { variant: "caption", display: "block", color: o ? "text.disabled" : "text.primary", fontWeight: a ? 400 : 600, "data-cy": f, children: e }), i && !a && d.jsx(xm, { sx: {
+  }, "data-cy": l, ...u, children: [t && d.jsx(dT, { iconComponent: t, isDragging: a, "data-cy": y }), d.jsxs(Me, { sx: { flex: 1 }, children: [d.jsxs(Ie, { sx: { alignItems: "center", gap: 0.5 }, direction: "row", children: [d.jsx(Ue, { sx: {
+    display: "block",
+    color: o ? "text.disabled" : "text.primary",
+    fontWeight: a ? 400 : 600
+  }, variant: "caption", "data-cy": f, children: e }), i && !a && d.jsx(xm, { sx: {
     fontSize: 16,
     width: 16,
     height: 16,
     color: (h) => h.palette.purple200
-  }, "data-cy": "dynamic-indicator" })] }), n && !a && d.jsx(Ue, { variant: "caption", display: "block", color: o ? "text.disabled" : "text.secondary", fontSize: 12, "data-cy": g, children: n })] })] });
+  }, "data-cy": "dynamic-indicator" })] }), n && !a && d.jsx(Ue, { sx: {
+    display: "block",
+    color: o ? "text.disabled" : "text.secondary",
+    fontSize: 12
+  }, variant: "caption", "data-cy": g, children: n })] })] });
 }), Aj = ({ children: e, maxSnack: t = 3, anchorOrigin: n = {
   horizontal: "center",
   vertical: "bottom"
@@ -24925,7 +24986,7 @@ const rf = nt(/* @__PURE__ */ d.jsx("path", {
 function Fj({ message: e, sx: t, messageSx: n }) {
   return d.jsx(nd, { severity: "info", "data-cy": "internal-user-only-alert", sx: { alignItems: "center", ...t }, iconMapping: {
     info: d.jsx(rf, {})
-  }, children: d.jsxs(Ie, { direction: "row", gap: 1, alignItems: "center", children: [d.jsx(Op, { sx: { color: "text.secondary" } }), d.jsx(Ie, { children: "-" }), d.jsx(Ue, { variant: "body2", sx: n, "data-cy": "internal-user-only-alert-message", children: e || "This page has limited access to internal users only." })] }) });
+  }, children: d.jsxs(Ie, { sx: { gap: 1, alignItems: "center" }, direction: "row", children: [d.jsx(Op, { sx: { color: "text.secondary" } }), d.jsx(Ie, { children: "-" }), d.jsx(Ue, { variant: "body2", sx: n, "data-cy": "internal-user-only-alert-message", children: e || "This page has limited access to internal users only." })] }) });
 }
 function Bw() {
   this.__data__ = [], this.size = 0;
@@ -25683,7 +25744,7 @@ function zj({ chartOptions: e, type: t, data: n, customColors: o, height: i = 20
     }
   }, f = o || p, g = kP(aP(m), e), y = f.reduce((w, O) => (w[O] = 0, w), {}), h = (w) => f[w % f.length];
   if (a)
-    return d.jsx(_o, { "data-test": "chart-loading-skeleton", animation: "wave", variant: "rounded", width: "100%", height: i });
+    return d.jsx(_o, { sx: { width: "100%", height: i }, "data-test": "chart-loading-skeleton", animation: "wave", variant: "rounded" });
   if (!n)
     return;
   const T = { width: "100%", height: i, maxHeight: i };
@@ -25767,13 +25828,21 @@ function Wj({ checkboxProps: e, title: t, avatar: n, size: o = "medium", subhead
       color: "text.secondary"
     }
   } }), h = m || a || l && !f;
-  return d.jsxs(Ie, { children: [h && d.jsxs(Ie, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mt: 1, mb: 1, mr: 1 }, children: [d.jsx(Ie, { direction: "row", flex: 1, alignItems: "center", children: m && d.jsx(Ys, { sx: { ml: 0.5 }, control: d.jsx(rd, { size: "small", "data-cy": "inkcardheader-selection-checkbox", ...e, disabled: c ?? e?.disabled }), label: d.jsx(Me, { component: "span", sx: vh, children: t }) }) }), d.jsxs(Ie, { direction: "row", spacing: 1, alignItems: "center", children: [a && d.jsx(Me, { sx: { pr: l ? 0 : 1 }, children: a }), l && !f && g] })] }), y()] });
+  return d.jsxs(Ie, { children: [h && d.jsxs(Ie, { direction: "row", sx: {
+    alignItems: "center",
+    justifyContent: "space-between",
+    mt: 1,
+    mb: 1,
+    mr: 1
+  }, children: [d.jsx(Ie, { sx: { flex: 1, alignItems: "center" }, direction: "row", children: m && d.jsx(Ys, { sx: { ml: 0.5 }, control: d.jsx(rd, { size: "small", "data-cy": "inkcardheader-selection-checkbox", ...e, disabled: c ?? e?.disabled }), label: d.jsx(Me, { component: "span", sx: vh, children: t }) }) }), d.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", spacing: 1, children: [a && d.jsx(Me, { sx: { pr: l ? 0 : 1 }, children: a }), l && !f && g] })] }), y()] });
 }
 const MP = nt(/* @__PURE__ */ d.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"
 }), "Image");
 function NP() {
-  return d.jsxs(d.Fragment, { children: [d.jsx(_o, { variant: "rectangular", width: "100%", height: "100%", animation: "wave", sx: {
+  return d.jsxs(d.Fragment, { children: [d.jsx(_o, { variant: "rectangular", animation: "wave", sx: {
+    width: "100%",
+    height: "100%",
     position: "absolute",
     top: 0,
     left: 0,
@@ -25903,11 +25972,20 @@ function FP({ columnData: e, handleColumnFilterChange: t, customGridVisibility:
     paddingBottom: 0
   }, children: d.jsx(Ys, { control: d.jsx(rd, { checked: n[v], onChange: (S) => y(S.target.checked, v) }), label: x, sx: {
     display: i?.includes(v) ? "none" : void 0
-  } }) }, v)) }), d.jsx(mm, { sx: { position: "sticky", bottom: 0, zIndex: 1, padding: 0 }, variant: "outlined", children: d.jsxs(Ie, { flexDirection: "row", justifyContent: "space-between", sx: { mx: 1.5, py: 1 }, children: [d.jsx($t, { onClick: h, children: "Deselect all" }), d.jsx($t, { onClick: T, children: "Select all" })] }) })] })] });
+  } }) }, v)) }), d.jsx(mm, { sx: { position: "sticky", bottom: 0, zIndex: 1, padding: 0 }, variant: "outlined", children: d.jsxs(Ie, { sx: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    mx: 1.5,
+    py: 1
+  }, children: [d.jsx($t, { onClick: h, children: "Deselect all" }), d.jsx($t, { onClick: T, children: "Select all" })] }) })] })] });
 }
 function qj({ groupingProps: e, filterDrawerBtnProps: t, showFilterDrawerBtn: n = !1, showQuickFilter: o = !0, showExportButton: i = !1, showDensitySelector: a = !1, onExportClick: s, loadingExport: l, columnPickerProps: c, children: u, py: p = 2 }) {
   const { value: m, onChange: f, options: g } = e ?? {};
-  return d.jsx(Dm, { sx: { py: p }, children: d.jsxs(Ie, { direction: "column", sx: { width: "100%" }, children: [d.jsxs(Ie, { justifyContent: o ? "space-between" : "end", alignItems: "center", direction: "row", width: "100%", children: [d.jsxs(Ie, { direction: "row", spacing: 2, alignItems: "center", children: [o && d.jsx(Bm, { sx: {
+  return d.jsx(Dm, { sx: { py: p }, children: d.jsxs(Ie, { direction: "column", sx: { width: "100%" }, children: [d.jsxs(Ie, { sx: {
+    justifyContent: o ? "space-between" : "end",
+    alignItems: "center",
+    width: "100%"
+  }, direction: "row", children: [d.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", spacing: 2, children: [o && d.jsx(Bm, { sx: {
     ".MuiInputBase-input": { p: 0 },
     ".MuiInput-root:after": { borderBottom: "none" }
   }, "data-cy": "grid-tool-bar-quick-filter" }), n && t && d.jsx(hm, { badgeContent: t.filterBtnBadgeContent, color: "primary", "data-cy": "grid-tool-bar-filter-badge", children: d.jsx(_P, { onClick: t.onShowFilterDrawerClick }) })] }), d.jsxs(Ie, { direction: "row", spacing: 1, children: [a && d.jsx(Fm, { slotProps: { button: { size: "small" } } }), c && d.jsx(FP, { columnData: c.columnData, handleColumnFilterChange: c.handleColumnFilterChange, customGridVisibility: c.customGridVisibility, lockedFields: c.lockedFields, hiddenInColumnPicker: c.hiddenInColumnPicker }), i && d.jsx(zm, { slotProps: { button: { size: "small" } } }), m !== void 0 && f && g && d.jsx(DP, { value: m, onChange: f, options: g }), s && d.jsx(LP, { onClick: s, loadingExport: l })] })] }), u] }) });
@@ -25930,7 +26008,7 @@ function Yj({ testSelector: e = "", emptyColumns: t }) {
 function Xj(e) {
   return e.map((n) => ({
     ...n,
-    renderCell: () => d.jsx(_o, { variant: "rectangular", height: 30, width: "100%" })
+    renderCell: () => d.jsx(_o, { sx: { height: 30, width: "100%" }, variant: "rectangular" })
   }));
 }
 function VP({ value: e, wordBreak: t = "break-word", textAlign: n = "left", sx: o = {} }) {
@@ -26328,13 +26406,13 @@ const UP = nt(/* @__PURE__ */ d.jsx("path", {
 }, Yo = "—";
 function GP({ trend: e }) {
   const t = e.direction === "up", n = t ? UP : HP, o = t ? B.greenA700 : B.error.main;
-  return d.jsxs(Ie, { direction: "row", alignItems: "center", spacing: 0.25, sx: { color: o }, children: [d.jsx(n, { sx: { fontSize: "1rem" } }), d.jsx(Ue, { variant: "body2", fontWeight: 500, sx: { color: o }, children: e.value })] });
+  return d.jsxs(Ie, { direction: "row", spacing: 0.25, sx: { alignItems: "center", color: o }, children: [d.jsx(n, { sx: { fontSize: "1rem" } }), d.jsx(Ue, { variant: "body2", sx: { fontWeight: 500, color: o }, children: e.value })] });
 }
 function qP({ primaryMetric: e, graph: t, isEmpty: n }) {
-  return d.jsxs(Ie, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", children: [d.jsxs(Me, { children: [d.jsxs(Ie, { direction: "row", alignItems: "center", spacing: 1, children: [d.jsx(Ue, { variant: "h4", fontWeight: 700, lineHeight: 1.2, children: n ? Yo : e.value }), !n && e.trend && d.jsx(GP, { trend: e.trend })] }), d.jsx(Ue, { variant: "body2", color: "text.secondary", children: e.label })] }), t && !n && d.jsx(Me, { sx: { flexShrink: 0 }, children: t })] });
+  return d.jsxs(Ie, { sx: { justifyContent: "space-between", alignItems: "flex-start" }, direction: "row", children: [d.jsxs(Me, { children: [d.jsxs(Ie, { sx: { alignItems: "center" }, direction: "row", spacing: 1, children: [d.jsx(Ue, { sx: { fontWeight: 700, lineHeight: 1.2 }, variant: "h4", children: n ? Yo : e.value }), !n && e.trend && d.jsx(GP, { trend: e.trend })] }), d.jsx(Ue, { sx: { color: "text.secondary" }, variant: "body2", children: e.label })] }), t && !n && d.jsx(Me, { sx: { flexShrink: 0 }, children: t })] });
 }
 function KP({ metrics: e, isEmpty: t }) {
-  return d.jsx(Ie, { direction: "row", divider: d.jsx(od, { orientation: "vertical", flexItem: !0 }), spacing: 2, children: e.slice(0, 3).map((n, o) => d.jsxs(Me, { children: [d.jsx(Ue, { variant: "body1", fontWeight: 700, children: t ? Yo : n.value }), d.jsx(Ue, { variant: "body2", color: "text.secondary", children: n.label })] }, o)) });
+  return d.jsx(Ie, { direction: "row", divider: d.jsx(od, { orientation: "vertical", flexItem: !0 }), spacing: 2, children: e.slice(0, 3).map((n, o) => d.jsxs(Me, { children: [d.jsx(Ue, { sx: { fontWeight: 700 }, variant: "body1", children: t ? Yo : n.value }), d.jsx(Ue, { sx: { color: "text.secondary" }, variant: "body2", children: n.label })] }, o)) });
 }
 function YP({ directIndirect: e, isEmpty: t }) {
   const { directPercent: n, directLabel: o = "Direct", indirectLabel: i = "Indirect" } = e, a = 100 - n;
@@ -26347,12 +26425,12 @@ function YP({ directIndirect: e, isEmpty: t }) {
     width: t ? "0%" : `${n}%`,
     bgcolor: B.primary.main,
     transition: "width 0.3s"
-  } }), d.jsx(Me, { sx: { flex: 1, bgcolor: B.blue200 } })] }), d.jsxs(Ie, { direction: "row", justifyContent: "space-between", mt: 0.5, children: [d.jsxs(Ue, { variant: "body2", children: [d.jsx("strong", { children: t ? Yo : `${n}%` }), " ", d.jsx(Ue, { component: "span", variant: "body2", color: "text.secondary", children: o })] }), d.jsxs(Ue, { variant: "body2", children: [d.jsx("strong", { children: t ? Yo : `${a}%` }), " ", d.jsx(Ue, { component: "span", variant: "body2", color: "text.secondary", children: i })] })] })] });
+  } }), d.jsx(Me, { sx: { flex: 1, bgcolor: B.blue200 } })] }), d.jsxs(Ie, { sx: { justifyContent: "space-between", mt: 0.5 }, direction: "row", children: [d.jsxs(Ue, { variant: "body2", children: [d.jsx("strong", { children: t ? Yo : `${n}%` }), " ", d.jsx(Ue, { sx: { color: "text.secondary" }, component: "span", variant: "body2", children: o })] }), d.jsxs(Ue, { variant: "body2", children: [d.jsx("strong", { children: t ? Yo : `${a}%` }), " ", d.jsx(Ue, { sx: { color: "text.secondary" }, component: "span", variant: "body2", children: i })] })] })] });
 }
 function ek(e) {
   const { isEmpty: t, sx: n } = e;
   if (e.variant === "simple") {
-    const { metric: c, href: u, onClick: p } = e, m = !!(u || p), f = d.jsxs(d.Fragment, { children: [d.jsx(Ue, { variant: "h6", fontWeight: 700, children: t ? Yo : c.value }), d.jsx(Ue, { variant: "body2", color: "text.secondary", children: c.label })] });
+    const { metric: c, href: u, onClick: p } = e, m = !!(u || p), f = d.jsxs(d.Fragment, { children: [d.jsx(Ue, { sx: { fontWeight: 700 }, variant: "h6", children: t ? Yo : c.value }), d.jsx(Ue, { sx: { color: "text.secondary" }, variant: "body2", children: c.label })] });
     return d.jsx($i, { variant: "outlined", sx: { pb: 0, ...n }, "data-cy": "ink-metric-card", "data-cy-variant": "simple", children: m ? d.jsx(gm, { component: u ? "a" : "button", href: u, onClick: p, sx: {
       p: 2,
       borderRadius: "inherit",
@@ -26360,7 +26438,7 @@ function ek(e) {
     }, "data-cy": "ink-metric-card-content", children: f }) : d.jsx(Me, { 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 d.jsx($i, { variant: "outlined", sx: n, "data-cy": "ink-metric-card", "data-cy-variant": e.variant, children: d.jsx(Me, { sx: { p: 2 }, children: d.jsxs(Ie, { spacing: 2, children: [d.jsx(Ue, { variant: "overline", color: "text.secondary", sx: { lineHeight: 1 }, "data-cy": "ink-metric-card-title", children: o }), d.jsx(qP, { primaryMetric: i, graph: s, isEmpty: t }), a && a.length > 0 && d.jsx(KP, { metrics: a, isEmpty: t }), l && d.jsx(YP, { directIndirect: l, isEmpty: t })] }) }) });
+  return d.jsx($i, { variant: "outlined", sx: n, "data-cy": "ink-metric-card", "data-cy-variant": e.variant, children: d.jsx(Me, { sx: { p: 2 }, children: d.jsxs(Ie, { spacing: 2, children: [d.jsx(Ue, { variant: "overline", sx: { color: "text.secondary", lineHeight: 1 }, "data-cy": "ink-metric-card-title", children: o }), d.jsx(qP, { primaryMetric: i, graph: s, isEmpty: t }), a && a.length > 0 && d.jsx(KP, { metrics: a, isEmpty: t }), l && d.jsx(YP, { directIndirect: l, isEmpty: t })] }) }) });
 }
 const ct = $b({
   createStyledComponent: J("div", {
@@ -26516,16 +26594,16 @@ function rk({ Header: e, children: t, sx: n, itemProps: o, ...i }) {
 }
 function XP({ children: e, itemProps: t, containerProps: n }) {
   const o = { xs: 12, lg: 10 };
-  return d.jsx(jo, { container: !0, justifyContent: "center", "data-cy": "full-content-layout-container", ...n, children: d.jsx(jo, { container: !0, justifyContent: "center", direction: "column", "data-cy": "full-content-layout-content", size: t?.size || o, ...t, children: e }) });
+  return d.jsx(jo, { sx: { justifyContent: "center" }, container: !0, "data-cy": "full-content-layout-container", ...n, children: d.jsx(jo, { sx: { justifyContent: "center" }, container: !0, direction: "column", "data-cy": "full-content-layout-content", size: t?.size || o, ...t, children: e }) });
 }
 function ok({ children: e, itemProps: t, containerProps: n }) {
-  return d.jsx(ct, { container: !0, justifyContent: "center", "data-cy": "eight-column-layout-container", ...n, children: d.jsx(ct, { container: !0, justifyContent: "center", direction: "column", "data-cy": "eight-column-layout-content", size: {
+  return d.jsx(ct, { sx: { justifyContent: "center" }, container: !0, "data-cy": "eight-column-layout-container", ...n, children: d.jsx(ct, { sx: { justifyContent: "center" }, container: !0, direction: "column", "data-cy": "eight-column-layout-content", size: {
     xs: 12,
     lg: 8
   }, ...t, children: e }) });
 }
 function ik({ children: e, itemProps: t, containerProps: n }) {
-  return d.jsx(ct, { container: !0, justifyContent: "center", "data-cy": "ten-column-layout-container", ...n, children: d.jsx(ct, { "data-cy": "ten-column-layout-content", size: {
+  return d.jsx(ct, { sx: { justifyContent: "center" }, container: !0, "data-cy": "ten-column-layout-container", ...n, children: d.jsx(ct, { "data-cy": "ten-column-layout-content", size: {
     xs: 12,
     lg: 10
   }, ...t, children: e }) });
@@ -26538,10 +26616,10 @@ function ak({ children: e, containerProps: t, itemProps: n }) {
 }
 function JP({ containerProps: e, leftContent: t, rightContent: n, leftProps: o, rightProps: i }) {
   const a = { xs: 12, lg: 6 };
-  return d.jsxs(jo, { container: !0, justifyContent: "center", spacing: 2, "data-cy": "split-content-layout-container", ...e, children: [d.jsx(jo, { "data-cy": "left-content", size: o?.size || a, ...o, children: t }), d.jsx(jo, { "data-cy": "right-content", size: i?.size || a, ...i, children: n })] });
+  return d.jsxs(jo, { sx: { justifyContent: "center" }, container: !0, spacing: 2, "data-cy": "split-content-layout-container", ...e, children: [d.jsx(jo, { "data-cy": "left-content", size: o?.size || a, ...o, children: t }), d.jsx(jo, { "data-cy": "right-content", size: i?.size || a, ...i, children: n })] });
 }
 function sk({ leftContent: e, rightContent: t, containerProps: n, leftProps: o, rightProps: i }) {
-  return d.jsxs(ct, { container: !0, justifyContent: "center", spacing: 2, "data-cy": "five-three-layout-grid", ...n, children: [d.jsx(ct, { "data-cy": "five-three-left-grid", size: {
+  return d.jsxs(ct, { sx: { justifyContent: "center" }, container: !0, spacing: 2, "data-cy": "five-three-layout-grid", ...n, children: [d.jsx(ct, { "data-cy": "five-three-left-grid", size: {
     xs: 12,
     lg: 5
   }, ...o, children: e }), d.jsx(ct, { "data-cy": "five-three-right-grid", size: {
@@ -26550,7 +26628,7 @@ function sk({ leftContent: e, rightContent: t, containerProps: n, leftProps: o,
   }, ...i, children: t })] });
 }
 function lk({ leftContent: e, rightContent: t, containerProps: n, leftProps: o, rightProps: i }) {
-  return d.jsxs(ct, { container: !0, justifyContent: "center", spacing: 2, "data-cy": "seven-three-layout-grid", ...n, children: [d.jsx(ct, { "data-cy": "seven-three-left-grid", size: {
+  return d.jsxs(ct, { sx: { justifyContent: "center" }, container: !0, spacing: 2, "data-cy": "seven-three-layout-grid", ...n, children: [d.jsx(ct, { "data-cy": "seven-three-left-grid", size: {
     xs: 12,
     lg: 7
   }, ...o, children: e }), d.jsx(ct, { "data-cy": "seven-three-right-grid", size: {
@@ -26568,7 +26646,19 @@ function ck({ leftContent: e, rightContent: t, containerProps: n, leftProps: o,
   } });
 }
 function uk({ children: e, panelContent: t, wrapperProps: n, panelProps: o, containerProps: i, itemProps: a }) {
-  return d.jsxs(Me, { display: "flex", width: "100%", minHeight: "100vh", sx: { backgroundColor: (s) => s.palette.neutral100 }, "data-cy": "panel-paper-layout-wrapper", ...n, children: [d.jsx(Me, { flexShrink: 0, width: { xs: "100%", lg: 320 }, height: "100vh", overflow: "auto", bgcolor: "white", p: 3, "data-cy": "panel-paper-layout", ...o, children: t }), d.jsx(Me, { flexGrow: 1, overflow: "auto", height: "100vh", children: d.jsx(ct, { container: !0, justifyContent: "center", "data-cy": "panel-paper-layout-container", ...i, children: d.jsx(ct, { "data-cy": "panel-paper-layout-content", size: {
+  return d.jsxs(Me, { sx: {
+    display: "flex",
+    width: "100%",
+    minHeight: "100vh",
+    backgroundColor: (s) => s.palette.neutral100
+  }, "data-cy": "panel-paper-layout-wrapper", ...n, children: [d.jsx(Me, { sx: {
+    flexShrink: 0,
+    width: { xs: "100%", lg: 320 },
+    height: "100vh",
+    overflow: "auto",
+    bgcolor: "white",
+    p: 3
+  }, "data-cy": "panel-paper-layout", ...o, children: t }), d.jsx(Me, { sx: { flexGrow: 1, overflow: "auto", height: "100vh" }, children: d.jsx(ct, { sx: { justifyContent: "center" }, container: !0, "data-cy": "panel-paper-layout-container", ...i, children: d.jsx(ct, { "data-cy": "panel-paper-layout-content", size: {
     xs: 12,
     lg: 8
   }, ...a, children: e }) }) })] });
@@ -27211,7 +27301,7 @@ Hs.renderStatic = Hs.rewind;
 const dk = ({ title: e, addTitleSuffix: t = !0, description: n, children: o }) => {
   const i = e + (t ? " | Movable Ink" : "");
   return d.jsxs(d.Fragment, { children: [d.jsxs(Hs, { children: [!!e && d.jsx("title", { children: i }), !!n && d.jsx("meta", { name: "description", content: n })] }), o] });
-}, pk = ({ skeletonRows: e, skeletonColumns: t }) => d.jsx(d.Fragment, { children: Array.from({ length: e }).map((n, o) => d.jsx(ct, { container: !0, spacing: 2, sx: { mb: 2 }, children: Array.from({ length: t }).map((i, a) => d.jsxs(ct, { size: "grow", children: [d.jsx(_o, { variant: "text", width: 100, height: 20 }), d.jsx(_o, { variant: "rectangular", height: 40, sx: { borderRadius: 1 }, "data-test": "loading-skeleton" })] }, a)) }, o)) });
+}, pk = ({ skeletonRows: e, skeletonColumns: t }) => d.jsx(d.Fragment, { children: Array.from({ length: e }).map((n, o) => d.jsx(ct, { container: !0, spacing: 2, sx: { mb: 2 }, children: Array.from({ length: t }).map((i, a) => d.jsxs(ct, { size: "grow", children: [d.jsx(_o, { sx: { width: 100, height: 20 }, variant: "text" }), d.jsx(_o, { variant: "rectangular", sx: { height: 40, borderRadius: 1 }, "data-test": "loading-skeleton" })] }, a)) }, o)) });
 function fk() {
   const [e, t] = Mt(null);
   return [e, async (o) => {