@emporix/process-diagram 1.0.7 → 1.0.9

package/dist/index.mjs

@@ -1,37 +1,37 @@
-import { jsxs as g, Fragment as se, jsx as t } from "react/jsx-runtime";
-import O, { forwardRef as le, useState as E, useRef as T, useCallback as H, useImperativeHandle as ce, useEffect as W, createContext as ae, useMemo as $, useContext as de } from "react";
-import { createPortal as ue } from "react-dom";
-const pe = "_container_ww84z_1", he = "_step_ww84z_7", me = "_selected_ww84z_22", ge = "_selectedInvalid_ww84z_28", Ce = "_isSet_ww84z_34", fe = "_invalid_ww84z_38", ve = "_filterFlag_ww84z_44", _e = "_title_ww84z_70", we = "_icon_ww84z_87", ye = "_content_ww84z_105", xe = "_dotsButton_ww84z_111", f = {
-  container: pe,
-  step: he,
-  selected: me,
-  selectedInvalid: ge,
-  isSet: Ce,
-  invalid: fe,
-  filterFlag: ve,
-  title: _e,
-  icon: we,
+import { jsxs as C, Fragment as le, jsx as t } from "react/jsx-runtime";
+import S, { forwardRef as ce, useState as N, useRef as z, useCallback as H, useImperativeHandle as ae, useEffect as W, createContext as de, useMemo as $, useContext as ue } from "react";
+import { createPortal as pe } from "react-dom";
+const he = "_container_ww84z_1", me = "_step_ww84z_7", ge = "_selected_ww84z_22", Ce = "_selectedInvalid_ww84z_28", fe = "_isSet_ww84z_34", ve = "_invalid_ww84z_38", _e = "_filterFlag_ww84z_44", we = "_title_ww84z_70", xe = "_icon_ww84z_87", ye = "_content_ww84z_105", ke = "_dotsButton_ww84z_111", v = {
+  container: he,
+  step: me,
+  selected: ge,
+  selectedInvalid: Ce,
+  isSet: fe,
+  invalid: ve,
+  filterFlag: _e,
+  title: we,
+  icon: xe,
   content: ye,
-  dotsButton: xe
+  dotsButton: ke
 };
-var J = {
+var Q = {
   color: void 0,
   size: void 0,
   className: void 0,
   style: void 0,
   attr: void 0
-}, Y = O.createContext && /* @__PURE__ */ O.createContext(J), Ie = ["attr", "size", "title"];
+}, X = S.createContext && /* @__PURE__ */ S.createContext(Q), Ie = ["attr", "size", "title"];
 function be(e, i) {
   if (e == null) return {};
-  var n = ke(e, i), r, a;
+  var n = Ne(e, i), r, l;
   if (Object.getOwnPropertySymbols) {
-    var p = Object.getOwnPropertySymbols(e);
-    for (a = 0; a < p.length; a++)
-      r = p[a], !(i.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
+    var m = Object.getOwnPropertySymbols(e);
+    for (l = 0; l < m.length; l++)
+      r = m[l], !(i.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
   }
   return n;
 }
-function ke(e, i) {
+function Ne(e, i) {
   if (e == null) return {};
   var n = {};
   for (var r in e)
@@ -41,45 +41,45 @@ function ke(e, i) {
     }
   return n;
 }
-function F() {
-  return F = Object.assign ? Object.assign.bind() : function(e) {
+function A() {
+  return A = Object.assign ? Object.assign.bind() : function(e) {
     for (var i = 1; i < arguments.length; i++) {
       var n = arguments[i];
       for (var r in n)
         Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
     }
     return e;
-  }, F.apply(this, arguments);
+  }, A.apply(this, arguments);
 }
-function X(e, i) {
+function q(e, i) {
   var n = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
     var r = Object.getOwnPropertySymbols(e);
-    i && (r = r.filter(function(a) {
-      return Object.getOwnPropertyDescriptor(e, a).enumerable;
+    i && (r = r.filter(function(l) {
+      return Object.getOwnPropertyDescriptor(e, l).enumerable;
     })), n.push.apply(n, r);
   }
   return n;
 }
-function A(e) {
+function V(e) {
   for (var i = 1; i < arguments.length; i++) {
     var n = arguments[i] != null ? arguments[i] : {};
-    i % 2 ? X(Object(n), !0).forEach(function(r) {
-      Ne(e, r, n[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : X(Object(n)).forEach(function(r) {
+    i % 2 ? q(Object(n), !0).forEach(function(r) {
+      Pe(e, r, n[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : q(Object(n)).forEach(function(r) {
       Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(n, r));
     });
   }
   return e;
 }
-function Ne(e, i, n) {
-  return i = Pe(i), i in e ? Object.defineProperty(e, i, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : e[i] = n, e;
+function Pe(e, i, n) {
+  return i = Me(i), i in e ? Object.defineProperty(e, i, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : e[i] = n, e;
 }
-function Pe(e) {
-  var i = Me(e, "string");
+function Me(e) {
+  var i = Ee(e, "string");
   return typeof i == "symbol" ? i : i + "";
 }
-function Me(e, i) {
+function Ee(e, i) {
   if (typeof e != "object" || !e) return e;
   var n = e[Symbol.toPrimitive];
   if (n !== void 0) {
@@ -89,166 +89,166 @@ function Me(e, i) {
   }
   return (i === "string" ? String : Number)(e);
 }
-function Q(e) {
-  return e && e.map((i, n) => /* @__PURE__ */ O.createElement(i.tag, A({
+function ee(e) {
+  return e && e.map((i, n) => /* @__PURE__ */ S.createElement(i.tag, V({
     key: n
-  }, i.attr), Q(i.child)));
+  }, i.attr), ee(i.child)));
 }
-function z(e) {
-  return (i) => /* @__PURE__ */ O.createElement(Le, F({
-    attr: A({}, e.attr)
-  }, i), Q(e.child));
+function j(e) {
+  return (i) => /* @__PURE__ */ S.createElement(Le, A({
+    attr: V({}, e.attr)
+  }, i), ee(e.child));
 }
 function Le(e) {
   var i = (n) => {
     var {
       attr: r,
-      size: a,
-      title: p
-    } = e, d = be(e, Ie), l = a || n.size || "1em", o;
-    return n.className && (o = n.className), e.className && (o = (o ? o + " " : "") + e.className), /* @__PURE__ */ O.createElement("svg", F({
+      size: l,
+      title: m
+    } = e, d = be(e, Ie), a = l || n.size || "1em", p;
+    return n.className && (p = n.className), e.className && (p = (p ? p + " " : "") + e.className), /* @__PURE__ */ S.createElement("svg", A({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
     }, n.attr, r, d, {
-      className: o,
-      style: A(A({
+      className: p,
+      style: V(V({
         color: e.color || n.color
       }, n.style), e.style),
-      height: l,
-      width: l,
+      height: a,
+      width: a,
       xmlns: "http://www.w3.org/2000/svg"
-    }), p && /* @__PURE__ */ O.createElement("title", null, p), e.children);
+    }), m && /* @__PURE__ */ S.createElement("title", null, m), e.children);
   };
-  return Y !== void 0 ? /* @__PURE__ */ O.createElement(Y.Consumer, null, (n) => i(n)) : i(J);
+  return X !== void 0 ? /* @__PURE__ */ S.createElement(X.Consumer, null, (n) => i(n)) : i(Q);
 }
-function Ee(e) {
-  return z({ 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 Oe(e) {
+  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: [] }] })(e);
 }
-function G(e) {
-  return z({ 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 K(e) {
+  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: [] }] })(e);
 }
-function ee(e) {
-  return z({ 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 te(e) {
+  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: [] }] })(e);
 }
-const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_19663_37", He = "_disabled_19663_52", Te = "_menuItemIcon_19663_57", $e = "_menuItemText_19663_63", ze = "_overlay_19663_69", b = {
-  panel: Oe,
-  panelExiting: Be,
-  menuItem: Se,
+const Be = "_panel_19663_1", Se = "_panelExiting_19663_13", Te = "_menuItem_19663_37", He = "_disabled_19663_52", $e = "_menuItemIcon_19663_57", ze = "_menuItemText_19663_63", je = "_overlay_19663_69", I = {
+  panel: Be,
+  panelExiting: Se,
+  menuItem: Te,
   disabled: He,
-  menuItemIcon: Te,
-  menuItemText: $e,
-  overlay: ze
-}, je = (e) => {
+  menuItemIcon: $e,
+  menuItemText: ze,
+  overlay: je
+}, Re = (e) => {
   const n = e.currentTarget ?? e.target;
   if (n?.getBoundingClientRect) {
-    const a = n.getBoundingClientRect();
-    return { top: a.bottom + 2, left: a.left };
+    const l = n.getBoundingClientRect();
+    return { top: l.bottom + 2, left: l.left };
   }
   const r = e;
   return {
     top: (r.clientY ?? 0) + 2,
     left: r.clientX ?? 0
   };
-}, te = le(function({ model: i, popup: n = !0, onHide: r, onClick: a }, p) {
-  const [d, l] = E(!1), [o, C] = E(!1), [y, S] = E({ top: 0, left: 0 }), _ = T(null), v = H(() => {
-    o || C(!0);
-  }, [o]), B = H(
-    (c) => {
-      o && c.animationName.includes("menuOut") && (l(!1), C(!1), r?.());
+}, ne = ce(function({ model: i, popup: n = !0, onHide: r, onClick: l }, m) {
+  const [d, a] = N(!1), [p, c] = N(!1), [g, k] = N({ top: 0, left: 0 }), _ = z(null), f = H(() => {
+    p || c(!0);
+  }, [p]), P = H(
+    (o) => {
+      p && o.animationName.includes("menuOut") && (a(!1), c(!1), r?.());
     },
-    [o, r]
-  ), k = H((c) => {
-    S(je(c)), C(!1), l(!0);
-  }, []), x = H(
-    (c) => {
-      d ? v() : k(c);
+    [p, r]
+  ), M = H((o) => {
+    k(Re(o)), c(!1), a(!0);
+  }, []), T = H(
+    (o) => {
+      d ? f() : M(o);
     },
-    [d, v, k]
+    [d, f, M]
   );
-  ce(
-    p,
+  ae(
+    m,
     () => ({
-      show: k,
-      hide: v,
-      toggle: x
+      show: M,
+      hide: f,
+      toggle: T
     }),
-    [k, v, x]
+    [M, f, T]
   ), W(() => {
     if (!d) return;
-    const c = (u) => {
-      u.key === "Escape" && v();
-    }, s = (u) => {
+    const o = (s) => {
+      s.key === "Escape" && f();
+    }, x = (s) => {
       const h = _.current;
-      h && !h.contains(u.target) && v();
+      h && !h.contains(s.target) && f();
     };
-    return document.addEventListener("keydown", c), document.addEventListener("mousedown", s), () => {
-      document.removeEventListener("keydown", c), document.removeEventListener("mousedown", s);
+    return document.addEventListener("keydown", o), document.addEventListener("mousedown", x), () => {
+      document.removeEventListener("keydown", o), document.removeEventListener("mousedown", x);
     };
-  }, [d, v]);
-  const P = (c, s) => {
-    s.stopPropagation(), c.command?.({ originalEvent: s, item: c }), v();
-  }, I = (c, s) => {
-    const u = (h) => P(c, h);
-    return c.template ? /* @__PURE__ */ t(O.Fragment, { children: c.template(c, { onClick: u }) }, s) : /* @__PURE__ */ g(
+  }, [d, f]);
+  const y = (o, x) => {
+    x.stopPropagation(), o.command?.({ originalEvent: x, item: o }), f();
+  }, E = (o, x) => {
+    const s = (h) => y(o, h);
+    return o.template ? /* @__PURE__ */ t(S.Fragment, { children: o.template(o, { onClick: s }) }, x) : /* @__PURE__ */ C(
       "button",
       {
         type: "button",
-        className: `${b.menuItem} ${c.disabled && b.disabled}`,
+        className: `${I.menuItem} ${o.disabled && I.disabled}`,
         onClick: (h) => {
-          c.disabled || u(h);
+          o.disabled || s(h);
         },
         children: [
-          c.icon && /* @__PURE__ */ t("span", { className: b.menuItemIcon, children: c.icon }),
-          /* @__PURE__ */ t("span", { className: b.menuItemText, children: c.label })
+          o.icon && /* @__PURE__ */ t("span", { className: I.menuItemIcon, children: o.icon }),
+          /* @__PURE__ */ t("span", { className: I.menuItemText, children: o.label })
         ]
       },
-      s
+      x
     );
   };
-  return !d || !n ? null : ue(
-    /* @__PURE__ */ g(se, { children: [
+  return !d || !n ? null : pe(
+    /* @__PURE__ */ C(le, { children: [
       /* @__PURE__ */ t(
         "div",
         {
-          className: b.overlay,
+          className: I.overlay,
           "aria-hidden": !0,
-          onClick: () => v(),
-          onMouseDown: (c) => c.stopPropagation()
+          onClick: () => f(),
+          onMouseDown: (o) => o.stopPropagation()
         }
       ),
       /* @__PURE__ */ t(
         "div",
         {
           ref: _,
-          className: `${b.panel} ${o ? b.panelExiting : ""}`,
+          className: `${I.panel} ${p ? I.panelExiting : ""}`,
           role: "menu",
-          style: { top: y.top, left: y.left },
-          onAnimationEnd: B,
-          onClick: (c) => {
-            c.stopPropagation(), a?.(c);
+          style: { top: g.top, left: g.left },
+          onAnimationEnd: P,
+          onClick: (o) => {
+            o.stopPropagation(), l?.(o);
           },
-          children: i.map(I)
+          children: i.map(E)
         }
       )
     ] }),
     document.body
   );
-}), ne = () => (e, i) => /* @__PURE__ */ g(
+}), ie = () => (e, i) => /* @__PURE__ */ C(
   "button",
   {
-    className: b.menuItem,
+    className: I.menuItem,
     onClick: (n) => i.onClick(n),
     children: [
-      /* @__PURE__ */ t("span", { className: b.menuItemIcon, children: e.icon }),
-      /* @__PURE__ */ t("span", { className: b.menuItemText, children: e.label })
+      /* @__PURE__ */ t("span", { className: I.menuItemIcon, children: e.icon }),
+      /* @__PURE__ */ t("span", { className: I.menuItemText, children: e.label })
     ]
   }
-), K = ({
+), U = ({
   width: e = 16,
   height: i = 16,
   color: n = "#3B64A0"
-}) => /* @__PURE__ */ g(
+}) => /* @__PURE__ */ C(
   "svg",
   {
     width: e,
@@ -273,30 +273,30 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
       )
     ]
   }
-), ie = ae(
+), re = de(
   void 0
-), wt = ({ children: e }) => {
-  const [i, n] = E([]), r = H((d, l) => {
-    n((o) => (o.forEach((C) => {
-      C.current && C !== d && C.current.hide(l);
-    }), [])), d.current?.toggle(l), n([d]);
-  }, []), a = H((d) => {
-    n((l) => l.filter((o) => o !== d));
-  }, []), p = $(
+), xt = ({ children: e }) => {
+  const [i, n] = N([]), r = H((d, a) => {
+    n((p) => (p.forEach((c) => {
+      c.current && c !== d && c.current.hide(a);
+    }), [])), d.current?.toggle(a), n([d]);
+  }, []), l = H((d) => {
+    n((a) => a.filter((p) => p !== d));
+  }, []), m = $(
     () => ({
       openMenus: i,
       openMenu: r,
-      closeMenu: a
+      closeMenu: l
     }),
-    [i, r, a]
+    [i, r, l]
   );
-  return /* @__PURE__ */ t(ie.Provider, { value: p, children: e });
-}, Re = () => {
-  const e = de(ie);
+  return /* @__PURE__ */ t(re.Provider, { value: m, children: e });
+}, Fe = () => {
+  const e = ue(re);
   if (e === void 0)
     throw new Error("useMenuProvider must be used within a MenuProvider");
   return e;
-}, Fe = ({ color: e = "#E32012" }) => /* @__PURE__ */ g(
+}, We = ({ color: e = "#E32012" }) => /* @__PURE__ */ C(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -315,93 +315,93 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
       /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_3105_5367", children: /* @__PURE__ */ t("rect", { width: "16", height: "16", fill: "white" }) }) })
     ]
   }
-), re = (e) => {
+), oe = (e) => {
   const {
     isSet: i,
     isSelected: n,
     isFilter: r,
-    className: a,
-    title: p,
+    className: l,
+    title: m,
     icon: d,
-    contextMenuItems: l = void 0,
-    onClick: o,
-    onDeleteStep: C,
-    onUpdateFilter: y,
-    subtitle: S,
+    contextMenuItems: a = void 0,
+    onClick: p,
+    onDeleteStep: c,
+    onUpdateFilter: g,
+    subtitle: k,
     isInvalid: _,
-    idx: v
-  } = e, B = T(null), { openMenu: k, closeMenu: x } = Re(), P = ne(), I = $(() => [
+    idx: f
+  } = e, P = z(null), { openMenu: M, closeMenu: T } = Fe(), y = ie(), E = $(() => [
     {
       label: "Add Step Filter",
-      icon: /* @__PURE__ */ t("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ t(K, {}) }),
-      command: (m) => {
-        m?.originalEvent?.stopPropagation(), y && y(v);
+      icon: /* @__PURE__ */ t("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ t(U, {}) }),
+      command: (u) => {
+        u?.originalEvent?.stopPropagation(), g && g(f);
       },
-      template: P
+      template: y
     },
     {
       label: "Remove",
-      icon: /* @__PURE__ */ t(ee, { className: "mr-2", color: "#3B64A0", size: 18 }),
-      command: (m) => {
-        m?.originalEvent?.stopPropagation(), C && C(v);
+      icon: /* @__PURE__ */ t(te, { className: "mr-2", color: "#3B64A0", size: 18 }),
+      command: (u) => {
+        u?.originalEvent?.stopPropagation(), c && c(f);
       },
-      template: P
+      template: y
     }
-  ], [y, C, v]), c = $(() => l !== void 0 ? l : I, [l, I]), s = (m) => {
-    m.stopPropagation(), k(B, m);
-  }, u = $(() => n && _ ? f.step + " " + f.selectedInvalid : n ? f.step + " " + f.selected : i ? f.step + " " + f.isSet : _ ? f.step + " " + f.invalid : f.step, [i, n, _]), h = $(() => _ ? /* @__PURE__ */ t(Fe, { color: "#E32012" }) : d, [d, _]);
-  return /* @__PURE__ */ t("div", { className: f.container + " " + a, children: /* @__PURE__ */ g("div", { children: [
-    /* @__PURE__ */ g("div", { className: u, onClick: o, children: [
-      /* @__PURE__ */ g("div", { className: f.content, children: [
-        /* @__PURE__ */ t("div", { className: `${f.icon} ${_ && f.invalid}`, children: h }),
-        /* @__PURE__ */ t("div", { className: f.title, children: p })
+  ], [g, c, f]), o = $(() => a !== void 0 ? a : E, [a, E]), x = (u) => {
+    u.stopPropagation(), M(P, u);
+  }, s = $(() => n && _ ? v.step + " " + v.selectedInvalid : n ? v.step + " " + v.selected : i ? v.step + " " + v.isSet : _ ? v.step + " " + v.invalid : v.step, [i, n, _]), h = $(() => _ ? /* @__PURE__ */ t(We, { color: "#E32012" }) : d, [d, _]);
+  return /* @__PURE__ */ t("div", { className: v.container + " " + l, children: /* @__PURE__ */ C("div", { children: [
+    /* @__PURE__ */ C("div", { className: s, onClick: p, children: [
+      /* @__PURE__ */ C("div", { className: v.content, children: [
+        /* @__PURE__ */ t("div", { className: `${v.icon} ${_ && v.invalid}`, children: h }),
+        /* @__PURE__ */ t("div", { className: v.title, children: m })
       ] }),
       /* @__PURE__ */ t(
         "button",
         {
-          className: f.dotsButton,
-          onClick: s,
+          className: v.dotsButton,
+          onClick: x,
           "aria-haspopup": !0,
           "aria-label": "Step options",
           children: /* @__PURE__ */ t(
-            G,
+            K,
             {
-              className: f.dots,
+              className: v.dots,
               color: _ ? "#E32012" : "#3B64A0"
             }
           )
         }
       ),
       /* @__PURE__ */ t(
-        te,
+        ne,
         {
-          model: c,
+          model: o,
           popup: !0,
-          ref: B,
-          onClick: (m) => m.stopPropagation(),
-          onHide: () => x(B)
+          ref: P,
+          onClick: (u) => u.stopPropagation(),
+          onHide: () => T(P)
         }
       )
     ] }),
-    r && /* @__PURE__ */ g(
+    r && /* @__PURE__ */ C(
       "div",
       {
-        className: f.filterFlag,
+        className: v.filterFlag,
         role: "button",
         tabIndex: 0,
         onClick: () => {
-          y && y(v);
+          g && g(f);
         },
-        onKeyDown: (m) => {
-          (m.key === "Enter" || m.key === " ") && y && (m.preventDefault(), y(v));
+        onKeyDown: (u) => {
+          (u.key === "Enter" || u.key === " ") && g && (u.preventDefault(), g(f));
         },
         children: [
-          /* @__PURE__ */ t(K, { color: "#3B64A0" }),
+          /* @__PURE__ */ t(U, { color: "#3B64A0" }),
           /* @__PURE__ */ t("span", { children: "Filter" }),
           /* @__PURE__ */ t(
-            G,
+            K,
             {
-              className: f.dots,
+              className: v.dots,
               color: _ ? "#E32012" : "#3B64A0",
               style: { height: "10px" }
             }
@@ -409,10 +409,10 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
         ]
       }
     ),
-    S && /* @__PURE__ */ t("div", { className: f.subtitle, children: S })
+    k && /* @__PURE__ */ t("div", { className: v.subtitle, children: k })
   ] }) });
-}, Ae = () => /* @__PURE__ */ g("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
-  /* @__PURE__ */ g("g", { clipPath: "url(#clip0_6551_9169)", children: [
+}, Ae = () => /* @__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" })
   ] }),
@@ -420,20 +420,20 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
   /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_6551_9169", children: /* @__PURE__ */ t("rect", { width: "24", height: "24", rx: "12", fill: "white" }) }) })
 ] }), Ve = "_multipleTriggersIcon_oxhdi_1", De = {
   multipleTriggersIcon: Ve
-}, We = () => /* @__PURE__ */ t("div", { className: De.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" }) }) }), Ze = "_trigger_kfg1y_1", Ye = "_title_kfg1y_7", Xe = "_empty_kfg1y_15", Ge = "_triggerContainer_kfg1y_21", Ke = "_stepsContainer_kfg1y_25", Ue = "_stepItem_kfg1y_51", qe = "_curvesSvg_kfg1y_70", Je = "_centralNode_kfg1y_78", Qe = "_iconWrapper_kfg1y_104", et = "_fadeIn_kfg1y_127", tt = "_fadeOut_kfg1y_130", nt = "_operationContainer_kfg1y_134", w = {
-  trigger: Ze,
-  title: Ye,
+}, Ze = () => /* @__PURE__ */ t("div", { className: De.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" }) }) }), Ye = "_trigger_kfg1y_1", Ge = "_title_kfg1y_7", Xe = "_empty_kfg1y_15", qe = "_triggerContainer_kfg1y_21", Ke = "_stepsContainer_kfg1y_25", Ue = "_stepItem_kfg1y_51", Je = "_curvesSvg_kfg1y_70", Qe = "_centralNode_kfg1y_78", et = "_iconWrapper_kfg1y_104", tt = "_fadeIn_kfg1y_127", nt = "_fadeOut_kfg1y_130", it = "_operationContainer_kfg1y_134", w = {
+  trigger: Ye,
+  title: Ge,
   empty: Xe,
-  triggerContainer: Ge,
+  triggerContainer: qe,
   stepsContainer: Ke,
   stepItem: Ue,
-  curvesSvg: qe,
-  centralNode: Je,
-  iconWrapper: Qe,
-  fadeIn: et,
-  fadeOut: tt,
-  operationContainer: nt
-}, it = () => /* @__PURE__ */ t(
+  curvesSvg: Je,
+  centralNode: Qe,
+  iconWrapper: et,
+  fadeIn: tt,
+  fadeOut: nt,
+  operationContainer: it
+}, rt = () => /* @__PURE__ */ t(
   "div",
   {
     style: {
@@ -443,87 +443,89 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
       borderTop: "1px solid #a1bbdc"
     }
   }
-), rt = 80, j = 34, ot = ({
+), ot = 80, R = 34, st = ({
   steps: e,
   title: i,
   className: n,
   onDeleteTrigger: r,
-  onAddTrigger: a,
-  onSelectStep: p
+  onAddTrigger: l,
+  onSelectStep: m,
+  onCenterYUpdate: d
 }) => {
-  const d = T(null), l = T([]), [o, C] = E([]), [y, S] = E({ width: 0, height: 0 }), [_, v] = E(!1), [B, k] = E(!1), x = T(null);
-  if (W(() => {
+  const a = z(null), p = z([]), [c, g] = N([]), [k, _] = N({ width: 0, height: 0 }), [f, P] = N(!1), [M, T] = N(!1), y = z(null);
+  W(() => {
     const s = () => {
-      if (!d.current) return;
-      const u = [];
-      if (l.current.forEach((h, m) => {
-        if (h && d.current) {
-          const M = d.current.getBoundingClientRect(), N = h.getBoundingClientRect();
-          u.push({
-            id: e[m]?.id || `step-${m}`,
-            top: N.top - M.top,
-            right: N.right - M.left,
-            centerY: N.top - M.top + N.height / 2
+      if (!a.current) return;
+      const h = [];
+      if (p.current.forEach((u, L) => {
+        if (u && a.current) {
+          const O = a.current.getBoundingClientRect(), b = u.getBoundingClientRect();
+          h.push({
+            id: e[L]?.id || `step-${L}`,
+            top: b.top - O.top,
+            right: b.right - O.left,
+            centerY: b.top - O.top + b.height / 2
           });
         }
-      }), C(u), d.current && u.length > 0) {
-        const h = d.current.getBoundingClientRect(), m = Math.min(...u.map((L) => L.top)), M = l.current.filter(Boolean).map((L) => L?.offsetHeight || 68), N = Math.max(
-          ...u.map((L, oe) => L.top + (M[oe] || 68))
-        ), V = Math.max(...u.map((L) => L.right)) + 0, D = Math.max(
-          h.height,
-          N - m + 100
+      }), g(h), a.current && h.length > 0) {
+        const u = a.current.getBoundingClientRect(), L = Math.min(...h.map((B) => B.top)), O = p.current.filter(Boolean).map((B) => B?.offsetHeight || 68), b = Math.max(
+          ...h.map((B, se) => B.top + (O[se] || 68))
+        ), D = Math.max(...h.map((B) => B.right)) + 0, Z = Math.max(
+          u.height,
+          b - L + 100
         );
-        S({
-          width: V,
-          height: D
+        _({
+          width: D,
+          height: Z
         });
       }
     };
     return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
-  }, [e]), W(() => (_ ? (x.current && (clearTimeout(x.current), x.current = null), setTimeout(() => {
-    k(!0);
-  }, 0)) : x.current = setTimeout(() => {
-    k(!1);
+  }, [e]), W(() => (f ? (y.current && (clearTimeout(y.current), y.current = null), setTimeout(() => {
+    T(!0);
+  }, 0)) : y.current = setTimeout(() => {
+    T(!1);
   }, 140), () => {
-    x.current && clearTimeout(x.current);
-  }), [_]), e.length === 0)
-    return /* @__PURE__ */ g("div", { className: `${w.trigger} ${n || ""}`, children: [
+    y.current && clearTimeout(y.current);
+  }), [f]);
+  const E = c.length > 0 ? ot : 0, o = $(() => c.length > 1 ? c.reduce((s, h) => s + h.top + R, 0) / c.length : c.length === 1 ? c[0].top + R : 0, [c]);
+  if (W(() => {
+    d?.(o);
+  }, [o, d]), e.length === 0)
+    return /* @__PURE__ */ C("div", { className: `${w.trigger} ${n || ""}`, children: [
       i && /* @__PURE__ */ t("h3", { className: w.title, children: i }),
       /* @__PURE__ */ t("div", { className: w.empty, children: "No steps" })
     ] });
-  const P = o.length > 0 ? rt : 0;
-  let I = 0;
-  o.length > 1 ? I = o.reduce((s, u) => s + u.top + j, 0) / o.length : o.length === 1 && (I = o[0].top + j);
-  const c = (s, u, h, m) => {
-    const M = h - s, N = Math.min(M * 0.6, 60), Z = s + N, V = u, D = h - N;
-    return `M ${s} ${u} C ${Z} ${V}, ${D} ${m}, ${h} ${m}`;
+  const x = (s, h, u, L) => {
+    const O = u - s, b = Math.min(O * 0.6, 60), G = s + b, D = h, Z = u - b;
+    return `M ${s} ${h} C ${G} ${D}, ${Z} ${L}, ${u} ${L}`;
   };
-  return /* @__PURE__ */ g("div", { className: `${w.trigger} ${n || ""}`, ref: d, children: [
+  return /* @__PURE__ */ C("div", { className: `${w.trigger} ${n || ""}`, ref: a, children: [
     i && /* @__PURE__ */ t("h3", { className: w.title, children: i }),
-    /* @__PURE__ */ g("div", { className: w.triggerContainer, children: [
-      /* @__PURE__ */ t("div", { className: w.stepsContainer, children: e.map((s, u) => /* @__PURE__ */ t(
+    /* @__PURE__ */ C("div", { className: w.triggerContainer, children: [
+      /* @__PURE__ */ t("div", { className: w.stepsContainer, children: e.map((s, h) => /* @__PURE__ */ t(
         "div",
         {
-          ref: (h) => {
-            l.current[u] = h;
+          ref: (u) => {
+            p.current[h] = u;
           },
           children: /* @__PURE__ */ t(
-            re,
+            oe,
             {
               title: s.title,
               className: w.stepItem,
-              idx: u,
+              idx: h,
               isSet: s.isSet,
               isSelected: s.isSelected,
               isInvalid: s.isInvalid,
               isFilter: s.isFilter,
               icon: s.icon,
-              onClick: p ? () => p(s.id) : () => {
+              onClick: m ? () => m(s.id) : () => {
               },
               contextMenuItems: [
                 {
                   label: "Delete",
-                  icon: /* @__PURE__ */ t(ee, { className: "mr-2", color: "#3B64A0", size: 18 }),
+                  icon: /* @__PURE__ */ t(te, { className: "mr-2", color: "#3B64A0", size: 18 }),
                   command: () => {
                     r?.(s.id);
                   },
@@ -531,13 +533,13 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
                 },
                 {
                   label: "",
-                  template: () => /* @__PURE__ */ t(it, {})
+                  template: () => /* @__PURE__ */ t(rt, {})
                 },
                 {
                   label: "Add More Triggers",
-                  icon: /* @__PURE__ */ t(Ee, { className: "mr-2", color: "#3B64A0", size: 18 }),
+                  icon: /* @__PURE__ */ t(Oe, { className: "mr-2", color: "#3B64A0", size: 18 }),
                   command: () => {
-                    a?.();
+                    l?.();
                   }
                 }
               ]
@@ -546,18 +548,18 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
         },
         s.id
       )) }),
-      /* @__PURE__ */ t("div", { style: { position: "relative" }, children: o.length > 1 && /* @__PURE__ */ t(
+      /* @__PURE__ */ t("div", { style: { position: "relative" }, children: c.length > 1 && /* @__PURE__ */ t(
         "svg",
         {
           className: w.curvesSvg,
-          width: y.width,
-          height: y.height,
-          children: o.map((s) => {
-            const h = o.length === 1 ? o[0].top + j : s.top + j;
+          width: k.width,
+          height: k.height,
+          children: c.map((s) => {
+            const u = c.length === 1 ? c[0].top + R : s.top + R;
             return /* @__PURE__ */ t(
               "path",
               {
-                d: c(0, h, P, I),
+                d: x(0, u, E, o),
                 stroke: "#3b64a0",
                 strokeWidth: "2",
                 fill: "none",
@@ -568,22 +570,22 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
           })
         }
       ) }),
-      o.length > 1 ? /* @__PURE__ */ g("div", { style: { position: "relative", marginRight: "140px" }, children: [
+      c.length > 1 ? /* @__PURE__ */ C("div", { style: { position: "relative", marginRight: "140px" }, children: [
         /* @__PURE__ */ t(
           "div",
           {
             className: w.centralNode,
             style: {
-              "--node-x": `${P}px`,
-              "--node-y": `${I}px`
+              "--node-x": `${E}px`,
+              "--node-y": `${o}px`
             },
-            onMouseEnter: () => v(!0),
-            onMouseLeave: () => v(!1),
-            children: B ? /* @__PURE__ */ t(
+            onMouseEnter: () => P(!0),
+            onMouseLeave: () => P(!1),
+            children: M ? /* @__PURE__ */ t(
               "div",
               {
-                className: `${w.iconWrapper} ${_ ? w.fadeIn : w.fadeOut}`,
-                onClick: a,
+                className: `${w.iconWrapper} ${f ? w.fadeIn : w.fadeOut}`,
+                onClick: l,
                 children: /* @__PURE__ */ t(Ae, {})
               }
             ) : null
@@ -594,16 +596,16 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
           {
             className: w.operationContainer,
             style: {
-              "--op-x": `${P + 16}px`,
-              "--op-y": `${I}px`
+              "--op-x": `${E + 16}px`,
+              "--op-y": `${o}px`
             },
-            children: /* @__PURE__ */ t(We, {})
+            children: /* @__PURE__ */ t(Ze, {})
           }
         )
       ] }) : null
     ] })
   ] });
-}, st = () => /* @__PURE__ */ g(
+}, lt = () => /* @__PURE__ */ C(
   "svg",
   {
     width: "24",
@@ -632,26 +634,26 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
       )
     ]
   }
-), lt = "_stepLinkIcon_1enyn_1", ct = "_stepLinkLine_1enyn_17", at = "_stepLinkContainer_1enyn_39", R = {
-  stepLinkIcon: lt,
-  stepLinkLine: ct,
-  stepLinkContainer: at
+), ct = "_stepLinkIcon_a40q0_1", at = "_stepLinkLine_a40q0_17", dt = "_stepLinkContainer_a40q0_39", F = {
+  stepLinkIcon: ct,
+  stepLinkLine: at,
+  stepLinkContainer: dt
 };
-function dt(e) {
-  return z({ 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 ut(e) {
-  return z({ 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);
+  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: [] }] })(e);
 }
-const U = ({
+function pt(e) {
+  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: [] }] })(e);
+}
+const Y = ({
   onAddStep: e,
   onAddTrigger: i,
   index: n = 0
 }) => {
-  const r = ne(), a = T(null), p = [
+  const r = ie(), l = z(null), m = [
     {
       label: "Trigger",
-      icon: /* @__PURE__ */ t(ut, { className: "mr-2", color: "#3B64A0", size: 18 }),
+      icon: /* @__PURE__ */ t(pt, { className: "mr-2", color: "#3B64A0", size: 18 }),
       command: () => {
         i?.(n);
       },
@@ -659,150 +661,194 @@ const U = ({
     },
     {
       label: "Step",
-      icon: /* @__PURE__ */ t(dt, { className: "mr-2", color: "#3B64A0", size: 18 }),
+      icon: /* @__PURE__ */ t(ut, { className: "mr-2", color: "#3B64A0", size: 18 }),
       command: () => {
         e?.(n);
       },
       template: r
     }
-  ], d = (l) => {
-    a.current?.show(l);
+  ], d = (a) => {
+    l.current?.show(a);
   };
-  return /* @__PURE__ */ g("div", { className: R.stepLinkContainer, children: [
-    /* @__PURE__ */ t("div", { className: R.stepLinkLine }),
+  return /* @__PURE__ */ C("div", { className: F.stepLinkContainer, children: [
+    /* @__PURE__ */ t("div", { className: F.stepLinkLine }),
     /* @__PURE__ */ t(
       "div",
       {
-        className: R.stepLinkIcon,
+        className: F.stepLinkIcon,
         onClick: d,
         "aria-haspopup": !0,
-        children: /* @__PURE__ */ t(st, {})
+        children: /* @__PURE__ */ t(lt, {})
       }
     ),
     /* @__PURE__ */ t(
-      te,
+      ne,
       {
-        model: n === 0 ? p.splice(1) : p,
+        model: n === 0 ? m.splice(1) : m,
         popup: !0,
-        ref: a
+        ref: l
       }
     ),
-    /* @__PURE__ */ t("div", { className: R.stepLinkLine })
+    /* @__PURE__ */ t("div", { className: F.stepLinkLine })
   ] });
-}, pt = "_steps_1y1ls_1", ht = "_stepContainer_1y1ls_9", q = {
-  steps: pt,
-  stepContainer: ht
-}, mt = ({
+}, ht = "_steps_k2je4_1", mt = "_stepContainer_k2je4_8", J = {
+  steps: ht,
+  stepContainer: mt
+}, gt = ({
   steps: e,
-  className: i,
-  onDeleteStep: n,
-  onUpdateFilter: r,
-  onAddStep: a,
-  onAddTrigger: p,
-  onSelectStep: d
-}) => /* @__PURE__ */ t("div", { className: q.steps + (i ? " " + i : ""), children: /* @__PURE__ */ g(
-  "div",
-  {
-    style: {
-      display: "flex",
-      flexDirection: "row",
-      flex: 1,
-      minWidth: 0,
-      width: "100%"
-    },
-    children: [
-      /* @__PURE__ */ t(
-        U,
-        {
-          onAddStep: a,
-          onAddTrigger: p,
-          index: 0
+  centerY: i,
+  className: n,
+  onDeleteStep: r,
+  onUpdateFilter: l,
+  onAddStep: m,
+  onAddTrigger: d,
+  onSelectStep: a
+}) => {
+  const c = i !== void 0 ? { marginTop: Math.max(0, i - 37) } : void 0;
+  return e.length === 0 ? /* @__PURE__ */ C("div", { style: { width: "100%", marginTop: "23px", display: "flex", flexDirection: "row", flex: 1, minWidth: 0, ...c }, children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        style: {
+          flexGrow: 1,
+          flexShrink: 0,
+          flexBasis: "auto",
+          minWidth: 0,
+          height: "2px",
+          marginTop: "13.5px",
+          borderTop: "2px solid #3B64A0"
         }
-      ),
-      e.map((l, o) => /* @__PURE__ */ g("div", { className: q.stepContainer, children: [
+      }
+    ),
+    /* @__PURE__ */ t(
+      Y,
+      {
+        onAddStep: m,
+        onAddTrigger: d,
+        index: 0
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        style: {
+          flexGrow: 1,
+          flexShrink: 0,
+          flexBasis: "auto",
+          minWidth: 0,
+          height: "2px",
+          marginTop: "13.5px",
+          borderTop: "2px solid #3B64A0"
+        }
+      }
+    )
+  ] }) : /* @__PURE__ */ t("div", { className: J.steps + (n ? " " + n : ""), style: c, children: /* @__PURE__ */ C(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        flex: 1,
+        minWidth: 0,
+        width: "100%"
+      },
+      children: [
         /* @__PURE__ */ t(
-          re,
+          Y,
           {
-            idx: o,
-            title: l.title,
-            isSet: l.isSet,
-            isInvalid: l.isInvalid,
-            isFilter: l.isFilter,
-            isSelected: l.isSelected,
-            icon: l.icon,
-            onClick: () => {
-              d(l.id);
-            },
-            onDeleteStep: n ? (C) => n(e[C].id) : void 0,
-            onUpdateFilter: r ? (C) => r(e[C].id) : void 0
+            onAddStep: m,
+            onAddTrigger: d,
+            index: 0
           }
         ),
+        e.map((g, k) => /* @__PURE__ */ C("div", { className: J.stepContainer, children: [
+          /* @__PURE__ */ t(
+            oe,
+            {
+              idx: k,
+              title: g.title,
+              isSet: g.isSet,
+              isInvalid: g.isInvalid,
+              isFilter: g.isFilter,
+              isSelected: g.isSelected,
+              icon: g.icon,
+              onClick: () => {
+                a(g.id);
+              },
+              onDeleteStep: r ? (_) => r(e[_].id) : void 0,
+              onUpdateFilter: l ? (_) => l(e[_].id) : void 0
+            }
+          ),
+          /* @__PURE__ */ t(
+            Y,
+            {
+              onAddStep: m,
+              onAddTrigger: d,
+              index: k + 1
+            }
+          )
+        ] }, g.id)),
         /* @__PURE__ */ t(
-          U,
+          "div",
           {
-            onAddStep: a,
-            onAddTrigger: p,
-            index: o + 1
+            style: {
+              flexGrow: 1,
+              flexShrink: 0,
+              flexBasis: "auto",
+              minWidth: 0,
+              height: "2px",
+              borderTop: "2px solid #3B64A0",
+              marginTop: "36.5px"
+            }
           }
         )
-      ] }, l.id)),
-      /* @__PURE__ */ t(
-        "div",
-        {
-          style: {
-            flex: 1,
-            minWidth: 0,
-            height: "2px",
-            borderTop: "2px solid #3B64A0",
-            marginTop: "34px"
-          }
-        }
-      )
-    ]
-  }
-) }), gt = "_container_12c1g_1", Ct = {
-  container: gt
+      ]
+    }
+  ) });
+}, Ct = "_container_12c1g_1", ft = {
+  container: Ct
 }, yt = ({
   process: e,
-  onAddTrigger: i,
-  addMultipleTriggers: n,
-  onAddStep: r,
-  onEditTrigger: a,
-  onDeleteTrigger: p,
-  onDeleteStep: d,
-  onUpdateFilter: l,
-  onSelectStep: o
-}) => /* @__PURE__ */ g("div", { className: Ct.container, children: [
-  /* @__PURE__ */ t(
-    ot,
-    {
-      steps: e.triggers,
-      onAddTrigger: n,
-      onDeleteTrigger: p,
-      onEditTrigger: a,
-      onSelectStep: o
-    }
-  ),
-  /* @__PURE__ */ t(
-    mt,
-    {
-      steps: e.steps,
-      onDeleteStep: d,
-      onUpdateFilter: l,
-      onAddStep: r,
-      onAddTrigger: i,
-      onSelectStep: (C) => {
-        o(C);
+  addMultipleTriggers: i,
+  onAddStep: n,
+  onEditTrigger: r,
+  onDeleteTrigger: l,
+  onDeleteStep: m,
+  onUpdateFilter: d,
+  onSelectStep: a
+}) => {
+  const [p, c] = N(0);
+  return /* @__PURE__ */ C("div", { className: ft.container, children: [
+    /* @__PURE__ */ t(
+      st,
+      {
+        steps: e.triggers,
+        onAddTrigger: i,
+        onDeleteTrigger: l,
+        onEditTrigger: r,
+        onSelectStep: a,
+        onCenterYUpdate: c
       }
-    }
-  )
-] });
+    ),
+    /* @__PURE__ */ t(
+      gt,
+      {
+        steps: e.steps,
+        centerY: p,
+        onAddStep: n,
+        onDeleteStep: m,
+        onUpdateFilter: d,
+        onSelectStep: a
+      }
+    )
+  ] });
+};
 export {
-  te as Menu,
-  wt as MenuProvider,
+  ne as Menu,
+  xt as MenuProvider,
   yt as ProcessDiagram,
-  re as ProcessStep,
-  ot as Trigger,
-  Re as useMenuProvider
+  oe as ProcessStep,
+  st as Trigger,
+  Fe as useMenuProvider
 };
 //# sourceMappingURL=index.mjs.map