@bpmn-io/form-js-editor 1.0.0-alpha.9 → 1.1.0

package/dist/index.es.js

@@ -6,7 +6,8 @@ import classnames from 'classnames';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
 import { useContext, useState, useMemo, useEffect, useCallback, useRef as useRef$1, useLayoutEffect } from 'preact/hooks';
 import { createContext, Fragment, render, createElement } from 'preact';
-import React, { createPortal, useRef, useContext as useContext$1, useEffect as useEffect$1, forwardRef } from 'preact/compat';
+import * as React from 'preact/compat';
+import { createPortal, useRef, useContext as useContext$1, useEffect as useEffect$1, forwardRef } from 'preact/compat';
 import dragula from 'dragula';
 import { classes, query, closest, event, matches, domify } from 'min-dom';
 import { mutate } from 'array-move';
@@ -514,10 +515,10 @@ function invokeFunction(fn, args) {
   return fn.apply(null, args);
 }
 
-/**
- * A factory to create a configurable debouncer.
- *
- * @param {number|boolean} [config=true]
+/**
+ * A factory to create a configurable debouncer.
+ *
+ * @param {number|boolean} [config=true]
  */
 function DebounceFactory(config = true) {
   const timeout = typeof config === 'number' ? config : config ? 300 : 0;
@@ -530,11 +531,11 @@ function DebounceFactory(config = true) {
 DebounceFactory.$inject = ['config.debounce'];
 
 class FieldFactory {
-  /**
-   * @constructor
-   *
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
-   * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
+  /**
+   * @constructor
+   *
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+   * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
    */
   constructor(formFieldRegistry, formFields) {
     this._formFieldRegistry = formFieldRegistry;
@@ -597,11 +598,11 @@ class FieldFactory {
 FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
 
 class FormFieldRegistry extends FormFieldRegistry$1 {
-  /**
-   * Updates a form fields id.
-   *
-   * @param {Object} formField
-   * @param {string} newId
+  /**
+   * Updates a form fields id.
+   *
+   * @param {Object} formField
+   * @param {string} newId
    */
   updateId(formField, newId) {
     this._validateId(newId);
@@ -622,13 +623,13 @@ class FormFieldRegistry extends FormFieldRegistry$1 {
     }
   }
 
-  /**
-   * Validate the suitability of the given id and signals a problem
-   * with an exception.
-   *
-   * @param {string} id
-   *
-   * @throws {Error} if id is empty or already assigned
+  /**
+   * Validate the suitability of the given id and signals a problem
+   * with an exception.
+   *
+   * @param {string} id
+   *
+   * @throws {Error} if id is empty or already assigned
    */
   _validateId(id) {
     if (!id) {
@@ -645,11 +646,11 @@ const MAX_COLUMNS = 16;
 const MIN_COLUMNS = 2;
 const MAX_FIELDS_PER_ROW = 4;
 class FormLayoutValidator {
-  /**
-   * @constructor
-   *
-   * @param { import('./FormLayouter').default } formLayouter
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   *
+   * @param { import('./FormLayouter').default } formLayouter
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formLayouter, formFieldRegistry) {
     this._formLayouter = formLayouter;
@@ -709,11 +710,11 @@ function calculateMaxColumnsWithAuto(autoCols) {
 }
 
 class Importer {
-  /**
-   * @constructor
-   * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('../core/FieldFactory').default } fieldFactory
-   * @param { import('../core/FormLayouter').default } formLayouter
+  /**
+   * @constructor
+   * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('../core/FieldFactory').default } fieldFactory
+   * @param { import('../core/FormLayouter').default } formLayouter
    */
   constructor(formFieldRegistry, fieldFactory, formLayouter) {
     this._formFieldRegistry = formFieldRegistry;
@@ -721,21 +722,21 @@ class Importer {
     this._formLayouter = formLayouter;
   }
 
-  /**
-   * Import schema creating rows, fields, attaching additional
-   * information to each field and adding fields to the
-   * field registry.
-   *
-   * Additional information attached:
-   *
-   *   * `id` (unless present)
-   *   * `_parent`
-   *   * `_path`
-   *
-   * @param {any} schema
-   *
-   * @typedef {{ warnings: Error[], schema: any }} ImportResult
-   * @returns {ImportResult}
+  /**
+   * Import schema creating rows, fields, attaching additional
+   * information to each field and adding fields to the
+   * field registry.
+   *
+   * Additional information attached:
+   *
+   *   * `id` (unless present)
+   *   * `_parent`
+   *   * `_path`
+   *
+   * @param {any} schema
+   *
+   * @typedef {{ warnings: Error[], schema: any }} ImportResult
+   * @returns {ImportResult}
    */
   importSchema(schema) {
     // TODO: Add warnings
@@ -753,12 +754,12 @@ class Importer {
     }
   }
 
-  /**
-   * @param {{[x: string]: any}} fieldAttrs
-   * @param {String} [parentId]
-   * @param {number} [index]
-   *
-   * @return {any} field
+  /**
+   * @param {{[x: string]: any}} fieldAttrs
+   * @param {String} [parentId]
+   * @param {number} [index]
+   *
+   * @return {any} field
    */
   importFormField(fieldAttrs, parentId, index) {
     const {
@@ -795,11 +796,11 @@ class Importer {
     return field;
   }
 
-  /**
-   * @param {Array<any>} components
-   * @param {string} parentId
-   *
-   * @return {Array<any>} imported components
+  /**
+   * @param {Array<any>} components
+   * @param {string} parentId
+   *
+   * @return {Array<any>} imported components
    */
   importFormFields(components, parentId) {
     return components.map((component, index) => {
@@ -824,22 +825,22 @@ function editorFormFieldClasses(type, {
   });
 }
 
-/**
- * Add a dragger that calls back the passed function with
- * { event, delta } on drag.
- *
- * @example
- *
- * function dragMove(event, delta) {
- *   // we are dragging (!!)
- * }
- *
- * domElement.addEventListener('dragstart', dragger(dragMove));
- *
- * @param {Function} fn
- * @param {Element} dragPreview
- *
- * @return {Function} drag start callback function
+/**
+ * Add a dragger that calls back the passed function with
+ * { event, delta } on drag.
+ *
+ * @example
+ *
+ * function dragMove(event, delta) {
+ *   // we are dragging (!!)
+ * }
+ *
+ * domElement.addEventListener('dragstart', dragger(dragMove));
+ *
+ * @param {Function} fn
+ * @param {Element} dragPreview
+ *
+ * @return {Function} drag start callback function
  */
 function createDragger(fn, dragPreview) {
   let self;
@@ -880,12 +881,12 @@ function createDragger(fn, dragPreview) {
   return onDragStart;
 }
 
-/**
- * Throttle function call according UI update cycle.
- *
- * @param  {Function} fn
- *
- * @return {Function} throttled fn
+/**
+ * Throttle function call according UI update cycle.
+ *
+ * @param  {Function} fn
+ *
+ * @return {Function} throttled fn
  */
 function throttle(fn) {
   let active = false;
@@ -914,11 +915,11 @@ const DragAndDropContext = createContext({
 });
 var DragAndDropContext$1 = DragAndDropContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService$1(type, strict) {}
 const FormEditorContext = createContext({
@@ -933,83 +934,146 @@ function useService$1 (type, strict) {
   return getService(type, strict);
 }
 
+var _path$4;
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+var SvgClose = function SvgClose(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "currentColor"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+    clipRule: "evenodd"
+  })));
+};
+var CloseIcon = SvgClose;
+
+var _path$3, _path2$1;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var CloseIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$3({
-  width: "16",
-  height: "16",
-  fill: "currentColor",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7z"
-})));
+var SvgDelete = function SvgDelete(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    width: 16,
+    height: 16,
+    x: 0.536,
+    fill: "#fff",
+    rx: 3,
+    style: {
+      mixBlendMode: "multiply"
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h16v16H0z",
+    style: {
+      mixBlendMode: "multiply"
+    },
+    transform: "translate(.536)"
+  }), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M7.536 6h-1v6h1V6Zm3 0h-1v6h1V6Z"
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M2.536 3v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3h-12Zm2 11V4h8v10h-8Zm6-13h-4v1h4V1Z"
+  })));
+};
+var DeleteIcon$1 = SvgDelete;
 
+var _path$2;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var DeleteIcon$1 = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$2({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  fill: "none"
-}, props), /*#__PURE__*/React.createElement("rect", {
-  width: "16",
-  height: "16",
-  x: ".536",
-  fill: "#fff",
-  rx: "3",
-  style: {
-    mixBlendMode: "multiply"
-  }
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "#fff",
-  d: "M.536 0h16v16h-16z",
-  style: {
-    mixBlendMode: "multiply"
-  }
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "currentcolor",
-  d: "M7.536 6h-1v6h1V6zm3 0h-1v6h1V6z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "currentcolor",
-  d: "M2.536 3v1h1v10a1 1 0 001 1h8a1 1 0 001-1V4h1V3h-12zm2 11V4h8v10h-8zm6-13h-4v1h4V1z"
-})));
+var SvgDraggable = function SvgDraggable(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    width: 16,
+    height: 16,
+    fill: "currentcolor",
+    viewBox: "0 0 32 32"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h32v32H0z",
+    style: {
+      fill: "none"
+    }
+  }));
+};
+var DraggableIcon = SvgDraggable;
 
+var _path$1;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var DraggableIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$1({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  fill: "currentcolor",
-  viewBox: "0 0 32 32"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M0 0h32v32H0z",
-  fill: "none"
-})));
+var SvgSearch = function SvgSearch(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 15,
+    height: 15,
+    fill: "none"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "m14.5 13.793-3.776-3.776a5.508 5.508 0 1 0-.707.707l3.776 3.776.707-.707ZM2 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
+  })));
+};
+var SearchIcon = SvgSearch;
 
