@bpmn-io/form-js-playground 0.11.1 → 0.12.0

package/dist/form-playground.umd.js

@@ -2,7 +2,7 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FormPlayground = {}));
-}(this, (function (exports) { 'use strict';
+})(this, (function (exports) { 'use strict';
 
   var n$3,
     l$3,
@@ -737,184 +737,192 @@
 
   var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-  var download$1 = {exports: {}};
+  var downloadExports = {};
+  var download$1 = {
+    get exports(){ return downloadExports; },
+    set exports(v){ downloadExports = v; },
+  };
 
   (function (module, exports) {
-  //download.js v4.2, by dandavis; 2008-2016. [MIT] see http://danml.com/download.html for tests/usage
-  // v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
-  // v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
-  // v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling.
-  // v4 adds AMD/UMD, commonJS, and plain browser support
-  // v4.1 adds url download capability via solo URL argument (same domain/CORS only)
-  // v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
-  // https://github.com/rndme/download
-
-  (function (root, factory) {
-    {
-      // Node. Does not work with strict CommonJS, but
-      // only CommonJS-like environments that support module.exports,
-      // like Node.
-      module.exports = factory();
-    }
-  })(commonjsGlobal, function () {
-    return function download(data, strFileName, strMimeType) {
-      var self = window,
-        // this script is only for browsers anyway...
-        defaultMime = "application/octet-stream",
-        // this default mime also triggers iframe downloads
-        mimeType = strMimeType || defaultMime,
-        payload = data,
-        url = !strFileName && !strMimeType && payload,
-        anchor = document.createElement("a"),
-        toString = function (a) {
-          return String(a);
-        },
-        myBlob = self.Blob || self.MozBlob || self.WebKitBlob || toString,
-        fileName = strFileName || "download",
-        blob,
-        reader;
-      myBlob = myBlob.call ? myBlob.bind(self) : Blob;
-      if (String(this) === "true") {
-        //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
-        payload = [payload, mimeType];
-        mimeType = payload[0];
-        payload = payload[1];
-      }
-      if (url && url.length < 2048) {
-        // if no filename and no mime, assume a url was passed as the only argument
-        fileName = url.split("/").pop().split("?")[0];
-        anchor.href = url; // assign href prop to temp anchor
-        if (anchor.href.indexOf(url) !== -1) {
-          // if the browser determines that it's a potentially valid url path:
-          var ajax = new XMLHttpRequest();
-          ajax.open("GET", url, true);
-          ajax.responseType = 'blob';
-          ajax.onload = function (e) {
-            download(e.target.response, fileName, defaultMime);
-          };
-          setTimeout(function () {
-            ajax.send();
-          }, 0); // allows setting custom ajax headers using the return:
-          return ajax;
-        } // end if valid url?
-      } // end if url?
-
-      //go ahead and download dataURLs right away
-      if (/^data:([\w+-]+\/[\w+.-]+)?[,;]/.test(payload)) {
-        if (payload.length > 1024 * 1024 * 1.999 && myBlob !== toString) {
-          payload = dataUrlToBlob(payload);
-          mimeType = payload.type || defaultMime;
-        } else {
-          return navigator.msSaveBlob ?
-          // IE10 can't do a[download], only Blobs:
-          navigator.msSaveBlob(dataUrlToBlob(payload), fileName) : saver(payload); // everyone else can save dataURLs un-processed
-        }
-      } else {
-        //not data url, is it a string with special needs?
-        if (/([\x80-\xff])/.test(payload)) {
-          var i = 0,
-            tempUiArr = new Uint8Array(payload.length),
-            mx = tempUiArr.length;
-          for (i; i < mx; ++i) tempUiArr[i] = payload.charCodeAt(i);
-          payload = new myBlob([tempUiArr], {
-            type: mimeType
-          });
-        }
-      }
-      blob = payload instanceof myBlob ? payload : new myBlob([payload], {
-        type: mimeType
-      });
-      function dataUrlToBlob(strUrl) {
-        var parts = strUrl.split(/[:;,]/),
-          type = parts[1],
-          decoder = parts[2] == "base64" ? atob : decodeURIComponent,
-          binData = decoder(parts.pop()),
-          mx = binData.length,
-          i = 0,
-          uiArr = new Uint8Array(mx);
-        for (i; i < mx; ++i) uiArr[i] = binData.charCodeAt(i);
-        return new myBlob([uiArr], {
-          type: type
-        });
-      }
-      function saver(url, winMode) {
-        if ('download' in anchor) {
-          //html5 A[download]
-          anchor.href = url;
-          anchor.setAttribute("download", fileName);
-          anchor.className = "download-js-link";
-          anchor.innerHTML = "downloading...";
-          anchor.style.display = "none";
-          document.body.appendChild(anchor);
-          setTimeout(function () {
-            anchor.click();
-            document.body.removeChild(anchor);
-            if (winMode === true) {
-              setTimeout(function () {
-                self.URL.revokeObjectURL(anchor.href);
-              }, 250);
-            }
-          }, 66);
-          return true;
-        }
-
-        // handle non-a[download] safari as best we can:
-        if (/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
-          if (/^data:/.test(url)) url = "data:" + url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
-          if (!window.open(url)) {
-            // popup blocked, offer direct download:
-            if (confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")) {
-              location.href = url;
-            }
-          }
-          return true;
-        }
-
-        //do iframe dataURL download (old ch+FF):
-        var f = document.createElement("iframe");
-        document.body.appendChild(f);
-        if (!winMode && /^data:/.test(url)) {
-          // force a mime that will download:
-          url = "data:" + url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
-        }
-        f.src = url;
-        setTimeout(function () {
-          document.body.removeChild(f);
-        }, 333);
-      } //end saver
-
-      if (navigator.msSaveBlob) {
-        // IE10+ : (has Blob, but not a[download] or URL)
-        return navigator.msSaveBlob(blob, fileName);
-      }
-      if (self.URL) {
-        // simple fast and modern way using Blob and URL:
-        saver(self.URL.createObjectURL(blob), true);
-      } else {
-        // handle non-Blob()+non-URL browsers:
-        if (typeof blob === "string" || blob.constructor === toString) {
-          try {
-            return saver("data:" + mimeType + ";base64," + self.btoa(blob));
-          } catch (y) {
-            return saver("data:" + mimeType + "," + encodeURIComponent(blob));
-          }
-        }
-
-        // Blob but not URL support:
-        reader = new FileReader();
-        reader.onload = function (e) {
-          saver(this.result);
-        };
-        reader.readAsDataURL(blob);
-      }
-      return true;
-    }; /* end download() */
-  });
-  }(download$1));
-
-  var download = download$1.exports;
-
-  var classnames = {exports: {}};
+  	//download.js v4.2, by dandavis; 2008-2016. [MIT] see http://danml.com/download.html for tests/usage
+  	// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
+  	// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
+  	// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling.
+  	// v4 adds AMD/UMD, commonJS, and plain browser support
+  	// v4.1 adds url download capability via solo URL argument (same domain/CORS only)
+  	// v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
+  	// https://github.com/rndme/download
+
+  	(function (root, factory) {
+  	  {
+  	    // Node. Does not work with strict CommonJS, but
+  	    // only CommonJS-like environments that support module.exports,
+  	    // like Node.
+  	    module.exports = factory();
+  	  }
+  	})(commonjsGlobal, function () {
+  	  return function download(data, strFileName, strMimeType) {
+  	    var self = window,
+  	      // this script is only for browsers anyway...
+  	      defaultMime = "application/octet-stream",
+  	      // this default mime also triggers iframe downloads
+  	      mimeType = strMimeType || defaultMime,
+  	      payload = data,
+  	      url = !strFileName && !strMimeType && payload,
+  	      anchor = document.createElement("a"),
+  	      toString = function (a) {
+  	        return String(a);
+  	      },
+  	      myBlob = self.Blob || self.MozBlob || self.WebKitBlob || toString,
+  	      fileName = strFileName || "download",
+  	      blob,
+  	      reader;
+  	    myBlob = myBlob.call ? myBlob.bind(self) : Blob;
+  	    if (String(this) === "true") {
+  	      //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
+  	      payload = [payload, mimeType];
+  	      mimeType = payload[0];
+  	      payload = payload[1];
+  	    }
+  	    if (url && url.length < 2048) {
+  	      // if no filename and no mime, assume a url was passed as the only argument
+  	      fileName = url.split("/").pop().split("?")[0];
+  	      anchor.href = url; // assign href prop to temp anchor
+  	      if (anchor.href.indexOf(url) !== -1) {
+  	        // if the browser determines that it's a potentially valid url path:
+  	        var ajax = new XMLHttpRequest();
+  	        ajax.open("GET", url, true);
+  	        ajax.responseType = 'blob';
+  	        ajax.onload = function (e) {
+  	          download(e.target.response, fileName, defaultMime);
+  	        };
+  	        setTimeout(function () {
+  	          ajax.send();
+  	        }, 0); // allows setting custom ajax headers using the return:
+  	        return ajax;
+  	      } // end if valid url?
+  	    } // end if url?
+
+  	    //go ahead and download dataURLs right away
+  	    if (/^data:([\w+-]+\/[\w+.-]+)?[,;]/.test(payload)) {
+  	      if (payload.length > 1024 * 1024 * 1.999 && myBlob !== toString) {
+  	        payload = dataUrlToBlob(payload);
+  	        mimeType = payload.type || defaultMime;
+  	      } else {
+  	        return navigator.msSaveBlob ?
+  	        // IE10 can't do a[download], only Blobs:
+  	        navigator.msSaveBlob(dataUrlToBlob(payload), fileName) : saver(payload); // everyone else can save dataURLs un-processed
+  	      }
+  	    } else {
+  	      //not data url, is it a string with special needs?
+  	      if (/([\x80-\xff])/.test(payload)) {
+  	        var i = 0,
+  	          tempUiArr = new Uint8Array(payload.length),
+  	          mx = tempUiArr.length;
+  	        for (i; i < mx; ++i) tempUiArr[i] = payload.charCodeAt(i);
+  	        payload = new myBlob([tempUiArr], {
+  	          type: mimeType
+  	        });
+  	      }
+  	    }
+  	    blob = payload instanceof myBlob ? payload : new myBlob([payload], {
+  	      type: mimeType
+  	    });
+  	    function dataUrlToBlob(strUrl) {
+  	      var parts = strUrl.split(/[:;,]/),
+  	        type = parts[1],
+  	        decoder = parts[2] == "base64" ? atob : decodeURIComponent,
+  	        binData = decoder(parts.pop()),
+  	        mx = binData.length,
+  	        i = 0,
+  	        uiArr = new Uint8Array(mx);
+  	      for (i; i < mx; ++i) uiArr[i] = binData.charCodeAt(i);
+  	      return new myBlob([uiArr], {
+  	        type: type
+  	      });
+  	    }
+  	    function saver(url, winMode) {
+  	      if ('download' in anchor) {
+  	        //html5 A[download]
+  	        anchor.href = url;
+  	        anchor.setAttribute("download", fileName);
+  	        anchor.className = "download-js-link";
+  	        anchor.innerHTML = "downloading...";
+  	        anchor.style.display = "none";
+  	        document.body.appendChild(anchor);
+  	        setTimeout(function () {
+  	          anchor.click();
+  	          document.body.removeChild(anchor);
+  	          if (winMode === true) {
+  	            setTimeout(function () {
+  	              self.URL.revokeObjectURL(anchor.href);
+  	            }, 250);
+  	          }
+  	        }, 66);
+  	        return true;
+  	      }
+
+  	      // handle non-a[download] safari as best we can:
+  	      if (/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
+  	        if (/^data:/.test(url)) url = "data:" + url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
+  	        if (!window.open(url)) {
+  	          // popup blocked, offer direct download:
+  	          if (confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")) {
+  	            location.href = url;
+  	          }
+  	        }
+  	        return true;
+  	      }
+
+  	      //do iframe dataURL download (old ch+FF):
+  	      var f = document.createElement("iframe");
+  	      document.body.appendChild(f);
+  	      if (!winMode && /^data:/.test(url)) {
+  	        // force a mime that will download:
+  	        url = "data:" + url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
+  	      }
+  	      f.src = url;
+  	      setTimeout(function () {
+  	        document.body.removeChild(f);
+  	      }, 333);
+  	    } //end saver
+
+  	    if (navigator.msSaveBlob) {
+  	      // IE10+ : (has Blob, but not a[download] or URL)
+  	      return navigator.msSaveBlob(blob, fileName);
+  	    }
+  	    if (self.URL) {
+  	      // simple fast and modern way using Blob and URL:
+  	      saver(self.URL.createObjectURL(blob), true);
+  	    } else {
+  	      // handle non-Blob()+non-URL browsers:
+  	      if (typeof blob === "string" || blob.constructor === toString) {
+  	        try {
+  	          return saver("data:" + mimeType + ";base64," + self.btoa(blob));
+  	        } catch (y) {
+  	          return saver("data:" + mimeType + "," + encodeURIComponent(blob));
+  	        }
+  	      }
+
+  	      // Blob but not URL support:
+  	      reader = new FileReader();
+  	      reader.onload = function (e) {
+  	        saver(this.result);
+  	      };
+  	      reader.readAsDataURL(blob);
+  	    }
+  	    return true;
+  	  }; /* end download() */
+  	});
+  } (download$1));
+
+  var download = downloadExports;
+
+  var classnamesExports = {};
+  var classnames = {
+    get exports(){ return classnamesExports; },
+    set exports(v){ classnamesExports = v; },
+  };
 
   /*!
     Copyright (c) 2018 Jed Watson.
@@ -923,50 +931,50 @@
   */
 
   (function (module) {
-  /* global define */
-
-  (function () {
-
-    var hasOwn = {}.hasOwnProperty;
-    function classNames() {
-      var classes = [];
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (!arg) continue;
-        var argType = typeof arg;
-        if (argType === 'string' || argType === 'number') {
-          classes.push(arg);
-        } else if (Array.isArray(arg)) {
-          if (arg.length) {
-            var inner = classNames.apply(null, arg);
-            if (inner) {
-              classes.push(inner);
-            }
-          }
-        } else if (argType === 'object') {
-          if (arg.toString === Object.prototype.toString) {
-            for (var key in arg) {
-              if (hasOwn.call(arg, key) && arg[key]) {
-                classes.push(key);
-              }
-            }
-          } else {
-            classes.push(arg.toString());
-          }
-        }
-      }
-      return classes.join(' ');
-    }
-    if (module.exports) {
-      classNames.default = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-  }(classnames));
-
-  var classNames = classnames.exports;
+  	/* global define */
+
+  	(function () {
+
+  	  var hasOwn = {}.hasOwnProperty;
+  	  function classNames() {
+  	    var classes = [];
+  	    for (var i = 0; i < arguments.length; i++) {
+  	      var arg = arguments[i];
+  	      if (!arg) continue;
+  	      var argType = typeof arg;
+  	      if (argType === 'string' || argType === 'number') {
+  	        classes.push(arg);
+  	      } else if (Array.isArray(arg)) {
+  	        if (arg.length) {
+  	          var inner = classNames.apply(null, arg);
+  	          if (inner) {
+  	            classes.push(inner);
+  	          }
+  	        }
+  	      } else if (argType === 'object') {
+  	        if (arg.toString === Object.prototype.toString) {
+  	          for (var key in arg) {
+  	            if (hasOwn.call(arg, key) && arg[key]) {
+  	              classes.push(key);
+  	            }
+  	          }
+  	        } else {
+  	          classes.push(arg.toString());
+  	        }
+  	      }
+  	    }
+  	    return classes.join(' ');
+  	  }
+  	  if (module.exports) {
+  	    classNames.default = classNames;
+  	    module.exports = classNames;
+  	  } else {
+  	    window.classNames = classNames;
+  	  }
+  	})();
+  } (classnames));
+
+  var classNames = classnamesExports;
 
   function createCommonjsModule(fn, module) {
     return module = {
@@ -1156,6 +1164,26 @@
     return nativeHasOwnProperty$1.call(target, key);
   }
 
+  /**
+   * Find element index in collection.
+   *
+   * @param  {Array|Object} collection
+   * @param  {Function} matcher
+   *
+   * @return {Object}
+   */
+  function findIndex(collection, matcher) {
+    matcher = toMatcher$1(matcher);
+    let idx = isArray$3(collection) ? -1 : undefined;
+    forEach$1(collection, function (val, key) {
+      if (matcher(val, key)) {
+        idx = key;
+        return false;
+      }
+    });
+    return idx;
+  }
+
   /**
    * Iterate over collection; returning something
    * (non-undefined) will stop iteration.
@@ -1181,6 +1209,11 @@
       }
     }
   }
+  function toMatcher$1(matcher) {
+    return isFunction$1(matcher) ? matcher : e => {
+      return e === matcher;
+    };
+  }
   function identity$1(arg) {
     return arg;
   }
@@ -1221,7 +1254,7 @@
    * @param {(string|number)[]} path The path to the nested value.
    * @param {any} value The value to set.
    */
-  function set$1(target, path, value) {
+  function set$2(target, path, value) {
     let currentTarget = target;
     forEach$1(path, function (key, idx) {
       if (typeof key !== 'number' && typeof key !== 'string') {
@@ -8056,12 +8089,12 @@
   /// The default maximum length of a `TreeBuffer` node.
   const DefaultBufferLength = 1024;
   let nextPropID = 0;
-  class Range$2 {
+  let Range$2 = class Range {
     constructor(from, to) {
       this.from = from;
       this.to = to;
     }
-  }
+  };
   /// Each [node type](#common.NodeType) or [individual tree](#common.Tree)
   /// can have metadata associated with it in props. Instances of this
   /// class represent prop names.
@@ -12039,7 +12072,7 @@
     [FilterExpression$1]: 'FilterExpression',
     [ArithmeticExpression$1]: 'ArithmeticExpression'
   };
-  class ValueProducer$1 {
+  let ValueProducer$1 = class ValueProducer {
     /**
      * @param { Function } fn
      */
@@ -12058,7 +12091,7 @@
     static of(fn) {
       return new ValueProducer$1(fn);
     }
-  }
+  };
   const dateTimeLiterals$1 = {
     'date and time': 1,
     'date': 1,
@@ -12066,7 +12099,7 @@
     'duration': 1
   };
   const dateTimeIdentifiers$1 = Object.keys(dateTimeLiterals$1);
-  class Variables$1 {
+  let Variables$1 = class Variables {
     constructor({
       name = 'Expressions',
       tokens = [],
@@ -12264,7 +12297,7 @@
         raw
       });
     }
-  }
+  };
 
   /**
    * @param { string } name
@@ -12749,11 +12782,11 @@
     }
     return null;
   }
-  class Range$1 {
+  let Range$1 = class Range {
     constructor(props) {
       Object.assign(this, props);
     }
-  }
+  };
   function isNumber$1(obj) {
     return typeof obj === 'number';
   }
@@ -12839,7 +12872,7 @@
       if (arguments.length !== 1) {
         return null;
       }
-      return toString$1(from);
+      return toString$2(from);
     }, ['any']),
     // date(from) => date string
     // date(from) => date and time
@@ -13365,17 +13398,17 @@
   }
   function toKeyString(key) {
     if (typeof key === 'string' && /\W/.test(key)) {
-      return toString$1(key, true);
+      return toString$2(key, true);
     }
     return key;
   }
   function toDeepString(obj) {
-    return toString$1(obj, true);
+    return toString$2(obj, true);
   }
   function escapeStr(str) {
     return str.replace(/("|\\)/g, '\\$1');
   }
-  function toString$1(obj, wrap = false) {
+  function toString$2(obj, wrap = false) {
     var _a, _b, _c, _d;
     const type = getType(obj);
     if (type === 'nil') {
@@ -18879,7 +18912,7 @@
     }
   }
   Validator.$inject = [];
-  class FormFieldRegistry$1 {
+  let FormFieldRegistry$1 = class FormFieldRegistry {
     constructor(eventBus) {
       this._eventBus = eventBus;
       this._formFields = {};
@@ -18925,7 +18958,7 @@
       this._ids.clear();
       this._keys.clear();
     }
-  }
+  };
   FormFieldRegistry$1.$inject = ['eventBus'];
 
   /**
@@ -18965,7 +18998,7 @@
     } while (cursor.next());
     return Array.from(variables);
   }
-  function isExpression$2(value) {
+  function isExpression$1(value) {
     return isString$3(value) && value.startsWith('=');
   }
 
@@ -19016,7 +19049,10 @@
     [VALUES_SOURCES.INPUT]: ['valuesKey']
   };
   const VALUES_SOURCES_DEFAULTS = {
-    [VALUES_SOURCES.STATIC]: [],
+    [VALUES_SOURCES.STATIC]: [{
+      label: 'Value',
+      value: 'value'
+    }],
     [VALUES_SOURCES.INPUT]: ''
   };
 
@@ -19125,13 +19161,7 @@
     // remove duplicates
     return Array.from(new Set(variables));
   }
-
-  // helper ///////////////
-
-  function isExpression$1(value) {
-    return isString$3(value) && value.startsWith('=');
-  }
-  class Importer$1 {
+  let Importer$1 = class Importer {
     /**
      * @constructor
      * @param { import('../core').FormFieldRegistry } formFieldRegistry
@@ -19260,7 +19290,7 @@
         return initializedData;
       }, data);
     }
-  }
+  };
   Importer$1.$inject = ['formFieldRegistry', 'formFields'];
   var importModule$1 = {
     importer: ['type', Importer$1]
@@ -19439,15 +19469,14 @@
       })
     });
   }
-  Button.create = function (options = {}) {
-    return {
-      action: 'submit',
-      ...options
-    };
-  };
+  Button.create = (options = {}) => ({
+    action: 'submit',
+    ...options
+  });
   Button.type = type$b;
   Button.label = 'Button';
   Button.keyed = true;
+  Button.group = 'action';
   const FormRenderContext = D$1({
     Empty: props => {
       return null;
@@ -19459,6 +19488,7 @@
       return props.children;
     }
   });
+  var FormRenderContext$1 = FormRenderContext;
 
   /**
    * @param {string} type
@@ -19471,6 +19501,7 @@
     getService: getService$2,
     formId: null
   });
+  var FormContext$1 = FormContext;
   function Description$2(props) {
     const {
       description
@@ -19542,7 +19573,7 @@
     };
     const {
       formId
-    } = F$1(FormContext);
+    } = F$1(FormContext$1);
     return e$1("div", {
       class: classNames(formFieldClasses(type$a, {
         errors,
@@ -19569,11 +19600,9 @@
       })]
     });
   }
-  Checkbox$1.create = function (options = {}) {
-    return {
-      ...options
-    };
-  };
+  Checkbox$1.create = (options = {}) => ({
+    ...options
+  });
   Checkbox$1.type = type$a;
   Checkbox$1.label = 'Checkbox';
   Checkbox$1.keyed = true;
@@ -19581,10 +19610,11 @@
   Checkbox$1.sanitizeValue = ({
     value
   }) => value === true;
+  Checkbox$1.group = 'selection';
   function useService$2(type, strict) {
     const {
       getService
-    } = F$1(FormContext);
+    } = F$1(FormContext$1);
     return getService(type, strict);
   }
 
@@ -19680,8 +19710,8 @@
     if (is12h) {
       const isPM = workingString.includes('pm');
       const digits = workingString.match(/\d+/g);
-      const displayHour = parseInt(digits?.[0]);
-      const minute = parseInt(digits?.[1]) || 0;
+      const displayHour = parseInt(digits && digits[0]);
+      const minute = parseInt(digits && digits[1]) || 0;
       const isValidDisplayHour = isNumber$3(displayHour) && displayHour >= 1 && displayHour <= 12;
       const isValidMinute = minute >= 0 && minute <= 59;
       if (!isValidDisplayHour || !isValidMinute) return null;
@@ -19689,8 +19719,8 @@
       return hour * 60 + minute;
     } else {
       const digits = workingString.match(/\d+/g);
-      const hour = parseInt(digits?.[0]);
-      const minute = parseInt(digits?.[1]);
+      const hour = parseInt(digits && digits[0]);
+      const minute = parseInt(digits && digits[1]);
       const isValidHour = isNumber$3(hour) && hour >= 0 && hour <= 23;
       const isValidMinute = isNumber$3(minute) && minute >= 0 && minute <= 59;
       if (!isValidHour || !isValidMinute) return null;
@@ -19891,7 +19921,7 @@
     } = useValuesAsync(field);
     const {
       formId
-    } = F$1(FormContext);
+    } = F$1(FormContext$1);
     return e$1("div", {
       class: classNames(formFieldClasses(type$9, {
         errors,
@@ -19923,13 +19953,18 @@
       })]
     });
   }
-  Checklist.create = function (options = {}) {
-    if (options.valuesKey) return options;
-    return {
-      values: [{
+  Checklist.create = (options = {}) => {
+    const defaults = {};
+
+    // provide default values if valuesKey isn't set
+    if (!options.valuesKey) {
+      defaults.values = [{
         label: 'Value',
         value: 'value'
-      }],
+      }];
+    }
+    return {
+      ...defaults,
       ...options
     };
   };
@@ -19938,6 +19973,7 @@
   Checklist.keyed = true;
   Checklist.emptyValue = [];
   Checklist.sanitizeValue = sanitizeMultiSelectValue;
+  Checklist.group = 'selection';
 
   /**
    * Check if condition is met with given variables.
@@ -19980,7 +20016,7 @@
     const {
       Element,
       Empty
-    } = F$1(FormRenderContext);
+    } = F$1(FormRenderContext$1);
     const FormFieldComponent = formFields.get(field.type);
     if (!FormFieldComponent) {
       throw new Error(`cannot render field <${field.type}>`);
@@ -20011,7 +20047,7 @@
     const {
       Children,
       Empty
-    } = F$1(FormRenderContext);
+    } = F$1(FormRenderContext$1);
     const {
       field
     } = props;
@@ -20030,16 +20066,16 @@
       }), components.length ? null : e$1(Empty, {})]
     });
   }
-  Default.create = function (options = {}) {
-    return {
-      components: [],
-      ...options
-    };
-  };
+  Default.create = (options = {}) => ({
+    components: [],
+    ...options
+  });
   Default.type = 'default';
   Default.keyed = false;
-  function _extends$h() {
-    _extends$h = Object.assign ? Object.assign.bind() : function (target) {
+  Default.label = null;
+  Default.group = null;
+  function _extends$j() {
+    _extends$j = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -20050,12 +20086,12 @@
       }
       return target;
     };
-    return _extends$h.apply(this, arguments);
+    return _extends$j.apply(this, arguments);
   }
   var CalendarIcon = ({
     styles = {},
     ...props
-  }) => /*#__PURE__*/React.createElement("svg", _extends$h({
+  }) => /*#__PURE__*/React.createElement("svg", _extends$j({
     width: "14",
     height: "15",
     viewBox: "0 0 28 30",
@@ -20064,8 +20100,8 @@
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M19 2H9V0H7v2H2a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V4a2 2 0 00-2-2h-5V0h-2v2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7zm-5 4v17h24V11H2z",
-    fill: "currentColor"
+    fill: "currentColor",
+    d: "M19 2H9V0H7v2H2a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V4a2 2 0 00-2-2h-5V0h-2v2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7zm-5 4v17h24V11H2z"
   }));
   function InputAdorner(props) {
     const {
@@ -20077,10 +20113,10 @@
       disabled,
       hasErrors
     } = props;
-    const onAdornmentClick = () => inputRef?.current?.focus();
+    const onAdornmentClick = () => inputRef && inputRef.current && inputRef.current.focus();
     return e$1("div", {
       class: classNames('fjs-input-group', {
-        'disabled': disabled
+        'fjs-disabled': disabled
       }, {
         'hasErrors': hasErrors
       }),
@@ -20133,14 +20169,10 @@
         dateFormat: 'm/d/Y',
         static: true,
         clickOpens: false,
+        // TODO: support dates prior to 1900 (https://github.com/bpmn-io/form-js/issues/533)
+        minDate: disallowPassedDates ? 'today' : '01/01/1900',
         errorHandler: () => {/* do nothing, we expect the values to sometimes be erronous and we don't want warnings polluting the console */}
       };
-      if (disallowPassedDates) {
-        config = {
-          ...config,
-          minDate: 'today'
-        };
-      }
       const instance = flatpickr(dateInputRef.current, config);
       setFlatpickrInstance(instance);
       const onCalendarFocusOut = e => {
@@ -20224,7 +20256,7 @@
             class: 'fjs-input',
             disabled: disabled,
             placeholder: "mm/dd/yyyy",
-            autoComplete: "false",
+            autoComplete: "off",
             onFocus: onInputFocus,
             onKeyDown: onInputKeyDown,
             onMouseDown: e => !flatpickrInstance.isOpen && flatpickrInstance.open(),
@@ -20236,8 +20268,8 @@
       })]
     });
   }
-  function _extends$g() {
-    _extends$g = Object.assign ? Object.assign.bind() : function (target) {
+  function _extends$i() {
+    _extends$i = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -20248,25 +20280,25 @@
       }
       return target;
     };
-    return _extends$g.apply(this, arguments);
+    return _extends$i.apply(this, arguments);
   }
   var ClockIcon = ({
     styles = {},
     ...props
-  }) => /*#__PURE__*/React.createElement("svg", _extends$g({
+  }) => /*#__PURE__*/React.createElement("svg", _extends$i({
     width: "16",
     height: "16",
     viewBox: "0 0 28 29",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z",
-    fill: "currentColor"
+    fill: "currentColor",
+    d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M6.222 25.64A14 14 0 1021.778 2.36 14 14 0 006.222 25.64zM7.333 4.023a12 12 0 1113.334 19.955A12 12 0 017.333 4.022z",
-    fill: "currentColor"
+    fill: "currentColor",
+    d: "M6.222 25.64A14 14 0 1021.778 2.36 14 14 0 006.222 25.64zM7.333 4.023a12 12 0 1113.334 19.955A12 12 0 017.333 4.022z"
   }));
   function useKeyDownAction(targetKey, action, listenerElement = window) {
     function downHandler({
@@ -20287,7 +20319,7 @@
   const NOOP = () => {};
   function DropdownList(props) {
     const {
-      keyEventsListener = window,
+      listenerElement = window,
       values = [],
       getLabel = DEFAULT_LABEL_GETTER,
       onValueSelected = NOOP,
@@ -20317,18 +20349,18 @@
         changeFocusedValueIndex(-1);
         setMouseControl(false);
       }
-    }, keyEventsListener);
+    }, listenerElement);
     useKeyDownAction('ArrowDown', () => {
       if (values.length) {
         changeFocusedValueIndex(1);
         setMouseControl(false);
       }
-    }, keyEventsListener);
+    }, listenerElement);
     useKeyDownAction('Enter', () => {
       if (focusedItem) {
         onValueSelected(focusedItem);
       }
-    }, keyEventsListener);
+    }, listenerElement);
     y(() => {
       const individualEntries = dropdownContainer.current.children;
       if (individualEntries.length && !mouseControl) {
@@ -20500,7 +20532,7 @@
             value: rawValue,
             disabled: disabled,
             placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
-            autoComplete: "false",
+            autoComplete: "off",
             onFocus: () => useDropdown && setDropdownIsOpen(true),
             onClick: () => useDropdown && setDropdownIsOpen(true)
 
@@ -20551,7 +20583,7 @@
     } = validate;
     const {
       formId
-    } = F$1(FormContext);
+    } = F$1(FormContext$1);
     const getNullDateTime = () => ({
       date: new Date(Date.parse(null)),
       time: null
@@ -20692,12 +20724,12 @@
       })]
     });
   }
