@emporix/process-diagram 1.0.6 → 1.0.7

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsxs as g, Fragment as se, jsx as t } from "react/jsx-runtime";
-import O, { forwardRef as ce, useState as E, useRef as T, useCallback as H, useImperativeHandle as le, useEffect as W, createContext as ae, useMemo as z, useContext as de } from "react";
+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,
@@ -20,18 +20,18 @@ var J = {
   className: void 0,
   style: void 0,
   attr: void 0
-}, Y = O.createContext && /* @__PURE__ */ O.createContext(J), ke = ["attr", "size", "title"];
-function Ie(e, i) {
+}, Y = O.createContext && /* @__PURE__ */ O.createContext(J), Ie = ["attr", "size", "title"];
+function be(e, i) {
   if (e == null) return {};
-  var n = be(e, i), r, d;
+  var n = ke(e, i), r, a;
   if (Object.getOwnPropertySymbols) {
     var p = Object.getOwnPropertySymbols(e);
-    for (d = 0; d < p.length; d++)
-      r = p[d], !(i.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
+    for (a = 0; a < p.length; a++)
+      r = p[a], !(i.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
   }
   return n;
 }
-function be(e, i) {
+function ke(e, i) {
   if (e == null) return {};
   var n = {};
   for (var r in e)
@@ -55,8 +55,8 @@ function X(e, i) {
   var n = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
     var r = Object.getOwnPropertySymbols(e);
-    i && (r = r.filter(function(d) {
-      return Object.getOwnPropertyDescriptor(e, d).enumerable;
+    i && (r = r.filter(function(a) {
+      return Object.getOwnPropertyDescriptor(e, a).enumerable;
     })), n.push.apply(n, r);
   }
   return n;
@@ -76,10 +76,10 @@ 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) {
-  var i = Le(e, "string");
+  var i = Me(e, "string");
   return typeof i == "symbol" ? i : i + "";
 }
-function Le(e, i) {
+function Me(e, i) {
   if (typeof e != "object" || !e) return e;
   var n = e[Symbol.toPrimitive];
   if (n !== void 0) {
@@ -94,44 +94,44 @@ function Q(e) {
     key: n
   }, i.attr), Q(i.child)));
 }
-function j(e) {
-  return (i) => /* @__PURE__ */ O.createElement(Me, F({
+function z(e) {
+  return (i) => /* @__PURE__ */ O.createElement(Le, F({
     attr: A({}, e.attr)
   }, i), Q(e.child));
 }
-function Me(e) {
+function Le(e) {
   var i = (n) => {
     var {
       attr: r,
-      size: d,
+      size: a,
       title: p
-    } = e, l = Ie(e, ke), c = d || n.size || "1em", o;
+    } = 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({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
-    }, n.attr, r, l, {
+    }, n.attr, r, d, {
       className: o,
       style: A(A({
         color: e.color || n.color
       }, n.style), e.style),
-      height: c,
-      width: c,
+      height: l,
+      width: l,
       xmlns: "http://www.w3.org/2000/svg"
     }), p && /* @__PURE__ */ O.createElement("title", null, p), e.children);
   };
   return Y !== void 0 ? /* @__PURE__ */ O.createElement(Y.Consumer, null, (n) => i(n)) : i(J);
 }
 function Ee(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);
+  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 G(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);
+  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 ee(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);
+  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);
 }
-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", I = {
+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,
@@ -142,93 +142,93 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
 }, je = (e) => {
   const n = e.currentTarget ?? e.target;
   if (n?.getBoundingClientRect) {
-    const d = n.getBoundingClientRect();
-    return { top: d.bottom + 2, left: d.left };
+    const a = n.getBoundingClientRect();
+    return { top: a.bottom + 2, left: a.left };
   }
   const r = e;
   return {
     top: (r.clientY ?? 0) + 2,
     left: r.clientX ?? 0
   };
-}, te = ce(function({ model: i, popup: n = !0, onHide: r, onClick: d }, p) {
-  const [l, c] = E(!1), [o, C] = E(!1), [y, S] = E({ top: 0, left: 0 }), _ = T(null), v = H(() => {
+}, 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(
-    (a) => {
-      o && a.animationName.includes("menuOut") && (c(!1), C(!1), r?.());
+    (c) => {
+      o && c.animationName.includes("menuOut") && (l(!1), C(!1), r?.());
     },
     [o, r]
-  ), b = H((a) => {
-    S(je(a)), C(!1), c(!0);
+  ), k = H((c) => {
+    S(je(c)), C(!1), l(!0);
   }, []), x = H(
-    (a) => {
-      l ? v() : b(a);
+    (c) => {
+      d ? v() : k(c);
     },
-    [l, v, b]
+    [d, v, k]
   );
-  le(
+  ce(
     p,
     () => ({
-      show: b,
+      show: k,
       hide: v,
       toggle: x
     }),
-    [b, v, x]
+    [k, v, x]
   ), W(() => {
-    if (!l) return;
-    const a = (u) => {
+    if (!d) return;
+    const c = (u) => {
       u.key === "Escape" && v();
     }, s = (u) => {
       const h = _.current;
       h && !h.contains(u.target) && v();
     };
-    return document.addEventListener("keydown", a), document.addEventListener("mousedown", s), () => {
-      document.removeEventListener("keydown", a), document.removeEventListener("mousedown", s);
+    return document.addEventListener("keydown", c), document.addEventListener("mousedown", s), () => {
+      document.removeEventListener("keydown", c), document.removeEventListener("mousedown", s);
     };
-  }, [l, v]);
-  const P = (a, s) => {
-    s.stopPropagation(), a.command?.({ originalEvent: s, item: a }), v();
-  }, k = (a, s) => {
-    const u = (h) => P(a, h);
-    return a.template ? /* @__PURE__ */ t(O.Fragment, { children: a.template(a, { onClick: u }) }, s) : /* @__PURE__ */ g(
+  }, [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(
       "button",
       {
         type: "button",
-        className: `${I.menuItem} ${a.disabled && I.disabled}`,
+        className: `${b.menuItem} ${c.disabled && b.disabled}`,
         onClick: (h) => {
-          a.disabled || u(h);
+          c.disabled || u(h);
         },
         children: [
-          a.icon && /* @__PURE__ */ t("span", { className: I.menuItemIcon, children: a.icon }),
-          /* @__PURE__ */ t("span", { className: I.menuItemText, children: a.label })
+          c.icon && /* @__PURE__ */ t("span", { className: b.menuItemIcon, children: c.icon }),
+          /* @__PURE__ */ t("span", { className: b.menuItemText, children: c.label })
         ]
       },
       s
     );
   };
-  return !l || !n ? null : ue(
+  return !d || !n ? null : ue(
     /* @__PURE__ */ g(se, { children: [
       /* @__PURE__ */ t(
         "div",
         {
-          className: I.overlay,
+          className: b.overlay,
           "aria-hidden": !0,
           onClick: () => v(),
-          onMouseDown: (a) => a.stopPropagation()
+          onMouseDown: (c) => c.stopPropagation()
         }
       ),
       /* @__PURE__ */ t(
         "div",
         {
           ref: _,
-          className: `${I.panel} ${o ? I.panelExiting : ""}`,
+          className: `${b.panel} ${o ? b.panelExiting : ""}`,
           role: "menu",
           style: { top: y.top, left: y.left },
           onAnimationEnd: B,
-          onClick: (a) => {
-            a.stopPropagation(), d?.(a);
+          onClick: (c) => {
+            c.stopPropagation(), a?.(c);
           },
-          children: i.map(k)
+          children: i.map(I)
         }
       )
     ] }),
@@ -237,11 +237,11 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
 }), ne = () => (e, i) => /* @__PURE__ */ g(
   "button",
   {
-    className: I.menuItem,
+    className: b.menuItem,
     onClick: (n) => i.onClick(n),
     children: [
-      /* @__PURE__ */ t("span", { className: I.menuItemIcon, children: e.icon }),
-      /* @__PURE__ */ t("span", { className: I.menuItemText, children: e.label })
+      /* @__PURE__ */ t("span", { className: b.menuItemIcon, children: e.icon }),
+      /* @__PURE__ */ t("span", { className: b.menuItemText, children: e.label })
     ]
   }
 ), K = ({
@@ -275,20 +275,20 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
   }
 ), ie = ae(
   void 0
-), yt = ({ children: e }) => {
-  const [i, n] = E([]), r = H((l, c) => {
+), wt = ({ children: e }) => {
+  const [i, n] = E([]), r = H((d, l) => {
     n((o) => (o.forEach((C) => {
-      C.current && C !== l && C.current.hide(c);
-    }), [])), l.current?.toggle(c), n([l]);
-  }, []), d = H((l) => {
-    n((c) => c.filter((o) => o !== l));
-  }, []), p = z(
+      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 = $(
     () => ({
       openMenus: i,
       openMenu: r,
-      closeMenu: d
+      closeMenu: a
     }),
-    [i, r, d]
+    [i, r, a]
   );
   return /* @__PURE__ */ t(ie.Provider, { value: p, children: e });
 }, Re = () => {
@@ -320,17 +320,17 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
     isSet: i,
     isSelected: n,
     isFilter: r,
-    className: d,
+    className: a,
     title: p,
-    icon: l,
-    contextMenuItems: c = void 0,
+    icon: d,
+    contextMenuItems: l = void 0,
     onClick: o,
     onDeleteStep: C,
     onUpdateFilter: y,
     subtitle: S,
     isInvalid: _,
     idx: v
-  } = e, B = T(null), { openMenu: b, closeMenu: x } = Re(), P = ne(), k = z(() => [
+  } = e, B = T(null), { openMenu: k, closeMenu: x } = Re(), P = ne(), I = $(() => [
     {
       label: "Add Step Filter",
       icon: /* @__PURE__ */ t("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ t(K, {}) }),
@@ -347,10 +347,10 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
       },
       template: P
     }
-  ], [y, C, v]), a = z(() => c !== void 0 ? c : k, [c, k]), s = (m) => {
-    m.stopPropagation(), b(B, m);
-  }, u = z(() => n && _ ? f.step + " " + f.selectedInvalid : n ? f.step + " " + f.selected : i ? f.step + " " + f.isSet : _ ? f.step + " " + f.invalid : f.step, [i, n, _]), h = z(() => _ ? /* @__PURE__ */ t(Fe, { color: "#E32012" }) : l, [l, _]);
-  return /* @__PURE__ */ t("div", { className: f.container + " " + d, children: /* @__PURE__ */ g("div", { children: [
+  ], [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 }),
@@ -375,7 +375,7 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
       /* @__PURE__ */ t(
         te,
         {
-          model: a,
+          model: c,
           popup: !0,
           ref: B,
           onClick: (m) => m.stopPropagation(),
@@ -443,33 +443,33 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
       borderTop: "1px solid #a1bbdc"
     }
   }
-), rt = 80, R = 34, ot = ({
+), rt = 80, j = 34, ot = ({
   steps: e,
   title: i,
   className: n,
   onDeleteTrigger: r,
-  onAddTrigger: d,
+  onAddTrigger: a,
   onSelectStep: p
 }) => {
-  const l = T(null), c = T([]), [o, C] = E([]), [y, S] = E({ width: 0, height: 0 }), [_, v] = E(!1), [B, b] = E(!1), x = T(null);
+  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 s = () => {
-      if (!l.current) return;
+      if (!d.current) return;
       const u = [];
-      if (c.current.forEach((h, m) => {
-        if (h && l.current) {
-          const L = l.current.getBoundingClientRect(), N = h.getBoundingClientRect();
+      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 - L.top,
-            right: N.right - L.left,
-            centerY: N.top - L.top + N.height / 2
+            top: N.top - M.top,
+            right: N.right - M.left,
+            centerY: N.top - M.top + N.height / 2
           });
         }
-      }), C(u), l.current && u.length > 0) {
-        const h = l.current.getBoundingClientRect(), m = Math.min(...u.map((M) => M.top)), L = c.current.filter(Boolean).map((M) => M?.offsetHeight || 68), N = Math.max(
-          ...u.map((M, oe) => M.top + (L[oe] || 68))
-        ), V = Math.max(...u.map((M) => M.right)) + 0, D = Math.max(
+      }), 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
         );
@@ -481,9 +481,9 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
     };
     return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
   }, [e]), W(() => (_ ? (x.current && (clearTimeout(x.current), x.current = null), setTimeout(() => {
-    b(!0);
+    k(!0);
   }, 0)) : x.current = setTimeout(() => {
-    b(!1);
+    k(!1);
   }, 140), () => {
     x.current && clearTimeout(x.current);
   }), [_]), e.length === 0)
@@ -492,20 +492,20 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
       /* @__PURE__ */ t("div", { className: w.empty, children: "No steps" })
     ] });
   const P = o.length > 0 ? rt : 0;
-  let k = 0;
-  o.length > 1 ? k = o.reduce((s, u) => s + u.top + R, 0) / o.length : o.length === 1 && (k = o[0].top + R);
-  const a = (s, u, h, m) => {
-    const L = h - s, N = Math.min(L * 0.6, 60), Z = s + N, V = u, D = h - N;
+  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}`;
   };
-  return /* @__PURE__ */ g("div", { className: `${w.trigger} ${n || ""}`, ref: l, children: [
+  return /* @__PURE__ */ g("div", { className: `${w.trigger} ${n || ""}`, ref: d, 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(
         "div",
         {
           ref: (h) => {
-            c.current[u] = h;
+            l.current[u] = h;
           },
           children: /* @__PURE__ */ t(
             re,
@@ -537,7 +537,7 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
                   label: "Add More Triggers",
                   icon: /* @__PURE__ */ t(Ee, { className: "mr-2", color: "#3B64A0", size: 18 }),
                   command: () => {
-                    d?.();
+                    a?.();
                   }
                 }
               ]
@@ -553,11 +553,11 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
           width: y.width,
           height: y.height,
           children: o.map((s) => {
-            const h = o.length === 1 ? o[0].top + R : s.top + R;
+            const h = o.length === 1 ? o[0].top + j : s.top + j;
             return /* @__PURE__ */ t(
               "path",
               {
-                d: a(0, h, P, k),
+                d: c(0, h, P, I),
                 stroke: "#3b64a0",
                 strokeWidth: "2",
                 fill: "none",
@@ -575,7 +575,7 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
             className: w.centralNode,
             style: {
               "--node-x": `${P}px`,
-              "--node-y": `${k}px`
+              "--node-y": `${I}px`
             },
             onMouseEnter: () => v(!0),
             onMouseLeave: () => v(!1),
@@ -583,7 +583,7 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
               "div",
               {
                 className: `${w.iconWrapper} ${_ ? w.fadeIn : w.fadeOut}`,
-                onClick: d,
+                onClick: a,
                 children: /* @__PURE__ */ t(Ae, {})
               }
             ) : null
@@ -595,7 +595,7 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
             className: w.operationContainer,
             style: {
               "--op-x": `${P + 16}px`,
-              "--op-y": `${k}px`
+              "--op-y": `${I}px`
             },
             children: /* @__PURE__ */ t(We, {})
           }
@@ -632,51 +632,49 @@ const Oe = "_panel_19663_1", Be = "_panelExiting_19663_13", Se = "_menuItem_1966
       )
     ]
   }
-), ct = "_stepLink_1ugcc_1", lt = "_stepLinkIcon_1ugcc_8", at = "_stepLinkLine_1ugcc_24", dt = "_stepLinkContainer_1ugcc_46", $ = {
-  stepLink: ct,
+), lt = "_stepLinkIcon_1enyn_1", ct = "_stepLinkLine_1enyn_17", at = "_stepLinkContainer_1enyn_39", R = {
   stepLinkIcon: lt,
-  stepLinkLine: at,
-  stepLinkContainer: dt
+  stepLinkLine: ct,
+  stepLinkContainer: at
 };
-function ut(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);
+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 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);
+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);
 }
 const U = ({
-  style: e,
-  onAddStep: i,
-  onAddTrigger: n,
-  index: r = 0
+  onAddStep: e,
+  onAddTrigger: i,
+  index: n = 0
 }) => {
-  const d = ne(), p = T(null), l = [
+  const r = ne(), a = T(null), p = [
     {
       label: "Trigger",
-      icon: /* @__PURE__ */ t(pt, { className: "mr-2", color: "#3B64A0", size: 18 }),
+      icon: /* @__PURE__ */ t(ut, { className: "mr-2", color: "#3B64A0", size: 18 }),
       command: () => {
-        n?.(r);
+        i?.(n);
       },
-      template: d
+      template: r
     },
     {
       label: "Step",
-      icon: /* @__PURE__ */ t(ut, { className: "mr-2", color: "#3B64A0", size: 18 }),
+      icon: /* @__PURE__ */ t(dt, { className: "mr-2", color: "#3B64A0", size: 18 }),
       command: () => {
-        i?.(r);
+        e?.(n);
       },
-      template: d
+      template: r
     }
-  ], c = (o) => {
-    p.current?.show(o);
+  ], d = (l) => {
+    a.current?.show(l);
   };
-  return /* @__PURE__ */ t("div", { className: $.stepLink, style: e, children: /* @__PURE__ */ g("main", { className: $.stepLinkContainer, children: [
-    /* @__PURE__ */ t("div", { className: $.stepLinkLine }),
+  return /* @__PURE__ */ g("div", { className: R.stepLinkContainer, children: [
+    /* @__PURE__ */ t("div", { className: R.stepLinkLine }),
     /* @__PURE__ */ t(
       "div",
       {
-        className: $.stepLinkIcon,
-        onClick: c,
+        className: R.stepLinkIcon,
+        onClick: d,
         "aria-haspopup": !0,
         children: /* @__PURE__ */ t(st, {})
       }
@@ -684,25 +682,25 @@ const U = ({
     /* @__PURE__ */ t(
       te,
       {
-        model: r === 0 ? l.splice(1) : l,
+        model: n === 0 ? p.splice(1) : p,
         popup: !0,
-        ref: p
+        ref: a
       }
     ),
-    /* @__PURE__ */ t("div", { className: $.stepLinkLine })
-  ] }) });
-}, ht = "_steps_1y1ls_1", mt = "_stepContainer_1y1ls_9", q = {
-  steps: ht,
-  stepContainer: mt
-}, gt = ({
+    /* @__PURE__ */ t("div", { className: R.stepLinkLine })
+  ] });
+}, pt = "_steps_1y1ls_1", ht = "_stepContainer_1y1ls_9", q = {
+  steps: pt,
+  stepContainer: ht
+}, mt = ({
   steps: e,
   className: i,
   onDeleteStep: n,
   onUpdateFilter: r,
-  onAddStep: d,
+  onAddStep: a,
   onAddTrigger: p,
-  onSelectStep: l
-}) => /* @__PURE__ */ t("div", { className: q.steps + (i ? " " + i : ""), style: { alignItems: e.length > 0 ? "center" : "start" }, children: /* @__PURE__ */ g(
+  onSelectStep: d
+}) => /* @__PURE__ */ t("div", { className: q.steps + (i ? " " + i : ""), children: /* @__PURE__ */ g(
   "div",
   {
     style: {
@@ -716,24 +714,24 @@ const U = ({
       /* @__PURE__ */ t(
         U,
         {
-          onAddStep: d,
+          onAddStep: a,
           onAddTrigger: p,
           index: 0
         }
       ),
-      e.map((c, o) => /* @__PURE__ */ g("div", { className: q.stepContainer, children: [
+      e.map((l, o) => /* @__PURE__ */ g("div", { className: q.stepContainer, children: [
         /* @__PURE__ */ t(
           re,
           {
             idx: o,
-            title: c.title,
-            isSet: c.isSet,
-            isInvalid: c.isInvalid,
-            isFilter: c.isFilter,
-            isSelected: c.isSelected,
-            icon: c.icon,
+            title: l.title,
+            isSet: l.isSet,
+            isInvalid: l.isInvalid,
+            isFilter: l.isFilter,
+            isSelected: l.isSelected,
+            icon: l.icon,
             onClick: () => {
-              l(c.id);
+              d(l.id);
             },
             onDeleteStep: n ? (C) => n(e[C].id) : void 0,
             onUpdateFilter: r ? (C) => r(e[C].id) : void 0
@@ -742,12 +740,12 @@ const U = ({
         /* @__PURE__ */ t(
           U,
           {
-            onAddStep: d,
+            onAddStep: a,
             onAddTrigger: p,
             index: o + 1
           }
         )
-      ] }, c.id)),
+      ] }, l.id)),
       /* @__PURE__ */ t(
         "div",
         {
@@ -762,35 +760,35 @@ const U = ({
       )
     ]
   }
-) }), Ct = "_container_12c1g_1", ft = {
-  container: Ct
-}, xt = ({
+) }), gt = "_container_12c1g_1", Ct = {
+  container: gt
+}, yt = ({
   process: e,
   onAddTrigger: i,
   addMultipleTriggers: n,
   onAddStep: r,
-  onEditTrigger: d,
+  onEditTrigger: a,
   onDeleteTrigger: p,
-  onDeleteStep: l,
-  onUpdateFilter: c,
+  onDeleteStep: d,
+  onUpdateFilter: l,
   onSelectStep: o
-}) => /* @__PURE__ */ g("div", { className: ft.container, children: [
+}) => /* @__PURE__ */ g("div", { className: Ct.container, children: [
   /* @__PURE__ */ t(
     ot,
     {
       steps: e.triggers,
       onAddTrigger: n,
       onDeleteTrigger: p,
-      onEditTrigger: d,
+      onEditTrigger: a,
       onSelectStep: o
     }
   ),
   /* @__PURE__ */ t(
-    gt,
+    mt,
     {
       steps: e.steps,
-      onDeleteStep: l,
-      onUpdateFilter: c,
+      onDeleteStep: d,
+      onUpdateFilter: l,
       onAddStep: r,
       onAddTrigger: i,
       onSelectStep: (C) => {
@@ -801,8 +799,8 @@ const U = ({
 ] });
 export {
   te as Menu,
-  yt as MenuProvider,
-  xt as ProcessDiagram,
+  wt as MenuProvider,
+  yt as ProcessDiagram,
   re as ProcessStep,
   ot as Trigger,
   Re as useMenuProvider