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

package/dist/index.es.js

@@ -474,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.
  *
@@ -558,6 +582,9 @@ var slice = Array.prototype.slice;
  * ```
  */
 function EventBus() {
+  /**
+   * @type { Record<string, EventBusListener> }
+   */
   this._listeners = {};
 
   // cleanup on destroy on lowest priority to allow
@@ -577,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];
@@ -612,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.
+ *
+ * @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;
@@ -632,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;
   }
 
@@ -640,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);
 };
 
 /**
@@ -648,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];
@@ -660,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();
@@ -673,10 +704,11 @@ EventBus.prototype.createEvent = function (data) {
 };
 
 /**
- * Fires a named event.
+ * Fires an event.
  *
  * @example
  *
+ * ```javascript
  * // fire event by name
  * events.fire('foo');
  *
@@ -694,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;
@@ -752,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
@@ -760,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) {
@@ -772,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) {
@@ -800,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).
  *
@@ -814,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),
@@ -845,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;
 };
@@ -895,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);
@@ -1492,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
@@ -1566,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 => {
@@ -1637,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", {
@@ -1701,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,
@@ -1718,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) {
@@ -2103,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,
@@ -2125,37 +2205,41 @@ 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.
@@ -2255,9 +2339,6 @@ function FormField(props) {
     field,
     onChange
   } = props;
-  const {
-    _path
-  } = field;
   const formFields = useService('formFields'),
     form = useService('form');
   const {
@@ -2274,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) {
@@ -2342,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 = (({
@@ -2525,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']
         })
       })
     })]
@@ -2791,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,
@@ -2927,6 +3012,7 @@ function Datetime(props) {
       time
     });
   }, []);
+  const errorMessageId = allErrors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   const datePickerProps = {
     id,
     label: dateLabel,
@@ -2936,7 +3022,8 @@ function Datetime(props) {
     disabled,
     disallowPassedDates,
     date: dateTime.date,
-    setDate
+    setDate,
+    'aria-describedby': errorMessageId
   };
   const timePickerProps = {
     id,
@@ -2948,7 +3035,8 @@ function Datetime(props) {
     use24h,
     timeInterval,
     time: dateTime.time,
-    setTime
+    setTime,
+    'aria-describedby': errorMessageId
   };
   return jsxs("div", {
     class: formFieldClasses(type$8, {
@@ -2967,25 +3055,28 @@ 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.
@@ -3029,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", {
@@ -3052,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, {})
     })
@@ -3080,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,
@@ -3099,6 +3194,7 @@ function FormComponent(props) {
     class: "fjs-form",
     onSubmit: handleSubmit,
     onReset: handleReset,
+    "aria-label": ariaLabel,
     noValidate: true,
     children: [jsx(FormField, {
       field: schema,
@@ -3109,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
@@ -3298,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 = (({
@@ -3371,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]);
@@ -3468,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,
@@ -3501,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
@@ -3528,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) {
@@ -3584,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,
@@ -3606,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 = (({
@@ -3776,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 => {
@@ -3862,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 => {
@@ -3919,14 +4034,16 @@ 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,
@@ -3939,7 +4056,7 @@ function Select(props) {
       }
     },
     children: [jsx(Label, {
-      id: prefixId(id, formId),
+      id: prefixId(`${id}-search`, formId),
       label: label,
       required: required
     }), searchable ? jsx(SearchableSelect, {
@@ -3949,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) {
@@ -3995,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);
@@ -4130,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",
@@ -4152,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
@@ -4201,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, {
@@ -4213,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
   });
@@ -4266,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,
@@ -4285,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) {
@@ -4351,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,
@@ -4366,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 = (({
@@ -4393,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); }
@@ -4406,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"
 })));
@@ -4417,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 = (({
@@ -4438,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); }
@@ -4459,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); }
@@ -4482,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"
 })));
 
@@ -4521,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"
@@ -4534,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); }
@@ -4546,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"
@@ -4559,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); }
@@ -4571,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"
@@ -4584,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); }
@@ -4595,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 => {
@@ -4636,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) {