@emporix/process-diagram 2.0.0-beta.2 → 2.0.0-beta.20

package/dist/index.mjs

@@ -1,266 +1,296 @@
-import { jsxs as C, Fragment as n1, jsx as t } from "react/jsx-runtime";
-import z, { forwardRef as b1, useState as E, useRef as $, useCallback as D, useImperativeHandle as N1, useEffect as q, createContext as k1, useMemo as S, useContext as B1, useLayoutEffect as M1 } from "react";
-import { createPortal as P1 } from "react-dom";
-const L1 = "_container_8wfnz_1", E1 = "_step_8wfnz_7", $1 = "_selected_8wfnz_23", T1 = "_selectedInvalid_8wfnz_29", O1 = "_isSet_8wfnz_35", S1 = "_invalid_8wfnz_39", H1 = "_filterFlag_8wfnz_45", W1 = "_title_8wfnz_73", z1 = "_icon_8wfnz_90", R1 = "_content_8wfnz_108", j1 = "_dotsButton_8wfnz_114", N = {
-  container: L1,
-  step: E1,
-  selected: $1,
-  selectedInvalid: T1,
-  isSet: O1,
-  invalid: S1,
-  filterFlag: H1,
-  title: W1,
-  icon: z1,
-  content: R1,
-  dotsButton: j1
+import { jsxs as v, Fragment as K, jsx as o } from "react/jsx-runtime";
+import G, { forwardRef as de, useState as M, useRef as B, useCallback as Q, useImperativeHandle as ue, useEffect as nt, createContext as Vt, useMemo as $, useContext as zt, useLayoutEffect as pe } from "react";
+import { createPortal as he } from "react-dom";
+const fe = "_container_1f7x1_1", ge = "_step_1f7x1_7", me = "_dotsButton_1f7x1_23", Ce = "_selected_1f7x1_27", ve = "_selectedInvalid_1f7x1_36", _e = "_isSet_1f7x1_45", xe = "_invalid_1f7x1_52", Ie = "_debuggerStatus_1f7x1_60", we = "_title_1f7x1_64", ye = "_icon_1f7x1_67", Ne = "_filterFlag_1f7x1_78", be = "_content_1f7x1_141", R = {
+  container: fe,
+  step: ge,
+  dotsButton: me,
+  selected: Ce,
+  selectedInvalid: ve,
+  isSet: _e,
+  invalid: xe,
+  debuggerStatus: Ie,
+  title: we,
+  icon: ye,
+  filterFlag: Ne,
+  content: be
 };
-var f1 = {
+var Yt = {
   color: void 0,
   size: void 0,
   className: void 0,
   style: void 0,
   attr: void 0
-}, p1 = z.createContext && /* @__PURE__ */ z.createContext(f1), D1 = ["attr", "size", "title"];
-function Z1(e, n) {
-  if (e == null) return {};
-  var o = V1(e, n), i, r;
+}, Bt = G.createContext && /* @__PURE__ */ G.createContext(Yt), Le = ["attr", "size", "title"];
+function Se(t, e) {
+  if (t == null) return {};
+  var n = Te(t, e), i, s;
   if (Object.getOwnPropertySymbols) {
-    var c = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < c.length; r++)
-      i = c[r], !(n.indexOf(i) >= 0) && Object.prototype.propertyIsEnumerable.call(e, i) && (o[i] = e[i]);
+    var l = Object.getOwnPropertySymbols(t);
+    for (s = 0; s < l.length; s++)
+      i = l[s], !(e.indexOf(i) >= 0) && Object.prototype.propertyIsEnumerable.call(t, i) && (n[i] = t[i]);
   }
-  return o;
+  return n;
 }
-function V1(e, n) {
-  if (e == null) return {};
-  var o = {};
-  for (var i in e)
-    if (Object.prototype.hasOwnProperty.call(e, i)) {
-      if (n.indexOf(i) >= 0) continue;
-      o[i] = e[i];
+function Te(t, e) {
+  if (t == null) return {};
+  var n = {};
+  for (var i in t)
+    if (Object.prototype.hasOwnProperty.call(t, i)) {
+      if (e.indexOf(i) >= 0) continue;
+      n[i] = t[i];
     }
-  return o;
+  return n;
 }
-function X() {
-  return X = Object.assign ? Object.assign.bind() : function(e) {
-    for (var n = 1; n < arguments.length; n++) {
-      var o = arguments[n];
-      for (var i in o)
-        Object.prototype.hasOwnProperty.call(o, i) && (e[i] = o[i]);
+function at() {
+  return at = Object.assign ? Object.assign.bind() : function(t) {
+    for (var e = 1; e < arguments.length; e++) {
+      var n = arguments[e];
+      for (var i in n)
+        Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
     }
-    return e;
-  }, X.apply(this, arguments);
+    return t;
+  }, at.apply(this, arguments);
 }
-function u1(e, n) {
-  var o = Object.keys(e);
+function Ft(t, e) {
+  var n = Object.keys(t);
   if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(e);
-    n && (i = i.filter(function(r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), o.push.apply(o, i);
+    var i = Object.getOwnPropertySymbols(t);
+    e && (i = i.filter(function(s) {
+      return Object.getOwnPropertyDescriptor(t, s).enumerable;
+    })), n.push.apply(n, i);
   }
-  return o;
+  return n;
 }
-function G(e) {
-  for (var n = 1; n < arguments.length; n++) {
-    var o = arguments[n] != null ? arguments[n] : {};
-    n % 2 ? u1(Object(o), !0).forEach(function(i) {
-      F1(e, i, o[i]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : u1(Object(o)).forEach(function(i) {
-      Object.defineProperty(e, i, Object.getOwnPropertyDescriptor(o, i));
+function dt(t) {
+  for (var e = 1; e < arguments.length; e++) {
+    var n = arguments[e] != null ? arguments[e] : {};
+    e % 2 ? Ft(Object(n), !0).forEach(function(i) {
+      Pe(t, i, n[i]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(n)) : Ft(Object(n)).forEach(function(i) {
+      Object.defineProperty(t, i, Object.getOwnPropertyDescriptor(n, i));
     });
   }
-  return e;
+  return t;
 }
-function F1(e, n, o) {
-  return n = q1(n), n in e ? Object.defineProperty(e, n, { value: o, enumerable: !0, configurable: !0, writable: !0 }) : e[n] = o, e;
+function Pe(t, e, n) {
+  return e = ke(e), e in t ? Object.defineProperty(t, e, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = n, t;
 }
-function q1(e) {
-  var n = Y1(e, "string");
-  return typeof n == "symbol" ? n : n + "";
+function ke(t) {
+  var e = Ee(t, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function Y1(e, n) {
-  if (typeof e != "object" || !e) return e;
-  var o = e[Symbol.toPrimitive];
-  if (o !== void 0) {
-    var i = o.call(e, n);
+function Ee(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var n = t[Symbol.toPrimitive];
+  if (n !== void 0) {
+    var i = n.call(t, e);
     if (typeof i != "object") return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (n === "string" ? String : Number)(e);
+  return (e === "string" ? String : Number)(t);
 }
-function g1(e) {
-  return e && e.map((n, o) => /* @__PURE__ */ z.createElement(n.tag, G({
-    key: o
-  }, n.attr), g1(n.child)));
+function Gt(t) {
+  return t && t.map((e, n) => /* @__PURE__ */ G.createElement(e.tag, dt({
+    key: n
+  }, e.attr), Gt(e.child)));
 }
-function V(e) {
-  return (n) => /* @__PURE__ */ z.createElement(A1, X({
-    attr: G({}, e.attr)
-  }, n), g1(e.child));
+function J(t) {
+  return (e) => /* @__PURE__ */ G.createElement(Re, at({
+    attr: dt({}, t.attr)
+  }, e), Gt(t.child));
 }
-function A1(e) {
-  var n = (o) => {
+function Re(t) {
+  var e = (n) => {
     var {
       attr: i,
-      size: r,
-      title: c
-    } = e, a = Z1(e, D1), d = r || o.size || "1em", s;
-    return o.className && (s = o.className), e.className && (s = (s ? s + " " : "") + e.className), /* @__PURE__ */ z.createElement("svg", X({
+      size: s,
+      title: l
+    } = t, d = Se(t, Le), p = s || n.size || "1em", c;
+    return n.className && (c = n.className), t.className && (c = (c ? c + " " : "") + t.className), /* @__PURE__ */ G.createElement("svg", at({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
-    }, o.attr, i, a, {
-      className: s,
-      style: G(G({
-        color: e.color || o.color
-      }, o.style), e.style),
-      height: d,
-      width: d,
+    }, n.attr, i, d, {
+      className: c,
+      style: dt(dt({
+        color: t.color || n.color
+      }, n.style), t.style),
+      height: p,
+      width: p,
       xmlns: "http://www.w3.org/2000/svg"
-    }), c && /* @__PURE__ */ z.createElement("title", null, c), e.children);
+    }), l && /* @__PURE__ */ G.createElement("title", null, l), t.children);
   };
-  return p1 !== void 0 ? /* @__PURE__ */ z.createElement(p1.Consumer, null, (o) => n(o)) : n(f1);
+  return Bt !== void 0 ? /* @__PURE__ */ G.createElement(Bt.Consumer, null, (n) => e(n)) : e(Yt);
 }
-function X1(e) {
-  return V({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1z" }, child: [] }] })(e);
+function Me(t) {
+  return J({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1z" }, child: [] }] })(t);
 }
-function G1(e) {
-  return V({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325" }, child: [] }] })(e);
+function Zt(t) {
+  return J({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325" }, child: [] }] })(t);
 }
-function K(e) {
-  return V({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" }, child: [] }] })(e);
+function ut(t) {
+  return J({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" }, child: [] }] })(t);
 }
-function J(e) {
-  return V({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" }, child: [] }, { tag: "path", attr: { d: "M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" }, child: [] }] })(e);
+function ht(t) {
+  return J({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" }, child: [] }, { tag: "path", attr: { d: "M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" }, child: [] }] })(t);
 }
-const K1 = "_panel_19663_1", J1 = "_panelExiting_19663_13", Q1 = "_menuItem_19663_37", U1 = "_disabled_19663_52", ee = "_menuItemIcon_19663_57", te = "_menuItemText_19663_63", ne = "_overlay_19663_69", T = {
-  panel: K1,
-  panelExiting: J1,
-  menuItem: Q1,
-  disabled: U1,
-  menuItemIcon: ee,
-  menuItemText: te,
-  overlay: ne
-}, oe = (e) => {
-  const o = e.currentTarget ?? e.target;
-  if (o?.getBoundingClientRect) {
-    const r = o.getBoundingClientRect();
-    return { top: r.bottom + 2, left: r.left };
+const Oe = "_panel_19663_1", $e = "_panelExiting_19663_13", De = "_menuItem_19663_37", Be = "_disabled_19663_52", Fe = "_menuItemIcon_19663_57", Ae = "_menuItemText_19663_63", je = "_overlay_19663_69", W = {
+  panel: Oe,
+  panelExiting: $e,
+  menuItem: De,
+  disabled: Be,
+  menuItemIcon: Fe,
+  menuItemText: Ae,
+  overlay: je
+}, We = (t) => {
+  const n = t.currentTarget ?? t.target;
+  if (n?.getBoundingClientRect) {
+    const s = n.getBoundingClientRect();
+    return { top: s.bottom + 2, left: s.left };
   }
-  const i = e;
+  const i = t;
   return {
     top: (i.clientY ?? 0) + 2,
     left: i.clientX ?? 0
   };
-}, Q = b1(function({ model: n, popup: o = !0, onHide: i, onClick: r }, c) {
-  const [a, d] = E(!1), [s, l] = E(!1), [f, b] = E({ top: 0, left: 0 }), x = $(null), v = D(() => {
-    s || l(!0);
-  }, [s]), m = D(
+}, ft = de(function({ model: e, popup: n = !0, onHide: i, onClick: s }, l) {
+  const [d, p] = M(!1), [c, r] = M(!1), [h, m] = M({ top: 0, left: 0 }), x = B(null), C = Q(() => {
+    c || r(!0);
+  }, [c]), N = Q(
     (u) => {
-      s && u.animationName.includes("menuOut") && (d(!1), l(!1), i?.());
+      c && u.animationName.includes("menuOut") && (p(!1), r(!1), i?.());
     },
-    [s, i]
-  ), p = D((u) => {
-    b(oe(u)), l(!1), d(!0);
-  }, []), w = D(
+    [c, i]
+  ), b = Q((u) => {
+    m(We(u)), r(!1), p(!0);
+  }, []), g = Q(
     (u) => {
-      a ? v() : p(u);
+      d ? C() : b(u);
     },
-    [a, v, p]
+    [d, C, b]
   );
-  N1(
-    c,
+  ue(
+    l,
     () => ({
-      show: p,
-      hide: v,
-      toggle: w
+      show: b,
+      hide: C,
+      toggle: g
     }),
-    [p, v, w]
-  ), q(() => {
-    if (!a) return;
-    const u = (L) => {
-      L.key === "Escape" && v();
-    }, I = (L) => {
-      const h = x.current;
-      h && !h.contains(L.target) && (L.stopPropagation(), v());
+    [b, C, g]
+  ), nt(() => {
+    if (!d) return;
+    const u = (_) => {
+      _.key === "Escape" && C();
+    }, a = (_) => {
+      const I = x.current;
+      I && !I.contains(_.target) && (_.stopPropagation(), C());
     };
-    return document.addEventListener("keydown", u), document.addEventListener("mousedown", I), () => {
-      document.removeEventListener("keydown", u), document.removeEventListener("mousedown", I);
+    return document.addEventListener("keydown", u), document.addEventListener("mousedown", a), () => {
+      document.removeEventListener("keydown", u), document.removeEventListener("mousedown", a);
     };
-  }, [a, v]);
-  const y = (u, I) => {
-    I.stopPropagation(), u.command?.({ originalEvent: I, item: u }), v();
-  }, _ = (u, I) => {
-    const L = (h) => y(u, h);
-    return u.template ? /* @__PURE__ */ t(z.Fragment, { children: u.template(u, { onClick: L }) }, I) : /* @__PURE__ */ C(
+  }, [d, C]);
+  const f = (u, a) => {
+    a.stopPropagation(), u.command?.({ originalEvent: a, item: u }), C();
+  }, E = (u, a) => {
+    const _ = (I) => f(u, I);
+    return u.template ? /* @__PURE__ */ o(G.Fragment, { children: u.template(u, { onClick: _ }) }, a) : /* @__PURE__ */ v(
       "button",
       {
         type: "button",
-        className: `${T.menuItem} ${u.disabled && T.disabled}`,
-        onClick: (h) => {
-          u.disabled || L(h);
+        className: `${W.menuItem} ${u.disabled && W.disabled}`,
+        onClick: (I) => {
+          u.disabled || _(I);
         },
         children: [
-          u.icon && /* @__PURE__ */ t("span", { className: T.menuItemIcon, children: u.icon }),
-          /* @__PURE__ */ t("span", { className: T.menuItemText, children: u.label })
+          u.icon && /* @__PURE__ */ o("span", { className: W.menuItemIcon, children: u.icon }),
+          /* @__PURE__ */ o("span", { className: W.menuItemText, children: u.label })
         ]
       },
-      I
+      a
     );
   };
-  return !a || !o ? null : P1(
-    /* @__PURE__ */ C(n1, { children: [
-      /* @__PURE__ */ t(
+  return !d || !n ? null : he(
+    /* @__PURE__ */ v(K, { children: [
+      /* @__PURE__ */ o(
         "div",
         {
-          className: T.overlay,
+          className: W.overlay,
           "aria-hidden": !0,
-          onClick: () => v(),
+          onClick: () => C(),
           onMouseDown: (u) => u.stopPropagation()
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         "div",
         {
           ref: x,
-          className: `${T.panel} ${s ? T.panelExiting : ""}`,
+          className: `${W.panel} ${c ? W.panelExiting : ""}`,
           role: "menu",
-          style: { top: f.top, left: f.left },
-          onAnimationEnd: m,
+          style: { top: h.top, left: h.left },
+          onAnimationEnd: N,
           onClick: (u) => {
-            u.stopPropagation(), r?.(u);
+            u.stopPropagation(), s?.(u);
           },
-          children: n.map(_)
+          children: e.map(E)
         }
       )
     ] }),
     document.body
   );
-}), i1 = () => (e, n) => /* @__PURE__ */ C(
+}), gt = () => (t, e) => /* @__PURE__ */ v(
   "button",
   {
-    className: T.menuItem,
-    onClick: (o) => n.onClick(o),
+    className: W.menuItem,
+    onClick: (n) => e.onClick(n),
     children: [
-      /* @__PURE__ */ t("span", { className: T.menuItemIcon, children: e.icon }),
-      /* @__PURE__ */ t("span", { className: T.menuItemText, children: e.label })
+      /* @__PURE__ */ o("span", { className: W.menuItemIcon, children: t.icon }),
+      /* @__PURE__ */ o("span", { className: W.menuItemText, children: t.label })
     ]
   }
-), ie = ({
-  width: e = 16,
-  height: n = 16,
-  color: o = "#3B64A0"
-}) => /* @__PURE__ */ C(
+), w = {
+  NAVY: "#3B64A0",
+  LIGHT_BG: "#fafafa",
+  FINISHED_GREEN: "#17a34a",
+  ERROR_RED: "#E32012",
+  TEAL: "#41B0AC",
+  ADD_TRIGGER_FILL: "#0C971F",
+  ADD_TRIGGER_STROKE: "#14BC2B",
+  SEPARATOR: "#a1bbdc",
+  SLATE_400: "#94a3b8",
+  ORANGE: "#ff9800"
+}, mt = (t) => t?.toLowerCase() === w.FINISHED_GREEN.toLowerCase(), X = (t) => mt(t) ? `3px dotted ${t}` : `2px solid ${t}`, Ct = {
+  pending: w.NAVY,
+  running: w.FINISHED_GREEN,
+  validating: w.ORANGE,
+  finished: w.FINISHED_GREEN,
+  failed: w.ERROR_RED,
+  cancelled: w.ORANGE,
+  skipped: w.SLATE_400,
+  invalid: w.ERROR_RED
+}, He = {
+  pending: w.LIGHT_BG,
+  running: "#e6f7f6",
+  validating: "#eff6ff",
+  finished: "#DFFFE3",
+  failed: "#fde8e6",
+  cancelled: "#f1f5f9",
+  skipped: "#f1f5f9",
+  invalid: "#fffbeb"
+}, Ve = ({
+  width: t = 16,
+  height: e = 16,
+  color: n = w.NAVY
+}) => /* @__PURE__ */ v(
   "svg",
   {
-    width: e,
-    height: n,
+    width: t,
+    height: e,
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         "rect",
         {
           x: "7.99219",
@@ -269,103 +299,103 @@ const K1 = "_panel_19663_1", J1 = "_panelExiting_19663_13", Q1 = "_menuItem_1966
           height: "11",
           rx: "1.5",
           transform: "rotate(45 7.99219 0.222732)",
-          stroke: o
+          stroke: n
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         "path",
         {
           d: "M10.4693 5.52599L5.52513 10.4813M5.52513 5.53151L10.4749 10.4813",
-          stroke: o,
+          stroke: n,
           strokeLinecap: "round"
         }
       )
     ]
   }
-), re = ({
-  width: e = 16,
-  height: n = 16,
-  color: o = "#3B64A0"
-}) => /* @__PURE__ */ C(
+), ze = ({
+  width: t = 16,
+  height: e = 16,
+  color: n = w.NAVY
+}) => /* @__PURE__ */ v(
   "svg",
   {
-    width: e,
-    height: n,
+    width: t,
+    height: e,
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         "path",
         {
           d: "M11.5341 7.00002H15.4661C15.5136 7.00004 15.5601 7.01359 15.6002 7.03909C15.6403 7.06459 15.6722 7.10098 15.6924 7.144C15.7125 7.18702 15.72 7.23489 15.7139 7.282C15.7079 7.32912 15.6885 7.37352 15.6581 7.41002L13.6921 9.77002C13.6686 9.79816 13.6393 9.82079 13.6061 9.83633C13.5729 9.85186 13.5367 9.85991 13.5001 9.85991C13.4635 9.85991 13.4273 9.85186 13.3941 9.83633C13.3609 9.82079 13.3315 9.79816 13.3081 9.77002L11.3421 7.41002C11.3117 7.37352 11.2923 7.32912 11.2862 7.282C11.2802 7.23489 11.2876 7.18702 11.3078 7.144C11.3279 7.10098 11.3599 7.06459 11.4 7.03909C11.4401 7.01359 11.4866 7.00004 11.5341 7.00002ZM0.534086 9.00002H4.46609C4.51359 9.00001 4.56011 8.98645 4.60019 8.96096C4.64027 8.93546 4.67225 8.89907 4.6924 8.85605C4.71254 8.81303 4.72002 8.76516 4.71394 8.71804C4.70786 8.67093 4.68849 8.62652 4.65809 8.59002L2.69209 6.23002C2.66862 6.20189 2.63926 6.17925 2.60609 6.16372C2.57291 6.14819 2.53672 6.14014 2.50009 6.14014C2.46345 6.14014 2.42726 6.14819 2.39409 6.16372C2.36091 6.17925 2.33155 6.20189 2.30809 6.23002L0.342086 8.59002C0.311684 8.62652 0.29231 8.67093 0.286234 8.71804C0.280157 8.76516 0.287629 8.81303 0.307775 8.85605C0.327921 8.89907 0.359907 8.93546 0.399987 8.96096C0.440067 8.98645 0.486583 9.00001 0.534086 9.00002Z",
-          fill: o
+          fill: n
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         "path",
         {
           fillRule: "evenodd",
           clipRule: "evenodd",
           d: "M8.00001 3.00023C6.44801 3.00023 5.06001 3.70723 4.14301 4.81823C4.10206 4.87131 4.05086 4.9156 3.99245 4.94849C3.93404 4.98138 3.86961 5.00219 3.803 5.00968C3.73638 5.01717 3.66895 5.01119 3.60469 4.99209C3.54043 4.97299 3.48068 4.94117 3.42897 4.89851C3.37726 4.85586 3.33465 4.80324 3.30368 4.74379C3.27272 4.68434 3.25402 4.61926 3.24871 4.55244C3.24339 4.48562 3.25157 4.41841 3.27275 4.35481C3.29394 4.29121 3.32769 4.23252 3.37201 4.18223C4.1042 3.29576 5.0756 2.63824 6.17067 2.28789C7.26575 1.93753 8.43841 1.90908 9.54918 2.20592C10.66 2.50276 11.6621 3.1124 12.4364 3.96232C13.2107 4.81224 13.7246 5.86668 13.917 7.00023H12.9C12.6691 5.87104 12.0554 4.85623 11.1625 4.12738C10.2697 3.39853 9.15256 3.00037 8.00001 3.00023ZM3.10001 9.00023C3.28932 9.92486 3.73636 10.7771 4.38949 11.4584C5.04261 12.1397 5.87517 12.6223 6.79097 12.8505C7.70677 13.0787 8.66845 13.0431 9.5649 12.7479C10.4613 12.4527 11.256 11.9099 11.857 11.1822C11.898 11.1292 11.9492 11.0849 12.0076 11.052C12.066 11.0191 12.1304 10.9983 12.197 10.9908C12.2636 10.9833 12.3311 10.9893 12.3953 11.0084C12.4596 11.0275 12.5193 11.0593 12.5711 11.102C12.6228 11.1446 12.6654 11.1972 12.6963 11.2567C12.7273 11.3161 12.746 11.3812 12.7513 11.448C12.7566 11.5148 12.7484 11.5821 12.7273 11.6457C12.7061 11.7093 12.6723 11.7679 12.628 11.8182C11.8958 12.7047 10.9244 13.3622 9.82934 13.7126C8.73427 14.0629 7.56161 14.0914 6.45083 13.7945C5.34006 13.4977 4.33791 12.8881 3.5636 12.0381C2.78928 11.1882 2.27538 10.1338 2.08301 9.00023H3.10001Z",
-          fill: o
+          fill: n
         }
       )
     ]
   }
-), h1 = ({
-  width: e = 16,
-  height: n = 16,
-  color: o = "#3B64A0"
-}) => /* @__PURE__ */ C(
+), It = ({
+  width: t = 16,
+  height: e = 16,
+  color: n = w.NAVY
+}) => /* @__PURE__ */ v(
   "svg",
   {
-    width: e,
-    height: n,
+    width: t,
+    height: e,
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         "path",
         {
           d: "M8 15C6.14348 15 4.36301 14.2625 3.05025 12.9497C1.7375 11.637 1 9.85652 1 8C1 6.14348 1.7375 4.36301 3.05025 3.05025C4.36301 1.7375 6.14348 1 8 1C9.85652 1 11.637 1.7375 12.9497 3.05025C14.2625 4.36301 15 6.14348 15 8C15 9.85652 14.2625 11.637 12.9497 12.9497C11.637 14.2625 9.85652 15 8 15ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16Z",
-          fill: o
+          fill: n
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         "path",
         {
           d: "M7 11.5C7 11.3674 7.05268 11.2402 7.14645 11.1464C7.24021 11.0527 7.36739 11 7.5 11H8.5C8.63261 11 8.75979 11.0527 8.85355 11.1464C8.94732 11.2402 9 11.3674 9 11.5C9 11.6326 8.94732 11.7598 8.85355 11.8536C8.75979 11.9473 8.63261 12 8.5 12H7.5C7.36739 12 7.24021 11.9473 7.14645 11.8536C7.05268 11.7598 7 11.6326 7 11.5ZM5 8.5C5 8.36739 5.05268 8.24021 5.14645 8.14645C5.24021 8.05268 5.36739 8 5.5 8H10.5C10.6326 8 10.7598 8.05268 10.8536 8.14645C10.9473 8.24021 11 8.36739 11 8.5C11 8.63261 10.9473 8.75979 10.8536 8.85355C10.7598 8.94732 10.6326 9 10.5 9H5.5C5.36739 9 5.24021 8.94732 5.14645 8.85355C5.05268 8.75979 5 8.63261 5 8.5ZM3 5.5C3 5.36739 3.05268 5.24021 3.14645 5.14645C3.24021 5.05268 3.36739 5 3.5 5H12.5C12.6326 5 12.7598 5.05268 12.8536 5.14645C12.9473 5.24021 13 5.36739 13 5.5C13 5.63261 12.9473 5.75979 12.8536 5.85355C12.7598 5.94732 12.6326 6 12.5 6H3.5C3.36739 6 3.24021 5.94732 3.14645 5.85355C3.05268 5.75979 3 5.63261 3 5.5Z",
-          fill: o
+          fill: n
         }
       )
     ]
   }
-), v1 = k1(
+), Ut = Vt(
   void 0
-), Lt = ({ children: e }) => {
-  const [n, o] = E([]), i = D((a, d) => {
-    o((s) => (s.forEach((l) => {
-      l.current && l !== a && l.current.hide(d);
-    }), [])), a.current?.toggle(d), o([a]);
-  }, []), r = D((a) => {
-    o((d) => d.filter((s) => s !== a));
-  }, []), c = S(
+), Sn = ({ children: t }) => {
+  const [e, n] = M([]), i = Q((d, p) => {
+    n((c) => (c.forEach((r) => {
+      r.current && r !== d && r.current.hide(p);
+    }), [])), d.current?.toggle(p), n([d]);
+  }, []), s = Q((d) => {
+    n((p) => p.filter((c) => c !== d));
+  }, []), l = $(
     () => ({
-      openMenus: n,
+      openMenus: e,
       openMenu: i,
-      closeMenu: r
+      closeMenu: s
     }),
-    [n, i, r]
+    [e, i, s]
   );
-  return /* @__PURE__ */ t(v1.Provider, { value: c, children: e });
-}, r1 = () => {
-  const e = B1(v1);
-  if (e === void 0)
+  return /* @__PURE__ */ o(Ut.Provider, { value: l, children: t });
+}, Lt = () => {
+  const t = zt(Ut);
+  if (t === void 0)
     throw new Error("useMenuProvider must be used within a MenuProvider");
-  return e;
-}, se = ({ color: e = "#E32012" }) => /* @__PURE__ */ C(
+  return t;
+}, Ye = ({ color: t = w.ERROR_RED }) => /* @__PURE__ */ v(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -374,329 +404,399 @@ const K1 = "_panel_19663_1", J1 = "_panelExiting_19663_13", Q1 = "_menuItem_1966
     viewBox: "0 0 16 16",
     fill: "none",
     children: [
-      /* @__PURE__ */ t("g", { clipPath: "url(#clip0_3105_5367)", children: /* @__PURE__ */ t(
+      /* @__PURE__ */ o("g", { clipPath: "url(#clip0_3105_5367)", children: /* @__PURE__ */ o(
         "path",
         {
           d: "M16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16C5.87827 16 3.84344 15.1571 2.34315 13.6569C0.842855 12.1566 0 10.1217 0 8C0 5.87827 0.842855 3.84344 2.34315 2.34315C3.84344 0.842855 5.87827 0 8 0C10.1217 0 12.1566 0.842855 13.6569 2.34315C15.1571 3.84344 16 5.87827 16 8ZM8 4C7.87361 4.00007 7.74863 4.02662 7.63312 4.07793C7.51761 4.12924 7.41413 4.20418 7.32934 4.29791C7.24456 4.39165 7.18035 4.5021 7.14084 4.62217C7.10134 4.74223 7.08743 4.86923 7.1 4.995L7.45 8.502C7.46176 8.63977 7.5248 8.76811 7.62664 8.86164C7.72849 8.95516 7.86173 9.00705 8 9.00705C8.13827 9.00705 8.27151 8.95516 8.37336 8.86164C8.4752 8.76811 8.53824 8.63977 8.55 8.502L8.9 4.995C8.91257 4.86923 8.89866 4.74223 8.85915 4.62217C8.81965 4.5021 8.75544 4.39165 8.67066 4.29791C8.58587 4.20418 8.48239 4.12924 8.36688 4.07793C8.25137 4.02662 8.12639 4.00007 8 4ZM8.002 10C7.73678 10 7.48243 10.1054 7.29489 10.2929C7.10736 10.4804 7.002 10.7348 7.002 11C7.002 11.2652 7.10736 11.5196 7.29489 11.7071C7.48243 11.8946 7.73678 12 8.002 12C8.26722 12 8.52157 11.8946 8.70911 11.7071C8.89664 11.5196 9.002 11.2652 9.002 11C9.002 10.7348 8.89664 10.4804 8.70911 10.2929C8.52157 10.1054 8.26722 10 8.002 10Z",
-          fill: e
+          fill: t
         }
       ) }),
-      /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_3105_5367", children: /* @__PURE__ */ t("rect", { width: "16", height: "16", fill: "white" }) }) })
+      /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: "clip0_3105_5367", children: /* @__PURE__ */ o("rect", { width: "16", height: "16", fill: "white" }) }) })
     ]
   }
-), s1 = (e) => {
+);
+function Ge(t) {
+  return J({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }, child: [] }, { tag: "polyline", attr: { points: "15 3 21 3 21 9" }, child: [] }, { tag: "line", attr: { x1: "10", y1: "14", x2: "21", y2: "3" }, child: [] }] })(t);
+}
+function Ze(t) {
+  return J({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "circle", attr: { cx: "12", cy: "12", r: "4" }, child: [] }, { tag: "line", attr: { x1: "1.05", y1: "12", x2: "7", y2: "12" }, child: [] }, { tag: "line", attr: { x1: "17.01", y1: "12", x2: "22.96", y2: "12" }, child: [] }] })(t);
+}
+function Ue(t) {
+  return J({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polygon", attr: { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }, child: [] }] })(t);
+}
+const rt = (t) => {
   const {
-    isSet: n,
-    isSelected: o,
+    isSet: e,
+    isSelected: n,
     isFilter: i,
-    className: r,
-    title: c,
-    icon: a,
-    contextMenuItems: d = void 0,
-    onDeleteStep: s,
-    onUpdateFilter: l,
-    onSelectStep: f,
-    subtitle: b,
-    isInvalid: x,
-    localId: v
-  } = e, m = $(null), { openMenu: p, closeMenu: w } = r1(), y = i1(), _ = S(
-    () => [
-      {
-        label: "Add Step Filter",
-        icon: /* @__PURE__ */ t("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ t(h1, {}) }),
-        command: (g) => {
-          g?.originalEvent?.stopPropagation(), l && l(v);
-        },
-        template: y
+    debuggerMode: s = !1,
+    status: l,
+    className: d,
+    title: p,
+    icon: c,
+    contextMenuItems: r = void 0,
+    onDeleteStep: h,
+    onUpdateFilter: m,
+    onSelectStep: x,
+    onCheckScenario: C,
+    subtitle: N,
+    isInvalid: b,
+    localId: g
+  } = t, f = B(null), { openMenu: E, closeMenu: u } = Lt(), a = gt(), [_] = M(!0), I = $(() => {
+    const S = [];
+    return s || S.push({
+      label: "Add Step Filter",
+      icon: /* @__PURE__ */ o("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ o(It, {}) }),
+      command: (k) => {
+        k?.originalEvent?.stopPropagation(), m && m(g);
       },
-      {
-        label: "Remove",
-        icon: /* @__PURE__ */ t(J, { color: "#3B64A0", size: 18 }),
-        command: (g) => {
-          g?.originalEvent?.stopPropagation(), s && s(v);
-        },
-        template: y
-      }
-    ],
-    [l, s, v, y]
-  ), u = S(() => d !== void 0 ? d : _, [d, _]), I = (g) => {
-    g.stopPropagation(), p(m, g);
-  }, L = S(() => o && x ? N.step + " " + N.selectedInvalid : o ? N.step + " " + N.selected : n ? N.step + " " + N.isSet : x ? N.step + " " + N.invalid : N.step, [n, o, x]), h = S(() => x ? /* @__PURE__ */ t(se, { color: "#E32012" }) : a, [a, x]);
-  return /* @__PURE__ */ t("div", { className: N.container + " " + r, children: /* @__PURE__ */ C("div", { children: [
-    /* @__PURE__ */ C("div", { className: L, onClick: () => f(v), children: [
-      /* @__PURE__ */ C("div", { className: N.content, children: [
-        /* @__PURE__ */ t("div", { className: `${N.icon} ${x && N.invalid}`, children: h }),
-        /* @__PURE__ */ t("div", { className: N.title, children: c })
-      ] }),
-      /* @__PURE__ */ t(
-        "button",
-        {
-          className: N.dotsButton,
-          onClick: I,
-          "aria-haspopup": !0,
-          "aria-label": "Step options",
-          children: /* @__PURE__ */ t(
-            K,
-            {
-              className: N.dots,
-              color: x ? "#E32012" : "#3B64A0"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ t(
-        Q,
-        {
-          model: u,
-          popup: !0,
-          ref: m,
-          onClick: (g) => g.stopPropagation(),
-          onHide: () => w(m)
-        }
-      )
-    ] }),
-    i && /* @__PURE__ */ C(
-      "div",
-      {
-        className: N.filterFlag,
-        role: "button",
-        tabIndex: 0,
-        onClick: () => {
-          l && l(v);
-        },
-        onKeyDown: (g) => {
-          (g.key === "Enter" || g.key === " ") && l && (g.preventDefault(), l(v));
-        },
-        children: [
-          /* @__PURE__ */ t(h1, { color: "#3B64A0" }),
-          /* @__PURE__ */ t("span", { children: "Filter" }),
-          /* @__PURE__ */ t(
-            K,
-            {
-              className: N.dots,
-              color: x ? "#E32012" : "#3B64A0",
-              style: { height: "10px" }
-            }
-          )
-        ]
-      }
-    ),
-    b && /* @__PURE__ */ t("div", { className: N.subtitle, children: b })
-  ] }) });
-}, le = () => /* @__PURE__ */ C("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
-  /* @__PURE__ */ C("g", { clipPath: "url(#clip0_6551_9169)", children: [
-    /* @__PURE__ */ t("rect", { width: "24", height: "24", rx: "12", fill: "#0C971F" }),
-    /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6V11H18C18.5523 11 19 11.4477 19 12C19 12.5523 18.5523 13 18 13H13V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V13H6C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11H11V6Z", fill: "white" })
+      template: a
+    }), _ && S.push({
+      label: "Check Scenario",
+      icon: /* @__PURE__ */ o("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ o(Ge, { color: w.NAVY, size: 18 }) }),
+      command: (k) => {
+        k?.originalEvent?.stopPropagation(), C(g);
+      },
+      template: a
+    }), h && !s && S.push({
+      label: "Remove",
+      icon: /* @__PURE__ */ o(ht, { color: w.NAVY, size: 18 }),
+      command: (k) => {
+        k?.originalEvent?.stopPropagation(), h(g);
+      },
+      template: a
+    }), S;
+  }, [m, h, g, a, _, C, s]), L = $(() => r ?? I, [r, I]), O = (S) => {
+    S.stopPropagation(), E(f, S);
+  }, F = $(() => {
+    if (!(!s || l == null || l === "pending"))
+      return {
+        "--step-debugger-accent": Ct[l]
+      };
+  }, [s, l]), y = $(() => n && b ? R.step + " " + R.selectedInvalid : s && l != null && l !== "pending" ? R.step + " " + R.debuggerStatus : n ? R.step + " " + R.selected : e ? R.step + " " + R.isSet : b ? R.step + " " + R.invalid : R.step, [e, n, b, l, s]), P = $(() => b ? /* @__PURE__ */ o(Ye, { color: w.ERROR_RED }) : c, [c, b]);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: R.container + " " + d,
+      "data-local-id": void 0,
+      children: /* @__PURE__ */ v("div", { children: [
+        /* @__PURE__ */ v(
+          "div",
+          {
+            className: y,
+            style: F,
+            onClick: () => x(g),
+            children: [
+              /* @__PURE__ */ v("div", { className: R.content, children: [
+                /* @__PURE__ */ o("div", { className: `${R.icon} ${b && R.invalid}`, children: P }),
+                /* @__PURE__ */ o("div", { className: R.title, children: p })
+              ] }),
+              L.length > 0 && /* @__PURE__ */ v(K, { children: [
+                /* @__PURE__ */ o(
+                  "button",
+                  {
+                    className: R.dotsButton,
+                    onClick: O,
+                    "aria-haspopup": !0,
+                    "aria-label": "Step options",
+                    children: /* @__PURE__ */ o(ut, { className: R.dots, size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  ft,
+                  {
+                    model: L,
+                    popup: !0,
+                    ref: f,
+                    onClick: (S) => S.stopPropagation(),
+                    onHide: () => u(f)
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        i && /* @__PURE__ */ v(
+          "div",
+          {
+            className: R.filterFlag,
+            role: "button",
+            tabIndex: 0,
+            onClick: () => {
+              m && m(g);
+            },
+            onKeyDown: (S) => {
+              (S.key === "Enter" || S.key === " ") && m && (S.preventDefault(), m(g));
+            },
+            children: [
+              /* @__PURE__ */ o(It, { color: w.NAVY }),
+              /* @__PURE__ */ o("span", { children: "Filter" }),
+              !s && /* @__PURE__ */ o(
+                ut,
+                {
+                  className: R.dots,
+                  color: b ? w.ERROR_RED : w.NAVY,
+                  style: { height: "10px" }
+                }
+              )
+            ]
+          }
+        ),
+        N && /* @__PURE__ */ o("div", { className: R.subtitle, children: N })
+      ] })
+    }
+  );
+}, Xe = () => /* @__PURE__ */ v("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ v("g", { clipPath: "url(#clip0_6551_9169)", children: [
+    /* @__PURE__ */ o("rect", { width: "24", height: "24", rx: "12", fill: w.ADD_TRIGGER_FILL }),
+    /* @__PURE__ */ o("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6V11H18C18.5523 11 19 11.4477 19 12C19 12.5523 18.5523 13 18 13H13V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V13H6C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11H11V6Z", fill: "white" })
   ] }),
-  /* @__PURE__ */ t("rect", { x: "0.75", y: "0.75", width: "22.5", height: "22.5", rx: "11.25", stroke: "#14BC2B", strokeWidth: "1.5" }),
-  /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_6551_9169", children: /* @__PURE__ */ t("rect", { width: "24", height: "24", rx: "12", fill: "white" }) }) })
-] }), ce = "_multipleTriggersIcon_oxhdi_1", ae = {
-  multipleTriggersIcon: ce
-}, de = () => /* @__PURE__ */ t("div", { className: ae.multipleTriggersIcon, children: /* @__PURE__ */ t("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.5 3.75C1.5 3.15326 1.73705 2.58097 2.15901 2.15901C2.58097 1.73705 3.15326 1.5 3.75 1.5H5.25C5.84674 1.5 6.41903 1.73705 6.84099 2.15901C7.26295 2.58097 7.5 3.15326 7.5 3.75L13.701 3.75C13.8661 3.46404 14.1209 3.24054 14.426 3.11418C14.7311 2.98782 15.0693 2.96565 15.3883 3.05111C15.7072 3.13657 15.9891 3.32489 16.1901 3.58686C16.3911 3.84882 16.5 4.1698 16.5 4.5C16.5 4.8302 16.3911 5.15118 16.1901 5.41314C15.9891 5.67511 15.7072 5.86343 15.3883 5.94889C15.0693 6.03435 14.7311 6.01218 14.426 5.88582C14.1209 5.75946 13.8661 5.53596 13.701 5.25H10.686C10.956 5.52 11.196 5.8215 11.412 6.1575C12.369 7.6455 12.75 9.6885 12.75 12C12.75 14.9895 13.1355 16.638 13.8195 17.55C14.3535 18.264 15.162 18.6315 16.5 18.726C16.5063 18.1334 16.7462 17.5673 17.1674 17.1505C17.5887 16.7337 18.1574 16.5 18.75 16.5H20.25C20.8467 16.5 21.419 16.7371 21.841 17.159C22.2629 17.581 22.5 18.1533 22.5 18.75V20.25C22.5 20.8467 22.2629 21.419 21.841 21.841C21.419 22.2629 20.8467 22.5 20.25 22.5H18.75C18.1533 22.5 17.581 22.2629 17.159 21.841C16.7371 21.419 16.5 20.8467 16.5 20.25H10.299C10.1339 20.536 9.87905 20.7595 9.57399 20.8858C9.26892 21.0122 8.93068 21.0344 8.61173 20.9489C8.29278 20.8634 8.01095 20.6751 7.80993 20.4131C7.60892 20.1512 7.49996 19.8302 7.49996 19.5C7.49996 19.1698 7.60892 18.8488 7.80993 18.5869C8.01095 18.3249 8.29278 18.1366 8.61173 18.0511C8.93068 17.9656 9.26892 17.9878 9.57399 18.1142C9.87905 18.2405 10.1339 18.464 10.299 18.75H12.8655C12.7785 18.6538 12.6959 18.5537 12.618 18.45C11.6145 17.1105 11.25 15.0105 11.25 12C11.25 9.81 10.881 8.1045 10.1505 6.9675C9.5655 6.06 8.7225 5.4675 7.5 5.2995C7.48706 5.88762 7.2443 6.44728 6.82374 6.85859C6.40318 7.2699 5.83826 7.50014 5.25 7.5H3.75C3.15326 7.5 2.58097 7.26295 2.15901 6.84099C1.73705 6.41903 1.5 5.84674 1.5 5.25V3.75ZM3.75 3C3.55109 3 3.36032 3.07902 3.21967 3.21967C3.07902 3.36032 3 3.55109 3 3.75V5.25C3 5.44891 3.07902 5.63968 3.21967 5.78033C3.36032 5.92098 3.55109 6 3.75 6H5.25C5.44891 6 5.63968 5.92098 5.78033 5.78033C5.92098 5.63968 6 5.44891 6 5.25V3.75C6 3.55109 5.92098 3.36032 5.78033 3.21967C5.63968 3.07902 5.44891 3 5.25 3H3.75ZM18.75 18C18.5511 18 18.3603 18.079 18.2197 18.2197C18.079 18.3603 18 18.5511 18 18.75V20.25C18 20.4489 18.079 20.6397 18.2197 20.7803C18.3603 20.921 18.5511 21 18.75 21H20.25C20.4489 21 20.6397 20.921 20.7803 20.7803C20.921 20.6397 21 20.4489 21 20.25V18.75C21 18.5511 20.921 18.3603 20.7803 18.2197C20.6397 18.079 20.4489 18 20.25 18H18.75Z", fill: "white" }) }) }), pe = "_trigger_kfg1y_1", ue = "_title_kfg1y_7", he = "_empty_kfg1y_15", Ce = "_triggerContainer_kfg1y_21", me = "_stepsContainer_kfg1y_25", fe = "_stepItem_kfg1y_51", ge = "_curvesSvg_kfg1y_70", ve = "_centralNode_kfg1y_78", _e = "_iconWrapper_kfg1y_104", xe = "_fadeIn_kfg1y_127", we = "_fadeOut_kfg1y_130", ye = "_operationContainer_kfg1y_134", P = {
-  trigger: pe,
-  title: ue,
-  empty: he,
-  triggerContainer: Ce,
-  stepsContainer: me,
-  stepItem: fe,
-  curvesSvg: ge,
-  centralNode: ve,
-  iconWrapper: _e,
-  fadeIn: xe,
-  fadeOut: we,
-  operationContainer: ye
-}, Ie = () => /* @__PURE__ */ t(
+  /* @__PURE__ */ o("rect", { x: "0.75", y: "0.75", width: "22.5", height: "22.5", rx: "11.25", stroke: w.ADD_TRIGGER_STROKE, strokeWidth: "1.5" }),
+  /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: "clip0_6551_9169", children: /* @__PURE__ */ o("rect", { width: "24", height: "24", rx: "12", fill: "white" }) }) })
+] }), Ke = "_multipleTriggersIcon_oxhdi_1", qe = {
+  multipleTriggersIcon: Ke
+}, Je = () => /* @__PURE__ */ o("div", { className: qe.multipleTriggersIcon, children: /* @__PURE__ */ o("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ o("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.5 3.75C1.5 3.15326 1.73705 2.58097 2.15901 2.15901C2.58097 1.73705 3.15326 1.5 3.75 1.5H5.25C5.84674 1.5 6.41903 1.73705 6.84099 2.15901C7.26295 2.58097 7.5 3.15326 7.5 3.75L13.701 3.75C13.8661 3.46404 14.1209 3.24054 14.426 3.11418C14.7311 2.98782 15.0693 2.96565 15.3883 3.05111C15.7072 3.13657 15.9891 3.32489 16.1901 3.58686C16.3911 3.84882 16.5 4.1698 16.5 4.5C16.5 4.8302 16.3911 5.15118 16.1901 5.41314C15.9891 5.67511 15.7072 5.86343 15.3883 5.94889C15.0693 6.03435 14.7311 6.01218 14.426 5.88582C14.1209 5.75946 13.8661 5.53596 13.701 5.25H10.686C10.956 5.52 11.196 5.8215 11.412 6.1575C12.369 7.6455 12.75 9.6885 12.75 12C12.75 14.9895 13.1355 16.638 13.8195 17.55C14.3535 18.264 15.162 18.6315 16.5 18.726C16.5063 18.1334 16.7462 17.5673 17.1674 17.1505C17.5887 16.7337 18.1574 16.5 18.75 16.5H20.25C20.8467 16.5 21.419 16.7371 21.841 17.159C22.2629 17.581 22.5 18.1533 22.5 18.75V20.25C22.5 20.8467 22.2629 21.419 21.841 21.841C21.419 22.2629 20.8467 22.5 20.25 22.5H18.75C18.1533 22.5 17.581 22.2629 17.159 21.841C16.7371 21.419 16.5 20.8467 16.5 20.25H10.299C10.1339 20.536 9.87905 20.7595 9.57399 20.8858C9.26892 21.0122 8.93068 21.0344 8.61173 20.9489C8.29278 20.8634 8.01095 20.6751 7.80993 20.4131C7.60892 20.1512 7.49996 19.8302 7.49996 19.5C7.49996 19.1698 7.60892 18.8488 7.80993 18.5869C8.01095 18.3249 8.29278 18.1366 8.61173 18.0511C8.93068 17.9656 9.26892 17.9878 9.57399 18.1142C9.87905 18.2405 10.1339 18.464 10.299 18.75H12.8655C12.7785 18.6538 12.6959 18.5537 12.618 18.45C11.6145 17.1105 11.25 15.0105 11.25 12C11.25 9.81 10.881 8.1045 10.1505 6.9675C9.5655 6.06 8.7225 5.4675 7.5 5.2995C7.48706 5.88762 7.2443 6.44728 6.82374 6.85859C6.40318 7.2699 5.83826 7.50014 5.25 7.5H3.75C3.15326 7.5 2.58097 7.26295 2.15901 6.84099C1.73705 6.41903 1.5 5.84674 1.5 5.25V3.75ZM3.75 3C3.55109 3 3.36032 3.07902 3.21967 3.21967C3.07902 3.36032 3 3.55109 3 3.75V5.25C3 5.44891 3.07902 5.63968 3.21967 5.78033C3.36032 5.92098 3.55109 6 3.75 6H5.25C5.44891 6 5.63968 5.92098 5.78033 5.78033C5.92098 5.63968 6 5.44891 6 5.25V3.75C6 3.55109 5.92098 3.36032 5.78033 3.21967C5.63968 3.07902 5.44891 3 5.25 3H3.75ZM18.75 18C18.5511 18 18.3603 18.079 18.2197 18.2197C18.079 18.3603 18 18.5511 18 18.75V20.25C18 20.4489 18.079 20.6397 18.2197 20.7803C18.3603 20.921 18.5511 21 18.75 21H20.25C20.4489 21 20.6397 20.921 20.7803 20.7803C20.921 20.6397 21 20.4489 21 20.25V18.75C21 18.5511 20.921 18.3603 20.7803 18.2197C20.6397 18.079 20.4489 18 20.25 18H18.75Z", fill: "white" }) }) }), Qe = "_trigger_kfg1y_1", t1 = "_title_kfg1y_7", e1 = "_empty_kfg1y_15", n1 = "_triggerContainer_kfg1y_21", o1 = "_stepsContainer_kfg1y_25", i1 = "_stepItem_kfg1y_51", s1 = "_curvesSvg_kfg1y_70", r1 = "_centralNode_kfg1y_78", l1 = "_iconWrapper_kfg1y_104", c1 = "_fadeIn_kfg1y_127", a1 = "_fadeOut_kfg1y_130", d1 = "_operationContainer_kfg1y_134", D = {
+  trigger: Qe,
+  title: t1,
+  empty: e1,
+  triggerContainer: n1,
+  stepsContainer: o1,
+  stepItem: i1,
+  curvesSvg: s1,
+  centralNode: r1,
+  iconWrapper: l1,
+  fadeIn: c1,
+  fadeOut: a1,
+  operationContainer: d1
+}, u1 = () => /* @__PURE__ */ o(
   "div",
   {
     style: {
       height: "1px",
       marginLeft: "4px",
       marginRight: "4px",
-      borderTop: "1px solid #a1bbdc"
+      borderTop: `1px solid ${w.SEPARATOR}`
     }
   }
-), be = 80, Y = 34, Ne = ({
-  steps: e,
-  title: n,
-  className: o,
+), p1 = [
+  "failed",
+  "invalid",
+  "cancelled",
+  "validating",
+  "running",
+  "finished",
+  "skipped",
+  "pending"
+], Xt = (t) => {
+  const e = [
+    ...new Set(t.filter((n) => n != null))
+  ];
+  if (e.length !== 0) {
+    for (const n of p1)
+      if (e.includes(n)) return n;
+    return e[0];
+  }
+}, Kt = (t, e) => !e || t == null ? w.NAVY : Ct[t], h1 = (t, e, n = w.NAVY) => t == null ? n : e?.[t] ?? Ct[t], f1 = (t, e = w.NAVY) => ({
+  statusLine: (n) => h1(n, t, e)
+}), pt = (t) => {
+  if ("status" in t && t.status != null) return t.status;
+  const e = t.steps;
+  if (e?.[0]?.status != null) return e[0].status;
+}, g1 = 80, ct = 34, qt = ({
+  steps: t,
+  title: e,
+  className: n,
   onDeleteTrigger: i,
-  onAddTrigger: r,
-  onSelectStep: c,
-  onUpdateFilter: a,
-  onCenterYUpdate: d
+  onAddTrigger: s,
+  onSelectStep: l,
+  onUpdateFilter: d,
+  onCenterYUpdate: p,
+  debuggerMode: c = !1,
+  resolveCurveStrokeColor: r,
+  isAdmin: h = !1
 }) => {
-  const s = $(null), l = $([]), [f, b] = E([]), [x, v] = E({ width: 0, height: 0 }), [m, p] = E(!1), [w, y] = E(!1), _ = $(null);
-  q(() => {
-    const h = () => {
-      if (!s.current) return;
-      const g = [];
-      if (l.current.forEach((M, B) => {
-        if (M && s.current) {
-          const H = s.current.getBoundingClientRect(), O = M.getBoundingClientRect();
-          g.push({
-            localId: e[B]?.localId ?? `step-${B}`,
-            top: O.top - H.top,
-            right: O.right - H.left,
-            centerY: O.top - H.top + O.height / 2
+  const m = B(null), x = B([]), [C, N] = M([]), [b, g] = M({ width: 0, height: 0 }), [f, E] = M(!1), [u, a] = M(!1), _ = B(null);
+  nt(() => {
+    const y = () => {
+      if (!m.current) return;
+      const P = [];
+      if (x.current.forEach((S, k) => {
+        if (S && m.current) {
+          const V = m.current.getBoundingClientRect(), A = S.getBoundingClientRect();
+          P.push({
+            localId: t[k]?.localId ?? `step-${k}`,
+            top: A.top - V.top,
+            right: A.right - V.left,
+            centerY: A.top - V.top + A.height / 2
           });
         }
-      }), b(g), s.current && g.length > 0) {
-        const M = s.current.getBoundingClientRect(), B = Math.min(...g.map((W) => W.top)), H = l.current.filter(Boolean).map((W) => W?.offsetHeight || 68), O = Math.max(
-          ...g.map((W, I1) => W.top + (H[I1] || 68))
-        ), U = Math.max(...g.map((W) => W.right)) + 0, e1 = Math.max(
-          M.height,
-          O - B + 100
+      }), N(P), m.current && P.length > 0) {
+        const S = m.current.getBoundingClientRect(), k = Math.min(...P.map((z) => z.top)), V = x.current.filter(Boolean).map((z) => z?.offsetHeight || 68), A = Math.max(
+          ...P.map((z, ae) => z.top + (V[ae] || 68))
+        ), _t = Math.max(...P.map((z) => z.right)) + 0, xt = Math.max(
+          S.height,
+          A - k + 100
         );
-        v({
-          width: U,
-          height: e1
+        g({
+          width: _t,
+          height: xt
         });
       }
     };
-    return h(), window.addEventListener("resize", h), () => window.removeEventListener("resize", h);
-  }, [e]), q(() => {
-    let h = !0;
-    if (m) {
+    return y(), window.addEventListener("resize", y), () => window.removeEventListener("resize", y);
+  }, [t]), nt(() => {
+    let y = !0;
+    if (f) {
       _.current && (clearTimeout(_.current), _.current = null);
-      const g = setTimeout(() => {
-        h && y(!0);
+      const P = setTimeout(() => {
+        y && a(!0);
       }, 0);
       return () => {
-        h = !1, clearTimeout(g);
+        y = !1, clearTimeout(P);
       };
     }
     return _.current = setTimeout(() => {
-      h && y(!1);
+      y && a(!1);
     }, 140), () => {
-      h = !1, _.current && (clearTimeout(_.current), _.current = null);
+      y = !1, _.current && (clearTimeout(_.current), _.current = null);
     };
-  }, [m]);
-  const u = f.length > 0 ? be : 0, I = S(() => f.length > 1 ? f.reduce((h, g) => h + g.top + Y, 0) / f.length : f.length === 1 ? f[0].top + Y : 0, [f]);
-  if (q(() => {
-    d?.(I);
-  }, [I, d]), e.length === 0)
-    return /* @__PURE__ */ C("div", { className: `${P.trigger} ${o || ""}`, children: [
-      n && /* @__PURE__ */ t("h3", { className: P.title, children: n }),
-      /* @__PURE__ */ t("div", { className: P.empty, children: "No steps" })
+  }, [f]);
+  const I = C.length > 0 ? g1 : 0, L = $(() => C.length > 1 ? C.reduce((y, P) => y + P.top + ct, 0) / C.length : C.length === 1 ? C[0].top + ct : 0, [C]);
+  nt(() => {
+    p?.(L);
+  }, [L, p]);
+  const O = gt();
+  if (t.length === 0)
+    return /* @__PURE__ */ v("div", { className: `${D.trigger} ${n || ""}`, children: [
+      e && /* @__PURE__ */ o("h3", { className: D.title, children: e }),
+      /* @__PURE__ */ o("div", { className: D.empty, children: "No steps" })
     ] });
-  const L = (h, g, M, B) => {
-    const H = M - h, O = Math.min(H * 0.6, 60), d1 = h + O, U = g, e1 = M - O;
-    return `M ${h} ${g} C ${d1} ${U}, ${e1} ${B}, ${M} ${B}`;
+  const F = (y, P, S, k) => {
+    const V = S - y, A = Math.min(V * 0.6, 60), lt = y + A, _t = P, xt = S - A;
+    return `M ${y} ${P} C ${lt} ${_t}, ${xt} ${k}, ${S} ${k}`;
   };
-  return /* @__PURE__ */ C("div", { className: `${P.trigger} ${o || ""}`, ref: s, children: [
-    n && /* @__PURE__ */ t("h3", { className: P.title, children: n }),
-    /* @__PURE__ */ C("div", { className: P.triggerContainer, children: [
-      /* @__PURE__ */ t("div", { className: P.stepsContainer, children: e.map((h, g) => /* @__PURE__ */ t(
+  return /* @__PURE__ */ v("div", { className: `${D.trigger} ${n || ""}`, ref: m, children: [
+    e && /* @__PURE__ */ o("h3", { className: D.title, children: e }),
+    /* @__PURE__ */ v("div", { className: D.triggerContainer, children: [
+      /* @__PURE__ */ o("div", { className: D.stepsContainer, children: t.map((y, P) => /* @__PURE__ */ o(
         "div",
         {
-          ref: (M) => {
-            l.current[g] = M;
+          ref: (S) => {
+            x.current[P] = S;
           },
-          children: /* @__PURE__ */ t(
-            s1,
+          children: /* @__PURE__ */ o(
+            rt,
             {
-              title: h.title,
-              className: P.stepItem,
-              localId: h.localId,
-              idx: g,
-              isSet: h.isSet,
-              isSelected: h.isSelected,
-              isInvalid: h.isInvalid,
-              isFilter: h.isFilter,
-              icon: h.icon,
-              onSelectStep: c,
-              onUpdateFilter: a,
-              contextMenuItems: [
+              title: y.title,
+              className: D.stepItem,
+              localId: y.localId,
+              idx: P,
+              isSet: y.isSet,
+              isSelected: y.isSelected,
+              isInvalid: y.isInvalid,
+              isFilter: y.isFilter,
+              status: y.status,
+              debuggerMode: c,
+              icon: y.icon,
+              onSelectStep: l,
+              onUpdateFilter: d,
+              onCheckScenario: () => {
+                throw new Error("Check scenario not handled in Trigger");
+              },
+              contextMenuItems: h ? [
+                {
+                  label: "Add Step Filter",
+                  icon: /* @__PURE__ */ o("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ o(It, {}) }),
+                  command: (S) => {
+                    S?.originalEvent?.stopPropagation(), d && d(y.localId);
+                  },
+                  template: O
+                },
                 {
                   label: "Delete",
-                  icon: /* @__PURE__ */ t(J, { className: "mr-2", color: "#3B64A0", size: 18 }),
+                  icon: /* @__PURE__ */ o(ht, { className: "mr-2", color: w.NAVY, size: 18 }),
                   command: () => {
-                    i?.(h.localId);
+                    i?.(y.localId);
                   },
-                  disabled: e.length === 1
+                  disabled: t.length === 1
                 },
                 {
                   label: "",
-                  template: () => /* @__PURE__ */ t(Ie, {})
+                  template: () => /* @__PURE__ */ o(u1, {})
                 },
                 {
                   label: "Add More Triggers",
-                  icon: /* @__PURE__ */ t(X1, { className: "mr-2", color: "#3B64A0", size: 18 }),
+                  icon: /* @__PURE__ */ o(Me, { className: "mr-2", color: w.NAVY, size: 18 }),
                   command: () => {
-                    r?.();
+                    s?.();
                   }
                 }
-              ]
+              ] : []
             }
           )
         },
-        h.localId
+        y.localId
       )) }),
-      /* @__PURE__ */ t("div", { style: { position: "relative" }, children: f.length > 1 && /* @__PURE__ */ t(
+      /* @__PURE__ */ o("div", { style: { position: "relative" }, children: C.length > 1 && /* @__PURE__ */ o(
         "svg",
         {
-          className: P.curvesSvg,
-          width: x.width,
-          height: x.height,
-          children: f.map((h) => {
-            const M = f.length === 1 ? f[0].top + Y : h.top + Y;
-            return /* @__PURE__ */ t(
+          className: D.curvesSvg,
+          width: b.width,
+          height: b.height,
+          children: C.map((y) => {
+            const S = C.length === 1 ? C[0].top + ct : y.top + ct, k = I, V = L, A = t.find(
+              (lt) => lt.localId === y.localId
+            )?.status;
+            return /* @__PURE__ */ o(
               "path",
               {
-                d: L(0, M, u, I),
-                stroke: "#3b64a0",
+                d: F(0, S, k, V),
+                stroke: r != null ? r(A) : Kt(A, c),
                 strokeWidth: "2",
                 fill: "none",
                 strokeLinecap: "round"
               },
-              h.localId
+              y.localId
             );
           })
         }
       ) }),
-      f.length > 1 ? /* @__PURE__ */ C("div", { style: { position: "relative", marginRight: "140px" }, children: [
-        /* @__PURE__ */ t(
+      C.length > 1 ? /* @__PURE__ */ v("div", { style: { position: "relative", marginRight: "140px" }, children: [
+        /* @__PURE__ */ o(
           "div",
           {
-            className: P.centralNode,
+            className: D.centralNode,
             style: {
-              "--node-x": `${u}px`,
-              "--node-y": `${I}px`
+              "--node-x": `${I}px`,
+              "--node-y": `${L}px`
             },
-            onMouseEnter: () => p(!0),
-            onMouseLeave: () => p(!1),
-            children: w ? /* @__PURE__ */ t(
+            onMouseEnter: () => E(!0),
+            onMouseLeave: () => E(!1),
+            children: u ? /* @__PURE__ */ o(
               "div",
               {
-                className: `${P.iconWrapper} ${m ? P.fadeIn : P.fadeOut}`,
-                onClick: r,
-                children: /* @__PURE__ */ t(le, {})
+                className: `${D.iconWrapper} ${f ? D.fadeIn : D.fadeOut}`,
+                onClick: s,
+                children: /* @__PURE__ */ o(Xe, {})
               }
             ) : null
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ o(
           "div",
           {
-            className: P.operationContainer,
+            className: D.operationContainer,
             style: {
-              "--op-x": `${u + 16}px`,
-              "--op-y": `${I}px`
+              "--op-x": `${I + 16}px`,
+              "--op-y": `${L}px`
             },
-            children: /* @__PURE__ */ t(de, {})
+            children: /* @__PURE__ */ o(Je, {})
           }
         )
       ] }) : null
     ] })
   ] });
-};
-function ke(e) {
-  return V({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "circle", attr: { cx: "12", cy: "12", r: "4" }, child: [] }, { tag: "line", attr: { x1: "1.05", y1: "12", x2: "7", y2: "12" }, child: [] }, { tag: "line", attr: { x1: "17.01", y1: "12", x2: "22.96", y2: "12" }, child: [] }] })(e);
-}
-function Be(e) {
-  return V({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polygon", attr: { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }, child: [] }] })(e);
-}
-const Me = () => /* @__PURE__ */ C(
+}, m1 = () => /* @__PURE__ */ v(
   "svg",
   {
     width: "24",
@@ -705,301 +805,372 @@ const Me = () => /* @__PURE__ */ C(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         "path",
         {
           d: "M6 12L18 12",
-          stroke: "#3B64A0",
+          stroke: w.NAVY,
           strokeWidth: "2",
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         "path",
         {
           d: "M12 6V18",
-          stroke: "#3B64A0",
+          stroke: w.NAVY,
           strokeWidth: "2",
           strokeLinecap: "round"
         }
       )
     ]
   }
-), Pe = "_stepLinkIcon_18u2g_1", Le = "_stepLinkLine_18u2g_15", Ee = "_stepLinkContainer_18u2g_39", A = {
-  stepLinkIcon: Pe,
-  stepLinkLine: Le,
-  stepLinkContainer: Ee
-}, Z = ({
-  onAddStep: e,
-  onAddTrigger: n,
-  onAddCondition: o,
+), C1 = "_stepLinkIcon_b0452_1", v1 = "_stepLinkLine_b0452_15", _1 = "_stepLinkContainer_b0452_39", x1 = "_readOnly_b0452_61", I1 = "_debuggerIconCollapsed_b0452_66", w1 = "_dashedLine_b0452_75", j = {
+  stepLinkIcon: C1,
+  stepLinkLine: v1,
+  stepLinkContainer: _1,
+  readOnly: x1,
+  debuggerIconCollapsed: I1,
+  dashedLine: w1
+}, tt = ({
+  onAddStep: t,
+  onAddTrigger: e,
+  onAddCondition: n,
   onAddLoop: i,
-  stepId: r,
+  iteratorEnabled: s = !0,
+  conditionsEnabled: l = !0,
+  lineColor: d = w.NAVY,
+  stepId: p,
   index: c = 0,
-  style: a,
-  pathId: d
+  style: r,
+  pathId: h
 }) => {
-  const s = i1(), l = $(null), f = [
+  const m = gt(), x = B(null), C = [
     ...c > 0 ? [
       {
         label: "Trigger",
-        icon: /* @__PURE__ */ t(Be, { color: "#3B64A0", size: 18 }),
+        icon: /* @__PURE__ */ o(Ue, { color: w.NAVY, size: 18 }),
         command: () => {
-          n?.(r, d, "trigger");
+          e?.(p, h, "trigger");
         },
-        template: s
+        template: m
       }
     ] : [],
     {
       label: "Step",
-      icon: /* @__PURE__ */ t(ke, { color: "#3B64A0", size: 18 }),
-      command: () => e?.(r, d, "append"),
-      template: s
+      icon: /* @__PURE__ */ o(Ze, { color: w.NAVY, size: 18 }),
+      command: () => t?.(p, h, c > 0 ? "append" : "prepend"),
+      template: m
     },
-    ...r ? [
+    ...l && p != null ? [
       {
         label: "Condition",
-        icon: /* @__PURE__ */ t(ie, { width: 18, height: 18 }),
-        command: () => o?.(r, d, "append"),
-        template: s
-      },
+        icon: /* @__PURE__ */ o(Ve, { width: 18, height: 18 }),
+        command: () => n?.(
+          p,
+          h,
+          c > 0 ? "append" : "prepend"
+        ),
+        template: m
+      }
+    ] : [],
+    ...s ? [
       {
         label: "Loop",
-        icon: /* @__PURE__ */ t(re, { width: 18, height: 18 }),
-        command: () => i?.(r, d, "append"),
-        template: s
+        icon: /* @__PURE__ */ o(ze, { width: 18, height: 18 }),
+        command: () => i?.(p, h, c > 0 ? "append" : "prepend"),
+        template: m
       }
     ] : []
-  ], b = (x) => {
-    l.current?.show(x);
+  ], N = (b) => {
+    x.current?.show(b);
   };
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ v(
     "div",
     {
-      className: A.stepLinkContainer,
-      style: { ...a },
+      className: j.stepLinkContainer,
+      style: { ...r, "--step-link-color": d },
       "data-plus-index": c,
       children: [
-        /* @__PURE__ */ t("div", { className: A.stepLinkLine }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ o("div", { className: j.stepLinkLine }),
+        /* @__PURE__ */ o(
           "div",
           {
-            className: A.stepLinkIcon,
-            onClick: b,
+            className: j.stepLinkIcon,
+            onClick: N,
             "aria-haspopup": !0,
-            children: /* @__PURE__ */ t(Me, {})
+            children: /* @__PURE__ */ o(m1, {})
           }
         ),
-        /* @__PURE__ */ t(Q, { model: f, popup: !0, ref: l }),
-        /* @__PURE__ */ t("div", { className: A.stepLinkLine })
+        /* @__PURE__ */ o(ft, { model: C, popup: !0, ref: x }),
+        /* @__PURE__ */ o("div", { className: j.stepLinkLine })
       ]
     }
   );
-}, $e = "_steps_yug55_1", Te = "_stepContainer_yug55_8", Oe = "_stepContainerWithPaths_yug55_14", t1 = {
-  steps: $e,
-  stepContainer: Te,
-  stepContainerWithPaths: Oe
-}, Se = (e, n, o, i) => {
-  const r = o - e, c = Math.min(r * 0.66, 66), a = e + c, d = n, s = o - c;
-  return `M ${e} ${n} C ${a} ${d}, ${s} ${i}, ${o} ${i}`;
-}, He = ({
-  width: e,
-  height: n
+}, y1 = "_steps_yug55_1", N1 = "_stepContainer_yug55_8", b1 = "_stepContainerWithPaths_yug55_14", ot = {
+  steps: y1,
+  stepContainer: N1,
+  stepContainerWithPaths: b1
+}, L1 = (t, e, n, i) => {
+  const s = n - t, l = Math.min(s * 0.66, 66), d = t + l, p = e, c = n - l;
+  return `M ${t} ${e} C ${d} ${p}, ${c} ${i}, ${n} ${i}`;
+}, wt = ({
+  width: t,
+  height: e,
+  strokeColor: n = w.NAVY,
+  fromLocalId: i,
+  toLocalId: s
 }) => {
-  const a = Se(0, 1, e, n);
-  return /* @__PURE__ */ t("div", { style: { position: "absolute" }, children: /* @__PURE__ */ t(
-    "svg",
+  const l = mt(n), h = L1(0, 1, t, e);
+  return /* @__PURE__ */ o(
+    "div",
     {
-      width: e,
-      height: n + 1,
-      viewBox: `0 0 ${e} ${n + 1}`,
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ t(
-        "path",
+      style: { position: "absolute" },
+      "data-connector-from": void 0,
+      "data-connector-to": void 0,
+      children: /* @__PURE__ */ o(
+        "svg",
         {
-          d: a,
-          stroke: "#3b64a0",
-          strokeWidth: "2",
-          fill: "none",
-          strokeLinecap: "round"
+          width: t,
+          height: e + 1,
+          viewBox: `0 0 ${t} ${e + 1}`,
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ o(
+            "path",
+            {
+              d: h,
+              stroke: n,
+              strokeWidth: l ? 3 : 2,
+              fill: "none",
+              strokeLinecap: "round",
+              strokeDasharray: l ? "0 6" : void 0,
+              "data-connector-from": void 0,
+              "data-connector-to": void 0
+            }
+          )
         }
       )
     }
-  ) });
-}, We = "_column_1uiy3_1", ze = "_row_1uiy3_19", Re = "_stepsContainer_1uiy3_24", F = {
-  column: We,
-  row: ze,
-  stepsContainer: Re
-}, je = "_wrapper_1nl2d_1", De = "_tooltip_1nl2d_5", C1 = {
-  wrapper: je,
-  tooltip: De
-}, Ze = ({
-  content: e,
-  children: n,
-  maxWidth: o = 500,
+  );
+}, S1 = "_column_1uiy3_1", T1 = "_row_1uiy3_19", P1 = "_stepsContainer_1uiy3_24", H = {
+  column: S1,
+  row: T1,
+  stepsContainer: P1
+}, k1 = "_wrapper_1nl2d_1", E1 = "_tooltip_1nl2d_5", At = {
+  wrapper: k1,
+  tooltip: E1
+}, R1 = ({
+  content: t,
+  children: e,
+  maxWidth: n = 500,
   className: i
-}) => /* @__PURE__ */ C(
+}) => /* @__PURE__ */ v(
   "div",
   {
-    className: `${C1.wrapper} ${i ?? ""}`.trim(),
-    style: { "--tooltip-max-width": `${o}px` },
+    className: `${At.wrapper} ${i ?? ""}`.trim(),
+    style: { "--tooltip-max-width": `${n}px` },
     children: [
-      n,
-      e ? /* @__PURE__ */ t("div", { className: C1.tooltip, role: "tooltip", children: e }) : null
+      e,
+      t ? /* @__PURE__ */ o("div", { className: At.tooltip, role: "tooltip", children: t }) : null
     ]
   }
-), Ve = "_conditionContainer_5kl8s_1", Fe = "_connectorLine_5kl8s_6", qe = "_conditionWrapper_5kl8s_12", Ye = "_condition_5kl8s_1", Ae = "_connectorDot_5kl8s_43", j = {
-  conditionContainer: Ve,
-  connectorLine: Fe,
-  conditionWrapper: qe,
-  condition: Ye,
-  connectorDot: Ae
-}, Xe = ({
-  expression: e,
-  style: n
+), M1 = "_conditionContainer_19jfz_1", O1 = "_debuggerTint_19jfz_5", $1 = "_connectorLine_19jfz_5", D1 = "_connectorDot_19jfz_8", B1 = "_condition_19jfz_1", F1 = "_conditionWrapper_19jfz_15", A1 = "_conditionFits_19jfz_67", Y = {
+  conditionContainer: M1,
+  debuggerTint: O1,
+  connectorLine: $1,
+  connectorDot: D1,
+  condition: B1,
+  conditionWrapper: F1,
+  conditionFits: A1
+}, vt = ({
+  expression: t,
+  style: e,
+  status: n,
+  debuggerMode: i = !1
 }) => {
-  const o = $(null), [i, r] = E(!1);
-  M1(() => {
-    const a = o.current;
-    a && r(a.scrollHeight > a.clientHeight);
-  }, [e]);
-  const c = e && i ? e : "";
-  return /* @__PURE__ */ C("div", { className: j.conditionContainer, style: n, children: [
-    /* @__PURE__ */ t("div", { className: j.connectorLine }),
-    /* @__PURE__ */ t(Ze, { content: c, className: j.conditionWrapper, children: /* @__PURE__ */ t("div", { ref: o, className: j.condition, children: e }) }),
-    /* @__PURE__ */ t("div", { className: j.connectorLine }),
-    /* @__PURE__ */ t("div", { className: j.connectorDot })
-  ] });
-}, Ge = "data:image/svg+xml,%3csvg%20width='44'%20height='44'%20viewBox='0%200%2044%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='21.8125'%20y='-2.52539'%20width='34.4207'%20height='34.4207'%20rx='6.09524'%20transform='rotate(45%2021.8125%20-2.52539)'%20fill='%236B90C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M31.3947%2013.0355C31.4679%2013.1085%2031.526%2013.1952%2031.5656%2013.2907C31.6052%2013.3861%2031.6256%2013.4885%2031.6256%2013.5918C31.6256%2013.6952%2031.6052%2013.7975%2031.5656%2013.8929C31.526%2013.9884%2031.4679%2014.0751%2031.3947%2014.1481L14.109%2031.4338C13.9615%2031.5813%2013.7614%2031.6642%2013.5527%2031.6642C13.3441%2031.6642%2013.144%2031.5813%2012.9965%2031.4338C12.8489%2031.2863%2012.766%2031.0862%2012.766%2030.8775C12.766%2030.6689%2012.8489%2030.4688%2012.9965%2030.3212L30.2822%2013.0355C30.3552%2012.9623%2030.4419%2012.9043%2030.5373%2012.8647C30.6328%2012.8251%2030.7351%2012.8047%2030.8385%2012.8047C30.9418%2012.8047%2031.0441%2012.8251%2031.1396%2012.8647C31.2351%2012.9043%2031.3218%2012.9623%2031.3947%2013.0355Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.9965%2013.0355C12.9233%2013.1085%2012.8652%2013.1952%2012.8256%2013.2907C12.786%2013.3861%2012.7656%2013.4885%2012.7656%2013.5918C12.7656%2013.6952%2012.786%2013.7975%2012.8256%2013.8929C12.8652%2013.9884%2012.9233%2014.0751%2012.9965%2014.1481L30.2822%2031.4338C30.4297%2031.5813%2030.6298%2031.6642%2030.8385%2031.6642C31.0471%2031.6642%2031.2472%2031.5813%2031.3947%2031.4338C31.5423%2031.2863%2031.6252%2031.0862%2031.6252%2030.8775C31.6252%2030.6689%2031.5423%2030.4688%2031.3947%2030.3212L14.109%2013.0355C14.036%2012.9623%2013.9493%2012.9043%2013.8539%2012.8647C13.7584%2012.8251%2013.6561%2012.8047%2013.5527%2012.8047C13.4494%2012.8047%2013.3471%2012.8251%2013.2516%2012.8647C13.1561%2012.9043%2013.0694%2012.9623%2012.9965%2013.0355Z'%20fill='white'/%3e%3c/svg%3e", Ke = "data:image/svg+xml,%3csvg%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20fill='white'/%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20stroke='%236B90C0'%20stroke-width='2'/%3e%3ccircle%20cx='14'%20cy='14'%20r='6'%20fill='%236B90C0'/%3e%3c/svg%3e", Je = "_ifStatement_1xsn9_1", Qe = "_conditionIcon_1xsn9_7", Ue = "_ifStatementContainer_1xsn9_21", et = "_menuButton_1xsn9_27", tt = "_menuIcon_1xsn9_52", nt = "_ifdotIcon_1xsn9_59", R = {
-  ifStatement: Je,
-  conditionIcon: Qe,
-  ifStatementContainer: Ue,
-  menuButton: et,
-  menuIcon: tt,
-  ifdotIcon: nt
-}, ot = ({ style: e }) => /* @__PURE__ */ t(
+  const s = B(null), l = B(null), [d, p] = M(!1);
+  pe(() => {
+    const C = s.current, N = l.current;
+    if (!C || !N) return;
+    const { paddingLeft: b, paddingRight: g } = getComputedStyle(C), f = Number.parseFloat(b) + Number.parseFloat(g);
+    p(N.offsetWidth >= C.clientWidth - f);
+  }, [t]);
+  const c = t && d ? t : "", r = i && n != null, h = $(() => {
+    if (!r || n == null) return;
+    const C = n === "finished";
+    return {
+      "--condition-accent": Ct[n],
+      "--condition-bg": He[n],
+      ...C && {
+        "--condition-line-width": "3px",
+        "--condition-line-style": "dotted"
+      }
+    };
+  }, [r, n]), m = `${Y.condition} ${d ? "" : Y.conditionFits}`.trim(), x = `${Y.conditionContainer} ${r ? Y.debuggerTint : ""}`.trim();
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: x,
+      style: { ...e, ...h },
+      children: [
+        /* @__PURE__ */ o("div", { className: Y.connectorLine }),
+        /* @__PURE__ */ o(R1, { content: c, className: Y.conditionWrapper, children: /* @__PURE__ */ o("div", { ref: s, className: m, children: /* @__PURE__ */ o("span", { ref: l, children: t }) }) }),
+        /* @__PURE__ */ o("div", { className: Y.connectorLine }),
+        /* @__PURE__ */ o("div", { className: Y.connectorDot })
+      ]
+    }
+  );
+}, j1 = "data:image/svg+xml,%3csvg%20width='44'%20height='44'%20viewBox='0%200%2044%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='21.8125'%20y='-2.52539'%20width='34.4207'%20height='34.4207'%20rx='6.09524'%20transform='rotate(45%2021.8125%20-2.52539)'%20fill='%236B90C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M31.3947%2013.0355C31.4679%2013.1085%2031.526%2013.1952%2031.5656%2013.2907C31.6052%2013.3861%2031.6256%2013.4885%2031.6256%2013.5918C31.6256%2013.6952%2031.6052%2013.7975%2031.5656%2013.8929C31.526%2013.9884%2031.4679%2014.0751%2031.3947%2014.1481L14.109%2031.4338C13.9615%2031.5813%2013.7614%2031.6642%2013.5527%2031.6642C13.3441%2031.6642%2013.144%2031.5813%2012.9965%2031.4338C12.8489%2031.2863%2012.766%2031.0862%2012.766%2030.8775C12.766%2030.6689%2012.8489%2030.4688%2012.9965%2030.3212L30.2822%2013.0355C30.3552%2012.9623%2030.4419%2012.9043%2030.5373%2012.8647C30.6328%2012.8251%2030.7351%2012.8047%2030.8385%2012.8047C30.9418%2012.8047%2031.0441%2012.8251%2031.1396%2012.8647C31.2351%2012.9043%2031.3218%2012.9623%2031.3947%2013.0355Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.9965%2013.0355C12.9233%2013.1085%2012.8652%2013.1952%2012.8256%2013.2907C12.786%2013.3861%2012.7656%2013.4885%2012.7656%2013.5918C12.7656%2013.6952%2012.786%2013.7975%2012.8256%2013.8929C12.8652%2013.9884%2012.9233%2014.0751%2012.9965%2014.1481L30.2822%2031.4338C30.4297%2031.5813%2030.6298%2031.6642%2030.8385%2031.6642C31.0471%2031.6642%2031.2472%2031.5813%2031.3947%2031.4338C31.5423%2031.2863%2031.6252%2031.0862%2031.6252%2030.8775C31.6252%2030.6689%2031.5423%2030.4688%2031.3947%2030.3212L14.109%2013.0355C14.036%2012.9623%2013.9493%2012.9043%2013.8539%2012.8647C13.7584%2012.8251%2013.6561%2012.8047%2013.5527%2012.8047C13.4494%2012.8047%2013.3471%2012.8251%2013.2516%2012.8647C13.1561%2012.9043%2013.0694%2012.9623%2012.9965%2013.0355Z'%20fill='white'/%3e%3c/svg%3e", W1 = "data:image/svg+xml,%3csvg%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20fill='white'/%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20stroke='%236B90C0'%20stroke-width='2'/%3e%3ccircle%20cx='14'%20cy='14'%20r='6'%20fill='%236B90C0'/%3e%3c/svg%3e", H1 = "data:image/svg+xml,%3csvg%20width='44'%20height='44'%20viewBox='0%200%2044%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='21.8125'%20y='-2.52539'%20width='34.4207'%20height='34.4207'%20rx='6.09524'%20transform='rotate(45%2021.8125%20-2.52539)'%20fill='%2317A34A'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M31.3947%2013.0355C31.4679%2013.1085%2031.526%2013.1952%2031.5656%2013.2907C31.6052%2013.3861%2031.6256%2013.4885%2031.6256%2013.5918C31.6256%2013.6952%2031.6052%2013.7975%2031.5656%2013.8929C31.526%2013.9884%2031.4679%2014.0751%2031.3947%2014.1481L14.109%2031.4338C13.9615%2031.5813%2013.7614%2031.6642%2013.5527%2031.6642C13.3441%2031.6642%2013.144%2031.5813%2012.9965%2031.4338C12.8489%2031.2863%2012.766%2031.0862%2012.766%2030.8775C12.766%2030.6689%2012.8489%2030.4688%2012.9965%2030.3212L30.2822%2013.0355C30.3552%2012.9623%2030.4419%2012.9043%2030.5373%2012.8647C30.6328%2012.8251%2030.7351%2012.8047%2030.8385%2012.8047C30.9418%2012.8047%2031.0441%2012.8251%2031.1396%2012.8647C31.2351%2012.9043%2031.3218%2012.9623%2031.3947%2013.0355Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.9965%2013.0355C12.9233%2013.1085%2012.8652%2013.1952%2012.8256%2013.2907C12.786%2013.3861%2012.7656%2013.4885%2012.7656%2013.5918C12.7656%2013.6952%2012.786%2013.7975%2012.8256%2013.8929C12.8652%2013.9884%2012.9233%2014.0751%2012.9965%2014.1481L30.2822%2031.4338C30.4297%2031.5813%2030.6298%2031.6642%2030.8385%2031.6642C31.0471%2031.6642%2031.2472%2031.5813%2031.3947%2031.4338C31.5423%2031.2863%2031.6252%2031.0862%2031.6252%2030.8775C31.6252%2030.6689%2031.5423%2030.4688%2031.3947%2030.3212L14.109%2013.0355C14.036%2012.9623%2013.9493%2012.9043%2013.8539%2012.8647C13.7584%2012.8251%2013.6561%2012.8047%2013.5527%2012.8047C13.4494%2012.8047%2013.3471%2012.8251%2013.2516%2012.8647C13.1561%2012.9043%2013.0694%2012.9623%2012.9965%2013.0355Z'%20fill='white'/%3e%3c/svg%3e", V1 = "data:image/svg+xml,%3csvg%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20fill='white'/%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20stroke='%2317A34A'%20stroke-width='2'/%3e%3ccircle%20cx='14'%20cy='14'%20r='6'%20fill='%2317A34A'/%3e%3c/svg%3e", z1 = "_ifStatement_xtij3_1", Y1 = "_conditionIcon_xtij3_7", G1 = "_ifStatementContainer_xtij3_21", Z1 = "_menuButton_xtij3_27", U1 = "_menuIcon_xtij3_52", X1 = "_ifdotIcon_xtij3_59", Z = {
+  ifStatement: z1,
+  conditionIcon: Y1,
+  ifStatementContainer: G1,
+  menuButton: Z1,
+  menuIcon: U1,
+  ifdotIcon: X1
+}, K1 = ({
+  style: t,
+  color: e = w.NAVY
+}) => /* @__PURE__ */ o(
   "div",
   {
     style: {
       width: "100%",
       height: "2px",
-      borderTop: "2px solid #3B64A0",
-      ...e
+      borderTop: X(e),
+      ...t
     }
   }
-), it = ({
-  onEdit: e,
-  onDelete: n,
-  onSelect: o
-}) => {
-  const i = $(null), { openMenu: r, closeMenu: c } = r1(), a = S(
+), Jt = (t) => {
+  const {
+    enabled: e = !0,
+    onDelete: n,
+    onSelect: i,
+    debuggerMode: s = !1,
+    status: l
+  } = t, d = B(null), { openMenu: p, closeMenu: c } = Lt(), r = e && !s, h = s && l === "finished", m = Kt(l, s), x = h ? H1 : j1, C = h ? V1 : W1, N = $(
     () => [
       {
         label: "Edit",
-        icon: /* @__PURE__ */ t(G1, { color: "#3B64A0", size: 18 }),
-        command: () => e?.()
+        icon: /* @__PURE__ */ o(Zt, { color: w.NAVY, size: 18 }),
+        command: () => i?.()
       },
       {
         label: "Delete",
-        icon: /* @__PURE__ */ t(J, { color: "#3B64A0", size: 18 }),
+        icon: /* @__PURE__ */ o(ht, { color: w.NAVY, size: 18 }),
         command: () => n?.()
       }
     ],
-    [e, n]
-  ), d = (l) => {
-    l.stopPropagation(), r(i, l);
-  }, s = (l) => {
-    l.target.closest(`.${R.menuButton}`) || o?.();
+    [i, n]
+  ), b = (f) => {
+    f.stopPropagation(), p(d, f);
+  }, g = (f) => {
+    f.target.closest(`.${Z.menuButton}`) || i?.();
   };
-  return /* @__PURE__ */ C("div", { className: R.ifStatementContainer, children: [
-    /* @__PURE__ */ t(
-      ot,
+  return /* @__PURE__ */ v("div", { className: Z.ifStatementContainer, children: [
+    /* @__PURE__ */ o(
+      K1,
       {
+        color: m,
         style: { position: "absolute", top: "22.5px", left: 0, zIndex: 1 }
       }
     ),
-    /* @__PURE__ */ t("div", { className: R.ifStatement, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ o("div", { className: Z.ifStatement, children: /* @__PURE__ */ o(
       "img",
       {
-        src: Ge,
+        src: x,
         alt: "condition",
-        onClick: (l) => s(l),
-        className: R.conditionIcon
+        onClick: (f) => g(f),
+        className: Z.conditionIcon
       }
     ) }),
-    /* @__PURE__ */ t(
-      "button",
-      {
-        type: "button",
-        className: R.menuButton,
-        onClick: d,
-        "aria-label": "Open menu",
-        "aria-haspopup": "menu",
-        children: /* @__PURE__ */ t(K, { className: R.menuIcon })
-      }
-    ),
-    /* @__PURE__ */ t(
-      Q,
-      {
-        ref: i,
-        model: a,
-        popup: !0,
-        onHide: () => c(i)
-      }
-    ),
-    /* @__PURE__ */ t("img", { src: Ke, alt: "ifdot", className: R.ifdotIcon })
+    r && /* @__PURE__ */ v(K, { children: [
+      /* @__PURE__ */ o(
+        "button",
+        {
+          type: "button",
+          className: Z.menuButton,
+          onClick: b,
+          "aria-label": "Open menu",
+          "aria-haspopup": "menu",
+          children: /* @__PURE__ */ o(ut, { className: Z.menuIcon, size: 16 })
+        }
+      ),
+      /* @__PURE__ */ o(
+        ft,
+        {
+          ref: d,
+          model: N,
+          popup: !0,
+          onHide: () => c(d)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("img", { src: C, alt: "ifdot", className: Z.ifdotIcon })
   ] });
-}, rt = 34.5, _1 = ({
-  items: e,
-  pathId: n,
-  onAddStep: o,
-  onAddTrigger: i,
-  onAddCondition: r,
-  onAddLoop: c,
-  onDeleteStep: a,
-  onUpdateFilter: d,
-  onSelectStep: s,
-  onResize: l
-}) => {
-  const f = $(null), b = $([]), [x, v] = E([]);
-  q(() => {
-    const p = () => {
-      if (!f.current || e.length === 0) {
-        v([]);
+}, jt = 34.5, q1 = 33, it = w.NAVY, Qt = (t) => {
+  const {
+    items: e,
+    pathId: n,
+    onAddStep: i,
+    onAddTrigger: s,
+    onAddCondition: l,
+    onAddLoop: d,
+    onDeleteStep: p,
+    onUpdateFilter: c,
+    onSelectStep: r,
+    onResize: h,
+    onCheckScenario: m,
+    iteratorEnabled: x,
+    conditionsEnabled: C
+  } = t, N = B(null), b = B([]), [g, f] = M([]);
+  nt(() => {
+    const u = () => {
+      const I = N.current;
+      if (!I || e.length === 0) {
+        f([]);
         return;
       }
-      const w = f.current.getBoundingClientRect(), y = [];
-      for (let _ = 0; _ < e.length; _++) {
-        const u = b.current[_];
-        if (u) {
-          const I = u.getBoundingClientRect();
-          y.push(I.top - w.top + rt);
-        }
+      const L = [], O = Number.parseFloat(
+        getComputedStyle(I).zoom || "1"
+      );
+      for (let F = 0; F < e.length; F++) {
+        const y = b.current[F];
+        if (y)
+          if (y.offsetParent == null) {
+            const P = I.getBoundingClientRect(), S = y.getBoundingClientRect();
+            L.push((S.top - P.top) / O + jt);
+          } else
+            L.push(y.offsetTop - q1 + jt);
       }
-      y.length === e.length && v(y);
+      L.length === e.length && f(L);
+    };
+    u();
+    const a = new ResizeObserver(u), _ = N.current;
+    return _ && a.observe(_), window.addEventListener("resize", u), () => {
+      a.disconnect(), window.removeEventListener("resize", u);
     };
-    return p(), window.addEventListener("resize", p), () => window.removeEventListener("resize", p);
   }, [e]);
-  const m = S(() => x.length !== e.length || e.length <= 1 ? null : e.map((p, w) => w).filter((p) => p > 0).map((p) => {
-    const w = x[p];
-    return w === void 0 ? null : /* @__PURE__ */ t(He, { width: 100, height: w }, p);
-  }), [e, x]);
-  return /* @__PURE__ */ C("div", { className: F.row, children: [
-    /* @__PURE__ */ t(
-      it,
+  const E = $(() => g.length !== e.length || e.length <= 1 ? null : e.map((u, a) => a).filter((u) => u > 0).map((u) => {
+    const a = g[u];
+    return a === void 0 ? null : /* @__PURE__ */ o(wt, { width: 100, height: a, strokeColor: it }, u);
+  }), [e, g]);
+  return /* @__PURE__ */ v("div", { className: H.row, children: [
+    /* @__PURE__ */ o(
+      Jt,
       {
-        onDelete: () => n != null && a?.(n),
-        onSelect: n != null && s ? () => s(n) : void 0
+        onDelete: () => n != null && p?.(n),
+        enabled: C,
+        onSelect: n != null && r ? () => r(n) : void 0
       }
     ),
-    /* @__PURE__ */ C(
+    /* @__PURE__ */ v(
       "div",
       {
-        ref: f,
-        className: F.column,
+        ref: N,
+        className: H.column,
         style: { marginTop: "33px" },
         children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ o(
             "div",
             {
               style: {
@@ -1008,91 +1179,100 @@ const Me = () => /* @__PURE__ */ C(
                 left: 0,
                 width: "100px",
                 height: "2px",
-                borderTop: "2px solid #3B64A0"
+                borderTop: `2px solid ${it}`
               }
             }
           ),
-          m
+          E
         ]
       }
     ),
-    /* @__PURE__ */ t("div", { className: F.column, children: e.map((p, w) => {
-      let y;
-      if (p.paths)
-        y = /* @__PURE__ */ t(
-          _1,
+    /* @__PURE__ */ o("div", { className: H.column, children: e.map((u, a) => {
+      let _;
+      if (u.paths)
+        _ = /* @__PURE__ */ o(
+          Qt,
           {
-            items: p.paths,
+            items: u.paths,
             pathId: n,
-            onAddStep: o,
-            onAddTrigger: i,
-            onAddCondition: r,
-            onAddLoop: c,
-            onDeleteStep: a,
-            onUpdateFilter: d,
-            onSelectStep: s,
-            onResize: l
+            onAddStep: i,
+            onAddTrigger: s,
+            onAddCondition: l,
+            onAddLoop: d,
+            onDeleteStep: p,
+            onUpdateFilter: c,
+            onSelectStep: r,
+            onResize: h,
+            onCheckScenario: m,
+            iteratorEnabled: x,
+            conditionsEnabled: C
           },
-          p.localId
+          u.localId
         );
-      else if (p.steps) {
-        const _ = p;
-        y = /* @__PURE__ */ C("div", { className: F.stepsContainer, children: [
-          /* @__PURE__ */ t(
-            Xe,
+      else if (u.steps) {
+        const I = u;
+        _ = /* @__PURE__ */ v("div", { className: H.stepsContainer, children: [
+          /* @__PURE__ */ o(
+            vt,
             {
-              expression: _.condition,
+              expression: I.condition,
+              status: I.status,
               style: { marginTop: "25px" }
             }
           ),
-          /* @__PURE__ */ t(
-            l1,
+          /* @__PURE__ */ o(
+            St,
             {
-              steps: p.steps,
-              pathId: p.localId,
-              onSelectStep: s ?? (() => {
+              steps: u.steps,
+              pathId: u.localId,
+              iteratorEnabled: x,
+              conditionsEnabled: C,
+              onSelectStep: r ?? (() => {
               }),
-              onAddStep: o ?? (() => {
+              onAddStep: i ?? (() => {
               }),
-              onAddTrigger: i,
-              onAddCondition: r ?? (() => {
+              onAddTrigger: s,
+              onAddCondition: l ?? (() => {
               }),
-              onAddLoop: c,
-              onDeleteStep: a,
-              onUpdateFilter: d,
-              onResize: l
+              onAddLoop: d,
+              onDeleteStep: p,
+              onUpdateFilter: c,
+              onResize: h,
+              onCheckScenario: m
             },
-            p.localId
+            u.localId
           )
         ] });
       } else
-        y = /* @__PURE__ */ t(
-          s1,
+        _ = /* @__PURE__ */ o(
+          rt,
           {
-            localId: p.localId,
-            title: "title" in p ? p.title : "",
+            localId: u.localId,
+            title: "title" in u ? u.title : "",
             idx: 1,
-            icon: "icon" in p ? p.icon : void 0,
-            onSelectStep: s,
-            onDeleteStep: a,
-            onUpdateFilter: d
+            icon: "icon" in u ? u.icon : void 0,
+            status: "status" in u ? u.status : void 0,
+            onSelectStep: r,
+            onDeleteStep: p,
+            onUpdateFilter: c,
+            onCheckScenario: m
           },
-          p.localId
+          u.localId
         );
-      return /* @__PURE__ */ t(
+      return /* @__PURE__ */ o(
         "div",
         {
-          ref: (_) => {
-            b.current[w] = _;
+          ref: (I) => {
+            b.current[a] = I;
           },
           style: { width: "100%" },
-          children: y
+          children: _
         },
-        p.localId
+        u.localId
       );
     }) }),
-    /* @__PURE__ */ C("div", { className: F.column, style: { marginTop: "33px" }, children: [
-      /* @__PURE__ */ t(
+    /* @__PURE__ */ v("div", { className: H.column, style: { marginTop: "33px" }, children: [
+      /* @__PURE__ */ o(
         "div",
         {
           style: {
@@ -1102,19 +1282,22 @@ const Me = () => /* @__PURE__ */ C(
             flex: 1,
             width: "100%",
             height: "2px",
-            borderTop: "2px solid #3B64A0"
+            borderTop: `2px solid ${it}`
           }
         }
       ),
-      m
+      E
     ] }),
-    /* @__PURE__ */ t(
-      Z,
+    /* @__PURE__ */ o(
+      tt,
       {
-        onAddStep: o,
-        onAddTrigger: i,
-        onAddCondition: r,
-        onAddLoop: c,
+        onAddStep: i,
+        onAddTrigger: s,
+        onAddCondition: l,
+        onAddLoop: d,
+        iteratorEnabled: x,
+        conditionsEnabled: C,
+        lineColor: it,
         stepId: n,
         pathId: n,
         index: 1,
@@ -1124,36 +1307,39 @@ const Me = () => /* @__PURE__ */ C(
         }
       }
     ),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ o(
       "div",
       {
         style: {
           flex: 1,
           width: "100%",
           height: "2px",
-          borderTop: "2px solid #3B64A0",
+          borderTop: `2px solid ${it}`,
           marginTop: "34px"
         }
       }
     )
   ] });
-}, o1 = 68, l1 = ({
-  pathId: e,
-  steps: n,
-  centerY: o,
+}, yt = 68, U = w.NAVY, St = ({
+  pathId: t,
+  steps: e,
+  centerY: n,
   className: i,
-  onAddStep: r,
-  onDeleteStep: c,
-  onUpdateFilter: a,
-  onAddTrigger: d,
-  onAddCondition: s,
-  onAddLoop: l,
-  onSelectStep: f,
-  onResize: b,
-  isDescendent: x = !0
+  iteratorEnabled: s,
+  conditionsEnabled: l,
+  onAddStep: d,
+  onDeleteStep: p,
+  onUpdateFilter: c,
+  onAddTrigger: r,
+  onAddCondition: h,
+  onAddLoop: m,
+  onSelectStep: x,
+  onResize: C,
+  onCheckScenario: N,
+  isDescendent: b = !0
 }) => {
-  const v = o === void 0 ? void 0 : { marginTop: Math.max(0, o - o1 / 2) };
-  return n.length === 0 ? /* @__PURE__ */ C(
+  const g = n === void 0 ? void 0 : { marginTop: Math.max(0, n - yt / 2) };
+  return e.length === 0 ? /* @__PURE__ */ v(
     "div",
     {
       style: {
@@ -1163,10 +1349,10 @@ const Me = () => /* @__PURE__ */ C(
         flexDirection: "row",
         flex: 1,
         minWidth: 0,
-        ...v
+        ...g
       },
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ o(
           "div",
           {
             style: {
@@ -1176,27 +1362,31 @@ const Me = () => /* @__PURE__ */ C(
               minWidth: 0,
               height: "2px",
               marginTop: "13.5px",
-              borderTop: "2px solid #3B64A0"
+              borderTop: `2px solid ${U}`
             }
           }
         ),
-        /* @__PURE__ */ t(
-          Z,
+        /* @__PURE__ */ o(
+          tt,
           {
             onAddStep: () => {
-              r?.(void 0, e);
+              d?.(void 0, t);
             },
-            onAddTrigger: d,
-            onAddCondition: s,
-            onAddLoop: l,
-            stepId: e,
+            onAddTrigger: r,
+            onAddCondition: h,
+            onAddLoop: m,
+            iteratorEnabled: s,
+            conditionsEnabled: l,
+            lineColor: U,
+            stepId: t,
             index: 0,
             style: {
-              height: "auto"
+              height: "auto",
+              marginTop: "0"
             }
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ o(
           "div",
           {
             style: {
@@ -1206,18 +1396,18 @@ const Me = () => /* @__PURE__ */ C(
               minWidth: 0,
               height: "2px",
               marginTop: "13.5px",
-              borderTop: "2px solid #3B64A0"
+              borderTop: `2px solid ${U}`
             }
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ t(
+  ) : /* @__PURE__ */ o(
     "div",
     {
-      className: t1.steps + (i ? " " + i : ""),
-      style: v,
-      children: /* @__PURE__ */ C(
+      className: ot.steps + (i ? " " + i : ""),
+      style: g,
+      children: /* @__PURE__ */ v(
         "div",
         {
           style: {
@@ -1229,115 +1419,132 @@ const Me = () => /* @__PURE__ */ C(
             alignItems: "flex-start"
           },
           children: [
-            /* @__PURE__ */ t(
-              Z,
+            /* @__PURE__ */ o(
+              tt,
               {
                 onAddStep: () => {
-                  r?.(n[0].localId, e, "prepend");
+                  d?.(e[0].localId, t, "prepend");
                 },
-                onAddTrigger: d,
-                onAddCondition: s,
-                onAddLoop: l,
-                stepId: n[0].localId,
-                pathId: e,
+                onAddTrigger: r,
+                onAddCondition: h,
+                onAddLoop: m,
+                iteratorEnabled: s,
+                conditionsEnabled: l,
+                lineColor: U,
+                stepId: e[0].localId,
+                pathId: t,
                 index: 0,
                 style: {
                   marginTop: "20px"
                 }
               }
             ),
-            n.map((m, p) => {
-              const w = !!m.paths, y = "condition" in m && typeof m.condition == "string";
+            e.map((f, E) => {
+              const u = !!f.paths, a = "condition" in f && typeof f.condition == "string";
               let _;
-              return w && m.paths ? _ = /* @__PURE__ */ t(
-                _1,
+              return u && f.paths ? _ = /* @__PURE__ */ o(
+                Qt,
                 {
-                  items: m.paths,
-                  pathId: m.localId,
-                  onAddStep: r,
-                  onAddCondition: s,
-                  onAddLoop: l,
-                  onDeleteStep: c,
-                  onAddTrigger: d,
-                  onSelectStep: f,
-                  onUpdateFilter: a,
-                  onResize: b
+                  items: f.paths,
+                  pathId: f.localId,
+                  iteratorEnabled: s,
+                  conditionsEnabled: l,
+                  onAddStep: d,
+                  onAddCondition: h,
+                  onAddLoop: m,
+                  onDeleteStep: p,
+                  onAddTrigger: r,
+                  onSelectStep: x,
+                  onUpdateFilter: c,
+                  onResize: C,
+                  onCheckScenario: N
                 },
-                m.title
-              ) : y ? _ = /* @__PURE__ */ C(n1, { children: [
-                /* @__PURE__ */ t(
-                  yt,
+                f.title
+              ) : a ? _ = /* @__PURE__ */ v(K, { children: [
+                /* @__PURE__ */ o(
+                  fn,
                   {
-                    value: m,
-                    onAddStep: r,
-                    onAddTrigger: d,
-                    onAddCondition: s,
-                    onAddLoop: l,
-                    onDeleteStep: c,
-                    onUpdateFilter: a,
-                    onSelectStep: f,
-                    onResize: b
+                    value: f,
+                    iteratorEnabled: s,
+                    conditionsEnabled: l,
+                    onAddStep: d,
+                    onAddTrigger: r,
+                    onAddCondition: h,
+                    onAddLoop: m,
+                    onDeleteStep: p,
+                    onUpdateFilter: c,
+                    onSelectStep: x,
+                    onResize: C,
+                    onCheckScenario: N
                   },
-                  m.localId
+                  f.localId
                 ),
-                /* @__PURE__ */ t(
-                  Z,
+                /* @__PURE__ */ o(
+                  tt,
                   {
-                    onAddStep: r,
-                    onAddTrigger: d,
-                    onAddCondition: s,
-                    onAddLoop: l,
-                    stepId: m.localId,
-                    pathId: e,
-                    index: p + 1,
+                    onAddStep: d,
+                    onAddTrigger: r,
+                    onAddCondition: h,
+                    onAddLoop: m,
+                    iteratorEnabled: s,
+                    conditionsEnabled: l,
+                    lineColor: U,
+                    stepId: f.localId,
+                    pathId: t,
+                    index: E + 1,
                     style: { marginTop: "34px", height: 0 }
                   }
                 )
-              ] }) : _ = /* @__PURE__ */ C(n1, { children: [
-                /* @__PURE__ */ t(
-                  s1,
+              ] }) : _ = /* @__PURE__ */ v(K, { children: [
+                /* @__PURE__ */ o(
+                  rt,
                   {
-                    localId: m.localId,
-                    title: m.title,
+                    localId: f.localId,
+                    title: f.title,
                     idx: 1,
-                    icon: m.icon,
-                    isSet: m.isSet,
-                    isInvalid: m.isInvalid,
-                    isFilter: m.isFilter,
-                    onSelectStep: f,
-                    onDeleteStep: c,
-                    onUpdateFilter: a
+                    icon: f.icon,
+                    isSet: f.isSet,
+                    isInvalid: f.isInvalid,
+                    isFilter: f.isFilter,
+                    status: f.status,
+                    onSelectStep: x,
+                    onDeleteStep: p,
+                    onUpdateFilter: c,
+                    onCheckScenario: N
                   },
-                  m.title
+                  f.title
                 ),
-                /* @__PURE__ */ t(
-                  Z,
+                /* @__PURE__ */ o(
+                  tt,
                   {
-                    onAddStep: r,
-                    onAddTrigger: d,
-                    onAddCondition: s,
-                    onAddLoop: l,
-                    stepId: m.localId,
-                    pathId: e,
-                    index: p + 1
+                    onAddStep: d,
+                    onAddTrigger: r,
+                    onAddCondition: h,
+                    onAddLoop: m,
+                    iteratorEnabled: s,
+                    conditionsEnabled: l,
+                    lineColor: U,
+                    stepId: f.localId,
+                    pathId: t,
+                    index: E + 1
                   }
                 )
-              ] }), /* @__PURE__ */ t(
+              ] }), /* @__PURE__ */ o(
                 "div",
                 {
-                  className: t1.stepContainer + (w || y ? " " + t1.stepContainerWithPaths : ""),
+                  className: ot.stepContainer + (u || a ? " " + ot.stepContainerWithPaths : ""),
                   children: _
                 },
-                m.localId
+                f.localId
               );
             }),
-            x && /* @__PURE__ */ t(
+            b && /* @__PURE__ */ o(
               "div",
               {
                 style: {
                   flexGrow: 1,
                   minWidth: 0,
-                  borderTop: "2px solid #3B64A0",
+                  borderTop: `2px solid ${U}`,
                   marginTop: "33.5px"
                 }
               }
@@ -1347,7 +1554,7 @@ const Me = () => /* @__PURE__ */ C(
       )
     }
   );
-}, st = () => /* @__PURE__ */ C(
+}, te = () => /* @__PURE__ */ v(
   "svg",
   {
     width: "24",
@@ -1356,255 +1563,1078 @@ const Me = () => /* @__PURE__ */ C(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         "path",
         {
           d: "M17.3006 10.5H23.1986C23.2699 10.5001 23.3397 10.5204 23.3998 10.5586C23.4599 10.5969 23.5079 10.6515 23.5381 10.716C23.5683 10.7805 23.5795 10.8523 23.5704 10.923C23.5613 10.9937 23.5322 11.0603 23.4866 11.115L20.5376 14.655C20.5024 14.6972 20.4584 14.7312 20.4086 14.7545C20.3589 14.7778 20.3046 14.7899 20.2496 14.7899C20.1947 14.7899 20.1404 14.7778 20.0906 14.7545C20.0409 14.7312 19.9968 14.6972 19.9616 14.655L17.0126 11.115C16.967 11.0603 16.938 10.9937 16.9289 10.923C16.9197 10.8523 16.931 10.7805 16.9612 10.716C16.9914 10.6515 17.0394 10.5969 17.0995 10.5586C17.1596 10.5204 17.2294 10.5001 17.3006 10.5ZM0.800641 13.5H6.69864C6.7699 13.5 6.83967 13.4797 6.89979 13.4414C6.95991 13.4032 7.00789 13.3486 7.03811 13.2841C7.06833 13.2195 7.07953 13.1477 7.07042 13.0771C7.06131 13.0064 7.03224 12.9398 6.98664 12.885L4.03764 9.34504C4.00245 9.30283 3.95841 9.26888 3.90864 9.24558C3.85887 9.22228 3.80459 9.21021 3.74964 9.21021C3.69469 9.21021 3.64041 9.22228 3.59064 9.24558C3.54087 9.26888 3.49683 9.30283 3.46164 9.34504L0.512641 12.885C0.467037 12.9398 0.437977 13.0064 0.428862 13.0771C0.419747 13.1477 0.430956 13.2195 0.461175 13.2841C0.491394 13.3486 0.539372 13.4032 0.599493 13.4414C0.659613 13.4797 0.729386 13.5 0.800641 13.5Z",
-          fill: "#41B0AC"
+          fill: w.TEAL
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         "path",
         {
           fillRule: "evenodd",
           clipRule: "evenodd",
           d: "M11.9995 4.50011C9.67152 4.50011 7.58952 5.5606 6.21402 7.2271C6.1526 7.30671 6.0758 7.37316 5.98819 7.42249C5.90057 7.47183 5.80393 7.50304 5.70401 7.51427C5.60409 7.52551 5.50293 7.51653 5.40655 7.48789C5.31016 7.45924 5.22052 7.41151 5.14296 7.34753C5.06539 7.28354 5.00149 7.20462 4.95504 7.11544C4.90859 7.02626 4.88054 6.92865 4.87257 6.82842C4.8646 6.72819 4.87687 6.62737 4.90864 6.53198C4.94041 6.43658 4.99104 6.34854 5.05752 6.27311C6.15581 4.9434 7.61291 3.95712 9.25552 3.43159C10.8981 2.90606 12.6571 2.86338 14.3233 3.30864C15.9895 3.7539 17.4927 4.66835 18.6541 5.94324C19.8156 7.21812 20.5865 8.79978 20.875 10.5001L19.3495 10.5001C19.0032 8.80632 18.0826 7.28409 16.7433 6.19082C15.4041 5.09755 13.7284 4.50032 11.9995 4.50011ZM4.64952 13.5001C4.93349 14.887 5.60405 16.1653 6.58374 17.1873C7.56343 18.2093 8.81226 18.9332 10.186 19.2755C11.5597 19.6178 13.0022 19.5645 14.3469 19.1217C15.6915 18.6789 16.8835 17.8646 17.785 16.7731C17.8464 16.6935 17.9232 16.627 18.0109 16.5777C18.0985 16.5284 18.1951 16.4972 18.295 16.4859C18.395 16.4747 18.4961 16.4837 18.5925 16.5123C18.6889 16.541 18.7785 16.5887 18.8561 16.6527C18.9337 16.7167 18.9976 16.7956 19.044 16.8848C19.0905 16.974 19.1185 17.0716 19.1265 17.1718C19.1344 17.272 19.1222 17.3728 19.0904 17.4682C19.0586 17.5636 19.008 17.6517 18.9415 17.7271C17.8432 19.0568 16.3861 20.0431 14.7435 20.5686C13.1009 21.0942 11.3419 21.1368 9.67576 20.6916C8.0096 20.2463 6.50638 19.3319 5.34491 18.057C4.18343 16.7821 3.41258 15.2004 3.12402 13.5001H4.64952Z",
-          fill: "#41B0AC"
+          fill: w.TEAL
         }
       )
     ]
   }
-), lt = "_container_3aqee_1", ct = "_collapsed_3aqee_16", at = "_loopNodeWrapper_3aqee_20", dt = "_loopIconWrapper_3aqee_30", pt = "_loopBox_3aqee_39", ut = "_dotsButton_3aqee_56", ht = "_label_3aqee_76", Ct = "_limit_3aqee_83", mt = "_expandable_3aqee_89", ft = "_expandableCollapsed_3aqee_98", gt = "_connector_3aqee_104", vt = "_line_3aqee_112", _t = "_circleDot_3aqee_120", xt = "_innerDot_3aqee_135", wt = "_stepsWrapper_3aqee_142", k = {
-  container: lt,
-  collapsed: ct,
-  loopNodeWrapper: at,
-  loopIconWrapper: dt,
-  loopBox: pt,
-  dotsButton: ut,
-  label: ht,
-  limit: Ct,
-  expandable: mt,
-  expandableCollapsed: ft,
-  connector: gt,
-  line: vt,
-  circleDot: _t,
-  innerDot: xt,
-  stepsWrapper: wt
-}, yt = ({
-  value: e,
-  onAddStep: n,
-  onAddTrigger: o,
-  onAddCondition: i,
-  onAddLoop: r,
-  onDeleteStep: c,
-  onUpdateFilter: a,
-  onSelectStep: d,
-  onResize: s
+), J1 = "_container_18jhr_1", Q1 = "_collapsed_18jhr_16", tn = "_loopNodeWrapper_18jhr_21", en = "_loopIconWrapper_18jhr_31", nn = "_loopBox_18jhr_40", on = "_dotsButton_18jhr_57", sn = "_label_18jhr_77", rn = "_limit_18jhr_84", ln = "_expandable_18jhr_90", cn = "_expandableCollapsed_18jhr_98", an = "_connector_18jhr_105", dn = "_line_18jhr_113", un = "_circleDot_18jhr_121", pn = "_innerDot_18jhr_136", hn = "_stepsWrapper_18jhr_143", T = {
+  container: J1,
+  collapsed: Q1,
+  loopNodeWrapper: tn,
+  loopIconWrapper: en,
+  loopBox: nn,
+  dotsButton: on,
+  label: sn,
+  limit: rn,
+  expandable: ln,
+  expandableCollapsed: cn,
+  connector: an,
+  line: dn,
+  circleDot: un,
+  innerDot: pn,
+  stepsWrapper: hn
+}, fn = ({
+  value: t,
+  iteratorEnabled: e = !0,
+  conditionsEnabled: n = !0,
+  onAddStep: i,
+  onAddTrigger: s,
+  onAddCondition: l,
+  onAddLoop: d,
+  onDeleteStep: p,
+  onUpdateFilter: c,
+  onSelectStep: r,
+  onResize: h,
+  onCheckScenario: m
 }) => {
-  const { localId: l, limit: f, steps: b } = e, x = b ?? [], v = () => {
-  }, [m, p] = E(!1), w = $(null), { openMenu: y, closeMenu: _ } = r1(), u = i1(), I = S(
+  const { localId: x, limit: C, steps: N, condition: b } = t, g = N ?? [], f = () => {
+  }, [E, u] = M(!1), a = B(null), { openMenu: _, closeMenu: I } = Lt(), L = gt(), O = $(
     () => [
+      {
+        label: "Edit",
+        icon: /* @__PURE__ */ o(Zt, { color: w.NAVY, size: 18 }),
+        command: (k) => {
+          k?.originalEvent?.stopPropagation(), r?.(x);
+        },
+        template: L
+      },
       {
         label: "Remove",
-        icon: /* @__PURE__ */ t(J, { color: "#3B64A0", size: 18 }),
-        command: (B) => {
-          B?.originalEvent?.stopPropagation(), c && c(l);
+        icon: /* @__PURE__ */ o(ht, { color: w.NAVY, size: 18 }),
+        command: (k) => {
+          k?.originalEvent?.stopPropagation(), p && p(x);
         },
-        template: u
+        template: L
       }
     ],
-    [c, l, u]
-  ), L = (B) => {
-    B.stopPropagation(), y(w, B);
-  }, h = () => {
-    p((B) => !B), s?.();
-  }, g = k.container + (m ? "" : " " + k.collapsed), M = k.expandable + (m ? "" : " " + k.expandableCollapsed);
-  return /* @__PURE__ */ C("div", { className: g, children: [
-    /* @__PURE__ */ C("div", { className: k.loopNodeWrapper, children: [
-      /* @__PURE__ */ C("div", { className: k.loopBox, children: [
-        /* @__PURE__ */ t("div", { onClick: h, className: k.loopIconWrapper, children: /* @__PURE__ */ t(st, {}) }),
-        /* @__PURE__ */ t("button", { className: k.dotsButton, onClick: L, children: /* @__PURE__ */ t(K, { size: 16 }) }),
-        /* @__PURE__ */ t(
-          Q,
+    [r, p, x, L]
+  ), F = (k) => {
+    k.stopPropagation(), _(a, k);
+  }, y = () => {
+    u((k) => !k), h?.();
+  }, P = T.container + (E ? "" : " " + T.collapsed), S = T.expandable + (E ? "" : " " + T.expandableCollapsed);
+  return /* @__PURE__ */ v("div", { className: P, children: [
+    /* @__PURE__ */ v("div", { className: T.loopNodeWrapper, children: [
+      /* @__PURE__ */ v("div", { className: T.loopBox, children: [
+        /* @__PURE__ */ o("div", { onClick: y, className: T.loopIconWrapper, children: /* @__PURE__ */ o(te, {}) }),
+        e && /* @__PURE__ */ o("button", { className: T.dotsButton, onClick: F, children: /* @__PURE__ */ o(ut, { size: 16 }) }),
+        /* @__PURE__ */ o(
+          ft,
           {
-            model: I,
+            model: O,
             popup: !0,
-            ref: w,
-            onHide: () => _(w)
+            ref: a,
+            onHide: () => I(a)
           }
         )
       ] }),
-      /* @__PURE__ */ t("div", { className: k.label, children: "Loop" }),
-      f != null && /* @__PURE__ */ C("div", { className: k.limit, children: [
-        f,
+      /* @__PURE__ */ o("div", { className: T.label, children: "Loop" }),
+      C != null && /* @__PURE__ */ v("div", { className: T.limit, children: [
+        C,
         "x"
       ] })
     ] }),
-    /* @__PURE__ */ C("div", { className: M, children: [
-      /* @__PURE__ */ C("div", { className: k.connector, children: [
-        /* @__PURE__ */ t("div", { className: k.line, style: { width: "12px" } }),
-        /* @__PURE__ */ t("div", { className: k.circleDot, children: /* @__PURE__ */ t("div", { className: k.innerDot }) }),
-        /* @__PURE__ */ t("div", { className: k.line })
+    /* @__PURE__ */ v("div", { className: S, children: [
+      /* @__PURE__ */ v("div", { className: T.connector, children: [
+        /* @__PURE__ */ o("div", { className: T.line }),
+        /* @__PURE__ */ o("div", { className: T.circleDot, children: /* @__PURE__ */ o("div", { className: T.innerDot }) }),
+        /* @__PURE__ */ o("div", { className: T.line })
       ] }),
-      /* @__PURE__ */ t("div", { className: k.stepsWrapper, children: /* @__PURE__ */ t(
-        l1,
+      /* @__PURE__ */ o(
+        vt,
         {
-          steps: x,
-          pathId: l,
-          onAddStep: n ?? v,
-          onAddTrigger: o,
-          onAddCondition: i ?? v,
-          onAddLoop: r,
-          onDeleteStep: c,
-          onUpdateFilter: a ?? v,
-          onSelectStep: d ?? v,
+          expression: b ?? "",
+          status: t.status,
+          style: { marginTop: "25.5px" }
+        }
+      ),
+      /* @__PURE__ */ o("div", { className: T.stepsWrapper, children: /* @__PURE__ */ o(
+        St,
+        {
+          steps: g,
+          pathId: x,
+          iteratorEnabled: e,
+          conditionsEnabled: n,
+          onAddStep: i ?? f,
+          onAddTrigger: s,
+          onAddCondition: l ?? f,
+          onAddLoop: d,
+          onDeleteStep: p,
+          onUpdateFilter: c ?? f,
+          onSelectStep: r ?? f,
+          onCheckScenario: m ?? f,
           isDescendent: !0
         }
       ) })
     ] })
   ] });
-}, It = "_container_kielx_1", bt = {
-  container: It
-}, Et = ({
-  process: e,
-  addMultipleTriggers: n,
-  onAddStep: o,
-  onAddTrigger: i,
-  onAddCondition: r,
-  onAddLoop: c,
-  onResize: a,
-  onDeleteTrigger: d,
-  onDeleteStep: s,
-  onUpdateFilter: l,
-  onSelectStep: f
+}, gn = "_container_kielx_1", ee = {
+  container: gn
+}, Tn = ({
+  process: t,
+  iteratorEnabled: e = !0,
+  conditionsEnabled: n = !0,
+  addMultipleTriggers: i,
+  onAddStep: s,
+  onAddTrigger: l,
+  onAddCondition: d,
+  onAddLoop: p,
+  onResize: c,
+  onDeleteTrigger: r,
+  onDeleteStep: h,
+  onUpdateFilter: m,
+  onSelectStep: x,
+  onCheckScenario: C
 }) => {
-  const [b, x] = E(0);
-  return /* @__PURE__ */ C("div", { className: bt.container, children: [
-    /* @__PURE__ */ t(
-      Ne,
+  const [N, b] = M(0);
+  return /* @__PURE__ */ v("div", { className: ee.container, children: [
+    /* @__PURE__ */ o(
+      qt,
       {
-        steps: e.triggers,
-        onAddTrigger: n,
-        onUpdateFilter: l,
-        onDeleteTrigger: d,
-        onSelectStep: f,
-        onCenterYUpdate: x
+        steps: t.triggers,
+        onAddTrigger: i,
+        onUpdateFilter: m,
+        onDeleteTrigger: r,
+        onSelectStep: x,
+        onCenterYUpdate: b
       }
     ),
-    e.steps.length > 0 ? /* @__PURE__ */ t(
-      l1,
+    t.steps.length > 0 ? /* @__PURE__ */ o(
+      St,
       {
-        steps: e.steps,
-        centerY: b,
-        onAddStep: o,
-        onAddTrigger: i,
-        onAddCondition: r,
-        onAddLoop: c,
-        onResize: a,
-        onDeleteStep: s,
-        onUpdateFilter: l,
-        onSelectStep: f,
+        steps: t.steps,
+        centerY: N,
+        onAddStep: s,
+        onAddTrigger: l,
+        onAddCondition: d,
+        onAddLoop: p,
+        onResize: c,
+        onDeleteStep: h,
+        onUpdateFilter: m,
+        onSelectStep: x,
+        iteratorEnabled: e,
+        conditionsEnabled: n,
         isDescendent: !1,
-        pathId: void 0
+        pathId: void 0,
+        onCheckScenario: C
       }
-    ) : /* @__PURE__ */ t(
-      Z,
+    ) : /* @__PURE__ */ o(
+      tt,
       {
-        onAddStep: () => o(),
-        onAddTrigger: i,
-        onAddCondition: r,
-        onAddLoop: c,
+        onAddStep: () => s(),
+        onAddTrigger: l,
+        onAddCondition: d,
+        onAddLoop: p,
+        iteratorEnabled: e,
+        conditionsEnabled: n,
         index: 0,
         style: {
-          height: o1,
-          marginTop: Math.max(0, b - o1 / 2)
+          height: yt,
+          marginTop: Math.max(0, N - yt / 2)
         }
       }
     )
   ] });
+}, Tt = (t, e, n) => {
+  if (e === n) return !1;
+  const i = (r) => {
+    if ("paths" in r && r.paths && r.paths.length > 0) {
+      const h = r.paths[r.paths.length - 1];
+      if (h.steps && h.steps.length > 0) {
+        const m = h.steps[h.steps.length - 1];
+        return i(m);
+      }
+      return h.localId;
+    }
+    return "steps" in r && r.steps && r.steps.length > 0 ? i(
+      r.steps[r.steps.length - 1]
+    ) : r.localId;
+  }, s = (r) => r.steps && r.steps.length > 0 ? i(
+    r.steps[r.steps.length - 1]
+  ) : r.paths && r.paths.length > 0 ? s(r.paths[r.paths.length - 1]) : r.localId, l = (r, h) => "paths" in r && r.paths && r.paths.length > 0 ? r.paths.some((x) => s(x) === h) : i(r) === h, d = (r) => {
+    for (let h = 0; h < r.length - 1; h++) {
+      const m = r[h], x = r[h + 1];
+      if (m.localId === e && x.localId === n || l(m, e) && x.localId === n)
+        return !0;
+    }
+    for (const h of r) {
+      if (h.localId === e && h.steps?.[0]?.localId === n)
+        return !0;
+      if ("paths" in h && h.paths) {
+        for (const m of h.paths)
+          if (p(m)) return !0;
+      }
+      if ("steps" in h && h.steps && d(h.steps))
+        return !0;
+    }
+    return !1;
+  }, p = (r) => {
+    if (r.localId === e && r.steps?.[0]?.localId === n || r.steps && r.steps.length > 0 && d(r.steps))
+      return !0;
+    if (r.paths) {
+      for (const h of r.paths)
+        if (p(h)) return !0;
+    }
+    return !1;
+  }, c = t.steps;
+  return c?.[0] && c[0].localId === e && c[0].steps?.[0]?.localId === n ? !0 : d(c);
+}, ne = (t, e) => {
+  if (t.localId === e) return t.status;
+  if (t.steps)
+    for (const n of t.steps) {
+      const i = Pt(n, e);
+      if (i !== void 0) return i;
+    }
+  if (t.paths)
+    for (const n of t.paths) {
+      const i = ne(n, e);
+      if (i !== void 0) return i;
+    }
+}, Pt = (t, e) => {
+  if (t.localId === e) return t.status;
+  if (t.paths)
+    for (const n of t.paths) {
+      const i = ne(n, e);
+      if (i !== void 0) return i;
+    }
+  if (t.steps)
+    for (const n of t.steps) {
+      const i = Pt(n, e);
+      if (i !== void 0) return i;
+    }
+}, q = (t, e) => {
+  for (const n of t.triggers)
+    if (n.localId === e) return n.status;
+  for (const n of t.steps) {
+    const i = Pt(n, e);
+    if (i !== void 0) return i;
+  }
+}, mn = (t, e) => {
+  const n = (s) => {
+    if (s.localId === e) return !0;
+    if (s.steps) {
+      for (const l of s.steps)
+        if (i(l)) return !0;
+    }
+    if (s.paths) {
+      for (const l of s.paths)
+        if (n(l)) return !0;
+    }
+    return !1;
+  }, i = (s) => {
+    if (s.paths) {
+      for (const l of s.paths)
+        if (n(l)) return !0;
+    }
+    if (s.steps) {
+      for (const l of s.steps)
+        if (i(l)) return !0;
+    }
+    return !1;
+  };
+  for (const s of t.triggers)
+    if (i(s)) return !0;
+  for (const s of t.steps)
+    if (i(s)) return !0;
+  return !1;
+}, kt = (t, e, n) => {
+  if (e === n) return !1;
+  const i = q(t, e), s = q(t, n);
+  return i !== "finished" || s !== "finished" ? !1 : Tt(t, e, n);
+}, Et = (t, e, n) => e === n || !mn(t, e) || q(t, n) !== "finished" ? !1 : Tt(t, e, n), et = ({
+  lineColor: t,
+  style: e,
+  fromLocalId: n,
+  toLocalId: i
+}) => {
+  const l = mt(t) ? `${j.stepLinkLine} ${j.dashedLine}` : j.stepLinkLine;
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: `${j.stepLinkContainer} ${j.readOnly}`,
+      style: { ...e, "--step-link-color": t },
+      "aria-hidden": !0,
+      "data-connector-from": void 0,
+      "data-connector-to": void 0,
+      children: [
+        /* @__PURE__ */ o("div", { className: l }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: `${j.stepLinkIcon} ${j.debuggerIconCollapsed}`,
+            "aria-hidden": !0
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: l })
+      ]
+    }
+  );
+}, Rt = (t) => t.steps && t.steps.length > 0 ? st(t.steps[t.steps.length - 1]) : t.paths && t.paths.length > 0 ? Rt(t.paths[t.paths.length - 1]) : t.localId, st = (t) => "paths" in t && t.paths && t.paths.length > 0 ? Rt(t.paths[t.paths.length - 1]) : "steps" in t && t.steps && t.steps.length > 0 ? st(t.steps[t.steps.length - 1]) : t.localId, Nt = (t) => "steps" in t && t.steps && t.steps.length > 0 ? Nt(t.steps[t.steps.length - 1]) : "paths" in t && t.paths && t.paths.length > 0 ? Nt(t.paths[t.paths.length - 1]) : t.localId, oe = (t, e, n, i) => {
+  const s = e.statusLine(void 0);
+  if (i == null) return s;
+  const l = q(t, i);
+  return l == null ? s : l !== "finished" ? e.statusLine(l) : n == null ? s : Et(
+    t,
+    n,
+    i
+  ) || kt(t, n, i) ? e.statusLine("finished") : s;
+}, ie = Vt(
+  null
+), Cn = ie.Provider, Mt = () => {
+  const t = zt(ie);
+  if (!t)
+    throw new Error(
+      "useProcessDebuggerContext must be used within ProcessDebuggerProvider"
+    );
+  return t;
+}, Wt = 34.5, vn = 33, se = (t) => {
+  const {
+    items: e,
+    pathId: n,
+    previousLocalId: i,
+    nextLocalId: s,
+    onSelectStep: l,
+    onResize: d,
+    onCheckScenario: p
+  } = t, { process: c, lineColors: r } = Mt(), h = () => {
+  }, m = oe(
+    c,
+    r,
+    i,
+    s
+  ), x = B(null), C = B([]), [N, b] = M([]);
+  nt(() => {
+    const a = () => {
+      const L = x.current;
+      if (!L || e.length === 0) {
+        b([]);
+        return;
+      }
+      const O = [], F = Number.parseFloat(getComputedStyle(L).zoom || "1");
+      for (let y = 0; y < e.length; y++) {
+        const P = C.current[y];
+        if (P)
+          if (P.offsetParent == null) {
+            const S = L.getBoundingClientRect(), k = P.getBoundingClientRect();
+            O.push((k.top - S.top) / F + Wt);
+          } else
+            O.push(P.offsetTop - vn + Wt);
+      }
+      O.length === e.length && b(O);
+    };
+    a();
+    const _ = new ResizeObserver(a), I = x.current;
+    return I && _.observe(I), window.addEventListener("resize", a), () => {
+      _.disconnect(), window.removeEventListener("resize", a);
+    };
+  }, [e]);
+  const g = $(() => {
+    if (e.length)
+      return Xt(
+        e.map((a) => pt(a))
+      );
+  }, [e]), f = m, E = $(() => N.length !== e.length || e.length <= 1 ? null : e.map((a, _) => _).filter((a) => a > 0).map((a) => {
+    const _ = N[a];
+    if (_ === void 0) return null;
+    const I = pt(e[a]), L = r.statusLine(I);
+    return /* @__PURE__ */ o(
+      wt,
+      {
+        width: 100,
+        height: _,
+        strokeColor: L,
+        fromLocalId: e[a - 1]?.localId,
+        toLocalId: e[a]?.localId
+      },
+      a
+    );
+  }), [e, N, r]), u = $(() => {
+    if (N.length !== e.length || e.length <= 1) return null;
+    const a = r.statusLine(void 0);
+    return e.map((_, I) => I).filter((_) => _ > 0).map((_) => {
+      const I = N[_];
+      if (I === void 0) return null;
+      let L = a;
+      if (s != null && q(c, s) === "finished") {
+        const F = Nt(
+          e[_]
+        );
+        kt(
+          c,
+          F,
+          s
+        ) && (L = r.statusLine("finished"));
+      }
+      return /* @__PURE__ */ o(
+        wt,
+        {
+          width: 100,
+          height: I,
+          strokeColor: L,
+          fromLocalId: i,
+          toLocalId: s
+        },
+        _
+      );
+    });
+  }, [
+    e,
+    N,
+    r,
+    c,
+    s,
+    i
+  ]);
+  return /* @__PURE__ */ v("div", { className: H.row, children: [
+    /* @__PURE__ */ o(
+      Jt,
+      {
+        onDelete: () => {
+        },
+        enabled: !1,
+        debuggerMode: !0,
+        status: g,
+        onSelect: n != null && l ? () => l(n) : void 0
+      }
+    ),
+    /* @__PURE__ */ v(
+      "div",
+      {
+        ref: x,
+        className: H.column,
+        style: { marginTop: "33px" },
+        children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100px",
+                height: "2px",
+                borderTop: X(f)
+              }
+            }
+          ),
+          E
+        ]
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: H.column, children: e.map((a, _) => {
+      let I;
+      if (a.paths)
+        I = /* @__PURE__ */ o(
+          se,
+          {
+            items: a.paths,
+            pathId: n,
+            previousLocalId: a.localId,
+            nextLocalId: s,
+            onSelectStep: l,
+            onResize: d,
+            onCheckScenario: p
+          },
+          a.localId
+        );
+      else if (a.steps) {
+        const L = a, O = L.status === "finished" || s != null && Et(
+          c,
+          L.localId,
+          s
+        ) ? "finished" : void 0;
+        I = /* @__PURE__ */ v(
+          "div",
+          {
+            className: H.stepsContainer,
+            "data-local-id": void 0,
+            children: [
+              /* @__PURE__ */ o(
+                vt,
+                {
+                  expression: L.condition,
+                  status: O,
+                  debuggerMode: !0,
+                  style: { marginTop: "25px" }
+                }
+              ),
+              /* @__PURE__ */ o(
+                Ot,
+                {
+                  steps: a.steps,
+                  pathId: a.localId,
+                  previousLocalId: L.localId,
+                  nextLocalId: s,
+                  onSelectStep: l ?? h,
+                  onResize: d,
+                  onCheckScenario: p
+                },
+                a.localId
+              )
+            ]
+          }
+        );
+      } else
+        I = /* @__PURE__ */ o(
+          rt,
+          {
+            localId: a.localId,
+            title: "title" in a ? a.title : "",
+            idx: 1,
+            icon: "icon" in a ? a.icon : void 0,
+            status: "status" in a ? a.status : void 0,
+            debuggerMode: !0,
+            onSelectStep: l,
+            onUpdateFilter: h,
+            onCheckScenario: p
+          },
+          a.localId
+        );
+      return /* @__PURE__ */ o(
+        "div",
+        {
+          ref: (L) => {
+            C.current[_] = L;
+          },
+          style: { width: "100%" },
+          "data-local-id": void 0,
+          children: I
+        },
+        a.localId
+      );
+    }) }),
+    /* @__PURE__ */ v("div", { className: H.column, style: { marginTop: "33px" }, children: [
+      /* @__PURE__ */ o(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0.5,
+            left: 0,
+            flex: 1,
+            width: "100%",
+            height: "2px",
+            borderTop: X(m)
+          }
+        }
+      ),
+      u
+    ] }),
+    /* @__PURE__ */ o(
+      et,
+      {
+        lineColor: m,
+        fromLocalId: i,
+        toLocalId: s,
+        style: {
+          marginTop: "34px",
+          height: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        style: {
+          flex: 1,
+          width: "100%",
+          height: "2px",
+          borderTop: X(m),
+          marginTop: "34px"
+        }
+      }
+    )
+  ] });
+}, _n = ({
+  value: t,
+  previousLocalId: e,
+  nextLocalId: n,
+  onSelectStep: i,
+  onResize: s,
+  onCheckScenario: l
+}) => {
+  const { process: d, lineColors: p } = Mt(), { localId: c, limit: r, steps: h, condition: m } = t, x = h ?? [], C = () => {
+  }, [N, b] = M(!1), g = () => {
+    b((L) => !L), s?.();
+  }, f = T.container + (N ? "" : " " + T.collapsed), E = T.expandable + (N ? "" : " " + T.expandableCollapsed), u = x[0]?.localId, a = u != null ? q(d, u) : void 0, I = e != null && (Et(
+    d,
+    e,
+    c
+  ) || q(d, e) === "finished" && Tt(d, e, c) || kt(d, e, c)) && a === "finished" ? p.statusLine("finished") : p.statusLine(void 0);
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: f,
+      "data-local-id": void 0,
+      children: [
+        /* @__PURE__ */ v("div", { className: T.loopNodeWrapper, children: [
+          /* @__PURE__ */ o("div", { className: T.loopBox, children: /* @__PURE__ */ o("div", { onClick: g, className: T.loopIconWrapper, children: /* @__PURE__ */ o(te, {}) }) }),
+          /* @__PURE__ */ o("div", { className: T.label, children: "Loop" }),
+          r != null && /* @__PURE__ */ v("div", { className: T.limit, children: [
+            r,
+            "x"
+          ] })
+        ] }),
+        /* @__PURE__ */ v("div", { className: E, children: [
+          /* @__PURE__ */ v(
+            "div",
+            {
+              className: T.connector,
+              style: {
+                "--iterator-connector-color": I,
+                ...mt(I) && {
+                  "--iterator-connector-width": "3px",
+                  "--iterator-connector-style": "dotted"
+                }
+              },
+              children: [
+                /* @__PURE__ */ o("div", { className: T.line }),
+                /* @__PURE__ */ o("div", { className: T.circleDot, children: /* @__PURE__ */ o("div", { className: T.innerDot }) }),
+                /* @__PURE__ */ o("div", { className: T.line })
+              ]
+            }
+          ),
+          /* @__PURE__ */ o(
+            vt,
+            {
+              expression: m ?? "",
+              status: t.status,
+              debuggerMode: !0,
+              style: { marginTop: "25.5px" }
+            }
+          ),
+          /* @__PURE__ */ o("div", { className: T.stepsWrapper, children: /* @__PURE__ */ o(
+            Ot,
+            {
+              steps: x,
+              pathId: c,
+              previousLocalId: c,
+              nextLocalId: n,
+              onSelectStep: i ?? (() => {
+              }),
+              onCheckScenario: l ?? C,
+              isDescendent: !0
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}, bt = 68, xn = (t) => {
+  if (!t || t.length === 0) return;
+  const e = Xt(
+    t.map((i) => pt(i))
+  ), n = t.find((i) => pt(i) === e) ?? t[t.length - 1];
+  return Rt(n);
+}, Ot = ({
+  pathId: t,
+  steps: e,
+  centerY: n,
+  className: i,
+  previousLocalId: s,
+  nextLocalId: l,
+  onSelectStep: d,
+  onResize: p,
+  onCheckScenario: c,
+  isDescendent: r = !0
+}) => {
+  const { process: h, lineColors: m } = Mt(), x = () => {
+  }, C = n === void 0 ? void 0 : { marginTop: Math.max(0, n - bt / 2) }, N = (g, f) => oe(h, m, g, f), b = (g) => g === e.length - 1 ? l : e[g + 1]?.localId;
+  if (e.length === 0) {
+    const g = N(s, l);
+    return /* @__PURE__ */ v(
+      "div",
+      {
+        "data-path-id": t ?? "",
+        style: {
+          width: "100%",
+          marginTop: "20px",
+          display: "flex",
+          flexDirection: "row",
+          flex: 1,
+          minWidth: 0,
+          ...C
+        },
+        children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              style: {
+                flexGrow: 1,
+                flexShrink: 0,
+                flexBasis: "auto",
+                minWidth: 0,
+                height: "2px",
+                marginTop: "13.5px",
+                borderTop: X(g)
+              }
+            }
+          ),
+          /* @__PURE__ */ o(
+            et,
+            {
+              lineColor: g,
+              fromLocalId: s,
+              toLocalId: l,
+              style: {
+                height: "auto",
+                marginTop: "2px"
+              }
+            }
+          ),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              style: {
+                flexGrow: 1,
+                flexShrink: 0,
+                flexBasis: "auto",
+                minWidth: 0,
+                height: "2px",
+                marginTop: "13.5px",
+                borderTop: X(g)
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-path-id": t ?? "",
+      className: ot.steps + (i ? " " + i : ""),
+      style: C,
+      children: /* @__PURE__ */ v(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            flex: 1,
+            minWidth: 0,
+            width: "100%",
+            alignItems: "flex-start"
+          },
+          children: [
+            /* @__PURE__ */ o(
+              et,
+              {
+                lineColor: N(s, e[0]?.localId),
+                fromLocalId: s,
+                toLocalId: e[0]?.localId,
+                style: {
+                  marginTop: "21.5px"
+                }
+              }
+            ),
+            e.map((g, f) => {
+              const E = !!g.paths, u = "condition" in g && typeof g.condition == "string";
+              let a;
+              if (E && g.paths) {
+                const _ = xn(g.paths);
+                a = /* @__PURE__ */ o(
+                  se,
+                  {
+                    items: g.paths,
+                    pathId: g.localId,
+                    previousLocalId: _ ?? g.localId,
+                    nextLocalId: b(f),
+                    onSelectStep: d,
+                    onResize: p,
+                    onCheckScenario: c
+                  },
+                  g.title
+                );
+              } else if (u) {
+                const _ = f === 0 ? s : st(e[f - 1]), I = st(g);
+                a = /* @__PURE__ */ v(K, { children: [
+                  /* @__PURE__ */ o(
+                    _n,
+                    {
+                      value: g,
+                      previousLocalId: _,
+                      nextLocalId: b(f),
+                      onSelectStep: d,
+                      onResize: p,
+                      onCheckScenario: c
+                    }
+                  ),
+                  /* @__PURE__ */ o(
+                    et,
+                    {
+                      lineColor: N(
+                        I,
+                        b(f)
+                      ),
+                      fromLocalId: g.localId,
+                      toLocalId: b(f),
+                      style: { marginTop: "34px", height: 0 }
+                    }
+                  )
+                ] });
+              } else
+                a = /* @__PURE__ */ v(K, { children: [
+                  /* @__PURE__ */ o(
+                    rt,
+                    {
+                      localId: g.localId,
+                      title: g.title,
+                      idx: 1,
+                      icon: g.icon,
+                      isSet: g.isSet,
+                      isInvalid: g.isInvalid,
+                      isFilter: g.isFilter,
+                      status: g.status,
+                      debuggerMode: !0,
+                      onSelectStep: d,
+                      onUpdateFilter: x,
+                      onCheckScenario: c
+                    },
+                    g.title
+                  ),
+                  /* @__PURE__ */ o(
+                    et,
+                    {
+                      lineColor: N(
+                        g.localId,
+                        b(f)
+                      ),
+                      fromLocalId: g.localId,
+                      toLocalId: b(f)
+                    }
+                  )
+                ] });
+              return /* @__PURE__ */ o(
+                "div",
+                {
+                  className: ot.stepContainer + (E || u ? " " + ot.stepContainerWithPaths : ""),
+                  children: a
+                },
+                g.localId
+              );
+            }),
+            r && /* @__PURE__ */ o(
+              "div",
+              {
+                style: {
+                  flexGrow: 1,
+                  minWidth: 0,
+                  borderTop: X(N(
+                    e.length > 0 ? st(
+                      e[e.length - 1]
+                    ) : void 0,
+                    l
+                  )),
+                  marginTop: "33.5px"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, In = ({
+  centerY: t,
+  neutralLineColor: e
+}) => /* @__PURE__ */ v(
+  "div",
+  {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      flex: 1,
+      minWidth: 0,
+      width: "100%",
+      marginTop: Math.max(0, t - bt / 2),
+      height: bt,
+      alignItems: "center"
+    },
+    children: [
+      /* @__PURE__ */ o(
+        "div",
+        {
+          style: {
+            flexGrow: 1,
+            minWidth: 0,
+            height: "2px",
+            borderTop: `2px solid ${e}`
+          }
+        }
+      ),
+      /* @__PURE__ */ o(
+        et,
+        {
+          lineColor: e,
+          style: { height: "auto" }
+        }
+      ),
+      /* @__PURE__ */ o(
+        "div",
+        {
+          style: {
+            flexGrow: 1,
+            minWidth: 0,
+            height: "2px",
+            borderTop: `2px solid ${e}`
+          }
+        }
+      )
+    ]
+  }
+), Pn = ({
+  process: t,
+  statusLineColors: e,
+  neutralLineColor: n = w.NAVY,
+  onResize: i,
+  onSelectStep: s,
+  onCheckScenario: l = () => {
+  }
+}) => {
+  const [d, p] = M(0), c = $(
+    () => f1(e, n),
+    [e, n]
+  );
+  return /* @__PURE__ */ o("div", { className: ee.container, children: /* @__PURE__ */ v(Cn, { value: { process: t, lineColors: c }, children: [
+    /* @__PURE__ */ o(
+      qt,
+      {
+        steps: t.triggers,
+        onSelectStep: s,
+        debuggerMode: !0,
+        resolveCurveStrokeColor: c.statusLine,
+        onCenterYUpdate: p
+      }
+    ),
+    t.steps.length > 0 ? /* @__PURE__ */ o(
+      Ot,
+      {
+        steps: t.steps,
+        centerY: d,
+        onResize: i,
+        onSelectStep: s,
+        onCheckScenario: l,
+        isDescendent: !1,
+        pathId: void 0
+      }
+    ) : /* @__PURE__ */ o(
+      In,
+      {
+        centerY: d,
+        neutralLineColor: c.statusLine(void 0)
+      }
+    )
+  ] }) });
 };
-class Nt extends Error {
-  constructor(n) {
-    super(n), this.name = "AddStepError";
+class wn extends Error {
+  constructor(e) {
+    super(e), this.name = "AddStepError";
   }
 }
-const m1 = (e) => "condition" in e && typeof e.condition == "string", x1 = (e, n, o, i) => {
-  const r = i === "prepend" ? n : n + 1;
-  return [...e.slice(0, r), o, ...e.slice(r)];
-}, c1 = (e, n, o, i) => {
-  for (let r = 0; r < e.length; r++) {
-    if (e[r].localId === n)
-      return x1(e, r, i, o);
-    const c = e[r], a = c.steps?.length && c1(c.steps, n, o, i);
-    if (a)
-      return e.map(
-        (s, l) => l === r ? { ...s, steps: a } : s
-      );
-    const d = c.paths?.length && w1(c.paths, n, o, i);
+const Ht = (t) => "condition" in t && typeof t.condition == "string", re = (t, e, n, i) => {
+  const s = i === "prepend" ? e : e + 1;
+  return [...t.slice(0, s), n, ...t.slice(s)];
+}, $t = (t, e, n, i) => {
+  for (let s = 0; s < t.length; s++) {
+    if (t[s].localId === e)
+      return re(t, s, i, n);
+    const l = t[s], d = l.steps?.length && $t(l.steps, e, n, i);
     if (d)
-      return e.map(
-        (s, l) => l === r ? { ...s, paths: d } : s
+      return t.map(
+        (c, r) => r === s ? { ...c, steps: d } : c
+      );
+    const p = l.paths?.length && le(l.paths, e, n, i);
+    if (p)
+      return t.map(
+        (c, r) => r === s ? { ...c, paths: p } : c
       );
   }
   return null;
-}, kt = (e, n, o) => {
-  const i = e.steps ?? [], r = n === "prepend" ? [o, ...i] : [...i, o];
-  return { ...e, steps: r };
-}, w1 = (e, n, o, i) => {
-  for (let r = 0; r < e.length; r++) {
-    const c = e[r];
-    if (c.localId === n)
-      return m1(c) ? e.map(
-        (a, d) => d === r ? kt(c, o, i) : a
-      ) : x1(e, r, i, o);
-    if (m1(c)) {
-      const a = c.steps?.length && c1(c.steps, n, o, i);
-      if (a)
-        return e.map(
-          (s, l) => l === r ? { ...s, steps: a } : s
-        );
-      const d = c.paths?.length && w1(c.paths, n, o, i);
+}, yn = (t, e, n) => {
+  const i = t.steps ?? [], s = e === "prepend" ? [n, ...i] : [...i, n];
+  return { ...t, steps: s };
+}, le = (t, e, n, i) => {
+  for (let s = 0; s < t.length; s++) {
+    const l = t[s];
+    if (l.localId === e)
+      return Ht(l) ? t.map(
+        (d, p) => p === s ? yn(l, n, i) : d
+      ) : re(t, s, i, n);
+    if (Ht(l)) {
+      const d = l.steps?.length && $t(l.steps, e, n, i);
       if (d)
-        return e.map(
-          (s, l) => l === r ? { ...s, paths: d } : s
+        return t.map(
+          (c, r) => r === s ? { ...c, steps: d } : c
+        );
+      const p = l.paths?.length && le(l.paths, e, n, i);
+      if (p)
+        return t.map(
+          (c, r) => r === s ? { ...c, paths: p } : c
         );
     }
   }
   return null;
-}, $t = (e, n, o, i) => {
-  const r = c1(e.steps, n, o, i);
-  if (r)
-    return { ...e, steps: r };
-  throw new Nt(`Step or path with id "${n}" not found`);
-}, y1 = (e, n) => ({
-  ...e,
-  ...e.steps != null && { steps: a1(e.steps, n) },
-  ...e.paths != null && {
-    paths: e.paths.map((o) => y1(o, n))
+}, kn = (t, e, n, i) => {
+  const s = $t(t.steps, e, n, i);
+  if (s)
+    return { ...t, steps: s };
+  throw new wn(`Step or path with id "${e}" not found`);
+}, ce = (t, e) => ({
+  ...t,
+  ...t.steps != null && { steps: Dt(t.steps, e) },
+  ...t.paths != null && {
+    paths: t.paths.map((n) => ce(n, e))
   }
-}), a1 = (e, n) => e.filter((o) => o.localId !== n).map((o) => ({
-  ...o,
-  ...o.steps != null && { steps: a1(o.steps, n) },
-  ...o.paths != null && {
-    paths: o.paths.map((i) => y1(i, n))
+}), Dt = (t, e) => t.filter((n) => n.localId !== e).map((n) => ({
+  ...n,
+  ...n.steps != null && { steps: Dt(n.steps, e) },
+  ...n.paths != null && {
+    paths: n.paths.map((i) => ce(i, e))
   }
-})), Tt = (e, n) => {
-  const o = a1(e.steps, n);
+})), En = (t, e) => {
+  const n = Dt(t.steps, e);
   return {
-    ...e,
-    steps: o
+    ...t,
+    steps: n
   };
 };
 export {
-  Nt as AddStepError,
-  yt as Iterator,
-  Q as Menu,
-  Lt as MenuProvider,
-  Et as ProcessDiagram,
-  s1 as ProcessStep,
-  Ne as Trigger,
-  $t as addStep,
-  Tt as deleteStep,
-  r1 as useMenuProvider
+  wn as AddStepError,
+  fn as Iterator,
+  ft as Menu,
+  Sn as MenuProvider,
+  Pn as ProcessDebuggerDiagram,
+  Tn as ProcessDiagram,
+  rt as ProcessStep,
+  qt as Trigger,
+  kn as addStep,
+  En as deleteStep,
+  Lt as useMenuProvider
 };
 //# sourceMappingURL=index.mjs.map