@bpmn-io/form-js-viewer 0.14.1 → 1.0.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.
  *
- * @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;
@@ -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);
@@ -1273,7 +1340,7 @@ function createFormContainer(prefix = 'fjs') {
   return container;
 }
 
-const EXPRESSION_PROPERTIES = ['alt', 'source', 'text'];
+const EXPRESSION_PROPERTIES = ['alt', 'source', 'readonly', 'text'];
 const TEMPLATE_PROPERTIES = ['text'];
 function findErrors(errors, path) {
   return errors[pathStringify(path)];
@@ -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
@@ -1519,14 +1588,16 @@ var importModule = {
 
 function formFieldClasses(type, {
   errors = [],
-  disabled = false
+  disabled = false,
+  readonly = false
 } = {}) {
   if (!type) {
     throw new Error('type required');
   }
   return classNames('fjs-form-field', `fjs-form-field-${type}`, {
     'fjs-has-errors': errors.length > 0,
-    'fjs-disabled': disabled
+    'fjs-disabled': disabled,
+    'fjs-readonly': readonly
   });
 }
 function gridColumnClasses(formField) {
@@ -1566,14 +1637,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 +1710,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", {
@@ -1679,6 +1755,7 @@ function Checkbox(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value = false
   } = props;
   const {
@@ -1701,10 +1778,12 @@ 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,
-      disabled
+      disabled,
+      readonly
     }), {
       'fjs-checked': value
     }),
@@ -1716,28 +1795,33 @@ function Checkbox(props) {
         checked: value,
         class: "fjs-input",
         disabled: disabled,
+        readOnly: readonly,
         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) {
@@ -2073,6 +2157,7 @@ function Checklist(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value = []
   } = props;
   const {
@@ -2103,10 +2188,12 @@ 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,
-      disabled
+      disabled,
+      readonly
     })),
     children: [jsx(Label, {
       label: label,
@@ -2123,39 +2210,44 @@ function Checklist(props) {
           checked: value.includes(v.value),
           class: "fjs-input",
           disabled: disabled,
+          readOnly: readonly,
           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.
@@ -2227,6 +2319,33 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
   });
 }
 
+/**
+ * Retrieve readonly value of a form field, given it can be an
+ * expression optionally or configured globally.
+ *
+ * @typedef { import('../../types').FormProperties } FormProperties
+ *
+ * @param {any} formField
+ * @param {FormProperties} properties
+ *
+ * @returns {boolean}
+ */
+function useReadonly(formField, properties = {}) {
+  const expressionLanguage = useService('expressionLanguage');
+  const conditionChecker = useService('conditionChecker', false);
+  const filteredData = useFilteredFormData();
+  const {
+    readonly
+  } = formField;
+  if (properties.readOnly) {
+    return true;
+  }
+  if (expressionLanguage && expressionLanguage.isExpression(readonly)) {
+    return conditionChecker ? conditionChecker.check(readonly, filteredData) : false;
+  }
+  return readonly || false;
+}
+
 /**
  * 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
@@ -2255,9 +2374,6 @@ function FormField(props) {
     field,
     onChange
   } = props;
-  const {
-    _path
-  } = field;
   const formFields = useService('formFields'),
     form = useService('form');
   const {
@@ -2274,9 +2390,12 @@ function FormField(props) {
   if (!FormFieldComponent) {
     throw new Error(`cannot render field <${field.type}>`);
   }
-  const value = get(data, _path);
-  const fieldErrors = findErrors(errors, _path);
-  const disabled = properties.readOnly || field.disabled || false;
+  const value = get(data, field._path);
+  const fieldErrors = findErrors(errors, field._path);
+  const readonly = useReadonly(field, properties);
+
+  // add precedence: global readonly > form field disabled
+  const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
   const hidden = useCondition(field.conditional && field.conditional.hide || null);
   if (hidden) {
     return jsx(Empty, {});
@@ -2291,7 +2410,8 @@ function FormField(props) {
         ...props,
         disabled: disabled,
         errors: fieldErrors,
-        onChange: disabled ? noop$1 : onChange,
+        onChange: disabled || readonly ? noop$1 : onChange,
+        readonly: readonly,
         value: value
       })
     })
@@ -2342,14 +2462,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 = (({
@@ -2376,12 +2498,14 @@ function InputAdorner(props) {
     inputRef,
     children,
     disabled,
+    readonly,
     hasErrors
   } = props;
   const onAdornmentClick = () => inputRef && inputRef.current && inputRef.current.focus();
   return jsxs("div", {
     class: classNames('fjs-input-group', {
-      'fjs-disabled': disabled
+      'fjs-disabled': disabled,
+      'fjs-readonly': readonly
     }, {
       'hasErrors': hasErrors
     }),
@@ -2414,6 +2538,7 @@ function Datepicker(props) {
     disabled,
     disallowPassedDates,
     date,
+    readonly,
     setDate
   } = props;
   const dateInputRef = useRef();
@@ -2493,9 +2618,9 @@ function Datepicker(props) {
     }
   }, [flatpickrInstance, isInputDirty]);
   const onInputFocus = useCallback(e => {
-    if (!flatpickrInstance || focusScopeRef.current.contains(e.relatedTarget)) return;
+    if (!flatpickrInstance || focusScopeRef.current.contains(e.relatedTarget) || readonly) return;
     flatpickrInstance.open();
-  }, [flatpickrInstance]);
+  }, [flatpickrInstance, readonly]);
 
   // simulate an enter press on blur to make sure the date value is submitted in all scenarios
   const onInputBlur = useCallback(e => {
@@ -2514,6 +2639,7 @@ function Datepicker(props) {
     }), jsx(InputAdorner, {
       pre: jsx(CalendarIcon, {}),
       disabled: disabled,
+      readonly: readonly,
       rootRef: focusScopeRef,
       inputRef: dateInputRef,
       children: jsx("div", {
@@ -2525,16 +2651,18 @@ function Datepicker(props) {
           ref: dateInputRef,
           type: "text",
           id: fullId,
-          class: 'fjs-input',
+          class: "fjs-input",
           disabled: disabled,
+          readOnly: readonly,
           placeholder: "mm/dd/yyyy",
           autoComplete: "off",
           onFocus: onInputFocus,
           onKeyDown: onInputKeyDown,
-          onMouseDown: e => !flatpickrInstance.isOpen && flatpickrInstance.open(),
+          onMouseDown: () => !flatpickrInstance.isOpen && !readonly && flatpickrInstance.open(),
           onBlur: onInputBlur,
-          onInput: e => setIsInputDirty(true),
-          "data-input": true
+          onInput: () => setIsInputDirty(true),
+          "data-input": true,
+          "aria-describedby": props['aria-describedby']
         })
       })
     })]
@@ -2664,6 +2792,7 @@ function Timepicker(props) {
     formId,
     required,
     disabled,
+    readonly,
     use24h = false,
     timeInterval,
     time,
@@ -2769,6 +2898,7 @@ function Timepicker(props) {
       pre: jsx(ClockIcon, {}),
       inputRef: timeInputRef,
       disabled: disabled,
+      readonly: readonly,
       children: jsxs("div", {
         class: "fjs-timepicker fjs-timepicker-anchor",
         children: [jsx("input", {
@@ -2778,10 +2908,11 @@ function Timepicker(props) {
           class: "fjs-input",
           value: rawValue,
           disabled: disabled,
+          readOnly: readonly,
           placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
           autoComplete: "off",
-          onFocus: () => useDropdown && setDropdownIsOpen(true),
-          onClick: () => useDropdown && setDropdownIsOpen(true)
+          onFocus: () => !readonly && useDropdown && setDropdownIsOpen(true),
+          onClick: () => !readonly && useDropdown && setDropdownIsOpen(true)
 
           // @ts-ignore
           ,
@@ -2791,7 +2922,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,
@@ -2811,6 +2943,7 @@ function Datetime(props) {
     errors = [],
     field,
     onChange,
+    readonly,
     value = ''
   } = props;
   const {
@@ -2927,6 +3060,7 @@ function Datetime(props) {
       time
     });
   }, []);
+  const errorMessageId = allErrors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   const datePickerProps = {
     id,
     label: dateLabel,
@@ -2936,7 +3070,9 @@ function Datetime(props) {
     disabled,
     disallowPassedDates,
     date: dateTime.date,
-    setDate
+    readonly,
+    setDate,
+    'aria-describedby': errorMessageId
   };
   const timePickerProps = {
     id,
@@ -2945,15 +3081,18 @@ function Datetime(props) {
     formId,
     required,
     disabled,
+    readonly,
     use24h,
     timeInterval,
     time: dateTime.time,
-    setTime
+    setTime,
+    'aria-describedby': errorMessageId
   };
   return jsxs("div", {
     class: formFieldClasses(type$8, {
       errors: allErrors,
-      disabled
+      disabled,
+      readonly
     }),
     children: [jsxs("div", {
       class: classNames('fjs-vertical-group'),
@@ -2967,25 +3106,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 +3171,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 +3194,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 +3222,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 +3245,7 @@ function FormComponent(props) {
     class: "fjs-form",
     onSubmit: handleSubmit,
     onReset: handleReset,
+    "aria-label": ariaLabel,
     noValidate: true,
     children: [jsx(FormField, {
       field: schema,
@@ -3109,7 +3256,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 +3445,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 = (({
@@ -3347,6 +3496,7 @@ function Numberfield(props) {
     errors = [],
     field,
     value,
+    readonly,
     onChange
   } = props;
   const {
@@ -3371,10 +3521,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]);
@@ -3419,6 +3569,9 @@ function Numberfield(props) {
     });
   }, [field, onChange, serializeToString]);
   const increment = () => {
+    if (readonly) {
+      return;
+    }
     const base = isValidNumber(value) ? Big(value) : Big(0);
     const stepFlooredValue = base.minus(base.mod(arrowIncrementValue));
 
@@ -3426,6 +3579,9 @@ function Numberfield(props) {
     setValue(stepFlooredValue.plus(arrowIncrementValue).toFixed());
   };
   const decrement = () => {
+    if (readonly) {
+      return;
+    }
     const base = isValidNumber(value) ? Big(value) : Big(0);
     const offset = base.mod(arrowIncrementValue);
     if (offset.cmp(0) === 0) {
@@ -3468,10 +3624,12 @@ 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,
-      disabled
+      disabled,
+      readonly
     }),
     children: [jsx(Label, {
       id: prefixId(id, formId),
@@ -3479,11 +3637,13 @@ function Numberfield(props) {
       required: required
     }), jsx(InputAdorner, {
       disabled: disabled,
+      readonly: readonly,
       pre: prefixAdorner,
       post: suffixAdorner,
       children: jsxs("div", {
         class: classNames('fjs-vertical-group', {
-          'fjs-disabled': disabled
+          'fjs-disabled': disabled,
+          'fjs-readonly': readonly
         }, {
           'hasErrors': errors.length
         }),
@@ -3491,6 +3651,7 @@ function Numberfield(props) {
           ref: inputRef,
           class: "fjs-input",
           disabled: disabled,
+          readOnly: readonly,
           id: prefixId(id, formId),
           onKeyDown: onKeyDown,
           onKeyPress: onKeyPress
@@ -3501,10 +3662,12 @@ 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
+            'fjs-disabled': disabled,
+            'fjs-readonly': readonly
           }),
           children: [jsx("button", {
             class: "fjs-number-arrow-up",
@@ -3528,31 +3691,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) {
@@ -3560,6 +3726,7 @@ function Radio(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value
   } = props;
   const {
@@ -3584,10 +3751,12 @@ 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,
-      disabled
+      disabled,
+      readonly
     }),
     children: [jsx(Label, {
       label: label,
@@ -3604,39 +3773,44 @@ function Radio(props) {
           checked: option.value === value,
           class: "fjs-input",
           disabled: disabled,
+          readOnly: readonly,
           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 = (({
@@ -3661,6 +3835,7 @@ function SearchableSelect(props) {
     disabled,
     errors,
     field,
+    readonly,
     value
   } = props;
   const {
@@ -3733,11 +3908,11 @@ function SearchableSelect(props) {
   }, [isDropdownExpanded, isEscapeClosed]);
   const displayState = useMemo(() => {
     const ds = {};
-    ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+    ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
     ds.displayCross = ds.componentReady && value !== null && value !== undefined;
-    ds.displayDropdown = !disabled && isDropdownExpanded && !isEscapeClosed;
+    ds.displayDropdown = !disabled && !readonly && isDropdownExpanded && !isEscapeClosed;
     return ds;
-  }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, value]);
+  }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, readonly, value]);
   const onAngelMouseDown = useCallback(e => {
     setIsEscapeClose(false);
     setIsDropdownExpanded(!isDropdownExpanded);
@@ -3749,12 +3924,14 @@ function SearchableSelect(props) {
     children: [jsxs("div", {
       id: prefixId(`${id}`, formId),
       class: classNames('fjs-input-group', {
-        'disabled': disabled
+        'disabled': disabled,
+        'readonly': readonly
       }, {
         'hasErrors': errors.length
       }),
       children: [jsx("input", {
         disabled: disabled,
+        readOnly: readonly,
         class: "fjs-input",
         ref: searchbarRef,
         id: prefixId(`${id}-search`, formId),
@@ -3776,7 +3953,8 @@ function SearchableSelect(props) {
         onBlur: () => {
           setIsDropdownExpanded(false);
           setFilter(valueLabel);
-        }
+        },
+        "aria-describedby": props['aria-describedby']
       }), displayState.displayCross && jsxs("span", {
         class: "fjs-select-cross",
         onMouseDown: e => {
@@ -3810,6 +3988,7 @@ function SimpleSelect(props) {
     disabled,
     errors,
     field,
+    readonly,
     value
   } = props;
   const {
@@ -3835,9 +4014,9 @@ function SimpleSelect(props) {
   }, [field, props]);
   const displayState = useMemo(() => {
     const ds = {};
-    ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+    ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
     ds.displayCross = ds.componentReady && value !== null && value !== undefined;
-    ds.displayDropdown = !disabled && isDropdownExpanded;
+    ds.displayDropdown = !disabled && !readonly && isDropdownExpanded;
     return ds;
   }, [disabled, isDropdownExpanded, loadState, value]);
   const onMouseDown = useCallback(e => {
@@ -3856,20 +4035,27 @@ function SimpleSelect(props) {
       ref: selectRef,
       id: prefixId(`${id}`, formId),
       class: classNames('fjs-input-group', {
-        'disabled': disabled
+        disabled,
+        readonly
       }, {
         'hasErrors': errors.length
       }),
       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: () => !readonly && setIsDropdownExpanded(true),
+        onBlur: () => !readonly && setIsDropdownExpanded(false),
+        "aria-describedby": props['aria-describedby']
       }), displayState.displayCross && jsx("span", {
         class: "fjs-select-cross",
         onMouseDown: e => {
@@ -3904,6 +4090,7 @@ function Select(props) {
     errors = [],
     field,
     onChange,
+    readonly,
     value
   } = props;
   const {
@@ -3919,18 +4106,22 @@ 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,
+    readonly,
+    'aria-describedby': errorMessageId
+  }), [disabled, errors, field, id, value, onChange, readonly, errorMessageId]);
   return jsxs("div", {
     class: formFieldClasses(type$4, {
       errors,
-      disabled
+      disabled,
+      readonly
     }),
     onKeyDown: event => {
       if (event.key === 'Enter') {
@@ -3939,7 +4130,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 +4140,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) {
@@ -3981,6 +4175,7 @@ function Taglist(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value: values = []
   } = props;
   const {
@@ -3995,6 +4190,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);
@@ -4070,6 +4266,10 @@ function Taglist(props) {
         break;
     }
   };
+  const onBlur = () => {
+    setIsDropdownExpanded(false);
+    setFilter('');
+  };
   const onTagRemoveClick = (event, value) => {
     const {
       target
@@ -4086,7 +4286,8 @@ function Taglist(props) {
   return jsxs("div", {
     class: formFieldClasses(type$3, {
       errors,
-      disabled
+      disabled,
+      readonly
     }),
     onKeyDown: event => {
       if (event.key === 'Enter') {
@@ -4100,20 +4301,22 @@ function Taglist(props) {
       id: prefixId(`${id}-search`, formId)
     }), jsxs("div", {
       class: classNames('fjs-taglist', {
-        'fjs-disabled': disabled
+        'fjs-disabled': disabled,
+        'fjs-readonly': readonly
       }),
       children: [loadState === LOAD_STATES.LOADED && jsx("div", {
         class: "fjs-taglist-tags",
         children: values.map(v => {
           return jsxs("div", {
             class: classNames('fjs-taglist-tag', {
-              'fjs-disabled': disabled
+              'fjs-disabled': disabled,
+              'fjs-readonly': readonly
             }),
             onMouseDown: e => e.preventDefault(),
             children: [jsx("span", {
               class: "fjs-taglist-tag-label",
               children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
-            }), !disabled && jsx("button", {
+            }), !disabled && !readonly && jsx("button", {
               type: "button",
               title: "Remove tag",
               class: "fjs-taglist-tag-remove",
@@ -4124,21 +4327,22 @@ function Taglist(props) {
         })
       }), jsx("input", {
         disabled: disabled,
+        readOnly: readonly,
         class: "fjs-taglist-input",
         ref: searchbarRef,
         id: prefixId(`${id}-search`, formId),
         onChange: onFilterChange,
         type: "text",
         value: filter,
-        placeholder: disabled ? '' : 'Search',
+        placeholder: disabled || readonly ? undefined : 'Search',
         autoComplete: "off",
-        onKeyDown: e => onInputKeyDown(e),
+        onKeyDown: onInputKeyDown,
         onMouseDown: () => setIsEscapeClose(false),
-        onFocus: () => setIsDropdownExpanded(true),
+        onFocus: () => !readonly && setIsDropdownExpanded(true),
         onBlur: () => {
-          setIsDropdownExpanded(false);
-          setFilter('');
-        }
+          !readonly && onBlur();
+        },
+        "aria-describedby": errorMessageId
       })]
     }), jsx("div", {
       class: "fjs-taglist-anchor",
@@ -4152,34 +4356,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 +4412,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 +4435,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
   });
@@ -4239,6 +4475,7 @@ function Textfield(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value = ''
   } = props;
   const {
@@ -4266,10 +4503,12 @@ 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,
-      disabled
+      disabled,
+      readonly
     }),
     children: [jsx(Label, {
       id: prefixId(id, formId),
@@ -4277,34 +4516,50 @@ function Textfield(props) {
       required: required
     }), jsx(InputAdorner, {
       disabled: disabled,
+      readonly: readonly,
       pre: prefixAdorner,
       post: suffixAdorner,
       children: jsx("input", {
         class: "fjs-input",
         disabled: disabled,
+        readOnly: readonly,
         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) {
@@ -4312,6 +4567,7 @@ function Textarea(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value = ''
   } = props;
   const {
@@ -4351,10 +4607,12 @@ 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,
-      disabled
+      disabled,
+      readonly
     }),
     children: [jsx(Label, {
       id: prefixId(id, formId),
@@ -4363,28 +4621,33 @@ function Textarea(props) {
     }), jsx("textarea", {
       class: "fjs-textarea",
       disabled: disabled,
+      readonly: readonly,
       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 +4656,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 +4670,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 +4682,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 +4720,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 +4736,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 +4756,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 +4795,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 +4809,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 +4822,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 +4836,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 +4849,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 +4863,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 +4875,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 +4914,7 @@ class FormFields {
   constructor() {
     this._formFields = {};
     formFields.forEach(formField => {
-      this.register(formField.type, formField);
+      this.register(formField.config.type, formField);
     });
   }
   register(type, formField) {
@@ -4857,7 +5135,7 @@ class Form {
     const {
       properties
     } = this._getState();
-    if (properties.readOnly) {
+    if (properties.readOnly || properties.disabled) {
       throw new Error('form is read-only');
     }
     const data = this._getSubmitData();
@@ -5086,7 +5364,7 @@ class Form {
   }
 }
 
-const schemaVersion = 8;
+const schemaVersion = 9;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions