@bpmn-io/form-js-viewer 1.3.3 → 1.4.0

package/dist/index.cjs

@@ -73,26 +73,26 @@ const getFlavouredFeelVariableNames = (feelString, feelFlavour = 'expression', o
   return [...new Set(variables)];
 };
 
-/**
- * Get the variable name at the specified index in a given path expression.
- *
- * @param {Object} root - The root node of the path expression tree.
- * @param {number} index - The index of the variable name to retrieve.
- * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
+/**
+ * Get the variable name at the specified index in a given path expression.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @param {number} index - The index of the variable name to retrieve.
+ * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
  */
 const _getVariableNameAtPathIndex = (root, index) => {
   const nodes = _linearizePathExpression(root);
   return nodes[index].variableName || null;
 };
 
-/**
- * Extracts the variables which are required of the external context for a given path expression.
- * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
- *
- * @param {Object} node - The root node of the path expression tree.
- * @param {number} initialDepth - The depth at which the root node is located in the outer context.
- * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
- * @returns {Set} - A set containing the extracted variable names.
+/**
+ * Extracts the variables which are required of the external context for a given path expression.
+ * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
+ *
+ * @param {Object} node - The root node of the path expression tree.
+ * @param {number} initialDepth - The depth at which the root node is located in the outer context.
+ * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
+ * @returns {Set} - A set containing the extracted variable names.
  */
 const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) => {
   // depth info represents the previous (initialised as null) and current depth of the current accessor in the path expression
@@ -138,11 +138,11 @@ const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) =
   return new Set(extractedVariables);
 };
 