-  Datetime.create = function (options = {}) {
-    const newOptions = {};
-    set$1(newOptions, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
-    set$1(newOptions, DATE_LABEL_PATH, 'Date');
+  Datetime.create = (options = {}) => {
+    const defaults = {};
+    set$2(defaults, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
+    set$2(defaults, DATE_LABEL_PATH, 'Date');
     return {
-      ...newOptions,
+      ...defaults,
       ...options
     };
   };
@@ -20705,6 +20737,8 @@
   Datetime.keyed = true;
   Datetime.emptyValue = null;
   Datetime.sanitizeValue = sanitizeDateTimePickerValue;
+  Datetime.label = 'Date time';
+  Datetime.group = 'basic-input';
 
   /**
    * This file must not be changed or exchanged.
@@ -20866,8 +20900,8 @@
   function isExpression(value) {
     return isString$3(value) && value.startsWith('=');
   }
-  function _extends$f() {
-    _extends$f = Object.assign ? Object.assign.bind() : function (target) {
+  function _extends$h() {
+    _extends$h = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -20878,12 +20912,12 @@
       }
       return target;
     };
-    return _extends$f.apply(this, arguments);
+    return _extends$h.apply(this, arguments);
   }
   var ImagePlaceholder = ({
     styles = {},
     ...props
-  }) => /*#__PURE__*/React.createElement("svg", _extends$f({
+  }) => /*#__PURE__*/React.createElement("svg", _extends$h({
     width: "64",
     height: "64",
     viewBox: "0 0 1280 1280",
@@ -20922,7 +20956,7 @@
     const altText = useExpressionValue(alt);
     const {
       formId
-    } = F$1(FormContext);
+    } = F$1(FormContext$1);
     return e$1("div", {
       class: formFieldClasses(type$7),
       children: e$1("div", {
@@ -20941,13 +20975,71 @@
       })
     });
   }
-  Image.create = function (options = {}) {
-    return {
-      ...options
-    };
-  };
+  Image.create = (options = {}) => ({
+    ...options
+  });
   Image.type = type$7;
   Image.keyed = false;
+  Image.label = 'Image view';
+  Image.group = 'presentation';
+  function _extends$g() {
+    _extends$g = 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$g.apply(this, arguments);
+  }
+  var AngelDownIcon = ({
+    styles = {},
+    ...props
+  }) => /*#__PURE__*/React.createElement("svg", _extends$g({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "8",
+    height: "8"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    stroke: "currentColor",
+    strokeWidth: ".5",
+    d: "M7.75 1.336L4 6.125.258 1.335 0 1.54l4 5.125L8 1.54zm0 0"
+  }));
+  function _extends$f() {
+    _extends$f = 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$f.apply(this, arguments);
+  }
+  var AngelUpIcon = ({
+    styles = {},
+    ...props
+  }) => /*#__PURE__*/React.createElement("svg", _extends$f({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "8",
+    height: "8"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    stroke: "currentColor",
+    strokeWidth: ".5",
+    d: "M7.75 6.664L4 1.875.258 6.665 0 6.46l4-5.125L8 6.46zm0 0"
+  }));
   const type$6 = 'number';
   function Numberfield(props) {
     const {
@@ -21075,7 +21167,7 @@
     };
     const {
       formId
-    } = F$1(FormContext);
+    } = F$1(FormContext$1);
     return e$1("div", {
       class: formFieldClasses(type$6, {
         errors,
@@ -21091,7 +21183,7 @@
         post: suffixAdorner,
         children: e$1("div", {
           class: classNames('fjs-vertical-group', {
-            'disabled': disabled
+            'fjs-disabled': disabled
           }, {
             'hasErrors': errors.length
           }),
@@ -21113,22 +21205,24 @@
             value: displayValue
           }), e$1("div", {
             class: classNames('fjs-number-arrow-container', {
-              'disabled': disabled
+              'fjs-disabled': disabled
             }),
             children: [e$1("button", {
               class: "fjs-number-arrow-up",
               type: "button",
+              "aria-label": "Increment",
               onClick: () => increment(),
               tabIndex: -1,
-              children: "\u02C4"
+              children: e$1(AngelUpIcon, {})
             }), e$1("div", {
               class: "fjs-number-arrow-separator"
             }), e$1("button", {
               class: "fjs-number-arrow-down",
               type: "button",
+              "aria-label": "Decrement",
               onClick: () => decrement(),
               tabIndex: -1,
-              children: "\u02C5"
+              children: e$1(AngelDownIcon, {})
             })]
           })]
         })
@@ -21139,7 +21233,9 @@
       })]
     });
   }
