@orchestrator-ui/orchestrator-ui-components 5.5.1 → 5.5.3

package/dist/index.js

@@ -4922,10 +4922,10 @@ var require_markup = __commonJS({
 var require_css = __commonJS({
   "../../node_modules/refractor/lang/css.js"(exports, module) {
     "use strict";
-    module.exports = css53;
-    css53.displayName = "css";
-    css53.aliases = [];
-    function css53(Prism) {
+    module.exports = css52;
+    css52.displayName = "css";
+    css52.aliases = [];
+    function css52(Prism) {
       ;
       (function(Prism2) {
         var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
@@ -5192,7 +5192,7 @@ var require_core = __commonJS({
     var decode = require_parse_entities();
     var Prism = require_prism_core();
     var markup = require_markup();
-    var css53 = require_css();
+    var css52 = require_css();
     var clike = require_clike();
     var js = require_javascript();
     restore();
@@ -5208,7 +5208,7 @@ var require_core = __commonJS({
     refract.registered = registered;
     refract.listLanguages = listLanguages;
     register(markup);
-    register(css53);
+    register(css52);
     register(clike);
     register(js);
     refract.util.encode = encode;
@@ -26800,7 +26800,7 @@ var PolicyResource = /* @__PURE__ */ ((PolicyResource2) => {
 })(PolicyResource || {});
 
 // src/configuration/version.ts
-var ORCHESTRATOR_UI_LIBRARY_VERSION = "5.5.1";
+var ORCHESTRATOR_UI_LIBRARY_VERSION = "5.5.3";
 
 // src/types/types.ts
 var EngineStatus = /* @__PURE__ */ ((EngineStatus3) => {
@@ -39057,7 +39057,7 @@ var WfoHeaderBadge = ({
   children,
   ...restProps
 }) => {
-  const css53 = restProps.iconType ? {
+  const css52 = restProps.iconType ? {
     height: 24,
     display: "flex",
     paddingLeft: 0
@@ -39065,7 +39065,7 @@ var WfoHeaderBadge = ({
     height: 24,
     display: "flex"
   };
-  return /* @__PURE__ */ jsx73(WfoBadge, { ...restProps, css: css53, children });
+  return /* @__PURE__ */ jsx73(WfoBadge, { ...restProps, css: css52, children });
 };
 
 // src/components/WfoBadges/WfoEnvironmentBadge/WfoEnvironmentBadge.tsx
@@ -47704,7 +47704,7 @@ import { EuiFlexItem as EuiFlexItem23, EuiFormRow as EuiFormRow20, EuiText as Eu
 
 // src/components/WfoForms/formFields/SummaryFieldStyling.ts
 import { css as css33 } from "@emotion/react";
-var getStyles10 = ({ theme }) => {
+var summaryFieldStyles = ({ theme }) => {
   const summaryFieldStyle = css33({
     "div.emailMessage": {
       td: {
@@ -47754,7 +47754,7 @@ function Summary({
   data,
   ...props
 }) {
-  const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles10);
+  const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
   const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
   if (!data) {
     return null;
@@ -50324,7 +50324,7 @@ var WfoProcessDetailPage = ({
 };
 
 // src/pages/processes/WfoStartProcessPage.tsx
-import { useCallback as useCallback8, useEffect as useEffect33, useMemo as useMemo6, useState as useState50 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect34, useMemo as useMemo6, useState as useState50 } from "react";
 import { useTranslations as useTranslations68 } from "next-intl";
 import { useRouter as useRouter10 } from "next/router";
 import {
@@ -50599,53 +50599,11 @@ var WfoCheckbox = ({
 };
 
 // src/components/WfoPydanticForm/fields/WfoSummary.tsx
+import { capitalize as capitalize2 } from "lodash";
 import { EuiFlexItem as EuiFlexItem24, EuiFormRow as EuiFormRow22, EuiText as EuiText36 } from "@elastic/eui";
-import { tint as tint3 } from "@elastic/eui";
-import { css as css36 } from "@emotion/react";
 import { jsx as jsx212, jsxs as jsxs111 } from "@emotion/react/jsx-runtime";
-var getStyles11 = ({ theme }) => {
-  const toShadeColor = (color) => tint3(color, 0.9);
-  const summaryFieldStyle = css36({
-    "div.emailMessage": {
-      td: {
-        color: theme.colors.text
-      },
-      p: {
-        color: theme.colors.text
-      },
-      html: {
-        marginLeft: "-10px"
-      }
-    },
-    "section.table-summary": {
-      marginTop: "20px",
-      width: "100%",
-      td: {
-        padding: "10px",
-        verticalAlign: "top"
-      },
-      "td:not(:first-child):not(:last-child)": {
-        borderRight: `1px solid ${theme.colors.lightestShade}`
-      },
-      ".label": {
-        fontWeight: "bold",
-        color: theme.colors.lightestShade,
-        backgroundColor: theme.colors.primary,
-        borderRight: `2px solid ${theme.colors.lightestShade}`,
-        borderBottom: `1px solid ${theme.colors.lightestShade}`
-      },
-      ".value": {
-        backgroundColor: toShadeColor(theme.colors.primary),
-        borderBottom: `1px solid ${theme.colors.lightestShade}`
-      }
-    }
-  });
-  return {
-    summaryFieldStyle
-  };
-};
 var WfoSummary = ({ pydanticFormField }) => {
-  const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles11);
+  const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
   const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
   const { id, title, description } = pydanticFormField;
   const uniforms = pydanticFormField.schema.uniforms;
@@ -50669,11 +50627,12 @@ var WfoSummary = ({ pydanticFormField }) => {
     labels && /* @__PURE__ */ jsx212("th", {}),
     headers.map((header, idx) => /* @__PURE__ */ jsx212("th", { children: header }, idx))
   ] });
+  const formattedTitle = snakeToHuman(capitalize2(title ?? ""));
   return /* @__PURE__ */ jsx212(EuiFlexItem24, { "data-testid": id, css: [summaryFieldStyle, formRowStyle], children: /* @__PURE__ */ jsx212("section", { children: /* @__PURE__ */ jsx212(
     EuiFormRow22,
     {
-      label: description,
-      labelAppend: /* @__PURE__ */ jsx212(EuiText36, { size: "m", children: title }),
+      label: /* @__PURE__ */ jsx212("p", { className: "label", children: formattedTitle }),
+      labelAppend: /* @__PURE__ */ jsx212(EuiText36, { size: "m", children: description }),
       id,
       fullWidth: true,
       children: /* @__PURE__ */ jsx212("section", { className: "table-summary", children: /* @__PURE__ */ jsxs111("table", { id: `${id}-table`, children: [
@@ -50694,9 +50653,9 @@ import {
 import { EuiFlexGroup as EuiFlexGroup21 } from "@elastic/eui";
 
 // src/components/WfoPydanticForm/fields/WfoObjectField/styles.ts
-import { css as css37 } from "@emotion/react";
+import { css as css36 } from "@emotion/react";
 var getWfoObjectFieldStyles = () => {
-  const wfoObjectFieldStyles = css37({
+  const wfoObjectFieldStyles = css36({
     width: "100%",
     "& > div": {
       width: "100%"
@@ -51356,24 +51315,26 @@ import {
 import { EuiIcon as EuiIcon5 } from "@elastic/eui";
 
 // src/components/WfoPydanticForm/fields/WfoArrayField/styles.ts
-import { css as css38 } from "@emotion/react";
+import { css as css37 } from "@emotion/react";
 var getWfoArrayFieldStyles = () => {
-  const container = css38({
+  const container = css37({
+    border: "thin solid #eee",
     padding: "1rem",
     display: "flex",
     flexDirection: "column",
     flexGrow: 1
   });
-  const fieldWrapper = css38({
+  const fieldWrapper = css37({
     display: "flex",
     gap: "10px",
     alignItems: "center"
   });
-  const minusButton = css38({
+  const minusButton = css37({
     width: "40px",
-    cursor: "pointer"
+    cursor: "pointer",
+    marginBottom: "12px"
   });
-  const plusButtonWrapper = css38({
+  const plusButtonWrapper = css37({
     display: "flex",
     cursor: "pointer",
     justifyContent: "end"
@@ -51425,9 +51386,9 @@ var PlusButton = ({
 var WfoArrayField = ({
   pydanticFormField
 }) => {
-  const { config, rhf } = usePydanticFormContext5();
+  const { config, reactHookForm } = usePydanticFormContext5();
   const disabled = pydanticFormField.attributes?.disabled || false;
-  const { control } = rhf;
+  const { control } = reactHookForm;
   const { id: arrayName, arrayItem } = pydanticFormField;
   const { minItems, maxItems } = pydanticFormField.validations;
   const { container, fieldWrapper } = getWfoArrayFieldStyles();
@@ -51512,10 +51473,10 @@ var WfoRadio = ({
 
 // src/components/WfoPydanticForm/fields/WfoInteger.tsx
 import { EuiFieldNumber as EuiFieldNumber2 } from "@elastic/eui";
-import { css as css39 } from "@emotion/react";
+import { css as css38 } from "@emotion/react";
 import { jsx as jsx216 } from "@emotion/react/jsx-runtime";
 var getFormFieldsBaseStyle2 = ({ theme }) => {
-  const formFieldBaseStyle = css39({
+  const formFieldBaseStyle = css38({
     backgroundColor: theme.colors.body,
     color: theme.colors.text,
     "&:focus": {
@@ -51549,11 +51510,12 @@ var WfoInteger = ({
 };
 
 // src/components/WfoPydanticForm/fields/WfoReactSelect/WfoReactSelect.tsx
+import React67, { useEffect as useEffect30 } from "react";
 import ReactSelect5, { components } from "react-select";
 import { EuiButtonIcon as EuiButtonIcon11 } from "@elastic/eui";
 
 // src/components/WfoPydanticForm/fields/WfoReactSelect/styles.ts
-import { css as css40 } from "@emotion/react";
+import { css as css39 } from "@emotion/react";
 var getWfoReactSelectStyles = (wfoTheme) => {
   const { theme } = wfoTheme;
   const reactSelectInnerComponentStyles = {
@@ -51591,15 +51553,15 @@ var getWfoReactSelectStyles = (wfoTheme) => {
       backgroundColor: theme.colors.lightestShade
     })
   };
-  const containerStyle = css40({
+  const containerStyle = css39({
     display: "flex",
     flexDirection: "row",
     alignItems: "center"
   });
-  const reactSelectStyle = css40({
+  const reactSelectStyle = css39({
     width: "100%"
   });
-  const refreshButtonStyle = css40({
+  const refreshButtonStyle = css39({
     marginRight: theme.base / 2,
     cursor: "pointer"
   });
@@ -51624,9 +51586,16 @@ var WfoReactSelect = ({
   hasError = false,
   refetch
 }) => {
-  const selectedValue = options.find(
+  useEffect30(() => {
+    const selectedValue2 = options.find(
+      (option) => option.value === value
+    );
+    setSelectedValue(selectedValue2 || null);
+  }, [options, value]);
+  const initialValue = options.find(
     (option) => option.value === value
   );
+  const [selectedValue, setSelectedValue] = React67.useState(initialValue || null);
   const {
     reactSelectInnerComponentStyles,
     containerStyle,
@@ -51664,8 +51633,14 @@ var WfoReactSelect = ({
         id,
         inputId: `${id}.search`,
         onChange: (option) => {
-          const selectedValue2 = option?.value;
-          onChange(selectedValue2);
+          if (option === null) {
+            setSelectedValue(null);
+            onChange(void 0);
+          } else {
+            const selectedValue2 = option?.value;
+            setSelectedValue(option);
+            onChange(selectedValue2);
+          }
         },
         css: reactSelectStyle,
         isLoading,
@@ -51707,7 +51682,7 @@ var WfoDropdown = ({
 };
 
 // src/components/WfoPydanticForm/fields/WfoMultiCheckboxField.tsx
-import { useEffect as useEffect30, useState as useState44 } from "react";
+import { useEffect as useEffect31, useState as useState44 } from "react";
 import { EuiCheckboxGroup } from "@elastic/eui";
 import { jsx as jsx219 } from "@emotion/react/jsx-runtime";
 var WfoMultiCheckboxField = ({
@@ -51715,7 +51690,7 @@ var WfoMultiCheckboxField = ({
   onChange,
   value
 }) => {
-  useEffect30(() => {
+  useEffect31(() => {
     const getInitialMap = () => {
       const initialIdMap = (value || []).reduce(
         (idMap, id2) => {
@@ -51994,6 +51969,7 @@ var WfoPydanticForm = ({
       labelProvider: pydanticLabelProvider,
       rowRenderer: Row,
       customTranslations,
+      loadingComponent: /* @__PURE__ */ jsx220(WfoLoading, {}),
       locale: getLocale()
     };
   }, [
@@ -52006,17 +51982,16 @@ var WfoPydanticForm = ({
   return /* @__PURE__ */ jsx220(
     PydanticForm2,
     {
-      id: processName,
+      formKey: processName,
       onSuccess,
       onCancel: handleCancel,
-      loadingComponent: /* @__PURE__ */ jsx220(WfoLoading, {}),
       config
     }
   );
 };
 
 // src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
-import React70, { useState as useState46 } from "react";
+import React71, { useState as useState46 } from "react";
 import { useTranslations as useTranslations63 } from "next-intl";
 import {
   EuiButton as EuiButton12,
@@ -52030,36 +52005,36 @@ import {
 import { EuiFlexItem as EuiFlexItem25 } from "@elastic/eui";
 
 // src/components/WfoWorkflowSteps/styles.ts
-import { css as css41 } from "@emotion/react";
+import { css as css40 } from "@emotion/react";
 var getWorkflowStepsStyles = ({
   theme,
   toSecondaryColor
 }) => {
   const SPACE_BETWEEN_STEPS = theme.base * 1.5;
-  const stepSpacerStyle = css41({
+  const stepSpacerStyle = css40({
     borderLeft: `1px solid ${theme.colors.darkShade}`,
     height: `${SPACE_BETWEEN_STEPS}px`,
     marginLeft: "36px"
   });
-  const stepRowStyle = css41({
+  const stepRowStyle = css40({
     flexGrow: 1,
     alignItems: "center",
     justifyContent: "flex-end"
   });
-  const stepListHeaderStyle = css41({
+  const stepListHeaderStyle = css40({
     marginBottom: "24px",
     marginTop: "60px",
     alignItems: "flex-end"
   });
-  const stepListContentStyle = css41({
+  const stepListContentStyle = css40({
     flexDirection: "row",
     alignItems: "center"
   });
-  const stepListContentBoldTextStyle = css41({
+  const stepListContentBoldTextStyle = css40({
     fontSize: theme.size.base,
     fontWeight: theme.font.weight.bold
   });
-  const stepListContentAnchorStyle = css41({
+  const stepListContentAnchorStyle = css40({
     marginTop: 2,
     marginLeft: 0,
     fontSize: theme.size.m,
@@ -52067,7 +52042,7 @@ var getWorkflowStepsStyles = ({
     color: theme.colors.link,
     cursor: "pointer"
   });
-  const stepListOptionsContainerStyle = css41({
+  const stepListOptionsContainerStyle = css40({
     flexGrow: 0
   });
   const stepStateIcon = {
@@ -52083,36 +52058,36 @@ var getWorkflowStepsStyles = ({
     color: theme.colors.disabled,
     fontWeight: theme.font.weight.semiBold
   };
-  const stepStateSuccessIconStyle = css41({
+  const stepStateSuccessIconStyle = css40({
     ...stepStateIcon,
     backgroundColor: toSecondaryColor(theme.colors.primary)
   });
-  const stepStateSuspendIconStyle = css41({
+  const stepStateSuspendIconStyle = css40({
     ...stepStateIcon,
     backgroundColor: toSecondaryColor(theme.colors.warning)
   });
-  const stepStatePendingIconStyle = css41({
+  const stepStatePendingIconStyle = css40({
     ...stepStateIcon,
     backgroundColor: toSecondaryColor(theme.colors.darkShade)
   });
-  const stepStateFailedIconStyle = css41({
+  const stepStateFailedIconStyle = css40({
     ...stepStateIcon,
     backgroundColor: toSecondaryColor(theme.colors.danger)
   });
-  const stepHeaderRightStyle = css41({
+  const stepHeaderRightStyle = css40({
     alignItems: "center"
   });
-  const stepEmailContainerStyle = css41({
+  const stepEmailContainerStyle = css40({
     paddingLeft: 24,
     width: 600,
     marginTop: 0
   });
-  const getStepHeaderStyle = (isClickable) => css41({
+  const getStepHeaderStyle = (isClickable) => css40({
     gap: 0,
     alignItems: "center",
     cursor: isClickable ? "pointer" : "default"
   });
-  const getStepToggleExpandStyle = (isVisible) => css41({
+  const getStepToggleExpandStyle = (isVisible) => css40({
     marginRight: theme.base / 2,
     visibility: isVisible ? "visible" : "hidden"
   });
@@ -52304,7 +52279,7 @@ var WfoStepForm = ({
 
 // src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
 import { Fragment as Fragment51, jsx as jsx223, jsxs as jsxs115 } from "@emotion/react/jsx-runtime";
-var WfoStep = React70.forwardRef(
+var WfoStep = React71.forwardRef(
   ({
     stepListItem,
     onToggleStepDetail,
@@ -52463,9 +52438,9 @@ var WfoStep = React70.forwardRef(
 WfoStep.displayName = "WfoStep";
 
 // src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx
-import React71, { useImperativeHandle as useImperativeHandle2, useRef as useRef12 } from "react";
+import React72, { useImperativeHandle as useImperativeHandle2, useRef as useRef12 } from "react";
 import { Fragment as Fragment52, jsx as jsx224, jsxs as jsxs116 } from "@emotion/react/jsx-runtime";
-var WfoStepList = React71.forwardRef(
+var WfoStepList = React72.forwardRef(
   ({
     stepListItems,
     showHiddenKeys,
@@ -52545,12 +52520,12 @@ var WfoStepList = React71.forwardRef(
 WfoStepList.displayName = "WfoStepList";
 
 // src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx
-import React73, { useEffect as useEffect32, useState as useState48 } from "react";
+import React74, { useEffect as useEffect33, useState as useState48 } from "react";
 import { useTranslations as useTranslations66 } from "next-intl";
 
 // src/components/WfoDiff/WfoDiff.tsx
 var refractor = __toESM(require_refractor(), 1);
-import { useCallback as useCallback7, useEffect as useEffect31, useMemo as useMemo5, useState as useState47 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect32, useMemo as useMemo5, useState as useState47 } from "react";
 import { Diff, Hunk, parseDiff, tokenize } from "react-diff-view";
 import "react-diff-view/style/index.css";
 import { useTranslations as useTranslations64 } from "next-intl";
@@ -52565,8 +52540,8 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoDiff/styles.ts
-import { shade as shade2, tint as tint4 } from "@elastic/eui";
-import { css as css42 } from "@emotion/react";
+import { shade as shade2, tint as tint3 } from "@elastic/eui";
+import { css as css41 } from "@emotion/react";
 var getWfoDiffStyles = ({
   theme,
   toSecondaryColor,
@@ -52575,10 +52550,10 @@ var getWfoDiffStyles = ({
   const SHADE_FACTOR = 0.5;
   const TINT_FACTOR = 0.65;
   const insertGutterColor = toSecondaryColor(theme.colors.success);
-  const insertCodeColor = isDarkThemeActive ? shade2(insertGutterColor, SHADE_FACTOR) : tint4(insertGutterColor, TINT_FACTOR);
+  const insertCodeColor = isDarkThemeActive ? shade2(insertGutterColor, SHADE_FACTOR) : tint3(insertGutterColor, TINT_FACTOR);
   const deleteColor = toSecondaryColor(theme.colors.danger);
-  const deleteSecondaryColor = isDarkThemeActive ? shade2(deleteColor, SHADE_FACTOR) : tint4(deleteColor, TINT_FACTOR);
-  const diffStyle = css42({
+  const deleteSecondaryColor = isDarkThemeActive ? shade2(deleteColor, SHADE_FACTOR) : tint3(deleteColor, TINT_FACTOR);
+  const diffStyle = css41({
     ".diff-code-insert": {
       backgroundColor: insertCodeColor
     },
@@ -52636,7 +52611,7 @@ var WfoDiff = ({ oldText, newText, syntax }) => {
       return void 0;
     }
   }, [hunks, syntax]);
-  useEffect31(() => {
+  useEffect32(() => {
     updateDiffText();
   }, [updateDiffText, showFull]);
   return /* @__PURE__ */ jsxs117("div", { children: [
@@ -52686,9 +52661,9 @@ import { useTranslations as useTranslations65 } from "next-intl";
 import { EuiCodeBlock, EuiText as EuiText39 } from "@elastic/eui";
 
 // src/components/WfoWorkflowSteps/WfoTraceback/styles.ts
-import { css as css43 } from "@emotion/react";
-var getStyles12 = ({ theme }) => {
-  const codeBlockStyle = css43({
+import { css as css42 } from "@emotion/react";
+var getStyles10 = ({ theme }) => {
+  const codeBlockStyle = css42({
     marginTop: theme.size.m,
     marginBottom: theme.size.l,
     borderRadius: theme.border.radius.medium
@@ -52701,7 +52676,7 @@ var getStyles12 = ({ theme }) => {
 // src/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback.tsx
 import { Fragment as Fragment53, jsx as jsx226, jsxs as jsxs118 } from "@emotion/react/jsx-runtime";
 var WfoTraceback = ({ children }) => {
-  const { codeBlockStyle } = useWithOrchestratorTheme(getStyles12);
+  const { codeBlockStyle } = useWithOrchestratorTheme(getStyles10);
   const t = useTranslations65("processes.steps");
   return /* @__PURE__ */ jsxs118(Fragment53, { children: [
     /* @__PURE__ */ jsx226(EuiText39, { children: /* @__PURE__ */ jsx226("h3", { children: t("traceback") }) }),
@@ -52733,7 +52708,7 @@ var WfoProcessSubscriptionDelta = ({
     }
   );
 };
-var WfoWorkflowStepList = React73.forwardRef(
+var WfoWorkflowStepList = React74.forwardRef(
   ({
     steps = [],
     lastStatus,
@@ -52769,7 +52744,7 @@ var WfoWorkflowStepList = React73.forwardRef(
         };
       });
     };
-    useEffect32(() => {
+    useEffect33(() => {
       setStepListItems(
         (previousStepListItems) => persistStepListItemState(
           previousStepListItems,
@@ -52864,9 +52839,9 @@ import {
 import { EuiText as EuiText40 } from "@elastic/eui";
 
 // src/components/WfoTextAnchor/styles.ts
-import { css as css44 } from "@emotion/react";
-var getStyles13 = ({ theme }) => {
-  const textAnchorStyle = css44({
+import { css as css43 } from "@emotion/react";
+var getStyles11 = ({ theme }) => {
+  const textAnchorStyle = css43({
     marginTop: theme.size.xxs,
     marginLeft: 0,
     fontSize: theme.size.m,
@@ -52882,7 +52857,7 @@ var getStyles13 = ({ theme }) => {
 // src/components/WfoTextAnchor/WfoTextAnchor.tsx
 import { jsx as jsx228 } from "@emotion/react/jsx-runtime";
 var WfoTextAnchor = ({ text, onClick }) => {
-  const { textAnchorStyle } = useWithOrchestratorTheme(getStyles13);
+  const { textAnchorStyle } = useWithOrchestratorTheme(getStyles11);
   return /* @__PURE__ */ jsx228(EuiText40, { onClick, css: textAnchorStyle, children: text });
 };
 
@@ -53108,7 +53083,7 @@ var WfoStartProcessPage = ({
     },
     [startProcess, processName, startProcessPayload, isTask, router]
   );
-  useEffect33(() => {
+  useEffect34(() => {
     if (processName && processName !== "modify_note") {
       const clientResultCallback = (json) => {
         setForm({
@@ -53225,7 +53200,7 @@ import {
   EuiTabs as EuiTabs3,
   EuiText as EuiText45
 } from "@elastic/eui";
-import { css as css45 } from "@emotion/react";
+import { css as css44 } from "@emotion/react";
 
 // src/components/WfoSettings/WfoAoStackStatus.tsx
 import { useTranslations as useTranslations70 } from "next-intl";
@@ -53306,7 +53281,7 @@ var WfoEnvSettings = () => {
                 {
                   fontSize: "m",
                   paddingSize: "m",
-                  css: css45({
+                  css: css44({
                     background: theme.colors.lightShade
                   }),
                   children: showVariables
@@ -53451,7 +53426,7 @@ var WfoSubscriptionDetailPage = () => {
 };
 
 // src/pages/subscriptions/WfoSubscriptionsListPage.tsx
-import { useEffect as useEffect34, useState as useState51 } from "react";
+import { useEffect as useEffect35, useState as useState51 } from "react";
 import { useTranslations as useTranslations73 } from "next-intl";
 import { StringParam as StringParam4, useQueryParam as useQueryParam3, withDefault as withDefault4 } from "use-query-params";
 import { EuiSpacer as EuiSpacer23 } from "@elastic/eui";
@@ -53462,7 +53437,7 @@ var WfoSubscriptionsListPage = () => {
   const getStoredTableConfig = useStoredTableConfig(
     SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY
   );
-  useEffect34(() => {
+  useEffect35(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -53523,7 +53498,7 @@ var WfoSubscriptionsListPage = () => {
 };
 
 // src/pages/tasks/WfoTasksListPage.tsx
-import { useContext as useContext11, useEffect as useEffect35, useState as useState52 } from "react";
+import { useContext as useContext11, useEffect as useEffect36, useState as useState52 } from "react";
 import { useTranslations as useTranslations74 } from "next-intl";
 import Link11 from "next/link";
 import { useRouter as useRouter12 } from "next/router";
@@ -53609,7 +53584,7 @@ var WfoTasksListPage = () => {
   const { showConfirmDialog } = useContext11(ConfirmationDialogContext);
   const [retryAllProcesses] = useRetryAllProcessesMutation();
   const { isEngineRunningNow } = useCheckEngineStatus();
-  useEffect35(() => {
+  useEffect36(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -53710,7 +53685,7 @@ var WfoTasksListPage = () => {
 };
 
 // src/pages/workflows/WfoWorkflowsListPage.tsx
-import { useEffect as useEffect36, useState as useState53 } from "react";
+import { useEffect as useEffect37, useState as useState53 } from "react";
 import { useTranslations as useTranslations75 } from "next-intl";
 import { useRouter as useRouter13 } from "next/router";
 import { StringParam as StringParam6, useQueryParam as useQueryParam5, withDefault as withDefault6 } from "use-query-params";
@@ -53791,7 +53766,7 @@ var WfoWorkflowsListPage = () => {
   const selectedWorkflowsListTab = getWorkflowsListTabTypeFromString(activeTab);
   const localStorageKey = selectedWorkflowsListTab === "ACTIVE" /* ACTIVE */ ? ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY : COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY;
   const getStoredTableConfig = useStoredTableConfig(localStorageKey);
-  useEffect36(() => {
+  useEffect37(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -54129,13 +54104,13 @@ var WfoProcessesList = ({
 import { EuiCodeBlock as EuiCodeBlock3 } from "@elastic/eui";
 
 // src/components/WfoJsonCodeBlock/styles.ts
-import { css as css46 } from "@emotion/react";
-var getStyles14 = ({ theme }) => {
-  const euiCodeBlockStyle = css46({
+import { css as css45 } from "@emotion/react";
+var getStyles12 = ({ theme }) => {
+  const euiCodeBlockStyle = css45({
     marginTop: 10,
     borderRadius: theme.border.radius.medium
   });
-  const euiBasicCodeBlockStyle = css46({
+  const euiBasicCodeBlockStyle = css45({
     backgroundColor: "inherit",
     ".euiCodeBlock__pre": {
       paddingTop: 0,
@@ -54158,7 +54133,7 @@ var WfoJsonCodeBlock = ({
   data,
   isBasicStyle = false
 }) => {
-  const { euiCodeBlockStyle, euiBasicCodeBlockStyle } = useWithOrchestratorTheme(getStyles14);
+  const { euiCodeBlockStyle, euiBasicCodeBlockStyle } = useWithOrchestratorTheme(getStyles12);
   const json = JSON.stringify(data, null, 4);
   return /* @__PURE__ */ jsx240(
     EuiCodeBlock3,
@@ -54184,10 +54159,10 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoSettings/styles.ts
-import { css as css47 } from "@emotion/react";
+import { css as css46 } from "@emotion/react";
 var getWfoFlushSettingsStyle = (wfoTheme) => {
   const { theme } = wfoTheme;
-  const comboboxStyle = css47({
+  const comboboxStyle = css46({
     // .euiComboBox is needed to override eui styling (more specific)
     "&.euiComboBox": {
       ".euiComboBox__inputWrap": {
@@ -54427,9 +54402,9 @@ var WfoInsyncIcon = ({ inSync }) => {
 };
 
 // src/components/WfoErrorBoundary/WfoErrorBoundary.tsx
-import React81 from "react";
+import React82 from "react";
 import { jsx as jsx248, jsxs as jsxs134 } from "@emotion/react/jsx-runtime";
-var WfoErrorBoundary = class extends React81.Component {
+var WfoErrorBoundary = class extends React82.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -54459,9 +54434,9 @@ var WfoErrorBoundary = class extends React81.Component {
 import { EuiFlexGroup as EuiFlexGroup29 } from "@elastic/eui";
 
 // src/components/WfoNoResults/styles.ts
-import { css as css48 } from "@emotion/react";
-var getStyles15 = ({ theme }) => {
-  const panelStyle = css48({
+import { css as css47 } from "@emotion/react";
+var getStyles13 = ({ theme }) => {
+  const panelStyle = css47({
     display: "flex",
     padding: theme.base * 2,
     flexDirection: "row",
@@ -54482,7 +54457,7 @@ var getStyles15 = ({ theme }) => {
 // src/components/WfoNoResults/WfoNoResults.tsx
 import { jsxs as jsxs135 } from "@emotion/react/jsx-runtime";
 var WfoNoResults = ({ text, icon }) => {
-  const { panelStyle } = useWithOrchestratorTheme(getStyles15);
+  const { panelStyle } = useWithOrchestratorTheme(getStyles13);
   return /* @__PURE__ */ jsxs135(EuiFlexGroup29, { css: panelStyle, children: [
     icon,
     " ",
@@ -54825,18 +54800,18 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoSummary/WfoSummaryCardHeader/styles.ts
-import { css as css49 } from "@emotion/react";
+import { css as css48 } from "@emotion/react";
 var getWfoSummaryCardHeaderStyles = ({ theme }) => {
-  const avatarStyle = css49({
+  const avatarStyle = css48({
     maxHeight: theme.base * 3,
     maxWidth: theme.base * 3
   });
-  const totalSectionStyle = css49({
+  const totalSectionStyle = css48({
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between"
   });
-  const valueStyle = css49({
+  const valueStyle = css48({
     fontSize: theme.size.l,
     fontWeight: theme.font.weight.semiBold
   });
@@ -54911,23 +54886,23 @@ var WfoOptionalLink = ({
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/styles.ts
-import { css as css50 } from "@emotion/react";
+import { css as css49 } from "@emotion/react";
 var getWfoSummaryCardListStyles = ({ theme }) => {
-  const listContainerStyle = css50({
+  const listContainerStyle = css49({
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between",
     flexGrow: 1,
     borderColor: theme.colors.lightShade
   });
-  const listHeaderStyle = css50({
+  const listHeaderStyle = css49({
     fontWeight: theme.font.weight.semiBold
   });
-  const listStyle = css50({
+  const listStyle = css49({
     height: theme.base * 20,
     overflow: "auto"
   });
-  const listItemContainerStyle = css50({
+  const listItemContainerStyle = css49({
     paddingBlock: theme.size.m,
     ".highlight-icon": {
       visibility: "hidden"
@@ -54936,13 +54911,13 @@ var getWfoSummaryCardListStyles = ({ theme }) => {
       visibility: "visible"
     }
   });
-  const listItemTitleStyle = css50({
+  const listItemTitleStyle = css49({
     fontWeight: theme.font.weight.medium
   });
-  const listItemSubtitleStyle = css50({
+  const listItemSubtitleStyle = css49({
     fontWeight: theme.font.weight.regular
   });
-  const listItemHighlightIconStyle = css50({
+  const listItemHighlightIconStyle = css49({
     visibility: "hidden"
   });
   return {
@@ -55062,9 +55037,9 @@ var WfoSummaryCards = ({ children }) => {
 import { EuiFlexItem as EuiFlexItem38, EuiSpacer as EuiSpacer29 } from "@elastic/eui";
 
 // src/components/WfoSummary/styles.ts
-import { css as css51 } from "@emotion/react";
+import { css as css50 } from "@emotion/react";
 var getWfoSummaryCardsStyles = ({ theme }) => {
-  const cardContainerStyle = css51({
+  const cardContainerStyle = css50({
     height: theme.base * 36,
     minWidth: theme.base * 25
   });
@@ -55700,9 +55675,9 @@ var WfoSubscriptionDetailNoteEdit = ({ subscriptionId, onlyShowOnHover = false }
 import { EuiFlexItem as EuiFlexItem39 } from "@elastic/eui";
 
 // src/components/WfoTableCodeBlock/styles.ts
-import { css as css52 } from "@emotion/react";
-var getStyles16 = ({ theme }) => {
-  const tableCodeBlockMarginStyle = css52({
+import { css as css51 } from "@emotion/react";
+var getStyles14 = ({ theme }) => {
+  const tableCodeBlockMarginStyle = css51({
     margin: theme.size.base,
     marginTop: theme.size.l,
     marginRight: theme.size.l
@@ -55717,7 +55692,7 @@ import { jsx as jsx268 } from "@emotion/react/jsx-runtime";
 var WfoTableCodeBlock = ({
   stepState: data
 }) => {
-  const { tableCodeBlockMarginStyle } = useWithOrchestratorTheme(getStyles16);
+  const { tableCodeBlockMarginStyle } = useWithOrchestratorTheme(getStyles14);
   const keyValues = Object.entries(data).map(
     (entry) => {
       const key = entry[0];
@@ -56149,8 +56124,8 @@ var en_GB_default = {
   tasks: {
     page: {
       taskName: "Task",
-      rerunAll: "Rerun all",
-      rerunAllQuestion: "Are you sure you want to rerun all failed tasks?"
+      rerunAll: "Re-try all tasks",
+      rerunAllQuestion: "Are you sure you want to re-try all failed tasks?"
     },
     tabs: {
       active: "Active",
@@ -56612,8 +56587,8 @@ var nl_NL_default = {
   tasks: {
     page: {
       taskName: "Taak",
-      rerunAll: "Alles opnieuw uitvoeren",
-      rerunAllQuestion: "Weet u zeker dat u alle gefaalde taken opnieuw wilt uitvoeren?"
+      rerunAll: "Alle taken herstarten",
+      rerunAllQuestion: "Weet u zeker dat u alle gefaalde taken opnieuw wilt herstarten?"
     },
     tabs: {
       active: "Actief",
@@ -56679,7 +56654,8 @@ var nl_NL_default = {
   hamburgerMenu: {
     support: "Support",
     softwareVersions: "Software Versies",
-    logout: "Logout"
+    logout: "Logout",
+    aoStatusPage: "A&O applicatie status pagina"
   }
 };
 
@@ -57106,7 +57082,6 @@ export {
   getSortDirectionFromString,
   getStatusBadgeColor,
   getStepContent,
-  getStyles11 as getStyles,
   getTableConfigFromLocalStorage,
   getTasksListTabTypeFromString,
   getTotalNumberOfRows,
@@ -57186,6 +57161,7 @@ export {
   subscriptionListQuery,
   subscriptionListSummaryQuery,
   subscriptionListTabs,
+  summaryFieldStyles,
   tasksQuery,
   toObjectWithSerializedValues,
   toObjectWithSortedKeys,