+var _path, _rect, _mask, _path2, _path3, _path4, _path5, _path6;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SearchIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: "15",
-  height: "15",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M14.5 13.793l-3.776-3.776a5.508 5.508 0 10-.707.707l3.776 3.776.707-.707zM2 6.5a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z",
-  fill: "currentColor"
-})));
+var SvgEmptyForm = function SvgEmptyForm(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 126,
+    height: 96,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "#FF832B",
+    fillRule: "evenodd",
+    d: "M70 78v8a3 3 0 0 1-3 3h-8v-5h6v-6h5Zm0-16h-5V46h5v16Zm0-32h-5v-6h-6v-5h8a3 3 0 0 1 3 3v8ZM43 19v5H27v-5h16Zm-32 0v5H5v6H0v-8a3 3 0 0 1 3-3h8ZM0 46h5v16H0V46Zm0 32h5v6h6v5H3a3 3 0 0 1-3-3v-8Zm27 11v-5h16v5H27Z",
+    clipRule: "evenodd"
+  })), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
+    width: 70,
+    height: 70,
+    fill: "#E5E5E5",
+    rx: 3,
+    transform: "matrix(-1 0 0 1 94 0)"
+  })), _mask || (_mask = /*#__PURE__*/React.createElement("mask", {
+    id: "EmptyForm_svg__a",
+    fill: "#fff"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556-8.072 11.043Z",
+    clipRule: "evenodd"
+  }))), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    fill: "#393939",
+    fillRule: "evenodd",
+    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556-8.072 11.043Z",
+    clipRule: "evenodd"
+  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+    fill: "#393939",
+    d: "M75.43 45.185 70.6 46.48l-2.241-8.365 8.365 2.242-1.294 4.83Zm11.655 43.499 4.037 2.95-6.163 8.432-2.704-10.088 4.83-1.294Zm31.844-31.843 1.294-4.83 10.088 2.703-8.432 6.163-2.95-4.036Zm-11.044 8.072-3.535 3.535-4.128-4.127 4.713-3.445 2.95 4.037Zm8.557 8.556 3.535-3.535 3.536 3.535-3.536 3.536-3.535-3.536Zm-12.728 12.728 3.536 3.536-3.536 3.535-3.536-3.535 3.536-3.536Zm-8.557-8.556-4.036-2.951 3.444-4.713 4.128 4.128-3.536 3.535ZM80.26 43.89 91.915 87.39l-9.66 2.588L70.6 46.48l9.66-2.588Zm37.375 17.78L74.136 50.014l2.588-9.66 43.499 11.656-2.589 9.66Zm-12.699-.795 11.043-8.072 5.901 8.073-11.043 8.072-5.901-8.073Zm7.971 16.129-8.556-8.557 7.071-7.07 8.556 8.556-7.071 7.07Zm-12.728 5.657 12.728-12.728 7.071 7.07-12.727 12.729-7.072-7.071Zm-1.485-8.557 8.557 8.557-7.072 7.07-8.556-8.556 7.07-7.071ZM83.049 85.733 91.12 74.69l8.073 5.901-8.072 11.044-8.073-5.902Z",
+    mask: "url(#EmptyForm_svg__a)"
+  })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "m69.431 39.163-9.192-9.192"
+  })), _path5 || (_path5 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "M1.5-1.5h8",
+    transform: "matrix(-1 0 0 1 68.213 50.123)"
+  })), _path6 || (_path6 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "M78.969 36.367v-8"
+  })));
+};
+var EmptyFormIcon = SvgEmptyForm;
 
 function EditorText(props) {
   const {
@@ -1019,7 +1083,7 @@ function EditorText(props) {
   const Icon = iconsByType('text');
   const templating = useService$1('templating');
   const expressionLanguage = useService$1('expressionLanguage');
-  if (!text) {
+  if (!text || !text.trim()) {
     return jsx("div", {
       class: editorFormFieldClasses(type),
       children: jsxs("div", {
@@ -1205,23 +1269,23 @@ var Slot = (props => {
   return fillsAndSeparators;
 });
 
-/**
- * Creates a Fragment for a fill.
- *
- * @param {Object} fill Fill to be rendered
- * @returns {Object} Preact Fragment containing fill's children
+/**
+ * Creates a Fragment for a fill.
+ *
+ * @param {Object} fill Fill to be rendered
+ * @returns {Object} Preact Fragment containing fill's children
  */
 const FillFragment = fill => jsx(Fragment, {
   children: fill.children
 }, fill.id);
 
-/**
- * Creates an array of fills, with separators inserted between groups.
- *
- * @param {Array} groups Groups of fills
- * @param {Function} fillRenderer Function to create a fill
- * @param {Function} separatorRenderer Function to create a separator
- * @returns {Array} Array of fills and separators
+/**
+ * Creates an array of fills, with separators inserted between groups.
+ *
+ * @param {Array} groups Groups of fills
+ * @param {Function} fillRenderer Function to create a fill
+ * @param {Function} separatorRenderer Function to create a separator
+ * @returns {Array} Array of fills and separators
  */
 const buildFills = (groups, fillRenderer, separatorRenderer) => {
   const result = [];
@@ -1239,8 +1303,8 @@ const buildFills = (groups, fillRenderer, separatorRenderer) => {
   return result;
 };
 
-/**
- * Groups fills by group name property.
+/**
+ * Groups fills by group name property.
  */
 const _groupByGroupName = fills => {
   const groups = [];
@@ -1260,8 +1324,8 @@ const _groupByGroupName = fills => {
   return Object.keys(groupsById).sort().map(id => groupsById[id]);
 };
 
-/**
- * Compares fills by priority.
+/**
+ * Compares fills by priority.
  */
 const _comparePriority = (a, b) => {
   return (b.priority || 0) - (a.priority || 0);
@@ -1489,19 +1553,19 @@ const DRAG_NO_DROP_CLS = 'fjs-no-drop';
 const DRAG_NO_MOVE_CLS = 'fjs-no-move';
 const ERROR_DROP_CLS = 'fjs-error-drop';
 
-/**
- * @typedef { { id: String, components: Array<any> } } FormRow
+/**
+ * @typedef { { id: String, components: Array<any> } } FormRow
  */
 
 class Dragging {
-  /**
-   * @constructor
-   *
-   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('../../core/FormLayouter').default } formLayouter
-   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
-   * @param { import('../../core/EventBus').default } eventBus
-   * @param { import('../modeling/Modeling').default } modeling
+  /**
+   * @constructor
+   *
+   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('../../core/FormLayouter').default } formLayouter
+   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
+   * @param { import('../../core/EventBus').default } eventBus
+   * @param { import('../modeling/Modeling').default } modeling
    */
   constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling) {
     this._formFieldRegistry = formFieldRegistry;
@@ -1511,13 +1575,13 @@ class Dragging {
     this._modeling = modeling;
   }
 
-  /**
-   * Calculcates position in form schema given the dropped place.
-   *
-   * @param { FormRow } targetRow
-   * @param { any } targetFormField
-   * @param { HTMLElement } sibling
-   * @returns { number }
+  /**
+   * Calculcates position in form schema given the dropped place.
+   *
+   * @param { FormRow } targetRow
+   * @param { any } targetFormField
+   * @param { HTMLElement } sibling
+   * @returns { number }
    */
   getTargetIndex(targetRow, targetFormField, sibling) {
     /** @type HTMLElement */
@@ -1619,8 +1683,8 @@ class Dragging {
     }
   }
 
-  /**
-   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+  /**
+   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
    */
   createDragulaInstance(options) {
     const {
@@ -1920,7 +1984,19 @@ function ContextPad(props) {
   });
 }
 function Empty(props) {
-  return null;
+  return jsx("div", {
+    class: "fjs-empty-editor",
+    children: jsxs("div", {
+      class: "fjs-empty-editor-card",
+      children: [jsx(EmptyFormIcon, {}), jsx("h2", {
+        children: "Build your form"
+      }), jsx("span", {
+        children: "Drag and drop components here to start designing."
+      }), jsx("span", {
+        children: "Use the preview window to test your form."
+      })]
+    })
+  });
 }
 function Element$1(props) {
   const eventBus = useService$1('eventBus'),
@@ -2017,7 +2093,7 @@ function DebugColumns(props) {
     return null;
   }
   return jsx("div", {
-    style: "width: fit-content;\r padding: 2px 6px;\r height: 16px;\r background: var(--color-blue-205-100-95);\r display: flex;\r justify-content: center;\r align-items: center;\r position: absolute;\r bottom: -2px;\r z-index: 2;\r font-size: 10px;\r right: 3px;",
+    style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
     class: "fjs-debug-columns",
     children: (field.layout || {}).columns || 'auto'
   });
@@ -3076,10 +3152,10 @@ function updateRow(formField, rowId) {
 }
 
 class AddFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3140,10 +3216,10 @@ class AddFormFieldHandler {
 AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class EditFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3206,10 +3282,10 @@ class EditFormFieldHandler {
 EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class MoveFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3298,10 +3374,10 @@ class MoveFormFieldHandler {
 MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class RemoveFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3361,9 +3437,9 @@ class RemoveFormFieldHandler {
 RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class UpdateIdClaimHandler {
-  /**
-   * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formFieldRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -3396,9 +3472,9 @@ class UpdateIdClaimHandler {
 UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
 
 class UpdateKeyClaimHandler {
-  /**
-   * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formFieldRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -3864,8 +3940,8 @@ class ValidateBehavior extends CommandInterceptor {
   constructor(eventBus) {
     super(eventBus);
 
-    /**
-     * Remove custom validation if <validationType> is about to be added.
+    /**
+     * Remove custom validation if <validationType> is about to be added.
      */
     // @ts-ignore-next-line
     this.preExecute('formField.edit', function (context) {
@@ -4445,22 +4521,22 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
-/**
- * Base class for sectionable UI modules.
- *
- * @property {EventBus} _eventBus - EventBus instance used for event handling.
- * @property {string} managerType - Type of the render manager. Used to form event names.
- *
- * @class SectionModuleBase
+/**
+ * Base class for sectionable UI modules.
+ *
+ * @property {EventBus} _eventBus - EventBus instance used for event handling.
+ * @property {string} managerType - Type of the render manager. Used to form event names.
+ *
+ * @class SectionModuleBase
  */
 class SectionModuleBase {
-  /**
-   * Create a SectionModuleBase instance.
-   *
-   * @param {any} eventBus - The EventBus instance used for event handling.
-   * @param {string} sectionKey - The type of render manager. Used to form event names.
-   *
-   * @constructor
+  /**
+   * Create a SectionModuleBase instance.
+   *
+   * @param {any} eventBus - The EventBus instance used for event handling.
+   * @param {string} sectionKey - The type of render manager. Used to form event names.
+   *
+   * @constructor
    */
   constructor(eventBus, sectionKey) {
     this._eventBus = eventBus;
@@ -4473,10 +4549,10 @@ class SectionModuleBase {
     });
   }
 
-  /**
-   * Attach the managed section to a parent node.
-   *
-   * @param {HTMLElement} container - The parent node to attach to.
+  /**
+   * Attach the managed section to a parent node.
+   *
+   * @param {HTMLElement} container - The parent node to attach to.
    */
   attachTo(container) {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.attach`, {
@@ -4484,22 +4560,22 @@ class SectionModuleBase {
     }));
   }
 
-  /**
-   * Detach the managed section from its parent node.
+  /**
+   * Detach the managed section from its parent node.
    */
   detach() {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.detach`));
   }
 
-  /**
-   * Reset the managed section to its initial state.
+  /**
+   * Reset the managed section to its initial state.
    */
   reset() {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.reset`));
   }
 
-  /**
-   * Circumvents timing issues.
+  /**
+   * Circumvents timing issues.
    */
   _onceSectionRendered(callback) {
     if (this.isSectionRendered) {
@@ -5982,150 +6058,300 @@ function isEdited$7(node) {
 function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
-const noop$1 = () => {};
-function FeelTextfield(props) {
+function NumberField(props) {
   const {
     debounce,
+    disabled,
+    displayLabel = true,
     id,
+    inputRef,
     label,
+    max,
+    min,
     onInput,
-    onError,
-    feel,
+    step,
     value = '',
-    disabled = false,
-    variables,
-    tooltipContainer,
-    OptionalComponent = OptionalFeelInput
+    onFocus,
+    onBlur
   } = props;
-  const [localValue, _setLocalValue] = useState(value);
-  const editorRef = useShowEntryEvent(id);
-  const containerRef = useRef$1();
-  const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
-  const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
-  const [focus, _setFocus] = useState(undefined);
-  const setFocus = (offset = 0) => {
-    const hasFocus = containerRef.current.contains(document.activeElement);
-
-    // Keep caret position if it is already focused, otherwise focus at the end
-    const position = hasFocus ? document.activeElement.selectionStart : Infinity;
-    _setFocus(position + offset);
-  };
+  const [localValue, setLocalValue] = useState(value);
   const handleInputCallback = useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
+    return debounce(event => {
+      const {
+        validity,
+        value
+      } = event.target;
+      if (validity.valid) {
+        onInput(value ? parseFloat(value) : undefined);
+      }
     });
   }, [onInput, debounce]);
-  const setLocalValue = newValue => {
-    _setLocalValue(newValue);
-    if (!newValue || newValue === '=') {
-      handleInputCallback(undefined);
-    } else {
-      handleInputCallback(newValue);
-    }
-  };
-  const handleFeelToggle = useStaticCallback(() => {
-    if (feel === 'required') {
-      return;
-    }
-    if (!feelActive) {
-      setLocalValue('=' + localValue);
-    } else {
-      setLocalValue(feelOnlyValue);
-    }
-  });
-  const handleLocalInput = newValue => {
-    if (feelActive) {
-      newValue = '=' + newValue;
-    }
-    if (newValue === localValue) {
-      return;
-    }
-    setLocalValue(newValue);
-    if (!feelActive && isString(newValue) && newValue.startsWith('=')) {
-      // focus is behind `=` sign that will be removed
-      setFocus(-1);
-    }
+  const handleInput = e => {
+    handleInputCallback(e);
+    setLocalValue(e.target.value);
   };
-  const handleLint = useStaticCallback(lint => {
-    if (!(lint && lint.length)) {
-      onError(undefined);
-      return;
-    }
-    const error = lint[0];
-    const message = `${error.source}: ${error.message}`;
-    onError(message);
-  });
-  useEffect(() => {
-    if (typeof focus !== 'undefined') {
-      editorRef.current.focus(focus);
-      _setFocus(undefined);
-    }
-  }, [focus]);
   useEffect(() => {
     if (value === localValue) {
       return;
     }
-
-    // External value change removed content => keep FEEL configuration
-    if (!value) {
-      setLocalValue(feelActive ? '=' : '');
-      return;
-    }
     setLocalValue(value);
   }, [value]);
-
-  // copy-paste integration
-  useEffect(() => {
-    const copyHandler = event => {
-      if (!feelActive) {
-        return;
-      }
-      event.clipboardData.setData('application/FEEL', event.clipboardData.getData('text'));
-    };
-    const pasteHandler = event => {
-      if (feelActive) {
-        return;
-      }
-      const data = event.clipboardData.getData('application/FEEL');
-      if (data) {
-        setTimeout(() => {
-          handleFeelToggle();
-          setFocus();
-        });
-      }
-    };
-    containerRef.current.addEventListener('copy', copyHandler);
-    containerRef.current.addEventListener('cut', copyHandler);
-    containerRef.current.addEventListener('paste', pasteHandler);
-    return () => {
-      containerRef.current.removeEventListener('copy', copyHandler);
-      containerRef.current.removeEventListener('cut', copyHandler);
-      containerRef.current.removeEventListener('paste', pasteHandler);
-    };
-  }, [containerRef, feelActive, handleFeelToggle, setFocus]);
   return jsxs("div", {
-    class: classnames('bio-properties-panel-feel-entry', {
-      'feel-active': feelActive
-    }),
-    children: [jsxs("label", {
+    class: "bio-properties-panel-numberfield",
+    children: [displayLabel && jsx("label", {
       for: prefixId$5(id),
       class: "bio-properties-panel-label",
-      onClick: () => setFocus(),
-      children: [label, jsx(FeelIcon, {
-        label: label,
-        feel: feel,
-        onClick: handleFeelToggle,
-        active: feelActive
-      })]
-    }), jsxs("div", {
-      class: "bio-properties-panel-feel-container",
-      ref: containerRef,
-      children: [jsx(FeelIndicator, {
-        active: feelActive,
-        disabled: feel !== 'optional' || disabled,
+      children: label
+    }), jsx("input", {
+      id: prefixId$5(id),
+      ref: inputRef,
+      type: "number",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      max: max,
+      min: min,
+      onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      step: step,
+      value: localValue
+    })]
+  });
+}
+
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {String} props.step
+ * @param {Function} props.validate
+ */
+function NumberFieldEntry(props) {
+  const {
+    debounce,
+    description,
+    disabled,
+    element,
+    getValue,
+    id,
+    label,
+    max,
+    min,
+    setValue,
+    step,
+    onFocus,
+    onBlur,
+    validate
+  } = props;
+  const globalError = useError(id);
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    setValue(newValue, newValidationError);
+    setLocalError(newValidationError);
+  };
+  const error = globalError || localError;
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsx(NumberField, {
+      debounce: debounce,
+      disabled: disabled,
+      id: id,
+      label: label,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onInput: onInput,
+      max: max,
+      min: min,
+      step: step,
+      value: value
+    }, element), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$6(node) {
+  return node && !!node.value;
+}
+
+// helpers /////////////////
+
+function prefixId$5(id) {
+  return `bio-properties-panel-${id}`;
+}
+const noop$1 = () => {};
+function FeelTextfield(props) {
+  const {
+    debounce,
+    id,
+    label,
+    onInput,
+    onError,
+    feel,
+    value = '',
+    disabled = false,
+    variables,
+    tooltipContainer,
+    OptionalComponent = OptionalFeelInput
+  } = props;
+  const [localValue, _setLocalValue] = useState(value);
+  const editorRef = useShowEntryEvent(id);
+  const containerRef = useRef$1();
+  const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
+  const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
+  const [focus, _setFocus] = useState(undefined);
+  const setFocus = (offset = 0) => {
+    const hasFocus = containerRef.current.contains(document.activeElement);
+
+    // Keep caret position if it is already focused, otherwise focus at the end
+    const position = hasFocus ? document.activeElement.selectionStart : Infinity;
+    _setFocus(position + offset);
+  };
+  const handleInputCallback = useMemo(() => {
+    return debounce(newValue => {
+      onInput(newValue);
+    });
+  }, [onInput, debounce]);
+  const setLocalValue = newValue => {
+    _setLocalValue(newValue);
+    if (!newValue || newValue === '=') {
+      handleInputCallback(undefined);
+    } else {
+      handleInputCallback(newValue);
+    }
+  };
+  const handleFeelToggle = useStaticCallback(() => {
+    if (feel === 'required') {
+      return;
+    }
+    if (!feelActive) {
+      setLocalValue('=' + localValue);
+    } else {
+      setLocalValue(feelOnlyValue);
+    }
+  });
+  const handleLocalInput = newValue => {
+    if (feelActive) {
+      newValue = '=' + newValue;
+    }
+    if (newValue === localValue) {
+      return;
+    }
+    setLocalValue(newValue);
+    if (!feelActive && isString(newValue) && newValue.startsWith('=')) {
+      // focus is behind `=` sign that will be removed
+      setFocus(-1);
+    }
+  };
+  const handleLint = useStaticCallback(lint => {
+    if (!(lint && lint.length)) {
+      onError(undefined);
+      return;
+    }
+    const error = lint[0];
+    const message = `${error.source}: ${error.message}`;
+    onError(message);
+  });
+  useEffect(() => {
+    if (typeof focus !== 'undefined') {
+      editorRef.current.focus(focus);
+      _setFocus(undefined);
+    }
+  }, [focus]);
+  useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+
+    // External value change removed content => keep FEEL configuration
+    if (!value) {
+      setLocalValue(feelActive ? '=' : '');
+      return;
+    }
+    setLocalValue(value);
+  }, [value]);
+
+  // copy-paste integration
+  useEffect(() => {
+    const copyHandler = event => {
+      if (!feelActive) {
+        return;
+      }
+      event.clipboardData.setData('application/FEEL', event.clipboardData.getData('text'));
+    };
+    const pasteHandler = event => {
+      if (feelActive) {
+        return;
+      }
+      const data = event.clipboardData.getData('application/FEEL');
+      if (data) {
+        setTimeout(() => {
+          handleFeelToggle();
+          setFocus();
+        });
+      }
+    };
+    containerRef.current.addEventListener('copy', copyHandler);
+    containerRef.current.addEventListener('cut', copyHandler);
+    containerRef.current.addEventListener('paste', pasteHandler);
+    return () => {
+      containerRef.current.removeEventListener('copy', copyHandler);
+      containerRef.current.removeEventListener('cut', copyHandler);
+      containerRef.current.removeEventListener('paste', pasteHandler);
+    };
+  }, [containerRef, feelActive, handleFeelToggle, setFocus]);
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-feel-entry', {
+      'feel-active': feelActive
+    }),
+    children: [jsxs("label", {
+      for: prefixId$4(id),
+      class: "bio-properties-panel-label",
+      onClick: () => setFocus(),
+      children: [label, jsx(FeelIcon, {
+        label: label,
+        feel: feel,
+        onClick: handleFeelToggle,
+        active: feelActive
+      })]
+    }), jsxs("div", {
+      class: "bio-properties-panel-feel-container",
+      ref: containerRef,
+      children: [jsx(FeelIndicator, {
+        active: feelActive,
+        disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsx(CodeEditor, {
-        id: prefixId$5(id),
+        id: prefixId$4(id),
         name: id,
         onInput: handleLocalInput,
         disabled: disabled,
@@ -6142,7 +6368,7 @@ function FeelTextfield(props) {
         ...props,
         onInput: handleLocalInput,
         contentAttributes: {
-          'id': prefixId$5(id),
+          'id': prefixId$4(id),
           'aria-label': label
         },
         value: localValue,
@@ -6180,7 +6406,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     }
   };
   return jsx("input", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -6194,6 +6420,53 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     value: value || ''
   });
 });
+const OptionalFeelNumberField = forwardRef((props, ref) => {
+  const {
+    id,
+    debounce,
+    disabled,
+    onInput,
+    value,
+    min,
+    max,
+    step,
+    onFocus,
+    onBlur
+  } = props;
+  const inputRef = useRef$1();
+
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
+  ref.current = {
+    focus: position => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+      if (typeof position === 'number' && position !== Infinity) {
+        if (position > value.length) {
+          position = value.length;
+        }
+        input.setSelectionRange(position, position);
+      }
+    }
+  };
+  return jsx(NumberField, {
+    id: id,
+    debounce: debounce,
+    disabled: disabled,
+    displayLabel: false,
+    inputRef: inputRef,
+    max: max,
+    min: min,
+    onInput: onInput,
+    step: step,
+    value: value,
+    onFocus: onFocus,
+    onBlur: onBlur
+  });
+});
 forwardRef((props, ref) => {
   const {
     id,
@@ -6218,7 +6491,7 @@ forwardRef((props, ref) => {
     }
   };
   return jsx("textarea", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -6294,7 +6567,7 @@ forwardRef((props, ref) => {
   };
   return jsx("input", {
     ref: inputRef,
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     name: id,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -6346,11 +6619,9 @@ function FeelEntry(props) {
     onFocus,
     onBlur
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const [validationError, setValidationError] = useState(null);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -6362,32 +6633,28 @@ function FeelEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      // don't create multiple commandStack entries for the same value
-      if (newValue !== value) {
-        setValue(newValue);
-      }
+
+    // don't create multiple commandStack entries for the same value
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
     }
     setValidationError(newValidationError);
   });
   const onError = useCallback(err => {
     setLocalError(err);
   }, []);
-  if (previousValue === value && validationError) {
-    value = cachedInvalidValue;
-  }
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
   return jsxs("div", {
     class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsx(FeelTextfield, {
+    children: [createElement(FeelTextfield, {
+      ...props,
       debounce: debounce,
       disabled: disabled,
       feel: feel,
       id: id,
+      key: element,
       label: label,
       onInput: onInput,
       onError: onError,
@@ -6401,7 +6668,7 @@ function FeelEntry(props) {
       variables: variables,
       tooltipContainer: tooltipContainer,
       OptionalComponent: props.OptionalComponent
-    }, element), error && jsx("div", {
+    }), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsx(Description$1, {
@@ -6412,6 +6679,36 @@ function FeelEntry(props) {
   });
 }
 
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {String} props.step
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function FeelNumberEntry(props) {
+  return jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-number",
+    OptionalComponent: OptionalFeelNumberField,
+    ...props
+  });
+}
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -6467,7 +6764,7 @@ function FeelTemplatingEntry(props) {
     ...props
   });
 }
-function isEdited$6(node) {
+function isEdited$5(node) {
   if (!node) {
     return false;
   }
@@ -6479,162 +6776,6 @@ function isEdited$6(node) {
 
 // helpers /////////////////
 
-function prefixId$5(id) {
-  return `bio-properties-panel-${id}`;
-}
-function NumberField(props) {
-  const {
-    debounce,
-    disabled,
-    id,
-    label,
-    max,
-    min,
-    onInput,
-    step,
-    value = '',
-    onFocus,
-    onBlur
-  } = props;
-  const [localValue, setLocalValue] = useState(value);
-  const handleInputCallback = useMemo(() => {
-    return debounce(event => {
-      const {
-        validity,
-        value
-      } = event.target;
-      if (validity.valid) {
-        onInput(value ? parseFloat(value) : undefined);
-      }
-    });
-  }, [onInput, debounce]);
-  const handleInput = e => {
-    handleInputCallback(e);
-    setLocalValue(e.target.value);
-  };
-  useEffect(() => {
-    if (value === localValue) {
-      return;
-    }
-    setLocalValue(value);
-  }, [value]);
-  return jsxs("div", {
-    class: "bio-properties-panel-numberfield",
-    children: [jsx("label", {
-      for: prefixId$4(id),
-      class: "bio-properties-panel-label",
-      children: label
-    }), jsx("input", {
-      id: prefixId$4(id),
-      type: "number",
-      name: id,
-      spellCheck: "false",
-      autoComplete: "off",
-      disabled: disabled,
-      class: "bio-properties-panel-input",
-      max: max,
-      min: min,
-      onInput: handleInput,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      step: step,
-      value: localValue
-    })]
-  });
-}
-
-/**
- * @param {Object} props
- * @param {Boolean} props.debounce
- * @param {String} props.description
- * @param {Boolean} props.disabled
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {String} props.label
- * @param {String} props.max
- * @param {String} props.min
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {String} props.step
- * @param {Function} props.validate
- */
-function NumberFieldEntry(props) {
-  const {
-    debounce,
-    description,
-    disabled,
-    element,
-    getValue,
-    id,
-    label,
-    max,
-    min,
-    setValue,
-    step,
-    onFocus,
-    onBlur,
-    validate
-  } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
-  const globalError = useError(id);
-  const [localError, setLocalError] = useState(null);
-  let value = getValue(element);
-  const previousValue = usePrevious(value);
-  useEffect(() => {
-    if (isFunction(validate)) {
-      const newValidationError = validate(value) || null;
-      setLocalError(newValidationError);
-    }
-  }, [value]);
-  const onInput = newValue => {
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
-    setLocalError(newValidationError);
-  };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
-  const error = globalError || localError;
-  return jsxs("div", {
-    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
-    "data-entry-id": id,
-    children: [jsx(NumberField, {
-      debounce: debounce,
-      disabled: disabled,
-      id: id,
-      label: label,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onInput: onInput,
-      max: max,
-      min: min,
-      step: step,
-      value: value
-    }, element), error && jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
-    }), jsx(Description$1, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
-function isEdited$4(node) {
-  return node && !!node.value;
-}
-
-// helpers /////////////////
-
 function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
 }
@@ -6732,11 +6873,9 @@ function SelectEntry(props) {
     validate
   } = props;
   const options = getOptions(element);
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -6748,16 +6887,9 @@ function SelectEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -6888,11 +7020,9 @@ function TextAreaEntry(props) {
     onBlur,
     autoResize
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -6904,16 +7034,9 @@ function TextAreaEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -7028,11 +7151,9 @@ function TextfieldEntry(props) {
     onFocus,
     onBlur
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -7044,16 +7165,9 @@ function TextfieldEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -7086,12 +7200,12 @@ function isEdited(node) {
 function prefixId(id) {
   return `bio-properties-panel-${id}`;
 }
-
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const PropertiesPanelContext = createContext({
@@ -7138,6 +7252,7 @@ const labelsByType = {
   number: 'NUMBER',
   radio: 'RADIO',
   select: 'SELECT',
+  spacer: 'SPACER',
   taglist: 'TAGLIST',
   text: 'TEXT VIEW',
   textfield: 'TEXT FIELD',
@@ -7180,8 +7295,8 @@ const PropertiesPanelHeaderProvider = {
   }
 };
 
-/**
- * Provide placeholders for empty and multiple state.
+/**
+ * Provide placeholders for empty and multiple state.
  */
 const PropertiesPanelPlaceholderProvider = {
   getEmpty: () => {
@@ -7253,10 +7368,10 @@ function useService (type, strict) {
   return getService(type, strict);
 }
 
-/**
- * Retrieve list of variables from the form schema.
- *
- * @returns { string[] } list of variables used in form schema
+/**
+ * Retrieve list of variables from the form schema.
+ *
+ * @returns { string[] } list of variables used in form schema
  */
 function useVariables() {
   const form = useService('formEditor');
@@ -7279,7 +7394,7 @@ function AltTextEntry(props) {
       component: AltText,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7301,7 +7416,7 @@ function AltText(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     feel: 'optional',
@@ -7309,6 +7424,7 @@ function AltText(props) {
     id,
     label: 'Alternative text',
     setValue,
+    singleLine: true,
     variables
   });
 }
@@ -7339,7 +7455,10 @@ function Columns(props) {
   const validate = value => {
     return formLayoutValidator.validateField(field, value ? parseInt(value) : null);
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const layout = get(field, ['layout'], {});
     const newValue = value ? parseInt(value) : null;
     editField(field, ['layout'], set$1(layout, ['columns'], newValue));
@@ -7397,7 +7516,7 @@ function DescriptionEntry(props) {
       component: Description,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7547,7 +7666,10 @@ function DefaultValueNumber(props) {
     // Enforces decimal notation so that we do not submit defaults in exponent form
     return serializeToString ? Big(value).toFixed() : value;
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     let newValue;
     if (isValidNumber(value)) {
       newValue = serializeToString ? value : Number(value);
@@ -7738,7 +7860,10 @@ function Id(props) {
   const getValue = () => {
     return get(field, path, '');
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     return editField(field, path, value);
   };
   const validate = value => {
@@ -7818,7 +7943,10 @@ function Key$1(props) {
   const getValue = () => {
     return get(field, path, '');
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     return editField(field, path, value);
   };
   const validate = value => {
@@ -7863,7 +7991,7 @@ function LabelEntry(props) {
         component: DateLabel,
         editField,
         field,
-        isEdited: isEdited$6
+        isEdited: isEdited$5
       });
     }
     if (subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME) {
@@ -7872,7 +8000,7 @@ function LabelEntry(props) {
         component: TimeLabel,
         editField,
         field,
-        isEdited: isEdited$6
+        isEdited: isEdited$5
       });
     }
   } else if (INPUTS.includes(type) || type === 'button') {
@@ -7881,7 +8009,7 @@ function LabelEntry(props) {
       component: Label$1,
       editField,
       field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7986,7 +8114,7 @@ function SourceEntry(props) {
       component: Source,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -8008,7 +8136,7 @@ function Source(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     description: 'Expression or static value (link/data URI)',
     element: field,
@@ -8017,6 +8145,7 @@ function Source(props) {
     id,
     label: 'Image source',
     setValue,
+    singleLine: true,
     variables
   });
 }
@@ -8041,7 +8170,7 @@ function TextEntry(props) {
     component: Text,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$5
   }];
 
   // todo: skipped to make the release without too much risk
@@ -8072,7 +8201,7 @@ function Text(props) {
     return get(field, path, '');
   };
   const setValue = value => {
-    return editField(field, path, value);
+    return editField(field, path, value || '');
   };
   const description = useMemo(() => jsxs(Fragment$1, {
     children: ["Supports markdown and templating. ", jsx("a", {
@@ -8094,6 +8223,57 @@ function Text(props) {
   });
 }
 
+function SpacerEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const {
+    type
+  } = field;
+  if (type !== 'spacer') {
+    return [];
+  }
+  const entries = [];
+  entries.push({
+    id: id + '-height',
+    component: SpacerHeight,
+    isEdited: isEdited$6,
+    editField,
+    field
+  });
+  return entries;
+}
+function SpacerHeight(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const getValue = e => get(field, ['height']);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['height'], value);
+  };
+  return NumberFieldEntry({
+    debounce,
+    label: 'Height',
+    element: field,
+    id,
+    getValue,
+    setValue,
+    validate: value => {
+      if (value === undefined || value === null) return;
+      if (value < 1) return 'Should be greater than zero.';
+      if (!Number.isInteger(value)) return 'Should be an integer.';
+    }
+  });
+}
+
 function NumberEntries(props) {
   const {
     editField,
@@ -8110,7 +8290,7 @@ function NumberEntries(props) {
   entries.push({
     id: id + '-decimalDigits',
     component: NumberDecimalDigits,
-    isEdited: isEdited$4,
+    isEdited: isEdited$6,
     editField,
     field
   });
@@ -8131,7 +8311,12 @@ function NumberDecimalDigits(props) {
   } = props;
   const debounce = useService('debounce');
   const getValue = e => get(field, ['decimalDigits']);
-  const setValue = value => editField(field, ['decimalDigits'], value);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['decimalDigits'], value);
+  };
   return NumberFieldEntry({
     debounce,
     label: 'Decimal digits',
@@ -8167,7 +8352,12 @@ function NumberArrowStep(props) {
     const trimmed = value.replace(/^0+/g, '');
     return (trimmed.startsWith('.') ? '0' : '') + trimmed;
   };
-  const setValue = value => editField(field, ['increment'], clearLeadingZeroes(value));
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['increment'], clearLeadingZeroes(value));
+  };
   const decimalDigitsSet = decimalDigits || decimalDigits === 0;
   return TextfieldEntry({
     debounce,
@@ -8576,7 +8766,10 @@ function Label(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const values = get(field, ['values']);
     return editField(field, 'values', set$1(values, [index, 'label'], value));
   };
@@ -8602,7 +8795,10 @@ function Value$1(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const values = get(field, ['values']);
     return editField(field, 'values', set$1(values, [index, 'value'], value));
   };
@@ -8656,7 +8852,10 @@ function Key(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const properties = get(field, ['properties']);
     const key = Object.keys(properties)[index];
     return editField(field, 'properties', updateKey(properties, key, value));
@@ -8706,14 +8905,14 @@ function Value(props) {
 
 // helpers //////////
 
-/**
- * Returns copy of object with updated value.
- *
- * @param {Object} properties
- * @param {string} key
- * @param {string} value
- *
- * @returns {Object}
+/**
+ * Returns copy of object with updated value.
+ *
+ * @param {Object} properties
+ * @param {string} key
+ * @param {string} value
+ *
+ * @returns {Object}
  */
 function updateValue(properties, key, value) {
   return {
@@ -8722,14 +8921,14 @@ function updateValue(properties, key, value) {
   };
 }
 
-/**
- * Returns copy of object with updated key.
- *
- * @param {Object} properties
- * @param {string} oldKey
- * @param {string} newKey
- *
- * @returns {Object}
+/**
+ * Returns copy of object with updated key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ * @param {string} newKey
+ *
+ * @returns {Object}
  */
 function updateKey(properties, oldKey, newKey) {
   return Object.entries(properties).reduce((newProperties, entry) => {
@@ -8741,6 +8940,34 @@ function updateKey(properties, oldKey, newKey) {
   }, {});
 }
 
+function AutoFocusSelectEntry(props) {
+  const {
+    autoFocusEntry,
+    element,
+    getValue
+  } = props;
+  const value = getValue(element);
+  const prevValue = usePrevious(value);
+  const eventBus = useService('eventBus');
+
+  // auto focus specifc other entry when selected value changed
+  useEffect(() => {
+    if (autoFocusEntry && prevValue && value !== prevValue) {
+      // @Note(pinussilvestrus): There is an issue in the properties
+      // panel so we have to wait a bit before showing the entry.
+      // Cf. https://github.com/camunda/linting/blob/4f5328e2722f73ae60ae584c5f576eaec3999cb2/lib/modeler/Linting.js#L37
+      setTimeout(() => {
+        eventBus.fire('propertiesPanel.showEntry', {
+          id: autoFocusEntry
+        });
+      });
+    }
+  }, [value, autoFocusEntry, prevValue, eventBus]);
+  return jsx(SelectEntry, {
+    ...props
+  });
+}
+
 function ValuesSourceSelectEntry(props) {
   const {
     editField,
@@ -8779,7 +9006,8 @@ function ValuesSourceSelect(props) {
       value: valueSource
     }));
   };
-  return SelectEntry({
+  return AutoFocusSelectEntry({
+    autoFocusEntry: getAutoFocusEntryId(field),
     label: 'Type',
     element: field,
     getOptions: getValuesSourceOptions,
@@ -8789,6 +9017,20 @@ function ValuesSourceSelect(props) {
   });
 }
 
+// helpers //////////
+
+function getAutoFocusEntryId(field) {
+  const valuesSource = getValuesSource(field);
+  if (valuesSource === VALUES_SOURCES.EXPRESSION) {
+    return `${field.id}-valuesExpression-expression`;
+  } else if (valuesSource === VALUES_SOURCES.INPUT) {
+    return `${field.id}-dynamicValues-key`;
+  } else if (valuesSource === VALUES_SOURCES.STATIC) {
+    return `${field.id}-staticValues-0-label`;
+  }
+  return null;
+}
+
 function InputKeyValuesSourceEntry(props) {
   const {
     editField,
@@ -8824,7 +9066,12 @@ function InputValuesKey(props) {
   const debounce = useService('debounce');
   const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT];
   const getValue = () => get(field, path, '');
-  const setValue = value => editField(field, path, value || '');
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, path, value || '');
+  };
   const validate = value => {
     if (isUndefined(value) || !value.length) {
       return 'Must not be empty.';
@@ -8945,7 +9192,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'prefix-adorner',
       component: PrefixAdorner,
-      isEdited: isEdited,
+      isEdited: isEdited$5,
       editField,
       field,
       onChange,
@@ -8954,7 +9201,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'suffix-adorner',
       component: SuffixAdorner,
-      isEdited: isEdited,
+      isEdited: isEdited$5,
       editField,
       field,
       onChange,
@@ -8971,13 +9218,19 @@ function PrefixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
-  return TextfieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelTemplatingEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('prefixAdorner'),
     id,
     label: 'Prefix',
-    setValue: onChange('prefixAdorner')
+    setValue: onChange('prefixAdorner'),
+    singleLine: true,
+    variables
   });
 }
 function SuffixAdorner(props) {
@@ -8988,13 +9241,18 @@ function SuffixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
-  return TextfieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     getValue: getValue('suffixAdorner'),
     id,
     label: 'Suffix',
-    setValue: onChange('suffixAdorner')
+    setValue: onChange('suffixAdorner'),
+    singleLine: true,
+    variables
   });
 }
 
@@ -9013,7 +9271,7 @@ function ReadonlyEntry(props) {
       component: Readonly,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -9057,7 +9315,7 @@ function ConditionEntry(props) {
     component: Condition,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$5
   }];
 }
 function Condition(props) {
@@ -9095,6 +9353,55 @@ function Condition(props) {
   });
 }
 
+function ValuesExpressionEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  return [{
+    id: id + '-expression',
+    component: ValuesExpression,
+    label: 'Values expression',
+    isEdited: isEdited$5,
+    editField,
+    field
+  }];
+}
+function ValuesExpression(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.EXPRESSION];
+  const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
+  const description = jsxs("div", {
+    children: ["Define an expression to populate the options from.", jsx("br", {}), jsx("br", {}), "The expression may result in an array of simple values or alternatively follow this schema:", jsx("pre", {
+      children: jsx("code", {
+        children: schema
+      })
+    })]
+  });
+  const getValue = () => get(field, path, '');
+  const setValue = value => editField(field, path, value || '');
+  return FeelEntry({
+    debounce,
+    description,
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Options expression',
+    setValue,
+    variables
+  });
+}
+
 function GeneralGroup(field, editField, getService) {
   const entries = [...IdEntry({
     field,
@@ -9121,6 +9428,9 @@ function GeneralGroup(field, editField, getService) {
     field,
     editField,
     getService
+  }), ...SpacerEntry({
+    field,
+    editField
   }), ...NumberEntries({
     field,
     editField
@@ -9239,14 +9549,14 @@ function ValidationGroup(field, editField) {
       component: MinLength,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     }, {
       id: 'maxLength',
       component: MaxLength,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     });
   }
@@ -9266,14 +9576,14 @@ function ValidationGroup(field, editField) {
       component: Min,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     }, {
       id: 'max',
       component: Max,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     });
   }
@@ -9306,14 +9616,19 @@ function MinLength(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('minLength'),
     id,
     label: 'Minimum length',
     min: 0,
-    setValue: onChange('minLength')
+    setValue: onChange('minLength'),
+    variables
   });
 }
 function MaxLength(props) {
@@ -9324,14 +9639,19 @@ function MaxLength(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('maxLength'),
     id,
     label: 'Maximum length',
     min: 0,
-    setValue: onChange('maxLength')
+    setValue: onChange('maxLength'),
+    variables
   });
 }
 function Pattern(props) {
@@ -9359,14 +9679,19 @@ function Min(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Minimum',
     step: 'any',
     getValue: getValue('min'),
-    setValue: onChange('min')
+    setValue: onChange('min'),
+    variables
   });
 }
 function Max(props) {
@@ -9377,14 +9702,19 @@ function Max(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Maximum',
     step: 'any',
     getValue: getValue('max'),
-    setValue: onChange('max')
+    setValue: onChange('max'),
+    variables
   });
 }
 function ValidationType(props) {
@@ -9423,8 +9753,8 @@ function ValuesGroups(field, editField) {
   };
   const valuesSourceId = `${fieldId}-valuesSource`;
 
-  /**
-   * @type {Array<Group|ListGroup>}
+  /**
+   * @type {Array<Group|ListGroup>}
    */
   const groups = [{
     id: valuesSourceId,
@@ -9458,6 +9788,17 @@ function ValuesGroups(field, editField) {
         id: staticValuesId
       })
     });
+  } else if (valuesSource === VALUES_SOURCES.EXPRESSION) {
+    const valuesExpressionId = `${fieldId}-valuesExpression`;
+    groups.push({
+      id: valuesExpressionId,
+      label: 'Options expression',
+      component: Group,
+      entries: ValuesExpressionEntry({
+        ...context,
+        id: valuesExpressionId
+      })
+    });
   }
   return groups;
 }
@@ -9526,13 +9867,13 @@ function CustomValuesGroup(field, editField) {
 
 // helpers //////////
 
-/**
- * Returns copy of object without key.
- *
- * @param {Object} properties
- * @param {string} oldKey
- *
- * @returns {Object}
+/**
+ * Returns copy of object without key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ *
+ * @returns {Object}
  */
 function removeKey(properties, oldKey) {
   return Object.entries(properties).reduce((newProperties, entry) => {
@@ -9635,9 +9976,9 @@ function FormPropertiesPanel(props) {
     });
   }, [eventBus, formEditor, selectionModule]);
   useLayoutEffect(() => {
-    /**
-     * TODO(pinussilvestrus): update with actual updated element,
-     * once we have a proper updater/change support
+    /**
+     * TODO(pinussilvestrus): update with actual updated element,
+     * once we have a proper updater/change support
      */
     eventBus.on('changed', refresh);
     eventBus.on('import.done', refresh);
@@ -9689,10 +10030,10 @@ class PropertiesPanelRenderer {
     });
   }
 
-  /**
-   * Attach the properties panel to a parent node.
-   *
-   * @param {HTMLElement} container
+  /**
+   * Attach the properties panel to a parent node.
+   *
+   * @param {HTMLElement} container
    */
   attachTo(container) {
     if (!container) {
@@ -9712,8 +10053,8 @@ class PropertiesPanelRenderer {
     this._eventBus.fire('propertiesPanel.attach');
   }
 
-  /**
-   * Detach the properties panel from its parent node.
+  /**
+   * Detach the properties panel from its parent node.
    */
   detach() {
     const parentNode = this._container.parentNode;
@@ -9743,10 +10084,10 @@ var PropertiesPanelModule = {
   propertiesPanel: ['type', PropertiesPanelRenderer]
 };
 
-/**
- * Manages the rendering of visual plugins.
- * @constructor
- * @param {Object} eventBus - Event bus for the application.
+/**
+ * Manages the rendering of visual plugins.
+ * @constructor
+ * @param {Object} eventBus - Event bus for the application.
  */
 class RenderInjector extends SectionModuleBase {
   constructor(eventBus) {
@@ -9755,10 +10096,10 @@ class RenderInjector extends SectionModuleBase {
     this.registeredRenderers = [];
   }
 
-  /**
-   * Inject a new renderer into the injector.
-   * @param {string} identifier - Identifier for the renderer.
-   * @param {Function} Renderer - The renderer function.
+  /**
+   * Inject a new renderer into the injector.
+   * @param {string} identifier - Identifier for the renderer.
+   * @param {Function} Renderer - The renderer function.
    */
   attachRenderer(identifier, Renderer) {
     this.registeredRenderers = [...this.registeredRenderers, {
@@ -9767,17 +10108,17 @@ class RenderInjector extends SectionModuleBase {
     }];
   }
 
-  /**
-   * Detach a renderer from the by key injector.
-   * @param {string} identifier - Identifier for the renderer.
+  /**
+   * Detach a renderer from the by key injector.
+   * @param {string} identifier - Identifier for the renderer.
    */
   detachRenderer(identifier) {
     this.registeredRenderers = this.registeredRenderers.filter(r => r.identifier !== identifier);
   }
 
-  /**
-   * Returns the registered renderers.
-   * @returns {Array} Array of registered renderers.
+  /**
+   * Returns the registered renderers.
+   * @returns {Array} Array of registered renderers.
    */
   fetchRenderers() {
     return this.registeredRenderers;
@@ -9811,48 +10152,48 @@ var ExpressionLanguageModule = {
 
 const ids = new Ids([32, 36, 1]);
 
-/**
- * @typedef { import('./types').Injector } Injector
- * @typedef { import('./types').Module } Module
- * @typedef { import('./types').Schema } Schema
- *
- * @typedef { import('./types').FormEditorOptions } FormEditorOptions
- * @typedef { import('./types').FormEditorProperties } FormEditorProperties
- *
- * @typedef { {
- *   properties: FormEditorProperties,
- *   schema: Schema
- * } } State
- *
- * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
- * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
- * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+/**
+ * @typedef { import('./types').Injector } Injector
+ * @typedef { import('./types').Module } Module
+ * @typedef { import('./types').Schema } Schema
+ *
+ * @typedef { import('./types').FormEditorOptions } FormEditorOptions
+ * @typedef { import('./types').FormEditorProperties } FormEditorProperties
+ *
+ * @typedef { {
+ *   properties: FormEditorProperties,
+ *   schema: Schema
+ * } } State
+ *
+ * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
+ * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
  */
 
-/**
- * The form editor.
+/**
+ * The form editor.
  */
 class FormEditor {
-  /**
-   * @constructor
-   * @param {FormEditorOptions} options
+  /**
+   * @constructor
+   * @param {FormEditorOptions} options
    */
   constructor(options = {}) {
-    /**
-     * @public
-     * @type {OnEventType}
+    /**
+     * @public
+     * @type {OnEventType}
      */
     this.on = this._onEvent;
 
-    /**
-     * @public
-     * @type {String}
+    /**
+     * @public
+     * @type {String}
      */
     this._id = ids.next();
 
-    /**
-     * @private
-     * @type {Element}
+    /**
+     * @private
+     * @type {Element}
      */
     this._container = createFormContainer();
     this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -9863,15 +10204,15 @@ class FormEditor {
       properties = {}
     } = options;
 
-    /**
-     * @private
-     * @type {any}
+    /**
+     * @private
+     * @type {any}
      */
     this.exporter = exporter;
 
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       properties,
@@ -9900,10 +10241,10 @@ class FormEditor {
     this._detach(false);
   }
 
-  /**
-   * @param {Schema} schema
-   *
-   * @return {Promise<{ warnings: Array<any> }>}
+  /**
+   * @param {Schema} schema
+   *
+   * @return {Promise<{ warnings: Array<any> }>}
    */
   importSchema(schema) {
     return new Promise((resolve, reject) => {
@@ -9932,15 +10273,15 @@ class FormEditor {
     });
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   saveSchema() {
     return this.getSchema();
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   getSchema() {
     const {
@@ -9949,8 +10290,8 @@ class FormEditor {
     return exportSchema(schema, this.exporter, schemaVersion);
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -9968,10 +10309,10 @@ class FormEditor {
     this._detach();
   }
 
-  /**
-   * @internal
-   *
-   * @param {boolean} [emit]
+  /**
+   * @internal
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -9985,9 +10326,9 @@ class FormEditor {
     parentNode.removeChild(container);
   }
 
-  /**
-   * @param {any} property
-   * @param {any} value
+  /**
+   * @param {any} property
+   * @param {any} value
    */
   setProperty(property, value) {
     const properties = set$1(this._getState().properties, [property], value);
@@ -9996,21 +10337,21 @@ class FormEditor {
     });
   }
 
-  /**
-   * @param {string} type
-   * @param {Function} handler
+  /**
+   * @param {string} type
+   * @param {Function} handler
    */
   off(type, handler) {
     this.get('eventBus').off(type, handler);
   }
 
-  /**
-   * @internal
-   *
-   * @param {FormEditorOptions} options
-   * @param {Element} container
-   *
-   * @returns {Injector}
+  /**
+   * @internal
+   *
+   * @param {FormEditorOptions} options
+   * @param {Element} container
+   *
+   * @returns {Injector}
    */
   _createInjector(options, container) {
     const {
@@ -10032,22 +10373,22 @@ class FormEditor {
     }, core, ...modules, ...additionalModules]);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _emit(type, data) {
     this.get('eventBus').fire(type, data);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getState() {
     return this._state;
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _setState(state) {
     this._state = {
@@ -10057,15 +10398,15 @@ class FormEditor {
     this._emit('changed', this._getState());
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getModules() {
     return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);