@bpmn-io/form-js-playground 1.1.0 → 1.2.0

package/dist/form-playground.umd.js

@@ -18,7 +18,7 @@
     for (var u in l) n[u] = l[u];
     return n;
   }
-  function h$1(n) {
+  function h$2(n) {
     var l = n.parentNode;
     l && l.removeChild(n);
   }
@@ -52,13 +52,13 @@
   function d$1(n) {
     return n.children;
   }
-  function _(n, l) {
+  function _$1(n, l) {
     this.props = n, this.context = l;
   }
-  function k$1(n, l) {
-    if (null == l) return n.__ ? k$1(n.__, n.__.__k.indexOf(n) + 1) : null;
+  function k$2(n, l) {
+    if (null == l) return n.__ ? k$2(n.__, n.__.__k.indexOf(n) + 1) : null;
     for (var u; l < n.__k.length; l++) if (null != (u = n.__k[l]) && null != u.__e) return u.__e;
-    return "function" == typeof n.type ? k$1(n) : null;
+    return "function" == typeof n.type ? k$2(n) : null;
   }
   function b$1(n) {
     var l, u;
@@ -78,7 +78,7 @@
       return n.__v.__b - l.__v.__b;
     }), t$2 = [], n.some(function (n) {
       var l, u, i, t, o, r;
-      n.__d && (o = (t = (l = n).__v).__e, (r = l.__P) && (u = [], (i = a$2({}, t)).__v = t.__v + 1, j$2(r, t, i, l.__n, void 0 !== r.ownerSVGElement, null != t.__h ? [o] : null, u, null == o ? k$1(t) : o, t.__h), z(u, t), t.__e != o && b$1(t)));
+      n.__d && (o = (t = (l = n).__v).__e, (r = l.__P) && (u = [], (i = a$2({}, t)).__v = t.__v + 1, j$3(r, t, i, l.__n, void 0 !== r.ownerSVGElement, null != t.__h ? [o] : null, u, null == o ? k$2(t) : o, t.__h), z(u, t), t.__e != o && b$1(t)));
     });
   }
   function w$2(n, l, u, i, t, o, r, f, s, a) {
@@ -101,14 +101,14 @@
         }
         p = null;
       }
-      j$2(n, _, p = p || e$3, t, o, r, f, s, a), b = _.__e, (v = _.ref) && p.ref != v && (g || (g = []), p.ref && g.push(p.ref, null, _), g.push(v, _.__c || b, _)), null != b ? (null == m && (m = b), "function" == typeof _.type && null != _.__k && _.__k === p.__k ? _.__d = s = x$2(_, s, n) : s = P$3(n, _, p, w, b, s), a || "option" !== u.type ? "function" == typeof u.type && (u.__d = s) : n.value = "") : s && p.__e == s && s.parentNode != n && (s = k$1(p));
+      j$3(n, _, p = p || e$3, t, o, r, f, s, a), b = _.__e, (v = _.ref) && p.ref != v && (g || (g = []), p.ref && g.push(p.ref, null, _), g.push(v, _.__c || b, _)), null != b ? (null == m && (m = b), "function" == typeof _.type && null != _.__k && _.__k === p.__k ? _.__d = s = x$3(_, s, n) : s = P$3(n, _, p, w, b, s), a || "option" !== u.type ? "function" == typeof u.type && (u.__d = s) : n.value = "") : s && p.__e == s && s.parentNode != n && (s = k$2(p));
     }
-    for (u.__e = m, h = A; h--;) null != w[h] && ("function" == typeof u.type && null != w[h].__e && w[h].__e == u.__d && (u.__d = k$1(i, h + 1)), N(w[h], w[h]));
+    for (u.__e = m, h = A; h--;) null != w[h] && ("function" == typeof u.type && null != w[h].__e && w[h].__e == u.__d && (u.__d = k$2(i, h + 1)), N$1(w[h], w[h]));
     if (g) for (h = 0; h < g.length; h++) M$1(g[h], g[++h], g[++h]);
   }
-  function x$2(n, l, u) {
+  function x$3(n, l, u) {
     var i, t;
-    for (i = 0; i < n.__k.length; i++) (t = n.__k[i]) && (t.__ = n, l = "function" == typeof t.type ? x$2(t, l, u) : P$3(u, t, t, n.__k, t.__e, l));
+    for (i = 0; i < n.__k.length; i++) (t = n.__k[i]) && (t.__ = n, l = "function" == typeof t.type ? x$3(t, l, u) : P$3(u, t, t, n.__k, t.__e, l));
     return l;
   }
   function A$2(n, l) {
@@ -124,22 +124,22 @@
     }
     return void 0 !== r ? r : t.nextSibling;
   }
