@bpmn-io/properties-panel 4.0.0-0 → 4.0.0-2

package/dist/index.js

@@ -2,8 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var preact = require('preact');
+var hooks = require('preact/hooks');
 var minDash = require('min-dash');
+var compat = require('preact/compat');
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
 var classnames = require('classnames');
 var minDom = require('min-dom');
 var feelers = require('feelers');
@@ -35,433 +38,10 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var FeelEditor__default = /*#__PURE__*/_interopDefaultLegacy(FeelEditor);
 var focusTrap__namespace = /*#__PURE__*/_interopNamespace(focusTrap);
 
-var t,
-  r,
-  u,
-  i,
-  o$1 = 0,
-  f = [],
-  c = [],
-  e = preact.options.__b,
-  a = preact.options.__r,
-  v = preact.options.diffed,
-  l = preact.options.__c,
-  m = preact.options.unmount;
-function d(t, u) {
-  preact.options.__h && preact.options.__h(r, t, o$1 || u), o$1 = 0;
-  var i = r.__H || (r.__H = {
-    __: [],
-    __h: []
-  });
-  return t >= i.__.length && i.__.push({
-    __V: c
-  }), i.__[t];
-}
-function h(n) {
-  return o$1 = 1, s(B$1, n);
-}
-function s(n, u, i) {
-  var o = d(t++, 2);
-  if (o.t = n, !o.__c && (o.__ = [i ? i(u) : B$1(void 0, u), function (n) {
-    var t = o.__N ? o.__N[0] : o.__[0],
-      r = o.t(t, n);
-    t !== r && (o.__N = [r, o.__[1]], o.__c.setState({}));
-  }], o.__c = r, !r.u)) {
-    var f = function (n, t, r) {
-      if (!o.__c.__H) return !0;
-      var u = o.__c.__H.__.filter(function (n) {
-        return n.__c;
-      });
-      if (u.every(function (n) {
-        return !n.__N;
-      })) return !c || c.call(this, n, t, r);
-      var i = !1;
-      return u.forEach(function (n) {
-        if (n.__N) {
-          var t = n.__[0];
-          n.__ = n.__N, n.__N = void 0, t !== n.__[0] && (i = !0);
-        }
-      }), !(!i && o.__c.props === n) && (!c || c.call(this, n, t, r));
-    };
-    r.u = !0;
-    var c = r.shouldComponentUpdate,
-      e = r.componentWillUpdate;
-    r.componentWillUpdate = function (n, t, r) {
-      if (this.__e) {
-        var u = c;
-        c = void 0, f(n, t, r), c = u;
-      }
-      e && e.call(this, n, t, r);
-    }, r.shouldComponentUpdate = f;
-  }
-  return o.__N || o.__;
-}
-function p(u, i) {
-  var o = d(t++, 3);
-  !preact.options.__s && z$1(o.__H, i) && (o.__ = u, o.i = i, r.__H.__h.push(o));
-}
-function y(u, i) {
-  var o = d(t++, 4);
-  !preact.options.__s && z$1(o.__H, i) && (o.__ = u, o.i = i, r.__h.push(o));
-}
-function _$1(n) {
-  return o$1 = 5, F$1(function () {
-    return {
-      current: n
-    };
-  }, []);
-}
-function F$1(n, r) {
-  var u = d(t++, 7);
-  return z$1(u.__H, r) ? (u.__V = n(), u.i = r, u.__h = n, u.__V) : u.__;
-}
-function T$1(n, t) {
-  return o$1 = 8, F$1(function () {
-    return n;
-  }, t);
-}
-function q$1(n) {
-  var u = r.context[n.__c],
-    i = d(t++, 9);
-  return i.c = n, u ? (null == i.__ && (i.__ = !0, u.sub(r)), u.props.value) : n.__;
-}
-function b() {
-  for (var t; t = f.shift();) if (t.__P && t.__H) try {
-    t.__H.__h.forEach(k$1), t.__H.__h.forEach(w$1), t.__H.__h = [];
-  } catch (r) {
-    t.__H.__h = [], preact.options.__e(r, t.__v);
-  }
-}
-preact.options.__b = function (n) {
-  r = null, e && e(n);
-}, preact.options.__r = function (n) {
-  a && a(n), t = 0;
-  var i = (r = n.__c).__H;
-  i && (u === r ? (i.__h = [], r.__h = [], i.__.forEach(function (n) {
-    n.__N && (n.__ = n.__N), n.__V = c, n.__N = n.i = void 0;
-  })) : (i.__h.forEach(k$1), i.__h.forEach(w$1), i.__h = [], t = 0)), u = r;
-}, preact.options.diffed = function (t) {
-  v && v(t);
-  var o = t.__c;
-  o && o.__H && (o.__H.__h.length && (1 !== f.push(o) && i === preact.options.requestAnimationFrame || ((i = preact.options.requestAnimationFrame) || j$1)(b)), o.__H.__.forEach(function (n) {
-    n.i && (n.__H = n.i), n.__V !== c && (n.__ = n.__V), n.i = void 0, n.__V = c;
-  })), u = r = null;
-}, preact.options.__c = function (t, r) {
-  r.some(function (t) {
-    try {
-      t.__h.forEach(k$1), t.__h = t.__h.filter(function (n) {
-        return !n.__ || w$1(n);
-      });
-    } catch (u) {
-      r.some(function (n) {
-        n.__h && (n.__h = []);
-      }), r = [], preact.options.__e(u, t.__v);
-    }
-  }), l && l(t, r);
-}, preact.options.unmount = function (t) {
-  m && m(t);
-  var r,
-    u = t.__c;
-  u && u.__H && (u.__H.__.forEach(function (n) {
-    try {
-      k$1(n);
-    } catch (n) {
-      r = n;
-    }
-  }), u.__H = void 0, r && preact.options.__e(r, u.__v));
-};
-var g$1 = "function" == typeof requestAnimationFrame;
-function j$1(n) {
-  var t,
-    r = function () {
-      clearTimeout(u), g$1 && cancelAnimationFrame(t), setTimeout(n);
-    },
-    u = setTimeout(r, 100);
-  g$1 && (t = requestAnimationFrame(r));
-}
-function k$1(n) {
-  var t = r,
-    u = n.__c;
-  "function" == typeof u && (n.__c = void 0, u()), r = t;
-}
-function w$1(n) {
-  var t = r;
-  n.__c = n.__(), r = t;
-}
-function z$1(n, t) {
-  return !n || n.length !== t.length || t.some(function (t, r) {
-    return t !== n[r];
-  });
-}
-function B$1(n, t) {
-  return "function" == typeof t ? t(n) : t;
-}
-
-function g(n, t) {
-  for (var e in t) n[e] = t[e];
-  return n;
-}
-function C(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;
-}
-function w(n) {
-  this.props = n;
-}
-(w.prototype = new preact.Component()).isPureReactComponent = !0, w.prototype.shouldComponentUpdate = function (n, t) {
-  return C(this.props, n) || C(this.state, t);
-};
-var R = preact.options.__b;
-preact.options.__b = function (n) {
-  n.type && n.type.__f && n.ref && (n.props.ref = n.ref, n.ref = null), R && R(n);
-};
-var N = "undefined" != typeof Symbol && Symbol.for && Symbol.for("react.forward_ref") || 3911;
-function k(n) {
-  function t(t) {
-    var e = g({}, t);
-    return delete e.ref, n(e, t.ref || null);
-  }
-  return t.$$typeof = N, t.render = t, t.prototype.isReactComponent = t.__f = !0, t.displayName = "ForwardRef(" + (n.displayName || n.name) + ")", t;
-}
-var T = preact.options.__e;
-preact.options.__e = function (n, t, e, r) {
-  if (n.then) for (var u, o = t; o = o.__;) if ((u = o.__c) && u.__c) return null == t.__e && (t.__e = e.__e, t.__k = e.__k), u.__c(n, t);
-  T(n, t, e, r);
-};
-var F = preact.options.unmount;
-function I(n, t, e) {
-  return n && (n.__c && n.__c.__H && (n.__c.__H.__.forEach(function (n) {
-    "function" == typeof n.__c && n.__c();
-  }), n.__c.__H = null), null != (n = g({}, n)).__c && (n.__c.__P === e && (n.__c.__P = t), n.__c = null), n.__k = n.__k && n.__k.map(function (n) {
-    return I(n, t, e);
-  })), n;
-}
-function L(n, t, e) {
-  return n && e && (n.__v = null, n.__k = n.__k && n.__k.map(function (n) {
-    return L(n, t, e);
-  }), n.__c && n.__c.__P === t && (n.__e && e.insertBefore(n.__e, n.__d), n.__c.__e = !0, n.__c.__P = e)), n;
-}
-function U() {
-  this.__u = 0, this.t = null, this.__b = null;
-}
-function D(n) {
-  var t = n.__.__c;
-  return t && t.__a && t.__a(n);
-}
-function V() {
-  this.u = null, this.o = null;
-}
-preact.options.unmount = function (n) {
-  var t = n.__c;
-  t && t.__R && t.__R(), t && !0 === n.__h && (n.type = null), F && F(n);
-}, (U.prototype = new preact.Component()).__c = function (n, t) {
-  var e = t.__c,
-    r = this;
-  null == r.t && (r.t = []), r.t.push(e);
-  var u = D(r.__v),
-    o = !1,
-    i = function () {
-      o || (o = !0, e.__R = null, u ? u(l) : l());
-    };
-  e.__R = i;
-  var l = function () {
-      if (! --r.__u) {
-        if (r.state.__a) {
-          var n = r.state.__a;
-          r.__v.__k[0] = L(n, n.__c.__P, n.__c.__O);
-        }
-        var t;
-        for (r.setState({
-          __a: r.__b = null
-        }); t = r.t.pop();) t.forceUpdate();
-      }
-    },
-    c = !0 === t.__h;
-  r.__u++ || c || r.setState({
-    __a: r.__b = r.__v.__k[0]
-  }), n.then(i, i);
-}, U.prototype.componentWillUnmount = function () {
-  this.t = [];
-}, U.prototype.render = function (n, e) {
-  if (this.__b) {
-    if (this.__v.__k) {
-      var r = document.createElement("div"),
-        o = this.__v.__k[0].__c;
-      this.__v.__k[0] = I(this.__b, r, o.__O = o.__P);
-    }
-    this.__b = null;
-  }
-  var i = e.__a && preact.createElement(preact.Fragment, null, n.fallback);
-  return i && (i.__h = null), [preact.createElement(preact.Fragment, null, e.__a ? null : n.children), i];
-};
-var W = function (n, t, e) {
-  if (++e[1] === e[0] && n.o.delete(t), n.props.revealOrder && ("t" !== n.props.revealOrder[0] || !n.o.size)) for (e = n.u; e;) {
-    for (; e.length > 3;) e.pop()();
-    if (e[1] < e[0]) break;
-    n.u = e = e[2];
-  }
-};
-function P(n) {
-  return this.getChildContext = function () {
-    return n.context;
-  }, n.children;
-}
-function j(n) {
-  var e = this,
-    r = n.i;
-  e.componentWillUnmount = function () {
-    preact.render(null, e.l), e.l = null, e.i = null;
-  }, e.i && e.i !== r && e.componentWillUnmount(), e.l || (e.i = r, e.l = {
-    nodeType: 1,
-    parentNode: r,
-    childNodes: [],
-    appendChild: function (n) {
-      this.childNodes.push(n), e.i.appendChild(n);
-    },
-    insertBefore: function (n, t) {
-      this.childNodes.push(n), e.i.appendChild(n);
-    },
-    removeChild: function (n) {
-      this.childNodes.splice(this.childNodes.indexOf(n) >>> 1, 1), e.i.removeChild(n);
-    }
-  }), preact.render(preact.createElement(P, {
-    context: e.context
-  }, n.__v), e.l);
-}
-function z(n, e) {
-  var r = preact.createElement(j, {
-    __v: n,
-    i: e
-  });
-  return r.containerInfo = e, r;
-}
-(V.prototype = new preact.Component()).__a = function (n) {
-  var t = this,
-    e = D(t.__v),
-    r = t.o.get(n);
-  return r[0]++, function (u) {
-    var o = function () {
-      t.props.revealOrder ? (r.push(u), W(t, n, r)) : u();
-    };
-    e ? e(o) : o();
-  };
-}, V.prototype.render = function (n) {
-  this.u = null, this.o = new Map();
-  var t = preact.toChildArray(n.children);
-  n.revealOrder && "b" === n.revealOrder[0] && t.reverse();
-  for (var e = t.length; e--;) this.o.set(t[e], this.u = [1, 0, this.u]);
-  return n.children;
-}, V.prototype.componentDidUpdate = V.prototype.componentDidMount = function () {
-  var n = this;
-  this.o.forEach(function (t, e) {
-    W(n, e, t);
-  });
-};
-var B = "undefined" != typeof Symbol && Symbol.for && Symbol.for("react.element") || 60103,
-  H = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,
-  Z = /^on(Ani|Tra|Tou|BeforeInp|Compo)/,
-  Y = /[A-Z0-9]/g,
-  $ = "undefined" != typeof document,
-  q = function (n) {
-    return ("undefined" != typeof Symbol && "symbol" == typeof Symbol() ? /fil|che|rad/ : /fil|che|ra/).test(n);
-  };
-preact.Component.prototype.isReactComponent = {}, ["componentWillMount", "componentWillReceiveProps", "componentWillUpdate"].forEach(function (t) {
-  Object.defineProperty(preact.Component.prototype, t, {
-    configurable: !0,
-    get: function () {
-      return this["UNSAFE_" + t];
-    },
-    set: function (n) {
-      Object.defineProperty(this, t, {
-        configurable: !0,
-        writable: !0,
-        value: n
-      });
-    }
-  });
-});
-var K = preact.options.event;
-function Q() {}
-function X() {
-  return this.cancelBubble;
-}
-function nn() {
-  return this.defaultPrevented;
-}
-preact.options.event = function (n) {
-  return K && (n = K(n)), n.persist = Q, n.isPropagationStopped = X, n.isDefaultPrevented = nn, n.nativeEvent = n;
-};
-var en = {
-    enumerable: !1,
-    configurable: !0,
-    get: function () {
-      return this.class;
-    }
-  },
-  rn = preact.options.vnode;
-preact.options.vnode = function (n) {
-  "string" == typeof n.type && function (n) {
-    var t = n.props,
-      e = n.type,
-      u = {};
-    for (var o in t) {
-      var i = t[o];
-      if (!("value" === o && "defaultValue" in t && null == i || $ && "children" === o && "noscript" === e || "class" === o || "className" === o)) {
-        var l = o.toLowerCase();
-        "defaultValue" === o && "value" in t && null == t.value ? o = "value" : "download" === o && !0 === i ? i = "" : "ondoubleclick" === l ? o = "ondblclick" : "onchange" !== l || "input" !== e && "textarea" !== e || q(t.type) ? "onfocus" === l ? o = "onfocusin" : "onblur" === l ? o = "onfocusout" : Z.test(o) ? o = l : -1 === e.indexOf("-") && H.test(o) ? o = o.replace(Y, "-$&").toLowerCase() : null === i && (i = void 0) : l = o = "oninput", "oninput" === l && u[o = l] && (o = "oninputCapture"), u[o] = i;
-      }
-    }
-    "select" == e && u.multiple && Array.isArray(u.value) && (u.value = preact.toChildArray(t.children).forEach(function (n) {
-      n.props.selected = -1 != u.value.indexOf(n.props.value);
-    })), "select" == e && null != u.defaultValue && (u.value = preact.toChildArray(t.children).forEach(function (n) {
-      n.props.selected = u.multiple ? -1 != u.defaultValue.indexOf(n.props.value) : u.defaultValue == n.props.value;
-    })), t.class && !t.className ? (u.class = t.class, Object.defineProperty(u, "className", en)) : (t.className && !t.class || t.class && t.className) && (u.class = u.className = t.className), n.props = u;
-  }(n), n.$$typeof = B, rn && rn(n);
-};
-var un = preact.options.__r;
-preact.options.__r = function (n) {
-  un && un(n);
-};
-var on = preact.options.diffed;
-preact.options.diffed = function (n) {
-  on && on(n);
-  var t = n.props,
-    e = n.__e;
-  null != e && "textarea" === n.type && "value" in t && t.value !== e.value && (e.value = null == t.value ? "" : t.value);
-};
-
-var _ = 0;
-function o(o, e, n, t, f, l) {
-  var s,
-    u,
-    a = {};
-  for (u in e) "ref" == u ? s = e[u] : a[u] = e[u];
-  var i = {
-    type: o,
-    props: a,
-    key: n,
-    ref: s,
-    __k: null,
-    __: null,
-    __b: 0,
-    __e: null,
-    __d: void 0,
-    __c: null,
-    __h: null,
-    constructor: void 0,
-    __v: --_,
-    __source: f,
-    __self: l
-  };
-  if ("function" == typeof o && (s = o.defaultProps)) for (u in s) void 0 === a[u] && (a[u] = s[u]);
-  return preact.options.vnode && preact.options.vnode(i), i;
-}
-
 var ArrowIcon = function ArrowIcon(props) {
-  return o("svg", {
+  return jsxRuntime.jsx("svg", {
     ...props,
-    children: o("path", {
+    children: jsxRuntime.jsx("path", {
       fillRule: "evenodd",
       d: "m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z"
     })
@@ -473,9 +53,9 @@ ArrowIcon.defaultProps = {
   height: "16"
 };
 var CreateIcon = function CreateIcon(props) {
-  return o("svg", {
+  return jsxRuntime.jsx("svg", {
     ...props,
-    children: o("path", {
+    children: jsxRuntime.jsx("path", {
       fillRule: "evenodd",
       d: "M9 13V9h4a1 1 0 0 0 0-2H9V3a1 1 0 1 0-2 0v4H3a1 1 0 1 0 0 2h4v4a1 1 0 0 0 2 0Z"
     })
@@ -487,9 +67,9 @@ CreateIcon.defaultProps = {
   height: "16"
 };
 var DeleteIcon = function DeleteIcon(props) {
-  return o("svg", {
+  return jsxRuntime.jsx("svg", {
     ...props,
-    children: o("path", {
+    children: jsxRuntime.jsx("path", {
       fillRule: "evenodd",
       d: "M12 6v7c0 1.1-.4 1.55-1.5 1.55h-5C4.4 14.55 4 14.1 4 13V6h8Zm-1.5 1.5h-5v4.3c0 .66.5 1.2 1.111 1.2H9.39c.611 0 1.111-.54 1.111-1.2V7.5ZM13 3h-2l-1-1H6L5 3H3v1.5h10V3Z"
     })
@@ -501,21 +81,21 @@ DeleteIcon.defaultProps = {
   height: "16"
 };
 var DragIcon = function DragIcon(props) {
-  return o("svg", {
+  return jsxRuntime.jsxs("svg", {
     ...props,
-    children: [o("path", {
+    children: [jsxRuntime.jsx("path", {
       fill: "#fff",
       style: {
         mixBlendMode: "multiply"
       },
       d: "M0 0h16v16H0z"
-    }), o("path", {
+    }), jsxRuntime.jsx("path", {
       fill: "#fff",
       style: {
         mixBlendMode: "multiply"
       },
       d: "M0 0h16v16H0z"
-    }), o("path", {
+    }), jsxRuntime.jsx("path", {
       d: "M7 3H5v2h2V3zm4 0H9v2h2V3zM7 7H5v2h2V7zm4 0H9v2h2V7zm-4 4H5v2h2v-2zm4 0H9v2h2v-2z",
       fill: "#161616"
     })]
@@ -528,9 +108,9 @@ DragIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 var ExternalLinkIcon = function ExternalLinkIcon(props) {
-  return o("svg", {
+  return jsxRuntime.jsx("svg", {
     ...props,
-    children: o("path", {
+    children: jsxRuntime.jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M12.637 12.637v-4.72h1.362v4.721c0 .36-.137.676-.411.95-.275.275-.591.412-.95.412H3.362c-.38 0-.703-.132-.967-.396A1.315 1.315 0 0 1 2 12.638V3.362c0-.38.132-.703.396-.967S2.982 2 3.363 2h4.553v1.363H3.363v9.274h9.274ZM14 2H9.28l-.001 1.362h2.408L5.065 9.984l.95.95 6.622-6.622v2.409H14V2Z",
@@ -545,9 +125,9 @@ ExternalLinkIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 var FeelIcon$1 = function FeelIcon(props) {
-  return o("svg", {
+  return jsxRuntime.jsx("svg", {
     ...props,
-    children: o("path", {
+    children: jsxRuntime.jsx("path", {
       d: "M3.617 11.99c-.137.684-.392 1.19-.765 1.518-.362.328-.882.492-1.558.492H0l.309-1.579h1.264l1.515-7.64h-.912l.309-1.579h.911l.236-1.191c.137-.685.387-1.192.75-1.52C4.753.164 5.277 0 5.953 0h1.294L6.94 1.579H5.675l-.323 1.623h1.264l-.309 1.579H5.043l-1.426 7.208ZM5.605 11.021l3.029-4.155L7.28 3.202h2.073l.706 2.547h.176l1.691-2.547H14l-3.014 4.051 1.338 3.768H10.25l-.706-2.606H9.37L7.678 11.02H5.605Z",
       fill: "currentcolor"
     })
@@ -575,35 +155,35 @@ function Header(props) {
   const type = getTypeLabel(element);
   const documentationRef = getDocumentationRef && getDocumentationRef(element);
   const ElementIcon = getElementIcon(element);
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-header",
-    children: [o("div", {
+    children: [jsxRuntime.jsx("div", {
       class: "bio-properties-panel-header-icon",
-      children: ElementIcon && o(ElementIcon, {
+      children: ElementIcon && jsxRuntime.jsx(ElementIcon, {
         width: "32",
         height: "32",
         viewBox: "0 0 32 32"
       })
-    }), o("div", {
+    }), jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-header-labels",
-      children: [o("div", {
+      children: [jsxRuntime.jsx("div", {
         title: type,
         class: "bio-properties-panel-header-type",
         children: type
-      }), label ? o("div", {
+      }), label ? jsxRuntime.jsx("div", {
         title: label,
         class: "bio-properties-panel-header-label",
         children: label
       }) : null]
-    }), o("div", {
+    }), jsxRuntime.jsx("div", {
       class: "bio-properties-panel-header-actions",
-      children: documentationRef ? o("a", {
+      children: documentationRef ? jsxRuntime.jsx("a", {
         rel: "noopener",
         class: "bio-properties-panel-header-link",
         href: documentationRef,
         title: "Open documentation",
         target: "_blank",
-        children: o(ExternalLinkIcon, {})
+        children: jsxRuntime.jsx(ExternalLinkIcon, {})
       }) : null
     })]
   });
@@ -666,7 +246,7 @@ const TooltipContext = preact.createContext({
 function useTooltipContext(id, element) {
   const {
     getTooltipForId
-  } = q$1(TooltipContext);
+  } = hooks.useContext(TooltipContext);
   return getTooltipForId(id, element);
 }
 
@@ -680,7 +260,7 @@ function TooltipWrapper(props) {
   if (!value) {
     return props.children;
   }
-  return o(Tooltip, {
+  return jsxRuntime.jsx(Tooltip, {
     ...props,
     value: value,
     forId: prefixId$9(forId)
@@ -692,11 +272,11 @@ function Tooltip(props) {
     value,
     parent
   } = props;
-  const [visible, setShow] = h(false);
-  const [focusedViaKeyboard, setFocusedViaKeyboard] = h(false);
+  const [visible, setShow] = hooks.useState(false);
+  const [focusedViaKeyboard, setFocusedViaKeyboard] = hooks.useState(false);
   let timeout = null;
-  const wrapperRef = _$1(null);
-  const tooltipRef = _$1(null);
+  const wrapperRef = hooks.useRef(null);
+  const tooltipRef = hooks.useRef(null);
   const showTooltip = async event => {
     const show = () => setShow(true);
     if (!visible && !timeout) {
@@ -723,7 +303,7 @@ function Tooltip(props) {
     const wrapper = wrapperRef.current;
     return tooltip && (inBounds(x, y, wrapper.getBoundingClientRect()) || inBounds(x, y, tooltip.getBoundingClientRect()));
   };
-  p(() => {
+  hooks.useEffect(() => {
     const {
       current
     } = wrapperRef;
@@ -758,7 +338,7 @@ function Tooltip(props) {
     };
   }, [wrapperRef.current, visible, focusedViaKeyboard]);
   const renderTooltip = () => {
-    return o("div", {
+    return jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-tooltip",
       role: "tooltip",
       id: "bio-properties-panel-tooltip",
@@ -766,15 +346,15 @@ function Tooltip(props) {
       style: getTooltipPosition(wrapperRef.current),
       ref: tooltipRef,
       onClick: e => e.stopPropagation(),
-      children: [o("div", {
+      children: [jsxRuntime.jsx("div", {
         class: "bio-properties-panel-tooltip-content",
         children: value
-      }), o("div", {
+      }), jsxRuntime.jsx("div", {
         class: "bio-properties-panel-tooltip-arrow"
       })]
     });
   };
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-tooltip-wrapper",
     tabIndex: "0",
     ref: wrapperRef,
@@ -785,7 +365,7 @@ function Tooltip(props) {
     },
     onFocus: showTooltip,
     onKeyDown: hideTooltipViaEscape,
-    children: [props.children, visible ? parent ? z(renderTooltip(), parent.current) : renderTooltip() : null]
+    children: [props.children, visible ? parent ? compat.createPortal(renderTooltip(), parent.current) : renderTooltip() : null]
   });
 }
 
@@ -830,20 +410,20 @@ function prefixId$9(id) {
 function useDescriptionContext(id, element) {
   const {
     getDescriptionForId
-  } = q$1(DescriptionContext);
+  } = hooks.useContext(DescriptionContext);
   return getDescriptionForId(id, element);
 }
 
 function useError(id) {
   const {
     errors
-  } = q$1(ErrorsContext);
+  } = hooks.useContext(ErrorsContext);
   return errors[id];
 }
 function useErrors() {
   const {
     errors
-  } = q$1(ErrorsContext);
+  } = hooks.useContext(ErrorsContext);
   return errors;
 }
 
@@ -854,13 +434,13 @@ function useErrors() {
  * @param {Function} callback
  */
 function useEvent(event, callback, eventBus) {
-  const eventContext = q$1(EventContext);
+  const eventContext = hooks.useContext(EventContext);
   if (!eventBus) {
     ({
       eventBus
     } = eventContext);
   }
-  const didMount = _$1(false);
+  const didMount = hooks.useRef(false);
 
   // (1) subscribe immediately
   if (eventBus && !didMount.current) {
@@ -868,7 +448,7 @@ function useEvent(event, callback, eventBus) {
   }
 
   // (2) update subscription after inputs changed
-  p(() => {
+  hooks.useEffect(() => {
     if (eventBus && didMount.current) {
       eventBus.on(event, callback);
     }
@@ -903,7 +483,7 @@ const KEY_LENGTH = 6;
  * @returns {(element: object) => string}
  */
 function useKeyFactory(dependencies = []) {
-  const map = F$1(() => new Map(), dependencies);
+  const map = hooks.useMemo(() => new Map(), dependencies);
   const getKey = el => {
     let key = map.get(el);
     if (!key) {
@@ -934,9 +514,9 @@ function useLayoutState(path, defaultValue) {
   const {
     getLayoutForKey,
     setLayoutForKey
-  } = q$1(LayoutContext);
+  } = hooks.useContext(LayoutContext);
   const layoutForKey = getLayoutForKey(path, defaultValue);
-  const setState = T$1(newValue => {
+  const setState = hooks.useCallback(newValue => {
     setLayoutForKey(path, newValue);
   }, [setLayoutForKey]);
   return [layoutForKey, setState];
@@ -950,8 +530,8 @@ function useLayoutState(path, defaultValue) {
  */
 
 function usePrevious(value) {
-  const ref = _$1();
-  p(() => {
+  const ref = hooks.useRef();
+  hooks.useEffect(() => {
     ref.current = value;
   });
   return ref.current;
@@ -967,10 +547,10 @@ function usePrevious(value) {
 function useShowEntryEvent(id) {
   const {
     onShow
-  } = q$1(LayoutContext);
-  const ref = _$1();
-  const focus = _$1(false);
-  const onShowEntry = T$1(event => {
+  } = hooks.useContext(LayoutContext);
+  const ref = hooks.useRef();
+  const focus = hooks.useRef(false);
+  const onShowEntry = hooks.useCallback(event => {
     if (event.id === id) {
       onShow();
       if (!focus.current) {
@@ -978,7 +558,7 @@ function useShowEntryEvent(id) {
       }
     }
   }, [id]);
-  p(() => {
+  hooks.useEffect(() => {
     if (focus.current && ref.current) {
       if (minDash.isFunction(ref.current.focus)) {
         ref.current.focus();
@@ -1009,19 +589,19 @@ function useShowEntryEvent(id) {
  * @param {setSticky} setSticky
  */
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
-  const [scrollContainer, setScrollContainer] = h(minDom.query(scrollContainerSelector));
-  const updateScrollContainer = T$1(() => {
+  const [scrollContainer, setScrollContainer] = hooks.useState(minDom.query(scrollContainerSelector));
+  const updateScrollContainer = hooks.useCallback(() => {
     const newScrollContainer = minDom.query(scrollContainerSelector);
     if (newScrollContainer !== scrollContainer) {
       setScrollContainer(newScrollContainer);
     }
   }, [scrollContainerSelector, scrollContainer]);
-  p(() => {
+  hooks.useEffect(() => {
     updateScrollContainer();
   }, [updateScrollContainer]);
   useEvent('propertiesPanel.attach', updateScrollContainer);
   useEvent('propertiesPanel.detach', updateScrollContainer);
-  p(() => {
+  hooks.useEffect(() => {
     const Observer = IntersectionObserver;
 
     // return early if IntersectionObserver is not available
@@ -1075,9 +655,9 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
  * @returns {Function} static function reference
  */
 function useStaticCallback(callback) {
-  const callbackRef = _$1(callback);
+  const callbackRef = hooks.useRef(callback);
   callbackRef.current = callback;
-  return T$1((...args) => callbackRef.current(...args), []);
+  return hooks.useCallback((...args) => callbackRef.current(...args), []);
 }
 
 function Group(props) {
@@ -1088,15 +668,15 @@ function Group(props) {
     label,
     shouldOpen = false
   } = props;
-  const groupRef = _$1(null);
+  const groupRef = hooks.useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
-  const onShow = T$1(() => setOpen(true), [setOpen]);
+  const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
   const toggleOpen = () => setOpen(!open);
-  const [edited, setEdited] = h(false);
-  const [sticky, setSticky] = h(false);
+  const [edited, setEdited] = hooks.useState(false);
+  const [sticky, setSticky] = hooks.useState(false);
 
   // set edited state depending on all entries
-  p(() => {
+  hooks.useEffect(() => {
     // TODO(@barmac): replace with CSS when `:has()` is supported in all major browsers, or rewrite as in https://github.com/camunda/camunda-modeler/issues/3815#issuecomment-1733038161
     const scheduled = requestAnimationFrame(() => {
       const hasOneEditedEntry = entries.find(entry => {
@@ -1123,43 +703,43 @@ function Group(props) {
   // set css class when group is sticky to top
   useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
   const propertiesPanelContext = {
-    ...q$1(LayoutContext),
+    ...hooks.useContext(LayoutContext),
     onShow
   };
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
     ref: groupRef,
-    children: [o("div", {
+    children: [jsxRuntime.jsxs("div", {
       class: classnames__default["default"]('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: toggleOpen,
-      children: [o("div", {
+      children: [jsxRuntime.jsx("div", {
         title: props.tooltip ? null : label,
         "data-title": label,
         class: "bio-properties-panel-group-header-title",
-        children: o(TooltipWrapper, {
+        children: jsxRuntime.jsx(TooltipWrapper, {
           value: props.tooltip,
           forId: 'group-' + id,
           element: element,
           parent: groupRef,
           children: label
         })
-      }), o("div", {
+      }), jsxRuntime.jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
-        children: [o(DataMarker, {
+        children: [jsxRuntime.jsx(DataMarker, {
           edited: edited,
           hasErrors: hasErrors
-        }), o("button", {
+        }), jsxRuntime.jsx("button", {
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
-          children: o(ArrowIcon, {
+          children: jsxRuntime.jsx(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
           })
         })]
       })]
-    }), o("div", {
+    }), jsxRuntime.jsx("div", {
       class: classnames__default["default"]('bio-properties-panel-group-entries', open ? 'open' : ''),
-      children: o(LayoutContext.Provider, {
+      children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
         children: entries.map(entry => {
           const {
@@ -1182,13 +762,13 @@ function DataMarker(props) {
     hasErrors
   } = props;
   if (hasErrors) {
-    return o("div", {
+    return jsxRuntime.jsx("div", {
       title: "Section contains an error",
       class: "bio-properties-panel-dot bio-properties-panel-dot--error"
     });
   }
   if (edited) {
-    return o("div", {
+    return jsxRuntime.jsx("div", {
       title: "Section contains data",
       class: "bio-properties-panel-dot"
     });
@@ -1209,13 +789,13 @@ function Placeholder(props) {
     text,
     icon: Icon
   } = props;
-  return o("div", {
+  return jsxRuntime.jsx("div", {
     class: "bio-properties-panel open",
-    children: o("section", {
+    children: jsxRuntime.jsxs("section", {
       class: "bio-properties-panel-placeholder",
-      children: [Icon && o(Icon, {
+      children: [Icon && jsxRuntime.jsx(Icon, {
         class: "bio-properties-panel-placeholder-icon"
-      }), o("p", {
+      }), jsxRuntime.jsx("p", {
         class: "bio-properties-panel-placeholder-text",
         children: text
       })]
@@ -1232,7 +812,7 @@ function Description(props) {
   const contextDescription = useDescriptionContext(forId, element);
   const description = value || contextDescription;
   if (description) {
-    return o("div", {
+    return jsxRuntime.jsx("div", {
       class: "bio-properties-panel-description",
       children: description
     });
@@ -1246,8 +826,8 @@ const noop$6 = () => {};
  * Set Focus inside when the editor is ready.
  */
 const useBufferedFocus$1 = function (editor, ref) {
-  const [buffer, setBuffer] = h(undefined);
-  ref.current = F$1(() => ({
+  const [buffer, setBuffer] = hooks.useState(undefined);
+  ref.current = hooks.useMemo(() => ({
     focus: offset => {
       if (editor) {
         editor.focus(offset);
@@ -1259,14 +839,14 @@ const useBufferedFocus$1 = function (editor, ref) {
       }
     }
   }), [editor]);
-  p(() => {
+  hooks.useEffect(() => {
     if (typeof buffer !== 'undefined' && editor) {
       editor.focus(buffer);
       setBuffer(false);
     }
   }, [editor, buffer]);
 };
-const CodeEditor$1 = k((props, ref) => {
+const CodeEditor$1 = compat.forwardRef((props, ref) => {
   const {
     onInput,
     disabled,
@@ -1280,15 +860,15 @@ const CodeEditor$1 = k((props, ref) => {
     hostLanguage = null,
     singleLine = false
   } = props;
-  const inputRef = _$1();
-  const [editor, setEditor] = h();
-  const [localValue, setLocalValue] = h(value || '');
+  const inputRef = hooks.useRef();
+  const [editor, setEditor] = hooks.useState();
+  const [localValue, setLocalValue] = hooks.useState(value || '');
   useBufferedFocus$1(editor, ref);
   const handleInput = useStaticCallback(newValue => {
     onInput(newValue);
     setLocalValue(newValue);
   });
-  p(() => {
+  hooks.useEffect(() => {
     let editor;
     editor = new feelers.FeelersEditor({
       container: inputRef.current,
@@ -1308,7 +888,7 @@ const CodeEditor$1 = k((props, ref) => {
       setEditor(null);
     };
   }, []);
-  p(() => {
+  hooks.useEffect(() => {
     if (!editor) {
       return;
     }
@@ -1321,21 +901,21 @@ const CodeEditor$1 = k((props, ref) => {
   const handleClick = () => {
     ref.current.focus();
   };
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-feelers-editor-container', popupOpen ? 'popupOpen' : null),
-    children: [o("div", {
+    children: [jsxRuntime.jsx("div", {
       class: "bio-properties-panel-feelers-editor__open-popup-placeholder",
       children: "Opened in editor"
-    }), o("div", {
+    }), jsxRuntime.jsx("div", {
       name: props.name,
       class: classnames__default["default"]('bio-properties-panel-feelers-editor bio-properties-panel-input', localValue ? 'edited' : null, disabled ? 'disabled' : null),
       ref: inputRef,
       onClick: handleClick
-    }), o("button", {
+    }), jsxRuntime.jsx("button", {
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen('feelers'),
-      children: o(ExternalLinkIcon, {})
+      children: jsxRuntime.jsx(ExternalLinkIcon, {})
     })]
   });
 });
@@ -1347,8 +927,8 @@ const noop$5 = () => {};
  * Set Focus inside when the editor is ready.
  */
 const useBufferedFocus = function (editor, ref) {
-  const [buffer, setBuffer] = h(undefined);
-  ref.current = F$1(() => ({
+  const [buffer, setBuffer] = hooks.useState(undefined);
+  ref.current = hooks.useMemo(() => ({
     focus: offset => {
       if (editor) {
         editor.focus(offset);
@@ -1360,14 +940,14 @@ const useBufferedFocus = function (editor, ref) {
       }
     }
   }), [editor]);
-  p(() => {
+  hooks.useEffect(() => {
     if (typeof buffer !== 'undefined' && editor) {
       editor.focus(buffer);
       setBuffer(false);
     }
   }, [editor, buffer]);
 };
-const CodeEditor = k((props, ref) => {
+const CodeEditor = compat.forwardRef((props, ref) => {
   const {
     enableGutters,
     value,
@@ -1380,15 +960,15 @@ const CodeEditor = k((props, ref) => {
     tooltipContainer,
     variables
   } = props;
-  const inputRef = _$1();
-  const [editor, setEditor] = h();
-  const [localValue, setLocalValue] = h(value || '');
+  const inputRef = hooks.useRef();
+  const [editor, setEditor] = hooks.useState();
+  const [localValue, setLocalValue] = hooks.useState(value || '');
   useBufferedFocus(editor, ref);
   const handleInput = useStaticCallback(newValue => {
     onInput(newValue);
     setLocalValue(newValue);
   });
-  p(() => {
+  hooks.useEffect(() => {
     let editor;
 
     /* Trigger FEEL toggle when
@@ -1423,7 +1003,7 @@ const CodeEditor = k((props, ref) => {
       setEditor(null);
     };
   }, []);
-  p(() => {
+  hooks.useEffect(() => {
     if (!editor) {
       return;
     }
@@ -1433,7 +1013,7 @@ const CodeEditor = k((props, ref) => {
     editor.setValue(value);
     setLocalValue(value);
   }, [value]);
-  p(() => {
+  hooks.useEffect(() => {
     if (!editor) {
       return;
     }
@@ -1442,21 +1022,21 @@ const CodeEditor = k((props, ref) => {
   const handleClick = () => {
     ref.current.focus();
   };
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null, popupOpen ? 'popupOpen' : null),
-    children: [o("div", {
+    children: [jsxRuntime.jsx("div", {
       class: "bio-properties-panel-feel-editor__open-popup-placeholder",
       children: "Opened in editor"
-    }), o("div", {
+    }), jsxRuntime.jsx("div", {
       name: props.name,
       class: classnames__default["default"]('bio-properties-panel-input', localValue ? 'edited' : null),
       ref: inputRef,
       onClick: handleClick
-    }), o("button", {
+    }), jsxRuntime.jsx("button", {
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen(),
-      children: o(ExternalLinkIcon, {})
+      children: jsxRuntime.jsx(ExternalLinkIcon, {})
     })]
   });
 });
@@ -1468,7 +1048,7 @@ function FeelIndicator(props) {
   if (!active) {
     return null;
   }
-  return o("span", {
+  return jsxRuntime.jsx("span", {
     class: "bio-properties-panel-feel-indicator",
     children: "="
   });
@@ -1498,12 +1078,12 @@ function FeelIcon(props) {
       e.stopPropagation();
     }
   };
-  return o("button", {
+  return jsxRuntime.jsx("button", {
     class: classnames__default["default"]('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
     onClick: handleClick,
     disabled: feel === 'required' || disabled,
     title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
-    children: o(FeelIcon$1, {})
+    children: jsxRuntime.jsx(FeelIcon$1, {})
   });
 }
 
@@ -1616,10 +1196,10 @@ function PopupComponent(props, globalRef) {
     closeOnEscape = true,
     title
   } = props;
-  const focusTrapRef = _$1(null);
-  const localRef = _$1(null);
+  const focusTrapRef = hooks.useRef(null);
+  const localRef = hooks.useRef(null);
   const popupRef = globalRef || localRef;
-  const containerNode = F$1(() => getContainerNode(container), [container]);
+  const containerNode = hooks.useMemo(() => getContainerNode(container), [container]);
   const handleKeydown = event => {
     // do not allow keyboard events to bubble
     event.stopPropagation();
@@ -1648,7 +1228,7 @@ function PopupComponent(props, globalRef) {
   if (height) {
     style.height = height + 'px';
   }
-  p(() => {
+  hooks.useEffect(() => {
     if (popupRef.current) {
       popupRef.current.addEventListener('focusin', handleFocus);
     }
@@ -1656,7 +1236,7 @@ function PopupComponent(props, globalRef) {
       popupRef.current.removeEventListener('focusin', handleFocus);
     };
   }, [popupRef]);
-  p(() => {
+  hooks.useEffect(() => {
     if (popupRef.current) {
       focusTrapRef.current = focusTrap__namespace.createFocusTrap(popupRef.current, {
         clickOutsideDeactivates: true,
@@ -1670,7 +1250,7 @@ function PopupComponent(props, globalRef) {
     }
     return () => focusTrapRef.current && focusTrapRef.current.deactivate();
   }, [popupRef]);
-  return z(o("div", {
+  return compat.createPortal(jsxRuntime.jsx("div", {
     "aria-label": title,
     tabIndex: -1,
     ref: popupRef,
@@ -1681,7 +1261,7 @@ function PopupComponent(props, globalRef) {
     children: props.children
   }), containerNode || document.body);
 }
-const Popup = k(PopupComponent);
+const Popup = compat.forwardRef(PopupComponent);
 Popup.Title = Title;
 Popup.Body = Body;
 Popup.Footer = Footer;
@@ -1697,12 +1277,12 @@ function Title(props) {
 
   // we can't use state as we need to
   // manipulate this inside dragging events
-  const context = _$1({
+  const context = hooks.useRef({
     startPosition: null,
     newPosition: null
   });
-  const dragPreviewRef = _$1();
-  const titleRef = _$1();
+  const dragPreviewRef = hooks.useRef();
+  const titleRef = hooks.useRef();
   const onMove = (event, delta) => {
     cancel(event);
     const {
@@ -1744,22 +1324,22 @@ function Title(props) {
     // notify interested parties
     emit('dragend');
   };
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-popup__header', draggable && 'draggable', className),
     ref: titleRef,
     draggable: draggable,
     onDragStart: onMoveStart,
     onDragEnd: onMoveEnd,
     ...rest,
-    children: [draggable && o(preact.Fragment, {
-      children: [o("div", {
+    children: [draggable && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx("div", {
         ref: dragPreviewRef,
         class: "bio-properties-panel-popup__drag-preview"
-      }), o("div", {
+      }), jsxRuntime.jsx("div", {
         class: "bio-properties-panel-popup__drag-handle",
-        children: o(DragIcon, {})
+        children: jsxRuntime.jsx(DragIcon, {})
       })]
-    }), o("div", {
+    }), jsxRuntime.jsx("div", {
       class: "bio-properties-panel-popup__title",
       children: title
     }), children]
@@ -1771,7 +1351,7 @@ function Body(props) {
     className,
     ...rest
   } = props;
-  return o("div", {
+  return jsxRuntime.jsx("div", {
     class: classnames__default["default"]('bio-properties-panel-popup__body', className),
     ...rest,
     children: children
@@ -1783,7 +1363,7 @@ function Footer(props) {
     className,
     ...rest
   } = props;
-  return o("div", {
+  return jsxRuntime.jsx("div", {
     class: classnames__default["default"]('bio-properties-panel-popup__footer', className),
     ...rest,
     children: props.children
@@ -1827,14 +1407,14 @@ function FEELPopupRoot(props) {
     popupContainer
   } = props;
   const prevElement = usePrevious(element);
-  const [popupConfig, setPopupConfig] = h({});
-  const [open, setOpen] = h(false);
-  const [source, setSource] = h(null);
-  const [sourceElement, setSourceElement] = h(null);
+  const [popupConfig, setPopupConfig] = hooks.useState({});
+  const [open, setOpen] = hooks.useState(false);
+  const [source, setSource] = hooks.useState(null);
+  const [sourceElement, setSourceElement] = hooks.useState(null);
   const emit = (type, context) => {
     eventBus.fire('feelPopup.' + type, context);
   };
-  const isOpen = T$1(() => {
+  const isOpen = hooks.useCallback(() => {
     return !!open;
   }, [open]);
   useUpdateEffect(() => {
@@ -1860,14 +1440,14 @@ function FEELPopupRoot(props) {
   };
 
   // close popup on element change, cf. https://github.com/bpmn-io/properties-panel/issues/270
-  p(() => {
+  hooks.useEffect(() => {
     if (element && prevElement && element !== prevElement) {
       handleClose();
     }
   }, [element]);
 
   // allow close and open via events
-  p(() => {
+  hooks.useEffect(() => {
     const handlePopupOpen = context => {
       const {
         entryId,
@@ -1888,9 +1468,9 @@ function FEELPopupRoot(props) {
       eventBus.off('feelPopup._isOpen', handleIsOpen);
     };
   }, [eventBus, isOpen]);
-  return o(FeelPopupContext.Provider, {
+  return jsxRuntime.jsxs(FeelPopupContext.Provider, {
     value: feelPopupContext,
-    children: [open && o(FeelPopupComponent, {
+    children: [open && jsxRuntime.jsx(FeelPopupComponent, {
       onClose: handleClose,
       container: popupContainer,
       sourceElement: sourceElement,
@@ -1916,9 +1496,9 @@ function FeelPopupComponent(props) {
     variables,
     emit
   } = props;
-  const editorRef = _$1();
-  const popupRef = _$1();
-  const isAutoCompletionOpen = _$1(false);
+  const editorRef = hooks.useRef();
+  const popupRef = hooks.useRef();
+  const isAutoCompletionOpen = hooks.useRef(false);
   const handleSetReturnFocus = () => {
     sourceElement && sourceElement.focus();
   };
@@ -1940,7 +1520,7 @@ function FeelPopupComponent(props) {
       }
     }
   };
-  p(() => {
+  hooks.useEffect(() => {
     emit('opened', {
       domNode: popupRef.current
     });
@@ -1948,7 +1528,7 @@ function FeelPopupComponent(props) {
       domNode: popupRef.current
     });
   }, []);
-  return o(Popup, {
+  return jsxRuntime.jsxs(Popup, {
     container: container,
     className: "bio-properties-panel-feel-popup",
     emit: emit,
@@ -1965,16 +1545,16 @@ function FeelPopupComponent(props) {
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
     ref: popupRef,
-    children: [o(Popup.Title, {
+    children: [jsxRuntime.jsx(Popup.Title, {
       title: title,
       emit: emit,
       draggable: true
-    }), o(Popup.Body, {
-      children: o("div", {
+    }), jsxRuntime.jsx(Popup.Body, {
+      children: jsxRuntime.jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
         onKeyDown: onKeyDown,
         class: "bio-properties-panel-feel-popup__body",
-        children: [type === 'feel' && o(CodeEditor, {
+        children: [type === 'feel' && jsxRuntime.jsx(CodeEditor, {
           enableGutters: true,
           id: prefixId$8(id),
           name: id,
@@ -1983,7 +1563,7 @@ function FeelPopupComponent(props) {
           variables: variables,
           ref: editorRef,
           tooltipContainer: tooltipContainer
-        }), type === 'feelers' && o(CodeEditor$1, {
+        }), type === 'feelers' && jsxRuntime.jsx(CodeEditor$1, {
           id: prefixId$8(id),
           contentAttributes: {
             'aria-label': title
@@ -1998,8 +1578,8 @@ function FeelPopupComponent(props) {
           tooltipContainer: tooltipContainer
         })]
       })
-    }), o(Popup.Footer, {
-      children: o("button", {
+    }), jsxRuntime.jsx(Popup.Footer, {
+      children: jsxRuntime.jsx("button", {
         onClick: onClose,
         title: "Close pop-up editor",
         class: "bio-properties-panel-feel-popup__close-btn",
@@ -2025,8 +1605,8 @@ function autoCompletionOpen(element) {
  * @param {Array} deps
  */
 function useUpdateEffect(effect, deps) {
-  const isMounted = _$1(false);
-  p(() => {
+  const isMounted = hooks.useRef(false);
+  hooks.useEffect(() => {
     if (isMounted.current) {
       return effect();
     } else {
@@ -2048,7 +1628,7 @@ function ToggleSwitch(props) {
     inputRef,
     tooltip
   } = props;
-  const [localValue, setLocalValue] = h(value);
+  const [localValue, setLocalValue] = hooks.useState(value);
   const handleInputCallback = async () => {
     onInput(!value);
   };
@@ -2056,30 +1636,30 @@ function ToggleSwitch(props) {
     handleInputCallback();
     setLocalValue(e.target.value);
   };
-  p(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
     setLocalValue(value);
   }, [value]);
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-toggle-switch', {
       inline
     }),
-    children: [o("label", {
+    children: [jsxRuntime.jsx("label", {
       class: "bio-properties-panel-label",
       for: prefixId$7(id),
-      children: o(TooltipWrapper, {
+      children: jsxRuntime.jsx(TooltipWrapper, {
         value: tooltip,
         forId: id,
         element: props.element,
         children: label
       })
-    }), o("div", {
+    }), jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-field-wrapper",
-      children: [o("label", {
+      children: [jsxRuntime.jsxs("label", {
         class: "bio-properties-panel-toggle-switch__switcher",
-        children: [o("input", {
+        children: [jsxRuntime.jsx("input", {
           ref: inputRef,
           id: prefixId$7(id),
           class: "bio-properties-panel-input",
@@ -2089,10 +1669,10 @@ function ToggleSwitch(props) {
           name: id,
           onInput: handleInput,
           checked: !!localValue
-        }), o("span", {
+        }), jsxRuntime.jsx("span", {
           class: "bio-properties-panel-toggle-switch__slider"
         })]
-      }), switcherLabel && o("p", {
+      }), switcherLabel && jsxRuntime.jsx("p", {
         class: "bio-properties-panel-toggle-switch__label",
         children: switcherLabel
       })]
@@ -2129,10 +1709,10 @@ function ToggleSwitchEntry(props) {
     tooltip
   } = props;
   const value = getValue(element);
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
     "data-entry-id": id,
-    children: [o(ToggleSwitch, {
+    children: [jsxRuntime.jsx(ToggleSwitch, {
       id: id,
       label: label,
       value: value,
@@ -2143,7 +1723,7 @@ function ToggleSwitchEntry(props) {
       inline: inline,
       tooltip: tooltip,
       element: element
-    }), o(Description, {
+    }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
       value: description
@@ -2176,8 +1756,8 @@ function NumberField(props) {
     onFocus,
     onBlur
   } = props;
-  const [localValue, setLocalValue] = h(value);
-  const handleInputCallback = F$1(() => {
+  const [localValue, setLocalValue] = hooks.useState(value);
+  const handleInputCallback = hooks.useMemo(() => {
     return debounce(event => {
       const {
         validity,
@@ -2192,19 +1772,19 @@ function NumberField(props) {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-  p(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
     setLocalValue(value);
   }, [value]);
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-numberfield",
-    children: [displayLabel && o("label", {
+    children: [displayLabel && jsxRuntime.jsx("label", {
       for: prefixId$6(id),
       class: "bio-properties-panel-label",
       children: label
-    }), o("input", {
+    }), jsxRuntime.jsx("input", {
       id: prefixId$6(id),
       ref: inputRef,
       type: "number",
@@ -2259,9 +1839,9 @@ function NumberFieldEntry(props) {
     validate
   } = props;
   const globalError = useError(id);
-  const [localError, setLocalError] = h(null);
+  const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  p(() => {
+  hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
@@ -2276,10 +1856,10 @@ function NumberFieldEntry(props) {
     setLocalError(newValidationError);
   };
   const error = globalError || localError;
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [o(NumberField, {
+    children: [jsxRuntime.jsx(NumberField, {
       debounce: debounce,
       disabled: disabled,
       id: id,
@@ -2291,10 +1871,10 @@ function NumberFieldEntry(props) {
       min: min,
       step: step,
       value: value
-    }, element), error && o("div", {
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
-    }), o(Description, {
+    }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
       value: description
@@ -2330,16 +1910,16 @@ function FeelTextfield(props) {
     OptionalComponent = OptionalFeelInput,
     tooltip
   } = props;
-  const [localValue, _setLocalValue] = h(value);
+  const [localValue, _setLocalValue] = hooks.useState(value);
   const editorRef = useShowEntryEvent(id);
-  const containerRef = _$1();
+  const containerRef = hooks.useRef();
   const feelActive = minDash.isString(localValue) && localValue.startsWith('=') || feel === 'required';
   const feelOnlyValue = minDash.isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
-  const [focus, _setFocus] = h(undefined);
+  const [focus, _setFocus] = hooks.useState(undefined);
   const {
     open: openPopup,
     source: popupSource
-  } = q$1(FeelPopupContext);
+  } = hooks.useContext(FeelPopupContext);
   const popuOpen = popupSource === id;
   const setFocus = (offset = 0) => {
     const hasFocus = containerRef.current.contains(document.activeElement);
@@ -2348,7 +1928,7 @@ function FeelTextfield(props) {
     const position = hasFocus ? document.activeElement.selectionStart : Infinity;
     _setFocus(position + offset);
   };
-  const handleInputCallback = F$1(() => {
+  const handleInputCallback = hooks.useMemo(() => {
     return debounce(newValue => {
       onInput(newValue);
     });
@@ -2408,13 +1988,13 @@ function FeelTextfield(props) {
     };
     openPopup(id, popupOptions, editorRef.current);
   };
-  p(() => {
+  hooks.useEffect(() => {
     if (typeof focus !== 'undefined') {
       editorRef.current.focus(focus);
       _setFocus(undefined);
     }
   }, [focus]);
-  p(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -2428,7 +2008,7 @@ function FeelTextfield(props) {
   }, [value]);
 
   // copy-paste integration
-  p(() => {
+  hooks.useEffect(() => {
     const copyHandler = event => {
       if (!feelActive) {
         return;
@@ -2456,33 +2036,33 @@ function FeelTextfield(props) {
       containerRef.current.removeEventListener('paste', pasteHandler);
     };
   }, [containerRef, feelActive, handleFeelToggle, setFocus]);
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-feel-entry', {
       'feel-active': feelActive
     }),
-    children: [o("label", {
+    children: [jsxRuntime.jsxs("label", {
       for: prefixId$5(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
-      children: [o(TooltipWrapper, {
+      children: [jsxRuntime.jsx(TooltipWrapper, {
         value: tooltip,
         forId: id,
         element: props.element,
         children: label
-      }), o(FeelIcon, {
+      }), jsxRuntime.jsx(FeelIcon, {
         label: label,
         feel: feel,
         onClick: handleFeelToggle,
         active: feelActive
       })]
-    }), o("div", {
+    }), jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-feel-container",
       ref: containerRef,
-      children: [o(FeelIndicator, {
+      children: [jsxRuntime.jsx(FeelIndicator, {
         active: feelActive,
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
-      }), feelActive ? o(CodeEditor, {
+      }), feelActive ? jsxRuntime.jsx(CodeEditor, {
         id: prefixId$5(id),
         name: id,
         onInput: handleLocalInput,
@@ -2498,7 +2078,7 @@ function FeelTextfield(props) {
         variables: variables,
         ref: editorRef,
         tooltipContainer: tooltipContainer
-      }) : o(OptionalComponent, {
+      }) : jsxRuntime.jsx(OptionalComponent, {
         ...props,
         popupOpen: popuOpen,
         onInput: handleLocalInput,
@@ -2514,7 +2094,7 @@ function FeelTextfield(props) {
     })]
   });
 }
-const OptionalFeelInput = k((props, ref) => {
+const OptionalFeelInput = compat.forwardRef((props, ref) => {
   const {
     id,
     disabled,
@@ -2523,7 +2103,7 @@ const OptionalFeelInput = k((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = _$1();
+  const inputRef = hooks.useRef();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -2542,7 +2122,7 @@ const OptionalFeelInput = k((props, ref) => {
       }
     }
   };
-  return o("input", {
+  return jsxRuntime.jsx("input", {
     id: prefixId$5(id),
     type: "text",
     ref: inputRef,
@@ -2557,7 +2137,7 @@ const OptionalFeelInput = k((props, ref) => {
     value: value || ''
   });
 });
-const OptionalFeelNumberField = k((props, ref) => {
+const OptionalFeelNumberField = compat.forwardRef((props, ref) => {
   const {
     id,
     debounce,
@@ -2570,7 +2150,7 @@ const OptionalFeelNumberField = k((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = _$1();
+  const inputRef = hooks.useRef();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -2589,7 +2169,7 @@ const OptionalFeelNumberField = k((props, ref) => {
       }
     }
   };
-  return o(NumberField, {
+  return jsxRuntime.jsx(NumberField, {
     id: id,
     debounce: debounce,
     disabled: disabled,
@@ -2604,7 +2184,7 @@ const OptionalFeelNumberField = k((props, ref) => {
     onBlur: onBlur
   });
 });
-const OptionalFeelTextArea = k((props, ref) => {
+const OptionalFeelTextArea = compat.forwardRef((props, ref) => {
   const {
     id,
     disabled,
@@ -2613,7 +2193,7 @@ const OptionalFeelTextArea = k((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = _$1();
+  const inputRef = hooks.useRef();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -2627,7 +2207,7 @@ const OptionalFeelTextArea = k((props, ref) => {
       input.setSelectionRange(0, 0);
     }
   };
-  return o("textarea", {
+  return jsxRuntime.jsx("textarea", {
     id: prefixId$5(id),
     type: "text",
     ref: inputRef,
@@ -2643,7 +2223,7 @@ const OptionalFeelTextArea = k((props, ref) => {
     "data-gramm": "false"
   });
 });
-const OptionalFeelToggleSwitch = k((props, ref) => {
+const OptionalFeelToggleSwitch = compat.forwardRef((props, ref) => {
   const {
     id,
     onInput,
@@ -2652,7 +2232,7 @@ const OptionalFeelToggleSwitch = k((props, ref) => {
     onBlur,
     switcherLabel
   } = props;
-  const inputRef = _$1();
+  const inputRef = hooks.useRef();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -2665,7 +2245,7 @@ const OptionalFeelToggleSwitch = k((props, ref) => {
       input.focus();
     }
   };
-  return o(ToggleSwitch, {
+  return jsxRuntime.jsx(ToggleSwitch, {
     id: id,
     value: value,
     inputRef: inputRef,
@@ -2675,7 +2255,7 @@ const OptionalFeelToggleSwitch = k((props, ref) => {
     switcherLabel: switcherLabel
   });
 });
-const OptionalFeelCheckbox = k((props, ref) => {
+const OptionalFeelCheckbox = compat.forwardRef((props, ref) => {
   const {
     id,
     disabled,
@@ -2684,7 +2264,7 @@ const OptionalFeelCheckbox = k((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = _$1();
+  const inputRef = hooks.useRef();
   const handleChange = ({
     target
   }) => {
@@ -2702,7 +2282,7 @@ const OptionalFeelCheckbox = k((props, ref) => {
       input.focus();
     }
   };
-  return o("input", {
+  return jsxRuntime.jsx("input", {
     ref: inputRef,
     id: prefixId$5(id),
     name: id,
@@ -2758,10 +2338,10 @@ function FeelEntry(props) {
     onBlur,
     tooltip
   } = props;
-  const [validationError, setValidationError] = h(null);
-  const [localError, setLocalError] = h(null);
+  const [validationError, setValidationError] = hooks.useState(null);
+  const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  p(() => {
+  hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
@@ -2779,12 +2359,12 @@ function FeelEntry(props) {
     }
     setValidationError(newValidationError);
   });
-  const onError = T$1(err => {
+  const onError = hooks.useCallback(err => {
     setLocalError(err);
   }, []);
   const temporaryError = useError(id);
   const error = temporaryError || localError || validationError;
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"](props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [preact.createElement(FeelTextfield, {
@@ -2808,10 +2388,10 @@ function FeelEntry(props) {
       tooltipContainer: tooltipContainer,
       OptionalComponent: props.OptionalComponent,
       tooltip: tooltip
-    }), error && o("div", {
+    }), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
-    }), o(Description, {
+    }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
       value: description
@@ -2842,7 +2422,7 @@ function FeelEntry(props) {
  * @param {Function} props.onBlur
  */
 function FeelNumberEntry(props) {
-  return o(FeelEntry, {
+  return jsxRuntime.jsx(FeelEntry, {
     class: "bio-properties-panel-feel-number",
     OptionalComponent: OptionalFeelNumberField,
     ...props
@@ -2869,7 +2449,7 @@ function FeelNumberEntry(props) {
  * @param {Function} props.onBlur
  */
 function FeelTextAreaEntry(props) {
-  return o(FeelEntry, {
+  return jsxRuntime.jsx(FeelEntry, {
     class: "bio-properties-panel-feel-textarea",
     OptionalComponent: OptionalFeelTextArea,
     ...props
@@ -2896,7 +2476,7 @@ function FeelTextAreaEntry(props) {
  * @param {Function} props.onBlur
  */
 function FeelToggleSwitchEntry(props) {
-  return o(FeelEntry, {
+  return jsxRuntime.jsx(FeelEntry, {
     class: "bio-properties-panel-feel-toggle-switch",
     OptionalComponent: OptionalFeelToggleSwitch,
     ...props
@@ -2923,7 +2503,7 @@ function FeelToggleSwitchEntry(props) {
  * @param {Function} props.onBlur
  */
 function FeelCheckboxEntry(props) {
-  return o(FeelEntry, {
+  return jsxRuntime.jsx(FeelEntry, {
     class: "bio-properties-panel-feel-checkbox",
     OptionalComponent: OptionalFeelCheckbox,
     ...props
@@ -2952,7 +2532,7 @@ function FeelCheckboxEntry(props) {
  * @param {Function} props.onBlur
  */
 function FeelTemplatingEntry(props) {
-  return o(FeelEntry, {
+  return jsxRuntime.jsx(FeelEntry, {
     class: "bio-properties-panel-feel-templating",
     OptionalComponent: CodeEditor$1,
     ...props
@@ -3094,14 +2674,14 @@ function PropertiesPanel(props) {
   } = props;
 
   // set-up layout context
-  const [layout, setLayout] = h(createLayout(layoutConfig));
+  const [layout, setLayout] = hooks.useState(createLayout(layoutConfig));
 
   // react to external changes in the layout config
   useUpdateLayoutEffect(() => {
     const newLayout = createLayout(layoutConfig);
     setLayout(newLayout);
   }, [layoutConfig]);
-  p(() => {
+  hooks.useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
     }
@@ -3122,8 +2702,8 @@ function PropertiesPanel(props) {
   };
 
   // set-up description context
-  const description = F$1(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
-  p(() => {
+  const description = hooks.useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
+  hooks.useEffect(() => {
     if (typeof descriptionLoaded === 'function') {
       descriptionLoaded(description);
     }
@@ -3137,8 +2717,8 @@ function PropertiesPanel(props) {
   };
 
   // set-up tooltip context
-  const tooltip = F$1(() => createTooltipContext(tooltipConfig), [tooltipConfig]);
-  p(() => {
+  const tooltip = hooks.useMemo(() => createTooltipContext(tooltipConfig), [tooltipConfig]);
+  hooks.useEffect(() => {
     if (typeof tooltipLoaded === 'function') {
       tooltipLoaded(tooltip);
     }
@@ -3150,7 +2730,7 @@ function PropertiesPanel(props) {
     tooltip,
     getTooltipForId
   };
-  const [errors, setErrors] = h({});
+  const [errors, setErrors] = hooks.useState({});
   const onSetErrors = ({
     errors
   }) => setErrors(errors);
@@ -3167,39 +2747,39 @@ function PropertiesPanel(props) {
 
   // empty state
   if (placeholderProvider && !element) {
-    return o(Placeholder, {
+    return jsxRuntime.jsx(Placeholder, {
       ...placeholderProvider.getEmpty()
     });
   }
 
   // multiple state
   if (placeholderProvider && minDash.isArray(element)) {
-    return o(Placeholder, {
+    return jsxRuntime.jsx(Placeholder, {
       ...placeholderProvider.getMultiple()
     });
   }
-  return o(LayoutContext.Provider, {
+  return jsxRuntime.jsx(LayoutContext.Provider, {
     value: propertiesPanelContext,
-    children: o(ErrorsContext.Provider, {
+    children: jsxRuntime.jsx(ErrorsContext.Provider, {
       value: errorsContext,
-      children: o(DescriptionContext.Provider, {
+      children: jsxRuntime.jsx(DescriptionContext.Provider, {
         value: descriptionContext,
-        children: o(TooltipContext.Provider, {
+        children: jsxRuntime.jsx(TooltipContext.Provider, {
           value: tooltipContext,
-          children: o(LayoutContext.Provider, {
+          children: jsxRuntime.jsx(LayoutContext.Provider, {
             value: layoutContext,
-            children: o(EventContext.Provider, {
+            children: jsxRuntime.jsx(EventContext.Provider, {
               value: eventContext,
-              children: o(FEELPopupRoot, {
+              children: jsxRuntime.jsx(FEELPopupRoot, {
                 element: element,
                 eventBus: eventBus,
                 popupContainer: feelPopupContainer,
-                children: o("div", {
+                children: jsxRuntime.jsxs("div", {
                   class: "bio-properties-panel",
-                  children: [o(Header, {
+                  children: [jsxRuntime.jsx(Header, {
                     element: element,
                     headerProvider: headerProvider
-                  }), o("div", {
+                  }), jsxRuntime.jsx("div", {
                     class: "bio-properties-panel-scroll-container",
                     children: groups.map(group => {
                       const {
@@ -3253,8 +2833,8 @@ function createTooltipContext(overrides = {}) {
  * @param {Array} deps
  */
 function useUpdateLayoutEffect(effect, deps) {
-  const isMounted = _$1(false);
-  y(() => {
+  const isMounted = hooks.useRef(false);
+  hooks.useLayoutEffect(() => {
     if (isMounted.current) {
       return effect();
     } else {
@@ -3269,9 +2849,9 @@ function DropdownButton(props) {
     children,
     menuItems = []
   } = props;
-  const dropdownRef = _$1(null);
-  const menuRef = _$1(null);
-  const [open, setOpen] = h(false);
+  const dropdownRef = hooks.useRef(null);
+  const menuRef = hooks.useRef(null);
+  const [open, setOpen] = hooks.useState(false);
   const close = () => setOpen(false);
   function onDropdownToggle(event) {
     if (menuRef.current && menuRef.current.contains(event.target)) {
@@ -3286,16 +2866,16 @@ function DropdownButton(props) {
     action();
   }
   useGlobalClick([dropdownRef.current], () => close());
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-dropdown-button', {
       open
     }, className),
     onClick: onDropdownToggle,
     ref: dropdownRef,
-    children: [children, o("div", {
+    children: [children, jsxRuntime.jsx("div", {
       class: "bio-properties-panel-dropdown-button__menu",
       ref: menuRef,
-      children: menuItems.map((item, index) => o(MenuItem, {
+      children: menuItems.map((item, index) => jsxRuntime.jsx(MenuItem, {
         onClick: onActionClick,
         item: item
       }, index))
@@ -3307,18 +2887,18 @@ function MenuItem({
   onClick
 }) {
   if (item.separator) {
-    return o("div", {
+    return jsxRuntime.jsx("div", {
       class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--separator"
     });
   }
   if (item.action) {
-    return o("button", {
+    return jsxRuntime.jsx("button", {
       class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable",
       onClick: event => onClick(event, item.action),
       children: item.entry
     });
   }
-  return o("div", {
+  return jsxRuntime.jsx("div", {
     class: "bio-properties-panel-dropdown-button__menu-item",
     children: item.entry
   });
@@ -3330,7 +2910,7 @@ function MenuItem({
  * @param {Function} callback
  */
 function useGlobalClick(ignoredElements, callback) {
-  p(() => {
+  hooks.useEffect(() => {
     /**
      * @param {MouseEvent} event
      */
@@ -3356,7 +2936,7 @@ function HeaderButton(props) {
     onClick = () => {},
     ...otherProps
   } = props;
-  return o("button", {
+  return jsxRuntime.jsx("button", {
     ...otherProps,
     onClick: onClick,
     class: classnames__default["default"]('bio-properties-panel-group-header-button', classname),
@@ -3373,14 +2953,14 @@ function CollapsibleEntry(props) {
     open: shouldOpen,
     remove
   } = props;
-  const [open, setOpen] = h(shouldOpen);
+  const [open, setOpen] = hooks.useState(shouldOpen);
   const toggleOpen = () => setOpen(!open);
   const {
     onShow
-  } = q$1(LayoutContext);
+  } = hooks.useContext(LayoutContext);
   const propertiesPanelContext = {
-    ...q$1(LayoutContext),
-    onShow: T$1(() => {
+    ...hooks.useContext(LayoutContext),
+    onShow: hooks.useCallback(() => {
       setOpen(true);
       if (minDash.isFunction(onShow)) {
         onShow();
@@ -3390,31 +2970,31 @@ function CollapsibleEntry(props) {
 
   // todo(pinussilvestrus): translate once we have a translate mechanism for the core
   const placeholderLabel = '<empty>';
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     "data-entry-id": id,
     class: classnames__default["default"]('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
-    children: [o("div", {
+    children: [jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-collapsible-entry-header",
       onClick: toggleOpen,
-      children: [o("div", {
+      children: [jsxRuntime.jsx("div", {
         title: label || placeholderLabel,
         class: classnames__default["default"]('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
-      }), o("button", {
+      }), jsxRuntime.jsx("button", {
         title: "Toggle list item",
         class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
-        children: o(ArrowIcon, {
+        children: jsxRuntime.jsx(ArrowIcon, {
           class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
         })
-      }), remove ? o("button", {
+      }), remove ? jsxRuntime.jsx("button", {
         title: "Delete item",
         class: "bio-properties-panel-remove-entry",
         onClick: remove,
-        children: o(DeleteIcon, {})
+        children: jsxRuntime.jsx(DeleteIcon, {})
       }) : null]
-    }), o("div", {
+    }), jsxRuntime.jsx("div", {
       class: classnames__default["default"]('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
-      children: o(LayoutContext.Provider, {
+      children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
         children: entries.map(entry => {
           const {
@@ -3439,7 +3019,7 @@ function ListItem(props) {
   } = props;
 
   // focus specified entry on auto open
-  p(() => {
+  hooks.useEffect(() => {
     if (autoOpen && autoFocusEntry) {
       const entry = minDom.query(`[data-entry-id="${autoFocusEntry}"]`);
       const focusableInput = minDom.query('.bio-properties-panel-input', entry);
@@ -3452,9 +3032,9 @@ function ListItem(props) {
       }
     }
   }, [autoOpen, autoFocusEntry]);
-  return o("div", {
+  return jsxRuntime.jsx("div", {
     class: "bio-properties-panel-list-item",
-    children: o(CollapsibleEntry, {
+    children: jsxRuntime.jsx(CollapsibleEntry, {
       ...props,
       open: autoOpen
     })
@@ -3476,15 +3056,15 @@ function ListGroup(props) {
     shouldOpen = true,
     shouldSort = true
   } = props;
-  const groupRef = _$1(null);
+  const groupRef = hooks.useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
-  const [sticky, setSticky] = h(false);
-  const onShow = T$1(() => setOpen(true), [setOpen]);
-  const [ordering, setOrdering] = h([]);
-  const [newItemAdded, setNewItemAdded] = h(false);
+  const [sticky, setSticky] = hooks.useState(false);
+  const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
+  const [ordering, setOrdering] = hooks.useState([]);
+  const [newItemAdded, setNewItemAdded] = hooks.useState(false);
 
   // Flag to mark that add button was clicked in the last render cycle
-  const [addTriggered, setAddTriggered] = h(false);
+  const [addTriggered, setAddTriggered] = hooks.useState(false);
   const prevItems = usePrevious(items);
   const prevElement = usePrevious(element);
   const elementChanged = element !== prevElement;
@@ -3498,14 +3078,14 @@ function ListGroup(props) {
   // keep ordering in sync to items - and open changes
 
   // (0) set initial ordering from given items
-  p(() => {
+  hooks.useEffect(() => {
     if (!prevItems || !shouldSort) {
       setOrdering(createOrdering(items));
     }
   }, [items, element]);
 
   // (1) items were added
-  p(() => {
+  hooks.useEffect(() => {
     // reset addTriggered flag
     setAddTriggered(false);
     if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
@@ -3546,14 +3126,14 @@ function ListGroup(props) {
   }, [items, open, shouldHandleEffects, addTriggered]);
 
   // (2) sort items on open if shouldSort is set
-  p(() => {
+  hooks.useEffect(() => {
     if (shouldSort && open && !newItemAdded) {
       setOrdering(createOrdering(sortItems(items)));
     }
   }, [open, shouldSort]);
 
   // (3) items were deleted
-  p(() => {
+  hooks.useEffect(() => {
     if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
       let keep = [];
       ordering.forEach(o => {
@@ -3570,7 +3150,7 @@ function ListGroup(props) {
   const toggleOpen = () => setOpen(!open);
   const hasItems = !!items.length;
   const propertiesPanelContext = {
-    ...q$1(LayoutContext),
+    ...hooks.useContext(LayoutContext),
     onShow
   };
   const handleAddClick = e => {
@@ -3589,49 +3169,49 @@ function ListGroup(props) {
     // also check if the error is nested, e.g. for name-value entries
     return item.entries.some(entry => allErrors[entry.id]);
   });
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
     ref: groupRef,
-    children: [o("div", {
+    children: [jsxRuntime.jsxs("div", {
       class: classnames__default["default"]('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: hasItems ? toggleOpen : noop$1,
-      children: [o("div", {
+      children: [jsxRuntime.jsx("div", {
         title: props.tooltip ? null : label,
         "data-title": label,
         class: "bio-properties-panel-group-header-title",
-        children: o(TooltipWrapper, {
+        children: jsxRuntime.jsx(TooltipWrapper, {
           value: props.tooltip,
           forId: 'group-' + id,
           element: element,
           parent: groupRef,
           children: label
         })
-      }), o("div", {
+      }), jsxRuntime.jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
-        children: [add ? o("button", {
+        children: [add ? jsxRuntime.jsxs("button", {
           title: "Create new list item",
           class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
           onClick: handleAddClick,
-          children: [o(CreateIcon, {}), !hasItems ? o("span", {
+          children: [jsxRuntime.jsx(CreateIcon, {}), !hasItems ? jsxRuntime.jsx("span", {
             class: "bio-properties-panel-add-entry-label",
             children: "Create"
           }) : null]
-        }) : null, hasItems ? o("div", {
+        }) : null, hasItems ? jsxRuntime.jsx("div", {
           title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
           class: classnames__default["default"]('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
           children: items.length
-        }) : null, hasItems ? o("button", {
+        }) : null, hasItems ? jsxRuntime.jsx("button", {
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
-          children: o(ArrowIcon, {
+          children: jsxRuntime.jsx(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
           })
         }) : null]
       })]
-    }), o("div", {
+    }), jsxRuntime.jsx("div", {
       class: classnames__default["default"]('bio-properties-panel-list', open && hasItems ? 'open' : ''),
-      children: o(LayoutContext.Provider, {
+      children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
         children: ordering.map((o, index) => {
           const item = getItem(items, o);
@@ -3684,7 +3264,7 @@ function Checkbox(props) {
     onBlur,
     tooltip
   } = props;
-  const [localValue, setLocalValue] = h(value);
+  const [localValue, setLocalValue] = hooks.useState(value);
   const handleChangeCallback = ({
     target
   }) => {
@@ -3694,16 +3274,16 @@ function Checkbox(props) {
     handleChangeCallback(e);
     setLocalValue(e.target.value);
   };
-  p(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
     setLocalValue(value);
   }, [value]);
   const ref = useShowEntryEvent(id);
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-checkbox",
-    children: [o("input", {
+    children: [jsxRuntime.jsx("input", {
       ref: ref,
       id: prefixId$4(id),
       name: id,
@@ -3714,10 +3294,10 @@ function Checkbox(props) {
       onChange: handleChange,
       checked: localValue,
       disabled: disabled
-    }), o("label", {
+    }), jsxRuntime.jsx("label", {
       for: prefixId$4(id),
       class: "bio-properties-panel-label",
-      children: o(TooltipWrapper, {
+      children: jsxRuntime.jsx(TooltipWrapper, {
         value: tooltip,
         forId: id,
         element: props.element,
@@ -3755,10 +3335,10 @@ function CheckboxEntry(props) {
   } = props;
   const value = getValue(element);
   const error = useError(id);
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
     "data-entry-id": id,
-    children: [o(Checkbox, {
+    children: [jsxRuntime.jsx(Checkbox, {
       disabled: disabled,
       id: id,
       label: label,
@@ -3768,10 +3348,10 @@ function CheckboxEntry(props) {
       value: value,
       tooltip: tooltip,
       element: element
-    }, element), error && o("div", {
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
-    }), o(Description, {
+    }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
       value: description
@@ -3818,10 +3398,10 @@ function TemplatingEntry(props) {
     validate,
     show = noop
   } = props;
-  const [validationError, setValidationError] = h(null);
-  const [localError, setLocalError] = h(null);
+  const [validationError, setValidationError] = hooks.useState(null);
+  const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  p(() => {
+  hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
@@ -3839,15 +3419,15 @@ function TemplatingEntry(props) {
     }
     setValidationError(newValidationError);
   });
-  const onError = T$1(err => {
+  const onError = hooks.useCallback(err => {
     setLocalError(err);
   }, []);
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [o(Templating, {
+    children: [jsxRuntime.jsx(Templating, {
       debounce: debounce,
       disabled: disabled,
       id: id,
@@ -3857,10 +3437,10 @@ function TemplatingEntry(props) {
       show: show,
       value: value,
       tooltipContainer: tooltipContainer
-    }, element), error && o("div", {
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
-    }), o(Description, {
+    }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
       value: description
@@ -3878,10 +3458,10 @@ function Templating(props) {
     disabled = false,
     tooltipContainer
   } = props;
-  const [localValue, setLocalValue] = h(value);
+  const [localValue, setLocalValue] = hooks.useState(value);
   const editorRef = useShowEntryEvent(id);
-  const containerRef = _$1();
-  const [focus, _setFocus] = h(undefined);
+  const containerRef = hooks.useRef();
+  const [focus, _setFocus] = hooks.useState(undefined);
   const setFocus = (offset = 0) => {
     const hasFocus = containerRef.current.contains(document.activeElement);
 
@@ -3889,7 +3469,7 @@ function Templating(props) {
     const position = hasFocus ? document.activeElement.selectionStart : Infinity;
     _setFocus(position + offset);
   };
-  const handleInputCallback = F$1(() => {
+  const handleInputCallback = hooks.useMemo(() => {
     return debounce(newValue => onInput(newValue.length ? newValue : undefined));
   }, [onInput, debounce]);
   const handleInput = newValue => {
@@ -3906,29 +3486,29 @@ function Templating(props) {
     const message = `${error.source}: ${error.message}`;
     onError(message);
   });
-  p(() => {
+  hooks.useEffect(() => {
     if (typeof focus !== 'undefined') {
       editorRef.current.focus(focus);
       _setFocus(undefined);
     }
   }, [focus]);
-  p(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
     setLocalValue(value ? value : '');
   }, [value]);
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-feelers",
-    children: [o("label", {
+    children: [jsxRuntime.jsx("label", {
       id: prefixIdLabel(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
       children: label
-    }), o("div", {
+    }), jsxRuntime.jsx("div", {
       class: "bio-properties-panel-feelers-input",
       ref: containerRef,
-      children: o(CodeEditor$1, {
+      children: jsxRuntime.jsx(CodeEditor$1, {
         name: id,
         onInput: handleInput,
         contentAttributes: {
@@ -3967,7 +3547,7 @@ function List(props) {
     compareFn,
     ...restProps
   } = props;
-  const [open, setOpen] = h(!!shouldOpen);
+  const [open, setOpen] = hooks.useState(!!shouldOpen);
   const hasItems = !!items.length;
   const toggleOpen = () => hasItems && setOpen(!open);
   const opening = !usePrevious(open) && open;
@@ -3975,7 +3555,7 @@ function List(props) {
   const shouldReset = opening || elementChanged;
   const sortedItems = useSortedItems(items, compareFn, shouldReset);
   const newItems = useNewItems(items, elementChanged);
-  p(() => {
+  hooks.useEffect(() => {
     if (open && !hasItems) {
       setOpen(false);
     }
@@ -3991,39 +3571,39 @@ function List(props) {
       setOpen(true);
     }
   }
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     "data-entry-id": id,
     class: classnames__default["default"]('bio-properties-panel-entry', 'bio-properties-panel-list-entry', hasItems ? '' : 'empty', open ? 'open' : ''),
-    children: [o("div", {
+    children: [jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-list-entry-header",
       onClick: toggleOpen,
-      children: [o("div", {
+      children: [jsxRuntime.jsx("div", {
         title: label,
         class: classnames__default["default"]('bio-properties-panel-list-entry-header-title', open && 'open'),
         children: label
-      }), o("div", {
+      }), jsxRuntime.jsxs("div", {
         class: "bio-properties-panel-list-entry-header-buttons",
-        children: [o("button", {
+        children: [jsxRuntime.jsxs("button", {
           title: "Create new list item",
           onClick: addItem,
           class: "bio-properties-panel-add-entry",
-          children: [o(CreateIcon, {}), !hasItems ? o("span", {
+          children: [jsxRuntime.jsx(CreateIcon, {}), !hasItems ? jsxRuntime.jsx("span", {
             class: "bio-properties-panel-add-entry-label",
             children: "Create"
           }) : null]
-        }), hasItems && o("div", {
+        }), hasItems && jsxRuntime.jsx("div", {
           title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
           class: "bio-properties-panel-list-badge",
           children: items.length
-        }), hasItems && o("button", {
+        }), hasItems && jsxRuntime.jsx("button", {
           title: "Toggle list item",
           class: "bio-properties-panel-arrow",
-          children: o(ArrowIcon, {
+          children: jsxRuntime.jsx(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
           })
         })]
       })]
-    }), hasItems && o(ItemsList, {
+    }), hasItems && jsxRuntime.jsx(ItemsList, {
       ...restProps,
       autoFocusEntry: autoFocusEntry,
       component: component,
@@ -4050,7 +3630,7 @@ function ItemsList(props) {
   } = props;
   const getKey = useKeyFactory();
   const newItem = newItems[0];
-  p(() => {
+  hooks.useEffect(() => {
     if (newItem && autoFocusEntry) {
       // (0) select the parent entry (containing all list items)
       const entry = minDom.query(`[data-entry-id="${id}"]`);
@@ -4069,25 +3649,25 @@ function ItemsList(props) {
       }
     }
   }, [newItem, autoFocusEntry, id]);
-  return o("ol", {
+  return jsxRuntime.jsx("ol", {
     class: classnames__default["default"]('bio-properties-panel-list-entry-items', open ? 'open' : ''),
     children: items.map((item, index) => {
       const key = getKey(item);
-      return o("li", {
+      return jsxRuntime.jsxs("li", {
         class: "bio-properties-panel-list-entry-item",
-        children: [o(Component, {
+        children: [jsxRuntime.jsx(Component, {
           ...restProps,
           element: element,
           id: id,
           index: index,
           item: item,
           open: item === newItem
-        }), onRemove && o("button", {
+        }), onRemove && jsxRuntime.jsx("button", {
           type: "button",
           title: "Delete item",
           class: "bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry",
           onClick: () => onRemove && onRemove(item),
-          children: o(DeleteIcon, {})
+          children: jsxRuntime.jsx(DeleteIcon, {})
         })]
       }, key);
     })
@@ -4104,7 +3684,7 @@ function ItemsList(props) {
  * @returns {Item[]}
  */
 function useSortedItems(currentItems, compareFn, shouldReset = false) {
-  const itemsRef = _$1(currentItems.slice());
+  const itemsRef = hooks.useRef(currentItems.slice());
 
   // (1) Reset and optionally sort.
   if (shouldReset) {
@@ -4149,7 +3729,7 @@ function Select(props) {
     tooltip
   } = props;
   const ref = useShowEntryEvent(id);
-  const [localValue, setLocalValue] = h(value);
+  const [localValue, setLocalValue] = hooks.useState(value);
   const handleChangeCallback = ({
     target
   }) => {
@@ -4159,24 +3739,24 @@ function Select(props) {
     handleChangeCallback(e);
     setLocalValue(e.target.value);
   };
-  p(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
     setLocalValue(value);
   }, [value]);
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-select",
-    children: [o("label", {
+    children: [jsxRuntime.jsx("label", {
       for: prefixId$3(id),
       class: "bio-properties-panel-label",
-      children: o(TooltipWrapper, {
+      children: jsxRuntime.jsx(TooltipWrapper, {
         value: tooltip,
         forId: id,
         element: props.element,
         children: label
       })
-    }), o("select", {
+    }), jsxRuntime.jsx("select", {
       ref: ref,
       id: prefixId$3(id),
       name: id,
@@ -4188,16 +3768,16 @@ function Select(props) {
       disabled: disabled,
       children: options.map((option, idx) => {
         if (option.children) {
-          return o("optgroup", {
+          return jsxRuntime.jsx("optgroup", {
             label: option.label,
-            children: option.children.map((child, idx) => o("option", {
+            children: option.children.map((child, idx) => jsxRuntime.jsx("option", {
               value: child.value,
               disabled: child.disabled,
               children: child.label
             }, idx))
           }, idx);
         }
-        return o("option", {
+        return jsxRuntime.jsx("option", {
           value: option.value,
           disabled: option.disabled,
           children: option.label
@@ -4239,9 +3819,9 @@ function SelectEntry(props) {
   } = props;
   const options = getOptions(element);
   const globalError = useError(id);
-  const [localError, setLocalError] = h(null);
+  const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  p(() => {
+  hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
@@ -4256,10 +3836,10 @@ function SelectEntry(props) {
     setLocalError(newValidationError);
   };
   const error = globalError || localError;
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [o(Select, {
+    children: [jsxRuntime.jsx(Select, {
       id: id,
       label: label,
       value: value,
@@ -4270,10 +3850,10 @@ function SelectEntry(props) {
       disabled: disabled,
       tooltip: tooltip,
       element: element
-    }, element), error && o("div", {
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
-    }), o(Description, {
+    }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
       value: description
@@ -4302,8 +3882,8 @@ function Simple(props) {
     setValue
   } = props;
   const value = getValue(element);
-  const [localValue, setLocalValue] = h(value);
-  const handleInputCallback = F$1(() => {
+  const [localValue, setLocalValue] = hooks.useState(value);
+  const handleInputCallback = hooks.useMemo(() => {
     return debounce(({
       target
     }) => setValue(target.value.length ? target.value : undefined));
@@ -4312,15 +3892,15 @@ function Simple(props) {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-  p(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
     setLocalValue(value);
   }, [value]);
-  return o("div", {
+  return jsxRuntime.jsx("div", {
     class: "bio-properties-panel-simple",
-    children: o("input", {
+    children: jsxRuntime.jsx("input", {
       id: prefixId$2(id),
       type: "text",
       name: id,
@@ -4368,9 +3948,9 @@ function TextArea(props) {
     rows = autoResize ? 1 : 2,
     tooltip
   } = props;
-  const [localValue, setLocalValue] = h(value);
+  const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
-  const handleInputCallback = F$1(() => {
+  const handleInputCallback = hooks.useMemo(() => {
     return debounce(({
       target
     }) => onInput(target.value.length ? target.value : undefined));
@@ -4380,27 +3960,27 @@ function TextArea(props) {
     autoResize && resizeToContents(e.target);
     setLocalValue(e.target.value);
   };
-  y(() => {
+  hooks.useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
   }, []);
-  p(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
     setLocalValue(value);
   }, [value]);
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-textarea",
-    children: [o("label", {
+    children: [jsxRuntime.jsx("label", {
       for: prefixId$1(id),
       class: "bio-properties-panel-label",
-      children: o(TooltipWrapper, {
+      children: jsxRuntime.jsx(TooltipWrapper, {
         value: tooltip,
         forId: id,
         element: props.element,
         children: label
       })
-    }), o("textarea", {
+    }), jsxRuntime.jsx("textarea", {
       ref: ref,
       id: prefixId$1(id),
       name: id,
@@ -4452,9 +4032,9 @@ function TextAreaEntry(props) {
     tooltip
   } = props;
   const globalError = useError(id);
-  const [localError, setLocalError] = h(null);
+  const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  p(() => {
+  hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
@@ -4469,10 +4049,10 @@ function TextAreaEntry(props) {
     setLocalError(newValidationError);
   };
   const error = globalError || localError;
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [o(TextArea, {
+    children: [jsxRuntime.jsx(TextArea, {
       id: id,
       label: label,
       value: value,
@@ -4486,10 +4066,10 @@ function TextAreaEntry(props) {
       autoResize: autoResize,
       tooltip: tooltip,
       element: element
-    }, element), error && o("div", {
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
-    }), o(Description, {
+    }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
       value: description
@@ -4518,9 +4098,9 @@ function Textfield(props) {
     value = '',
     tooltip
   } = props;
-  const [localValue, setLocalValue] = h(value || '');
+  const [localValue, setLocalValue] = hooks.useState(value || '');
   const ref = useShowEntryEvent(id);
-  const handleInputCallback = F$1(() => {
+  const handleInputCallback = hooks.useMemo(() => {
     return debounce(({
       target
     }) => onInput(target.value.length ? target.value : undefined));
@@ -4529,24 +4109,24 @@ function Textfield(props) {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-  p(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
     setLocalValue(value);
   }, [value]);
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-textfield",
-    children: [o("label", {
+    children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "bio-properties-panel-label",
-      children: o(TooltipWrapper, {
+      children: jsxRuntime.jsx(TooltipWrapper, {
         value: tooltip,
         forId: id,
         element: props.element,
         children: label
       })
-    }), o("input", {
+    }), jsxRuntime.jsx("input", {
       ref: ref,
       id: prefixId(id),
       type: "text",
@@ -4594,9 +4174,9 @@ function TextfieldEntry(props) {
     tooltip
   } = props;
   const globalError = useError(id);
-  const [localError, setLocalError] = h(null);
+  const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  p(() => {
+  hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
@@ -4611,10 +4191,10 @@ function TextfieldEntry(props) {
     setLocalError(newValidationError);
   };
   const error = globalError || localError;
-  return o("div", {
+  return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [o(Textfield, {
+    children: [jsxRuntime.jsx(Textfield, {
       debounce: debounce,
       disabled: disabled,
       id: id,
@@ -4625,10 +4205,10 @@ function TextfieldEntry(props) {
       value: value,
       tooltip: tooltip,
       element: element
-    }, element), error && o("div", {
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
-    }), o(Description, {
+    }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
       value: description