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

package/dist/index.cjs

@@ -591,6 +591,18 @@ function gridColumnClasses(formField) {
   // always fall back to top-down on smallest screens
   'cds--col-sm-16', 'cds--col-md-16');
 }
+function textToLabel(text) {
+  if (typeof text != 'string') return null;
+  for (const line of text.split('\n')) {
+    const displayLine = line.trim();
+
+    // we use the first non-whitespace line in the text as label
+    if (displayLine !== '') {
+      return displayLine;
+    }
+  }
+  return null;
+}
 function prefixId(id, formId, indexes) {
   let result = 'fjs-form';
   if (formId) {
@@ -665,12 +677,6 @@ const FormContext = preact.createContext({
   formId: null
 });
 
-/**
- * @template T
- * @param {string} type
- * @param {boolean} [strict=true]
- * @returns {T | null}
- */
 function useService(type, strict) {
   const {
     getService
@@ -749,10 +755,11 @@ function buildExpressionContext(context) {
 }
 
 /**
- * If the value is a valid expression, it is evaluated and returned. Otherwise, it is returned as-is.
+ * Evaluate a string based on the expressionLanguage and context information.
+ * If the string is not an expression, it is returned as is.
  *
  * @param {any} expressionLanguage - The expression language to use.
- * @param {any} value - The static value or expression to evaluate.
+ * @param {string} value - The string to evaluate.
  * @param {Object} expressionContextInfo - The context information to use.
  * @returns {any} - Evaluated value or the original value if not an expression.
  */
@@ -883,10 +890,11 @@ function _isAllowedValue(value) {
 }
 
 /**
- * If the value is a valid expression, it is evaluated and returned. Otherwise, it is returned as-is.
+ * Evaluate a string reactively based on the expressionLanguage and form data.
+ * If the string is not an expression, it is returned as is.
  * The function is memoized to minimize re-renders.
  *
- * @param {any} value - A static value or expression to evaluate.
+ * @param {string} value - The string to evaluate.
  * @returns {any} - Evaluated value or the original value if not an expression.
  */
 function useExpressionEvaluation(value) {
@@ -903,6 +911,7 @@ function useExpressionEvaluation(value) {
  * @returns {T} - Returns the current state.
  */
 function useDeepCompareMemoize(value) {
+  /** @type {import("preact").RefObject<T>} */
   const ref = hooks.useRef();
   if (!isEqual(value, ref.current)) {
     ref.current = value;
@@ -1126,7 +1135,7 @@ function _isElementScrollable(el) {
 }
 
 const EMPTY_OBJECT = {};
-const EMPTY_ARRAY$2 = [];
+const EMPTY_ARRAY = [];
 
 /**
  * Custom hook to scroll an element within a scrollable container.
@@ -1142,7 +1151,7 @@ const EMPTY_ARRAY$2 = [];
  */
 function useScrollIntoView(scrolledElementRef, deps, scrollOptions, flagRefs) {
   const _scrollOptions = scrollOptions || EMPTY_OBJECT;
-  const _flagRefs = flagRefs || EMPTY_ARRAY$2;
+  const _flagRefs = flagRefs || EMPTY_ARRAY;
   hooks.useEffect(() => {
     // return early if flags are not raised, or component is not mounted
     if (minDash.some(_flagRefs, ref => !ref.current) || !scrolledElementRef.current) {
@@ -1196,23 +1205,6 @@ function _getTopOffset(item, scrollContainer, options) {
   return 0;
 }
 
-/**
- * If the value is a valid expression, we evaluate it. Otherwise, we continue with the value as-is.
- * If the resulting value isn't a boolean, we return 'false'
- * The function is memoized to minimize re-renders.
- *
- * @param {boolean | string} value - A static boolean or expression to evaluate.
- * @returns {boolean} - Evaluated boolean result.
- */
-function useBooleanExpressionEvaluation(value) {
-  const expressionLanguage = useService('expressionLanguage');
-  const expressionContextInfo = hooks.useContext(LocalExpressionContext);
-  return hooks.useMemo(() => {
-    const evaluationResult = runExpressionEvaluation(expressionLanguage, value, expressionContextInfo);
-    return typeof evaluationResult === 'boolean' ? evaluationResult : false;
-  }, [expressionLanguage, expressionContextInfo, value]);
-}
-
 /**
  * Returns the conditionally filtered data of a form reactively.
  * Memoised to minimize re-renders
@@ -1726,9 +1718,10 @@ function Button(props) {
 Button.config = {
   type: type$i,
   keyed: false,
-  label: 'Button',
+  name: 'Button',
   group: 'action',
   create: (options = {}) => ({
+    label: 'Button',
     action: 'submit',
     ...options
   })
@@ -1836,11 +1829,9 @@ function Checkbox(props) {
     }), {
       'fjs-checked': value
     }),
-    children: [jsxRuntime.jsx(Label, {
-      htmlFor: domId,
-      label: label,
-      required: required,
-      children: jsxRuntime.jsx("input", {
+    children: [jsxRuntime.jsxs("div", {
+      class: "fjs-inline-label",
+      children: [jsxRuntime.jsx("input", {
         checked: value,
         class: "fjs-input",
         disabled: disabled,
@@ -1853,7 +1844,11 @@ function Checkbox(props) {
         required: required,
         "aria-invalid": errors.length > 0,
         "aria-describedby": [descriptionId, errorMessageId].join(' ')
-      })
+      }), jsxRuntime.jsx(Label, {
+        htmlFor: domId,
+        label: label,
+        required: required
+      })]
     }), jsxRuntime.jsx(Description, {
       id: descriptionId,
       description: description
@@ -1866,13 +1861,14 @@ function Checkbox(props) {
 Checkbox.config = {
   type: type$h,
   keyed: true,
-  label: 'Checkbox',
+  name: 'Checkbox',
   group: 'selection',
   emptyValue: false,
   sanitizeValue: ({
     value
   }) => value === true,
   create: (options = {}) => ({
+    label: 'Checkbox',
     ...options
   })
 };
@@ -1894,6 +1890,8 @@ function Checklist(props) {
     label,
     validate = {}
   } = field;
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const outerDivRef = hooks.useRef();
   const {
     required
@@ -1939,31 +1937,32 @@ function Checklist(props) {
     children: [jsxRuntime.jsx(Label, {
       label: label,
       required: required
-    }), loadState == LOAD_STATES.LOADED && options.map((o, index) => {
+    }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
       const itemDomId = `${domId}-${index}`;
-      const isChecked = hasEqualValue(o.value, values);
-      return jsxRuntime.jsx(Label, {
-        htmlFor: itemDomId,
-        label: o.label,
-        class: classNames({
+      const isChecked = hasEqualValue(option.value, values);
+      return jsxRuntime.jsxs("div", {
+        className: classNames('fjs-inline-label', {
           'fjs-checked': isChecked
         }),
-        required: false,
-        children: jsxRuntime.jsx("input", {
+        children: [jsxRuntime.jsx("input", {
           checked: isChecked,
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
           id: itemDomId,
           type: "checkbox",
-          onClick: () => toggleCheckbox(o.value),
+          onClick: () => toggleCheckbox(option.value),
           onBlur: onCheckboxBlur,
           onFocus: onCheckboxFocus,
           required: required,
           "aria-invalid": errors.length > 0,
           "aria-describedby": [descriptionId, errorMessageId].join(' ')
-        })
-      });
+        }), jsxRuntime.jsx(Label, {
+          htmlFor: itemDomId,
+          label: option.label,
+          required: false
+        })]
+      }, option.value);
     }), jsxRuntime.jsx(Description, {
       id: descriptionId,
       description: description
@@ -1976,17 +1975,18 @@ function Checklist(props) {
 Checklist.config = {
   type: type$g,
   keyed: true,
-  label: 'Checkbox group',
+  name: 'Checkbox group',
   group: 'selection',
   emptyValue: [],
   sanitizeValue: sanitizeMultiSelectValue,
-  create: createEmptyOptions
+  create: (options = {}) => ({
+    label: 'Checkbox group',
+    ...createEmptyOptions(options)
+  })
 };
 
 const noop$1 = () => false;
-const ids$2 = new Ids([32, 36, 1]);
 function FormField(props) {
-  const instanceIdRef = hooks.useRef(ids$2.next());
   const {
     field,
     indexes,
@@ -2032,28 +2032,22 @@ function FormField(props) {
   // add precedence: global readonly > form field disabled
   const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
   const hidden = useCondition(field.conditional && field.conditional.hide || null);
-  const instanceId = hooks.useMemo(() => {
-    if (!formFieldInstanceRegistry) {
-      return null;
-    }
-    return formFieldInstanceRegistry.syncInstance(instanceIdRef.current, {
-      id: field.id,
-      expressionContextInfo: localExpressionContext,
-      valuePath,
-      value,
-      indexes,
-      hidden
-    });
-  }, [formFieldInstanceRegistry, field.id, localExpressionContext, valuePath, value, indexes, hidden]);
-  const fieldInstance = instanceId ? formFieldInstanceRegistry.get(instanceId) : null;
+  const fieldInstance = hooks.useMemo(() => ({
+    id: field.id,
+    expressionContextInfo: localExpressionContext,
+    valuePath,
+    indexes
+  }), [field.id, valuePath, localExpressionContext, indexes]);
 
-  // cleanup the instance on unmount
+  // register form field instance
   hooks.useEffect(() => {
-    const instanceId = instanceIdRef.current;
-    if (formFieldInstanceRegistry) {
-      return () => formFieldInstanceRegistry.cleanupInstance(instanceId);
+    if (formFieldInstanceRegistry && !hidden) {
+      const instanceId = formFieldInstanceRegistry.add(fieldInstance);
+      return () => {
+        formFieldInstanceRegistry.remove(instanceId);
+      };
     }
-  }, [formFieldInstanceRegistry]);
+  }, [fieldInstance, formFieldInstanceRegistry, hidden]);
 
   // ensures the initial validation behavior can be re-triggered upon form reset
   hooks.useEffect(() => {
@@ -2286,11 +2280,12 @@ Default.config = {
   create: (options = {}) => ({
     components: [],
     ...options
-  })
+  }),
+  getSubheading: field => field.id
 };
 
 var _path$x;
-function _extends$y() { _extends$y = 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$y.apply(this, arguments); }
+function _extends$y() { return _extends$y = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$y.apply(null, arguments); }
 var SvgCalendar = function SvgCalendar(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2426,7 +2421,11 @@ function Datepicker(props) {
     readonly,
     setDate
   } = props;
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const dateInputRef = hooks.useRef();
+
+  /** @type {import("preact").RefObject<HTMLElement>} */
   const focusScopeRef = hooks.useRef();
   const [flatpickrInstance, setFlatpickrInstance] = hooks.useState(null);
   const [isInputDirty, setIsInputDirty] = hooks.useState(false);
@@ -2564,7 +2563,7 @@ function Datepicker(props) {
 }
 
 var _path$w, _path2$4;
-function _extends$x() { _extends$x = 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$x.apply(this, arguments); }
+function _extends$x() { return _extends$x = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$x.apply(null, arguments); }
 var SvgClock = function SvgClock(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2598,7 +2597,11 @@ function DropdownList(props) {
   const [mouseControl, setMouseControl] = hooks.useState(false);
   const [focusedValueIndex, setFocusedValueIndex] = hooks.useState(initialFocusIndex);
   const [smoothScrolling, setSmoothScrolling] = hooks.useState(false);
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const dropdownContainer = hooks.useRef();
+
+  /** @type {import("preact").RefObject<{ x: number, y: number }>} */
   const mouseScreenPos = hooks.useRef();
   const focusedItem = hooks.useMemo(() => values.length ? values[focusedValueIndex] : null, [focusedValueIndex, values]);
   const changeFocusedValueIndex = hooks.useCallback(delta => {
@@ -2816,7 +2819,7 @@ function Timepicker(props) {
           value: rawValue,
           disabled: disabled,
           readOnly: readonly,
-          placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
+          placeholder: use24h ? 'hh:mm' : 'hh:mm --',
           autoComplete: "off",
           onInput: e => {
             // @ts-expect-error
@@ -2872,6 +2875,8 @@ function Datetime(props) {
   const {
     formId
   } = hooks.useContext(FormContext);
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const dateTimeGroupRef = hooks.useRef();
   const [dateTime, setDateTime] = hooks.useState(getNullDateTime());
   const [dateTimeUpdateRequest, setDateTimeUpdateRequest] = hooks.useState(null);
@@ -3037,18 +3042,23 @@ function Datetime(props) {
 Datetime.config = {
   type: type$f,
   keyed: true,
-  label: 'Date time',
+  name: 'Date time',
   group: 'basic-input',
   emptyValue: null,
   sanitizeValue: sanitizeDateTimePickerValue,
-  create: (options = {}) => {
+  create: (options = {}, isNewField) => {
     const defaults = {};
     minDash.set(defaults, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
-    minDash.set(defaults, DATE_LABEL_PATH, 'Date');
+    if (isNewField) {
+      minDash.set(defaults, DATE_LABEL_PATH, 'Date');
+    }
     return {
       ...defaults,
       ...options
     };
+  },
+  getSubheading: field => {
+    return field.dateLabel || field.timeLabel;
   }
 };
 
@@ -3086,9 +3096,10 @@ function Group(props) {
 Group.config = {
   type: 'group',
   pathed: true,
-  label: 'Group',
+  name: 'Group',
   group: 'container',
   create: (options = {}) => ({
+    label: 'Group',
     components: [],
     showOutline: true,
     ...options
@@ -3162,9 +3173,10 @@ function IFramePlaceholder(props) {
 IFrame.config = {
   type: type$e,
   keyed: false,
-  label: 'iFrame',
+  name: 'iFrame',
   group: 'container',
   create: (options = {}) => ({
+    label: 'iFrame',
     security: {
       allowScripts: true
     },
@@ -3173,7 +3185,7 @@ IFrame.config = {
 };
 
 var _path$v;
-function _extends$w() { _extends$w = 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$w.apply(this, arguments); }
+function _extends$w() { return _extends$w = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$w.apply(null, arguments); }
 var SvgButton = function SvgButton(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3187,7 +3199,7 @@ var SvgButton = function SvgButton(props) {
 };
 
 var _path$u;
-function _extends$v() { _extends$v = 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$v.apply(this, arguments); }
+function _extends$v() { return _extends$v = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$v.apply(null, arguments); }
 var SvgCheckbox = function SvgCheckbox(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3200,7 +3212,7 @@ var SvgCheckbox = function SvgCheckbox(props) {
 };
 
 var _path$t;
-function _extends$u() { _extends$u = 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$u.apply(this, arguments); }
+function _extends$u() { return _extends$u = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$u.apply(null, arguments); }
 var SvgChecklist = function SvgChecklist(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3216,7 +3228,7 @@ var SvgChecklist = function SvgChecklist(props) {
 };
 
 var _path$s, _path2$3, _path3;
-function _extends$t() { _extends$t = 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$t.apply(this, arguments); }
+function _extends$t() { return _extends$t = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$t.apply(null, arguments); }
 var SvgDatetime = function SvgDatetime(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3235,7 +3247,7 @@ var SvgDatetime = function SvgDatetime(props) {
 };
 
 var _path$r, _path2$2;
-function _extends$s() { _extends$s = 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$s.apply(this, arguments); }
+function _extends$s() { return _extends$s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$s.apply(null, arguments); }
 var SvgTaglist = function SvgTaglist(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3251,7 +3263,7 @@ var SvgTaglist = function SvgTaglist(props) {
 };
 
 var _rect, _rect2, _rect3;
-function _extends$r() { _extends$r = 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$r.apply(this, arguments); }
+function _extends$r() { return _extends$r = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$r.apply(null, arguments); }
 var SvgForm = function SvgForm(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3279,7 +3291,7 @@ var SvgForm = function SvgForm(props) {
 };
 
 var _path$q;
-function _extends$q() { _extends$q = 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$q.apply(this, arguments); }
+function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
 var SvgGroup = function SvgGroup(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3295,7 +3307,7 @@ var SvgGroup = function SvgGroup(props) {
 };
 
 var _path$p;
-function _extends$p() { _extends$p = 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$p.apply(this, arguments); }
+function _extends$p() { return _extends$p = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$p.apply(null, arguments); }
 var SvgNumber = function SvgNumber(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3309,7 +3321,7 @@ var SvgNumber = function SvgNumber(props) {
 };
 
 var _path$o;
-function _extends$o() { _extends$o = 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$o.apply(this, arguments); }
+function _extends$o() { return _extends$o = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$o.apply(null, arguments); }
 var SvgRadio = function SvgRadio(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3322,7 +3334,7 @@ var SvgRadio = function SvgRadio(props) {
 };
 
 var _path$n;
-function _extends$n() { _extends$n = 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$n.apply(this, arguments); }
+function _extends$n() { return _extends$n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$n.apply(null, arguments); }
 var SvgSelect = function SvgSelect(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3336,7 +3348,7 @@ var SvgSelect = function SvgSelect(props) {
 };
 
 var _path$m;
-function _extends$m() { _extends$m = 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$m.apply(this, arguments); }
+function _extends$m() { return _extends$m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$m.apply(null, arguments); }
 var SvgSeparator = function SvgSeparator(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3350,7 +3362,7 @@ var SvgSeparator = function SvgSeparator(props) {
 };
 
 var _path$l;
-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); }
+function _extends$l() { return _extends$l = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$l.apply(null, arguments); }
 var SvgSpacer = function SvgSpacer(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3364,7 +3376,7 @@ var SvgSpacer = function SvgSpacer(props) {
 };
 
 var _path$k;
-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); }
+function _extends$k() { return _extends$k = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$k.apply(null, arguments); }
 var SvgDynamicList = function SvgDynamicList(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3380,7 +3392,7 @@ var SvgDynamicList = function SvgDynamicList(props) {
 };
 
 var _path$j;
-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); }
+function _extends$j() { return _extends$j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$j.apply(null, arguments); }
 var SvgText = function SvgText(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3393,7 +3405,7 @@ var SvgText = function SvgText(props) {
 };
 
 var _path$i;
-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$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
 var SvgHtml = function SvgHtml(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3409,7 +3421,7 @@ var SvgHtml = function SvgHtml(props) {
 };
 
 var _path$h;
-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); }
+function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
 var SvgExpressionField = function SvgExpressionField(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3425,7 +3437,7 @@ var SvgExpressionField = function SvgExpressionField(props) {
 };
 
 var _path$g;
-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); }
+function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
 var SvgTextfield = function SvgTextfield(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3439,7 +3451,7 @@ var SvgTextfield = function SvgTextfield(props) {
 };
 
 var _path$f;
-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); }
+function _extends$f() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
 var SvgTextarea = function SvgTextarea(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3453,7 +3465,7 @@ var SvgTextarea = function SvgTextarea(props) {
 };
 
 var _path$e;
-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); }
+function _extends$e() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
 var SvgIFrame = function SvgIFrame(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3469,7 +3481,7 @@ var SvgIFrame = function SvgIFrame(props) {
 };
 
 var _path$d, _path2$1;
-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); }
+function _extends$d() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
 var SvgImage = function SvgImage(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3488,7 +3500,7 @@ var SvgImage = function SvgImage(props) {
 };
 
 var _path$c;
-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$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
 var SvgTable = function SvgTable(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3503,7 +3515,7 @@ var SvgTable = function SvgTable(props) {
 };
 
 var _path$b;
-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); }
+function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
 var SvgFilePicker = function SvgFilePicker(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3594,11 +3606,10 @@ function Image(props) {
 Image.config = {
   type: type$d,
   keyed: false,
-  label: 'Image view',
+  name: 'Image view',
   group: 'presentation',
-  create: (options = {}) => ({
-    ...options
-  })
+  create: (options = {}) => options,
+  getSubheading: field => field.alt
 };
 
 function TemplatedInputAdorner(props) {
@@ -3620,7 +3631,7 @@ function TemplatedInputAdorner(props) {
 }
 
 var _path$a;
-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); }
+function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
 var SvgAngelDown = function SvgAngelDown(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3637,7 +3648,7 @@ var SvgAngelDown = function SvgAngelDown(props) {
 };
 
 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); }
+function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
 var SvgAngelUp = function SvgAngelUp(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3709,6 +3720,8 @@ function Numberfield(props) {
   const {
     required
   } = validate;
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = hooks.useRef();
   const [cachedValue, setCachedValue] = hooks.useState(value);
   const [displayValue, setDisplayValue] = hooks.useState(value);
@@ -3905,7 +3918,7 @@ function Numberfield(props) {
 Numberfield.config = {
   type: type$c,
   keyed: true,
-  label: 'Number',
+  name: 'Number',
   group: 'basic-input',
   emptyValue: null,
   sanitizeValue: ({
@@ -3919,6 +3932,7 @@ Numberfield.config = {
     return formField.serializeToString ? value.toString() : Number(value);
   },
   create: (options = {}) => ({
+    label: 'Number',
     ...options
   })
 };
@@ -3940,6 +3954,8 @@ function Radio(props) {
     label,
     validate = {}
   } = field;
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const outerDivRef = hooks.useRef();
   const {
     required
@@ -3987,18 +4003,16 @@ function Radio(props) {
     }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
       const itemDomId = `${domId}-${index}`;
       const isChecked = isEqual(option.value, value);
-      return jsxRuntime.jsx(Label, {
-        htmlFor: itemDomId,
-        label: option.label,
-        class: classNames({
+      return jsxRuntime.jsxs("div", {
+        className: classNames('fjs-inline-label', {
           'fjs-checked': isChecked
         }),
-        required: false,
-        children: jsxRuntime.jsx("input", {
+        children: [jsxRuntime.jsx("input", {
           checked: isChecked,
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
+          name: domId,
           id: itemDomId,
           type: "radio",
           onClick: () => onChange(option.value),
@@ -4007,8 +4021,15 @@ function Radio(props) {
           "aria-describedby": [descriptionId, errorMessageId].join(' '),
           required: required,
           "aria-invalid": errors.length > 0
-        })
-      }, index);
+        }), jsxRuntime.jsx(Label, {
+          htmlFor: itemDomId,
+          label: option.label,
+          class: classNames({
+            'fjs-checked': isChecked
+          }),
+          required: false
+        })]
+      }, option.value);
     }), jsxRuntime.jsx(Description, {
       id: descriptionId,
       description: description
@@ -4021,15 +4042,18 @@ function Radio(props) {
 Radio.config = {
   type: type$b,
   keyed: true,
-  label: 'Radio group',
+  name: 'Radio group',
   group: 'selection',
   emptyValue: null,
   sanitizeValue: sanitizeSingleSelectValue,
-  create: createEmptyOptions
+  create: (options = {}) => ({
+    label: 'Radio group',
+    ...createEmptyOptions(options)
+  })
 };
 
 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); }
+function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
 var SvgXMark = function SvgXMark(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
@@ -4060,6 +4084,8 @@ function SearchableSelect(props) {
   const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
   const [isFilterActive, setIsFilterActive] = hooks.useState(true);
   const [isEscapeClosed, setIsEscapeClose] = hooks.useState(false);
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const searchbarRef = hooks.useRef();
   const eventBus = useService('eventBus');
   const {
@@ -4087,9 +4113,9 @@ function SearchableSelect(props) {
     if (!filter || !isFilterActive) {
       return options;
     }
-    return options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()));
+    return options.filter(option => option.label && option.value && option.label.toLowerCase().includes(filter.toLowerCase()));
   }, [filter, loadState, options, isFilterActive]);
-  const setValue = hooks.useCallback(option => {
+  const pickOption = hooks.useCallback(option => {
     setFilter(option && option.label || '');
     props.onChange({
       value: option && option.value || null
@@ -4187,7 +4213,7 @@ function SearchableSelect(props) {
       }), displayState.displayCross && jsxRuntime.jsxs("span", {
         class: "fjs-select-cross",
         onMouseDown: e => {
-          setValue(null);
+          pickOption(null);
           e.preventDefault();
         },
         children: [jsxRuntime.jsx(SvgXMark, {}), ' ']
@@ -4200,9 +4226,9 @@ function SearchableSelect(props) {
       class: "fjs-select-anchor",
       children: displayState.displayDropdown && jsxRuntime.jsx(DropdownList, {
         values: filteredOptions,
-        getLabel: o => o.label,
-        onValueSelected: o => {
-          setValue(o);
+        getLabel: option => option.label,
+        onValueSelected: option => {
+          pickOption(option);
           setIsDropdownExpanded(false);
         },
         listenerElement: searchbarRef.current
@@ -4224,6 +4250,8 @@ function SimpleSelect(props) {
   } = props;
   const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
   const selectRef = hooks.useRef();
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = hooks.useRef();
   const {
     loadState,
@@ -4238,7 +4266,7 @@ function SimpleSelect(props) {
   });
   const getLabelCorrelation = useGetLabelCorrelation(options);
   const valueLabel = hooks.useMemo(() => value && getLabelCorrelation(value), [value, getLabelCorrelation]);
-  const setValue = hooks.useCallback(option => {
+  const pickOption = hooks.useCallback(option => {
     props.onChange({
       value: option && option.value || null
     });
@@ -4263,7 +4291,7 @@ function SimpleSelect(props) {
     }
     e.preventDefault();
   }, [disabled, isDropdownExpanded]);
-  const initialFocusIndex = hooks.useMemo(() => value && minDash.findIndex(options, o => o.value === value) || 0, [options, value]);
+  const initialFocusIndex = hooks.useMemo(() => value && minDash.findIndex(options, option => option.value === value) || 0, [options, value]);
   const onInputFocus = hooks.useCallback(() => {
     if (!readonly) {
       setIsDropdownExpanded(true);
@@ -4305,7 +4333,7 @@ function SimpleSelect(props) {
       }), displayState.displayCross && jsxRuntime.jsx("span", {
         class: "fjs-select-cross",
         onMouseDown: e => {
-          setValue(null);
+          pickOption(null);
           e.stopPropagation();
         },
         children: jsxRuntime.jsx(SvgXMark, {})
@@ -4317,10 +4345,10 @@ function SimpleSelect(props) {
       class: "fjs-select-anchor",
       children: displayState.displayDropdown && jsxRuntime.jsx(DropdownList, {
         values: options,
-        getLabel: o => o.label,
+        getLabel: option => option.label,
         initialFocusIndex: initialFocusIndex,
-        onValueSelected: o => {
-          setValue(o);
+        onValueSelected: option => {
+          pickOption(option);
           setIsDropdownExpanded(false);
         },
         listenerElement: selectRef.current
@@ -4399,11 +4427,14 @@ function Select(props) {
 Select.config = {
   type: type$a,
   keyed: true,
-  label: 'Select',
+  name: 'Select',
   group: 'selection',
   emptyValue: null,
   sanitizeValue: sanitizeSingleSelectValue,
-  create: createEmptyOptions
+  create: (options = {}) => ({
+    label: 'Select',
+    ...createEmptyOptions(options)
+  })
 };
 
 const type$9 = 'separator';
@@ -4416,7 +4447,7 @@ function Separator() {
 Separator.config = {
   type: type$9,
   keyed: false,
-  label: 'Separator',
+  name: 'Separator',
   group: 'presentation',
   create: (options = {}) => ({
     ...options
@@ -4441,7 +4472,7 @@ function Spacer(props) {
 Spacer.config = {
   type: type$8,
   keyed: false,
-  label: 'Spacer',
+  name: 'Spacer',
   group: 'presentation',
   create: (options = {}) => ({
     height: 60,
@@ -4487,9 +4518,10 @@ DynamicList.config = {
   type: 'dynamiclist',
   pathed: true,
   repeatable: true,
-  label: 'Dynamic list',
+  name: 'Dynamic list',
   group: 'container',
   create: (options = {}) => ({
+    label: 'Dynamic list',
     components: [],
     showOutline: true,
     isRepeating: true,
@@ -4543,7 +4575,11 @@ function Taglist(props) {
   const [filter, setFilter] = hooks.useState('');
   const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
   const [isEscapeClosed, setIsEscapeClose] = hooks.useState(false);
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const focusScopeRef = hooks.useRef();
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = hooks.useRef();
   const eventBus = useService('eventBus');
   const {
@@ -4732,8 +4768,8 @@ function Taglist(props) {
       class: "fjs-taglist-anchor",
       children: shouldDisplayDropdown && jsxRuntime.jsx(DropdownList, {
         values: filteredOptions,
-        getLabel: o => o.label,
-        onValueSelected: o => selectValue(o.value),
+        getLabel: option => option.label,
+        onValueSelected: option => selectValue(option.value),
         emptyListMessage: hasOptionsLeft ? 'No results' : 'All values selected',
         listenerElement: inputRef.current
       })
@@ -4749,11 +4785,14 @@ function Taglist(props) {
 Taglist.config = {
   type: type$7,
   keyed: true,
-  label: 'Tag list',
+  name: 'Tag list',
   group: 'selection',
   emptyValue: [],
   sanitizeValue: sanitizeMultiSelectValue,
-  create: createEmptyOptions
+  create: (options = {}) => ({
+    label: 'Tag list',
+    ...createEmptyOptions(options)
+  })
 };
 
 const NODE_TYPE_TEXT = 3,
@@ -4778,7 +4817,7 @@ function sanitizeHTML(html) {
   doc.normalize();
   const element = doc.body.firstChild;
   if (element) {
-    sanitizeNode( /** @type Element */element);
+    sanitizeNode(/** @type Element */element);
     return /** @type Element */element.innerHTML;
   } else {
     // handle the case that document parsing
@@ -4835,7 +4874,7 @@ function sanitizeNode(node) {
     node.setAttribute('rel', 'noopener');
   }
   for (let i = node.childNodes.length; i--;) {
-    sanitizeNode( /** @type Element */node.childNodes[i]);
+    sanitizeNode(/** @type Element */node.childNodes[i]);
   }
 }
 
@@ -4922,12 +4961,15 @@ function Text(props) {
 Text.config = {
   type: type$6,
   keyed: false,
-  label: 'Text view',
+  name: 'Text view',
   group: 'presentation',
   create: (options = {}) => ({
     text: '# Text',
     ...options
-  })
+  }),
+  getSubheading: field => {
+    textToLabel(field.text);
+  }
 };
 
 const type$5 = 'html';
@@ -4988,7 +5030,7 @@ function Html(props) {
 Html.config = {
   type: type$5,
   keyed: false,
-  label: 'HTML view',
+  name: 'HTML view',
   group: 'presentation',
   create: (options = {}) => ({
     content: '',
@@ -5034,7 +5076,7 @@ function ExpressionField(props) {
 }
 ExpressionField.config = {
   type: type$4,
-  label: 'Expression',
+  name: 'Expression',
   group: 'basic-input',
   keyed: true,
   emptyValue: null,
@@ -5127,7 +5169,7 @@ function Textfield(props) {
 Textfield.config = {
   type: type$3,
   keyed: true,
-  label: 'Text field',
+  name: 'Text field',
   group: 'basic-input',
   emptyValue: '',
   sanitizeValue: ({
@@ -5144,6 +5186,7 @@ Textfield.config = {
     return String(value);
   },
   create: (options = {}) => ({
+    label: 'Text field',
     ...options
   })
 };
@@ -5232,13 +5275,14 @@ function Textarea(props) {
 Textarea.config = {
   type: type$2,
   keyed: true,
-  label: 'Text area',
+  name: 'Text area',
   group: 'basic-input',
   emptyValue: '',
   sanitizeValue: ({
     value
   }) => minDash.isArray(value) || minDash.isObject(value) || minDash.isNil(value) ? '' : String(value),
   create: (options = {}) => ({
+    label: 'Text area',
     ...options
   })
 };
@@ -5262,7 +5306,7 @@ const autoSizeTextarea = textarea => {
 };
 
 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); }
+function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
 var SvgArrowDown = function SvgArrowDown(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
@@ -5274,7 +5318,7 @@ var SvgArrowDown = function SvgArrowDown(props) {
 };
 
 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); }
+function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
 var SvgArrowUp = function SvgArrowUp(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
@@ -5286,7 +5330,7 @@ var SvgArrowUp = function SvgArrowUp(props) {
 };
 
 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); }
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
 var SvgCaretLeft = function SvgCaretLeft(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
@@ -5299,7 +5343,7 @@ var SvgCaretLeft = function SvgCaretLeft(props) {
 };
 
 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); }
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 var SvgCaretRight = function SvgCaretRight(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
@@ -5350,9 +5394,7 @@ function Table(props) {
     id,
     label
   } = field;
-
-  /** @type {[(null|Sorting), import("preact/hooks").StateUpdater<null|Sorting>]} */
-  const [sortBy, setSortBy] = hooks.useState(null);
+  const [sortBy, setSortBy] = hooks.useState(/** @type {Sorting | null} */null);
   const evaluatedColumns = useEvaluatedColumns(columnsExpression || '', columns);
   const columnKeys = evaluatedColumns.map(({
     key
@@ -5368,6 +5410,12 @@ function Table(props) {
   hooks.useEffect(() => {
     setCurrentPage(0);
   }, [rowCount, sortBy]);
+  const serializeCellData = cellData => {
+    if (cellData !== null && typeof cellData === 'object') {
+      return JSON.stringify(cellData);
+    }
+    return cellData;
+  };
 
   /** @param {string} key */
   function toggleSortBy(key) {
@@ -5451,7 +5499,7 @@ function Table(props) {
               class: "fjs-table-tr",
               children: columnKeys.map(key => jsxRuntime.jsx("td", {
                 class: "fjs-table-td",
-                children: row[key]
+                children: serializeCellData(row[key])
               }, key))
             }, index))
           })]
@@ -5487,7 +5535,7 @@ function Table(props) {
 Table.config = {
   type: type$1,
   keyed: false,
-  label: 'Table',
+  name: 'Table',
   group: 'presentation',
   create: (options = {}) => {
     const {
@@ -5516,6 +5564,7 @@ Table.config = {
     }
     return {
       ...remainingOptions,
+      label: 'Table',
       rowCount: 10,
       columns: [{
         label: 'ID',
@@ -5637,11 +5686,7 @@ function getHeaderAriaLabel(sortBy, key, label) {
   return `Click to sort by ${label} ascending`;
 }
 
-const FILE_PICKER_FILE_KEY_PREFIX = 'files::';
-
 const type = 'filepicker';
-const ids$1 = new Ids();
-const EMPTY_ARRAY$1 = [];
 
 /**
  * @typedef Props
@@ -5655,8 +5700,7 @@ const EMPTY_ARRAY$1 = [];
  * @property {string} field.id
  * @property {string} [field.label]
  * @property {string} [field.accept]
- * @property {string|boolean} [field.multiple]
- * @property {string} [value]
+ * @property {boolean} [field.multiple]
  *
  * @param {Props} props
  * @returns {import("preact").JSX.Element}
@@ -5664,8 +5708,9 @@ const EMPTY_ARRAY$1 = [];
 function FilePicker(props) {
   /** @type {import("preact/hooks").Ref<HTMLInputElement>} */
   const fileInputRef = hooks.useRef(null);
-  /** @type {import('../../FileRegistry').FileRegistry} */
-  const fileRegistry = useService('fileRegistry', false);
+  /** @type {[File[],import("preact/hooks").StateUpdater<File[]>]} */
+  const [selectedFiles, setSelectedFiles] = hooks.useState([]);
+  const eventBus = useService('eventBus');
   const {
     field,
     onChange,
@@ -5673,59 +5718,33 @@ function FilePicker(props) {
     errors = [],
     disabled,
     readonly,
-    required,
-    value: filesKey = ''
+    required
   } = props;
   const {
     label,
-    multiple = false,
-    accept = ''
+    multiple = '',
+    accept = '',
+    id
   } = field;
-  /** @type {string} */
   const evaluatedAccept = useSingleLineTemplateEvaluation(accept);
-  const evaluatedMultiple = useBooleanExpressionEvaluation(multiple);
+  const evaluatedMultiple = useSingleLineTemplateEvaluation(typeof multiple === 'string' ? multiple : multiple.toString()) === 'true';
   const errorMessageId = `${domId}-error-message`;
-  /** @type {File[]} */
-  const selectedFiles = fileRegistry === null ? EMPTY_ARRAY$1 : fileRegistry.getFiles(filesKey);
-  hooks.useEffect(() => {
-    if (filesKey && fileRegistry !== null && !fileRegistry.hasKey(filesKey)) {
-      onChange({
-        value: null
-      });
-    }
-  }, [fileRegistry, filesKey, onChange, selectedFiles.length]);
   hooks.useEffect(() => {
-    const data = new DataTransfer();
-    selectedFiles.forEach(file => data.items.add(file));
-    fileInputRef.current.files = data.files;
-  }, [selectedFiles]);
-
-  /**
-   * @type import("preact").JSX.GenericEventHandler<HTMLInputElement>
-   */
-  const onFileChange = event => {
-    const input = /** @type {HTMLInputElement} */event.target;
-
-    // if we have an associated file key but no files are selected, clear the file key and associated files
-    if ((input.files === null || input.files.length === 0) && filesKey !== '') {
-      fileRegistry.deleteFiles(filesKey);
+    const reset = () => {
+      setSelectedFiles([]);
       onChange({
         value: null
       });
-      return;
-    }
-    const files = Array.from(input.files);
-
-    // ensure fileKey exists
-    const updatedFilesKey = filesKey || ids$1.nextPrefixed(FILE_PICKER_FILE_KEY_PREFIX);
-    fileRegistry.setFiles(updatedFilesKey, files);
-    onChange({
-      value: updatedFilesKey
-    });
-  };
-  const isInputDisabled = disabled || readonly || fileRegistry === null;
+    };
+    eventBus.on('import.done', reset);
+    eventBus.on('reset', reset);
+    return () => {
+      eventBus.off('import.done', reset);
+      eventBus.off('reset', reset);
+    };
+  }, [eventBus, onChange]);
   return jsxRuntime.jsxs("div", {
-    className: formFieldClasses(type, {
+    class: formFieldClasses(type, {
       errors,
       disabled,
       readonly
@@ -5740,17 +5759,29 @@ function FilePicker(props) {
       ref: fileInputRef,
       id: domId,
       name: domId,
-      disabled: isInputDisabled,
-      multiple: evaluatedMultiple || undefined,
-      accept: evaluatedAccept || undefined,
-      onChange: onFileChange
+      multiple: evaluatedMultiple === false ? undefined : evaluatedMultiple,
+      accept: evaluatedAccept === '' ? undefined : evaluatedAccept,
+      onChange: event => {
+        const input = /** @type {HTMLInputElement} */event.target;
+        if (input.files === null || input.files.length === 0) {
+          onChange({
+            value: null
+          });
+          return;
+        }
+        const files = Array.from(input.files);
+        onChange({
+          value: `${id}_value_key`
+        });
+        setSelectedFiles(files);
+      }
     }), jsxRuntime.jsxs("div", {
       className: "fjs-filepicker-container",
       children: [jsxRuntime.jsx("button", {
         type: "button",
-        disabled: isInputDisabled,
+        disabled: disabled,
         readonly: readonly,
-        className: "fjs-button fjs-filepicker-button",
+        class: "fjs-button",
         onClick: () => {
           fileInputRef.current.click();
         },
@@ -5771,6 +5802,11 @@ FilePicker.config = {
   label: 'File picker',
   group: 'basic-input',
   emptyValue: null,
+  sanitizeValue: ({
+    value
+  }) => {
+    return value;
+  },
   create: (options = {}) => ({
     ...options
   })
@@ -5949,7 +5985,7 @@ class FormFields {
   }
 }
 
-const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression', 'accept', 'multiple'];
+const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression'];
 const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url'];
 
 /**
@@ -6167,21 +6203,11 @@ class ConditionChecker {
         // if we have a hidden repeatable field, and the data structure allows, we clear it directly at the root and stop recursion
         if (context.isHidden && isRepeatable) {
           context.preventRecursion = true;
-          this._eventBus.fire('conditionChecker.remove', {
-            item: {
-              [field.key]: minDash.get(workingData, getFilterPath(field, indexes))
-            }
-          });
           this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
         }
 
         // for simple leaf fields, we always clear
         if (context.isHidden && isClosed) {
-          this._eventBus.fire('conditionChecker.remove', {
-            item: {
-              [field.key]: minDash.get(workingData, getFilterPath(field, indexes))
-            }
-          });
           this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
         }
       });
@@ -6913,7 +6939,7 @@ const ViewerCommandsModule = {
 };
 
 var _path$3;
-function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 var SvgExpand = function SvgExpand(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -6927,7 +6953,7 @@ var SvgExpand = function SvgExpand(props) {
 };
 
 var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgCollapse = function SvgCollapse(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -6941,7 +6967,7 @@ var SvgCollapse = function SvgCollapse(props) {
 };
 
 var _path$1, _path2;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgAdd = function SvgAdd(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -6958,7 +6984,7 @@ var SvgAdd = function SvgAdd(props) {
 };
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgDelete = function SvgDelete(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -6975,16 +7001,11 @@ var SvgDelete = function SvgDelete(props) {
 /* eslint-disable react-hooks/rules-of-hooks */
 
 class RepeatRenderManager {
-  constructor(form, formFields, formFieldRegistry, pathRegistry, eventBus) {
+  constructor(form, formFields, formFieldRegistry, pathRegistry) {
     this._form = form;
-    /** @type {import('../../render/FormFields').FormFields} */
     this._formFields = formFields;
-    /** @type {import('../../core/FormFieldRegistry').FormFieldRegistry} */
     this._formFieldRegistry = formFieldRegistry;
-    /** @type {import('../../core/PathRegistry').PathRegistry} */
     this._pathRegistry = pathRegistry;
-    /** @type {import('../../core/EventBus').EventBus} */
-    this._eventBus = eventBus;
     this.Repeater = this.Repeater.bind(this);
     this.RepeatFooter = this.RepeatFooter.bind(this);
   }
@@ -7024,18 +7045,11 @@ class RepeatRenderManager {
     const isCollapsed = collapseEnabled && sharedRepeatState.isCollapsed;
     const hasChildren = repeaterField.components && repeaterField.components.length > 0;
     const showRemove = repeaterField.allowAddRemove && hasChildren;
-
-    /**
-     * @param {number} index
-     */
+    const displayValues = isCollapsed ? values.slice(0, nonCollapsedItems) : values;
+    const hiddenValues = isCollapsed ? values.slice(nonCollapsedItems) : [];
     const onDeleteItem = index => {
       const updatedValues = values.slice();
-      const removedItem = updatedValues.splice(index, 1)[0];
-      this._eventBus.fire('repeatRenderManager.remove', {
-        dataPath,
-        index,
-        item: removedItem
-      });
+      updatedValues.splice(index, 1);
       props.onChange({
         field: repeaterField,
         value: updatedValues,
@@ -7043,13 +7057,21 @@ class RepeatRenderManager {
       });
     };
     const parentExpressionContextInfo = hooks.useContext(LocalExpressionContext);
-    return jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: values.map((itemValue, itemIndex) => jsxRuntime.jsx("div", {
-        class: classNames({
-          'fjs-repeat-row-collapsed': isCollapsed ? itemIndex >= nonCollapsedItems : false
-        }),
-        children: jsxRuntime.jsx(RepetitionScaffold, {
-          itemIndex: itemIndex,
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [displayValues.map((itemValue, itemIndex) => jsxRuntime.jsx(RepetitionScaffold, {
+        itemIndex: itemIndex,
+        itemValue: itemValue,
+        parentExpressionContextInfo: parentExpressionContextInfo,
+        repeaterField: repeaterField,
+        RowsRenderer: RowsRenderer,
+        indexes: indexes,
+        onDeleteItem: onDeleteItem,
+        showRemove: showRemove,
+        ...restProps
+      }, itemIndex)), hiddenValues.length > 0 ? jsxRuntime.jsx("div", {
+        className: "fjs-repeat-row-collapsed",
+        children: hiddenValues.map((itemValue, itemIndex) => jsxRuntime.jsx(RepetitionScaffold, {
+          itemIndex: itemIndex + nonCollapsedItems,
           itemValue: itemValue,
           parentExpressionContextInfo: parentExpressionContextInfo,
           repeaterField: repeaterField,
@@ -7058,8 +7080,8 @@ class RepeatRenderManager {
           onDeleteItem: onDeleteItem,
           showRemove: showRemove,
           ...restProps
-        })
-      }))
+        }, itemIndex))
+      }) : null]
     });
   }
   RepeatFooter(props) {
@@ -7102,11 +7124,6 @@ class RepeatRenderManager {
       });
       updatedValues.push(newItem);
       shouldScroll.current = true;
-      this._eventBus.fire('repeatRenderManager.add', {
-        dataPath,
-        index: updatedValues.length - 1,
-        item: newItem
-      });
       props.onChange({
         value: updatedValues
       });
@@ -7139,7 +7156,7 @@ class RepeatRenderManager {
         class: "fjs-repeat-render-collapse",
         onClick: toggle,
         children: isCollapsed ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [jsxRuntime.jsx(SvgExpand, {}), " ", `Expand all (${values.length - 1})`]
+          children: [jsxRuntime.jsx(SvgExpand, {}), " ", `Expand all (${values.length})`]
         }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(SvgCollapse, {}), " ", 'Collapse']
         })
@@ -7163,7 +7180,7 @@ class RepeatRenderManager {
  * @param {Object} props.itemValue
  * @param {Object} props.parentExpressionContextInfo
  * @param {Object} props.repeaterField
- * @param {Function} props.RowsRenderer
+ * @param {import('preact').FunctionComponent} props.RowsRenderer
  * @param {Object} props.indexes
  * @param {Function} props.onDeleteItem
  * @param {boolean} props.showRemove
@@ -7224,7 +7241,7 @@ const RepetitionScaffold = props => {
     })]
   });
 };
-RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry', 'eventBus'];
+RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry'];
 
 const RepeatRenderModule = {
   __init__: ['repeatRenderManager'],
@@ -8047,7 +8064,7 @@ class FieldFactory {
     this._pathRegistry = pathRegistry;
     this._formFields = formFields;
   }
-  create(attrs, applyDefaults = true) {
+  create(attrs, isNewField = true) {
     const {
       id,
       type,
@@ -8086,13 +8103,12 @@ class FieldFactory {
     })) {
       throw new Error(`binding path '${[...parentPath, ...path.split('.')].join('.')}' is already claimed`);
     }
-    const labelAttrs = applyDefaults && config.label ? {
-      label: config.label
-    } : {};
     const field = config.create({
-      ...labelAttrs,
+      ...(config.label ? {
+        label: config.label
+      } : {}),
       ...attrs
-    });
+    }, isNewField);
     this._ensureId(field);
     if (config.keyed) {
       this._ensureKey(field);
@@ -8615,52 +8631,39 @@ class FormFieldInstanceRegistry {
     this._formFieldInstances = {};
     eventBus.on('form.clear', () => this.clear());
   }
-  syncInstance(instanceId, formFieldInfo) {
+  add(instance) {
     const {
-      hidden,
-      ...restInfo
-    } = formFieldInfo;
-    const isInstanceExpected = !hidden;
-    const doesInstanceExist = this._formFieldInstances[instanceId];
-    if (isInstanceExpected && !doesInstanceExist) {
-      this._formFieldInstances[instanceId] = {
-        instanceId,
-        ...restInfo
-      };
-      this._eventBus.fire('formFieldInstance.added', {
-        instanceId
-      });
-    } else if (!isInstanceExpected && doesInstanceExist) {
-      delete this._formFieldInstances[instanceId];
-      this._eventBus.fire('formFieldInstance.removed', {
-        instanceId
-      });
-    } else if (isInstanceExpected && doesInstanceExist) {
-      const wasInstanceChaged = Object.keys(restInfo).some(key => {
-        return this._formFieldInstances[instanceId][key] !== restInfo[key];
-      });
-      if (wasInstanceChaged) {
-        this._formFieldInstances[instanceId] = {
-          instanceId,
-          ...restInfo
-        };
-        this._eventBus.fire('formFieldInstance.changed', {
-          instanceId
-        });
-      }
+      id,
+      expressionContextInfo,
+      valuePath,
+      indexes
+    } = instance;
+    const instanceId = [id, ...Object.values(indexes || {})].join('_');
+    if (this._formFieldInstances[instanceId]) {
+      throw new Error('this form field instance is already registered');
     }
+    this._formFieldInstances[instanceId] = {
+      id,
+      instanceId,
+      expressionContextInfo,
+      valuePath,
+      indexes
+    };
+    this._eventBus.fire('formFieldInstanceRegistry.changed', {
+      instanceId,
+      action: 'added'
+    });
     return instanceId;
   }
-  cleanupInstance(instanceId) {
-    if (this._formFieldInstances[instanceId]) {
-      delete this._formFieldInstances[instanceId];
-      this._eventBus.fire('formFieldInstance.removed', {
-        instanceId
-      });
+  remove(instanceId) {
+    if (!this._formFieldInstances[instanceId]) {
+      return;
     }
-  }
-  get(instanceId) {
-    return this._formFieldInstances[instanceId];
+    delete this._formFieldInstances[instanceId];
+    this._eventBus.fire('formFieldInstanceRegistry.changed', {
+      instanceId,
+      action: 'removed'
+    });
   }
   getAll() {
     return Object.values(this._formFieldInstances);
@@ -8740,122 +8743,10 @@ function Renderer(config, eventBus, form, injector) {
 }
 Renderer.$inject = ['config.renderer', 'eventBus', 'form', 'injector'];
 
-/**
- * @typedef {Record<PropertyKey, unknown>} RemovedData
- * @param {RemovedData} removedData
- * @returns {string[]}
- */
-const extractFileReferencesFromRemovedData = removedData => {
-  /** @type {string[]} */
-  const fileReferences = [];
-  if (removedData === null) {
-    return fileReferences;
-  }
-  Object.values(removedData).forEach(value => {
-    if (value === null) {
-      return;
-    }
-    if (typeof value === 'object') {
-      fileReferences.push(...extractFileReferencesFromRemovedData( /** @type {RemovedData} */value));
-    } else if (Array.isArray(value)) {
-      fileReferences.push(...value.map(extractFileReferencesFromRemovedData).flat());
-    } else if (typeof value === 'string' && value.startsWith(FILE_PICKER_FILE_KEY_PREFIX)) {
-      fileReferences.push(value);
-    }
-  });
-  return fileReferences;
-};
-
-const fileRegistry = Symbol('fileRegistry');
-const eventBusSymbol = Symbol('eventBus');
-const formFieldRegistrySymbol = Symbol('formFieldRegistry');
-const formFieldInstanceRegistrySymbol = Symbol('formFieldInstanceRegistry');
-const EMPTY_ARRAY = [];
-class FileRegistry {
-  /**
-   * @param {import('../core/EventBus').EventBus} eventBus
-   * @param {import('../core/FormFieldRegistry').FormFieldRegistry} formFieldRegistry
-   * @param {import('../core/FormFieldInstanceRegistry').FormFieldInstanceRegistry} formFieldInstanceRegistry
-   */
-  constructor(eventBus, formFieldRegistry, formFieldInstanceRegistry) {
-    /** @type {Map<string, File[]>} */
-    this[fileRegistry] = new Map();
-    /** @type {import('../core/EventBus').EventBus} */
-    this[eventBusSymbol] = eventBus;
-    /** @type {import('../core/FormFieldRegistry').FormFieldRegistry} */
-    this[formFieldRegistrySymbol] = formFieldRegistry;
-    /** @type {import('../core/FormFieldInstanceRegistry').FormFieldInstanceRegistry} */
-    this[formFieldInstanceRegistrySymbol] = formFieldInstanceRegistry;
-    const removeFileHandler = ({
-      item
-    }) => {
-      const fileReferences = extractFileReferencesFromRemovedData(item);
-
-      // Remove all file references from the registry
-      fileReferences.forEach(fileReference => {
-        this.deleteFiles(fileReference);
-      });
-    };
-    eventBus.on('form.clear', () => this.clear());
-    eventBus.on('conditionChecker.remove', removeFileHandler);
-    eventBus.on('repeatRenderManager.remove', removeFileHandler);
-  }
-
-  /**
-   * @param {string} id
-   * @param {File[]} files
-   */
-  setFiles(id, files) {
-    this[fileRegistry].set(id, files);
-  }
-
-  /**
-   * @param {string} id
-   * @returns {File[]}
-   */
-  getFiles(id) {
-    return this[fileRegistry].get(id) || EMPTY_ARRAY;
-  }
-
-  /**
-   * @returns {string[]}
-   */
-  getKeys() {
-    return Array.from(this[fileRegistry].keys());
-  }
-
-  /**
-   * @param {string} id
-   * @returns {boolean}
-   */
-  hasKey(id) {
-    return this[fileRegistry].has(id);
-  }
-
-  /**
-   * @param {string} id
-   */
-  deleteFiles(id) {
-    this[fileRegistry].delete(id);
-  }
-
-  /**
-   * @returns {Map<string, File[]>}
-   */
-  getAllFiles() {
-    return new Map(this[fileRegistry]);
-  }
-  clear() {
-    this[fileRegistry].clear();
-  }
-}
-FileRegistry.$inject = ['eventBus', 'formFieldRegistry', 'formFieldInstanceRegistry'];
-
 const RenderModule = {
   __init__: ['formFields', 'renderer'],
   formFields: ['type', FormFields],
-  renderer: ['type', Renderer],
-  fileRegistry: ['type', FileRegistry]
+  renderer: ['type', Renderer]
 };
 
 const CoreModule = {
@@ -9008,7 +8899,7 @@ class Form {
   /**
    * Submit the form, triggering all field validations.
    *
-   * @returns { { data: Data, errors: Errors, files: Map<string, File[]> } }
+   * @returns { { data: Data, errors: Errors } }
    */
   submit() {
     const {
@@ -9020,11 +8911,9 @@ class Form {
     this._emit('presubmit');
     const data = this._getSubmitData();
     const errors = this.validate();
-    const files = this.get('fileRegistry').getAllFiles();
     const result = {
       data,
-      errors,
-      files
+      errors
     };
     this._emit('submit', result);
     return result;
@@ -9343,7 +9232,7 @@ class Form {
   }
 }
 
-const schemaVersion = 16;
+const schemaVersion = 17;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions