@bpmn-io/form-js-viewer 1.5.0 → 1.6.0

package/dist/index.es.js

@@ -1,17 +1,17 @@
 import Ids from 'ids';
-import { isString, get, isNumber, set, findIndex, isArray, isObject, isNil, values, uniqueBy, isFunction, bind, assign, groupBy, flatten, isUndefined } from 'min-dash';
+import { isString, get, some, isNumber, set, findIndex, isArray, isObject, isNil, isDefined, values, uniqueBy, isFunction, bind, assign, groupBy, flatten, isUndefined } from 'min-dash';
 import Big from 'big.js';
-import { parseExpression, parseUnaryTests, evaluate, unaryTest } from 'feelin';
-import { evaluate as evaluate$1, parser, buildSimpleTree } from 'feelers';
 import classNames from 'classnames';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
 import { useContext, useMemo, useEffect, useRef, useState, useCallback, useLayoutEffect } from 'preact/hooks';
-import { createContext, createElement, Fragment, render } from 'preact';
+import { createContext, createElement, Fragment as Fragment$1, render } from 'preact';
+import flatpickr from 'flatpickr';
 import * as React from 'preact/compat';
 import { createPortal } from 'preact/compat';
-import flatpickr from 'flatpickr';
 import Markup from 'preact-markup';
 import { Injector } from 'didi';
