n8n-editor-ui 1.81.3 → 1.82.1

package/dist/assets/{TestDefinitionEditView-BLTcYPQo.js → TestDefinitionEditView-BA1sXEbp.js}

@@ -1,11 +1,11 @@
-import { u as useTestDefinitionForm } from "./useTestDefinitionForm-DgumxLYU.js";
-import { d as defineComponent, U as useWorkflowsStore, bo as useNodeTypesStore, W as useRoute, b as useRouter, r as ref, q as computed, o as onMounted, l as unref, c as openBlock, h as createElementBlock, i as createVNode, w as withCtx, k as createTextVNode, t as toDisplayString, n as normalizeClass, e as createBlock, f as createCommentVNode, aP as N8nTooltip, g as useI18n, D as createEventBus, ab as useCssModule, m as resolveComponent, ak as useTelemetry, _ as _export_sfc, j as createBaseVNode, v as renderSlot, ax as withDirectives, ay as vShow, fY as ElCollapseTransition, z as nextTick, cQ as useTemplateRef, F as Fragment, B as renderList, fZ as N8nInput, a2 as useProjectsStore, cP as N8nButton, aO as N8nLink, V as VIEWS, f_ as __unplugin_components_0$2, f$ as SAMPLE_EVALUATION_WORKFLOW, fj as mergeModels, fk as useModel, g0 as NODE_PINNING_MODAL_KEY, C as normalizeStyle, g1 as __unplugin_components_1, al as useMessage, dJ as dateFormat, bn as watchEffect, fV as N8nIcon, fU as N8nText, g2 as TestTableBase, K as useDebounce, a as useToast, bW as useTestDefinitionStore, fD as useAnnotationTagsStore, L as useUIStore, Z as useDocumentVisibility, I as watch, aQ as _sfc_main$a, g3 as InlineNameEdit } from "./index-DSYFXmvJ.js";
-import { u as useVueFlow, a as useCanvasMapping, _ as __unplugin_components_0$1 } from "./useCanvasMapping-CM-3KDoy.js";
-import { a as useCanvasOperations } from "./useCanvasOperations-C8HcBhlE.js";
-import { L as Line } from "./index-CkwX7P7C.js";
-import "./usePinnedData-CX8CCdD1.js";
-import "./useRunWorkflow-BsB1hrcR.js";
-import "./pushConnection.store-BZc1Uu8B.js";
+import { u as useTestDefinitionForm } from "./useTestDefinitionForm-wWVotwCR.js";
+import { d as defineComponent, U as useWorkflowsStore, bp as useNodeTypesStore, W as useRoute, b as useRouter, r as ref, q as computed, o as onMounted, l as unref, c as openBlock, h as createElementBlock, i as createVNode, w as withCtx, k as createTextVNode, t as toDisplayString, n as normalizeClass, e as createBlock, f as createCommentVNode, aQ as N8nTooltip, g as useI18n, D as createEventBus, ab as useCssModule, m as resolveComponent, ak as useTelemetry, _ as _export_sfc, j as createBaseVNode, fY as N8nText, v as renderSlot, F as Fragment, c$ as InfoTip, g0 as ne, cS as useTemplateRef, B as renderList, cR as N8nButton, z as nextTick, g1 as N8nInput, aR as _sfc_main$a, a2 as useProjectsStore, aP as N8nLink, V as VIEWS, g2 as __unplugin_components_0$2, g3 as SAMPLE_EVALUATION_WORKFLOW, fn as mergeModels, fo as useModel, g4 as Tag, g5 as NODE_PINNING_MODAL_KEY, g6 as __unplugin_components_1, al as useMessage, dS as dateFormat, bo as watchEffect, ax as withDirectives, ay as vShow, fZ as N8nIcon, C as normalizeStyle, g7 as TestTableBase, K as useDebounce, a as useToast, bX as useTestDefinitionStore, fH as useAnnotationTagsStore, L as useUIStore, Z as useDocumentVisibility, I as watch, g8 as InlineNameEdit } from "./index-DkwrpQEB.js";
+import { u as useVueFlow, a as useCanvasMapping, _ as __unplugin_components_0$1 } from "./useCanvasMapping-BE9PMjep.js";
+import { a as useCanvasOperations } from "./useCanvasOperations-BYt9MoCZ.js";
+import { L as Line } from "./index-CnJ6KvXD.js";
+import "./usePinnedData-cAEPUGIg.js";
+import "./useRunWorkflow-Cr62-QBr.js";
+import "./pushConnection.store-DAf-xv0B.js";
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "NodesPinning",
   props: {
@@ -201,14 +201,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$2 = "_container_z719h_123";
+const container$1 = "_container_z719h_123";
 const pinButtonContainer = "_pinButtonContainer_z719h_128";
 const pinButtonContainerPinned = "_pinButtonContainerPinned_z719h_139";
 const customSecondary = "_customSecondary_z719h_143";
 const spinner = "_spinner_z719h_152";
 const noNodes = "_noNodes_z719h_159";
 const style0$8 = {
-  container: container$2,
+  container: container$1,
   pinButtonContainer,
   pinButtonContainerPinned,
   customSecondary,
@@ -219,239 +219,211 @@ const cssModules$8 = {
   "$style": style0$8
 };
 const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$8]]);
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "BlockArrow",
-  props: {
-    state: {},
-    hoverable: { type: Boolean }
-  },
-  setup(__props) {
-    const props = __props;
-    const css = useCssModule();
-    const classes = computed(() => ({
-      [css.arrowConnector]: true,
-      [css.hoverable]: props.hoverable,
-      [css.error]: props.state === "error",
-      [css.success]: props.state === "success"
-    }));
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(classes.value)
-      }, [
-        createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.stalk)
-        }, null, 2),
-        createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.arrowHead)
-        }, null, 2)
-      ], 2);
-    };
-  }
-});
-const arrowConnector = "_arrowConnector_12dj0_124";
-const stalk = "_stalk_12dj0_133";
-const arrowHead = "_arrowHead_12dj0_151";
-const hoverable = "_hoverable_12dj0_174";
-const error = "_error_12dj0_189";
-const success = "_success_12dj0_196";
+const blockArrow = "_blockArrow_hbkir_123";
+const stalk = "_stalk_hbkir_129";
+const arrowHead = "_arrowHead_hbkir_136";
 const style0$7 = {
-  arrowConnector,
+  blockArrow,
   stalk,
-  arrowHead,
-  hoverable,
-  error,
-  success
+  arrowHead
 };
