npm - @bpmn-io/form-js-playground - Versions diffs - 1.10.0 → 1.11.0-alpha.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/form-playground.umd.js +731 -267
package/dist/index.cjs +2 -1
package/dist/index.cjs.map +1 -1
package/dist/index.es.js +2 -1
package/dist/index.es.js.map +1 -1
package/package.json +4 -4

package/dist/form-playground.umd.js CHANGED Viewed

@@ -61233,6 +61233,13 @@
     getService: getService$2,
     formId: null
   });
+  /**
+   * @template T
+   * @param {string} type
+   * @param {boolean} [strict=true]
+   * @returns {T | null}
+   */
   function useService$2(type, strict) {
     const {
       getService
@@ -61284,11 +61291,10 @@
   }
   /**
-   * 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.
    */
@@ -61419,11 +61425,10 @@
   }
   /**
-   * 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) {
@@ -61662,7 +61667,7 @@
     return (overflowY === 'auto' || overflowY === 'scroll') && el.scrollHeight > el.clientHeight;
   }
   const EMPTY_OBJECT = {};
-  const EMPTY_ARRAY = [];
+  const EMPTY_ARRAY$2 = [];
   /**
    * Custom hook to scroll an element within a scrollable container.
@@ -61678,7 +61683,7 @@
    */
   function useScrollIntoView(scrolledElementRef, deps, scrollOptions, flagRefs) {
     const _scrollOptions = scrollOptions || EMPTY_OBJECT;
-    const _flagRefs = flagRefs || EMPTY_ARRAY;
+    const _flagRefs = flagRefs || EMPTY_ARRAY$2;
     y(() => {
       // return early if flags are not raised, or component is not mounted
       if (some(_flagRefs, ref => !ref.current) || !scrolledElementRef.current) {
@@ -61732,6 +61737,23 @@
     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$2('expressionLanguage');
+    const expressionContextInfo = F$1(LocalExpressionContext);
+    return d(() => {
+      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
@@ -62208,7 +62230,7 @@
       }
     }, [field, options, onChange, memoizedValues, loadState]);
   }
-  const type$h = 'button';
+  const type$i = 'button';
   function Button(props) {
     const {
       disabled,
@@ -62223,7 +62245,7 @@
       debug: true
     });
     return e("div", {
-      class: formFieldClasses(type$h),
+      class: formFieldClasses(type$i),
       children: e("button", {
         class: "fjs-button",
         type: action,
@@ -62235,7 +62257,7 @@
     });
   }
   Button.config = {
-    type: type$h,
+    type: type$i,
     keyed: false,
     label: 'Button',
     group: 'action',
@@ -62306,7 +62328,7 @@
       })]
     });
   }