-  Numberfield.create = (options = {}) => options;
+  Numberfield.create = (options = {}) => ({
+    ...options
+  });
   Numberfield.sanitizeValue = ({
     value,
     formField
@@ -21157,6 +21253,7 @@
   Numberfield.keyed = true;
   Numberfield.label = 'Number';
   Numberfield.emptyValue = null;
+  Numberfield.group = 'basic-input';
   const type$5 = 'radio';
   function Radio(props) {
     const {
@@ -21186,7 +21283,7 @@
     } = useValuesAsync(field);
     const {
       formId
-    } = F$1(FormContext);
+    } = F$1(FormContext$1);
     return e$1("div", {
       class: formFieldClasses(type$5, {
         errors,
@@ -21220,12 +21317,17 @@
     });
   }
   Radio.create = function (options = {}) {
-    if (options.valuesKey) return options;
-    return {
-      values: [{
+    const defaults = {};
+
+    // provide default values if valuesKey isn't set
+    if (!options.valuesKey) {
+      defaults.values = [{
         label: 'Value',
         value: 'value'
-      }],
+      }];
+    }
+    return {
+      ...defaults,
       ...options
     };
   };
@@ -21234,38 +21336,306 @@
   Radio.keyed = true;
   Radio.emptyValue = null;
   Radio.sanitizeValue = sanitizeSingleSelectValue;
+  Radio.group = 'selection';
+  function _extends$e() {
+    _extends$e = 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$e.apply(this, arguments);
+  }
+  var XMarkIcon = ({
+    styles = {},
+    ...props
+  }) => /*#__PURE__*/React.createElement("svg", _extends$e({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "8",
+    height: "8"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    stroke: "currentColor",
+    strokeWidth: ".5",
+    d: "M4 3.766L7.43.336l.234.234L4.234 4l3.43 3.43-.234.234L4 4.234.57 7.664.336 7.43 3.766 4 .336.57.57.336zm0 0"
+  }));
+  function SearchableSelect(props) {
+    const {
+      id,
+      disabled,
+      errors,
+      field,
+      value
+    } = props;
+    const {
+      formId
+    } = F$1(FormContext$1);
+    const [filter, setFilter] = l$2('');
+    const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
+    const [shouldApplyFilter, setShouldApplyFilter] = l$2(true);
+    const [isEscapeClosed, setIsEscapeClose] = l$2(false);
+    const searchbarRef = s$1();
+    const {
+      state: loadState,
+      values: options
+    } = useValuesAsync(field);
+
+    // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
+    const valueToOptionMap = d(() => Object.assign({}, ...options.map((o, x) => ({
+      [o.value]: options[x]
+    }))), [options]);
+    const valueLabel = d(() => value && valueToOptionMap[value] && valueToOptionMap[value].label || '', [value, valueToOptionMap]);
+
+    // whenever we change the underlying value, set the label to it
+    y(() => {
+      setFilter(valueLabel);
+    }, [valueLabel]);
+    const filteredOptions = d(() => {
+      if (loadState === LOAD_STATES.LOADED) {
+        return shouldApplyFilter ? options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase())) : options;
+      }
+      return [];
+    }, [filter, loadState, options, shouldApplyFilter]);
+    const onChange = ({
+      target
+    }) => {
+      setIsEscapeClose(false);
+      setIsDropdownExpanded(true);
+      setShouldApplyFilter(true);
+      setFilter(target.value || '');
+    };
+    const setValue = A$1(option => {
+      setFilter(option && option.label || '');
+      props.onChange({
+        value: option && option.value || null,
+        field
+      });
+    }, [field, props]);
+    const onInputKeyDown = A$1(keyDownEvent => {
+      switch (keyDownEvent.key) {
+        case 'ArrowUp':
+          keyDownEvent.preventDefault();
+          break;
+        case 'ArrowDown':
+          {
+            if (!isDropdownExpanded) {
+              setIsDropdownExpanded(true);
+              setShouldApplyFilter(false);
+            }
+            keyDownEvent.preventDefault();
+            break;
+          }
+        case 'Escape':
+          setIsEscapeClose(true);
+          break;
+        case 'Enter':
+          if (isEscapeClosed) {
+            setIsEscapeClose(false);
+          }
+          break;
+      }
+    }, [isDropdownExpanded, isEscapeClosed]);
+    const displayState = d(() => {
+      const ds = {};
+      ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+      ds.displayCross = ds.componentReady && value !== null && value !== undefined;
+      ds.displayDropdown = !disabled && isDropdownExpanded && !isEscapeClosed;
+      return ds;
+    }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, value]);
+    const onAngelMouseDown = A$1(e => {
+      setIsEscapeClose(false);
+      setIsDropdownExpanded(!isDropdownExpanded);
+      const searchbar = searchbarRef.current;
+      isDropdownExpanded ? searchbar.blur() : searchbar.focus();
+      e.preventDefault();
+    }, [isDropdownExpanded]);
+    return e$1(d$1, {
+      children: [e$1("div", {
+        id: prefixId(`${id}`, formId),
+        class: classNames('fjs-input-group', {
+          'disabled': disabled
+        }, {
+          'hasErrors': errors.length
+        }),
+        children: [e$1("input", {
+          disabled: disabled,
+          class: "fjs-input",
+          ref: searchbarRef,
+          id: prefixId(`${id}-search`, formId),
+          onChange: onChange,
+          type: "text",
+          value: filter,
+          placeholder: 'Search',
+          autoComplete: "off",
+          onKeyDown: e => onInputKeyDown(e),
+          onMouseDown: () => {
+            setIsEscapeClose(false);
+            setIsDropdownExpanded(true);
+            setShouldApplyFilter(false);
+          },
+          onFocus: () => {
+            setIsDropdownExpanded(true);
+            setShouldApplyFilter(false);
+          },
+          onBlur: () => {
+            setIsDropdownExpanded(false);
+            setFilter(valueLabel);
+          }
+        }), displayState.displayCross && e$1("span", {
+          class: "fjs-select-cross",
+          onMouseDown: e => {
+            setValue(null);
+            e.preventDefault();
+          },
+          children: [e$1(XMarkIcon, {}), " "]
+        }), e$1("span", {
+          class: "fjs-select-arrow",
+          onMouseDown: e => onAngelMouseDown(e),
+          children: displayState.displayDropdown ? e$1(AngelUpIcon, {}) : e$1(AngelDownIcon, {})
+        })]
+      }), e$1("div", {
+        class: "fjs-select-anchor",
+        children: displayState.displayDropdown && e$1(DropdownList, {
+          values: filteredOptions,
+          getLabel: o => o.label,
+          onValueSelected: o => {
+            setValue(o);
+            setIsDropdownExpanded(false);
+          },
+          listenerElement: searchbarRef.current
+        })
+      })]
+    });
+  }
+  function SimpleSelect(props) {
+    const {
+      id,
+      disabled,
+      errors,
+      field,
+      value
+    } = props;
+    const {
+      formId
+    } = F$1(FormContext$1);
+    const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
+    const selectRef = s$1();
+    const {
+      state: loadState,
+      values: options
+    } = useValuesAsync(field);
+
+    // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
+    const valueToOptionMap = d(() => Object.assign({}, ...options.map((o, x) => ({
+      [o.value]: options[x]
+    }))), [options]);
+    const valueLabel = d(() => value && valueToOptionMap[value] && valueToOptionMap[value].label || '', [value, valueToOptionMap]);
+    const setValue = A$1(option => {
+      props.onChange({
+        value: option && option.value || null,
+        field
+      });
+    }, [field, props]);
+    const displayState = d(() => {
+      const ds = {};
+      ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+      ds.displayCross = ds.componentReady && value !== null && value !== undefined;
+      ds.displayDropdown = !disabled && isDropdownExpanded;
+      return ds;
+    }, [disabled, isDropdownExpanded, loadState, value]);
+    const onMouseDown = A$1(e => {
+      const select = selectRef.current;
+      setIsDropdownExpanded(!isDropdownExpanded);
+      if (isDropdownExpanded) {
+        select.blur();
+      } else {
+        select.focus();
+      }
+      e.preventDefault();
+    }, [isDropdownExpanded]);
+    const initialFocusIndex = d(() => value && findIndex(options, o => o.value === value) || 0, [options, value]);
+    return e$1(d$1, {
+      children: [e$1("div", {
+        ref: selectRef,
+        id: prefixId(`${id}`, formId),
+        class: classNames('fjs-input-group', {
+          'disabled': disabled
+        }, {
+          'hasErrors': errors.length
+        }),
+        onFocus: () => setIsDropdownExpanded(true),
+        onBlur: () => setIsDropdownExpanded(false),
+        onMouseDown: e => onMouseDown(e),
+        tabIndex: disabled ? undefined : 0,
+        children: [e$1("div", {
+          class: classNames('fjs-select-display', {
+            'fjs-select-placeholder': !value
+          }),
+          id: prefixId(`${id}-display`, formId),
+          children: valueLabel || 'Select'
+        }), displayState.displayCross && e$1("span", {
+          class: "fjs-select-cross",
+          onMouseDown: e => {
+            setValue(null);
+            e.stopPropagation();
+          },
+          children: e$1(XMarkIcon, {})
+        }), e$1("span", {
+          class: "fjs-select-arrow",
+          children: displayState.displayDropdown ? e$1(AngelUpIcon, {}) : e$1(AngelDownIcon, {})
+        })]
+      }), e$1("div", {
+        class: "fjs-select-anchor",
+        children: displayState.displayDropdown && e$1(DropdownList, {
+          values: options,
+          getLabel: o => o.label,
+          initialFocusIndex: initialFocusIndex,
+          onValueSelected: o => {
+            setValue(o);
+            setIsDropdownExpanded(false);
+          },
+          listenerElement: selectRef.current
+        })
+      })]
+    });
+  }
   const type$4 = 'select';
   function Select$1(props) {
     const {
       disabled,
       errors = [],
       field,
+      onChange,
       value
     } = props;
     const {
       description,
       id,
       label,
+      searchable = false,
       validate = {}
     } = field;
     const {
       required
     } = validate;
-    const onChange = ({
-      target
-    }) => {
-      props.onChange({
-        field,
-        value: target.value === '' ? null : target.value
-      });
-    };
-    const {
-      state: loadState,
-      values: options
-    } = useValuesAsync(field);
     const {
       formId
-    } = F$1(FormContext);
+    } = F$1(FormContext$1);
+    const selectProps = d(() => ({
+      id,
+      disabled,
+      errors,
+      field,
+      value,
+      onChange
+    }), [disabled, errors, field, id, value, onChange]);
     return e$1("div", {
       class: formFieldClasses(type$4, {
         errors,
@@ -21275,20 +21645,10 @@
         id: prefixId(id, formId),
         label: label,
         required: required
-      }), e$1("select", {
-        class: "fjs-select",
-        disabled: disabled,
-        id: prefixId(id, formId),
-        onChange: onChange,
-        value: value || '',
-        children: [e$1("option", {
-          value: ""
-        }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
-          return e$1("option", {
-            value: option.value,
-            children: option.label
-          }, `${id}-${index}`);
-        })]
+      }), searchable ? e$1(SearchableSelect, {
+        ...selectProps
+      }) : e$1(SimpleSelect, {
+        ...selectProps
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
@@ -21296,13 +21656,18 @@
       })]
     });
   }
