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

package/dist/index.cjs

@@ -665,6 +665,12 @@ const FormContext = preact.createContext({
   formId: null
 });
 
+/**
+ * @template T
+ * @param {string} type
+ * @param {boolean} [strict=true]
+ * @returns {T | null}
+ */
 function useService(type, strict) {
   const {
     getService
@@ -743,11 +749,10 @@ function buildExpressionContext(context) {
 }
 
 /**
- * Evaluate a string based on the expressionLanguage and context information.
- * If the string is not an expression, it is returned as is.
+ * If the value is a valid expression, it is evaluated and returned. Otherwise, it is returned as-is.
  *
  * @param {any} expressionLanguage - The expression language to use.
- * @param {string} value - The string to evaluate.
+ * @param {any} value - The static value or expression to evaluate.
  * @param {Object} expressionContextInfo - The context information to use.
  * @returns {any} - Evaluated value or the original value if not an expression.
  */
@@ -878,11 +883,10 @@ function _isAllowedValue(value) {
 }
 
 /**
- * Evaluate a string reactively based on the expressionLanguage and form data.
- * If the string is not an expression, it is returned as is.
+ * If the value is a valid expression, it is evaluated and returned. Otherwise, it is returned as-is.
  * The function is memoized to minimize re-renders.
  *
- * @param {string} value - The string to evaluate.
+ * @param {any} value - A static value or expression to evaluate.
  * @returns {any} - Evaluated value or the original value if not an expression.
  */
 function useExpressionEvaluation(value) {
@@ -1122,7 +1126,7 @@ function _isElementScrollable(el) {
 }
 
 const EMPTY_OBJECT = {};
-const EMPTY_ARRAY = [];
+const EMPTY_ARRAY$2 = [];
 
 /**
  * Custom hook to scroll an element within a scrollable container.
@@ -1138,7 +1142,7 @@ const EMPTY_ARRAY = [];
  */
 function useScrollIntoView(scrolledElementRef, deps, scrollOptions, flagRefs) {
   const _scrollOptions = scrollOptions || EMPTY_OBJECT;
-  const _flagRefs = flagRefs || EMPTY_ARRAY;
+  const _flagRefs = flagRefs || EMPTY_ARRAY$2;
   hooks.useEffect(() => {
     // return early if flags are not raised, or component is not mounted
     if (minDash.some(_flagRefs, ref => !ref.current) || !scrolledElementRef.current) {
@@ -1192,6 +1196,23 @@ function _getTopOffset(item, scrollContainer, options) {
   return 0;
 }
 
+/**
+ * If the value is a valid expression, we evaluate it. Otherwise, we continue with the value as-is.
+ * If the resulting value isn't a boolean, we return 'false'
+ * The function is memoized to minimize re-renders.
+ *
+ * @param {boolean | string} value - A static boolean or expression to evaluate.
+ * @returns {boolean} - Evaluated boolean result.
+ */
+function useBooleanExpressionEvaluation(value) {
+  const expressionLanguage = useService('expressionLanguage');
+  const expressionContextInfo = hooks.useContext(LocalExpressionContext);
+  return hooks.useMemo(() => {
+    const evaluationResult = runExpressionEvaluation(expressionLanguage, value, expressionContextInfo);
+    return typeof evaluationResult === 'boolean' ? evaluationResult : false;
+  }, [expressionLanguage, expressionContextInfo, value]);
+}
+
 /**
  * Returns the conditionally filtered data of a form reactively.
  * Memoised to minimize re-renders
@@ -1676,7 +1697,7 @@ function useCleanupMultiSelectValue(props) {
   }, [field, options, onChange, memoizedValues, loadState]);
 }
 
-const type$h = 'button';
+const type$i = 'button';
 function Button(props) {
   const {
     disabled,
@@ -1691,7 +1712,7 @@ function Button(props) {
     debug: true
   });
   return jsxRuntime.jsx("div", {
-    class: formFieldClasses(type$h),
+    class: formFieldClasses(type$i),
     children: jsxRuntime.jsx("button", {
       class: "fjs-button",
       type: action,
@@ -1703,7 +1724,7 @@ function Button(props) {
   });
 }
 Button.config = {
-  type: type$h,
+  type: type$i,
   keyed: false,
   label: 'Button',
   group: 'action',
@@ -1778,7 +1799,7 @@ function Label(props) {
   });
 }
 
-const type$g = 'checkbox';
+const type$h = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
@@ -1808,7 +1829,7 @@ function Checkbox(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: classNames(formFieldClasses(type$g, {
+    class: classNames(formFieldClasses(type$h, {
       errors,
       disabled,
       readonly
@@ -1843,7 +1864,7 @@ function Checkbox(props) {
   });
 }
 Checkbox.config = {
-  type: type$g,
+  type: type$h,
   keyed: true,
   label: 'Checkbox',
   group: 'selection',
@@ -1856,7 +1877,7 @@ Checkbox.config = {
   })
 };
 
-const type$f = 'checklist';
+const type$g = 'checklist';
 function Checklist(props) {
   const {
     disabled,
@@ -1909,7 +1930,7 @@ function Checklist(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: classNames(formFieldClasses(type$f, {
+    class: classNames(formFieldClasses(type$g, {
       errors,
       disabled,
       readonly
@@ -1953,7 +1974,7 @@ function Checklist(props) {
   });
 }
 Checklist.config = {
-  type: type$f,
+  type: type$g,
   keyed: true,
   label: 'Checkbox group',
   group: 'selection',
@@ -1963,7 +1984,9 @@ Checklist.config = {
 };
 
 const noop$1 = () => false;
+const ids$2 = new Ids([32, 36, 1]);
 function FormField(props) {
+  const instanceIdRef = hooks.useRef(ids$2.next());
   const {
     field,
     indexes,
@@ -2009,22 +2032,28 @@ function FormField(props) {
   // add precedence: global readonly > form field disabled
   const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
   const hidden = useCondition(field.conditional && field.conditional.hide || null);
-  const fieldInstance = hooks.useMemo(() => ({
-    id: field.id,
-    expressionContextInfo: localExpressionContext,
-    valuePath,
-    indexes
-  }), [field.id, valuePath, localExpressionContext, indexes]);
+  const instanceId = hooks.useMemo(() => {
+    if (!formFieldInstanceRegistry) {
+      return null;
+    }
+    return formFieldInstanceRegistry.syncInstance(instanceIdRef.current, {
+      id: field.id,
+      expressionContextInfo: localExpressionContext,
+      valuePath,
+      value,
+      indexes,
+      hidden
+    });
+  }, [formFieldInstanceRegistry, field.id, localExpressionContext, valuePath, value, indexes, hidden]);
+  const fieldInstance = instanceId ? formFieldInstanceRegistry.get(instanceId) : null;
 
-  // register form field instance
+  // cleanup the instance on unmount
   hooks.useEffect(() => {
-    if (formFieldInstanceRegistry && !hidden) {
-      const instanceId = formFieldInstanceRegistry.add(fieldInstance);
-      return () => {
-        formFieldInstanceRegistry.remove(instanceId);
-      };
+    const instanceId = instanceIdRef.current;
+    if (formFieldInstanceRegistry) {
+      return () => formFieldInstanceRegistry.cleanupInstance(instanceId);
     }
-  }, [fieldInstance, formFieldInstanceRegistry, hidden]);
+  }, [formFieldInstanceRegistry]);
 
   // ensures the initial validation behavior can be re-triggered upon form reset
   hooks.useEffect(() => {
@@ -2260,16 +2289,16 @@ Default.config = {
   })
 };
 
-var _path$w;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+var _path$x;
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 var SvgCalendar = function SvgCalendar(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     width: 14,
     height: 15,
     fill: "none",
     viewBox: "0 0 28 30"
-  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M19 2H9V0H7v2H2a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-5V0h-2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3zm-5 4v17h24V11z",
@@ -2534,16 +2563,16 @@ function Datepicker(props) {
   });
 }
 
-var _path$v, _path2$4;
-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 _path$w, _path2$4;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 var SvgClock = function SvgClock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none",
     viewBox: "0 0 28 29"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M13 14.41 18.59 20 20 18.59l-5-5.01V5h-2z"
   })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -2812,7 +2841,7 @@ function Timepicker(props) {
   });
 }
 
-const type$e = 'datetime';
+const type$f = 'datetime';
 function Datetime(props) {
   const {
     disabled,
@@ -2981,7 +3010,7 @@ function Datetime(props) {
     'aria-describedby': [descriptionId, errorMessageId].join(' ')
   };
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$e, {
+    class: formFieldClasses(type$f, {
       errors: allErrors,
       disabled,
       readonly
@@ -3006,7 +3035,7 @@ function Datetime(props) {
   });
 }
 Datetime.config = {
-  type: type$e,
+  type: type$f,
   keyed: true,
   label: 'Date time',
   group: 'basic-input',
@@ -3066,7 +3095,7 @@ Group.config = {
   })
 };
 
-const type$d = 'iframe';
+const type$e = 'iframe';
 const DEFAULT_HEIGHT = 300;
 function IFrame(props) {
   const {
@@ -3096,7 +3125,7 @@ function IFrame(props) {
     setIframeRefresh(count => count + 1);
   }, [sandbox, allow]);
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$d, {
+    class: formFieldClasses(type$e, {
       disabled,
       readonly
     }),
@@ -3131,7 +3160,7 @@ function IFramePlaceholder(props) {
   });
 }
 IFrame.config = {
-  type: type$d,
+  type: type$e,
   keyed: false,
   label: 'iFrame',
   group: 'container',
@@ -3143,42 +3172,42 @@ IFrame.config = {
   })
 };
 
-var _path$u;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+var _path$v;
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 var SvgButton = function SvgButton(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M45 17a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V20a3 3 0 0 1 3-3zm-9 8.889H18v2.222h18z"
   })));
 };
 
-var _path$t;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+var _path$u;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 var SvgCheckbox = function SvgCheckbox(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M34 18H20a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V20a2 2 0 0 0-2-2m-9 14-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23z"
   })));
 };
 
-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 _path$t;
+function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 var SvgChecklist = function SvgChecklist(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M14.35 24.75H19v4.65h-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.414M14.35 37.05H19v4.65h-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.414M14.35 12.45H19v4.65h-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.414m12.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.293m0 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.293m0-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.293",
@@ -3186,15 +3215,15 @@ var SvgChecklist = function SvgChecklist(props) {
   })));
 };
 
-var _path$r, _path2$3, _path3;
-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 _path$s, _path2$3, _path3;
+function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 var SvgDatetime = function SvgDatetime(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 0 0-2.06 2.06v23.549a2.07 2.07 0 0 0 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 0 1-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 0 1 .707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06"
   })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3205,15 +3234,15 @@ var SvgDatetime = function SvgDatetime(props) {
   })));
 };
 
-var _path$q, _path2$2;
-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 _path$r, _path2$2;
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 var SvgTaglist = function SvgTaglist(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1"
   })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3222,9 +3251,9 @@ var SvgTaglist = function SvgTaglist(props) {
 };
 
 var _rect, _rect2, _rect3;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+function _extends$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 SvgForm = function SvgForm(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54
@@ -3249,15 +3278,15 @@ var SvgForm = function SvgForm(props) {
   })));
 };
 
-var _path$p;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+var _path$q;
+function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 var SvgGroup = function SvgGroup(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#000",
     fillRule: "evenodd",
     d: "M4.05 42.132v1.164c0 .693.604 1.254 1.35 1.254h1.35v-2.507h-2.7v.09Zm0-2.328h2.7v-2.328h-2.7zm0-4.656h2.7V32.82h-2.7zm0-4.656h2.7v-2.328h-2.7zm0-4.656h2.7v-2.328h-2.7zm0-4.656h2.7v-2.328h-2.7zm0-4.656h2.7v-2.328h-2.7zm0-4.656v.09h2.7V9.45H5.4c-.746 0-1.35.561-1.35 1.254zm5.4-2.418v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7v-1.253c0-.693-.604-1.254-1.35-1.254zm2.7 4.746h-2.7v2.328h2.7zm0 4.656h-2.7v2.328h2.7zm0 4.656h-2.7v2.328h2.7zm0 4.656h-2.7v2.328h2.7zm0 4.656h-2.7v2.328h2.7zm0 4.656h-2.7v2.328h2.7zm0 4.656v-.09h-2.7v2.508h1.35c.746 0 1.35-.561 1.35-1.254zm-5.4 2.418v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507z",
@@ -3265,50 +3294,64 @@ var SvgGroup = function SvgGroup(props) {
   })));
 };
 
+var _path$p;
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+var SvgNumber = function SvgNumber(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 54,
+    height: 54,
+    fill: "currentcolor"
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1M35 28.444h7l-3.5 4zM35 26h7l-3.5-4z"
+  })));
+};
+
 var _path$o;
 function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
-var SvgNumber = function SvgNumber(props) {
+var SvgRadio = function SvgRadio(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
   }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1M35 28.444h7l-3.5 4zM35 26h7l-3.5-4z"
+    d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5m0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10m0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16"
   })));
 };
 
 var _path$n;
 function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
-var SvgRadio = function SvgRadio(props) {
+var SvgSelect = function SvgSelect(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
   }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5m0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10m0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16"
+    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-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1m-12 7h9l-4.5 6z"
   })));
 };
 
 var _path$m;
 function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
-var SvgSelect = function SvgSelect(props) {
+var SvgSeparator = function SvgSeparator(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "currentcolor"
+    fill: "none"
   }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1m-12 7h9l-4.5 6z"
+    fill: "currentColor",
+    d: "M26.293 16.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 18.414l-3.293 3.293a1 1 0 0 1-1.414-1.414zM9 26h36v2H9zm13.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.414"
   })));
 };
 
 var _path$l;
 function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
-var SvgSeparator = function SvgSeparator(props) {
+var SvgSpacer = function SvgSpacer(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
@@ -3316,13 +3359,13 @@ var SvgSeparator = function SvgSeparator(props) {
     fill: "none"
   }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.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.414zM9 26h36v2H9zm13.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.414"
+    d: "M9 15v2h36v-2zm0 22v2h36v-2zm17.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.414zm-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.414"
   })));
 };
 
 var _path$k;
 function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
-var SvgSpacer = function SvgSpacer(props) {
+var SvgDynamicList = function SvgDynamicList(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
@@ -3330,74 +3373,74 @@ var SvgSpacer = function SvgSpacer(props) {
     fill: "none"
   }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M9 15v2h36v-2zm0 22v2h36v-2zm17.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.414zm-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.414"
+    fillRule: "evenodd",
+    d: "M2.7 43.296v1.254c0 .746.604 1.35 1.35 1.35h1.275v-1.795q.074.211.075.445v-1.254h-.075V43.2H4.05c.177 0 .347.034.502.096zm2.7-2.507v-2.507H2.7v2.507zm0-5.014v-2.507H2.7v2.507zm0-5.014v-2.507H2.7v2.507zm0-5.015V23.24H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507zm0-5.014V13.21H2.7v2.507zm-2.7-5.014h1.852a1.4 1.4 0 0 1-.502.096h1.275v-.096H5.4V9.45q0 .235-.075.445V8.1H4.05A1.35 1.35 0 0 0 2.7 9.45zm5.175.096h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1-2.7v1.795a1.4 1.4 0 0 1-.075-.445v1.254h.075v.096h1.275a1.4 1.4 0 0 1-.502-.096H51.3V9.45a1.35 1.35 0 0 0-1.35-1.35zm-.075 5.11v2.508h2.7V13.21zm0 5.015v2.507h2.7v-2.507zm0 5.014v2.507h2.7V23.24zm0 5.015v2.507h2.7v-2.507zm0 5.014v2.507h2.7v-2.507zm0 5.014v2.507h2.7v-2.507zm2.7 5.014h-1.852a1.4 1.4 0 0 1 .502-.096h-1.275v.096H48.6v1.254q0-.235.075-.445V45.9h1.275a1.35 1.35 0 0 0 1.35-1.35zm-5.175-.096h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zM16.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.05zm0 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.35m27 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.05zm-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.35M43.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.7zm-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.05z",
+    clipRule: "evenodd"
   })));
 };
 
 var _path$j;
 function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
-var SvgDynamicList = function SvgDynamicList(props) {
+var SvgText = function SvgText(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "none"
+    fill: "currentcolor"
   }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M2.7 43.296v1.254c0 .746.604 1.35 1.35 1.35h1.275v-1.795q.074.211.075.445v-1.254h-.075V43.2H4.05c.177 0 .347.034.502.096zm2.7-2.507v-2.507H2.7v2.507zm0-5.014v-2.507H2.7v2.507zm0-5.014v-2.507H2.7v2.507zm0-5.015V23.24H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507zm0-5.014V13.21H2.7v2.507zm-2.7-5.014h1.852a1.4 1.4 0 0 1-.502.096h1.275v-.096H5.4V9.45q0 .235-.075.445V8.1H4.05A1.35 1.35 0 0 0 2.7 9.45zm5.175.096h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1-2.7v1.795a1.4 1.4 0 0 1-.075-.445v1.254h.075v.096h1.275a1.4 1.4 0 0 1-.502-.096H51.3V9.45a1.35 1.35 0 0 0-1.35-1.35zm-.075 5.11v2.508h2.7V13.21zm0 5.015v2.507h2.7v-2.507zm0 5.014v2.507h2.7V23.24zm0 5.015v2.507h2.7v-2.507zm0 5.014v2.507h2.7v-2.507zm0 5.014v2.507h2.7v-2.507zm2.7 5.014h-1.852a1.4 1.4 0 0 1 .502-.096h-1.275v.096H48.6v1.254q0-.235.075-.445V45.9h1.275a1.35 1.35 0 0 0 1.35-1.35zm-5.175-.096h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zM16.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.05zm0 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.35m27 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.05zm-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.35M43.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.7zm-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.05z",
-    clipRule: "evenodd"
+    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.5 15.5 0 0 1 2.4.14 3.4 3.4 0 0 1 1.41.55 3.5 3.5 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.6 3.6 0 0 1-1.09 1.4 3.9 3.9 0 0 1-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.8 1.8 0 0 0 1.1-.49 1.4 1.4 0 0 0 .41-1 1.5 1.5 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.5 11.5 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.7 1.7 0 0 0-.86-.62 9.3 9.3 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.1 7.1 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.3 5.3 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.21"
   })));
 };
 
 var _path$i;
 function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
-var SvgText = function SvgText(props) {
+var SvgHtml = function SvgHtml(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "currentcolor"
+    fill: "none"
   }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.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.5 15.5 0 0 1 2.4.14 3.4 3.4 0 0 1 1.41.55 3.5 3.5 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.6 3.6 0 0 1-1.09 1.4 3.9 3.9 0 0 1-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.8 1.8 0 0 0 1.1-.49 1.4 1.4 0 0 0 .41-1 1.5 1.5 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.5 11.5 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.7 1.7 0 0 0-.86-.62 9.3 9.3 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.1 7.1 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.3 5.3 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.21"
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M47.008 12.15c1.625 0 2.942 1.36 2.942 3.039v23.622c0 1.678-1.317 3.039-2.942 3.039H6.992c-1.625 0-2.942-1.36-2.942-3.039V15.189c0-1.678 1.317-3.039 2.942-3.039zm0 2.026H6.992c-.542 0-.98.454-.98 1.013V16.2h-.004v2.7h.003v19.911c0 .56.44 1.013.98 1.013h40.017c.542 0 .98-.453.98-1.013V18.9h.005v-2.7h-.004v-1.011c0-.56-.44-1.013-.98-1.013M14.934 26.055v-3.78h2.194v9.45h-2.194v-3.78h-3.29v3.78H9.45v-9.45h2.194v3.78zm4.388-1.89h2.194v7.56h2.193v-7.56h2.194v-1.89h-6.581zm14.26-1.89h2.193v9.45h-2.194V25.11l-1.645 3.78-1.645-3.78v6.615h-2.194v-9.45h2.194l1.645 3.78zm4.387 0h2.194v7.56h4.387v1.89h-6.581z",
+    clipRule: "evenodd"
   })));
 };
 
 var _path$h;
 function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
-var SvgHtml = function SvgHtml(props) {
+var SvgExpressionField = function SvgExpressionField(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
   }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
+    fill: "currentcolor",
     fillRule: "evenodd",
-    d: "M47.008 12.15c1.625 0 2.942 1.36 2.942 3.039v23.622c0 1.678-1.317 3.039-2.942 3.039H6.992c-1.625 0-2.942-1.36-2.942-3.039V15.189c0-1.678 1.317-3.039 2.942-3.039zm0 2.026H6.992c-.542 0-.98.454-.98 1.013V16.2h-.004v2.7h.003v19.911c0 .56.44 1.013.98 1.013h40.017c.542 0 .98-.453.98-1.013V18.9h.005v-2.7h-.004v-1.011c0-.56-.44-1.013-.98-1.013M14.934 26.055v-3.78h2.194v9.45h-2.194v-3.78h-3.29v3.78H9.45v-9.45h2.194v3.78zm4.388-1.89h2.194v7.56h2.193v-7.56h2.194v-1.89h-6.581zm14.26-1.89h2.193v9.45h-2.194V25.11l-1.645 3.78-1.645-3.78v6.615h-2.194v-9.45h2.194l1.645 3.78zm4.387 0h2.194v7.56h4.387v1.89h-6.581z",
+    d: "M12.78 16.2v6.75c0 1.619-.635 3.059-1.618 4.05.983.991 1.618 2.431 1.618 4.05v6.75h3.51v2.7h-3.51c-1.289 0-2.34-1.213-2.34-2.7v-6.75c0-1.487-1.051-2.7-2.34-2.7v-2.7c1.289 0 2.34-1.213 2.34-2.7V16.2c0-1.487 1.051-2.7 2.34-2.7h3.51v2.7zm30.78 0v6.75c0 1.487 1.051 2.7 2.34 2.7v2.7c-1.289 0-2.34 1.213-2.34 2.7v6.75c0 1.487-1.051 2.7-2.34 2.7h-3.51v-2.7h3.51v-6.75c0-1.619.635-3.059 1.618-4.05-.983-.991-1.618-2.431-1.618-4.05V16.2h-3.51v-2.7h3.51c1.289 0 2.34 1.213 2.34 2.7M21.8 34.531q.7-.569.959-1.758l1.788-8.34h1.585l.387-1.828h-1.585l.405-1.878h1.585l.387-1.827H25.69q-1.271 0-1.972.569-.681.569-.94 1.758l-.294 1.378H21.34l-.387 1.827h1.142l-1.898 8.841h-1.585l-.387 1.827h1.622q1.272 0 1.953-.569m7.248-7.686-3.797 4.808h2.599l2.12-3.016h.22l.885 3.016h2.599l-1.677-4.36 3.778-4.688h-2.599l-2.12 2.947h-.22l-.885-2.947h-2.599z",
     clipRule: "evenodd"
   })));
 };
 
 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 SvgExpressionField = function SvgExpressionField(props) {
+var SvgTextfield = function SvgTextfield(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "none"
+    fill: "currentcolor"
   }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentcolor",
     fillRule: "evenodd",
-    d: "M12.78 16.2v6.75c0 1.619-.635 3.059-1.618 4.05.983.991 1.618 2.431 1.618 4.05v6.75h3.51v2.7h-3.51c-1.289 0-2.34-1.213-2.34-2.7v-6.75c0-1.487-1.051-2.7-2.34-2.7v-2.7c1.289 0 2.34-1.213 2.34-2.7V16.2c0-1.487 1.051-2.7 2.34-2.7h3.51v2.7zm30.78 0v6.75c0 1.487 1.051 2.7 2.34 2.7v2.7c-1.289 0-2.34 1.213-2.34 2.7v6.75c0 1.487-1.051 2.7-2.34 2.7h-3.51v-2.7h3.51v-6.75c0-1.619.635-3.059 1.618-4.05-.983-.991-1.618-2.431-1.618-4.05V16.2h-3.51v-2.7h3.51c1.289 0 2.34 1.213 2.34 2.7M21.8 34.531q.7-.569.959-1.758l1.788-8.34h1.585l.387-1.828h-1.585l.405-1.878h1.585l.387-1.827H25.69q-1.271 0-1.972.569-.681.569-.94 1.758l-.294 1.378H21.34l-.387 1.827h1.142l-1.898 8.841h-1.585l-.387 1.827h1.622q1.272 0 1.953-.569m7.248-7.686-3.797 4.808h2.599l2.12-3.016h.22l.885 3.016h2.599l-1.677-4.36 3.778-4.688h-2.599l-2.12 2.947h-.22l-.885-2.947h-2.599z",
-    clipRule: "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-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1m-32 4v10h-2V22z"
   })));
 };
 
 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 SvgTextfield = function SvgTextfield(props) {
+var SvgTextarea = function SvgTextarea(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
@@ -3405,70 +3448,72 @@ var SvgTextfield = function SvgTextfield(props) {
     fill: "currentcolor"
   }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1m-32 4v10h-2V22z"
+    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-3zm0 2H9a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V16a1 1 0 0 0-1-1m-1.136 15.5.849.849-6.364 6.364-.849-.849zm.264 3.5.849.849-2.828 2.828-.849-.849zM13 19v10h-2V19z"
   })));
 };
 
 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 SvgTextarea = function SvgTextarea(props) {
+var SvgIFrame = function SvgIFrame(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "currentcolor"
+    fill: "none"
   }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
     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-3zm0 2H9a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V16a1 1 0 0 0-1-1m-1.136 15.5.849.849-6.364 6.364-.849-.849zm.264 3.5.849.849-2.828 2.828-.849-.849zM13 19v10h-2V19z"
+    d: "M45.658 9.45c1.625 0 2.942 1.36 2.942 3.039V22.95h-1.961v-4.383H7.36V41.51c0 .56.44 1.013.98 1.013H27v2.026H8.342c-1.625 0-2.942-1.36-2.942-3.039V12.489c0-1.678 1.317-3.039 2.942-3.039zm0 2.026H8.342c-.542 0-.98.454-.98 1.013v4.052h39.277v-4.052c0-.56-.44-1.013-.98-1.013ZM31.05 35.775A8.77 8.77 0 0 1 39.825 27a8.77 8.77 0 0 1 8.775 8.775 8.77 8.77 0 0 1-8.775 8.775 8.77 8.77 0 0 1-8.775-8.775m12.388-.516h3.097c-.206-2.581-1.858-4.646-4.026-5.678.62 1.548.93 3.613.93 5.678Zm-5.162 2.065c.207 3.303 1.136 4.955 1.549 5.161.413-.206 1.239-1.858 1.445-5.161zm1.446-8.26c-.31.207-1.342 2.272-1.446 6.195h2.994c-.103-3.923-1.135-5.988-1.548-6.194Zm-3.51 6.195c.103-2.065.31-4.13.929-5.678-2.168 1.032-3.82 3.097-4.026 5.678zm0 2.065h-2.89c.515 2.064 1.96 3.82 3.819 4.645-.516-1.342-.826-2.994-.93-4.645Zm7.226 0q-.155 2.632-.929 4.645c1.858-.826 3.304-2.58 3.923-4.645z",
+    clipRule: "evenodd"
   })));
 };
 
-var _path$d;
+var _path$d, _path2$1;
 function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
-var SvgIFrame = function SvgIFrame(props) {
+var SvgImage = function SvgImage(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "none"
+    fill: "currentcolor"
   }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
     fillRule: "evenodd",
-    d: "M45.658 9.45c1.625 0 2.942 1.36 2.942 3.039V22.95h-1.961v-4.383H7.36V41.51c0 .56.44 1.013.98 1.013H27v2.026H8.342c-1.625 0-2.942-1.36-2.942-3.039V12.489c0-1.678 1.317-3.039 2.942-3.039zm0 2.026H8.342c-.542 0-.98.454-.98 1.013v4.052h39.277v-4.052c0-.56-.44-1.013-.98-1.013ZM31.05 35.775A8.77 8.77 0 0 1 39.825 27a8.77 8.77 0 0 1 8.775 8.775 8.77 8.77 0 0 1-8.775 8.775 8.77 8.77 0 0 1-8.775-8.775m12.388-.516h3.097c-.206-2.581-1.858-4.646-4.026-5.678.62 1.548.93 3.613.93 5.678Zm-5.162 2.065c.207 3.303 1.136 4.955 1.549 5.161.413-.206 1.239-1.858 1.445-5.161zm1.446-8.26c-.31.207-1.342 2.272-1.446 6.195h2.994c-.103-3.923-1.135-5.988-1.548-6.194Zm-3.51 6.195c.103-2.065.31-4.13.929-5.678-2.168 1.032-3.82 3.097-4.026 5.678zm0 2.065h-2.89c.515 2.064 1.96 3.82 3.819 4.645-.516-1.342-.826-2.994-.93-4.645Zm7.226 0q-.155 2.632-.929 4.645c1.858-.826 3.304-2.58 3.923-4.645z",
+    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$1 || (_path2$1 = /*#__PURE__*/React__namespace.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-2zm24 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.73zM15 39v-8.754a1 1 0 0 0 .168-.135l5.893-5.893 6.684 6.685a1.91 1.91 0 0 0 2.41.238l2.657-1.77 6.02 6.02q.078.077.168.135V39z",
     clipRule: "evenodd"
   })));
 };
 
-var _path$c, _path2$1;
+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 SvgImage = function SvgImage(props) {
+var SvgTable = function SvgTable(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 54,
-    height: 54,
-    fill: "currentcolor"
+    fill: "none",
+    viewBox: "0 0 54 54"
   }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentcolor",
     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$1 || (_path2$1 = /*#__PURE__*/React__namespace.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-2zm24 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.73zM15 39v-8.754a1 1 0 0 0 .168-.135l5.893-5.893 6.684 6.685a1.91 1.91 0 0 0 2.41.238l2.657-1.77 6.02 6.02q.078.077.168.135V39z",
+    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.82.82 0 0 0 .819-.818v-4.91H27.818Zm-1.636-5.727v5.727H11.455a.82.82 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 _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 SvgTable = function SvgTable(props) {
+var SvgFilePicker = function SvgFilePicker(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 54 54"
+    width: 54,
+    height: 54,
+    fill: "none"
   }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.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.82.82 0 0 0 .819-.818v-4.91H27.818Zm-1.636-5.727v5.727H11.455a.82.82 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",
+    d: "M17.55 41.175H27v2.362h-9.45a2.37 2.37 0 0 1-2.363-2.362v-28.35a2.37 2.37 0 0 1 2.363-2.363h11.813a1.07 1.07 0 0 1 .826.355l8.27 8.269a1.07 1.07 0 0 1 .353.826v5.907H36.45v-3.544h-7.088A2.37 2.37 0 0 1 27 19.912v-7.087h-9.45zm18.427-21.263-6.614-6.615v6.615zm4.253 18.664 3.308 3.308-1.654 1.653-3.308-3.307a6.35 6.35 0 0 1-3.307.945c-3.308 0-5.906-2.599-5.906-5.906 0-3.308 2.598-5.907 5.906-5.907s5.906 2.6 5.906 5.907a6.35 6.35 0 0 1-.945 3.307m-4.961-6.851c-2.008 0-3.544 1.536-3.544 3.544s1.536 3.543 3.544 3.543 3.544-1.535 3.544-3.543-1.536-3.544-3.544-3.544",
     clipRule: "evenodd"
   })));
 };
