@emporix/process-diagram 1.0.3 → 1.0.5

package/dist/index.mjs

@@ -1,18 +1,18 @@
 import { jsxs as C, Fragment as s1, jsx as t } from "react/jsx-runtime";
-import O, { forwardRef as l1, useState as E, useRef as $, useCallback as H, useImperativeHandle as c1, useEffect as V, createContext as a1, useMemo as j, useContext as d1 } from "react";
+import O, { forwardRef as c1, useState as E, useRef as T, useCallback as H, useImperativeHandle as l1, useEffect as V, createContext as a1, useMemo as j, useContext as d1 } from "react";
 import { createPortal as u1 } from "react-dom";
-const p1 = "_container_2n6dx_1", h1 = "_step_2n6dx_8", m1 = "_selected_2n6dx_22", C1 = "_selectedInvalid_2n6dx_28", g1 = "_isSet_2n6dx_34", f1 = "_invalid_2n6dx_38", v1 = "_filterFlag_2n6dx_44", _1 = "_title_2n6dx_70", x1 = "_icon_2n6dx_87", w1 = "_content_2n6dx_105", y1 = "_dotsButton_2n6dx_111", f = {
+const p1 = "_container_1rumk_1", m1 = "_step_1rumk_8", h1 = "_selected_1rumk_23", C1 = "_selectedInvalid_1rumk_29", g1 = "_isSet_1rumk_35", f1 = "_invalid_1rumk_39", v1 = "_filterFlag_1rumk_45", _1 = "_title_1rumk_71", y1 = "_icon_1rumk_88", w1 = "_content_1rumk_106", k1 = "_dotsButton_1rumk_112", f = {
   container: p1,
-  step: h1,
-  selected: m1,
+  step: m1,
+  selected: h1,
   selectedInvalid: C1,
   isSet: g1,
   invalid: f1,
   filterFlag: v1,
   title: _1,
-  icon: x1,
+  icon: y1,
   content: w1,
-  dotsButton: y1
+  dotsButton: k1
 };
 var J = {
   color: void 0,
@@ -20,18 +20,18 @@ var J = {
   className: void 0,
   style: void 0,
   attr: void 0
-}, Y = O.createContext && /* @__PURE__ */ O.createContext(J), I1 = ["attr", "size", "title"];
-function b1(e, i) {
+}, Y = O.createContext && /* @__PURE__ */ O.createContext(J), x1 = ["attr", "size", "title"];
+function I1(e, i) {
   if (e == null) return {};
-  var n = N1(e, i), r, a;
+  var n = b1(e, i), r, d;
   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]);
+    for (d = 0; d < p.length; d++)
+      r = p[d], !(i.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
   }
   return n;
 }
-function N1(e, i) {
+function b1(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(a) {
-      return Object.getOwnPropertyDescriptor(e, a).enumerable;
+    i && (r = r.filter(function(d) {
+      return Object.getOwnPropertyDescriptor(e, d).enumerable;
     })), n.push.apply(n, r);
   }
   return n;
@@ -65,14 +65,14 @@ function z(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) {
-      k1(e, r, n[r]);
+      N1(e, r, n[r]);
     }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : X(Object(n)).forEach(function(r) {
       Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(n, r));
     });
   }
   return e;
 }
