@orchestrator-ui/orchestrator-ui-components 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,14 +1,11 @@
 // src/components/Badges/Badge/Badge.tsx
-import React from "react";
 import { EuiBadge, EuiText } from "@elastic/eui";
+import { jsx } from "@emotion/react/jsx-runtime";
 var Badge = ({
   textColor,
   children,
   ...restProps
-}) => /* @__PURE__ */ React.createElement(EuiBadge, { ...restProps }, /* @__PURE__ */ React.createElement(EuiText, { color: textColor, size: "xs" }, /* @__PURE__ */ React.createElement("b", null, children)));
-
-// src/components/Badges/WFOStatusBadge/WFOStatusBadge.tsx
-import React3 from "react";
+}) => /* @__PURE__ */ jsx(EuiBadge, { ...restProps, children: /* @__PURE__ */ jsx(EuiText, { color: textColor, size: "xs", children: /* @__PURE__ */ jsx("b", { children }) }) });
 
 // src/hooks/useQueryWithGraphql.ts
 import { useContext } from "react";
@@ -16,7 +13,6 @@ import { GraphQLClient } from "graphql-request";
 import { useQuery } from "react-query";
 
 // src/contexts/OrchestratorConfigContext.tsx
-import React2 from "react";
 import { createContext } from "react";
 
 // src/hooks/useOrchestratorConfig.ts
@@ -34,6 +30,7 @@ var useOrchestratorConfig = (initialOrchestratorConfig) => {
 };
 
 // src/contexts/OrchestratorConfigContext.tsx
+import { jsx as jsx2 } from "@emotion/react/jsx-runtime";
 var OrchestratorConfigContext = createContext({
   engineStatusEndpoint: "",
   environmentName: "",
@@ -48,7 +45,7 @@ var OrchestratorConfigProvider = ({ initialOrchestratorConfig, children }) => {
   const { orchestratorConfig } = useOrchestratorConfig(
     initialOrchestratorConfig
   );
-  return /* @__PURE__ */ React2.createElement(OrchestratorConfigContext.Provider, { value: orchestratorConfig }, children);
+  return /* @__PURE__ */ jsx2(OrchestratorConfigContext.Provider, { value: orchestratorConfig, children });
 };
 
 // src/hooks/useQueryWithGraphql.ts
@@ -190,7 +187,7 @@ var useProcessesAttention = () => {
   );
   const initialData = {
     type: "process",
-    title: "Processes that need attention 123",
+    title: "Processes that need attention",
     items: [],
     buttonName: "Show all active processes"
   };
@@ -301,6 +298,7 @@ var useDataDisplayParams = (initialParams) => {
 };
 
 // src/components/Badges/WFOStatusBadge/WFOStatusBadge.tsx
+import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
 var WFOStatusBadge = ({ status }) => {
   const { theme, toSecondaryColor } = useOrchestratorTheme();
   const getBadgeColorFromStatus = (status2) => {
@@ -331,27 +329,27 @@ var WFOStatusBadge = ({ status }) => {
     }
   };
   const { badgeColor, textColor } = getBadgeColorFromStatus(status);
-  return /* @__PURE__ */ React3.createElement(Badge, { textColor, color: badgeColor }, status);
+  return /* @__PURE__ */ jsx3(Badge, { textColor, color: badgeColor, children: status });
 };
 
 // src/components/Badges/WFOProductBlockBadge/WFOProductBlockBadge.tsx
-import React4 from "react";
+import { jsx as jsx4 } from "@emotion/react/jsx-runtime";
 var WFOProductBlockBadge = ({
   children
 }) => {
   const { theme, toSecondaryColor } = useOrchestratorTheme();
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ jsx4(
     Badge,
     {
       textColor: theme.colors.link,
-      color: toSecondaryColor(theme.colors.primary)
-    },
-    children
+      color: toSecondaryColor(theme.colors.primary),
+      children
+    }
   );
 };
 
 // src/components/Badges/ProcessStatusBadge/ProcessStatusBadge.tsx
-import React5 from "react";
+import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
 var ProcessStatusBadge = ({
   processStatus
 }) => {
@@ -377,15 +375,14 @@ var ProcessStatusBadge = ({
     }
   };
   const { badgeColor, textColor } = getBadgeColorFromProcessStatus(processStatus);
-  return /* @__PURE__ */ React5.createElement(Badge, { textColor, color: badgeColor }, processStatus);
+  return /* @__PURE__ */ jsx5(Badge, { textColor, color: badgeColor, children: processStatus });
 };
 
 // src/components/Badges/FailedTasksBadge/FailedTasksBadge.tsx
-import React8 from "react";
 import { EuiToolTip } from "@elastic/eui";
 
 // src/components/Badges/HeaderBadge/HeaderBadge.tsx
-import React6 from "react";
+import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
 var HeaderBadge = ({
   children,
   ...restProps
@@ -398,45 +395,48 @@ var HeaderBadge = ({
     height: 24,
     display: "flex"
   };
-  return /* @__PURE__ */ React6.createElement(Badge, { ...restProps, css: css2 }, children);
+  return /* @__PURE__ */ jsx6(Badge, { ...restProps, css: css2, children });
 };
 
 // src/icons/XCircleFill.tsx
-import React7 from "react";
+import { jsx as jsx7, jsxs } from "@emotion/react/jsx-runtime";
 var XCircleFill = ({
   width = 24,
   height = 24,
   color = "#000000"
-}) => /* @__PURE__ */ React7.createElement(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width,
     height,
     viewBox: "0 0 24 24",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ React7.createElement("title", null, "icon/x-circle-fill"),
-  /* @__PURE__ */ React7.createElement(
-    "g",
-    {
-      id: "Symbols",
-      stroke: "none",
-      strokeWidth: "1",
-      fill: "none",
-      fillRule: "evenodd"
-    },
-    /* @__PURE__ */ React7.createElement("g", { id: "icon/x-circle-fill", fill: color }, /* @__PURE__ */ React7.createElement(
-      "path",
-      {
-        d: "M12,20 C16.4183,20 20,16.4183 20,12 C20,7.58172 16.4183,4 12,4 C7.58172,4 4,7.58172 4,12 C4,16.4183 7.58172,20 12,20 Z M10.70711,9.29289 C10.31658,8.90237 9.68342,8.90237 9.29289,9.29289 C8.90237,9.68342 8.90237,10.31658 9.29289,10.70711 L10.58579,12 L9.29289,13.2929 C8.90237,13.6834 8.90237,14.3166 9.29289,14.7071 C9.68342,15.0976 10.31658,15.0976 10.70711,14.7071 L12,13.4142 L13.2929,14.7071 C13.6834,15.0976 14.3166,15.0976 14.7071,14.7071 C15.0976,14.3166 15.0976,13.6834 14.7071,13.2929 L13.4142,12 L14.7071,10.70711 C15.0976,10.31658 15.0976,9.68342 14.7071,9.29289 C14.3166,8.90237 13.6834,8.90237 13.2929,9.29289 L12,10.58579 L10.70711,9.29289 Z",
-        id: "Shape"
-      }
-    ))
-  )
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx7("title", { children: "icon/x-circle-fill" }),
+      /* @__PURE__ */ jsx7(
+        "g",
+        {
+          id: "Symbols",
+          stroke: "none",
+          strokeWidth: "1",
+          fill: "none",
+          fillRule: "evenodd",
+          children: /* @__PURE__ */ jsx7("g", { id: "icon/x-circle-fill", fill: color, children: /* @__PURE__ */ jsx7(
+            "path",
+            {
+              d: "M12,20 C16.4183,20 20,16.4183 20,12 C20,7.58172 16.4183,4 12,4 C7.58172,4 4,7.58172 4,12 C4,16.4183 7.58172,20 12,20 Z M10.70711,9.29289 C10.31658,8.90237 9.68342,8.90237 9.29289,9.29289 C8.90237,9.68342 8.90237,10.31658 9.29289,10.70711 L10.58579,12 L9.29289,13.2929 C8.90237,13.6834 8.90237,14.3166 9.29289,14.7071 C9.68342,15.0976 10.31658,15.0976 10.70711,14.7071 L12,13.4142 L13.2929,14.7071 C13.6834,15.0976 14.3166,15.0976 14.7071,14.7071 C15.0976,14.3166 15.0976,13.6834 14.7071,13.2929 L13.4142,12 L14.7071,10.70711 C15.0976,10.31658 15.0976,9.68342 14.7071,9.29289 C14.3166,8.90237 13.6834,8.90237 13.2929,9.29289 L12,10.58579 L10.70711,9.29289 Z",
+              id: "Shape"
+            }
+          ) })
+        }
+      )
+    ]
+  }
 );
 
 // src/components/Badges/FailedTasksBadge/FailedTasksBadge.tsx
+import { Fragment, jsx as jsx8, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
 var getTaskCountsSummary = (processStatusCounts) => {
   const failed = (processStatusCounts == null ? void 0 : processStatusCounts.task_counts.failed) || 0;
   const inconsistentData = (processStatusCounts == null ? void 0 : processStatusCounts.task_counts.inconsistent_data) || 0;
@@ -452,92 +452,108 @@ var FailedTasksBadge = () => {
   const { theme } = useOrchestratorTheme();
   const { data: processStatusCounts } = useProcessStatusCountsQuery();
   const taskCountsSummary = getTaskCountsSummary(processStatusCounts);
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ jsx8(
     EuiToolTip,
     {
       position: "bottom",
-      content: /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("div", null, "Failed: ", taskCountsSummary.failed), /* @__PURE__ */ React8.createElement("div", null, "Inconsistent data: ", taskCountsSummary.inconsistentData), /* @__PURE__ */ React8.createElement("div", null, "API unavailable: ", taskCountsSummary.apiUnavailable))
-    },
-    /* @__PURE__ */ React8.createElement(
-      HeaderBadge,
-      {
-        color: theme.colors.emptyShade,
-        textColor: theme.colors.shadow,
-        iconType: () => /* @__PURE__ */ React8.createElement(XCircleFill, { color: theme.colors.danger })
-      },
-      taskCountsSummary.total
-    )
+      content: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          "Failed: ",
+          taskCountsSummary.failed
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          "Inconsistent data: ",
+          taskCountsSummary.inconsistentData
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          "API unavailable: ",
+          taskCountsSummary.apiUnavailable
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsx8(
+        HeaderBadge,
+        {
+          color: theme.colors.emptyShade,
+          textColor: theme.colors.shadow,
+          iconType: () => /* @__PURE__ */ jsx8(XCircleFill, { color: theme.colors.danger }),
+          children: taskCountsSummary.total
+        }
+      )
+    }
   );
 };
 
 // src/components/Badges/EnvironmentBadge/EnvironmentBadge.tsx
-import React9, { useContext as useContext7 } from "react";
+import { useContext as useContext7 } from "react";
+import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
 var EnvironmentBadge = () => {
   const { environmentName } = useContext7(OrchestratorConfigContext);
   const { theme, toSecondaryColor } = useOrchestratorTheme();
   if (environmentName !== "Production" /* PRODUCTION */) {
-    return /* @__PURE__ */ React9.createElement(HeaderBadge, { color: "warning", textColor: theme.colors.shadow }, environmentName);
+    return /* @__PURE__ */ jsx9(HeaderBadge, { color: "warning", textColor: theme.colors.shadow, children: environmentName });
   }
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ jsx9(
     HeaderBadge,
     {
       color: toSecondaryColor(theme.colors.primary),
-      textColor: theme.colors.primary
-    },
-    environmentName
+      textColor: theme.colors.primary,
+      children: environmentName
+    }
   );
 };
 
-// src/components/Badges/EngineStatusBadge/EngineStatusBadge.tsx
-import React11 from "react";
-
 // src/icons/StatusDotIcon.tsx
-import React10 from "react";
+import { jsx as jsx10, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var StatusDotIcon = ({
   width = 24,
   height = 24,
   color = "#000000"
-}) => /* @__PURE__ */ React10.createElement(
+}) => /* @__PURE__ */ jsxs3(
   "svg",
   {
     width,
     height,
     viewBox: "0 0 24 24",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ React10.createElement("title", null, "icon/statusdot"),
-  /* @__PURE__ */ React10.createElement(
-    "g",
-    {
-      id: "Symbols",
-      stroke: "none",
-      strokeWidth: "1",
-      fill: "none",
-      fillRule: "evenodd"
-    },
-    /* @__PURE__ */ React10.createElement("g", { id: "icon/statusdot", fill: color, fillRule: "nonzero" }, /* @__PURE__ */ React10.createElement("circle", { id: "Oval", opacity: "0.25", cx: "12", cy: "12", r: "8" }), /* @__PURE__ */ React10.createElement("circle", { id: "Oval", cx: "12", cy: "12", r: "4" }))
-  )
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx10("title", { children: "icon/statusdot" }),
+      /* @__PURE__ */ jsx10(
+        "g",
+        {
+          id: "Symbols",
+          stroke: "none",
+          strokeWidth: "1",
+          fill: "none",
+          fillRule: "evenodd",
+          children: /* @__PURE__ */ jsxs3("g", { id: "icon/statusdot", fill: color, fillRule: "nonzero", children: [
+            /* @__PURE__ */ jsx10("circle", { id: "Oval", opacity: "0.25", cx: "12", cy: "12", r: "8" }),
+            /* @__PURE__ */ jsx10("circle", { id: "Oval", cx: "12", cy: "12", r: "4" })
+          ] })
+        }
+      )
+    ]
+  }
 );
 
 // src/components/Badges/EngineStatusBadge/EngineStatusBadge.tsx
+import { jsx as jsx11 } from "@emotion/react/jsx-runtime";
 var EngineStatusBadge = () => {
   const { theme } = useOrchestratorTheme();
   const { data: engineStatus } = useEngineStatusQuery();
   const engineStatusText = (engineStatus == null ? void 0 : engineStatus.global_status) ? `Engine is ${engineStatus.global_status}` : "Engine status is unavailable";
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ jsx11(
     HeaderBadge,
     {
       color: theme.colors.emptyShade,
       textColor: theme.colors.shadow,
-      iconType: () => /* @__PURE__ */ React11.createElement(StatusDotIcon, { color: theme.colors.success })
-    },
-    engineStatusText
+      iconType: () => /* @__PURE__ */ jsx11(StatusDotIcon, { color: theme.colors.success }),
+      children: engineStatusText
+    }
   );
 };
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import React12 from "react";
 import { EuiBreadcrumbs, EuiSpacer } from "@elastic/eui";
 import { useRouter } from "next/router";
 
@@ -599,6 +615,7 @@ var removeSuffix = (value, splitChar = "?") => {
 };
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
 var Breadcrumbs = () => {
   const router = useRouter();
   const breadcrumbs = [
@@ -626,18 +643,20 @@ var Breadcrumbs = () => {
       });
     }
   });
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
-    EuiBreadcrumbs,
-    {
-      breadcrumbs,
-      truncate: false,
-      "aria-label": "Current page"
-    }
-  ), /* @__PURE__ */ React12.createElement(EuiSpacer, { size: "m" }));
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx12(
+      EuiBreadcrumbs,
+      {
+        breadcrumbs,
+        truncate: false,
+        "aria-label": "Current page"
+      }
+    ),
+    /* @__PURE__ */ jsx12(EuiSpacer, { size: "m" })
+  ] });
 };
 
 // src/components/OrchestratorPageTemplate/OrchestratorPageHeader/OrchestratorPageHeader.tsx