+const _sfc_main$8 = {};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.$style.blockArrow)
+  }, [
+    createBaseVNode("div", {
+      class: normalizeClass(_ctx.$style.stalk)
+    }, null, 2),
+    createBaseVNode("div", {
+      class: normalizeClass(_ctx.$style.arrowHead)
+    }, null, 2)
+  ], 2);
+}
 const cssModules$7 = {
   "$style": style0$7
 };
-const BlockArrow = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
-const _hoisted_1$3 = { key: 1 };
-const _hoisted_2$1 = ["aria-expanded"];
+const BlockArrow = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render], ["__cssModules", cssModules$7]]);
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "EvaluationStep",
   props: {
     title: { default: "" },
     warning: { type: Boolean, default: false },
-    small: { type: Boolean, default: false },
     expanded: { type: Boolean, default: false },
     description: { default: "" },
     issues: { default: () => [] },
     showIssues: { type: Boolean, default: true },
-    tooltip: {}
+    tooltip: {},
+    externalTooltip: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
     const locale = useI18n();
     const isExpanded = ref(props.expanded);
-    const contentRef = ref(null);
-    const containerRef = ref(null);
-    const showTooltip = ref(false);
     const $style = useCssModule();
+    const hasIssues = computed(() => props.issues.length > 0);
     const containerClass = computed(() => {
       return {
-        [$style.wrap]: true,
-        [$style.expanded]: isExpanded.value,
-        [$style.hasIssues]: props.issues.length > 0
+        [$style.evaluationStep]: true,
+        [$style["has-issues"]]: true
       };
     });
-    const toggleExpand = async () => {
-      isExpanded.value = !isExpanded.value;
-      if (isExpanded.value) {
-        await nextTick();
-        if (containerRef.value) {
-          containerRef.value.style.height = "auto";
-        }
-      }
-    };
-    const handleMouseEnter = () => {
-      if (!props.tooltip) return;
-      showTooltip.value = true;
-    };
-    const handleMouseLeave = () => {
-      showTooltip.value = false;
-    };
+    const toggleExpand = () => isExpanded.value = !isExpanded.value;
     const renderIssues = computed(() => props.showIssues && props.issues.length);
     const issuesList = computed(() => props.issues.map((issue) => issue.message).join(", "));
+    const resizeModifier = {
+      name: "resize",
+      enabled: true,
+      phase: "beforeWrite",
+      requires: ["preventOverflow"],
+      fn({ state }) {
+        const overflow = ne(state);
+        const MARGIN_RIGHT = 15;
+        const maxWidth = state.rects.popper.width - overflow.right - MARGIN_RIGHT;
+        state.styles.popper.width = `${maxWidth}px`;
+      }
+    };
+    const popperModifiers = [
+      resizeModifier,
+      { name: "preventOverflow", options: { boundary: "document" } },
+      { name: "flip", enabled: false }
+      // prevent the tooltip from flipping
+    ];
     return (_ctx, _cache) => {
-      const _component_N8nInfoTip = resolveComponent("N8nInfoTip");
       const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(containerClass.value)
+        class: normalizeClass(containerClass.value),
+        "data-test-id": "evaluation-step"
       }, [
-        renderSlot(_ctx.$slots, "containerPrefix"),
         createBaseVNode("div", {
-          ref_key: "containerRef",
-          ref: containerRef,
-          class: normalizeClass([unref($style).evaluationStep, _ctx.small && unref($style).small]),
-          "data-test-id": "evaluation-step",
-          onMouseenter: handleMouseEnter,
-          onMouseleave: handleMouseLeave
+          class: normalizeClass(unref($style).content)
         }, [
-          createBaseVNode("div", {
-            class: normalizeClass(unref($style).content)
-          }, [
-            createBaseVNode("div", {
-              class: normalizeClass(unref($style).header),
-              onClick: toggleExpand
-            }, [
-              createBaseVNode("h3", {
-                class: normalizeClass(unref($style).title)
+          createVNode(unref(N8nTooltip), {
+            placement: "right",
+            disabled: !_ctx.externalTooltip,
+            "show-arrow": false,
+            "popper-class": unref($style).evaluationTooltip,
+            "popper-options": { modifiers: popperModifiers },
+            content: _ctx.tooltip
+          }, {
+            default: withCtx(() => [
+              createBaseVNode("div", {
+                class: normalizeClass(unref($style).header),
+                onClick: toggleExpand
               }, [
-                createBaseVNode("span", {
+                createBaseVNode("div", {
                   class: normalizeClass(unref($style).label)
                 }, [
-                  _ctx.$slots.title ? renderSlot(_ctx.$slots, "title", { key: 0 }) : (openBlock(), createElementBlock("span", _hoisted_1$3, toDisplayString(_ctx.title), 1)),
-                  _ctx.tooltip ? (openBlock(), createBlock(_component_N8nInfoTip, {
-                    key: 2,
+                  createVNode(unref(N8nText), { bold: "" }, {
+                    default: withCtx(() => [
+                      _ctx.$slots.title ? renderSlot(_ctx.$slots, "title", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        createTextVNode(toDisplayString(_ctx.title), 1)
+                      ], 64))
+                    ]),
+                    _: 3
+                  }),
+                  !_ctx.externalTooltip ? (openBlock(), createBlock(unref(InfoTip), {
+                    key: 0,
                     class: normalizeClass(unref($style).infoTip),
                     bold: true,
                     type: "tooltip",
                     theme: "info",
-                    "tooltip-placement": "top"
+                    "tooltip-placement": "top",
+                    enterable: false
                   }, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(_ctx.tooltip), 1)
                     ]),
                     _: 1
                   }, 8, ["class"])) : createCommentVNode("", true)
+                ], 2),
+                createBaseVNode("div", {
+                  class: normalizeClass(unref($style).actions)
+                }, [
+                  renderIssues.value ? (openBlock(), createBlock(unref(InfoTip), {
+                    key: 0,
+                    bold: true,
+                    type: "tooltip",
+                    theme: "warning",
+                    "tooltip-placement": "top",
+                    enterable: false
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(issuesList.value), 1)
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true),
+                  _ctx.$slots.cardContent ? (openBlock(), createBlock(unref(N8nText), {
+                    key: 1,
+                    "data-test-id": "evaluation-step-collapse-button",
+                    size: "xsmall",
+                    color: hasIssues.value ? "primary" : "text-base",
+                    bold: ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(isExpanded.value ? unref(locale).baseText("testDefinition.edit.step.collapse") : unref(locale).baseText("testDefinition.edit.step.configure")) + " ", 1),
+                      createVNode(_component_font_awesome_icon, {
+                        icon: isExpanded.value ? "angle-up" : "angle-down",
+                        size: "lg"
+                      }, null, 8, ["icon"])
+                    ]),
+                    _: 1
+                  }, 8, ["color"])) : createCommentVNode("", true)
                 ], 2)
-              ], 2),
-              renderIssues.value ? (openBlock(), createElementBlock("span", {
+              ], 2)
+            ]),
+            _: 3
+          }, 8, ["disabled", "popper-class", "popper-options", "content"]),
+          _ctx.$slots.cardContent && isExpanded.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(unref($style).cardContentWrapper)
+          }, [
+            createBaseVNode("div", {
+              class: normalizeClass(unref($style).cardContent),
+              "data-test-id": "evaluation-step-content"
+            }, [
+              _ctx.description ? (openBlock(), createBlock(unref(N8nText), {
                 key: 0,
-                class: normalizeClass(unref($style).warningIcon)
-              }, [
-                createVNode(_component_N8nInfoTip, {
-                  bold: true,
-                  type: "tooltip",
-                  theme: "warning",
-                  "tooltip-placement": "right"
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(issuesList.value), 1)
-                  ]),
-                  _: 1
-                })
-              ], 2)) : createCommentVNode("", true),
-              _ctx.$slots.cardContent ? (openBlock(), createElementBlock("button", {
-                key: 1,
-                class: normalizeClass(unref($style).collapseButton),
-                "aria-expanded": isExpanded.value,
-                "data-test-id": "evaluation-step-collapse-button"
-              }, [
-                createTextVNode(toDisplayString(isExpanded.value ? unref(locale).baseText("testDefinition.edit.step.collapse") : unref(locale).baseText("testDefinition.edit.step.configure")) + " ", 1),
-                createVNode(_component_font_awesome_icon, {
-                  icon: isExpanded.value ? "angle-down" : "angle-right",
-                  size: "lg"
-                }, null, 8, ["icon"])
-              ], 10, _hoisted_2$1)) : createCommentVNode("", true)
-            ], 2),
-            _ctx.$slots.cardContent ? (openBlock(), createBlock(unref(ElCollapseTransition), { key: 0 }, {
-              default: withCtx(() => [
-                withDirectives(createBaseVNode("div", {
-                  class: normalizeClass(unref($style).cardContentWrapper)
-                }, [
-                  createBaseVNode("div", {
-                    ref_key: "contentRef",
-                    ref: contentRef,
-                    class: normalizeClass(unref($style).cardContent),
-                    "data-test-id": "evaluation-step-content"
-                  }, [
-                    _ctx.description ? (openBlock(), createElementBlock("div", {
-                      key: 0,
-                      class: normalizeClass(unref($style).description)
-                    }, toDisplayString(_ctx.description), 3)) : createCommentVNode("", true),
-                    renderSlot(_ctx.$slots, "cardContent")
-                  ], 2)
-                ], 2), [
-                  [vShow, isExpanded.value]
-                ])
-              ]),
-              _: 3
-            })) : createCommentVNode("", true)
-          ], 2)
-        ], 34)
+                size: "small",
+                color: "text-light"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(_ctx.description), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "cardContent")
+            ], 2)
+          ], 2)) : createCommentVNode("", true)
+        ], 2)
       ], 2);
     };
   }
 });