-/**
- * Deconstructs a path expression tree into an array of components.
- *
- * @param {Object} root - The root node of the path expression tree.
- * @returns {Array<object>} An array of components in the path expression, in the correct order.
+/**
+ * Deconstructs a path expression tree into an array of components.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @returns {Array<object>} An array of components in the path expression, in the correct order.
  */
 const _linearizePathExpression = root => {
   let node = root;
@@ -161,13 +161,13 @@ const _linearizePathExpression = root => {
   return parts.reverse();
 };
 
-/**
- * Builds a simplified feel structure tree from the given parse tree and feel string.
- * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
- *
- * @param {Object} parseTree - The parse tree generated by a parser.
- * @param {string} feelString - The feel string used for parsing.
- * @returns {Object} The simplified feel structure tree.
+/**
+ * Builds a simplified feel structure tree from the given parse tree and feel string.
+ * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
+ *
+ * @param {Object} parseTree - The parse tree generated by a parser.
+ * @param {string} feelString - The feel string used for parsing.
+ * @returns {Object} The simplified feel structure tree.
  */
 const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
   const stack = [{
@@ -193,9 +193,9 @@ const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
   return _extractFilterExpressions(stack[0].children[0]);
 };
 
-/**
- * Restructure the tree in such a way to bring filters (which create new contexts) to the root of the tree.
- * This is done to simplify the extraction of variables and match the context hierarchy.
+/**
+ * Restructure the tree in such a way to bring filters (which create new contexts) to the root of the tree.
+ * This is done to simplify the extraction of variables and match the context hierarchy.
  */
 const _extractFilterExpressions = tree => {
   const flattenedExpressionTree = {
@@ -236,25 +236,25 @@ class FeelExpressionLanguage {
     this._eventBus = eventBus;
   }
 
-  /**
-   * Determines if the given value is a FEEL expression.
-   *
-   * @param {any} value
-   * @returns {boolean}
-   *
+  /**
+   * Determines if the given value is a FEEL expression.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
    */
   isExpression(value) {
     return minDash.isString(value) && value.startsWith('=');
   }
 
-  /**
-   * Retrieve variable names from a given FEEL expression.
-   *
-   * @param {string} expression
-   * @param {object} [options]
-   * @param {string} [options.type]
-   *
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from a given FEEL expression.
+   *
+   * @param {string} expression
+   * @param {object} [options]
+   * @param {string} [options.type]
+   *
+   * @returns {string[]}
    */
   getVariableNames(expression, options = {}) {
     const {
@@ -269,13 +269,13 @@ class FeelExpressionLanguage {
     return getFlavouredFeelVariableNames(expression, type);
   }
 
-  /**
-   * Evaluate an expression.
-   *
-   * @param {string} expression
-   * @param {import('../../types').Data} [data]
-   *
-   * @returns {any}
+  /**
+   * Evaluate an expression.
+   *
+   * @param {string} expression
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {any}
    */
   evaluate(expression, data = {}) {
     if (!expression) {
@@ -300,23 +300,23 @@ FeelExpressionLanguage.$inject = ['eventBus'];
 class FeelersTemplating {
   constructor() {}
 
-  /**
-   * Determines if the given value is a feelers template.
-   *
-   * @param {any} value
-   * @returns {boolean}
-   *
+  /**
+   * Determines if the given value is a feelers template.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
    */
   isTemplate(value) {
     return minDash.isString(value) && (value.startsWith('=') || /{{.*?}}/.test(value));
   }
 
-  /**
-   * Retrieve variable names from a given feelers template.
-   *
-   * @param {string} template
-   *
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from a given feelers template.
+   *
+   * @param {string} template
+   *
+   * @returns {string[]}
    */
   getVariableNames(template) {
     if (!this.isTemplate(template)) {
@@ -342,17 +342,17 @@ class FeelersTemplating {
     }, []);
   }
 
-  /**
-   * Evaluate a template.
-   *
-   * @param {string} template
-   * @param {Object<string, any>} context
-   * @param {Object} options
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
-   * @returns
+  /**
+   * Evaluate a template.
+   *
+   * @param {string} template
+   * @param {Object<string, any>} context
+   * @param {Object} options
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
+   * @returns
    */
   evaluate(template, context = {}, options = {}) {
     const {
@@ -367,22 +367,22 @@ class FeelersTemplating {
     });
   }
 
-  /**
-  * @typedef {Object} ExpressionWithDepth
-  * @property {number} depth - The depth of the expression in the syntax tree.
-  * @property {string} expression - The extracted expression
+  /**
+  * @typedef {Object} ExpressionWithDepth
+  * @property {number} depth - The depth of the expression in the syntax tree.
+  * @property {string} expression - The extracted expression
   */
 
-  /**
-  * Extracts all feel expressions in the template along with their depth in the syntax tree.
-  * The depth is incremented for child expressions of loops to account for context drilling.
-   * @name extractExpressionsWithDepth
-  * @param {string} template - A feelers template string.
-  * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
-  *
-  * @example
-  * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
-  * const extractedExpressions = _extractExpressionsWithDepth(template);
+  /**
+  * Extracts all feel expressions in the template along with their depth in the syntax tree.
+  * The depth is incremented for child expressions of loops to account for context drilling.
+  * @name extractExpressionsWithDepth
+  * @param {string} template - A feelers template string.
+  * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
+  *
+  * @example
+  * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
+  * const extractedExpressions = _extractExpressionsWithDepth(template);
   */
   _extractExpressionsWithDepth(template) {
     // build simplified feelers syntax tree
@@ -445,27 +445,31 @@ function prefixId(id, formId) {
   return `fjs-form-${id}`;
 }
 
-const type$c = 'button';
+const type$d = 'button';
 function Button(props) {
   const {
     disabled,
+    onFocus,
+    onBlur,
     field
   } = props;
   const {
     action = 'submit'
   } = field;
   return jsxRuntime.jsx("div", {
-    class: formFieldClasses(type$c),
+    class: formFieldClasses(type$d),
     children: jsxRuntime.jsx("button", {
       class: "fjs-button",
       type: action,
       disabled: disabled,
+      onFocus: () => onFocus && onFocus(),
+      onBlur: () => onBlur && onBlur(),
       children: field.label
     })
   });
 }
 Button.config = {
-  type: type$c,
+  type: type$d,
   keyed: false,
   label: 'Button',
   group: 'action',
@@ -516,11 +520,11 @@ const FormRenderContext = preact.createContext({
 });
 var FormRenderContext$1 = FormRenderContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const FormContext = preact.createContext({
@@ -536,10 +540,10 @@ function useService(type, strict) {
   return getService(type, strict);
 }
 
-/**
- * Returns the conditionally filtered data of a form reactively.
- * Memoised to minimize re-renders
- *
+/**
+ * Returns the conditionally filtered data of a form reactively.
+ * Memoised to minimize re-renders
+ *
  */
 function useFilteredFormData() {
   const {
@@ -556,12 +560,12 @@ function useFilteredFormData() {
   }, [conditionChecker, data, initialData]);
 }
 
-/**
- * Evaluate if condition is met reactively based on the conditionChecker and form data.
- *
- * @param {string | undefined} condition
- *
- * @returns {boolean} true if condition is met or no condition or condition checker exists
+/**
+ * Evaluate if condition is met reactively based on the conditionChecker and form data.
+ *
+ * @param {string | undefined} condition
+ *
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
  */
 function useCondition(condition) {
   const conditionChecker = useService('conditionChecker', false);
@@ -571,13 +575,13 @@ function useCondition(condition) {
   }, [conditionChecker, condition, filteredData]);
 }
 
-/**
- * Evaluate a string reactively based on the expressionLanguage and form data.
- * If the string is not an expression, it is returned as is.
- * Memoised to minimize re-renders.
- *
- * @param {string} value
- *
+/**
+ * Evaluate a string reactively based on the expressionLanguage and form data.
+ * If the string is not an expression, it is returned as is.
+ * Memoised to minimize re-renders.
+ *
+ * @param {string} value
+ *
  */
 function useExpressionEvaluation(value) {
   const formData = useFilteredFormData();
@@ -606,16 +610,16 @@ 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}
+/**
+ * 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');
@@ -639,12 +643,12 @@ function usePrevious(value, defaultValue, dependencies) {
   return ref.current;
 }
 
-/**
- * A custom hook to manage state changes with deep comparison.
- *
- * @param {any} value - The current value to manage.
- * @param {any} defaultValue - The initial default value for the state.
- * @returns {any} - Returns the current state.
+/**
+ * A custom hook to manage state changes with deep comparison.
+ *
+ * @param {any} value - The current value to manage.
+ * @param {any} defaultValue - The initial default value for the state.
+ * @returns {any} - Returns the current state.
  */
 function useDeepCompareState(value, defaultValue) {
   const [state, setState] = hooks.useState(defaultValue);
@@ -664,16 +668,16 @@ function compare(a, b) {
   return JSON.stringify(a) === JSON.stringify(b);
 }
 
-/**
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
- * Memoised to minimize re-renders
- *
- * @param {string} value
- * @param {Object} options
- * @param {boolean} [options.debug = false]
- * @param {boolean} [options.strict = false]
- * @param {Function} [options.buildDebugString]
- *
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} options
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
  */
 function useTemplateEvaluation(value, options) {
   const filteredData = useFilteredFormData();
@@ -686,17 +690,17 @@ function useTemplateEvaluation(value, options) {
   }, [filteredData, templating, value, options]);
 }
 
-/**
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
- * If the string contains multiple lines, only the first line is returned.
- * Memoised to minimize re-renders
- *
- * @param {string} value
- * @param {Object} [options]
- * @param {boolean} [options.debug = false]
- * @param {boolean} [options.strict = false]
- * @param {Function} [options.buildDebugString]
- *
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * If the string contains multiple lines, only the first line is returned.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} [options]
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
  */
 function useSingleLineTemplateEvaluation(value, options = {}) {
   const evaluatedTemplate = useTemplateEvaluation(value, options);
@@ -763,12 +767,13 @@ function Label(props) {
   });
 }
 
-const type$b = 'checkbox';
+const type$c = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     readonly,
     value = false
@@ -795,7 +800,7 @@ function Checkbox(props) {
   } = hooks.useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: classNames(formFieldClasses(type$b, {
+    class: classNames(formFieldClasses(type$c, {
       errors,
       disabled,
       readonly
@@ -814,7 +819,8 @@ function Checkbox(props) {
         id: prefixId(id, formId),
         type: "checkbox",
         onChange: onChange,
-        onBlur: onBlur,
+        onBlur: () => onBlur && onBlur(),
+        onFocus: () => onFocus && onFocus(),
         "aria-describedby": errorMessageId
       })
     }), jsxRuntime.jsx(Description, {
@@ -826,7 +832,7 @@ function Checkbox(props) {
   });
 }
 Checkbox.config = {
-  type: type$b,
+  type: type$c,
   keyed: true,
   label: 'Checkbox',
   group: 'selection',
@@ -900,8 +906,8 @@ function createEmptyOptions(options = {}) {
   };
 }
 
-/**
- * @enum { String }
+/**
+ * @enum { String }
  */
 const LOAD_STATES = {
   LOADING: 'loading',
@@ -909,17 +915,17 @@ const LOAD_STATES = {
   ERROR: 'error'
 };
 
-/**
- * @typedef {Object} ValuesGetter
- * @property {Object[]} values - The values data
- * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+/**
+ * @typedef {Object} ValuesGetter
+ * @property {Object[]} values - The values data
+ * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
  */
 
-/**
- * A hook to load values for single and multiselect components.
- *
- * @param {Object} field - The form field to handle values for
- * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+/**
+ * A hook to load values for single and multiselect components.
+ *
+ * @param {Object} field - The form field to handle values for
+ * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
  */
 function useValuesAsync (field) {
   const {
@@ -1213,12 +1219,13 @@ function sanitizeMultiSelectValue(options) {
   }
 }
 
-const type$a = 'checklist';
+const type$b = 'checklist';
 function Checklist(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     readonly,
     value = []
@@ -1249,7 +1256,13 @@ function Checklist(props) {
     if (outerDivRef.current.contains(e.relatedTarget)) {
       return;
     }
-    onBlur();
+    onBlur && onBlur();
+  };
+  const onCheckboxFocus = e => {
+    if (outerDivRef.current.contains(e.relatedTarget)) {
+      return;
+    }
+    onFocus && onFocus();
   };
   const {
     state: loadState,
@@ -1260,7 +1273,7 @@ function Checklist(props) {
   } = hooks.useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: classNames(formFieldClasses(type$a, {
+    class: classNames(formFieldClasses(type$b, {
       errors,
       disabled,
       readonly
@@ -1286,6 +1299,7 @@ function Checklist(props) {
           type: "checkbox",
           onClick: () => toggleCheckbox(v.value),
           onBlur: onCheckboxBlur,
+          onFocus: onCheckboxFocus,
           "aria-describedby": errorMessageId
         })
       }, `${id}-${index}`);
@@ -1298,7 +1312,7 @@ function Checklist(props) {
   });
 }
 Checklist.config = {
-  type: type$a,
+  type: type$b,
   keyed: true,
   label: 'Checklist',
   group: 'selection',
@@ -1316,6 +1330,7 @@ function FormField(props) {
   const formFields = useService('formFields'),
     viewerCommands = useService('viewerCommands', false),
     pathRegistry = useService('pathRegistry'),
+    eventBus = useService('eventBus'),
     form = useService('form');
   const {
     initialData,
@@ -1343,7 +1358,15 @@ function FormField(props) {
     if (viewerCommands) {
       viewerCommands.updateFieldValidation(field, value);
     }
-  }, [viewerCommands, field, value]);
+    eventBus.fire('formField.blur', {
+      formField: field
+    });
+  }, [eventBus, viewerCommands, field, value]);
+  const onFocus = hooks.useCallback(() => {
+    eventBus.fire('formField.focus', {
+      formField: field
+    });
+  }, [eventBus, field]);
   hooks.useEffect(() => {
     if (viewerCommands && initialValue) {
       viewerCommands.updateFieldValidation(field, initialValue);
@@ -1365,6 +1388,7 @@ function FormField(props) {
         errors: errors[field.id],
         onChange: disabled || readonly ? noop$1 : onChange,
         onBlur: disabled || readonly ? noop$1 : onBlur,
+        onFocus: disabled || readonly ? noop$1 : onFocus,
         readonly: readonly,
         value: value
       })
@@ -1440,16 +1464,16 @@ FormComponent$1.config = {
   })
 };
 
-var _path$h;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+var _path$i;
+function _extends$l() { _extends$l = 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$l.apply(this, arguments); }
 var SvgCalendar = function SvgCalendar(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 14,
     height: 15,
     fill: "none",
     viewBox: "0 0 28 30"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M19 2H9V0H7v2H2a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-5V0h-2v2ZM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7Zm-5 4v17h24V11H2Z",
@@ -1458,12 +1482,12 @@ var SvgCalendar = function SvgCalendar(props) {
 };
 var CalendarIcon = SvgCalendar;
 
-/**
- * Returns date format for the provided locale.
- * If the locale is not provided, uses the browser's locale.
- *
- * @param {string} [locale] - The locale to get date format for.
- * @returns {string} The date format for the locale.
+/**
+ * Returns date format for the provided locale.
+ * If the locale is not provided, uses the browser's locale.
+ *
+ * @param {string} [locale] - The locale to get date format for.
+ * @returns {string} The date format for the locale.
  */
 function getLocaleDateFormat(locale = 'default') {
   const parts = new Intl.DateTimeFormat(locale).formatToParts(new Date(Date.UTC(2020, 5, 5)));
@@ -1482,12 +1506,12 @@ function getLocaleDateFormat(locale = 'default') {
   }).join('');
 }
 
-/**
- * Returns readable date format for the provided locale.
- * If the locale is not provided, uses the browser's locale.
- *
- * @param {string} [locale] - The locale to get readable date format for.
- * @returns {string} The readable date format for the locale.
+/**
+ * Returns readable date format for the provided locale.
+ * If the locale is not provided, uses the browser's locale.
+ *
+ * @param {string} [locale] - The locale to get readable date format for.
+ * @returns {string} The readable date format for the locale.
  */
 function getLocaleReadableDateFormat(locale) {
   let format = getLocaleDateFormat(locale).toLowerCase();
@@ -1504,12 +1528,12 @@ function getLocaleReadableDateFormat(locale) {
   return format;
 }
 
-/**
- * Returns flatpickr config for the provided locale.
- * If the locale is not provided, uses the browser's locale.
- *
- * @param {string} [locale] - The locale to get flatpickr config for.
- * @returns {object} The flatpickr config for the locale.
+/**
+ * Returns flatpickr config for the provided locale.
+ * If the locale is not provided, uses the browser's locale.
+ *
+ * @param {string} [locale] - The locale to get flatpickr config for.
+ * @returns {object} The flatpickr config for the locale.
  */
 function getLocaleDateFlatpickrConfig(locale) {
   return flatpickerizeDateFormat(getLocaleDateFormat(locale));
@@ -1570,6 +1594,7 @@ function Datepicker(props) {
     label,
     collapseLabelOnEmpty,
     onDateTimeBlur,
+    onDateTimeFocus,
     formId,
     required,
     disabled,
@@ -1657,13 +1682,17 @@ function Datepicker(props) {
   const onInputFocus = hooks.useCallback(e => {
     if (!flatpickrInstance || focusScopeRef.current.contains(e.relatedTarget) || readonly) return;
     flatpickrInstance.open();
-  }, [flatpickrInstance, readonly]);
+    onDateTimeFocus(e);
+  }, [flatpickrInstance, readonly, onDateTimeFocus]);
 
   // simulate an enter press on blur to make sure the date value is submitted in all scenarios
   const onInputBlur = hooks.useCallback(e => {
-    if (!isInputDirty || e.relatedTarget && e.relatedTarget.classList.contains('flatpickr-day')) return;
-    dateInputRef.current.dispatchEvent(ENTER_KEYDOWN_EVENT);
-    setIsInputDirty(false);
+    const isFalseBlur = e.relatedTarget && e.relatedTarget.classList.contains('flatpickr-day');
+    if (isFalseBlur) return;
+    if (isInputDirty) {
+      dateInputRef.current.dispatchEvent(ENTER_KEYDOWN_EVENT);
+      setIsInputDirty(false);
+    }
     onDateTimeBlur(e);
   }, [isInputDirty, onDateTimeBlur]);
   const fullId = `${prefixId(id, formId)}--date`;
@@ -1695,9 +1724,9 @@ function Datepicker(props) {
           placeholder: getLocaleReadableDateFormat(),
           autoComplete: "off",
           onFocus: onInputFocus,
+          onBlur: onInputBlur,
           onKeyDown: onInputKeyDown,
           onMouseDown: () => !flatpickrInstance.isOpen && !readonly && flatpickrInstance.open(),
-          onBlur: onInputBlur,
           onInput: () => setIsInputDirty(true),
           "data-input": true,
           "aria-describedby": props['aria-describedby']
@@ -1707,19 +1736,19 @@ function Datepicker(props) {
   });
 }
 
-var _path$g, _path2$4;
-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 _path$h, _path2$3;
+function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 var SvgClock = function SvgClock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none",
     viewBox: "0 0 28 29"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M13 14.41 18.59 20 20 18.59l-5-5.01V5h-2v9.41Z"
-  })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M6.222 25.64A14 14 0 1 0 21.778 2.36 14 14 0 0 0 6.222 25.64ZM7.333 4.023a12 12 0 1 1 13.334 19.955A12 12 0 0 1 7.333 4.022Z",
@@ -1830,6 +1859,7 @@ function Timepicker(props) {
     label,
     collapseLabelOnEmpty,
     onDateTimeBlur,
+    onDateTimeFocus,
     formId,
     required,
     disabled,
@@ -1931,6 +1961,10 @@ function Timepicker(props) {
     propagateRawToMinute();
     onDateTimeBlur(e);
   };
+  const onInputFocus = e => {
+    onDateTimeFocus(e);
+    !readonly && useDropdown && setDropdownIsOpen(true);
+  };
   const onDropdownValueSelected = value => {
     setDropdownIsOpen(false);
     propagateRawToMinute(value);
@@ -1959,9 +1993,7 @@ function Timepicker(props) {
           disabled: disabled,
           readOnly: readonly,
           placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
-          autoComplete: "off",
-          onFocus: () => !readonly && useDropdown && setDropdownIsOpen(true),
-          onClick: () => !readonly && useDropdown && setDropdownIsOpen(true)
+          autoComplete: "off"
 
           // @ts-ignore
           ,
@@ -1970,6 +2002,8 @@ function Timepicker(props) {
             useDropdown && setDropdownIsOpen(false);
           },
           onBlur: onInputBlur,
+          onFocus: onInputFocus,
+          onClick: () => !readonly && useDropdown && setDropdownIsOpen(true),
           onKeyDown: onInputKeyDown,
           "data-input": true,
           "aria-describedby": props['aria-describedby']
@@ -1985,12 +2019,13 @@ function Timepicker(props) {
   });
 }
 
-const type$9 = 'datetime';
+const type$a = 'datetime';
 function Datetime(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     onChange,
     readonly,
@@ -2029,8 +2064,14 @@ function Datetime(props) {
     if (e.relatedTarget && dateTimeGroupRef.current.contains(e.relatedTarget)) {
       return;
     }
-    onBlur();
+    onBlur && onBlur();
   }, [onBlur]);
+  const onDateTimeFocus = hooks.useCallback(e => {
+    if (e.relatedTarget && dateTimeGroupRef.current.contains(e.relatedTarget)) {
+      return;
+    }
+    onFocus && onFocus();
+  }, [onFocus]);
   hooks.useEffect(() => {
     let {
       date,
@@ -2123,6 +2164,7 @@ function Datetime(props) {
     label: dateLabel,
     collapseLabelOnEmpty: !timeLabel,
     onDateTimeBlur,
+    onDateTimeFocus,
     formId,
     required,
     disabled,
@@ -2137,6 +2179,7 @@ function Datetime(props) {
     label: timeLabel,
     collapseLabelOnEmpty: !dateLabel,
     onDateTimeBlur,
+    onDateTimeFocus,
     formId,
     required,
     disabled,
@@ -2148,7 +2191,7 @@ function Datetime(props) {
     'aria-describedby': errorMessageId
   };
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$9, {
+    class: formFieldClasses(type$a, {
       errors: allErrors,
       disabled,
       readonly
@@ -2172,7 +2215,7 @@ function Datetime(props) {
   });
 }
 Datetime.config = {
-  type: type$9,
+  type: type$a,
   keyed: true,
   label: 'Date time',
   group: 'basic-input',
@@ -2189,10 +2232,10 @@ Datetime.config = {
   }
 };
 
-/**
- * This file must not be changed or exchanged.
- *
- * @see http://bpmn.io/license for more information.
+/**
+ * This file must not be changed or exchanged.
+ *
+ * @see http://bpmn.io/license for more information.
  */
 function Logo() {
   return jsxRuntime.jsxs("svg", {
@@ -2370,11 +2413,11 @@ const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u
 
 const FORM_ELEMENT = document.createElement('form');
 
-/**
- * Sanitize a HTML string and return the cleaned, safe version.
- *
- * @param {string} html
- * @return {string}
+/**
+ * Sanitize a HTML string and return the cleaned, safe version.
+ *
+ * @param {string} html
+ * @return {string}
  */
 
 // see https://github.com/developit/snarkdown/issues/70
@@ -2392,29 +2435,29 @@ function sanitizeHTML(html) {
   }
 }
 
-/**
- * Sanitizes an image source to ensure we only allow for data URI and links
- * that start with http(s).
- *
- * Note: Most browsers anyway do not support script execution in <img> elements.
- *
- * @param {string} src
- * @returns {string}
+/**
+ * Sanitizes an image source to ensure we only allow for data URI and links
+ * that start with http(s).
+ *
+ * Note: Most browsers anyway do not support script execution in <img> elements.
+ *
+ * @param {string} src
+ * @returns {string}
  */
 function sanitizeImageSource(src) {
   const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
   return valid ? src : '';
 }
 
-/**
- * Recursively sanitize a HTML node, potentially
- * removing it, its children or attributes.
- *
- * Inspired by https://github.com/developit/snarkdown/issues/70
- * and https://github.com/cure53/DOMPurify. Simplified
- * for our use-case.
- *
- * @param {Element} node
+/**
+ * Recursively sanitize a HTML node, potentially
+ * removing it, its children or attributes.
+ *
+ * Inspired by https://github.com/developit/snarkdown/issues/70
+ * and https://github.com/cure53/DOMPurify. Simplified
+ * for our use-case.
+ *
+ * @param {Element} node
  */
 function sanitizeNode(node) {
   // allow text nodes
@@ -2458,13 +2501,13 @@ function sanitizeNode(node) {
   }
 }
 
-/**
- * Validates attributes for validity.
- *
- * @param {string} lcTag
- * @param {string} lcName
- * @param {string} value
- * @return {boolean}
+/**
+ * Validates attributes for validity.
+ *
+ * @param {string} lcTag
+ * @param {string} lcName
+ * @param {string} value
+ * @return {boolean}
  */
 function isValidAttribute(lcTag, lcName, value) {
   // disallow most attributes based on whitelist
@@ -2487,9 +2530,9 @@ function isValidAttribute(lcTag, lcName, value) {
   return true;
 }
 
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+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 SvgImagePlaceholder = function SvgImagePlaceholder(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     width: 64,
@@ -2528,7 +2571,7 @@ var SvgImagePlaceholder = function SvgImagePlaceholder(props) {
 };
 var ImagePlaceholder = SvgImagePlaceholder;
 
-const type$8 = 'image';
+const type$9 = 'image';
 function Image(props) {
   const {
     field
@@ -2549,7 +2592,7 @@ function Image(props) {
     formId
   } = hooks.useContext(FormContext$1);
   return jsxRuntime.jsx("div", {
-    class: formFieldClasses(type$8),
+    class: formFieldClasses(type$9),
     children: jsxRuntime.jsxs("div", {
       class: "fjs-image-container",
       children: [safeSource && jsxRuntime.jsx("img", {
@@ -2567,7 +2610,7 @@ function Image(props) {
   });
 }
 Image.config = {
-  type: type$8,
+  type: type$9,
   keyed: false,
   label: 'Image view',
   group: 'presentation',
@@ -2594,14 +2637,14 @@ function TemplatedInputAdorner(props) {
   });
 }
 
-var _path$f;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+var _path$g;
+function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 var SvgAngelDown = function SvgAngelDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -2612,14 +2655,14 @@ var SvgAngelDown = function SvgAngelDown(props) {
 };
 var AngelDownIcon = SvgAngelDown;
 
-var _path$e;
-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 _path$f;
+function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 var SvgAngelUp = function SvgAngelUp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -2655,12 +2698,13 @@ function isNullEquivalentValue(value) {
   return value === undefined || value === null || value === '';
 }
 
-const type$7 = 'number';
+const type$8 = 'number';
 function Numberfield(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     value,
     readonly,
@@ -2793,7 +2837,7 @@ function Numberfield(props) {
   } = hooks.useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$7, {
+    class: formFieldClasses(type$8, {
       errors,
       disabled,
       readonly
@@ -2822,7 +2866,8 @@ function Numberfield(props) {
           id: prefixId(id, formId),
           onKeyDown: onKeyDown,
           onKeyPress: onKeyPress,
-          onBlur: onBlur
+          onBlur: () => onBlur && onBlur(),
+          onFocus: () => onFocus && onFocus()
 
           // @ts-ignore
           ,
@@ -2865,7 +2910,7 @@ function Numberfield(props) {
   });
 }
 Numberfield.config = {
-  type: type$7,
+  type: type$8,
   keyed: true,
   label: 'Number',
   group: 'basic-input',
@@ -2888,12 +2933,13 @@ Numberfield.config = {
   })
 };
 
-const type$6 = 'radio';
+const type$7 = 'radio';
 function Radio(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     readonly,
     value
@@ -2918,7 +2964,13 @@ function Radio(props) {
     if (outerDivRef.current.contains(e.relatedTarget)) {
       return;
     }
-    onBlur();
+    onBlur && onBlur();
+  };
+  const onRadioFocus = e => {
+    if (outerDivRef.current.contains(e.relatedTarget)) {
+      return;
+    }
+    onFocus && onFocus();
   };
   const {
     state: loadState,
@@ -2929,7 +2981,7 @@ function Radio(props) {
   } = hooks.useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$6, {
+    class: formFieldClasses(type$7, {
       errors,
       disabled,
       readonly
@@ -2955,6 +3007,7 @@ function Radio(props) {
           type: "radio",
           onClick: () => onChange(option.value),
           onBlur: onRadioBlur,
+          onFocus: onRadioFocus,
           "aria-describedby": errorMessageId
         })
       }, `${id}-${index}`);
@@ -2967,7 +3020,7 @@ function Radio(props) {
   });
 }
 Radio.config = {
-  type: type$6,
+  type: type$7,
   keyed: true,
   label: 'Radio',
   group: 'selection',
@@ -2976,14 +3029,14 @@ Radio.config = {
   create: createEmptyOptions
 };
 
-var _path$d;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+var _path$e;
+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 SvgXMark = function SvgXMark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -3000,6 +3053,7 @@ function SearchableSelect(props) {
     disabled,
     errors,
     onBlur,
+    onFocus,
     field,
     readonly,
     value
@@ -3012,6 +3066,7 @@ function SearchableSelect(props) {
   const [shouldApplyFilter, setShouldApplyFilter] = hooks.useState(true);
   const [isEscapeClosed, setIsEscapeClose] = hooks.useState(false);
   const searchbarRef = hooks.useRef();
+  const eventBus = useService('eventBus');
   const {
     state: loadState,
     values: options
@@ -3033,14 +3088,6 @@ function SearchableSelect(props) {
     }
     return [];
   }, [filter, loadState, options, shouldApplyFilter]);
-  const onChange = ({
-    target
-  }) => {
-    setIsEscapeClose(false);
-    setIsDropdownExpanded(true);
-    setShouldApplyFilter(true);
-    setFilter(target.value || '');
-  };
   const setValue = hooks.useCallback(option => {
     setFilter(option && option.label || '');
     props.onChange({
@@ -3048,6 +3095,32 @@ function SearchableSelect(props) {
       field
     });
   }, [field, props]);
+  const displayState = hooks.useMemo(() => {
+    const ds = {};
+    ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
+    ds.displayCross = ds.componentReady && value !== null && value !== undefined;
+    ds.displayDropdown = !disabled && !readonly && isDropdownExpanded && !isEscapeClosed;
+    return ds;
+  }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, readonly, value]);
+  const onAngelMouseDown = hooks.useCallback(e => {
+    setIsEscapeClose(false);
+    setIsDropdownExpanded(!isDropdownExpanded);
+    const searchbar = searchbarRef.current;
+    isDropdownExpanded ? searchbar.blur() : searchbar.focus();
+    e.preventDefault();
+  }, [isDropdownExpanded]);
+  const onInputChange = ({
+    target
+  }) => {
+    setIsEscapeClose(false);
+    setIsDropdownExpanded(true);
+    setShouldApplyFilter(true);
+    setFilter(target.value || '');
+    eventBus.fire('formField.search', {
+      formField: field,
+      value: target.value || ''
+    });
+  };
   const onInputKeyDown = hooks.useCallback(keyDownEvent => {
     switch (keyDownEvent.key) {
       case 'ArrowUp':
@@ -3072,20 +3145,21 @@ function SearchableSelect(props) {
         break;
     }
   }, [isDropdownExpanded, isEscapeClosed]);
-  const displayState = hooks.useMemo(() => {
-    const ds = {};
-    ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
-    ds.displayCross = ds.componentReady && value !== null && value !== undefined;
-    ds.displayDropdown = !disabled && !readonly && isDropdownExpanded && !isEscapeClosed;
-    return ds;
-  }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, readonly, value]);
-  const onAngelMouseDown = hooks.useCallback(e => {
+  const onInputMouseDown = hooks.useCallback(() => {
     setIsEscapeClose(false);
-    setIsDropdownExpanded(!isDropdownExpanded);
-    const searchbar = searchbarRef.current;
-    isDropdownExpanded ? searchbar.blur() : searchbar.focus();
-    e.preventDefault();
-  }, [isDropdownExpanded]);
+    setIsDropdownExpanded(true);
+    setShouldApplyFilter(false);
+  }, []);
+  const onInputFocus = hooks.useCallback(() => {
+    setIsEscapeClose(false);
+    setIsDropdownExpanded(true);
+    onFocus && onFocus();
+  }, [onFocus]);
+  const onInputBlur = hooks.useCallback(() => {
+    setIsDropdownExpanded(false);
+    setFilter(valueLabel);
+    onBlur && onBlur();
+  }, [onBlur, valueLabel]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs("div", {
       id: prefixId(`${id}`, formId),
@@ -3101,26 +3175,15 @@ function SearchableSelect(props) {
         class: "fjs-input",
         ref: searchbarRef,
         id: prefixId(`${id}-search`, formId),
-        onChange: onChange,
+        onChange: onInputChange,
         type: "text",
         value: filter,
         placeholder: 'Search',
         autoComplete: "off",
-        onKeyDown: e => onInputKeyDown(e),
-        onMouseDown: () => {
-          setIsEscapeClose(false);
-          setIsDropdownExpanded(true);
-          setShouldApplyFilter(false);
-        },
-        onFocus: () => {
-          setIsDropdownExpanded(true);
-          setShouldApplyFilter(false);
-        },
-        onBlur: () => {
-          setIsDropdownExpanded(false);
-          setFilter(valueLabel);
-          onBlur();
-        },
+        onKeyDown: onInputKeyDown,
+        onMouseDown: onInputMouseDown,
+        onFocus: onInputFocus,
+        onBlur: onInputBlur,
         "aria-describedby": props['aria-describedby']
       }), displayState.displayCross && jsxRuntime.jsxs("span", {
         class: "fjs-select-cross",
@@ -3155,6 +3218,7 @@ function SimpleSelect(props) {
     disabled,
     errors,
     onBlur,
+    onFocus,
     field,
     readonly,
     value
@@ -3198,6 +3262,18 @@ function SimpleSelect(props) {
     e.preventDefault();
   }, [isDropdownExpanded]);
   const initialFocusIndex = hooks.useMemo(() => value && minDash.findIndex(options, o => o.value === value) || 0, [options, value]);
+  const onInputFocus = hooks.useCallback(() => {
+    if (!readonly) {
+      setIsDropdownExpanded(true);
+      onFocus && onFocus();
+    }
+  }, [onFocus, readonly]);
+  const onInputBlur = hooks.useCallback(() => {
+    if (!readonly) {
+      setIsDropdownExpanded(false);
+      onBlur && onBlur();
+    }
+  }, [onBlur, readonly]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs("div", {
       ref: selectRef,
@@ -3208,11 +3284,8 @@ function SimpleSelect(props) {
       }, {
         'hasErrors': errors.length
       }),
-      onFocus: () => setIsDropdownExpanded(true),
-      onBlur: () => {
-        setIsDropdownExpanded(false);
-        onBlur();
-      },
+      onFocus: onInputFocus,
+      onBlur: onInputBlur,
       onMouseDown: onMouseDown,
       children: [jsxRuntime.jsx("div", {
         class: classNames('fjs-select-display', {
@@ -3224,8 +3297,8 @@ function SimpleSelect(props) {
         id: prefixId(`${id}-search`, formId),
         class: "fjs-select-hidden-input",
         value: valueLabel,
-        onFocus: () => !readonly && setIsDropdownExpanded(true),
-        onBlur: () => !readonly && setIsDropdownExpanded(false),
+        onFocus: onInputFocus,
+        onBlur: onInputBlur,
         "aria-describedby": props['aria-describedby']
       }), displayState.displayCross && jsxRuntime.jsx("span", {
         class: "fjs-select-cross",
@@ -3254,12 +3327,13 @@ function SimpleSelect(props) {
   });
 }
 
-const type$5 = 'select';
+const type$6 = 'select';
 function Select(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     onChange,
     readonly,
@@ -3284,14 +3358,15 @@ function Select(props) {
     disabled,
     errors,
     onBlur,
+    onFocus,
     field,
     value,
     onChange,
     readonly,
     'aria-describedby': errorMessageId
-  }), [disabled, errors, field, id, value, onChange, onBlur, readonly, errorMessageId]);
+  }), [disabled, errors, field, id, value, onChange, onBlur, onFocus, readonly, errorMessageId]);
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$5, {
+    class: formFieldClasses(type$6, {
       errors,
       disabled,
       readonly
@@ -3319,7 +3394,7 @@ function Select(props) {
   });
 }
 Select.config = {
-  type: type$5,
+  type: type$6,
   keyed: true,
   label: 'Select',
   group: 'selection',
@@ -3328,6 +3403,23 @@ Select.config = {
   create: createEmptyOptions
 };
 
+const type$5 = 'separator';
+function Separator() {
+  return jsxRuntime.jsx("div", {
+    class: formFieldClasses(type$5),
+    children: jsxRuntime.jsx("hr", {})
+  });
+}
+Separator.config = {
+  type: type$5,
+  keyed: false,
+  label: 'Separator',
+  group: 'presentation',
+  create: (options = {}) => ({
+    ...options
+  })
+};
+
 const type$4 = 'spacer';
 function Spacer(props) {
   const {
@@ -3354,11 +3446,33 @@ Spacer.config = {
   })
 };
 
+function SkipLink(props) {
+  const {
+    className,
+    label,
+    onSkip
+  } = props;
+  const onKeyDown = hooks.useCallback(event => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      onSkip();
+    }
+  }, [onSkip]);
+  return jsxRuntime.jsx("a", {
+    href: "#",
+    class: classNames('fjs-skip-link', className),
+    onKeyDown: onKeyDown,
+    children: label
+  });
+}
+
 const type$3 = 'taglist';
 function Taglist(props) {
   const {
     disabled,
     errors = [],
+    onFocus,
     onBlur,
     field,
     readonly,
@@ -3382,7 +3496,9 @@ function Taglist(props) {
   const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
   const [hasOptionsLeft, setHasOptionsLeft] = hooks.useState(true);
   const [isEscapeClosed, setIsEscapeClose] = hooks.useState(false);
-  const searchbarRef = hooks.useRef();
+  const focusScopeRef = hooks.useRef();
+  const inputRef = hooks.useRef();
+  const eventBus = useService('eventBus');
   const {
     state: loadState,
     values: options
@@ -3404,12 +3520,6 @@ function Taglist(props) {
   hooks.useEffect(() => {
     setHasOptionsLeft(options.length > values.length);
   }, [options.length, values.length]);
-  const onFilterChange = ({
-    target
-  }) => {
-    setIsEscapeClose(false);
-    setFilter(target.value);
-  };
   const selectValue = value => {
     if (filter) {
       setFilter('');
@@ -3430,6 +3540,16 @@ function Taglist(props) {
       field
     });
   };
+  const onInputChange = ({
+    target
+  }) => {
+    setIsEscapeClose(false);
+    setFilter(target.value || '');
+    eventBus.fire('formField.search', {
+      formField: field,
+      value: target.value || ''
+    });
+  };
   const onInputKeyDown = e => {
     switch (e.key) {
       case 'ArrowUp':
@@ -3452,10 +3572,26 @@ function Taglist(props) {
         break;
     }
   };
-  const onComponentBlur = () => {
-    setIsDropdownExpanded(false);
-    setFilter('');
-    onBlur();
+  const onElementBlur = e => {
+    if (focusScopeRef.current.contains(e.relatedTarget)) return;
+    onBlur && onBlur();
+  };
+  const onElementFocus = e => {
+    if (focusScopeRef.current.contains(e.relatedTarget)) return;
+    onFocus && onFocus();
+  };
+  const onInputBlur = e => {
+    if (!readonly) {
+      setIsDropdownExpanded(false);
+      setFilter('');
+    }
+    onElementBlur(e);
+  };
+  const onInputFocus = e => {
+    if (!readonly) {
+      setIsDropdownExpanded(true);
+    }
+    onElementFocus(e);
   };
   const onTagRemoveClick = (event, value) => {
     const {
@@ -3466,11 +3602,15 @@ function Taglist(props) {
     // restore focus if there is no next sibling to focus
     const nextTag = target.closest('.fjs-taglist-tag').nextSibling;
     if (!nextTag) {
-      searchbarRef.current.focus();
+      inputRef.current.focus();
     }
   };
+  const onSkipToSearch = () => {
+    inputRef.current.focus();
+  };
   const shouldDisplayDropdown = hooks.useMemo(() => !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed, [disabled, isDropdownExpanded, isEscapeClosed, loadState]);
   return jsxRuntime.jsxs("div", {
+    ref: focusScopeRef,
     class: formFieldClasses(type$3, {
       errors,
       disabled,
@@ -3486,6 +3626,10 @@ function Taglist(props) {
       label: label,
       required: required,
       id: prefixId(`${id}-search`, formId)
+    }), !disabled && !readonly && !!values.length && jsxRuntime.jsx(SkipLink, {
+      className: "fjs-taglist-skip-link",
+      label: "Skip to search",
+      onSkip: onSkipToSearch
     }), jsxRuntime.jsxs("div", {
       class: classNames('fjs-taglist', {
         'fjs-disabled': disabled,
@@ -3507,6 +3651,8 @@ function Taglist(props) {
               type: "button",
               title: "Remove tag",
               class: "fjs-taglist-tag-remove",
+              onFocus: onElementFocus,
+              onBlur: onElementBlur,
               onClick: event => onTagRemoveClick(event, v),
               children: jsxRuntime.jsx(XMarkIcon, {})
             })]
@@ -3516,17 +3662,17 @@ function Taglist(props) {
         disabled: disabled,
         readOnly: readonly,
         class: "fjs-taglist-input",
-        ref: searchbarRef,
+        ref: inputRef,
         id: prefixId(`${id}-search`, formId),
-        onChange: onFilterChange,
+        onChange: onInputChange,
         type: "text",
         value: filter,
         placeholder: disabled || readonly ? undefined : 'Search',
         autoComplete: "off",
         onKeyDown: onInputKeyDown,
         onMouseDown: () => setIsEscapeClose(false),
-        onFocus: () => !readonly && setIsDropdownExpanded(true),
-        onBlur: () => !readonly && onComponentBlur(),
+        onFocus: onInputFocus,
+        onBlur: onInputBlur,
         "aria-describedby": errorMessageId
       })]
     }), jsxRuntime.jsx("div", {
@@ -3536,7 +3682,7 @@ function Taglist(props) {
         getLabel: o => o.label,
         onValueSelected: o => selectValue(o.value),
         emptyListMessage: hasOptionsLeft ? 'No results' : 'All values selected',
-        listenerElement: searchbarRef.current
+        listenerElement: inputRef.current
       })
     }), jsxRuntime.jsx(Description, {
       description: description
@@ -3646,6 +3792,7 @@ function Textfield(props) {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     readonly,
     value = ''
@@ -3697,7 +3844,8 @@ function Textfield(props) {
         readOnly: readonly,
         id: prefixId(id, formId),
         onInput: onChange,
-        onBlur: onBlur,
+        onBlur: () => onBlur && onBlur(),
+        onFocus: () => onFocus && onFocus(),
         type: "text",
         value: value,
         "aria-describedby": errorMessageId
@@ -3740,6 +3888,7 @@ function Textarea(props) {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     readonly,
     value = ''
@@ -3788,7 +3937,8 @@ function Textarea(props) {
       readonly: readonly,
       id: prefixId(id, formId),
       onInput: onInput,
-      onBlur: onBlur,
+      onBlur: () => onBlur && onBlur(),
+      onFocus: () => onFocus && onFocus(),
       value: value,
       ref: textareaRef,
       "aria-describedby": errorMessageId
@@ -3832,39 +3982,39 @@ const autoSizeTextarea = textarea => {
   textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
 };
 
-var _path$c;
-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 _path$d;
+function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 var SvgButton = function SvgButton(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M45 17a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V20a3 3 0 0 1 3-3h36zm-9 8.889H18v2.222h18v-2.222z"
   })));
 };
 var ButtonIcon = SvgButton;
 
-var _path$b;
-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 _path$c;
+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 SvgCheckbox = function SvgCheckbox(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M34 18H20a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V20a2 2 0 0 0-2-2zm-9 14-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
   })));
 };
 var CheckboxIcon = SvgCheckbox;
 
 var _g, _use, _use2, _use3, _defs;
-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); }
+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 SvgChecklist = function SvgChecklist(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     width: 54,
@@ -3898,18 +4048,18 @@ var SvgChecklist = function SvgChecklist(props) {
 };
 var ChecklistIcon = SvgChecklist;
 
-var _path$a, _path2$3, _path3;
-function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
+var _path$b, _path2$2, _path3;
+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); }
 var SvgDatetime = function SvgDatetime(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 0 0-2.06 2.06v23.549a2.07 2.07 0 0 0 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 0 1-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 0 1 .707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06z"
-  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "m35.13 37.603 1.237-1.237-3.468-3.475v-5.926h-1.754v6.654l3.984 3.984Z"
   })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
@@ -3918,27 +4068,27 @@ var SvgDatetime = function SvgDatetime(props) {
 };
 var DatetimeIcon = SvgDatetime;
 
-var _path$9, _path2$2;
-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 _path$a, _path2$1;
+function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
 var SvgTaglist = function SvgTaglist(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36Zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1Z"
-  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M11 22a1 1 0 0 1 1-1h19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H12a1 1 0 0 1-1-1V22Z"
   })));
 };
 var TaglistIcon = SvgTaglist;
 
 var _rect, _rect2, _rect3;
-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); }
+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 SvgForm = function SvgForm(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54
@@ -3964,9 +4114,24 @@ var SvgForm = function SvgForm(props) {
 };
 var FormIcon = SvgForm;
 
+var _path$9;
+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); }
+var SvgGroup = function SvgGroup(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 54,
+    height: 54,
+    fill: "currentcolor"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8 33v5a1 1 0 0 0 1 1h4v2H9a3 3 0 0 1-3-3v-5h2Zm18 6v2H15v-2h11Zm13 0v2H28v-2h11Zm9-6v5a3 3 0 0 1-3 3h-4v-2h4a1 1 0 0 0 .993-.883L46 38v-5h2ZM8 22v9H6v-9h2Zm40 0v9h-2v-9h2Zm-35-9v2H9a1 1 0 0 0-.993.883L8 16v4H6v-4a3 3 0 0 1 3-3h4Zm32 0a3 3 0 0 1 3 3v4h-2v-4a1 1 0 0 0-.883-.993L45 15h-4v-2h4Zm-6 0v2H28v-2h11Zm-13 0v2H15v-2h11Z"
+  })));
+};
+var GroupIcon = SvgGroup;
+
 var _path$8;
 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); }
-var SvgGroup = function SvgGroup(props) {
+var SvgNumber = function SvgNumber(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
@@ -3974,74 +4139,66 @@ var SvgGroup = function SvgGroup(props) {
     fill: "currentcolor"
   }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    d: "M8 33v5a1 1 0 0 0 1 1h4v2H9a3 3 0 0 1-3-3v-5h2Zm18 6v2H15v-2h11Zm13 0v2H28v-2h11Zm9-6v5a3 3 0 0 1-3 3h-4v-2h4a1 1 0 0 0 .993-.883L46 38v-5h2ZM8 22v9H6v-9h2Zm40 0v9h-2v-9h2Zm-35-9v2H9a1 1 0 0 0-.993.883L8 16v4H6v-4a3 3 0 0 1 3-3h4Zm32 0a3 3 0 0 1 3 3v4h-2v-4a1 1 0 0 0-.883-.993L45 15h-4v-2h4Zm-6 0v2H28v-2h11Zm-13 0v2H15v-2h11Z"
+    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
   })));
 };
-var GroupIcon = SvgGroup;
+var NumberIcon = SvgNumber;
 
 var _path$7;
 function _extends$7() { _extends$7 = 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$7.apply(this, arguments); }
-var SvgNumber = function SvgNumber(props) {
+var SvgRadio = function SvgRadio(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
   }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
+    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 1 1 0-16 8 8 0 1 1 0 16z"
   })));
 };
-var NumberIcon = SvgNumber;
+var RadioIcon = SvgRadio;
 
 var _path$6;
 function _extends$6() { _extends$6 = 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$6.apply(this, arguments); }
-var SvgRadio = function SvgRadio(props) {
+var SvgSelect = function SvgSelect(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
   }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.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 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16z"
+    fillRule: "evenodd",
+    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zm-12 7h9l-4.5 6-4.5-6z"
   })));
 };
-var RadioIcon = SvgRadio;
+var SelectIcon = SvgSelect;
 
 var _path$5;
 function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
-var SvgSelect = function SvgSelect(props) {
+var SvgSeparator = function SvgSeparator(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "currentcolor"
+    fill: "none"
   }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zm-12 7h9l-4.5 6-4.5-6z"
+    fill: "currentColor",
+    d: "M26.293 16.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 18.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4ZM9 26h36v2H9v-2Zm13.293 7.707 4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L27 35.586l-3.293-3.293a1 1 0 0 0-1.414 1.414Z"
   })));
 };
-var SelectIcon = SvgSelect;
+var SeparatorIcon = SvgSeparator;
 
-var _path$4, _path2$1;
+var _path$4;
 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); }
 var SvgSpacer = function SvgSpacer(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "currentcolor"
+    fill: "none"
   }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
-    stroke: "currentcolor",
-    strokeLinecap: "square",
-    strokeWidth: 2,
-    d: "M9 23h36M9 31h36"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    stroke: "currentcolor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "m23 17 4-4 4 4M31 37l-4 4-4-4"
+    fill: "currentColor",
+    d: "M9 15v2h36v-2H9Zm0 22v2h36v-2H9Zm17.293-17.707a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 21.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4Zm-4 11.414 4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L27 32.586l-3.293-3.293a1 1 0 0 0-1.414 1.414Z"
   })));
 };
 var SpacerIcon = SvgSpacer;
@@ -4122,6 +4279,7 @@ const iconsByType = type => {
     number: NumberIcon,
     radio: RadioIcon,
     select: SelectIcon,
+    separator: SeparatorIcon,
     spacer: SpacerIcon,
     taglist: TaglistIcon,
     text: TextIcon,
@@ -4131,7 +4289,7 @@ const iconsByType = type => {
   }[type];
 };
 
-const formFields = [Button, Checkbox, Checklist, FormComponent$1, Group, Image, Numberfield, Datetime, Radio, Select, Spacer, Taglist, Text, Textfield, Textarea];
+const formFields = [Button, Checkbox, Checklist, FormComponent$1, Group, Image, Numberfield, Datetime, Radio, Select, Spacer, Separator, Taglist, Text, Textfield, Textarea];
 
 class FormFields {
   constructor() {
@@ -4192,10 +4350,10 @@ function createInjector(bootstrapModules) {
   return injector;
 }
 
-/**
- * @param {string?} prefix
- *
- * @returns Element
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
  */
 function createFormContainer(prefix = 'fjs') {
   const container = document.createElement('div');
@@ -4232,22 +4390,47 @@ function generateIdForType(type) {
   return `${type}${generateIndexForType(type)}`;
 }
 
-/**
- * @template T
- * @param {T} data
- * @param {(this: any, key: string, value: any) => any} [replacer]
- * @return {T}
+/**
+ * @template T
+ * @param {T} data
+ * @param {(this: any, key: string, value: any) => any} [replacer]
+ * @return {T}
  */
 function clone(data, replacer) {
   return JSON.parse(JSON.stringify(data, replacer));
 }
 
-/**
- * Parse the schema for input variables a form might make use of
- *
- * @param {any} schema
- *
- * @return {string[]}
+/**
+ * @typedef { import('../types').Schema } Schema
+ */
+
+/**
+ * Parse the schema for variables a form might make use of.
+ *
+ * @example
+ *
+ * // retrieve variables from schema
+ * const variables = getSchemaVariables(schema);
+ *
+ * @example
+ *
+ * // retrieve input variables from schema
+ * const inputVariables = getSchemaVariables(schema, { outputs: false });
+ *
+ * @example
+ *
+ * // retrieve output variables from schema
+ * const outputVariables = getSchemaVariables(schema, { inputs: false });
+ *
+ * @param {Schema} schema
+ * @param {object} [options]
+ * @param {any} [options.expressionLanguage]
+ * @param {any} [options.templating]
+ * @param {any} [options.formFields]
+ * @param {boolean} [options.inputs=true]
+ * @param {boolean} [options.outputs=true]
+ *
+ * @return {string[]}
  */
 function getSchemaVariables(schema, options = {}) {
   const {
@@ -4330,9 +4513,9 @@ function runRecursively(formField, fn) {
   fn(formField);
 }
 
-/**
- * @typedef {object} Condition
- * @property {string} [hide]
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
  */
 
 class ConditionChecker {
@@ -4342,13 +4525,13 @@ class ConditionChecker {
     this._eventBus = eventBus;
   }
 
-  /**
-   * For given data, remove properties based on condition.
-   *
-   * @param {Object<string, any>} properties
-   * @param {Object<string, any>} data
-   * @param {Object} [options]
-   * @param {Function} [options.getFilterPath]
+  /**
+   * For given data, remove properties based on condition.
+   *
+   * @param {Object<string, any>} properties
+   * @param {Object<string, any>} data
+   * @param {Object} [options]
+   * @param {Function} [options.getFilterPath]
    */
   applyConditions(properties, data = {}, options = {}) {
     const newProperties = clone(properties);
@@ -4377,13 +4560,13 @@ class ConditionChecker {
     return newProperties;
   }
 
-  /**
-   * Check if given condition is met. Returns null for invalid/missing conditions.
-   *
-   * @param {string} condition
-   * @param {import('../../types').Data} [data]
-   *
-   * @returns {boolean|null}
+  /**
+   * Check if given condition is met. Returns null for invalid/missing conditions.
+   *
+   * @param {string} condition
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {boolean|null}
    */
   check(condition, data = {}) {
     if (!condition) {
@@ -4404,12 +4587,12 @@ class ConditionChecker {
     }
   }
 
-  /**
-   * Check if hide condition is met.
-   *
-   * @param {Condition} condition
-   * @param {Object<string, any>} data
-   * @returns {boolean}
+  /**
+   * Check if hide condition is met.
+   *
+   * @param {Condition} condition
+   * @param {Object<string, any>} data
+   * @returns {boolean}
    */
   _checkHideCondition(condition, data) {
     if (!condition.hide) {
@@ -4445,12 +4628,12 @@ class MarkdownRenderer {
     this._converter = new showdown.Converter();
   }
 
-  /**
-   * Render markdown to HTML.
-   *
-   * @param {string} markdown - The markdown to render
-   *
-   * @returns {string} HTML
+  /**
+   * Render markdown to HTML.
+   *
+   * @param {string} markdown - The markdown to render
+   *
+   * @returns {string} HTML
    */
   render(markdown) {
     return this._converter.makeHtml(markdown);
@@ -5573,8 +5756,8 @@ Validator.$inject = ['expressionLanguage', 'conditionChecker', 'form'];
 
 // helpers //////////
 
-/**
- * Helper function to evaluate optional FEEL validation values.
+/**
+ * Helper function to evaluate optional FEEL validation values.
  */
 function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
   const evaluatedValidate = {
@@ -5608,12 +5791,12 @@ function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form
 }
 
 class Importer {
-  /**
-   * @constructor
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
-   * @param { import('./PathRegistry').default } pathRegistry
-   * @param { import('./FieldFactory').default } fieldFactory
-   * @param { import('./FormLayouter').default } formLayouter
+  /**
+   * @constructor
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+   * @param { import('./PathRegistry').default } pathRegistry
+   * @param { import('./FieldFactory').default } fieldFactory
+   * @param { import('./FormLayouter').default } formLayouter
    */
   constructor(formFieldRegistry, pathRegistry, fieldFactory, formLayouter) {
     this._formFieldRegistry = formFieldRegistry;
@@ -5622,21 +5805,21 @@ class Importer {
     this._formLayouter = formLayouter;
   }
 
-  /**
-   * Import schema creating rows, fields, attaching additional
-   * information to each field and adding fields to the
-   * field registry.
-   *
-   * Additional information attached:
-   *
-   *   * `id` (unless present)
-   *   * `_parent`
-   *   * `_path`
-   *
-   * @param {any} schema
-   *
-   * @typedef {{ warnings: Error[], schema: any }} ImportResult
-   * @returns {ImportResult}
+  /**
+   * Import schema creating rows, fields, attaching additional
+   * information to each field and adding fields to the
+   * field registry.
+   *
+   * Additional information attached:
+   *
+   *   * `id` (unless present)
+   *   * `_parent`
+   *   * `_path`
+   *
+   * @param {any} schema
+   *
+   * @typedef {{ warnings: Error[], schema: any }} ImportResult
+   * @returns {ImportResult}
    */
   importSchema(schema) {
     // TODO: Add warnings
@@ -5661,12 +5844,12 @@ class Importer {
     this._pathRegistry.clear();
   }
 
-  /**
-   * @param {{[x: string]: any}} fieldAttrs
-   * @param {String} [parentId]
-   * @param {number} [index]
-   *
-   * @return {any} field
+  /**
+   * @param {{[x: string]: any}} fieldAttrs
+   * @param {String} [parentId]
+   * @param {number} [index]
+   *
+   * @return {any} field
    */
   importFormField(fieldAttrs, parentId, index) {
     const {
@@ -5691,11 +5874,11 @@ class Importer {
     return field;
   }
 
-  /**
-   * @param {Array<any>} components
-   * @param {string} parentId
-   *
-   * @return {Array<any>} imported components
+  /**
+   * @param {Array<any>} components
+   * @param {string} parentId
+   *
+   * @return {Array<any>} imported components
    */
   importFormFields(components, parentId) {
     return components.map((component, index) => {
@@ -5706,11 +5889,11 @@ class Importer {
 Importer.$inject = ['formFieldRegistry', 'pathRegistry', 'fieldFactory', 'formLayouter'];
 
 class FieldFactory {
-  /**
-   * @constructor
-   *
-   * @param  formFieldRegistry
-   * @param  formFields
+  /**
+   * @constructor
+   *
+   * @param  formFieldRegistry
+   * @param  formFields
    */
   constructor(formFieldRegistry, pathRegistry, formFields) {
     this._formFieldRegistry = formFieldRegistry;
@@ -5792,36 +5975,36 @@ class FieldFactory {
 }
 FieldFactory.$inject = ['formFieldRegistry', 'pathRegistry', 'formFields'];
 
-/**
- * The PathRegistry class manages a hierarchical structure of paths associated with form fields.
- * It enables claiming, unclaiming, and validating paths within this structure.
- *
- * Example Tree Structure:
- *
- *   [
- *     {
- *       segment: 'root',
- *       claimCount: 1,
- *       children: [
- *         {
- *           segment: 'child1',
- *           claimCount: 2,
- *           children: null  // A leaf node (closed path)
- *         },
- *         {
- *           segment: 'child2',
- *           claimCount: 1,
- *           children: [
- *             {
- *               segment: 'subChild1',
- *               claimCount: 1,
- *               children: []  // An open node (open path)
- *             }
- *           ]
- *         }
- *       ]
- *     }
- *   ]
+/**
+ * The PathRegistry class manages a hierarchical structure of paths associated with form fields.
+ * It enables claiming, unclaiming, and validating paths within this structure.
+ *
+ * Example Tree Structure:
+ *
+ *   [
+ *     {
+ *       segment: 'root',
+ *       claimCount: 1,
+ *       children: [
+ *         {
+ *           segment: 'child1',
+ *           claimCount: 2,
+ *           children: null  // A leaf node (closed path)
+ *         },
+ *         {
+ *           segment: 'child2',
+ *           claimCount: 1,
+ *           children: [
+ *             {
+ *               segment: 'subChild1',
+ *               claimCount: 1,
+ *               children: []  // An open node (open path)
+ *             }
+ *           ]
+ *         }
+ *       ]
+ *     }
+ *   ]
  */
 class PathRegistry {
   constructor(formFieldRegistry, formFields) {
@@ -5904,16 +6087,16 @@ class PathRegistry {
     }
   }
 
-  /**
-   * Applies a function (fn) recursively on a given field and its children.
-   *
-   * - `field`: Starting field object.
-   * - `fn`: Function to apply.
-   * - `context`: Optional object for passing data between calls.
-   *
-   * Stops early if `fn` returns `false`. Useful for traversing the form field tree.
-   *
-   * @returns {boolean} Success status based on function execution.
+  /**
+   * Applies a function (fn) recursively on a given field and its children.
+   *
+   * - `field`: Starting field object.
+   * - `fn`: Function to apply.
+   * - `context`: Optional object for passing data between calls.
+   *
+   * Stops early if `fn` returns `false`. Useful for traversing the form field tree.
+   *
+   * @returns {boolean} Success status based on function execution.
    */
   executeRecursivelyOnFields(field, fn, context = {}) {
     let result = true;
@@ -5947,15 +6130,15 @@ class PathRegistry {
     return result;
   }
 
-  /**
-   * Generates an array representing the binding path to an underlying data object for a form field.
-   *
-   * @param {Object} field - The field object with properties: `key`, `path`, `id`, and optionally `_parent`.
-   * @param {Object} [options={}] - Configuration options.
-   * @param {Object} [options.replacements={}] - A map of field IDs to alternative path arrays.
-   * @param {Object} [options.cutoffNode] - The ID of the parent field at which to stop generating the path.
-   *
-   * @returns {(Array<string>|undefined)} An array of strings representing the binding path, or undefined if not determinable.
+  /**
+   * Generates an array representing the binding path to an underlying data object for a form field.
+   *
+   * @param {Object} field - The field object with properties: `key`, `path`, `id`, and optionally `_parent`.
+   * @param {Object} [options={}] - Configuration options.
+   * @param {Object} [options.replacements={}] - A map of field IDs to alternative path arrays.
+   * @param {Object} [options.cutoffNode] - The ID of the parent field at which to stop generating the path.
+   *
+   * @returns {(Array<string>|undefined)} An array of strings representing the binding path, or undefined if not determinable.
    */
   getValuePath(field, options = {}) {
     const {
@@ -5999,23 +6182,23 @@ const _getNextSegment = (node, segment) => {
 };
 PathRegistry.$inject = ['formFieldRegistry', 'formFields'];
 
-/**
- * @typedef { { id: String, components: Array<String> } } FormRow
- * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
+/**
+ * @typedef { { id: String, components: Array<String> } } FormRow
+ * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
  */
 
-/**
- * Maintains the Form layout in a given structure, for example
- *
- *  [
- *    {
- *      formFieldId: 'FormField_1',
- *      rows: [
- *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
- *      ]
- *    }
- *  ]
- *
+/**
+ * Maintains the Form layout in a given structure, for example
+ *
+ *  [
+ *    {
+ *      formFieldId: 'FormField_1',
+ *      rows: [
+ *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+ *      ]
+ *    }
+ *  ]
+ *
  */
 class FormLayouter {
   constructor(eventBus) {
@@ -6025,8 +6208,8 @@ class FormLayouter {
     this._eventBus = eventBus;
   }
 
-  /**
-   * @param {FormRow} row
+  /**
+   * @param {FormRow} row
    */
   addRow(formFieldId, row) {
     let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
@@ -6040,18 +6223,18 @@ class FormLayouter {
     rowsPerComponent.rows.push(row);
   }
 
-  /**
-   * @param {String} id
-   * @returns {FormRow}
+  /**
+   * @param {String} id
+   * @returns {FormRow}
    */
   getRow(id) {
     const rows = allRows(this._rows);
     return rows.find(r => r.id === id);
   }
 
-  /**
-   * @param {any} formField
-   * @returns {FormRow}
+  /**
+   * @param {any} formField
+   * @returns {FormRow}
    */
   getRowForField(formField) {
     return allRows(this._rows).find(r => {
@@ -6062,9 +6245,9 @@ class FormLayouter {
     });
   }
 
-  /**
-   * @param {String} formFieldId
-   * @returns { Array<FormRow> }
+  /**
+   * @param {String} formFieldId
+   * @returns { Array<FormRow> }
    */
   getRows(formFieldId) {
     const rowsForField = this._rows.find(r => formFieldId === r.formFieldId);
@@ -6074,15 +6257,15 @@ class FormLayouter {
     return rowsForField.rows;
   }
 
-  /**
-   * @returns {string}
+  /**
+   * @returns {string}
    */
   nextRowId() {
     return this._ids.nextPrefixed('Row_');
   }
 
-  /**
-   * @param {any} formField
+  /**
+   * @param {any} formField
    */
   calculateLayout(formField) {
     const {
@@ -6136,9 +6319,9 @@ function groupByRow(components, ids) {
   });
 }
 
-/**
- * @param {Array<FormRows>} formRows
- * @returns {Array<FormRow>}
+/**
+ * @param {Array<FormRows>} formRows
+ * @returns {Array<FormRow>}
  */
 function allRows(formRows) {
   return minDash.flatten(formRows.map(c => c.rows));
@@ -6260,55 +6443,55 @@ var core = {
   validator: ['type', Validator]
 };
 
-/**
- * @typedef { import('./types').Injector } Injector
- * @typedef { import('./types').Data } Data
- * @typedef { import('./types').Errors } Errors
- * @typedef { import('./types').Schema } Schema
- * @typedef { import('./types').FormProperties } FormProperties
- * @typedef { import('./types').FormProperty } FormProperty
- * @typedef { import('./types').FormEvent } FormEvent
- * @typedef { import('./types').FormOptions } FormOptions
- *
- * @typedef { {
- *   data: Data,
- *   initialData: Data,
- *   errors: Errors,
- *   properties: FormProperties,
- *   schema: Schema
- * } } State
- *
- * @typedef { (type:FormEvent, priority:number, handler:Function) => void } OnEventWithPriority
- * @typedef { (type:FormEvent, handler:Function) => void } OnEventWithOutPriority
- * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+/**
+ * @typedef { import('./types').Injector } Injector
+ * @typedef { import('./types').Data } Data
+ * @typedef { import('./types').Errors } Errors
+ * @typedef { import('./types').Schema } Schema
+ * @typedef { import('./types').FormProperties } FormProperties
+ * @typedef { import('./types').FormProperty } FormProperty
+ * @typedef { import('./types').FormEvent } FormEvent
+ * @typedef { import('./types').FormOptions } FormOptions
+ *
+ * @typedef { {
+ *   data: Data,
+ *   initialData: Data,
+ *   errors: Errors,
+ *   properties: FormProperties,
+ *   schema: Schema
+ * } } State
+ *
+ * @typedef { (type:FormEvent, priority:number, handler:Function) => void } OnEventWithPriority
+ * @typedef { (type:FormEvent, handler:Function) => void } OnEventWithOutPriority
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
  */
 
 const ids = new Ids([32, 36, 1]);
 
-/**
- * The form.
+/**
+ * The form.
  */
 class Form {
-  /**
-   * @constructor
-   * @param {FormOptions} options
+  /**
+   * @constructor
+   * @param {FormOptions} options
    */
   constructor(options = {}) {
-    /**
-     * @public
-     * @type {OnEventType}
+    /**
+     * @public
+     * @type {OnEventType}
      */
     this.on = this._onEvent;
 
-    /**
-     * @public
-     * @type {String}
+    /**
+     * @public
+     * @type {String}
      */
     this._id = ids.next();
 
-    /**
-     * @private
-     * @type {Element}
+    /**
+     * @private
+     * @type {Element}
      */
     this._container = createFormContainer();
     const {
@@ -6317,9 +6500,9 @@ class Form {
       properties = {}
     } = options;
 
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       initialData: null,
@@ -6343,9 +6526,9 @@ class Form {
     this._emit('form.clear');
   }
 
-  /**
-   * Destroy the form, removing it from DOM,
-   * if attached.
+  /**
+   * Destroy the form, removing it from DOM,
+   * if attached.
    */
   destroy() {
     // destroy form services
@@ -6356,13 +6539,13 @@ class Form {
     this._detach(false);
   }
 
-  /**
-   * Open a form schema with the given initial data.
-   *
-   * @param {Schema} schema
-   * @param {Data} [data]
-   *
-   * @return Promise<{ warnings: Array<any> }>
+  /**
+   * Open a form schema with the given initial data.
+   *
+   * @param {Schema} schema
+   * @param {Data} [data]
+   *
+   * @return Promise<{ warnings: Array<any> }>
    */
   importSchema(schema, data = {}) {
     return new Promise((resolve, reject) => {
@@ -6395,10 +6578,10 @@ class Form {
     });
   }
 
-  /**
-   * Submit the form, triggering all field validations.
-   *
-   * @returns { { data: Data, errors: Errors } }
+  /**
+   * Submit the form, triggering all field validations.
+   *
+   * @returns { { data: Data, errors: Errors } }
    */
   submit() {
     const {
@@ -6424,8 +6607,8 @@ class Form {
     });
   }
 
-  /**
-   * @returns {Errors}
+  /**
+   * @returns {Errors}
    */
   validate() {
     const formFieldRegistry = this.get('formFieldRegistry'),
@@ -6455,8 +6638,8 @@ class Form {
     return filteredErrors;
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -6474,10 +6657,10 @@ class Form {
     this._detach();
   }
 
-  /**
-   * @private
-   *
-   * @param {boolean} [emit]
+  /**
+   * @private
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -6491,9 +6674,9 @@ class Form {
     parentNode.removeChild(container);
   }
 
-  /**
-   * @param {FormProperty} property
-   * @param {any} value
+  /**
+   * @param {FormProperty} property
+   * @param {any} value
    */
   setProperty(property, value) {
     const properties = minDash.set(this._getState().properties, [property], value);
@@ -6502,21 +6685,21 @@ class Form {
     });
   }
 
-  /**
-   * @param {FormEvent} type
-   * @param {Function} handler
+  /**
+   * @param {FormEvent} type
+   * @param {Function} handler
    */
   off(type, handler) {
     this.get('eventBus').off(type, handler);
   }
 
-  /**
-   * @private
-   *
-   * @param {FormOptions} options
-   * @param {Element} container
-   *
-   * @returns {Injector}
+  /**
+   * @private
+   *
+   * @param {FormOptions} options
+   * @param {Element} container
+   *
+   * @returns {Injector}
    */
   _createInjector(options, container) {
     const {
@@ -6535,17 +6718,17 @@ class Form {
     }, core, ...modules, ...additionalModules]);
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   _emit(type, data) {
     this.get('eventBus').fire(type, data);
   }
 
-  /**
-   * @internal
-   *
-   * @param { { add?: boolean, field: any, remove?: number, value?: any } } update
+  /**
+   * @internal
+   *
+   * @param { { add?: boolean, field: any, remove?: number, value?: any } } update
    */
   _update(update) {
     const {
@@ -6567,15 +6750,15 @@ class Form {
     });
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getState() {
     return this._state;
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _setState(state) {
     this._state = {
@@ -6585,22 +6768,22 @@ class Form {
     this._emit('changed', this._getState());
   }
 
-  /**
-  * @internal
+  /**
+  * @internal
   */
   _getModules() {
     return [ExpressionLanguageModule, MarkdownModule, ViewerCommandsModule];
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getSubmitData() {
     const formFieldRegistry = this.get('formFieldRegistry'),
@@ -6628,16 +6811,16 @@ class Form {
     return filteredSubmitData;
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _applyConditions(toFilter, data, options = {}) {
     const conditionChecker = this.get('conditionChecker');
     return conditionChecker.applyConditions(toFilter, data, options);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _initializeFieldData(data) {
     const formFieldRegistry = this.get('formFieldRegistry'),
@@ -6674,7 +6857,7 @@ class Form {
   }
 }
 
-const schemaVersion = 11;
+const schemaVersion = 12;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -6710,6 +6893,8 @@ exports.DATE_DISALLOW_PAST_PATH = DATE_DISALLOW_PAST_PATH;
 exports.DATE_LABEL_PATH = DATE_LABEL_PATH;
 exports.Datetime = Datetime;
 exports.Default = FormComponent$1;
+exports.Description = Description;
+exports.Errors = Errors;
 exports.ExpressionLanguageModule = ExpressionLanguageModule;
 exports.FeelExpressionLanguage = FeelExpressionLanguage;
 exports.FeelersTemplating = FeelersTemplating;
@@ -6725,6 +6910,7 @@ exports.FormRenderContext = FormRenderContext$1;
 exports.Group = Group;
 exports.Image = Image;
 exports.Importer = Importer;
+exports.Label = Label;
 exports.MINUTES_IN_DAY = MINUTES_IN_DAY;
 exports.MarkdownModule = MarkdownModule;
 exports.MarkdownRenderer = MarkdownRenderer;
@@ -6732,6 +6918,7 @@ exports.Numberfield = Numberfield;
 exports.PathRegistry = PathRegistry;
 exports.Radio = Radio;
 exports.Select = Select;
+exports.Separator = Separator;
 exports.Spacer = Spacer;
 exports.TIME_INTERVAL_PATH = TIME_INTERVAL_PATH;
 exports.TIME_LABEL_PATH = TIME_LABEL_PATH;
@@ -6764,5 +6951,7 @@ exports.isRequired = isRequired;
 exports.pathParse = pathParse;
 exports.pathsEqual = pathsEqual;
 exports.runRecursively = runRecursively;
+exports.sanitizeHTML = sanitizeHTML;
+exports.sanitizeImageSource = sanitizeImageSource;
 exports.schemaVersion = schemaVersion;
 //# sourceMappingURL=index.cjs.map