-import React14 from "react";
 import {
   EuiBadgeGroup,
   EuiButtonIcon,
@@ -648,83 +667,97 @@ import {
 } from "@elastic/eui";
 
 // src/icons/LogoutIcon.tsx
-import React13 from "react";
+import { jsx as jsx13, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
 var LogoutIcon = ({
   width = 24,
   height = 24,
   color = "#000000"
-}) => /* @__PURE__ */ React13.createElement(
+}) => /* @__PURE__ */ jsxs5(
   "svg",
   {
     width,
     height,
     viewBox: "0 0 24 24",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ React13.createElement("title", null, "icon/logout"),
-  /* @__PURE__ */ React13.createElement(
-    "g",
-    {
-      id: "Symbols",
-      stroke: "none",
-      strokeWidth: "1",
-      fill: "none",
-      fillRule: "evenodd"
-    },
-    /* @__PURE__ */ React13.createElement("g", { id: "icon/logout", fill: color, fillRule: "nonzero" }, /* @__PURE__ */ React13.createElement(
-      "path",
-      {
-        d: "M10,3 C12.2091701,3 14,4.79085056 14,7 L14,8 C14,8.55228475 13.5522847,9 13,9 C12.4477153,9 12,8.55228475 12,8 L12,7 C12,5.8954149 11.1045954,5 10,5 L6,5 C4.89543475,5 4,5.89543475 4,7 L4,17 C4,18.1045954 4.8954149,19 6,19 L10,19 C11.1046153,19 12,18.1046153 12,17 L12,16 C12,15.4477153 12.4477153,15 13,15 C13.5522847,15 14,15.4477153 14,16 L14,17 C14,19.2091847 12.2091847,21 10,21 L6,21 C3.79085056,21 2,19.2091701 2,17 L2,7 C2,4.79086525 3.79086525,3 6,3 L10,3 Z M17.7071068,7.29289322 L21.7071068,11.2928932 L21.7485042,11.336853 L21.757,11.347 L21.787214,11.3832499 L21.779,11.374 L21.8036654,11.4046934 C21.8215099,11.4288693 21.8382813,11.453725 21.8539326,11.4793398 L21.8753288,11.5159379 C21.8862061,11.5357061 21.8966234,11.5561086 21.9063462,11.5769009 L21.9287745,11.628664 C21.9366843,11.6484208 21.9438775,11.6682023 21.9504533,11.6882636 C21.9552713,11.7031487 21.9599023,11.7185367 21.9641549,11.734007 C21.9701664,11.7555635 21.9753602,11.7772539 21.9798348,11.7992059 C21.9832978,11.8166247 21.9863719,11.834051 21.9889822,11.8515331 C21.9920328,11.8714753 21.9944666,11.892114 21.9962623,11.912935 C21.9978436,11.9317345 21.9989053,11.9497336 21.9994829,11.9677454 C21.9998183,11.9777892 22,11.9888734 22,12 L21.996384,12.0852242 L21.9889807,12.1489612 C21.9863719,12.165949 21.9832978,12.1833753 21.9797599,12.2007258 C21.9753602,12.2227461 21.9701664,12.2444365 21.964279,12.2658396 C21.9599023,12.2814633 21.9552713,12.2968513 21.9502619,12.3121425 C21.9438775,12.3317977 21.9366843,12.3515792 21.928896,12.3710585 L21.9063266,12.4232215 C21.8966234,12.4438914 21.8862061,12.4642939 21.8751242,12.484277 C21.8685012,12.4963944 21.8613931,12.5086131 21.8540045,12.5207088 C21.8382813,12.546275 21.8215099,12.5711307 21.8036865,12.5951593 L21.7870723,12.6170223 C21.7849289,12.6196628 21.7826279,12.6225624 21.7803112,12.625449 L21.7071068,12.7071068 L17.7071068,16.7071068 C17.3165825,17.0976311 16.6834175,17.0976311 16.2928932,16.7071068 C15.9023689,16.3165825 15.9023689,15.6834175 16.2928932,15.2928932 L18.585,13 L7,13 C6.44771525,13 6,12.5522847 6,12 C6,11.4477153 6.44771525,11 7,11 L18.585,11 L16.2928932,8.70710678 C15.9023689,8.31658249 15.9023689,7.68341751 16.2928932,7.29289322 C16.6834175,6.90236893 17.3165825,6.90236893 17.7071068,7.29289322 Z",
-        id: "Combined-Shape"
-      }
-    ))
-  )
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx13("title", { children: "icon/logout" }),
+      /* @__PURE__ */ jsx13(
+        "g",
+        {
+          id: "Symbols",
+          stroke: "none",
+          strokeWidth: "1",
+          fill: "none",
+          fillRule: "evenodd",
+          children: /* @__PURE__ */ jsx13("g", { id: "icon/logout", fill: color, fillRule: "nonzero", children: /* @__PURE__ */ jsx13(
+            "path",
+            {
+              d: "M10,3 C12.2091701,3 14,4.79085056 14,7 L14,8 C14,8.55228475 13.5522847,9 13,9 C12.4477153,9 12,8.55228475 12,8 L12,7 C12,5.8954149 11.1045954,5 10,5 L6,5 C4.89543475,5 4,5.89543475 4,7 L4,17 C4,18.1045954 4.8954149,19 6,19 L10,19 C11.1046153,19 12,18.1046153 12,17 L12,16 C12,15.4477153 12.4477153,15 13,15 C13.5522847,15 14,15.4477153 14,16 L14,17 C14,19.2091847 12.2091847,21 10,21 L6,21 C3.79085056,21 2,19.2091701 2,17 L2,7 C2,4.79086525 3.79086525,3 6,3 L10,3 Z M17.7071068,7.29289322 L21.7071068,11.2928932 L21.7485042,11.336853 L21.757,11.347 L21.787214,11.3832499 L21.779,11.374 L21.8036654,11.4046934 C21.8215099,11.4288693 21.8382813,11.453725 21.8539326,11.4793398 L21.8753288,11.5159379 C21.8862061,11.5357061 21.8966234,11.5561086 21.9063462,11.5769009 L21.9287745,11.628664 C21.9366843,11.6484208 21.9438775,11.6682023 21.9504533,11.6882636 C21.9552713,11.7031487 21.9599023,11.7185367 21.9641549,11.734007 C21.9701664,11.7555635 21.9753602,11.7772539 21.9798348,11.7992059 C21.9832978,11.8166247 21.9863719,11.834051 21.9889822,11.8515331 C21.9920328,11.8714753 21.9944666,11.892114 21.9962623,11.912935 C21.9978436,11.9317345 21.9989053,11.9497336 21.9994829,11.9677454 C21.9998183,11.9777892 22,11.9888734 22,12 L21.996384,12.0852242 L21.9889807,12.1489612 C21.9863719,12.165949 21.9832978,12.1833753 21.9797599,12.2007258 C21.9753602,12.2227461 21.9701664,12.2444365 21.964279,12.2658396 C21.9599023,12.2814633 21.9552713,12.2968513 21.9502619,12.3121425 C21.9438775,12.3317977 21.9366843,12.3515792 21.928896,12.3710585 L21.9063266,12.4232215 C21.8966234,12.4438914 21.8862061,12.4642939 21.8751242,12.484277 C21.8685012,12.4963944 21.8613931,12.5086131 21.8540045,12.5207088 C21.8382813,12.546275 21.8215099,12.5711307 21.8036865,12.5951593 L21.7870723,12.6170223 C21.7849289,12.6196628 21.7826279,12.6225624 21.7803112,12.625449 L21.7071068,12.7071068 L17.7071068,16.7071068 C17.3165825,17.0976311 16.6834175,17.0976311 16.2928932,16.7071068 C15.9023689,16.3165825 15.9023689,15.6834175 16.2928932,15.2928932 L18.585,13 L7,13 C6.44771525,13 6,12.5522847 6,12 C6,11.4477153 6.44771525,11 7,11 L18.585,11 L16.2928932,8.70710678 C15.9023689,8.31658249 15.9023689,7.68341751 16.2928932,7.29289322 C16.6834175,6.90236893 17.3165825,6.90236893 17.7071068,7.29289322 Z",
+              id: "Combined-Shape"
+            }
+          ) })
+        }
+      )
+    ]
+  }
 );
 
 // src/components/OrchestratorPageTemplate/OrchestratorPageHeader/OrchestratorPageHeader.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
 var OrchestratorPageHeader = ({
   navigationHeight,
   getAppLogo,
   handleLogoutClick
 }) => {
   const { theme, multiplyByBaseUnit } = useOrchestratorTheme();
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ jsxs6(
     EuiHeader,
     {
       css: {
         backgroundColor: theme.colors.primary,
         height: navigationHeight
-      }
-    },
-    /* @__PURE__ */ React14.createElement(EuiHeaderSection, null, /* @__PURE__ */ React14.createElement(EuiHeaderSectionItem, null, /* @__PURE__ */ React14.createElement(
-      EuiHeaderLogo,
-      {
-        iconType: () => getAppLogo(navigationHeight)
-      }
-    )), /* @__PURE__ */ React14.createElement(EuiHeaderSectionItem, null, /* @__PURE__ */ React14.createElement(EnvironmentBadge, null))),
-    /* @__PURE__ */ React14.createElement(EuiHeaderSection, null, /* @__PURE__ */ React14.createElement(EuiHeaderSectionItem, null, /* @__PURE__ */ React14.createElement(EuiBadgeGroup, { css: { marginRight: multiplyByBaseUnit(2) } }, /* @__PURE__ */ React14.createElement(EngineStatusBadge, null), /* @__PURE__ */ React14.createElement(FailedTasksBadge, null)), /* @__PURE__ */ React14.createElement(
-      EuiButtonIcon,
-      {
-        "aria-label": "Logout",
-        display: "empty",
-        iconType: () => /* @__PURE__ */ React14.createElement(LogoutIcon, { color: theme.colors.emptyShade }),
-        css: { width: 48, height: 48 },
-        color: "ghost",
-        onClick: () => handleLogoutClick()
-      }
-    )))
+      },
+      children: [
+        /* @__PURE__ */ jsxs6(EuiHeaderSection, { children: [
+          /* @__PURE__ */ jsx14(EuiHeaderSectionItem, { children: /* @__PURE__ */ jsx14(
+            EuiHeaderLogo,
+            {
+              iconType: () => getAppLogo(navigationHeight)
+            }
+          ) }),
+          /* @__PURE__ */ jsx14(EuiHeaderSectionItem, { children: /* @__PURE__ */ jsx14(EnvironmentBadge, {}) })
+        ] }),
+        /* @__PURE__ */ jsx14(EuiHeaderSection, { children: /* @__PURE__ */ jsxs6(EuiHeaderSectionItem, { children: [
+          /* @__PURE__ */ jsxs6(EuiBadgeGroup, { css: { marginRight: multiplyByBaseUnit(2) }, children: [
+            /* @__PURE__ */ jsx14(EngineStatusBadge, {}),
+            /* @__PURE__ */ jsx14(FailedTasksBadge, {})
+          ] }),
+          /* @__PURE__ */ jsx14(
+            EuiButtonIcon,
+            {
+              "aria-label": "Logout",
+              display: "empty",
+              iconType: () => /* @__PURE__ */ jsx14(LogoutIcon, { color: theme.colors.emptyShade }),
+              css: { width: 48, height: 48 },
+              color: "ghost",
+              onClick: () => handleLogoutClick()
+            }
+          )
+        ] }) })
+      ]
+    }
   );
 };
 
 // src/components/OrchestratorPageTemplate/OrchestratorPageTemplate/OrchestratorPageTemplate.tsx
-import React16, { useState as useState2 } from "react";
+import { useState as useState2 } from "react";
 import { EuiPageTemplate } from "@elastic/eui";
 
 // src/components/OrchestratorPageTemplate/OrchestratorSidebar/OrchestratorSidebar.tsx
-import React15 from "react";
 import { EuiButton, EuiSideNav, EuiSpacer as EuiSpacer2 } from "@elastic/eui";
 import { useRouter as useRouter2 } from "next/router";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
 var PATH_START = "/";
 var PATH_NEW_PROCESS = "/new-process";
 var PATH_PROCESSES = "/processes";
@@ -738,25 +771,28 @@ var PATH_TASKS = "/tasks";
 var PATH_SETTINGS = "/settings";
 var OrchestratorSidebar = () => {
   const router = useRouter2();
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ jsx15(
     EuiSideNav,
     {
       mobileTitle: "Nav Items",
       isOpenOnMobile: false,
       items: [
         {
-          renderItem: () => /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
-            EuiButton,
-            {
-              onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_NEW_PROCESS);
-              },
-              iconType: "plus",
-              fullWidth: true
-            },
-            "New Process"
-          ), /* @__PURE__ */ React15.createElement(EuiSpacer2, { size: "m" })),
+          renderItem: () => /* @__PURE__ */ jsxs7(Fragment3, { children: [
+            /* @__PURE__ */ jsx15(
+              EuiButton,
+              {
+                onClick: (e) => {
+                  e.preventDefault();
+                  router.push(PATH_NEW_PROCESS);
+                },
+                iconType: "plus",
+                fullWidth: true,
+                children: "New Process"
+              }
+            ),
+            /* @__PURE__ */ jsx15(EuiSpacer2, { size: "m" })
+          ] }),
           name: "Menu",
           id: "1",
           items: [
@@ -875,6 +911,7 @@ var OrchestratorSidebar = () => {
 };
 
 // src/components/OrchestratorPageTemplate/OrchestratorPageTemplate/OrchestratorPageTemplate.tsx
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var OrchestratorPageTemplate = ({
   children,
   getAppLogo
@@ -882,49 +919,54 @@ var OrchestratorPageTemplate = ({
   const { theme, multiplyByBaseUnit } = useOrchestratorTheme();
   const [isSideMenuVisible, setIsSideMenuVisible] = useState2(true);
   const navigationHeight = multiplyByBaseUnit(3);
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
-    OrchestratorPageHeader,
-    {
-      getAppLogo,
-      navigationHeight,
-      handleLogoutClick: () => setIsSideMenuVisible(!isSideMenuVisible)
-    }
-  ), /* @__PURE__ */ React16.createElement(
-    EuiPageTemplate,
-    {
-      panelled: false,
-      grow: false,
-      contentBorder: false,
-      minHeight: `calc(100vh - ${navigationHeight}px)`,
-      restrictWidth: false
-    },
-    isSideMenuVisible && /* @__PURE__ */ React16.createElement(
-      EuiPageTemplate.Sidebar,
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    /* @__PURE__ */ jsx16(
+      OrchestratorPageHeader,
       {
-        css: {
-          backgroundColor: theme.colors.body
-        }
-      },
-      /* @__PURE__ */ React16.createElement(OrchestratorSidebar, null)
+        getAppLogo,
+        navigationHeight,
+        handleLogoutClick: () => setIsSideMenuVisible(!isSideMenuVisible)
+      }
     ),
-    /* @__PURE__ */ React16.createElement(
-      EuiPageTemplate.Section,
+    /* @__PURE__ */ jsxs8(
+      EuiPageTemplate,
       {
-        css: {
-          backgroundColor: theme.colors.emptyShade
-        }
-      },
-      children
+        panelled: false,
+        grow: false,
+        contentBorder: false,
+        minHeight: `calc(100vh - ${navigationHeight}px)`,
+        restrictWidth: false,
+        children: [
+          isSideMenuVisible && /* @__PURE__ */ jsx16(
+            EuiPageTemplate.Sidebar,
+            {
+              css: {
+                backgroundColor: theme.colors.body
+              },
+              children: /* @__PURE__ */ jsx16(OrchestratorSidebar, {})
+            }
+          ),
+          /* @__PURE__ */ jsx16(
+            EuiPageTemplate.Section,
+            {
+              css: {
+                backgroundColor: theme.colors.emptyShade
+              },
+              children
+            }
+          )
+        ]
+      }
     )
-  ));
+  ] });
 };
 
 // src/components/SearchBar/SearchField.tsx
-import React17 from "react";
 import {
   EuiFormRow,
   EuiSearchBar
 } from "@elastic/eui";
+import { jsx as jsx17 } from "@emotion/react/jsx-runtime";
 var SearchField = ({
   __filterQuery,
   __setFilterQuery,
@@ -945,31 +987,30 @@ var SearchField = ({
       }
     }
   };
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ jsx17(
     EuiFormRow,
     {
       fullWidth: true,
       isInvalid: !queryIsValid,
-      error: ["The query contains invalid parts"]
-    },
-    /* @__PURE__ */ React17.createElement(
-      EuiSearchBar,
-      {
-        query: queryString,
-        onChange,
-        box: {
-          // Todo: possible bug in EUI component EuiSearchBar
-          // https://github.com/workfloworchestrator/orchestrator-ui/issues/129
-          // setting the property 'isInvalid' to true has no effect
-          isInvalid: !queryIsValid
+      error: ["The query contains invalid parts"],
+      children: /* @__PURE__ */ jsx17(
+        EuiSearchBar,
+        {
+          query: queryString,
+          onChange,
+          box: {
+            // Todo: possible bug in EUI component EuiSearchBar
+            // https://github.com/workfloworchestrator/orchestrator-ui/issues/129
+            // setting the property 'isInvalid' to true has no effect
+            isInvalid: !queryIsValid
+          }
         }
-      }
-    )
+      )
+    }
   );
 };
 
 // src/components/SettingsModal/SettingsModal.tsx
-import React18 from "react";
 import {
   EuiButton as EuiButton2,
   EuiButtonEmpty,
@@ -981,17 +1022,25 @@ import {
   EuiModalHeaderTitle,
   EuiSpacer as EuiSpacer3
 } from "@elastic/eui";
+import { jsx as jsx18, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
 var SettingsModal = ({
   title,
   onClose,
   onResetToDefaults,
   onUpdateTableConfig,
   children
-}) => /* @__PURE__ */ React18.createElement(EuiModal, { onClose, maxWidth: 400 }, /* @__PURE__ */ React18.createElement(EuiModalHeader, null, /* @__PURE__ */ React18.createElement(EuiModalHeaderTitle, { size: "xs" }, title)), /* @__PURE__ */ React18.createElement(EuiSpacer3, { size: "s" }), /* @__PURE__ */ React18.createElement(EuiModalBody, null, children), /* @__PURE__ */ React18.createElement(EuiModalFooter, null, /* @__PURE__ */ React18.createElement(EuiFlexGroup, { justifyContent: "spaceBetween" }, /* @__PURE__ */ React18.createElement(EuiButtonEmpty, { onClick: onResetToDefaults, flush: "left" }, "Reset to default"), /* @__PURE__ */ React18.createElement(EuiButton2, { onClick: onUpdateTableConfig, fill: true }, "Save preference"))));
+}) => /* @__PURE__ */ jsxs9(EuiModal, { onClose, maxWidth: 400, children: [
+  /* @__PURE__ */ jsx18(EuiModalHeader, { children: /* @__PURE__ */ jsx18(EuiModalHeaderTitle, { size: "xs", children: title }) }),
+  /* @__PURE__ */ jsx18(EuiSpacer3, { size: "s" }),
+  /* @__PURE__ */ jsx18(EuiModalBody, { children }),
+  /* @__PURE__ */ jsx18(EuiModalFooter, { children: /* @__PURE__ */ jsxs9(EuiFlexGroup, { justifyContent: "spaceBetween", children: [
+    /* @__PURE__ */ jsx18(EuiButtonEmpty, { onClick: onResetToDefaults, flush: "left", children: "Reset to default" }),
+    /* @__PURE__ */ jsx18(EuiButton2, { onClick: onUpdateTableConfig, fill: true, children: "Save preference" })
+  ] }) })
+] });
 
 // src/components/SettingsPage/Settings.tsx
 import { EuiHorizontalRule, EuiPageHeader, EuiSpacer as EuiSpacer7 } from "@elastic/eui";
-import React29 from "react";
 
 // src/components/SettingsPage/FlushSettings.tsx
 import {
@@ -1002,7 +1051,8 @@ import {
   EuiComboBox,
   EuiGlobalToastList
 } from "@elastic/eui";
-import React19, { useContext as useContext8, useState as useState3 } from "react";
+import { useContext as useContext8, useState as useState3 } from "react";
+import { jsx as jsx19, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
 var clearCache = async (apiUrl, settingName) => {
   const response = await fetch(apiUrl + `/settings/cache/${settingName}`, {
     method: "DELETE"
@@ -1039,104 +1089,115 @@ var FlushSettings = () => {
         title: `Cache cleared`,
         color: "success",
         iconType: "check",
-        text: /* @__PURE__ */ React19.createElement("p", null, 'Cache for cache key "', cacheKey, '" flushed successfully')
+        text: /* @__PURE__ */ jsxs10("p", { children: [
+          'Cache for cache key "',
+          cacheKey,
+          '" flushed successfully'
+        ] })
       });
     });
   };
   const addToast = (toast) => {
     setToasts((toasts2) => [...toasts2, toast]);
   };
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ jsxs10(
     EuiPanel,
     {
       hasShadow: false,
       color: "subdued",
       paddingSize: "l",
-      style: { width: "50%" }
-    },
-    /* @__PURE__ */ React19.createElement(EuiText2, { size: "s" }, /* @__PURE__ */ React19.createElement("h4", null, "Flush Settings")),
-    /* @__PURE__ */ React19.createElement(EuiSpacer4, { size: "m" }),
-    /* @__PURE__ */ React19.createElement(
-      EuiComboBox,
-      {
-        "aria-label": "Flush settings",
-        placeholder: "Select settings",
-        singleSelection: { asPlainText: true },
-        options,
-        selectedOptions,
-        onChange,
-        fullWidth: true
-      }
-    ),
-    /* @__PURE__ */ React19.createElement(EuiSpacer4, { size: "m" }),
-    /* @__PURE__ */ React19.createElement(EuiButton3, { onClick: flushCache, iconType: "refresh" }, "Flush"),
-    /* @__PURE__ */ React19.createElement(
-      EuiGlobalToastList,
-      {
-        toasts,
-        dismissToast: () => setToasts([]),
-        toastLifeTimeMs: 5e3
-      }
-    )
+      style: { width: "50%" },
+      children: [
+        /* @__PURE__ */ jsx19(EuiText2, { size: "s", children: /* @__PURE__ */ jsx19("h4", { children: "Flush Settings" }) }),
+        /* @__PURE__ */ jsx19(EuiSpacer4, { size: "m" }),
+        /* @__PURE__ */ jsx19(
+          EuiComboBox,
+          {
+            "aria-label": "Flush settings",
+            placeholder: "Select settings",
+            singleSelection: { asPlainText: true },
+            options,
+            selectedOptions,
+            onChange,
+            fullWidth: true
+          }
+        ),
+        /* @__PURE__ */ jsx19(EuiSpacer4, { size: "m" }),
+        /* @__PURE__ */ jsx19(EuiButton3, { onClick: flushCache, iconType: "refresh", children: "Flush" }),
+        /* @__PURE__ */ jsx19(
+          EuiGlobalToastList,
+          {
+            toasts,
+            dismissToast: () => setToasts([]),
+            toastLifeTimeMs: 5e3
+          }
+        )
+      ]
+    }
   );
 };
 
 // src/components/SettingsPage/ModifySettings.tsx
 import { EuiPanel as EuiPanel2, EuiSpacer as EuiSpacer5, EuiText as EuiText3 } from "@elastic/eui";
-import React21 from "react";
 
 // src/components/SettingsPage/EngineStatusButton.tsx
 import { EuiButton as EuiButton4 } from "@elastic/eui";
-import React20 from "react";
+import { jsx as jsx20 } from "@emotion/react/jsx-runtime";
 var EngineStatusButton = ({
   engineStatus,
   changeEngineStatus
 }) => {
   if (!engineStatus) {
-    return /* @__PURE__ */ React20.createElement(EuiButton4, { isLoading: true, fill: true }, "Loading...");
+    return /* @__PURE__ */ jsx20(EuiButton4, { isLoading: true, fill: true, children: "Loading..." });
   }
-  return engineStatus === "RUNNING" ? /* @__PURE__ */ React20.createElement(
+  return engineStatus === "RUNNING" ? /* @__PURE__ */ jsx20(
     EuiButton4,
     {
       onClick: changeEngineStatus,
       color: "warning",
       fill: true,
-      iconType: "pause"
-    },
-    "Pause the engine"
-  ) : /* @__PURE__ */ React20.createElement(
+      iconType: "pause",
+      children: "Pause the engine"
+    }
+  ) : /* @__PURE__ */ jsx20(
     EuiButton4,
     {
       onClick: changeEngineStatus,
       color: "primary",
       fill: true,
-      iconType: "play"
-    },
-    "Start the engine"
+      iconType: "play",
+      children: "Start the engine"
+    }
   );
 };
 
 // src/components/SettingsPage/ModifySettings.tsx
+import { jsx as jsx21, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
 var ModifySettings = ({
   engineStatus,
   changeEngineStatus
-}) => /* @__PURE__ */ React21.createElement(
+}) => /* @__PURE__ */ jsxs11(
   EuiPanel2,
   {
     hasShadow: false,
     color: "subdued",
     paddingSize: "l",
-    css: { width: "50%" }
-  },
-  /* @__PURE__ */ React21.createElement(EuiText3, { size: "s" }, /* @__PURE__ */ React21.createElement("h4", null, "Modify the engine settings"), /* @__PURE__ */ React21.createElement("p", null, "Stop or start workflows through this menu")),
-  /* @__PURE__ */ React21.createElement(EuiSpacer5, { size: "m" }),
-  /* @__PURE__ */ React21.createElement(
-    EngineStatusButton,
-    {
-      engineStatus,
-      changeEngineStatus
-    }
-  )
+    css: { width: "50%" },
+    children: [
+      /* @__PURE__ */ jsxs11(EuiText3, { size: "s", children: [
+        /* @__PURE__ */ jsx21("h4", { children: "Modify the engine settings" }),
+        /* @__PURE__ */ jsx21("p", { children: "Stop or start workflows through this menu" })
+      ] }),
+      /* @__PURE__ */ jsx21(EuiSpacer5, { size: "m" }),
+      /* @__PURE__ */ jsx21(
+        EngineStatusButton,
+        {
+          engineStatus,
+          changeEngineStatus
+        }
+      )
+    ]
+  }
 );
 
 // src/components/SettingsPage/Status.tsx
@@ -1147,243 +1208,267 @@ import {
   EuiPanel as EuiPanel3,
   EuiText as EuiText4
 } from "@elastic/eui";
-import React28 from "react";
 
 // src/icons/CheckmarkCircleFill.tsx
-import React22 from "react";
+import { jsx as jsx22, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
 var CheckmarkCircleFill = ({
   width = 24,
   height = 24,
   color = "#000000"
-}) => /* @__PURE__ */ React22.createElement(
+}) => /* @__PURE__ */ jsxs12(
   "svg",
   {
     width,
     height,
     viewBox: "0 0 24 24",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ React22.createElement("title", null, "icon/checkmark-circle-fill"),
-  /* @__PURE__ */ React22.createElement(
-    "g",
-    {
-      id: "Symbols",
-      stroke: "none",
-      strokeWidth: "1",
-      fill: "none",
-      fillRule: "evenodd"
-    },
-    /* @__PURE__ */ React22.createElement("g", { id: "icon/checkmark-circle-fill", fill: color }, /* @__PURE__ */ React22.createElement(
-      "path",
-      {
-        d: "M12,20 C16.4183,20 20,16.4183 20,12 C20,7.58172 16.4183,4 12,4 C7.58172,4 4,7.58172 4,12 C4,16.4183 7.58172,20 12,20 Z M15.7071,10.70711 C16.0976,10.31658 16.0976,9.68342 15.7071,9.29289 C15.3166,8.90237 14.6834,8.90237 14.2929,9.29289 L11,12.5858 L9.70711,11.29289 C9.31658,10.90237 8.68342,10.90237 8.29289,11.29289 C7.90237,11.68342 7.90237,12.3166 8.29289,12.7071 L10.29289,14.7071 C10.68342,15.0976 11.31658,15.0976 11.70711,14.7071 L15.7071,10.70711 Z",
-        id: "Shape"
-      }
-    ))
-  )
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx22("title", { children: "icon/checkmark-circle-fill" }),
+      /* @__PURE__ */ jsx22(
+        "g",
+        {
+          id: "Symbols",
+          stroke: "none",
+          strokeWidth: "1",
+          fill: "none",
+          fillRule: "evenodd",
+          children: /* @__PURE__ */ jsx22("g", { id: "icon/checkmark-circle-fill", fill: color, children: /* @__PURE__ */ jsx22(
+            "path",
+            {
+              d: "M12,20 C16.4183,20 20,16.4183 20,12 C20,7.58172 16.4183,4 12,4 C7.58172,4 4,7.58172 4,12 C4,16.4183 7.58172,20 12,20 Z M15.7071,10.70711 C16.0976,10.31658 16.0976,9.68342 15.7071,9.29289 C15.3166,8.90237 14.6834,8.90237 14.2929,9.29289 L11,12.5858 L9.70711,11.29289 C9.31658,10.90237 8.68342,10.90237 8.29289,11.29289 C7.90237,11.68342 7.90237,12.3166 8.29289,12.7071 L10.29289,14.7071 C10.68342,15.0976 11.31658,15.0976 11.70711,14.7071 L15.7071,10.70711 Z",
+              id: "Shape"
+            }
+          ) })
+        }
+      )
+    ]
+  }
 );
 
 // src/icons/MinusCircleOutline.tsx
-import React23 from "react";
+import { jsx as jsx23, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 var MinusCircleOutline = ({
   width = 24,
   height = 24,
   color = "#000000"
-}) => /* @__PURE__ */ React23.createElement(
+}) => /* @__PURE__ */ jsxs13(
   "svg",
   {
     width,
     height,
     viewBox: "0 0 24 24",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ React23.createElement("title", null, "icon/minus-circle-outline"),
-  /* @__PURE__ */ React23.createElement(
-    "g",
-    {
-      id: "Symbols",
-      stroke: "none",
-      strokeWidth: "1",
-      fill: "none",
-      fillRule: "evenodd"
-    },
-    /* @__PURE__ */ React23.createElement("g", { id: "icon/minus-circle-outline", fill: color, fillRule: "nonzero" }, /* @__PURE__ */ React23.createElement(
-      "path",
-      {
-        d: "M12,4 C16.4183,4 20,7.58172 20,12 C20,16.4183 16.4183,20 12,20 C7.58172,20 4,16.4183 4,12 C4,7.58172 7.58172,4 12,4 Z M12,6 C8.6862895,6 6,8.6862895 6,12 C6,15.3137228 8.68628182,18 12,18 C15.3137305,18 18,15.3137305 18,12 C18,8.68628182 15.3137228,6 12,6 Z M15,11 C15.5523,11 16,11.44772 16,12 C16,12.5523 15.5523,13 15,13 L9,13 C8.44772,13 8,12.5523 8,12 C8,11.44772 8.44772,11 9,11 Z",
-        id: "Combined-Shape"
-      }
-    ))
-  )
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx23("title", { children: "icon/minus-circle-outline" }),
+      /* @__PURE__ */ jsx23(
+        "g",
+        {
+          id: "Symbols",
+          stroke: "none",
+          strokeWidth: "1",
+          fill: "none",
+          fillRule: "evenodd",
+          children: /* @__PURE__ */ jsx23("g", { id: "icon/minus-circle-outline", fill: color, fillRule: "nonzero", children: /* @__PURE__ */ jsx23(
+            "path",
+            {
+              d: "M12,4 C16.4183,4 20,7.58172 20,12 C20,16.4183 16.4183,20 12,20 C7.58172,20 4,16.4183 4,12 C4,7.58172 7.58172,4 12,4 Z M12,6 C8.6862895,6 6,8.6862895 6,12 C6,15.3137228 8.68628182,18 12,18 C15.3137305,18 18,15.3137305 18,12 C18,8.68628182 15.3137228,6 12,6 Z M15,11 C15.5523,11 16,11.44772 16,12 C16,12.5523 15.5523,13 15,13 L9,13 C8.44772,13 8,12.5523 8,12 C8,11.44772 8.44772,11 9,11 Z",
+              id: "Combined-Shape"
+            }
+          ) })
+        }
+      )
+    ]
+  }
 );
 
 // src/icons/PlusCircleFill.tsx
-import React24 from "react";
+import { jsx as jsx24, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
 var PlusCircleFill = ({
   width = 24,
   height = 24,
   color = "#000000"
-}) => /* @__PURE__ */ React24.createElement(
+}) => /* @__PURE__ */ jsxs14(
   "svg",
   {
     width,
     height,
     viewBox: "0 0 24 24",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ React24.createElement("title", null, "icon/plus-circle-fill"),
-  /* @__PURE__ */ React24.createElement(
-    "g",
-    {
-      id: "Symbols",
-      stroke: "none",
-      strokeWidth: "1",
-      fill: "none",
-      fillRule: "evenodd"
-    },
-    /* @__PURE__ */ React24.createElement("g", { id: "icon/plus-circle-fill", fill: color }, /* @__PURE__ */ React24.createElement(
-      "path",
-      {
-        d: "M12,20 C16.4183,20 20,16.4183 20,12 C20,7.58172 16.4183,4 12,4 C7.58172,4 4,7.58172 4,12 C4,16.4183 7.58172,20 12,20 Z M13,9 C13,8.44772 12.5523,8 12,8 C11.44772,8 11,8.44772 11,9 L11,11 L9,11 C8.44772,11 8,11.44771 8,12 C8,12.5523 8.44772,13 9,13 L11,13 L11,15 C11,15.5523 11.44772,16 12,16 C12.5523,16 13,15.5523 13,15 L13,13 L15,13 C15.5523,13 16,12.5523 16,12 C16,11.44772 15.5523,11 15,11 L13,11 L13,9 Z",
-        id: "Shape"
-      }
-    ))
-  )
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx24("title", { children: "icon/plus-circle-fill" }),
+      /* @__PURE__ */ jsx24(
+        "g",
+        {
+          id: "Symbols",
+          stroke: "none",
+          strokeWidth: "1",
+          fill: "none",
+          fillRule: "evenodd",
+          children: /* @__PURE__ */ jsx24("g", { id: "icon/plus-circle-fill", fill: color, children: /* @__PURE__ */ jsx24(
+            "path",
+            {
+              d: "M12,20 C16.4183,20 20,16.4183 20,12 C20,7.58172 16.4183,4 12,4 C7.58172,4 4,7.58172 4,12 C4,16.4183 7.58172,20 12,20 Z M13,9 C13,8.44772 12.5523,8 12,8 C11.44772,8 11,8.44772 11,9 L11,11 L9,11 C8.44772,11 8,11.44771 8,12 C8,12.5523 8.44772,13 9,13 L11,13 L11,15 C11,15.5523 11.44772,16 12,16 C12.5523,16 13,15.5523 13,15 L13,13 L15,13 C15.5523,13 16,12.5523 16,12 C16,11.44772 15.5523,11 15,11 L13,11 L13,9 Z",
+              id: "Shape"
+            }
+          ) })
+        }
+      )
+    ]
+  }
 );
 
 // src/icons/ChevronDown.tsx
-import React25 from "react";
+import { jsx as jsx25, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 var ChevronDown = ({
   width = 24,
   height = 24,
   color = "#000000"
-}) => /* @__PURE__ */ React25.createElement(
+}) => /* @__PURE__ */ jsxs15(
   "svg",
   {
     width,
     height,
     viewBox: "0 0 24 24",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ React25.createElement("title", null, "icon/chevron-down"),
-  /* @__PURE__ */ React25.createElement(
-    "g",
-    {
-      id: "Symbols",
-      stroke: "none",
-      strokeWidth: "1",
-      fill: "none",
-      fillRule: "evenodd"
-    },
-    /* @__PURE__ */ React25.createElement("g", { id: "icon/chevron-down", fill: color }, /* @__PURE__ */ React25.createElement(
-      "path",
-      {
-        d: "M7.29289,9.29289 C7.68342,8.90237 8.31658,8.90237 8.70711,9.29289 L12,12.5858 L15.2929,9.29289 C15.6834,8.90237 16.3166,8.90237 16.7071,9.29289 C17.0976,9.68342 17.0976,10.31658 16.7071,10.70711 L12.7071,14.7071 C12.3166,15.0976 11.68342,15.0976 11.29289,14.7071 L7.29289,10.70711 C6.90237,10.31658 6.90237,9.68342 7.29289,9.29289 Z",
-        id: "Path"
-      }
-    ))
-  )
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx25("title", { children: "icon/chevron-down" }),
+      /* @__PURE__ */ jsx25(
+        "g",
+        {
+          id: "Symbols",
+          stroke: "none",
+          strokeWidth: "1",
+          fill: "none",
+          fillRule: "evenodd",
+          children: /* @__PURE__ */ jsx25("g", { id: "icon/chevron-down", fill: color, children: /* @__PURE__ */ jsx25(
+            "path",
+            {
+              d: "M7.29289,9.29289 C7.68342,8.90237 8.31658,8.90237 8.70711,9.29289 L12,12.5858 L15.2929,9.29289 C15.6834,8.90237 16.3166,8.90237 16.7071,9.29289 C17.0976,9.68342 17.0976,10.31658 16.7071,10.70711 L12.7071,14.7071 C12.3166,15.0976 11.68342,15.0976 11.29289,14.7071 L7.29289,10.70711 C6.90237,10.31658 6.90237,9.68342 7.29289,9.29289 Z",
+              id: "Path"
+            }
+          ) })
+        }
+      )
+    ]
+  }
 );
 
 // src/icons/ArrowNarrowDown.tsx