@@ -3496,11 +3541,12 @@ const iconsByType = type => {
     textfield: SvgTextfield,
     textarea: SvgTextarea,
     table: SvgTable,
+    filepicker: SvgFilePicker,
     default: SvgForm
   }[type];
 };
 
-const type$c = 'image';
+const type$d = 'image';
 function Image(props) {
   const {
     field
@@ -3522,7 +3568,7 @@ function Image(props) {
     formId
   } = hooks.useContext(FormContext);
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$c),
+    class: formFieldClasses(type$d),
     children: [safeSource && jsxRuntime.jsx("div", {
       class: "fjs-image-container",
       children: jsxRuntime.jsx("img", {
@@ -3546,7 +3592,7 @@ function Image(props) {
   });
 }
 Image.config = {
-  type: type$c,
+  type: type$d,
   keyed: false,
   label: 'Image view',
   group: 'presentation',
@@ -3636,7 +3682,7 @@ function isNullEquivalentValue(value) {
   return value === undefined || value === null || value === '';
 }
 
-const type$b = 'number';
+const type$c = 'number';
 function Numberfield(props) {
   const {
     disabled,
@@ -3781,7 +3827,7 @@ function Numberfield(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$b, {
+    class: formFieldClasses(type$c, {
       errors,
       disabled,
       readonly
@@ -3857,7 +3903,7 @@ function Numberfield(props) {
   });
 }
 Numberfield.config = {
-  type: type$b,
+  type: type$c,
   keyed: true,
   label: 'Number',
   group: 'basic-input',
@@ -3877,7 +3923,7 @@ Numberfield.config = {
   })
 };
 
-const type$a = 'radio';
+const type$b = 'radio';
 function Radio(props) {
   const {
     disabled,
@@ -3929,7 +3975,7 @@ function Radio(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$a, {
+    class: formFieldClasses(type$b, {
       errors,
       disabled,
       readonly
@@ -3973,7 +4019,7 @@ function Radio(props) {
   });
 }
 Radio.config = {
-  type: type$a,
+  type: type$b,
   keyed: true,
   label: 'Radio group',
   group: 'selection',
@@ -4283,7 +4329,7 @@ function SimpleSelect(props) {
   });
 }
 
-const type$9 = 'select';
+const type$a = 'select';
 function Select(props) {
   const {
     disabled,
@@ -4322,7 +4368,7 @@ function Select(props) {
     'aria-describedby': [descriptionId, errorMessageId].join(' ')
   };
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$9, {
+    class: formFieldClasses(type$a, {
       errors,
       disabled,
       readonly
@@ -4351,7 +4397,7 @@ function Select(props) {
   });
 }
 Select.config = {
-  type: type$9,
+  type: type$a,
   keyed: true,
   label: 'Select',
   group: 'selection',
@@ -4360,15 +4406,15 @@ Select.config = {
   create: createEmptyOptions
 };
 
-const type$8 = 'separator';
+const type$9 = 'separator';
 function Separator() {
   return jsxRuntime.jsx("div", {
-    class: formFieldClasses(type$8),
+    class: formFieldClasses(type$9),
     children: jsxRuntime.jsx("hr", {})
   });
 }
 Separator.config = {
-  type: type$8,
+  type: type$9,
   keyed: false,
   label: 'Separator',
   group: 'presentation',
@@ -4377,7 +4423,7 @@ Separator.config = {
   })
 };
 
-const type$7 = 'spacer';
+const type$8 = 'spacer';
 function Spacer(props) {
   const {
     field
@@ -4386,14 +4432,14 @@ function Spacer(props) {
     height = 60
   } = field;
   return jsxRuntime.jsx("div", {
-    class: formFieldClasses(type$7),
+    class: formFieldClasses(type$8),
     style: {
       height: height
     }
   });
 }
 Spacer.config = {
-  type: type$7,
+  type: type$8,
   keyed: false,
   label: 'Spacer',
   group: 'presentation',
@@ -4474,7 +4520,7 @@ function SkipLink(props) {
   });
 }
 
-const type$6 = 'taglist';
+const type$7 = 'taglist';
 function Taglist(props) {
   const {
     disabled,
@@ -4616,7 +4662,7 @@ function Taglist(props) {
   const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
     ref: focusScopeRef,
-    class: formFieldClasses(type$6, {
+    class: formFieldClasses(type$7, {
       errors,
       disabled,
       readonly
@@ -4701,7 +4747,7 @@ function Taglist(props) {
   });
 }
 Taglist.config = {
-  type: type$6,
+  type: type$7,
   keyed: true,
   label: 'Tag list',
   group: 'selection',
@@ -4822,7 +4868,7 @@ function isValidAttribute(lcTag, lcName, value) {
   return true;
 }
 
-const type$5 = 'text';
+const type$6 = 'text';
 function Text(props) {
   const form = useService('form');
   const {
@@ -4869,12 +4915,12 @@ function Text(props) {
     sanitizeStyleTags: false
   });
   return jsxRuntime.jsx("div", {
-    class: formFieldClasses(type$5),
+    class: formFieldClasses(type$6),
     dangerouslySetInnerHTML: dangerouslySetInnerHTML
   });
 }
 Text.config = {
-  type: type$5,
+  type: type$6,
   keyed: false,
   label: 'Text view',
   group: 'presentation',
@@ -4884,7 +4930,7 @@ Text.config = {
   })
 };
 
-const type$4 = 'html';
+const type$5 = 'html';
 function Html(props) {
   const form = useService('form');
   const {
@@ -4935,12 +4981,12 @@ function Html(props) {
     sanitizeStyleTags: false
   });
   return jsxRuntime.jsx("div", {
-    class: classNames(formFieldClasses(type$4), styleScope),
+    class: classNames(formFieldClasses(type$5), styleScope),
     dangerouslySetInnerHTML: dangerouslySetInnerHTML
   });
 }
 Html.config = {
-  type: type$4,
+  type: type$5,
   keyed: false,
   label: 'HTML view',
   group: 'presentation',
@@ -4950,7 +4996,7 @@ Html.config = {
   })
 };
 
-const type$3 = 'expression';
+const type$4 = 'expression';
 function ExpressionField(props) {
   const {
     field,
@@ -4987,7 +5033,7 @@ function ExpressionField(props) {
   return null;
 }
 ExpressionField.config = {
-  type: type$3,
+  type: type$4,
   label: 'Expression',
   group: 'basic-input',
   keyed: true,
@@ -4999,7 +5045,7 @@ ExpressionField.config = {
   })
 };
 
-const type$2 = 'textfield';
+const type$3 = 'textfield';
 function Textfield(props) {
   const {
     disabled,
@@ -5041,7 +5087,7 @@ function Textfield(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$2, {
+    class: formFieldClasses(type$3, {
       errors,
       disabled,
       readonly
@@ -5079,7 +5125,7 @@ function Textfield(props) {
   });
 }
 Textfield.config = {
-  type: type$2,
+  type: type$3,
   keyed: true,
   label: 'Text field',
   group: 'basic-input',
@@ -5102,7 +5148,7 @@ Textfield.config = {
   })
 };
 
-const type$1 = 'textarea';
+const type$2 = 'textarea';
 function Textarea(props) {
   const {
     disabled,
@@ -5152,7 +5198,7 @@ function Textarea(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$1, {
+    class: formFieldClasses(type$2, {
       errors,
       disabled,
       readonly
@@ -5184,7 +5230,7 @@ function Textarea(props) {
   });
 }
 Textarea.config = {
-  type: type$1,
+  type: type$2,
   keyed: true,
   label: 'Text area',
   group: 'basic-input',
@@ -5265,7 +5311,7 @@ var SvgCaretRight = function SvgCaretRight(props) {
   })));
 };
 
-const type = 'table';
+const type$1 = 'table';
 
 /**
  * @typedef {('asc'|'desc')} Direction
@@ -5342,7 +5388,7 @@ function Table(props) {
     });
   }
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type),
+    class: formFieldClasses(type$1),
     children: [jsxRuntime.jsx(Label, {
       htmlFor: prefixId(id),
       label: label
@@ -5439,7 +5485,7 @@ function Table(props) {
   });
 }
 Table.config = {
-  type,
+  type: type$1,
   keyed: false,
   label: 'Table',
   group: 'presentation',
@@ -5591,6 +5637,161 @@ function getHeaderAriaLabel(sortBy, key, label) {
   return `Click to sort by ${label} ascending`;
 }
 
+const FILE_PICKER_FILE_KEY_PREFIX = 'files::';
+
+const type = 'filepicker';
+const ids$1 = new Ids();
+const EMPTY_ARRAY$1 = [];
+
+/**
+ * @typedef Props
+ * @property {(props: { value: string }) => void} onChange
+ * @property {string} domId
+ * @property {string[]} errors
+ * @property {boolean} disabled
+ * @property {boolean} readonly
+ * @property {boolean} required
+ * @property {Object} field
+ * @property {string} field.id
+ * @property {string} [field.label]
+ * @property {string} [field.accept]
+ * @property {string|boolean} [field.multiple]
+ * @property {string} [value]
+ *
+ * @param {Props} props
+ * @returns {import("preact").JSX.Element}
+ */
+function FilePicker(props) {
+  /** @type {import("preact/hooks").Ref<HTMLInputElement>} */
+  const fileInputRef = hooks.useRef(null);
+  /** @type {import('../../FileRegistry').FileRegistry} */
+  const fileRegistry = useService('fileRegistry', false);
+  const {
+    field,
+    onChange,
+    domId,
+    errors = [],
+    disabled,
+    readonly,
+    required,
+    value: filesKey = ''
+  } = props;
+  const {
+    label,
+    multiple = false,
+    accept = ''
+  } = field;
+  /** @type {string} */
+  const evaluatedAccept = useSingleLineTemplateEvaluation(accept);
+  const evaluatedMultiple = useBooleanExpressionEvaluation(multiple);
+  const errorMessageId = `${domId}-error-message`;
+  /** @type {File[]} */
+  const selectedFiles = fileRegistry === null ? EMPTY_ARRAY$1 : fileRegistry.getFiles(filesKey);
+  hooks.useEffect(() => {
+    if (filesKey && fileRegistry !== null && !fileRegistry.hasKey(filesKey)) {
+      onChange({
+        value: null
+      });
+    }
+  }, [fileRegistry, filesKey, onChange, selectedFiles.length]);
+  hooks.useEffect(() => {
+    const data = new DataTransfer();
+    selectedFiles.forEach(file => data.items.add(file));
+    fileInputRef.current.files = data.files;
+  }, [selectedFiles]);
+
+  /**
+   * @type import("preact").JSX.GenericEventHandler<HTMLInputElement>
+   */
+  const onFileChange = event => {
+    const input = /** @type {HTMLInputElement} */event.target;
+
+    // if we have an associated file key but no files are selected, clear the file key and associated files
+    if ((input.files === null || input.files.length === 0) && filesKey !== '') {
+      fileRegistry.deleteFiles(filesKey);
+      onChange({
+        value: null
+      });
+      return;
+    }
+    const files = Array.from(input.files);
+
+    // ensure fileKey exists
+    const updatedFilesKey = filesKey || ids$1.nextPrefixed(FILE_PICKER_FILE_KEY_PREFIX);
+    fileRegistry.setFiles(updatedFilesKey, files);
+    onChange({
+      value: updatedFilesKey
+    });
+  };
+  const isInputDisabled = disabled || readonly || fileRegistry === null;
+  return jsxRuntime.jsxs("div", {
+    className: formFieldClasses(type, {
+      errors,
+      disabled,
+      readonly
+    }),
+    children: [jsxRuntime.jsx(Label, {
+      htmlFor: domId,
+      label: label,
+      required: required
+    }), jsxRuntime.jsx("input", {
+      type: "file",
+      className: "fjs-hidden",
+      ref: fileInputRef,
+      id: domId,
+      name: domId,
+      disabled: isInputDisabled,
+      multiple: evaluatedMultiple || undefined,
+      accept: evaluatedAccept || undefined,
+      onChange: onFileChange
+    }), jsxRuntime.jsxs("div", {
+      className: "fjs-filepicker-container",
+      children: [jsxRuntime.jsx("button", {
+        type: "button",
+        disabled: isInputDisabled,
+        readonly: readonly,
+        className: "fjs-button fjs-filepicker-button",
+        onClick: () => {
+          fileInputRef.current.click();
+        },
+        children: "Browse"
+      }), jsxRuntime.jsx("span", {
+        className: "fjs-form-field-label",
+        children: getSelectedFilesLabel(selectedFiles)
+      })]
+    }), jsxRuntime.jsx(Errors, {
+      id: errorMessageId,
+      errors: errors
+    })]
+  });
+}
+FilePicker.config = {
+  type: 'filepicker',
+  keyed: true,
+  label: 'File picker',
+  group: 'basic-input',
+  emptyValue: null,
+  create: (options = {}) => ({
+    ...options
+  })
+};
+
+// helper //////////
+
+/**
+ * @param {File[]} files
+ * @returns {string}
+ */
+function getSelectedFilesLabel(files) {
+  if (files.length === 0) {
+    return 'No files selected';
+  }
+  if (files.length === 1) {
+    return files[0].name;
+  }
+  return `${files.length} files selected`;
+}
+
 /**
  * This file must not be changed or exchanged.
  *
@@ -5727,7 +5928,7 @@ function FormComponent(props) {
 }
 
 const formFields = [/* Input */
-Textfield, Textarea, Numberfield, Datetime, ExpressionField, /* Selection */
+Textfield, Textarea, Numberfield, Datetime, ExpressionField, FilePicker, /* Selection */
 Checkbox, Checklist, Radio, Select, Taglist, /* Presentation */
 Text, Image, Table, Html, Spacer, Separator, /* Containers */
 Group, DynamicList, IFrame, /* Other */
@@ -5748,7 +5949,7 @@ class FormFields {
   }
 }
 
-const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression'];
+const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression', 'accept', 'multiple'];
 const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url'];
 
 /**
@@ -5966,11 +6167,21 @@ class ConditionChecker {
         // if we have a hidden repeatable field, and the data structure allows, we clear it directly at the root and stop recursion
         if (context.isHidden && isRepeatable) {
           context.preventRecursion = true;
+          this._eventBus.fire('conditionChecker.remove', {
+            item: {
+              [field.key]: minDash.get(workingData, getFilterPath(field, indexes))
+            }
+          });
           this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
         }
 
         // for simple leaf fields, we always clear
         if (context.isHidden && isClosed) {
+          this._eventBus.fire('conditionChecker.remove', {
+            item: {
+              [field.key]: minDash.get(workingData, getFilterPath(field, indexes))
+            }
+          });
           this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
         }
       });
@@ -6764,11 +6975,16 @@ var SvgDelete = function SvgDelete(props) {
 /* eslint-disable react-hooks/rules-of-hooks */
 
 class RepeatRenderManager {
-  constructor(form, formFields, formFieldRegistry, pathRegistry) {
+  constructor(form, formFields, formFieldRegistry, pathRegistry, eventBus) {
     this._form = form;
+    /** @type {import('../../render/FormFields').FormFields} */
     this._formFields = formFields;
+    /** @type {import('../../core/FormFieldRegistry').FormFieldRegistry} */
     this._formFieldRegistry = formFieldRegistry;
+    /** @type {import('../../core/PathRegistry').PathRegistry} */
     this._pathRegistry = pathRegistry;
+    /** @type {import('../../core/EventBus').EventBus} */
+    this._eventBus = eventBus;
     this.Repeater = this.Repeater.bind(this);
     this.RepeatFooter = this.RepeatFooter.bind(this);
   }
@@ -6808,11 +7024,18 @@ class RepeatRenderManager {
     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 hiddenValues = isCollapsed ? values.slice(nonCollapsedItems) : [];
+
+    /**
+     * @param {number} index
+     */
     const onDeleteItem = index => {
       const updatedValues = values.slice();
-      updatedValues.splice(index, 1);
+      const removedItem = updatedValues.splice(index, 1)[0];
+      this._eventBus.fire('repeatRenderManager.remove', {
+        dataPath,
+        index,
+        item: removedItem
+      });
       props.onChange({
         field: repeaterField,
         value: updatedValues,
@@ -6820,21 +7043,13 @@ class RepeatRenderManager {
       });
     };
     const parentExpressionContextInfo = hooks.useContext(LocalExpressionContext);
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [displayValues.map((itemValue, itemIndex) => jsxRuntime.jsx(RepetitionScaffold, {
-        itemIndex: itemIndex,
-        itemValue: itemValue,
-        parentExpressionContextInfo: parentExpressionContextInfo,
-        repeaterField: repeaterField,
-        RowsRenderer: RowsRenderer,
-        indexes: indexes,
-        onDeleteItem: onDeleteItem,
-        showRemove: showRemove,
-        ...restProps
-      }, itemIndex)), hiddenValues.length > 0 ? jsxRuntime.jsx("div", {
-        className: "fjs-repeat-row-collapsed",
-        children: hiddenValues.map((itemValue, itemIndex) => jsxRuntime.jsx(RepetitionScaffold, {
-          itemIndex: itemIndex + nonCollapsedItems,
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: values.map((itemValue, itemIndex) => jsxRuntime.jsx("div", {
+        class: classNames({
+          'fjs-repeat-row-collapsed': isCollapsed ? itemIndex >= nonCollapsedItems : false
+        }),
+        children: jsxRuntime.jsx(RepetitionScaffold, {
+          itemIndex: itemIndex,
           itemValue: itemValue,
           parentExpressionContextInfo: parentExpressionContextInfo,
           repeaterField: repeaterField,
@@ -6843,8 +7058,8 @@ class RepeatRenderManager {
           onDeleteItem: onDeleteItem,
           showRemove: showRemove,
           ...restProps
-        }, itemIndex))
-      }) : null]
+        })
+      }))
     });
   }
   RepeatFooter(props) {
@@ -6887,6 +7102,11 @@ class RepeatRenderManager {
       });
       updatedValues.push(newItem);
       shouldScroll.current = true;
+      this._eventBus.fire('repeatRenderManager.add', {
+        dataPath,
+        index: updatedValues.length - 1,
+        item: newItem
+      });
       props.onChange({
         value: updatedValues
       });
@@ -6919,7 +7139,7 @@ class RepeatRenderManager {
         class: "fjs-repeat-render-collapse",
         onClick: toggle,
         children: isCollapsed ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [jsxRuntime.jsx(SvgExpand, {}), " ", `Expand all (${values.length})`]
+          children: [jsxRuntime.jsx(SvgExpand, {}), " ", `Expand all (${values.length - 1})`]
         }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(SvgCollapse, {}), " ", 'Collapse']
         })
@@ -7004,7 +7224,7 @@ const RepetitionScaffold = props => {
     })]
   });
 };
-RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry'];
+RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry', 'eventBus'];
 
 const RepeatRenderModule = {
   __init__: ['repeatRenderManager'],
@@ -8395,39 +8615,52 @@ class FormFieldInstanceRegistry {
     this._formFieldInstances = {};
     eventBus.on('form.clear', () => this.clear());
   }
-  add(instance) {
+  syncInstance(instanceId, formFieldInfo) {
     const {
-      id,
-      expressionContextInfo,
-      valuePath,
-      indexes
-    } = instance;
-    const instanceId = [id, ...Object.values(indexes || {})].join('_');
-    if (this._formFieldInstances[instanceId]) {
-      throw new Error('this form field instance is already registered');
+      hidden,
+      ...restInfo
+    } = formFieldInfo;
+    const isInstanceExpected = !hidden;
+    const doesInstanceExist = this._formFieldInstances[instanceId];
+    if (isInstanceExpected && !doesInstanceExist) {
+      this._formFieldInstances[instanceId] = {
+        instanceId,
+        ...restInfo
+      };
+      this._eventBus.fire('formFieldInstance.added', {
+        instanceId
+      });
+    } else if (!isInstanceExpected && doesInstanceExist) {
+      delete this._formFieldInstances[instanceId];
+      this._eventBus.fire('formFieldInstance.removed', {
+        instanceId
+      });
+    } else if (isInstanceExpected && doesInstanceExist) {
+      const wasInstanceChaged = Object.keys(restInfo).some(key => {
+        return this._formFieldInstances[instanceId][key] !== restInfo[key];
+      });
+      if (wasInstanceChaged) {
+        this._formFieldInstances[instanceId] = {
+          instanceId,
+          ...restInfo
+        };
+        this._eventBus.fire('formFieldInstance.changed', {
+          instanceId
+        });
+      }
     }
-    this._formFieldInstances[instanceId] = {
-      id,
-      instanceId,
-      expressionContextInfo,
-      valuePath,
-      indexes
-    };
-    this._eventBus.fire('formFieldInstanceRegistry.changed', {
-      instanceId,
-      action: 'added'
-    });
     return instanceId;
   }
-  remove(instanceId) {
-    if (!this._formFieldInstances[instanceId]) {
-      return;
+  cleanupInstance(instanceId) {
+    if (this._formFieldInstances[instanceId]) {
+      delete this._formFieldInstances[instanceId];
+      this._eventBus.fire('formFieldInstance.removed', {
+        instanceId
+      });
     }
-    delete this._formFieldInstances[instanceId];
-    this._eventBus.fire('formFieldInstanceRegistry.changed', {
-      instanceId,
-      action: 'removed'
-    });
+  }
+  get(instanceId) {
+    return this._formFieldInstances[instanceId];
   }
   getAll() {
     return Object.values(this._formFieldInstances);
@@ -8507,10 +8740,122 @@ function Renderer(config, eventBus, form, injector) {
 }
 Renderer.$inject = ['config.renderer', 'eventBus', 'form', 'injector'];
 
+/**
+ * @typedef {Record<PropertyKey, unknown>} RemovedData
+ * @param {RemovedData} removedData
+ * @returns {string[]}
+ */
+const extractFileReferencesFromRemovedData = removedData => {
+  /** @type {string[]} */
+  const fileReferences = [];
+  if (removedData === null) {
+    return fileReferences;
+  }
+  Object.values(removedData).forEach(value => {
+    if (value === null) {
+      return;
+    }
+    if (typeof value === 'object') {
+      fileReferences.push(...extractFileReferencesFromRemovedData( /** @type {RemovedData} */value));
+    } else if (Array.isArray(value)) {
+      fileReferences.push(...value.map(extractFileReferencesFromRemovedData).flat());
+    } else if (typeof value === 'string' && value.startsWith(FILE_PICKER_FILE_KEY_PREFIX)) {
+      fileReferences.push(value);
+    }
+  });
+  return fileReferences;
+};
+
+const fileRegistry = Symbol('fileRegistry');
+const eventBusSymbol = Symbol('eventBus');
+const formFieldRegistrySymbol = Symbol('formFieldRegistry');
+const formFieldInstanceRegistrySymbol = Symbol('formFieldInstanceRegistry');
+const EMPTY_ARRAY = [];
+class FileRegistry {
+  /**
+   * @param {import('../core/EventBus').EventBus} eventBus
+   * @param {import('../core/FormFieldRegistry').FormFieldRegistry} formFieldRegistry
+   * @param {import('../core/FormFieldInstanceRegistry').FormFieldInstanceRegistry} formFieldInstanceRegistry
+   */
+  constructor(eventBus, formFieldRegistry, formFieldInstanceRegistry) {
+    /** @type {Map<string, File[]>} */
+    this[fileRegistry] = new Map();
+    /** @type {import('../core/EventBus').EventBus} */
+    this[eventBusSymbol] = eventBus;
+    /** @type {import('../core/FormFieldRegistry').FormFieldRegistry} */
+    this[formFieldRegistrySymbol] = formFieldRegistry;
+    /** @type {import('../core/FormFieldInstanceRegistry').FormFieldInstanceRegistry} */
+    this[formFieldInstanceRegistrySymbol] = formFieldInstanceRegistry;
+    const removeFileHandler = ({
+      item
+    }) => {
+      const fileReferences = extractFileReferencesFromRemovedData(item);
+
+      // Remove all file references from the registry
+      fileReferences.forEach(fileReference => {
+        this.deleteFiles(fileReference);
+      });
+    };
+    eventBus.on('form.clear', () => this.clear());
+    eventBus.on('conditionChecker.remove', removeFileHandler);
+    eventBus.on('repeatRenderManager.remove', removeFileHandler);
+  }
+
+  /**
+   * @param {string} id
+   * @param {File[]} files
+   */
+  setFiles(id, files) {
+    this[fileRegistry].set(id, files);
+  }
+
+  /**
+   * @param {string} id
+   * @returns {File[]}
+   */
+  getFiles(id) {
+    return this[fileRegistry].get(id) || EMPTY_ARRAY;
+  }
+
+  /**
+   * @returns {string[]}
+   */
+  getKeys() {
+    return Array.from(this[fileRegistry].keys());
+  }
+
+  /**
+   * @param {string} id
+   * @returns {boolean}
+   */
+  hasKey(id) {
+    return this[fileRegistry].has(id);
+  }
+
+  /**
+   * @param {string} id
+   */
+  deleteFiles(id) {
+    this[fileRegistry].delete(id);
+  }
+
+  /**
+   * @returns {Map<string, File[]>}
+   */
+  getAllFiles() {
+    return new Map(this[fileRegistry]);
+  }
+  clear() {
+    this[fileRegistry].clear();
+  }
+}
+FileRegistry.$inject = ['eventBus', 'formFieldRegistry', 'formFieldInstanceRegistry'];
+
 const RenderModule = {
   __init__: ['formFields', 'renderer'],
   formFields: ['type', FormFields],
-  renderer: ['type', Renderer]
+  renderer: ['type', Renderer],
+  fileRegistry: ['type', FileRegistry]
 };
 
 const CoreModule = {
@@ -8663,7 +9008,7 @@ class Form {
   /**
    * Submit the form, triggering all field validations.
    *
-   * @returns { { data: Data, errors: Errors } }
+   * @returns { { data: Data, errors: Errors, files: Map<string, File[]> } }
    */
   submit() {
     const {
@@ -8675,9 +9020,11 @@ class Form {
     this._emit('presubmit');
     const data = this._getSubmitData();
     const errors = this.validate();
+    const files = this.get('fileRegistry').getAllFiles();
     const result = {
       data,
-      errors
+      errors,
+      files
     };
     this._emit('submit', result);
     return result;
@@ -9043,6 +9390,7 @@ exports.ExpressionLoopPreventer = ExpressionLoopPreventer;
 exports.FeelExpressionLanguage = FeelExpressionLanguage;
 exports.FeelersTemplating = FeelersTemplating;
 exports.FieldFactory = FieldFactory;
+exports.FilePicker = FilePicker;
 exports.Form = Form;
 exports.FormComponent = FormComponent;
 exports.FormContext = FormContext;