-  const type$g = 'checkbox';
+  const type$h = 'checkbox';
   function Checkbox$1(props) {
     const {
       disabled,
@@ -62336,7 +62358,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return e("div", {
-      class: classNames(formFieldClasses(type$g, {
+      class: classNames(formFieldClasses(type$h, {
         errors,
         disabled,
         readonly
@@ -62371,7 +62393,7 @@
     });
   }
   Checkbox$1.config = {
-    type: type$g,
+    type: type$h,
     keyed: true,
     label: 'Checkbox',
     group: 'selection',
@@ -62383,7 +62405,7 @@
       ...options
     })
   };
-  const type$f = 'checklist';
+  const type$g = 'checklist';
   function Checklist(props) {
     const {
       disabled,
@@ -62436,7 +62458,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return e("div", {
-      class: classNames(formFieldClasses(type$f, {
+      class: classNames(formFieldClasses(type$g, {
         errors,
         disabled,
         readonly
@@ -62480,7 +62502,7 @@
     });
   }
   Checklist.config = {
-    type: type$f,
+    type: type$g,
     keyed: true,
     label: 'Checkbox group',
     group: 'selection',
@@ -62489,7 +62511,9 @@
     create: createEmptyOptions
   };
   const noop$1$1 = () => false;
+  const ids$2 = new Ids([32, 36, 1]);
   function FormField(props) {
+    const instanceIdRef = s$1(ids$2.next());
     const {
       field,
       indexes,
@@ -62535,22 +62559,28 @@
     // 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 = d(() => ({
-      id: field.id,
-      expressionContextInfo: localExpressionContext,
-      valuePath,
-      indexes
-    }), [field.id, valuePath, localExpressionContext, indexes]);
+    const instanceId = d(() => {
+      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
     y(() => {
-      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
     y(() => {
@@ -62783,9 +62813,9 @@
       ...options
     })
   };
-  var _path$w;
-  function _extends$x() {
-    _extends$x = Object.assign ? Object.assign.bind() : function (target) {
+  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) {
@@ -62796,16 +62826,16 @@
       }
       return target;
     };
-    return _extends$x.apply(this, arguments);
+    return _extends$y.apply(this, arguments);
   }
   var SvgCalendar = function SvgCalendar(props) {
-    return /*#__PURE__*/v$1("svg", _extends$x({
+    return /*#__PURE__*/v$1("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__*/v$1("path", {
+    }, props), _path$x || (_path$x = /*#__PURE__*/v$1("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",
@@ -63067,9 +63097,9 @@
       })]
     });
   }
-  var _path$v, _path2$4;
-  function _extends$w() {
-    _extends$w = Object.assign ? Object.assign.bind() : function (target) {
+  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) {
@@ -63080,16 +63110,16 @@
       }
       return target;
     };
-    return _extends$w.apply(this, arguments);
+    return _extends$x.apply(this, arguments);
   }
   var SvgClock = function SvgClock(props) {
-    return /*#__PURE__*/v$1("svg", _extends$w({
+    return /*#__PURE__*/v$1("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__*/v$1("path", {
+    }, props), _path$w || (_path$w = /*#__PURE__*/v$1("path", {
       fill: "currentColor",
       d: "M13 14.41 18.59 20 20 18.59l-5-5.01V5h-2z"
     })), _path2$4 || (_path2$4 = /*#__PURE__*/v$1("path", {
@@ -63355,7 +63385,7 @@
       })]
     });
   }
-  const type$e = 'datetime';
+  const type$f = 'datetime';
   function Datetime(props) {
     const {
       disabled,
@@ -63524,7 +63554,7 @@
       'aria-describedby': [descriptionId, errorMessageId].join(' ')
     };
     return e("div", {
-      class: formFieldClasses(type$e, {
+      class: formFieldClasses(type$f, {
         errors: allErrors,
         disabled,
         readonly
@@ -63549,7 +63579,7 @@
     });
   }
   Datetime.config = {
-    type: type$e,
+    type: type$f,
     keyed: true,
     label: 'Date time',
     group: 'basic-input',
@@ -63607,7 +63637,7 @@
       ...options
     })
   };
-  const type$d = 'iframe';
+  const type$e = 'iframe';
   const DEFAULT_HEIGHT = 300;
   function IFrame(props) {
     const {
@@ -63637,7 +63667,7 @@
       setIframeRefresh(count => count + 1);
     }, [sandbox, allow]);
     return e("div", {
-      class: formFieldClasses(type$d, {
+      class: formFieldClasses(type$e, {
         disabled,
         readonly
       }),
@@ -63672,7 +63702,7 @@
     });
   }
   IFrame.config = {
-    type: type$d,
+    type: type$e,
     keyed: false,
     label: 'iFrame',
     group: 'container',
@@ -63683,9 +63713,9 @@
       ...options
     })
   };
-  var _path$u;
-  function _extends$v() {
-    _extends$v = Object.assign ? Object.assign.bind() : function (target) {
+  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) {
@@ -63696,22 +63726,22 @@
       }
       return target;
     };
-    return _extends$v.apply(this, arguments);
+    return _extends$w.apply(this, arguments);
   }
   var SvgButton = function SvgButton(props) {
-    return /*#__PURE__*/v$1("svg", _extends$v({
+    return /*#__PURE__*/v$1("svg", _extends$w({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$u || (_path$u = /*#__PURE__*/v$1("path", {
+    }, props), _path$v || (_path$v = /*#__PURE__*/v$1("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) {
+  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) {
@@ -63722,21 +63752,21 @@
       }
       return target;
     };
-    return _extends$u.apply(this, arguments);
+    return _extends$v.apply(this, arguments);
   }
   var SvgCheckbox = function SvgCheckbox(props) {
-    return /*#__PURE__*/v$1("svg", _extends$u({
+    return /*#__PURE__*/v$1("svg", _extends$v({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$t || (_path$t = /*#__PURE__*/v$1("path", {
+    }, props), _path$u || (_path$u = /*#__PURE__*/v$1("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) {
+  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) {
@@ -63747,24 +63777,24 @@
       }
       return target;
     };
-    return _extends$t.apply(this, arguments);
+    return _extends$u.apply(this, arguments);
   }
   var SvgChecklist = function SvgChecklist(props) {
-    return /*#__PURE__*/v$1("svg", _extends$t({
+    return /*#__PURE__*/v$1("svg", _extends$u({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "none"
-    }, props), _path$s || (_path$s = /*#__PURE__*/v$1("path", {
+    }, props), _path$t || (_path$t = /*#__PURE__*/v$1("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",
       clipRule: "evenodd"
     })));
   };
-  var _path$r, _path2$3, _path3$1;
-  function _extends$s() {
-    _extends$s = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$s, _path2$3, _path3$1;
+  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) {
@@ -63775,15 +63805,15 @@
       }
       return target;
     };
-    return _extends$s.apply(this, arguments);
+    return _extends$t.apply(this, arguments);
   }
   var SvgDatetime = function SvgDatetime(props) {
-    return /*#__PURE__*/v$1("svg", _extends$s({
+    return /*#__PURE__*/v$1("svg", _extends$t({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$r || (_path$r = /*#__PURE__*/v$1("path", {
+    }, props), _path$s || (_path$s = /*#__PURE__*/v$1("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__*/v$1("path", {
@@ -63793,9 +63823,9 @@
       d: "M23.08 36.962a9.678 9.678 0 1 0 17.883-7.408 9.678 9.678 0 0 0-17.882 7.408Zm4.54-10.292a7.924 7.924 0 1 1 8.805 13.177A7.924 7.924 0 0 1 27.62 26.67"
     })));
   };
-  var _path$q, _path2$2;
-  function _extends$r() {
-    _extends$r = Object.assign ? Object.assign.bind() : function (target) {
+  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) {
@@ -63806,15 +63836,15 @@
       }
       return target;
     };
-    return _extends$r.apply(this, arguments);
+    return _extends$s.apply(this, arguments);
   }
   var SvgTaglist = function SvgTaglist(props) {
-    return /*#__PURE__*/v$1("svg", _extends$r({
+    return /*#__PURE__*/v$1("svg", _extends$s({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$q || (_path$q = /*#__PURE__*/v$1("path", {
+    }, props), _path$r || (_path$r = /*#__PURE__*/v$1("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__*/v$1("path", {
@@ -63822,8 +63852,8 @@
     })));
   };
   var _rect$1, _rect2, _rect3;
-  function _extends$q() {
-    _extends$q = Object.assign ? Object.assign.bind() : function (target) {
+  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) {
@@ -63834,10 +63864,10 @@
       }
       return target;
     };
-    return _extends$q.apply(this, arguments);
+    return _extends$r.apply(this, arguments);
   }
   var SvgForm = function SvgForm(props) {
-    return /*#__PURE__*/v$1("svg", _extends$q({
+    return /*#__PURE__*/v$1("svg", _extends$r({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54
@@ -63861,6 +63891,34 @@
       rx: 1
     })));
   };
+  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__*/v$1("svg", _extends$q({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 54,
+      height: 54,
+      fill: "none"
+    }, props), _path$q || (_path$q = /*#__PURE__*/v$1("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",
+      clipRule: "evenodd"
+    })));
+  };
   var _path$p;
   function _extends$p() {
     _extends$p = Object.assign ? Object.assign.bind() : function (target) {
@@ -63876,17 +63934,15 @@
     };
     return _extends$p.apply(this, arguments);
   }
-  var SvgGroup = function SvgGroup(props) {
+  var SvgNumber = function SvgNumber(props) {
     return /*#__PURE__*/v$1("svg", _extends$p({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "none"
+      fill: "currentcolor"
     }, props), _path$p || (_path$p = /*#__PURE__*/v$1("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",
-      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-1M35 28.444h7l-3.5 4zM35 26h7l-3.5-4z"
     })));
   };
   var _path$o;
@@ -63904,15 +63960,14 @@
     };
     return _extends$o.apply(this, arguments);
   }
-  var SvgNumber = function SvgNumber(props) {
+  var SvgRadio = function SvgRadio(props) {
     return /*#__PURE__*/v$1("svg", _extends$o({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
     }, props), _path$o || (_path$o = /*#__PURE__*/v$1("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;
@@ -63930,14 +63985,15 @@
     };
     return _extends$n.apply(this, arguments);
   }
-  var SvgRadio = function SvgRadio(props) {
+  var SvgSelect = function SvgSelect(props) {
     return /*#__PURE__*/v$1("svg", _extends$n({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
     }, props), _path$n || (_path$n = /*#__PURE__*/v$1("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;
@@ -63955,15 +64011,15 @@
     };
     return _extends$m.apply(this, arguments);
   }
-  var SvgSelect = function SvgSelect(props) {
+  var SvgSeparator = function SvgSeparator(props) {
     return /*#__PURE__*/v$1("svg", _extends$m({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "currentcolor"
+      fill: "none"
     }, props), _path$m || (_path$m = /*#__PURE__*/v$1("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;
@@ -63981,7 +64037,7 @@
     };
     return _extends$l.apply(this, arguments);
   }
-  var SvgSeparator = function SvgSeparator(props) {
+  var SvgSpacer = function SvgSpacer(props) {
     return /*#__PURE__*/v$1("svg", _extends$l({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
@@ -63989,7 +64045,7 @@
       fill: "none"
     }, props), _path$l || (_path$l = /*#__PURE__*/v$1("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;
@@ -64007,7 +64063,7 @@
     };
     return _extends$k.apply(this, arguments);
   }
-  var SvgSpacer = function SvgSpacer(props) {
+  var SvgDynamicList = function SvgDynamicList(props) {
     return /*#__PURE__*/v$1("svg", _extends$k({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
@@ -64015,7 +64071,9 @@
       fill: "none"
     }, props), _path$k || (_path$k = /*#__PURE__*/v$1("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;
@@ -64033,17 +64091,14 @@
     };
     return _extends$j.apply(this, arguments);
   }
-  var SvgDynamicList = function SvgDynamicList(props) {
+  var SvgText = function SvgText(props) {
     return /*#__PURE__*/v$1("svg", _extends$j({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "none"
+      fill: "currentcolor"
     }, props), _path$j || (_path$j = /*#__PURE__*/v$1("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;
@@ -64061,14 +64116,17 @@
     };
     return _extends$i.apply(this, arguments);
   }
-  var SvgText = function SvgText(props) {
+  var SvgHtml = function SvgHtml(props) {
     return /*#__PURE__*/v$1("svg", _extends$i({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "currentcolor"
+      fill: "none"
     }, props), _path$i || (_path$i = /*#__PURE__*/v$1("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;
@@ -64086,16 +64144,16 @@
     };
     return _extends$h.apply(this, arguments);
   }
-  var SvgHtml = function SvgHtml(props) {
+  var SvgExpressionField = function SvgExpressionField(props) {
     return /*#__PURE__*/v$1("svg", _extends$h({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "none"
     }, props), _path$h || (_path$h = /*#__PURE__*/v$1("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"
     })));
   };
@@ -64114,17 +64172,15 @@
     };
     return _extends$g.apply(this, arguments);
   }
-  var SvgExpressionField = function SvgExpressionField(props) {
+  var SvgTextfield = function SvgTextfield(props) {
     return /*#__PURE__*/v$1("svg", _extends$g({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "none"
+      fill: "currentcolor"
     }, props), _path$g || (_path$g = /*#__PURE__*/v$1("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;
@@ -64142,7 +64198,7 @@
     };
     return _extends$f.apply(this, arguments);
   }
-  var SvgTextfield = function SvgTextfield(props) {
+  var SvgTextarea = function SvgTextarea(props) {
     return /*#__PURE__*/v$1("svg", _extends$f({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
@@ -64150,7 +64206,7 @@
       fill: "currentcolor"
     }, props), _path$f || (_path$f = /*#__PURE__*/v$1("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;
@@ -64168,18 +64224,20 @@
     };
     return _extends$e.apply(this, arguments);
   }
-  var SvgTextarea = function SvgTextarea(props) {
+  var SvgIFrame = function SvgIFrame(props) {
     return /*#__PURE__*/v$1("svg", _extends$e({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "currentcolor"
+      fill: "none"
     }, props), _path$e || (_path$e = /*#__PURE__*/v$1("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$1;
   function _extends$d() {
     _extends$d = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -64194,20 +64252,23 @@
     };
     return _extends$d.apply(this, arguments);
   }
-  var SvgIFrame = function SvgIFrame(props) {
+  var SvgImage = function SvgImage(props) {
     return /*#__PURE__*/v$1("svg", _extends$d({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "none"
+      fill: "currentcolor"
     }, props), _path$d || (_path$d = /*#__PURE__*/v$1("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$1 || (_path2$1$1 = /*#__PURE__*/v$1("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$1;
+  var _path$c;
   function _extends$c() {
     _extends$c = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -64222,19 +64283,15 @@
     };
     return _extends$c.apply(this, arguments);
   }
-  var SvgImage = function SvgImage(props) {
+  var SvgTable = function SvgTable(props) {
     return /*#__PURE__*/v$1("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__*/v$1("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$1 || (_path2$1$1 = /*#__PURE__*/v$1("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"
     })));
   };
@@ -64253,15 +64310,16 @@
     };
     return _extends$b.apply(this, arguments);
   }
-  var SvgTable = function SvgTable(props) {
+  var SvgFilePicker = function SvgFilePicker(props) {
     return /*#__PURE__*/v$1("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__*/v$1("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"
     })));
   };
@@ -64288,10 +64346,11 @@
       textfield: SvgTextfield,
       textarea: SvgTextarea,
       table: SvgTable,
+      filepicker: SvgFilePicker,
       default: SvgForm
     }[type];
   };
-  const type$c = 'image';
+  const type$d = 'image';
   function Image$1(props) {
     const {
       field
@@ -64313,7 +64372,7 @@
       formId
     } = F$1(FormContext);
     return e("div", {
-      class: formFieldClasses(type$c),
+      class: formFieldClasses(type$d),
       children: [safeSource && e("div", {
         class: "fjs-image-container",
         children: e("img", {
@@ -64337,7 +64396,7 @@
     });
   }
   Image$1.config = {
-    type: type$c,
+    type: type$d,
     keyed: false,
     label: 'Image view',
     group: 'presentation',
@@ -64448,7 +64507,7 @@
   function isNullEquivalentValue(value) {
     return value === undefined || value === null || value === '';
   }
-  const type$b = 'number';
+  const type$c = 'number';
   function Numberfield(props) {
     const {
       disabled,
@@ -64593,7 +64652,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return e("div", {
-      class: formFieldClasses(type$b, {
+      class: formFieldClasses(type$c, {
         errors,
         disabled,
         readonly
@@ -64670,7 +64729,7 @@
     });
   }
   Numberfield.config = {
-    type: type$b,
+    type: type$c,
     keyed: true,
     label: 'Number',
     group: 'basic-input',
@@ -64689,7 +64748,7 @@
       ...options
     })
   };
-  const type$a = 'radio';
+  const type$b = 'radio';
   function Radio(props) {
     const {
       disabled,
@@ -64741,7 +64800,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return e("div", {
-      class: formFieldClasses(type$a, {
+      class: formFieldClasses(type$b, {
         errors,
         disabled,
         readonly
@@ -64785,7 +64844,7 @@
     });
   }
   Radio.config = {
-    type: type$a,
+    type: type$b,
     keyed: true,
     label: 'Radio group',
     group: 'selection',
@@ -65104,7 +65163,7 @@
       })]
     });
   }
-  const type$9 = 'select';
+  const type$a = 'select';
   function Select$1(props) {
     const {
       disabled,
@@ -65143,7 +65202,7 @@
       'aria-describedby': [descriptionId, errorMessageId].join(' ')
     };
     return e("div", {
-      class: formFieldClasses(type$9, {
+      class: formFieldClasses(type$a, {
         errors,
         disabled,
         readonly
@@ -65172,7 +65231,7 @@
     });
   }
   Select$1.config = {
-    type: type$9,
+    type: type$a,
     keyed: true,
     label: 'Select',
     group: 'selection',
@@ -65180,15 +65239,15 @@
     sanitizeValue: sanitizeSingleSelectValue,
     create: createEmptyOptions
   };
-  const type$8 = 'separator';
+  const type$9 = 'separator';
   function Separator() {
     return e("div", {
-      class: formFieldClasses(type$8),
+      class: formFieldClasses(type$9),
       children: e("hr", {})
     });
   }
   Separator.config = {
-    type: type$8,
+    type: type$9,
     keyed: false,
     label: 'Separator',
     group: 'presentation',
@@ -65196,7 +65255,7 @@
       ...options
     })
   };
-  const type$7 = 'spacer';
+  const type$8 = 'spacer';
   function Spacer(props) {
     const {
       field
@@ -65205,14 +65264,14 @@
       height = 60
     } = field;
     return e("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',
@@ -65290,7 +65349,7 @@
       children: label
     });
   }
-  const type$6 = 'taglist';
+  const type$7 = 'taglist';
   function Taglist(props) {
     const {
       disabled,
@@ -65432,7 +65491,7 @@
     const errorMessageId = `${domId}-error-message`;
     return e("div", {
       ref: focusScopeRef,
-      class: formFieldClasses(type$6, {
+      class: formFieldClasses(type$7, {
         errors,
         disabled,
         readonly
@@ -65517,7 +65576,7 @@
     });
   }
   Taglist.config = {
-    type: type$6,
+    type: type$7,
     keyed: true,
     label: 'Tag list',
     group: 'selection',
@@ -65636,7 +65695,7 @@
     }
     return true;
   }
-  const type$5 = 'text';
+  const type$6 = 'text';
   function Text$1(props) {
     const form = useService$2('form');
     const {
@@ -65683,12 +65742,12 @@
       sanitizeStyleTags: false
     });
     return e("div", {
-      class: formFieldClasses(type$5),
+      class: formFieldClasses(type$6),
       dangerouslySetInnerHTML: dangerouslySetInnerHTML
     });
   }
   Text$1.config = {
-    type: type$5,
+    type: type$6,
     keyed: false,
     label: 'Text view',
     group: 'presentation',
@@ -65697,7 +65756,7 @@
       ...options
     })
   };
-  const type$4 = 'html';
+  const type$5 = 'html';
   function Html(props) {
     const form = useService$2('form');
     const {
@@ -65748,12 +65807,12 @@
       sanitizeStyleTags: false
     });
     return e("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',
@@ -65762,7 +65821,7 @@
       ...options
     })
   };
-  const type$3 = 'expression';
+  const type$4 = 'expression';
   function ExpressionField(props) {
     const {
       field,
@@ -65799,7 +65858,7 @@
     return null;
   }
   ExpressionField.config = {
-    type: type$3,
+    type: type$4,
     label: 'Expression',
     group: 'basic-input',
     keyed: true,
@@ -65810,7 +65869,7 @@
       ...options
     })
   };
-  const type$2 = 'textfield';
+  const type$3 = 'textfield';
   function Textfield$1(props) {
     const {
       disabled,
@@ -65852,7 +65911,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return e("div", {
-      class: formFieldClasses(type$2, {
+      class: formFieldClasses(type$3, {
         errors,
         disabled,
         readonly
@@ -65890,7 +65949,7 @@
     });
   }
   Textfield$1.config = {
-    type: type$2,
+    type: type$3,
     keyed: true,
     label: 'Text field',
     group: 'basic-input',
@@ -65912,7 +65971,7 @@
       ...options
     })
   };
-  const type$1 = 'textarea';
+  const type$2 = 'textarea';
   function Textarea(props) {
     const {
       disabled,
@@ -65962,7 +66021,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return e("div", {
-      class: formFieldClasses(type$1, {
+      class: formFieldClasses(type$2, {
         errors,
         disabled,
         readonly
@@ -65994,7 +66053,7 @@
     });
   }
   Textarea.config = {
-    type: type$1,
+    type: type$2,
     keyed: true,
     label: 'Text area',
     group: 'basic-input',
@@ -66122,7 +66181,7 @@
       d: "m12 8 10 8-10 8z"
     })));
   };
-  const type$i = 'table';
+  const type$1 = 'table';
   /**
    * @typedef {('asc'|'desc')} Direction
@@ -66199,7 +66258,7 @@
       });
     }
     return e("div", {
-      class: formFieldClasses(type$i),
+      class: formFieldClasses(type$1),
       children: [e(Label$3, {
         htmlFor: prefixId$2(id),
         label: label
@@ -66296,7 +66355,7 @@
     });
   }
   Table.config = {
-    type: type$i,
+    type: type$1,
     keyed: false,
     label: 'Table',
     group: 'presentation',
@@ -66426,26 +66485,179 @@
       if (!isObject$3(a) || !isObject$3(b)) {
         return 0;
       }
-      if (direction === 'asc') {
-        return a[key] > b[key] ? 1 : -1;
+      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`;
+  }
+  const FILE_PICKER_FILE_KEY_PREFIX = 'files::';
+  const type$j = '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 = s$1(null);
+    /** @type {import('../../FileRegistry').FileRegistry} */
+    const fileRegistry = useService$2('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);
+    y(() => {
+      if (filesKey && fileRegistry !== null && !fileRegistry.hasKey(filesKey)) {
+        onChange({
+          value: null
+        });
+      }
+    }, [fileRegistry, filesKey, onChange, selectedFiles.length]);
+    y(() => {
+      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;
       }
-      return a[key] < b[key] ? 1 : -1;
+      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 e("div", {
+      className: formFieldClasses(type$j, {
+        errors,
+        disabled,
+        readonly
+      }),
+      children: [e(Label$3, {
+        htmlFor: domId,
+        label: label,
+        required: required
+      }), e("input", {
+        type: "file",
+        className: "fjs-hidden",
+        ref: fileInputRef,
+        id: domId,
+        name: domId,
+        disabled: isInputDisabled,
+        multiple: evaluatedMultiple || undefined,
+        accept: evaluatedAccept || undefined,
+        onChange: onFileChange
+      }), e("div", {
+        className: "fjs-filepicker-container",
+        children: [e("button", {
+          type: "button",
+          disabled: isInputDisabled,
+          readonly: readonly,
+          className: "fjs-button fjs-filepicker-button",
+          onClick: () => {
+            fileInputRef.current.click();
+          },
+          children: "Browse"
+        }), e("span", {
+          className: "fjs-form-field-label",
+          children: getSelectedFilesLabel(selectedFiles)
+        })]
+      }), e(Errors, {
+        id: errorMessageId,
+        errors: errors
+      })]
     });
   }
+  FilePicker.config = {
+    type: 'filepicker',
+    keyed: true,
+    label: 'File picker',
+    group: 'basic-input',
+    emptyValue: null,
+    create: (options = {}) => ({
+      ...options
+    })
+  };
+  // helper //////////
   /**
-   * @param {null|Sorting} sortBy
-   * @param {string} key
-   * @param {string} label
+   * @param {File[]} files
+   * @returns {string}
    */
-  function getHeaderAriaLabel(sortBy, key, label) {
-    if (sortBy === null || sortBy.key !== key) {
-      return `Click to sort by ${label} descending`;
+  function getSelectedFilesLabel(files) {
+    if (files.length === 0) {
+      return 'No files selected';
     }
-    if (sortBy.direction === 'asc') {
-      return 'Click to remove sorting';
+    if (files.length === 1) {
+      return files[0].name;
     }
-    return `Click to sort by ${label} ascending`;
+    return `${files.length} files selected`;
   }
   /**
@@ -66582,7 +66794,7 @@
     });
   }
   const formFields = [/* Input */
-  Textfield$1, Textarea, Numberfield, Datetime, ExpressionField, /* Selection */
+  Textfield$1, Textarea, Numberfield, Datetime, ExpressionField, FilePicker, /* Selection */
   Checkbox$1, Checklist, Radio, Select$1, Taglist, /* Presentation */
   Text$1, Image$1, Table, Html, Spacer, Separator, /* Containers */
   Group$1, DynamicList, IFrame, /* Other */
@@ -66601,7 +66813,7 @@
       return this._formFields[type];
     }
   }
-  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'];
   /**
@@ -66819,11 +67031,21 @@
           // 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]: 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]: get(workingData, getFilterPath(field, indexes))
+              }
+            });
             this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
           }
         });
@@ -67626,9 +67848,9 @@
       d: "M12 7.5H8.5V4h-1v3.5H4v1h3.5V12h1V8.5H12z"
     })));
   };
-  var _path$x;
-  function _extends$y() {
-    _extends$y = Object.assign ? Object.assign.bind() : function (target) {
+  var _path$y;
+  function _extends$z() {
+    _extends$z = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -67639,15 +67861,15 @@
       }
       return target;
     };
-    return _extends$y.apply(this, arguments);
+    return _extends$z.apply(this, arguments);
   }
   var SvgDelete$1 = function SvgDelete(props) {
-    return /*#__PURE__*/v$1("svg", _extends$y({
+    return /*#__PURE__*/v$1("svg", _extends$z({
       xmlns: "http://www.w3.org/2000/svg",
       width: 16,
       height: 16,
       fill: "none"
-    }, props), _path$x || (_path$x = /*#__PURE__*/v$1("path", {
+    }, props), _path$y || (_path$y = /*#__PURE__*/v$1("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 8z"
     })));
@@ -67657,11 +67879,16 @@
   /* 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);
     }
@@ -67701,11 +67928,18 @@
       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,
@@ -67714,20 +67948,12 @@
       };
       const parentExpressionContextInfo = F$1(LocalExpressionContext);
       return e(d$1, {
-        children: [displayValues.map((itemValue, itemIndex) => e(RepetitionScaffold, {
-          itemIndex: itemIndex,
-          itemValue: itemValue,
-          parentExpressionContextInfo: parentExpressionContextInfo,
-          repeaterField: repeaterField,
-          RowsRenderer: RowsRenderer,
-          indexes: indexes,
-          onDeleteItem: onDeleteItem,
-          showRemove: showRemove,
-          ...restProps
-        }, itemIndex)), hiddenValues.length > 0 ? e("div", {
-          className: "fjs-repeat-row-collapsed",
-          children: hiddenValues.map((itemValue, itemIndex) => e(RepetitionScaffold, {
-            itemIndex: itemIndex + nonCollapsedItems,
+        children: values.map((itemValue, itemIndex) => e("div", {
+          class: classNames({
+            'fjs-repeat-row-collapsed': isCollapsed ? itemIndex >= nonCollapsedItems : false
+          }),
+          children: e(RepetitionScaffold, {
+            itemIndex: itemIndex,
             itemValue: itemValue,
             parentExpressionContextInfo: parentExpressionContextInfo,
             repeaterField: repeaterField,
@@ -67736,8 +67962,8 @@
             onDeleteItem: onDeleteItem,
             showRemove: showRemove,
             ...restProps
-          }, itemIndex))
-        }) : null]
+          })
+        }))
       });
     }
     RepeatFooter(props) {
@@ -67780,6 +68006,11 @@
         });
         updatedValues.push(newItem);
         shouldScroll.current = true;
+        this._eventBus.fire('repeatRenderManager.add', {
+          dataPath,
+          index: updatedValues.length - 1,
+          item: newItem
+        });
         props.onChange({
           value: updatedValues
         });
@@ -67812,7 +68043,7 @@
           class: "fjs-repeat-render-collapse",
           onClick: toggle,
           children: isCollapsed ? e(d$1, {
-            children: [e(SvgExpand, {}), " ", `Expand all (${values.length})`]
+            children: [e(SvgExpand, {}), " ", `Expand all (${values.length - 1})`]
           }) : e(d$1, {
             children: [e(SvgCollapse, {}), " ", 'Collapse']
           })
@@ -67897,7 +68128,7 @@
       })]
     });
   };
-  RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry'];
+  RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry', 'eventBus'];
   const RepeatRenderModule$1 = {
     __init__: ['repeatRenderManager'],
     repeatRenderManager: ['type', RepeatRenderManager]
@@ -69281,39 +69512,52 @@
       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);
@@ -69391,10 +69635,121 @@
     });
   }
   Renderer$1.$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$1 = {
     __init__: ['formFields', 'renderer'],
     formFields: ['type', FormFields],
-    renderer: ['type', Renderer$1]
+    renderer: ['type', Renderer$1],
+    fileRegistry: ['type', FileRegistry]
   };
   const CoreModule$1 = {
     __depends__: [RenderModule$1],
@@ -69431,7 +69786,7 @@
    * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
    */
-  const ids$1 = new Ids([32, 36, 1]);
+  const ids$3 = new Ids([32, 36, 1]);
   /**
    * The form.
@@ -69452,7 +69807,7 @@
        * @public
        * @type {String}
        */
-      this._id = ids$1.next();
+      this._id = ids$3.next();
       /**
        * @private
@@ -69546,7 +69901,7 @@
     /**
      * Submit the form, triggering all field validations.
      *
-     * @returns { { data: Data, errors: Errors } }
+     * @returns { { data: Data, errors: Errors, files: Map<string, File[]> } }
      */
     submit() {
       const {
@@ -69558,9 +69913,11 @@
       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;
@@ -82759,7 +83116,7 @@
     return path.split('.').some(segment => prohibitedSegments.includes(segment));
   }
   const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table'];
-  const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea'];
+  const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea', 'filepicker'];
   const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
   function hasEntryConfigured(formFieldDefinition, entryId) {
     const {
@@ -83244,7 +83601,7 @@
       editField: editField,
       field: field,
       isEdited: isEdited$6,
-      isDefaultVisible: field => INPUTS.includes(field.type)
+      isDefaultVisible: field => field.type !== 'filepicker' && INPUTS.includes(field.type)
     });
     return entries;
   }
@@ -83295,26 +83652,26 @@
         return matchers(field);
       };
     }
-    const defaulValueBase = {
+    const defaultValueBase = {
       editField,
       field,
       id: 'defaultValue',
       label: 'Default value'
     };
     entries.push({
-      ...defaulValueBase,
+      ...defaultValueBase,
       component: DefaultValueCheckbox,
       isEdited: isEdited$3,
       isDefaultVisible: isDefaultVisible(field => field.type === 'checkbox')
     });
     entries.push({
-      ...defaulValueBase,
+      ...defaultValueBase,
       component: DefaultValueNumber,
       isEdited: isEdited,
       isDefaultVisible: isDefaultVisible(field => field.type === 'number')
     });
     entries.push({
-      ...defaulValueBase,
+      ...defaultValueBase,
       component: DefaultValueSingleSelect,
       isEdited: isEdited$3,
       isDefaultVisible: isDefaultVisible(field => field.type === 'radio' || field.type === 'select')
@@ -83323,13 +83680,13 @@
     // todo(Skaiir): implement a multiselect equivalent (cf. https://github.com/bpmn-io/form-js/issues/265)
     entries.push({
-      ...defaulValueBase,
+      ...defaultValueBase,
       component: DefaultValueTextfield,
       isEdited: isEdited,
       isDefaultVisible: isDefaultVisible(field => field.type === 'textfield')
     });
     entries.push({
-      ...defaulValueBase,
+      ...defaultValueBase,
       component: DefaultValueTextarea,
       isEdited: isEdited$1,
       isDefaultVisible: isDefaultVisible(field => field.type === 'textarea')
@@ -84397,7 +84754,7 @@
     };
     return FeelTemplatingEntry({
       debounce,
-      description: description$1,
+      description: description$2,
       element: field,
       getValue,
       id,
@@ -84407,7 +84764,7 @@
       variables
     });
   }
-  const description$1 = e(d$1, {
+  const description$2 = e(d$1, {
     children: ["Supports markdown and templating.", ' ', e("a", {
       href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
       target: "_blank",
@@ -84448,7 +84805,7 @@
     };
     return FeelTemplatingEntry({
       debounce,
-      description,
+      description: description$1,
       element: field,
       getValue,
       id,
@@ -84462,7 +84819,7 @@
   // helpers //////////
-  const description = e(d$1, {
+  const description$1 = e(d$1, {
     children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', e("a", {
       href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
       target: "_blank",
@@ -86250,6 +86607,106 @@
       tooltip
     });
   }
+  function AcceptEntry(props) {
+    const {
+      editField,
+      field
+    } = props;
+    const entries = [];
+    entries.push({
+      id: 'accept',
+      component: Accept,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$6,
+      isDefaultVisible: field => field.type === 'filepicker'
+    });
+    return entries;
+  }
+  function Accept(props) {
+    const {
+      editField,
+      field,
+      id
+    } = props;
+    const debounce = useService('debounce');
+    const variables = useVariables().map(name => ({
+      name
+    }));
+    const path = ['accept'];
+    const getValue = () => {
+      return get(field, path, '');
+    };
+    const setValue = value => {
+      return editField(field, path, value);
+    };
+    return FeelTemplatingEntry({
+      debounce,
+      element: field,
+      getValue,
+      id,
+      label: 'Supported file formats',
+      singleLine: true,
+      setValue,
+      variables,
+      description
+    });
+  }
+  // helpers //////////
+  const description = e(d$1, {
+    children: ["A comma-separated list of", ' ', e("a", {
+      href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
+      target: "_blank",
+      children: "file type specifiers"
+    })]
+  });
+  function MultipleEntry(props) {
+    const {
+      editField,
+      field
+    } = props;
+    const entries = [];
+    entries.push({
+      id: 'multiple',
+      component: Multiple,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$6,
+      isDefaultVisible: field => field.type === 'filepicker'
+    });
+    return entries;
+  }
+  function Multiple(props) {
+    const {
+      editField,
+      field,
+      id
+    } = props;
+    const debounce = useService('debounce');
+    const variables = useVariables().map(name => ({
+      name
+    }));
+    const path = ['multiple'];
+    const getValue = () => {
+      return get(field, path, '');
+    };
+    const setValue = value => {
+      return editField(field, path, value);
+    };
+    return FeelToggleSwitchEntry({
+      debounce,
+      element: field,
+      feel: 'optional',
+      getValue,
+      id,
+      label: 'Select multiple files',
+      inline: true,
+      setValue,
+      variables
+    });
+  }
   function GeneralGroup(field, editField, getService) {
     const entries = [...IdEntry({
       field,
@@ -86316,6 +86773,12 @@
     }), ...SelectEntries({
       field,
       editField
+    }), ...AcceptEntry({
+      field,
+      editField
+    }), ...MultipleEntry({
+      field,
+      editField
     }), ...DisabledEntry({
       field,
       editField
@@ -89171,7 +89634,8 @@
       // pipe viewer changes to output data editor
       formViewer.on('changed', updateOutputData);
-      formViewer.on('formFieldInstanceRegistry.changed', updateOutputData);
+      formViewer.on('formFieldInstance.added', updateOutputData);
+      formViewer.on('formFieldInstance.removed', updateOutputData);
       inputDataEditor.on('changed', event => {
         try {
           setData(JSON.parse(event.value));