@movable/ui 2.13.7 → 2.14.0

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

@@ -14,6 +14,7 @@ type InkWorkflowHeaderProps = {
     label: string;
     Stepper?: JSX.Element;
     ButtonGroup?: JSX.Element | ActionButtonPropType;
+    Subtitle?: JSX.Element;
 };
-export declare function InkWorkflowHeader({ label, Stepper, ButtonGroup, }: InkWorkflowHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function InkWorkflowHeader({ label, Stepper, ButtonGroup, Subtitle, }: InkWorkflowHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/index.d.ts

@@ -596,12 +596,13 @@ declare type InkToggleTextProps = ToggleButtonProps & {
     value: string | number;
 };
 
-export declare function InkWorkflowHeader({ label, Stepper, ButtonGroup, }: InkWorkflowHeaderProps): JSX_2.Element;
+export declare function InkWorkflowHeader({ label, Stepper, ButtonGroup, Subtitle, }: InkWorkflowHeaderProps): JSX_2.Element;
 
 export declare const inkWorkflowHeader: InkWorkflowHeaderPageObject;
 
 export declare class InkWorkflowHeaderPageObject {
     get label(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get subtitle(): Cypress.Chainable<JQuery<HTMLElement>>;
     get stepper(): Cypress.Chainable<JQuery<HTMLElement>>;
     get buttonGroup(): Cypress.Chainable<JQuery<HTMLElement>>;
     get primaryAction(): Cypress.Chainable<JQuery<HTMLElement>>;
@@ -612,6 +613,7 @@ declare type InkWorkflowHeaderProps = {
     label: string;
     Stepper?: JSX.Element;
     ButtonGroup?: JSX.Element | ActionButtonPropType;
+    Subtitle?: JSX.Element;
 };
 
 export declare function InternalUseOnlyAlert({ message, sx, messageSx, }: InternalUseOnlyAlertProp): JSX_2.Element;

package/lib/index.mjs

@@ -3,7 +3,7 @@ var kd = (e, t, r) => t in e ? Pd(e, t, { enumerable: !0, configurable: !0, writ
 var Be = (e, t, r) => kd(e, typeof t != "symbol" ? t + "" : t, r);
 import * as E from "react";
 import ct, { useRef as As, useState as Ut, useEffect as lc, Children as _s, isValidElement as Cn, cloneElement as rr, forwardRef as oo } from "react";
-import { Typography as ht, Chip as us, Tooltip as Ns, Box as Tt, Menu as cc, MenuItem as Wo, Button as rn, Dialog as $d, IconButton as oi, Icon as zn, DialogTitle as Md, Stack as Ze, DialogActions as jd, CircularProgress as ds, styled as uc, Drawer as dc, AppBar as Id, useScrollTrigger as Ad, Breadcrumbs as _d, Link as Nd, RadioGroup as Dd, FormControlLabel as Fd, Radio as Ld, Card as Bd, ToggleButton as pc, ToggleButtonGroup as fc, ListSubheader as zd, FormControl as Vd, InputLabel as Wd, Select as Ud, FormHelperText as Hd, Alert as qd, Grid as $a, Skeleton as Ma } from "@mui/material";
+import { Typography as ht, Chip as us, Tooltip as Ns, Box as Tt, Menu as cc, MenuItem as Wo, Button as rn, Dialog as $d, IconButton as oi, Icon as zn, DialogTitle as Md, Stack as Ke, DialogActions as jd, CircularProgress as ds, styled as uc, Drawer as dc, AppBar as Id, useScrollTrigger as Ad, Breadcrumbs as _d, Link as Nd, RadioGroup as Dd, FormControlLabel as Fd, Radio as Ld, Card as Bd, ToggleButton as pc, ToggleButtonGroup as fc, ListSubheader as zd, FormControl as Vd, InputLabel as Wd, Select as Ud, FormHelperText as Hd, Alert as qd, Grid as $a, Skeleton as Ma } from "@mui/material";
 import Gd from "@emotion/styled";
 import { CacheProvider as Yd, Global as Kd, ThemeContext as mc, css as Xd, keyframes as ii } from "@emotion/react";
 import { WarningAmberRounded as Jd, ReportRounded as Zd } from "@mui/icons-material";
@@ -386,17 +386,17 @@ function rp() {
     }
     function we(R) {
       try {
-        return Ke(R), !1;
+        return Xe(R), !1;
       } catch {
         return !0;
       }
     }
-    function Ke(R) {
+    function Xe(R) {
       return "" + R;
     }
     function ut(R) {
       if (we(R))
-        return w("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ge(R)), Ke(R);
+        return w("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ge(R)), Xe(R);
     }
     var rt = T.ReactCurrentOwner, Te = {
       key: !0,
@@ -2242,16 +2242,16 @@ function Mc(e, t) {
   const r = Us(e.theme);
   return Object.keys(e).map((o) => uf(e, t, o, r)).reduce(Vr, {});
 }
-function Xe(e) {
+function Je(e) {
   return Mc(e, di);
 }
-Xe.propTypes = process.env.NODE_ENV !== "production" ? di.reduce((e, t) => (e[t] = wn, e), {}) : {};
-Xe.filterProps = di;
-function Je(e) {
+Je.propTypes = process.env.NODE_ENV !== "production" ? di.reduce((e, t) => (e[t] = wn, e), {}) : {};
+Je.filterProps = di;
+function Ze(e) {
   return Mc(e, pi);
 }
-Je.propTypes = process.env.NODE_ENV !== "production" ? pi.reduce((e, t) => (e[t] = wn, e), {}) : {};
-Je.filterProps = pi;
+Ze.propTypes = process.env.NODE_ENV !== "production" ? pi.reduce((e, t) => (e[t] = wn, e), {}) : {};
+Ze.filterProps = pi;
 process.env.NODE_ENV !== "production" && lf.reduce((e, t) => (e[t] = wn, e), {});
 function df(e = 8) {
   if (e.mui)
@@ -2486,124 +2486,124 @@ const lo = {
   },
   // spacing
   p: {
-    style: Je
+    style: Ze
   },
   pt: {
-    style: Je
+    style: Ze
   },
   pr: {
-    style: Je
+    style: Ze
   },
   pb: {
-    style: Je
+    style: Ze
   },
   pl: {
-    style: Je
+    style: Ze
   },
   px: {
-    style: Je
+    style: Ze
   },
   py: {
-    style: Je
+    style: Ze
   },
   padding: {
-    style: Je
+    style: Ze
   },
   paddingTop: {
-    style: Je
+    style: Ze
   },
   paddingRight: {
-    style: Je
+    style: Ze
   },
   paddingBottom: {
-    style: Je
+    style: Ze
   },
   paddingLeft: {
-    style: Je
+    style: Ze
   },
   paddingX: {
-    style: Je
+    style: Ze
   },
   paddingY: {
-    style: Je
+    style: Ze
   },
   paddingInline: {
-    style: Je
+    style: Ze
   },
   paddingInlineStart: {
-    style: Je
+    style: Ze
   },
   paddingInlineEnd: {
-    style: Je
+    style: Ze
   },
   paddingBlock: {
-    style: Je
+    style: Ze
   },
   paddingBlockStart: {
-    style: Je
+    style: Ze
   },
   paddingBlockEnd: {
-    style: Je
+    style: Ze
   },
   m: {
-    style: Xe
+    style: Je
   },
   mt: {
-    style: Xe
+    style: Je
   },
   mr: {
-    style: Xe
+    style: Je
   },
   mb: {
-    style: Xe
+    style: Je
   },
   ml: {
-    style: Xe
+    style: Je
   },
   mx: {
-    style: Xe
+    style: Je
   },
   my: {
-    style: Xe
+    style: Je
   },
   margin: {
-    style: Xe
+    style: Je
   },
   marginTop: {
-    style: Xe
+    style: Je
   },
   marginRight: {
-    style: Xe
+    style: Je
   },
   marginBottom: {
-    style: Xe
+    style: Je
   },
   marginLeft: {
-    style: Xe
+    style: Je
   },
   marginX: {
-    style: Xe
+    style: Je
   },
   marginY: {
-    style: Xe
+    style: Je
   },
   marginInline: {
-    style: Xe
+    style: Je
   },
   marginInlineStart: {
-    style: Xe
+    style: Je
   },
   marginInlineEnd: {
-    style: Xe
+    style: Je
   },
   marginBlock: {
-    style: Xe
+    style: Je
   },
   marginBlockStart: {
-    style: Xe
+    style: Je
   },
   marginBlockEnd: {
-    style: Xe
+    style: Je
   },
   // display
   displayPrint: {
@@ -4072,7 +4072,7 @@ function AE({ Title: e, Content: t, Actions: r, onClose: o, hideCloseButton: i,
     right: "15px",
     p: "4px",
     color: (b) => b.palette.grey[500]
-  }, children: f.jsx(zn, { children: "close_filled" }) }), typeof e != "string" ? f.jsx(f.Fragment, { children: e }) : f.jsx(Md, { "data-test": "ink-dialog-title", children: f.jsxs(Ze, { direction: "row", alignItems: "center", children: [((u = s == null ? void 0 : s.primary) == null ? void 0 : u.variant) && f.jsx(nh, { variant: s.primary.variant }), f.jsx(ht, { variant: "h6", children: f.jsx("strong", { children: e }) })] }) }), t, l, s && f.jsxs(jd, { sx: { m: 1 }, children: [s.cancel && f.jsx(rn, { "data-test": "ink-dialog-cancel-action", onClick: s.cancel.onClick, children: (d = s.cancel) == null ? void 0 : d.label }), s.secondary && f.jsx(rn, { "data-test": "ink-dialog-secondary-action", color: ((m = s.secondary) == null ? void 0 : m.variant) === "destructive" ? "error" : "primary", endIcon: s.secondary.loading ? f.jsx(ds, { size: 20, color: "inherit" }) : void 0, disabled: s.secondary.disabled || s.secondary.loading, ...s.secondary, variant: (p = s.secondary) != null && p.variant ? "contained" : "text", children: (h = s.secondary) == null ? void 0 : h.label }), s.primary && f.jsx(rn, { "data-test": "ink-dialog-primary-action", color: ((v = s.primary) == null ? void 0 : v.variant) === "destructive" ? "error" : "primary", endIcon: s.primary.loading ? f.jsx(ds, { size: 20, color: "inherit" }) : void 0, disabled: s.primary.disabled || s.primary.loading, ...s.primary, variant: "contained", children: (g = s.primary) == null ? void 0 : g.label })] })] });
+  }, children: f.jsx(zn, { children: "close_filled" }) }), typeof e != "string" ? f.jsx(f.Fragment, { children: e }) : f.jsx(Md, { "data-test": "ink-dialog-title", children: f.jsxs(Ke, { direction: "row", alignItems: "center", children: [((u = s == null ? void 0 : s.primary) == null ? void 0 : u.variant) && f.jsx(nh, { variant: s.primary.variant }), f.jsx(ht, { variant: "h6", children: f.jsx("strong", { children: e }) })] }) }), t, l, s && f.jsxs(jd, { sx: { m: 1 }, children: [s.cancel && f.jsx(rn, { "data-test": "ink-dialog-cancel-action", onClick: s.cancel.onClick, children: (d = s.cancel) == null ? void 0 : d.label }), s.secondary && f.jsx(rn, { "data-test": "ink-dialog-secondary-action", color: ((m = s.secondary) == null ? void 0 : m.variant) === "destructive" ? "error" : "primary", endIcon: s.secondary.loading ? f.jsx(ds, { size: 20, color: "inherit" }) : void 0, disabled: s.secondary.disabled || s.secondary.loading, ...s.secondary, variant: (p = s.secondary) != null && p.variant ? "contained" : "text", children: (h = s.secondary) == null ? void 0 : h.label }), s.primary && f.jsx(rn, { "data-test": "ink-dialog-primary-action", color: ((v = s.primary) == null ? void 0 : v.variant) === "destructive" ? "error" : "primary", endIcon: s.primary.loading ? f.jsx(ds, { size: 20, color: "inherit" }) : void 0, disabled: s.primary.disabled || s.primary.loading, ...s.primary, variant: "contained", children: (g = s.primary) == null ? void 0 : g.label })] })] });
 }
 const tu = 280, rh = uc(Tt, { shouldForwardProp: (e) => e !== "open" })(({ theme: e, open: t }) => ({
   flexGrow: 1,
@@ -4118,7 +4118,7 @@ function _E({
       ...u && { position: "absolute" }
     },
     variant: "outlined"
-  }, variant: "persistent", anchor: "left", open: e, children: f.jsxs(Ze, { height: "100%", justifyContent: "space-between", children: [f.jsxs(Ze, { direction: "column", spacing: 3, sx: { p: 2 }, children: [f.jsxs(Ze, { direction: "row", alignItems: "center", children: [f.jsxs(Ze, { direction: "row", alignItems: "center", children: [f.jsx(zn, { sx: { color: "text.primary" }, fontSize: "small", children: "filter_list_icon" }), f.jsx(ht, { sx: { ml: 1 }, "data-cy": "drawer-header", children: l })] }), f.jsx(Ns, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
+  }, variant: "persistent", anchor: "left", open: e, children: f.jsxs(Ke, { height: "100%", justifyContent: "space-between", children: [f.jsxs(Ke, { direction: "column", spacing: 3, sx: { p: 2 }, children: [f.jsxs(Ke, { direction: "row", alignItems: "center", children: [f.jsxs(Ke, { direction: "row", alignItems: "center", children: [f.jsx(zn, { sx: { color: "text.primary" }, fontSize: "small", children: "filter_list_icon" }), f.jsx(ht, { sx: { ml: 1 }, "data-cy": "drawer-header", children: l })] }), f.jsx(Ns, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
     popper: {
       modifiers: [
         {
@@ -4142,7 +4142,7 @@ function _E({
   }, children: a })] }) }), f.jsx(rh, { component: "main", open: e, ...d, children: r })] });
 }
 function NE({ metadata: e }) {
-  return f.jsx(Ze, { direction: "row", spacing: 2, "data-test-ink-page-header-metadata": !0, children: e.map(({ icon: t, label: r, value: o }) => f.jsxs(Ze, { direction: "row", alignItems: "center", spacing: 0.5, "data-cy": `metadata-${r}`, children: [t && typeof t == "string" ? f.jsx(zn, { sx: { color: "neutral600", fontSize: "1rem" }, children: t }) : t, f.jsx(ht, { variant: "body2", color: "text.secondary", children: r }), typeof o == "string" ? f.jsx(ht, { variant: "body2", children: o }) : o] }, r)) });
+  return f.jsx(Ke, { direction: "row", spacing: 2, "data-test-ink-page-header-metadata": !0, children: e.map(({ icon: t, label: r, value: o }) => f.jsxs(Ke, { direction: "row", alignItems: "center", spacing: 0.5, "data-cy": `metadata-${r}`, children: [t && typeof t == "string" ? f.jsx(zn, { sx: { color: "neutral600", fontSize: "1rem" }, children: t }) : t, f.jsx(ht, { variant: "body2", color: "text.secondary", children: r }), typeof o == "string" ? f.jsx(ht, { variant: "body2", children: o }) : o] }, r)) });
 }
 const oh = ({ children: e }) => {
   const t = Ad({
@@ -4165,14 +4165,14 @@ const oh = ({ children: e }) => {
   ...t
 }, children: e({ position: o }) }) });
 function DE({ Breadcrumbs: e, Subtitle: t, Metadata: r, Chips: o, ButtonGroup: i, Tabs: s, sx: a }) {
-  return f.jsx(nu, { children: ({ position: l }) => f.jsxs(Ze, { "data-test-ink-page-header": !0, direction: "column", spacing: 2, position: l, sx: {
+  return f.jsx(nu, { children: ({ position: l }) => f.jsxs(Ke, { "data-test-ink-page-header": !0, direction: "column", spacing: 2, position: l, sx: {
     borderBottom: 1,
     borderColor: "divider",
     px: 3,
     py: 3,
     ...s && { pb: -3 },
     ...a
-  }, children: [f.jsxs(Ze, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [f.jsxs(Ze, { direction: "row", spacing: 1, alignItems: "center", children: [e, o] }), i] }), r, t, s] }) });
+  }, children: [f.jsxs(Ke, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [f.jsxs(Ke, { direction: "row", spacing: 1, alignItems: "center", children: [e, o] }), i] }), r, t, s] }) });
 }
 const ih = {
   ".MuiBreadcrumbs-separator": {
@@ -4197,7 +4197,7 @@ function LE({ primaryAction: e, secondaryAction: t, dropdownAction: r }) {
   }, l = () => {
     i(null);
   }, { internalUseOnlyItems: c, menuOptions: u } = r ?? {}, d = u == null ? void 0 : u.filter((p) => c == null ? void 0 : c.includes(p.label)), m = u == null ? void 0 : u.filter((p) => !(c != null && c.includes(p.label)));
-  return f.jsxs(Ze, { direction: "row", spacing: 1, "data-test-ink-page-header-action-buttons": !0, children: [r && f.jsxs(Tt, { children: [f.jsx(rn, { id: "action-dd", "aria-controls": s ? "action-menu" : void 0, "aria-haspopup": "true", "aria-expanded": s ? "true" : void 0, onClick: a, variant: "contained", color: "inherit", endIcon: f.jsx(zn, { children: "arrow_drop_down" }), children: r.label }), f.jsxs(cc, { id: "action-menu", anchorEl: o, open: s, onClose: l, MenuListProps: {
+  return f.jsxs(Ke, { direction: "row", spacing: 1, "data-test-ink-page-header-action-buttons": !0, children: [r && f.jsxs(Tt, { children: [f.jsx(rn, { id: "action-dd", "aria-controls": s ? "action-menu" : void 0, "aria-haspopup": "true", "aria-expanded": s ? "true" : void 0, onClick: a, variant: "contained", color: "inherit", endIcon: f.jsx(zn, { children: "arrow_drop_down" }), children: r.label }), f.jsxs(cc, { id: "action-menu", anchorEl: o, open: s, onClose: l, MenuListProps: {
     "aria-labelledby": "action-dd"
   }, anchorOrigin: {
     vertical: "bottom",
@@ -4214,14 +4214,14 @@ function LE({ primaryAction: e, secondaryAction: t, dropdownAction: r }) {
 function BE({ subtitle: e }) {
   return f.jsx(ht, { variant: "body2", color: "text.secondary", "data-cy": "header-subtitle", children: e });
 }
-function zE({ label: e, Stepper: t, ButtonGroup: r }) {
-  const o = (i) => typeof i == "object" && i !== null && ("primary" in i || "close" in i);
+function zE({ label: e, Stepper: t, ButtonGroup: r, Subtitle: o }) {
+  const i = (s) => typeof s == "object" && s !== null && ("primary" in s || "close" in s);
   return f.jsx(nu, { sx: {
     px: 3,
     py: 2.25,
     borderBottom: "1px solid",
     borderBottomColor: "neutral200"
-  }, children: ({ position: i }) => f.jsxs(Ze, { position: i, direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [f.jsx(ht, { "data-test-ink-workflow-header-label": !0, variant: "h6", sx: { fontWeight: "600", flexGrow: "1" }, children: e }), t && f.jsx(Tt, { sx: { flexGrow: "2" }, "data-test-ink-workflow-header-stepper": !0, children: t }), r && f.jsx(Tt, { sx: { flexGrow: "1", justifyContent: "end", display: "flex" }, "data-test-ink-workflow-header-button-group": !0, children: o(r) ? f.jsxs(Ze, { direction: "row", spacing: 1, children: [r.primary && f.jsx(rn, { variant: "contained", endIcon: r.primary.loading ? f.jsx(ds, { size: 20, color: "inherit" }) : void 0, disabled: r.primary.disabled || r.primary.loading, ...r.primary, "data-test-ink-workflow-header-primary-action": !0, children: r.primary.label }), r.close && f.jsx(oi, { onClick: r.close.onClick, "data-test-ink-workflow-header-close-action": !0, children: f.jsx(zn, { children: "close_rounded" }) })] }) : r })] }) });
+  }, children: ({ position: s }) => f.jsxs(Ke, { position: s, direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [f.jsxs(Ke, { direction: "column", children: [f.jsx(ht, { "data-test-ink-workflow-header-label": !0, variant: "h6", sx: { fontWeight: "600", flexGrow: "1" }, children: e }), o] }), t && f.jsx(Tt, { sx: { flexGrow: "2" }, "data-test-ink-workflow-header-stepper": !0, children: t }), r && f.jsx(Tt, { sx: { flexGrow: "1", justifyContent: "end", display: "flex" }, "data-test-ink-workflow-header-button-group": !0, children: i(r) ? f.jsxs(Ke, { direction: "row", spacing: 1, children: [r.primary && f.jsx(rn, { variant: "contained", endIcon: r.primary.loading ? f.jsx(ds, { size: 20, color: "inherit" }) : void 0, disabled: r.primary.disabled || r.primary.loading, ...r.primary, "data-test-ink-workflow-header-primary-action": !0, children: r.primary.label }), r.close && f.jsx(oi, { onClick: r.close.onClick, "data-test-ink-workflow-header-close-action": !0, children: f.jsx(zn, { children: "close_rounded" }) })] }) : r })] }) });
 }
 var nt = {}, ou = { exports: {} };
 (function(e) {
@@ -5520,7 +5520,7 @@ function VE({ Header: e, Description: t, Icon: r, CTA: o, children: i, shouldSho
 }
 const WE = ({ name: e, options: t, value: r, ref: o, direction: i = "row", cardSx: s, fullWidth: a = !0, disabled: l = !1, onChange: c, onBlur: u }) => {
   const d = (p, h, v, g) => g ? p ? h : "inherit" : v, m = (p, h, v, g, b) => b ? p ? h : g : p ? h : v;
-  return f.jsx(Dd, { name: e, onChange: c, onBlur: u, value: r, ref: o, "aria-label": e, "aria-readonly": l, "aria-disabled": l, sx: { width: a ? "100%" : "fit-content" }, children: f.jsx(Ze, { direction: i, spacing: 2, children: t.map(({ value: p, icon: h, title: v, description: g, subDescription: b, disabled: T }) => {
+  return f.jsx(Dd, { name: e, onChange: c, onBlur: u, value: r, ref: o, "aria-label": e, "aria-readonly": l, "aria-disabled": l, sx: { width: a ? "100%" : "fit-content" }, children: f.jsx(Ke, { direction: i, spacing: 2, children: t.map(({ value: p, icon: h, title: v, description: g, subDescription: b, disabled: T }) => {
     const w = l || T;
     return f.jsx(Fd, { value: p, disabled: w, control: f.jsx(Ld, { sx: { display: "none" } }), sx: {
       width: a ? "100%" : "auto",
@@ -5549,7 +5549,7 @@ const WE = ({ name: e, options: t, value: r, ref: o, direction: i = "row", cardS
       borderRadius: 1,
       outlineColor: (O) => m(r === p, O.palette.primary.dark, O.palette.neutral200, O.palette.neutral200, w),
       ...s
-    }, children: f.jsxs(Ze, { direction: "column", alignItems: "center", width: "100%", children: [h && f.jsx(Tt, { sx: {
+    }, children: f.jsxs(Ke, { direction: "column", alignItems: "center", width: "100%", children: [h && f.jsx(Tt, { sx: {
       color: w ? "neutral500" : r === p ? "text.primary" : "action.active",
       ".MuiSvgIcon-root": { fontSize: "2rem" }
     }, children: h }), f.jsx(ht, { variant: "subtitle1", textAlign: "center", lineHeight: "20px", mt: 0.5, color: w ? r === p ? "text.secondary" : "neutral500" : "text.primary", children: v }), g && f.jsx(ht, { variant: "body2", textAlign: "center", mt: 1, color: `${w ? "neutral500" : "text.secondary"}`, children: g }), b && f.jsx(ht, { variant: "body2", color: `${w ? "neutral500" : "text.secondary"}`, textAlign: "center", mt: 1, children: b })] }) }) }, p);
@@ -5728,7 +5728,7 @@ const yl = {
 };
 function qE({ title: e, description: t, action: r, variant: o, icon: i, sx: s }) {
   const a = o === "search" ? "neutral00" : "neutral50", l = Eg[o], { fontSize: c, fontSizeDescription: u, titleVariant: d, descriptionVariant: m } = l;
-  return f.jsxs(Ze, { alignItems: "center", justifyContent: "center", my: 6, textAlign: "center", "data-cy": `empty-state-${o}-container`, sx: { backgroundColor: a, p: 5, ...s }, children: [i && f.jsx(Tg, { icon: i, variant: o }), e && f.jsx(ht, { variant: d, sx: { fontSize: c }, "data-cy": "empty-state-title", children: f.jsx("strong", { children: e }) }), f.jsx(ht, { variant: m, color: "text.secondary", sx: { fontSize: u }, "data-cy": "empty-state-description", children: t }), r && f.jsx(Tt, { mt: 3, children: f.jsx(rn, { onClick: r.onClick, "data-cy": "empty-state-action-button", children: r.title }) })] });
+  return f.jsxs(Ke, { alignItems: "center", justifyContent: "center", my: 6, textAlign: "center", "data-cy": `empty-state-${o}-container`, sx: { backgroundColor: a, p: 5, ...s }, children: [i && f.jsx(Tg, { icon: i, variant: o }), e && f.jsx(ht, { variant: d, sx: { fontSize: c }, "data-cy": "empty-state-title", children: f.jsx("strong", { children: e }) }), f.jsx(ht, { variant: m, color: "text.secondary", sx: { fontSize: u }, "data-cy": "empty-state-description", children: t }), r && f.jsx(Tt, { mt: 3, children: f.jsx(rn, { onClick: r.onClick, "data-cy": "empty-state-action-button", children: r.title }) })] });
 }
 function Rn({
   props: e,
@@ -7139,8 +7139,8 @@ const Zg = be("MuiButtonBase", ["root", "disabled", "focusVisible"]), Qg = ["act
   });
   let we = c;
   we === "button" && (D.href || D.to) && (we = h);
-  const Ke = {};
-  we === "button" ? (Ke.type = L === void 0 ? "button" : L, Ke.disabled = u) : (!D.href && !D.to && (Ke.role = "button"), u && (Ke["aria-disabled"] = u));
+  const Xe = {};
+  we === "button" ? (Xe.type = L === void 0 ? "button" : L, Xe.disabled = u) : (!D.href && !D.to && (Xe.role = "button"), u && (Xe["aria-disabled"] = u));
   const ut = Qe(r, Q, U);
   process.env.NODE_ENV !== "production" && E.useEffect(() => {
     Z && !$.current && console.error(["MUI: The `component` prop provided to ButtonBase is invalid.", "Please make sure the children prop is rendered in this custom component."].join(`
@@ -7176,7 +7176,7 @@ const Zg = be("MuiButtonBase", ["root", "disabled", "focusVisible"]), Qg = ["act
     ref: ut,
     tabIndex: u ? -1 : z,
     type: L
-  }, Ke, D, {
+  }, Xe, D, {
     children: [a, Z ? (
       /* TouchRipple is only needed client-side, x2 boost on the server. */
       /* @__PURE__ */ f.jsx(gu, y({
@@ -9172,7 +9172,7 @@ function Lb(e) {
       P[C] = $e, z[C] = $e - U;
     }
     if (l) {
-      var qe, Me = C === "x" ? kt : $t, et = C === "x" ? qt : Gt, Le = P[x], Re = x === "y" ? "height" : "width", ze = Le + b[Me], Ge = Le - b[et], we = [kt, $t].indexOf(T) !== -1, Ke = (qe = N == null ? void 0 : N[x]) != null ? qe : 0, ut = we ? ze : Le - S[Re] - I[Re] - Ke + j.altAxis, rt = we ? Le + S[Re] + I[Re] - Ke - j.altAxis : Ge, Te = h && we ? cb(ut, Le, rt) : Ur(h ? ut : ze, Le, h ? rt : Ge);
+      var qe, Me = C === "x" ? kt : $t, et = C === "x" ? qt : Gt, Le = P[x], Re = x === "y" ? "height" : "width", ze = Le + b[Me], Ge = Le - b[et], we = [kt, $t].indexOf(T) !== -1, Xe = (qe = N == null ? void 0 : N[x]) != null ? qe : 0, ut = we ? ze : Le - S[Re] - I[Re] - Xe + j.altAxis, rt = we ? Le + S[Re] + I[Re] - Xe - j.altAxis : Ge, Te = h && we ? cb(ut, Le, rt) : Ur(h ? ut : ze, Le, h ? rt : Ge);
       P[x] = Te, z[x] = Te - Le;
     }
     t.modifiersData[o] = z;
@@ -10135,7 +10135,7 @@ const Iu = /* @__PURE__ */ E.forwardRef(function(t, r) {
     TransitionProps: le
   } = P, H = ee(P, dy), pe = /* @__PURE__ */ E.isValidElement(I) ? I : /* @__PURE__ */ f.jsx("span", {
     children: I
-  }), $e = Cr(), qe = Zc(), [Me, et] = E.useState(), [Le, Re] = E.useState(null), ze = E.useRef(!1), Ge = F || G, we = tr(), Ke = tr(), ut = tr(), rt = tr(), [Te, de] = ur({
+  }), $e = Cr(), qe = Zc(), [Me, et] = E.useState(), [Le, Re] = E.useState(null), ze = E.useRef(!1), Ge = F || G, we = tr(), Xe = tr(), ut = tr(), rt = tr(), [Te, de] = ur({
     controlled: J,
     default: !1,
     name: "Tooltip",
@@ -10169,11 +10169,11 @@ const Iu = /* @__PURE__ */ E.forwardRef(function(t, r) {
       });
     }
   ), Ve = (ue) => {
-    ze.current && ue.type !== "touchstart" || (Me && Me.removeAttribute("title"), Ke.clear(), ut.clear(), D || Po && U ? Ke.start(Po ? U : D, () => {
+    ze.current && ue.type !== "touchstart" || (Me && Me.removeAttribute("title"), Xe.clear(), ut.clear(), D || Po && U ? Xe.start(Po ? U : D, () => {
       ce(ue);
     }) : ce(ue));
   }, Dt = (ue) => {
-    Ke.clear(), ut.start(W, () => {
+    Xe.clear(), ut.start(W, () => {
       ye(ue);
     });
   }, {
@@ -10586,7 +10586,7 @@ function KE(e) {
       ...u && { position: "absolute" }
     },
     variant: "outlined"
-  }, anchor: "left", open: rs(e) ? e.isOpen : !0, variant: t === "panel" ? "permanent" : "persistent", children: f.jsxs(Ze, { height: "100%", justifyContent: "space-between", children: [f.jsxs(Ze, { direction: "column", spacing: 3, sx: { p: 2 }, children: [f.jsxs(Ze, { direction: "row", alignItems: "center", children: [f.jsxs(Ze, { direction: "row", alignItems: "center", children: [h && f.jsx(Ty, { Icon: h }), f.jsx(ht, { sx: { ml: h && 1 }, "data-cy": "drawer-header", children: i })] }), rs(e) && f.jsx(Ns, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
+  }, anchor: "left", open: rs(e) ? e.isOpen : !0, variant: t === "panel" ? "permanent" : "persistent", children: f.jsxs(Ke, { height: "100%", justifyContent: "space-between", children: [f.jsxs(Ke, { direction: "column", spacing: 3, sx: { p: 2 }, children: [f.jsxs(Ke, { direction: "row", alignItems: "center", children: [f.jsxs(Ke, { direction: "row", alignItems: "center", children: [h && f.jsx(Ty, { Icon: h }), f.jsx(ht, { sx: { ml: h && 1 }, "data-cy": "drawer-header", children: i })] }), rs(e) && f.jsx(Ns, { title: "Close", placement: "bottom-end", disableInteractive: !0, slotProps: {
     popper: {
       modifiers: [
         {
@@ -13768,9 +13768,9 @@ const yr = be("MuiInputBase", ["root", "formControl", "focused", "disabled", "ad
     size: B.size,
     startAdornment: k,
     type: W
-  }), we = ux(Ge), Ke = G.root || u.Root || _i, ut = $.root || d.root || {}, rt = G.input || u.Input || Ni;
+  }), we = ux(Ge), Xe = G.root || u.Root || _i, ut = $.root || d.root || {}, rt = G.input || u.Input || Ni;
   return Re = y({}, Re, (o = $.input) != null ? o : d.input), /* @__PURE__ */ f.jsxs(E.Fragment, {
-    children: [!h && dx, /* @__PURE__ */ f.jsxs(Ke, y({}, ut, !dr(Ke) && {
+    children: [!h && dx, /* @__PURE__ */ f.jsxs(Xe, y({}, ut, !dr(Xe) && {
       ownerState: y({}, Ge, ut.ownerState)
     }, {
       ref: r,
@@ -17391,7 +17391,7 @@ const $1 = (e) => {
   delete U["aria-invalid"];
   let Re, ze;
   const Ge = [];
-  let we = !1, Ke = !1;
+  let we = !1, Xe = !1;
   (ti({
     value: $
   }) || h) && (z ? Re = z($) : we = !0);
@@ -17407,7 +17407,7 @@ const $1 = (e) => {
       ye = $.some((Ve) => tc(Ve, ce.props.value)), ye && we && Ge.push(ce.props.children);
     } else
       ye = tc($, ce.props.value), ye && we && (ze = ce.props.children);
-    return ye && (Ke = !0), /* @__PURE__ */ E.cloneElement(ce, {
+    return ye && (Xe = !0), /* @__PURE__ */ E.cloneElement(ce, {
       "aria-selected": ye ? "true" : "false",
       onClick: qe(ce),
       onKeyUp: (Ve) => {
@@ -17422,12 +17422,12 @@ const $1 = (e) => {
     });
   });
   process.env.NODE_ENV !== "production" && E.useEffect(() => {
-    if (!Ke && !O && $ !== "") {
+    if (!Xe && !O && $ !== "") {
       const ce = pe.map((ye) => ye.props.value);
       console.warn([`MUI: You have provided an out-of-range value \`${$}\` for the select ${C ? `(name="${C}") ` : ""}component.`, "Consider providing a value that matches one of the available options or ''.", `The available values are ${ce.filter((ye) => ye != null).map((ye) => `\`${ye}\``).join(", ") || '""'}.`].join(`
 `));
     }
-  }, [Ke, pe, O, C, $]), we && (O ? Ge.length === 0 ? Re = null : Re = Ge.reduce((ce, ye, Ve) => (ce.push(ye), Ve < Ge.length - 1 && ce.push(", "), ce), []) : Re = ze);
+  }, [Xe, pe, O, C, $]), we && (O ? Ge.length === 0 ? Re = null : Re = Ge.reduce((ce, ye, Ve) => (ce.push(ye), Ve < Ge.length - 1 && ce.push(", "), ce), []) : Re = ze);
   let rt = re;
   !l && Y && q && (rt = oe.clientWidth);
   let Te;
@@ -18306,7 +18306,7 @@ Ra = wa.default = (0, K1.default)(/* @__PURE__ */ (0, X1.jsx)("path", {
 function rC({ message: e, sx: t, messageSx: r }) {
   return f.jsx(qd, { severity: "info", "data-cy": "internal-user-only-alert", sx: { alignItems: "center", ...t }, iconMapping: {
     info: f.jsx(Ra, {})
-  }, children: f.jsxs(Ze, { direction: "row", gap: 1, alignItems: "center", children: [f.jsx(ru, { sx: { color: "text.secondary" } }), f.jsx(Ze, { children: "-" }), f.jsx(ht, { variant: "body2", sx: r, "data-cy": "internal-user-only-alert-message", children: e || "This page has limited access to internal users only." })] }) });
+  }, children: f.jsxs(Ke, { direction: "row", gap: 1, alignItems: "center", children: [f.jsx(ru, { sx: { color: "text.secondary" } }), f.jsx(Ke, { children: "-" }), f.jsx(ht, { variant: "body2", sx: r, "data-cy": "internal-user-only-alert-message", children: e || "This page has limited access to internal users only." })] }) });
 }
 const vt = {
   50: "#ede7f6",
@@ -20171,6 +20171,9 @@ class ZT {
   get label() {
     return cy.get("[data-test-ink-workflow-header-label]");
   }
+  get subtitle() {
+    return cy.get('[data-cy="header-subtitle"]');
+  }
   get stepper() {
     return cy.get("[data-test-ink-workflow-header-stepper]");
   }