-  function C$2(n, l, u, i, t) {
+  function C$3(n, l, u, i, t) {
     var o;
     for (o in u) "children" === o || "key" === o || o in l || H$1(n, o, null, u[o], i);
     for (o in l) t && "function" != typeof l[o] || "children" === o || "key" === o || "value" === o || "checked" === o || u[o] === l[o] || H$1(n, o, l[o], u[o], i);
   }
-  function $$1(n, l, u) {
+  function $$2(n, l, u) {
     "-" === l[0] ? n.setProperty(l, u) : n[l] = null == u ? "" : "number" != typeof u || s$2.test(l) ? u : u + "px";
   }
   function H$1(n, l, u, i, t) {
     var o;
     n: if ("style" === l) {
       if ("string" == typeof u) n.style.cssText = u;else {
-        if ("string" == typeof i && (n.style.cssText = i = ""), i) for (l in i) u && l in u || $$1(n.style, l, "");
-        if (u) for (l in u) i && u[l] === i[l] || $$1(n.style, l, u[l]);
+        if ("string" == typeof i && (n.style.cssText = i = ""), i) for (l in i) u && l in u || $$2(n.style, l, "");
+        if (u) for (l in u) i && u[l] === i[l] || $$2(n.style, l, u[l]);
       }
-    } else if ("o" === l[0] && "n" === l[1]) o = l !== (l = l.replace(/Capture$/, "")), l = l.toLowerCase() in n ? l.toLowerCase().slice(2) : l.slice(2), n.l || (n.l = {}), n.l[l + o] = u, u ? i || n.addEventListener(l, o ? T$1 : I$1, o) : n.removeEventListener(l, o ? T$1 : I$1, o);else if ("dangerouslySetInnerHTML" !== l) {
+    } else if ("o" === l[0] && "n" === l[1]) o = l !== (l = l.replace(/Capture$/, "")), l = l.toLowerCase() in n ? l.toLowerCase().slice(2) : l.slice(2), n.l || (n.l = {}), n.l[l + o] = u, u ? i || n.addEventListener(l, o ? T$1 : I$2, o) : n.removeEventListener(l, o ? T$1 : I$2, o);else if ("dangerouslySetInnerHTML" !== l) {
       if (t) l = l.replace(/xlink[H:h]/, "h").replace(/sName$/, "s");else if ("href" !== l && "list" !== l && "form" !== l && "tabIndex" !== l && "download" !== l && l in n) try {
         n[l] = null == u ? "" : u;
         break n;
@@ -147,13 +147,13 @@
       "function" == typeof u || (null != u && (!1 !== u || "a" === l[0] && "r" === l[1]) ? n.setAttribute(l, u) : n.removeAttribute(l));
     }
   }
-  function I$1(n) {
+  function I$2(n) {
     this.l[n.type + !1](l$3.event ? l$3.event(n) : n);
   }
   function T$1(n) {
     this.l[n.type + !0](l$3.event ? l$3.event(n) : n);
   }
-  function j$2(n, u, i, t, o, r, f, e, c) {
+  function j$3(n, u, i, t, o, r, f, e, c) {
     var s,
       h,
       v,
@@ -170,7 +170,7 @@
     null != i.__h && (c = i.__h, e = u.__e = i.__e, u.__h = null, r = [e]), (s = l$3.__b) && s(u);
     try {
       n: if ("function" == typeof P) {
-        if (m = u.props, g = (s = P.contextType) && t[s.__c], x = s ? g ? g.props.value : s.__ : t, i.__c ? b = (h = u.__c = i.__c).__ = h.__E : ("prototype" in P && P.prototype.render ? u.__c = h = new P(m, x) : (u.__c = h = new _(m, x), h.constructor = P, h.render = O$1), g && g.sub(h), h.props = m, h.state || (h.state = {}), h.context = x, h.__n = t, v = h.__d = !0, h.__h = []), null == h.__s && (h.__s = h.state), null != P.getDerivedStateFromProps && (h.__s == h.state && (h.__s = a$2({}, h.__s)), a$2(h.__s, P.getDerivedStateFromProps(m, h.__s))), y = h.props, p = h.state, v) null == P.getDerivedStateFromProps && null != h.componentWillMount && h.componentWillMount(), null != h.componentDidMount && h.__h.push(h.componentDidMount);else {
+        if (m = u.props, g = (s = P.contextType) && t[s.__c], x = s ? g ? g.props.value : s.__ : t, i.__c ? b = (h = u.__c = i.__c).__ = h.__E : ("prototype" in P && P.prototype.render ? u.__c = h = new P(m, x) : (u.__c = h = new _$1(m, x), h.constructor = P, h.render = O$1), g && g.sub(h), h.props = m, h.state || (h.state = {}), h.context = x, h.__n = t, v = h.__d = !0, h.__h = []), null == h.__s && (h.__s = h.state), null != P.getDerivedStateFromProps && (h.__s == h.state && (h.__s = a$2({}, h.__s)), a$2(h.__s, P.getDerivedStateFromProps(m, h.__s))), y = h.props, p = h.state, v) null == P.getDerivedStateFromProps && null != h.componentWillMount && h.componentWillMount(), null != h.componentDidMount && h.__h.push(h.componentDidMount);else {
           if (null == P.getDerivedStateFromProps && m !== y && null != h.componentWillReceiveProps && h.componentWillReceiveProps(m, x), !h.__e && null != h.shouldComponentUpdate && !1 === h.shouldComponentUpdate(m, h.__s, x) || u.__v === i.__v) {
             h.props = m, h.state = h.__s, u.__v !== i.__v && (h.__d = !1), h.__v = u, u.__e = i.__e, u.__k = i.__k, u.__k.forEach(function (n) {
               n && (n.__ = u);
@@ -220,7 +220,7 @@
         if (null != r) for (y = {}, _ = 0; _ < l.attributes.length; _++) y[l.attributes[_].name] = l.attributes[_].value;
         (v || a) && (v && (a && v.__html == a.__html || v.__html === l.innerHTML) || (l.innerHTML = v && v.__html || ""));
       }
-      if (C$2(l, p, y, o, c), v) u.__k = [];else if (_ = u.props.children, w$2(l, Array.isArray(_) ? _ : [_], u, i, t, o && "foreignObject" !== d, r, f, r ? r[0] : i.__k && k$1(i, 0), c), null != r) for (_ = r.length; _--;) null != r[_] && h$1(r[_]);
+      if (C$3(l, p, y, o, c), v) u.__k = [];else if (_ = u.props.children, w$2(l, Array.isArray(_) ? _ : [_], u, i, t, o && "foreignObject" !== d, r, f, r ? r[0] : i.__k && k$2(i, 0), c), null != r) for (_ = r.length; _--;) null != r[_] && h$2(r[_]);
       c || ("value" in p && void 0 !== (_ = p.value) && (_ !== l.value || "progress" === d && !_) && H$1(l, "value", _, y.value, !1), "checked" in p && void 0 !== (_ = p.checked) && _ !== l.checked && H$1(l, "checked", _, y.checked, !1));
     }
     return l;
@@ -232,7 +232,7 @@
       l$3.__e(n, i);
     }
   }
-  function N(n, u, i) {
+  function N$1(n, u, i) {
     var t, o;
     if (l$3.unmount && l$3.unmount(n), (t = n.ref) && (t.current && t.current !== n.__e || M$1(t, null, u)), null != (t = n.__c)) {
       if (t.componentWillUnmount) try {
@@ -242,17 +242,17 @@
       }
       t.base = t.__P = null;
     }
-    if (t = n.__k) for (o = 0; o < t.length; o++) t[o] && N(t[o], u, "function" != typeof n.type);
-    i || null == n.__e || h$1(n.__e), n.__e = n.__d = void 0;
+    if (t = n.__k) for (o = 0; o < t.length; o++) t[o] && N$1(t[o], u, "function" != typeof n.type);
+    i || null == n.__e || h$2(n.__e), n.__e = n.__d = void 0;
   }
   function O$1(n, l, u) {
     return this.constructor(n, u);
   }
   function S$1(u, i, t) {
     var o, r, f;
-    l$3.__ && l$3.__(u, i), r = (o = "function" == typeof t) ? null : t && t.__k || i.__k, f = [], j$2(i, u = (!o && t || i).__k = v$1(d$1, null, [u]), r || e$3, e$3, void 0 !== i.ownerSVGElement, !o && t ? [t] : r ? null : i.firstChild ? n$2.call(i.childNodes) : null, f, !o && t ? t : r ? r.__e : i.firstChild, o), z(f, u);
+    l$3.__ && l$3.__(u, i), r = (o = "function" == typeof t) ? null : t && t.__k || i.__k, f = [], j$3(i, u = (!o && t || i).__k = v$1(d$1, null, [u]), r || e$3, e$3, void 0 !== i.ownerSVGElement, !o && t ? [t] : r ? null : i.firstChild ? n$2.call(i.childNodes) : null, f, !o && t ? t : r ? r.__e : i.firstChild, o), z(f, u);
   }
-  function D$1(n, l) {
+  function D$2(n, l) {
     var u = {
       __c: l = "__cC" + f$1++,
       __: n,
@@ -285,12 +285,12 @@
       }
       throw n;
     }
-  }, u$1 = 0, _.prototype.setState = function (n, l) {
+  }, u$1 = 0, _$1.prototype.setState = function (n, l) {
     var u;
     u = null != this.__s && this.__s !== this.state ? this.__s : this.__s = a$2({}, this.state), "function" == typeof n && (n = n(a$2({}, u), this.props)), n && a$2(u, n), null != n && this.__v && (l && this.__h.push(l), m$1(this));
-  }, _.prototype.forceUpdate = function (n) {
+  }, _$1.prototype.forceUpdate = function (n) {
     this.__v && (this.__e = !0, n && this.__h.push(n), m$1(this));
-  }, _.prototype.render = d$1, t$2 = [], o$3 = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, g$1.__r = 0, f$1 = 0;
+  }, _$1.prototype.render = d$1, t$2 = [], o$3 = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, g$1.__r = 0, f$1 = 0;
 
   /**
    * Flatten array, one level deep.
@@ -617,11 +617,11 @@
   }
   function y(r, o) {
     var i = m(t$1++, 3);
-    !l$3.__s && k(i.__H, o) && (i.__ = r, i.__H = o, u.__H.__h.push(i));
+    !l$3.__s && k$1(i.__H, o) && (i.__ = r, i.__H = o, u.__H.__h.push(i));
   }
-  function h(r, o) {
+  function h$1(r, o) {
     var i = m(t$1++, 4);
-    !l$3.__s && k(i.__H, o) && (i.__ = r, i.__H = o, u.__h.push(i));
+    !l$3.__s && k$1(i.__H, o) && (i.__ = r, i.__H = o, u.__h.push(i));
   }
   function s$1(n) {
     return o$2 = 5, d(function () {
@@ -632,22 +632,22 @@
   }
   function d(n, u) {
     var r = m(t$1++, 7);
-    return k(r.__H, u) && (r.__ = n(), r.__H = u, r.__h = n), r.__;
+    return k$1(r.__H, u) && (r.__ = n(), r.__H = u, r.__h = n), r.__;
   }
   function A$1(n, t) {
     return o$2 = 8, d(function () {
       return n;
     }, t);
   }
-  function F(n) {
+  function F$1(n) {
     var r = u.context[n.__c],
       o = m(t$1++, 9);
     return o.c = n, r ? (null == o.__ && (o.__ = !0, r.sub(u)), r.props.value) : n.__;
   }
-  function x$1() {
+  function x$2() {
     i$2.forEach(function (t) {
       if (t.__P) try {
-        t.__H.__h.forEach(g), t.__H.__h.forEach(j$1), t.__H.__h = [];
+        t.__H.__h.forEach(g), t.__H.__h.forEach(j$2), t.__H.__h = [];
       } catch (u) {
         t.__H.__h = [], l$3.__e(u, t.__v);
       }
@@ -658,7 +658,7 @@
   }, l$3.__r = function (n) {
     f && f(n), t$1 = 0;
     var r = (u = n.__c).__H;
-    r && (r.__h.forEach(g), r.__h.forEach(j$1), r.__h = []);
+    r && (r.__h.forEach(g), r.__h.forEach(j$2), r.__h = []);
   }, l$3.diffed = function (t) {
     e$2 && e$2(t);
     var o = t.__c;
@@ -669,12 +669,12 @@
         },
         r = setTimeout(u, 100);
       b && (t = requestAnimationFrame(u));
-    })(x$1)), u = void 0;
+    })(x$2)), u = void 0;
   }, l$3.__c = function (t, u) {
     u.some(function (t) {
       try {
         t.__h.forEach(g), t.__h = t.__h.filter(function (n) {
-          return !n.__ || j$1(n);
+          return !n.__ || j$2(n);
         });
       } catch (r) {
         u.some(function (n) {
@@ -696,11 +696,11 @@
     var t = u;
     "function" == typeof n.__c && n.__c(), u = t;
   }
-  function j$1(n) {
+  function j$2(n) {
     var t = u;
     n.__c = n.__(), u = t;
   }
-  function k(n, t) {
+  function k$1(n, t) {
     return !n || n.length !== t.length || t.some(function (t, u) {
       return t !== n[u];
     });
@@ -14148,7 +14148,7 @@
    * @param { string } code
    * @return { Variables }
    */
-  function wrap$3(variables, scopeName, code) {
+  function wrap$2(variables, scopeName, code) {
     const parts = variables.children.filter(c => c.name !== scopeName);
     const children = variables.children.filter(c => c.name === scopeName);
     const namePart = parts[0];
@@ -14234,12 +14234,12 @@
           const parts = variables.children.filter(c => c.name !== 'ContextEntry');
           const name = parts[0];
           const value = last$2(parts);
-          return wrap$3(variables, 'ContextEntry', code).assign({
+          return wrap$2(variables, 'ContextEntry', code).assign({
             value: Context.of(variables.value).set(name.computedValue(), value?.computedValue())
           });
         }
         if (term === ForInExpression$2 || term === QuantifiedInExpression$2) {
-          return wrap$3(variables, 'InExpression', code);
+          return wrap$2(variables, 'InExpression', code);
         }
 
         // define <partial> within ForExpression body
@@ -19891,8 +19891,8 @@
     return strict === true ? -1 : string.length;
   }
 
-  const C$1 = "\u037c";
-  const COUNT = typeof Symbol == "undefined" ? "__" + C$1 : Symbol.for(C$1);
+  const C$2 = "\u037c";
+  const COUNT = typeof Symbol == "undefined" ? "__" + C$2 : Symbol.for(C$2);
   const SET = typeof Symbol == "undefined" ? "__styleSet" + Math.floor(Math.random() * 1e8) : Symbol("styleSet");
   const top = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : {};
 
@@ -19953,7 +19953,7 @@
     static newName() {
       let id = top[COUNT] || 1;
       top[COUNT] = id + 1;
-      return C$1 + id.toString(36);
+      return C$2 + id.toString(36);
     }
 
     // :: (union<Document, ShadowRoot>, union<[StyleModule], StyleModule>)
@@ -20787,7 +20787,7 @@
     vendor: "",
     platform: ""
   };
-  let doc$2 = typeof document != "undefined" ? document : {
+  let doc = typeof document != "undefined" ? document : {
     documentElement: {
       style: {}
     }
@@ -20798,7 +20798,7 @@
   const ie = !!(ie_upto10 || ie_11up || ie_edge);
   const gecko = !ie && /*@__PURE__*/ /gecko\/(\d+)/i.test(nav.userAgent);
   const chrome = !ie && /*@__PURE__*/ /Chrome\/(\d+)/.exec(nav.userAgent);
-  const webkit = ("webkitFontSmoothing" in doc$2.documentElement.style);
+  const webkit = ("webkitFontSmoothing" in doc.documentElement.style);
   const safari = !ie && /*@__PURE__*/ /Apple Computer/.test(nav.vendor);
   const ios = safari && ( /*@__PURE__*/ /Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2);
   var browser = {
@@ -20806,7 +20806,7 @@
     windows: /*@__PURE__*/ /Win/.test(nav.platform),
     linux: /*@__PURE__*/ /Linux|X11/.test(nav.platform),
     ie,
-    ie_version: ie_upto10 ? doc$2.documentMode || 6 : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0,
+    ie_version: ie_upto10 ? doc.documentMode || 6 : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0,
     gecko,
     gecko_version: gecko ? +( /*@__PURE__*/ /Firefox\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
     chrome: !!chrome,
@@ -20816,7 +20816,7 @@
     webkit,
     safari,
     webkit_version: webkit ? +( /*@__PURE__*/ /\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0,
-    tabSize: doc$2.documentElement.style.tabSize != null ? "tab-size" : "-moz-tab-size"
+    tabSize: doc.documentElement.style.tabSize != null ? "tab-size" : "-moz-tab-size"
   };
   const MaxJoinLen = 256;
   class TextView extends ContentView {
@@ -25493,7 +25493,7 @@
             return;
           }
         }
-        let gap = find$2(current, gap => gap.from >= line.from && gap.to <= line.to && Math.abs(gap.from - from) < halfMargin && Math.abs(gap.to - to) < halfMargin && !avoid.some(pos => gap.from < pos && gap.to > pos));
+        let gap = find$1(current, gap => gap.from >= line.from && gap.to <= line.to && Math.abs(gap.from - from) < halfMargin && Math.abs(gap.to - to) < halfMargin && !avoid.some(pos => gap.from < pos && gap.to > pos));
         if (!gap) {
           // When scrolling down, snap gap ends to line starts to avoid shifts in wrapping
           if (to < line.to && mayMeasure && wrapping && mayMeasure.visibleRanges.some(r => r.from <= to && r.to >= to)) {
@@ -25658,7 +25658,7 @@
     }
     return counted / structure.total;
   }
-  function find$2(array, f) {
+  function find$1(array, f) {
     for (let val of array) if (f(val)) return val;
     return undefined;
   }
@@ -38525,7 +38525,7 @@
    * @param { string } code
    * @return { Variables }
    */
-  function wrap$2(variables, scopeName, code) {
+  function wrap$1(variables, scopeName, code) {
     const parts = variables.children.filter(c => c.name !== scopeName);
     const children = variables.children.filter(c => c.name === scopeName);
     const namePart = parts[0];
@@ -38622,7 +38622,7 @@
           const parts = variables.children.filter(c => c.name !== 'ContextEntry');
           const name = parts[0];
           const value = last$1(parts);
-          return wrap$2(variables, 'ContextEntry', code).assign({
+          return wrap$1(variables, 'ContextEntry', code).assign({
             value: {
               ...variables.value,
               [name.computedValue()]: value?.computedValue()
@@ -38630,7 +38630,7 @@
           });
         }
         if (term === ForInExpression$1 || term === QuantifiedInExpression$1) {
-          return wrap$2(variables, 'InExpression', code);
+          return wrap$1(variables, 'InExpression', code);
         }
 
         // define <partial> within ForExpression body
@@ -39853,7 +39853,7 @@
     for (var e in t) n[e] = t[e];
     return n;
   }
-  function C(n, t) {
+  function C$1(n, t) {
     for (var e in n) if ("__source" !== e && !(e in t)) return !0;
     for (var r in t) if ("__source" !== r && n[r] !== t[r]) return !0;
     return !1;
@@ -39861,20 +39861,20 @@
   function E(n) {
     this.props = n;
   }
-  (E.prototype = new _()).isPureReactComponent = !0, E.prototype.shouldComponentUpdate = function (n, t) {
-    return C(this.props, n) || C(this.state, t);
+  (E.prototype = new _$1()).isPureReactComponent = !0, E.prototype.shouldComponentUpdate = function (n, t) {
+    return C$1(this.props, n) || C$1(this.state, t);
   };
   var w = l$3.__b;
   l$3.__b = function (n) {
     n.type && n.type.__f && n.ref && (n.props.ref = n.ref, n.ref = null), w && w(n);
   };
-  var R = "undefined" != typeof Symbol && Symbol.for && Symbol.for("react.forward_ref") || 3911;
-  function x(n) {
+  var R$1 = "undefined" != typeof Symbol && Symbol.for && Symbol.for("react.forward_ref") || 3911;
+  function x$1(n) {
     function t(t, e) {
       var r = S({}, t);
       return delete r.ref, n(r, (e = t.ref || e) && ("object" != typeof e || "current" in e) ? e : null);
     }
-    return t.$$typeof = R, t.render = t, t.prototype.isReactComponent = t.__f = !0, t.displayName = "ForwardRef(" + (n.displayName || n.name) + ")", t;
+    return t.$$typeof = R$1, t.render = t, t.prototype.isReactComponent = t.__f = !0, t.displayName = "ForwardRef(" + (n.displayName || n.name) + ")", t;
   }
   var A = l$3.__e;
   l$3.__e = function (n, t, e) {
@@ -39895,7 +39895,7 @@
   l$3.unmount = function (n) {
     var t = n.__c;
     t && t.__R && t.__R(), t && !0 === n.__h && (n.type = null), O && O(n);
-  }, (L.prototype = new _()).__c = function (n, t) {
+  }, (L.prototype = new _$1()).__c = function (n, t) {
     var e = t.__c,
       r = this;
     null == r.t && (r.t = []), r.t.push(e);
@@ -39952,12 +39952,12 @@
       n.u = e = e[2];
     }
   };
-  function D(n) {
+  function D$1(n) {
     return this.getChildContext = function () {
       return n.context;
     }, n.children;
   }
-  function I(n) {
+  function I$1(n) {
     var t = this,
       e = n.i;
     t.componentWillUnmount = function () {
@@ -39975,17 +39975,17 @@
       removeChild: function (n) {
         this.childNodes.splice(this.childNodes.indexOf(n) >>> 1, 1), t.i.removeChild(n);
       }
-    }), S$1(v$1(D, {
+    }), S$1(v$1(D$1, {
       context: t.context
     }, n.__v), t.l)) : t.l && t.componentWillUnmount();
   }
   function W(n, t) {
-    return v$1(I, {
+    return v$1(I$1, {
       __v: n,
       i: t
     });
   }
-  (M.prototype = new _()).__e = function (n) {
+  (M.prototype = new _$1()).__e = function (n) {
     var t = this,
       e = U(t.__v),
       r = t.o.get(n);
@@ -40007,13 +40007,13 @@
       T(n, e, t);
     });
   };
-  var j = "undefined" != typeof Symbol && Symbol.for && Symbol.for("react.element") || 60103,
+  var j$1 = "undefined" != typeof Symbol && Symbol.for && Symbol.for("react.element") || 60103,
     P$1 = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,
     V = function (n) {
       return ("undefined" != typeof Symbol && "symbol" == typeof Symbol() ? /fil|che|rad/i : /fil|che|ra/i).test(n);
     };
-  _.prototype.isReactComponent = {}, ["componentWillMount", "componentWillReceiveProps", "componentWillUpdate"].forEach(function (n) {
-    Object.defineProperty(_.prototype, n, {
+  _$1.prototype.isReactComponent = {}, ["componentWillMount", "componentWillReceiveProps", "componentWillUpdate"].forEach(function (n) {
+    Object.defineProperty(_$1.prototype, n, {
       configurable: !0,
       get: function () {
         return this["UNSAFE_" + n];
@@ -40032,11 +40032,11 @@
   function Y() {
     return this.cancelBubble;
   }
-  function $() {
+  function $$1() {
     return this.defaultPrevented;
   }
   l$3.event = function (n) {
-    return H && (n = H(n)), n.persist = Z, n.isPropagationStopped = Y, n.isDefaultPrevented = $, n.nativeEvent = n;
+    return H && (n = H(n)), n.persist = Z, n.isPropagationStopped = Y, n.isDefaultPrevented = $$1, n.nativeEvent = n;
   };
   var G = {
       configurable: !0,
@@ -40044,7 +40044,7 @@
         return this.class;
       }
     },
-    J = l$3.vnode;
+    J$1 = l$3.vnode;
   l$3.vnode = function (n) {
     var t = n.type,
       e = n.props,
@@ -40060,7 +40060,7 @@
         n.props.selected = r.multiple ? -1 != r.defaultValue.indexOf(n.props.value) : r.defaultValue == n.props.value;
       })), n.props = r;
     }
-    t && e.class != e.className && (G.enumerable = "className" in e, null != e.className && (r.class = e.className), Object.defineProperty(r, "className", G)), n.$$typeof = j, J && J(n);
+    t && e.class != e.className && (G.enumerable = "className" in e, null != e.className && (r.class = e.className), Object.defineProperty(r, "className", G)), n.$$typeof = j$1, J$1 && J$1(n);
   };
   var K = l$3.__r;
   l$3.__r = function (n) {
@@ -40179,7 +40179,7 @@
   var int = function (bool) {
     return bool === true ? 1 : 0;
   };
-  function debounce$3(fn, wait) {
+  function debounce$1(fn, wait) {
     var t;
     return function () {
       var _this = this;
@@ -40791,8 +40791,8 @@
         setupMobile();
         return;
       }
-      var debouncedResize = debounce$3(onResize, 50);
-      self._debouncedChange = debounce$3(triggerChange, DEBOUNCED_CHANGE_MS);
+      var debouncedResize = debounce$1(onResize, 50);
+      self._debouncedChange = debounce$1(triggerChange, DEBOUNCED_CHANGE_MS);
       if (self.daysContainer && !/iPhone|iPad|iPod/i.test(navigator.userAgent)) bind(self.daysContainer, "mouseover", function (e) {
         if (self.config.mode === "range") onMouseOver(getEventTarget(e));
       });
@@ -42322,7 +42322,7 @@
         b = w[x];
       return b ? b.splice ? b.splice(0, 0, "markup") : "string" == typeof b ? w[x] += " markup" : "object" == typeof b && (b.markup = !0) : w[x] = "markup", C("div", w, s || null);
     }, i;
-  })(_);
+  })(_$1);
 
   const CLASS_PATTERN = /^class[ {]/;
 
@@ -47509,26 +47509,26 @@
     return [...new Set(variables)];
   };
 
-  /**
-   * Get the variable name at the specified index in a given path expression.
-   *
-   * @param {Object} root - The root node of the path expression tree.
-   * @param {number} index - The index of the variable name to retrieve.
-   * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
+  /**
+   * Get the variable name at the specified index in a given path expression.
+   *
+   * @param {Object} root - The root node of the path expression tree.
+   * @param {number} index - The index of the variable name to retrieve.
+   * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
    */
   const _getVariableNameAtPathIndex = (root, index) => {
     const accessors = _deconstructPathExpression(root);
     return accessors[index] || null;
   };
 
-  /**
-   * Extracts the variables which are required of the external context for a given path expression.
-   * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
-   *
-   * @param {Object} node - The root node of the path expression tree.
-   * @param {number} initialDepth - The depth at which the root node is located in the outer context.
-   * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
-   * @returns {Set} - A set containing the extracted variable names.
+  /**
+   * Extracts the variables which are required of the external context for a given path expression.
+   * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
+   *
+   * @param {Object} node - The root node of the path expression tree.
+   * @param {number} initialDepth - The depth at which the root node is located in the outer context.
+   * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
+   * @returns {Set} - A set containing the extracted variable names.
    */
   const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) => {
     // depth info represents the previous (initialised as null) and current depth of the current accessor in the path expression
@@ -47574,11 +47574,11 @@
     return new Set(extractedVariables);
   };
 
-  /**
-   * Deconstructs a path expression tree into an array of components.
-   *
-   * @param {Object} root - The root node of the path expression tree.
-   * @returns {Array<string>} An array of components in the path expression, in the correct order.
+  /**
+   * Deconstructs a path expression tree into an array of components.
+   *
+   * @param {Object} root - The root node of the path expression tree.
+   * @returns {Array<string>} An array of components in the path expression, in the correct order.
    */
   const _deconstructPathExpression = root => {
     let node = root;
@@ -47597,13 +47597,13 @@
     return parts.reverse();
   };
 
-  /**
-   * Builds a simplified feel structure tree from the given parse tree and feel string.
-   * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
-   *
-   * @param {Object} parseTree - The parse tree generated by a parser.
-   * @param {string} feelString - The feel string used for parsing.
-   * @returns {Object} The simplified feel structure tree.
+  /**
+   * Builds a simplified feel structure tree from the given parse tree and feel string.
+   * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
+   *
+   * @param {Object} parseTree - The parse tree generated by a parser.
+   * @param {string} feelString - The feel string used for parsing.
+   * @returns {Object} The simplified feel structure tree.
    */
   const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
     const stack = [{
@@ -47629,9 +47629,9 @@
     return _extractFilterExpressions(stack[0].children[0]);
   };
 
-  /**
-   * Restructure the tree in such a way to bring filters (which create new contexts) to the root of the tree.
-   * This is done to simplify the extraction of variables and match the context hierarchy.
+  /**
+   * Restructure the tree in such a way to bring filters (which create new contexts) to the root of the tree.
+   * This is done to simplify the extraction of variables and match the context hierarchy.
    */
   const _extractFilterExpressions = tree => {
     const flattenedExpressionTree = {
@@ -47671,25 +47671,25 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * Determines if the given value is a FEEL expression.
-     *
-     * @param {any} value
-     * @returns {boolean}
-     *
+    /**
+     * Determines if the given value is a FEEL expression.
+     *
+     * @param {any} value
+     * @returns {boolean}
+     *
      */
     isExpression(value) {
       return isString$3(value) && value.startsWith('=');
     }
 
-    /**
-     * Retrieve variable names from a given FEEL expression.
-     *
-     * @param {string} expression
-     * @param {object} [options]
-     * @param {string} [options.type]
-     *
-     * @returns {string[]}
+    /**
+     * Retrieve variable names from a given FEEL expression.
+     *
+     * @param {string} expression
+     * @param {object} [options]
+     * @param {string} [options.type]
+     *
+     * @returns {string[]}
      */
     getVariableNames(expression, options = {}) {
       const {
@@ -47704,13 +47704,13 @@
       return getFlavouredFeelVariableNames(expression, type);
     }
 
-    /**
-     * Evaluate an expression.
-     *
-     * @param {string} expression
-     * @param {import('../../types').Data} [data]
-     *
-     * @returns {any}
+    /**
+     * Evaluate an expression.
+     *
+     * @param {string} expression
+     * @param {import('../../types').Data} [data]
+     *
+     * @returns {any}
      */
     evaluate(expression, data = {}) {
       if (!expression) {
@@ -47734,23 +47734,23 @@
   class FeelersTemplating {
     constructor() {}
 
-    /**
-     * Determines if the given value is a feelers template.
-     *
-     * @param {any} value
-     * @returns {boolean}
-     *
+    /**
+     * Determines if the given value is a feelers template.
+     *
+     * @param {any} value
+     * @returns {boolean}
+     *
      */
     isTemplate(value) {
       return isString$3(value) && (value.startsWith('=') || /{{.*?}}/.test(value));
     }
 
-    /**
-     * Retrieve variable names from a given feelers template.
-     *
-     * @param {string} template
-     *
-     * @returns {string[]}
+    /**
+     * Retrieve variable names from a given feelers template.
+     *
+     * @param {string} template
+     *
+     * @returns {string[]}
      */
     getVariableNames(template) {
       if (!this.isTemplate(template)) {
@@ -47776,17 +47776,17 @@
       }, []);
     }
 
-    /**
-     * Evaluate a template.
-     *
-     * @param {string} template
-     * @param {Object<string, any>} context
-     * @param {Object} options
-     * @param {boolean} [options.debug = false]
-     * @param {boolean} [options.strict = false]
-     * @param {Function} [options.buildDebugString]
-     *
-     * @returns
+    /**
+     * Evaluate a template.
+     *
+     * @param {string} template
+     * @param {Object<string, any>} context
+     * @param {Object} options
+     * @param {boolean} [options.debug = false]
+     * @param {boolean} [options.strict = false]
+     * @param {Function} [options.buildDebugString]
+     *
+     * @returns
      */
     evaluate(template, context = {}, options = {}) {
       const {
@@ -47801,22 +47801,22 @@
       });
     }
 
-    /**
-    * @typedef {Object} ExpressionWithDepth
-    * @property {number} depth - The depth of the expression in the syntax tree.
-    * @property {string} expression - The extracted expression
+    /**
+    * @typedef {Object} ExpressionWithDepth
+    * @property {number} depth - The depth of the expression in the syntax tree.
+    * @property {string} expression - The extracted expression
     */
 
-    /**
-    * Extracts all feel expressions in the template along with their depth in the syntax tree.
-    * The depth is incremented for child expressions of loops to account for context drilling.
-    * @name extractExpressionsWithDepth
-    * @param {string} template - A feelers template string.
-    * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
-    *
-    * @example
-    * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
-    * const extractedExpressions = _extractExpressionsWithDepth(template);
+    /**
+    * Extracts all feel expressions in the template along with their depth in the syntax tree.
+    * The depth is incremented for child expressions of loops to account for context drilling.
+     * @name extractExpressionsWithDepth
+    * @param {string} template - A feelers template string.
+    * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
+    *
+    * @example
+    * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
+    * const extractedExpressions = _extractExpressionsWithDepth(template);
     */
     _extractExpressionsWithDepth(template) {
       // build simplified feelers syntax tree
@@ -47847,9 +47847,9 @@
   }
   FeelersTemplating.$inject = [];
 
-  /**
-   * @typedef {object} Condition
-   * @property {string} [hide]
+  /**
+   * @typedef {object} Condition
+   * @property {string} [hide]
    */
 
   class ConditionChecker {
@@ -47858,11 +47858,11 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * For given data, remove properties based on condition.
-     *
-     * @param {Object<string, any>} properties
-     * @param {Object<string, any>} data
+    /**
+     * For given data, remove properties based on condition.
+     *
+     * @param {Object<string, any>} properties
+     * @param {Object<string, any>} data
      */
     applyConditions(properties, data = {}) {
       const conditions = this._getConditions();
@@ -47881,13 +47881,13 @@
       return newProperties;
     }
 
-    /**
-     * Check if given condition is met. Returns null for invalid/missing conditions.
-     *
-     * @param {string} condition
-     * @param {import('../../types').Data} [data]
-     *
-     * @returns {boolean|null}
+    /**
+     * Check if given condition is met. Returns null for invalid/missing conditions.
+     *
+     * @param {string} condition
+     * @param {import('../../types').Data} [data]
+     *
+     * @returns {boolean|null}
      */
     check(condition, data = {}) {
       if (!condition) {
@@ -47908,12 +47908,12 @@
       }
     }
 
-    /**
-     * Check if hide condition is met.
-     *
-     * @param {Condition} condition
-     * @param {Object<string, any>} data
-     * @returns {boolean}
+    /**
+     * Check if hide condition is met.
+     *
+     * @param {Condition} condition
+     * @param {Object<string, any>} data
+     * @returns {boolean}
      */
     _checkHideCondition(condition, data) {
       if (!condition.hide) {
@@ -47954,12 +47954,12 @@
       this._converter = new showdown.Converter();
     }
 
-    /**
-     * Render markdown to HTML.
-     *
-     * @param {string} markdown - The markdown to render
-     *
-     * @returns {string} HTML
+    /**
+     * Render markdown to HTML.
+     *
+     * @param {string} markdown - The markdown to render
+     *
+     * @returns {string} HTML
      */
     render(markdown) {
       return this._converter.makeHtml(markdown);
@@ -48516,10 +48516,10 @@
     return injector;
   }
 
-  /**
-   * @param {string?} prefix
-   *
-   * @returns Element
+  /**
+   * @param {string?} prefix
+   *
+   * @returns Element
    */
   function createFormContainer(prefix = 'fjs') {
     const container = document.createElement('div');
@@ -48550,22 +48550,22 @@
     return `${type}${generateIndexForType(type)}`;
   }
 
-  /**
-   * @template T
-   * @param {T} data
-   * @param {(this: any, key: string, value: any) => any} [replacer]
-   * @return {T}
+  /**
+   * @template T
+   * @param {T} data
+   * @param {(this: any, key: string, value: any) => any} [replacer]
+   * @return {T}
    */
   function clone(data, replacer) {
     return JSON.parse(JSON.stringify(data, replacer));
   }
 
-  /**
-   * Parse the schema for input variables a form might make use of
-   *
-   * @param {any} schema
-   *
-   * @return {string[]}
+  /**
+   * Parse the schema for input variables a form might make use of
+   *
+   * @param {any} schema
+   *
+   * @return {string[]}
    */
   function getSchemaVariables(schema, options = {}) {
     const {
@@ -49284,8 +49284,8 @@
 
   // helpers //////////
 
-  /**
-   * Helper function to evaluate optional FEEL validation values.
+  /**
+   * Helper function to evaluate optional FEEL validation values.
    */
   function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
     const evaluatedValidate = {
@@ -49366,23 +49366,23 @@
   };
   FormFieldRegistry$1.$inject = ['eventBus'];
 
-  /**
-   * @typedef { { id: String, components: Array<String> } } FormRow
-   * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
+  /**
+   * @typedef { { id: String, components: Array<String> } } FormRow
+   * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
    */
 
-  /**
-   * Maintains the Form layout in a given structure, for example
-   *
-   *  [
-   *    {
-   *      formFieldId: 'FormField_1',
-   *      rows: [
-   *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
-   *      ]
-   *    }
-   *  ]
-   *
+  /**
+   * Maintains the Form layout in a given structure, for example
+   *
+   *  [
+   *    {
+   *      formFieldId: 'FormField_1',
+   *      rows: [
+   *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+   *      ]
+   *    }
+   *  ]
+   *
    */
   class FormLayouter {
     constructor(eventBus) {
@@ -49392,8 +49392,8 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * @param {FormRow} row
+    /**
+     * @param {FormRow} row
      */
     addRow(formFieldId, row) {
       let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
@@ -49407,18 +49407,18 @@
       rowsPerComponent.rows.push(row);
     }
 
-    /**
-     * @param {String} id
-     * @returns {FormRow}
+    /**
+     * @param {String} id
+     * @returns {FormRow}
      */
     getRow(id) {
       const rows = allRows(this._rows);
       return rows.find(r => r.id === id);
     }
 
-    /**
-     * @param {any} formField
-     * @returns {FormRow}
+    /**
+     * @param {any} formField
+     * @returns {FormRow}
      */
     getRowForField(formField) {
       return allRows(this._rows).find(r => {
@@ -49429,9 +49429,9 @@
       });
     }
 
-    /**
-     * @param {String} formFieldId
-     * @returns { Array<FormRow> }
+    /**
+     * @param {String} formFieldId
+     * @returns { Array<FormRow> }
      */
     getRows(formFieldId) {
       const rowsForField = this._rows.find(r => formFieldId === r.formFieldId);
@@ -49441,15 +49441,15 @@
       return rowsForField.rows;
     }
 
-    /**
-     * @returns {string}
+    /**
+     * @returns {string}
      */
     nextRowId() {
       return this._ids.nextPrefixed('Row_');
     }
 
-    /**
-     * @param {any} formField
+    /**
+     * @param {any} formField
      */
     calculateLayout(formField) {
       const {
@@ -49503,19 +49503,19 @@
     });
   }
 
-  /**
-   * @param {Array<FormRows>} formRows
-   * @returns {Array<FormRow>}
+  /**
+   * @param {Array<FormRows>} formRows
+   * @returns {Array<FormRow>}
    */
   function allRows(formRows) {
     return flatten$2(formRows.map(c => c.rows));
   }
   let Importer$1 = class Importer {
-    /**
-     * @constructor
-     * @param { import('../core').FormFieldRegistry } formFieldRegistry
-     * @param { import('../render/FormFields').default } formFields
-     * @param { import('../core').FormLayouter } formLayouter
+    /**
+     * @constructor
+     * @param { import('../core').FormFieldRegistry } formFieldRegistry
+     * @param { import('../render/FormFields').default } formFields
+     * @param { import('../core').FormLayouter } formLayouter
      */
     constructor(formFieldRegistry, formFields, formLayouter) {
       this._formFieldRegistry = formFieldRegistry;
@@ -49523,15 +49523,15 @@
       this._formLayouter = formLayouter;
     }
 
-    /**
-     * Import schema adding `id`, `_parent` and `_path`
-     * information to each field and adding it to the
-     * form field registry.
-     *
-     * @param {any} schema
-     * @param {any} [data]
-     *
-     * @return { { warnings: Array<any>, schema: any, data: any } }
+    /**
+     * Import schema adding `id`, `_parent` and `_path`
+     * information to each field and adding it to the
+     * form field registry.
+     *
+     * @param {any} schema
+     * @param {any} [data]
+     *
+     * @return { { warnings: Array<any>, schema: any, data: any } }
      */
     importSchema(schema, data = {}) {
       // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
@@ -49552,11 +49552,11 @@
       }
     }
 
-    /**
-     * @param {any} formField
-     * @param {string} [parentId]
-     *
-     * @return {any} importedField
+    /**
+     * @param {any} formField
+     * @param {string} [parentId]
+     *
+     * @return {any} importedField
      */
     importFormField(formField, parentId) {
       const {
@@ -49607,10 +49607,10 @@
       });
     }
 
-    /**
-     * @param {Object} data
-     *
-     * @return {Object} initializedData
+    /**
+     * @param {Object} data
+     *
+     * @return {Object} initializedData
      */
     initializeFieldValues(data) {
       return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -49710,7 +49710,7 @@
       ...options
     })
   };
-  const FormRenderContext = D$1({
+  const FormRenderContext = D$2({
     Empty: props => {
       return null;
     },
@@ -49744,14 +49744,14 @@
   });
   var FormRenderContext$1 = FormRenderContext;
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService$2(type, strict) {}
-  const FormContext = D$1({
+  const FormContext = D$2({
     getService: getService$2,
     formId: null
   });
@@ -49759,14 +49759,14 @@
   function useService$2(type, strict) {
     const {
       getService
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     return getService(type, strict);
   }
 
-  /**
-   * Returns the conditionally filtered data of a form reactively.
-   * Memoised to minimize re-renders
-   *
+  /**
+   * Returns the conditionally filtered data of a form reactively.
+   * Memoised to minimize re-renders
+   *
    */
   function useFilteredFormData() {
     const {
@@ -49783,12 +49783,12 @@
     }, [conditionChecker, data, initialData]);
   }
 
-  /**
-   * Evaluate if condition is met reactively based on the conditionChecker and form data.
-   *
-   * @param {string | undefined} condition
-   *
-   * @returns {boolean} true if condition is met or no condition or condition checker exists
+  /**
+   * Evaluate if condition is met reactively based on the conditionChecker and form data.
+   *
+   * @param {string | undefined} condition
+   *
+   * @returns {boolean} true if condition is met or no condition or condition checker exists
    */
   function useCondition(condition) {
     const conditionChecker = useService$2('conditionChecker', false);
@@ -49798,13 +49798,13 @@
     }, [conditionChecker, condition, filteredData]);
   }
 
-  /**
-   * Evaluate a string reactively based on the expressionLanguage and form data.
-   * If the string is not an expression, it is returned as is.
-   * Memoised to minimize re-renders.
-   *
-   * @param {string} value
-   *
+  /**
+   * Evaluate a string reactively based on the expressionLanguage and form data.
+   * If the string is not an expression, it is returned as is.
+   * Memoised to minimize re-renders.
+   *
+   * @param {string} value
+   *
    */
   function useExpressionEvaluation(value) {
     const formData = useFilteredFormData();
@@ -49832,16 +49832,16 @@
     });
   }
 
-  /**
-   * Retrieve readonly value of a form field, given it can be an
-   * expression optionally or configured globally.
-   *
-   * @typedef { import('../../types').FormProperties } FormProperties
-   *
-   * @param {any} formField
-   * @param {FormProperties} properties
-   *
-   * @returns {boolean}
+  /**
+   * Retrieve readonly value of a form field, given it can be an
+   * expression optionally or configured globally.
+   *
+   * @typedef { import('../../types').FormProperties } FormProperties
+   *
+   * @param {any} formField
+   * @param {FormProperties} properties
+   *
+   * @returns {boolean}
    */
   function useReadonly(formField, properties = {}) {
     const expressionLanguage = useService$2('expressionLanguage');
@@ -49859,16 +49859,16 @@
     return readonly || false;
   }
 
-  /**
-   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
-   * Memoised to minimize re-renders
-   *
-   * @param {string} value
-   * @param {Object} options
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
+  /**
+   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+   * Memoised to minimize re-renders
+   *
+   * @param {string} value
+   * @param {Object} options
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
    */
   function useTemplateEvaluation(value, options) {
     const filteredData = useFilteredFormData();
@@ -49881,17 +49881,17 @@
     }, [filteredData, templating, value, options]);
   }
 
-  /**
-   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
-   * If the string contains multiple lines, only the first line is returned.
-   * Memoised to minimize re-renders
-   *
-   * @param {string} value
-   * @param {Object} [options]
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
+  /**
+   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+   * If the string contains multiple lines, only the first line is returned.
+   * Memoised to minimize re-renders
+   *
+   * @param {string} value
+   * @param {Object} [options]
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
    */
   function useSingleLineTemplateEvaluation(value, options = {}) {
     const evaluatedTemplate = useTemplateEvaluation(value, options);
@@ -49983,7 +49983,7 @@
     };
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: classNames(formFieldClasses(type$b, {
@@ -50076,8 +50076,8 @@
     return value || value === 0 || value === false;
   }
 
-  /**
-   * @enum { String }
+  /**
+   * @enum { String }
    */
   const LOAD_STATES = {
     LOADING: 'loading',
@@ -50085,17 +50085,17 @@
     ERROR: 'error'
   };
 
-  /**
-   * @typedef {Object} ValuesGetter
-   * @property {Object[]} values - The values data
-   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+  /**
+   * @typedef {Object} ValuesGetter
+   * @property {Object[]} values - The values data
+   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
    */
 
-  /**
-   * A hook to load values for single and multiselect components.
-   *
-   * @param {Object} field - The form field to handle values for
-   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+  /**
+   * A hook to load values for single and multiselect components.
+   *
+   * @param {Object} field - The form field to handle values for
+   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
    */
   function useValuesAsync(field) {
     const {
@@ -50401,7 +50401,7 @@
     } = useValuesAsync(field);
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: classNames(formFieldClasses(type$a, {
@@ -50483,7 +50483,7 @@
       Element,
       Empty,
       Column
-    } = F(FormRenderContext$1);
+    } = F$1(FormRenderContext$1);
     const FormFieldComponent = formFields.get(field.type);
     if (!FormFieldComponent) {
       throw new Error(`cannot render field <${field.type}>`);
@@ -50532,7 +50532,7 @@
       Children,
       Empty,
       Row
-    } = F(FormRenderContext$1);
+    } = F$1(FormRenderContext$1);
     const {
       field
     } = props;
@@ -51106,7 +51106,7 @@
     } = validate;
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     const dateTimeGroupRef = s$1();
     const getNullDateTime = () => ({
       date: new Date(Date.parse(null)),
@@ -51282,10 +51282,10 @@
     }
   };
 
-  /**
-   * This file must not be changed or exchanged.
-   *
-   * @see http://bpmn.io/license for more information.
+  /**
+   * This file must not be changed or exchanged.
+   *
+   * @see http://bpmn.io/license for more information.
    */
   function Logo() {
     return e$1("svg", {
@@ -51415,11 +51415,11 @@
 
   const FORM_ELEMENT = document.createElement('form');
 
-  /**
-   * Sanitize a HTML string and return the cleaned, safe version.
-   *
-   * @param {string} html
-   * @return {string}
+  /**
+   * Sanitize a HTML string and return the cleaned, safe version.
+   *
+   * @param {string} html
+   * @return {string}
    */
 
   // see https://github.com/developit/snarkdown/issues/70
@@ -51437,29 +51437,29 @@
     }
   }
 
-  /**
-   * Sanitizes an image source to ensure we only allow for data URI and links
-   * that start with http(s).
-   *
-   * Note: Most browsers anyway do not support script execution in <img> elements.
-   *
-   * @param {string} src
-   * @returns {string}
+  /**
+   * Sanitizes an image source to ensure we only allow for data URI and links
+   * that start with http(s).
+   *
+   * Note: Most browsers anyway do not support script execution in <img> elements.
+   *
+   * @param {string} src
+   * @returns {string}
    */
   function sanitizeImageSource(src) {
     const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
     return valid ? src : '';
   }
 
-  /**
-   * Recursively sanitize a HTML node, potentially
-   * removing it, its children or attributes.
-   *
-   * Inspired by https://github.com/developit/snarkdown/issues/70
-   * and https://github.com/cure53/DOMPurify. Simplified
-   * for our use-case.
-   *
-   * @param {Element} node
+  /**
+   * Recursively sanitize a HTML node, potentially
+   * removing it, its children or attributes.
+   *
+   * Inspired by https://github.com/developit/snarkdown/issues/70
+   * and https://github.com/cure53/DOMPurify. Simplified
+   * for our use-case.
+   *
+   * @param {Element} node
    */
   function sanitizeNode(node) {
     // allow text nodes
@@ -51503,13 +51503,13 @@
     }
   }
 
-  /**
-   * Validates attributes for validity.
-   *
-   * @param {string} lcTag
-   * @param {string} lcName
-   * @param {string} value
-   * @return {boolean}
+  /**
+   * Validates attributes for validity.
+   *
+   * @param {string} lcTag
+   * @param {string} lcName
+   * @param {string} value
+   * @return {boolean}
    */
   function isValidAttribute(lcTag, lcName, value) {
     // disallow most attributes based on whitelist
@@ -51603,7 +51603,7 @@
     });
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     return e$1("div", {
       class: formFieldClasses(type$8),
       children: e$1("div", {
@@ -51843,7 +51843,7 @@
     };
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$7, {
@@ -51979,7 +51979,7 @@
     } = useValuesAsync(field);
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$6, {
@@ -52084,7 +52084,7 @@
     } = props;
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     const [filter, setFilter] = l$2('');
     const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
     const [shouldApplyFilter, setShouldApplyFilter] = l$2(true);
@@ -52238,7 +52238,7 @@
     } = props;
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
     const selectRef = s$1();
     const {
@@ -52353,7 +52353,7 @@
     } = validate;
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     const selectProps = d(() => ({
       id,
@@ -52463,7 +52463,7 @@
     } = validate;
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     const [filter, setFilter] = l$2('');
     const [filteredOptions, setFilteredOptions] = l$2([]);
@@ -52774,7 +52774,7 @@
     };
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$1, {
@@ -52861,7 +52861,7 @@
         value: target.value
       });
     };
-    h(() => {
+    h$1(() => {
       autoSizeTextarea(textareaRef.current);
     }, [value]);
     y(() => {
@@ -52869,7 +52869,7 @@
     }, []);
     const {
       formId
-    } = F(FormContext$1);
+    } = F$1(FormContext$1);
     const errorMessageId = errors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type, {
@@ -53926,7 +53926,7 @@
    *
    * @return {Object}
    */
-  function find$1(collection, matcher) {
+  function find(collection, matcher) {
     matcher = toMatcher(matcher);
     let match;
     forEach(collection, function (val, key) {
@@ -54091,7 +54091,7 @@
    *
    * @return {Function} debounced function
    */
-  function debounce$2(fn, timeout) {
+  function debounce(fn, timeout) {
     let timer;
     let lastArgs;
     let lastThis;
@@ -54218,898 +54218,500 @@
     return isUndefined(currentTarget) ? defaultValue : currentTarget;
   }
 
-  var atoa$1 = function atoa(a, n) {
-    return Array.prototype.slice.call(a, n);
-  };
-
-  var si = typeof setImmediate === 'function',
-    tick;
-  if (si) {
-    tick = function (fn) {
-      setImmediate(fn);
-    };
-  } else if (typeof process !== 'undefined' && process.nextTick) {
-    tick = process.nextTick;
-  } else {
-    tick = function (fn) {
-      setTimeout(fn, 0);
-    };
+  var R = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+  function Ee(e) {
+    return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
   }
-  var ticky$1 = tick;
-
-  var ticky = ticky$1;
-  var debounce$1 = function debounce(fn, args, ctx) {
-    if (!fn) {
-      return;
-    }
-    ticky(function run() {
-      fn.apply(ctx || null, args || []);
-    });
+  var Ae = function (n, i) {
+      return Array.prototype.slice.call(n, i);
+    },
+    He = typeof setImmediate == "function",
+    J;
+  He ? J = function (e) {
+    setImmediate(e);
+  } : J = function (e) {
+    setTimeout(e, 0);
   };
-
-  var atoa = atoa$1;
-  var debounce = debounce$1;
-  var emitter$1 = function emitter(thing, options) {
-    var opts = options || {};
-    var evt = {};
-    if (thing === undefined) {
-      thing = {};
-    }
-    thing.on = function (type, fn) {
-      if (!evt[type]) {
-        evt[type] = [fn];
-      } else {
-        evt[type].push(fn);
-      }
-      return thing;
-    };
-    thing.once = function (type, fn) {
-      fn._once = true; // thing.off(fn) still works!
-      thing.on(type, fn);
-      return thing;
-    };
-    thing.off = function (type, fn) {
-      var c = arguments.length;
-      if (c === 1) {
-        delete evt[type];
-      } else if (c === 0) {
-        evt = {};
-      } else {
-        var et = evt[type];
-        if (!et) {
-          return thing;
-        }
-        et.splice(et.indexOf(fn), 1);
-      }
-      return thing;
-    };
-    thing.emit = function () {
-      var args = atoa(arguments);
-      return thing.emitterSnapshot(args.shift()).apply(this, args);
-    };
-    thing.emitterSnapshot = function (type) {
-      var et = (evt[type] || []).slice(0);
-      return function () {
-        var args = atoa(arguments);
-        var ctx = this || thing;
-        if (type === 'error' && opts.throws !== false && !et.length) {
-          throw args.length === 1 ? args[0] : args;
-        }
-        et.forEach(function emitter(listen) {
-          if (opts.async) {
-            debounce(listen, args, ctx);
-          } else {
-            listen.apply(ctx, args);
-          }
-          if (listen._once) {
-            thing.off(type, listen);
-          }
-        });
-        return thing;
-      };
+  var Le = J,
+    ze = Le,
+    Ge = function (n, i, r) {
+      n && ze(function () {
+        n.apply(r || null, i || []);
+      });
+    },
+    le = Ae,
+    Ke = Ge,
+    Ue = function (n, i) {
+      var r = i || {},
+        c = {};
+      return n === void 0 && (n = {}), n.on = function (o, s) {
+        return c[o] ? c[o].push(s) : c[o] = [s], n;
+      }, n.once = function (o, s) {
+        return s._once = !0, n.on(o, s), n;
+      }, n.off = function (o, s) {
+        var w = arguments.length;
+        if (w === 1) delete c[o];else if (w === 0) c = {};else {
+          var S = c[o];
+          if (!S) return n;
+          S.splice(S.indexOf(s), 1);
+        }
+        return n;
+      }, n.emit = function () {
+        var o = le(arguments);
+        return n.emitterSnapshot(o.shift()).apply(this, o);
+      }, n.emitterSnapshot = function (o) {
+        var s = (c[o] || []).slice(0);
+        return function () {
+          var w = le(arguments),
+            S = this || n;
+          if (o === "error" && r.throws !== !1 && !s.length) throw w.length === 1 ? w[0] : w;
+          return s.forEach(function (y) {
+            r.async ? Ke(y, w, S) : y.apply(S, w), y._once && n.off(o, y);
+          }), n;
+        };
+      }, n;
     };
-    return thing;
-  };
-
-  var NativeCustomEvent = commonjsGlobal.CustomEvent;
-  function useNative() {
+  const Ve = /* @__PURE__ */Ee(Ue);
+  var we = R.CustomEvent;
+  function We() {
     try {
-      var p = new NativeCustomEvent('cat', {
+      var e = new we("cat", {
         detail: {
-          foo: 'bar'
+          foo: "bar"
         }
       });
-      return 'cat' === p.type && 'bar' === p.detail.foo;
-    } catch (e) {}
-    return false;
+      return e.type === "cat" && e.detail.foo === "bar";
+    } catch {}
+    return !1;
   }
-
-  /**
-   * Cross-browser `CustomEvent` constructor.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent.CustomEvent
-   *
-   * @public
-   */
-
-  var customEvent$1 = useNative() ? NativeCustomEvent :
-  // IE >= 9
-  'undefined' !== typeof document && 'function' === typeof document.createEvent ? function CustomEvent(type, params) {
-    var e = document.createEvent('CustomEvent');
-    if (params) {
-      e.initCustomEvent(type, params.bubbles, params.cancelable, params.detail);
-    } else {
-      e.initCustomEvent(type, false, false, void 0);
-    }
-    return e;
-  } :
-  // IE <= 8
-  function CustomEvent(type, params) {
-    var e = document.createEventObject();
-    e.type = type;
-    if (params) {
-      e.bubbles = Boolean(params.bubbles);
-      e.cancelable = Boolean(params.cancelable);
-      e.detail = params.detail;
-    } else {
-      e.bubbles = false;
-      e.cancelable = false;
-      e.detail = void 0;
-    }
-    return e;
-  };
-
-  var eventmap$1 = [];
-  var eventname = '';
-  var ron = /^on/;
-  for (eventname in commonjsGlobal) {
-    if (ron.test(eventname)) {
-      eventmap$1.push(eventname.slice(2));
-    }
-  }
-  var eventmap_1 = eventmap$1;
-
-  var customEvent = customEvent$1;
-  var eventmap = eventmap_1;
-  var doc$1 = commonjsGlobal.document;
-  var addEvent = addEventEasy;
-  var removeEvent = removeEventEasy;
-  var hardCache = [];
-  if (!commonjsGlobal.addEventListener) {
-    addEvent = addEventHard;
-    removeEvent = removeEventHard;
-  }
-  var crossvent$1 = {
-    add: addEvent,
-    remove: removeEvent,
-    fabricate: fabricateEvent
+  var qe = We() ? we :
+    // IE >= 9
+    typeof document < "u" && typeof document.createEvent == "function" ? function (n, i) {
+      var r = document.createEvent("CustomEvent");
+      return i ? r.initCustomEvent(n, i.bubbles, i.cancelable, i.detail) : r.initCustomEvent(n, !1, !1, void 0), r;
+    } :
+    // IE <= 8
+    function (n, i) {
+      var r = document.createEventObject();
+      return r.type = n, i ? (r.bubbles = !!i.bubbles, r.cancelable = !!i.cancelable, r.detail = i.detail) : (r.bubbles = !1, r.cancelable = !1, r.detail = void 0), r;
+    },
+    ye = [],
+    q = "",
+    Je = /^on/;
+  for (q in R) Je.test(q) && ye.push(q.slice(2));
+  var Qe = ye,
+    Ze = qe,
+    et = Qe,
+    $ = R.document,
+    Ce = nt,
+    Se = it,
+    k = [];
+  R.addEventListener || (Ce = rt, Se = ot);
+  var tt = {
+    add: Ce,
+    remove: Se,
+    fabricate: at
   };
-  function addEventEasy(el, type, fn, capturing) {
-    return el.addEventListener(type, fn, capturing);
+  function nt(e, n, i, r) {
+    return e.addEventListener(n, i, r);
   }
-  function addEventHard(el, type, fn) {
-    return el.attachEvent('on' + type, wrap$1(el, type, fn));
+  function rt(e, n, i) {
+    return e.attachEvent("on" + n, ct(e, n, i));
   }
-  function removeEventEasy(el, type, fn, capturing) {
-    return el.removeEventListener(type, fn, capturing);
+  function it(e, n, i, r) {
+    return e.removeEventListener(n, i, r);
   }
-  function removeEventHard(el, type, fn) {
-    var listener = unwrap(el, type, fn);
-    if (listener) {
-      return el.detachEvent('on' + type, listener);
-    }
+  function ot(e, n, i) {
+    var r = Oe(e, n, i);
+    if (r) return e.detachEvent("on" + n, r);
   }
-  function fabricateEvent(el, type, model) {
-    var e = eventmap.indexOf(type) === -1 ? makeCustomEvent() : makeClassicEvent();
-    if (el.dispatchEvent) {
-      el.dispatchEvent(e);
-    } else {
-      el.fireEvent('on' + type, e);
+  function at(e, n, i) {
+    var r = et.indexOf(n) === -1 ? o() : c();
+    e.dispatchEvent ? e.dispatchEvent(r) : e.fireEvent("on" + n, r);
+    function c() {
+      var s;
+      return $.createEvent ? (s = $.createEvent("Event"), s.initEvent(n, !0, !0)) : $.createEventObject && (s = $.createEventObject()), s;
     }
-    function makeClassicEvent() {
-      var e;
-      if (doc$1.createEvent) {
-        e = doc$1.createEvent('Event');
-        e.initEvent(type, true, true);
-      } else if (doc$1.createEventObject) {
-        e = doc$1.createEventObject();
-      }
-      return e;
-    }
-    function makeCustomEvent() {
-      return new customEvent(type, {
-        detail: model
+    function o() {
+      return new Ze(n, {
+        detail: i
       });
     }
   }
-  function wrapperFactory(el, type, fn) {
-    return function wrapper(originalEvent) {
-      var e = originalEvent || commonjsGlobal.event;
-      e.target = e.target || e.srcElement;
-      e.preventDefault = e.preventDefault || function preventDefault() {
-        e.returnValue = false;
-      };
-      e.stopPropagation = e.stopPropagation || function stopPropagation() {
-        e.cancelBubble = true;
-      };
-      e.which = e.which || e.keyCode;
-      fn.call(el, e);
+  function ut(e, n, i) {
+    return function (c) {
+      var o = c || R.event;
+      o.target = o.target || o.srcElement, o.preventDefault = o.preventDefault || function () {
+        o.returnValue = !1;
+      }, o.stopPropagation = o.stopPropagation || function () {
+        o.cancelBubble = !0;
+      }, o.which = o.which || o.keyCode, i.call(e, o);
     };
   }
-  function wrap$1(el, type, fn) {
-    var wrapper = unwrap(el, type, fn) || wrapperFactory(el, type, fn);
-    hardCache.push({
-      wrapper: wrapper,
-      element: el,
-      type: type,
-      fn: fn
-    });
-    return wrapper;
-  }
-  function unwrap(el, type, fn) {
-    var i = find(el, type, fn);
-    if (i) {
-      var wrapper = hardCache[i].wrapper;
-      hardCache.splice(i, 1); // free up a tad of memory
-      return wrapper;
-    }
-  }
-  function find(el, type, fn) {
-    var i, item;
-    for (i = 0; i < hardCache.length; i++) {
-      item = hardCache[i];
-      if (item.element === el && item.type === type && item.fn === fn) {
-        return i;
-      }
-    }
-  }
-
-  var cache = {};
-  var start = '(?:^|\\s)';
-  var end = '(?:\\s|$)';
-  function lookupClass(className) {
-    var cached = cache[className];
-    if (cached) {
-      cached.lastIndex = 0;
-    } else {
-      cache[className] = cached = new RegExp(start + className + end, 'g');
-    }
-    return cached;
-  }
-  function addClass(el, className) {
-    var current = el.className;
-    if (!current.length) {
-      el.className = className;
-    } else if (!lookupClass(className).test(current)) {
-      el.className += ' ' + className;
-    }
-  }
-  function rmClass(el, className) {
-    el.className = el.className.replace(lookupClass(className), ' ').trim();
-  }
-  var classes$2 = {
-    add: addClass,
-    rm: rmClass
-  };
-
-  var emitter = emitter$1;
-  var crossvent = crossvent$1;
-  var classes$1 = classes$2;
-  var doc = document;
-  var documentElement = doc.documentElement;
-  function dragula(initialContainers, options) {
-    var len = arguments.length;
-    if (len === 1 && Array.isArray(initialContainers) === false) {
-      options = initialContainers;
-      initialContainers = [];
-    }
-    var _mirror; // mirror image
-    var _source; // source container
-    var _item; // item being dragged
-    var _offsetX; // reference x
-    var _offsetY; // reference y
-    var _moveX; // reference move x
-    var _moveY; // reference move y
-    var _initialSibling; // reference sibling when grabbed
-    var _currentSibling; // reference sibling now
-    var _copy; // item used for copying
-    var _renderTimer; // timer for setTimeout renderMirrorImage
-    var _lastDropTarget = null; // last container item was over
-    var _grabbed; // holds mousedown context until first mousemove
-
-    var o = options || {};
-    if (o.moves === void 0) {
-      o.moves = always;
-    }
-    if (o.accepts === void 0) {
-      o.accepts = always;
-    }
-    if (o.invalid === void 0) {
-      o.invalid = invalidTarget;
-    }
-    if (o.containers === void 0) {
-      o.containers = initialContainers || [];
-    }
-    if (o.isContainer === void 0) {
-      o.isContainer = never;
-    }
-    if (o.copy === void 0) {
-      o.copy = false;
-    }
-    if (o.copySortSource === void 0) {
-      o.copySortSource = false;
-    }
-    if (o.revertOnSpill === void 0) {
-      o.revertOnSpill = false;
-    }
-    if (o.removeOnSpill === void 0) {
-      o.removeOnSpill = false;
-    }
-    if (o.direction === void 0) {
-      o.direction = 'vertical';
-    }
-    if (o.ignoreInputTextSelection === void 0) {
-      o.ignoreInputTextSelection = true;
-    }
-    if (o.mirrorContainer === void 0) {
-      o.mirrorContainer = doc.body;
-    }
-    var drake = emitter({
-      containers: o.containers,
-      start: manualStart,
-      end: end,
-      cancel: cancel,
-      remove: remove,
-      destroy: destroy,
-      canMove: canMove,
-      dragging: false
+  function ct(e, n, i) {
+    var r = Oe(e, n, i) || ut(e, n, i);
+    return k.push({
+      wrapper: r,
+      element: e,
+      type: n,
+      fn: i
+    }), r;
+  }
+  function Oe(e, n, i) {
+    var r = ft(e, n, i);
+    if (r) {
+      var c = k[r].wrapper;
+      return k.splice(r, 1), c;
+    }
+  }
+  function ft(e, n, i) {
+    var r, c;
+    for (r = 0; r < k.length; r++) if (c = k[r], c.element === e && c.type === n && c.fn === i) return r;
+  }
+  const N = /* @__PURE__ */Ee(tt);
+  var ve = {},
+    lt = "(?:^|\\s)",
+    vt = "(?:\\s|$)";
+  function Te(e) {
+    var n = ve[e];
+    return n ? n.lastIndex = 0 : ve[e] = n = new RegExp(lt + e + vt, "g"), n;
+  }
+  function j(e, n) {
+    var i = e.className;
+    i.length ? Te(n).test(i) || (e.className += " " + n) : e.className = n;
+  }
+  function F(e, n) {
+    e.className = e.className.replace(Te(n), " ").trim();
+  }
+  window.global || (window.global = window);
+  var I = document,
+    C = I.documentElement;
+  function pt(e, n) {
+    var i = arguments.length;
+    i === 1 && Array.isArray(e) === !1 && (n = e, e = []);
+    var r,
+      c,
+      o,
+      s,
+      w,
+      S,
+      A,
+      y,
+      Y,
+      d,
+      H,
+      M = null,
+      P,
+      u = n || {};
+    u.moves === void 0 && (u.moves = pe), u.accepts === void 0 && (u.accepts = pe), u.invalid === void 0 && (u.invalid = Ie), u.containers === void 0 && (u.containers = e || []), u.isContainer === void 0 && (u.isContainer = dt), u.copy === void 0 && (u.copy = !1), u.copySortSource === void 0 && (u.copySortSource = !1), u.revertOnSpill === void 0 && (u.revertOnSpill = !1), u.removeOnSpill === void 0 && (u.removeOnSpill = !1), u.direction === void 0 && (u.direction = "vertical"), u.ignoreInputTextSelection === void 0 && (u.ignoreInputTextSelection = !0), u.mirrorContainer === void 0 && (u.mirrorContainer = I.body);
+    var v = Ve({
+      containers: u.containers,
+      start: Ne,
+      end: ne,
+      cancel: ae,
+      remove: oe,
+      destroy: Me,
+      canMove: Be,
+      dragging: !1
     });
-    if (o.removeOnSpill === true) {
-      drake.on('over', spillOver).on('out', spillOut);
-    }
-    events();
-    return drake;
-    function isContainer(el) {
-      return drake.containers.indexOf(el) !== -1 || o.isContainer(el);
+    return u.removeOnSpill === !0 && v.on("over", Pe).on("out", xe), Q(), v;
+    function L(t) {
+      return v.containers.indexOf(t) !== -1 || u.isContainer(t);
     }
-    function events(remove) {
-      var op = remove ? 'remove' : 'add';
-      touchy(documentElement, op, 'mousedown', grab);
-      touchy(documentElement, op, 'mouseup', release);
+    function Q(t) {
+      var a = t ? "remove" : "add";
+      x(C, a, "mousedown", Xe), x(C, a, "mouseup", K);
     }
-    function eventualMovements(remove) {
-      var op = remove ? 'remove' : 'add';
-      touchy(documentElement, op, 'mousemove', startBecauseMouseMoved);
+    function z(t) {
+      var a = t ? "remove" : "add";
+      x(C, a, "mousemove", Ye);
     }
-    function movements(remove) {
-      var op = remove ? 'remove' : 'add';
-      crossvent[op](documentElement, 'selectstart', preventGrabbed); // IE8
-      crossvent[op](documentElement, 'click', preventGrabbed);
+    function Z(t) {
+      var a = t ? "remove" : "add";
+      N[a](C, "selectstart", ee), N[a](C, "click", ee);
     }
-    function destroy() {
-      events(true);
-      release({});
+    function Me() {
+      Q(!0), K({});
     }
-    function preventGrabbed(e) {
-      if (_grabbed) {
-        e.preventDefault();
-      }
+    function ee(t) {
+      P && t.preventDefault();
     }
-    function grab(e) {
-      _moveX = e.clientX;
-      _moveY = e.clientY;
-      var ignore = whichMouseButton(e) !== 1 || e.metaKey || e.ctrlKey;
-      if (ignore) {
-        return; // we only care about honest-to-god left clicks and touch events
-      }
-
-      var item = e.target;
-      var context = canStart(item);
-      if (!context) {
-        return;
-      }
-      _grabbed = context;
-      eventualMovements();
-      if (e.type === 'mousedown') {
-        if (isInput$1(item)) {
-          // see also: https://github.com/bevacqua/dragula/issues/208
-          item.focus(); // fixes https://github.com/bevacqua/dragula/issues/176
-        } else {
-          e.preventDefault(); // fixes https://github.com/bevacqua/dragula/issues/155
-        }
+    function Xe(t) {
+      S = t.clientX, A = t.clientY;
+      var a = se(t) !== 1 || t.metaKey || t.ctrlKey;
+      if (!a) {
+        var f = t.target,
+          l = G(f);
+        l && (P = l, z(), t.type === "mousedown" && (be(f) ? f.focus() : t.preventDefault()));
       }
     }
-
-    function startBecauseMouseMoved(e) {
-      if (!_grabbed) {
-        return;
-      }
-      if (whichMouseButton(e) === 0) {
-        release({});
-        return; // when text is selected on an input and then dragged, mouseup doesn't fire. this is our only hope
-      }
-
-      // truthy check fixes #239, equality fixes #207, fixes #501
-      if (e.clientX !== void 0 && Math.abs(e.clientX - _moveX) <= (o.slideFactorX || 0) && e.clientY !== void 0 && Math.abs(e.clientY - _moveY) <= (o.slideFactorY || 0)) {
-        return;
-      }
-      if (o.ignoreInputTextSelection) {
-        var clientX = getCoord('clientX', e) || 0;
-        var clientY = getCoord('clientY', e) || 0;
-        var elementBehindCursor = doc.elementFromPoint(clientX, clientY);
-        if (isInput$1(elementBehindCursor)) {
-          return;
-        }
-      }
-      var grabbed = _grabbed; // call to end() unsets _grabbed
-      eventualMovements(true);
-      movements();
-      end();
-      start(grabbed);
-      var offset = getOffset(_item);
-      _offsetX = getCoord('pageX', e) - offset.left;
-      _offsetY = getCoord('pageY', e) - offset.top;
-      classes$1.add(_copy || _item, 'gu-transit');
-      renderMirrorImage();
-      drag(e);
-    }
-    function canStart(item) {
-      if (drake.dragging && _mirror) {
-        return;
-      }
-      if (isContainer(item)) {
-        return; // don't drag container itself
-      }
-
-      var handle = item;
-      while (getParent$1(item) && isContainer(getParent$1(item)) === false) {
-        if (o.invalid(item, handle)) {
+    function Ye(t) {
+      if (P) {
+        if (se(t) === 0) {
+          K({});
           return;
         }
-        item = getParent$1(item); // drag target should be a top element
-        if (!item) {
-          return;
+        if (!(t.clientX !== void 0 && Math.abs(t.clientX - S) <= (u.slideFactorX || 0) && t.clientY !== void 0 && Math.abs(t.clientY - A) <= (u.slideFactorY || 0))) {
+          if (u.ignoreInputTextSelection) {
+            var a = _("clientX", t) || 0,
+              f = _("clientY", t) || 0,
+              l = I.elementFromPoint(a, f);
+            if (be(l)) return;
+          }
+          var g = P;
+          z(!0), Z(), ne(), te(g);
+          var m = st(o);
+          s = _("pageX", t) - m.left, w = _("pageY", t) - m.top, j(d || o, "gu-transit"), De(), W(t);
+        }
+      }
+    }
+    function G(t) {
+      if (!(v.dragging && r) && !L(t)) {
+        for (var a = t; h(t) && L(h(t)) === !1;) if (u.invalid(t, a) || (t = h(t), !t)) return;
+        var f = h(t);
+        if (f && !u.invalid(t, a)) {
+          var l = u.moves(t, f, a, D(t));
+          if (l) return {
+            item: t,
+            source: f
+          };
         }
       }
-      var source = getParent$1(item);
-      if (!source) {
-        return;
-      }
-      if (o.invalid(item, handle)) {
-        return;
-      }
-      var movable = o.moves(item, source, handle, nextEl(item));
-      if (!movable) {
-        return;
-      }
-      return {
-        item: item,
-        source: source
-      };
-    }
-    function canMove(item) {
-      return !!canStart(item);
-    }
-    function manualStart(item) {
-      var context = canStart(item);
-      if (context) {
-        start(context);
-      }
     }
-    function start(context) {
-      if (isCopy(context.item, context.source)) {
-        _copy = context.item.cloneNode(true);
-        drake.emit('cloned', _copy, context.item, 'copy');
-      }
-      _source = context.source;
-      _item = context.item;
-      _initialSibling = _currentSibling = nextEl(context.item);
-      drake.dragging = true;
-      drake.emit('drag', _item, _source);
-    }
-    function invalidTarget() {
-      return false;
-    }
-    function end() {
-      if (!drake.dragging) {
-        return;
-      }
-      var item = _copy || _item;
-      drop(item, getParent$1(item));
-    }
-    function ungrab() {
-      _grabbed = false;
-      eventualMovements(true);
-      movements(true);
-    }
-    function release(e) {
-      ungrab();
-      if (!drake.dragging) {
-        return;
-      }
-      var item = _copy || _item;
-      var clientX = getCoord('clientX', e) || 0;
-      var clientY = getCoord('clientY', e) || 0;
-      var elementBehindCursor = getElementBehindPoint(_mirror, clientX, clientY);
-      var dropTarget = findDropTarget(elementBehindCursor, clientX, clientY);
-      if (dropTarget && (_copy && o.copySortSource || !_copy || dropTarget !== _source)) {
-        drop(item, dropTarget);
-      } else if (o.removeOnSpill) {
-        remove();
-      } else {
-        cancel();
-      }
-    }
-    function drop(item, target) {
-      var parent = getParent$1(item);
-      if (_copy && o.copySortSource && target === _source) {
-        parent.removeChild(_item);
-      }
-      if (isInitialPlacement(target)) {
-        drake.emit('cancel', item, _source, _source);
-      } else {
-        drake.emit('drop', item, target, _source, _currentSibling);
-      }
-      cleanup();
-    }
-    function remove() {
-      if (!drake.dragging) {
+    function Be(t) {
+      return !!G(t);
+    }
+    function Ne(t) {
+      var a = G(t);
+      a && te(a);
+    }
+    function te(t) {
+      Re(t.item, t.source) && (d = t.item.cloneNode(!0), v.emit("cloned", d, t.item, "copy")), c = t.source, o = t.item, y = Y = D(t.item), v.dragging = !0, v.emit("drag", o, c);
+    }
+    function Ie() {
+      return !1;
+    }
+    function ne() {
+      if (v.dragging) {
+        var t = d || o;
+        ie(t, h(t));
+      }
+    }
+    function re() {
+      P = !1, z(!0), Z(!0);
+    }
+    function K(t) {
+      if (re(), !!v.dragging) {
+        var a = d || o,
+          f = _("clientX", t) || 0,
+          l = _("clientY", t) || 0,
+          g = me(r, f, l),
+          m = ue(g, f, l);
+        m && (d && u.copySortSource || !d || m !== c) ? ie(a, m) : u.removeOnSpill ? oe() : ae();
+      }
+    }
+    function ie(t, a) {
+      var f = h(t);
+      d && u.copySortSource && a === c && f.removeChild(o), V(a) ? v.emit("cancel", t, c, c) : v.emit("drop", t, a, c, Y), U();
+    }
+    function oe() {
+      if (v.dragging) {
+        var t = d || o,
+          a = h(t);
+        a && a.removeChild(t), v.emit(d ? "cancel" : "remove", t, a, c), U();
+      }
+    }
+    function ae(t) {
+      if (v.dragging) {
+        var a = arguments.length > 0 ? t : u.revertOnSpill,
+          f = d || o,
+          l = h(f),
+          g = V(l);
+        g === !1 && a && (d ? l && l.removeChild(d) : c.insertBefore(f, y)), g || a ? v.emit("cancel", f, c, c) : v.emit("drop", f, l, c, Y), U();
+      }
+    }
+    function U() {
+      var t = d || o;
+      re(), ke(), t && F(t, "gu-transit"), H && clearTimeout(H), v.dragging = !1, M && v.emit("out", t, M, c), v.emit("dragend", t), c = o = d = y = Y = H = M = null;
+    }
+    function V(t, a) {
+      var f;
+      return a !== void 0 ? f = a : r ? f = Y : f = D(d || o), t === c && f === y;
+    }
+    function ue(t, a, f) {
+      for (var l = t; l && !g();) l = h(l);
+      return l;
+      function g() {
+        var m = L(l);
+        if (m === !1) return !1;
+        var B = ce(l, t),
+          p = fe(l, B, a, f),
+          O = V(l, p);
+        return O ? !0 : u.accepts(o, l, c, p);
+      }
+    }
+    function W(t) {
+      if (!r) return;
+      t.preventDefault();
+      var a = _("clientX", t) || 0,
+        f = _("clientY", t) || 0,
+        l = a - s,
+        g = f - w;
+      r.style.left = l + "px", r.style.top = g + "px";
+      var m = d || o,
+        B = me(r, a, f),
+        p = ue(B, a, f),
+        O = p !== null && p !== M;
+      (O || p === null) && (je(), M = p, $e());
+      var b = h(m);
+      if (p === c && d && !u.copySortSource) {
+        b && b.removeChild(m);
         return;
       }
-      var item = _copy || _item;
-      var parent = getParent$1(item);
-      if (parent) {
-        parent.removeChild(item);
-      }
-      drake.emit(_copy ? 'cancel' : 'remove', item, parent, _source);
-      cleanup();
-    }
-    function cancel(revert) {
-      if (!drake.dragging) {
+      var E,
+        X = ce(p, B);
+      if (X !== null) E = fe(p, X, a, f);else if (u.revertOnSpill === !0 && !d) E = y, p = c;else {
+        d && b && b.removeChild(m);
         return;
       }
-      var reverts = arguments.length > 0 ? revert : o.revertOnSpill;
-      var item = _copy || _item;
-      var parent = getParent$1(item);
-      var initial = isInitialPlacement(parent);
-      if (initial === false && reverts) {
-        if (_copy) {
-          if (parent) {
-            parent.removeChild(_copy);
-          }
-        } else {
-          _source.insertBefore(item, _initialSibling);
-        }
-      }
-      if (initial || reverts) {
-        drake.emit('cancel', item, _source, _source);
-      } else {
-        drake.emit('drop', item, parent, _source, _currentSibling);
-      }
-      cleanup();
-    }
-    function cleanup() {
-      var item = _copy || _item;
-      ungrab();
-      removeMirrorImage();
-      if (item) {
-        classes$1.rm(item, 'gu-transit');
+      (E === null && O || E !== m && E !== D(m)) && (Y = E, p.insertBefore(m, E), v.emit("shadow", m, p, c));
+      function T(Fe) {
+        v.emit(Fe, m, M, c);
       }
-      if (_renderTimer) {
-        clearTimeout(_renderTimer);
+      function $e() {
+        O && T("over");
       }
-      drake.dragging = false;
-      if (_lastDropTarget) {
-        drake.emit('out', item, _lastDropTarget, _source);
+      function je() {
+        M && T("out");
       }
-      drake.emit('dragend', item);
-      _source = _item = _copy = _initialSibling = _currentSibling = _renderTimer = _lastDropTarget = null;
     }
-    function isInitialPlacement(target, s) {
-      var sibling;
-      if (s !== void 0) {
-        sibling = s;
-      } else if (_mirror) {
-        sibling = _currentSibling;
-      } else {
-        sibling = nextEl(_copy || _item);
-      }
-      return target === _source && sibling === _initialSibling;
+    function Pe(t) {
+      F(t, "gu-hide");
     }
-    function findDropTarget(elementBehindCursor, clientX, clientY) {
-      var target = elementBehindCursor;
-      while (target && !accepted()) {
-        target = getParent$1(target);
-      }
-      return target;
-      function accepted() {
-        var droppable = isContainer(target);
-        if (droppable === false) {
-          return false;
-        }
-        var immediate = getImmediateChild(target, elementBehindCursor);
-        var reference = getReference(target, immediate, clientX, clientY);
-        var initial = isInitialPlacement(target, reference);
-        if (initial) {
-          return true; // should always be able to drop it right back where it was
-        }
-
-        return o.accepts(_item, target, _source, reference);
-      }
+    function xe(t) {
+      v.dragging && j(t, "gu-hide");
     }
-    function drag(e) {
-      if (!_mirror) {
-        return;
-      }
-      e.preventDefault();
-      var clientX = getCoord('clientX', e) || 0;
-      var clientY = getCoord('clientY', e) || 0;
-      var x = clientX - _offsetX;
-      var y = clientY - _offsetY;
-      _mirror.style.left = x + 'px';
-      _mirror.style.top = y + 'px';
-      var item = _copy || _item;
-      var elementBehindCursor = getElementBehindPoint(_mirror, clientX, clientY);
-      var dropTarget = findDropTarget(elementBehindCursor, clientX, clientY);
-      var changed = dropTarget !== null && dropTarget !== _lastDropTarget;
-      if (changed || dropTarget === null) {
-        out();
-        _lastDropTarget = dropTarget;
-        over();
-      }
-      var parent = getParent$1(item);
-      if (dropTarget === _source && _copy && !o.copySortSource) {
-        if (parent) {
-          parent.removeChild(item);
-        }
-        return;
-      }
-      var reference;
-      var immediate = getImmediateChild(dropTarget, elementBehindCursor);
-      if (immediate !== null) {
-        reference = getReference(dropTarget, immediate, clientX, clientY);
-      } else if (o.revertOnSpill === true && !_copy) {
-        reference = _initialSibling;
-        dropTarget = _source;
-      } else {
-        if (_copy && parent) {
-          parent.removeChild(item);
-        }
-        return;
-      }
-      if (reference === null && changed || reference !== item && reference !== nextEl(item)) {
-        _currentSibling = reference;
-        dropTarget.insertBefore(item, reference);
-        drake.emit('shadow', item, dropTarget, _source);
-      }
-      function moved(type) {
-        drake.emit(type, item, _lastDropTarget, _source);
-      }
-      function over() {
-        if (changed) {
-          moved('over');
-        }
-      }
-      function out() {
-        if (_lastDropTarget) {
-          moved('out');
-        }
+    function De() {
+      if (!r) {
+        var t = o.getBoundingClientRect();
+        r = o.cloneNode(!0), r.style.width = ge(t) + "px", r.style.height = he(t) + "px", F(r, "gu-transit"), j(r, "gu-mirror"), u.mirrorContainer.appendChild(r), x(C, "add", "mousemove", W), j(u.mirrorContainer, "gu-unselectable"), v.emit("cloned", r, o, "mirror");
       }
     }
-    function spillOver(el) {
-      classes$1.rm(el, 'gu-hide');
+    function ke() {
+      r && (F(u.mirrorContainer, "gu-unselectable"), x(C, "remove", "mousemove", W), h(r).removeChild(r), r = null);
     }
-    function spillOut(el) {
-      if (drake.dragging) {
-        classes$1.add(el, 'gu-hide');
-      }
+    function ce(t, a) {
+      for (var f = a; f !== t && h(f) !== t;) f = h(f);
+      return f === C ? null : f;
     }
-    function renderMirrorImage() {
-      if (_mirror) {
-        return;
-      }
-      var rect = _item.getBoundingClientRect();
-      _mirror = _item.cloneNode(true);
-      _mirror.style.width = getRectWidth(rect) + 'px';
-      _mirror.style.height = getRectHeight(rect) + 'px';
-      classes$1.rm(_mirror, 'gu-transit');
-      classes$1.add(_mirror, 'gu-mirror');
-      o.mirrorContainer.appendChild(_mirror);
-      touchy(documentElement, 'add', 'mousemove', drag);
-      classes$1.add(o.mirrorContainer, 'gu-unselectable');
-      drake.emit('cloned', _mirror, _item, 'mirror');
-    }
-    function removeMirrorImage() {
-      if (_mirror) {
-        classes$1.rm(o.mirrorContainer, 'gu-unselectable');
-        touchy(documentElement, 'remove', 'mousemove', drag);
-        getParent$1(_mirror).removeChild(_mirror);
-        _mirror = null;
-      }
-    }
-    function getImmediateChild(dropTarget, target) {
-      var immediate = target;
-      while (immediate !== dropTarget && getParent$1(immediate) !== dropTarget) {
-        immediate = getParent$1(immediate);
-      }
-      if (immediate === documentElement) {
+    function fe(t, a, f, l) {
+      var g = (typeof u.direction == "function" ? u.direction(o, t, c) : u.direction) === "horizontal",
+        m = a !== t ? p() : B();
+      return m;
+      function B() {
+        var b = t.children.length,
+          E,
+          X,
+          T;
+        for (E = 0; E < b; E++) if (X = t.children[E], T = X.getBoundingClientRect(), g && T.left + T.width / 2 > f || !g && T.top + T.height / 2 > l) return X;
         return null;
       }
-      return immediate;
-    }
-    function getReference(dropTarget, target, x, y) {
-      var horizontal = o.direction === 'horizontal';
-      var reference = target !== dropTarget ? inside() : outside();
-      return reference;
-      function outside() {
-        // slower, but able to figure out any position
-        var len = dropTarget.children.length;
-        var i;
-        var el;
-        var rect;
-        for (i = 0; i < len; i++) {
-          el = dropTarget.children[i];
-          rect = el.getBoundingClientRect();
-          if (horizontal && rect.left + rect.width / 2 > x) {
-            return el;
-          }
-          if (!horizontal && rect.top + rect.height / 2 > y) {
-            return el;
-          }
-        }
-        return null;
+      function p() {
+        var b = a.getBoundingClientRect();
+        return O(g ? f > b.left + ge(b) / 2 : l > b.top + he(b) / 2);
       }
-      function inside() {
-        // faster, but only available if dropped inside a child element
-        var rect = target.getBoundingClientRect();
-        if (horizontal) {
-          return resolve(x > rect.left + getRectWidth(rect) / 2);
-        }
-        return resolve(y > rect.top + getRectHeight(rect) / 2);
-      }
-      function resolve(after) {
-        return after ? nextEl(target) : target;
+      function O(b) {
+        return b ? D(a) : a;
       }
     }
-    function isCopy(item, container) {
-      return typeof o.copy === 'boolean' ? o.copy : o.copy(item, container);
+    function Re(t, a) {
+      return typeof u.copy == "boolean" ? u.copy : u.copy(t, a);
     }
   }
-  function touchy(el, op, type, fn) {
-    var touch = {
-      mouseup: 'touchend',
-      mousedown: 'touchstart',
-      mousemove: 'touchmove'
-    };
-    var pointers = {
-      mouseup: 'pointerup',
-      mousedown: 'pointerdown',
-      mousemove: 'pointermove'
-    };
-    var microsoft = {
-      mouseup: 'MSPointerUp',
-      mousedown: 'MSPointerDown',
-      mousemove: 'MSPointerMove'
-    };
-    if (commonjsGlobal.navigator.pointerEnabled) {
-      crossvent[op](el, pointers[type], fn);
-    } else if (commonjsGlobal.navigator.msPointerEnabled) {
-      crossvent[op](el, microsoft[type], fn);
-    } else {
-      crossvent[op](el, touch[type], fn);
-      crossvent[op](el, type, fn);
-    }
+  function x(e, n, i, r) {
+    var c = {
+        mouseup: "touchend",
+        mousedown: "touchstart",
+        mousemove: "touchmove"
+      },
+      o = {
+        mouseup: "pointerup",
+        mousedown: "pointerdown",
+        mousemove: "pointermove"
+      },
+      s = {
+        mouseup: "MSPointerUp",
+        mousedown: "MSPointerDown",
+        mousemove: "MSPointerMove"
+      };
+    global.navigator.pointerEnabled ? N[n](e, o[i], r) : global.navigator.msPointerEnabled ? N[n](e, s[i], r) : (N[n](e, c[i], r), N[n](e, i, r));
   }
-  function whichMouseButton(e) {
-    if (e.touches !== void 0) {
-      return e.touches.length;
-    }
-    if (e.which !== void 0 && e.which !== 0) {
-      return e.which;
-    } // see https://github.com/bevacqua/dragula/issues/261
-    if (e.buttons !== void 0) {
-      return e.buttons;
-    }
-    var button = e.button;
-    if (button !== void 0) {
-      // see https://github.com/jquery/jquery/blob/99e8ff1baa7ae341e94bb89c3e84570c7c3ad9ea/src/event.js#L573-L575
-      return button & 1 ? 1 : button & 2 ? 3 : button & 4 ? 2 : 0;
-    }
+  function se(e) {
+    if (e.touches !== void 0) return e.touches.length;
+    if (e.which !== void 0 && e.which !== 0) return e.which;
+    if (e.buttons !== void 0) return e.buttons;
+    var n = e.button;
+    if (n !== void 0) return n & 1 ? 1 : n & 2 ? 3 : n & 4 ? 2 : 0;
   }
-  function getOffset(el) {
-    var rect = el.getBoundingClientRect();
+  function st(e) {
+    var n = e.getBoundingClientRect();
     return {
-      left: rect.left + getScroll('scrollLeft', 'pageXOffset'),
-      top: rect.top + getScroll('scrollTop', 'pageYOffset')
+      left: n.left + de("scrollLeft", "pageXOffset"),
+      top: n.top + de("scrollTop", "pageYOffset")
     };
   }
-  function getScroll(scrollProp, offsetProp) {
-    if (typeof commonjsGlobal[offsetProp] !== 'undefined') {
-      return commonjsGlobal[offsetProp];
-    }
-    if (documentElement.clientHeight) {
-      return documentElement[scrollProp];
-    }
-    return doc.body[scrollProp];
+  function de(e, n) {
+    return typeof global[n] < "u" ? global[n] : C.clientHeight ? C[e] : I.body[e];
   }
-  function getElementBehindPoint(point, x, y) {
-    point = point || {};
-    var state = point.className || '';
-    var el;
-    point.className += ' gu-hide';
-    el = doc.elementFromPoint(x, y);
-    point.className = state;
-    return el;
+  function me(e, n, i) {
+    e = e || {};
+    var r = e.className || "",
+      c;
+    return e.className += " gu-hide", c = I.elementFromPoint(n, i), e.className = r, c;
   }
-  function never() {
-    return false;
+  function dt() {
+    return !1;
   }
-  function always() {
-    return true;
+  function pe() {
+    return !0;
   }
-  function getRectWidth(rect) {
-    return rect.width || rect.right - rect.left;
+  function ge(e) {
+    return e.width || e.right - e.left;
   }
-  function getRectHeight(rect) {
-    return rect.height || rect.bottom - rect.top;
+  function he(e) {
+    return e.height || e.bottom - e.top;
   }
-  function getParent$1(el) {
-    return el.parentNode === doc ? null : el.parentNode;
+  function h(e) {
+    return e.parentNode === I ? null : e.parentNode;
   }
-  function isInput$1(el) {
-    return el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT' || isEditable(el);
+  function be(e) {
+    return e.tagName === "INPUT" || e.tagName === "TEXTAREA" || e.tagName === "SELECT" || _e(e);
   }
-  function isEditable(el) {
-    if (!el) {
-      return false;
-    } // no parents were editable
-    if (el.contentEditable === 'false') {
-      return false;
-    } // stop the lookup
-    if (el.contentEditable === 'true') {
-      return true;
-    } // found a contentEditable element in the chain
-    return isEditable(getParent$1(el)); // contentEditable is set to 'inherit'
+  function _e(e) {
+    return !e || e.contentEditable === "false" ? !1 : e.contentEditable === "true" ? !0 : _e(h(e));
   }
-
-  function nextEl(el) {
-    return el.nextElementSibling || manually();
-    function manually() {
-      var sibling = el;
-      do {
-        sibling = sibling.nextSibling;
-      } while (sibling && sibling.nodeType !== 1);
-      return sibling;
+  function D(e) {
+    return e.nextElementSibling || n();
+    function n() {
+      var i = e;
+      do i = i.nextSibling; while (i && i.nodeType !== 1);
+      return i;
     }
   }
-  function getEventHost(e) {
-    // on touchend event, we have to use `e.changedTouches`
-    // see http://stackoverflow.com/questions/7192563/touchend-event-properties
-    // see https://github.com/bevacqua/dragula/issues/34
-    if (e.targetTouches && e.targetTouches.length) {
-      return e.targetTouches[0];
-    }
-    if (e.changedTouches && e.changedTouches.length) {
-      return e.changedTouches[0];
-    }
-    return e;
+  function mt(e) {
+    return e.targetTouches && e.targetTouches.length ? e.targetTouches[0] : e.changedTouches && e.changedTouches.length ? e.changedTouches[0] : e;
   }
-  function getCoord(coord, e) {
-    var host = getEventHost(e);
-    var missMap = {
-      pageX: 'clientX',
-      // IE8
-      pageY: 'clientY' // IE8
-    };
+  function _(e, n) {
+    var i = mt(n),
+      r = {
+        pageX: "clientX",
+        // IE8
+        pageY: "clientY"
+        // IE8
+      };
 
-    if (coord in missMap && !(coord in host) && missMap[coord] in host) {
-      coord = missMap[coord];
-    }
-    return host[coord];
+    return e in r && !(e in i) && r[e] in i && (e = r[e]), i[e];
   }
-  var dragula_1 = dragula;
-
-  var dragula$1 = /*@__PURE__*/getDefaultExportFromCjs(dragula_1);
 
   function _mergeNamespaces$1(n, m) {
     m.forEach(function (e) {
@@ -58699,26 +58301,26 @@
     return fn.apply(null, args);
   }
 
-  /**
-   * A factory to create a configurable debouncer.
-   *
-   * @param {number|boolean} [config=true]
+  /**
+   * A factory to create a configurable debouncer.
+   *
+   * @param {number|boolean} [config=true]
    */
   function DebounceFactory(config = true) {
     const timeout = typeof config === 'number' ? config : config ? 300 : 0;
     if (timeout) {
-      return fn => debounce$2(fn, timeout);
+      return fn => debounce(fn, timeout);
     } else {
       return fn => fn;
     }
   }
   DebounceFactory.$inject = ['config.debounce'];
   class FieldFactory {
-    /**
-     * @constructor
-     *
-     * @param { import('./FormFieldRegistry').default } formFieldRegistry
-     * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
+    /**
+     * @constructor
+     *
+     * @param { import('./FormFieldRegistry').default } formFieldRegistry
+     * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
      */
     constructor(formFieldRegistry, formFields) {
       this._formFieldRegistry = formFieldRegistry;
@@ -58780,11 +58382,11 @@
   }
   FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
   class FormFieldRegistry extends FormFieldRegistry$1 {
-    /**
-     * Updates a form fields id.
-     *
-     * @param {Object} formField
-     * @param {string} newId
+    /**
+     * Updates a form fields id.
+     *
+     * @param {Object} formField
+     * @param {string} newId
      */
     updateId(formField, newId) {
       this._validateId(newId);
@@ -58805,13 +58407,13 @@
       }
     }
 
-    /**
-     * Validate the suitability of the given id and signals a problem
-     * with an exception.
-     *
-     * @param {string} id
-     *
-     * @throws {Error} if id is empty or already assigned
+    /**
+     * Validate the suitability of the given id and signals a problem
+     * with an exception.
+     *
+     * @param {string} id
+     *
+     * @throws {Error} if id is empty or already assigned
      */
     _validateId(id) {
       if (!id) {
@@ -58827,11 +58429,11 @@
   const MIN_COLUMNS = 2;
   const MAX_FIELDS_PER_ROW = 4;
   class FormLayoutValidator {
-    /**
-     * @constructor
-     *
-     * @param { import('./FormLayouter').default } formLayouter
-     * @param { import('./FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     *
+     * @param { import('./FormLayouter').default } formLayouter
+     * @param { import('./FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formLayouter, formFieldRegistry) {
       this._formLayouter = formLayouter;
@@ -58890,11 +58492,11 @@
     return MAX_COLUMNS_PER_ROW - autoCols * 2;
   }
   class Importer {
-    /**
-     * @constructor
-     * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
-     * @param { import('../core/FieldFactory').default } fieldFactory
-     * @param { import('../core/FormLayouter').default } formLayouter
+    /**
+     * @constructor
+     * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
+     * @param { import('../core/FieldFactory').default } fieldFactory
+     * @param { import('../core/FormLayouter').default } formLayouter
      */
     constructor(formFieldRegistry, fieldFactory, formLayouter) {
       this._formFieldRegistry = formFieldRegistry;
@@ -58902,21 +58504,21 @@
       this._formLayouter = formLayouter;
     }
 
-    /**
-     * Import schema creating rows, fields, attaching additional
-     * information to each field and adding fields to the
-     * field registry.
-     *
-     * Additional information attached:
-     *
-     *   * `id` (unless present)
-     *   * `_parent`
-     *   * `_path`
-     *
-     * @param {any} schema
-     *
-     * @typedef {{ warnings: Error[], schema: any }} ImportResult
-     * @returns {ImportResult}
+    /**
+     * Import schema creating rows, fields, attaching additional
+     * information to each field and adding fields to the
+     * field registry.
+     *
+     * Additional information attached:
+     *
+     *   * `id` (unless present)
+     *   * `_parent`
+     *   * `_path`
+     *
+     * @param {any} schema
+     *
+     * @typedef {{ warnings: Error[], schema: any }} ImportResult
+     * @returns {ImportResult}
      */
     importSchema(schema) {
       // TODO: Add warnings
@@ -58934,12 +58536,12 @@
       }
     }
 
-    /**
-     * @param {{[x: string]: any}} fieldAttrs
-     * @param {String} [parentId]
-     * @param {number} [index]
-     *
-     * @return {any} field
+    /**
+     * @param {{[x: string]: any}} fieldAttrs
+     * @param {String} [parentId]
+     * @param {number} [index]
+     *
+     * @return {any} field
      */
     importFormField(fieldAttrs, parentId, index) {
       const {
@@ -58976,11 +58578,11 @@
       return field;
     }
 
-    /**
-     * @param {Array<any>} components
-     * @param {string} parentId
-     *
-     * @return {Array<any>} imported components
+    /**
+     * @param {Array<any>} components
+     * @param {string} parentId
+     *
+     * @return {Array<any>} imported components
      */
     importFormFields(components, parentId) {
       return components.map((component, index) => {
@@ -59003,22 +58605,22 @@
     });
   }
 
-  /**
-   * Add a dragger that calls back the passed function with
-   * { event, delta } on drag.
-   *
-   * @example
-   *
-   * function dragMove(event, delta) {
-   *   // we are dragging (!!)
-   * }
-   *
-   * domElement.addEventListener('dragstart', dragger(dragMove));
-   *
-   * @param {Function} fn
-   * @param {Element} dragPreview
-   *
-   * @return {Function} drag start callback function
+  /**
+   * Add a dragger that calls back the passed function with
+   * { event, delta } on drag.
+   *
+   * @example
+   *
+   * function dragMove(event, delta) {
+   *   // we are dragging (!!)
+   * }
+   *
+   * domElement.addEventListener('dragstart', dragger(dragMove));
+   *
+   * @param {Function} fn
+   * @param {Element} dragPreview
+   *
+   * @return {Function} drag start callback function
    */
   function createDragger(fn, dragPreview) {
     let self;
@@ -59059,12 +58661,12 @@
     return onDragStart;
   }
 
-  /**
-   * Throttle function call according UI update cycle.
-   *
-   * @param  {Function} fn
-   *
-   * @return {Function} throttled fn
+  /**
+   * Throttle function call according UI update cycle.
+   *
+   * @param  {Function} fn
+   *
+   * @return {Function} throttled fn
    */
   function throttle(fn) {
     let active = false;
@@ -59087,26 +58689,26 @@
     event.preventDefault();
     event.stopPropagation();
   }
-  const DragAndDropContext = D$1({
+  const DragAndDropContext = D$2({
     drake: null
   });
   var DragAndDropContext$1 = DragAndDropContext;
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService$1(type, strict) {}
-  const FormEditorContext = D$1({
+  const FormEditorContext = D$2({
     getService: getService$1
   });
   var FormEditorContext$1 = FormEditorContext;
   function useService$1(type, strict) {
     const {
       getService
-    } = F(FormEditorContext$1);
+    } = F$1(FormEditorContext$1);
     return getService(type, strict);
   }
   var _path$4;
@@ -59447,7 +59049,7 @@
       children: children
     }) : null;
   };
-  const FillContext = D$1({
+  const FillContext = D$2({
     addFill(uid, props) {
       throw new Error('FillContext.addFill() uninitialized');
     },
@@ -59458,7 +59060,7 @@
   var FillContext$1 = FillContext;
   var Fill = props => {
     const uid = s$1(Symbol('fill_uid'));
-    const fillContext = F(FillContext$1);
+    const fillContext = F$1(FillContext$1);
     y(() => {
       if (!fillContext) {
         return;
@@ -59473,7 +59075,7 @@
     }, [fillContext, props]);
     return null;
   };
-  const SlotContext = D$1({
+  const SlotContext = D$2({
     fills: []
   });
   var SlotContext$1 = SlotContext;
@@ -59487,7 +59089,7 @@
     } = props;
     const {
       fills
-    } = F(SlotContext$1);
+    } = F$1(SlotContext$1);
     const filtered = d(() => fills.filter(fill => fill.slot === name), [fills, name]);
     const cropped = d(() => limit ? filtered.slice(0, limit) : filtered, [filtered, limit]);
     const groups = d(() => groupFn(cropped), [cropped, groupFn]);
@@ -59497,23 +59099,23 @@
     return fillsAndSeparators;
   };
 
-  /**
-   * Creates a Fragment for a fill.
-   *
-   * @param {Object} fill Fill to be rendered
-   * @returns {Object} Preact Fragment containing fill's children
+  /**
+   * Creates a Fragment for a fill.
+   *
+   * @param {Object} fill Fill to be rendered
+   * @returns {Object} Preact Fragment containing fill's children
    */
   const FillFragment = fill => e$1(d$1, {
     children: fill.children
   }, fill.id);
 
-  /**
-   * Creates an array of fills, with separators inserted between groups.
-   *
-   * @param {Array} groups Groups of fills
-   * @param {Function} fillRenderer Function to create a fill
-   * @param {Function} separatorRenderer Function to create a separator
-   * @returns {Array} Array of fills and separators
+  /**
+   * Creates an array of fills, with separators inserted between groups.
+   *
+   * @param {Array} groups Groups of fills
+   * @param {Function} fillRenderer Function to create a fill
+   * @param {Function} separatorRenderer Function to create a separator
+   * @returns {Array} Array of fills and separators
    */
   const buildFills = (groups, fillRenderer, separatorRenderer) => {
     const result = [];
@@ -59531,8 +59133,8 @@
     return result;
   };
 
-  /**
-   * Groups fills by group name property.
+  /**
+   * Groups fills by group name property.
    */
   const _groupByGroupName = fills => {
     const groups = [];
@@ -59552,8 +59154,8 @@
     return Object.keys(groupsById).sort().map(id => groupsById[id]);
   };
 
-  /**
-   * Compares fills by priority.
+  /**
+   * Compares fills by priority.
    */
   const _comparePriority = (a, b) => {
     return (b.priority || 0) - (a.priority || 0);
@@ -59776,19 +59378,19 @@
   const DRAG_NO_MOVE_CLS = 'fjs-no-move';
   const ERROR_DROP_CLS = 'fjs-error-drop';
 
-  /**
-   * @typedef { { id: String, components: Array<any> } } FormRow
+  /**
+   * @typedef { { id: String, components: Array<any> } } FormRow
    */
 
   class Dragging {
-    /**
-     * @constructor
-     *
-     * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
-     * @param { import('../../core/FormLayouter').default } formLayouter
-     * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
-     * @param { import('../../core/EventBus').default } eventBus
-     * @param { import('../modeling/Modeling').default } modeling
+    /**
+     * @constructor
+     *
+     * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
+     * @param { import('../../core/FormLayouter').default } formLayouter
+     * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
+     * @param { import('../../core/EventBus').default } eventBus
+     * @param { import('../modeling/Modeling').default } modeling
      */
     constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling) {
       this._formFieldRegistry = formFieldRegistry;
@@ -59798,13 +59400,13 @@
       this._modeling = modeling;
     }
 
-    /**
-     * Calculcates position in form schema given the dropped place.
-     *
-     * @param { FormRow } targetRow
-     * @param { any } targetFormField
-     * @param { HTMLElement } sibling
-     * @returns { number }
+    /**
+     * Calculcates position in form schema given the dropped place.
+     *
+     * @param { FormRow } targetRow
+     * @param { any } targetFormField
+     * @param { HTMLElement } sibling
+     * @returns { number }
      */
     getTargetIndex(targetRow, targetFormField, sibling) {
       /** @type HTMLElement */
@@ -59906,17 +59508,21 @@
       }
     }
 
-    /**
-     * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+    /**
+     * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
      */
     createDragulaInstance(options) {
       const {
         container,
-        direction,
         mirrorContainer
       } = options || {};
-      const dragulaInstance = dragula$1({
-        direction,
+      let dragulaOptions = {
+        direction: function (el, target) {
+          if (isRow(target)) {
+            return 'horizontal';
+          }
+          return 'vertical';
+        },
         mirrorContainer,
         isContainer(el) {
           return container.some(cls => el.classList.contains(cls));
@@ -59947,7 +59553,8 @@
         },
         slideFactorX: 10,
         slideFactorY: 5
-      });
+      };
+      const dragulaInstance = pt(dragulaOptions);
 
       // bind life cycle events
       dragulaInstance.on('drag', (element, source) => {
@@ -60248,7 +59855,7 @@
       eventBus.on('selection.changed', scrollIntoView);
       return () => eventBus.off('selection.changed', scrollIntoView);
     }, [id]);
-    h(() => {
+    h$1(() => {
       if (selection.isSelected(field)) {
         ref.current.focus();
       }
@@ -60313,7 +59920,7 @@
       return null;
     }
     return e$1("div", {
-      style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
+      style: "width: fit-content;\r padding: 2px 6px;\r height: 16px;\r background: var(--color-blue-205-100-95);\r display: flex;\r justify-content: center;\r align-items: center;\r position: absolute;\r bottom: -2px;\r z-index: 2;\r font-size: 10px;\r right: 3px;",
       class: "fjs-debug-columns",
       children: (field.layout || {}).columns || 'auto'
     });
@@ -60410,7 +60017,6 @@
     y(() => {
       let dragulaInstance = dragging.createDragulaInstance({
         container: [DRAG_CONTAINER_CLS, DROP_CONTAINER_VERTICAL_CLS, DROP_CONTAINER_HORIZONTAL_CLS],
-        direction: 'vertical',
         mirrorContainer: formContainerRef.current
       });
       setDrake(dragulaInstance);
@@ -60424,7 +60030,6 @@
         onDetach();
         dragulaInstance = dragging.createDragulaInstance({
           container: [DRAG_CONTAINER_CLS, DROP_CONTAINER_VERTICAL_CLS, DROP_CONTAINER_HORIZONTAL_CLS],
-          direction: 'vertical',
           mirrorContainer: formContainerRef.current
         });
         setDrake(dragulaInstance);
@@ -60544,7 +60149,7 @@
   function CreatePreview(props) {
     const {
       drake
-    } = F(DragAndDropContext$1);
+    } = F$1(DragAndDropContext$1);
     function handleCloned(clone, original, type) {
       const fieldType = clone.dataset.fieldType;
 
@@ -61360,10 +60965,10 @@
     return formField;
   }
   class AddFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -61423,10 +61028,10 @@
   }
   AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class EditFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -61488,10 +61093,10 @@
   }
   EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class MoveFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -61579,10 +61184,10 @@
   }
   MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class RemoveFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -61641,9 +61246,9 @@
   }
   RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class UpdateIdClaimHandler {
-    /**
-     * @constructor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formFieldRegistry) {
       this._formFieldRegistry = formFieldRegistry;
@@ -61675,9 +61280,9 @@
   }
   UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
   class UpdateKeyClaimHandler {
-    /**
-     * @constructor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formFieldRegistry) {
       this._formFieldRegistry = formFieldRegistry;
@@ -62138,8 +61743,8 @@
     constructor(eventBus) {
       super(eventBus);
 
-      /**
-       * Remove custom validation if <validationType> is about to be added.
+      /**
+       * Remove custom validation if <validationType> is about to be added.
        */
       // @ts-ignore-next-line
       this.preExecute('formField.edit', function (context) {
@@ -62714,22 +62319,22 @@
     selectionBehavior: ['type', SelectionBehavior]
   };
 
-  /**
-   * Base class for sectionable UI modules.
-   *
-   * @property {EventBus} _eventBus - EventBus instance used for event handling.
-   * @property {string} managerType - Type of the render manager. Used to form event names.
-   *
-   * @class SectionModuleBase
+  /**
+   * Base class for sectionable UI modules.
+   *
+   * @property {EventBus} _eventBus - EventBus instance used for event handling.
+   * @property {string} managerType - Type of the render manager. Used to form event names.
+   *
+   * @class SectionModuleBase
    */
   class SectionModuleBase {
-    /**
-     * Create a SectionModuleBase instance.
-     *
-     * @param {any} eventBus - The EventBus instance used for event handling.
-     * @param {string} sectionKey - The type of render manager. Used to form event names.
-     *
-     * @constructor
+    /**
+     * Create a SectionModuleBase instance.
+     *
+     * @param {any} eventBus - The EventBus instance used for event handling.
+     * @param {string} sectionKey - The type of render manager. Used to form event names.
+     *
+     * @constructor
      */
     constructor(eventBus, sectionKey) {
       this._eventBus = eventBus;
@@ -62742,10 +62347,10 @@
       });
     }
 
-    /**
-     * Attach the managed section to a parent node.
-     *
-     * @param {HTMLElement} container - The parent node to attach to.
+    /**
+     * Attach the managed section to a parent node.
+     *
+     * @param {HTMLElement} container - The parent node to attach to.
      */
     attachTo(container) {
       this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.attach`, {
@@ -62753,22 +62358,22 @@
       }));
     }
 
-    /**
-     * Detach the managed section from its parent node.
+    /**
+     * Detach the managed section from its parent node.
      */
     detach() {
       this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.detach`));
     }
 
-    /**
-     * Reset the managed section to its initial state.
+    /**
+     * Reset the managed section to its initial state.
      */
     reset() {
       this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.reset`));
     }
 
-    /**
-     * Circumvents timing issues.
+    /**
+     * Circumvents timing issues.
      */
     _onceSectionRendered(callback) {
       if (this.isSectionRendered) {
@@ -62909,11 +62514,11 @@
       })]
     });
   }
-  const DescriptionContext = D$1({
+  const DescriptionContext = D$2({
     description: {},
     getDescriptionForId: () => {}
   });
-  const ErrorsContext = D$1({
+  const ErrorsContext = D$2({
     errors: {}
   });
 
@@ -62931,15 +62536,175 @@
    *
    * @returns void
    */
-  const EventContext = D$1({
+  const EventContext = D$2({
     eventBus: null
   });
-  const LayoutContext = D$1({
+  const LayoutContext = D$2({
     layout: {},
     setLayout: () => {},
     getLayoutForKey: () => {},
     setLayoutForKey: () => {}
   });
+  const TooltipContext = D$2({
+    tooltip: {},
+    getTooltipForId: () => {}
+  });
+
+  /**
+   * Accesses the global TooltipContext and returns a tooltip for a given id and element.
+   *
+   * @example
+   * ```jsx
+   * function TextField(props) {
+   *   const tooltip = useTooltipContext('input1', element);
+   * }
+   * ```
+   *
+   * @param {string} id
+   * @param {object} element
+   *
+   * @returns {string}
+   */
+  function useTooltipContext(id, element) {
+    const {
+      getTooltipForId
+    } = F$1(TooltipContext);
+    return getTooltipForId(id, element);
+  }
+  function TooltipWrapper(props) {
+    const {
+      forId,
+      element
+    } = props;
+    const contextDescription = useTooltipContext(forId, element);
+    const value = props.value || contextDescription;
+    if (!value) {
+      return props.children;
+    }
+    return e$1(Tooltip, {
+      ...props,
+      value: value,
+      forId: prefixId$8(forId)
+    });
+  }
+  function Tooltip(props) {
+    const {
+      forId,
+      value,
+      parent
+    } = props;
+    const [visible, setShow] = l$2(false);
+    let timeout = null;
+    const wrapperRef = s$1(null);
+    const tooltipRef = s$1(null);
+    const showTooltip = async event => {
+      const show = () => !visible && setShow(true);
+      if (event instanceof MouseEvent) {
+        timeout = setTimeout(show, 200);
+      } else {
+        show();
+      }
+    };
+    const hideTooltip = () => setShow(false);
+    const hideTooltipViaEscape = e => {
+      e.code === 'Escape' && hideTooltip();
+    };
+    const isTooltipHovered = ({
+      x,
+      y
+    }) => {
+      const tooltip = tooltipRef.current;
+      const wrapper = wrapperRef.current;
+      return tooltip && (inBounds(x, y, wrapper.getBoundingClientRect()) || inBounds(x, y, tooltip.getBoundingClientRect()));
+    };
+    y(() => {
+      const {
+        current
+      } = wrapperRef;
+      if (!current) {
+        return;
+      }
+      const hideHoveredTooltip = e => {
+        const isFocused = document.activeElement === wrapperRef.current || document.activeElement.closest('.bio-properties-panel-tooltip');
+        if (visible && !isTooltipHovered({
+          x: e.x,
+          y: e.y
+        }) && !isFocused) {
+          hideTooltip();
+        }
+      };
+      const hideFocusedTooltip = e => {
+        const {
+          relatedTarget
+        } = e;
+        const isTooltipChild = el => el && !!el.closest('.bio-properties-panel-tooltip');
+        if (visible && !isHovered(wrapperRef.current) && !isTooltipChild(relatedTarget)) {
+          hideTooltip();
+        }
+      };
+      document.addEventListener('wheel', hideHoveredTooltip);
+      document.addEventListener('focusout', hideFocusedTooltip);
+      document.addEventListener('mousemove', hideHoveredTooltip);
+      return () => {
+        document.removeEventListener('wheel', hideHoveredTooltip);
+        document.removeEventListener('mousemove', hideHoveredTooltip);
+        document.removeEventListener('focusout', hideFocusedTooltip);
+      };
+    }, [wrapperRef.current, visible]);
+    const renderTooltip = () => {
+      return e$1("div", {
+        class: "bio-properties-panel-tooltip",
+        role: "tooltip",
+        id: "bio-properties-panel-tooltip",
+        "aria-labelledby": forId,
+        style: getTooltipPosition(wrapperRef.current),
+        ref: tooltipRef,
+        onClick: e => e.stopPropagation(),
+        children: [e$1("div", {
+          class: "bio-properties-panel-tooltip-content",
+          children: value
+        }), e$1("div", {
+          class: "bio-properties-panel-tooltip-arrow"
+        })]
+      });
+    };
+    return e$1("div", {
+      class: "bio-properties-panel-tooltip-wrapper",
+      tabIndex: "0",
+      ref: wrapperRef,
+      onMouseEnter: showTooltip,
+      onMouseLeave: () => clearTimeout(timeout),
+      onFocus: showTooltip,
+      onKeyDown: hideTooltipViaEscape,
+      onMouseDown: e => {
+        e.preventDefault();
+      },
+      children: [props.children, visible ? parent ? W(renderTooltip(), parent.current) : renderTooltip() : null]
+    });
+  }
+
+  // helper
+  function inBounds(x, y, bounds) {
+    const {
+      top,
+      right,
+      bottom,
+      left
+    } = bounds;
+    return x >= left && x <= right && y >= top && y <= bottom;
+  }
+  function getTooltipPosition(refElement) {
+    const refPosition = refElement.getBoundingClientRect();
+    const right = `calc(100% - ${refPosition.x}px)`;
+    const top = `${refPosition.top - 10}px`;
+    return `right: ${right}; top: ${top};`;
+  }
+  function isHovered(element) {
+    return element.matches(':hover');
+  }
+  function prefixId$8(id) {
+    return `bio-properties-panel-${id}`;
+  }
 
   /**
    * Accesses the global DescriptionContext and returns a description for a given id and element.
@@ -62959,15 +62724,21 @@
   function useDescriptionContext(id, element) {
     const {
       getDescriptionForId
-    } = F(DescriptionContext);
+    } = F$1(DescriptionContext);
     return getDescriptionForId(id, element);
   }
   function useError(id) {
     const {
       errors
-    } = F(ErrorsContext);
+    } = F$1(ErrorsContext);
     return errors[id];
   }
+  function useErrors() {
+    const {
+      errors
+    } = F$1(ErrorsContext);
+    return errors;
+  }
 
   /**
    * Subscribe to an event immediately. Update subscription after inputs changed.
@@ -62976,7 +62747,7 @@
    * @param {Function} callback
    */
   function useEvent(event, callback, eventBus) {
-    const eventContext = F(EventContext);
+    const eventContext = F$1(EventContext);
     if (!eventBus) {
       ({
         eventBus
@@ -63022,7 +62793,7 @@
     const {
       getLayoutForKey,
       setLayoutForKey
-    } = F(LayoutContext);
+    } = F$1(LayoutContext);
     const layoutForKey = getLayoutForKey(path, defaultValue);
     const setState = A$1(newValue => {
       setLayoutForKey(path, newValue);
@@ -63055,7 +62826,7 @@
   function useShowEntryEvent(id) {
     const {
       onShow
-    } = F(LayoutContext);
+    } = F$1(LayoutContext);
     const ref = s$1();
     const focus = s$1(false);
     const onShowEntry = A$1(event => {
@@ -63199,10 +62970,14 @@
       setEdited(hasOneEditedEntry);
     }, [entries]);
 
+    // set error state depending on all entries
+    const allErrors = useErrors();
+    const hasErrors = entries.some(entry => allErrors[entry.id]);
+
     // set css class when group is sticky to top
     useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
     const propertiesPanelContext = {
-      ...F(LayoutContext),
+      ...F$1(LayoutContext),
       onShow
     };
     return e$1("div", {
@@ -63215,10 +62990,19 @@
         children: [e$1("div", {
           title: label,
           class: "bio-properties-panel-group-header-title",
-          children: label
+          children: e$1(TooltipWrapper, {
+            value: props.tooltip,
+            forId: 'group-' + id,
+            element: element,
+            parent: groupRef,
+            children: label
+          })
         }), e$1("div", {
           class: "bio-properties-panel-group-header-buttons",
-          children: [edited && e$1(DataMarker, {}), e$1("button", {
+          children: [e$1(DataMarker, {
+            edited: edited,
+            hasErrors: hasErrors
+          }), e$1("button", {
             title: "Toggle section",
             class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
             children: e$1(ArrowIcon, {
@@ -63245,11 +63029,24 @@
       })]
     });
   }
-  function DataMarker() {
-    return e$1("div", {
-      title: "Section contains data",
-      class: "bio-properties-panel-dot"
-    });
+  function DataMarker(props) {
+    const {
+      edited,
+      hasErrors
+    } = props;
+    if (hasErrors) {
+      return e$1("div", {
+        title: "Section contains an error",
+        class: "bio-properties-panel-dot bio-properties-panel-dot--error"
+      });
+    }
+    if (edited) {
+      return e$1("div", {
+        title: "Section contains data",
+        class: "bio-properties-panel-dot"
+      });
+    }
+    return null;
   }
 
   /**
@@ -63280,6 +63077,7 @@
   }
   const DEFAULT_LAYOUT = {};
   const DEFAULT_DESCRIPTION = {};
+  const DEFAULT_TOOLTIP = {};
 
   /**
    * @typedef { {
@@ -63320,12 +63118,22 @@
    *    [id: String]: GetDescriptionFunction
    * } } DescriptionConfig
    *
+   *  @typedef { {
+   *    [id: String]: GetTooltipFunction
+   * } } TooltipConfig
+   *
    * @callback { {
    * @param {string} id
    * @param {Object} element
    * @returns {string}
    * } } GetDescriptionFunction
    *
+   * @callback { {
+   * @param {string} id
+   * @param {Object} element
+   * @returns {string}
+   * } } GetTooltipFunction
+   *
    * @typedef { {
    *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
    *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
@@ -63346,6 +63154,8 @@
    * @param {Function} [props.layoutChanged]
    * @param {DescriptionConfig} [props.descriptionConfig]
    * @param {Function} [props.descriptionLoaded]
+   * @param {TooltipConfig} [props.tooltipConfig]
+   * @param {Function} [props.tooltipLoaded]
    * @param {Object} [props.eventBus]
    */
   function PropertiesPanel(props) {
@@ -63358,6 +63168,8 @@
       layoutChanged,
       descriptionConfig,
       descriptionLoaded,
+      tooltipConfig,
+      tooltipLoaded,
       eventBus
     } = props;
 
@@ -63403,6 +63215,21 @@
       description,
       getDescriptionForId
     };
+
+    // set-up tooltip context
+    const tooltip = d(() => createTooltipContext(tooltipConfig), [tooltipConfig]);
+    y(() => {
+      if (typeof tooltipLoaded === 'function') {
+        tooltipLoaded(tooltip);
+      }
+    }, [tooltip, tooltipLoaded]);
+    const getTooltipForId = (id, element) => {
+      return tooltip[id] && tooltip[id](element);
+    };
+    const tooltipContext = {
+      tooltip,
+      getTooltipForId
+    };
     const [errors, setErrors] = l$2({});
     const onSetErrors = ({
       errors
@@ -63437,29 +63264,32 @@
         value: errorsContext,
         children: e$1(DescriptionContext.Provider, {
           value: descriptionContext,
-          children: e$1(LayoutContext.Provider, {
-            value: layoutContext,
-            children: e$1(EventContext.Provider, {
-              value: eventContext,
-              children: e$1("div", {
-                class: "bio-properties-panel",
-                children: [e$1(Header, {
-                  element: element,
-                  headerProvider: headerProvider
-                }), e$1("div", {
-                  class: "bio-properties-panel-scroll-container",
-                  children: groups.map(group => {
-                    const {
-                      component: Component = Group,
-                      id
-                    } = group;
-                    return v$1(Component, {
-                      ...group,
-                      key: id,
-                      element: element
-                    });
-                  })
-                })]
+          children: e$1(TooltipContext.Provider, {
+            value: tooltipContext,
+            children: e$1(LayoutContext.Provider, {
+              value: layoutContext,
+              children: e$1(EventContext.Provider, {
+                value: eventContext,
+                children: e$1("div", {
+                  class: "bio-properties-panel",
+                  children: [e$1(Header, {
+                    element: element,
+                    headerProvider: headerProvider
+                  }), e$1("div", {
+                    class: "bio-properties-panel-scroll-container",
+                    children: groups.map(group => {
+                      const {
+                        component: Component = Group,
+                        id
+                      } = group;
+                      return v$1(Component, {
+                        ...group,
+                        key: id,
+                        element: element
+                      });
+                    })
+                  })]
+                })
               })
             })
           })
@@ -63482,6 +63312,12 @@
       ...overrides
     };
   }
+  function createTooltipContext(overrides = {}) {
+    return {
+      ...DEFAULT_TOOLTIP,
+      ...overrides
+    };
+  }
 
   // hooks //////////////////
 
@@ -63493,7 +63329,7 @@
    */
   function useUpdateLayoutEffect(effect, deps) {
     const isMounted = s$1(false);
-    h(() => {
+    h$1(() => {
       if (isMounted.current) {
         return effect();
       } else {
@@ -63514,9 +63350,9 @@
     const toggleOpen = () => setOpen(!open);
     const {
       onShow
-    } = F(LayoutContext);
+    } = F$1(LayoutContext);
     const propertiesPanelContext = {
-      ...F(LayoutContext),
+      ...F$1(LayoutContext),
       onShow: A$1(() => {
         setOpen(true);
         if (isFunction(onShow)) {
@@ -63705,13 +63541,25 @@
     const toggleOpen = () => setOpen(!open);
     const hasItems = !!items.length;
     const propertiesPanelContext = {
-      ...F(LayoutContext),
+      ...F$1(LayoutContext),
       onShow
     };
     const handleAddClick = e => {
       setAddTriggered(true);
       add(e);
     };
+    const allErrors = useErrors();
+    const hasError = items.some(item => {
+      if (allErrors[item.id]) {
+        return true;
+      }
+      if (!item.entries) {
+        return;
+      }
+
+      // also check if the error is nested, e.g. for name-value entries
+      return item.entries.some(entry => allErrors[entry.id]);
+    });
     return e$1("div", {
       class: "bio-properties-panel-group",
       "data-group-id": 'group-' + id,
@@ -63722,7 +63570,13 @@
         children: [e$1("div", {
           title: label,
           class: "bio-properties-panel-group-header-title",
-          children: label
+          children: e$1(TooltipWrapper, {
+            value: props.tooltip,
+            forId: 'group-' + id,
+            element: element,
+            parent: groupRef,
+            children: label
+          })
         }), e$1("div", {
           class: "bio-properties-panel-group-header-buttons",
           children: [add ? e$1("button", {
@@ -63735,7 +63589,7 @@
             }) : null]
           }) : null, hasItems ? e$1("div", {
             title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
-            class: "bio-properties-panel-list-badge",
+            class: classNames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
             children: items.length
           }) : null, hasItems ? e$1("button", {
             title: "Toggle section",
@@ -63783,7 +63637,7 @@
     return sortBy(items, i => i.label.toLowerCase());
   }
   function getItem(items, id) {
-    return find$1(items, i => i.id === id);
+    return find(items, i => i.id === id);
   }
   function createOrdering(items) {
     return items.map(i => i.id);
@@ -63811,7 +63665,8 @@
       disabled,
       value = false,
       onFocus,
-      onBlur
+      onBlur,
+      tooltip
     } = props;
     const [localValue, setLocalValue] = l$2(value);
     const handleChangeCallback = ({
@@ -63846,7 +63701,12 @@
       }), e$1("label", {
         for: prefixId$7(id),
         class: "bio-properties-panel-label",
-        children: label
+        children: e$1(TooltipWrapper, {
+          value: tooltip,
+          forId: id,
+          element: props.element,
+          children: label
+        })
       })]
     });
   }
@@ -63861,6 +63721,7 @@
    * @param {Function} props.setValue
    * @param {Function} props.onFocus
    * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
    * @param {boolean} [props.disabled]
    */
   function CheckboxEntry(props) {
@@ -63873,7 +63734,8 @@
       setValue,
       disabled,
       onFocus,
-      onBlur
+      onBlur,
+      tooltip
     } = props;
     const value = getValue(element);
     const error = useError(id);
@@ -63887,7 +63749,9 @@
         onChange: setValue,
         onFocus: onFocus,
         onBlur: onBlur,
-        value: value
+        value: value,
+        tooltip: tooltip,
+        element: element
       }, element), error && e$1("div", {
         class: "bio-properties-panel-error",
         children: error
@@ -63928,7 +63792,7 @@
       }
     }, [editor, buffer]);
   };
-  const CodeEditor$1 = x((props, ref) => {
+  const CodeEditor$1 = x$1((props, ref) => {
     const {
       onInput,
       disabled,
@@ -64009,7 +63873,7 @@
       }
     }, [editor, buffer]);
   };
-  const CodeEditor = x((props, ref) => {
+  const CodeEditor = x$1((props, ref) => {
     const {
       value,
       onInput,
@@ -64144,7 +64008,8 @@
       inline,
       onFocus,
       onBlur,
-      inputRef
+      inputRef,
+      tooltip
     } = props;
     const [localValue, setLocalValue] = l$2(value);
     const handleInputCallback = async () => {
@@ -64167,7 +64032,12 @@
       children: [e$1("label", {
         class: "bio-properties-panel-label",
         for: prefixId$6(id),
-        children: label
+        children: e$1(TooltipWrapper, {
+          value: tooltip,
+          forId: id,
+          element: props.element,
+          children: label
+        })
       }), e$1("div", {
         class: "bio-properties-panel-field-wrapper",
         children: [e$1("label", {
@@ -64205,6 +64075,7 @@
    * @param {Function} props.setValue
    * @param {Function} props.onFocus
    * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
    */
   function ToggleSwitchEntry(props) {
     const {
@@ -64217,7 +64088,8 @@
       getValue,
       setValue,
       onFocus,
-      onBlur
+      onBlur,
+      tooltip
     } = props;
     const value = getValue(element);
     return e$1("div", {
@@ -64231,7 +64103,9 @@
         onFocus: onFocus,
         onBlur: onBlur,
         switcherLabel: switcherLabel,
-        inline: inline
+        inline: inline,
+        tooltip: tooltip,
+        element: element
       }), e$1(Description$1, {
         forId: id,
         element: element,
@@ -64411,7 +64285,8 @@
       disabled = false,
       variables,
       tooltipContainer,
-      OptionalComponent = OptionalFeelInput
+      OptionalComponent = OptionalFeelInput,
+      tooltip
     } = props;
     const [localValue, _setLocalValue] = l$2(value);
     const editorRef = useShowEntryEvent(id);
@@ -64527,7 +64402,12 @@
         for: prefixId$4(id),
         class: "bio-properties-panel-label",
         onClick: () => setFocus(),
-        children: [label, e$1(FeelIcon, {
+        children: [e$1(TooltipWrapper, {
+          value: tooltip,
+          forId: id,
+          element: props.element,
+          children: label
+        }), e$1(FeelIcon, {
           label: label,
           feel: feel,
           onClick: handleFeelToggle,
@@ -64567,7 +64447,7 @@
       })]
     });
   }
-  const OptionalFeelInput = x((props, ref) => {
+  const OptionalFeelInput = x$1((props, ref) => {
     const {
       id,
       disabled,
@@ -64610,7 +64490,7 @@
       value: value || ''
     });
   });
-  const OptionalFeelNumberField = x((props, ref) => {
+  const OptionalFeelNumberField = x$1((props, ref) => {
     const {
       id,
       debounce,
@@ -64657,7 +64537,7 @@
       onBlur: onBlur
     });
   });
-  x((props, ref) => {
+  x$1((props, ref) => {
     const {
       id,
       disabled,
@@ -64696,7 +64576,7 @@
       "data-gramm": "false"
     });
   });
-  const OptionalFeelToggleSwitch = x((props, ref) => {
+  const OptionalFeelToggleSwitch = x$1((props, ref) => {
     const {
       id,
       onInput,
@@ -64728,7 +64608,7 @@
       switcherLabel: switcherLabel
     });
   });
-  x((props, ref) => {
+  x$1((props, ref) => {
     const {
       id,
       disabled,
@@ -64787,6 +64667,7 @@
    * @param {Function} props.variables
    * @param {Function} props.onFocus
    * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
    */
   function FeelEntry(props) {
     const {
@@ -64807,7 +64688,8 @@
       example,
       variables,
       onFocus,
-      onBlur
+      onBlur,
+      tooltip
     } = props;
     const [validationError, setValidationError] = l$2(null);
     const [localError, setLocalError] = l$2(null);
@@ -64857,7 +64739,8 @@
         value: value,
         variables: variables,
         tooltipContainer: tooltipContainer,
-        OptionalComponent: props.OptionalComponent
+        OptionalComponent: props.OptionalComponent,
+        tooltip: tooltip
       }), error && e$1("div", {
         class: "bio-properties-panel-error",
         children: error
@@ -64978,7 +64861,8 @@
       value = '',
       disabled,
       onFocus,
-      onBlur
+      onBlur,
+      tooltip
     } = props;
     const ref = useShowEntryEvent(id);
     const [localValue, setLocalValue] = l$2(value);
@@ -65002,7 +64886,12 @@
       children: [e$1("label", {
         for: prefixId$3(id),
         class: "bio-properties-panel-label",
-        children: label
+        children: e$1(TooltipWrapper, {
+          value: tooltip,
+          forId: id,
+          element: props.element,
+          children: label
+        })
       }), e$1("select", {
         ref: ref,
         id: prefixId$3(id),
@@ -65047,6 +64936,7 @@
    * @param {Function} props.getOptions
    * @param {boolean} [props.disabled]
    * @param {Function} [props.validate]
+   * @param {string|import('preact').Component} props.tooltip
    */
   function SelectEntry(props) {
     const {
@@ -65060,7 +64950,8 @@
       disabled,
       onFocus,
       onBlur,
-      validate
+      validate,
+      tooltip
     } = props;
     const options = getOptions(element);
     const globalError = useError(id);
@@ -65092,7 +64983,9 @@
         onFocus: onFocus,
         onBlur: onBlur,
         options: options,
-        disabled: disabled
+        disabled: disabled,
+        tooltip: tooltip,
+        element: element
       }, element), error && e$1("div", {
         class: "bio-properties-panel-error",
         children: error
@@ -65131,7 +65024,8 @@
       onFocus,
       onBlur,
       autoResize,
-      rows = autoResize ? 1 : 2
+      rows = autoResize ? 1 : 2,
+      tooltip
     } = props;
     const [localValue, setLocalValue] = l$2(value);
     const ref = useShowEntryEvent(id);
@@ -65145,7 +65039,7 @@
       autoResize && resizeToContents(e.target);
       setLocalValue(e.target.value);
     };
-    h(() => {
+    h$1(() => {
       autoResize && resizeToContents(ref.current);
     }, []);
     y(() => {
@@ -65159,7 +65053,12 @@
       children: [e$1("label", {
         for: prefixId$1(id),
         class: "bio-properties-panel-label",
-        children: label
+        children: e$1(TooltipWrapper, {
+          value: tooltip,
+          forId: id,
+          element: props.element,
+          children: label
+        })
       }), e$1("textarea", {
         ref: ref,
         id: prefixId$1(id),
@@ -65208,7 +65107,8 @@
       validate,
       onFocus,
       onBlur,
-      autoResize
+      autoResize,
+      tooltip
     } = props;
     const globalError = useError(id);
     const [localError, setLocalError] = l$2(null);
@@ -65242,7 +65142,9 @@
         debounce: debounce,
         monospace: monospace,
         disabled: disabled,
-        autoResize: autoResize
+        autoResize: autoResize,
+        tooltip: tooltip,
+        element: element
       }, element), error && e$1("div", {
         class: "bio-properties-panel-error",
         children: error
@@ -65271,7 +65173,8 @@
       onInput,
       onFocus,
       onBlur,
-      value = ''
+      value = '',
+      tooltip
     } = props;
     const [localValue, setLocalValue] = l$2(value || '');
     const ref = useShowEntryEvent(id);
@@ -65295,7 +65198,12 @@
       children: [e$1("label", {
         for: prefixId(id),
         class: "bio-properties-panel-label",
-        children: label
+        children: e$1(TooltipWrapper, {
+          value: tooltip,
+          forId: id,
+          element: props.element,
+          children: label
+        })
       }), e$1("input", {
         ref: ref,
         id: prefixId(id),
@@ -65325,6 +65233,7 @@
    * @param {Function} props.setValue
    * @param {Function} props.onFocus
    * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
    * @param {Function} props.validate
    */
   function TextfieldEntry(props) {
@@ -65339,7 +65248,8 @@
       setValue,
       validate,
       onFocus,
-      onBlur
+      onBlur,
+      tooltip
     } = props;
     const globalError = useError(id);
     const [localError, setLocalError] = l$2(null);
@@ -65370,7 +65280,9 @@
         onInput: onInput,
         onFocus: onFocus,
         onBlur: onBlur,
-        value: value
+        value: value,
+        tooltip: tooltip,
+        element: element
       }, element), error && e$1("div", {
         class: "bio-properties-panel-error",
         children: error
@@ -65391,14 +65303,14 @@
     return `bio-properties-panel-${id}`;
   }
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService(type, strict) {}
-  const PropertiesPanelContext = D$1({
+  const PropertiesPanelContext = D$2({
     getService
   });
   var FormPropertiesPanelContext = PropertiesPanelContext;
@@ -65483,8 +65395,8 @@
     }
   };
 
-  /**
-   * Provide placeholders for empty and multiple state.
+  /**
+   * Provide placeholders for empty and multiple state.
    */
   const PropertiesPanelPlaceholderProvider = {
     getEmpty: () => {
@@ -65550,14 +65462,14 @@
   function useService(type, strict) {
     const {
       getService
-    } = F(FormPropertiesPanelContext);
+    } = F$1(FormPropertiesPanelContext);
     return getService(type, strict);
   }
 
-  /**
-   * Retrieve list of variables from the form schema.
-   *
-   * @returns { string[] } list of variables used in form schema
+  /**
+   * Retrieve list of variables from the form schema.
+   *
+   * @returns { string[] } list of variables used in form schema
    */
   function useVariables() {
     const form = useService('formEditor');
@@ -65608,6 +65520,7 @@
       getValue,
       id,
       label: 'Alternative text',
+      tooltip: 'Descriptive text for screen reader accessibility.',
       setValue,
       singleLine: true,
       variables
@@ -66007,6 +65920,7 @@
       getValue,
       id,
       label: 'Disabled',
+      tooltip: 'Field cannot be edited by the end-user, and the data is not submitted.',
       inline: true,
       setValue
     });
@@ -66148,6 +66062,7 @@
       getValue,
       id,
       label: 'Key',
+      tooltip: 'Use a unique "key" to link the form element and the related input/output data. When dealing with nested data, break it down in the user task\'s input mapping before using it.',
       setValue,
       validate
     });
@@ -66207,7 +66122,7 @@
       return get(field, path, '');
     };
     const setValue = value => {
-      return editField(field, path, value);
+      return editField(field, path, value || '');
     };
     return FeelTemplatingEntry({
       debounce,
@@ -66235,7 +66150,7 @@
       return get(field, path, '');
     };
     const setValue = value => {
-      return editField(field, path, value);
+      return editField(field, path, value || '');
     };
     return FeelTemplatingEntry({
       debounce,
@@ -66263,7 +66178,7 @@
       return get(field, path, '');
     };
     const setValue = value => {
-      return editField(field, path, value);
+      return editField(field, path, value || '');
     };
     return FeelTemplatingEntry({
       debounce,
@@ -66321,6 +66236,7 @@
       getValue,
       id,
       label: 'Image source',
+      tooltip: 'Link referring to a hosted image, or use a data URI directly to embed image data into the form.',
       setValue,
       singleLine: true,
       variables
@@ -67071,14 +66987,14 @@
 
   // helpers //////////
 
-  /**
-   * Returns copy of object with updated value.
-   *
-   * @param {Object} properties
-   * @param {string} key
-   * @param {string} value
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object with updated value.
+   *
+   * @param {Object} properties
+   * @param {string} key
+   * @param {string} value
+   *
+   * @returns {Object}
    */
   function updateValue(properties, key, value) {
     return {
@@ -67087,14 +67003,14 @@
     };
   }
 
-  /**
-   * Returns copy of object with updated key.
-   *
-   * @param {Object} properties
-   * @param {string} oldKey
-   * @param {string} newKey
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object with updated key.
+   *
+   * @param {Object} properties
+   * @param {string} oldKey
+   * @param {string} newKey
+   *
+   * @returns {Object}
    */
   function updateKey(properties, oldKey, newKey) {
     return Object.entries(properties).reduce((newProperties, entry) => {
@@ -67460,6 +67376,7 @@
       getValue,
       id,
       label: 'Read only',
+      tooltip: 'Field cannot be edited by the end-user, but the data will still be submitted.',
       setValue,
       variables
     });
@@ -67906,12 +67823,13 @@
     };
     const valuesSourceId = `${fieldId}-valuesSource`;
 
-    /**
-     * @type {Array<Group|ListGroup>}
+    /**
+     * @type {Array<Group|ListGroup>}
      */
     const groups = [{
       id: valuesSourceId,
       label: 'Options source',
+      tooltip: '"Static" defines a constant, predefined set of form options.\n"Dynamic" defines options that are populated dynamically, adjusting based on variable data for flexible responses to different conditions or inputs.',
       component: Group,
       entries: ValuesSourceSelectEntry({
         ...context,
@@ -67955,7 +67873,7 @@
     }
     return groups;
   }
-  function CustomValuesGroup(field, editField) {
+  function CustomPropertiesGroup(field, editField) {
     const {
       properties = {},
       type
@@ -68013,19 +67931,20 @@
       id: 'custom-values',
       items,
       label: 'Custom properties',
+      tooltip: 'Add properties directly to the form schema, useful to configure functionality in custom-built task applications and form renderers.',
       shouldSort: false
     };
   }
 
   // helpers //////////
 
-  /**
-   * Returns copy of object without key.
-   *
-   * @param {Object} properties
-   * @param {string} oldKey
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object without key.
+   *
+   * @param {Object} properties
+   * @param {string} oldKey
+   *
+   * @returns {Object}
    */
   function removeKey(properties, oldKey) {
     return Object.entries(properties).reduce((newProperties, entry) => {
@@ -68094,7 +68013,7 @@
     if (!field) {
       return [];
     }
-    const groups = [GeneralGroup(field, editField, getService), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomValuesGroup(field, editField)];
+    const groups = [GeneralGroup(field, editField, getService), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)];
 
     // contract: if a group returns null, it should not be displayed at all
     return groups.filter(group => group !== null);
@@ -68123,10 +68042,10 @@
         formField: field
       });
     }, [eventBus, formEditor, selectionModule]);
-    h(() => {
-      /**
-       * TODO(pinussilvestrus): update with actual updated element,
-       * once we have a proper updater/change support
+    h$1(() => {
+      /**
+       * TODO(pinussilvestrus): update with actual updated element,
+       * once we have a proper updater/change support
        */
       eventBus.on('changed', refresh);
       eventBus.on('import.done', refresh);
@@ -68177,10 +68096,10 @@
       });
     }
 
-    /**
-     * Attach the properties panel to a parent node.
-     *
-     * @param {HTMLElement} container
+    /**
+     * Attach the properties panel to a parent node.
+     *
+     * @param {HTMLElement} container
      */
     attachTo(container) {
       if (!container) {
@@ -68200,8 +68119,8 @@
       this._eventBus.fire('propertiesPanel.attach');
     }
 
-    /**
-     * Detach the properties panel from its parent node.
+    /**
+     * Detach the properties panel from its parent node.
      */
     detach() {
       const parentNode = this._container.parentNode;
@@ -68230,10 +68149,10 @@
     propertiesPanel: ['type', PropertiesPanelRenderer]
   };
 
-  /**
-   * Manages the rendering of visual plugins.
-   * @constructor
-   * @param {Object} eventBus - Event bus for the application.
+  /**
+   * Manages the rendering of visual plugins.
+   * @constructor
+   * @param {Object} eventBus - Event bus for the application.
    */
   class RenderInjector extends SectionModuleBase {
     constructor(eventBus) {
@@ -68242,10 +68161,10 @@
       this.registeredRenderers = [];
     }
 
-    /**
-     * Inject a new renderer into the injector.
-     * @param {string} identifier - Identifier for the renderer.
-     * @param {Function} Renderer - The renderer function.
+    /**
+     * Inject a new renderer into the injector.
+     * @param {string} identifier - Identifier for the renderer.
+     * @param {Function} Renderer - The renderer function.
      */
     attachRenderer(identifier, Renderer) {
       this.registeredRenderers = [...this.registeredRenderers, {
@@ -68254,17 +68173,17 @@
       }];
     }
 
-    /**
-     * Detach a renderer from the by key injector.
-     * @param {string} identifier - Identifier for the renderer.
+    /**
+     * Detach a renderer from the by key injector.
+     * @param {string} identifier - Identifier for the renderer.
      */
     detachRenderer(identifier) {
       this.registeredRenderers = this.registeredRenderers.filter(r => r.identifier !== identifier);
     }
 
-    /**
-     * Returns the registered renderers.
-     * @returns {Array} Array of registered renderers.
+    /**
+     * Returns the registered renderers.
+     * @returns {Array} Array of registered renderers.
      */
     fetchRenderers() {
       return this.registeredRenderers;
@@ -68294,48 +68213,48 @@
   };
   const ids = new Ids([32, 36, 1]);
 
-  /**
-   * @typedef { import('./types').Injector } Injector
-   * @typedef { import('./types').Module } Module
-   * @typedef { import('./types').Schema } Schema
-   *
-   * @typedef { import('./types').FormEditorOptions } FormEditorOptions
-   * @typedef { import('./types').FormEditorProperties } FormEditorProperties
-   *
-   * @typedef { {
-   *   properties: FormEditorProperties,
-   *   schema: Schema
-   * } } State
-   *
-   * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
-   * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
-   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+  /**
+   * @typedef { import('./types').Injector } Injector
+   * @typedef { import('./types').Module } Module
+   * @typedef { import('./types').Schema } Schema
+   *
+   * @typedef { import('./types').FormEditorOptions } FormEditorOptions
+   * @typedef { import('./types').FormEditorProperties } FormEditorProperties
+   *
+   * @typedef { {
+   *   properties: FormEditorProperties,
+   *   schema: Schema
+   * } } State
+   *
+   * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
+   * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
+   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
    */
 
-  /**
-   * The form editor.
+  /**
+   * The form editor.
    */
   class FormEditor {
-    /**
-     * @constructor
-     * @param {FormEditorOptions} options
+    /**
+     * @constructor
+     * @param {FormEditorOptions} options
      */
     constructor(options = {}) {
-      /**
-       * @public
-       * @type {OnEventType}
+      /**
+       * @public
+       * @type {OnEventType}
        */
       this.on = this._onEvent;
 
-      /**
-       * @public
-       * @type {String}
+      /**
+       * @public
+       * @type {String}
        */
       this._id = ids.next();
 
-      /**
-       * @private
-       * @type {Element}
+      /**
+       * @private
+       * @type {Element}
        */
       this._container = createFormContainer();
       this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -68346,15 +68265,15 @@
         properties = {}
       } = options;
 
-      /**
-       * @private
-       * @type {any}
+      /**
+       * @private
+       * @type {any}
        */
       this.exporter = exporter;
 
-      /**
-       * @private
-       * @type {State}
+      /**
+       * @private
+       * @type {State}
        */
       this._state = {
         properties,
@@ -68383,10 +68302,10 @@
       this._detach(false);
     }
 
-    /**
-     * @param {Schema} schema
-     *
-     * @return {Promise<{ warnings: Array<any> }>}
+    /**
+     * @param {Schema} schema
+     *
+     * @return {Promise<{ warnings: Array<any> }>}
      */
     importSchema(schema) {
       return new Promise((resolve, reject) => {
@@ -68415,15 +68334,15 @@
       });
     }
 
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
     saveSchema() {
       return this.getSchema();
     }
 
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
     getSchema() {
       const {
@@ -68432,8 +68351,8 @@
       return exportSchema(schema, this.exporter, schemaVersion);
     }
 
-    /**
-     * @param {Element|string} parentNode
+    /**
+     * @param {Element|string} parentNode
      */
     attachTo(parentNode) {
       if (!parentNode) {
@@ -68451,10 +68370,10 @@
       this._detach();
     }
 
-    /**
-     * @internal
-     *
-     * @param {boolean} [emit]
+    /**
+     * @internal
+     *
+     * @param {boolean} [emit]
      */
     _detach(emit = true) {
       const container = this._container,
@@ -68468,9 +68387,9 @@
       parentNode.removeChild(container);
     }
 
-    /**
-     * @param {any} property
-     * @param {any} value
+    /**
+     * @param {any} property
+     * @param {any} value
      */
     setProperty(property, value) {
       const properties = set$1(this._getState().properties, [property], value);
@@ -68479,21 +68398,21 @@
       });
     }
 
-    /**
-     * @param {string} type
-     * @param {Function} handler
+    /**
+     * @param {string} type
+     * @param {Function} handler
      */
     off(type, handler) {
       this.get('eventBus').off(type, handler);
     }
 
-    /**
-     * @internal
-     *
-     * @param {FormEditorOptions} options
-     * @param {Element} container
-     *
-     * @returns {Injector}
+    /**
+     * @internal
+     *
+     * @param {FormEditorOptions} options
+     * @param {Element} container
+     *
+     * @returns {Injector}
      */
     _createInjector(options, container) {
       const {
@@ -68515,22 +68434,22 @@
       }, core, ...modules, ...additionalModules]);
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _emit(type, data) {
       this.get('eventBus').fire(type, data);
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _getState() {
       return this._state;
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _setState(state) {
       this._state = {
@@ -68540,15 +68459,15 @@
       this._emit('changed', this._getState());
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _getModules() {
       return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _onEvent(type, priority, handler) {
       this.get('eventBus').on(type, priority, handler);
@@ -70051,8 +69970,8 @@
     return new LanguageSupport(jsonLanguage);
   }
 
-  /**
-   * @type {Facet<import('..').Variables>} Variables
+  /**
+   * @type {Facet<import('..').Variables>} Variables
    */
   const variablesFacet = Facet.define();
 
@@ -70092,8 +70011,8 @@
     let language = new Compartment().of(json());
     let tabSize = new Compartment().of(EditorState.tabSize.of(2));
 
-    /**
-     * @typedef {Array<string>} Variables
+    /**
+     * @typedef {Array<string>} Variables
      */
 
     const autocompletionConf = new Compartment();
@@ -70133,8 +70052,8 @@
       return view.state.doc.toString();
     };
 
-    /**
-     * @param {Variables} variables
+    /**
+     * @param {Variables} variables
      */
     this.setVariables = function (variables) {
       view.setVariables(variables);