-const wrap = "_wrap_39j7h_123";
-const evaluationStep = "_evaluationStep_39j7h_127";
-const small = "_small_39j7h_138";
-const icon = "_icon_39j7h_143";
-const warning = "_warning_39j7h_152";
-const content$1 = "_content_39j7h_156";
-const header$1 = "_header_39j7h_160";
-const title = "_title_39j7h_168";
-const label = "_label_39j7h_174";
-const infoTip = "_infoTip_39j7h_180";
-const warningIcon = "_warningIcon_39j7h_188";
-const cardContent = "_cardContent_39j7h_192";
-const collapseButton = "_collapseButton_39j7h_198";
-const hasIssues = "_hasIssues_39j7h_210";
-const cardContentWrapper = "_cardContentWrapper_39j7h_214";
-const expanded = "_expanded_39j7h_217";
-const description$1 = "_description_39j7h_221";
-const customTooltip$1 = "_customTooltip_39j7h_227";
+const evaluationStep = "_evaluationStep_1h8fm_123";
+const evaluationTooltip = "_evaluationTooltip_1h8fm_133";
+const icon = "_icon_1h8fm_141";
+const warning = "_warning_1h8fm_150";
+const content$1 = "_content_1h8fm_154";
+const header$1 = "_header_1h8fm_158";
+const label = "_label_1h8fm_166";
+const infoTip = "_infoTip_1h8fm_172";
+const actions = "_actions_1h8fm_180";
+const cardContent = "_cardContent_1h8fm_186";
+const cardContentWrapper = "_cardContentWrapper_1h8fm_192";
 const style0$6 = {
-  wrap,
   evaluationStep,
-  small,
+  evaluationTooltip,
   icon,
   warning,
   content: content$1,
   header: header$1,
-  title,
   label,
   infoTip,
-  warningIcon,
+  actions,
   cardContent,
-  collapseButton,
-  hasIssues,
   cardContentWrapper,
-  expanded,
-  description: description$1,
-  customTooltip: customTooltip$1
+  "has-issues": "_has-issues_1h8fm_196"
 };
 const cssModules$6 = {
   "$style": style0$6
@@ -487,72 +459,46 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
-      const _component_n8n_button = resolveComponent("n8n-button");
-      const _component_n8n_input_label = resolveComponent("n8n-input-label");
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([_ctx.$style.metrics])
-      }, [
-        createVNode(_component_n8n_input_label, {
-          label: unref(locale).baseText("testDefinition.edit.metricsFields"),
-          bold: false,
-          class: normalizeClass(_ctx.$style.metricField)
-        }, {
-          default: withCtx(() => [
-            createBaseVNode("div", {
-              class: normalizeClass(_ctx.$style.metricsContainer)
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, (metric, index) => {
-                return openBlock(), createElementBlock("div", {
-                  key: index,
-                  class: normalizeClass(_ctx.$style.metricItem)
-                }, [
-                  createVNode(unref(N8nInput), {
-                    ref_for: true,
-                    ref: "metric",
-                    "data-test-id": "evaluation-metric-item",
-                    "model-value": metric.name,
-                    placeholder: unref(locale).baseText("testDefinition.edit.metricsPlaceholder"),
-                    "onUpdate:modelValue": (value) => updateMetric(index, value)
-                  }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"]),
-                  createVNode(_component_n8n_icon_button, {
-                    icon: "trash",
-                    type: "text",
-                    onClick: ($event) => onDeleteMetric(metric, index)
-                  }, null, 8, ["onClick"])
-                ], 2);
-              }), 128)),
-              createVNode(_component_n8n_button, {
-                type: "tertiary",
-                label: unref(locale).baseText("testDefinition.edit.metricsNew"),
-                class: normalizeClass(_ctx.$style.newMetricButton),
-                onClick: addNewMetric
-              }, null, 8, ["label", "class"])
-            ], 2)
-          ]),
-          _: 1
-        }, 8, ["label", "class"])
-      ], 2);
+      return openBlock(), createElementBlock("div", null, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, (metric, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: index,
+            class: normalizeClass([_ctx.$style.metricItem, "mb-xs"])
+          }, [
+            createVNode(unref(N8nInput), {
+              ref_for: true,
+              ref: "metric",
+              "data-test-id": "evaluation-metric-item",
+              "model-value": metric.name,
+              placeholder: unref(locale).baseText("testDefinition.edit.metricsPlaceholder"),
+              "onUpdate:modelValue": (value) => updateMetric(index, value)
+            }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"]),
+            createVNode(unref(_sfc_main$a), {
+              icon: "trash",
+              type: "secondary",
+              text: "",
+              onClick: ($event) => onDeleteMetric(metric, index)
+            }, null, 8, ["onClick"])
+          ], 2);
+        }), 128)),
+        createVNode(unref(N8nButton), {
+          type: "secondary",
+          label: unref(locale).baseText("testDefinition.edit.metricsNew"),
+          onClick: addNewMetric
+        }, null, 8, ["label"])
+      ]);
     };
   }
 });
