@movable/ui 2.13.6 → 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: {
@@ -3960,20 +3960,25 @@ function Qm({ maxWidth: e = 200, chipProps: t, size: r = "small", expandOnHover:
     }
     return t.label;
   })(), T = Lc(us, {
-    shouldForwardProp: (w) => w !== "isHovered" && w !== "expandOnHover" && w !== "maxWidth"
-  })(({ isHovered: w, expandOnHover: O, maxWidth: C, truncation: x }) => ({
+    shouldForwardProp: (w) => w !== "isHovered" && w !== "expandOnHover" && w !== "hasDeleteIcon" && w !== "maxWidth"
+  })(({ isHovered: w, expandOnHover: O, maxWidth: C, truncation: x, hasDeleteIcon: P }) => ({
     transition: "max-width 0.3s ease",
     maxWidth: C === null ? "none" : O && w ? `${d}px` : `${C}px`,
     overflow: "hidden",
     textOverflow: "clip",
     whiteSpace: "nowrap",
+    ".MuiChip-deleteIcon": {
+      marginLeft: "1px",
+      marginRight: "6px"
+    },
     ".MuiChip-label": {
       overflow: "hidden",
       textOverflow: x === "middle" ? "clip" : "ellipsis",
-      whiteSpace: "nowrap"
+      whiteSpace: "nowrap",
+      marginLeft: P ? "1px" : 0
     }
   }));
-  return f.jsx(f.Fragment, { children: h ? f.jsx(Ns, { "data-test-chip-tooltip": t.label, title: t.label, slotProps: {
+  return f.jsx(f.Fragment, { children: f.jsx(T, { "data-test-chip": t.label, ref: s, size: r, onMouseEnter: () => u(!0), onMouseLeave: () => u(!1), isHovered: c, expandOnHover: o, maxWidth: e, truncation: i, hasDeleteIcon: !!t.onDelete, ...t, label: h ? f.jsx(Ns, { "data-test-chip-tooltip": t.label, title: t.label, slotProps: {
     popper: {
       modifiers: [
         {
@@ -3984,7 +3989,7 @@ function Qm({ maxWidth: e = 200, chipProps: t, size: r = "small", expandOnHover:
         }
       ]
     }
-  }, children: f.jsx(T, { "data-test-chip": t.label, ref: s, size: r, onMouseEnter: () => u(!0), onMouseLeave: () => u(!1), isHovered: c, expandOnHover: o, maxWidth: e, truncation: i, ...t, label: b }) }) : f.jsx(T, { "data-test-chip": t.label, ref: s, size: r, onMouseEnter: () => u(!0), onMouseLeave: () => u(!1), isHovered: c, expandOnHover: o, maxWidth: e, truncation: i, ...t, label: b }) });
+  }, children: f.jsx("span", { children: b }) }) : b }) });
 }
 const eh = {
   "&:hover": {
@@ -4067,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,
@@ -4113,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: [
         {
@@ -4137,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({
@@ -4160,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": {
@@ -4192,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",
@@ -4209,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) {
@@ -5515,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",
@@ -5544,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);
@@ -5723,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,
@@ -7134,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(`
@@ -7171,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({
@@ -9167,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;
@@ -10130,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",
@@ -10164,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);
     });
   }, {
@@ -10581,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: [
         {
@@ -13763,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,
@@ -17386,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);
@@ -17402,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) => {
@@ -17417,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;
@@ -18301,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",
@@ -20166,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]");
   }