-import React26 from "react";
+import { jsx as jsx26, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
 var ArrowNarrowDown = ({
   width = 16,
   height = 20,
   color = "#000000"
-}) => /* @__PURE__ */ React26.createElement(
+}) => /* @__PURE__ */ jsxs16(
   "svg",
   {
     width,
     height,
     viewBox: "0 0 16 20",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ React26.createElement("title", null, "icon/arrow-narrow-down"),
-  /* @__PURE__ */ React26.createElement(
-    "g",
-    {
-      id: "Symbols",
-      stroke: "none",
-      strokeWidth: "1",
-      fill: "none",
-      fillRule: "evenodd"
-    },
-    /* @__PURE__ */ React26.createElement("g", { id: "icon/arrow-narrow-down", fill: color }, /* @__PURE__ */ React26.createElement(
-      "path",
-      {
-        d: "M4.29289,9.70711 C3.90237,9.31658 3.90237,8.68342 4.29289,8.29289 L7.29289,5.29289 C7.68342,4.90237 8.3166,4.90237 8.7071,5.29289 L11.7071,8.29289 C12.0976,8.68342 12.0976,9.31658 11.7071,9.70711 C11.3166,10.09763 10.6834,10.09763 10.2929,9.70711 L9,8.41421 L9,14 C9,14.5523 8.5523,15 8,15 C7.44772,15 7,14.5523 7,14 L7,8.41421 L5.70711,9.70711 C5.31658,10.09763 4.68342,10.09763 4.29289,9.70711 Z",
-        id: "Path",
-        transform: "translate(7.999988, 10.000000) rotate(-180.000000) translate(-7.999988, -10.000000) "
-      }
-    ))
-  )
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx26("title", { children: "icon/arrow-narrow-down" }),
+      /* @__PURE__ */ jsx26(
+        "g",
+        {
+          id: "Symbols",
+          stroke: "none",
+          strokeWidth: "1",
+          fill: "none",
+          fillRule: "evenodd",
+          children: /* @__PURE__ */ jsx26("g", { id: "icon/arrow-narrow-down", fill: color, children: /* @__PURE__ */ jsx26(
+            "path",
+            {
+              d: "M4.29289,9.70711 C3.90237,9.31658 3.90237,8.68342 4.29289,8.29289 L7.29289,5.29289 C7.68342,4.90237 8.3166,4.90237 8.7071,5.29289 L11.7071,8.29289 C12.0976,8.68342 12.0976,9.31658 11.7071,9.70711 C11.3166,10.09763 10.6834,10.09763 10.2929,9.70711 L9,8.41421 L9,14 C9,14.5523 8.5523,15 8,15 C7.44772,15 7,14.5523 7,14 L7,8.41421 L5.70711,9.70711 C5.31658,10.09763 4.68342,10.09763 4.29289,9.70711 Z",
+              id: "Path",
+              transform: "translate(7.999988, 10.000000) rotate(-180.000000) translate(-7.999988, -10.000000) "
+            }
+          ) })
+        }
+      )
+    ]
+  }
 );
 
 // src/icons/ArrowNarrowUp.tsx
-import React27 from "react";
+import { jsx as jsx27, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
 var ArrowNarrowUp = ({
   width = 16,
   height = 20,
   color = "#000000"
-}) => /* @__PURE__ */ React27.createElement(
+}) => /* @__PURE__ */ jsxs17(
   "svg",
   {
     width,
     height,
     viewBox: "0 0 16 20",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ React27.createElement("title", null, "icon/arrow-narrow-up"),
-  /* @__PURE__ */ React27.createElement(
-    "g",
-    {
-      id: "Symbols",
-      stroke: "none",
-      strokeWidth: "1",
-      fill: "none",
-      fillRule: "evenodd"
-    },
-    /* @__PURE__ */ React27.createElement("g", { id: "icon/arrow-narrow-up", fill: color }, /* @__PURE__ */ React27.createElement(
-      "path",
-      {
-        d: "M4.29289,9.70711 C3.90237,9.31658 3.90237,8.68342 4.29289,8.29289 L7.29289,5.29289 C7.68342,4.90237 8.3166,4.90237 8.7071,5.29289 L11.7071,8.29289 C12.0976,8.68342 12.0976,9.31658 11.7071,9.70711 C11.3166,10.09763 10.6834,10.09763 10.2929,9.70711 L9,8.41421 L9,14 C9,14.5523 8.5523,15 8,15 C7.44772,15 7,14.5523 7,14 L7,8.41421 L5.70711,9.70711 C5.31658,10.09763 4.68342,10.09763 4.29289,9.70711 Z",
-        id: "Path"
-      }
-    ))
-  )
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx27("title", { children: "icon/arrow-narrow-up" }),
+      /* @__PURE__ */ jsx27(
+        "g",
+        {
+          id: "Symbols",
+          stroke: "none",
+          strokeWidth: "1",
+          fill: "none",
+          fillRule: "evenodd",
+          children: /* @__PURE__ */ jsx27("g", { id: "icon/arrow-narrow-up", fill: color, children: /* @__PURE__ */ jsx27(
+            "path",
+            {
+              d: "M4.29289,9.70711 C3.90237,9.31658 3.90237,8.68342 4.29289,8.29289 L7.29289,5.29289 C7.68342,4.90237 8.3166,4.90237 8.7071,5.29289 L11.7071,8.29289 C12.0976,8.68342 12.0976,9.31658 11.7071,9.70711 C11.3166,10.09763 10.6834,10.09763 10.2929,9.70711 L9,8.41421 L9,14 C9,14.5523 8.5523,15 8,15 C7.44772,15 7,14.5523 7,14 L7,8.41421 L5.70711,9.70711 C5.31658,10.09763 4.68342,10.09763 4.29289,9.70711 Z",
+              id: "Path"
+            }
+          ) })
+        }
+      )
+    ]
+  }
 );
 
 // src/components/SettingsPage/Status.tsx
+import { jsx as jsx28, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
 var Status = ({ engineStatus }) => {
   const { theme } = useOrchestratorTheme();
   const isRunning = engineStatus === "RUNNING";
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ jsxs18(
     EuiPanel3,
     {
       hasShadow: false,
       color: "subdued",
       paddingSize: "l",
-      style: { width: "50%" }
-    },
-    /* @__PURE__ */ React28.createElement(EuiFlexGroup2, null, /* @__PURE__ */ React28.createElement(EuiFlexItem, { grow: false, style: { minWidth: 140 } }, /* @__PURE__ */ React28.createElement(EuiText4, { size: "s" }, /* @__PURE__ */ React28.createElement("h4", null, "Running processes"))), /* @__PURE__ */ React28.createElement(EuiFlexItem, { grow: false }, /* @__PURE__ */ React28.createElement(EuiText4, { size: "s" }, /* @__PURE__ */ React28.createElement("p", null, "0")))),
-    /* @__PURE__ */ React28.createElement(EuiSpacer6, { size: "m" }),
-    /* @__PURE__ */ React28.createElement(EuiFlexGroup2, null, /* @__PURE__ */ React28.createElement(EuiFlexItem, { grow: false, style: { minWidth: 132 } }, /* @__PURE__ */ React28.createElement(EuiText4, { size: "s" }, /* @__PURE__ */ React28.createElement("h4", null, "Engine status"))), /* @__PURE__ */ React28.createElement(EuiFlexItem, { grow: false }, /* @__PURE__ */ React28.createElement(EuiFlexGroup2, { gutterSize: "xs" }, /* @__PURE__ */ React28.createElement(EuiFlexItem, null, /* @__PURE__ */ React28.createElement(
-      StatusDotIcon,
-      {
-        color: isRunning ? theme.colors.success : theme.colors.warning
-      }
-    )), /* @__PURE__ */ React28.createElement(EuiFlexItem, null, /* @__PURE__ */ React28.createElement(EuiText4, { size: "xs", style: { marginTop: 4 } }, /* @__PURE__ */ React28.createElement("p", null, engineStatus))))))
+      style: { width: "50%" },
+      children: [
+        /* @__PURE__ */ jsxs18(EuiFlexGroup2, { children: [
+          /* @__PURE__ */ jsx28(EuiFlexItem, { grow: false, style: { minWidth: 140 }, children: /* @__PURE__ */ jsx28(EuiText4, { size: "s", children: /* @__PURE__ */ jsx28("h4", { children: "Running processes" }) }) }),
+          /* @__PURE__ */ jsx28(EuiFlexItem, { grow: false, children: /* @__PURE__ */ jsx28(EuiText4, { size: "s", children: /* @__PURE__ */ jsx28("p", { children: "0" }) }) })
+        ] }),
+        /* @__PURE__ */ jsx28(EuiSpacer6, { size: "m" }),
+        /* @__PURE__ */ jsxs18(EuiFlexGroup2, { children: [
+          /* @__PURE__ */ jsx28(EuiFlexItem, { grow: false, style: { minWidth: 132 }, children: /* @__PURE__ */ jsx28(EuiText4, { size: "s", children: /* @__PURE__ */ jsx28("h4", { children: "Engine status" }) }) }),
+          /* @__PURE__ */ jsx28(EuiFlexItem, { grow: false, children: /* @__PURE__ */ jsxs18(EuiFlexGroup2, { gutterSize: "xs", children: [
+            /* @__PURE__ */ jsx28(EuiFlexItem, { children: /* @__PURE__ */ jsx28(
+              StatusDotIcon,
+              {
+                color: isRunning ? theme.colors.success : theme.colors.warning
+              }
+            ) }),
+            /* @__PURE__ */ jsx28(EuiFlexItem, { children: /* @__PURE__ */ jsx28(EuiText4, { size: "xs", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx28("p", { children: engineStatus }) }) })
+          ] }) })
+        ] })
+      ]
+    }
   );
 };
 
 // src/components/SettingsPage/Settings.tsx
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 var Settings = () => {
   const { data: engineStatus } = useEngineStatusQuery();
   const { mutate, data: newEngineStatus } = useEngineStatusMutation();
@@ -1392,24 +1477,33 @@ var Settings = () => {
   const changeEngineStatus = () => {
     mutate({ global_lock: isRunning });
   };
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(EuiPageHeader, { pageTitle: "Settings" }), /* @__PURE__ */ React29.createElement(EuiHorizontalRule, null), /* @__PURE__ */ React29.createElement(FlushSettings, null), /* @__PURE__ */ React29.createElement(EuiSpacer7, null), /* @__PURE__ */ React29.createElement(
-    ModifySettings,
-    {
-      engineStatus: currentEngineStatus,
-      changeEngineStatus
-    }
-  ), /* @__PURE__ */ React29.createElement(EuiSpacer7, null), /* @__PURE__ */ React29.createElement(Status, { engineStatus: currentEngineStatus }));
+  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    /* @__PURE__ */ jsx29(EuiPageHeader, { pageTitle: "Settings" }),
+    /* @__PURE__ */ jsx29(EuiHorizontalRule, {}),
+    /* @__PURE__ */ jsx29(FlushSettings, {}),
+    /* @__PURE__ */ jsx29(EuiSpacer7, {}),
+    /* @__PURE__ */ jsx29(
+      ModifySettings,
+      {
+        engineStatus: currentEngineStatus,
+        changeEngineStatus
+      }
+    ),
+    /* @__PURE__ */ jsx29(EuiSpacer7, {}),
+    /* @__PURE__ */ jsx29(Status, { engineStatus: currentEngineStatus })
+  ] });
 };
 
 // src/components/StartPage/FrequentlyUsed.tsx
 import { EuiButton as EuiButton5, EuiFlexGroup as EuiFlexGroup3, EuiFlexItem as EuiFlexItem2 } from "@elastic/eui";
-import React30 from "react";
-var FrequentlyUsed = ({ values }) => /* @__PURE__ */ React30.createElement(EuiFlexGroup3, { wrap: true, gutterSize: "m" }, values.map((value, index) => /* @__PURE__ */ React30.createElement(EuiFlexItem2, { key: index, grow: false }, /* @__PURE__ */ React30.createElement(EuiButton5, { size: "xs", style: { minWidth: 0 } }, value))));
+import { jsx as jsx30 } from "@emotion/react/jsx-runtime";
+var FrequentlyUsed = ({ values }) => /* @__PURE__ */ jsx30(EuiFlexGroup3, { wrap: true, gutterSize: "m", children: values.map((value, index) => /* @__PURE__ */ jsx30(EuiFlexItem2, { grow: false, children: /* @__PURE__ */ jsx30(EuiButton5, { size: "xs", style: { minWidth: 0 }, children: value }) }, index)) });
 
 // src/components/StartPage/ListItemStartPage.tsx
-import React31, { useState as useState4 } from "react";
+import { useState as useState4 } from "react";
 import { EuiFlexGroup as EuiFlexGroup4, EuiFlexItem as EuiFlexItem3, EuiIcon, EuiTextColor } from "@elastic/eui";
 import moment from "moment";
