@camunda/play 7.1.0 → 7.1.2

package/build/play.js

@@ -11,7 +11,7 @@ import { BpmnModdle as mn } from "bpmn-moddle";
 import { isLabel as hr } from "diagram-js/lib/util/ModelUtil.js";
 import { observer as x } from "mobx-react";
 import { WarningFilled as gn, CheckmarkOutline as fr, RadioButtonChecked as mr, Error as gA, Information as gr, Renew as wr, Launch as UA, Edit as FA, View as wn, Add as yn, CheckmarkFilled as bn, ErrorFilled as yr, Link as br, PlayFilledAlt as Ot, TrashCan as vr, Playlist as Er, Warning as Ir, Checkmark as Gt, Flash as Br, ArrowRight as Sr, RowExpand as Cr, RowCollapse as Mr } from "@carbon/icons-react";
-import u, { keyframes as Lt, css as Be, createGlobalStyle as Dr } from "styled-components";
+import u, { keyframes as Lt, css as ye, createGlobalStyle as Dr } from "styled-components";
 import { createPortal as _ } from "react-dom";
 import oA, { PropTypes as fs } from "prop-types";
 import { MenuItemDivider as Tr, SkeletonText as KA, SkeletonIcon as vn, Button as j, Tooltip as HA, Modal as $e, Stack as G, Link as de, TextInput as We, Callout as xr, DefinitionTooltip as kr, InlineNotification as En, ModalHeader as Nr, ModalBody as Fr, ComposedModal as Rr, ModalFooter as Pr, FormLabel as Vt, ActionableNotification as JA, Loading as IA, InlineLoading as In, Form as Bn, MenuButton as Qr, MenuItem as ms, Tag as Sn, CodeSnippet as Cn, TabList as Or, TabPanel as Gr, Tabs as Lr, Tab as Vr, Layer as Ut, TreeNode as Ur, TreeView as Kr, Table as YA, TableHead as ZA, TableRow as Pe, TableHeader as xe, TableBody as qA, TableCell as re, Toggletip as Mn, ToggletipButton as Dn, ToggletipContent as Tn, IconButton as dA, ProgressBar as Hr, ComboBox as QA, ToggletipActions as Jr, UnorderedList as Yr, ListItem as tt, TextArea as Zr, ProgressIndicator as qr, ProgressStep as gs, OverflowMenu as zr, OverflowMenuItem as st } from "@carbon/react";
@@ -1363,7 +1363,7 @@ function Fn({
 }) {
   return localStorage.getItem(Nn({ processId: A, elementId: e }));
 }
-function be({
+function ve({
   element: A,
   useCache: e,
   processId: t
@@ -1456,7 +1456,7 @@ class fa {
     });
   }
   trackUserCompletesElement(e, t) {
-    const { prefillData: s, prefillSource: n } = be({
+    const { prefillData: s, prefillSource: n } = ve({
       element: e,
       useCache: !0,
       processId: this.processId
@@ -2870,7 +2870,7 @@ function ie(A) {
   }
   return localStorage.setItem("historyEntries", JSON.stringify(e)), `history ${A}`;
 }
-function ye(A, e) {
+function be(A, e) {
   const t = localStorage.getItem(A) || "[]", s = JSON.parse(t);
   localStorage.setItem(A, JSON.stringify([...s, e]));
 }
@@ -3006,7 +3006,7 @@ let bo = class extends Ne {
     super.reset(), this.state = { ...Ns };
   }
 };
-const Ie = new bo(), vo = ({
+const Be = new bo(), vo = ({
   processId: A,
   element: e,
   isSubProcessStartEvent: t,
@@ -3111,7 +3111,7 @@ class Bo {
     });
   }
   get activeMessageSubscriptionCandidates() {
-    const { messageSubscriptionCandidates: e } = C, { activeElementIdsWithoutIncident: t } = he, { variables: s } = Ie.state, n = y.state.processInstance?.state === "ACTIVE";
+    const { messageSubscriptionCandidates: e } = C, { activeElementIdsWithoutIncident: t } = he, { variables: s } = Be.state, n = y.state.processInstance?.state === "ACTIVE";
     return e.filter(
       (r) => qt({
         processId: b.processId,
@@ -4947,8 +4947,8 @@ function jo({
     []
   ), N(() => {
     if (!(A === "saas" && e === void 0))
-      return n ? (y.init(), se.init(), uA.init(), he.init(), St.init(), LA.init(), oe.init(), Ie.init(), It.init(), EA.init(), s && Ke.init()) : Bt.init(a), () => {
-        Ke.reset(), EA.reset(), LA.reset(), Ie.reset(), It.reset(), oe.reset(), se.reset(), uA.reset(), he.reset(), St.reset(), Bt.reset(), Me.reset();
+      return n ? (y.init(), se.init(), uA.init(), he.init(), St.init(), LA.init(), oe.init(), Be.init(), It.init(), EA.init(), s && Ke.init()) : Bt.init(a), () => {
+        Ke.reset(), EA.reset(), LA.reset(), Be.reset(), It.reset(), oe.reset(), se.reset(), uA.reset(), he.reset(), St.reset(), Bt.reset(), Me.reset();
       };
   }, [
     A,
@@ -5617,7 +5617,7 @@ const Js = 5, cc = Lt`
     opacity: 0.5;
     pointer-events: none;
   }
-`, fc = Be`
+`, fc = ye`
   display: flex;
   align-items: center;
   padding: 7px 20px;
@@ -5807,7 +5807,7 @@ const Xn = u.header`
   gap: var(--cds-spacing-02);
 `, Ys = u(KA)`
   margin: 0;
-  ${({ $shouldAlignRight: A = !1 }) => A && Be`
+  ${({ $shouldAlignRight: A = !1 }) => A && ye`
       margin-left: auto;
     `};
 `, Ec = u(vn)`
@@ -5870,9 +5870,9 @@ const fe = new Cc(), jA = (A) => {
   text: "You cannot save scenarios in this diagram's project. Contact your project admin to give you the necessary permissions."
 }, Dc = u.span`
   font-weight: bold;
-  ${({ $isGreen: A, $hasPrecedingPlusIcon: e }) => Be`
+  ${({ $isGreen: A, $hasPrecedingPlusIcon: e }) => ye`
       ${A && "color: var(--cds-support-success);"}
-      ${e && Be`
+      ${e && ye`
         &:before {
           content: '+';
         }
@@ -6145,11 +6145,11 @@ const fe = new Cc(), jA = (A) => {
     font-weight: 400;
   }
 `, Qc = u(Fr)`
-  ${({ $enableContentOverflow: A }) => A && Be`
+  ${({ $enableContentOverflow: A }) => A && ye`
       overflow: unset;
     `}
 `, Oc = u(j)`
-  ${({ $hasIcon: A }) => A && Be`
+  ${({ $hasIcon: A }) => A && ye`
       padding-right: 15px;
     `}
 `, aA = ({
@@ -6515,12 +6515,12 @@ const XA = x(
     t
   ] }) : null });
 }, ni = (A, e) => {
-  const { prefillData: t, prefillSource: s } = be({
+  const { prefillData: t, prefillSource: s } = ve({
     element: A,
     useCache: !0,
     processId: e
   }), [n, r] = v(t), [a, o] = v(s), [c, l] = v(!1), d = Qe(n) || n === "", p = () => {
-    const { prefillData: m, prefillSource: g } = be({
+    const { prefillData: m, prefillSource: g } = ve({
       element: A,
       useCache: !1,
       processId: e
@@ -6575,7 +6575,7 @@ const XA = x(
             variables: l,
             isStartEvent: s
           });
-          E?.success ? (E?.success && a !== void 0 && ye(ie(a.key), {
+          E?.success ? (E?.success && a !== void 0 && be(ie(a.key), {
             action: "broadcastSignal",
             signalName: o,
             variables: l,
@@ -6654,7 +6654,7 @@ function Al(A) {
       isStartEvent: l = !1,
       processInstanceKey: d
     }) => {
-      const { prefillData: p } = be({
+      const { prefillData: p } = ve({
         element: A,
         useCache: !0,
         processId: o
@@ -6664,7 +6664,7 @@ function Al(A) {
         variables: p,
         isStartEvent: l
       });
-      f?.success ? (f?.success && d !== void 0 && ye(ie(d), {
+      f?.success ? (f?.success && d !== void 0 && be(ie(d), {
         action: "broadcastSignal",
         elementId: A.id,
         signalName: c.signalName,
@@ -6775,7 +6775,7 @@ const sl = u.div`
             );
             return;
           }
-          O?.success ? (O?.success && c !== void 0 && ye(ie(c.key), {
+          O?.success ? (O?.success && c !== void 0 && be(ie(c.key), {
             action: "publishMessage",
             elementId: n,
             messageName: l,
@@ -6900,7 +6900,7 @@ function nl({
       isStartEvent: d = !1,
       processInstanceKey: p
     }) => {
-      const { prefillData: f } = be({
+      const { prefillData: f } = ve({
         element: A,
         useCache: !0,
         processId: c
@@ -6925,7 +6925,7 @@ function nl({
         t?.error(ne);
         return;
       }
-      m?.success && p !== void 0 && ye(ie(p), {
+      m?.success && p !== void 0 && be(ie(p), {
         action: "publishMessage",
         elementId: A.id,
         messageName: l.messageName,
@@ -7113,7 +7113,7 @@ const _t = ({
   );
 }, js = (A) => Qe(A) || A === "", CA = x(
   ({ title: A, isVisible: e, primaryButtonLabel: t, onClose: s, onSubmit: n, element: r }) => {
-    const [a, o] = v(!0), { prefillData: c, prefillSource: l } = be({
+    const [a, o] = v(!0), { prefillData: c, prefillSource: l } = ve({
       element: r,
       useCache: a,
       processId: b.processId
@@ -7132,7 +7132,7 @@ const _t = ({
         clearOnReset: !1,
         onReset: () => {
           o(!1);
-          const { prefillData: k, prefillSource: R } = be({
+          const { prefillData: k, prefillSource: R } = ve({
             element: r,
             useCache: !1,
             processId: b.processId
@@ -7282,8 +7282,8 @@ function ol({
         ...w ? {} : H,
         ...q
       }, Z = t.sanitizePrefillData ? al(Xr(F), ce) : ce;
-      let ve = "none";
-      return ae(Z, $) ? ve = "bpmn" : !w && ae(Z, H) && (ve = "cache"), a(ve), c(JSON.stringify(Z)), Z;
+      let Ee = "none";
+      return ae(Z, $) ? Ee = "bpmn" : !w && ae(Z, H) && (Ee = "cache"), a(Ee), c(JSON.stringify(Z)), Z;
     },
     [k, t]
   ), V = z(
@@ -7401,16 +7401,16 @@ const oi = ({
       throw new Error("Upload files for file picker function is not available");
     const ce = Array.from(H.entries()), Z = ce.map(
       (L) => q(L)
-    ), ve = await Promise.allSettled(Z), P = /* @__PURE__ */ new Map();
-    return ve.forEach((L, ge) => {
+    ), Ee = await Promise.allSettled(Z), P = /* @__PURE__ */ new Map();
+    return Ee.forEach((L, ge) => {
       const [_e] = ce[ge];
       w(L, _e, P);
     }), P;
   }
   function w(H, q, ce) {
     if (H.status === "fulfilled") {
-      const { fileRegistryId: Z, uploadedDocuments: ve } = H.value;
-      F(ce, Z, ve);
+      const { fileRegistryId: Z, uploadedDocuments: Ee } = H.value;
+      F(ce, Z, Ee);
     } else
       O(q, H.reason);
   }
@@ -7677,7 +7677,7 @@ const ci = x(
       startInstanceWithForm: c,
       hasForm: l
     }) => {
-      const { prefillData: d, prefillSource: p } = be({
+      const { prefillData: d, prefillSource: p } = ve({
         element: s,
         useCache: !0,
         processId: A
@@ -8180,7 +8180,7 @@ const Rl = u($e)`
   /* @__PURE__ */ i(Xs, { width: "276px" }),
   /* @__PURE__ */ i(Xs, { width: "384px" })
 ] }), Vl = () => /* @__PURE__ */ i(Ol, { "data-testid": "variables-skeleton", children: [...Array(20)].map((A, e) => /* @__PURE__ */ i(Ll, {}, e)) }), di = x(({ selectedScope: A, isActive: e }) => {
-  const t = X(W), { authType: s } = b, n = t.displayNotification, [r, a] = v(null), [o, c] = v(""), [l, d] = v(!1), [p, f] = v(!1), [m, g] = v(!1), [I, E] = v({}), k = Ie.state.isUpdatingVariable, { instanceKey: R } = y.state, K = Ie.state.variables.filter(
+  const t = X(W), { authType: s } = b, n = t.displayNotification, [r, a] = v(null), [o, c] = v(""), [l, d] = v(!1), [p, f] = v(!1), [m, g] = v(!1), [I, E] = v({}), k = Be.state.isUpdatingVariable, { instanceKey: R } = y.state, K = Be.state.variables.filter(
     (B) => B.scopeKey === A
   );
   N(() => {
@@ -8192,7 +8192,7 @@ const Rl = u($e)`
   }, [A]);
   const V = z(
     async (B) => {
-      const M = await Ie.setVariables({
+      const M = await Be.setVariables({
         instanceKey: R,
         scope: A,
         variablesString: B
@@ -8207,7 +8207,7 @@ const Rl = u($e)`
         );
         return;
       }
-      M.success && R !== void 0 && ye(ie(R), {
+      M.success && R !== void 0 && be(ie(R), {
         action: "setVariables",
         variables: B
       }), M.success || n?.error(ne);
@@ -8216,7 +8216,7 @@ const Rl = u($e)`
   );
   return /* @__PURE__ */ i(fl, { children: /* @__PURE__ */ h(Lr, { children: [
     /* @__PURE__ */ i(xl, { "aria-label": "Variables", children: /* @__PURE__ */ i(Vr, { children: "Variables" }) }),
-    /* @__PURE__ */ i(Nl, { children: /* @__PURE__ */ i(kl, { children: Ie.isInitialLoadComplete ? /* @__PURE__ */ h(J, { children: [
+    /* @__PURE__ */ i(Nl, { children: /* @__PURE__ */ i(kl, { children: Be.isInitialLoadComplete ? /* @__PURE__ */ h(J, { children: [
       /* @__PURE__ */ h(ml, { $isEmpty: K.length === 0, children: [
         K.length === 0 && /* @__PURE__ */ i(gl, { children: se.isRootNodeSelected ? "This process instance has no variables" : "The flow node has no variables" }),
         K.length > 0 && /* @__PURE__ */ h(wl, { children: [
@@ -8252,7 +8252,7 @@ const Rl = u($e)`
                     value: PA(B.value)
                   }), B.truncated) {
                     d(!0);
-                    const M = await Ie.fetchVariable(
+                    const M = await Be.fetchVariable(
                       B.key
                     );
                     if (d(!1), M?.value === void 0) {
@@ -8486,7 +8486,7 @@ function Wl({ type: A }) {
   }
 }
 const Xl = u(Sn)`
-  ${({ $isVisible: A }) => Be`
+  ${({ $isVisible: A }) => ye`
     min-width: 118px;
     transition: opacity 0.2s ease-in-out;
     opacity: ${A ? "1" : "0"};
@@ -8497,7 +8497,7 @@ const Xl = u(Sn)`
   const [e, t] = v(!1), s = ue(null);
   return N(() => {
     const n = Xe(
-      () => Ie.state.variables,
+      () => Be.state.variables,
       (r, a) => {
         [
           ...r.filter(
@@ -8548,7 +8548,7 @@ const Xl = u(Sn)`
             }
           ) }),
           A.flowNodeName || A.flowNodeId,
-          Ie.isInitialLoadComplete && /* @__PURE__ */ i($l, { scopeKey: A.key })
+          Be.isInitialLoadComplete && /* @__PURE__ */ i($l, { scopeKey: A.key })
         ] }),
         isExpanded: !0
       },
@@ -8659,8 +8659,8 @@ const _l = u.ul`
     /* @__PURE__ */ i(
       di,
       {
-        isActive: Ie.scopeId === null ? !1 : l[Ie.scopeId]?.instance.state === "ACTIVE",
-        selectedScope: Ie.scopeId
+        isActive: Be.scopeId === null ? !1 : l[Be.scopeId]?.instance.state === "ACTIVE",
+        selectedScope: Be.scopeId
       }
     )
   ] });
@@ -8927,7 +8927,7 @@ const ut = u(re)`
 `, kd = u(yr)`
   fill: var(--cds-support-error);
 `, en = u(Pe)`
-  ${({ $isClickable: A }) => Be`
+  ${({ $isClickable: A }) => ye`
       ${A && "cursor: pointer;"}
     `}
 `, Nd = u.div`
@@ -9746,7 +9746,7 @@ const ou = u.div`
   display: flex;
   flex: 1;
 `, cu = u.div`
-  ${({ $isSelectionAllowed: A, $shouldUseSuccessColors: e }) => Be`
+  ${({ $isSelectionAllowed: A, $shouldUseSuccessColors: e, $isOutlineVisible: t }) => ye`
       position: absolute;
       height: 100%;
       width: 100%;
@@ -9774,10 +9774,11 @@ const ou = u.div`
           cursor: pointer !important;
         }
       }
-
-      .djs-outline {
-        visibility: initial !important;
-      }
+      ${t && ye`
+        .djs-outline {
+          visibility: initial !important;
+        }
+      `}
 
       .play-selectable:hover .djs-outline,
       .play-selected-frame .djs-outline {
@@ -9801,7 +9802,7 @@ const ou = u.div`
         }
       }
 
-      ${!A && Be`
+      ${!A && ye`
         .djs-hit {
           pointer-events: none;
         }
@@ -9910,7 +9911,7 @@ const ou = u.div`
   )
 ] }), Tt = x(
   ({ messageSubscription: A, element: e, isStartEvent: t = !1 }) => {
-    const s = y.state.processInstance, { prefillSource: n } = be({
+    const s = y.state.processInstance, { prefillSource: n } = ve({
       element: e,
       useCache: !0,
       processId: b.processId
@@ -9972,7 +9973,7 @@ const hu = { top: -20, left: -30 }, De = { top: -38, left: 0 }, ns = { top: -58,
   isStartingInstance: n,
   hasForm: r
 }) => {
-  const { prefillData: a, prefillSource: o } = be({
+  const { prefillData: a, prefillSource: o } = ve({
     element: A,
     useCache: !0,
     processId: b.processId
@@ -10123,7 +10124,7 @@ Error message: ${e.message}`
             );
             return;
           }
-          d.success === !1 ? t.displayNotification?.error(ne) : r !== void 0 && ye(ie(r.key), {
+          d.success === !1 ? t.displayNotification?.error(ne) : r !== void 0 && be(ie(r.key), {
             action: "resolveIncident",
             elementId: A.id,
             hasJob: !!e.jobKey
@@ -10216,7 +10217,7 @@ const Di = x(({ element: A }) => {
       elementId: A.id
     });
     if (M && d !== void 0) {
-      ye(ie(d), {
+      be(ie(d), {
         action: "throwJob",
         elementId: A.id,
         errorCode: a,
@@ -10270,7 +10271,7 @@ const Di = x(({ element: A }) => {
   }, [e]);
   if (!d || !g)
     return null;
-  const { prefillData: R, prefillSource: K } = be({
+  const { prefillData: R, prefillSource: K } = ve({
     element: A,
     useCache: !0,
     processId: b.processId
@@ -10290,7 +10291,7 @@ const Di = x(({ element: A }) => {
           processInstanceKey: p?.key,
           variables: R,
           elementId: A.id
-        }), M && p !== void 0 && (ye(ie(p.key), {
+        }), M && p !== void 0 && (be(ie(p.key), {
           action: "completeJob",
           type: "serviceTask",
           elementId: A.id,
@@ -10342,7 +10343,7 @@ const Di = x(({ element: A }) => {
             processInstanceKey: p?.key,
             variables: M,
             elementId: A.id
-          }), w && p !== void 0 && (ye(ie(p.key), {
+          }), w && p !== void 0 && (be(ie(p.key), {
             action: "completeJob",
             type: "serviceTask",
             elementId: A.id,
@@ -10513,7 +10514,7 @@ const tA = new Vu(), Ti = x(({ element: A }) => {
 Ti.displayName = "RewindButton";
 const kt = x(
   ({ signalCandidate: A, element: e, isStartEvent: t = !1 }) => {
-    const s = y.state.processInstance, { prefillSource: n } = be({
+    const s = y.state.processInstance, { prefillSource: n } = ve({
       element: e,
       useCache: !0,
       processId: b.processId
@@ -10625,7 +10626,7 @@ const Uu = (A) => Ye(A, "zeebe:CalledDecision")?.get("decisionId") ?? null, Ku =
       );
       return;
     }
-    r !== void 0 && ye(ie(r), {
+    r !== void 0 && be(ie(r), {
       action: "throwJob",
       taskDefinitionType: m,
       elementId: p,
@@ -10733,7 +10734,7 @@ function ki({
         return;
       }
       const g = d && He({ prefillSource: d }) || void 0;
-      xt(e, r, g), ye(ie(c), {
+      xt(e, r, g), be(ie(c), {
         action: "completeJob",
         type: "userTask",
         elementId: e.id,
@@ -10863,7 +10864,7 @@ const Pi = x(
       ({ activityId: g, active: I }) => g === A.id && I > 0
     ), a = LA.state.userTasks?.find(
       (g) => g.taskDefinitionId === A.id && g.taskState === "CREATED"
-    ), { prefillData: o, prefillSource: c } = be({
+    ), { prefillData: o, prefillSource: c } = ve({
       element: A,
       useCache: !0,
       processId: b.processId
@@ -10935,7 +10936,7 @@ const Pi = x(
 Pi.displayName = "UserTaskCompleteButton";
 const Qi = x(
   ({ element: A, executionListeners: e }) => {
-    const t = X(W), [s, n] = v(!1), { displayNotification: r } = t, [a, o] = v(!1), { prefillData: c } = be({
+    const t = X(W), [s, n] = v(!1), { displayNotification: r } = t, [a, o] = v(!1), { prefillData: c } = ve({
       element: A,
       useCache: !0,
       processId: b.processId
@@ -11999,7 +12000,8 @@ const ee = new dp(), Ft = x(({ FeedbackButton: A }) => {
       {
         ref: t,
         $isSelectionAllowed: o,
-        $shouldUseSuccessColors: !o
+        $shouldUseSuccessColors: !o,
+        $isOutlineVisible: o || c !== void 0 || l !== void 0
       }
     ),
     C.state.isLoaded && /* @__PURE__ */ h(J, { children: [
@@ -12341,7 +12343,7 @@ const qi = 48, wp = u.div`
   background-color: var(--cds-layer-01);
   border-left: 1px solid var(--cds-border-subtle);
   overflow: hidden;
-`, zi = Be`
+`, zi = ye`
   transform: rotate(90deg);
 `, yp = u(Cr)`
   ${zi}
@@ -12383,7 +12385,7 @@ const qi = 48, wp = u.div`
   if (A) return e === "left" || e === "right" ? "cursor: ew-resize;" : "cursor: ns-resize;";
 }}
   }
-`, _A = Be`
+`, _A = ye`
   position: absolute;
   z-index: var(--z-resizable-panel-handle);
   transition: border-color 0.2s ease-in-out;
@@ -12504,12 +12506,12 @@ const qi = 48, wp = u.div`
       t === "top" ? ge = P.clientY : t === "bottom" && (ge = window.innerHeight - P.clientY);
     }
     return ge;
-  }, Z = (P, L) => t === "left" || t === "top" ? P > L ? -1 : P < L ? 1 : 0 : t === "right" || t === "bottom" ? P > L ? 1 : P < L ? -1 : 0 : 0, ve = A ? p > o && !m ? o : p < a ? a : p : c;
-  return h(J, { children: [i(Sp, { $position: t, $isDragging: m }), h(Cp, { ...d, open: A, $background: s, $sizeClosed: c, $position: t, $isDragging: m, className: I ? "animate" : "", style: { [K()]: `${ve}px` }, children: [i((P) => {
+  }, Z = (P, L) => t === "left" || t === "top" ? P > L ? -1 : P < L ? 1 : 0 : t === "right" || t === "bottom" ? P > L ? 1 : P < L ? -1 : 0 : 0, Ee = A ? p > o && !m ? o : p < a ? a : p : c;
+  return h(J, { children: [i(Sp, { $position: t, $isDragging: m }), h(Cp, { ...d, open: A, $background: s, $sizeClosed: c, $position: t, $isDragging: m, className: I ? "animate" : "", style: { [K()]: `${Ee}px` }, children: [i((P) => {
     const L = { left: i(Dp, { ...P }), right: i(Mp, { ...P }), top: i(xp, { ...P }), bottom: i(Tp, { ...P }) };
     if (!L[t]) throw new Error("Invalid position prop");
     return L[t];
-  }, { role: "separator", "aria-label": r, "aria-orientation": t === "left" || t === "right" ? "vertical" : "horizontal", "aria-valuenow": ve, "aria-valuemin": c, "aria-valuemax": o, onMouseDown: (P) => {
+  }, { role: "separator", "aria-label": r, "aria-orientation": t === "left" || t === "right" ? "vertical" : "horizontal", "aria-valuenow": Ee, "aria-valuemin": c, "aria-valuemax": o, onMouseDown: (P) => {
     P.preventDefault(), O();
   }, open: A, $isDragging: m, $position: t }), i("div", { className: "content", children: e })] })] });
 }, gt = u.div`
@@ -12530,7 +12532,7 @@ u(j)`
 const Rp = u.h3`
   ${te.heading03}
 `, Pp = u(j)`
-  ${({ $shouldAlignRight: A }) => A && Be`
+  ${({ $shouldAlignRight: A }) => A && ye`
       margin-left: auto;
     `}
 `, ji = x(
@@ -13142,12 +13144,12 @@ const Gp = u.h3`
   traceError: H,
   fetchWithAuth: q
 }) => {
-  const ce = E?.shouldUseOrchestrationClusterAPI, Z = A?.type, ve = A?.config?.operateBaseUrl, P = Z === "saas" ? A.config.clusterId : void 0, [L, ge] = v(!0), [_e, pe] = v(!1);
+  const ce = E?.shouldUseOrchestrationClusterAPI, Z = A?.type, Ee = A?.config?.operateBaseUrl, P = Z === "saas" ? A.config.clusterId : void 0, [L, ge] = v(!0), [_e, pe] = v(!1);
   N(
     () => Xe(
       () => y.state.status === "first-fetch" && y.state.instanceType !== "REWOUND_INSTANCE",
-      (Ee) => {
-        pe(Ee);
+      (Ie) => {
+        pe(Ie);
       }
     ),
     []
@@ -13156,8 +13158,8 @@ const Gp = u.h3`
   N(
     () => Xe(
       () => tA.state.isRewinding,
-      (Ee) => {
-        Xi(Ee);
+      (Ie) => {
+        Xi(Ie);
       }
     ),
     []
@@ -13205,7 +13207,7 @@ const Gp = u.h3`
       canUserSaveExampleData: w,
       diagramId: F,
       authType: Z,
-      operateBaseUrl: ve,
+      operateBaseUrl: Ee,
       uploadFilesForFilePicker: $
     });
   }, [
@@ -13227,7 +13229,7 @@ const Gp = u.h3`
     w,
     F,
     Z,
-    ve,
+    Ee,
     $
   ]), N(() => {
     Q.init({
@@ -13258,27 +13260,27 @@ const Gp = u.h3`
   });
   N(() => {
     if (!eA) {
-      const Ee = up(c), Ce = pp(c);
+      const Ie = up(c), Ce = pp(c);
       return () => {
-        Ee(), Ce();
+        Ie(), Ce();
       };
     }
   }, [c, eA]);
-  function as(Ee) {
+  function as(Ie) {
     return ze(async () => {
       const { processInstances: Ce, success: Le } = await D.fetchInstances(
         b.state.processDefinitionKey
       );
       if (Le) {
         const Te = Ce[0];
-        return Te && Te.key !== Ee[0]?.key ? Te.key : null;
+        return Te && Te.key !== Ie[0]?.key ? Te.key : null;
       } else
         return null;
     });
   }
   const et = {
     startInstance: async ({
-      elementId: Ee,
+      elementId: Ie,
       variables: Ce = "{}"
     }) => {
       const { success: Le, status: Te, instanceId: je } = await D.startInstance({
@@ -13288,15 +13290,15 @@ const Gp = u.h3`
       return y.reset(), Le && je !== void 0 && (y.setInstanceDetails({
         instanceKey: je,
         instanceType: "NEW_INSTANCE"
-      }), ye(ie(je), {
+      }), be(ie(je), {
         action: "startInstance",
-        elementId: Ee,
+        elementId: Ie,
         type: "start-event",
         variables: Ce
       })), { success: Le, status: Te };
     },
     publishMessage: async ({
-      elementId: Ee,
+      elementId: Ie,
       messageName: Ce,
       correlationKey: Le,
       variables: Te,
@@ -13330,17 +13332,17 @@ const Gp = u.h3`
         return AA === null ? (console.error("Could not get new instance"), pe(!1), { success: !1, status: MA }) : (y.reset(), y.setInstanceDetails({
           instanceKey: AA,
           instanceType: "NEW_INSTANCE"
-        }), pe(!1), ye(ie(AA), {
+        }), pe(!1), be(ie(AA), {
           action: "startInstance",
           type: "message-start-event",
-          elementId: Ee,
+          elementId: Ie,
           variables: Te
         }), { success: !0, instanceId: AA, status: MA });
       }
       return { success: !0, status: MA };
     },
     broadcastSignal: async ({
-      elementId: Ee,
+      elementId: Ie,
       signalName: Ce,
       variables: Le,
       isStartEvent: Te
@@ -13367,9 +13369,9 @@ const Gp = u.h3`
         return Re === null ? (console.error("Could not get new instance"), pe(!1), { success: !1 }) : (y.reset(), y.setInstanceDetails({
           instanceKey: Re,
           instanceType: "NEW_INSTANCE"
-        }), pe(!1), ye(ie(Re), {
+        }), pe(!1), be(ie(Re), {
           action: "startInstance",
-          elementId: Ee,
+          elementId: Ie,
           type: "broadcast-signal-event",
           variables: Le
         }), { success: !0, instanceId: Re });