@bpmn-io/form-js-viewer 0.14.0 → 0.15.0-alpha.0

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import Ids from 'ids';
 import { isString, isArray, isFunction, isNumber, bind, assign, isNil, groupBy, flatten, get, isUndefined, set, findIndex, isObject } from 'min-dash';
-import { evaluate, parseExpressions, parseUnaryTests, unaryTest } from 'feelin';
-import { evaluate as evaluate$1 } from 'feelers';
+import { parseExpressions, parseUnaryTests, evaluate, unaryTest } from 'feelin';
+import { evaluate as evaluate$1, parser, buildSimpleTree } from 'feelers';
 import showdown from 'showdown';
 import Big from 'big.js';
 import classNames from 'classnames';
@@ -13,30 +13,179 @@ import flatpickr from 'flatpickr';
 import Markup from 'preact-markup';
 import { Injector } from 'didi';
 
+const getFlavouredFeelVariableNames = (feelString, feelFlavour, options = {}) => {
+  const {
+    depth = 0,
+    specialDepthAccessors = {}
+  } = options;
+  if (!['expression', 'unaryTest'].includes(feelFlavour)) return [];
+  const tree = feelFlavour === 'expression' ? parseExpressions(feelString) : parseUnaryTests(feelString);
+  const simpleExpressionTree = _buildSimpleFeelStructureTree(tree, feelString);
+  return function _unfoldVariables(node) {
+    if (node.name === 'PathExpression') {
+      if (Object.keys(specialDepthAccessors).length === 0) {
+        return depth === 0 ? [_getVariableNameAtPathIndex(node, 0)] : [];
+      }
+
+      // if using special depth accessors, use a more complex extraction
+      return Array.from(_smartExtractVariableNames(node, depth, specialDepthAccessors));
+    }
+    if (depth === 0 && node.name === 'VariableName') return [node.variableName];
+
+    // for any other kind of node, traverse its children and flatten the result
+    if (node.children) {
+      return node.children.reduce((acc, child) => {
+        return acc.concat(_unfoldVariables(child));
+      }, []);
+    }
+    return [];
+  }(simpleExpressionTree);
+};
+
+/**
+ * Get the variable name at the specified index in a given path expression.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @param {number} index - The index of the variable name to retrieve.
+ * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
+ */
+const _getVariableNameAtPathIndex = (root, index) => {
+  const accessors = _deconstructPathExpression(root);
+  return accessors[index] || null;
+};
+
+/**
+ * Extracts the variables which are required of the external context for a given path expression.
+ * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
+ *
+ * @param {Object} node - The root node of the path expression tree.
+ * @param {number} initialDepth - The depth at which the root node is located in the outer context.
+ * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
+ * @returns {Set} - A set containing the extracted variable names.
+ */
+const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) => {
+  // depth info represents the previous (initialised as null) and current depth of the current accessor in the path expression
+  // we track multiple of these to account for the fact that a path expression may be ambiguous due to special keywords
+  let accessorDepthInfos = [{
+    previous: null,
+    current: initialDepth - 1
+  }];
+  const extractedVariables = new Set();
+  const nodeAccessors = _deconstructPathExpression(node);
+  for (let i = 0; i < nodeAccessors.length; i++) {
+    const currentAccessor = nodeAccessors[i];
+    if (currentAccessor in specialDepthAccessors) {
+      const depthOffsets = specialDepthAccessors[currentAccessor];
+
+      // if the current accessor is a special keyword, we need to expand the current depth info set
+      // this is done to account for the ambiguity of keywords like parent, which may be used to access
+      // the parent of the current node, or a child variable of the same name
+      accessorDepthInfos = depthOffsets.reduce((accumulator, offset) => {
+        return [...accumulator, ...accessorDepthInfos.map(depthInfo => ({
+          previous: depthInfo.current,
+          current: depthInfo.current + offset
+        }))];
+      }, []).filter(depthInfo => depthInfo.current >= -1); // discard all depth infos which are out of bounds
+    } else {
+      // if the current accessor is not a special keyword, we know it's simply accessing a child
+      // hence we are now one level deeper in the tree and simply increment
+      accessorDepthInfos = accessorDepthInfos.map(depthInfo => ({
+        previous: depthInfo.current,
+        current: depthInfo.current + 1
+      }));
+    }
+
+    // finally, we check if for the current accessor, there is a scenario where:
+    // previous it was at depth -1 (i.e. the root context), and is now at depth 0 (i.e. a variable)
+    // these are the variables we need to request, so we add them to the set
+    if (accessorDepthInfos.some(depthInfo => depthInfo.previous === -1 && depthInfo.current === 0)) {
+      extractedVariables.add(currentAccessor);
+    }
+  }
+
+  // we return a set to avoid duplicates
+  return new Set(extractedVariables);
+};
+
+/**
+ * Deconstructs a path expression tree into an array of components.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @returns {Array<string>} An array of components in the path expression, in the correct order.
+ */
+const _deconstructPathExpression = root => {
+  let node = root;
+  let parts = [];
+
+  // Traverse the tree and collect path components
+  while (node.name === 'PathExpression') {
+    parts.push(node.children[1].variableName);
+    node = node.children[0];
+  }
+
+  // Add the last component to the array
+  parts.push(node.variableName);
+
+  // Reverse and return the array to get the correct order
+  return parts.reverse();
+};
+
+/**
+ * Builds a simplified feel structure tree from the given parse tree and feel string.
+ * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
+ *
+ * @param {Object} parseTree - The parse tree generated by a parser.
+ * @param {string} feelString - The feel string used for parsing.
+ * @returns {Object} The simplified feel structure tree.
+ */
+const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
+  const stack = [{
+    children: []
+  }];
+  parseTree.iterate({
+    enter: node => {
+      const nodeRepresentation = {
+        name: node.type.name,
+        children: []
+      };
+      if (node.type.name === 'VariableName') {
+        nodeRepresentation.variableName = feelString.slice(node.from, node.to);
+      }
+      stack.push(nodeRepresentation);
+    },
+    leave: () => {
+      const result = stack.pop();
+      const parent = stack[stack.length - 1];
+      parent.children.push(result);
+    }
+  });
+  return stack[0].children[0];
+};
+
 class FeelExpressionLanguage {
   constructor(eventBus) {
     this._eventBus = eventBus;
   }
 
-  /**
-   * Determines if the given string is a FEEL expression.
-   *
-   * @param {string} value
-   * @returns {boolean}
-   *
+  /**
+   * Determines if the given value is a FEEL expression.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
    */
   isExpression(value) {
     return isString(value) && value.startsWith('=');
   }
 
-  /**
-   * Retrieve variable names from a given FEEL expression.
-   *
-   * @param {string} expression
-   * @param {object} [options]
-   * @param {string} [options.type]
-   *
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from a given FEEL expression.
+   *
+   * @param {string} expression
+   * @param {object} [options]
+   * @param {string} [options.type]
+   *
+   * @returns {string[]}
    */
   getVariableNames(expression, options = {}) {
     const {
@@ -45,21 +194,19 @@ class FeelExpressionLanguage {
     if (!this.isExpression(expression)) {
       return [];
     }
-    if (type === 'unaryTest') {
-      return this._getUnaryVariableNames(expression);
-    } else if (type === 'expression') {
-      return this._getExpressionVariableNames(expression);
+    if (!['unaryTest', 'expression'].includes(type)) {
+      throw new Error('Unknown expression type: ' + type);
     }
-    throw new Error('Unknown expression type: ' + options.type);
+    return getFlavouredFeelVariableNames(expression, type);
   }
 
-  /**
-   * Evaluate an expression.
-   *
-   * @param {string} expression
-   * @param {import('../../types').Data} [data]
-   *
-   * @returns {any}
+  /**
+   * Evaluate an expression.
+   *
+   * @param {string} expression
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {any}
    */
   evaluate(expression, data = {}) {
     if (!expression) {
@@ -78,50 +225,65 @@ class FeelExpressionLanguage {
       return null;
     }
   }
-  _getExpressionVariableNames(expression) {
-    const tree = parseExpressions(expression);
-    const cursor = tree.cursor();
-    const variables = new Set();
-    do {
-      const node = cursor.node;
-      if (node.type.name === 'VariableName') {
-        variables.add(expression.slice(node.from, node.to));
-      }
-    } while (cursor.next());
-    return Array.from(variables);
-  }
-  _getUnaryVariableNames(unaryTest) {
-    const tree = parseUnaryTests(unaryTest);
-    const cursor = tree.cursor();
-    const variables = new Set();
-    do {
-      const node = cursor.node;
-      if (node.type.name === 'VariableName') {
-        variables.add(unaryTest.slice(node.from, node.to));
-      }
-    } while (cursor.next());
-    return Array.from(variables);
-  }
 }
 FeelExpressionLanguage.$inject = ['eventBus'];
 
 class FeelersTemplating {
   constructor() {}
+
+  /**
+   * Determines if the given value is a feelers template.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
+   */
   isTemplate(value) {
-    return isString(value) && (value.startsWith('=') || /{{/.test(value));
+    return isString(value) && (value.startsWith('=') || /{{.*?}}/.test(value));
   }
 
-  /**
-   * Evaluate a template.
-   *
-   * @param {string} template
-   * @param {Object<string, any>} context
-   * @param {Object} options
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
-   * @returns
+  /**
+   * Retrieve variable names from a given feelers template.
+   *
+   * @param {string} template
+   *
+   * @returns {string[]}
+   */
+  getVariableNames(template) {
+    if (!this.isTemplate(template)) {
+      return [];
+    }
+    const expressions = this._extractExpressionsWithDepth(template);
+
+    // defines special accessors, and the change(s) in depth they could imply (e.g. parent can be used to access the parent context (depth - 1) or a child variable named parent (depth + 1)
+    const specialDepthAccessors = {
+      parent: [-1, 1],
+      _parent_: [-1],
+      this: [0, 1],
+      _this_: [0]
+    };
+    return expressions.reduce((variables, {
+      expression,
+      depth
+    }) => {
+      return variables.concat(getFlavouredFeelVariableNames(expression, 'expression', {
+        depth,
+        specialDepthAccessors
+      }));
+    }, []);
+  }
+
+  /**
+   * Evaluate a template.
+   *
+   * @param {string} template
+   * @param {Object<string, any>} context
+   * @param {Object} options
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
+   * @returns
    */
   evaluate(template, context = {}, options = {}) {
     const {
@@ -135,12 +297,56 @@ class FeelersTemplating {
       buildDebugString
     });
   }
+
+  /**
+  * @typedef {Object} ExpressionWithDepth
+  * @property {number} depth - The depth of the expression in the syntax tree.
+  * @property {string} expression - The extracted expression
+  */
+
+  /**
+  * Extracts all feel expressions in the template along with their depth in the syntax tree.
+  * The depth is incremented for child expressions of loops to account for context drilling.
+  * @name extractExpressionsWithDepth
+  * @param {string} template - A feelers template string.
+  * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
+  *
+  * @example
+  * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
+  * const extractedExpressions = _extractExpressionsWithDepth(template);
+  */
+  _extractExpressionsWithDepth(template) {
+    // build simplified feelers syntax tree
+    const parseTree = parser.parse(template);
+    const tree = buildSimpleTree(parseTree, template);
+    return function _traverse(n, depth = 0) {
+      if (['Feel', 'FeelBlock'].includes(n.name)) {
+        return [{
+          depth,
+          expression: n.content
+        }];
+      }
+      if (n.name === 'LoopSpanner') {
+        const loopExpression = n.children[0].content;
+        const childResults = n.children.slice(1).reduce((acc, child) => {
+          return acc.concat(_traverse(child, depth + 1));
+        }, []);
+        return [{
+          depth,
+          expression: loopExpression
+        }, ...childResults];
+      }
+      return n.children.reduce((acc, child) => {
+        return acc.concat(_traverse(child, depth));
+      }, []);
+    }(tree);
+  }
 }
 FeelersTemplating.$inject = [];
 
-/**
- * @typedef {object} Condition
- * @property {string} [hide]
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
  */
 
 class ConditionChecker {
@@ -149,11 +355,11 @@ class ConditionChecker {
     this._eventBus = eventBus;
   }
 
-  /**
-   * For given data, remove properties based on condition.
-   *
-   * @param {Object<string, any>} properties
-   * @param {Object<string, any>} data
+  /**
+   * For given data, remove properties based on condition.
+   *
+   * @param {Object<string, any>} properties
+   * @param {Object<string, any>} data
    */
   applyConditions(properties, data = {}) {
     const conditions = this._getConditions();
@@ -172,13 +378,13 @@ class ConditionChecker {
     return newProperties;
   }
 
-  /**
-   * Check if given condition is met. Returns null for invalid/missing conditions.
-   *
-   * @param {string} condition
-   * @param {import('../../types').Data} [data]
-   *
-   * @returns {boolean|null}
+  /**
+   * Check if given condition is met. Returns null for invalid/missing conditions.
+   *
+   * @param {string} condition
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {boolean|null}
    */
   check(condition, data = {}) {
     if (!condition) {
@@ -199,12 +405,12 @@ class ConditionChecker {
     }
   }
 
-  /**
-   * Check if hide condition is met.
-   *
-   * @param {Condition} condition
-   * @param {Object<string, any>} data
-   * @returns {boolean}
+  /**
+   * Check if hide condition is met.
+   *
+   * @param {Condition} condition
+   * @param {Object<string, any>} data
+   * @returns {boolean}
    */
   _checkHideCondition(condition, data) {
     if (!condition.hide) {
@@ -246,12 +452,12 @@ class MarkdownRenderer {
     this._converter = new showdown.Converter();
   }
 
-  /**
-   * Render markdown to HTML.
-   *
-   * @param {string} markdown - The markdown to render
-   *
-   * @returns {string} HTML
+  /**
+   * Render markdown to HTML.
+   *
+   * @param {string} markdown - The markdown to render
+   *
+   * @returns {string} HTML
    */
   render(markdown) {
     return this._converter.makeHtml(markdown);
@@ -268,6 +474,30 @@ var FN_REF = '__fn';
 var DEFAULT_PRIORITY = 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.
  *
@@ -352,6 +582,9 @@ var slice = Array.prototype.slice;
  * ```
  */
 function EventBus() {
+  /**
+   * @type { Record<string, EventBusListener> }
+   */
   this._listeners = {};
 
   // cleanup on destroy on lowest priority to allow
@@ -371,10 +604,12 @@ function EventBus() {
  *
  * 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];
@@ -406,14 +641,16 @@ EventBus.prototype.on = function (events, priority, callback, that) {
 };
 
 /**
- * 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.prototype.once = function (event, priority, callback, that) {
+EventBus.prototype.once = function (events, priority, callback, that) {
   var self = this;
   if (isFunction(priority)) {
     that = callback;
@@ -426,7 +663,7 @@ EventBus.prototype.once = function (event, priority, callback, that) {
   function wrappedCallback() {
     wrappedCallback.__isTomb = true;
     var result = callback.apply(that, arguments);
-    self.off(event, wrappedCallback);
+    self.off(events, wrappedCallback);
     return result;
   }
 
@@ -434,7 +671,7 @@ EventBus.prototype.once = function (event, priority, callback, that) {
   // bound callbacks via {@link #off} using the original
   // callback
   wrappedCallback[FN_REF] = callback;
-  this.on(event, priority, wrappedCallback);
+  this.on(events, priority, wrappedCallback);
 };
 
 /**
@@ -442,8 +679,8 @@ EventBus.prototype.once = function (event, priority, callback, that) {
  *
  * 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];
@@ -454,11 +691,11 @@ EventBus.prototype.off = function (events, callback) {
 };
 
 /**
- * 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();
@@ -467,10 +704,11 @@ EventBus.prototype.createEvent = function (data) {
 };
 
 /**
- * Fires a named event.
+ * Fires an event.
  *
  * @example
  *
+ * ```javascript
  * // fire event by name
  * events.fire('foo');
  *
@@ -488,13 +726,13 @@ EventBus.prototype.createEvent = function (data) {
  * });
  *
  * 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;
@@ -546,6 +784,14 @@ EventBus.prototype.fire = function (type, data) {
   }
   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
@@ -554,6 +800,14 @@ EventBus.prototype.handleError = function (error) {
 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) {
@@ -566,6 +820,14 @@ EventBus.prototype._invokeListeners = function (event, args, listener) {
   }
   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) {
@@ -594,7 +856,7 @@ EventBus.prototype._invokeListener = function (event, args, listener) {
   return returnValue;
 };
 
-/*
+/**
  * Add new listener with a certain priority to the list
  * of listeners (for the given event).
  *
@@ -608,7 +870,7 @@ EventBus.prototype._invokeListener = function (event, args, listener) {
  *    * 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),
@@ -639,9 +901,20 @@ EventBus.prototype._addListener = function (event, newListener) {
   // 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;
 };
@@ -689,9 +962,9 @@ InternalEvent.prototype.init = function (data) {
  * 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);
@@ -840,23 +1113,23 @@ class FormFieldRegistry {
 }
 FormFieldRegistry.$inject = ['eventBus'];
 
-/**
- * @typedef { { id: String, components: Array<String> } } FormRow
- * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
+/**
+ * @typedef { { id: String, components: Array<String> } } FormRow
+ * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
  */
 
-/**
- * Maintains the Form layout in a given structure, for example
- *
- *  [
- *    {
- *      formFieldId: 'FormField_1',
- *      rows: [
- *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
- *      ]
- *    }
- *  ]
- *
+/**
+ * Maintains the Form layout in a given structure, for example
+ *
+ *  [
+ *    {
+ *      formFieldId: 'FormField_1',
+ *      rows: [
+ *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+ *      ]
+ *    }
+ *  ]
+ *
  */
 class FormLayouter {
   constructor(eventBus) {
@@ -866,8 +1139,8 @@ class FormLayouter {
     this._eventBus = eventBus;
   }
 
-  /**
-   * @param {FormRow} row
+  /**
+   * @param {FormRow} row
    */
   addRow(formFieldId, row) {
     let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
@@ -881,18 +1154,18 @@ class FormLayouter {
     rowsPerComponent.rows.push(row);
   }
 
-  /**
-   * @param {String} id
-   * @returns {FormRow}
+  /**
+   * @param {String} id
+   * @returns {FormRow}
    */
   getRow(id) {
     const rows = allRows(this._rows);
     return rows.find(r => r.id === id);
   }
 
-  /**
-   * @param {any} formField
-   * @returns {FormRow}
+  /**
+   * @param {any} formField
+   * @returns {FormRow}
    */
   getRowForField(formField) {
     return allRows(this._rows).find(r => {
@@ -903,9 +1176,9 @@ class FormLayouter {
     });
   }
 
-  /**
-   * @param {String} formFieldId
-   * @returns { Array<FormRow> }
+  /**
+   * @param {String} formFieldId
+   * @returns { Array<FormRow> }
    */
   getRows(formFieldId) {
     const rowsForField = this._rows.find(r => formFieldId === r.formFieldId);
@@ -915,15 +1188,15 @@ class FormLayouter {
     return rowsForField.rows;
   }
 
-  /**
-   * @returns {string}
+  /**
+   * @returns {string}
    */
   nextRowId() {
     return this._ids.nextPrefixed('Row_');
   }
 
-  /**
-   * @param {any} formField
+  /**
+   * @param {any} formField
    */
   calculateLayout(formField) {
     const {
@@ -977,9 +1250,9 @@ function groupByRow(components, ids) {
   });
 }
 
-/**
- * @param {Array<FormRows>} formRows
- * @returns {Array<FormRow>}
+/**
+ * @param {Array<FormRows>} formRows
+ * @returns {Array<FormRow>}
  */
 function allRows(formRows) {
   return flatten(formRows.map(c => c.rows));
@@ -1056,10 +1329,10 @@ function createInjector(bootstrapModules) {
   return injector;
 }
 
-/**
- * @param {string?} prefix
- *
- * @returns Element
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
  */
 function createFormContainer(prefix = 'fjs') {
   const container = document.createElement('div');
@@ -1068,6 +1341,7 @@ function createFormContainer(prefix = 'fjs') {
 }
 
 const EXPRESSION_PROPERTIES = ['alt', 'source', 'text'];
+const TEMPLATE_PROPERTIES = ['text'];
 function findErrors(errors, path) {
   return errors[pathStringify(path)];
 }
@@ -1104,24 +1378,24 @@ function generateIdForType(type) {
   return `${type}${generateIndexForType(type)}`;
 }
 
-/**
- * @template T
- * @param {T} data
- * @param {(this: any, key: string, value: any) => any} [replacer]
- * @return {T}
+/**
+ * @template T
+ * @param {T} data
+ * @param {(this: any, key: string, value: any) => any} [replacer]
+ * @return {T}
  */
 function clone(data, replacer) {
   return JSON.parse(JSON.stringify(data, replacer));
 }
 
-/**
- * Parse the schema for input variables a form might make use of
- *
- * @param {any} schema
- *
- * @return {string[]}
+/**
+ * Parse the schema for input variables a form might make use of
+ *
+ * @param {any} schema
+ *
+ * @return {string[]}
  */
-function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null)) {
+function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null), templating = new FeelersTemplating()) {
   if (!schema.components) {
     return [];
   }
@@ -1156,6 +1430,13 @@ function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLangu
         variables = [...variables, ...expressionVariables];
       }
     });
+    TEMPLATE_PROPERTIES.forEach(prop => {
+      const property = component[prop];
+      if (property && !expressionLanguage.isExpression(property) && templating.isTemplate(property)) {
+        const templateVariables = templating.getVariableNames(property);
+        variables = [...variables, ...templateVariables];
+      }
+    });
     return variables;
   }, []);
 
@@ -1164,11 +1445,11 @@ function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLangu
 }
 
 class Importer {
-  /**
-   * @constructor
-   * @param { import('../core').FormFieldRegistry } formFieldRegistry
-   * @param { import('../render/FormFields').default } formFields
-   * @param { import('../core').FormLayouter } formLayouter
+  /**
+   * @constructor
+   * @param { import('../core').FormFieldRegistry } formFieldRegistry
+   * @param { import('../render/FormFields').default } formFields
+   * @param { import('../core').FormLayouter } formLayouter
    */
   constructor(formFieldRegistry, formFields, formLayouter) {
     this._formFieldRegistry = formFieldRegistry;
@@ -1176,15 +1457,15 @@ class Importer {
     this._formLayouter = formLayouter;
   }
 
-  /**
-   * Import schema adding `id`, `_parent` and `_path`
-   * information to each field and adding it to the
-   * form field registry.
-   *
-   * @param {any} schema
-   * @param {any} [data]
-   *
-   * @return { { warnings: Array<any>, schema: any, data: any } }
+  /**
+   * Import schema adding `id`, `_parent` and `_path`
+   * information to each field and adding it to the
+   * form field registry.
+   *
+   * @param {any} schema
+   * @param {any} [data]
+   *
+   * @return { { warnings: Array<any>, schema: any, data: any } }
    */
   importSchema(schema, data = {}) {
     // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
@@ -1205,11 +1486,11 @@ class Importer {
     }
   }
 
-  /**
-   * @param {any} formField
-   * @param {string} [parentId]
-   *
-   * @return {any} importedField
+  /**
+   * @param {any} formField
+   * @param {string} [parentId]
+   *
+   * @return {any} importedField
    */
   importFormField(formField, parentId) {
     const {
@@ -1260,10 +1541,10 @@ class Importer {
     });
   }
 
-  /**
-   * @param {Object} data
-   *
-   * @return {Object} initializedData
+  /**
+   * @param {Object} data
+   *
+   * @return {Object} initializedData
    */
   initializeFieldValues(data) {
     return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -1278,16 +1559,18 @@ class Importer {
       // 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(data, _path);
-        if (!isUndefined(valueData) && fieldImplementation.sanitizeValue) {
-          valueData = fieldImplementation.sanitizeValue({
+        if (!isUndefined(valueData) && fieldConfig.sanitizeValue) {
+          valueData = fieldConfig.sanitizeValue({
             formField,
             data,
             value: valueData
           });
         }
-        const initializedFieldValue = !isUndefined(valueData) ? valueData : !isUndefined(defaultValue) ? defaultValue : fieldImplementation.emptyValue;
+        const initializedFieldValue = !isUndefined(valueData) ? valueData : !isUndefined(defaultValue) ? defaultValue : fieldConfig.emptyValue;
         initializedData = {
           ...initializedData,
           [_path[0]]: initializedFieldValue
@@ -1352,14 +1635,16 @@ function Button(props) {
     })
   });
 }
-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 = createContext({
   Empty: props => {
@@ -1395,11 +1680,11 @@ const FormRenderContext = createContext({
 });
 var FormRenderContext$1 = FormRenderContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const FormContext = createContext({
@@ -1423,13 +1708,16 @@ function Description(props) {
 
 function Errors(props) {
   const {
-    errors
+    errors,
+    id
   } = props;
   if (!errors.length) {
     return null;
   }
   return jsx("div", {
     class: "fjs-form-field-error",
+    "aria-live": "polite",
+    id: id,
     children: jsx("ul", {
       children: errors.map(error => {
         return jsx("li", {
@@ -1487,6 +1775,7 @@ function Checkbox(props) {
   const {
     formId
   } = useContext(FormContext$1);
+  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
     class: classNames(formFieldClasses(type$a, {
       errors,
@@ -1504,26 +1793,30 @@ function Checkbox(props) {
         disabled: disabled,
         id: prefixId(id, formId),
         type: "checkbox",
-        onChange: onChange
+        onChange: onChange,
+        "aria-describedby": errorMessageId
       })
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
-      errors: errors
+      errors: errors,
+      id: errorMessageId
     })]
   });
 }
-Checkbox.create = (options = {}) => ({
-  ...options
-});
-Checkbox.type = type$a;
-Checkbox.label = 'Checkbox';
-Checkbox.keyed = true;
-Checkbox.emptyValue = false;
-Checkbox.sanitizeValue = ({
-  value
-}) => value === true;
-Checkbox.group = 'selection';
+Checkbox.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) {
@@ -1578,8 +1871,8 @@ function useService(type, strict) {
   return getService(type, strict);
 }
 
-/**
- * @enum { String }
+/**
+ * @enum { String }
  */
 const LOAD_STATES = {
   LOADING: 'loading',
@@ -1587,17 +1880,17 @@ const LOAD_STATES = {
   ERROR: 'error'
 };
 
-/**
- * @typedef {Object} ValuesGetter
- * @property {Object[]} values - The values data
- * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+/**
+ * @typedef {Object} ValuesGetter
+ * @property {Object[]} values - The values data
+ * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
  */
 
-/**
- * A hook to load values for single and multiselect components.
- *
- * @param {Object} field - The form field to handle values for
- * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+/**
+ * A hook to load values for single and multiselect components.
+ *
+ * @param {Object} field - The form field to handle values for
+ * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
  */
 function useValuesAsync (field) {
   const {
@@ -1889,6 +2182,7 @@ function Checklist(props) {
   const {
     formId
   } = useContext(FormContext$1);
+  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
     class: classNames(formFieldClasses(type$9, {
       errors,
@@ -1911,42 +2205,46 @@ function Checklist(props) {
           disabled: disabled,
           id: prefixId(`${id}-${index}`, formId),
           type: "checkbox",
-          onClick: () => toggleCheckbox(v.value)
+          onClick: () => toggleCheckbox(v.value),
+          "aria-describedby": errorMessageId
         })
       }, `${id}-${index}`);
     }), jsx(Description, {
       description: description
     }), jsx(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.
- * Memoised to minimize re-renders
- *
+/**
+ * Returns the conditionally filtered data of a form reactively.
+ * Memoised to minimize re-renders
+ *
  */
 function useFilteredFormData() {
   const {
@@ -1963,12 +2261,12 @@ function useFilteredFormData() {
   }, [conditionChecker, data, initialData]);
 }
 
-/**
- * Evaluate if condition is met reactively based on the conditionChecker and form data.
- *
- * @param {string | undefined} condition
- *
- * @returns {boolean} true if condition is met or no condition or condition checker exists
+/**
+ * Evaluate if condition is met reactively based on the conditionChecker and form data.
+ *
+ * @param {string | undefined} condition
+ *
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
  */
 function useCondition(condition) {
   const conditionChecker = useService('conditionChecker', false);
@@ -1978,13 +2276,13 @@ function useCondition(condition) {
   }, [conditionChecker, condition, filteredData]);
 }
 
-/**
- * Evaluate a string reactively based on the expressionLanguage and form data.
- * If the string is not an expression, it is returned as is.
- * Memoised to minimize re-renders.
- *
- * @param {string} value
- *
+/**
+ * Evaluate a string reactively based on the expressionLanguage and form data.
+ * If the string is not an expression, it is returned as is.
+ * Memoised to minimize re-renders.
+ *
+ * @param {string} value
+ *
  */
 function useExpressionEvaluation(value) {
   const formData = useFilteredFormData();
@@ -2013,16 +2311,16 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
   });
 }
 
-/**
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
- * Memoised to minimize re-renders
- *
- * @param {string} value
- * @param {Object} options
- * @param {boolean} [options.debug = false]
- * @param {boolean} [options.strict = false]
- * @param {Function} [options.buildDebugString]
- *
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} options
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
  */
 function useTemplateEvaluation(value, options) {
   const filteredData = useFilteredFormData();
@@ -2041,9 +2339,6 @@ function FormField(props) {
     field,
     onChange
   } = props;
-  const {
-    _path
-  } = field;
   const formFields = useService('formFields'),
     form = useService('form');
   const {
@@ -2060,8 +2355,8 @@ function FormField(props) {
   if (!FormFieldComponent) {
     throw new Error(`cannot render field <${field.type}>`);
   }
-  const value = get(data, _path);
-  const fieldErrors = findErrors(errors, _path);
+  const value = get(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) {
@@ -2128,14 +2423,16 @@ function Default(props) {
     }), components.length ? null : jsx(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++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 var CalendarIcon = (({
@@ -2311,16 +2608,17 @@ function Datepicker(props) {
           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']
         })
       })
     })]
@@ -2577,7 +2875,8 @@ function Timepicker(props) {
           },
           onBlur: onInputBlur,
           onKeyDown: onInputKeyDown,
-          "data-input": true
+          "data-input": true,
+          "aria-describedby": props['aria-describedby']
         }), dropdownIsOpen && jsx(DropdownList, {
           values: timeOptions,
           height: 150,
@@ -2713,6 +3012,7 @@ function Datetime(props) {
       time
     });
   }, []);
+  const errorMessageId = allErrors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   const datePickerProps = {
     id,
     label: dateLabel,
@@ -2722,7 +3022,8 @@ function Datetime(props) {
     disabled,
     disallowPassedDates,
     date: dateTime.date,
-    setDate
+    setDate,
+    'aria-describedby': errorMessageId
   };
   const timePickerProps = {
     id,
@@ -2734,7 +3035,8 @@ function Datetime(props) {
     use24h,
     timeInterval,
     time: dateTime.time,
-    setTime
+    setTime,
+    'aria-describedby': errorMessageId
   };
   return jsxs("div", {
     class: formFieldClasses(type$8, {
@@ -2753,30 +3055,33 @@ function Datetime(props) {
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
-      errors: allErrors
+      errors: allErrors,
+      id: errorMessageId
     })]
   });
 }
-Datetime.create = (options = {}) => {
-  const defaults = {};
-  set(defaults, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
-  set(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(defaults, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
+    set(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.
- *
- * @see http://bpmn.io/license for more information.
+/**
+ * This file must not be changed or exchanged.
+ *
+ * @see http://bpmn.io/license for more information.
  */
 function Logo() {
   return jsxs("svg", {
@@ -2815,7 +3120,7 @@ function Lightbox(props) {
         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: jsx(Logo, {})
       }), jsxs("span", {
         children: ["Web-based tooling for BPMN, DMN, and forms powered by ", jsx("a", {
@@ -2838,7 +3143,7 @@ function Link(props) {
       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: jsx(Logo, {})
     })
@@ -2866,8 +3171,12 @@ const noop = () => {};
 function FormComponent(props) {
   const form = useService('form');
   const {
-    schema
+    schema,
+    properties
   } = form._getState();
+  const {
+    ariaLabel
+  } = properties;
   const {
     onSubmit = noop,
     onReset = noop,
@@ -2885,6 +3194,7 @@ function FormComponent(props) {
     class: "fjs-form",
     onSubmit: handleSubmit,
     onReset: handleReset,
+    "aria-label": ariaLabel,
     noValidate: true,
     children: [jsx(FormField, {
       field: schema,
@@ -2895,7 +3205,7 @@ function FormComponent(props) {
 
 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
@@ -2903,11 +3213,11 @@ const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u
 
 const FORM_ELEMENT = document.createElement('form');
 
-/**
- * Sanitize a HTML string and return the cleaned, safe version.
- *
- * @param {string} html
- * @return {string}
+/**
+ * Sanitize a HTML string and return the cleaned, safe version.
+ *
+ * @param {string} html
+ * @return {string}
  */
 
 // see https://github.com/developit/snarkdown/issues/70
@@ -2925,29 +3235,29 @@ function sanitizeHTML(html) {
   }
 }
 
-/**
- * Sanitizes an image source to ensure we only allow for data URI and links
- * that start with http(s).
- *
- * Note: Most browsers anyway do not support script execution in <img> elements.
- *
- * @param {string} src
- * @returns {string}
+/**
+ * Sanitizes an image source to ensure we only allow for data URI and links
+ * that start with http(s).
+ *
+ * Note: Most browsers anyway do not support script execution in <img> elements.
+ *
+ * @param {string} src
+ * @returns {string}
  */
 function sanitizeImageSource(src) {
   const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
   return valid ? src : '';
 }
 
-/**
- * Recursively sanitize a HTML node, potentially
- * removing it, its children or attributes.
- *
- * Inspired by https://github.com/developit/snarkdown/issues/70
- * and https://github.com/cure53/DOMPurify. Simplified
- * for our use-case.
- *
- * @param {Element} node
+/**
+ * Recursively sanitize a HTML node, potentially
+ * removing it, its children or attributes.
+ *
+ * Inspired by https://github.com/developit/snarkdown/issues/70
+ * and https://github.com/cure53/DOMPurify. Simplified
+ * for our use-case.
+ *
+ * @param {Element} node
  */
 function sanitizeNode(node) {
   // allow text nodes
@@ -2991,13 +3301,13 @@ function sanitizeNode(node) {
   }
 }
 
-/**
- * Validates attributes for validity.
- *
- * @param {string} lcTag
- * @param {string} lcName
- * @param {string} value
- * @return {boolean}
+/**
+ * Validates attributes for validity.
+ *
+ * @param {string} lcTag
+ * @param {string} lcName
+ * @param {string} value
+ * @return {boolean}
  */
 function isValidAttribute(lcTag, lcName, value) {
   // disallow most attributes based on whitelist
@@ -3084,13 +3394,15 @@ function Image(props) {
     })
   });
 }
-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++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 var AngelDownIcon = (({
@@ -3157,10 +3469,10 @@ function Numberfield(props) {
 
   // 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 = useMemo(() => Numberfield.sanitizeValue({
+  const cacheValueMatchesState = useMemo(() => Numberfield.config.sanitizeValue({
     value,
     formField: field
-  }) === Numberfield.sanitizeValue({
+  }) === Numberfield.config.sanitizeValue({
     value: stringValueCache,
     formField: field
   }), [stringValueCache, value, field]);
@@ -3254,6 +3566,7 @@ function Numberfield(props) {
   const {
     formId
   } = useContext(FormContext$1);
+  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
     class: formFieldClasses(type$6, {
       errors,
@@ -3287,7 +3600,8 @@ function Numberfield(props) {
           type: "text",
           autoComplete: "off",
           step: arrowIncrementValue,
-          value: displayValue
+          value: displayValue,
+          "aria-describedby": errorMessageId
         }), jsxs("div", {
           class: classNames('fjs-number-arrow-container', {
             'fjs-disabled': disabled
@@ -3314,31 +3628,34 @@ function Numberfield(props) {
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
-      errors: errors
+      errors: errors,
+      id: errorMessageId
     })]
   });
 }
-Numberfield.create = (options = {}) => ({
-  ...options
-});
-Numberfield.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(value)) return 'NaN';
-
-  // otherwise parse to formatting type
-  return formField.serializeToString ? value.toString() : Number(value);
+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(value)) return 'NaN';
+
+    // 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) {
@@ -3370,6 +3687,7 @@ function Radio(props) {
   const {
     formId
   } = useContext(FormContext$1);
+  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
     class: formFieldClasses(type$5, {
       errors,
@@ -3392,37 +3710,41 @@ function Radio(props) {
           disabled: disabled,
           id: prefixId(`${id}-${index}`, formId),
           type: "radio",
-          onClick: () => onChange(option.value)
+          onClick: () => onChange(option.value),
+          "aria-describedby": errorMessageId
         })
       }, `${id}-${index}`);
     }), jsx(Description, {
       description: description
     }), jsx(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++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 var XMarkIcon = (({
@@ -3562,7 +3884,8 @@ function SearchableSelect(props) {
         onBlur: () => {
           setIsDropdownExpanded(false);
           setFilter(valueLabel);
-        }
+        },
+        "aria-describedby": props['aria-describedby']
       }), displayState.displayCross && jsxs("span", {
         class: "fjs-select-cross",
         onMouseDown: e => {
@@ -3648,14 +3971,20 @@ function SimpleSelect(props) {
       }),
       onFocus: () => setIsDropdownExpanded(true),
       onBlur: () => setIsDropdownExpanded(false),
-      onMouseDown: e => onMouseDown(e),
-      tabIndex: disabled ? undefined : 0,
+      onMouseDown: onMouseDown,
       children: [jsx("div", {
         class: classNames('fjs-select-display', {
           'fjs-select-placeholder': !value
         }),
         id: prefixId(`${id}-display`, formId),
         children: valueLabel || 'Select'
+      }), !disabled && jsx("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 && jsx("span", {
         class: "fjs-select-cross",
         onMouseDown: e => {
@@ -3705,21 +4034,29 @@ function Select(props) {
   const {
     formId
   } = useContext(FormContext$1);
+  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   const selectProps = useMemo(() => ({
     id,
     disabled,
     errors,
     field,
     value,
-    onChange
-  }), [disabled, errors, field, id, value, onChange]);
+    onChange,
+    'aria-describedby': errorMessageId
+  }), [disabled, errors, field, id, value, onChange, errorMessageId]);
   return jsxs("div", {
     class: formFieldClasses(type$4, {
       errors,
       disabled
     }),
+    onKeyDown: event => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
     children: [jsx(Label, {
-      id: prefixId(id, formId),
+      id: prefixId(`${id}-search`, formId),
       label: label,
       required: required
     }), searchable ? jsx(SearchableSelect, {
@@ -3729,31 +4066,34 @@ function Select(props) {
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
-      errors: errors
+      errors: errors,
+      id: errorMessageId
     })]
   });
 }
-Select.create = (options = {}) => {
-  const defaults = {};
-
-  // provide default values if valuesKey isn't set
-  if (!options.valuesKey) {
-    defaults.values = [{
-      label: 'Value',
-      value: 'value'
-    }];
+Select.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.type = type$4;
-Select.label = 'Select';
-Select.keyed = true;
-Select.emptyValue = null;
-Select.sanitizeValue = sanitizeSingleSelectValue;
-Select.group = 'selection';
 
 const type$3 = 'taglist';
 function Taglist(props) {
@@ -3775,6 +4115,7 @@ function Taglist(props) {
   const {
     formId
   } = useContext(FormContext$1);
+  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   const [filter, setFilter] = useState('');
   const [filteredOptions, setFilteredOptions] = useState([]);
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
@@ -3868,6 +4209,12 @@ function Taglist(props) {
       errors,
       disabled
     }),
+    onKeyDown: event => {
+      if (event.key === 'Enter') {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
     children: [jsx(Label, {
       label: label,
       required: required,
@@ -3904,15 +4251,16 @@ function Taglist(props) {
         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
       })]
     }), jsx("div", {
       class: "fjs-taglist-anchor",
@@ -3926,34 +4274,41 @@ function Taglist(props) {
     }), jsx(Description, {
       description: description
     }), jsx(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(props) {
+  const form = useService('form');
+  const {
+    textLinkTarget
+  } = form._getState().properties;
   const {
     field,
     disableLinks
@@ -3975,9 +4330,20 @@ function Text(props) {
     const html = markdownRenderer.render(markdown);
     return sanitizeHTML(html);
   }, [markdownRenderer, markdown]);
-  const componentOverrides = useMemo(() => disableLinks ? {
-    'a': DisabledLink
-  } : {}, [disableLinks]);
+  const OverridenTargetLink = useMemo(() => BuildOverridenTargetLink(textLinkTarget), [textLinkTarget]);
+  const componentOverrides = useMemo(() => {
+    if (disableLinks) {
+      return {
+        'a': DisabledLink
+      };
+    }
+    if (textLinkTarget) {
+      return {
+        'a': OverridenTargetLink
+      };
+    }
+    return {};
+  }, [disableLinks, OverridenTargetLink, textLinkTarget]);
   return jsx("div", {
     class: formFieldClasses(type$2),
     children: jsx(Markup, {
@@ -3987,21 +4353,35 @@ function Text(props) {
     })
   });
 }
-Text.create = (options = {}) => ({
-  text: '# Text',
-  ...options
-});
-Text.type = type$2;
-Text.keyed = false;
-Text.group = 'presentation';
-Text.label = 'Text view';
+Text.config = {
+  type: type$2,
+  keyed: false,
+  label: 'Text view',
+  group: 'presentation',
+  create: (options = {}) => ({
+    text: '# Text',
+    ...options
+  })
+};
+function BuildOverridenTargetLink(target) {
+  return function ({
+    children,
+    ...rest
+  }) {
+    return jsx("a", {
+      ...rest,
+      target: target,
+      children: children
+    });
+  };
+}
 function DisabledLink({
-  href,
-  children
+  children,
+  ...rest
 }) {
   return jsx("a", {
+    ...rest,
     class: "fjs-disabled-link",
-    href: href,
     tabIndex: -1,
     children: children
   });
@@ -4040,6 +4420,7 @@ function Textfield(props) {
   const {
     formId
   } = useContext(FormContext$1);
+  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
     class: formFieldClasses(type$1, {
       errors,
@@ -4059,26 +4440,40 @@ function Textfield(props) {
         id: prefixId(id, formId),
         onInput: onChange,
         type: "text",
-        value: value
+        value: value,
+        "aria-describedby": errorMessageId
       })
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
-      errors: errors
+      errors: errors,
+      id: errorMessageId
     })]
   });
 }
-Textfield.create = (options = {}) => ({
-  ...options
-});
-Textfield.type = type$1;
-Textfield.label = 'Text field';
-Textfield.keyed = true;
-Textfield.emptyValue = '';
-Textfield.sanitizeValue = ({
-  value
-}) => isArray(value) || isObject(value) ? '' : String(value);
-Textfield.group = 'basic-input';
+Textfield.config = {
+  type: type$1,
+  keyed: true,
+  label: 'Text field',
+  group: 'basic-input',
+  emptyValue: '',
+  sanitizeValue: ({
+    value
+  }) => {
+    if (isArray(value) || isObject(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) {
@@ -4125,6 +4520,7 @@ function Textarea(props) {
   const {
     formId
   } = useContext(FormContext$1);
+  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
     class: formFieldClasses(type, {
       errors,
@@ -4140,25 +4536,29 @@ function Textarea(props) {
       id: prefixId(id, formId),
       onInput: onInput,
       value: value,
-      ref: textareaRef
+      ref: textareaRef,
+      "aria-describedby": errorMessageId
     }), jsx(Description, {
       description: description
     }), jsx(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(value) || isObject(value) ? '' : String(value);
-Textarea.group = 'basic-input';
+Textarea.config = {
+  type,
+  keyed: true,
+  label: 'Text area',
+  group: 'basic-input',
+  emptyValue: '',
+  sanitizeValue: ({
+    value
+  }) => isArray(value) || isObject(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++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 var ButtonIcon = (({
@@ -4167,10 +4567,11 @@ var ButtonIcon = (({
 }) => /*#__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) { 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$c.apply(this, arguments); }
@@ -4180,7 +4581,8 @@ var CheckboxIcon = (({
 }) => /*#__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"
 })));
@@ -4191,18 +4593,35 @@ var ChecklistIcon = (({
   ...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++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 var DatetimeIcon = (({
@@ -4212,20 +4631,15 @@ var DatetimeIcon = (({
   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) { 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$9.apply(this, arguments); }
@@ -4233,18 +4647,15 @@ var TaglistIcon = (({
   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) { 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$8.apply(this, arguments); }
@@ -4256,22 +4667,22 @@ var FormIcon = (({
   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"
 })));
 
@@ -4295,7 +4706,8 @@ var NumberIcon = (({
 }) => /*#__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"
@@ -4308,9 +4720,10 @@ var RadioIcon = (({
 }) => /*#__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) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
@@ -4320,7 +4733,8 @@ var SelectIcon = (({
 }) => /*#__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"
@@ -4333,9 +4747,10 @@ var TextIcon = (({
 }) => /*#__PURE__*/React.createElement("svg", _extends$3({
   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() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
@@ -4345,7 +4760,8 @@ var TextfieldIcon = (({
 }) => /*#__PURE__*/React.createElement("svg", _extends$2({
   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"
@@ -4358,10 +4774,11 @@ var TextareaIcon = (({
 }) => /*#__PURE__*/React.createElement("svg", _extends$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() { _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); }
@@ -4369,20 +4786,18 @@ var ImageIcon = (({
   styles = {},
   ...props
 }) => /*#__PURE__*/React.createElement("svg", _extends({
+  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 => {
@@ -4410,7 +4825,7 @@ class FormFields {
   constructor() {
     this._formFields = {};
     formFields.forEach(formField => {
-      this.register(formField.type, formField);
+      this.register(formField.config.type, formField);
     });
   }
   register(type, formField) {