-  Select$1.create = function (options = {}) {
-    if (options.valuesKey) return options;
-    return {
-      values: [{
+  Select$1.create = (options = {}) => {
+    const defaults = {};
+
+    // provide default values if valuesKey isn't set
+    if (!options.valuesKey) {
+      defaults.values = [{
         label: 'Value',
         value: 'value'
-      }],
+      }];
+    }
+    return {
+      ...defaults,
       ...options
     };
   };
@@ -21311,34 +21676,7 @@
   Select$1.keyed = true;
   Select$1.emptyValue = null;
   Select$1.sanitizeValue = sanitizeSingleSelectValue;
-  function _extends$e() {
-    _extends$e = 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$e.apply(this, arguments);
-  }
-  var CloseIcon = ({
-    styles = {},
-    ...props
-  }) => /*#__PURE__*/React.createElement("svg", _extends$e({
-    width: "16",
-    height: "16",
-    fill: "none",
-    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",
-    fill: "currentColor"
-  }));
+  Select$1.group = 'selection';
   const type$3 = 'taglist';
   function Taglist(props) {
     const {
@@ -21354,7 +21692,7 @@
     } = field;
     const {
       formId
-    } = F$1(FormContext);
+    } = F$1(FormContext$1);
     const [filter, setFilter] = l$2('');
     const [filteredOptions, setFilteredOptions] = l$2([]);
     const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
@@ -21442,6 +21780,7 @@
         searchbarRef.current.focus();
       }
     };