+import { jsx as jsx31, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
 var ListItemStartPage = ({
   item,
   type
@@ -1418,55 +1512,67 @@ var ListItemStartPage = ({
   const renderItem = (item2, type2) => {
     if (type2 === "subscription") {
       item2 = item2;
-      return /* @__PURE__ */ React31.createElement(EuiFlexItem3, null, /* @__PURE__ */ React31.createElement(
-        EuiTextColor,
-        {
-          color: hoverState ? "#397dc2" : "black",
-          style: { fontWeight: 500, transition: "0.2s" }
-        },
-        item2.product.name
-      ), /* @__PURE__ */ React31.createElement(EuiTextColor, { style: { fontWeight: 400 } }, item2.subscription_id.slice(0, 8)));
+      return /* @__PURE__ */ jsxs20(EuiFlexItem3, { children: [
+        /* @__PURE__ */ jsx31(
+          EuiTextColor,
+          {
+            color: hoverState ? "#397dc2" : "black",
+            style: { fontWeight: 500, transition: "0.2s" },
+            children: item2.product.name
+          }
+        ),
+        /* @__PURE__ */ jsx31(EuiTextColor, { style: { fontWeight: 400 }, children: item2.subscription_id.slice(0, 8) })
+      ] });
     } else if (type2 === "process") {
       item2 = item2;
       const date = new Date(item2.last_modified_at * 1e3);
       const formattedDate = moment(date).format("DD-MM-YYYY, HH:mm");
-      return /* @__PURE__ */ React31.createElement(EuiFlexItem3, null, /* @__PURE__ */ React31.createElement(
-        EuiTextColor,
-        {
-          color: hoverState ? "#397dc2" : "black",
-          style: { fontWeight: 500, transition: "0.2s" }
-        },
-        item2.workflow
-      ), /* @__PURE__ */ React31.createElement(EuiTextColor, { style: { fontWeight: 400 } }, formattedDate, " for", " ", /* @__PURE__ */ React31.createElement("span", { style: { color: "#397dc2" } }, "KLM")));
+      return /* @__PURE__ */ jsxs20(EuiFlexItem3, { children: [
+        /* @__PURE__ */ jsx31(
+          EuiTextColor,
+          {
+            color: hoverState ? "#397dc2" : "black",
+            style: { fontWeight: 500, transition: "0.2s" },
+            children: item2.workflow
+          }
+        ),
+        /* @__PURE__ */ jsxs20(EuiTextColor, { style: { fontWeight: 400 }, children: [
+          formattedDate,
+          " for",
+          " ",
+          /* @__PURE__ */ jsx31("span", { style: { color: "#397dc2" }, children: "KLM" })
+        ] })
+      ] });
     }
   };
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ jsx31(
     "a",
     {
-      href: `/subscriptions/${"subscription_id" in item ? item.subscription_id : ""}`
-    },
-    /* @__PURE__ */ React31.createElement(
-      EuiFlexGroup4,
-      {
-        style: { cursor: "pointer", paddingBlock: 10 },
-        onMouseOver: () => setHoverState(true),
-        onMouseLeave: () => setHoverState(false)
-      },
-      renderItem(item, type),
-      /* @__PURE__ */ React31.createElement(
-        EuiFlexItem3,
+      href: `/subscriptions/${"subscription_id" in item ? item.subscription_id : ""}`,
+      children: /* @__PURE__ */ jsxs20(
+        EuiFlexGroup4,
         {
-          grow: false,
-          style: { display: hoverState ? "block" : "none" }
-        },
-        /* @__PURE__ */ React31.createElement(EuiIcon, { type: "sortRight", color: "primary" })
+          style: { cursor: "pointer", paddingBlock: 10 },
+          onMouseOver: () => setHoverState(true),
+          onMouseLeave: () => setHoverState(false),
+          children: [
+            renderItem(item, type),
+            /* @__PURE__ */ jsx31(
+              EuiFlexItem3,
+              {
+                grow: false,
+                style: { display: hoverState ? "block" : "none" },
+                children: /* @__PURE__ */ jsx31(EuiIcon, { type: "sortRight", color: "primary" })
+              }
+            )
+          ]
+        }
       )
-    )
+    }
   );
 };
 
 // src/components/StartPage/ListStartPage.tsx
-import React32 from "react";
 import {
   EuiButton as EuiButton6,
   EuiFlexItem as EuiFlexItem4,
@@ -1474,22 +1580,36 @@ import {
   EuiPanel as EuiPanel4,
   EuiSpacer as EuiSpacer8
 } from "@elastic/eui";
+import { jsx as jsx32, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
 function ListStartPage({ list }) {
-  return (list == null ? void 0 : list.items) && /* @__PURE__ */ React32.createElement(EuiFlexItem4, { style: { minWidth: 300 } }, /* @__PURE__ */ React32.createElement(EuiPanel4, { hasShadow: false, hasBorder: true, paddingSize: "l" }, /* @__PURE__ */ React32.createElement("p", { style: { fontWeight: 600 } }, list.title), /* @__PURE__ */ React32.createElement(EuiSpacer8, { size: "m" }), list.items.map((item, index) => /* @__PURE__ */ React32.createElement("div", { key: index }, /* @__PURE__ */ React32.createElement(ListItemStartPage, { item, type: list.type }), index === list.items.length - 1 ? null : /* @__PURE__ */ React32.createElement(EuiHorizontalRule2, { margin: "none" }))), /* @__PURE__ */ React32.createElement(EuiSpacer8, { size: "m" }), /* @__PURE__ */ React32.createElement(EuiButton6, { fullWidth: true }, list.buttonName)));
+  return (list == null ? void 0 : list.items) && /* @__PURE__ */ jsx32(EuiFlexItem4, { style: { minWidth: 300 }, children: /* @__PURE__ */ jsxs21(EuiPanel4, { hasShadow: false, hasBorder: true, paddingSize: "l", children: [
+    /* @__PURE__ */ jsx32("p", { style: { fontWeight: 600 }, children: list.title }),
+    /* @__PURE__ */ jsx32(EuiSpacer8, { size: "m" }),
+    list.items.map((item, index) => /* @__PURE__ */ jsxs21("div", { children: [
+      /* @__PURE__ */ jsx32(ListItemStartPage, { item, type: list.type }),
+      index === list.items.length - 1 ? null : /* @__PURE__ */ jsx32(EuiHorizontalRule2, { margin: "none" })
+    ] }, index)),
+    /* @__PURE__ */ jsx32(EuiSpacer8, { size: "m" }),
+    /* @__PURE__ */ jsx32(EuiButton6, { fullWidth: true, children: list.buttonName })
+  ] }) });
 }
 
 // src/components/StartPage/MultiListSection.tsx
-import React33 from "react";
 import { EuiFlexGroup as EuiFlexGroup5 } from "@elastic/eui";
+import { jsx as jsx33, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 var MultiListSection = () => {
   const favouriteSubscriptionsList = useFavouriteSubscriptions();
   const processesAttentionList = useProcessesAttention();
   const completedProcessesList = useRecentProcesses();
-  return /* @__PURE__ */ React33.createElement(EuiFlexGroup5, { wrap: true }, /* @__PURE__ */ React33.createElement(ListStartPage, { list: favouriteSubscriptionsList }), /* @__PURE__ */ React33.createElement(ListStartPage, { list: processesAttentionList }), /* @__PURE__ */ React33.createElement(ListStartPage, { list: completedProcessesList }));
+  return /* @__PURE__ */ jsxs22(EuiFlexGroup5, { wrap: true, children: [
+    /* @__PURE__ */ jsx33(ListStartPage, { list: favouriteSubscriptionsList }),
+    /* @__PURE__ */ jsx33(ListStartPage, { list: processesAttentionList }),
+    /* @__PURE__ */ jsx33(ListStartPage, { list: completedProcessesList })
+  ] });
 };
 
 // src/components/StartPage/NewProcessPanel.tsx
-import React34, { useState as useState5 } from "react";
+import { useState as useState5 } from "react";
 import {
   EuiFieldSearch,
   EuiPanel as EuiPanel5,
@@ -1497,6 +1617,7 @@ import {
   EuiText as EuiText5,
   EuiTextColor as EuiTextColor2
 } from "@elastic/eui";
+import { jsx as jsx34, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 var NewProcessPanel = () => {
   const [value, setValue] = useState5("");
   const onChange = (e) => {
@@ -1509,20 +1630,28 @@ var NewProcessPanel = () => {
     "NL8 Service Port 100G",
     "SN8 AGGSP"
   ];
-  return /* @__PURE__ */ React34.createElement(EuiPanel5, { hasShadow: false, color: "subdued", paddingSize: "l" }, /* @__PURE__ */ React34.createElement(EuiText5, null, /* @__PURE__ */ React34.createElement("b", null, "Start a new process")), /* @__PURE__ */ React34.createElement(EuiSpacer9, { size: "m" }), /* @__PURE__ */ React34.createElement(
-    EuiFieldSearch,
-    {
-      fullWidth: true,
-      placeholder: "Search and select process",
-      value,
-      onChange: (e) => onChange(e),
-      "aria-label": "Search and select process"
-    }
-  ), /* @__PURE__ */ React34.createElement(EuiSpacer9, { size: "m" }), /* @__PURE__ */ React34.createElement(EuiTextColor2, { color: "subdued" }, "Frequently used:"), /* @__PURE__ */ React34.createElement(EuiSpacer9, { size: "s" }), /* @__PURE__ */ React34.createElement(FrequentlyUsed, { values: frequentlyUsedValues }));
+  return /* @__PURE__ */ jsxs23(EuiPanel5, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
+    /* @__PURE__ */ jsx34(EuiText5, { children: /* @__PURE__ */ jsx34("b", { children: "Start a new process" }) }),
+    /* @__PURE__ */ jsx34(EuiSpacer9, { size: "m" }),
+    /* @__PURE__ */ jsx34(
+      EuiFieldSearch,
+      {
+        fullWidth: true,
+        placeholder: "Search and select process",
+        value,
+        onChange: (e) => onChange(e),
+        "aria-label": "Search and select process"
+      }
+    ),
+    /* @__PURE__ */ jsx34(EuiSpacer9, { size: "m" }),
+    /* @__PURE__ */ jsx34(EuiTextColor2, { color: "subdued", children: "Frequently used:" }),
+    /* @__PURE__ */ jsx34(EuiSpacer9, { size: "s" }),
+    /* @__PURE__ */ jsx34(FrequentlyUsed, { values: frequentlyUsedValues })
+  ] });
 };
 
 // src/components/StartPage/StatCards.tsx
-import React35, { useState as useState6 } from "react";
+import { useState as useState6 } from "react";
 import {
   EuiAvatar,
   EuiFlexGroup as EuiFlexGroup6,
@@ -1530,6 +1659,7 @@ import {
   EuiPanel as EuiPanel6,
   EuiText as EuiText6
 } from "@elastic/eui";
+import { jsx as jsx35, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 var totalStats = [
   {
     icon: "kubernetesPod",
@@ -1553,27 +1683,34 @@ var totalStats = [
 var StatCards = () => {
   const [stats] = useState6(totalStats);
   const { theme } = useOrchestratorTheme();
-  return /* @__PURE__ */ React35.createElement(EuiFlexGroup6, { wrap: true }, stats.map((stat, index) => /* @__PURE__ */ React35.createElement(EuiFlexItem5, { key: index }, /* @__PURE__ */ React35.createElement(EuiPanel6, { hasShadow: false, color: "subdued", paddingSize: "l" }, /* @__PURE__ */ React35.createElement(EuiFlexGroup6, null, /* @__PURE__ */ React35.createElement(EuiFlexItem5, { grow: false }, /* @__PURE__ */ React35.createElement(
-    EuiAvatar,
-    {
-      iconSize: "l",
-      size: "xl",
-      type: "space",
-      name: stat.name,
-      style: { maxHeight: 55, maxWidth: 55 },
-      iconType: stat.icon,
-      iconColor: theme.colors.ghost,
-      color: theme.colors[stat.color]
-    }
-  )), /* @__PURE__ */ React35.createElement(EuiFlexItem5, null, /* @__PURE__ */ React35.createElement(EuiText6, { color: "subdued" }, /* @__PURE__ */ React35.createElement("h4", { style: { fontWeight: 300 } }, "Total ", stat.name)), /* @__PURE__ */ React35.createElement(EuiText6, null, /* @__PURE__ */ React35.createElement("h2", { style: { fontWeight: 500 } }, stat.value.toLocaleString("de-DE")))))))));
+  return /* @__PURE__ */ jsx35(EuiFlexGroup6, { wrap: true, children: stats.map((stat, index) => /* @__PURE__ */ jsx35(EuiFlexItem5, { children: /* @__PURE__ */ jsx35(EuiPanel6, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs24(EuiFlexGroup6, { children: [
+    /* @__PURE__ */ jsx35(EuiFlexItem5, { grow: false, children: /* @__PURE__ */ jsx35(
+      EuiAvatar,
+      {
+        iconSize: "l",
+        size: "xl",
+        type: "space",
+        name: stat.name,
+        style: { maxHeight: 55, maxWidth: 55 },
+        iconType: stat.icon,
+        iconColor: theme.colors.ghost,
+        color: theme.colors[stat.color]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs24(EuiFlexItem5, { children: [
+      /* @__PURE__ */ jsx35(EuiText6, { color: "subdued", children: /* @__PURE__ */ jsxs24("h4", { style: { fontWeight: 300 }, children: [
+        "Total ",
+        stat.name
+      ] }) }),
+      /* @__PURE__ */ jsx35(EuiText6, { children: /* @__PURE__ */ jsx35("h2", { style: { fontWeight: 500 }, children: stat.value.toLocaleString("de-DE") }) })
+    ] })
+  ] }) }) }, index)) });
 };
 
 // src/components/Subscription/FixedInputBlock.tsx
-import React37 from "react";
 import { EuiFlexGroup as EuiFlexGroup8, EuiFlexItem as EuiFlexItem7, EuiSpacer as EuiSpacer11, EuiText as EuiText8 } from "@elastic/eui";
 
 // src/components/Subscription/SubscriptionBlock.tsx
-import React36 from "react";
 import {
   EuiButtonEmpty as EuiButtonEmpty2,
   EuiFlexGroup as EuiFlexGroup7,
@@ -1600,14 +1737,15 @@ var subscriptionValueCellStyle = css({
 });
 
 // src/components/Subscription/SubscriptionBlock.tsx
+import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
 var RenderField = (field, data) => {
   if (field === "status")
-    return /* @__PURE__ */ React36.createElement(WFOStatusBadge, { status: data[field] });
+    return /* @__PURE__ */ jsx36(WFOStatusBadge, { status: data[field] });
   else if (field === "insync")
-    return /* @__PURE__ */ React36.createElement("div", { style: { position: "relative", top: 5 } }, data[field] ? /* @__PURE__ */ React36.createElement(CheckmarkCircleFill, { color: "#007832" }) : /* @__PURE__ */ React36.createElement(MinusCircleOutline, { color: "#BD271F" }));
+    return /* @__PURE__ */ jsx36("div", { style: { position: "relative", top: 5 }, children: data[field] ? /* @__PURE__ */ jsx36(CheckmarkCircleFill, { color: "#007832" }) : /* @__PURE__ */ jsx36(MinusCircleOutline, { color: "#BD271F" }) });
   else if (field === "product.name")
-    return /* @__PURE__ */ React36.createElement("div", null, data.product.name);
-  return /* @__PURE__ */ React36.createElement("div", null, data[field]);
+    return /* @__PURE__ */ jsx36("div", { children: data.product.name });
+  return /* @__PURE__ */ jsx36("div", { children: data[field] });
 };
 var SubscriptionBlock = (title, data) => {
   const keys = [];
@@ -1618,34 +1756,53 @@ var SubscriptionBlock = (title, data) => {
   }
   if (keys.length === 0)
     return;
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(EuiSpacer10, { size: "m" }), /* @__PURE__ */ React36.createElement("div", null, /* @__PURE__ */ React36.createElement("div", { style: { marginTop: 5 } }, /* @__PURE__ */ React36.createElement(EuiFlexGroup7, { justifyContent: "spaceBetween" }, /* @__PURE__ */ React36.createElement(EuiFlexItem6, null, /* @__PURE__ */ React36.createElement(EuiText7, { grow: false }, /* @__PURE__ */ React36.createElement("h3", null, title))), /* @__PURE__ */ React36.createElement(EuiFlexItem6, { grow: false }, /* @__PURE__ */ React36.createElement(EuiButtonEmpty2, { size: "s", iconType: "starEmpty" }, "Add to favorites"))), /* @__PURE__ */ React36.createElement(EuiSpacer10, { size: "s" }), /* @__PURE__ */ React36.createElement("table", { width: "100%" }, /* @__PURE__ */ React36.createElement("tbody", null, /* @__PURE__ */ React36.createElement("tr", { key: 0, css: subscriptionTableRowStyle }, /* @__PURE__ */ React36.createElement(
-    "td",
-    {
-      valign: "top",
-      css: subscriptionDefinitionCellStyle
-    },
-    /* @__PURE__ */ React36.createElement("b", null, "Product")
-  ), /* @__PURE__ */ React36.createElement("td", { css: subscriptionValueCellStyle }, data.product.name)), keys.map((k, i) => /* @__PURE__ */ React36.createElement(
-    "tr",
-    {
-      key: i,
-      style: {
-        backgroundColor: i % 2 ? "#F1F5F9" : "#FFF"
-      }
-    },
-    /* @__PURE__ */ React36.createElement(
-      "td",
-      {
-        valign: "top",
-        css: subscriptionDefinitionCellStyle
-      },
-      /* @__PURE__ */ React36.createElement("b", null, k)
-    ),
-    /* @__PURE__ */ React36.createElement("td", { css: subscriptionValueCellStyle }, RenderField(k, data))
-  )))))));
+  return /* @__PURE__ */ jsxs25(Fragment6, { children: [
+    /* @__PURE__ */ jsx36(EuiSpacer10, { size: "m" }),
+    /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsxs25("div", { style: { marginTop: 5 }, children: [
+      /* @__PURE__ */ jsxs25(EuiFlexGroup7, { justifyContent: "spaceBetween", children: [
+        /* @__PURE__ */ jsx36(EuiFlexItem6, { children: /* @__PURE__ */ jsx36(EuiText7, { grow: false, children: /* @__PURE__ */ jsx36("h3", { children: title }) }) }),
+        /* @__PURE__ */ jsx36(EuiFlexItem6, { grow: false, children: /* @__PURE__ */ jsx36(EuiButtonEmpty2, { size: "s", iconType: "starEmpty", children: "Add to favorites" }) })
+      ] }),
+      /* @__PURE__ */ jsx36(EuiSpacer10, { size: "s" }),
+      /* @__PURE__ */ jsx36("table", { width: "100%", children: /* @__PURE__ */ jsxs25("tbody", { children: [
+        /* @__PURE__ */ jsxs25("tr", { css: subscriptionTableRowStyle, children: [
+          /* @__PURE__ */ jsx36(
+            "td",
+            {
+              valign: "top",
+              css: subscriptionDefinitionCellStyle,
+              children: /* @__PURE__ */ jsx36("b", { children: "Product" })
+            }
+          ),
+          /* @__PURE__ */ jsx36("td", { css: subscriptionValueCellStyle, children: data.product.name })
+        ] }, 0),
+        keys.map((k, i) => /* @__PURE__ */ jsxs25(
+          "tr",
+          {
+            style: {
+              backgroundColor: i % 2 ? "#F1F5F9" : "#FFF"
+            },
+            children: [
+              /* @__PURE__ */ jsx36(
+                "td",
+                {
+                  valign: "top",
+                  css: subscriptionDefinitionCellStyle,
+                  children: /* @__PURE__ */ jsx36("b", { children: k })
+                }
+              ),
+              /* @__PURE__ */ jsx36("td", { css: subscriptionValueCellStyle, children: RenderField(k, data) })
+            ]
+          },
+          i
+        ))
+      ] }) })
+    ] }) })
+  ] });
 };
 
 // src/components/Subscription/FixedInputBlock.tsx
+import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 var FixedInputBlock = (title, data) => {
   const keys = [];
   for (const key in data) {
@@ -1653,28 +1810,36 @@ var FixedInputBlock = (title, data) => {
   }
   if (keys.length === 0)
     return;
-  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(EuiSpacer11, { size: "m" }), /* @__PURE__ */ React37.createElement("div", null, /* @__PURE__ */ React37.createElement("div", { style: { marginTop: 5 } }, /* @__PURE__ */ React37.createElement(EuiFlexGroup8, { justifyContent: "spaceBetween" }, /* @__PURE__ */ React37.createElement(EuiFlexItem7, null, /* @__PURE__ */ React37.createElement(EuiText8, { grow: false }, /* @__PURE__ */ React37.createElement("h3", null, title)))), /* @__PURE__ */ React37.createElement(EuiSpacer11, { size: "s" }), /* @__PURE__ */ React37.createElement("table", { width: "100%" }, /* @__PURE__ */ React37.createElement("tbody", null, keys.map((k, i) => /* @__PURE__ */ React37.createElement(
-    "tr",
-    {
-      key: i,
-      style: {
-        backgroundColor: i % 2 ? "#FFF" : "#F1F5F9"
-      }
-    },
-    /* @__PURE__ */ React37.createElement(
-      "td",
-      {
-        valign: "top",
-        css: subscriptionDefinitionCellStyle
-      },
-      /* @__PURE__ */ React37.createElement("b", null, k)
-    ),
-    /* @__PURE__ */ React37.createElement("td", { css: subscriptionValueCellStyle }, RenderField(k, data))
-  )))))));
+  return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+    /* @__PURE__ */ jsx37(EuiSpacer11, { size: "m" }),
+    /* @__PURE__ */ jsx37("div", { children: /* @__PURE__ */ jsxs26("div", { style: { marginTop: 5 }, children: [
+      /* @__PURE__ */ jsx37(EuiFlexGroup8, { justifyContent: "spaceBetween", children: /* @__PURE__ */ jsx37(EuiFlexItem7, { children: /* @__PURE__ */ jsx37(EuiText8, { grow: false, children: /* @__PURE__ */ jsx37("h3", { children: title }) }) }) }),
+      /* @__PURE__ */ jsx37(EuiSpacer11, { size: "s" }),
+      /* @__PURE__ */ jsx37("table", { width: "100%", children: /* @__PURE__ */ jsx37("tbody", { children: keys.map((k, i) => /* @__PURE__ */ jsxs26(
+        "tr",
+        {
+          style: {
+            backgroundColor: i % 2 ? "#FFF" : "#F1F5F9"
+          },
+          children: [
+            /* @__PURE__ */ jsx37(
+              "td",
+              {
+                valign: "top",
+                css: subscriptionDefinitionCellStyle,
+                children: /* @__PURE__ */ jsx37("b", { children: k })
+              }
+            ),
+            /* @__PURE__ */ jsx37("td", { css: subscriptionValueCellStyle, children: RenderField(k, data) })
+          ]
+        },
+        i
+      )) }) })
+    ] }) })
+  ] });
 };
 
 // src/components/Subscription/ProcessesTimeline.tsx
-import React38 from "react";
 import {
   EuiAvatar as EuiAvatar2,
   EuiComment,
@@ -1682,62 +1847,84 @@ import {
   EuiSpacer as EuiSpacer12,
   EuiLoadingContent
 } from "@elastic/eui";
-var Card = (processInfo) => /* @__PURE__ */ React38.createElement("div", { style: { marginTop: 5 } }, /* @__PURE__ */ React38.createElement("table", { width: "100%", bgcolor: "#F1F5F9" }, /* @__PURE__ */ React38.createElement("tr", null, /* @__PURE__ */ React38.createElement(
-  "td",
-  {
-    valign: "top",
-    style: {
-      width: 250,
-      padding: 10,
-      borderBottom: "solid 1px #ddd"
-    }
-  },
-  /* @__PURE__ */ React38.createElement("b", null, "ID")
-), /* @__PURE__ */ React38.createElement("td", { style: { padding: 10, borderBottom: "solid 1px #ddd" } }, /* @__PURE__ */ React38.createElement(
-  "a",
-  {
-    href: `https://orchestrator.dev.automation.surf.net/processes/${processInfo.process.pid}`
-  },
-  processInfo.pid
-))), /* @__PURE__ */ React38.createElement("tr", null, /* @__PURE__ */ React38.createElement(
-  "td",
-  {
-    valign: "top",
-    style: { padding: 10, borderBottom: "solid 1px #ddd" }
-  },
-  /* @__PURE__ */ React38.createElement("b", null, "Status")
-), /* @__PURE__ */ React38.createElement("td", { style: { padding: 10, borderBottom: "solid 1px #ddd" } }, /* @__PURE__ */ React38.createElement(
-  ProcessStatusBadge,
-  {
-    processStatus: processInfo.process.last_status
-  }
-))), /* @__PURE__ */ React38.createElement("tr", null, /* @__PURE__ */ React38.createElement(
-  "td",
-  {
-    valign: "top",
-    style: { padding: 10, borderBottom: "solid 1px #ddd" }
-  },
-  /* @__PURE__ */ React38.createElement("b", null, "Started at")
-), /* @__PURE__ */ React38.createElement("td", { style: { padding: 10, borderBottom: "solid 1px #ddd" } }, "2-11-2021 13:47:43 - Duration: 00:00:024")), /* @__PURE__ */ React38.createElement("tr", null, /* @__PURE__ */ React38.createElement("td", { valign: "top", style: { padding: 10 } }, /* @__PURE__ */ React38.createElement("b", null, "Started by")), /* @__PURE__ */ React38.createElement("td", { style: { padding: 10 } }, processInfo.process.created_by))));
-var RenderProcess = (processInfo) => /* @__PURE__ */ React38.createElement(
+import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+var Card = (processInfo) => /* @__PURE__ */ jsx38("div", { style: { marginTop: 5 }, children: /* @__PURE__ */ jsxs27("table", { width: "100%", bgcolor: "#F1F5F9", children: [
+  /* @__PURE__ */ jsxs27("tr", { children: [
+    /* @__PURE__ */ jsx38(
+      "td",
+      {
+        valign: "top",
+        style: {
+          width: 250,
+          padding: 10,
+          borderBottom: "solid 1px #ddd"
+        },
+        children: /* @__PURE__ */ jsx38("b", { children: "ID" })
+      }
+    ),
+    /* @__PURE__ */ jsx38("td", { style: { padding: 10, borderBottom: "solid 1px #ddd" }, children: /* @__PURE__ */ jsx38(
+      "a",
+      {
+        href: `https://orchestrator.dev.automation.surf.net/processes/${processInfo.process.pid}`,
+        children: processInfo.pid
+      }
+    ) })
+  ] }),
+  /* @__PURE__ */ jsxs27("tr", { children: [
+    /* @__PURE__ */ jsx38(
+      "td",
+      {
+        valign: "top",
+        style: { padding: 10, borderBottom: "solid 1px #ddd" },
+        children: /* @__PURE__ */ jsx38("b", { children: "Status" })
+      }
+    ),
+    /* @__PURE__ */ jsx38("td", { style: { padding: 10, borderBottom: "solid 1px #ddd" }, children: /* @__PURE__ */ jsx38(
+      ProcessStatusBadge,
+      {
+        processStatus: processInfo.process.last_status
+      }
+    ) })
+  ] }),
+  /* @__PURE__ */ jsxs27("tr", { children: [
+    /* @__PURE__ */ jsx38(
+      "td",
+      {
+        valign: "top",
+        style: { padding: 10, borderBottom: "solid 1px #ddd" },
+        children: /* @__PURE__ */ jsx38("b", { children: "Started at" })
+      }
+    ),
+    /* @__PURE__ */ jsx38("td", { style: { padding: 10, borderBottom: "solid 1px #ddd" }, children: "2-11-2021 13:47:43 - Duration: 00:00:024" })
+  ] }),
+  /* @__PURE__ */ jsxs27("tr", { children: [
+    /* @__PURE__ */ jsx38("td", { valign: "top", style: { padding: 10 }, children: /* @__PURE__ */ jsx38("b", { children: "Started by" }) }),
+    /* @__PURE__ */ jsx38("td", { style: { padding: 10 }, children: processInfo.process.created_by })
+  ] })
+] }) });
+var RenderProcess = (processInfo) => /* @__PURE__ */ jsx38(
   EuiComment,
   {
     username: processInfo.workflow_target ?? "",
     timelineAvatarAriaLabel: processInfo.process.workflow,
-    timelineAvatar: /* @__PURE__ */ React38.createElement(EuiAvatar2, { name: "C" })
-  },
-  Card(processInfo)
+    timelineAvatar: /* @__PURE__ */ jsx38(EuiAvatar2, { name: "C" }),
+    children: Card(processInfo)
+  }
 );
 var ProcessesTimeline = ({
   subscriptionId
 }) => {
   const { data: subscriptionProcesses } = useSubscriptionProcesses(subscriptionId);
   console.log("SUB", subscriptionProcesses);
-  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(EuiSpacer12, { size: "m" }), !subscriptionProcesses && /* @__PURE__ */ React38.createElement(EuiLoadingContent, null), /* @__PURE__ */ React38.createElement(EuiCommentList, { "aria-label": "Processes" }, subscriptionProcesses && /* @__PURE__ */ React38.createElement(EuiCommentList, { "aria-label": "Processes" }, subscriptionProcesses.map((i) => RenderProcess(i)))));
+  return /* @__PURE__ */ jsxs27(Fragment8, { children: [
+    /* @__PURE__ */ jsx38(EuiSpacer12, { size: "m" }),
+    !subscriptionProcesses && /* @__PURE__ */ jsx38(EuiLoadingContent, {}),
+    /* @__PURE__ */ jsx38(EuiCommentList, { "aria-label": "Processes", children: subscriptionProcesses && /* @__PURE__ */ jsx38(EuiCommentList, { "aria-label": "Processes", children: subscriptionProcesses.map((i) => RenderProcess(i)) }) })
+  ] });
 };
 
 // src/components/Subscription/ProductBlock.tsx
-import React41 from "react";
+import React9 from "react";
 import { EuiAccordion, EuiCodeBlock } from "@elastic/eui";
 import {
   EuiButtonIcon as EuiButtonIcon2,
@@ -1749,7 +1936,8 @@ import {
 } from "@elastic/eui";
 
 // src/contexts/SubscriptionContext.tsx
-import * as React39 from "react";
+import * as React7 from "react";
+import { jsx as jsx39 } from "@emotion/react/jsx-runtime";
 var subscriptionDetailInit = {
   subscriptionId: "",
   description: "",
@@ -1772,37 +1960,38 @@ var InitialSubscriptionContext = {
   loadingStatus: 0,
   setSubscriptionData: () => null
 };
-var SubscriptionContext = React39.createContext(
+var SubscriptionContext = React7.createContext(
   InitialSubscriptionContext
 );
 var SubscriptionProvider = ({
   children
 }) => {
-  const [subscriptionData, setInternalSubscriptionData] = React39.useState(subscriptionDetailInit);
-  const [loadingStatus, setLoadingStatus] = React39.useState(0);
+  const [subscriptionData, setInternalSubscriptionData] = React7.useState(subscriptionDetailInit);
+  const [loadingStatus, setLoadingStatus] = React7.useState(0);
   const setSubscriptionData = (data, loadingStatus2) => {
     setInternalSubscriptionData(data);
     setLoadingStatus(loadingStatus2);
   };
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ jsx39(
     SubscriptionContext.Provider,
     {
       value: {
         subscriptionData,
         loadingStatus,
         setSubscriptionData
-      }
-    },
-    children
+      },
+      children
+    }
   );
 };
 
 // src/contexts/TreeContext.tsx
-import * as React40 from "react";
-var TreeContext = React40.createContext(null);
+import * as React8 from "react";
+import { jsx as jsx40 } from "@emotion/react/jsx-runtime";
+var TreeContext = React8.createContext(null);
 var TreeProvider = ({ children }) => {
-  const [selectedIds, setSelectedIds] = React40.useState([]);
-  const [expandedIds, setExpandedIds] = React40.useState([0]);
+  const [selectedIds, setSelectedIds] = React8.useState([]);
+  const [expandedIds, setExpandedIds] = React8.useState([0]);
   const toggleSelectedId = (id) => {
     if (selectedIds.includes(id)) {
       const newSelectedIds = selectedIds.filter(
@@ -1854,7 +2043,7 @@ var TreeProvider = ({ children }) => {
     console.log("Removed all selected id's");
     setSelectedIds([]);
   };
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ jsx40(
     TreeContext.Provider,
     {
       value: {
@@ -1865,18 +2054,19 @@ var TreeProvider = ({ children }) => {
         expandAll,
         collapseAll,
         resetSelection
-      }
-    },
-    children
+      },
+      children
+    }
   );
 };
 
 // src/components/Subscription/ProductBlock.tsx
+import { Fragment as Fragment9, jsx as jsx41, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
 var ProductBlock = (resourceTypes, id) => {
-  const { toggleSelectedId } = React41.useContext(
+  const { toggleSelectedId } = React9.useContext(
     TreeContext
   );
-  const { subscriptionData } = React41.useContext(SubscriptionContext);
+  const { subscriptionData } = React9.useContext(SubscriptionContext);
   const keys = [];
   for (const key in resourceTypes) {
     if (typeof resourceTypes[key] !== "object") {
@@ -1908,91 +2098,107 @@ var ProductBlock = (resourceTypes, id) => {
     } else
       return "";
   };
-  return /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(EuiSpacer13, { size: "m" }), /* @__PURE__ */ React41.createElement(EuiPanel7, null, /* @__PURE__ */ React41.createElement("div", { style: { marginTop: 5 } }, /* @__PURE__ */ React41.createElement(EuiFlexGroup9, { justifyContent: "spaceBetween" }, /* @__PURE__ */ React41.createElement(EuiFlexItem8, null, /* @__PURE__ */ React41.createElement(EuiText9, { grow: false }, /* @__PURE__ */ React41.createElement("h3", null, resourceTypes.title ?? resourceTypes.name))), /* @__PURE__ */ React41.createElement(EuiFlexItem8, { grow: false }, /* @__PURE__ */ React41.createElement(
-    EuiButtonIcon2,
-    {
-      size: "m",
-      iconType: "cross",
-      onClick: () => toggleSelectedId(id)
-    }
-  ))), /* @__PURE__ */ React41.createElement(EuiSpacer13, { size: "xs" }), /* @__PURE__ */ React41.createElement(
-    "table",
-    {
-      width: "100%",
-      bgcolor: "#F1F5F9",
-      style: {
-        borderCollapse: "separate",
-        borderRadius: 8
-      }
-    },
-    keys.map(
-      (k, i) => !k.startsWith("ims_ci") ? /* @__PURE__ */ React41.createElement("tr", { key: i }, /* @__PURE__ */ React41.createElement(
-        "td",
-        {
-          valign: "top",
-          style: {
-            width: 250,
-            padding: 10,
-            borderBottom: `solid ${i === keys.length - 1 ? 0 : 1}px #ddd`
-          }
-        },
-        /* @__PURE__ */ React41.createElement("b", null, k)
-      ), /* @__PURE__ */ React41.createElement(
-        "td",
-        {
-          style: {
-            padding: 10,
-            borderBottom: `solid ${i === keys.length - 1 ? 0 : 1}px #ddd`
+  return /* @__PURE__ */ jsxs28(Fragment9, { children: [
+    /* @__PURE__ */ jsx41(EuiSpacer13, { size: "m" }),
+    /* @__PURE__ */ jsx41(EuiPanel7, { children: /* @__PURE__ */ jsxs28("div", { style: { marginTop: 5 }, children: [
+      /* @__PURE__ */ jsxs28(EuiFlexGroup9, { justifyContent: "spaceBetween", children: [
+        /* @__PURE__ */ jsx41(EuiFlexItem8, { children: /* @__PURE__ */ jsx41(EuiText9, { grow: false, children: /* @__PURE__ */ jsx41("h3", { children: resourceTypes.title ?? resourceTypes.name }) }) }),
+        /* @__PURE__ */ jsx41(EuiFlexItem8, { grow: false, children: /* @__PURE__ */ jsx41(
+          EuiButtonIcon2,
+          {
+            size: "m",
+            iconType: "cross",
+            onClick: () => toggleSelectedId(id)
           }
-        },
-        resourceTypes[k]
-      )) : /* @__PURE__ */ React41.createElement("tr", null, /* @__PURE__ */ React41.createElement(
-        "td",
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx41(EuiSpacer13, { size: "xs" }),
+      /* @__PURE__ */ jsx41(
+        "table",
         {
-          colSpan: 3,
+          width: "100%",
+          bgcolor: "#F1F5F9",
           style: {
-            padding: 10,
-            borderBottom: `solid ${i === keys.length - 1 ? 0 : 1}px #ddd`
-          }
-        },
-        /* @__PURE__ */ React41.createElement(
-          EuiAccordion,
-          {
-            id: k,
-            arrowDisplay: "left",
-            buttonContent: /* @__PURE__ */ React41.createElement("div", null, /* @__PURE__ */ React41.createElement(
+            borderCollapse: "separate",
+            borderRadius: 8
+          },
+          children: keys.map(
+            (k, i) => !k.startsWith("ims_ci") ? /* @__PURE__ */ jsxs28("tr", { children: [
+              /* @__PURE__ */ jsx41(
+                "td",
+                {
+                  valign: "top",
+                  style: {
+                    width: 250,
+                    padding: 10,
+                    borderBottom: `solid ${i === keys.length - 1 ? 0 : 1}px #ddd`
+                  },
+                  children: /* @__PURE__ */ jsx41("b", { children: k })
+                }
+              ),
+              /* @__PURE__ */ jsx41(
+                "td",
+                {
+                  style: {
+                    padding: 10,
+                    borderBottom: `solid ${i === keys.length - 1 ? 0 : 1}px #ddd`
+                  },
+                  children: resourceTypes[k]
+                }
+              )
+            ] }, i) : /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41(
               "td",
               {
-                valign: "top",
+                colSpan: 3,
                 style: {
-                  width: 222
-                }
-              },
-              /* @__PURE__ */ React41.createElement("b", null, k)
-            ), /* @__PURE__ */ React41.createElement("td", null, resourceTypes[k]))
-          },
-          /* @__PURE__ */ React41.createElement(EuiPanel7, { color: "subdued" }, /* @__PURE__ */ React41.createElement(
-            EuiCodeBlock,
-            {
-              language: "json",
-              fontSize: "m",
-              lineNumbers: true,
-              isCopyable: true
-            },
-            getExternalData(
-              resourceTypes[k],
-              "ims"
-              // Todo #102: Federative GraphQL
-            )
-          ))
-        )
-      ))
-    )
-  ))));
+                  padding: 10,
+                  borderBottom: `solid ${i === keys.length - 1 ? 0 : 1}px #ddd`
+                },
+                children: /* @__PURE__ */ jsx41(
+                  EuiAccordion,
+                  {
+                    id: k,
+                    arrowDisplay: "left",
+                    buttonContent: /* @__PURE__ */ jsxs28("div", { children: [
+                      /* @__PURE__ */ jsx41(
+                        "td",
+                        {
+                          valign: "top",
+                          style: {
+                            width: 222
+                          },
+                          children: /* @__PURE__ */ jsx41("b", { children: k })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx41("td", { children: resourceTypes[k] })
+                    ] }),
+                    children: /* @__PURE__ */ jsx41(EuiPanel7, { color: "subdued", children: /* @__PURE__ */ jsx41(
+                      EuiCodeBlock,
+                      {
+                        language: "json",
+                        fontSize: "m",
+                        lineNumbers: true,
+                        isCopyable: true,
+                        children: getExternalData(
+                          resourceTypes[k],
+                          "ims"
+                          // Todo #102: Federative GraphQL
+                        )
+                      }
+                    ) })
+                  }
+                )
+              }
+            ) }, i)
+          )
+        }
+      )
+    ] }) })
+  ] });
 };
 
 // src/components/Subscription/SubscriptionActions.tsx
-import React42, { useState as useState9 } from "react";
+import { useState as useState9 } from "react";
 import {
   EuiButton as EuiButton7,
   EuiContextMenuItem,
@@ -2002,8 +2208,9 @@ import {
   EuiTitle,
   EuiPopover
 } from "@elastic/eui";
-var MenuItem = ({ icon, description, key }) => /* @__PURE__ */ React42.createElement(EuiContextMenuItem, { key, icon: /* @__PURE__ */ React42.createElement(EuiAvatar3, { name: icon, size: "s" }) }, description);
-var MenuBlock = ({ title }) => /* @__PURE__ */ React42.createElement(EuiTitle, { size: "xxxs" }, /* @__PURE__ */ React42.createElement("h3", null, title));
+import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+var MenuItem = ({ icon, description, key }) => /* @__PURE__ */ jsx42(EuiContextMenuItem, { icon: /* @__PURE__ */ jsx42(EuiAvatar3, { name: icon, size: "s" }), children: description }, key);
+var MenuBlock = ({ title }) => /* @__PURE__ */ jsx42(EuiTitle, { size: "xxxs", children: /* @__PURE__ */ jsx42("h3", { children: title }) });
 var SubscriptionActions = ({
   subscriptionId
 }) => {
@@ -2015,16 +2222,16 @@ var SubscriptionActions = ({
   const closePopover = () => {
     setPopover(false);
   };
-  const button = /* @__PURE__ */ React42.createElement(
+  const button = /* @__PURE__ */ jsx42(
     EuiButton7,
     {
       iconType: "arrowDown",
       iconSide: "right",
-      onClick: onButtonClick
-    },
-    "Actions"
+      onClick: onButtonClick,
+      children: "Actions"
+    }
   );
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ jsx42(
     EuiPopover,
     {
       id: "subscriptionActionPopover",
@@ -2032,57 +2239,71 @@ var SubscriptionActions = ({
       isOpen: isPopoverOpen,
       closePopover,
       panelPaddingSize: "none",
-      anchorPosition: "downLeft"
-    },
-    /* @__PURE__ */ React42.createElement(EuiContextMenuPanel, null, /* @__PURE__ */ React42.createElement(EuiPanel8, { color: "transparent", paddingSize: "s" }, subscriptionActions && subscriptionActions.create && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(MenuBlock, { title: "Create workflow" }), subscriptionActions.create.map((item, index) => /* @__PURE__ */ React42.createElement(
-      MenuItem,
-      {
-        key: `c_${index}`,
-        icon: "CreateLong",
-        description: item.description,
-        index
-      }
-    ))), subscriptionActions && subscriptionActions.modify && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(MenuBlock, { title: "Modify workflow" }), subscriptionActions.modify.map((item, index) => /* @__PURE__ */ React42.createElement(
-      MenuItem,
-      {
-        key: `m_${index}`,
-        icon: "M",
-        description: item.description,
-        index
-      }
-    ))), subscriptionActions && subscriptionActions.system && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(MenuBlock, { title: "System workflow" }), subscriptionActions.system.map((item, index) => /* @__PURE__ */ React42.createElement(
-      MenuItem,
-      {
-        key: `s_${index}`,
-        icon: "Syste",
-        description: item.description,
-        index
-      }
-    ))), subscriptionActions && subscriptionActions.terminate && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(MenuBlock, { title: "Terminate workflow" }), subscriptionActions.terminate.map(
-      (item, index) => /* @__PURE__ */ React42.createElement(
-        MenuItem,
-        {
-          key: `t_${index}`,
-          icon: "Terminate",
-          description: item.description,
-          index
-        }
-      )
-    ))))
+      anchorPosition: "downLeft",
+      children: /* @__PURE__ */ jsx42(EuiContextMenuPanel, { children: /* @__PURE__ */ jsxs29(EuiPanel8, { color: "transparent", paddingSize: "s", children: [
+        subscriptionActions && subscriptionActions.create && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+          /* @__PURE__ */ jsx42(MenuBlock, { title: "Create workflow" }),
+          subscriptionActions.create.map((item, index) => /* @__PURE__ */ jsx42(
+            MenuItem,
+            {
+              icon: "CreateLong",
+              description: item.description,
+              index
+            },
+            `c_${index}`
+          ))
+        ] }),
+        subscriptionActions && subscriptionActions.modify && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+          /* @__PURE__ */ jsx42(MenuBlock, { title: "Modify workflow" }),
+          subscriptionActions.modify.map((item, index) => /* @__PURE__ */ jsx42(
+            MenuItem,
+            {
+              icon: "M",
+              description: item.description,
+              index
+            },
+            `m_${index}`
+          ))
+        ] }),
+        subscriptionActions && subscriptionActions.system && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+          /* @__PURE__ */ jsx42(MenuBlock, { title: "System workflow" }),
+          subscriptionActions.system.map((item, index) => /* @__PURE__ */ jsx42(
+            MenuItem,
+            {
+              icon: "Syste",
+              description: item.description,
+              index
+            },
+            `s_${index}`
+          ))
+        ] }),
+        subscriptionActions && subscriptionActions.terminate && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+          /* @__PURE__ */ jsx42(MenuBlock, { title: "Terminate workflow" }),
+          subscriptionActions.terminate.map(
+            (item, index) => /* @__PURE__ */ jsx42(
+              MenuItem,
+              {
+                icon: "Terminate",
+                description: item.description,
+                index
+              },
+              `t_${index}`
+            )
+          )
+        ] })
+      ] }) })
+    }
   );
 };
 
 // src/components/Subscription/SubscriptionDetailTree.tsx
-import React46, { useState as useState10 } from "react";
-
-// src/components/Tree/Tree.tsx
-import React45 from "react";
+import React13, { useState as useState10 } from "react";
 
 // src/components/Tree/TreeBranch.tsx
-import React44 from "react";
+import React12 from "react";
 
 // src/components/Tree/TreeNode.tsx
-import React43 from "react";
+import React11 from "react";
 import {
   EuiFlexGroup as EuiFlexGroup10,
   EuiFlexItem as EuiFlexItem9,
@@ -2090,71 +2311,80 @@ import {
   EuiIcon as EuiIcon2,
   EuiListGroupItem
 } from "@elastic/eui";
+import { jsx as jsx43, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var TreeNode = ({ item, hasChildren, level }) => {
-  const { expandedIds, toggleExpandedId, selectedIds, toggleSelectedId } = React43.useContext(TreeContext);
+  const { expandedIds, toggleExpandedId, selectedIds, toggleSelectedId } = React11.useContext(TreeContext);
   const expanded = expandedIds.includes(item.id);
   const selected = selectedIds.includes(item.id);
   let expandIcon = expanded ? "arrowDown" : "arrowRight";
   if (item.id === 0) {
     expandIcon = expanded ? "folderOpen" : "folderClosed";
   }
-  return /* @__PURE__ */ React43.createElement("div", { style: { paddingLeft: `${level * 16}px` } }, /* @__PURE__ */ React43.createElement(EuiFlexGroup10, null, /* @__PURE__ */ React43.createElement(
-    EuiFlexItem9,
-    {
-      grow: false,
-      style: { width: 0, marginTop: 8, marginRight: -8 }
-    },
-    hasChildren ? /* @__PURE__ */ React43.createElement(
-      EuiIcon2,
+  return /* @__PURE__ */ jsx43("div", { style: { paddingLeft: `${level * 16}px` }, children: /* @__PURE__ */ jsxs30(EuiFlexGroup10, { children: [
+    /* @__PURE__ */ jsx43(
+      EuiFlexItem9,
       {
-        type: expandIcon,
-        onClick: () => toggleExpandedId(item.id)
+        grow: false,
+        style: { width: 0, marginTop: 8, marginRight: -8 },
+        children: hasChildren ? /* @__PURE__ */ jsx43(
+          EuiIcon2,
+          {
+            type: expandIcon,
+            onClick: () => toggleExpandedId(item.id)
+          }
+        ) : /* @__PURE__ */ jsx43(EuiToken, { iconType: item.icon })
       }
-    ) : /* @__PURE__ */ React43.createElement(EuiToken, { iconType: item.icon })
-  ), /* @__PURE__ */ React43.createElement(EuiFlexItem9, { grow: true }, selected ? /* @__PURE__ */ React43.createElement(
-    EuiListGroupItem,
-    {
-      onClick: () => toggleSelectedId(item.id),
-      label: item.label,
-      isActive: selected,
-      color: "primary",
-      extraAction: {
+    ),
+    /* @__PURE__ */ jsx43(EuiFlexItem9, { grow: true, children: selected ? /* @__PURE__ */ jsx43(
+      EuiListGroupItem,
+      {
+        onClick: () => toggleSelectedId(item.id),
+        label: item.label,
+        isActive: selected,
         color: "primary",
+        extraAction: {
+          color: "primary",
+          onClick: () => toggleSelectedId(item.id),
+          iconType: "error",
+          iconSize: "s",
+          "aria-label": "Deselect",
+          alwaysShow: true
+        }
+      }
+    ) : /* @__PURE__ */ jsx43(
+      EuiListGroupItem,
+      {
         onClick: () => toggleSelectedId(item.id),
-        iconType: "error",
-        iconSize: "s",
-        "aria-label": "Deselect",
-        alwaysShow: true
+        label: item.label,
+        isActive: selected
       }
-    }
-  ) : /* @__PURE__ */ React43.createElement(
-    EuiListGroupItem,
-    {
-      onClick: () => toggleSelectedId(item.id),
-      label: item.label,
-      isActive: selected
-    }
-  ))));
+    ) })
+  ] }) });
 };
 
 // src/components/Tree/TreeBranch.tsx
 import { EuiListGroup } from "@elastic/eui";
+import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var TreeBranch = ({ item, level }) => {
-  const { expandedIds } = React44.useContext(TreeContext);
+  const { expandedIds } = React12.useContext(TreeContext);
   const selected = expandedIds.includes(item.id);
   const hasChildren = item.children && item.children.length !== 0;
   const renderBranches = () => {
     if (hasChildren) {
       const newLevel = level + 1;
-      return item.children.map((child) => /* @__PURE__ */ React44.createElement(TreeBranch, { key: child.id, item: child, level: newLevel }));
+      return item.children.map((child) => /* @__PURE__ */ jsx44(TreeBranch, { item: child, level: newLevel }, child.id));
     }
     return null;
   };
-  return /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(EuiListGroup, { flush: true, color: "primary", maxWidth: 455 }, /* @__PURE__ */ React44.createElement(TreeNode, { item, hasChildren, level })), selected && renderBranches());
+  return /* @__PURE__ */ jsxs31(Fragment11, { children: [
+    /* @__PURE__ */ jsx44(EuiListGroup, { flush: true, color: "primary", maxWidth: 455, children: /* @__PURE__ */ jsx44(TreeNode, { item, hasChildren, level }) }),
+    selected && renderBranches()
+  ] });
 };
 
 // src/components/Tree/Tree.tsx
-var Tree = ({ data }) => /* @__PURE__ */ React45.createElement("div", { style: { width: "500px" } }, data.map((item) => /* @__PURE__ */ React45.createElement(TreeBranch, { key: item.id, item, level: 0 })));
+import { jsx as jsx45 } from "@emotion/react/jsx-runtime";
+var Tree = ({ data }) => /* @__PURE__ */ jsx45("div", { style: { width: "500px" }, children: data.map((item) => /* @__PURE__ */ jsx45(TreeBranch, { item, level: 0 }, item.id)) });
 
 // src/components/Subscription/SubscriptionDetailTree.tsx
 import {
@@ -2181,6 +2411,7 @@ function getTokenName(name) {
 }
 
 // src/components/Subscription/SubscriptionDetailTree.tsx
+import { jsx as jsx46, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var MAX_LABEL_LENGTH = 45;
 var MAX_EXPAND_ALL = 100;
 function getProductBlockTitle(resourceType) {
@@ -2192,10 +2423,10 @@ function getProductBlockTitle(resourceType) {
 var SubscriptionDetailTree = () => {
   const [expandAllActive, setExpandAllActive] = useState10(false);
   const [selectedTreeNode, setSelectedTreeNode] = useState10(-1);
-  const { subscriptionData, loadingStatus } = React46.useContext(
+  const { subscriptionData, loadingStatus } = React13.useContext(
     SubscriptionContext
   );
-  const { selectedIds, collapseAll, expandAll, resetSelection } = React46.useContext(TreeContext);
+  const { selectedIds, collapseAll, expandAll, resetSelection } = React13.useContext(TreeContext);
   const toggleExpandAll = () => {
     if (expandAllActive) {
       collapseAll();
@@ -2234,63 +2465,88 @@ var SubscriptionDetailTree = () => {
   }
   if (!tree)
     return null;
-  return /* @__PURE__ */ React46.createElement(EuiFlexGroup11, { style: { marginTop: 15 } }, /* @__PURE__ */ React46.createElement(EuiFlexItem10, { style: { maxWidth: 450, width: 450 } }, /* @__PURE__ */ React46.createElement(EuiFlexGroup11, { direction: "column" }, /* @__PURE__ */ React46.createElement(EuiFlexItem10, { grow: false }, /* @__PURE__ */ React46.createElement(EuiFlexGroup11, null, /* @__PURE__ */ React46.createElement(EuiFlexItem10, { grow: false }, /* @__PURE__ */ React46.createElement(EuiText10, null, /* @__PURE__ */ React46.createElement("h3", null, "Product blocks"))), /* @__PURE__ */ React46.createElement(EuiFlexItem10, { grow: false }, /* @__PURE__ */ React46.createElement(
-    EuiButtonIcon3,
-    {
-      iconType: expandAllActive ? "minimize" : "expand",
-      onClick: toggleExpandAll
-    }
-  )), /* @__PURE__ */ React46.createElement(EuiFlexItem10, { grow: true }, selectedIds.length > 0 && /* @__PURE__ */ React46.createElement(
-    EuiButtonIcon3,
-    {
-      iconType: "error",
-      onClick: resetSelection
-    }
-  )))), /* @__PURE__ */ React46.createElement(EuiFlexItem10, { grow: true }, !tree && /* @__PURE__ */ React46.createElement(EuiLoadingContent2, null), tree && /* @__PURE__ */ React46.createElement(Tree, { data: [tree] })))), /* @__PURE__ */ React46.createElement(EuiFlexItem10, { grow: true }, /* @__PURE__ */ React46.createElement("div", null, /* @__PURE__ */ React46.createElement(EuiSearchBar2, null), selectedIds.length === 0 && /* @__PURE__ */ React46.createElement(
-    EuiCallOut,
-    {
-      style: {
-        marginTop: 15,
-        minHeight: 600
-      },
-      size: "m",
-      title: "No product block selected",
-      iconType: "inspect"
-    },
-    /* @__PURE__ */ React46.createElement("p", null, "Select one or more product blocks to view their details")
-  ), selectedIds.length !== 0 && selectedIds.reverse().map(
-    (id, index) => ProductBlock(
-      subscriptionData.productBlocks[selectedIds[index]].resourceTypes,
-      id
-    )
-  ))));
+  return /* @__PURE__ */ jsxs32(EuiFlexGroup11, { style: { marginTop: 15 }, children: [
+    /* @__PURE__ */ jsx46(EuiFlexItem10, { style: { maxWidth: 450, width: 450 }, children: /* @__PURE__ */ jsxs32(EuiFlexGroup11, { direction: "column", children: [
+      /* @__PURE__ */ jsx46(EuiFlexItem10, { grow: false, children: /* @__PURE__ */ jsxs32(EuiFlexGroup11, { children: [
+        /* @__PURE__ */ jsx46(EuiFlexItem10, { grow: false, children: /* @__PURE__ */ jsx46(EuiText10, { children: /* @__PURE__ */ jsx46("h3", { children: "Product blocks" }) }) }),
+        /* @__PURE__ */ jsx46(EuiFlexItem10, { grow: false, children: /* @__PURE__ */ jsx46(
+          EuiButtonIcon3,
+          {
+            iconType: expandAllActive ? "minimize" : "expand",
+            onClick: toggleExpandAll
+          }
+        ) }),
+        /* @__PURE__ */ jsx46(EuiFlexItem10, { grow: true, children: selectedIds.length > 0 && /* @__PURE__ */ jsx46(
+          EuiButtonIcon3,
+          {
+            iconType: "error",
+            onClick: resetSelection
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsxs32(EuiFlexItem10, { grow: true, children: [
+        !tree && /* @__PURE__ */ jsx46(EuiLoadingContent2, {}),
+        tree && /* @__PURE__ */ jsx46(Tree, { data: [tree] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx46(EuiFlexItem10, { grow: true, children: /* @__PURE__ */ jsxs32("div", { children: [
+      /* @__PURE__ */ jsx46(EuiSearchBar2, {}),
+      selectedIds.length === 0 && /* @__PURE__ */ jsx46(
+        EuiCallOut,
+        {
+          style: {
+            marginTop: 15,
+            minHeight: 600
+          },
+          size: "m",
+          title: "No product block selected",
+          iconType: "inspect",
+          children: /* @__PURE__ */ jsx46("p", { children: "Select one or more product blocks to view their details" })
+        }
+      ),
+      selectedIds.length !== 0 && selectedIds.reverse().map(
+        (id, index) => ProductBlock(
+          subscriptionData.productBlocks[selectedIds[index]].resourceTypes,
+          id
+        )
+      )
+    ] }) })
+  ] });
 };
 
 // src/components/Subscription/SubscriptionGeneral.tsx
-import React47 from "react";
+import React14 from "react";
 import {
   EuiFlexGrid,
   EuiFlexItem as EuiFlexItem11,
   EuiLoadingContent as EuiLoadingContent3,
   EuiSpacer as EuiSpacer14
 } from "@elastic/eui";
+import { Fragment as Fragment12, jsx as jsx47, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var SubscriptionGeneral = () => {
-  const { subscriptionData, loadingStatus } = React47.useContext(SubscriptionContext);
+  const { subscriptionData, loadingStatus } = React14.useContext(SubscriptionContext);
   if (!loadingStatus) {
-    return /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(EuiSpacer14, { size: "m" }), /* @__PURE__ */ React47.createElement(EuiLoadingContent3, null));
+    return /* @__PURE__ */ jsxs33(Fragment12, { children: [
+      /* @__PURE__ */ jsx47(EuiSpacer14, { size: "m" }),
+      /* @__PURE__ */ jsx47(EuiLoadingContent3, {})
+    ] });
   }
-  return /* @__PURE__ */ React47.createElement(EuiFlexGrid, { direction: "row" }, /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(EuiFlexItem11, null, SubscriptionBlock(
-    "Subscription details",
-    subscriptionData
-  )), /* @__PURE__ */ React47.createElement(EuiFlexItem11, null, FixedInputBlock(
-    "Fixed inputs",
-    subscriptionData.fixedInputs
-  )), /* @__PURE__ */ React47.createElement(EuiFlexItem11, null, FixedInputBlock("Product info", subscriptionData.product))));
+  return /* @__PURE__ */ jsx47(EuiFlexGrid, { direction: "row", children: /* @__PURE__ */ jsxs33(Fragment12, { children: [
+    /* @__PURE__ */ jsx47(EuiFlexItem11, { children: SubscriptionBlock(
+      "Subscription details",
+      subscriptionData
+    ) }),
+    /* @__PURE__ */ jsx47(EuiFlexItem11, { children: FixedInputBlock(
+      "Fixed inputs",
+      subscriptionData.fixedInputs
+    ) }),
+    /* @__PURE__ */ jsx47(EuiFlexItem11, { children: FixedInputBlock("Product info", subscriptionData.product) })
+  ] }) });
 };
 
 // src/components/SubscriptionsTabs/SubscriptionsTabs.tsx
 import { EuiTab, EuiTabs } from "@elastic/eui";
-import React48 from "react";
+import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
 var SubscriptionsTabType = /* @__PURE__ */ ((SubscriptionsTabType2) => {
   SubscriptionsTabType2["ACTIVE"] = "ACTIVE";
   SubscriptionsTabType2["TERMINATED"] = "TERMINATED";
@@ -2338,15 +2594,15 @@ var SubscriptionsTabs = ({
   tabs,
   selectedSubscriptionsTab,
   onChangeSubscriptionsTab
-}) => /* @__PURE__ */ React48.createElement(EuiTabs, null, tabs.map(({ id, name }) => /* @__PURE__ */ React48.createElement(
+}) => /* @__PURE__ */ jsx48(EuiTabs, { children: tabs.map(({ id, name }) => /* @__PURE__ */ jsx48(
   EuiTab,
   {
-    key: id,
     isSelected: id === selectedSubscriptionsTab,
-    onClick: () => id !== selectedSubscriptionsTab && onChangeSubscriptionsTab(id)
+    onClick: () => id !== selectedSubscriptionsTab && onChangeSubscriptionsTab(id),
+    children: name
   },
-  name
-)));
+  id
+)) });
 
 // src/components/SubscriptionsTabs/getSubscriptionsTabTypeFromString.ts
 var getSubscriptionsTabTypeFromString = (tabId) => {
@@ -2368,7 +2624,6 @@ var getSubscriptionsTabTypeFromString = (tabId) => {
 };
 
 // src/components/Table/DataGridTable/DataGridTable.tsx
-import React49 from "react";
 import {
   EuiDataGrid
 } from "@elastic/eui";
@@ -2422,6 +2677,7 @@ var mapColumnSortToEuiDataGridSorting = (columnSort, updateColumnSort) => {
 };
 
 // src/components/Table/DataGridTable/DataGridTable.tsx
+import { jsx as jsx49 } from "@emotion/react/jsx-runtime";
 var EUI_DATA_GRID_HEIGHT_OFFSET = 103;
 var EUI_DATA_GRID_ROW_HEIGHT = 40;
 var GRID_STYLE = {
@@ -2488,7 +2744,7 @@ var DataGridTable = ({
     mapControlColumnToEuiDataGridControlColumn
   );
   const gridHeightValue = pagination.pageSize * EUI_DATA_GRID_ROW_HEIGHT + EUI_DATA_GRID_HEIGHT_OFFSET;
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ jsx49(
     EuiDataGrid,
     {
       "aria-label": "Data Grid",
@@ -2510,7 +2766,7 @@ var DataGridTable = ({
 };
 
 // src/components/Table/TableSettingsModal/TableSettingsModal.tsx
-import React50, { useState as useState12 } from "react";
+import { useState as useState12 } from "react";
 import {
   EuiForm,
   EuiFormRow as EuiFormRow2,
@@ -2519,6 +2775,7 @@ import {
   EuiSpacer as EuiSpacer15,
   EuiSwitch
 } from "@elastic/eui";
+import { jsx as jsx50, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var TableSettingsModal = ({
   tableConfig,
   pageSizeOptions,
@@ -2543,7 +2800,7 @@ var TableSettingsModal = ({
     );
     setColumns(updatedColumns);
   };
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ jsx50(
     SettingsModal,
     {
       title: "Table settings",
@@ -2552,46 +2809,53 @@ var TableSettingsModal = ({
       onUpdateTableConfig: () => onUpdateTableConfig({
         columns,
         selectedPageSize
-      })
-    },
-    /* @__PURE__ */ React50.createElement(EuiForm, null, columns.map(({ field, name, isVisible }) => /* @__PURE__ */ React50.createElement("div", { key: field.toString() }, /* @__PURE__ */ React50.createElement(
-      EuiFormRow2,
-      {
-        display: "columnCompressedSwitch",
-        label: name,
-        css: {
-          justifyContent: "space-between"
-        }
-      },
-      /* @__PURE__ */ React50.createElement(
-        EuiSwitch,
-        {
-          showLabel: false,
-          label: name,
-          checked: isVisible,
-          onChange: () => {
-            handleUpdateColumnVisibility(field);
-          },
-          compressed: true
-        }
-      )
-    ), /* @__PURE__ */ React50.createElement(EuiHorizontalRule3, { margin: "xs" }))), /* @__PURE__ */ React50.createElement(EuiSpacer15, { size: "xs" }), /* @__PURE__ */ React50.createElement(
-      EuiFormRow2,
-      {
-        hasEmptyLabelSpace: true,
-        label: "Number of Rows",
-        display: "columnCompressed"
-      },
-      /* @__PURE__ */ React50.createElement(
-        EuiSelect,
-        {
-          compressed: true,
-          onChange: (event) => setSelectedPageSize(parseInt(event.target.value)),
-          value: selectedPageSize,
-          options
-        }
-      )
-    ))
+      }),
+      children: /* @__PURE__ */ jsxs34(EuiForm, { children: [
+        columns.map(({ field, name, isVisible }) => /* @__PURE__ */ jsxs34("div", { children: [
+          /* @__PURE__ */ jsx50(
+            EuiFormRow2,
+            {
+              display: "columnCompressedSwitch",
+              label: name,
+              css: {
+                justifyContent: "space-between"
+              },
+              children: /* @__PURE__ */ jsx50(
+                EuiSwitch,
+                {
+                  showLabel: false,
+                  label: name,
+                  checked: isVisible,
+                  onChange: () => {
+                    handleUpdateColumnVisibility(field);
+                  },
+                  compressed: true
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx50(EuiHorizontalRule3, { margin: "xs" })
+        ] }, field.toString())),
+        /* @__PURE__ */ jsx50(EuiSpacer15, { size: "xs" }),
+        /* @__PURE__ */ jsx50(
+          EuiFormRow2,
+          {
+            hasEmptyLabelSpace: true,
+            label: "Number of Rows",
+            display: "columnCompressed",
+            children: /* @__PURE__ */ jsx50(
+              EuiSelect,
+              {
+                compressed: true,
+                onChange: (event) => setSelectedPageSize(parseInt(event.target.value)),
+                value: selectedPageSize,
+                options
+              }
+            )
+          }
+        )
+      ] })
+    }
   );
 };
 
@@ -2673,26 +2937,22 @@ var getEsQueryStringHandler = (setDataDisplayParam) => (esQueryString) => {
 };
 
 // src/components/Table/Table.tsx
-import React53 from "react";
 import { EuiBasicTable } from "@elastic/eui";
 
-// src/components/Table/TableHeaderCell.tsx
-import React52 from "react";
-
 // src/components/Table/SortDirectionIcon.tsx
-import React51 from "react";
+import { jsx as jsx51 } from "@emotion/react/jsx-runtime";
 var SortDirectionIcon = ({
   sortDirection
 }) => {
   const { theme } = useOrchestratorTheme();
-  return sortDirection === "ASC" /* ASC */ ? /* @__PURE__ */ React51.createElement(
+  return sortDirection === "ASC" /* ASC */ ? /* @__PURE__ */ jsx51(
     ArrowNarrowUp,
     {
       color: theme.colors.subduedText,
       height: 24,
       width: 24
     }
-  ) : /* @__PURE__ */ React51.createElement(
+  ) : /* @__PURE__ */ jsx51(
     ArrowNarrowDown,
     {
       color: theme.colors.subduedText,
@@ -2703,11 +2963,12 @@ var SortDirectionIcon = ({
 };
 
 // src/components/Table/TableHeaderCell.tsx
+import { jsx as jsx52, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var TableHeaderCell = ({
   sortDirection,
   children,
   onClick
-}) => /* @__PURE__ */ React52.createElement(
+}) => /* @__PURE__ */ jsxs35(
   "div",
   {
     css: {
@@ -2715,13 +2976,16 @@ var TableHeaderCell = ({
       alignItems: "center",
       cursor: "pointer"
     },
-    onClick
-  },
-  /* @__PURE__ */ React52.createElement("div", null, children),
-  sortDirection ? /* @__PURE__ */ React52.createElement(SortDirectionIcon, { sortDirection }) : null
+    onClick,
+    children: [
+      /* @__PURE__ */ jsx52("div", { children }),
+      sortDirection ? /* @__PURE__ */ jsx52(SortDirectionIcon, { sortDirection }) : null
+    ]
+  }
 );
 
 // src/components/Table/Table.tsx
+import { jsx as jsx53 } from "@emotion/react/jsx-runtime";
 var Table = ({
   data,
   columns,
@@ -2731,7 +2995,7 @@ var Table = ({
   isLoading,
   onCriteriaChange,
   onDataSort
-}) => /* @__PURE__ */ React53.createElement(
+}) => /* @__PURE__ */ jsx53(
   EuiBasicTable,
   {
     items: data,
@@ -2759,13 +3023,13 @@ function mapTableColumnsToEuiColumns(columns, hiddenColumns, dataSorting, onData
     return {
       ...column,
       field: typedColumnKey,
-      name: name && /* @__PURE__ */ React53.createElement(
+      name: name && /* @__PURE__ */ jsx53(
         TableHeaderCell,
         {
           sortDirection,
-          onClick: handleClick
-        },
-        name
+          onClick: handleClick,
+          children: name
+        }
       ),
       truncateText: true,
       textOnly: true
@@ -2775,13 +3039,14 @@ function mapTableColumnsToEuiColumns(columns, hiddenColumns, dataSorting, onData
 }
 
 // src/components/Table/TableWithFilter/TableWithFilter.tsx
-import React54, { useState as useState13 } from "react";
+import { useState as useState13 } from "react";
 import {
   EuiButton as EuiButton8,
   EuiFlexGroup as EuiFlexGroup12,
   EuiFlexItem as EuiFlexItem12,
   EuiSpacer as EuiSpacer16
 } from "@elastic/eui";
+import { Fragment as Fragment13, jsx as jsx54, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var TableWithFilter = ({
   data,
   tableColumns,
@@ -2842,42 +3107,50 @@ var TableWithFilter = ({
       onUpdatePage(criterion.page);
     }
   };
-  return /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(EuiFlexGroup12, null, /* @__PURE__ */ React54.createElement(EuiFlexItem12, null, /* @__PURE__ */ React54.createElement(
-    SearchField,
-    {
-      esQueryString,
-      onUpdateEsQueryString
-    }
-  )), /* @__PURE__ */ React54.createElement(EuiButton8, { onClick: () => setShowSettingsModal(true) }, "Edit columns")), /* @__PURE__ */ React54.createElement(EuiSpacer16, { size: "m" }), /* @__PURE__ */ React54.createElement(
-    Table,
-    {
-      data,
-      columns: tableColumnsWithControlColumns,
-      hiddenColumns,
-      dataSorting,
-      onDataSort: onUpdateDataSort,
-      pagination,
-      isLoading,
-      onCriteriaChange
-    }
-  ), showSettingsModal && /* @__PURE__ */ React54.createElement(
-    TableSettingsModal,
-    {
-      tableConfig: {
-        columns: tableSettingsColumns,
-        selectedPageSize: (tableConfigFromLocalStorage == null ? void 0 : tableConfigFromLocalStorage.selectedPageSize) ?? pagination.pageSize
-      },
-      pageSizeOptions: pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZES,
-      onClose: () => setShowSettingsModal(false),
-      onUpdateTableConfig: handleUpdateTableConfig,
-      onResetToDefaults: handleResetToDefaults
-    }
-  ));
+  return /* @__PURE__ */ jsxs36(Fragment13, { children: [
+    /* @__PURE__ */ jsxs36(EuiFlexGroup12, { children: [
+      /* @__PURE__ */ jsx54(EuiFlexItem12, { children: /* @__PURE__ */ jsx54(
+        SearchField,
+        {
+          esQueryString,
+          onUpdateEsQueryString
+        }
+      ) }),
+      /* @__PURE__ */ jsx54(EuiButton8, { onClick: () => setShowSettingsModal(true), children: "Edit columns" })
+    ] }),
+    /* @__PURE__ */ jsx54(EuiSpacer16, { size: "m" }),
+    /* @__PURE__ */ jsx54(
+      Table,
+      {
+        data,
+        columns: tableColumnsWithControlColumns,
+        hiddenColumns,
+        dataSorting,
+        onDataSort: onUpdateDataSort,
+        pagination,
+        isLoading,
+        onCriteriaChange
+      }
+    ),
+    showSettingsModal && /* @__PURE__ */ jsx54(
+      TableSettingsModal,
+      {
+        tableConfig: {
+          columns: tableSettingsColumns,
+          selectedPageSize: (tableConfigFromLocalStorage == null ? void 0 : tableConfigFromLocalStorage.selectedPageSize) ?? pagination.pageSize
+        },
+        pageSizeOptions: pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZES,
+        onClose: () => setShowSettingsModal(false),
+        onUpdateTableConfig: handleUpdateTableConfig,
+        onResetToDefaults: handleResetToDefaults
+      }
+    )
+  ] });
 };
 
 // src/components/Loading/Loading.tsx
-import React55 from "react";
-var Loading = () => /* @__PURE__ */ React55.createElement("h1", null, "Loading...");
+import { jsx as jsx55 } from "@emotion/react/jsx-runtime";
+var Loading = () => /* @__PURE__ */ jsx55("h1", { children: "Loading..." });
 
 // src/theme/defaultOrchestratorTheme.ts
 var defaultOrchestratorTheme = {