@bpmn-io/form-js-playground 0.14.1 → 0.15.0-alpha.0

package/dist/form-playground.umd.js

@@ -315,8 +315,6 @@
    *
    * @return {Array<?>}
    */
-  var proto = typeof Element !== 'undefined' ? Element.prototype : {};
-  proto.matches || proto.matchesSelector || proto.webkitMatchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector;
 
   /**
    * Expose `parse`.
@@ -925,9 +923,9 @@
   };
 
   /*!
-    Copyright (c) 2018 Jed Watson.
-    Licensed under the MIT License (MIT), see
-    http://jedwatson.github.io/classnames
+  	Copyright (c) 2018 Jed Watson.
+  	Licensed under the MIT License (MIT), see
+  	http://jedwatson.github.io/classnames
   */
 
   (function (module) {
@@ -952,14 +950,14 @@
   	          }
   	        }
   	      } 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 {
+  	        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
   	          classes.push(arg.toString());
+  	          continue;
+  	        }
+  	        for (var key in arg) {
+  	          if (hasOwn.call(arg, key) && arg[key]) {
+  	            classes.push(key);
+  	          }
   	        }
   	      }
   	    }
@@ -12804,7 +12802,7 @@
      * @return { ValueProducer }
      */
     static of(fn) {
-      return new ValueProducer$2(fn);
+      return new ValueProducer(fn);
     }
   };
   const dateTimeLiterals$2 = {
@@ -12969,7 +12967,7 @@
      * @return { Variables }
      */
     assign(options = {}) {
-      return Variables$2.of({
+      return Variables.of({
         ...this,
         ...options
       });
@@ -12985,7 +12983,7 @@
         context: this.context,
         parent: this.parent
       };
-      return Variables$2.of({
+      return Variables.of({
         ...defaultOptions,
         ...options
       });
@@ -13000,7 +12998,7 @@
         value,
         raw
       } = options;
-      return new Variables$2({
+      return new Variables({
         name,
         tokens: [...tokens],
         children: [...children],
@@ -15334,7 +15332,7 @@
      * @return { ValueProducer }
      */
     static of(fn) {
-      return new ValueProducer$1(fn);
+      return new ValueProducer(fn);
     }
   };
   const dateTimeLiterals$1 = {
@@ -15499,7 +15497,7 @@
      * @return { Variables }
      */
     assign(options = {}) {
-      return Variables$1.of({
+      return Variables.of({
         ...this,
         ...options
       });
@@ -15515,7 +15513,7 @@
         context: this.context,
         parent: this.parent
       };
-      return Variables$1.of({
+      return Variables.of({
         ...defaultOptions,
         ...options
       });
@@ -15530,7 +15528,7 @@
         value,
         raw
       } = options;
-      return new Variables$1({
+      return new Variables({
         name,
         tokens: [...tokens],
         children: [...children],
@@ -17665,7 +17663,7 @@
     */
     static of(text) {
       if (text.length == 0) throw new RangeError("A document must have at least one line");
-      if (text.length == 1 && !text[0]) return Text$2.empty;
+      if (text.length == 1 && !text[0]) return Text.empty;
       return text.length <= 32 /* Tree.Branch */ ? new TextLeaf(text) : TextNode.from(TextLeaf.split(text, []));
     }
   };
@@ -19892,12 +19890,12 @@
   }
   function resolveTransactionInner(state, spec, docSize) {
     let sel = spec.selection,
-      annotations = asArray$1(spec.annotations);
+      annotations = asArray$2(spec.annotations);
     if (spec.userEvent) annotations = annotations.concat(Transaction.userEvent.of(spec.userEvent));
     return {
       changes: spec.changes instanceof ChangeSet ? spec.changes : ChangeSet.of(spec.changes || [], docSize, state.facet(lineSeparator)),
       selection: sel && (sel instanceof EditorSelection ? sel : EditorSelection.single(sel.anchor, sel.head)),
-      effects: asArray$1(spec.effects),
+      effects: asArray$2(spec.effects),
       annotations,
       scrollIntoView: !!spec.scrollIntoView
     };
@@ -19942,7 +19940,7 @@
     let filters = state.facet(transactionFilter);
     for (let i = filters.length - 1; i >= 0; i--) {
       let filtered = filters[i](tr);
-      if (filtered instanceof Transaction) tr = filtered;else if (Array.isArray(filtered) && filtered.length == 1 && filtered[0] instanceof Transaction) tr = filtered[0];else tr = resolveTransaction(state, asArray$1(filtered), false);
+      if (filtered instanceof Transaction) tr = filtered;else if (Array.isArray(filtered) && filtered.length == 1 && filtered[0] instanceof Transaction) tr = filtered[0];else tr = resolveTransaction(state, asArray$2(filtered), false);
     }
     return tr;
   }
@@ -19957,7 +19955,7 @@
     return spec == tr ? tr : Transaction.create(state, tr.changes, tr.selection, spec.effects, spec.annotations, spec.scrollIntoView);
   }
   const none$3 = [];
-  function asArray$1(value) {
+  function asArray$2(value) {
     return value == null ? none$3 : Array.isArray(value) ? value : [value];
   }
 
@@ -20091,7 +20089,7 @@
           base = effect.value;
         } else if (effect.is(StateEffect.appendConfig)) {
           conf = null;
-          base = asArray$1(base).concat(effect.value);
+          base = asArray$2(base).concat(effect.value);
         }
       }
       let startValues;
@@ -20135,7 +20133,7 @@
       let result1 = f(sel.ranges[0]);
       let changes = this.changes(result1.changes),
         ranges = [result1.range];
-      let effects = asArray$1(result1.effects);
+      let effects = asArray$2(result1.effects);
       for (let i = 1; i < sel.ranges.length; i++) {
         let result = f(sel.ranges[i]);
         let newChanges = this.changes(result.changes),
@@ -20144,7 +20142,7 @@
         let mapBy = changes.mapDesc(newChanges, true);
         ranges.push(result.range.map(mapBy));
         changes = changes.compose(newMapped);
-        effects = StateEffect.mapEffects(effects, newMapped).concat(StateEffect.mapEffects(asArray$1(result.effects), mapBy));
+        effects = StateEffect.mapEffects(effects, newMapped).concat(StateEffect.mapEffects(asArray$2(result.effects), mapBy));
       }
       return {
         changes,
@@ -30554,7 +30552,7 @@
       };
     })
   });
-  function asArray(val) {
+  function asArray$1(val) {
     return Array.isArray(val) ? val : [val];
   }
   function advanceCursor(cursor, collect, pos) {
@@ -30613,7 +30611,7 @@
           if (config.domEventHandlers[prop](view, line, event)) event.preventDefault();
         });
       }
-      this.markers = asArray(config.markers(view));
+      this.markers = asArray$1(config.markers(view));
       if (config.initialSpacer) {
         this.spacer = new GutterElement(view, 0, 0, [config.initialSpacer(view)]);
         this.dom.appendChild(this.spacer.dom);
@@ -30622,7 +30620,7 @@
     }
     update(update) {
       let prevMarkers = this.markers;
-      this.markers = asArray(this.config.markers(update.view));
+      this.markers = asArray$1(this.config.markers(update.view));
       if (this.spacer && this.config.updateSpacer) {
         let updated = this.config.updateSpacer(this.spacer.markers[0], update);
         if (updated != this.spacer.markers[0]) this.spacer.update(update.view, 0, 0, [updated]);
@@ -37979,7 +37977,7 @@
     }
   }
   /// Elements are used to compose syntax nodes during parsing.
-  let Element$2 = class Element {
+  let Element$1 = class Element {
     /// @internal
     constructor(
     /// The node's
@@ -38030,7 +38028,7 @@
     }
   }
   function elt(type, from, to, children) {
-    return new Element$2(type, from, to, children);
+    return new Element$1(type, from, to, children);
   }
   const EmphasisUnderscore = {
     resolve: "Emphasis",
@@ -38324,7 +38322,7 @@
         // Move the covered region into content, optionally adding marker nodes
         if (open.type.mark) content.push(this.elt(open.type.mark, start, open.to));
         for (let k = j + 1; k < i; k++) {
-          if (this.parts[k] instanceof Element$2) content.push(this.parts[k]);
+          if (this.parts[k] instanceof Element$1) content.push(this.parts[k]);
           this.parts[k] = null;
         }
         if (close.type.mark) content.push(this.elt(close.type.mark, close.from, end));
@@ -38339,7 +38337,7 @@
       let result = [];
       for (let i = from; i < this.parts.length; i++) {
         let part = this.parts[i];
-        if (part instanceof Element$2) result.push(part);
+        if (part instanceof Element$1) result.push(part);
       }
       return result;
     }
@@ -38383,7 +38381,7 @@
       while (eI < elts.length && elts[eI].to < mark.to) eI++;
       if (eI < elts.length && elts[eI].from < mark.from) {
         let e = elts[eI];
-        if (e instanceof Element$2) elts[eI] = new Element$2(e.type, e.from, e.to, injectMarks(e.children, [mark]));
+        if (e instanceof Element$1) elts[eI] = new Element$1(e.type, e.from, e.to, injectMarks(e.children, [mark]));
       } else {
         elts.splice(eI++, 0, mark);
       }
@@ -49707,6 +49705,30 @@
   var DEFAULT_PRIORITY$3 = 1000;
   var slice$1 = Array.prototype.slice;
 
+  /**
+   * @typedef { {
+   *   stopPropagation(): void;
+   *   preventDefault(): void;
+   *   cancelBubble: boolean;
+   *   defaultPrevented: boolean;
+   *   returnValue: any;
+   * } } Event
+   */
+
+  /**
+   * @template E
+   *
+   * @typedef { (event: E & Event, ...any) => any } EventBusEventCallback
+   */
+
+  /**
+   * @typedef { {
+   *  priority: number;
+   *  next: EventBusListener | null;
+   *  callback: EventBusEventCallback<any>;
+   * } } EventBusListener
+   */
+
   /**
    * A general purpose event bus.
    *
@@ -49791,6 +49813,9 @@
    * ```
    */
   function EventBus$1() {
+    /**
+     * @type { Record<string, EventBusListener> }
+     */
     this._listeners = {};
 
     // cleanup on destroy on lowest priority to allow
@@ -49810,10 +49835,12 @@
    *
    * Returning anything but `undefined` from a listener will stop the listener propagation.
    *
-   * @param {string|Array<string>} events
-   * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
-   * @param {Function} callback
-   * @param {Object} [that] Pass context (`this`) to the callback
+   * @template T
+   *
+   * @param {string|string[]} events to subscribe to
+   * @param {number} [priority=1000] listen priority
+   * @param {EventBusEventCallback<T>} callback
+   * @param {any} [that] callback context
    */
   EventBus$1.prototype.on = function (events, priority, callback, that) {
     events = isArray$4(events) ? events : [events];
@@ -49845,14 +49872,16 @@
   };
 
   /**
-   * Register an event listener that is executed only once.
+   * Register an event listener that is called only once.
    *
-   * @param {string} event the event name to register for
-   * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
-   * @param {Function} callback the callback to execute
-   * @param {Object} [that] Pass context (`this`) to the callback
+   * @template T
+   *
+   * @param {string|string[]} events to subscribe to
+   * @param {number} [priority=1000] the listen priority
+   * @param {EventBusEventCallback<T>} callback
+   * @param {any} [that] callback context
    */
-  EventBus$1.prototype.once = function (event, priority, callback, that) {
+  EventBus$1.prototype.once = function (events, priority, callback, that) {
     var self = this;
     if (isFunction$1(priority)) {
       that = callback;
@@ -49865,7 +49894,7 @@
     function wrappedCallback() {
       wrappedCallback.__isTomb = true;
       var result = callback.apply(that, arguments);
-      self.off(event, wrappedCallback);
+      self.off(events, wrappedCallback);
       return result;
     }
 
@@ -49873,7 +49902,7 @@
     // bound callbacks via {@link #off} using the original
     // callback
     wrappedCallback[FN_REF$1] = callback;
-    this.on(event, priority, wrappedCallback);
+    this.on(events, priority, wrappedCallback);
   };
 
   /**
@@ -49881,8 +49910,8 @@
    *
    * If no callback is given, all listeners for a given event name are being removed.
    *
-   * @param {string|Array<string>} events
-   * @param {Function} [callback]
+   * @param {string|string[]} events
+   * @param {EventBusEventCallback} [callback]
    */
   EventBus$1.prototype.off = function (events, callback) {
     events = isArray$4(events) ? events : [events];
@@ -49893,11 +49922,11 @@
   };
 
   /**
-   * Create an EventBus event.
+   * Create an event recognized be the event bus.
    *
-   * @param {Object} data
+   * @param {Object} data Event data.
    *
-   * @return {Object} event, recognized by the eventBus
+   * @return {Event} An event that will be recognized by the event bus.
    */
   EventBus$1.prototype.createEvent = function (data) {
     var event = new InternalEvent$1();
@@ -49906,10 +49935,11 @@
   };
 
   /**
-   * Fires a named event.
+   * Fires an event.
    *
    * @example
    *
+   * ```javascript
    * // fire event by name
    * events.fire('foo');
    *
@@ -49927,13 +49957,13 @@
    * });
    *
    * events.fire({ type: 'foo' }, 'I am bar!');
+   * ```
    *
-   * @param {string} [name] the optional event name
-   * @param {Object} [event] the event object
-   * @param {...Object} additional arguments to be passed to the callback functions
+   * @param {string} [type] event type
+   * @param {Object} [data] event or event data
+   * @param {...any} [args] additional arguments the callback will be called with.
    *
-   * @return {boolean} the events return value, if specified or false if the
-   *                   default action was prevented by listeners
+   * @return {any} The return value. Will be set to `false` if the default was prevented.
    */
   EventBus$1.prototype.fire = function (type, data) {
     var event, firstListener, returnValue, args;
@@ -49985,6 +50015,14 @@
     }
     return returnValue;
   };
+
+  /**
+   * Handle an error by firing an event.
+   *
+   * @param {Error} error The error to be handled.
+   *
+   * @return {boolean} Whether the error was handled.
+   */
   EventBus$1.prototype.handleError = function (error) {
     return this.fire('error', {
       error: error
@@ -49993,6 +50031,14 @@
   EventBus$1.prototype._destroy = function () {
     this._listeners = {};
   };
+
+  /**
+   * @param {Event} event
+   * @param {any[]} args
+   * @param {EventBusListener} listener
+   *
+   * @return {any}
+   */
   EventBus$1.prototype._invokeListeners = function (event, args, listener) {
     var returnValue;
     while (listener) {
@@ -50005,6 +50051,14 @@
     }
     return returnValue;
   };
+
+  /**
+   * @param {Event} event
+   * @param {any[]} args
+   * @param {EventBusListener} listener
+   *
+   * @return {any}
+   */
   EventBus$1.prototype._invokeListener = function (event, args, listener) {
     var returnValue;
     if (listener.callback.__isTomb) {
@@ -50033,7 +50087,7 @@
     return returnValue;
   };
 
-  /*
+  /**
    * Add new listener with a certain priority to the list
    * of listeners (for the given event).
    *
@@ -50047,7 +50101,7 @@
    *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
    *
    * @param {string} event
-   * @param {Object} listener { priority, callback }
+   * @param {EventBusListener} listener
    */
   EventBus$1.prototype._addListener = function (event, newListener) {
     var listener = this._getListeners(event),
@@ -50078,9 +50132,20 @@
     // add new listener to back
     previousListener.next = newListener;
   };
+
+  /**
+   * @param {string} name
+   *
+   * @return {EventBusListener}
+   */
   EventBus$1.prototype._getListeners = function (name) {
     return this._listeners[name];
   };
+
+  /**
+   * @param {string} name
+   * @param {EventBusListener} listener
+   */
   EventBus$1.prototype._setListeners = function (name, listener) {
     this._listeners[name] = listener;
   };
@@ -50128,9 +50193,9 @@
    * Invoke function. Be fast...
    *
    * @param {Function} fn
-   * @param {Array<Object>} args
+   * @param {any[]} args
    *
-   * @return {Any}
+   * @return {any}
    */
   function invokeFunction$1(fn, args) {
     return fn.apply(null, args);
@@ -50705,16 +50770,18 @@
         // if unavailable - get empty value from form field
 
         if (_path) {
-          const fieldImplementation = this._formFields.get(type);
+          const {
+            config: fieldConfig
+          } = this._formFields.get(type);
           let valueData = get$1(data, _path);
-          if (!isUndefined$2(valueData) && fieldImplementation.sanitizeValue) {
-            valueData = fieldImplementation.sanitizeValue({
+          if (!isUndefined$2(valueData) && fieldConfig.sanitizeValue) {
+            valueData = fieldConfig.sanitizeValue({
               formField,
               data,
               value: valueData
             });
           }
-          const initializedFieldValue = !isUndefined$2(valueData) ? valueData : !isUndefined$2(defaultValue) ? defaultValue : fieldImplementation.emptyValue;
+          const initializedFieldValue = !isUndefined$2(valueData) ? valueData : !isUndefined$2(defaultValue) ? defaultValue : fieldConfig.emptyValue;
           initializedData = {
             ...initializedData,
             [_path[0]]: initializedFieldValue
@@ -50776,14 +50843,16 @@
       })
     });
   }
-  Button.create = (options = {}) => ({
-    action: 'submit',
-    ...options
-  });
-  Button.type = type$b;
-  Button.label = 'Button';
-  Button.keyed = true;
-  Button.group = 'action';
+  Button.config = {
+    type: type$b,
+    keyed: true,
+    label: 'Button',
+    group: 'action',
+    create: (options = {}) => ({
+      action: 'submit',
+      ...options
+    })
+  };
   const FormRenderContext = D$1({
     Empty: props => {
       return null;
@@ -50844,13 +50913,16 @@
   }
   function Errors(props) {
     const {
-      errors
+      errors,
+      id
     } = props;
     if (!errors.length) {
       return null;
     }
     return e$1("div", {
       class: "fjs-form-field-error",
+      "aria-live": "polite",
+      id: id,
       children: e$1("ul", {
         children: errors.map(error => {
           return e$1("li", {
@@ -50906,6 +50978,7 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
     return e$1("div", {
       class: classNames(formFieldClasses(type$a, {
         errors,
@@ -50923,26 +50996,30 @@
           disabled: disabled,
           id: prefixId(id, formId),
           type: "checkbox",
-          onChange: onChange
+          onChange: onChange,
+          "aria-describedby": errorMessageId
         })
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Checkbox$1.create = (options = {}) => ({
-    ...options
-  });
-  Checkbox$1.type = type$a;
-  Checkbox$1.label = 'Checkbox';
-  Checkbox$1.keyed = true;
-  Checkbox$1.emptyValue = false;
-  Checkbox$1.sanitizeValue = ({
-    value
-  }) => value === true;
-  Checkbox$1.group = 'selection';
+  Checkbox$1.config = {
+    type: type$a,
+    keyed: true,
+    label: 'Checkbox',
+    group: 'selection',
+    emptyValue: false,
+    sanitizeValue: ({
+      value
+    }) => value === true,
+    create: (options = {}) => ({
+      ...options
+    })
+  };
 
   // parses the options data from the provided form field and form data
   function getValuesData(formField, formData) {
@@ -51304,6 +51381,7 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
     return e$1("div", {
       class: classNames(formFieldClasses(type$9, {
         errors,
@@ -51326,37 +51404,41 @@
             disabled: disabled,
             id: prefixId(`${id}-${index}`, formId),
             type: "checkbox",
-            onClick: () => toggleCheckbox(v.value)
+            onClick: () => toggleCheckbox(v.value),
+            "aria-describedby": errorMessageId
           })
         }, `${id}-${index}`);
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Checklist.create = (options = {}) => {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
+  Checklist.config = {
+    type: type$9,
+    keyed: true,
+    label: 'Checklist',
+    group: 'selection',
+    emptyValue: [],
+    sanitizeValue: sanitizeMultiSelectValue,
+    create: (options = {}) => {
+      const defaults = {};
+
+      // provide default values if valuesKey isn't set
+      if (!options.valuesKey) {
+        defaults.values = [{
+          label: 'Value',
+          value: 'value'
+        }];
+      }
+      return {
+        ...defaults,
+        ...options
+      };
     }
-    return {
-      ...defaults,
-      ...options
-    };
   };
-  Checklist.type = type$9;
-  Checklist.label = 'Checklist';
-  Checklist.keyed = true;
-  Checklist.emptyValue = [];
-  Checklist.sanitizeValue = sanitizeMultiSelectValue;
-  Checklist.group = 'selection';
 
   /**
    * Returns the conditionally filtered data of a form reactively.
@@ -51454,9 +51536,6 @@
       field,
       onChange
     } = props;
-    const {
-      _path
-    } = field;
     const formFields = useService$2('formFields'),
       form = useService$2('form');
     const {
@@ -51473,8 +51552,8 @@
     if (!FormFieldComponent) {
       throw new Error(`cannot render field <${field.type}>`);
     }
-    const value = get$1(data, _path);
-    const fieldErrors = findErrors(errors, _path);
+    const value = get$1(data, field._path);
+    const fieldErrors = findErrors(errors, field._path);
     const disabled = properties.readOnly || field.disabled || false;
     const hidden = useCondition(field.conditional && field.conditional.hide || null);
     if (hidden) {
@@ -51540,14 +51619,16 @@
       }), components.length ? null : e$1(Empty, {})]
     });
   }
-  Default.create = (options = {}) => ({
-    components: [],
-    ...options
-  });
-  Default.type = 'default';
-  Default.keyed = false;
-  Default.label = null;
-  Default.group = null;
+  Default.config = {
+    type: 'default',
+    keyed: false,
+    label: null,
+    group: null,
+    create: (options = {}) => ({
+      components: [],
+      ...options
+    })
+  };
   function _extends$j() {
     _extends$j = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -51733,16 +51814,17 @@
             ref: dateInputRef,
             type: "text",
             id: fullId,
-            class: 'fjs-input',
+            class: "fjs-input",
             disabled: disabled,
             placeholder: "mm/dd/yyyy",
             autoComplete: "off",
             onFocus: onInputFocus,
             onKeyDown: onInputKeyDown,
-            onMouseDown: e => !flatpickrInstance.isOpen && flatpickrInstance.open(),
+            onMouseDown: () => !flatpickrInstance.isOpen && flatpickrInstance.open(),
             onBlur: onInputBlur,
-            onInput: e => setIsInputDirty(true),
-            "data-input": true
+            onInput: () => setIsInputDirty(true),
+            "data-input": true,
+            "aria-describedby": props['aria-describedby']
           })
         })
       })]
@@ -52010,7 +52092,8 @@
             },
             onBlur: onInputBlur,
             onKeyDown: onInputKeyDown,
-            "data-input": true
+            "data-input": true,
+            "aria-describedby": props['aria-describedby']
           }), dropdownIsOpen && e$1(DropdownList, {
             values: timeOptions,
             height: 150,
@@ -52145,6 +52228,7 @@
         time
       });
     }, []);
+    const errorMessageId = allErrors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
     const datePickerProps = {
       id,
       label: dateLabel,
@@ -52154,7 +52238,8 @@
       disabled,
       disallowPassedDates,
       date: dateTime.date,
-      setDate
+      setDate,
+      'aria-describedby': errorMessageId
     };
     const timePickerProps = {
       id,
@@ -52166,7 +52251,8 @@
       use24h,
       timeInterval,
       time: dateTime.time,
-      setTime
+      setTime,
+      'aria-describedby': errorMessageId
     };
     return e$1("div", {
       class: formFieldClasses(type$8, {
@@ -52185,25 +52271,28 @@
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: allErrors
+        errors: allErrors,
+        id: errorMessageId
       })]
     });
   }
-  Datetime.create = (options = {}) => {
-    const defaults = {};
-    set$2(defaults, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
-    set$2(defaults, DATE_LABEL_PATH, 'Date');
-    return {
-      ...defaults,
-      ...options
-    };
+  Datetime.config = {
+    type: type$8,
+    keyed: true,
+    label: 'Date time',
+    group: 'basic-input',
+    emptyValue: null,
+    sanitizeValue: sanitizeDateTimePickerValue,
+    create: (options = {}) => {
+      const defaults = {};
+      set$2(defaults, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
+      set$2(defaults, DATE_LABEL_PATH, 'Date');
+      return {
+        ...defaults,
+        ...options
+      };
+    }
   };
-  Datetime.type = type$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.
@@ -52247,7 +52336,7 @@
           href: "https://bpmn.io",
           target: "_blank",
           rel: "noopener",
-          style: "margin: 15px 20px 15px 10px; align-self: center; color: #404040",
+          style: "margin: 15px 20px 15px 10px; align-self: center; color: var(--cds-icon-primary, #404040)",
           children: e$1(Logo, {})
         }), e$1("span", {
           children: ["Web-based tooling for BPMN, DMN, and forms powered by ", e$1("a", {
@@ -52270,7 +52359,7 @@
         rel: "noopener",
         class: "fjs-powered-by-link",
         title: "Powered by bpmn.io",
-        style: "color: #404040",
+        style: "color: var(--cds-text-primary, #404040)",
         onClick: props.onClick,
         children: e$1(Logo, {})
       })
@@ -52297,8 +52386,12 @@
   function FormComponent(props) {
     const form = useService$2('form');
     const {
-      schema
+      schema,
+      properties
     } = form._getState();
+    const {
+      ariaLabel
+    } = properties;
     const {
       onSubmit = noop,
       onReset = noop,
@@ -52316,6 +52409,7 @@
       class: "fjs-form",
       onSubmit: handleSubmit,
       onReset: handleReset,
+      "aria-label": ariaLabel,
       noValidate: true,
       children: [e$1(FormField, {
         field: schema,
@@ -52325,7 +52419,7 @@
   }
   const NODE_TYPE_TEXT = 3,
     NODE_TYPE_ELEMENT = 1;
-  const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'em', 'a', 'p', 'div', 'ul', 'ol', 'li', 'hr', 'blockquote', 'img', 'pre', 'code', 'br', 'strong'];
+  const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'em', 'a', 'p', 'div', 'ul', 'ol', 'li', 'hr', 'blockquote', 'img', 'pre', 'code', 'br', 'strong', 'table', 'thead', 'tbody', 'tr', 'th', 'td'];
   const ALLOWED_ATTRIBUTES = ['align', 'alt', 'class', 'href', 'id', 'name', 'rel', 'target', 'src'];
   const ALLOWED_URI_PATTERN = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i; // eslint-disable-line no-useless-escape
   const ALLOWED_IMAGE_SRC_PATTERN = /^(https?|data):.*/i; // eslint-disable-line no-useless-escape
@@ -52525,13 +52619,15 @@
       })
     });
   }
-  Image.create = (options = {}) => ({
-    ...options
-  });
-  Image.type = type$7;
-  Image.keyed = false;
-  Image.label = 'Image view';
-  Image.group = 'presentation';
+  Image.config = {
+    type: type$7,
+    keyed: false,
+    label: 'Image view',
+    group: 'presentation',
+    create: (options = {}) => ({
+      ...options
+    })
+  };
   function _extends$g() {
     _extends$g = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -52621,10 +52717,10 @@
 
     // checks whether the value currently in the form data is practically different from the one in the input field cache
     // this allows us to guarantee the field always displays valid form data, but without auto-simplifying values like 1.000 to 1
-    const cacheValueMatchesState = d(() => Numberfield.sanitizeValue({
+    const cacheValueMatchesState = d(() => Numberfield.config.sanitizeValue({
       value,
       formField: field
-    }) === Numberfield.sanitizeValue({
+    }) === Numberfield.config.sanitizeValue({
       value: stringValueCache,
       formField: field
     }), [stringValueCache, value, field]);
@@ -52718,6 +52814,7 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$6, {
         errors,
@@ -52752,7 +52849,8 @@
             type: "text",
             autoComplete: "off",
             step: arrowIncrementValue,
-            value: displayValue
+            value: displayValue,
+            "aria-describedby": errorMessageId
           }), e$1("div", {
             class: classNames('fjs-number-arrow-container', {
               'fjs-disabled': disabled
@@ -52779,31 +52877,34 @@
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Numberfield.create = (options = {}) => ({
-    ...options
-  });
-  Numberfield.sanitizeValue = ({
-    value,
-    formField
-  }) => {
-    // null state is allowed
-    if (isNullEquivalentValue(value)) return null;
+  Numberfield.config = {
+    type: type$6,
+    keyed: true,
+    label: 'Number',
+    group: 'basic-input',
+    emptyValue: null,
+    sanitizeValue: ({
+      value,
+      formField
+    }) => {
+      // null state is allowed
+      if (isNullEquivalentValue(value)) return null;
 
-    // if data cannot be parsed as a valid number, go into invalid NaN state
-    if (!isValidNumber$1(value)) return 'NaN';
+      // if data cannot be parsed as a valid number, go into invalid NaN state
+      if (!isValidNumber$1(value)) return 'NaN';
 
-    // otherwise parse to formatting type
-    return formField.serializeToString ? value.toString() : Number(value);
+      // otherwise parse to formatting type
+      return formField.serializeToString ? value.toString() : Number(value);
+    },
+    create: (options = {}) => ({
+      ...options
+    })
   };
-  Numberfield.type = type$6;
-  Numberfield.keyed = true;
-  Numberfield.label = 'Number';
-  Numberfield.emptyValue = null;
-  Numberfield.group = 'basic-input';
   const type$5 = 'radio';
   function Radio(props) {
     const {
@@ -52834,6 +52935,7 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$5, {
         errors,
@@ -52856,37 +52958,41 @@
             disabled: disabled,
             id: prefixId(`${id}-${index}`, formId),
             type: "radio",
-            onClick: () => onChange(option.value)
+            onClick: () => onChange(option.value),
+            "aria-describedby": errorMessageId
           })
         }, `${id}-${index}`);
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Radio.create = function (options = {}) {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
+  Radio.config = {
+    type: type$5,
+    keyed: true,
+    label: 'Radio',
+    group: 'selection',
+    emptyValue: null,
+    sanitizeValue: sanitizeSingleSelectValue,
+    create: (options = {}) => {
+      const defaults = {};
+
+      // provide default values if valuesKey isn't set
+      if (!options.valuesKey) {
+        defaults.values = [{
+          label: 'Value',
+          value: 'value'
+        }];
+      }
+      return {
+        ...defaults,
+        ...options
+      };
     }
-    return {
-      ...defaults,
-      ...options
-    };
   };
-  Radio.type = type$5;
-  Radio.label = 'Radio';
-  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++) {
@@ -53037,7 +53143,8 @@
           onBlur: () => {
             setIsDropdownExpanded(false);
             setFilter(valueLabel);
-          }
+          },
+          "aria-describedby": props['aria-describedby']
         }), displayState.displayCross && e$1("span", {
           class: "fjs-select-cross",
           onMouseDown: e => {
@@ -53122,14 +53229,20 @@
         }),
         onFocus: () => setIsDropdownExpanded(true),
         onBlur: () => setIsDropdownExpanded(false),
-        onMouseDown: e => onMouseDown(e),
-        tabIndex: disabled ? undefined : 0,
+        onMouseDown: onMouseDown,
         children: [e$1("div", {
           class: classNames('fjs-select-display', {
             'fjs-select-placeholder': !value
           }),
           id: prefixId(`${id}-display`, formId),
           children: valueLabel || 'Select'
+        }), !disabled && e$1("input", {
+          id: prefixId(`${id}-search`, formId),
+          class: "fjs-select-hidden-input",
+          value: valueLabel,
+          onFocus: () => setIsDropdownExpanded(true),
+          onBlur: () => setIsDropdownExpanded(false),
+          "aria-describedby": props['aria-describedby']
         }), displayState.displayCross && e$1("span", {
           class: "fjs-select-cross",
           onMouseDown: e => {
@@ -53178,14 +53291,16 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
     const selectProps = d(() => ({
       id,
       disabled,
       errors,
       field,
       value,
-      onChange
-    }), [disabled, errors, field, id, value, onChange]);
+      onChange,
+      'aria-describedby': errorMessageId
+    }), [disabled, errors, field, id, value, onChange, errorMessageId]);
     return e$1("div", {
       class: formFieldClasses(type$4, {
         errors,
@@ -53198,7 +53313,7 @@
         }
       },
       children: [e$1(Label$1, {
-        id: prefixId(id, formId),
+        id: prefixId(`${id}-search`, formId),
         label: label,
         required: required
       }), searchable ? e$1(SearchableSelect, {
@@ -53208,31 +53323,34 @@
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Select$1.create = (options = {}) => {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
+  Select$1.config = {
+    type: type$4,
+    keyed: true,
+    label: 'Select',
+    group: 'selection',
+    emptyValue: null,
+    sanitizeValue: sanitizeSingleSelectValue,
+    create: (options = {}) => {
+      const defaults = {};
+
+      // provide default values if valuesKey isn't set
+      if (!options.valuesKey) {
+        defaults.values = [{
+          label: 'Value',
+          value: 'value'
+        }];
+      }
+      return {
+        ...defaults,
+        ...options
+      };
     }
-    return {
-      ...defaults,
-      ...options
-    };
   };
-  Select$1.type = type$4;
-  Select$1.label = 'Select';
-  Select$1.keyed = true;
-  Select$1.emptyValue = null;
-  Select$1.sanitizeValue = sanitizeSingleSelectValue;
-  Select$1.group = 'selection';
   const type$3 = 'taglist';
   function Taglist(props) {
     const {
@@ -53253,6 +53371,7 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
     const [filter, setFilter] = l$2('');
     const [filteredOptions, setFilteredOptions] = l$2([]);
     const [isDropdownExpanded, setIsDropdownExpanded] = l$2(false);
@@ -53388,15 +53507,16 @@
           onChange: onFilterChange,
           type: "text",
           value: filter,
-          placeholder: disabled ? '' : 'Search',
+          placeholder: disabled ? undefined : 'Search',
           autoComplete: "off",
-          onKeyDown: e => onInputKeyDown(e),
+          onKeyDown: onInputKeyDown,
           onMouseDown: () => setIsEscapeClose(false),
           onFocus: () => setIsDropdownExpanded(true),
           onBlur: () => {
             setIsDropdownExpanded(false);
             setFilter('');
-          }
+          },
+          "aria-describedby": errorMessageId
         })]
       }), e$1("div", {
         class: "fjs-taglist-anchor",
@@ -53410,33 +53530,40 @@
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Taglist.create = (options = {}) => {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
+  Taglist.config = {
+    type: type$3,
+    keyed: true,
+    label: 'Tag list',
+    group: 'selection',
+    emptyValue: [],
+    sanitizeValue: sanitizeMultiSelectValue,
+    create: (options = {}) => {
+      const defaults = {};
+
+      // provide default values if valuesKey isn't set
+      if (!options.valuesKey) {
+        defaults.values = [{
+          label: 'Value',
+          value: 'value'
+        }];
+      }
+      return {
+        ...defaults,
+        ...options
+      };
     }
-    return {
-      ...defaults,
-      ...options
-    };
   };
-  Taglist.type = type$3;
-  Taglist.label = 'Tag list';
-  Taglist.keyed = true;
-  Taglist.emptyValue = [];
-  Taglist.sanitizeValue = sanitizeMultiSelectValue;
-  Taglist.group = 'selection';
   const type$2 = 'text';
   function Text$1(props) {
+    const form = useService$2('form');
+    const {
+      textLinkTarget
+    } = form._getState().properties;
     const {
       field,
       disableLinks
@@ -53458,9 +53585,20 @@
       const html = markdownRenderer.render(markdown);
       return sanitizeHTML(html);
     }, [markdownRenderer, markdown]);
-    const componentOverrides = d(() => disableLinks ? {
-      'a': DisabledLink
-    } : {}, [disableLinks]);
+    const OverridenTargetLink = d(() => BuildOverridenTargetLink(textLinkTarget), [textLinkTarget]);
+    const componentOverrides = d(() => {
+      if (disableLinks) {
+        return {
+          'a': DisabledLink
+        };
+      }
+      if (textLinkTarget) {
+        return {
+          'a': OverridenTargetLink
+        };
+      }
+      return {};
+    }, [disableLinks, OverridenTargetLink, textLinkTarget]);
     return e$1("div", {
       class: formFieldClasses(type$2),
       children: e$1(Markup, {
@@ -53470,21 +53608,35 @@
       })
     });
   }
-  Text$1.create = (options = {}) => ({
-    text: '# Text',
-    ...options
-  });
-  Text$1.type = type$2;
-  Text$1.keyed = false;
-  Text$1.group = 'presentation';
-  Text$1.label = 'Text view';
+  Text$1.config = {
+    type: type$2,
+    keyed: false,
+    label: 'Text view',
+    group: 'presentation',
+    create: (options = {}) => ({
+      text: '# Text',
+      ...options
+    })
+  };
+  function BuildOverridenTargetLink(target) {
+    return function ({
+      children,
+      ...rest
+    }) {
+      return e$1("a", {
+        ...rest,
+        target: target,
+        children: children
+      });
+    };
+  }
   function DisabledLink({
-    href,
-    children
+    children,
+    ...rest
   }) {
     return e$1("a", {
+      ...rest,
       class: "fjs-disabled-link",
-      href: href,
       tabIndex: -1,
       children: children
     });
@@ -53522,6 +53674,7 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type$1, {
         errors,
@@ -53541,26 +53694,40 @@
           id: prefixId(id, formId),
           onInput: onChange,
           type: "text",
-          value: value
+          value: value,
+          "aria-describedby": errorMessageId
         })
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  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$4(value) || isObject$1(value) ? '' : String(value);
-  Textfield$1.group = 'basic-input';
+  Textfield$1.config = {
+    type: type$1,
+    keyed: true,
+    label: 'Text field',
+    group: 'basic-input',
+    emptyValue: '',
+    sanitizeValue: ({
+      value
+    }) => {
+      if (isArray$4(value) || isObject$1(value)) {
+        return '';
+      }
+
+      // sanitize newlines to spaces
+      if (typeof value === 'string') {
+        return value.replace(/[\r\n\t]/g, ' ');
+      }
+      return String(value);
+    },
+    create: (options = {}) => ({
+      ...options
+    })
+  };
   const type = 'textarea';
   function Textarea(props) {
     const {
@@ -53606,6 +53773,7 @@
     const {
       formId
     } = F$1(FormContext$1);
+    const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
     return e$1("div", {
       class: formFieldClasses(type, {
         errors,
@@ -53621,25 +53789,29 @@
         id: prefixId(id, formId),
         onInput: onInput,
         value: value,
-        ref: textareaRef
+        ref: textareaRef,
+        "aria-describedby": errorMessageId
       }), e$1(Description$2, {
         description: description
       }), e$1(Errors, {
-        errors: errors
+        errors: errors,
+        id: errorMessageId
       })]
     });
   }
-  Textarea.create = (options = {}) => ({
-    ...options
-  });
-  Textarea.type = type;
-  Textarea.label = 'Text area';
-  Textarea.keyed = true;
-  Textarea.emptyValue = '';
-  Textarea.sanitizeValue = ({
-    value
-  }) => isArray$4(value) || isObject$1(value) ? '' : String(value);
-  Textarea.group = 'basic-input';
+  Textarea.config = {
+    type,
+    keyed: true,
+    label: 'Text area',
+    group: 'basic-input',
+    emptyValue: '',
+    sanitizeValue: ({
+      value
+    }) => isArray$4(value) || isObject$1(value) ? '' : String(value),
+    create: (options = {}) => ({
+      ...options
+    })
+  };
   function _extends$d() {
     _extends$d = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -53660,10 +53832,11 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M45 17a3 3 0 013 3v14a3 3 0 01-3 3H9a3 3 0 01-3-3V20a3 3 0 013-3h36zm-9 8.889H18v2.222h18V25.89z"
+    d: "M45 17a3 3 0 013 3v14a3 3 0 01-3 3H9a3 3 0 01-3-3V20a3 3 0 013-3h36zm-9 8.889H18v2.222h18v-2.222z"
   }));
   function _extends$c() {
     _extends$c = Object.assign ? Object.assign.bind() : function (target) {
@@ -53685,7 +53858,8 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M34 18H20a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V20a2 2 0 00-2-2zm-9 14l-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
   }));
@@ -53708,18 +53882,35 @@
     ...props
   }) => /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
     width: "54",
     height: "54",
-    fill: "none"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 36h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6z",
-    fill: "#161616"
+    fill: "currentcolor"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#a"
+  }), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#a",
+    y: "24"
+  }), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#a",
+    y: "12"
+  })), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#b"
+  }), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#b",
+    y: "12"
+  }), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#b",
+    y: "24"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    id: "a",
+    d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M23 14.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 26.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 38.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1z",
-    fill: "#161616"
-  }));
+    id: "b",
+    d: "M23 14.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1z"
+  })));
   function _extends$a() {
     _extends$a = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -53741,20 +53932,15 @@
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
     height: "54",
-    fill: "none"
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
-    fill: "#000",
     fillRule: "evenodd",
-    d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36c-1.132 0-2.06.928-2.06 2.06v23.549c0 1.132.928 2.06 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 01-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592c.39 0 .707.317.707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06z",
-    clipRule: "evenodd"
+    d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 00-2.06 2.06v23.549a2.07 2.07 0 002.06 2.06h6.77v-1.766h-6.358a.707.707 0 01-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 01.707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#000",
     d: "M35.13 37.603l1.237-1.237-3.468-3.475v-5.926h-1.754v6.654l3.984 3.984z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#000",
     fillRule: "evenodd",
-    d: "M23.08 36.962a9.678 9.678 0 1017.883-7.408 9.678 9.678 0 00-17.882 7.408zm4.54-10.292a7.924 7.924 0 118.805 13.177A7.924 7.924 0 0127.62 26.67z",
-    clipRule: "evenodd"
+    d: "M23.08 36.962a9.678 9.678 0 1017.883-7.408 9.678 9.678 0 00-17.882 7.408zm4.54-10.292a7.924 7.924 0 118.805 13.177A7.924 7.924 0 0127.62 26.67z"
   }));
   function _extends$9() {
     _extends$9 = Object.assign ? Object.assign.bind() : function (target) {
@@ -53774,18 +53960,15 @@
     styles = {},
     ...props
   }) => /*#__PURE__*/React.createElement("svg", _extends$9({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "54",
     height: "54",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    clipRule: "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-1z",
-    fill: "#000"
+    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-1z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M11 22a1 1 0 011-1h19a1 1 0 011 1v10a1 1 0 01-1 1H12a1 1 0 01-1-1V22z",
-    fill: "#505562"
+    d: "M11 22a1 1 0 011-1h19a1 1 0 011 1v10a1 1 0 01-1 1H12a1 1 0 01-1-1V22z"
   }));
   function _extends$8() {
     _extends$8 = Object.assign ? Object.assign.bind() : function (target) {
@@ -53809,22 +53992,22 @@
     width: "54",
     height: "54"
   }, props), /*#__PURE__*/React.createElement("rect", {
-    x: "15",
-    y: "17",
     width: "24",
     height: "4",
+    x: "15",
+    y: "17",
     rx: "1"
   }), /*#__PURE__*/React.createElement("rect", {
-    x: "15",
-    y: "25",
     width: "24",
     height: "4",
+    x: "15",
+    y: "25",
     rx: "1"
   }), /*#__PURE__*/React.createElement("rect", {
-    x: "15",
-    y: "33",
     width: "13",
     height: "4",
+    x: "15",
+    y: "33",
     rx: "1"
   }));
   function _extends$7() {
@@ -53872,7 +54055,8 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     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-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
@@ -53897,9 +54081,10 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+    d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18a8 8 0 110-16 8 8 0 110 16z"
   }));
   function _extends$4() {
     _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
@@ -53921,7 +54106,8 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     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-12 7h9l-4.5 6-4.5-6z"
@@ -53946,9 +54132,10 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$3$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, 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"
+    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-.23zm19.62.92l2.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$1() {
     _extends$2$1 = Object.assign ? Object.assign.bind() : function (target) {
@@ -53970,7 +54157,8 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$2$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     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"
@@ -53995,10 +54183,11 @@
   }) => /*#__PURE__*/React.createElement("svg", _extends$1$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "54",
-    height: "54"
+    height: "54",
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     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"
+    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.849.849-6.364 6.364-.849-.849 6.364-6.364zm.264 3.5l.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
   }));
   function _extends$k() {
     _extends$k = Object.assign ? Object.assign.bind() : function (target) {
@@ -54018,20 +54207,18 @@
     styles = {},
     ...props
   }) => /*#__PURE__*/React.createElement("svg", _extends$k({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "54",
     height: "54",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "currentcolor"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    clipRule: "evenodd",
     d: "M34.636 21.91A3.818 3.818 0 1127 21.908a3.818 3.818 0 017.636 0zm-2 0A1.818 1.818 0 1129 21.908a1.818 1.818 0 013.636 0z",
-    fill: "#000"
+    clipRule: "evenodd"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M15 13a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V15a2 2 0 00-2-2H15zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 012.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 012.411.239L39 32.73V15zM15 39v-8.754c.06-.038.116-.083.168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 002.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15z",
-    fill: "#000"
+    d: "M15 13a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V15a2 2 0 00-2-2H15zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 012.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 012.411.239L39 32.73V15zM15 39v-8.754a.975.975 0 00.168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 002.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15z",
+    clipRule: "evenodd"
   }));
   const iconsByType = type => {
     return {
@@ -54056,7 +54243,7 @@
     constructor() {
       this._formFields = {};
       formFields.forEach(formField => {
-        this.register(formField.type, formField);
+        this.register(formField.config.type, formField);
       });
     }
     register(type, formField) {
@@ -55307,16 +55494,16 @@
       }
 
       var handle = item;
-      while (getParent(item) && isContainer(getParent(item)) === false) {
+      while (getParent$1(item) && isContainer(getParent$1(item)) === false) {
         if (o.invalid(item, handle)) {
           return;
         }
-        item = getParent(item); // drag target should be a top element
+        item = getParent$1(item); // drag target should be a top element
         if (!item) {
           return;
         }
       }
-      var source = getParent(item);
+      var source = getParent$1(item);
       if (!source) {
         return;
       }
@@ -55360,7 +55547,7 @@
         return;
       }
       var item = _copy || _item;
-      drop(item, getParent(item));
+      drop(item, getParent$1(item));
     }
     function ungrab() {
       _grabbed = false;
@@ -55386,7 +55573,7 @@
       }
     }
     function drop(item, target) {
-      var parent = getParent(item);
+      var parent = getParent$1(item);
       if (_copy && o.copySortSource && target === _source) {
         parent.removeChild(_item);
       }
@@ -55402,7 +55589,7 @@
         return;
       }
       var item = _copy || _item;
-      var parent = getParent(item);
+      var parent = getParent$1(item);
       if (parent) {
         parent.removeChild(item);
       }
@@ -55415,7 +55602,7 @@
       }
       var reverts = arguments.length > 0 ? revert : o.revertOnSpill;
       var item = _copy || _item;
-      var parent = getParent(item);
+      var parent = getParent$1(item);
       var initial = isInitialPlacement(parent);
       if (initial === false && reverts) {
         if (_copy) {
@@ -55464,7 +55651,7 @@
     function findDropTarget(elementBehindCursor, clientX, clientY) {
       var target = elementBehindCursor;
       while (target && !accepted()) {
-        target = getParent(target);
+        target = getParent$1(target);
       }
       return target;
       function accepted() {
@@ -55502,7 +55689,7 @@
         _lastDropTarget = dropTarget;
         over();
       }
-      var parent = getParent(item);
+      var parent = getParent$1(item);
       if (dropTarget === _source && _copy && !o.copySortSource) {
         if (parent) {
           parent.removeChild(item);
@@ -55568,14 +55755,14 @@
       if (_mirror) {
         classes$1.rm(o.mirrorContainer, 'gu-unselectable');
         touchy(documentElement, 'remove', 'mousemove', drag);
-        getParent(_mirror).removeChild(_mirror);
+        getParent$1(_mirror).removeChild(_mirror);
         _mirror = null;
       }
     }
     function getImmediateChild(dropTarget, target) {
       var immediate = target;
-      while (immediate !== dropTarget && getParent(immediate) !== dropTarget) {
-        immediate = getParent(immediate);
+      while (immediate !== dropTarget && getParent$1(immediate) !== dropTarget) {
+        immediate = getParent$1(immediate);
       }
       if (immediate === documentElement) {
         return null;
@@ -55698,7 +55885,7 @@
   function getRectHeight(rect) {
     return rect.height || rect.bottom - rect.top;
   }
-  function getParent(el) {
+  function getParent$1(el) {
     return el.parentNode === doc ? null : el.parentNode;
   }
   function isInput$1(el) {
@@ -55714,7 +55901,7 @@
     if (el.contentEditable === 'true') {
       return true;
     } // found a contentEditable element in the chain
-    return isEditable(getParent(el)); // contentEditable is set to 'inherit'
+    return isEditable(getParent$1(el)); // contentEditable is set to 'inherit'
   }
 
   function nextEl(el) {
@@ -55932,10 +56119,10 @@
     }
     return matches(currentElem, selector) ? currentElem : null;
   }
-  var componentEvent$1 = {};
-  var bind$1$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
-    unbind$1$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
-    prefix$1 = bind$1$1 !== 'addEventListener' ? 'on' : '';
+  var componentEvent = {};
+  var bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
+    unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
+    prefix = bind$1 !== 'addEventListener' ? 'on' : '';
 
   /**
    * Bind `el` event `type` to `fn`.
@@ -55948,8 +56135,8 @@
    * @api public
    */
 
-  var bind_1 = componentEvent$1.bind = function (el, type, fn, capture) {
-    el[bind$1$1](prefix$1 + type, fn, capture || false);
+  var bind_1 = componentEvent.bind = function (el, type, fn, capture) {
+    el[bind$1](prefix + type, fn, capture || false);
     return fn;
   };
 
@@ -55964,16 +56151,16 @@
    * @api public
    */
 
-  var unbind_1 = componentEvent$1.unbind = function (el, type, fn, capture) {
-    el[unbind$1$1](prefix$1 + type, fn, capture || false);
+  var unbind_1 = componentEvent.unbind = function (el, type, fn, capture) {
+    el[unbind$1](prefix + type, fn, capture || false);
     return fn;
   };
   var event = /*#__PURE__*/_mergeNamespaces$1({
     __proto__: null,
     bind: bind_1,
     unbind: unbind_1,
-    'default': componentEvent$1
-  }, [componentEvent$1]);
+    'default': componentEvent
+  }, [componentEvent]);
 
   /**
    * Expose `parse`.
@@ -56168,48 +56355,6 @@
     }
   });
 
-  var componentEvent = {};
-  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`.
-   *
-   * @param {Element} el
-   * @param {String} type
-   * @param {Function} fn
-   * @param {Boolean} capture
-   * @return {Function}
-   * @api public
-   */
-
-  componentEvent.bind = function (el, type, fn, capture) {
-    if (!bind$1) detect();
-    el[bind$1](prefix + type, fn, capture || false);
-    return fn;
-  };
-
-  /**
-   * Unbind `el` event `type`'s callback `fn`.
-   *
-   * @param {Element} el
-   * @param {String} type
-   * @param {Function} fn
-   * @param {Boolean} capture
-   * @return {Function}
-   * @api public
-   */
-
-  componentEvent.unbind = function (el, type, fn, capture) {
-    if (!unbind$1) detect();
-    el[unbind$1](prefix + type, fn, capture || false);
-    return fn;
-  };
-
   /**
    * Expose `parse`.
    */
@@ -57879,6 +58024,30 @@
   var DEFAULT_PRIORITY$2 = 1000;
   var slice = Array.prototype.slice;
 
+  /**
+   * @typedef { {
+   *   stopPropagation(): void;
+   *   preventDefault(): void;
+   *   cancelBubble: boolean;
+   *   defaultPrevented: boolean;
+   *   returnValue: any;
+   * } } Event
+   */
+
+  /**
+   * @template E
+   *
+   * @typedef { (event: E & Event, ...any) => any } EventBusEventCallback
+   */
+
+  /**
+   * @typedef { {
+   *  priority: number;
+   *  next: EventBusListener | null;
+   *  callback: EventBusEventCallback<any>;
+   * } } EventBusListener
+   */
+
   /**
    * A general purpose event bus.
    *
@@ -57963,6 +58132,9 @@
    * ```
    */
   function EventBus() {
+    /**
+     * @type { Record<string, EventBusListener> }
+     */
     this._listeners = {};
 
     // cleanup on destroy on lowest priority to allow
@@ -57982,10 +58154,12 @@
    *
    * Returning anything but `undefined` from a listener will stop the listener propagation.
    *
-   * @param {string|Array<string>} events
-   * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
-   * @param {Function} callback
-   * @param {Object} [that] Pass context (`this`) to the callback
+   * @template T
+   *
+   * @param {string|string[]} events to subscribe to
+   * @param {number} [priority=1000] listen priority
+   * @param {EventBusEventCallback<T>} callback
+   * @param {any} [that] callback context
    */
   EventBus.prototype.on = function (events, priority, callback, that) {
     events = isArray(events) ? events : [events];
@@ -58017,14 +58191,16 @@
   };
 
   /**
-   * Register an event listener that is executed only once.
+   * Register an event listener that is called only once.
+   *
+   * @template T
    *
-   * @param {string} event the event name to register for
-   * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
-   * @param {Function} callback the callback to execute
-   * @param {Object} [that] Pass context (`this`) to the callback
+   * @param {string|string[]} events to subscribe to
+   * @param {number} [priority=1000] the listen priority
+   * @param {EventBusEventCallback<T>} callback
+   * @param {any} [that] callback context
    */
-  EventBus.prototype.once = function (event, priority, callback, that) {
+  EventBus.prototype.once = function (events, priority, callback, that) {
     var self = this;
     if (isFunction(priority)) {
       that = callback;
@@ -58037,7 +58213,7 @@
     function wrappedCallback() {
       wrappedCallback.__isTomb = true;
       var result = callback.apply(that, arguments);
-      self.off(event, wrappedCallback);
+      self.off(events, wrappedCallback);
       return result;
     }
 
@@ -58045,7 +58221,7 @@
     // bound callbacks via {@link #off} using the original
     // callback
     wrappedCallback[FN_REF] = callback;
-    this.on(event, priority, wrappedCallback);
+    this.on(events, priority, wrappedCallback);
   };
 
   /**
@@ -58053,8 +58229,8 @@
    *
    * If no callback is given, all listeners for a given event name are being removed.
    *
-   * @param {string|Array<string>} events
-   * @param {Function} [callback]
+   * @param {string|string[]} events
+   * @param {EventBusEventCallback} [callback]
    */
   EventBus.prototype.off = function (events, callback) {
     events = isArray(events) ? events : [events];
@@ -58065,11 +58241,11 @@
   };
 
   /**
-   * Create an EventBus event.
+   * Create an event recognized be the event bus.
    *
-   * @param {Object} data
+   * @param {Object} data Event data.
    *
-   * @return {Object} event, recognized by the eventBus
+   * @return {Event} An event that will be recognized by the event bus.
    */
   EventBus.prototype.createEvent = function (data) {
     var event = new InternalEvent();
@@ -58078,10 +58254,11 @@
   };
 
   /**
-   * Fires a named event.
+   * Fires an event.
    *
    * @example
    *
+   * ```javascript
    * // fire event by name
    * events.fire('foo');
    *
@@ -58099,13 +58276,13 @@
    * });
    *
    * events.fire({ type: 'foo' }, 'I am bar!');
+   * ```
    *
-   * @param {string} [name] the optional event name
-   * @param {Object} [event] the event object
-   * @param {...Object} additional arguments to be passed to the callback functions
+   * @param {string} [type] event type
+   * @param {Object} [data] event or event data
+   * @param {...any} [args] additional arguments the callback will be called with.
    *
-   * @return {boolean} the events return value, if specified or false if the
-   *                   default action was prevented by listeners
+   * @return {any} The return value. Will be set to `false` if the default was prevented.
    */
   EventBus.prototype.fire = function (type, data) {
     var event, firstListener, returnValue, args;
@@ -58157,6 +58334,14 @@
     }
     return returnValue;
   };
+
+  /**
+   * Handle an error by firing an event.
+   *
+   * @param {Error} error The error to be handled.
+   *
+   * @return {boolean} Whether the error was handled.
+   */
   EventBus.prototype.handleError = function (error) {
     return this.fire('error', {
       error: error
@@ -58165,6 +58350,14 @@
   EventBus.prototype._destroy = function () {
     this._listeners = {};
   };
+
+  /**
+   * @param {Event} event
+   * @param {any[]} args
+   * @param {EventBusListener} listener
+   *
+   * @return {any}
+   */
   EventBus.prototype._invokeListeners = function (event, args, listener) {
     var returnValue;
     while (listener) {
@@ -58177,6 +58370,14 @@
     }
     return returnValue;
   };
+
+  /**
+   * @param {Event} event
+   * @param {any[]} args
+   * @param {EventBusListener} listener
+   *
+   * @return {any}
+   */
   EventBus.prototype._invokeListener = function (event, args, listener) {
     var returnValue;
     if (listener.callback.__isTomb) {
@@ -58205,7 +58406,7 @@
     return returnValue;
   };
 
-  /*
+  /**
    * Add new listener with a certain priority to the list
    * of listeners (for the given event).
    *
@@ -58219,7 +58420,7 @@
    *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
    *
    * @param {string} event
-   * @param {Object} listener { priority, callback }
+   * @param {EventBusListener} listener
    */
   EventBus.prototype._addListener = function (event, newListener) {
     var listener = this._getListeners(event),
@@ -58250,9 +58451,20 @@
     // add new listener to back
     previousListener.next = newListener;
   };
+
+  /**
+   * @param {string} name
+   *
+   * @return {EventBusListener}
+   */
   EventBus.prototype._getListeners = function (name) {
     return this._listeners[name];
   };
+
+  /**
+   * @param {string} name
+   * @param {EventBusListener} listener
+   */
   EventBus.prototype._setListeners = function (name, listener) {
     this._listeners[name] = listener;
   };
@@ -58300,9 +58512,9 @@
    * Invoke function. Be fast...
    *
    * @param {Function} fn
-   * @param {Array<Object>} args
+   * @param {any[]} args
    *
-   * @return {Any}
+   * @return {any}
    */
   function invokeFunction(fn, args) {
     return fn.apply(null, args);
@@ -58343,21 +58555,24 @@
       if (!fieldDefinition) {
         throw new Error(`form field of type <${type}> not supported`);
       }
+      const {
+        config
+      } = fieldDefinition;
       if (id && this._formFieldRegistry._ids.assigned(id)) {
         throw new Error(`ID <${id}> already assigned`);
       }
       if (key && this._formFieldRegistry._keys.assigned(key)) {
         throw new Error(`key <${key}> already assigned`);
       }
-      const labelAttrs = applyDefaults && fieldDefinition.label ? {
-        label: fieldDefinition.label
+      const labelAttrs = applyDefaults && config.label ? {
+        label: config.label
       } : {};
-      const field = fieldDefinition.create({
+      const field = config.create({
         ...labelAttrs,
         ...attrs
       });
       this._ensureId(field);
-      if (fieldDefinition.keyed) {
+      if (config.keyed) {
         this._ensureKey(field, applyDefaults);
       }
       return field;
@@ -58428,6 +58643,10 @@
       }
     }
   }
+  const MAX_COLUMNS_PER_ROW = 16;
+  const MAX_COLUMNS = 16;
+  const MIN_COLUMNS = 2;
+  const MAX_FIELDS_PER_ROW = 4;
   class FormLayoutValidator {
     /**
      * @constructor
@@ -58441,15 +58660,15 @@
     }
     validateField(field = {}, columns, row) {
       // allow empty (auto columns)
-      if (columns) {
-        // allow minimum 2 cols
-        if (columns < 2) {
-          return 'Minimum 2 columns are allowed';
+      if (Number.isInteger(columns)) {
+        // allow minimum cols
+        if (columns < MIN_COLUMNS) {
+          return `Minimum ${MIN_COLUMNS} columns are allowed`;
         }
 
-        // allow maximum 16 cols
-        if (columns > 16) {
-          return 'Maximum 16 columns are allowed';
+        // allow maximum cols
+        if (columns > MAX_COLUMNS) {
+          return `Maximum ${MAX_COLUMNS} columns are allowed`;
         }
       }
       if (!row) {
@@ -58474,16 +58693,23 @@
       });
 
       // do not allow overflows
-      if (sumColumns > 16 || sumColumns === 16 && sumAutoCols > 0 || columns === 16 && sumFields > 1) {
-        return 'New value exceeds the maximum of 16 columns per row';
+      if (sumColumns > MAX_COLUMNS_PER_ROW || sumAutoCols > 0 && sumColumns > calculateMaxColumnsWithAuto(sumAutoCols) || columns === MAX_COLUMNS_PER_ROW && sumFields > 1) {
+        return `New value exceeds the maximum of ${MAX_COLUMNS_PER_ROW} columns per row`;
       }
-      if (sumFields > 4) {
-        return 'Maximum 4 fields per row are allowed';
+      if (sumFields > MAX_FIELDS_PER_ROW) {
+        return `Maximum ${MAX_FIELDS_PER_ROW} fields per row are allowed`;
       }
       return null;
     }
   }
   FormLayoutValidator.$inject = ['formLayouter', 'formFieldRegistry'];
+
+  // helper //////////////////////
+
+  // on normal screen sizes, auto columns take minimum 2 columns
+  function calculateMaxColumnsWithAuto(autoCols) {
+    return MAX_COLUMNS_PER_ROW - autoCols * 2;
+  }
   class Importer {
     /**
      * @constructor
@@ -58597,6 +58823,91 @@
       'fjs-disabled': disabled
     });
   }
+
+  /**
+   * Add a dragger that calls back the passed function with
+   * { event, delta } on drag.
+   *
+   * @example
+   *
+   * function dragMove(event, delta) {
+   *   // we are dragging (!!)
+   * }
+   *
+   * domElement.addEventListener('dragstart', dragger(dragMove));
+   *
+   * @param {Function} fn
+   * @param {Element} dragPreview
+   *
+   * @return {Function} drag start callback function
+   */
+  function createDragger(fn, dragPreview) {
+    let self;
+    let startX, startY;
+
+    /** drag start */
+    function onDragStart(event) {
+      self = this;
+      startX = event.clientX;
+      startY = event.clientY;
+
+      // (1) prevent preview image
+      if (event.dataTransfer) {
+        event.dataTransfer.setDragImage(dragPreview, 0, 0);
+      }
+
+      // (2) setup drag listeners
+
+      // attach drag + cleanup event
+      document.addEventListener('dragover', onDrag);
+      document.addEventListener('dragend', onEnd);
+      document.addEventListener('drop', preventDefault);
+    }
+    function onDrag(event) {
+      const delta = {
+        x: event.clientX - startX,
+        y: event.clientY - startY
+      };
+
+      // call provided fn with event, delta
+      return fn.call(self, event, delta);
+    }
+    function onEnd() {
+      document.removeEventListener('dragover', onDrag);
+      document.removeEventListener('dragend', onEnd);
+      document.removeEventListener('drop', preventDefault);
+    }
+    return onDragStart;
+  }
+
+  /**
+   * Throttle function call according UI update cycle.
+   *
+   * @param  {Function} fn
+   *
+   * @return {Function} throttled fn
+   */
+  function throttle(fn) {
+    let active = false;
+    let lastArgs = [];
+    let lastThis = undefined;
+    return function (...args) {
+      lastArgs = args;
+      lastThis = this;
+      if (active) {
+        return;
+      }
+      active = true;
+      fn.apply(lastThis, lastArgs);
+      window.requestAnimationFrame(function () {
+        lastArgs = lastThis = active = undefined;
+      });
+    };
+  }
+  function preventDefault(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
   const DragAndDropContext = D$1({
     drake: null
   });
@@ -58660,10 +58971,54 @@
     };
     return _extends$2.apply(this, arguments);
   }
-  var DraggableIcon = ({
+  var DeleteIcon$1 = ({
     styles = {},
     ...props
   }) => /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    width: "16",
+    height: "16",
+    x: ".536",
+    fill: "#fff",
+    rx: "3",
+    style: {
+      mixBlendMode: "multiply"
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M.536 0h16v16h-16z",
+    style: {
+      mixBlendMode: "multiply"
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M7.536 6h-1v6h1V6zm3 0h-1v6h1V6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M2.536 3v1h1v10a1 1 0 001 1h8a1 1 0 001-1V4h1V3h-12zm2 11V4h8v10h-8zm6-13h-4v1h4V1z"
+  }));
+  function _extends$1() {
+    _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$1.apply(this, arguments);
+  }
+  var DraggableIcon = ({
+    styles = {},
+    ...props
+  }) => /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
@@ -58675,8 +59030,8 @@
     d: "M0 0h32v32H0z",
     fill: "none"
   }));
-  function _extends$1() {
-    _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -58687,12 +59042,12 @@
       }
       return target;
     };
-    return _extends$1.apply(this, arguments);
+    return _extends.apply(this, arguments);
   }
   var SearchIcon = ({
     styles = {},
     ...props
-  }) => /*#__PURE__*/React.createElement("svg", _extends$1({
+  }) => /*#__PURE__*/React.createElement("svg", _extends({
     width: "15",
     height: "15",
     fill: "none",
@@ -58747,47 +59102,25 @@
       disableLinks: true
     });
   }
-  EditorText.create = Text$1.create;
-  EditorText.type = Text$1.type;
-  EditorText.keyed = Text$1.keyed;
+  EditorText.config = Text$1.config;
   const editorFormFields = [EditorText];
   class EditorFormFields extends FormFields {
     constructor() {
       super();
       editorFormFields.forEach(formField => {
-        this.register(formField.type, formField);
+        this.register(formField.config.type, formField);
       });
     }
   }
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-  var ListDeleteIcon = ({
-    styles = {},
-    ...props
-  }) => /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "11",
-    height: "14"
-  }, 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 => {
+  const PALETTE_ENTRIES = formFields.filter(({
+    config: fieldConfig
+  }) => fieldConfig.type !== 'default').map(({
+    config: fieldConfig
+  }) => {
     return {
-      label: f.label,
-      type: f.type,
-      group: f.group
+      label: fieldConfig.label,
+      type: fieldConfig.type,
+      group: fieldConfig.group
     };
   });
   const PALETTE_GROUPS = [{
@@ -58808,19 +59141,24 @@
     const [searchTerm, setSearchTerm] = l$2('');
     const inputRef = s$1();
     const groups = groupEntries(entries);
+    const simplifyString = A$1(str => {
+      return str.toLowerCase().replace(/\s+/g, '');
+    }, []);
+    const filter = A$1(entry => {
+      const simplifiedSearchTerm = simplifyString(searchTerm);
+      if (!simplifiedSearchTerm) {
+        return true;
+      }
+      const simplifiedEntryLabel = simplifyString(entry.label);
+      const simplifiedEntryType = simplifyString(entry.type);
+      return simplifiedEntryLabel.includes(simplifiedSearchTerm) || simplifiedEntryType.includes(simplifiedSearchTerm);
+    }, [searchTerm, simplifyString]);
 
     // 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]);
+    }, [filter, searchTerm]);
     const handleInput = A$1(event => {
       setSearchTerm(() => event.target.value);
     }, [setSearchTerm]);
@@ -59229,6 +59567,135 @@
       })]
     });
   }
+  const COLUMNS_REGEX = /^cds--col(-lg)?/;
+  const ELEMENT_RESIZING_CLS = 'fjs-element-resizing';
+  const RESIZE_DRAG_PREVIEW_CLS = 'fjs-resize-drag-preview';
+  const GRID_OFFSET_PX = 16;
+  function FieldResizer(props) {
+    const {
+      field,
+      position
+    } = props;
+    const ref = s$1(null);
+    const formLayoutValidator = useService$1('formLayoutValidator');
+    const modeling = useService$1('modeling');
+
+    // we can't use state as we need to
+    // manipulate this inside dragging events
+    const context = s$1({
+      startColumns: 0,
+      newColumns: 0
+    });
+    const onResize = throttle((_, delta) => {
+      const {
+        x: dx
+      } = delta;
+      const {
+        layout = {}
+      } = field;
+      const newColumns = calculateNewColumns(ref.current, layout.columns || context.current.startColumns, dx, position);
+      const errorMessage = formLayoutValidator.validateField(field, newColumns);
+      if (!errorMessage) {
+        context.current.newColumns = newColumns;
+
+        // make visual updates to preview change
+        const columnNode = ref.current.closest('.fjs-layout-column');
+        removeMatching(columnNode, COLUMNS_REGEX);
+        columnNode.classList.add(`cds--col-lg-${newColumns}`);
+      }
+    });
+    const onResizeStart = event => {
+      const target = getElementNode(field);
+      const parent = getParent(target);
+
+      // create a blank element to use as drag preview
+      // ensure it was only created once
+      let blankPreview = getDragPreviewImage(parent);
+      if (!blankPreview) {
+        blankPreview = document.createElement('div');
+        blankPreview.classList.add(RESIZE_DRAG_PREVIEW_CLS);
+        parent.appendChild(blankPreview);
+      }
+
+      // initialize drag handler
+      const onDragStart = createDragger(onResize, blankPreview);
+      onDragStart(event);
+
+      // mitigate auto columns on the grid that
+      // has a offset of 16px (1rem) to both side
+      const columnNode = getColumnNode(target);
+      const startWidth = columnNode.getBoundingClientRect().width + GRID_OFFSET_PX;
+      context.current.startColumns = asColumns(startWidth, parent);
+      setResizing(target, position);
+    };
+    const onResizeEnd = () => {
+      const {
+        layout = {}
+      } = field;
+      if (context.current.newColumns) {
+        modeling.editFormField(field, 'layout', {
+          ...layout,
+          columns: context.current.newColumns
+        });
+      }
+      const target = getElementNode(field);
+      unsetResizing(target, position);
+      context.current.newColumns = null;
+
+      // remove blank preview
+      const blankPreview = getDragPreviewImage(getParent(target));
+      blankPreview.remove();
+    };
+    if (field.type === 'default') {
+      return null;
+    }
+    return e$1("div", {
+      ref: ref,
+      class: classNames('fjs-field-resize-handle', 'fjs-field-resize-handle-' + position, DRAG_NO_MOVE_CLS),
+      draggable: true,
+      onDragStart: onResizeStart,
+      onDragEnd: onResizeEnd
+    });
+  }
+
+  // helper //////
+
+  function asColumns(width, parent) {
+    const totalWidth = parent.getBoundingClientRect().width;
+    const oneColumn = 1 / 16 * totalWidth;
+    return Math.round(width / oneColumn);
+  }
+  function calculateNewColumns(node, currentColumns, deltaX, position) {
+    const parent = getParent(node);
+
+    // invert delta if we are resizing from the left
+    if (position === 'left') {
+      deltaX = deltaX * -1;
+    }
+    const deltaColumns = asColumns(deltaX, parent);
+    return currentColumns + deltaColumns;
+  }
+  function getParent(node) {
+    return node.closest('.fjs-layout-row');
+  }
+  function removeMatching(node, regex) {
+    return classes(node).removeMatching(regex);
+  }
+  function getColumnNode(node) {
+    return node.closest('.fjs-layout-column');
+  }
+  function getElementNode(field) {
+    return query('.fjs-element[data-id="' + field.id + '"]');
+  }
+  function getDragPreviewImage(node) {
+    return query('.fjs-resize-drag-preview', node);
+  }
+  function setResizing(node, position) {
+    classes(node).add(ELEMENT_RESIZING_CLS + '-' + position);
+  }
+  function unsetResizing(node, position) {
+    classes(node).remove(ELEMENT_RESIZING_CLS + '-' + position);
+  }
   function ContextPad(props) {
     if (!props.children) {
       return null;
@@ -59241,7 +59708,7 @@
   function Empty(props) {
     return null;
   }
-  function Element$1(props) {
+  function Element(props) {
     const eventBus = useService$1('eventBus'),
       formEditor = useService$1('formEditor'),
       formFieldRegistry = useService$1('formFieldRegistry'),
@@ -59300,9 +59767,15 @@
         children: selection.isSelected(field) && field.type !== 'default' ? e$1("button", {
           class: "fjs-context-pad-item",
           onClick: onRemove,
-          children: e$1(ListDeleteIcon, {})
+          children: e$1(DeleteIcon$1, {})
         }) : null
-      }), props.children]
+      }), props.children, e$1(FieldResizer, {
+        position: "left",
+        field: field
+      }), e$1(FieldResizer, {
+        position: "right",
+        field: field
+      })]
     });
   }
   function DebugColumns(props) {
@@ -59387,8 +59860,12 @@
       propertiesPanel = useService$1('propertiesPanel'),
       propertiesPanelConfig = useService$1('config.propertiesPanel');
     const {
-      schema
+      schema,
+      properties
     } = formEditor._getState();
+    const {
+      ariaLabel
+    } = properties;
     const formContainerRef = s$1(null);
     const paletteRef = s$1(null);
     const propertiesPanelRef = s$1(null);
@@ -59460,7 +59937,7 @@
     const formRenderContext = {
       Children,
       Column,
-      Element: Element$1,
+      Element,
       Empty,
       Row
     };
@@ -59474,6 +59951,7 @@
                 data: {},
                 errors: {},
                 properties: {
+                  ariaLabel,
                   readOnly: true
                 },
                 schema
@@ -59656,6 +60134,13 @@
     formLayoutValidator: ['type', FormLayoutValidator],
     fieldFactory: ['type', FieldFactory]
   };
+
+  /**
+   * @typedef {import('didi').Injector} Injector
+   *
+   * @typedef {import('../../core/EventBus').default} EventBus
+   */
+
   var NOT_REGISTERED_ERROR = 'is not a registered action',
     IS_REGISTERED_ERROR = 'is already registered';
 
@@ -59785,10 +60270,10 @@
   /**
    * Triggers a registered action
    *
-   * @param  {string} action
-   * @param  {Object} opts
+   * @param {string} action
+   * @param {Object} opts
    *
-   * @return {Unknown} Returns what the registered listener returns
+   * @return {unknown} Returns what the registered listener returns
    */
   EditorActions.prototype.trigger = function (action, opts) {
     if (!this._actions[action]) {
@@ -59817,7 +60302,7 @@
    * editorActions.isRegistered('spaceTool'); // true
    * ´´´
    *
-   * @param  {Object} actions
+   * @param {Object} actions
    */
   EditorActions.prototype.register = function (actions, listener) {
     var self = this;
@@ -59832,8 +60317,8 @@
   /**
    * Registers a listener to an action key
    *
-   * @param  {string} action
-   * @param  {Function} listener
+   * @param {string} action
+   * @param {Function} listener
    */
   EditorActions.prototype._registerAction = function (action, listener) {
     if (this.isRegistered(action)) {
@@ -59876,6 +60361,10 @@
   function error(action, message) {
     return new Error(action + ' ' + message);
   }
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var EditorActionsModule$1 = {
     __init__: ['editorActions'],
     editorActions: ['type', EditorActions]
@@ -59931,10 +60420,10 @@
     __init__: ['dragging'],
     dragging: ['type', Dragging]
   };
-  var KEYS_COPY = ['c', 'C', 'KeyC'];
-  var KEYS_PASTE = ['v', 'V', 'KeyV'];
-  var KEYS_REDO$1 = ['y', 'Y', 'KeyY'];
-  var KEYS_UNDO$1 = ['z', 'Z', 'KeyZ'];
+  var KEYS_COPY = ['c', 'C'];
+  var KEYS_PASTE = ['v', 'V'];
+  var KEYS_REDO = ['y', 'Y'];
+  var KEYS_UNDO = ['z', 'Z'];
 
   /**
    * Returns true if event was triggered with any modifier
@@ -59959,7 +60448,7 @@
   /**
    * Checks if key pressed is one of provided keys.
    *
-   * @param {string|Array<string>} keys
+   * @param {string|string[]} keys
    * @param {KeyboardEvent} event
    */
   function isKey(keys, event) {
@@ -59980,11 +60469,16 @@
     return isCmd(event) && isKey(KEYS_PASTE, event);
   }
   function isUndo(event) {
-    return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO$1, event);
+    return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
   }
   function isRedo(event) {
-    return isCmd(event) && (isKey(KEYS_REDO$1, event) || isKey(KEYS_UNDO$1, event) && isShift(event));
+    return isCmd(event) && (isKey(KEYS_REDO, event) || isKey(KEYS_UNDO, event) && isShift(event));
   }
+
+  /**
+   * @typedef {import('../../core/EventBus').default} EventBus
+   */
+
   var KEYDOWN_EVENT = 'keyboard.keydown',
     KEYUP_EVENT = 'keyboard.keyup';
   var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
@@ -60011,7 +60505,7 @@
    * A default binding for the keyboard may be specified via the
    * `keyboard.bindTo` configuration option.
    *
-   * @param {Config} config
+   * @param {Object} config
    * @param {EventBus} eventBus
    */
   function Keyboard(config, eventBus) {
@@ -60139,8 +60633,6 @@
     return target && (matches(target, 'input, textarea') || target.contentEditable === 'true');
   }
   var LOW_PRIORITY$1 = 500;
-  var KEYS_REDO = ['y', 'Y', 'KeyY'];
-  var KEYS_UNDO = ['z', 'Z', 'KeyZ'];
 
   /**
    * Adds default keyboard bindings.
@@ -60270,6 +60762,10 @@
       }
     });
   };
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var KeyboardModule$1 = {
     __init__: ['keyboard', 'keyboardBindings'],
     keyboard: ['type', Keyboard],
@@ -60794,32 +61290,47 @@
     }
   }
   Modeling.$inject = ['commandStack', 'eventBus', 'formEditor', 'formFieldRegistry', 'fieldFactory'];
+
+  /**
+   * @typedef {import('../core/Types').ElementLike} ElementLike
+   * @typedef {import('../core/EventBus').default} EventBus
+   * @typedef {import('./CommandStack').CommandContext} CommandContext
+   *
+   * @typedef {string|string[]} Events
+   * @typedef { (context: CommandContext) => ElementLike[] | void } HandlerFunction
+   * @typedef { (context: CommandContext) => void } ComposeHandlerFunction
+   */
+
   var DEFAULT_PRIORITY = 1000;
 
   /**
-   * A utility that can be used to plug-in into the command execution for
+   * A utility that can be used to plug into the command execution for
    * extension and/or validation.
    *
-   * @param {EventBus} eventBus
+   * @class
+   * @constructor
    *
    * @example
    *
-   * import inherits from 'inherits-browser';
-   *
+   * ```javascript
    * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
    *
-   * function CommandLogger(eventBus) {
-   *   CommandInterceptor.call(this, eventBus);
+   * class CommandLogger extends CommandInterceptor {
+   *   constructor(eventBus) {
+   *     super(eventBus);
    *
-   *   this.preExecute(function(event) {
-   *     console.log('command pre-execute', event);
+   *   this.preExecute('shape.create', (event) => {
+   *     console.log('commandStack.shape-create.preExecute', event);
    *   });
    * }
+   * ```
    *
-   * inherits(CommandLogger, CommandInterceptor);
-   *
+   * @param {EventBus} eventBus
    */
   function CommandInterceptor(eventBus) {
+    /**
+     * @type {EventBus}
+     */
     this._eventBus = eventBus;
   }
   CommandInterceptor.$inject = ['eventBus'];
@@ -60830,15 +61341,14 @@
   }
 
   /**
-   * Register an interceptor for a command execution
+   * Intercept a command during one of the phases.
    *
-   * @param {string|Array<string>} [events] list of commands to register on
-   * @param {string} [hook] command hook, i.e. preExecute, executed to listen on
-   * @param {number} [priority] the priority on which to hook into the execution
-   * @param {Function} handlerFn interceptor to be invoked with (event)
-   * @param {boolean} unwrap if true, unwrap the event and pass (context, command, event) to the
-   *                          listener instead
-   * @param {Object} [that] Pass context (`this`) to the handler function
+   * @param {Events} [events] command(s) to intercept
+   * @param {string} [hook] phase to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
    */
   CommandInterceptor.prototype.on = function (events, hook, priority, handlerFn, unwrap, that) {
     if (isFunction(hook) || isNumber(hook)) {
@@ -60873,28 +61383,130 @@
       eventBus.on(fullEvent, priority, unwrap ? unwrapEvent(handlerFn, that) : handlerFn, that);
     });
   };
-  var hooks = ['canExecute', 'preExecute', 'preExecuted', 'execute', 'executed', 'postExecute', 'postExecuted', 'revert', 'reverted'];
+
+  /**
+   * Add a <canExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.canExecute = createHook('canExecute');
+
+  /**
+   * Add a <preExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.preExecute = createHook('preExecute');
+
+  /**
+   * Add a <preExecuted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.preExecuted = createHook('preExecuted');
+
+  /**
+   * Add a <execute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.execute = createHook('execute');
+
+  /**
+   * Add a <executed> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.executed = createHook('executed');
+
+  /**
+   * Add a <postExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.postExecute = createHook('postExecute');
+
+  /**
+   * Add a <postExecuted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.postExecuted = createHook('postExecuted');
+
+  /**
+   * Add a <revert> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.revert = createHook('revert');
+
+  /**
+   * Add a <reverted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.reverted = createHook('reverted');
 
   /*
-   * Install hook shortcuts
+   * Add prototype methods for each phase of command execution (e.g. execute,
+   * revert).
+   *
+   * @param {string} hook
    *
-   * This will generate the CommandInterceptor#(preExecute|...|reverted) methods
-   * which will in term forward to CommandInterceptor#on.
+   * @return { (
+   *   events?: Events,
+   *   priority?: number,
+   *   handlerFn: ComposeHandlerFunction|HandlerFunction,
+   *   unwrap?: boolean
+   * ) => any }
    */
-  forEach(hooks, function (hook) {
+  function createHook(hook) {
     /**
-     * {canExecute|preExecute|preExecuted|execute|executed|postExecute|postExecuted|revert|reverted}
+     * @this {CommandInterceptor}
      *
-     * A named hook for plugging into the command execution
-     *
-     * @param {string|Array<string>} [events] list of commands to register on
-     * @param {number} [priority] the priority on which to hook into the execution
-     * @param {Function} handlerFn interceptor to be invoked with (event)
-     * @param {boolean} [unwrap=false] if true, unwrap the event and pass (context, command, event) to the
-     *                          listener instead
-     * @param {Object} [that] Pass context (`this`) to the handler function
+     * @param {Events} [events]
+     * @param {number} [priority]
+     * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+     * @param {boolean} [unwrap]
+     * @param {any} [that]
      */
-    CommandInterceptor.prototype[hook] = function (events, priority, handlerFn, unwrap, that) {
+    const hookFn = function (events, priority, handlerFn, unwrap, that) {
       if (isFunction(events) || isNumber(events)) {
         that = unwrap;
         unwrap = handlerFn;
@@ -60904,7 +61516,8 @@
       }
       this.on(events, hook, priority, handlerFn, unwrap, that);
     };
-  });
+    return hookFn;
+  }
   class FormLayoutUpdater extends CommandInterceptor {
     constructor(eventBus, formLayouter, modeling, formEditor) {
       super(eventBus);
@@ -61037,6 +61650,34 @@
     validateBehavior: ['type', ValidateBehavior]
   };
 
+  /**
+   * @typedef {import('didi').Injector} Injector
+   *
+   * @typedef {import('../core/Types').ElementLike} ElementLike
+   *
+   * @typedef {import('../core/EventBus').default} EventBus
+   * @typedef {import('./CommandHandler').default} CommandHandler
+   *
+   * @typedef { any } CommandContext
+   * @typedef { {
+   *   new (...args: any[]) : CommandHandler
+   * } } CommandHandlerConstructor
+   * @typedef { {
+   *   [key: string]: CommandHandler;
+   * } } CommandHandlerMap
+   * @typedef { {
+   *   command: string;
+   *   context: any;
+   *   id?: any;
+   * } } CommandStackAction
+   * @typedef { {
+   *   actions: CommandStackAction[];
+   *   dirty: ElementLike[];
+   *   trigger: 'execute' | 'undo' | 'redo' | 'clear' | null;
+   *   atomic?: boolean;
+   * } } CurrentExecution
+   */
+
   /**
    * A service that offers un- and redoable execution of commands.
    *
@@ -61087,7 +61728,7 @@
    * got changed during the `execute` and `revert` operations.
    *
    * Command handlers may execute other modeling operations (and thus
-   * commands) in their `preExecute` and `postExecute` phases. The command
+   * commands) in their `preExecute(d)` and `postExecute(d)` phases. The command
    * stack will properly group all commands together into a logical unit
    * that may be re- and undone atomically.
    *
@@ -61117,14 +61758,14 @@
     /**
      * A map of all registered command handlers.
      *
-     * @type {Object}
+     * @type {CommandHandlerMap}
      */
     this._handlerMap = {};
 
     /**
      * A stack containing all re/undoable actions on the diagram
      *
-     * @type {Array<Object>}
+     * @type {CommandStackAction[]}
      */
     this._stack = [];
 
@@ -61138,18 +61779,27 @@
     /**
      * Current active commandStack execution
      *
-     * @type {Object}
-     * @property {Object[]} actions
-     * @property {Object[]} dirty
-     * @property { 'undo' | 'redo' | 'clear' | 'execute' | null } trigger the cause of the current excecution
+     * @type {CurrentExecution}
      */
     this._currentExecution = {
       actions: [],
       dirty: [],
       trigger: null
     };
+
+    /**
+     * @type {Injector}
+     */
     this._injector = injector;
+
+    /**
+     * @type EventBus
+     */
     this._eventBus = eventBus;
+
+    /**
+     * @type { number }
+     */
     this._uid = 1;
     eventBus.on(['diagram.destroy', 'diagram.clear'], function () {
       this.clear(false);
@@ -61158,10 +61808,10 @@
   CommandStack.$inject = ['eventBus', 'injector'];
 
   /**
-   * Execute a command
+   * Execute a command.
    *
-   * @param {string} command the command to execute
-   * @param {Object} context the environment to execute the command in
+   * @param {string} command The command to execute.
+   * @param {CommandContext} context The context with which to execute the command.
    */
   CommandStack.prototype.execute = function (command, context) {
     if (!command) {
@@ -61174,11 +61824,11 @@
     };
     this._pushAction(action);
     this._internalExecute(action);
-    this._popAction(action);
+    this._popAction();
   };
 
   /**
-   * Ask whether a given command can be executed.
+   * Check whether a command can be executed.
    *
    * Implementors may hook into the mechanism on two ways:
    *
@@ -61192,10 +61842,10 @@
    *     If the method {@link CommandHandler#canExecute} is implemented in a handler
    *     it will be called to figure out whether the execution is allowed.
    *
-   * @param  {string} command the command to execute
-   * @param  {Object} context the environment to execute the command in
+   * @param {string} command The command to execute.
+   * @param {CommandContext} context The context with which to execute the command.
    *
-   * @return {boolean} true if the command can be executed
+   * @return {boolean} Whether the command can be executed with the given context.
    */
   CommandStack.prototype.canExecute = function (command, context) {
     const action = {
@@ -61219,7 +61869,9 @@
   };
 
   /**
-   * Clear the command stack, erasing all undo / redo history
+   * Clear the command stack, erasing all undo / redo history.
+   *
+   * @param {boolean} [emit=true] Whether to fire an event. Defaults to `true`.
    */
   CommandStack.prototype.clear = function (emit) {
     this._stack.length = 0;
@@ -61274,21 +61926,21 @@
   };
 
   /**
-   * Register a handler instance with the command stack
+   * Register a handler instance with the command stack.
    *
-   * @param {string} command
-   * @param {CommandHandler} handler
+   * @param {string} command Command to be executed.
+   * @param {CommandHandler} handler Handler to execute the command.
    */
   CommandStack.prototype.register = function (command, handler) {
     this._setHandler(command, handler);
   };
 
   /**
-   * Register a handler type with the command stack
-   * by instantiating it and injecting its dependencies.
+   * Register a handler type with the command stack  by instantiating it and
+   * injecting its dependencies.
    *
-   * @param {string} command
-   * @param {Function} a constructor for a {@link CommandHandler}
+   * @param {string} command Command to be executed.
+   * @param {CommandHandlerConstructor} handlerCls Constructor to instantiate a {@link CommandHandler}.
    */
   CommandStack.prototype.registerHandler = function (command, handlerCls) {
     if (!command || !handlerCls) {
@@ -61297,9 +61949,17 @@
     const handler = this._injector.instantiate(handlerCls);
     this.register(command, handler);
   };
+
+  /**
+   * @return {boolean}
+   */
   CommandStack.prototype.canUndo = function () {
     return !!this._getUndoAction();
   };
+
+  /**
+   * @return {boolean}
+   */
   CommandStack.prototype.canRedo = function () {
     return !!this._getRedoAction();
   };
@@ -61393,7 +62053,7 @@
       }
       this._fire(command, 'postExecuted', action);
     }
-    this._popAction(action);
+    this._popAction();
   };
   CommandStack.prototype._pushAction = function (action) {
     const execution = this._currentExecution,
@@ -61453,6 +62113,10 @@
     }
     this._handlerMap[command] = handler;
   };
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var commandModule = {
     commandStack: ['type', CommandStack]
   };
@@ -64185,7 +64849,7 @@
       },
       // todo(pinussilvestrus): make options dependant on field type
       // cf. https://github.com/bpmn-io/form-js/issues/575
-      ...[2, 4, 6, 8, 10, 12, 14, 16].map(asOption)];
+      ...asArray(16).filter(i => i >= MIN_COLUMNS).map(asOption)];
     };
     return SelectEntry({
       debounce,
@@ -64207,6 +64871,11 @@
       label: number.toString()
     };
   }
+  function asArray(length) {
+    return Array.from({
+      length
+    }).map((_, i) => i + 1);
+  }
   function DescriptionEntry(props) {
     const {
       editField,
@@ -68237,7 +68906,8 @@
 
   function JSONEditor(options = {}) {
     const {
-      readonly = false
+      readonly = false,
+      contentAttributes = {}
     } = options;
     const emitter = mitt();
     let language = new Compartment().of(json());
@@ -68264,14 +68934,15 @@
         }
       });
       const editable = EditorView.editable.of(!readonly);
+      const contentAttributesExtension = EditorView.contentAttributes.of(contentAttributes);
       const view = new EditorView({
-        state: createState('', [updateListener, editable])
+        state: createState('', [updateListener, editable, contentAttributesExtension])
       });
       view.setValue = function (value) {
-        this.setState(createState(value, [updateListener, editable]));
+        this.setState(createState(value, [updateListener, editable, contentAttributesExtension]));
       };
       view.setVariables = function (variables) {
-        this.setState(createState(view.state.doc.toString(), [updateListener, editable], variables));
+        this.setState(createState(view.state.doc.toString(), [updateListener, editable, contentAttributesExtension], variables));
       };
       return view;
     }
@@ -68338,7 +69009,9 @@
     const {
       actions: actionsConfig = {},
       emit,
-      exporter: exporterConfig = {}
+      exporter: exporterConfig = {},
+      viewerProperties = {},
+      editorProperties = {}
     } = props;
     const {
       display: displayActions = true
@@ -68386,13 +69059,24 @@
     }, [props.schema]);
     y(() => {
       const dataEditor = dataEditorRef.current = new JSONEditor({
-        value: toString(data)
+        value: toString(data),
+        contentAttributes: {
+          'aria-label': 'Form Input'
+        }
       });
       const resultView = resultViewRef.current = new JSONEditor({
         readonly: true,
-        value: toString(resultData)
+        value: toString(resultData),
+        contentAttributes: {
+          'aria-label': 'Form Output'
+        }
+      });
+      const form = formRef.current = new Form({
+        properties: {
+          ...viewerProperties,
+          'ariaLabel': 'Form Preview'
+        }
       });
-      const form = formRef.current = new Form();
       const formEditor = formEditorRef.current = new FormEditor({
         renderer: {
           compact: true
@@ -68403,7 +69087,11 @@
         propertiesPanel: {
           parent: propertiesPanelContainerRef.current
         },
-        exporter: exporterConfig
+        exporter: exporterConfig,
+        properties: {
+          ...editorProperties,
+          'ariaLabel': 'Form Definition'
+        }
       });
       paletteRef.current = formEditor.get('palette');
       propertiesPanelRef.current = formEditor.get('propertiesPanel');