+    const shouldDisplayDropdown = d(() => !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed, [disabled, isDropdownExpanded, isEscapeClosed, loadState]);
     return e$1("div", {
       class: formFieldClasses(type$3, {
         errors,
@@ -21452,23 +21791,25 @@
         id: prefixId(`${id}-search`, formId)
       }), e$1("div", {
         class: classNames('fjs-taglist', {
-          'disabled': disabled
+          'fjs-disabled': disabled
         }),
-        children: [!disabled && loadState === LOAD_STATES.LOADED && e$1("div", {
+        children: [loadState === LOAD_STATES.LOADED && e$1("div", {
           class: "fjs-taglist-tags",
           children: values.map(v => {
             return e$1("div", {
-              class: "fjs-taglist-tag",
+              class: classNames('fjs-taglist-tag', {
+                'fjs-disabled': disabled
+              }),
               onMouseDown: e => e.preventDefault(),
               children: [e$1("span", {
                 class: "fjs-taglist-tag-label",
                 children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
-              }), e$1("button", {
+              }), !disabled && e$1("button", {
                 type: "button",
                 title: "Remove tag",
                 class: "fjs-taglist-tag-remove",
                 onClick: event => onTagRemoveClick(event, v),
-                children: e$1(CloseIcon, {})
+                children: e$1(XMarkIcon, {})
               })]
             });
           })
@@ -21480,7 +21821,7 @@
           onChange: onFilterChange,
           type: "text",
           value: filter,
-          placeholder: 'Search',
+          placeholder: disabled ? '' : 'Search',
           autoComplete: "off",
           onKeyDown: e => onInputKeyDown(e),
           onMouseDown: () => setIsEscapeClose(false),
@@ -21492,7 +21833,7 @@
         })]
       }), e$1("div", {
         class: "fjs-taglist-anchor",
-        children: !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed && e$1(DropdownList, {
+        children: shouldDisplayDropdown && e$1(DropdownList, {
           values: filteredOptions,
           getLabel: o => o.label,
           onValueSelected: o => selectValue(o.value),
@@ -21506,21 +21847,219 @@
       })]
     });
   }
-  Taglist.create = function (options = {}) {
-    if (options.valuesKey) return options;
-    return {
-      values: [{
+  Taglist.create = (options = {}) => {
+    const defaults = {};
+
+    // provide default values if valuesKey isn't set
+    if (!options.valuesKey) {
+      defaults.values = [{
         label: 'Value',
         value: 'value'
-      }],
+      }];
+    }
+    return {
+      ...defaults,
       ...options
     };
   };
   Taglist.type = type$3;
-  Taglist.label = 'Taglist';
+  Taglist.label = 'Tag list';
   Taglist.keyed = true;
   Taglist.emptyValue = [];
   Taglist.sanitizeValue = sanitizeMultiSelectValue;
+  Taglist.group = 'selection';
+  const type$2 = 'text';
+  function Text$2(props) {
+    const {
+      field,
+      disableLinks
+    } = props;
+    const {
+      text = ''
+    } = field;
+    const textValue = useExpressionValue(text) || '';
+    const componentOverrides = disableLinks ? {
+      'a': DisabledLink
+    } : {};
+    return e$1("div", {
+      class: formFieldClasses(type$2),
+      children: e$1(Markup, {
+        markup: safeMarkdown(textValue),
+        components: componentOverrides,
+        trim: false
+      })
+    });
+  }
+  Text$2.create = (options = {}) => ({
+    text: '# Text',
+    ...options
+  });
+  Text$2.type = type$2;
+  Text$2.keyed = false;
+  Text$2.group = 'presentation';
+  Text$2.label = 'Text view';
+  function DisabledLink({
+    href,
+    children
+  }) {
+    return e$1("a", {
+      class: "fjs-disabled-link",
+      href: href,
+      tabIndex: -1,
+      children: children
+    });
+  }
+  const type$1 = 'textfield';
+  function Textfield$1(props) {
+    const {
+      disabled,
+      errors = [],
+      field,
+      value = ''
+    } = props;
+    const {
+      description,
+      id,
+      label,
+      appearance = {},
+      validate = {}
+    } = field;
+    const {
+      prefixAdorner,
+      suffixAdorner
+    } = appearance;
+    const {
+      required
+    } = validate;
+    const onChange = ({
+      target
+    }) => {
+      props.onChange({
+        field,
+        value: target.value
+      });
+    };
+    const {
+      formId
+    } = F$1(FormContext$1);
+    return e$1("div", {
+      class: formFieldClasses(type$1, {
+        errors,
+        disabled
+      }),
+      children: [e$1(Label$1, {
+        id: prefixId(id, formId),
+        label: label,
+        required: required
+      }), e$1(InputAdorner, {
+        disabled: disabled,
+        pre: prefixAdorner,
+        post: suffixAdorner,
+        children: e$1("input", {
+          class: "fjs-input",
+          disabled: disabled,
+          id: prefixId(id, formId),
+          onInput: onChange,
+          type: "text",
+          value: value
+        })
+      }), e$1(Description$2, {
+        description: description
+      }), e$1(Errors, {
+        errors: errors
+      })]
+    });
+  }
+  Textfield$1.create = (options = {}) => ({
+    ...options
+  });
+  Textfield$1.type = type$1;
+  Textfield$1.label = 'Text field';
+  Textfield$1.keyed = true;
+  Textfield$1.emptyValue = '';
+  Textfield$1.sanitizeValue = ({
+    value
+  }) => isArray$3(value) || isObject$1(value) ? '' : String(value);
+  Textfield$1.group = 'basic-input';
+  const type = 'textarea';
+  function Textarea(props) {
+    const {
+      disabled,
+      errors = [],
+      field,
+      value = ''
+    } = props;
+    const {
+      description,
+      id,
+      label,
+      validate = {}
+    } = field;
+    const {
+      required
+    } = validate;
+    const textareaRef = s$1();
+    const onInput = ({
+      target
+    }) => {
+      props.onChange({
+        field,
+        value: target.value
+      });
+    };
+    const autoSizeTextarea = A$1(textarea => {
+      // Ensures the textarea shrinks back, and improves resizing behavior consistency
+      textarea.style.height = '0px';
+      const computed = window.getComputedStyle(textarea);
+      const calculatedHeight = parseInt(computed.getPropertyValue('border-top-width')) + parseInt(computed.getPropertyValue('padding-top')) + textarea.scrollHeight + parseInt(computed.getPropertyValue('padding-bottom')) + parseInt(computed.getPropertyValue('border-bottom-width'));
+      const minHeight = 75;
+      const maxHeight = 350;
+      const displayHeight = Math.max(Math.min(calculatedHeight, maxHeight), minHeight);
+      textarea.style.height = `${displayHeight}px`;
+
+      // Overflow is hidden by default to hide scrollbar flickering
+      textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
+    }, []);
+    y(() => {
+      autoSizeTextarea(textareaRef.current);
+    }, [autoSizeTextarea, value]);
+    const {
+      formId
+    } = F$1(FormContext$1);
+    return e$1("div", {
+      class: formFieldClasses(type, {
+        errors,
+        disabled
+      }),
+      children: [e$1(Label$1, {
+        id: prefixId(id, formId),
+        label: label,
+        required: required
+      }), e$1("textarea", {
+        class: "fjs-textarea",
+        disabled: disabled,
+        id: prefixId(id, formId),
+        onInput: onInput,
+        value: value,
+        ref: textareaRef
+      }), e$1(Description$2, {
+        description: description
+      }), e$1(Errors, {
+        errors: errors
+      })]
+    });
+  }
+  Textarea.create = (options = {}) => ({
+    ...options
+  });
+  Textarea.type = type;
+  Textarea.label = 'Text area';
+  Textarea.keyed = true;
+  Textarea.emptyValue = '';
+  Textarea.sanitizeValue = ({
+    value
+  }) => isArray$3(value) || isObject$1(value) ? '' : String(value);
+  Textarea.group = 'basic-input';
   function _extends$d() {
     _extends$d = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -21831,8 +22370,8 @@
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36l-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 012.4.14 3.42 3.42 0 011.41.55 3.47 3.47 0 011 1.14 3 3 0 01.42 1.58 3.26 3.26 0 01-1.91 2.94 3.63 3.63 0 011.91 1.22 3.28 3.28 0 01.66 2 4 4 0 01-.43 1.8 3.63 3.63 0 01-1.09 1.4 3.89 3.89 0 01-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 001.1-.49 1.41 1.41 0 00.41-1 1.49 1.49 0 00-.35-1 1.54 1.54 0 00-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 001.88-.09 1.65 1.65 0 001-.54 1.6 1.6 0 00.38-1.14 1.75 1.75 0 00-.29-1 1.69 1.69 0 00-.86-.62 9.28 9.28 0 00-2.41-.23zM44.35 28.79l2.65.84a5.94 5.94 0 01-2 3.29A5.74 5.74 0 0141.38 34a5.87 5.87 0 01-4.44-1.84 7.09 7.09 0 01-1.73-5A7.43 7.43 0 0137 21.87 6 6 0 0141.54 20a5.64 5.64 0 014 1.47A5.33 5.33 0 0147 24l-2.7.65a2.8 2.8 0 00-2.86-2.27A3.09 3.09 0 0039 23.42a5.31 5.31 0 00-.93 3.5 5.62 5.62 0 00.93 3.65 3 3 0 002.4 1.09 2.72 2.72 0 001.82-.66 4 4 0 001.13-2.21z"
   }));
-  function _extends$2() {
-    _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+  function _extends$2$1() {
+    _extends$2$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) {
@@ -21843,12 +22382,12 @@
       }
       return target;
     };
-    return _extends$2.apply(this, arguments);
+    return _extends$2$1.apply(this, arguments);
   }
   var TextfieldIcon = ({
     styles = {},
     ...props
-  }) => /*#__PURE__*/React.createElement("svg", _extends$2({
+  }) => /*#__PURE__*/React.createElement("svg", _extends$2$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
     height: "54"
@@ -21856,8 +22395,8 @@
     fillRule: "evenodd",
     d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-32 4v10h-2V22h2z"
   }));
-  function _extends$1() {
-    _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+  function _extends$1$1() {
+    _extends$1$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) {
@@ -21868,12 +22407,12 @@
       }
       return target;
     };
-    return _extends$1.apply(this, arguments);
+    return _extends$1$1.apply(this, arguments);
   }
   var TextareaIcon = ({
     styles = {},
     ...props
-  }) => /*#__PURE__*/React.createElement("svg", _extends$1({
+  }) => /*#__PURE__*/React.createElement("svg", _extends$1$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
     height: "54"
@@ -21881,8 +22420,8 @@
     fillRule: "evenodd",
     d: "M45 13a3 3 0 013 3v22a3 3 0 01-3 3H9a3 3 0 01-3-3V16a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v22a1 1 0 001 1h36a1 1 0 001-1V16a1 1 0 00-1-1zm-1.136 15.5l.848.849-6.363 6.363-.849-.848 6.364-6.364zm.264 3.5l.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
   }));
-  function _extends$i() {
-    _extends$i = Object.assign ? Object.assign.bind() : function (target) {
+  function _extends$k() {
+    _extends$k = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -21893,12 +22432,12 @@
       }
       return target;
     };
-    return _extends$i.apply(this, arguments);
+    return _extends$k.apply(this, arguments);
   }
   var ImageIcon = ({
     styles = {},
     ...props
-  }) => /*#__PURE__*/React.createElement("svg", _extends$i({
+  }) => /*#__PURE__*/React.createElement("svg", _extends$k({
     width: "54",
     height: "54",
     fill: "none",
@@ -21930,222 +22469,12 @@
     textarea: TextareaIcon,
     default: FormIcon
   };
-  const type$2 = 'text';
-  function Text$2(props) {
-    const {
-      field,
-      disabled
-    } = props;
-    const {
-      text = ''
-    } = field;
-    const textValue = useExpressionValue(text) || '';
-    return e$1("div", {
-      class: formFieldClasses(type$2),
-      children: renderText(field, textValue, disabled)
-    });
-  }
-  Text$2.create = function (options = {}) {
-    return {
-      text: '# Text',
-      ...options
-    };
-  };
-  Text$2.type = type$2;
-  Text$2.keyed = false;
-
-  // helper //////////////
-
-  function renderText(field, content, disabled) {
-    const {
-      text
-    } = field;
-    const Icon = iconsByType['text'];
-    if (disabled) {
-      if (!text) {
-        return e$1("div", {
-          class: "fjs-form-field-placeholder",
-          children: [e$1(Icon, {
-            viewBox: "0 0 54 54"
-          }), "Text view is empty"]
-        });
-      }
-      if (isExpression$2(text)) {
-        return e$1("div", {
-          class: "fjs-form-field-placeholder",
-          children: [e$1(Icon, {
-            viewBox: "0 0 54 54"
-          }), "Text view is populated by an expression"]
-        });
-      }
-    }
-    return e$1(Markup, {
-      markup: safeMarkdown(content),
-      trim: false
-    });
-  }
-  const type$1 = 'textfield';
-  function Textfield$1(props) {
-    const {
-      disabled,
-      errors = [],
-      field,
-      value = ''
-    } = props;
-    const {
-      description,
-      id,
-      label,
-      appearance = {},
-      validate = {}
-    } = field;
-    const {
-      prefixAdorner,
-      suffixAdorner
-    } = appearance;
-    const {
-      required
-    } = validate;
-    const onChange = ({
-      target
-    }) => {
-      props.onChange({
-        field,
-        value: target.value
-      });
-    };
-    const {
-      formId
-    } = F$1(FormContext);
-    return e$1("div", {
-      class: formFieldClasses(type$1, {
-        errors,
-        disabled
-      }),
-      children: [e$1(Label$1, {
-        id: prefixId(id, formId),
-        label: label,
-        required: required
-      }), e$1(InputAdorner, {
-        disabled: disabled,
-        pre: prefixAdorner,
-        post: suffixAdorner,
-        children: e$1("input", {
-          class: "fjs-input",
-          disabled: disabled,
-          id: prefixId(id, formId),
-          onInput: onChange,
-          type: "text",
-          value: value
-        })
-      }), e$1(Description$2, {
-        description: description
-      }), e$1(Errors, {
-        errors: errors
-      })]
-    });
-  }
-  Textfield$1.create = function (options = {}) {
-    return {
-      ...options
-    };
-  };
-  Textfield$1.type = type$1;
-  Textfield$1.label = 'Text field';
-  Textfield$1.keyed = true;
-  Textfield$1.emptyValue = '';
-  Textfield$1.sanitizeValue = ({
-    value
-  }) => isArray$3(value) || isObject$1(value) ? '' : String(value);
-  const type = 'textarea';
-  function Textarea(props) {
-    const {
-      disabled,
-      errors = [],
-      field,
-      value = ''
-    } = props;
-    const {
-      description,
-      id,
-      label,
-      validate = {}
-    } = field;
-    const {
-      required
-    } = validate;
-    const textareaRef = s$1();
-    const onInput = ({
-      target
-    }) => {
-      props.onChange({
-        field,
-        value: target.value
-      });
-    };
-    const autoSizeTextarea = A$1(textarea => {
-      // Ensures the textarea shrinks back, and improves resizing behavior consistency
-      textarea.style.height = '0px';
-      const computed = window.getComputedStyle(textarea);
-      const calculatedHeight = parseInt(computed.getPropertyValue('border-top-width')) + parseInt(computed.getPropertyValue('padding-top')) + textarea.scrollHeight + parseInt(computed.getPropertyValue('padding-bottom')) + parseInt(computed.getPropertyValue('border-bottom-width'));
-      const minHeight = 75;
-      const maxHeight = 350;
-      const displayHeight = Math.max(Math.min(calculatedHeight, maxHeight), minHeight);
-      textarea.style.height = `${displayHeight}px`;
-
-      // Overflow is hidden by default to hide scrollbar flickering
-      textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
-    }, []);
-    y(() => {
-      autoSizeTextarea(textareaRef.current);
-    }, [autoSizeTextarea, value]);
-    const {
-      formId
-    } = F$1(FormContext);
-    return e$1("div", {
-      class: formFieldClasses(type, {
-        errors,
-        disabled
-      }),
-      children: [e$1(Label$1, {
-        id: prefixId(id, formId),
-        label: label,
-        required: required
-      }), e$1("textarea", {
-        class: "fjs-textarea",
-        disabled: disabled,
-        id: prefixId(id, formId),
-        onInput: onInput,
-        value: value,
-        ref: textareaRef
-      }), e$1(Description$2, {
-        description: description
-      }), e$1(Errors, {
-        errors: errors
-      })]
-    });
-  }
-  Textarea.create = function (options = {}) {
-    return {
-      ...options
-    };
-  };
-  Textarea.type = type;
-  Textarea.label = 'Text area';
-  Textarea.keyed = true;
-  Textarea.emptyValue = '';
-  Textarea.sanitizeValue = ({
-    value
-  }) => isArray$3(value) || isObject$1(value) ? '' : String(value);
   const formFields = [Button, Checkbox$1, Checklist, Default, Image, Numberfield, Datetime, Radio, Select$1, Taglist, Text$2, Textfield$1, Textarea];
   class FormFields {
     constructor() {
       this._formFields = {};
       formFields.forEach(formField => {
-        const {
-          type
-        } = formField;
-        this.register(type, formField);
+        this.register(formField.type, formField);
       });
     }
     register(type, formField) {
@@ -22186,7 +22515,7 @@
       if (!schema) {
         return null;
       }
-      return e$1(FormContext.Provider, {
+      return e$1(FormContext$1.Provider, {
         value: formContext,
         children: e$1(FormComponent, {
           onChange: onChange,
@@ -22403,7 +22732,7 @@
         }
         const value = get$1(data, _path);
         const fieldErrors = validator.validateField(field, value);
-        return set$1(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
+        return set$2(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
       }, /** @type {Errors} */{});
       this._setState({
         errors
@@ -22452,7 +22781,7 @@
      * @param {any} value
      */
     setProperty(property, value) {
-      const properties = set$1(this._getState().properties, [property], value);
+      const properties = set$2(this._getState().properties, [property], value);
       this._setState({
         properties
       });
@@ -22517,8 +22846,8 @@
       } = this._getState();
       const validator = this.get('validator');
       const fieldErrors = validator.validateField(field, value);
-      set$1(data, _path, value);
-      set$1(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
+      set$2(data, _path, value);
+      set$2(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
       this._setState({
         data: clone(data),
         errors: clone(errors)
@@ -22584,7 +22913,7 @@
       return conditionChecker.applyConditions(toFilter, data);
     }
   }
-  const schemaVersion = 6;
+  const schemaVersion = 7;
 
   /**
    * Flatten array, one level deep.
@@ -22895,7 +23224,7 @@
    * @param {(string|number)[]} path The path to the nested value.
    * @param {any} value The value to set.
    */
-  function set(target, path, value) {
+  function set$1(target, path, value) {
     let currentTarget = target;
     forEach(path, function (key, idx) {
       if (typeof key !== 'number' && typeof key !== 'string') {
@@ -23214,14 +23543,14 @@
   function rmClass(el, className) {
     el.className = el.className.replace(lookupClass(className), ' ').trim();
   }
-  var classes$1 = {
+  var classes$2 = {
     add: addClass,
     rm: rmClass
   };
 
   var emitter = emitter$1;
   var crossvent = crossvent$1;
-  var classes = classes$1;
+  var classes$1 = classes$2;
   var doc$1 = document;
   var documentElement = doc$1.documentElement;
   function dragula(initialContainers, options) {
@@ -23376,7 +23705,7 @@
       var offset = getOffset(_item);
       _offsetX = getCoord('pageX', e) - offset.left;
       _offsetY = getCoord('pageY', e) - offset.top;
-      classes.add(_copy || _item, 'gu-transit');
+      classes$1.add(_copy || _item, 'gu-transit');
       renderMirrorImage();
       drag(e);
     }
@@ -23520,7 +23849,7 @@
       ungrab();
       removeMirrorImage();
       if (item) {
-        classes.rm(item, 'gu-transit');
+        classes$1.rm(item, 'gu-transit');
       }
       if (_renderTimer) {
         clearTimeout(_renderTimer);
@@ -23624,11 +23953,11 @@
       }
     }
     function spillOver(el) {
-      classes.rm(el, 'gu-hide');
+      classes$1.rm(el, 'gu-hide');
     }
     function spillOut(el) {
       if (drake.dragging) {
-        classes.add(el, 'gu-hide');
+        classes$1.add(el, 'gu-hide');
       }
     }
     function renderMirrorImage() {
@@ -23639,16 +23968,16 @@
       _mirror = _item.cloneNode(true);
       _mirror.style.width = getRectWidth(rect) + 'px';
       _mirror.style.height = getRectHeight(rect) + 'px';
-      classes.rm(_mirror, 'gu-transit');
-      classes.add(_mirror, 'gu-mirror');
+      classes$1.rm(_mirror, 'gu-transit');
+      classes$1.add(_mirror, 'gu-mirror');
       o.mirrorContainer.appendChild(_mirror);
       touchy(documentElement, 'add', 'mousemove', drag);
-      classes.add(o.mirrorContainer, 'gu-unselectable');
+      classes$1.add(o.mirrorContainer, 'gu-unselectable');
       drake.emit('cloned', _mirror, _item, 'mirror');
     }
     function removeMirrorImage() {
       if (_mirror) {
-        classes.rm(o.mirrorContainer, 'gu-unselectable');
+        classes$1.rm(o.mirrorContainer, 'gu-unselectable');
         touchy(documentElement, 'remove', 'mousemove', drag);
         getParent(_mirror).removeChild(_mirror);
         _mirror = null;
@@ -23836,7 +24165,7 @@
   }
   var dragula_1 = dragula;
 
-  function _mergeNamespaces(n, m) {
+  function _mergeNamespaces$1(n, m) {
     m.forEach(function (e) {
       e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
         if (k !== 'default' && !(k in n)) {
@@ -23853,6 +24182,140 @@
     return Object.freeze(n);
   }
 
+  /**
+   * Taken from https://github.com/component/classes
+   *
+   * Without the component bits.
+   */
+
+  /**
+   * toString reference.
+   */
+
+  const toString$1 = Object.prototype.toString;
+
+  /**
+   * Wrap `el` in a `ClassList`.
+   *
+   * @param {Element} el
+   * @return {ClassList}
+   * @api public
+   */
+
+  function classes(el) {
+    return new ClassList(el);
+  }
+
+  /**
+   * Initialize a new ClassList for `el`.
+   *
+   * @param {Element} el
+   * @api private
+   */
+
+  function ClassList(el) {
+    if (!el || !el.nodeType) {
+      throw new Error('A DOM element reference is required');
+    }
+    this.el = el;
+    this.list = el.classList;
+  }
+
+  /**
+   * Add class `name` if not already present.
+   *
+   * @param {String} name
+   * @return {ClassList}
+   * @api public
+   */
+
+  ClassList.prototype.add = function (name) {
+    this.list.add(name);
+    return this;
+  };
+
+  /**
+   * Remove class `name` when present, or
+   * pass a regular expression to remove
+   * any which match.
+   *
+   * @param {String|RegExp} name
+   * @return {ClassList}
+   * @api public
+   */
+
+  ClassList.prototype.remove = function (name) {
+    if ('[object RegExp]' == toString$1.call(name)) {
+      return this.removeMatching(name);
+    }
+    this.list.remove(name);
+    return this;
+  };
+
+  /**
+   * Remove all classes matching `re`.
+   *
+   * @param {RegExp} re
+   * @return {ClassList}
+   * @api private
+   */
+
+  ClassList.prototype.removeMatching = function (re) {
+    const arr = this.array();
+    for (let i = 0; i < arr.length; i++) {
+      if (re.test(arr[i])) {
+        this.remove(arr[i]);
+      }
+    }
+    return this;
+  };
+
+  /**
+   * Toggle class `name`, can force state via `force`.
+   *
+   * For browsers that support classList, but do not support `force` yet,
+   * the mistake will be detected and corrected.
+   *
+   * @param {String} name
+   * @param {Boolean} force
+   * @return {ClassList}
+   * @api public
+   */
+
+  ClassList.prototype.toggle = function (name, force) {
+    if ('undefined' !== typeof force) {
+      if (force !== this.list.toggle(name, force)) {
+        this.list.toggle(name); // toggle again to correct
+      }
+    } else {
+      this.list.toggle(name);
+    }
+    return this;
+  };
+
+  /**
+   * Return an array of classes.
+   *
+   * @return {Array}
+   * @api public
+   */
+
+  ClassList.prototype.array = function () {
+    return Array.from(this.list);
+  };
+
+  /**
+   * Check if class `name` is present.
+   *
+   * @param {String} name
+   * @return {ClassList}
+   * @api public
+   */
+
+  ClassList.prototype.has = ClassList.prototype.contains = function (name) {
+    return this.list.contains(name);
+  };
+
   /**
    * @param { HTMLElement } element
    * @param { String } selector
@@ -23916,7 +24379,7 @@
     el[unbind$1$1](prefix$1 + type, fn, capture || false);
     return fn;
   };
-  var event = /*#__PURE__*/_mergeNamespaces({
+  var event = /*#__PURE__*/_mergeNamespaces$1({
     __proto__: null,
     bind: bind_1,
     unbind: unbind_1,
@@ -24020,7 +24483,11 @@
     return el.querySelector(selector);
   }
 
-  var arrayMove$1 = {exports: {}};
+  var arrayMoveExports = {};
+  var arrayMove$1 = {
+    get exports(){ return arrayMoveExports; },
+    set exports(v){ arrayMoveExports = v; },
+  };
 
   const arrayMoveMutate = (array, from, to) => {
     const startIndex = from < 0 ? array.length + from : from;
@@ -24036,12 +24503,12 @@
     return array;
   };
   arrayMove$1.exports = arrayMove;
-  var mutate = arrayMove$1.exports.mutate = arrayMoveMutate;
+  var mutate = arrayMoveExports.mutate = arrayMoveMutate;
 
   /**
   The data structure for documents. @nonabstract
   */
-  class Text$1 {
+  let Text$1 = class Text {
     /**
     @internal
     */
@@ -24159,7 +24626,7 @@
       if (text.length == 1 && !text[0]) return Text$1.empty;
       return text.length <= 32 /* Tree.Branch */ ? new TextLeaf(text) : TextNode.from(TextLeaf.split(text, []));
     }
-  }
+  };
   // Leaves store an array of line strings. There are always line breaks
   // between these strings. Leaves are limited in size and have to be
   // contained in TextNode instances for bigger documents.
@@ -28030,7 +28497,6 @@
     222: "\""
   };
   var chrome$1 = typeof navigator != "undefined" && /Chrome\/(\d+)/.exec(navigator.userAgent);
-  typeof navigator != "undefined" && /Gecko\/\d+/.test(navigator.userAgent);
   var mac = typeof navigator != "undefined" && /Mac/.test(navigator.platform);
   var ie$1 = typeof navigator != "undefined" && /MSIE \d|Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
   var brokenModifierNames = mac || chrome$1 && +chrome$1[1] < 57;
@@ -30214,7 +30680,7 @@
     }
   }
   // Reused array of character types
-  const types$1 = [];
+  const types = [];
   function computeOrder(line, direction) {
     let len = line.length,
       outerType = direction == LTR ? 1 /* T.L */ : 2 /* T.R */,
@@ -30233,7 +30699,7 @@
     for (let i = 0, prev = outerType, prevStrong = outerType; i < len; i++) {
       let type = charType(line.charCodeAt(i));
       if (type == 512 /* T.NSM */) type = prev;else if (type == 8 /* T.EN */ && prevStrong == 4 /* T.AL */) type = 16 /* T.AN */;
-      types$1[i] = type == 4 /* T.AL */ ? 2 /* T.R */ : type;
+      types[i] = type == 4 /* T.AL */ ? 2 /* T.R */ : type;
       if (type & 7 /* T.Strong */) prevStrong = type;
       prev = type;
     }
@@ -30246,17 +30712,17 @@
     // found, then change the type of the European number to L.
     // (Left after this: L, R, EN+AN, NI)
     for (let i = 0, prev = outerType, prevStrong = outerType; i < len; i++) {
-      let type = types$1[i];
+      let type = types[i];
       if (type == 128 /* T.CS */) {
-        if (i < len - 1 && prev == types$1[i + 1] && prev & 24 /* T.Num */) type = types$1[i] = prev;else types$1[i] = 256 /* T.NI */;
+        if (i < len - 1 && prev == types[i + 1] && prev & 24 /* T.Num */) type = types[i] = prev;else types[i] = 256 /* T.NI */;
       } else if (type == 64 /* T.ET */) {
         let end = i + 1;
-        while (end < len && types$1[end] == 64 /* T.ET */) end++;
-        let replace = i && prev == 8 /* T.EN */ || end < len && types$1[end] == 8 /* T.EN */ ? prevStrong == 1 /* T.L */ ? 1 /* T.L */ : 8 /* T.EN */ : 256 /* T.NI */;
-        for (let j = i; j < end; j++) types$1[j] = replace;
+        while (end < len && types[end] == 64 /* T.ET */) end++;
+        let replace = i && prev == 8 /* T.EN */ || end < len && types[end] == 8 /* T.EN */ ? prevStrong == 1 /* T.L */ ? 1 /* T.L */ : 8 /* T.EN */ : 256 /* T.NI */;
+        for (let j = i; j < end; j++) types[j] = replace;
         i = end - 1;
       } else if (type == 8 /* T.EN */ && prevStrong == 1 /* T.L */) {
-        types$1[i] = 1 /* T.L */;
+        types[i] = 1 /* T.L */;
       }
 
       prev = type;
@@ -30276,7 +30742,7 @@
             if (BracketStack[sJ + 1] == -br) {
               let flags = BracketStack[sJ + 2];
               let type = flags & 2 /* Bracketed.EmbedInside */ ? outerType : !(flags & 4 /* Bracketed.OppositeInside */) ? 0 : flags & 1 /* Bracketed.OppositeBefore */ ? oppositeType : outerType;
-              if (type) types$1[i] = types$1[BracketStack[sJ]] = type;
+              if (type) types[i] = types[BracketStack[sJ]] = type;
               sI = sJ;
               break;
             }
@@ -30288,7 +30754,7 @@
           BracketStack[sI++] = ch;
           BracketStack[sI++] = context;
         }
-      } else if ((type = types$1[i]) == 2 /* T.R */ || type == 1 /* T.L */) {
+      } else if ((type = types[i]) == 2 /* T.R */ || type == 1 /* T.L */) {
         let embed = type == outerType;
         context = embed ? 0 : 1 /* Bracketed.OppositeBefore */;
         for (let sJ = sI - 3; sJ >= 0; sJ -= 3) {
@@ -30311,13 +30777,13 @@
     // N2. Any remaining neutrals take the embedding direction.
     // (Left after this: L, R, EN+AN)
     for (let i = 0; i < len; i++) {
-      if (types$1[i] == 256 /* T.NI */) {
+      if (types[i] == 256 /* T.NI */) {
         let end = i + 1;
-        while (end < len && types$1[end] == 256 /* T.NI */) end++;
-        let beforeL = (i ? types$1[i - 1] : outerType) == 1 /* T.L */;
-        let afterL = (end < len ? types$1[end] : outerType) == 1 /* T.L */;
+        while (end < len && types[end] == 256 /* T.NI */) end++;
+        let beforeL = (i ? types[i - 1] : outerType) == 1 /* T.L */;
+        let afterL = (end < len ? types[end] : outerType) == 1 /* T.L */;
         let replace = beforeL == afterL ? beforeL ? 1 /* T.L */ : 2 /* T.R */ : outerType;
-        for (let j = i; j < end; j++) types$1[j] = replace;
+        for (let j = i; j < end; j++) types[j] = replace;
         i = end - 1;
       }
     }
@@ -30330,13 +30796,13 @@
     if (outerType == 1 /* T.L */) {
       for (let i = 0; i < len;) {
         let start = i,
-          rtl = types$1[i++] != 1 /* T.L */;
-        while (i < len && rtl == (types$1[i] != 1 /* T.L */)) i++;
+          rtl = types[i++] != 1 /* T.L */;
+        while (i < len && rtl == (types[i] != 1 /* T.L */)) i++;
         if (rtl) {
           for (let j = i; j > start;) {
             let end = j,
-              l = types$1[--j] != 2 /* T.R */;
-            while (j > start && l == (types$1[j - 1] != 2 /* T.R */)) j--;
+              l = types[--j] != 2 /* T.R */;
+            while (j > start && l == (types[j - 1] != 2 /* T.R */)) j--;
             order.push(new BidiSpan(j, end, l ? 2 : 1));
           }
         } else {
@@ -30346,8 +30812,8 @@
     } else {
       for (let i = 0; i < len;) {
         let start = i,
-          rtl = types$1[i++] == 2 /* T.R */;
-        while (i < len && rtl == (types$1[i] == 2 /* T.R */)) i++;
+          rtl = types[i++] == 2 /* T.R */;
+        while (i < len && rtl == (types[i] == 2 /* T.R */)) i++;
         order.push(new BidiSpan(start, i, rtl ? 1 : 2));
       }
     }
@@ -44343,9 +44809,12 @@
   });
 
   var componentEvent = {};
-  var bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
-    unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
+  var bind$1, unbind$1, prefix;
+  function detect() {
+    bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent';
+    unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent';
     prefix = bind$1 !== 'addEventListener' ? 'on' : '';
+  }
 
   /**
    * Bind `el` event `type` to `fn`.
@@ -44359,6 +44828,7 @@
    */
 
   componentEvent.bind = function (el, type, fn, capture) {
+    if (!bind$1) detect();
     el[bind$1](prefix + type, fn, capture || false);
     return fn;
   };
@@ -44375,6 +44845,7 @@
    */
 
   componentEvent.unbind = function (el, type, fn, capture) {
+    if (!unbind$1) detect();
     el[unbind$1](prefix + type, fn, capture || false);
     return fn;
   };
@@ -44472,6 +44943,71 @@
   }
   var domify$1 = domify;
 
+  /**
+   * Create an array of syntax errors in the given tree.
+   *
+   * @param {Tree} syntaxTree
+   * @returns {LintMessage[]} array of syntax errors
+   */
+  function lintSyntax(syntaxTree) {
+    const lintMessages = [];
+    syntaxTree.iterate({
+      enter: node => {
+        if (node.type.isError) {
+          const error = node.toString();
+
+          /* The error has the pattern [⚠ || ⚠(NodeType)]. The regex extracts the node type from inside the brackets */
+          const match = /\((.*?)\)/.exec(error);
+          const nodeType = match && match[1];
+          let message;
+          if (nodeType) {
+            message = 'unexpected ' + nodeType;
+          } else {
+            message = 'expression expected';
+          }
+          lintMessages.push({
+            from: node.from,
+            to: node.to,
+            severity: 'error',
+            message: message,
+            type: 'syntaxError'
+          });
+        }
+      }
+    });
+    return lintMessages;
+  }
+
+  /**
+   * Generates lint messages for the given syntax tree.
+   *
+   * @param {Tree} syntaxTree
+   * @returns {LintMessage[]} array of all lint messages
+   */
+  function lintAll(syntaxTree) {
+    const lintMessages = [...lintSyntax(syntaxTree)];
+    return lintMessages;
+  }
+
+  /**
+   * CodeMirror extension that provides linting for FEEL expressions.
+   *
+   * @param {EditorView} editorView
+   * @returns {Source} CodeMirror linting source
+   */
+  const cmFeelLinter = () => editorView => {
+    // don't lint if the Editor is empty
+    if (editorView.state.doc.length === 0) {
+      return [];
+    }
+    const tree = syntaxTree(editorView.state);
+    const messages = lintAll(tree);
+    return messages.map(message => ({
+      ...message,
+      source: 'syntaxError'
+    }));
+  };
+
   // helpers ///////////////////////////////
 
   function isNodeEmpty(node) {
@@ -44743,9 +45279,10 @@
     label: tag.name,
     type: 'function',
     info: () => {
-      const html = domify$1(tag.description);
+      const html = domify$1(`<div class="description">${tag.description}<div>`);
       return html;
-    }
+    },
+    boost: -1
   }));
   var builtins = context => {
     let nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
@@ -44776,6 +45313,86 @@
    * @type {Facet<import('..').Variable[]>} Variable
    */
   const variablesFacet$1 = Facet.define();
+  var pathExpression = context => {
+    const variables = context.state.facet(variablesFacet$1)[0];
+    const nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
+    if (!isPathExpression(nodeBefore)) {
+      return;
+    }
+    const expression = findPathExpression(nodeBefore);
+
+    // if the cursor is directly after the `.`, variable starts at the cursor position
+    const from = nodeBefore === expression ? context.pos : nodeBefore.from;
+    const path = getPath(expression, context);
+    let options = variables;
+    for (var i = 0; i < path.length - 1; i++) {
+      var childVar = options.find(val => val.name === path[i].name);
+      if (!childVar) {
+        return null;
+      }
+
+      // only suggest if variable type matches
+      if (childVar.isList !== 'optional' && !!childVar.isList !== path[i].isList) {
+        return;
+      }
+      options = childVar.entries;
+    }
+    if (!options) return;
+    options = options.map(v => ({
+      label: v.name,
+      type: 'variable',
+      info: v.info,
+      detail: v.detail
+    }));
+    const result = {
+      from: from,
+      options: options
+    };
+    return result;
+  };
+  function findPathExpression(node) {
+    while (node) {
+      if (node.name === 'PathExpression') {
+        return node;
+      }
+      node = node.parent;
+    }
+  }
+
+  // parses the path expression into a list of variable names with type information
+  // e.g. foo[0].bar => [ { name: 'foo', isList: true }, { name: 'bar', isList: false } ]
+  function getPath(node, context) {
+    let path = [];
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+      if (child.name === 'PathExpression') {
+        path.push(...getPath(child, context));
+      } else if (child.name === 'FilterExpression') {
+        path.push(...getFilter(child, context));
+      } else {
+        path.push({
+          name: getNodeContent(child, context),
+          isList: false
+        });
+      }
+    }
+    return path;
+  }
+  function getFilter(node, context) {
+    const list = node.firstChild;
+    if (list.name === 'PathExpression') {
+      const path = getPath(list, context);
+      const last = path[path.length - 1];
+      last.isList = true;
+      return path;
+    }
+    return [{
+      name: getNodeContent(list, context),
+      isList: true
+    }];
+  }
+  function getNodeContent(node, context) {
+    return context.state.sliceDoc(node.from, node.to);
+  }
 
   /**
    * @type {import('@codemirror/autocomplete').CompletionSource}
@@ -44816,48 +45433,16 @@
   };
   function autocompletion$1() {
     return [autocompletion$2({
-      override: [variables, builtins, completeFromList(snippets)]
+      override: [variables, builtins, completeFromList(snippets.map(s => ({
+        ...s,
+        boost: -1
+      }))), pathExpression]
     })];
   }
   function language() {
     return new LanguageSupport(feelLanguage, []);
   }
-  const FeelLinter = function (editorView) {
-    const messages = [];
-
-    // don't lint if the Editor is empty
-    if (editorView.state.doc.length === 0) {
-      return messages;
-    }
-    const tree = syntaxTree(editorView.state);
-    tree.iterate({
-      enter: node => {
-        if (node.type.isError) {
-          const error = node.toString();
-
-          /* The error has the pattern [⚠ || ⚠(NodeType)]. The regex extracts the node type from inside the brackets */
-          const match = /\((.*?)\)/.exec(error);
-          const nodeType = match && match[1];
-          let message;
-          if (nodeType) {
-            message = 'unexpected ' + nodeType;
-          } else {
-            message = 'expression expected';
-          }
-          messages.push({
-            from: node.from,
-            to: node.to,
-            severity: 'error',
-            message: message,
-            source: 'syntaxError'
-          });
-        }
-      }
-    });
-    return messages;
-  };
-  var syntaxLinter = linter$1(FeelLinter);
-  var linter = [syntaxLinter];
+  var linter = [linter$1(cmFeelLinter())];
   const baseTheme$2 = EditorView.theme({
     '& .cm-content': {
       padding: '0px'
@@ -44936,9 +45521,11 @@
 
   /**
    * @typedef {object} Variable
-   * @property {string} name
-   * @property {string} [info]
-   * @property {string} [detail]
+   * @property {string} name name or key of the variable
+   * @property {string} [info] short information about the variable, e.g. type
+   * @property {string} [detail] longer description of the variable content
+   * @property {boolean} [isList] whether the variable is a list
+   * @property {array<Variable>} [schema] array of child variables if the variable is a context or list
    */
 
   const autocompletionConf = new Compartment();
@@ -46646,9 +47233,118 @@
   var importModule = {
     importer: ['type', Importer]
   };
+  function editorFormFieldClasses(type, {
+    disabled = false
+  } = {}) {
+    if (!type) {
+      throw new Error('type required');
+    }
+    return classNames('fjs-form-field', `fjs-form-field-${type}`, {
+      'fjs-disabled': disabled
+    });
+  }
+  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 CloseIcon = ({
+    styles = {},
+    ...props
+  }) => /*#__PURE__*/React.createElement("svg", _extends$2({
+    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"
+  }));
+  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 SearchIcon = ({
+    styles = {},
+    ...props
+  }) => /*#__PURE__*/React.createElement("svg", _extends$1({
+    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"
+  }));
+  function EditorText(props) {
+    const {
+      type,
+      text = ''
+    } = props.field;
+    const Icon = iconsByType['text'];
+    if (!text) {
+      return e$1("div", {
+        class: editorFormFieldClasses(type),
+        children: e$1("div", {
+          class: "fjs-form-field-placeholder",
+          children: [e$1(Icon, {
+            viewBox: "0 0 54 54"
+          }), "Text view is empty"]
+        })
+      });
+    }
+    if (isExpression$1(text)) {
+      return e$1("div", {
+        class: editorFormFieldClasses(type),
+        children: e$1("div", {
+          class: "fjs-form-field-placeholder",
+          children: [e$1(Icon, {
+            viewBox: "0 0 54 54"
+          }), "Text view is populated by an expression"]
+        })
+      });
+    }
+    return e$1(Text$2, {
+      ...props,
+      disableLinks: true
+    });
+  }
+  EditorText.create = Text$2.create;
+  EditorText.type = Text$2.type;
+  EditorText.keyed = Text$2.keyed;
+  const editorFormFields = [EditorText];
+  class EditorFormFields extends FormFields {
+    constructor() {
+      super();
+      editorFormFields.forEach(formField => {
+        this.register(formField.type, formField);
+      });
+    }
+  }
   const DragAndDropContext = D$1({
     drake: null
   });
+  var DragAndDropContext$1 = DragAndDropContext;
 
   /**
    * @param {string} type
@@ -46660,10 +47356,11 @@
   const FormEditorContext = D$1({
     getService: getService$1
   });
+  var FormEditorContext$1 = FormEditorContext;
   function useService$1(type, strict) {
     const {
       getService
-    } = F$1(FormEditorContext);
+    } = F$1(FormEditorContext$1);
     return getService(type, strict);
   }
   function _extends() {
@@ -46690,6 +47387,147 @@
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M10 4v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4h9zM8 6H3v4.8c0 .66.5 1.2 1.111 1.2H6.89C7.5 12 8 11.46 8 10.8V6zm3-5H8.5l-1-1h-4l-1 1H0v1.5h11V1z"
   }));
+  const PALETTE_ENTRIES = formFields.filter(f => f.type !== 'default').map(f => {
+    return {
+      label: f.label,
+      type: f.type,
+      group: f.group
+    };
+  });
+  const PALETTE_GROUPS = [{
+    label: 'Basic input',
+    id: 'basic-input'
+  }, {
+    label: 'Selection',
+    id: 'selection'
+  }, {
+    label: 'Presentation',
+    id: 'presentation'
+  }, {
+    label: 'Action',
+    id: 'action'
+  }];
+  function Palette(props) {
+    const [entries, setEntries] = l$2(PALETTE_ENTRIES);
+    const [searchTerm, setSearchTerm] = l$2('');
+    const inputRef = s$1();
+    const groups = groupEntries(entries);
+
+    // filter entries on search change
+    y(() => {
+      const filter = entry => {
+        if (!searchTerm) {
+          return true;
+        }
+        const search = entry.label.toLowerCase();
+        return searchTerm.toLowerCase().split(/\s/g).every(term => search.includes(term));
+      };
+      const entries = PALETTE_ENTRIES.filter(filter);
+      setEntries(entries);
+    }, [searchTerm]);
+    const handleInput = A$1(event => {
+      setSearchTerm(() => event.target.value);
+    }, [setSearchTerm]);
+    const handleClear = A$1(event => {
+      setSearchTerm('');
+      inputRef.current.focus();
+    }, [inputRef, setSearchTerm]);
+    return e$1("div", {
+      class: "fjs-palette",
+      children: [e$1("div", {
+        class: "fjs-palette-header",
+        title: "Components",
+        children: "Components"
+      }), e$1("div", {
+        class: "fjs-palette-search-container",
+        children: [e$1("span", {
+          class: "fjs-palette-search-icon",
+          children: e$1(SearchIcon, {})
+        }), e$1("input", {
+          class: "fjs-palette-search",
+          ref: inputRef,
+          type: "text",
+          placeholder: "Search components",
+          value: searchTerm,
+          onInput: handleInput
+        }), searchTerm && e$1("button", {
+          title: "Clear content",
+          class: "fjs-palette-search-clear",
+          onClick: handleClear,
+          children: e$1(CloseIcon, {})
+        })]
+      }), e$1("div", {
+        class: "fjs-palette-entries",
+        children: [groups.map(({
+          label,
+          entries,
+          id
+        }) => e$1("div", {
+          class: "fjs-palette-group",
+          "data-group-id": id,
+          children: [e$1("span", {
+            class: "fjs-palette-group-title",
+            children: label
+          }), e$1("div", {
+            class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
+            children: entries.map(({
+              label,
+              type
+            }) => {
+              const Icon = iconsByType[type];
+              return e$1("div", {
+                class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
+                "data-field-type": type,
+                title: `Create a ${label} element`,
+                children: [Icon ? e$1(Icon, {
+                  class: "fjs-palette-field-icon",
+                  width: "36",
+                  height: "36",
+                  viewBox: "0 0 54 54"
+                }) : null, e$1("span", {
+                  class: "fjs-palette-field-text",
+                  children: label
+                })]
+              });
+            })
+          })]
+        })), groups.length == 0 && e$1("div", {
+          class: "fjs-palette-no-entries",
+          children: "No components found."
+        })]
+      })]
+    });
+  }
+
+  // helpers ///////
+
+  function groupEntries(entries) {
+    const groups = PALETTE_GROUPS.map(group => {
+      return {
+        ...group,
+        entries: []
+      };
+    });
+    const getGroup = id => groups.find(group => id === group.id);
+    entries.forEach(entry => {
+      const {
+        group
+      } = entry;
+      getGroup(group).entries.push(entry);
+    });
+    return groups.filter(g => g.entries.length);
+  }
+  const CURSOR_CLS_PATTERN = /^fjs-cursor-.*$/;
+  function set(mode) {
+    const classes$1 = classes(document.body);
+    classes$1.removeMatching(CURSOR_CLS_PATTERN);
+    if (mode) {
+      classes$1.add('fjs-cursor-' + mode);
+    }
+  }
+  function unset() {
+    set(null);
+  }
   function ContextPad(props) {
     if (!props.children) {
       return null;
@@ -46813,6 +47651,9 @@
       drake
     };
     y(() => {
+      const handleDragEvent = (type, context) => {
+        return eventBus.fire(type, context);
+      };
       const createDragulaInstance = () => {
         const dragulaInstance = dragula_1({
           isContainer(el) {
@@ -46827,6 +47668,56 @@
           slideFactorX: 10,
           slideFactorY: 5
         });
+
+        // bind life cycle events
+        dragulaInstance.on('drag', (element, source) => {
+          handleDragEvent('drag.start', {
+            element,
+            source
+          });
+        });
+        dragulaInstance.on('dragend', element => {
+          handleDragEvent('drag.end', {
+            element
+          });
+        });
+        dragulaInstance.on('drop', (element, target, source, sibling) => {
+          handleDragEvent('drag.drop', {
+            element,
+            target,
+            source,
+            sibling
+          });
+        });
+        dragulaInstance.on('over', (element, container, source) => {
+          handleDragEvent('drag.hover', {
+            element,
+            container,
+            source
+          });
+        });
+        dragulaInstance.on('out', (element, container, source) => {
+          handleDragEvent('drag.out', {
+            element,
+            container,
+            source
+          });
+        });
+        dragulaInstance.on('cancel', (element, container, source) => {
+          handleDragEvent('drag.cancel', {
+            element,
+            container,
+            source
+          });
+        });
+
+        // set custom styling
+        dragulaInstance.on('drag', () => {
+          set('grabbing');
+        });
+        dragulaInstance.on('dragend', () => {
+          unset();
+        });
         dragulaInstance.on('drop', (el, target, source, sibling) => {
           dragulaInstance.remove();
           if (!target) {
@@ -46883,9 +47774,7 @@
     const formContext = {
       getService(type, strict = true) {
         // TODO(philippfromme): clean up
-        if (type === 'formFieldRegistry') {
-          return new Map();
-        } else if (type === 'form') {
+        if (type === 'form') {
           return {
             _getState() {
               return {
@@ -46923,16 +47812,16 @@
     }, [propertiesPanelRef, propertiesPanel, hasDefaultPropertiesPanel]);
     return e$1("div", {
       class: "fjs-form-editor",
-      children: [e$1(DragAndDropContext.Provider, {
+      children: [e$1(DragAndDropContext$1.Provider, {
         value: dragAndDropContext,
         children: [hasDefaultPalette && e$1("div", {
           class: "fjs-editor-palette-container",
           ref: paletteRef
         }), e$1("div", {
           class: "fjs-form-container",
-          children: e$1(FormContext.Provider, {
+          children: e$1(FormContext$1.Provider, {
             value: formContext,
-            children: e$1(FormRenderContext.Provider, {
+            children: e$1(FormRenderContext$1.Provider, {
               value: formRenderContext,
               children: e$1(FormComponent, {
                 onSubmit: onSubmit,
@@ -46961,14 +47850,32 @@
   function CreatePreview(props) {
     const {
       drake
-    } = F$1(DragAndDropContext);
+    } = F$1(DragAndDropContext$1);
     function handleCloned(clone, original, type) {
       const fieldType = clone.dataset.fieldType;
       const Icon = iconsByType[fieldType];
+      const {
+        label
+      } = findPaletteEntry(fieldType);
       if (fieldType) {
         clone.innerHTML = '';
         clone.class = 'gu-mirror';
-        S$1(e$1(Icon, {}), clone);
+        if (original.classList.contains('fjs-palette-field')) {
+          S$1(e$1("div", {
+            class: "fjs-palette-field",
+            children: [e$1(Icon, {
+              class: "fjs-palette-field-icon",
+              width: "36",
+              height: "36",
+              viewBox: "0 0 54 54"
+            }), e$1("span", {
+              class: "fjs-palette-field-text",
+              children: label
+            })]
+          }), clone);
+        } else {
+          S$1(e$1(Icon, {}), clone);
+        }
       }
     }
     y(() => {
@@ -46989,6 +47896,9 @@
   function defaultPropertiesPanel(propertiesPanelConfig) {
     return !(propertiesPanelConfig && propertiesPanelConfig.parent);
   }
+  function findPaletteEntry(type) {
+    return PALETTE_ENTRIES.find(entry => entry.type === type);
+  }
   class Renderer {
     constructor(renderConfig, eventBus, formEditor, injector) {
       const {
@@ -47013,7 +47923,7 @@
         }
         return e$1("div", {
           class: `fjs-container fjs-editor-container ${compact ? 'fjs-editor-compact' : ''}`,
-          children: e$1(FormEditorContext.Provider, {
+          children: e$1(FormEditorContext$1.Provider, {
             value: formEditorContext,
             children: e$1(FormEditor$1, {})
           })
@@ -47030,7 +47940,7 @@
   Renderer.$inject = ['config.renderer', 'eventBus', 'formEditor', 'injector'];
   var renderModule = {
     __init__: ['formFields', 'renderer'],
-    formFields: ['type', FormFields],
+    formFields: ['type', EditorFormFields],
     renderer: ['type', Renderer]
   };
   var core = {
@@ -48851,78 +49761,6 @@
     selection: ['type', Selection],
     selectionBehavior: ['type', SelectionBehavior]
   };
-  const types = [{
-    label: 'Text field',
-    type: 'textfield'
-  }, {
-    label: 'Text area',
-    type: 'textarea'
-  }, {
-    label: 'Number',
-    type: 'number'
-  }, {
-    label: 'Datetime',
-    type: 'datetime'
-  }, {
-    label: 'Checkbox',
-    type: 'checkbox'
-  }, {
-    label: 'Checklist',
-    type: 'checklist'
-  }, {
-    label: 'Taglist',
-    type: 'taglist'
-  }, {
-    label: 'Radio',
-    type: 'radio'
-  }, {
-    label: 'Select',
-    type: 'select'
-  }, {
-    label: 'Text view',
-    type: 'text'
-  }, {
-    label: 'Image view',
-    type: 'image'
-  }, {
-    label: 'Button',
-    type: 'button'
-  }];
-  function Palette(props) {
-    return e$1("div", {
-      class: "fjs-palette",
-      children: [e$1("div", {
-        class: "fjs-palette-header",
-        title: "Form elements library",
-        children: [e$1("span", {
-          class: "fjs-hide-compact",
-          children: "FORM ELEMENTS "
-        }), "LIBRARY"]
-      }), e$1("div", {
-        class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
-        children: types.map(({
-          label,
-          type
-        }) => {
-          const Icon = iconsByType[type];
-          return e$1("div", {
-            class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
-            "data-field-type": type,
-            title: `Create a ${label} element`,
-            children: [Icon ? e$1(Icon, {
-              class: "fjs-palette-field-icon",
-              width: "36",
-              height: "36",
-              viewBox: "0 0 54 54"
-            }) : null, e$1("span", {
-              class: "fjs-palette-field-text",
-              children: label
-            })]
-          });
-        })
-      })]
-    });
-  }
   class PaletteRenderer {
     constructor(paletteConfig, eventBus) {
       const {
@@ -49142,19 +49980,19 @@
     errors: {}
   });
 
-  /**
-   * @typedef {Function} <propertiesPanel.showEntry> callback
-   *
-   * @example
-   *
-   * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
-   *   // ...
-   * });
-   *
-   * @param {Object} context
-   * @param {boolean} [context.focus]
-   *
-   * @returns void
+  /**
+   * @typedef {Function} <propertiesPanel.showEntry> callback
+   *
+   * @example
+   *
+   * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+   *   // ...
+   * });
+   *
+   * @param {Object} context
+   * @param {boolean} [context.focus]
+   *
+   * @returns void
    */
   const EventContext = D$1({
     eventBus: null
@@ -49166,20 +50004,20 @@
     setLayoutForKey: () => {}
   });
 
-  /**
-   * Accesses the global DescriptionContext and returns a description for a given id and element.
-   *
-   * @example
-   * ```jsx
-   * function TextField(props) {
-   *   const description = useDescriptionContext('input1', element);
-   * }
-   * ```
-   *
-   * @param {string} id
-   * @param {object} element
-   *
-   * @returns {string}
+  /**
+   * Accesses the global DescriptionContext and returns a description for a given id and element.
+   *
+   * @example
+   * ```jsx
+   * function TextField(props) {
+   *   const description = useDescriptionContext('input1', element);
+   * }
+   * ```
+   *
+   * @param {string} id
+   * @param {object} element
+   *
+   * @returns {string}
    */
   function useDescriptionContext(id, element) {
     const {
@@ -49194,11 +50032,11 @@
     return errors[id];
   }
 
-  /**
-   * Subscribe to an event immediately. Update subscription after inputs changed.
-   *
-   * @param {string} event
-   * @param {Function} callback
+  /**
+   * Subscribe to an event immediately. Update subscription after inputs changed.
+   *
+   * @param {string} event
+   * @param {Function} callback
    */
   function useEvent(event, callback, eventBus) {
     const eventContext = F$1(EventContext);
@@ -49228,20 +50066,20 @@
     }, [callback, event, eventBus]);
   }
 
-  /**
-   * Creates a state that persists in the global LayoutContext.
-   *
-   * @example
-   * ```jsx
-   * function Group(props) {
-   *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
-   * }
-   * ```
-   *
-   * @param {(string|number)[]} path
-   * @param {any} [defaultValue]
-   *
-   * @returns {[ any, Function ]}
+  /**
+   * Creates a state that persists in the global LayoutContext.
+   *
+   * @example
+   * ```jsx
+   * function Group(props) {
+   *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+   * }
+   * ```
+   *
+   * @param {(string|number)[]} path
+   * @param {any} [defaultValue]
+   *
+   * @returns {[ any, Function ]}
    */
   function useLayoutState(path, defaultValue) {
     const {
@@ -49260,11 +50098,11 @@
     return [value, setState];
   }
 
-  /**
-   * @pinussilvestrus: we need to introduce our own hook to persist the previous
-   * state on updates.
-   *
-   * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+  /**
+   * @pinussilvestrus: we need to introduce our own hook to persist the previous
+   * state on updates.
+   *
+   * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
    */
 
   function usePrevious(value) {
@@ -49275,12 +50113,12 @@
     return ref.current;
   }
 
-  /**
-   * Subscribe to `propertiesPanel.showEntry`.
-   *
-   * @param {string} id
-   *
-   * @returns {import('preact').Ref}
+  /**
+   * Subscribe to `propertiesPanel.showEntry`.
+   *
+   * @param {string} id
+   *
+   * @returns {import('preact').Ref}
    */
   function useShowEntryEvent(id) {
     const {
@@ -49311,20 +50149,20 @@
     return ref;
   }
 
-  /**
-   * @callback setSticky
-   * @param {boolean} value
+  /**
+   * @callback setSticky
+   * @param {boolean} value
    */
 
-  /**
-   * Use IntersectionObserver to identify when DOM element is in sticky mode.
-   * If sticky is observered setSticky(true) will be called.
-   * If sticky mode is left, setSticky(false) will be called.
-   *
-   *
-   * @param {Object} ref
-   * @param {string} scrollContainerSelector
-   * @param {setSticky} setSticky
+  /**
+   * Use IntersectionObserver to identify when DOM element is in sticky mode.
+   * If sticky is observered setSticky(true) will be called.
+   * If sticky mode is left, setSticky(false) will be called.
+   *
+   *
+   * @param {Object} ref
+   * @param {string} scrollContainerSelector
+   * @param {setSticky} setSticky
    */
   function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
     y(() => {
@@ -49363,19 +50201,19 @@
     }, [ref, scrollContainerSelector, setSticky]);
   }
 
-  /**
-   * Creates a static function reference with changing body.
-   * This is necessary when external libraries require a callback function
-   * that has references to state variables.
-   *
-   * Usage:
-   * const callback = useStaticCallback((val) => {val === currentState});
-   *
-   * The `callback` reference is static and can be safely used in external
-   * libraries or as a prop that does not cause rerendering of children.
-   *
-   * @param {Function} callback function with changing reference
-   * @returns {Function} static function reference
+  /**
+   * Creates a static function reference with changing body.
+   * This is necessary when external libraries require a callback function
+   * that has references to state variables.
+   *
+   * Usage:
+   * const callback = useStaticCallback((val) => {val === currentState});
+   *
+   * The `callback` reference is static and can be safely used in external
+   * libraries or as a prop that does not cause rerendering of children.
+   *
+   * @param {Function} callback function with changing reference
+   * @returns {Function} static function reference
    */
   function useStaticCallback(callback) {
     const callbackRef = s$1(callback);
@@ -49467,13 +50305,13 @@
     });
   }
 
-  /**
-   * @typedef { {
-   *  text: (element: object) => string,
-   *  icon?: (element: Object) => import('preact').Component
-   * } } PlaceholderDefinition
-   *
-   * @param { PlaceholderDefinition } props
+  /**
+   * @typedef { {
+   *  text: (element: object) => string,
+   *  icon?: (element: Object) => import('preact').Component
+   * } } PlaceholderDefinition
+   *
+   * @param { PlaceholderDefinition } props
    */
   function Placeholder(props) {
     const {
@@ -49498,72 +50336,72 @@
   };
   const DEFAULT_DESCRIPTION = {};
 
-  /**
-   * @typedef { {
-   *    component: import('preact').Component,
-   *    id: String,
-   *    isEdited?: Function
-   * } } EntryDefinition
-   *
-   * @typedef { {
-   *    autoFocusEntry: String,
-   *    autoOpen?: Boolean,
-   *    entries: Array<EntryDefinition>,
-   *    id: String,
-   *    label: String,
-   *    remove: (event: MouseEvent) => void
-   * } } ListItemDefinition
-   *
-   * @typedef { {
-   *    add: (event: MouseEvent) => void,
-   *    component: import('preact').Component,
-   *    element: Object,
-   *    id: String,
-   *    items: Array<ListItemDefinition>,
-   *    label: String,
-   *    shouldSort?: Boolean,
-   *    shouldOpen?: Boolean
-   * } } ListGroupDefinition
-   *
-   * @typedef { {
-   *    component?: import('preact').Component,
-   *    entries: Array<EntryDefinition>,
-   *    id: String,
-   *    label: String,
-   *    shouldOpen?: Boolean
-   * } } GroupDefinition
-   *
-   *  @typedef { {
-   *    [id: String]: GetDescriptionFunction
-   * } } DescriptionConfig
-   *
-   * @callback { {
-   * @param {string} id
-   * @param {Object} element
-   * @returns {string}
-   * } } GetDescriptionFunction
-   *
-   * @typedef { {
-   *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
-   *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
-   * } } PlaceholderProvider
-   *
+  /**
+   * @typedef { {
+   *    component: import('preact').Component,
+   *    id: String,
+   *    isEdited?: Function
+   * } } EntryDefinition
+   *
+   * @typedef { {
+   *    autoFocusEntry: String,
+   *    autoOpen?: Boolean,
+   *    entries: Array<EntryDefinition>,
+   *    id: String,
+   *    label: String,
+   *    remove: (event: MouseEvent) => void
+   * } } ListItemDefinition
+   *
+   * @typedef { {
+   *    add: (event: MouseEvent) => void,
+   *    component: import('preact').Component,
+   *    element: Object,
+   *    id: String,
+   *    items: Array<ListItemDefinition>,
+   *    label: String,
+   *    shouldSort?: Boolean,
+   *    shouldOpen?: Boolean
+   * } } ListGroupDefinition
+   *
+   * @typedef { {
+   *    component?: import('preact').Component,
+   *    entries: Array<EntryDefinition>,
+   *    id: String,
+   *    label: String,
+   *    shouldOpen?: Boolean
+   * } } GroupDefinition
+   *
+   *  @typedef { {
+   *    [id: String]: GetDescriptionFunction
+   * } } DescriptionConfig
+   *
+   * @callback { {
+   * @param {string} id
+   * @param {Object} element
+   * @returns {string}
+   * } } GetDescriptionFunction
+   *
+   * @typedef { {
+   *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+   *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+   * } } PlaceholderProvider
+   *
    */
 
-  /**
-   * A basic properties panel component. Describes *how* content will be rendered, accepts
-   * data from implementor to describe *what* will be rendered.
-   *
-   * @param {Object} props
-   * @param {Object|Array} props.element
-   * @param {import('./components/Header').HeaderProvider} props.headerProvider
-   * @param {PlaceholderProvider} [props.placeholderProvider]
-   * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
-   * @param {Object} [props.layoutConfig]
-   * @param {Function} [props.layoutChanged]
-   * @param {DescriptionConfig} [props.descriptionConfig]
-   * @param {Function} [props.descriptionLoaded]
-   * @param {Object} [props.eventBus]
+  /**
+   * A basic properties panel component. Describes *how* content will be rendered, accepts
+   * data from implementor to describe *what* will be rendered.
+   *
+   * @param {Object} props
+   * @param {Object|Array} props.element
+   * @param {import('./components/Header').HeaderProvider} props.headerProvider
+   * @param {PlaceholderProvider} [props.placeholderProvider]
+   * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+   * @param {Object} [props.layoutConfig]
+   * @param {Function} [props.layoutChanged]
+   * @param {DescriptionConfig} [props.descriptionConfig]
+   * @param {Function} [props.descriptionLoaded]
+   * @param {Object} [props.eventBus]
    */
   function PropertiesPanel(props) {
     const {
@@ -49590,7 +50428,7 @@
     };
     const setLayoutForKey = (key, config) => {
       const newLayout = assign({}, layout);
-      set(newLayout, key, config);
+      set$1(newLayout, key, config);
       setLayout(newLayout);
     };
     const layoutContext = {
@@ -49788,8 +50626,8 @@
   }
   const noop$2 = () => {};
 
-  /**
-   * @param {import('../PropertiesPanel').ListGroupDefinition} props
+  /**
+   * @param {import('../PropertiesPanel').ListGroupDefinition} props
    */
   function ListGroup(props) {
     const {
@@ -49952,8 +50790,8 @@
 
   // helpers ////////////////////
 
-  /**
-   * Sorts given items alphanumeric by label
+  /**
+   * Sorts given items alphanumeric by label
    */
   function sortItems(items) {
     return sortBy(items, i => i.label.toLowerCase());
@@ -50027,17 +50865,17 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {boolean} [props.disabled]
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {boolean} [props.disabled]
    */
   function CheckboxEntry(props) {
     const {
@@ -50125,10 +50963,10 @@
     y(() => {
       let editor;
 
-      /* Trigger FEEL toggle when
-       *
-       * - `backspace` is pressed
-       * - AND the cursor is at the beginning of the input
+      /* Trigger FEEL toggle when
+       *
+       * - `backspace` is pressed
+       * - AND the cursor is at the beginning of the input
        */
       const onKeyDown = e => {
         if (e.key !== 'Backspace' || !editor) {
@@ -50199,10 +51037,10 @@
   }
   const noop$1 = () => {};
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.label
-   * @param {String} props.feel
+  /**
+   * @param {Object} props
+   * @param {Object} props.label
+   * @param {String} props.feel
    */
   function FeelIcon(props) {
     const {
@@ -50476,17 +51314,17 @@
     });
   });
 
-  /**
-   * @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.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.validate
+  /**
+   * @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.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.validate
    */
   function FeelEntry(props) {
     const {
@@ -50571,19 +51409,19 @@
     });
   }
 
-  /**
-   * @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.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {Function} props.validate
+  /**
+   * @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.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {Function} props.validate
    */
   function FeelTextArea(props) {
     return e$1(FeelEntry, {
@@ -50662,21 +51500,22 @@
     });
   }
 
-  /**
-   * @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 {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 {
@@ -50692,25 +51531,55 @@
       setValue,
       step,
       onFocus,
-      onBlur
+      onBlur,
+      validate
     } = props;
-    const value = getValue(element);
+    const [cachedInvalidValue, setCachedInvalidValue] = l$2(null);
+    const globalError = useError(id);
+    const [localError, setLocalError] = l$2(null);
+    let value = getValue(element);
+    const previousValue = usePrevious(value);
+    y(() => {
+      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 e$1("div", {
-      class: "bio-properties-panel-entry",
+      class: classNames('bio-properties-panel-entry', error ? 'has-error' : ''),
       "data-entry-id": id,
       children: [e$1(NumberField, {
         debounce: debounce,
         disabled: disabled,
         id: id,
         label: label,
-        onInput: setValue,
         onFocus: onFocus,
         onBlur: onBlur,
+        onInput: onInput,
         max: max,
         min: min,
         step: step,
         value: value
-      }, element), e$1(Description$1, {
+      }, element), error && e$1("div", {
+        class: "bio-properties-panel-error",
+        children: error
+      }), e$1(Description$1, {
         forId: id,
         element: element,
         value: description
@@ -50732,7 +51601,7 @@
       label,
       onChange,
       options = [],
-      value,
+      value = '',
       disabled,
       onFocus,
       onBlur
@@ -50781,18 +51650,18 @@
     });
   }
 
-  /**
-   * @param {object} props
-   * @param {object} props.element
-   * @param {string} props.id
-   * @param {string} [props.description]
-   * @param {string} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {Function} props.getOptions
-   * @param {boolean} [props.disabled]
+  /**
+   * @param {object} props
+   * @param {object} props.element
+   * @param {string} props.id
+   * @param {string} [props.description]
+   * @param {string} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {Function} props.getOptions
+   * @param {boolean} [props.disabled]
    */
   function SelectEntry(props) {
     const {
@@ -50894,20 +51763,20 @@
     });
   }
 
-  /**
-   * @param {object} props
-   * @param {object} props.element
-   * @param {string} props.id
-   * @param {string} props.description
-   * @param {boolean} props.debounce
-   * @param {string} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {number} props.rows
-   * @param {boolean} props.monospace
-   * @param {boolean} [props.disabled]
+  /**
+   * @param {object} props
+   * @param {object} props.element
+   * @param {string} props.id
+   * @param {string} props.description
+   * @param {boolean} props.debounce
+   * @param {string} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {number} props.rows
+   * @param {boolean} props.monospace
+   * @param {boolean} [props.disabled]
    */
   function TextAreaEntry(props) {
     const {
@@ -51010,19 +51879,19 @@
     });
   }
 
-  /**
-   * @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.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {Function} props.validate
+  /**
+   * @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.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {Function} props.validate
    */
   function TextfieldEntry(props) {
     const {
@@ -51107,6 +51976,7 @@
   const PropertiesPanelContext = D$1({
     getService
   });
+  var FormPropertiesPanelContext = PropertiesPanelContext;
   function arrayAdd(array, index, item) {
     const copy = [...array];
     copy.splice(index, 0, item);
@@ -51254,7 +52124,7 @@
   function useService(type, strict) {
     const {
       getService
-    } = F$1(PropertiesPanelContext);
+    } = F$1(FormPropertiesPanelContext);
     return getService(type, strict);
   }
 
@@ -51860,6 +52730,45 @@
       setValue
     });
   };
+  function simpleBoolEntryFactory(options) {
+    const {
+      id,
+      label,
+      path,
+      props
+    } = options;
+    const {
+      editField,
+      field
+    } = props;
+    return {
+      id,
+      label,
+      path,
+      field,
+      editField,
+      component: SimpleBoolComponent,
+      isEdited: isEdited$7
+    };
+  }
+  const SimpleBoolComponent = props => {
+    const {
+      id,
+      label,
+      path,
+      field,
+      editField
+    } = props;
+    const getValue = () => get(field, path, '');
+    const setValue = value => editField(field, path, value);
+    return CheckboxEntry({
+      element: field,
+      getValue,
+      id,
+      label,
+      setValue
+    });
+  };
   function LabelEntry(props) {
     const {
       field
@@ -52036,11 +52945,15 @@
       debounce,
       label: 'Decimal digits',
       element: field,
-      min: 0,
-      step: 1,
+      step: 'any',
       getValue,
       id,
-      setValue
+      setValue,
+      validate: value => {
+        if (value === undefined || value === null) return;
+        if (value < 0) return 'Should be greater than or equal to zero.';
+        if (!Number.isInteger(value)) return 'Should be an integer.';
+      }
     });
   }
   function NumberArrowStep(props) {
@@ -52129,7 +53042,7 @@
       element: field,
       getValue,
       id,
-      label: 'Serialize to string',
+      label: 'Output as string',
       description: 'Allows arbitrary precision values',
       setValue
     });
@@ -52368,6 +53281,24 @@
       setValue
     });
   }
+  function SelectEntries(props) {
+    const {
+      field
+    } = props;
+    const {
+      type
+    } = field;
+    if (type !== 'select') {
+      return [];
+    }
+    const entries = [simpleBoolEntryFactory({
+      id: 'searchable',
+      path: ['searchable'],
+      label: 'Searchable',
+      props
+    })];
+    return entries;
+  }
   function ValueEntry(props) {
     const {
       editField,
@@ -52406,7 +53337,7 @@
     const debounce = useService('debounce');
     const setValue = value => {
       const values = get(field, ['values']);
-      return editField(field, 'values', set(values, [index, 'label'], value));
+      return editField(field, 'values', set$1(values, [index, 'label'], value));
     };
     const getValue = () => {
       return get(field, ['values', index, 'label']);
@@ -52432,7 +53363,7 @@
     const debounce = useService('debounce');
     const setValue = value => {
       const values = get(field, ['values']);
-      return editField(field, 'values', set(values, [index, 'value'], value));
+      return editField(field, 'values', set$1(values, [index, 'value'], value));
     };
     const getValue = () => {
       return get(field, ['values', index, 'value']);
@@ -52742,7 +53673,7 @@
     const onChange = key => {
       return value => {
         const appearance = get(field, ['appearance'], {});
-        editField(field, ['appearance'], set(appearance, [key], value));
+        editField(field, ['appearance'], set$1(appearance, [key], value));
       };
     };
     const getValue = key => {
@@ -52890,6 +53821,9 @@
     }), ...AltTextEntry({
       field,
       editField
+    }), ...SelectEntries({
+      field,
+      editField
     }), ...DisabledEntry({
       field,
       editField
@@ -52950,14 +53884,14 @@
       type
     } = field;
     const validate = get(field, ['validate'], {});
-    const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS.custom.value].includes(validate?.validationType);
+    const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS.custom.value].includes(validate && validate.validationType);
     if (!(INPUTS.includes(type) && type !== 'checkbox' && type !== 'checklist' && type !== 'taglist')) {
       return null;
     }
     const onChange = key => {
       return value => {
         const validate = get(field, ['validate'], {});
-        editField(field, ['validate'], set(validate, [key], value));
+        editField(field, ['validate'], set$1(validate, [key], value));
       };
     };
     const getValue = key => {
@@ -53098,7 +54032,7 @@
       element: field,
       getValue: getValue('pattern'),
       id,
-      label: 'Regular expression pattern',
+      label: 'Custom regular expression',
       setValue: onChange('pattern')
     });
   }
@@ -53154,7 +54088,7 @@
       element: field,
       getValue: getValue('validationType'),
       id,
-      label: 'Regular expression validation',
+      label: 'Validation pattern',
       setValue,
       getOptions: () => Object.values(VALIDATION_TYPE_OPTIONS)
     });
@@ -53395,7 +54329,7 @@
       "data-field": selectedFormField && selectedFormField.id,
       onFocusCapture: onFocus,
       onBlurCapture: onBlur,
-      children: e$1(PropertiesPanelContext.Provider, {
+      children: e$1(FormPropertiesPanelContext.Provider, {
         value: propertiesPanelContext,
         children: e$1(PropertiesPanel, {
           element: selectedFormField,
@@ -53656,7 +54590,7 @@
      * @param {any} value
      */
     setProperty(property, value) {
-      const properties = set(this._getState().properties, [property], value);
+      const properties = set$1(this._getState().properties, [property], value);
       this._setState({
         properties
       });
@@ -55655,6 +56589,4 @@
 
   exports.Playground = Playground;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+}));