-const metricsContainer = "_metricsContainer_1eaf8_123";
-const metricItem = "_metricItem_1eaf8_129";
-const metricField = "_metricField_1eaf8_134";
-const metricsDivider = "_metricsDivider_1eaf8_139";
-const newMetricButton = "_newMetricButton_1eaf8_144";
+const metricItem = "_metricItem_1hbcq_123";
 const style0$5 = {
-  metricsContainer,
-  metricItem,
-  metricField,
-  metricsDivider,
-  newMetricButton
+  metricItem
 };
 const cssModules$5 = {
   "$style": style0$5
 };
 const MetricsInput = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$5]]);
-const _hoisted_1$2 = { class: "mt-xs" };
+const _hoisted_1$3 = { class: "mt-xs" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "WorkflowSelector",
   props: {
@@ -613,7 +559,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_WorkflowSelectorParameterInput = __unplugin_components_0$2;
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
         !_ctx.modelValue.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(N8nButton), {
             type: "secondary",
@@ -659,10 +605,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$2 = { style: { "display": "flex", "flex-direction": "column" } };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "ConfigSection",
   props: /* @__PURE__ */ mergeModels({
-    showConfig: { type: Boolean },
     tagsById: {},
     isLoading: { type: Boolean },
     examplePinnedData: {},
@@ -689,8 +635,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const locale = useI18n();
-    const activeTooltip = ref(null);
-    const tooltipPosition = ref(null);
     const tags = useModel(__props, "tags");
     const renameTag = async () => {
       const { prompt } = useMessage();
@@ -718,58 +662,39 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const metrics = useModel(__props, "metrics");
     const mockedNodes = useModel(__props, "mockedNodes");
     const nodePinningModal = ref(null);
-    const selectedTag = computed(() => {
-      return props.tagsById[tags.value.value[0]] ?? {};
-    });
+    const selectedTag = computed(() => props.tagsById[tags.value.value[0]] ?? {});
     function openExecutionsView() {
       emit("openExecutionsViewForTag");
     }
-    function showTooltip(event, tooltip) {
-      const container2 = event.target;
-      const containerRect = container2.getBoundingClientRect();
-      activeTooltip.value = tooltip;
-      tooltipPosition.value = {
-        x: containerRect.right,
-        y: containerRect.top,
-        width: containerRect.width,
-        height: containerRect.height,
-        right: window.innerWidth
-      };
-    }
-    function hideTooltip() {
-      activeTooltip.value = null;
-      tooltipPosition.value = null;
-    }
     return (_ctx, _cache) => {
       const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
-      const _component_N8nTag = resolveComponent("N8nTag");
       const _component_i18n_t = resolveComponent("i18n-t");
-      const _component_n8n_button = resolveComponent("n8n-button");
       const _component_N8nHeading = resolveComponent("N8nHeading");
-      const _component_N8nText = resolveComponent("N8nText");
       const _component_NodesPinning = __unplugin_components_0;
       const _component_Modal = __unplugin_components_1;
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([_ctx.$style.container, { [_ctx.$style.hidden]: !_ctx.showConfig }])
-      }, [
+      return openBlock(), createElementBlock("div", null, [
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.editForm)
         }, [
-          createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.panelIntro)
-          }, toDisplayString(unref(locale).baseText("testDefinition.edit.step.intro")), 3),
+          !_ctx.hasRuns ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createVNode(unref(N8nText), {
+              tag: "div",
+              color: "text-dark",
+              size: "large",
+              class: "text-center"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.step.intro")), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(BlockArrow, { class: "mt-5xs mb-5xs" })
+          ], 64)) : createCommentVNode("", true),
           createVNode(EvaluationStep, {
-            class: normalizeClass([_ctx.$style.step, _ctx.$style.reducedSpacing]),
             issues: _ctx.getFieldIssues("tags"),
-            tooltip: _ctx.hasRuns ? unref(locale).baseText("testDefinition.edit.step.executions.tooltip") : void 0,
-            onMouseenter: _cache[0] || (_cache[0] = ($event) => showTooltip($event, unref(locale).baseText("testDefinition.edit.step.executions.tooltip"))),
-            onMouseleave: hideTooltip
+            tooltip: unref(locale).baseText("testDefinition.edit.step.executions.tooltip"),
+            "external-tooltip": !_ctx.hasRuns
           }, {
-            containerPrefix: withCtx(() => [
-              createVNode(BlockArrow, {
-                class: normalizeClass([_ctx.$style.middle, _ctx.$style.diagramArrow, _ctx.$style.sm])
-              }, null, 8, ["class"])
-            ]),
             title: withCtx(() => [
               createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.step.executions", {
                 adjustToNumber: selectedTag.value?.usageCount ?? 0
@@ -777,140 +702,116 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             ]),
             cardContent: withCtx(() => [
               createBaseVNode("div", {
-                class: normalizeClass(_ctx.$style.tagInputContainer)
+                class: normalizeClass(_ctx.$style.tagInputTag)
               }, [
-                createBaseVNode("div", {
-                  class: normalizeClass(_ctx.$style.tagInputTag)
-                }, [
-                  createVNode(_component_i18n_t, { keypath: "testDefinition.edit.step.tag" }, {
-                    tag: withCtx(() => [
-                      createVNode(_component_N8nTag, {
-                        text: selectedTag.value.name,
-                        clickable: true,
-                        onClick: renameTag
-                      }, {
-                        tag: withCtx(() => [
-                          createTextVNode(toDisplayString(selectedTag.value.name) + " ", 1),
-                          createVNode(_component_font_awesome_icon, {
-                            icon: "pen",
-                            size: "sm"
-                          })
-                        ]),
-                        _: 1
-                      }, 8, ["text"])
+                createVNode(_component_i18n_t, { keypath: "testDefinition.edit.step.tag" }, {
+                  tag: withCtx(() => [
+                    createVNode(unref(Tag), {
+                      text: selectedTag.value.name,
+                      clickable: true,
+                      onClick: renameTag
+                    }, {
+                      tag: withCtx(() => [
+                        createTextVNode(toDisplayString(selectedTag.value.name) + " ", 1),
+                        createVNode(_component_font_awesome_icon, {
+                          icon: "pen",
+                          size: "sm"
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["text"])
+                  ]),
+                  _: 1
+                })
+              ], 2),
+              createVNode(unref(N8nButton), {
+                label: "Select executions",
+                type: "tertiary",
+                size: "small",
+                onClick: openExecutionsView
+              })
+            ]),
+            _: 1
+          }, 8, ["issues", "tooltip", "external-tooltip"]),
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.nestedSteps)
+          }, [
+            createVNode(BlockArrow, { class: "mt-5xs mb-5xs" }),
+            createBaseVNode("div", _hoisted_1$2, [
+              createVNode(BlockArrow, { class: "mt-5xs mb-5xs ml-auto mr-2xl" }),
+              createVNode(EvaluationStep, {
+                issues: _ctx.getFieldIssues("mockedNodes"),
+                tooltip: unref(locale).baseText("testDefinition.edit.step.nodes.tooltip"),
+                "external-tooltip": !_ctx.hasRuns
+              }, {
+                title: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.step.mockedNodes", {
+                    adjustToNumber: mockedNodes.value?.length ?? 0
+                  })) + " ", 1),
+                  createVNode(unref(N8nText), null, {
+                    default: withCtx(() => [
+                      createTextVNode("(" + toDisplayString(unref(locale).baseText("generic.optional")) + ")", 1)
                     ]),
                     _: 1
                   })
-                ], 2),
-                createBaseVNode("div", {
-                  class: normalizeClass(_ctx.$style.tagInputControls)
-                }, [
-                  createVNode(_component_n8n_button, {
-                    label: "Select executions",
-                    type: "tertiary",
+                ]),
+                cardContent: withCtx(() => [
+                  createVNode(unref(N8nButton), {
                     size: "small",
-                    onClick: openExecutionsView
-                  })
-                ], 2)
-              ], 2)
-            ]),
-            _: 1
-          }, 8, ["class", "issues", "tooltip"]),
-          createVNode(EvaluationStep, {
-            class: normalizeClass(_ctx.$style.step),
-            title: unref(locale).baseText("testDefinition.edit.step.mockedNodes", {
-              adjustToNumber: mockedNodes.value?.length ?? 0
-            }),
-            small: true,
-            issues: _ctx.getFieldIssues("mockedNodes"),
-            tooltip: _ctx.hasRuns ? unref(locale).baseText("testDefinition.edit.step.nodes.tooltip") : void 0,
-            onMouseenter: _cache[2] || (_cache[2] = ($event) => showTooltip($event, unref(locale).baseText("testDefinition.edit.step.nodes.tooltip"))),
-            onMouseleave: hideTooltip
-          }, {
-            containerPrefix: withCtx(() => [
-              createVNode(BlockArrow, {
-                class: normalizeClass([_ctx.$style.diagramArrow, _ctx.$style.right])
-              }, null, 8, ["class"])
-            ]),
-            cardContent: withCtx(() => [
-              createVNode(_component_n8n_button, {
-                size: "small",
-                "data-test-id": "select-nodes-button",
-                label: unref(locale).baseText("testDefinition.edit.selectNodes"),
-                type: "tertiary",
-                onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("openPinningModal"))
-              }, null, 8, ["label"])
-            ]),
-            _: 1
-          }, 8, ["class", "title", "issues", "tooltip"]),
-          createVNode(EvaluationStep, {
-            class: normalizeClass(_ctx.$style.step),
-            title: unref(locale).baseText("testDefinition.edit.step.reRunExecutions"),
-            small: true,
-            tooltip: _ctx.hasRuns ? unref(locale).baseText("testDefinition.edit.step.reRunExecutions.tooltip") : void 0,
-            onMouseenter: _cache[3] || (_cache[3] = ($event) => showTooltip($event, unref(locale).baseText("testDefinition.edit.step.reRunExecutions.tooltip"))),
-            onMouseleave: hideTooltip
-          }, {
-            containerPrefix: withCtx(() => [
-              createVNode(BlockArrow, {
-                class: normalizeClass([_ctx.$style.right, _ctx.$style.diagramArrow])
-              }, null, 8, ["class"])
-            ]),
-            _: 1
-          }, 8, ["class", "title", "tooltip"]),
+                    "data-test-id": "select-nodes-button",
+                    label: unref(locale).baseText("testDefinition.edit.selectNodes"),
+                    type: "tertiary",
+                    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("openPinningModal"))
+                  }, null, 8, ["label"])
+                ]),
+                _: 1
+              }, 8, ["issues", "tooltip", "external-tooltip"]),
+              createVNode(BlockArrow, { class: "mt-5xs mb-5xs ml-auto mr-2xl" }),
+              createVNode(EvaluationStep, {
+                title: unref(locale).baseText("testDefinition.edit.step.reRunExecutions"),
+                tooltip: unref(locale).baseText("testDefinition.edit.step.reRunExecutions.tooltip"),
+                "external-tooltip": !_ctx.hasRuns
+              }, null, 8, ["title", "tooltip", "external-tooltip"]),
+              createVNode(BlockArrow, { class: "mt-5xs mb-5xs ml-auto mr-2xl" })
+            ])
+          ], 2),
           createVNode(EvaluationStep, {
-            class: normalizeClass(_ctx.$style.step),
             title: unref(locale).baseText("testDefinition.edit.step.compareExecutions"),
             description: unref(locale).baseText("testDefinition.edit.workflowSelectorLabel"),
             issues: _ctx.getFieldIssues("evaluationWorkflow"),
-            tooltip: _ctx.hasRuns ? unref(locale).baseText("testDefinition.edit.step.compareExecutions.tooltip") : void 0,
-            onMouseenter: _cache[6] || (_cache[6] = ($event) => showTooltip($event, unref(locale).baseText("testDefinition.edit.step.compareExecutions.tooltip"))),
-            onMouseleave: hideTooltip
+            tooltip: unref(locale).baseText("testDefinition.edit.step.compareExecutions.tooltip"),
+            "external-tooltip": !_ctx.hasRuns
           }, {
-            containerPrefix: withCtx(() => [
-              createVNode(BlockArrow, {
-                class: normalizeClass([_ctx.$style.right, _ctx.$style.diagramArrow])
-              }, null, 8, ["class"]),
-              createVNode(BlockArrow, {
-                class: normalizeClass([_ctx.$style.left, _ctx.$style.diagramArrow, _ctx.$style.lg])
-              }, null, 8, ["class"])
-            ]),
             cardContent: withCtx(() => [
               createVNode(_sfc_main$5, {
                 modelValue: evaluationWorkflow.value,
-                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => evaluationWorkflow.value = $event),
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => evaluationWorkflow.value = $event),
                 "example-pinned-data": _ctx.examplePinnedData,
                 class: normalizeClass({ "has-issues": _ctx.getFieldIssues("evaluationWorkflow").length > 0 }),
                 "sample-workflow-name": _ctx.sampleWorkflowName,
-                onWorkflowCreated: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("evaluationWorkflowCreated", $event))
+                onWorkflowCreated: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("evaluationWorkflowCreated", $event))
               }, null, 8, ["modelValue", "example-pinned-data", "class", "sample-workflow-name"])
             ]),
             _: 1