-function k1(e, i, n) {
+function N1(e, i, n) {
   return i = L1(i), i in e ? Object.defineProperty(e, i, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : e[i] = n, e;
 }
 function L1(e) {
@@ -103,20 +103,20 @@ function P1(e) {
   var i = (n) => {
     var {
       attr: r,
-      size: a,
+      size: d,
       title: p
-    } = e, d = b1(e, I1), l = a || n.size || "1em", o;
+    } = e, l = I1(e, x1), c = d || n.size || "1em", o;
     return n.className && (o = n.className), e.className && (o = (o ? o + " " : "") + e.className), /* @__PURE__ */ O.createElement("svg", A({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
-    }, n.attr, r, d, {
+    }, n.attr, r, l, {
       className: o,
       style: z(z({
         color: e.color || n.color
       }, n.style), e.style),
-      height: l,
-      width: l,
+      height: c,
+      width: c,
       xmlns: "http://www.w3.org/2000/svg"
     }), p && /* @__PURE__ */ O.createElement("title", null, p), e.children);
   };
@@ -131,104 +131,104 @@ function G(e) {
 function e1(e) {
   return R({ 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 O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_19663_37", H1 = "_disabled_19663_52", $1 = "_menuItemIcon_19663_57", T1 = "_menuItemText_19663_63", j1 = "_overlay_19663_69", b = {
+const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_19663_37", H1 = "_disabled_19663_52", T1 = "_menuItemIcon_19663_57", $1 = "_menuItemText_19663_63", j1 = "_overlay_19663_69", I = {
   panel: O1,
   panelExiting: B1,
   menuItem: S1,
   disabled: H1,
-  menuItemIcon: $1,
-  menuItemText: T1,
+  menuItemIcon: T1,
+  menuItemText: $1,
   overlay: j1
 }, R1 = (e) => {
   const n = e.currentTarget ?? e.target;
   if (n?.getBoundingClientRect) {
-    const a = n.getBoundingClientRect();
-    return { top: a.bottom + 2, left: a.left };
+    const d = n.getBoundingClientRect();
+    return { top: d.bottom + 2, left: d.left };
   }
   const r = e;
   return {
     top: (r.clientY ?? 0) + 2,
     left: r.clientX ?? 0
   };
-}, t1 = l1(function({ model: i, popup: n = !0, onHide: r, onClick: a }, p) {
-  const [d, l] = E(!1), [o, g] = E(!1), [w, S] = E({ top: 0, left: 0 }), _ = $(null), v = H(() => {
+}, t1 = c1(function({ model: i, popup: n = !0, onHide: r, onClick: d }, p) {
+  const [l, c] = E(!1), [o, g] = E(!1), [w, S] = E({ top: 0, left: 0 }), _ = T(null), v = H(() => {
     o || g(!0);
   }, [o]), B = H(
-    (c) => {
-      o && c.animationName.includes("menuOut") && (l(!1), g(!1), r?.());
+    (a) => {
+      o && a.animationName.includes("menuOut") && (c(!1), g(!1), r?.());
     },
     [o, r]
-  ), N = H((c) => {
-    S(R1(c)), g(!1), l(!0);
-  }, []), y = H(
-    (c) => {
-      d ? v() : N(c);
+  ), b = H((a) => {
+    S(R1(a)), g(!1), c(!0);
+  }, []), k = H(
+    (a) => {
+      l ? v() : b(a);
     },
-    [d, v, N]
+    [l, v, b]
   );
-  c1(
+  l1(
     p,
     () => ({
-      show: N,
+      show: b,
       hide: v,
-      toggle: y
+      toggle: k
     }),
-    [N, v, y]
+    [b, v, k]
   ), V(() => {
-    if (!d) return;
-    const c = (u) => {
+    if (!l) return;
+    const a = (u) => {
       u.key === "Escape" && v();
     }, s = (u) => {
-      const h = _.current;
-      h && !h.contains(u.target) && v();
+      const m = _.current;
+      m && !m.contains(u.target) && v();
     };
-    return document.addEventListener("keydown", c), document.addEventListener("mousedown", s), () => {
-      document.removeEventListener("keydown", c), document.removeEventListener("mousedown", s);
+    return document.addEventListener("keydown", a), document.addEventListener("mousedown", s), () => {
+      document.removeEventListener("keydown", a), document.removeEventListener("mousedown", s);
     };
-  }, [d, v]);
-  const L = (c, s) => {
-    s.stopPropagation(), c.command?.({ originalEvent: s, item: c }), v();
-  }, I = (c, s) => {
-    const u = (h) => L(c, h);
-    return c.template ? /* @__PURE__ */ t(O.Fragment, { children: c.template(c, { onClick: u }) }, s) : /* @__PURE__ */ C(
+  }, [l, v]);
+  const L = (a, s) => {
+    s.stopPropagation(), a.command?.({ originalEvent: s, item: a }), v();
+  }, x = (a, s) => {
+    const u = (m) => L(a, m);
+    return a.template ? /* @__PURE__ */ t(O.Fragment, { children: a.template(a, { onClick: u }) }, s) : /* @__PURE__ */ C(
       "button",
       {
         type: "button",
-        className: `${b.menuItem} ${c.disabled && b.disabled}`,
-        onClick: (h) => {
-          c.disabled || u(h);
+        className: `${I.menuItem} ${a.disabled && I.disabled}`,
+        onClick: (m) => {
+          a.disabled || u(m);
         },
         children: [
-          c.icon && /* @__PURE__ */ t("span", { className: b.menuItemIcon, children: c.icon }),
-          /* @__PURE__ */ t("span", { className: b.menuItemText, children: c.label })
+          a.icon && /* @__PURE__ */ t("span", { className: I.menuItemIcon, children: a.icon }),
+          /* @__PURE__ */ t("span", { className: I.menuItemText, children: a.label })
         ]
       },
       s
     );
   };
-  return !d || !n ? null : u1(
+  return !l || !n ? null : u1(
     /* @__PURE__ */ C(s1, { children: [
       /* @__PURE__ */ t(
         "div",
         {
-          className: b.overlay,
+          className: I.overlay,
           "aria-hidden": !0,
           onClick: () => v(),
-          onMouseDown: (c) => c.stopPropagation()
+          onMouseDown: (a) => a.stopPropagation()
         }
       ),
       /* @__PURE__ */ t(
         "div",
         {
           ref: _,
-          className: `${b.panel} ${o ? b.panelExiting : ""}`,
+          className: `${I.panel} ${o ? I.panelExiting : ""}`,
           role: "menu",
           style: { top: w.top, left: w.left },
           onAnimationEnd: B,
-          onClick: (c) => {
-            c.stopPropagation(), a?.(c);
+          onClick: (a) => {
+            a.stopPropagation(), d?.(a);
           },
-          children: i.map(I)
+          children: i.map(x)
         }
       )
     ] }),
@@ -237,11 +237,11 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
 }), n1 = () => (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 = ({
@@ -275,20 +275,20 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
   }
 ), i1 = a1(
   void 0
-), ye = ({ children: e }) => {
-  const [i, n] = E([]), r = H((d, l) => {
+), we = ({ children: e }) => {
+  const [i, n] = E([]), r = H((l, c) => {
     n((o) => (o.forEach((g) => {
-      g.current && g !== d && g.current.hide(l);
-    }), [])), d.current?.toggle(l), n([d]);
-  }, []), a = H((d) => {
-    n((l) => l.filter((o) => o !== d));
+      g.current && g !== l && g.current.hide(c);
+    }), [])), l.current?.toggle(c), n([l]);
+  }, []), d = H((l) => {
+    n((c) => c.filter((o) => o !== l));
   }, []), p = j(
     () => ({
       openMenus: i,
       openMenu: r,
-      closeMenu: a
+      closeMenu: d
     }),
-    [i, r, a]
+    [i, r, d]
   );
   return /* @__PURE__ */ t(i1.Provider, { value: p, children: e });
 }, F1 = () => {
@@ -320,40 +320,40 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
     isSet: i,
     isSelected: n,
     isFilter: r,
-    className: a,
+    className: d,
     title: p,
-    icon: d,
-    contextMenuItems: l = void 0,
+    icon: l,
+    contextMenuItems: c = void 0,
     onClick: o,
     onDeleteStep: g,
     onUpdateFilter: w,
     subtitle: S,
     isInvalid: _,
     idx: v
-  } = e, B = $(null), { openMenu: N, closeMenu: y } = F1(), L = n1(), I = j(() => [
+  } = e, B = T(null), { openMenu: b, closeMenu: k } = F1(), L = n1(), x = j(() => [
     {
       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(), w && w(v);
+      command: (h) => {
+        h?.originalEvent?.stopPropagation(), w && w(v);
       },
       template: L
     },
     {
       label: "Remove",
       icon: /* @__PURE__ */ t(e1, { className: "mr-2", color: "#3B64A0", size: 18 }),
-      command: (m) => {
-        m?.originalEvent?.stopPropagation(), g && g(v);
+      command: (h) => {
+        h?.originalEvent?.stopPropagation(), g && g(v);
       },
       template: L
     }
-  ], [w, g, v]), c = j(() => l !== void 0 ? l : I, [l, I]), s = (m) => {
-    m.stopPropagation(), N(B, m);
-  }, u = j(() => n && _ ? f.step + " " + f.selectedInvalid : n ? f.step + " " + f.selected : i ? f.step + " " + f.isSet : _ ? f.step + " " + f.invalid : f.step, [i, n, _]), h = j(() => _ ? /* @__PURE__ */ t(A1, { color: "#E32012" }) : d, [d, _]);
-  return /* @__PURE__ */ t("div", { className: f.container + " " + a, children: /* @__PURE__ */ C("div", { children: [
+  ], [w, g, v]), a = j(() => c !== void 0 ? c : x, [c, x]), s = (h) => {
+    h.stopPropagation(), b(B, h);
+  }, u = j(() => n && _ ? f.step + " " + f.selectedInvalid : n ? f.step + " " + f.selected : i ? f.step + " " + f.isSet : _ ? f.step + " " + f.invalid : f.step, [i, n, _]), m = j(() => _ ? /* @__PURE__ */ t(A1, { color: "#E32012" }) : l, [l, _]);
+  return /* @__PURE__ */ t("div", { className: f.container + " " + d, children: /* @__PURE__ */ C("div", { children: [
     /* @__PURE__ */ C("div", { className: u, onClick: o, children: [
       /* @__PURE__ */ C("div", { className: f.content, children: [
-        /* @__PURE__ */ t("div", { className: `${f.icon} ${_ && f.invalid}`, children: h }),
+        /* @__PURE__ */ t("div", { className: `${f.icon} ${_ && f.invalid}`, children: m }),
         /* @__PURE__ */ t("div", { className: f.title, children: p })
       ] }),
       /* @__PURE__ */ t(
@@ -375,11 +375,11 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
       /* @__PURE__ */ t(
         t1,
         {
-          model: c,
+          model: a,
           popup: !0,
           ref: B,
-          onClick: (m) => m.stopPropagation(),
-          onHide: () => y(B)
+          onClick: (h) => h.stopPropagation(),
+          onHide: () => k(B)
         }
       )
     ] }),
@@ -392,8 +392,8 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
         onClick: () => {
           w && w(v);
         },
-        onKeyDown: (m) => {
-          (m.key === "Enter" || m.key === " ") && w && (m.preventDefault(), w(v));
+        onKeyDown: (h) => {
+          (h.key === "Enter" || h.key === " ") && w && (h.preventDefault(), w(v));
         },
         children: [
           /* @__PURE__ */ t(K, { color: "#3B64A0" }),
@@ -420,7 +420,7 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_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" }) }) })
 ] }), D1 = "_multipleTriggersIcon_oxhdi_1", W1 = {
   multipleTriggersIcon: D1
-}, V1 = () => /* @__PURE__ */ t("div", { className: W1.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" }) }) }), Z1 = "_trigger_11tti_1", Y1 = "_title_11tti_7", X1 = "_empty_11tti_15", G1 = "_triggerContainer_11tti_21", K1 = "_stepsContainer_11tti_25", U1 = "_stepItem_11tti_51", q1 = "_curvesSvg_11tti_70", J1 = "_centralNode_11tti_78", Q1 = "_iconWrapper_11tti_103", ee = "_fadeIn_11tti_126", te = "_fadeOut_11tti_129", ne = "_operationContainer_11tti_133", x = {
+}, V1 = () => /* @__PURE__ */ t("div", { className: W1.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" }) }) }), Z1 = "_trigger_kfg1y_1", Y1 = "_title_kfg1y_7", X1 = "_empty_kfg1y_15", G1 = "_triggerContainer_kfg1y_21", K1 = "_stepsContainer_kfg1y_25", U1 = "_stepItem_kfg1y_51", q1 = "_curvesSvg_kfg1y_70", J1 = "_centralNode_kfg1y_78", Q1 = "_iconWrapper_kfg1y_104", ee = "_fadeIn_kfg1y_127", te = "_fadeOut_kfg1y_130", ne = "_operationContainer_kfg1y_134", y = {
   trigger: Z1,
   title: Y1,
   empty: X1,
@@ -448,30 +448,30 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
   title: i,
   className: n,
   onDeleteTrigger: r,
-  onAddTrigger: a,
+  onAddTrigger: d,
   onSelectStep: p
 }) => {
-  const d = $(null), l = $([]), [o, g] = E([]), [w, S] = E({ width: 0, height: 0 }), [_, v] = E(!1), [B, N] = E(!1), y = $(null);
+  const l = T(null), c = T([]), [o, g] = E([]), [w, S] = E({ width: 0, height: 0 }), [_, v] = E(!1), [B, b] = E(!1), k = T(null);
   if (V(() => {
     const s = () => {
-      if (!d.current) return;
+      if (!l.current) return;
       const u = [];
-      if (l.current.forEach((h, m) => {
-        if (h && d.current) {
-          const M = d.current.getBoundingClientRect(), k = h.getBoundingClientRect();
+      if (c.current.forEach((m, h) => {
+        if (m && l.current) {
+          const M = l.current.getBoundingClientRect(), N = m.getBoundingClientRect();
           u.push({
-            id: e[m]?.id || `step-${m}`,
-            top: k.top - M.top,
-            right: k.right - M.left,
-            centerY: k.top - M.top + k.height / 2
+            id: e[h]?.id || `step-${h}`,
+            top: N.top - M.top,
+            right: N.right - M.left,
+            centerY: N.top - M.top + N.height / 2
           });
         }
-      }), g(u), d.current && u.length > 0) {
-        const h = d.current.getBoundingClientRect(), m = Math.min(...u.map((P) => P.top)), M = l.current.filter(Boolean).map((P) => P?.offsetHeight || 68), k = Math.max(
+      }), g(u), l.current && u.length > 0) {
+        const m = l.current.getBoundingClientRect(), h = Math.min(...u.map((P) => P.top)), M = c.current.filter(Boolean).map((P) => P?.offsetHeight || 68), N = Math.max(
           ...u.map((P, o1) => P.top + (M[o1] || 68))
         ), D = Math.max(...u.map((P) => P.right)) + 0, W = Math.max(
-          h.height,
-          k - m + 100
+          m.height,
+          N - h + 100
         );
         S({
           width: D,
@@ -480,38 +480,38 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
       }
     };
     return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
-  }, [e]), V(() => (_ ? (y.current && (clearTimeout(y.current), y.current = null), setTimeout(() => {
-    N(!0);
-  }, 0)) : y.current = setTimeout(() => {
-    N(!1);
+  }, [e]), V(() => (_ ? (k.current && (clearTimeout(k.current), k.current = null), setTimeout(() => {
+    b(!0);
+  }, 0)) : k.current = setTimeout(() => {
+    b(!1);
   }, 140), () => {
-    y.current && clearTimeout(y.current);
+    k.current && clearTimeout(k.current);
   }), [_]), e.length === 0)
-    return /* @__PURE__ */ C("div", { className: `${x.trigger} ${n || ""}`, children: [
-      i && /* @__PURE__ */ t("h3", { className: x.title, children: i }),
-      /* @__PURE__ */ t("div", { className: x.empty, children: "No steps" })
+    return /* @__PURE__ */ C("div", { className: `${y.trigger} ${n || ""}`, children: [
+      i && /* @__PURE__ */ t("h3", { className: y.title, children: i }),
+      /* @__PURE__ */ t("div", { className: y.empty, children: "No steps" })
     ] });
   const L = o.length > 0 ? re : 0;
-  let I = 0;
-  o.length > 1 ? I = o.reduce((s, u) => s + u.top + F, 0) / o.length : o.length === 1 && (I = o[0].top + F);
-  const c = (s, u, h, m) => {
-    const M = h - s, k = Math.min(M * 0.6, 60), Z = s + k, D = u, W = h - k;
-    return `M ${s} ${u} C ${Z} ${D}, ${W} ${m}, ${h} ${m}`;
+  let x = 0;
+  o.length > 1 ? x = o.reduce((s, u) => s + u.top + F, 0) / o.length : o.length === 1 && (x = o[0].top + F);
+  const a = (s, u, m, h) => {
+    const M = m - s, N = Math.min(M * 0.6, 60), Z = s + N, D = u, W = m - N;
+    return `M ${s} ${u} C ${Z} ${D}, ${W} ${h}, ${m} ${h}`;
   };
-  return /* @__PURE__ */ C("div", { className: `${x.trigger} ${n || ""}`, ref: d, children: [
-    i && /* @__PURE__ */ t("h3", { className: x.title, children: i }),
-    /* @__PURE__ */ C("div", { className: x.triggerContainer, children: [
-      /* @__PURE__ */ t("div", { className: x.stepsContainer, children: e.map((s, u) => /* @__PURE__ */ t(
+  return /* @__PURE__ */ C("div", { className: `${y.trigger} ${n || ""}`, ref: l, children: [
+    i && /* @__PURE__ */ t("h3", { className: y.title, children: i }),
+    /* @__PURE__ */ C("div", { className: y.triggerContainer, children: [
+      /* @__PURE__ */ t("div", { className: y.stepsContainer, children: e.map((s, u) => /* @__PURE__ */ t(
         "div",
         {
-          ref: (h) => {
-            l.current[u] = h;
+          ref: (m) => {
+            c.current[u] = m;
           },
           children: /* @__PURE__ */ t(
             r1,
             {
               title: s.title,
-              className: x.stepItem,
+              className: y.stepItem,
               idx: u,
               isSet: s.isSet,
               isSelected: s.isSelected,
@@ -537,7 +537,7 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
                   label: "Add More Triggers",
                   icon: /* @__PURE__ */ t(E1, { className: "mr-2", color: "#3B64A0", size: 18 }),
                   command: () => {
-                    a?.();
+                    d?.();
                   }
                 }
               ]
@@ -549,15 +549,15 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
       /* @__PURE__ */ t("div", { style: { position: "relative" }, children: o.length > 1 && /* @__PURE__ */ t(
         "svg",
         {
-          className: x.curvesSvg,
+          className: y.curvesSvg,
           width: w.width,
           height: w.height,
           children: o.map((s) => {
-            const h = o.length === 1 ? o[0].top + F : s.top + F;
+            const m = o.length === 1 ? o[0].top + F : s.top + F;
             return /* @__PURE__ */ t(
               "path",
               {
-                d: c(0, h, L, I),
+                d: a(0, m, L, x),
                 stroke: "#3b64a0",
                 strokeWidth: "2",
                 fill: "none",
@@ -572,18 +572,18 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
         /* @__PURE__ */ t(
           "div",
           {
-            className: x.centralNode,
+            className: y.centralNode,
             style: {
               "--node-x": `${L}px`,
-              "--node-y": `${I}px`
+              "--node-y": `${x}px`
             },
             onMouseEnter: () => v(!0),
             onMouseLeave: () => v(!1),
             children: B ? /* @__PURE__ */ t(
               "div",
               {
-                className: `${x.iconWrapper} ${_ ? x.fadeIn : x.fadeOut}`,
-                onClick: a,
+                className: `${y.iconWrapper} ${_ ? y.fadeIn : y.fadeOut}`,
+                onClick: d,
                 children: /* @__PURE__ */ t(z1, {})
               }
             ) : null
@@ -592,10 +592,10 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
         /* @__PURE__ */ t(
           "div",
           {
-            className: x.operationContainer,
+            className: y.operationContainer,
             style: {
               "--op-x": `${L + 16}px`,
-              "--op-y": `${I}px`
+              "--op-y": `${x}px`
             },
             children: /* @__PURE__ */ t(V1, {})
           }
@@ -632,9 +632,9 @@ const O1 = "_panel_19663_1", B1 = "_panelExiting_19663_13", S1 = "_menuItem_1966
       )
     ]
   }
-), le = "_stepLink_xxky1_1", ce = "_stepLinkIcon_xxky1_7", ae = "_stepLinkLine_xxky1_23", de = "_stepLinkContainer_xxky1_45", T = {
-  stepLink: le,
-  stepLinkIcon: ce,
+), ce = "_stepLink_1ugcc_1", le = "_stepLinkIcon_1ugcc_8", ae = "_stepLinkLine_1ugcc_24", de = "_stepLinkContainer_1ugcc_46", $ = {
+  stepLink: ce,
+  stepLinkIcon: le,
   stepLinkLine: ae,
   stepLinkContainer: de
 };
@@ -644,15 +644,20 @@ function ue(e) {
 function pe(e) {
   return R({ 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 }) => {
-  const a = n1(), p = $(null), d = [
+const U = ({
+  style: e,
+  onAddStep: i,
+  onAddTrigger: n,
+  index: r = 0
+}) => {
+  const d = n1(), p = T(null), l = [
     {
       label: "Trigger",
       icon: /* @__PURE__ */ t(pe, { className: "mr-2", color: "#3B64A0", size: 18 }),
       command: () => {
         n?.(r);
       },
-      template: a
+      template: d
     },
     {
       label: "Step",
@@ -660,18 +665,18 @@ const U = ({ style: e, onAddStep: i, onAddTrigger: n, index: r = 0 }) => {
       command: () => {
         i?.(r);
       },
-      template: a
+      template: d
     }
-  ], l = (o) => {
+  ], c = (o) => {
     p.current?.show(o);
   };
-  return /* @__PURE__ */ t("div", { className: T.stepLink, style: e, children: /* @__PURE__ */ C("main", { className: T.stepLinkContainer, children: [
-    /* @__PURE__ */ t("div", { className: T.stepLinkLine }),
+  return /* @__PURE__ */ t("div", { className: $.stepLink, style: e, children: /* @__PURE__ */ C("main", { className: $.stepLinkContainer, children: [
+    /* @__PURE__ */ t("div", { className: $.stepLinkLine }),
     /* @__PURE__ */ t(
       "div",
       {
-        className: T.stepLinkIcon,
-        onClick: l,
+        className: $.stepLinkIcon,
+        onClick: c,
         "aria-haspopup": !0,
         children: /* @__PURE__ */ t(se, {})
       }
@@ -679,83 +684,113 @@ const U = ({ style: e, onAddStep: i, onAddTrigger: n, index: r = 0 }) => {
     /* @__PURE__ */ t(
       t1,
       {
-        model: d,
+        model: r === 0 ? l.splice(1) : l,
         popup: !0,
         ref: p
       }
     ),
-    /* @__PURE__ */ t("div", { className: T.stepLinkLine })
+    /* @__PURE__ */ t("div", { className: $.stepLinkLine })
   ] }) });
-}, he = "_steps_10tw8_1", me = "_stepContainer_10tw8_8", q = {
-  steps: he,
-  stepContainer: me
+}, me = "_steps_1y1ls_1", he = "_stepContainer_1y1ls_9", q = {
+  steps: me,
+  stepContainer: he
 }, Ce = ({
   steps: e,
   className: i,
   onDeleteStep: n,
   onUpdateFilter: r,
-  onAddStep: a,
+  onAddStep: d,
   onAddTrigger: p,
-  onSelectStep: d
-}) => (console.log("steps", e), /* @__PURE__ */ t("div", { className: q.steps + (i ? " " + i : ""), children: /* @__PURE__ */ C("div", { style: { display: "flex", flexDirection: "row", flex: 1, minWidth: 0, width: "100%" }, children: [
+  onSelectStep: l
+}) => /* @__PURE__ */ t("div", { className: q.steps + (i ? " " + i : ""), children: /* @__PURE__ */ C(
+  "div",
+  {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      flex: 1,
+      minWidth: 0,
+      width: "100%"
+    },
+    children: [
+      /* @__PURE__ */ t(
+        U,
+        {
+          onAddStep: d,
+          onAddTrigger: p,
+          index: 0
+        }
+      ),
+      e.map((c, o) => /* @__PURE__ */ C("div", { className: q.stepContainer, children: [
+        /* @__PURE__ */ t(
+          r1,
+          {
+            idx: o,
+            title: c.title,
+            isSet: c.isSet,
+            isInvalid: c.isInvalid,
+            isFilter: c.isFilter,
+            isSelected: c.isSelected,
+            icon: c.icon,
+            onClick: () => {
+              l(c.id);
+            },
+            onDeleteStep: n ? (g) => n(e[g].id) : void 0,
+            onUpdateFilter: r ? (g) => r(e[g].id) : void 0
+          }
+        ),
+        /* @__PURE__ */ t(
+          U,
+          {
+            onAddStep: d,
+            onAddTrigger: p,
+            index: o + 1
+          }
+        )
+      ] }, c.id)),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          style: {
+            flex: 1,
+            minWidth: 0,
+            height: "2px",
+            borderTop: "2px solid #3B64A0",
+            marginTop: "34px"
+          }
+        }
+      )
+    ]
+  }
+) }), ge = "_container_12c1g_1", fe = {
+  container: ge
+}, ke = ({
+  process: e,
+  onAddTrigger: i,
+  addMultipleTriggers: n,
+  onAddStep: r,
+  onEditTrigger: d,
+  onDeleteTrigger: p,
+  onDeleteStep: l,
+  onUpdateFilter: c,
+  onSelectStep: o
+}) => /* @__PURE__ */ C("div", { className: fe.container, children: [
   /* @__PURE__ */ t(
-    U,
+    oe,
     {
-      onAddStep: a,
-      onAddTrigger: p,
-      index: 0
+      steps: e.triggers,
+      onAddTrigger: n,
+      onDeleteTrigger: p,
+      onEditTrigger: d,
+      onSelectStep: o
     }
   ),
-  e.map((l, o) => /* @__PURE__ */ C("div", { className: q.stepContainer, children: [
-    /* @__PURE__ */ t(
-      r1,
-      {
-        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 ? (g) => n(e[g].id) : void 0,
-        onUpdateFilter: r ? (g) => r(e[g].id) : void 0
-      }
-    ),
-    /* @__PURE__ */ t(
-      U,
-      {
-        onAddStep: a,
-        onAddTrigger: p,
-        index: o + 1
-      }
-    )
-  ] }, l.id)),
-  /* @__PURE__ */ t(
-    "div",
-    {
-      style: {
-        flex: 1,
-        minWidth: 0,
-        height: "2px",
-        borderTop: "2px solid #3B64A0",
-        marginTop: "34px"
-      }
-    }
-  )
-] }) })), ge = {}, fe = "_container_393c1_1", ve = {
-  container: fe
-}, Ie = ({ process: e, onAddTrigger: i, addMultipleTriggers: n, onAddStep: r, onEditTrigger: a, onDeleteTrigger: p, onDeleteStep: d, onUpdateFilter: l, onSelectStep: o }) => /* @__PURE__ */ C("div", { className: ve.container, children: [
-  /* @__PURE__ */ t(oe, { steps: e.triggers, onAddTrigger: n, onDeleteTrigger: p, onEditTrigger: a, onSelectStep: o }),
   /* @__PURE__ */ t(
     Ce,
     {
       steps: e.steps,
-      className: ge.stepsContainer,
-      onDeleteStep: d,
-      onUpdateFilter: l,
+      onDeleteStep: l,
+      onUpdateFilter: c,
       onAddStep: r,
       onAddTrigger: i,
       onSelectStep: (g) => {
@@ -766,8 +801,8 @@ const U = ({ style: e, onAddStep: i, onAddTrigger: n, index: r = 0 }) => {
 ] });
 export {
   t1 as Menu,
-  ye as MenuProvider,
-  Ie as ProcessDiagram,
+  we as MenuProvider,
+  ke as ProcessDiagram,
   r1 as ProcessStep,
   oe as Trigger,
   F1 as useMenuProvider