+import { parseExpression, parseUnaryTests, evaluate, unaryTest } from 'feelin';
+import { evaluate as evaluate$1, parser, buildSimpleTree } from 'feelers';
 import showdown from 'showdown';
 
 const getFlavouredFeelVariableNames = (feelString, feelFlavour = 'expression', options = {}) => {
@@ -393,6 +393,92 @@ class FeelersTemplating {
 }
 FeelersTemplating.$inject = [];
 
+// config  ///////////////////
+
+const MINUTES_IN_DAY = 60 * 24;
+const DATETIME_SUBTYPES = {
+  DATE: 'date',
+  TIME: 'time',
+  DATETIME: 'datetime'
+};
+const TIME_SERIALISING_FORMATS = {
+  UTC_OFFSET: 'utc_offset',
+  UTC_NORMALIZED: 'utc_normalized',
+  NO_TIMEZONE: 'no_timezone'
+};
+const DATETIME_SUBTYPES_LABELS = {
+  [DATETIME_SUBTYPES.DATE]: 'Date',
+  [DATETIME_SUBTYPES.TIME]: 'Time',
+  [DATETIME_SUBTYPES.DATETIME]: 'Date & Time'
+};
+const TIME_SERIALISINGFORMAT_LABELS = {
+  [TIME_SERIALISING_FORMATS.UTC_OFFSET]: 'UTC offset',
+  [TIME_SERIALISING_FORMATS.UTC_NORMALIZED]: 'UTC normalized',
+  [TIME_SERIALISING_FORMATS.NO_TIMEZONE]: 'No timezone'
+};
+const DATETIME_SUBTYPE_PATH = ['subtype'];
+const DATE_LABEL_PATH = ['dateLabel'];
+const DATE_DISALLOW_PAST_PATH = ['disallowPassedDates'];
+const TIME_LABEL_PATH = ['timeLabel'];
+const TIME_USE24H_PATH = ['use24h'];
+const TIME_INTERVAL_PATH = ['timeInterval'];
+const TIME_SERIALISING_FORMAT_PATH = ['timeSerializingFormat'];
+
+// config  ///////////////////
+
+const OPTIONS_SOURCES = {
+  STATIC: 'static',
+  INPUT: 'input',
+  EXPRESSION: 'expression'
+};
+const OPTIONS_SOURCE_DEFAULT = OPTIONS_SOURCES.STATIC;
+const OPTIONS_SOURCES_LABELS = {
+  [OPTIONS_SOURCES.STATIC]: 'Static',
+  [OPTIONS_SOURCES.INPUT]: 'Input data',
+  [OPTIONS_SOURCES.EXPRESSION]: 'Expression'
+};
+const OPTIONS_SOURCES_PATHS = {
+  [OPTIONS_SOURCES.STATIC]: ['values'],
+  [OPTIONS_SOURCES.INPUT]: ['valuesKey'],
+  [OPTIONS_SOURCES.EXPRESSION]: ['valuesExpression']
+};
+const OPTIONS_SOURCES_DEFAULTS = {
+  [OPTIONS_SOURCES.STATIC]: [{
+    label: 'Value',
+    value: 'value'
+  }],
+  [OPTIONS_SOURCES.INPUT]: '',
+  [OPTIONS_SOURCES.EXPRESSION]: '='
+};
+
+// helpers ///////////////////
+
+function getOptionsSource(field) {
+  for (const source of Object.values(OPTIONS_SOURCES)) {
+    if (get(field, OPTIONS_SOURCES_PATHS[source]) !== undefined) {
+      return source;
+    }
+  }
+  return OPTIONS_SOURCE_DEFAULT;
+}
+
+function createInjector(bootstrapModules) {
+  const injector = new Injector(bootstrapModules);
+  injector.init();
+  return injector;
+}
+
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
+ */
+function createFormContainer(prefix = 'fjs') {
+  const container = document.createElement('div');
+  container.classList.add(`${prefix}-container`);
+  return container;
+}
+
 function formFieldClasses(type, {
   errors = [],
   disabled = false,
@@ -418,14 +504,19 @@ function gridColumnClasses(formField) {
   // always fall back to top-down on smallest screens
   'cds--col-sm-16', 'cds--col-md-16');
 }
-function prefixId(id, formId) {
+function prefixId(id, formId, indexes) {
+  let result = 'fjs-form';
   if (formId) {
-    return `fjs-form-${formId}-${id}`;
+    result += `-${formId}`;
   }
-  return `fjs-form-${id}`;
+  result += `-${id}`;
+  Object.values(indexes || {}).forEach(index => {
+    result += `_${index}`;
+  });
+  return result;
 }
 
-const type$e = 'button';
+const type$f = 'button';
 function Button(props) {
   const {
     disabled,
@@ -437,7 +528,7 @@ function Button(props) {
     action = 'submit'
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$e),
+    class: formFieldClasses(type$f),
     children: jsx("button", {
       class: "fjs-button",
       type: action,
@@ -449,7 +540,7 @@ function Button(props) {
   });
 }
 Button.config = {
-  type: type$e,
+  type: type$f,
   keyed: false,
   label: 'Button',
   group: 'action',
@@ -460,27 +551,30 @@ Button.config = {
 };
 
 const FormRenderContext = createContext({
-  EmptyRoot: props => {
+  Empty: props => {
     return null;
   },
-  Empty: props => {
+  Hidden: props => {
     return null;
   },
   Children: props => {
     return jsx("div", {
       class: props.class,
+      style: props.style,
       children: props.children
     });
   },
   Element: props => {
     return jsx("div", {
       class: props.class,
+      style: props.style,
       children: props.children
     });
   },
   Row: props => {
     return jsx("div", {
       class: props.class,
+      style: props.style,
       children: props.children
     });
   },
@@ -490,16 +584,24 @@ const FormRenderContext = createContext({
     }
     return jsx("div", {
       class: props.class,
+      style: props.style,
       children: props.children
     });
   },
-  hoveredId: [],
-  setHoveredId: newValue => {
-    console.log(`setHoveredId not defined, called with '${newValue}'`);
+  hoverInfo: {
+    cleanup: () => {}
   }
 });
 var FormRenderContext$1 = FormRenderContext;
 
+const LocalExpressionContext = createContext({
+  data: null,
+  this: null,
+  parent: null,
+  i: null
+});
+var LocalExpressionContext$1 = LocalExpressionContext;
+
 /**
  * @param {string} type
  * @param {boolean} [strict]
@@ -520,24 +622,77 @@ function useService(type, strict) {
   return getService(type, strict);
 }
 
+function isRequired(field) {
+  return field.required;
+}
+function pathParse(path) {
+  if (!path) {
+    return [];
+  }
+  return path.split('.').map(key => {
+    return isNaN(parseInt(key)) ? key : parseInt(key);
+  });
+}
+function pathsEqual(a, b) {
+  return a && b && a.length === b.length && a.every((value, index) => value === b[index]);
+}
+const indices = {};
+function generateIndexForType(type) {
+  if (type in indices) {
+    indices[type]++;
+  } else {
+    indices[type] = 1;
+  }
+  return indices[type];
+}
+function generateIdForType(type) {
+  return `${type}${generateIndexForType(type)}`;
+}
+
 /**
- * Returns the conditionally filtered data of a form reactively.
- * Memoised to minimize re-renders
+ * @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));
+}
+
+/**
+ * Transform a LocalExpressionContext object into a usable FEEL context.
  *
+ * @param {Object} context - The LocalExpressionContext object.
+ * @returns {Object} The usable FEEL context.
  */
-function useFilteredFormData() {
+
+function buildExpressionContext(context) {
   const {
-    initialData,
-    data
-  } = useService('form')._getState();
-  const conditionChecker = useService('conditionChecker', false);
-  return useMemo(() => {
-    const newData = conditionChecker ? conditionChecker.applyConditions(data, data) : data;
-    return {
-      ...initialData,
-      ...newData
-    };
-  }, [conditionChecker, data, initialData]);
+    data,
+    ...specialContextKeys
+  } = context;
+  return {
+    ...specialContextKeys,
+    ...data,
+    ..._wrapObjectKeysWithUnderscores(specialContextKeys)
+  };
+}
+function runRecursively(formField, fn) {
+  const components = formField.components || [];
+  components.forEach((component, index) => {
+    runRecursively(component, fn);
+  });
+  fn(formField);
+}
+
+// helpers //////////////////////
+
+function _wrapObjectKeysWithUnderscores(obj) {
+  const newObj = {};
+  for (const [key, value] of Object.entries(obj)) {
+    newObj[`_${key}_`] = value;
+  }
+  return newObj;
 }
 
 /**
@@ -549,29 +704,125 @@ function useFilteredFormData() {
  */
 function useCondition(condition) {
   const conditionChecker = useService('conditionChecker', false);
-  const filteredData = useFilteredFormData();
+  const expressionContextInfo = useContext(LocalExpressionContext$1);
   return useMemo(() => {
-    return conditionChecker ? conditionChecker.check(condition, filteredData) : null;
-  }, [conditionChecker, condition, filteredData]);
+    return conditionChecker ? conditionChecker.check(condition, buildExpressionContext(expressionContextInfo)) : null;
+  }, [conditionChecker, condition, expressionContextInfo]);
+}
+
+/**
+ * Custom hook to scroll an element into view only when it is not visible within the viewport.
+ *
+ * @param {Object} targetRef - A ref pointing to the DOM element to scroll into view.
+ * @param {Array} deps - An array of dependencies that trigger the effect.
+ * @param {Array} flagRefs - An array of refs that are used as flags to control when to scroll.
+ * @param {Object} [scrollOptions={}] - Options defining the behavior of the scrolling.
+ * @param {String} [scrollOptions.align='center'] - The alignment of the element within the viewport.
+ * @param {String} [scrollOptions.behavior='auto'] - The scrolling behavior.
+ * @param {Number} [scrollOptions.offset=0] - An offset that is added to the scroll position.
+ * @param {Boolean} [scrollOptions.scrollIfVisible=false] - Whether to scroll even if the element is visible.
+ */
+function useScrollIntoView(targetRef, deps, scrollOptions = null, flagRefs = []) {
+  useEffect(() => {
+    // return early if flags are not raised, or component is not mounted
+    if (some(flagRefs, ref => !ref.current) || !targetRef.current) {
+      return;
+    }
+    for (let i = 0; i < flagRefs.length; i++) {
+      flagRefs[i].current = false;
+    }
+    const itemToBeScrolled = targetRef.current;
+    const scrollContainer = _getNearestScrollableAncestor(itemToBeScrolled);
+    if (!scrollContainer) {
+      return;
+    }
+    const itemRect = itemToBeScrolled.getBoundingClientRect();
+    const containerRect = scrollContainer.getBoundingClientRect();
+
+    // should scroll if visible or scrollIfVisible option is set
+    const shouldScroll = scrollOptions.scrollIfVisible || !(itemRect.top >= containerRect.top && itemRect.bottom <= containerRect.bottom);
+    if (!shouldScroll) {
+      return;
+    }
+    const {
+      align = 'center',
+      offset = 0,
+      behavior = 'auto'
+    } = scrollOptions;
+    const topOffset = _getTopOffset(itemToBeScrolled, scrollContainer, {
+      align,
+      offset
+    });
+    scrollContainer.scroll({
+      top: topOffset,
+      behavior
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}
+
+// helper //////////////////////
+
+function _getNearestScrollableAncestor(el) {
+  while (el) {
+    if (el.scrollHeight > el.clientHeight) {
+      return el;
+    }
+    el = el.parentElement;
+  }
+}
+function _getTopOffset(item, scrollContainer, options) {
+  const itemRect = item.getBoundingClientRect();
+  const containerRect = scrollContainer.getBoundingClientRect();
+  if (options.align === 'top') {
+    return itemRect.top - containerRect.top + scrollContainer.scrollTop - options.offset;
+  } else if (options.align === 'bottom') {
+    return itemRect.bottom - containerRect.top - scrollContainer.clientHeight + scrollContainer.scrollTop + options.offset;
+  } else if (options.align === 'center') {
+    return itemRect.top - containerRect.top - scrollContainer.clientHeight / 2 + scrollContainer.scrollTop + itemRect.height / 2 + options.offset;
+  }
+  return 0;
 }
 
 /**
  * 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
+ * The function is memoized to minimize re-renders.
  *
+ * @param {string} value - The string to evaluate.
+ * @returns {any} - Evaluated value or the original value if not an expression.
  */
 function useExpressionEvaluation(value) {
-  const formData = useFilteredFormData();
   const expressionLanguage = useService('expressionLanguage');
+  const expressionContextInfo = useContext(LocalExpressionContext$1);
   return useMemo(() => {
     if (expressionLanguage && expressionLanguage.isExpression(value)) {
-      return expressionLanguage.evaluate(value, formData);
+      return expressionLanguage.evaluate(value, buildExpressionContext(expressionContextInfo));
     }
     return value;
-  }, [expressionLanguage, formData, value]);
+  }, [expressionLanguage, expressionContextInfo, value]);
+}
+
+/**
+ * Returns the conditionally filtered data of a form reactively.
+ * Memoised to minimize re-renders
+ *
+ * Warning: costly operation, use with care
+ */
+function useFilteredFormData() {
+  const {
+    initialData,
+    data
+  } = useService('form')._getState();
+  const conditionChecker = useService('conditionChecker', false);
+  return useMemo(() => {
+    const newData = conditionChecker ? conditionChecker.applyConditions(data, data) : data;
+    return {
+      ...initialData,
+      ...newData
+    };
+  }, [conditionChecker, data, initialData]);
 }
 
 function useKeyDownAction(targetKey, action, listenerElement = window) {
@@ -604,7 +855,7 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
 function useReadonly(formField, properties = {}) {
   const expressionLanguage = useService('expressionLanguage');
   const conditionChecker = useService('conditionChecker', false);
-  const filteredData = useFilteredFormData();
+  const expressionContextInfo = useContext(LocalExpressionContext$1);
   const {
     readonly
   } = formField;
@@ -612,7 +863,7 @@ function useReadonly(formField, properties = {}) {
     return true;
   }
   if (expressionLanguage && expressionLanguage.isExpression(readonly)) {
-    return conditionChecker ? conditionChecker.check(readonly, filteredData) : false;
+    return conditionChecker ? conditionChecker.check(readonly, buildExpressionContext(expressionContextInfo)) : false;
   }
   return readonly || false;
 }
@@ -659,15 +910,15 @@ function compare(a, b) {
  * @param {Function} [options.buildDebugString]
  *
  */
-function useTemplateEvaluation(value, options) {
-  const filteredData = useFilteredFormData();
+function useTemplateEvaluation(value, options = {}) {
   const templating = useService('templating');
+  const expressionContextInfo = useContext(LocalExpressionContext$1);
   return useMemo(() => {
     if (templating && templating.isTemplate(value)) {
-      return templating.evaluate(value, filteredData, options);
+      return templating.evaluate(value, buildExpressionContext(expressionContextInfo), options);
     }
     return value;
-  }, [filteredData, templating, value, options]);
+  }, [templating, value, expressionContextInfo, options]);
 }
 
 /**
@@ -747,11 +998,13 @@ function Label(props) {
   });
 }
 
-const type$d = 'checkbox';
+const type$e = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
     errors = [],
+    errorMessageId,
+    domId,
     onBlur,
     onFocus,
     field,
@@ -760,7 +1013,6 @@ function Checkbox(props) {
   } = props;
   const {
     description,
-    id,
     label,
     validate = {}
   } = field;
@@ -775,12 +1027,8 @@ function Checkbox(props) {
       value: target.checked
     });
   };
-  const {
-    formId
-  } = useContext(FormContext$1);
-  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$d, {
+    class: classNames(formFieldClasses(type$e, {
       errors,
       disabled,
       readonly
@@ -788,7 +1036,7 @@ function Checkbox(props) {
       'fjs-checked': value
     }),
     children: [jsx(Label, {
-      id: prefixId(id, formId),
+      id: domId,
       label: label,
       required: required,
       children: jsx("input", {
@@ -796,7 +1044,7 @@ function Checkbox(props) {
         class: "fjs-input",
         disabled: disabled,
         readOnly: readonly,
-        id: prefixId(id, formId),
+        id: domId,
         type: "checkbox",
         onChange: onChange,
         onBlur: () => onBlur && onBlur(),
@@ -812,7 +1060,7 @@ function Checkbox(props) {
   });
 }
 Checkbox.config = {
-  type: type$d,
+  type: type$e,
   keyed: true,
   label: 'Checkbox',
   group: 'selection',
@@ -986,37 +1234,6 @@ function useCleanupMultiSelectValues (props) {
   }, [field, options, onChange, JSON.stringify(values), loadState]);
 }
 
-// config  ///////////////////
-
-const MINUTES_IN_DAY = 60 * 24;
-const DATETIME_SUBTYPES = {
-  DATE: 'date',
-  TIME: 'time',
-  DATETIME: 'datetime'
-};
-const TIME_SERIALISING_FORMATS = {
-  UTC_OFFSET: 'utc_offset',
-  UTC_NORMALIZED: 'utc_normalized',
-  NO_TIMEZONE: 'no_timezone'
-};
-const DATETIME_SUBTYPES_LABELS = {
-  [DATETIME_SUBTYPES.DATE]: 'Date',
-  [DATETIME_SUBTYPES.TIME]: 'Time',
-  [DATETIME_SUBTYPES.DATETIME]: 'Date & Time'
-};
-const TIME_SERIALISINGFORMAT_LABELS = {
-  [TIME_SERIALISING_FORMATS.UTC_OFFSET]: 'UTC offset',
-  [TIME_SERIALISING_FORMATS.UTC_NORMALIZED]: 'UTC normalized',
-  [TIME_SERIALISING_FORMATS.NO_TIMEZONE]: 'No timezone'
-};
-const DATETIME_SUBTYPE_PATH = ['subtype'];
-const DATE_LABEL_PATH = ['dateLabel'];
-const DATE_DISALLOW_PAST_PATH = ['disallowPassedDates'];
-const TIME_LABEL_PATH = ['timeLabel'];
-const TIME_USE24H_PATH = ['use24h'];
-const TIME_INTERVAL_PATH = ['timeInterval'];
-const TIME_SERIALISING_FORMAT_PATH = ['timeSerializingFormat'];
-
 const ENTER_KEYDOWN_EVENT = new KeyboardEvent('keydown', {
   code: 'Enter',
   key: 'Enter',
@@ -1223,11 +1440,13 @@ function sanitizeMultiSelectValue(options) {
   }
 }
 
-const type$c = 'checklist';
+const type$d = 'checklist';
 function Checklist(props) {
   const {
     disabled,
     errors = [],
+    errorMessageId,
+    domId,
     onBlur,
     onFocus,
     field,
@@ -1236,7 +1455,6 @@ function Checklist(props) {
   } = props;
   const {
     description,
-    id,
     label,
     validate = {}
   } = field;
@@ -1279,12 +1497,8 @@ function Checklist(props) {
     values,
     onChange: props.onChange
   });
-  const {
-    formId
-  } = useContext(FormContext$1);
-  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$c, {
+    class: classNames(formFieldClasses(type$d, {
       errors,
       disabled,
       readonly
@@ -1293,27 +1507,28 @@ function Checklist(props) {
     children: [jsx(Label, {
       label: label,
       required: required
-    }), loadState == LOAD_STATES.LOADED && options.map((v, index) => {
+    }), loadState == LOAD_STATES.LOADED && options.map((o, index) => {
+      const itemDomId = `${domId}-${index}`;
       return jsx(Label, {
-        id: prefixId(`${id}-${index}`, formId),
-        label: v.label,
+        id: itemDomId,
+        label: o.label,
         class: classNames({
-          'fjs-checked': values.includes(v.value)
+          'fjs-checked': values.includes(o.value)
         }),
         required: false,
         children: jsx("input", {
-          checked: values.includes(v.value),
+          checked: values.includes(o.value),
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
-          id: prefixId(`${id}-${index}`, formId),
+          id: itemDomId,
           type: "checkbox",
-          onClick: () => toggleCheckbox(v.value),
+          onClick: () => toggleCheckbox(o.value),
           onBlur: onCheckboxBlur,
           onFocus: onCheckboxFocus,
           "aria-describedby": errorMessageId
         })
-      }, `${id}-${index}`);
+      });
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
@@ -1323,7 +1538,7 @@ function Checklist(props) {
   });
 }
 Checklist.config = {
-  type: type$c,
+  type: type$d,
   keyed: true,
   label: 'Checkbox group',
   group: 'selection',
@@ -1336,6 +1551,7 @@ const noop$1 = () => false;
 function FormField(props) {
   const {
     field,
+    indexes,
     onChange
   } = props;
   const formFields = useService('formFields'),
@@ -1351,14 +1567,19 @@ function FormField(props) {
   } = form._getState();
   const {
     Element,
-    Empty,
+    Hidden,
     Column
   } = useContext(FormRenderContext$1);
+  const {
+    formId
+  } = useContext(FormContext$1);
   const FormFieldComponent = formFields.get(field.type);
   if (!FormFieldComponent) {
     throw new Error(`cannot render field <${field.type}>`);
   }
-  const valuePath = useMemo(() => pathRegistry.getValuePath(field), [field, pathRegistry]);
+  const valuePath = useMemo(() => pathRegistry.getValuePath(field, {
+    indexes
+  }), [field, indexes, pathRegistry]);
   const initialValue = useMemo(() => get(initialData, valuePath), [initialData, valuePath]);
   const readonly = useReadonly(field, properties);
   const value = get(data, valuePath);
@@ -1367,12 +1588,12 @@ function FormField(props) {
   const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
   const onBlur = useCallback(() => {
     if (viewerCommands) {
-      viewerCommands.updateFieldValidation(field, value);
+      viewerCommands.updateFieldValidation(field, value, indexes);
     }
     eventBus.fire('formField.blur', {
       formField: field
     });
-  }, [eventBus, viewerCommands, field, value]);
+  }, [eventBus, viewerCommands, field, value, indexes]);
   const onFocus = useCallback(() => {
     eventBus.fire('formField.focus', {
       formField: field
@@ -1380,13 +1601,25 @@ function FormField(props) {
   }, [eventBus, field]);
   useEffect(() => {
     if (viewerCommands && initialValue) {
-      viewerCommands.updateFieldValidation(field, initialValue);
+      viewerCommands.updateFieldValidation(field, initialValue, indexes);
     }
-  }, [viewerCommands, field, initialValue]);
+  }, [viewerCommands, field, initialValue, JSON.stringify(indexes)]);
   const hidden = useCondition(field.conditional && field.conditional.hide || null);
+  const onChangeIndexed = useCallback(update => {
+    // add indexes of the keyed field to the update, if any
+    onChange(FormFieldComponent.config.keyed ? {
+      ...update,
+      indexes
+    } : update);
+  }, [onChange, FormFieldComponent.config.keyed, indexes]);
   if (hidden) {
-    return jsx(Empty, {});
+    return jsx(Hidden, {
+      field: field
+    });
   }
+  const domId = `${prefixId(field.id, formId, indexes)}`;
+  const fieldErrors = get(errors, [field.id, ...Object.values(indexes || {})]) || [];
+  const errorMessageId = errors.length === 0 ? undefined : `${domId}-error-message`;
   return jsx(Column, {
     field: field,
     class: gridColumnClasses(field),
@@ -1396,8 +1629,10 @@ function FormField(props) {
       children: jsx(FormFieldComponent, {
         ...props,
         disabled: disabled,
-        errors: errors[field.id],
-        onChange: disabled || readonly ? noop$1 : onChange,
+        errors: fieldErrors,
+        errorMessageId: errorMessageId,
+        domId: domId,
+        onChange: disabled || readonly ? noop$1 : onChangeIndexed,
         onBlur: disabled || readonly ? noop$1 : onBlur,
         onFocus: disabled || readonly ? noop$1 : onFocus,
         readonly: readonly,
@@ -1407,60 +1642,147 @@ function FormField(props) {
   });
 }
 
-function Grid(props) {
+function ChildrenRenderer(props) {
   const {
-    Children,
-    Row
+    Children
   } = useContext(FormRenderContext$1);
   const {
     field,
     Empty
   } = props;
   const {
-    id,
-    components = []
+    id
   } = field;
-  const formLayouter = useService('formLayouter');
-  const formFieldRegistry = useService('formFieldRegistry');
-  const rows = formLayouter.getRows(id);
-  return jsxs(Children, {
-    class: "fjs-vertical-layout fjs-children cds--grid cds--grid--condensed",
-    field: field,
-    children: [rows.map(row => {
-      const {
-        components = []
-      } = row;
-      if (!components.length) {
+  const repeatRenderManager = useService('repeatRenderManager', false);
+  const isRepeating = repeatRenderManager && repeatRenderManager.isFieldRepeating(id);
+  const Repeater = repeatRenderManager.Repeater;
+  const RepeatFooter = repeatRenderManager.RepeatFooter;
+  return isRepeating ? jsx(RepeatChildrenRenderer, {
+    ...props,
+    ChildrenRoot: Children,
+    Empty,
+    Repeater,
+    RepeatFooter,
+    repeatRenderManager
+  }) : jsx(SimpleChildrenRenderer, {
+    ...props,
+    ChildrenRoot: Children,
+    Empty
+  });
+}
+function SimpleChildrenRenderer(props) {
+  const {
+    ChildrenRoot,
+    Empty,
+    field
+  } = props;
+  const {
+    components = []
+  } = field;
+  const isEmpty = !components.length;
+  return jsxs(ChildrenRoot, {
+    class: "fjs-vertical-layout fjs-children cds--grid cds--grid--condensed",
+    field: field,
+    children: [jsx(RowsRenderer, {
+      ...props
+    }), isEmpty ? jsx(Empty, {
+      field: field
+    }) : null]
+  });
+}
+function RepeatChildrenRenderer(props) {
+  const {
+    ChildrenRoot,
+    repeatRenderManager,
+    Empty,
+    field,
+    ...restProps
+  } = props;
+  const {
+    components = []
+  } = field;
+  const useSharedState = useState({
+    isCollapsed: true
+  });
+  const Repeater = repeatRenderManager.Repeater;
+  const RepeatFooter = repeatRenderManager.RepeatFooter;
+  return jsxs(Fragment, {
+    children: [jsxs(ChildrenRoot, {
+      class: "fjs-vertical-layout fjs-children cds--grid cds--grid--condensed",
+      field: field,
+      children: [Repeater ? jsx(Repeater, {
+        ...restProps,
+        useSharedState,
+        field,
+        RowsRenderer
+      }) : jsx(RowsRenderer, {
+        ...restProps,
+        field
+      }), !components.length ? jsx(Empty, {
+        field: field
+      }) : null]
+    }), RepeatFooter ? jsx(RepeatFooter, {
+      ...restProps,
+      useSharedState,
+      field
+    }) : null]
+  });
+}
+function RowsRenderer(props) {
+  const {
+    field,
+    indexes
+  } = props;
+  const {
+    id: parentId,
+    verticalAlignment = 'start'
+  } = field;
+  const formLayouter = useService('formLayouter');
+  const formFieldRegistry = useService('formFieldRegistry');
+  const rows = formLayouter.getRows(parentId);
+  const {
+    Row
+  } = useContext(FormRenderContext$1);
+  return jsxs(Fragment, {
+    children: [" ", rows.map(row => {
+      const {
+        components = []
+      } = row;
+      if (!components.length) {
         return null;
       }
       return jsx(Row, {
         row: row,
         class: "fjs-layout-row cds--row",
-        children: components.map(id => {
-          const childField = formFieldRegistry.get(id);
+        style: {
+          alignItems: verticalAlignment
+        },
+        children: components.map(childId => {
+          const childField = formFieldRegistry.get(childId);
           if (!childField) {
             return null;
           }
           return createElement(FormField, {
             ...props,
-            key: childField.id,
-            field: childField
+            key: childId,
+            field: childField,
+            indexes: indexes
           });
         })
       });
-    }), components.length ? null : jsx(Empty, {})]
+    }), " "]
   });
 }
 
 function FormComponent$1(props) {
   const {
-    EmptyRoot
+    Empty
   } = useContext(FormRenderContext$1);
   const fullProps = {
     ...props,
-    Empty: EmptyRoot
+    Empty
   };
-  return jsx(Grid, {
+  return jsx(ChildrenRenderer, {
     ...fullProps
   });
 }
@@ -1475,24 +1797,6 @@ FormComponent$1.config = {
   })
 };
 
-var _path$k;
-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); }
-var SvgCalendar = function SvgCalendar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 14,
-    height: 15,
-    fill: "none",
-    viewBox: "0 0 28 30"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React.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",
-    clipRule: "evenodd"
-  })));
-};
-var CalendarIcon = SvgCalendar;
-
 /**
  * Returns date format for the provided locale.
  * If the locale is not provided, uses the browser's locale.
@@ -1561,6 +1865,24 @@ function flatpickerizeDateFormat(dateFormat) {
   return dateFormat;
 }
 
+var _path$u;
+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); }
+var SvgCalendar = function SvgCalendar(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 14,
+    height: 15,
+    fill: "none",
+    viewBox: "0 0 28 30"
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.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",
+    clipRule: "evenodd"
+  })));
+};
+var CalendarIcon = SvgCalendar;
+
 function InputAdorner(props) {
   const {
     pre,
@@ -1601,12 +1923,11 @@ function InputAdorner(props) {
 
 function Datepicker(props) {
   const {
-    id,
     label,
+    domId,
     collapseLabelOnEmpty,
     onDateTimeBlur,
     onDateTimeFocus,
-    formId,
     required,
     disabled,
     disallowPassedDates,
@@ -1706,11 +2027,10 @@ function Datepicker(props) {
     }
     onDateTimeBlur(e);
   }, [isInputDirty, onDateTimeBlur]);
-  const fullId = `${prefixId(id, formId)}--date`;
   return jsxs("div", {
     class: "fjs-datetime-subsection",
     children: [jsx(Label, {
-      id: fullId,
+      id: domId,
       label: label,
       collapseOnEmpty: collapseLabelOnEmpty,
       required: required
@@ -1728,7 +2048,7 @@ function Datepicker(props) {
         children: jsx("input", {
           ref: dateInputRef,
           type: "text",
-          id: fullId,
+          id: domId,
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
@@ -1747,19 +2067,19 @@ function Datepicker(props) {
   });
 }
 
-var _path$j, _path2$4;
-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 _path$t, _path2$5;
+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); }
 var SvgClock = function SvgClock(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none",
     viewBox: "0 0 28 29"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React.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.createElement("path", {
+  })), _path2$5 || (_path2$5 = /*#__PURE__*/React.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",
@@ -1866,12 +2186,11 @@ function DropdownList(props) {
 
 function Timepicker(props) {
   const {
-    id,
     label,
     collapseLabelOnEmpty,
     onDateTimeBlur,
     onDateTimeFocus,
-    formId,
+    domId,
     required,
     disabled,
     readonly,
@@ -1980,11 +2299,10 @@ function Timepicker(props) {
     setDropdownIsOpen(false);
     propagateRawToMinute(value);
   };
-  const fullId = `${prefixId(id, formId)}--time`;
   return jsxs("div", {
     class: "fjs-datetime-subsection",
     children: [jsx(Label, {
-      id: fullId,
+      id: domId,
       label: label,
       collapseOnEmpty: collapseLabelOnEmpty,
       required: required
@@ -1998,7 +2316,7 @@ function Timepicker(props) {
         children: [jsx("input", {
           ref: timeInputRef,
           type: "text",
-          id: fullId,
+          id: domId,
           class: "fjs-input",
           value: rawValue,
           disabled: disabled,
@@ -2030,11 +2348,12 @@ function Timepicker(props) {
   });
 }
 
-const type$b = 'datetime';
+const type$c = 'datetime';
 function Datetime(props) {
   const {
     disabled,
     errors = [],
+    domId,
     onBlur,
     onFocus,
     field,
@@ -2171,12 +2490,11 @@ function Datetime(props) {
   }, []);
   const errorMessageId = allErrors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   const datePickerProps = {
-    id,
     label: dateLabel,
     collapseLabelOnEmpty: !timeLabel,
     onDateTimeBlur,
     onDateTimeFocus,
-    formId,
+    domId: `${domId}-date`,
     required,
     disabled,
     disallowPassedDates,
@@ -2186,12 +2504,11 @@ function Datetime(props) {
     'aria-describedby': errorMessageId
   };
   const timePickerProps = {
-    id,
     label: timeLabel,
     collapseLabelOnEmpty: !dateLabel,
     onDateTimeBlur,
     onDateTimeFocus,
-    formId,
+    domId: `${domId}-time`,
     required,
     disabled,
     readonly,
@@ -2202,7 +2519,7 @@ function Datetime(props) {
     'aria-describedby': errorMessageId
   };
   return jsxs("div", {
-    class: formFieldClasses(type$b, {
+    class: formFieldClasses(type$c, {
       errors: allErrors,
       disabled,
       readonly
@@ -2226,7 +2543,7 @@ function Datetime(props) {
   });
 }
 Datetime.config = {
-  type: type$b,
+  type: type$c,
   keyed: true,
   label: 'Date time',
   group: 'basic-input',
@@ -2322,7 +2639,7 @@ function PoweredBy(props) {
       setOpen(open);
     };
   }
-  return jsxs(Fragment, {
+  return jsxs(Fragment$1, {
     children: [createPortal(jsx(Lightbox, {
       open: open,
       onBackdropClick: toggleOpen(false)
@@ -2355,32 +2672,39 @@ function FormComponent(props) {
     event.preventDefault();
     onReset();
   };
+  const filteredFormData = useFilteredFormData();
+  const localExpressionContext = useMemo(() => ({
+    data: filteredFormData,
+    parent: null,
+    this: filteredFormData,
+    i: []
+  }), [filteredFormData]);
   return jsxs("form", {
     class: "fjs-form",
     onSubmit: handleSubmit,
     onReset: handleReset,
     "aria-label": ariaLabel,
     noValidate: true,
-    children: [jsx(FormField, {
-      field: schema,
-      onChange: onChange
+    children: [jsx(LocalExpressionContext$1.Provider, {
+      value: localExpressionContext,
+      children: jsx(FormField, {
+        field: schema,
+        onChange: onChange
+      })
     }), jsx(PoweredBy, {})]
   });
 }
 
 function Group(props) {
   const {
-    field
+    field,
+    domId
   } = props;
   const {
     label,
-    id,
     type,
     showOutline
   } = field;
-  const {
-    formId
-  } = useContext(FormContext$1);
   const {
     Empty
   } = useContext(FormRenderContext$1);
@@ -2389,15 +2713,15 @@ function Group(props) {
     Empty
   };
   return jsxs("div", {
-    className: classNames(formFieldClasses(type), {
+    className: classNames(formFieldClasses(type), 'fjs-form-field-grouplike', {
       'fjs-outlined': showOutline
     }),
     role: "group",
-    "aria-labelledby": prefixId(id, formId),
+    "aria-labelledby": domId,
     children: [jsx(Label, {
-      id: prefixId(id, formId),
+      id: domId,
       label: label
-    }), jsx(Grid, {
+    }), jsx(ChildrenRenderer, {
       ...fullProps
     })]
   });
@@ -2554,7 +2878,7 @@ function isValidAttribute(lcTag, lcName, value) {
   return true;
 }
 
-const type$a = 'iframe';
+const type$b = 'iframe';
 const DEFAULT_HEIGHT = 300;
 function IFrame(props) {
   const {
@@ -2579,7 +2903,7 @@ function IFrame(props) {
     formId
   } = useContext(FormContext$1);
   return jsxs("div", {
-    class: formFieldClasses(type$a, {
+    class: formFieldClasses(type$b, {
       disabled,
       readonly
     }),
@@ -2613,7 +2937,7 @@ function IFramePlaceholder(props) {
   });
 }
 IFrame.config = {
-  type: type$a,
+  type: type$b,
   keyed: false,
   label: 'iFrame',
   group: 'container',
@@ -2622,9 +2946,9 @@ IFrame.config = {
   })
 };
 
-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$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); }
 var SvgImagePlaceholder = function SvgImagePlaceholder(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+  return /*#__PURE__*/React.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     width: 64,
@@ -2663,7 +2987,7 @@ var SvgImagePlaceholder = function SvgImagePlaceholder(props) {
 };
 var ImagePlaceholder = SvgImagePlaceholder;
 
-const type$9 = 'image';
+const type$a = 'image';
 function Image(props) {
   const {
     field
@@ -2684,7 +3008,7 @@ function Image(props) {
     formId
   } = useContext(FormContext$1);
   return jsx("div", {
-    class: formFieldClasses(type$9),
+    class: formFieldClasses(type$a),
     children: jsxs("div", {
       class: "fjs-image-container",
       children: [safeSource && jsx("img", {
@@ -2702,7 +3026,7 @@ function Image(props) {
   });
 }
 Image.config = {
-  type: type$9,
+  type: type$a,
   keyed: false,
   label: 'Image view',
   group: 'presentation',
@@ -2729,14 +3053,14 @@ function TemplatedInputAdorner(props) {
   });
 }
 
-var _path$i;
-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$s;
+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); }
 var SvgAngelDown = function SvgAngelDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -2747,14 +3071,14 @@ var SvgAngelDown = function SvgAngelDown(props) {
 };
 var AngelDownIcon = SvgAngelDown;
 
-var _path$h;
-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 _path$r;
+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); }
 var SvgAngelUp = function SvgAngelUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -2790,11 +3114,13 @@ function isNullEquivalentValue(value) {
   return value === undefined || value === null || value === '';
 }
 
-const type$8 = 'number';
+const type$9 = 'number';
 function Numberfield(props) {
   const {
     disabled,
     errors = [],
+    errorMessageId,
+    domId,
     onBlur,
     onFocus,
     field,
@@ -2804,7 +3130,6 @@ function Numberfield(props) {
   } = props;
   const {
     description,
-    id,
     label,
     appearance = {},
     validate = {},
@@ -2924,18 +3249,14 @@ function Numberfield(props) {
       e.preventDefault();
     }
   };
-  const {
-    formId
-  } = useContext(FormContext$1);
-  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$8, {
+    class: formFieldClasses(type$9, {
       errors,
       disabled,
       readonly
     }),
     children: [jsx(Label, {
-      id: prefixId(id, formId),
+      id: domId,
       label: label,
       required: required
     }), jsx(TemplatedInputAdorner, {
@@ -2955,7 +3276,7 @@ function Numberfield(props) {
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
-          id: prefixId(id, formId),
+          id: domId,
           onKeyDown: onKeyDown,
           onKeyPress: onKeyPress,
           onBlur: () => onBlur && onBlur(),
@@ -3002,7 +3323,7 @@ function Numberfield(props) {
   });
 }
 Numberfield.config = {
-  type: type$8,
+  type: type$9,
   keyed: true,
   label: 'Number',
   group: 'basic-input',
@@ -3046,11 +3367,13 @@ function useCleanupSingleSelectValue (props) {
   }, [field, options, onChange, value, loadState]);
 }
 
-const type$7 = 'radio';
+const type$8 = 'radio';
 function Radio(props) {
   const {
     disabled,
     errors = [],
+    errorMessageId,
+    domId,
     onBlur,
     onFocus,
     field,
@@ -3059,7 +3382,6 @@ function Radio(props) {
   } = props;
   const {
     description,
-    id,
     label,
     validate = {}
   } = field;
@@ -3096,12 +3418,8 @@ function Radio(props) {
     value,
     onChange: props.onChange
   });
-  const {
-    formId
-  } = useContext(FormContext$1);
-  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$7, {
+    class: formFieldClasses(type$8, {
       errors,
       disabled,
       readonly
@@ -3111,8 +3429,9 @@ function Radio(props) {
       label: label,
       required: required
     }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
+      const itemDomId = `${domId}-${index}`;
       return jsx(Label, {
-        id: prefixId(`${id}-${index}`, formId),
+        id: itemDomId,
         label: option.label,
         class: classNames({
           'fjs-checked': option.value === value
@@ -3123,14 +3442,14 @@ function Radio(props) {
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
-          id: prefixId(`${id}-${index}`, formId),
+          id: itemDomId,
           type: "radio",
           onClick: () => onChange(option.value),
           onBlur: onRadioBlur,
           onFocus: onRadioFocus,
           "aria-describedby": errorMessageId
         })
-      }, `${id}-${index}`);
+      }, index);
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
@@ -3140,7 +3459,7 @@ function Radio(props) {
   });
 }
 Radio.config = {
-  type: type$7,
+  type: type$8,
   keyed: true,
   label: 'Radio group',
   group: 'selection',
@@ -3149,14 +3468,14 @@ Radio.config = {
   create: createEmptyOptions
 };
 
-var _path$g;
-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$q;
+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); }
 var SvgXMark = function SvgXMark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -3169,7 +3488,7 @@ var XMarkIcon = SvgXMark;
 
 function SearchableSelect(props) {
   const {
-    id,
+    domId,
     disabled,
     errors,
     onBlur,
@@ -3178,9 +3497,6 @@ function SearchableSelect(props) {
     readonly,
     value
   } = props;
-  const {
-    formId
-  } = useContext(FormContext$1);
   const [filter, setFilter] = useState('');
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
   const [shouldApplyFilter, setShouldApplyFilter] = useState(true);
@@ -3287,9 +3603,8 @@ function SearchableSelect(props) {
     setFilter(valueLabel);
     onBlur && onBlur();
   }, [onBlur, valueLabel]);
-  return jsxs(Fragment$1, {
+  return jsxs(Fragment, {
     children: [jsxs("div", {
-      id: prefixId(`${id}`, formId),
       class: classNames('fjs-input-group', {
         'disabled': disabled,
         'readonly': readonly
@@ -3301,7 +3616,7 @@ function SearchableSelect(props) {
         readOnly: readonly,
         class: "fjs-input",
         ref: searchbarRef,
-        id: prefixId(`${id}-search`, formId),
+        id: domId,
         onChange: onInputChange,
         type: "text",
         value: filter,
@@ -3341,7 +3656,7 @@ function SearchableSelect(props) {
 
 function SimpleSelect(props) {
   const {
-    id,
+    domId,
     disabled,
     errors,
     onBlur,
@@ -3350,9 +3665,6 @@ function SimpleSelect(props) {
     readonly,
     value
   } = props;
-  const {
-    formId
-  } = useContext(FormContext$1);
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
   const selectRef = useRef();
   const inputRef = useRef();
@@ -3409,10 +3721,9 @@ function SimpleSelect(props) {
       onBlur && onBlur();
     }
   }, [onBlur, readonly]);
-  return jsxs(Fragment$1, {
+  return jsxs(Fragment, {
     children: [jsxs("div", {
       ref: selectRef,
-      id: prefixId(`${id}`, formId),
       class: classNames('fjs-input-group', {
         disabled,
         readonly
@@ -3426,11 +3737,11 @@ function SimpleSelect(props) {
         class: classNames('fjs-select-display', {
           'fjs-select-placeholder': !value
         }),
-        id: prefixId(`${id}-display`, formId),
+        id: `${domId}-display`,
         children: valueLabel || 'Select'
       }), !disabled && jsx("input", {
         ref: inputRef,
-        id: prefixId(`${id}-search`, formId),
+        id: domId,
         class: "fjs-select-hidden-input",
         value: valueLabel,
         onFocus: onInputFocus,
@@ -3463,11 +3774,13 @@ function SimpleSelect(props) {
   });
 }
 
-const type$6 = 'select';
+const type$7 = 'select';
 function Select(props) {
   const {
     disabled,
     errors = [],
+    errorMessageId,
+    domId,
     onBlur,
     onFocus,
     field,
@@ -3477,7 +3790,6 @@ function Select(props) {
   } = props;
   const {
     description,
-    id,
     label,
     searchable = false,
     validate = {}
@@ -3485,12 +3797,8 @@ function Select(props) {
   const {
     required
   } = validate;
-  const {
-    formId
-  } = useContext(FormContext$1);
-  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
-  const selectProps = useMemo(() => ({
-    id,
+  const selectProps = {
+    domId,
     disabled,
     errors,
     onBlur,
@@ -3500,9 +3808,9 @@ function Select(props) {
     onChange,
     readonly,
     'aria-describedby': errorMessageId
-  }), [disabled, errors, field, id, value, onChange, onBlur, onFocus, readonly, errorMessageId]);
+  };
   return jsxs("div", {
-    class: formFieldClasses(type$6, {
+    class: formFieldClasses(type$7, {
       errors,
       disabled,
       readonly
@@ -3514,7 +3822,7 @@ function Select(props) {
       }
     },
     children: [jsx(Label, {
-      id: prefixId(`${id}-search`, formId),
+      id: domId,
       label: label,
       required: required
     }), searchable ? jsx(SearchableSelect, {
@@ -3530,7 +3838,7 @@ function Select(props) {
   });
 }
 Select.config = {
-  type: type$6,
+  type: type$7,
   keyed: true,
   label: 'Select',
   group: 'selection',
@@ -3539,15 +3847,15 @@ Select.config = {
   create: createEmptyOptions
 };
 
-const type$5 = 'separator';
+const type$6 = 'separator';
 function Separator() {
   return jsx("div", {
-    class: formFieldClasses(type$5),
+    class: formFieldClasses(type$6),
     children: jsx("hr", {})
   });
 }
 Separator.config = {
-  type: type$5,
+  type: type$6,
   keyed: false,
   label: 'Separator',
   group: 'presentation',
@@ -3556,7 +3864,7 @@ Separator.config = {
   })
 };
 
-const type$4 = 'spacer';
+const type$5 = 'spacer';
 function Spacer(props) {
   const {
     field
@@ -3565,14 +3873,14 @@ function Spacer(props) {
     height = 60
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$4),
+    class: formFieldClasses(type$5),
     style: {
       height: height
     }
   });
 }
 Spacer.config = {
-  type: type$4,
+  type: type$5,
   keyed: false,
   label: 'Spacer',
   group: 'presentation',
@@ -3582,6 +3890,56 @@ Spacer.config = {
   })
 };
 
+function DynamicList(props) {
+  const {
+    field,
+    domId,
+    readonly
+  } = props;
+  const {
+    label,
+    type,
+    showOutline
+  } = field;
+  const {
+    Empty
+  } = useContext(FormRenderContext$1);
+  const fullProps = {
+    ...props,
+    Empty
+  };
+  return jsxs("div", {
+    className: classNames(formFieldClasses(type, {
+      readonly
+    }), 'fjs-form-field-grouplike', {
+      'fjs-outlined': showOutline
+    }),
+    role: "group",
+    "aria-labelledby": domId,
+    children: [jsx(Label, {
+      id: domId,
+      label: label
+    }), jsx(ChildrenRenderer, {
+      ...fullProps
+    })]
+  });
+}
+DynamicList.config = {
+  type: 'dynamiclist',
+  pathed: true,
+  repeatable: true,
+  label: 'Dynamic list',
+  group: 'container',
+  create: (options = {}) => ({
+    components: [],
+    showOutline: true,
+    isRepeating: true,
+    allowAddRemove: true,
+    defaultRepetitions: 1,
+    ...options
+  })
+};
+
 function SkipLink(props) {
   const {
     className,
@@ -3603,12 +3961,14 @@ function SkipLink(props) {
   });
 }
 
-const type$3 = 'taglist';
+const type$4 = 'taglist';
 function Taglist(props) {
   const {
     disabled,
     errors = [],
+    errorMessageId,
     onFocus,
+    domId,
     onBlur,
     field,
     readonly,
@@ -3616,17 +3976,12 @@ function Taglist(props) {
   } = props;
   const {
     description,
-    id,
     label,
     validate = {}
   } = field;
   const {
     required
   } = validate;
-  const {
-    formId
-  } = useContext(FormContext$1);
-  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   const [filter, setFilter] = useState('');
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
   const [isEscapeClosed, setIsEscapeClose] = useState(false);
@@ -3749,7 +4104,7 @@ function Taglist(props) {
   const shouldDisplayDropdown = useMemo(() => !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed, [disabled, isDropdownExpanded, isEscapeClosed, loadState]);
   return jsxs("div", {
     ref: focusScopeRef,
-    class: formFieldClasses(type$3, {
+    class: formFieldClasses(type$4, {
       errors,
       disabled,
       readonly
@@ -3763,7 +4118,7 @@ function Taglist(props) {
     children: [jsx(Label, {
       label: label,
       required: required,
-      id: prefixId(`${id}-search`, formId)
+      id: domId
     }), !disabled && !readonly && !!values.length && jsx(SkipLink, {
       className: "fjs-taglist-skip-link",
       label: "Skip to search",
@@ -3801,7 +4156,7 @@ function Taglist(props) {
         readOnly: readonly,
         class: "fjs-taglist-input",
         ref: inputRef,
-        id: prefixId(`${id}-search`, formId),
+        id: domId,
         onChange: onInputChange,
         type: "text",
         value: filter,
@@ -3831,7 +4186,7 @@ function Taglist(props) {
   });
 }
 Taglist.config = {
-  type: type$3,
+  type: type$4,
   keyed: true,
   label: 'Tag list',
   group: 'selection',
@@ -3840,7 +4195,7 @@ Taglist.config = {
   create: createEmptyOptions
 };
 
-const type$2 = 'text';
+const type$3 = 'text';
 function Text(props) {
   const form = useService('form');
   const {
@@ -3867,7 +4222,7 @@ function Text(props) {
     const html = markdownRenderer.render(markdown);
     return sanitizeHTML(html);
   }, [markdownRenderer, markdown]);
-  const OverridenTargetLink = useMemo(() => BuildOverridenTargetLink(textLinkTarget), [textLinkTarget]);
+  const OverriddenTargetLink = useMemo(() => BuildOverriddenTargetLink(textLinkTarget), [textLinkTarget]);
   const componentOverrides = useMemo(() => {
     if (disableLinks) {
       return {
@@ -3876,13 +4231,13 @@ function Text(props) {
     }
     if (textLinkTarget) {
       return {
-        'a': OverridenTargetLink
+        'a': OverriddenTargetLink
       };
     }
     return {};
-  }, [disableLinks, OverridenTargetLink, textLinkTarget]);
+  }, [disableLinks, OverriddenTargetLink, textLinkTarget]);
   return jsx("div", {
-    class: formFieldClasses(type$2),
+    class: formFieldClasses(type$3),
     children: jsx(Markup, {
       markup: safeHtml,
       components: componentOverrides,
@@ -3891,7 +4246,7 @@ function Text(props) {
   });
 }
 Text.config = {
-  type: type$2,
+  type: type$3,
   keyed: false,
   label: 'Text view',
   group: 'presentation',
@@ -3900,7 +4255,7 @@ Text.config = {
     ...options
   })
 };
-function BuildOverridenTargetLink(target) {
+function BuildOverriddenTargetLink(target) {
   return function ({
     children,
     ...rest
@@ -3924,11 +4279,13 @@ function DisabledLink({
   });
 }
 
-const type$1 = 'textfield';
+const type$2 = 'textfield';
 function Textfield(props) {
   const {
     disabled,
     errors = [],
+    errorMessageId,
+    domId,
     onBlur,
     onFocus,
     field,
@@ -3937,7 +4294,6 @@ function Textfield(props) {
   } = props;
   const {
     description,
-    id,
     label,
     appearance = {},
     validate = {}
@@ -3957,18 +4313,14 @@ function Textfield(props) {
       value: target.value
     });
   };
-  const {
-    formId
-  } = useContext(FormContext$1);
-  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$1, {
+    class: formFieldClasses(type$2, {
       errors,
       disabled,
       readonly
     }),
     children: [jsx(Label, {
-      id: prefixId(id, formId),
+      id: domId,
       label: label,
       required: required
     }), jsx(TemplatedInputAdorner, {
@@ -3980,7 +4332,7 @@ function Textfield(props) {
         class: "fjs-input",
         disabled: disabled,
         readOnly: readonly,
-        id: prefixId(id, formId),
+        id: domId,
         onInput: onChange,
         onBlur: () => onBlur && onBlur(),
         onFocus: () => onFocus && onFocus(),
@@ -3997,7 +4349,7 @@ function Textfield(props) {
   });
 }
 Textfield.config = {
-  type: type$1,
+  type: type$2,
   keyed: true,
   label: 'Text field',
   group: 'basic-input',
@@ -4020,11 +4372,13 @@ Textfield.config = {
   })
 };
 
-const type = 'textarea';
+const type$1 = 'textarea';
 function Textarea(props) {
   const {
     disabled,
     errors = [],
+    errorMessageId,
+    domId,
     onBlur,
     onFocus,
     field,
@@ -4033,7 +4387,6 @@ function Textarea(props) {
   } = props;
   const {
     description,
-    id,
     label,
     validate = {}
   } = field;
@@ -4055,25 +4408,21 @@ function Textarea(props) {
   useEffect(() => {
     autoSizeTextarea(textareaRef.current);
   }, []);
-  const {
-    formId
-  } = useContext(FormContext$1);
-  const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type, {
+    class: formFieldClasses(type$1, {
       errors,
       disabled,
       readonly
     }),
     children: [jsx(Label, {
-      id: prefixId(id, formId),
+      id: domId,
       label: label,
       required: required
     }), jsx("textarea", {
       class: "fjs-textarea",
       disabled: disabled,
       readonly: readonly,
-      id: prefixId(id, formId),
+      id: domId,
       onInput: onInput,
       onBlur: () => onBlur && onBlur(),
       onFocus: () => onFocus && onFocus(),
@@ -4089,7 +4438,7 @@ function Textarea(props) {
   });
 }
 Textarea.config = {
-  type,
+  type: type$1,
   keyed: true,
   label: 'Text area',
   group: 'basic-input',
@@ -4120,45 +4469,400 @@ const autoSizeTextarea = textarea => {
   textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
 };
 
-var _path$f;
-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 SvgButton = function SvgButton(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+var _path$p;
+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); }
+var SvgArrowDown = function SvgArrowDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 54,
-    height: 54,
-    fill: "currentcolor"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React.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"
+    viewBox: "0 0 32 32"
+  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M24.59 16.59 17 24.17V4h-2v20.17l-7.59-7.58L6 18l10 10 10-10-1.41-1.41z"
   })));
 };
-var ButtonIcon = SvgButton;
+var ArrowDownIcon = SvgArrowDown;
 
-var _path$e;
-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 SvgCheckbox = function SvgCheckbox(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
+var _path$o;
+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); }
+var SvgArrowUp = function SvgArrowUp(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 54,
-    height: 54,
-    fill: "currentcolor"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.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"
+    viewBox: "0 0 32 32"
+  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M16 4 6 14l1.41 1.41L15 7.83V28h2V7.83l7.59 7.58L26 14 16 4z"
   })));
 };
-var CheckboxIcon = SvgCheckbox;
+var ArrowUpIcon = SvgArrowUp;
 
-var _path$d;
-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 SvgChecklist = function SvgChecklist(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+var _path$n;
+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); }
+var SvgCaretLeft = function SvgCaretLeft(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 54,
-    height: 54,
-    fill: "none"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
+    xmlSpace: "preserve",
+    viewBox: "0 0 32 32"
+  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "m20 24-10-8 10-8z"
+  })));
+};
+var CaretLeftIcon = SvgCaretLeft;
+
+var _path$m;
+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); }
+var SvgCaretRight = function SvgCaretRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$n({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    viewBox: "0 0 32 32"
+  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "m12 8 10 8-10 8z"
+  })));
+};
+var CaretRightIcon = SvgCaretRight;
+
+const type = 'table';
+
+/**
+ * @typedef {('asc'|'desc')} Direction
+ *
+ * @typedef Sorting
+ * @property {string} key
+ * @property {Direction} direction
+ *
+ * @typedef Column
+ * @property {string} label
+ * @property {string} key
+ *
+ * @typedef Props
+ * @property {Object} field
+ * @property {string} field.id
+ * @property {Array<Column>} [field.columns]
+ * @property {string} [field.columnsExpression]
+ * @property {string} [field.label]
+ * @property {number} [field.rowCount]
+ * @property {string} [field.dataSource]
+ *
+ * @param {Props} props
+ * @returns {import("preact").JSX.Element}
+ */
+function Table(props) {
+  const {
+    field
+  } = props;
+  const {
+    columns = [],
+    columnsExpression,
+    dataSource = '',
+    rowCount,
+    id,
+    label
+  } = field;
+
+  /** @type {[(null|Sorting), import("preact/hooks").StateUpdater<null|Sorting>]} */
+  const [sortBy, setSortBy] = useState(null);
+  const evaluatedColumns = useEvaluatedColumns(columnsExpression || '', columns);
+  const columnKeys = evaluatedColumns.map(({
+    key
+  }) => key);
+  const evaluatedDataSource = useExpressionEvaluation(dataSource);
+  const data = Array.isArray(evaluatedDataSource) ? evaluatedDataSource : [];
+  const sortedData = sortBy === null ? data : sortByColumn(data, sortBy.key, sortBy.direction);
+
+  /** @type {unknown[][]} */
+  const chunkedData = isNumber(rowCount) ? chunk(sortedData, rowCount) : [sortedData];
+  const [currentPage, setCurrentPage] = useState(0);
+  const currentChunk = chunkedData[currentPage] || [];
+  useEffect(() => {
+    setCurrentPage(0);
+  }, [rowCount, sortBy]);
+
+  /** @param {string} key */
+  function toggleSortBy(key) {
+    setSortBy(current => {
+      if (current === null || current.key !== key) {
+        return {
+          key,
+          direction: 'asc'
+        };
+      }
+      if (current.direction === 'desc') {
+        return null;
+      }
+      return {
+        key,
+        direction: 'desc'
+      };
+    });
+  }
+  return jsxs("div", {
+    class: formFieldClasses(type),
+    children: [jsx(Label, {
+      id: prefixId(id),
+      label: label
+    }), jsxs("div", {
+      class: classNames('fjs-table-middle-container', {
+        'fjs-table-empty': evaluatedColumns.length === 0
+      }),
+      children: [evaluatedColumns.length === 0 ? 'Nothing to show.' : jsx("div", {
+        class: "fjs-table-inner-container",
+        children: jsxs("table", {
+          class: "fjs-table",
+          id: prefixId(id),
+          children: [jsx("thead", {
+            class: "fjs-table-head",
+            children: jsx("tr", {
+              class: "fjs-table-tr",
+              children: evaluatedColumns.map(({
+                key,
+                label
+              }) => {
+                const displayLabel = label || key;
+                return jsx("th", {
+                  tabIndex: 0,
+                  class: "fjs-table-th",
+                  onClick: () => {
+                    toggleSortBy(key);
+                  },
+                  onKeyDown: event => {
+                    if (['Enter', 'Space'].includes(event.code)) {
+                      toggleSortBy(key);
+                    }
+                  },
+                  "aria-label": getHeaderAriaLabel(sortBy, key, displayLabel),
+                  children: jsxs("span", {
+                    class: "fjs-table-th-label",
+                    children: [displayLabel, sortBy !== null && sortBy.key === key ? jsx(Fragment, {
+                      children: sortBy.direction === 'asc' ? jsx(ArrowUpIcon, {
+                        class: "fjs-table-sort-icon-asc"
+                      }) : jsx(ArrowDownIcon, {
+                        class: "fjs-table-sort-icon-desc"
+                      })
+                    }) : null]
+                  })
+                }, key);
+              })
+            })
+          }), currentChunk.length === 0 ? jsx("tbody", {
+            class: "fjs-table-body",
+            children: jsx("tr", {
+              class: "fjs-table-tr",
+              children: jsx("td", {
+                class: "fjs-table-td",
+                colSpan: evaluatedColumns.length,
+                children: "Nothing to show."
+              })
+            })
+          }) : jsx("tbody", {
+            class: "fjs-table-body",
+            children: currentChunk.map((row, index) => jsx("tr", {
+              class: "fjs-table-tr",
+              children: columnKeys.map(key => jsx("td", {
+                class: "fjs-table-td",
+                children: row[key]
+              }, key))
+            }, index))
+          })]
+        })
+      }), isNumber(rowCount) && chunkedData.length > 1 && evaluatedColumns.length > 0 ? jsxs("nav", {
+        class: "fjs-table-nav",
+        children: [jsxs("span", {
+          class: "fjs-table-nav-label",
+          children: [currentPage + 1, " of ", chunkedData.length]
+        }), jsx("button", {
+          type: "button",
+          class: "fjs-table-nav-button",
+          onClick: () => {
+            setCurrentPage(page => Math.max(page - 1, 0));
+          },
+          disabled: currentPage === 0,
+          "aria-label": "Previous page",
+          children: jsx(CaretLeftIcon, {})
+        }), jsx("button", {
+          type: "button",
+          class: "fjs-table-nav-button",
+          onClick: () => {
+            setCurrentPage(page => Math.min(page + 1, chunkedData.length - 1));
+          },
+          disabled: currentPage >= chunkedData.length - 1,
+          "aria-label": "Next page",
+          children: jsx(CaretRightIcon, {})
+        })]
+      }) : null]
+    })]
+  });
+}
+Table.config = {
+  type,
+  keyed: false,
+  label: 'Table',
+  group: 'presentation',
+  create: (options = {}) => {
+    const {
+      id,
+      columnsExpression,
+      columns,
+      rowCount,
+      ...remainingOptions
+    } = options;
+    if (isDefined(id) && isNumber(rowCount)) {
+      remainingOptions['rowCount'] = rowCount;
+    }
+    if (isString(columnsExpression)) {
+      return {
+        ...remainingOptions,
+        id,
+        columnsExpression
+      };
+    }
+    if (Array.isArray(columns) && columns.every(isColumn)) {
+      return {
+        ...remainingOptions,
+        id,
+        columns
+      };
+    }
+    return {
+      ...remainingOptions,
+      rowCount: 10,
+      columns: [{
+        label: 'ID',
+        key: 'id'
+      }, {
+        label: 'Name',
+        key: 'name'
+      }, {
+        label: 'Date',
+        key: 'date'
+      }]
+    };
+  },
+  initialDemoData: [{
+    id: 1,
+    name: 'John Doe',
+    date: '31.01.2023'
+  }, {
+    id: 2,
+    name: 'Erika Muller',
+    date: '20.02.2023'
+  }, {
+    id: 3,
+    name: 'Dominic Leaf',
+    date: '11.03.2023'
+  }]
+};
+
+// helpers /////////////////////////////
+
+/**
+ * @param {string|void} columnsExpression
+ * @param {Column[]} fallbackColumns
+ * @returns {Column[]}
+ */
+function useEvaluatedColumns(columnsExpression, fallbackColumns) {
+  /** @type {Column[]|null} */
+  const evaluation = useExpressionEvaluation(columnsExpression || '');
+  return Array.isArray(evaluation) && evaluation.every(isColumn) ? evaluation : fallbackColumns;
+}
+
+/**
+ * @param {any} column
+ * @returns {column is Column}
+ */
+function isColumn(column) {
+  return isObject(column) && isString(column['label']) && isString(column['key']);
+}
+
+/**
+ * @param {Array} array
+ * @param {number} size
+ * @returns {Array}
+ */
+function chunk(array, size) {
+  return array.reduce((chunks, item, index) => {
+    if (index % size === 0) {
+      chunks.push([item]);
+    } else {
+      chunks[chunks.length - 1].push(item);
+    }
+    return chunks;
+  }, []);
+}
+
+/**
+ * @param {unknown[]} array
+ * @param {string} key
+ * @param {Direction} direction
+ * @returns {unknown[]}
+ */
+function sortByColumn(array, key, direction) {
+  return [...array].sort((a, b) => {
+    if (!isObject(a) || !isObject(b)) {
+      return 0;
+    }
+    if (direction === 'asc') {
+      return a[key] > b[key] ? 1 : -1;
+    }
+    return a[key] < b[key] ? 1 : -1;
+  });
+}
+
+/**
+ * @param {null|Sorting} sortBy
+ * @param {string} key
+ * @param {string} label
+ */
+function getHeaderAriaLabel(sortBy, key, label) {
+  if (sortBy === null || sortBy.key !== key) {
+    return `Click to sort by ${label} descending`;
+  }
+  if (sortBy.direction === 'asc') {
+    return 'Click to remove sorting';
+  }
+  return `Click to sort by ${label} ascending`;
+}
+
+var _path$l;
+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); }
+var SvgButton = function SvgButton(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$m({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 54,
+    height: 54,
+    fill: "currentcolor"
+  }, props), _path$l || (_path$l = /*#__PURE__*/React.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$k;
+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 SvgCheckbox = function SvgCheckbox(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 54,
+    height: 54,
+    fill: "currentcolor"
+  }, props), _path$k || (_path$k = /*#__PURE__*/React.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 _path$j;
+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 SvgChecklist = function SvgChecklist(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 54,
+    height: 54,
+    fill: "none"
+  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
     fillRule: "evenodd",
     d: "M14.35 24.75H19v4.65h-4.65v-4.65Zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414ZM14.35 37.05H19v4.65h-4.65v-4.65Zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414ZM14.35 12.45H19v4.65h-4.65v-4.65Zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414Zm12.007 14.977a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293Zm0 12.3a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293Zm0-24.6a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293Z",
     clipRule: "evenodd"
@@ -4166,18 +4870,18 @@ var SvgChecklist = function SvgChecklist(props) {
 };
 var ChecklistIcon = SvgChecklist;
 
-var _path$c, _path2$3, _path3;
-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$i, _path2$4, _path3;
+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 SvgDatetime = function SvgDatetime(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.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.createElement("path", {
+  })), _path2$4 || (_path2$4 = /*#__PURE__*/React.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.createElement("path", {
     fillRule: "evenodd",
@@ -4186,27 +4890,27 @@ var SvgDatetime = function SvgDatetime(props) {
 };
 var DatetimeIcon = SvgDatetime;
 
-var _path$b, _path2$2;
-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 _path$h, _path2$3;
+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 SvgTaglist = function SvgTaglist(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.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.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React.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$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$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 SvgForm = function SvgForm(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54
@@ -4232,151 +4936,168 @@ var SvgForm = function SvgForm(props) {
 };
 var FormIcon = SvgForm;
 
-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); }
+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); }
 var SvgGroup = function SvgGroup(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.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$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 _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); }
 var SvgNumber = function SvgNumber(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React.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"
   })));
 };
 var NumberIcon = SvgNumber;
 
-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 _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); }
 var SvgRadio = function SvgRadio(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
     d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16z"
   })));
 };
 var RadioIcon = SvgRadio;
 
-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 _path$d;
+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 SvgSelect = function SvgSelect(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.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"
   })));
 };
 var SelectIcon = SvgSelect;
 
-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 _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); }
 var SvgSeparator = function SvgSeparator(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
     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 SeparatorIcon = SvgSeparator;
 
-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 _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); }
 var SvgSpacer = function SvgSpacer(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     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;
 
-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 _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); }
+var SvgDynamicList = function SvgDynamicList(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 54,
+    height: 54,
+    fill: "none"
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M2.7 43.296v1.254c0 .746.604 1.35 1.35 1.35h1.275v-1.795c.049.14.075.29.075.445v-1.254h-.075V43.2H4.05c.177 0 .347.034.502.096H2.7Zm2.7-2.507v-2.507H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.015V23.24H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.014V13.21H2.7v2.507h2.7Zm-2.7-5.014h1.852a1.346 1.346 0 0 1-.502.096h1.275v-.096H5.4V9.45c0 .156-.026.306-.075.445V8.1H4.05A1.35 1.35 0 0 0 2.7 9.45v1.254Zm5.175.096h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1-2.7v1.795a1.348 1.348 0 0 1-.075-.445v1.254h.075v.096h1.275c-.177 0-.347-.034-.502-.096H51.3V9.45a1.35 1.35 0 0 0-1.35-1.35h-1.275Zm-.075 5.11v2.508h2.7V13.21h-2.7Zm0 5.015v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7V23.24h-2.7Zm0 5.015v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7v-2.507h-2.7Zm2.7 5.014h-1.852c.155-.062.325-.096.502-.096h-1.275v.096H48.6v1.254c0-.156.026-.305.075-.445V45.9h1.275a1.35 1.35 0 0 0 1.35-1.35v-1.254Zm-5.175-.096h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7ZM16.2 17.55a4.05 4.05 0 0 1 4.05 4.05v1.35A4.05 4.05 0 0 1 16.2 27h-1.35a4.05 4.05 0 0 1-4.05-4.05V21.6a4.05 4.05 0 0 1 4.05-4.05h1.35Zm0 2.7h-1.35a1.35 1.35 0 0 0-1.35 1.35v1.35c0 .746.604 1.35 1.35 1.35h1.35a1.35 1.35 0 0 0 1.35-1.35V21.6a1.35 1.35 0 0 0-1.35-1.35Zm27 1.35a4.05 4.05 0 0 0-4.05-4.05H29.7a4.05 4.05 0 0 0-4.05 4.05v1.35A4.05 4.05 0 0 0 29.7 27h9.45a4.05 4.05 0 0 0 4.05-4.05V21.6Zm-13.5-1.35h9.45c.746 0 1.35.604 1.35 1.35v1.35a1.35 1.35 0 0 1-1.35 1.35H29.7a1.35 1.35 0 0 1-1.35-1.35V21.6c0-.746.604-1.35 1.35-1.35ZM43.2 37.8a4.05 4.05 0 0 0-4.05-4.05H29.7a4.05 4.05 0 0 0-4.05 4.05v1.35h2.7V37.8c0-.746.604-1.35 1.35-1.35h9.45c.746 0 1.35.604 1.35 1.35v1.35h2.7V37.8Zm-27-4.05a4.05 4.05 0 0 1 4.05 4.05v1.35h-2.7V37.8a1.35 1.35 0 0 0-1.35-1.35h-1.35a1.35 1.35 0 0 0-1.35 1.35v1.35h-2.7V37.8a4.05 4.05 0 0 1 4.05-4.05h1.35Z",
+    clipRule: "evenodd"
+  })));
+};
+var DynamicListIcon = SvgDynamicList;
+
+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 SvgText = function SvgText(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
     d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 0 1 2.4.14 3.42 3.42 0 0 1 1.41.55 3.47 3.47 0 0 1 1 1.14 3 3 0 0 1 .42 1.58 3.26 3.26 0 0 1-1.91 2.94 3.63 3.63 0 0 1 1.91 1.22 3.28 3.28 0 0 1 .66 2 4 4 0 0 1-.43 1.8 3.63 3.63 0 0 1-1.09 1.4 3.89 3.89 0 0 1-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 0 0 1.1-.49 1.41 1.41 0 0 0 .41-1 1.49 1.49 0 0 0-.35-1 1.54 1.54 0 0 0-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 0 0 1.88-.09 1.65 1.65 0 0 0 1-.54 1.6 1.6 0 0 0 .38-1.14 1.75 1.75 0 0 0-.29-1 1.69 1.69 0 0 0-.86-.62 9.28 9.28 0 0 0-2.41-.23zm19.62.92 2.65.84a5.94 5.94 0 0 1-2 3.29A5.74 5.74 0 0 1 41.38 34a5.87 5.87 0 0 1-4.44-1.84 7.09 7.09 0 0 1-1.73-5A7.43 7.43 0 0 1 37 21.87 6 6 0 0 1 41.54 20a5.64 5.64 0 0 1 4 1.47A5.33 5.33 0 0 1 47 24l-2.7.65a2.8 2.8 0 0 0-2.86-2.27A3.09 3.09 0 0 0 39 23.42a5.31 5.31 0 0 0-.93 3.5 5.62 5.62 0 0 0 .93 3.65 3 3 0 0 0 2.4 1.09 2.72 2.72 0 0 0 1.82-.66 4 4 0 0 0 1.13-2.21z"
   })));
 };
 var TextIcon = SvgText;
 
-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); }
+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 SvgTextfield = function SvgTextfield(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.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-32 4v10h-2V22h2z"
   })));
 };
 var TextfieldIcon = SvgTextfield;
 
-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); }
+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 SvgTextarea = function SvgTextarea(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 13a3 3 0 0 1 3 3v22a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V16a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V16a1 1 0 0 0-1-1zm-1.136 15.5.849.849-6.364 6.364-.849-.849 6.364-6.364zm.264 3.5.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
   })));
 };
 var TextareaIcon = SvgTextarea;
 
-var _path$1, _path2$1;
-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); }
+var _path$6, _path2$2;
+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 SvgIFrame = function SvgIFrame(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
     fill: "currentcolor",
     d: "M34.467 37.3 41 31l-6.533-6.3-1.32 1.273L38.36 31l-5.213 5.027 1.32 1.273ZM19.533 24.7 13 31l6.533 6.3 1.32-1.273L15.64 31l5.214-5.027-1.32-1.273Zm4.127 14.832 1.805.468 4.875-17.532L28.535 22 23.66 39.532Z"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
     fill: "currentcolor",
     fillRule: "evenodd",
     d: "M46 9a3 3 0 0 1 3 3v30a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V12a3 3 0 0 1 3-3h38Zm0 2H8a1 1 0 0 0-1 1v4h40v-4a1 1 0 0 0-1-1ZM7 42V18h40v24a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1Z",
@@ -4385,19 +5106,19 @@ var SvgIFrame = function SvgIFrame(props) {
 };
 var IFrameIcon = SvgIFrame;
 
-var _path, _path2;
-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); }
+var _path$5, _path2$1;
+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 SvgImage = function SvgImage(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M34.636 21.91A3.818 3.818 0 1 1 27 21.908a3.818 3.818 0 0 1 7.636 0Zm-2 0A1.818 1.818 0 1 1 29 21.908a1.818 1.818 0 0 1 3.636 0Z",
     clipRule: "evenodd"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M15 13a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V15a2 2 0 0 0-2-2H15Zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 0 1 2.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 0 1 2.411.239L39 32.73V15ZM15 39v-8.754a.975.975 0 0 0 .168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 0 0 2.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15Z",
     clipRule: "evenodd"
@@ -4405,6 +5126,22 @@ var SvgImage = function SvgImage(props) {
 };
 var ImageIcon = SvgImage;
 
+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 SvgTable = function SvgTable(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 54 54"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    fillRule: "evenodd",
+    d: "M42.545 12.273A2.455 2.455 0 0 1 45 14.727v24.546a2.455 2.455 0 0 1-2.455 2.454h-31.09A2.455 2.455 0 0 1 9 39.273V14.727a2.455 2.455 0 0 1 2.455-2.454zM27.818 40.09h14.727a.818.818 0 0 0 .819-.818v-4.91H27.818Zm-1.636-5.727v5.727H11.455a.818.818 0 0 1-.819-.818v-4.91zm1.636-1.637h15.546V27H27.818ZM26.182 27v5.727H10.636V27zm1.636-1.636h15.546v-5.728H27.818Zm-1.636-5.728v5.728H10.636v-5.728z",
+    clipRule: "evenodd"
+  })));
+};
+var TableIcon = SvgTable;
+
 const iconsByType = type => {
   return {
     button: ButtonIcon,
@@ -4420,124 +5157,35 @@ const iconsByType = type => {
     select: SelectIcon,
     separator: SeparatorIcon,
     spacer: SpacerIcon,
+    dynamiclist: DynamicListIcon,
     taglist: TaglistIcon,
     text: TextIcon,
     textfield: TextfieldIcon,
     textarea: TextareaIcon,
+    table: TableIcon,
     default: FormIcon
   }[type];
 };
 
-const formFields = [Button, Checkbox, Checklist, FormComponent$1, Group, IFrame, Image, Numberfield, Datetime, Radio, Select, Spacer, Separator, Taglist, Text, Textfield, Textarea];
+const formFields = [Button, Checkbox, Checklist, FormComponent$1, Group, IFrame, DynamicList, Image, Numberfield, Datetime, Radio, Select, Spacer, Separator, DynamicList, Taglist, Text, Textfield, Textarea, Table];
 
 class FormFields {
   constructor() {
     this._formFields = {};
     formFields.forEach(formField => {
-      this.register(formField.config.type, formField);
-    });
-  }
-  register(type, formField) {
-    this._formFields[type] = formField;
-  }
-  get(type) {
-    return this._formFields[type];
-  }
-}
-
-// config  ///////////////////
-
-const VALUES_SOURCES = {
-  STATIC: 'static',
-  INPUT: 'input',
-  EXPRESSION: 'expression'
-};
-const VALUES_SOURCE_DEFAULT = VALUES_SOURCES.STATIC;
-const VALUES_SOURCES_LABELS = {
-  [VALUES_SOURCES.STATIC]: 'Static',
-  [VALUES_SOURCES.INPUT]: 'Input data',
-  [VALUES_SOURCES.EXPRESSION]: 'Expression'
-};
-const VALUES_SOURCES_PATHS = {
-  [VALUES_SOURCES.STATIC]: ['values'],
-  [VALUES_SOURCES.INPUT]: ['valuesKey'],
-  [VALUES_SOURCES.EXPRESSION]: ['valuesExpression']
-};
-const VALUES_SOURCES_DEFAULTS = {
-  [VALUES_SOURCES.STATIC]: [{
-    label: 'Value',
-    value: 'value'
-  }],
-  [VALUES_SOURCES.INPUT]: '',
-  [VALUES_SOURCES.EXPRESSION]: '='
-};
-
-// helpers ///////////////////
-
-function getValuesSource(field) {
-  for (const source of Object.values(VALUES_SOURCES)) {
-    if (get(field, VALUES_SOURCES_PATHS[source]) !== undefined) {
-      return source;
-    }
-  }
-  return VALUES_SOURCE_DEFAULT;
-}
-
-function createInjector(bootstrapModules) {
-  const injector = new Injector(bootstrapModules);
-  injector.init();
-  return injector;
-}
-
-/**
- * @param {string?} prefix
- *
- * @returns Element
- */
-function createFormContainer(prefix = 'fjs') {
-  const container = document.createElement('div');
-  container.classList.add(`${prefix}-container`);
-  return container;
-}
-
-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'];
-const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'url'];
-function isRequired(field) {
-  return field.required;
-}
-function pathParse(path) {
-  if (!path) {
-    return [];
-  }
-  return path.split('.').map(key => {
-    return isNaN(parseInt(key)) ? key : parseInt(key);
-  });
-}
-function pathsEqual(a, b) {
-  return a && b && a.length === b.length && a.every((value, index) => value === b[index]);
-}
-const indices = {};
-function generateIndexForType(type) {
-  if (type in indices) {
-    indices[type]++;
-  } else {
-    indices[type] = 1;
+      this.register(formField.config.type, formField);
+    });
+  }
+  register(type, formField) {
+    this._formFields[type] = formField;
+  }
+  get(type) {
+    return this._formFields[type];
   }
-  return indices[type];
-}
-function generateIdForType(type) {
-  return `${type}${generateIndexForType(type)}`;
 }
 
-/**
- * @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));
-}
+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'];
+const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'url'];
 
 /**
  * @typedef { import('../types').Schema } Schema
@@ -4644,13 +5292,24 @@ function getSchemaVariables(schema, options = {}) {
   // remove duplicates
   return Array.from(new Set(variables));
 }
-function runRecursively(formField, fn) {
-  const components = formField.components || [];
-  components.forEach((component, index) => {
-    runRecursively(component, fn);
-  });
-  fn(formField);
-}
+
+/**
+ * Get the ancestry list of a form field.
+ *
+ * @param {string} formFieldId
+ * @param {import('../core/FormFieldRegistry').default} formFieldRegistry
+ *
+ * @return {Array<string>} ancestry list
+ */
+const getAncestryList = (formFieldId, formFieldRegistry) => {
+  const ids = [];
+  let currentFormField = formFieldRegistry.get(formFieldId);
+  while (currentFormField) {
+    ids.push(currentFormField.id);
+    currentFormField = formFieldRegistry.get(currentFormField._parent);
+  }
+  return ids;
+};
 
 /**
  * @typedef {object} Condition
@@ -4667,36 +5326,102 @@ class ConditionChecker {
   /**
    * For given data, remove properties based on condition.
    *
-   * @param {Object<string, any>} properties
    * @param {Object<string, any>} data
+   * @param {Object<string, any>} contextData
    * @param {Object} [options]
    * @param {Function} [options.getFilterPath]
+   * @param {boolean} [options.leafNodeDeletionOnly]
    */
-  applyConditions(properties, data = {}, options = {}) {
-    const newProperties = clone(properties);
+  applyConditions(data, contextData = {}, options = {}) {
+    const workingData = clone(data);
     const {
-      getFilterPath = field => this._pathRegistry.getValuePath(field)
+      getFilterPath = (field, indexes) => this._pathRegistry.getValuePath(field, {
+        indexes
+      }),
+      leafNodeDeletionOnly = false
     } = options;
-    const form = this._formFieldRegistry.getAll().find(field => field.type === 'default');
+    const _applyConditionsWithinScope = (rootField, scopeContext, startHidden = false) => {
+      const {
+        indexes = {},
+        expressionIndexes = [],
+        scopeData = contextData,
+        parentScopeData = null
+      } = scopeContext;
+      this._pathRegistry.executeRecursivelyOnFields(rootField, ({
+        field,
+        isClosed,
+        isRepeatable,
+        context
+      }) => {
+        const {
+          conditional,
+          components,
+          id
+        } = field;
+
+        // build the expression context in the right format
+        const localExpressionContext = buildExpressionContext({
+          this: scopeData,
+          data: contextData,
+          i: expressionIndexes,
+          parent: parentScopeData
+        });
+        context.isHidden = startHidden || context.isHidden || conditional && this._checkHideCondition(conditional, localExpressionContext);
+
+        // if a field is repeatable and visible, we need to implement custom recursion on its children
+        if (isRepeatable && (!context.isHidden || leafNodeDeletionOnly)) {
+          // prevent the regular recursion behavior of executeRecursivelyOnFields
+          context.preventRecursion = true;
+          const repeaterValuePath = this._pathRegistry.getValuePath(field, {
+            indexes
+          });
+          const repeaterValue = get(contextData, repeaterValuePath);
+
+          // quit early if there are no children or data associated with the repeater
+          if (!Array.isArray(repeaterValue) || !repeaterValue.length || !Array.isArray(components) || !components.length) {
+            return;
+          }
+          for (let i = 0; i < repeaterValue.length; i++) {
+            // create a new scope context for each index
+            const newScopeContext = {
+              indexes: {
+                ...indexes,
+                [id]: i
+              },
+              expressionIndexes: [...expressionIndexes, i + 1],
+              scopeData: repeaterValue[i],
+              parentScopeData: scopeData
+            };
+
+            // for each child component, apply conditions within the new repetition scope
+            components.forEach(component => {
+              _applyConditionsWithinScope(component, newScopeContext, context.isHidden);
+            });
+          }
+        }
+
+        // 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 && !leafNodeDeletionOnly && isRepeatable) {
+          context.preventRecursion = true;
+          this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
+        }
+
+        // for simple leaf fields, we always clear
+        if (context.isHidden && isClosed) {
+          this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
+        }
+      });
+    };
+
+    // apply conditions starting with the root of the form
+    const form = this._formFieldRegistry.getForm();
     if (!form) {
       throw new Error('form field registry has no form');
     }
-    this._pathRegistry.executeRecursivelyOnFields(form, ({
-      field,
-      isClosed,
-      context
-    }) => {
-      const {
-        conditional: condition
-      } = field;
-      context.isHidden = context.isHidden || condition && this._checkHideCondition(condition, data);
-
-      // only clear the leaf nodes, as groups may both point to the same path
-      if (context.isHidden && isClosed) {
-        this._clearObjectValueRecursively(getFilterPath(field), newProperties);
-      }
+    _applyConditionsWithinScope(form, {
+      scopeData: contextData
     });
-    return newProperties;
+    return workingData;
   }
 
   /**
@@ -4740,16 +5465,22 @@ class ConditionChecker {
     const result = this.check(condition.hide, data);
     return result === true;
   }
-  _clearObjectValueRecursively(valuePath, obj) {
+  _cleanlyClearDataAtPath(valuePath, obj) {
     const workingValuePath = [...valuePath];
     let recurse = false;
     do {
       set(obj, workingValuePath, undefined);
       workingValuePath.pop();
       const parentObject = get(obj, workingValuePath);
-      recurse = isObject(parentObject) && !values(parentObject).length && !!workingValuePath.length;
+      recurse = !!workingValuePath.length && (this._isEmptyObject(parentObject) || this._isEmptyArray(parentObject));
     } while (recurse);
   }
+  _isEmptyObject(parentObject) {
+    return isObject(parentObject) && !values(parentObject).length;
+  }
+  _isEmptyArray(parentObject) {
+    return Array.isArray(parentObject) && (!parentObject.length || parentObject.every(item => item === undefined));
+  }
 }
 ConditionChecker.$inject = ['formFieldRegistry', 'pathRegistry', 'eventBus'];
 
@@ -5264,14 +5995,15 @@ class UpdateFieldValidationHandler {
   execute(context) {
     const {
       field,
-      value
+      value,
+      indexes
     } = context;
     const {
       errors
     } = this._form._getState();
     context.oldErrors = clone(errors);
     const fieldErrors = this._validator.validateField(field, value);
-    const updatedErrors = set(errors, [field.id], fieldErrors.length ? fieldErrors : undefined);
+    const updatedErrors = set(errors, [field.id, ...Object.values(indexes || {})], fieldErrors.length ? fieldErrors : undefined);
     this._form._setState({
       errors: updatedErrors
     });
@@ -5301,10 +6033,11 @@ class ViewerCommands {
       'formField.validation.update': UpdateFieldValidationHandler
     };
   }
-  updateFieldValidation(field, value) {
+  updateFieldValidation(field, value, indexes) {
     const context = {
       field,
-      value
+      value,
+      indexes
     };
     this._commandStack.execute('formField.validation.update', context);
   }
@@ -5317,6 +6050,266 @@ var ViewerCommandsModule = {
   viewerCommands: ['type', ViewerCommands]
 };
 
+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); }
+var SvgExpand = function SvgExpand(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M2 9h5.5v3.086l-1.293-1.293-.707.707L8 14l2.5-2.5-.707-.707L8.5 12.086V9H14V8H2v1Zm11-7H3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm0 3H3V3h10v2Z"
+  })));
+};
+var ExpandSvg = SvgExpand;
+
+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); }
+var SvgCollapse = function SvgCollapse(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M13 10H3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1Zm0 3H3v-2h10v2ZM8.5 3.914l1.293 1.293.707-.707L8 2 5.5 4.5l.707.707L7.5 3.914V7H2v1h12V7H8.5V3.914Z"
+  })));
+};
+var CollapseSvg = SvgCollapse;
+
+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); }
+var SvgAdd = function SvgAdd(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6Zm0-1C4.15 1 1 4.15 1 8s3.15 7 7 7 7-3.15 7-7-3.15-7-7-7Z"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M12 7.5H8.5V4h-1v3.5H4v1h3.5V12h1V8.5H12v-1Z"
+  })));
+};
+var AddSvg = SvgAdd;
+
+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); }
+var SvgDelete = function SvgDelete(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z"
+  })));
+};
+var DeleteSvg = SvgDelete;
+
+// disable react hook rules as the linter is confusing the functional components within a class as class components
+class RepeatRenderManager {
+  constructor(form, formFields, formFieldRegistry, pathRegistry) {
+    this._form = form;
+    this._formFields = formFields;
+    this._formFieldRegistry = formFieldRegistry;
+    this._pathRegistry = pathRegistry;
+    this.Repeater = this.Repeater.bind(this);
+    this.RepeatFooter = this.RepeatFooter.bind(this);
+  }
+
+  /**
+   * Checks whether a field is currently repeating its children.
+   *
+   * @param {string} id - The id of the field to check
+   * @returns {boolean} - True if repeatable, false otherwise
+   */
+  isFieldRepeating(id) {
+    if (!id) {
+      return false;
+    }
+    const formField = this._formFieldRegistry.get(id);
+    const formFieldDefinition = this._formFields.get(formField.type);
+    return formFieldDefinition.config.repeatable && formField.isRepeating;
+  }
+  Repeater(props) {
+    const {
+      RowsRenderer,
+      indexes,
+      useSharedState,
+      ...restProps
+    } = props;
+    const [sharedRepeatState] = useSharedState;
+    const {
+      data
+    } = this._form._getState();
+    const repeaterField = props.field;
+    const dataPath = this._pathRegistry.getValuePath(repeaterField, {
+      indexes
+    });
+    const values = get(data, dataPath) || [];
+    const nonCollapsedItems = this._getNonCollapsedItems(repeaterField);
+    const collapseEnabled = !repeaterField.disableCollapse && values.length > nonCollapsedItems;
+    const isCollapsed = collapseEnabled && sharedRepeatState.isCollapsed;
+    const hasChildren = repeaterField.components && repeaterField.components.length > 0;
+    const showRemove = repeaterField.allowAddRemove && hasChildren;
+    const displayValues = isCollapsed ? values.slice(0, nonCollapsedItems) : values;
+    const onDeleteItem = index => {
+      const updatedValues = values.slice();
+      updatedValues.splice(index, 1);
+      props.onChange({
+        field: repeaterField,
+        value: updatedValues,
+        indexes
+      });
+    };
+    const parentExpressionContextInfo = useContext(LocalExpressionContext$1);
+    return jsx(Fragment, {
+      children: displayValues.map((value, index) => {
+        const elementProps = {
+          ...restProps,
+          indexes: {
+            ...(indexes || {}),
+            [repeaterField.id]: index
+          }
+        };
+        const localExpressionContextInfo = useMemo(() => ({
+          data: parentExpressionContextInfo.data,
+          this: value,
+          parent: buildExpressionContext(parentExpressionContextInfo),
+          i: [...parentExpressionContextInfo.i, index + 1]
+        }), [index, value]);
+        return !showRemove ? jsx(LocalExpressionContext$1.Provider, {
+          value: localExpressionContextInfo,
+          children: jsx(RowsRenderer, {
+            ...elementProps
+          })
+        }) : jsxs("div", {
+          class: "fjs-repeat-row-container",
+          children: [jsx("div", {
+            class: "fjs-repeat-row-rows",
+            children: jsx(LocalExpressionContext$1.Provider, {
+              value: localExpressionContextInfo,
+              children: jsx(RowsRenderer, {
+                ...elementProps
+              })
+            })
+          }), jsx("button", {
+            class: "fjs-repeat-row-remove",
+            type: "button",
+            "aria-label": `Remove list item ${index + 1}`,
+            onClick: () => onDeleteItem(index),
+            children: jsx("div", {
+              class: "fjs-repeat-row-remove-icon-container",
+              children: jsx(DeleteSvg, {})
+            })
+          })]
+        });
+      })
+    });
+  }
+  RepeatFooter(props) {
+    const addButtonRef = useRef(null);
+    const {
+      useSharedState,
+      indexes,
+      field: repeaterField,
+      readonly,
+      disabled
+    } = props;
+    const [sharedRepeatState, setSharedRepeatState] = useSharedState;
+    const {
+      data
+    } = this._form._getState();
+    const dataPath = this._pathRegistry.getValuePath(repeaterField, {
+      indexes
+    });
+    const values = get(data, dataPath) || [];
+    const nonCollapsedItems = this._getNonCollapsedItems(repeaterField);
+    const collapseEnabled = !repeaterField.disableCollapse && values.length > nonCollapsedItems;
+    const isCollapsed = collapseEnabled && sharedRepeatState.isCollapsed;
+    const hasChildren = repeaterField.components && repeaterField.components.length > 0;
+    const showAdd = repeaterField.allowAddRemove && hasChildren;
+    const toggle = () => {
+      setSharedRepeatState(state => ({
+        ...state,
+        isCollapsed: !isCollapsed
+      }));
+    };
+    const shouldScroll = useRef(false);
+    const onAddItem = () => {
+      const updatedValues = values.slice();
+      const newItem = this._form._getInitializedFieldData(this._form._getState().data, {
+        container: repeaterField,
+        indexes: {
+          ...indexes,
+          [repeaterField.id]: updatedValues.length
+        }
+      });
+      updatedValues.push(newItem);
+      shouldScroll.current = true;
+      props.onChange({
+        field: repeaterField,
+        value: updatedValues,
+        indexes
+      });
+      setSharedRepeatState(state => ({
+        ...state,
+        isCollapsed: false
+      }));
+    };
+    useScrollIntoView(addButtonRef, [values.length], {
+      align: 'bottom',
+      behavior: 'auto',
+      offset: 20
+    }, [shouldScroll]);
+    return jsxs("div", {
+      className: classNames('fjs-repeat-render-footer', {
+        'fjs-remove-allowed': repeaterField.allowAddRemove
+      }),
+      children: [showAdd ? jsx("button", {
+        readOnly: readonly,
+        disabled: disabled || readonly,
+        class: "fjs-repeat-render-add",
+        type: "button",
+        ref: addButtonRef,
+        onClick: onAddItem,
+        children: jsxs(Fragment, {
+          children: [jsx(AddSvg, {}), " ", 'Add new']
+        })
+      }) : null, collapseEnabled ? jsx("button", {
+        class: "fjs-repeat-render-collapse",
+        type: "button",
+        onClick: toggle,
+        children: isCollapsed ? jsxs(Fragment, {
+          children: [jsx(ExpandSvg, {}), " ", `Expand all (${values.length})`]
+        }) : jsxs(Fragment, {
+          children: [jsx(CollapseSvg, {}), " ", 'Collapse']
+        })
+      }) : null]
+    });
+  }
+  _getNonCollapsedItems(field) {
+    const DEFAULT_NON_COLLAPSED_ITEMS = 5;
+    const {
+      nonCollapsedItems
+    } = field;
+    return nonCollapsedItems ? nonCollapsedItems : DEFAULT_NON_COLLAPSED_ITEMS;
+  }
+}
+RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry'];
+
+var RepeatRenderModule = {
+  __init__: ['repeatRenderManager'],
+  repeatRenderManager: ['type', RepeatRenderManager]
+};
+
 var FN_REF = '__fn';
 var DEFAULT_PRIORITY = 1000;
 var slice = Array.prototype.slice;
@@ -5717,7 +6710,7 @@ EventBus.prototype._invokeListener = function (event, args, listener) {
  *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
  *
  * @param {string} event
- * @param {EventBusListener} listener
+ * @param {EventBusListener} newListener
  */
 EventBus.prototype._addListener = function (event, newListener) {
   var listener = this._getListeners(event),
@@ -6065,10 +7058,17 @@ class FieldFactory {
 
     const parent = _parent && this._formFieldRegistry.get(_parent);
     const parentPath = parent && this._pathRegistry.getValuePath(parent) || [];
-    if (config.keyed && key && !this._pathRegistry.canClaimPath([...parentPath, ...key.split('.')], true)) {
+    const knownAncestorIds = getAncestryList(_parent, this._formFieldRegistry);
+    if (config.keyed && key && !this._pathRegistry.canClaimPath([...parentPath, ...key.split('.')], {
+      isClosed: true,
+      knownAncestorIds
+    })) {
       throw new Error(`binding path '${[...parentPath, key].join('.')}' is already claimed`);
     }
-    if (config.pathed && path && !this._pathRegistry.canClaimPath([...parentPath, ...path.split('.')], false)) {
+    if (config.pathed && path && !this._pathRegistry.canClaimPath([...parentPath, ...path.split('.')], {
+      isRepeatable: config.repeatable,
+      knownAncestorIds
+    })) {
       throw new Error(`binding path '${[...parentPath, ...path.split('.')].join('.')}' is already claimed`);
     }
     const labelAttrs = applyDefaults && config.label ? {
@@ -6081,9 +7081,23 @@ class FieldFactory {
     this._ensureId(field);
     if (config.keyed) {
       this._ensureKey(field);
+      this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), {
+        isClosed: true,
+        claimerId: field.id,
+        knownAncestorIds: getAncestryList(_parent, this._formFieldRegistry)
+      });
     }
-    if (config.pathed && path) {
-      this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), false);
+    if (config.pathed) {
+      if (config.repeatable) {
+        this._enforceDefaultPath(field);
+      }
+      if (field.path) {
+        this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), {
+          isRepeatable: config.repeatable,
+          claimerId: field.id,
+          knownAncestorIds: getAncestryList(_parent, this._formFieldRegistry)
+        });
+      }
     }
     return field;
   }
@@ -6100,16 +7114,23 @@ class FieldFactory {
   }
   _ensureKey(field) {
     if (!field.key) {
-      let random;
-      const parent = this._formFieldRegistry.get(field._parent);
-
-      // ensure key uniqueness at level
-      do {
-        random = Math.random().toString(36).substring(7);
-      } while (parent && parent.components.some(child => child.key === random));
-      field.key = `${field.type}_${random}`;
+      field.key = this._getUniqueKeyPath(field);
+    }
+  }
+  _enforceDefaultPath(field) {
+    if (!field.path) {
+      field.path = this._getUniqueKeyPath(field);
     }
-    this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), true);
+  }
+  _getUniqueKeyPath(field) {
+    let random;
+    const parent = this._formFieldRegistry.get(field._parent);
+
+    // ensure key uniqueness at level
+    do {
+      random = Math.random().toString(36).substring(7);
+    } while (parent && parent.components.some(child => child.key === random));
+    return `${field.type}_${random}`;
   }
 }
 FieldFactory.$inject = ['formFieldRegistry', 'pathRegistry', 'formFields'];
@@ -6146,34 +7167,61 @@ FieldFactory.$inject = ['formFieldRegistry', 'pathRegistry', 'formFields'];
  *   ]
  */
 class PathRegistry {
-  constructor(formFieldRegistry, formFields) {
+  constructor(formFieldRegistry, formFields, injector) {
     this._formFieldRegistry = formFieldRegistry;
     this._formFields = formFields;
+    this._injector = injector;
     this._dataPaths = [];
   }
-  canClaimPath(path, closed = false) {
+  canClaimPath(path, options = {}) {
+    const {
+      isClosed = false,
+      isRepeatable = false,
+      skipAncestryCheck = false,
+      claimerId = null,
+      knownAncestorIds = []
+    } = options;
     let node = {
       children: this._dataPaths
     };
+
+    // (1) if we reach a leaf node, we cannot claim it, if we reach an open node, we can
+    // if we reach a repeatable node, we need to ensure that the claimer is (or will be) an ancestor of the repeater
     for (const segment of path) {
       node = _getNextSegment(node, segment);
-
-      // if no node at that path, we can claim it no matter what
       if (!node) {
         return true;
       }
-
-      // if we reach a leaf node, definitely not claimable
+      if (node.isRepeatable && !skipAncestryCheck) {
+        if (!(claimerId || knownAncestorIds.length)) {
+          throw new Error('cannot claim a path that contains a repeater without specifying a claimerId or knownAncestorIds');
+        }
+        const isValidRepeatClaim = knownAncestorIds.includes(node.repeaterId) || claimerId && getAncestryList(claimerId, this._formFieldRegistry).includes(node.repeaterId);
+        if (!isValidRepeatClaim) {
+          return false;
+        }
+      }
       if (node.children === null) {
         return false;
       }
     }
 
-    // if after all segments we reach a node with children, we can claim it only openly
-    return !closed;
+    // (2) if the path lands in the middle of the tree, we can only claim an open, non-repeatable path
+    return !(isClosed || isRepeatable);
   }
-  claimPath(path, closed = false) {
-    if (!this.canClaimPath(path, closed)) {
+  claimPath(path, options = {}) {
+    const {
+      isClosed = false,
+      isRepeatable = false,
+      claimerId = null,
+      knownAncestorIds = []
+    } = options;
+    if (!this.canClaimPath(path, {
+      isClosed,
+      isRepeatable,
+      claimerId,
+      knownAncestorIds
+    })) {
       throw new Error(`cannot claim path '${path.join('.')}'`);
     }
     let node = {
@@ -6193,9 +7241,15 @@ class PathRegistry {
       }
       node = child;
     }
-    if (closed) {
+    if (isClosed) {
       node.children = null;
     }
+
+    // add some additional info when we make a repeatable path claim
+    if (isRepeatable) {
+      node.isRepeatable = true;
+      node.repeaterId = claimerId;
+    }
   }
   unclaimPath(path) {
     // verification Pass
@@ -6244,6 +7298,7 @@ class PathRegistry {
       const callResult = fn({
         field,
         isClosed: true,
+        isRepeatable: false,
         context
       });
       return result && callResult;
@@ -6251,16 +7306,22 @@ class PathRegistry {
       const callResult = fn({
         field,
         isClosed: false,
+        isRepeatable: formFieldConfig.repeatable,
         context
       });
       result = result && callResult;
     }
-    if (field.components) {
+
+    // stop executing if false is specifically returned or if preventing recursion
+    if (result === false || context.preventRecursion) {
+      return result;
+    }
+    if (Array.isArray(field.components)) {
       for (const child of field.components) {
         const callResult = this.executeRecursivelyOnFields(child, fn, clone(context));
         result = result && callResult;
 
-        // only stop executing if false is specifically returned, not if undefined
+        // stop executing if false is specifically returned
         if (result === false) {
           return result;
         }
@@ -6275,6 +7336,7 @@ class PathRegistry {
    * @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.indexes=null] - A map of parent IDs to the index of the field within said parent, leave null to get an unindexed path.
    * @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.
@@ -6282,11 +7344,14 @@ class PathRegistry {
   getValuePath(field, options = {}) {
     const {
       replacements = {},
+      indexes = null,
       cutoffNode = null
     } = options;
     let localValuePath = [];
     const hasReplacement = Object.prototype.hasOwnProperty.call(replacements, field.id);
     const formFieldConfig = this._formFields.get(field.type).config;
+
+    // uses path overrides instead of true path to calculate a potential value path
     if (hasReplacement) {
       const replacement = replacements[field.id];
       if (replacement === null || replacement === undefined || replacement === '') {
@@ -6303,6 +7368,13 @@ class PathRegistry {
     } else if (formFieldConfig.pathed && field.path) {
       localValuePath = field.path.split('.');
     }
+
+    // add potential indexes of repeated fields
+    if (indexes) {
+      localValuePath = this._addIndexes(localValuePath, field, indexes);
+    }
+
+    // if parent exists and isn't cutoff node, add parent's value path
     if (field._parent && field._parent !== cutoffNode) {
       const parent = this._formFieldRegistry.get(field._parent);
       return [...(this.getValuePath(parent, options) || []), ...localValuePath];
@@ -6312,6 +7384,13 @@ class PathRegistry {
   clear() {
     this._dataPaths = [];
   }
+  _addIndexes(localValuePath, field, indexes) {
+    const repeatRenderManager = this._injector.get('repeatRenderManager', false);
+    if (repeatRenderManager && repeatRenderManager.isFieldRepeating(field._parent)) {
+      return [indexes[field._parent], ...localValuePath];
+    }
+    return localValuePath;
+  }
 }
 const _getNextSegment = (node, segment) => {
   if (isArray(node.children)) {
@@ -6319,7 +7398,7 @@ const _getNextSegment = (node, segment) => {
   }
   return null;
 };
-PathRegistry.$inject = ['formFieldRegistry', 'formFields'];
+PathRegistry.$inject = ['formFieldRegistry', 'formFields', 'injector'];
 
 /**
  * @typedef { { id: String, components: Array<String> } } FormRow
@@ -6411,7 +7490,7 @@ class FormLayouter {
       type,
       components
     } = formField;
-    if (type !== 'default' && type !== 'group' || !components) {
+    if (!['default', 'group', 'dynamiclist'].includes(type) || !components) {
       return;
     }
 
@@ -6503,6 +7582,9 @@ class FormFieldRegistry {
   getAll() {
     return Object.values(this._formFields);
   }
+  getForm() {
+    return this.getAll().find(formField => formField.type === 'default');
+  }
   forEach(callback) {
     this.getAll().forEach(formField => callback(formField));
   }
@@ -6694,7 +7776,7 @@ class Form {
           schema: importedSchema,
           warnings
         } = this.get('importer').importSchema(schema);
-        const initializedData = this._initializeFieldData(clone(data));
+        const initializedData = this._getInitializedFieldData(clone(data));
         this._setState({
           data: initializedData,
           errors: {},
@@ -6750,26 +7832,68 @@ class Form {
    * @returns {Errors}
    */
   validate() {
-    const formFieldRegistry = this.get('formFieldRegistry'),
+    const formFields = this.get('formFields'),
+      formFieldRegistry = this.get('formFieldRegistry'),
       pathRegistry = this.get('pathRegistry'),
       validator = this.get('validator');
     const {
       data
     } = this._getState();
-    const getErrorPath = field => [field.id];
-    const errors = formFieldRegistry.getAll().reduce((errors, field) => {
+    const getErrorPath = (field, indexes) => [field.id, ...Object.values(indexes || {})];
+    function validateFieldRecursively(errors, field, indexes) {
       const {
-        disabled
+        disabled,
+        type,
+        isRepeating
       } = field;
+      const {
+        config: fieldConfig
+      } = formFields.get(type);
+
+      // (1) Skip disabled fields
       if (disabled) {
-        return errors;
+        return;
+      }
+
+      // (2) Validate the field
+      const valuePath = pathRegistry.getValuePath(field, {
+        indexes
+      });
+      const valueData = get(data, valuePath);
+      const fieldErrors = validator.validateField(field, valueData);
+      if (fieldErrors.length) {
+        set(errors, getErrorPath(field, indexes), fieldErrors);
+      }
+
+      // (3) Process parents
+      if (!Array.isArray(field.components)) {
+        return;
+      }
+
+      // (4a) Recurse repeatable parents both across the indexes of repetition and the children
+      if (fieldConfig.repeatable && isRepeating) {
+        if (!Array.isArray(valueData)) {
+          return;
+        }
+        valueData.forEach((_, index) => {
+          field.components.forEach(component => {
+            validateFieldRecursively(errors, component, {
+              ...indexes,
+              [field.id]: index
+            });
+          });
+        });
+        return;
       }
-      const value = get(data, pathRegistry.getValuePath(field));
-      const fieldErrors = validator.validateField(field, value);
-      return set(errors, getErrorPath(field), fieldErrors.length ? fieldErrors : undefined);
-    }, /** @type {Errors} */{});
-    const filteredErrors = this._applyConditions(errors, data, {
-      getFilterPath: getErrorPath
+
+      // (4b) Recurse non-repeatable parents only across the children
+      field.components.forEach(component => validateFieldRecursively(errors, component, indexes));
+    }
+    const workingErrors = {};
+    validateFieldRecursively(workingErrors, formFieldRegistry.getForm());
+    const filteredErrors = this._applyConditions(workingErrors, data, {
+      getFilterPath: getErrorPath,
+      leafNodeDeletionOnly: true
     });
     this._setState({
       errors: filteredErrors
@@ -6867,11 +7991,12 @@ class Form {
   /**
    * @internal
    *
-   * @param { { add?: boolean, field: any, remove?: number, value?: any } } update
+   * @param { { add?: boolean, field: any, indexes: object, remove?: number, value?: any } } update
    */
   _update(update) {
     const {
       field,
+      indexes,
       value
     } = update;
     const {
@@ -6881,8 +8006,11 @@ class Form {
     const validator = this.get('validator'),
       pathRegistry = this.get('pathRegistry');
     const fieldErrors = validator.validateField(field, value);
-    set(data, pathRegistry.getValuePath(field), value);
-    set(errors, [field.id], fieldErrors.length ? fieldErrors : undefined);
+    const valuePath = pathRegistry.getValuePath(field, {
+      indexes
+    });
+    set(data, valuePath, value);
+    set(errors, [field.id, ...Object.values(indexes || {})], fieldErrors.length ? fieldErrors : undefined);
     this._setState({
       data: clone(data),
       errors: clone(errors)
@@ -6911,7 +8039,7 @@ class Form {
   * @internal
   */
   _getModules() {
-    return [ExpressionLanguageModule, MarkdownModule, ViewerCommandsModule];
+    return [ExpressionLanguageModule, MarkdownModule, ViewerCommandsModule, RepeatRenderModule];
   }
 
   /**
@@ -6925,29 +8053,58 @@ class Form {
    * @internal
    */
   _getSubmitData() {
-    const formFieldRegistry = this.get('formFieldRegistry'),
-      pathRegistry = this.get('pathRegistry'),
-      formFields = this.get('formFields');
+    const formFieldRegistry = this.get('formFieldRegistry');
+    const formFields = this.get('formFields');
+    const pathRegistry = this.get('pathRegistry');
     const formData = this._getState().data;
-    const submitData = formFieldRegistry.getAll().reduce((previous, field) => {
+    function collectSubmitDataRecursively(submitData, formField, indexes) {
       const {
         disabled,
         type
-      } = field;
+      } = formField;
       const {
         config: fieldConfig
       } = formFields.get(type);
 
-      // do not submit disabled form fields or routing fields
-      if (disabled || !fieldConfig.keyed) {
-        return previous;
+      // (1) Process keyed fields
+      if (!disabled && fieldConfig.keyed) {
+        const valuePath = pathRegistry.getValuePath(formField, {
+          indexes
+        });
+        const value = get(formData, valuePath);
+        set(submitData, valuePath, value);
+      }
+
+      // (2) Process parents
+      if (!Array.isArray(formField.components)) {
+        return;
+      }
+
+      // (3a) Recurse repeatable parents both across the indexes of repetition and the children
+      if (fieldConfig.repeatable && formField.isRepeating) {
+        const valueData = get(formData, pathRegistry.getValuePath(formField, {
+          indexes
+        }));
+        if (!Array.isArray(valueData)) {
+          return;
+        }
+        valueData.forEach((_, index) => {
+          formField.components.forEach(component => {
+            collectSubmitDataRecursively(submitData, component, {
+              ...indexes,
+              [formField.id]: index
+            });
+          });
+        });
+        return;
       }
-      const valuePath = pathRegistry.getValuePath(field);
-      const value = get(formData, valuePath);
-      return set(previous, valuePath, value);
-    }, {});
-    const filteredSubmitData = this._applyConditions(submitData, formData);
-    return filteredSubmitData;
+
+      // (3b) Recurse non-repeatable parents only across the children
+      formField.components.forEach(component => collectSubmitDataRecursively(submitData, component, indexes));
+    }
+    const workingSubmitData = {};
+    collectSubmitDataRecursively(workingSubmitData, formFieldRegistry.getForm(), {});
+    return this._applyConditions(workingSubmitData, formData);
   }
 
   /**
@@ -6961,26 +8118,27 @@ class Form {
   /**
    * @internal
    */
-  _initializeFieldData(data) {
-    const formFieldRegistry = this.get('formFieldRegistry'),
-      formFields = this.get('formFields'),
-      pathRegistry = this.get('pathRegistry');
-    return formFieldRegistry.getAll().reduce((initializedData, formField) => {
+  _getInitializedFieldData(data, options = {}) {
+    const formFieldRegistry = this.get('formFieldRegistry');
+    const formFields = this.get('formFields');
+    const pathRegistry = this.get('pathRegistry');
+    function initializeFieldDataRecursively(initializedData, formField, indexes) {
       const {
         defaultValue,
-        type
+        type,
+        isRepeating
       } = formField;
+      const {
+        config: fieldConfig
+      } = formFields.get(type);
+      const valuePath = pathRegistry.getValuePath(formField, {
+        indexes
+      });
+      let valueData = get(data, valuePath);
 
-      // try to get value from data
-      // if unavailable - try to get default value from form field
-      // if unavailable - get empty value from form field
-
-      const valuePath = pathRegistry.getValuePath(formField);
-      if (valuePath) {
-        const {
-          config: fieldConfig
-        } = formFields.get(type);
-        let valueData = get(data, valuePath);
+      // (1) Process keyed fields
+      if (fieldConfig.keyed) {
+        // (a) Retrieve and sanitize data from input
         if (!isUndefined(valueData) && fieldConfig.sanitizeValue) {
           valueData = fieldConfig.sanitizeValue({
             formField,
@@ -6988,15 +8146,66 @@ class Form {
             value: valueData
           });
         }
+
+        // (b) Initialize field value in output data
         const initializedFieldValue = !isUndefined(valueData) ? valueData : !isUndefined(defaultValue) ? defaultValue : fieldConfig.emptyValue;
-        return set(initializedData, valuePath, initializedFieldValue);
+        set(initializedData, valuePath, initializedFieldValue);
+      }
+
+      // (2) Process parents
+      if (!Array.isArray(formField.components)) {
+        return;
+      }
+      if (fieldConfig.repeatable && isRepeating) {
+        // (a) Sanitize repeatable parents data if it is not an array
+        if (!valueData || !Array.isArray(valueData)) {
+          valueData = new Array(isUndefined(formField.defaultRepetitions) ? 1 : formField.defaultRepetitions).fill().map(_ => ({})) || [];
+        }
+
+        // (b) Ensure all elements of the array are objects
+        valueData = valueData.map(val => isObject(val) ? val : {});
+
+        // (c) Initialize field value in output data
+        set(initializedData, valuePath, valueData);
+
+        // (d) If indexed ahead of time, recurse repeatable simply across the children
+        if (!isUndefined(indexes[formField.id])) {
+          formField.components.forEach(component => initializeFieldDataRecursively(initializedData, component, {
+            ...indexes
+          }));
+          return;
+        }
+
+        // (e1) Recurse repeatable parents both across the indexes of repetition and the children
+        valueData.forEach((_, index) => {
+          formField.components.forEach(component => initializeFieldDataRecursively(initializedData, component, {
+            ...indexes,
+            [formField.id]: index
+          }));
+        });
+        return;
       }
-      return initializedData;
-    }, data);
+
+      // (e2) Recurse non-repeatable parents only across the children
+      formField.components.forEach(component => initializeFieldDataRecursively(initializedData, component, indexes));
+    }
+
+    // allows definition of a specific subfield to generate the data for
+    const container = options.container || formFieldRegistry.getForm();
+    const indexes = options.indexes || {};
+    const basePath = pathRegistry.getValuePath(container, {
+      indexes
+    }) || [];
+
+    // if indexing ahead of time, we must add this index to the data path at the end
+    const path = !isUndefined(indexes[container.id]) ? [...basePath, indexes[container.id]] : basePath;
+    const workingData = clone(data);
+    initializeFieldDataRecursively(workingData, container, indexes);
+    return get(workingData, path, {});
   }
 }
 
-const schemaVersion = 13;
+const schemaVersion = 14;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -7021,5 +8230,5 @@ function createForm(options) {
   });
 }
 
-export { Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, FormComponent$1 as Default, Description, Errors, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext$1 as FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext$1 as FormRenderContext, Group, IFrame, Image, Importer, Label, MINUTES_IN_DAY, MarkdownModule, MarkdownRenderer, Numberfield, PathRegistry, Radio, Select, Separator, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Taglist, Text, Textarea, Textfield, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, VALUES_SOURCES_PATHS, VALUES_SOURCE_DEFAULT, ViewerCommands, ViewerCommandsModule, clone, createForm, createFormContainer, createInjector, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathsEqual, runRecursively, sanitizeHTML, sanitizeIFrameSource, sanitizeImageSource, schemaVersion, useExpressionEvaluation, useSingleLineTemplateEvaluation, useTemplateEvaluation };
+export { Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, FormComponent$1 as Default, Description, DynamicList, Errors, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext$1 as FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext$1 as FormRenderContext, Group, IFrame, Image, Importer, Label, LocalExpressionContext$1 as LocalExpressionContext, MINUTES_IN_DAY, MarkdownModule, MarkdownRenderer, Numberfield, OPTIONS_SOURCES, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, OPTIONS_SOURCES_PATHS, OPTIONS_SOURCE_DEFAULT, PathRegistry, Radio, RepeatRenderManager, RepeatRenderModule, Select, Separator, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Table, Taglist, Text, Textarea, Textfield, ViewerCommands, ViewerCommandsModule, buildExpressionContext, clone, createForm, createFormContainer, createInjector, formFields, generateIdForType, generateIndexForType, getAncestryList, getOptionsSource, getSchemaVariables, iconsByType, isRequired, pathParse, pathsEqual, runRecursively, sanitizeHTML, sanitizeIFrameSource, sanitizeImageSource, schemaVersion, useExpressionEvaluation, useSingleLineTemplateEvaluation, useTemplateEvaluation };
 //# sourceMappingURL=index.es.js.map