-          }, 8, ["class", "title", "description", "issues", "tooltip"]),
+          }, 8, ["title", "description", "issues", "tooltip", "external-tooltip"]),
+          createVNode(BlockArrow, { class: "mt-5xs mb-5xs" }),
           createVNode(EvaluationStep, {
-            class: normalizeClass(_ctx.$style.step),
             title: unref(locale).baseText("testDefinition.edit.step.metrics"),
             issues: _ctx.getFieldIssues("metrics"),
             description: unref(locale).baseText("testDefinition.edit.step.metrics.description"),
-            tooltip: _ctx.hasRuns ? unref(locale).baseText("testDefinition.edit.step.metrics.tooltip") : void 0,
-            onMouseenter: _cache[9] || (_cache[9] = ($event) => showTooltip($event, unref(locale).baseText("testDefinition.edit.step.metrics.tooltip"))),
-            onMouseleave: hideTooltip
+            tooltip: unref(locale).baseText("testDefinition.edit.step.metrics.tooltip"),
+            "external-tooltip": !_ctx.hasRuns
           }, {
-            containerPrefix: withCtx(() => [
-              createVNode(BlockArrow, {
-                class: normalizeClass([_ctx.$style.middle, _ctx.$style.diagramArrow])
-              }, null, 8, ["class"])
-            ]),
             cardContent: withCtx(() => [
               createVNode(MetricsInput, {
                 modelValue: metrics.value,
-                "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => metrics.value = $event),
-                class: normalizeClass({ "has-issues": _ctx.getFieldIssues("metrics").length > 0 }),
-                onDeleteMetric: _cache[8] || (_cache[8] = (metric) => emit("deleteMetric", metric))
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => metrics.value = $event),
+                class: normalizeClass([{ "has-issues": _ctx.getFieldIssues("metrics").length > 0 }, "mt-xs"]),
+                onDeleteMetric: _cache[4] || (_cache[4] = (metric) => emit("deleteMetric", metric))
               }, null, 8, ["modelValue", "class"])
             ]),
             _: 1
-          }, 8, ["class", "title", "issues", "description", "tooltip"])
+          }, 8, ["title", "issues", "description", "tooltip", "external-tooltip"])
         ], 2),
         createVNode(_component_Modal, {
           ref_key: "nodePinningModal",
@@ -929,68 +830,32 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            _cache[11] || (_cache[11] = createBaseVNode("br", null, null, -1)),
-            createVNode(_component_N8nText, {
-              class: normalizeClass(_ctx.$style.modalDescription)
-            }, {
+            _cache[6] || (_cache[6] = createBaseVNode("br", null, null, -1)),
+            createVNode(unref(N8nText), null, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.modal.description")), 1)
               ]),
               _: 1
-            }, 8, ["class"])
+            })
           ]),
           content: withCtx(() => [
             createVNode(_component_NodesPinning, {
               modelValue: mockedNodes.value,
-              "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => mockedNodes.value = $event),
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => mockedNodes.value = $event),
               "data-test-id": "nodes-pinning-modal"
             }, null, 8, ["modelValue"])
           ]),
           _: 1
-        }, 8, ["name"]),
-        tooltipPosition.value && !_ctx.hasRuns ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(_ctx.$style.customTooltip),
-          style: normalizeStyle({
-            left: `${tooltipPosition.value.x}px`,
-            top: `${tooltipPosition.value.y}px`,
-            width: `${tooltipPosition.value.right - tooltipPosition.value.x}px`,
-            height: `${tooltipPosition.value.height}px`
-          })
-        }, toDisplayString(activeTooltip.value), 7)) : createCommentVNode("", true)
-      ], 2);
+        }, 8, ["name"])
+      ]);
     };
   }
 });
-const container$1 = "_container_1ca2u_123";
-const editForm = "_editForm_1ca2u_130";
-const hidden = "_hidden_1ca2u_141";
-const noRuns = "_noRuns_1ca2u_147";
-const customTooltip = "_customTooltip_1ca2u_151";
-const panelIntro = "_panelIntro_1ca2u_163";
-const diagramArrow = "_diagramArrow_1ca2u_171";
-const right = "_right_1ca2u_178";
-const middle = "_middle_1ca2u_182";
-const sm = "_sm_1ca2u_186";
-const lg = "_lg_1ca2u_189";
-const tagInputContainer = "_tagInputContainer_1ca2u_193";
-const tagInputTag = "_tagInputTag_1ca2u_199";
-const tagInputControls = "_tagInputControls_1ca2u_206";
+const nestedSteps = "_nestedSteps_1784n_123";
+const tagInputTag = "_tagInputTag_1784n_128";
 const style0$4 = {
-  container: container$1,
-  editForm,
-  hidden,
-  noRuns,
-  customTooltip,
-  panelIntro,
-  diagramArrow,
-  right,
-  middle,
-  sm,
-  lg,
-  tagInputContainer,
-  tagInputTag,
-  tagInputControls
+  nestedSteps,
+  tagInputTag
 };
 const cssModules$4 = {
   "$style": style0$4
@@ -1574,7 +1439,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_N8nTooltip = resolveComponent("N8nTooltip");
       return !isLoading.value ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass([_ctx.$style.container, { [_ctx.$style.noRuns]: !hasRuns.value }])
+        class: normalizeClass([_ctx.$style.container])
       }, [
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.header)
@@ -1583,9 +1448,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(unref(_sfc_main$a), {
               icon: "arrow-left",
               type: "tertiary",
-              class: normalizeClass(_ctx.$style.arrowBack),
+              text: "",
               onClick: _cache[0] || (_cache[0] = ($event) => unref(router).push({ name: unref(VIEWS).TEST_DEFINITION, params: { testId: _ctx.testId } }))
-            }, null, 8, ["class"]),
+            }),
             createVNode(InlineNameEdit, {
               "model-value": unref(state).name.value,
               "max-height": "none",
@@ -1665,12 +1530,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               maxlength: 260,
               "max-height": "none",
               type: "Test description",
-              class: normalizeClass(_ctx.$style.editDescription),
               "onUpdate:modelValue": updateDescription
             }, {
               default: withCtx(() => [
                 createVNode(unref(N8nText), {
-                  size: "small",
+                  size: "medium",
                   color: "text-base"
                 }, {
                   default: withCtx(() => [
@@ -1680,21 +1544,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 })
               ]),
               _: 1
-            }, 8, ["model-value", "class"])
+            }, 8, ["model-value"])
           ], 2),
           createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.content)
+            class: normalizeClass({ [_ctx.$style.content]: true, [_ctx.$style.contentWithRuns]: hasRuns.value })
           }, [
-            runs2.value.length > 0 ? (openBlock(), createBlock(RunsSection, {
+            hasRuns.value ? (openBlock(), createBlock(RunsSection, {
               key: 0,
               selectedMetric: selectedMetric.value,
               "onUpdate:selectedMetric": _cache[1] || (_cache[1] = ($event) => selectedMetric.value = $event),
+              class: normalizeClass(_ctx.$style.runs),
               runs: runs2.value,
               "test-id": _ctx.testId,
               "applied-theme": appliedTheme.value,
               onDeleteRuns
-            }, null, 8, ["selectedMetric", "runs", "test-id", "applied-theme"])) : createCommentVNode("", true),
-            createVNode(ConfigSection, {
+            }, null, 8, ["selectedMetric", "class", "runs", "test-id", "applied-theme"])) : createCommentVNode("", true),
+            showConfig.value ? (openBlock(), createBlock(ConfigSection, {
+              key: 1,
               tags: unref(state).tags,
               "onUpdate:tags": _cache[2] || (_cache[2] = ($event) => unref(state).tags = $event),
               evaluationWorkflow: unref(state).evaluationWorkflow,
@@ -1712,8 +1578,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 _cache[5] || (_cache[5] = ($event) => unref(state).mockedNodes = $event),
                 unref(handleUpdateTestDebounced)
               ],
+              class: normalizeClass(_ctx.$style.config),
               "cancel-editing": unref(cancelEditing),
-              "show-config": showConfig.value,
               "tags-by-id": tagsById.value,
               "is-loading": isLoading.value,
               "get-field-issues": getFieldIssues,
@@ -1727,20 +1593,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onDeleteMetric,
               onOpenExecutionsViewForTag: openExecutionsViewForTag,
               onEvaluationWorkflowCreated: _cache[7] || (_cache[7] = ($event) => onEvaluationWorkflowCreated($event))
-            }, null, 8, ["tags", "evaluationWorkflow", "metrics", "mockedNodes", "cancel-editing", "show-config", "tags-by-id", "is-loading", "start-editing", "save-changes", "has-runs", "example-pinned-data", "sample-workflow-name", "onUpdate:evaluationWorkflow", "onUpdate:mockedNodes"])
+            }, null, 8, ["tags", "evaluationWorkflow", "metrics", "mockedNodes", "class", "cancel-editing", "tags-by-id", "is-loading", "start-editing", "save-changes", "has-runs", "example-pinned-data", "sample-workflow-name", "onUpdate:evaluationWorkflow", "onUpdate:mockedNodes"])) : createCommentVNode("", true)
           ], 2)
         ], 2)
       ], 2)) : createCommentVNode("", true);
     };
   }
 });
-const content = "_content_vcpck_123";
-const header = "_header_vcpck_129";
-const wrapper = "_wrapper_vcpck_143";
-const description = "_description_vcpck_148";
-const arrowBack = "_arrowBack_vcpck_153";
+const content = "_content_1o8sl_123";
+const config = "_config_1o8sl_130";
+const contentWithRuns = "_contentWithRuns_1o8sl_133";
+const header = "_header_1o8sl_137";
+const wrapper = "_wrapper_1o8sl_151";
+const description = "_description_1o8sl_156";
+const arrowBack = "_arrowBack_1o8sl_161";
 const style0 = {
   content,
+  config,
+  contentWithRuns,
   header,
   wrapper,
   description,