@bpmn-io/form-js-viewer 1.10.1 → 1.11.0

package/dist/index.es.js

@@ -571,6 +571,18 @@ function gridColumnClasses(formField) {
   // always fall back to top-down on smallest screens
   'cds--col-sm-16', 'cds--col-md-16');
 }
+function textToLabel(text) {
+  if (typeof text != 'string') return null;
+  for (const line of text.split('\n')) {
+    const displayLine = line.trim();
+
+    // we use the first non-whitespace line in the text as label
+    if (displayLine !== '') {
+      return displayLine;
+    }
+  }
+  return null;
+}
 function prefixId(id, formId, indexes) {
   let result = 'fjs-form';
   if (formId) {
@@ -879,6 +891,7 @@ function useExpressionEvaluation(value) {
  * @returns {T} - Returns the current state.
  */
 function useDeepCompareMemoize(value) {
+  /** @type {import("preact").RefObject<T>} */
   const ref = useRef();
   if (!isEqual(value, ref.current)) {
     ref.current = value;
@@ -1656,7 +1669,7 @@ function useCleanupMultiSelectValue(props) {
   }, [field, options, onChange, memoizedValues, loadState]);
 }
 
-const type$h = 'button';
+const type$i = 'button';
 function Button(props) {
   const {
     disabled,
@@ -1671,7 +1684,7 @@ function Button(props) {
     debug: true
   });
   return jsx("div", {
-    class: formFieldClasses(type$h),
+    class: formFieldClasses(type$i),
     children: jsx("button", {
       class: "fjs-button",
       type: action,
@@ -1683,11 +1696,12 @@ function Button(props) {
   });
 }
 Button.config = {
-  type: type$h,
+  type: type$i,
   keyed: false,
-  label: 'Button',
+  name: 'Button',
   group: 'action',
   create: (options = {}) => ({
+    label: 'Button',
     action: 'submit',
     ...options
   })
@@ -1758,7 +1772,7 @@ function Label(props) {
   });
 }
 
-const type$g = 'checkbox';
+const type$h = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
@@ -1788,7 +1802,7 @@ function Checkbox(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$g, {
+    class: classNames(formFieldClasses(type$h, {
       errors,
       disabled,
       readonly
@@ -1825,20 +1839,21 @@ function Checkbox(props) {
   });
 }
 Checkbox.config = {
-  type: type$g,
+  type: type$h,
   keyed: true,
-  label: 'Checkbox',
+  name: 'Checkbox',
   group: 'selection',
   emptyValue: false,
   sanitizeValue: ({
     value
   }) => value === true,
   create: (options = {}) => ({
+    label: 'Checkbox',
     ...options
   })
 };
 
-const type$f = 'checklist';
+const type$g = 'checklist';
 function Checklist(props) {
   const {
     disabled,
@@ -1855,6 +1870,8 @@ function Checklist(props) {
     label,
     validate = {}
   } = field;
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const outerDivRef = useRef();
   const {
     required
@@ -1891,7 +1908,7 @@ function Checklist(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$f, {
+    class: classNames(formFieldClasses(type$g, {
       errors,
       disabled,
       readonly
@@ -1936,13 +1953,16 @@ function Checklist(props) {
   });
 }
 Checklist.config = {
-  type: type$f,
+  type: type$g,
   keyed: true,
-  label: 'Checkbox group',
+  name: 'Checkbox group',
   group: 'selection',
   emptyValue: [],
   sanitizeValue: sanitizeMultiSelectValue,
-  create: createEmptyOptions
+  create: (options = {}) => ({
+    label: 'Checkbox group',
+    ...createEmptyOptions(options)
+  })
 };
 
 const noop$1 = () => false;
@@ -2240,19 +2260,20 @@ Default.config = {
   create: (options = {}) => ({
     components: [],
     ...options
-  })
+  }),
+  getSubheading: field => field.id
 };
 
-var _path$w;
-function _extends$x() { return _extends$x = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$x.apply(null, arguments); }
+var _path$x;
+function _extends$y() { return _extends$y = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$y.apply(null, arguments); }
 var SvgCalendar = function SvgCalendar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M19 2H9V0H7v2H2a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-5V0h-2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3zm-5 4v17h24V11z",
@@ -2380,7 +2401,11 @@ function Datepicker(props) {
     readonly,
     setDate
   } = props;
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const dateInputRef = useRef();
+
+  /** @type {import("preact").RefObject<HTMLElement>} */
   const focusScopeRef = useRef();
   const [flatpickrInstance, setFlatpickrInstance] = useState(null);
   const [isInputDirty, setIsInputDirty] = useState(false);
@@ -2517,16 +2542,16 @@ function Datepicker(props) {
   });
 }
 
-var _path$v, _path2$4;
-function _extends$w() { return _extends$w = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$w.apply(null, arguments); }
+var _path$w, _path2$4;
+function _extends$x() { return _extends$x = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$x.apply(null, arguments); }
 var SvgClock = function SvgClock(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M13 14.41 18.59 20 20 18.59l-5-5.01V5h-2z"
   })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
@@ -2552,7 +2577,11 @@ function DropdownList(props) {
   const [mouseControl, setMouseControl] = useState(false);
   const [focusedValueIndex, setFocusedValueIndex] = useState(initialFocusIndex);
   const [smoothScrolling, setSmoothScrolling] = useState(false);
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const dropdownContainer = useRef();
+
+  /** @type {import("preact").RefObject<{ x: number, y: number }>} */
   const mouseScreenPos = useRef();
   const focusedItem = useMemo(() => values.length ? values[focusedValueIndex] : null, [focusedValueIndex, values]);
   const changeFocusedValueIndex = useCallback(delta => {
@@ -2770,7 +2799,7 @@ function Timepicker(props) {
           value: rawValue,
           disabled: disabled,
           readOnly: readonly,
-          placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
+          placeholder: use24h ? 'hh:mm' : 'hh:mm --',
           autoComplete: "off",
           onInput: e => {
             // @ts-expect-error
@@ -2795,7 +2824,7 @@ function Timepicker(props) {
   });
 }
 
-const type$e = 'datetime';
+const type$f = 'datetime';
 function Datetime(props) {
   const {
     disabled,
@@ -2826,6 +2855,8 @@ function Datetime(props) {
   const {
     formId
   } = useContext(FormContext);
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const dateTimeGroupRef = useRef();
   const [dateTime, setDateTime] = useState(getNullDateTime());
   const [dateTimeUpdateRequest, setDateTimeUpdateRequest] = useState(null);
@@ -2964,7 +2995,7 @@ function Datetime(props) {
     'aria-describedby': [descriptionId, errorMessageId].join(' ')
   };
   return jsxs("div", {
-    class: formFieldClasses(type$e, {
+    class: formFieldClasses(type$f, {
       errors: allErrors,
       disabled,
       readonly
@@ -2989,20 +3020,25 @@ function Datetime(props) {
   });
 }
 Datetime.config = {
-  type: type$e,
+  type: type$f,
   keyed: true,
-  label: 'Date time',
+  name: 'Date time',
   group: 'basic-input',
   emptyValue: null,
   sanitizeValue: sanitizeDateTimePickerValue,
-  create: (options = {}) => {
+  create: (options = {}, isNewField) => {
     const defaults = {};
     set(defaults, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
-    set(defaults, DATE_LABEL_PATH, 'Date');
+    if (isNewField) {
+      set(defaults, DATE_LABEL_PATH, 'Date');
+    }
     return {
       ...defaults,
       ...options
     };
+  },
+  getSubheading: field => {
+    return field.dateLabel || field.timeLabel;
   }
 };
 
@@ -3040,16 +3076,17 @@ function Group(props) {
 Group.config = {
   type: 'group',
   pathed: true,
-  label: 'Group',
+  name: 'Group',
   group: 'container',
   create: (options = {}) => ({
+    label: 'Group',
     components: [],
     showOutline: true,
     ...options
   })
 };
 
-const type$d = 'iframe';
+const type$e = 'iframe';
 const DEFAULT_HEIGHT = 300;
 function IFrame(props) {
   const {
@@ -3079,7 +3116,7 @@ function IFrame(props) {
     setIframeRefresh(count => count + 1);
   }, [sandbox, allow]);
   return jsxs("div", {
-    class: formFieldClasses(type$d, {
+    class: formFieldClasses(type$e, {
       disabled,
       readonly
     }),
@@ -3114,11 +3151,12 @@ function IFramePlaceholder(props) {
   });
 }
 IFrame.config = {
-  type: type$d,
+  type: type$e,
   keyed: false,
-  label: 'iFrame',
+  name: 'iFrame',
   group: 'container',
   create: (options = {}) => ({
+    label: 'iFrame',
     security: {
       allowScripts: true
     },
@@ -3126,42 +3164,42 @@ IFrame.config = {
   })
 };
 
-var _path$u;
-function _extends$v() { return _extends$v = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$v.apply(null, arguments); }
+var _path$v;
+function _extends$w() { return _extends$w = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$w.apply(null, arguments); }
 var SvgButton = function SvgButton(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$v({
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 17a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V20a3 3 0 0 1 3-3zm-9 8.889H18v2.222h18z"
   })));
 };
 
-var _path$t;
-function _extends$u() { return _extends$u = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$u.apply(null, arguments); }
+var _path$u;
+function _extends$v() { return _extends$v = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$v.apply(null, arguments); }
 var SvgCheckbox = function SvgCheckbox(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$u({
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
     d: "M34 18H20a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V20a2 2 0 0 0-2-2m-9 14-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23z"
   })));
 };
 
-var _path$s;
-function _extends$t() { return _extends$t = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$t.apply(null, arguments); }
+var _path$t;
+function _extends$u() { return _extends$u = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$u.apply(null, arguments); }
 var SvgChecklist = function SvgChecklist(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$t({
+  return /*#__PURE__*/React.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React.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",
@@ -3169,15 +3207,15 @@ var SvgChecklist = function SvgChecklist(props) {
   })));
 };
 
-var _path$r, _path2$3, _path3;
-function _extends$s() { return _extends$s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$s.apply(null, arguments); }
+var _path$s, _path2$3, _path3;
+function _extends$t() { return _extends$t = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$t.apply(null, arguments); }
 var SvgDatetime = function SvgDatetime(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 0 0-2.06 2.06v23.549a2.07 2.07 0 0 0 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 0 1-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 0 1 .707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06"
   })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
@@ -3188,15 +3226,15 @@ var SvgDatetime = function SvgDatetime(props) {
   })));
 };
 
-var _path$q, _path2$2;
-function _extends$r() { return _extends$r = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$r.apply(null, arguments); }
+var _path$r, _path2$2;
+function _extends$s() { return _extends$s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$s.apply(null, arguments); }
 var SvgTaglist = function SvgTaglist(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
+  return /*#__PURE__*/React.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-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.createElement("path", {
@@ -3205,9 +3243,9 @@ var SvgTaglist = function SvgTaglist(props) {
 };
 
 var _rect, _rect2, _rect3;
-function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
+function _extends$r() { return _extends$r = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$r.apply(null, arguments); }
 var SvgForm = function SvgForm(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54
@@ -3232,15 +3270,15 @@ var SvgForm = function SvgForm(props) {
   })));
 };
 
-var _path$p;
-function _extends$p() { return _extends$p = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$p.apply(null, arguments); }
+var _path$q;
+function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
 var SvgGroup = function SvgGroup(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React.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",
@@ -3248,50 +3286,64 @@ var SvgGroup = function SvgGroup(props) {
   })));
 };
 
+var _path$p;
+function _extends$p() { return _extends$p = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$p.apply(null, arguments); }
+var SvgNumber = function SvgNumber(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$p({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 54,
+    height: 54,
+    fill: "currentcolor"
+  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-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() { return _extends$o = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$o.apply(null, arguments); }
-var SvgNumber = function SvgNumber(props) {
+var SvgRadio = function SvgRadio(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
   }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-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() { return _extends$n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$n.apply(null, arguments); }
-var SvgRadio = function SvgRadio(props) {
+var SvgSelect = function SvgSelect(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
   }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
-    d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-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() { return _extends$m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$m.apply(null, arguments); }
-var SvgSelect = function SvgSelect(props) {
+var SvgSeparator = function SvgSeparator(props) {
   return /*#__PURE__*/React.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.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() { return _extends$l = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$l.apply(null, arguments); }
-var SvgSeparator = function SvgSeparator(props) {
+var SvgSpacer = function SvgSpacer(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
@@ -3299,13 +3351,13 @@ var SvgSeparator = function SvgSeparator(props) {
     fill: "none"
   }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
-    d: "M26.293 16.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 18.414l-3.293 3.293a1 1 0 0 1-1.414-1.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() { return _extends$k = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$k.apply(null, arguments); }
-var SvgSpacer = function SvgSpacer(props) {
+var SvgDynamicList = function SvgDynamicList(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
@@ -3313,74 +3365,74 @@ var SvgSpacer = function SvgSpacer(props) {
     fill: "none"
   }, props), _path$k || (_path$k = /*#__PURE__*/React.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() { return _extends$j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$j.apply(null, arguments); }
-var SvgDynamicList = function SvgDynamicList(props) {
+var SvgText = function SvgText(props) {
   return /*#__PURE__*/React.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.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() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
-var SvgText = function SvgText(props) {
+var SvgHtml = function SvgHtml(props) {
   return /*#__PURE__*/React.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.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() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
-var SvgHtml = function SvgHtml(props) {
+var SvgExpressionField = function SvgExpressionField(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
   }, props), _path$h || (_path$h = /*#__PURE__*/React.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() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
-var SvgExpressionField = function SvgExpressionField(props) {
+var SvgTextfield = function SvgTextfield(props) {
   return /*#__PURE__*/React.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.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() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
-var SvgTextfield = function SvgTextfield(props) {
+var SvgTextarea = function SvgTextarea(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
@@ -3388,70 +3440,72 @@ var SvgTextfield = function SvgTextfield(props) {
     fill: "currentcolor"
   }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-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() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
-var SvgTextarea = function SvgTextarea(props) {
+var SvgIFrame = function SvgIFrame(props) {
   return /*#__PURE__*/React.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.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() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
-var SvgIFrame = function SvgIFrame(props) {
+var SvgImage = function SvgImage(props) {
   return /*#__PURE__*/React.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.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.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() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
-var SvgImage = function SvgImage(props) {
+var SvgTable = function SvgTable(props) {
   return /*#__PURE__*/React.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.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.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() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
-var SvgTable = function SvgTable(props) {
+var SvgFilePicker = function SvgFilePicker(props) {
   return /*#__PURE__*/React.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.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"
   })));
 };
@@ -3479,11 +3533,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
@@ -3505,7 +3560,7 @@ function Image(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$c),
+    class: formFieldClasses(type$d),
     children: [safeSource && jsx("div", {
       class: "fjs-image-container",
       children: jsx("img", {
@@ -3529,13 +3584,12 @@ function Image(props) {
   });
 }
 Image.config = {
-  type: type$c,
+  type: type$d,
   keyed: false,
-  label: 'Image view',
+  name: 'Image view',
   group: 'presentation',
-  create: (options = {}) => ({
-    ...options
-  })
+  create: (options = {}) => options,
+  getSubheading: field => field.alt
 };
 
 function TemplatedInputAdorner(props) {
@@ -3619,7 +3673,7 @@ function isNullEquivalentValue(value) {
   return value === undefined || value === null || value === '';
 }
 
-const type$b = 'number';
+const type$c = 'number';
 function Numberfield(props) {
   const {
     disabled,
@@ -3646,6 +3700,8 @@ function Numberfield(props) {
   const {
     required
   } = validate;
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = useRef();
   const [cachedValue, setCachedValue] = useState(value);
   const [displayValue, setDisplayValue] = useState(value);
@@ -3764,7 +3820,7 @@ function Numberfield(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$b, {
+    class: formFieldClasses(type$c, {
       errors,
       disabled,
       readonly
@@ -3840,9 +3896,9 @@ function Numberfield(props) {
   });
 }
 Numberfield.config = {
-  type: type$b,
+  type: type$c,
   keyed: true,
-  label: 'Number',
+  name: 'Number',
   group: 'basic-input',
   emptyValue: null,
   sanitizeValue: ({
@@ -3856,11 +3912,12 @@ Numberfield.config = {
     return formField.serializeToString ? value.toString() : Number(value);
   },
   create: (options = {}) => ({
+    label: 'Number',
     ...options
   })
 };
 
-const type$a = 'radio';
+const type$b = 'radio';
 function Radio(props) {
   const {
     disabled,
@@ -3877,6 +3934,8 @@ function Radio(props) {
     label,
     validate = {}
   } = field;
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const outerDivRef = useRef();
   const {
     required
@@ -3912,7 +3971,7 @@ function Radio(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$a, {
+    class: formFieldClasses(type$b, {
       errors,
       disabled,
       readonly
@@ -3933,6 +3992,7 @@ function Radio(props) {
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
+          name: domId,
           id: itemDomId,
           type: "radio",
           onClick: () => onChange(option.value),
@@ -3960,13 +4020,16 @@ function Radio(props) {
   });
 }
 Radio.config = {
-  type: type$a,
+  type: type$b,
   keyed: true,
-  label: 'Radio group',
+  name: 'Radio group',
   group: 'selection',
   emptyValue: null,
   sanitizeValue: sanitizeSingleSelectValue,
-  create: createEmptyOptions
+  create: (options = {}) => ({
+    label: 'Radio group',
+    ...createEmptyOptions(options)
+  })
 };
 
 var _path$8;
@@ -4001,6 +4064,8 @@ function SearchableSelect(props) {
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
   const [isFilterActive, setIsFilterActive] = useState(true);
   const [isEscapeClosed, setIsEscapeClose] = useState(false);
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const searchbarRef = useRef();
   const eventBus = useService('eventBus');
   const {
@@ -4165,6 +4230,8 @@ function SimpleSelect(props) {
   } = props;
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
   const selectRef = useRef();
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = useRef();
   const {
     loadState,
@@ -4270,7 +4337,7 @@ function SimpleSelect(props) {
   });
 }
 
-const type$9 = 'select';
+const type$a = 'select';
 function Select(props) {
   const {
     disabled,
@@ -4309,7 +4376,7 @@ function Select(props) {
     'aria-describedby': [descriptionId, errorMessageId].join(' ')
   };
   return jsxs("div", {
-    class: formFieldClasses(type$9, {
+    class: formFieldClasses(type$a, {
       errors,
       disabled,
       readonly
@@ -4338,33 +4405,36 @@ function Select(props) {
   });
 }
 Select.config = {
-  type: type$9,
+  type: type$a,
   keyed: true,
-  label: 'Select',
+  name: 'Select',
   group: 'selection',
   emptyValue: null,
   sanitizeValue: sanitizeSingleSelectValue,
-  create: createEmptyOptions
+  create: (options = {}) => ({
+    label: 'Select',
+    ...createEmptyOptions(options)
+  })
 };
 
-const type$8 = 'separator';
+const type$9 = 'separator';
 function Separator() {
   return jsx("div", {
-    class: formFieldClasses(type$8),
+    class: formFieldClasses(type$9),
     children: jsx("hr", {})
   });
 }
 Separator.config = {
-  type: type$8,
+  type: type$9,
   keyed: false,
-  label: 'Separator',
+  name: 'Separator',
   group: 'presentation',
   create: (options = {}) => ({
     ...options
   })
 };
 
-const type$7 = 'spacer';
+const type$8 = 'spacer';
 function Spacer(props) {
   const {
     field
@@ -4373,16 +4443,16 @@ function Spacer(props) {
     height = 60
   } = field;
   return 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',
+  name: 'Spacer',
   group: 'presentation',
   create: (options = {}) => ({
     height: 60,
@@ -4428,9 +4498,10 @@ DynamicList.config = {
   type: 'dynamiclist',
   pathed: true,
   repeatable: true,
-  label: 'Dynamic list',
+  name: 'Dynamic list',
   group: 'container',
   create: (options = {}) => ({
+    label: 'Dynamic list',
     components: [],
     showOutline: true,
     isRepeating: true,
@@ -4461,7 +4532,7 @@ function SkipLink(props) {
   });
 }
 
-const type$6 = 'taglist';
+const type$7 = 'taglist';
 function Taglist(props) {
   const {
     disabled,
@@ -4484,7 +4555,11 @@ function Taglist(props) {
   const [filter, setFilter] = useState('');
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
   const [isEscapeClosed, setIsEscapeClose] = useState(false);
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const focusScopeRef = useRef();
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = useRef();
   const eventBus = useService('eventBus');
   const {
@@ -4603,7 +4678,7 @@ function Taglist(props) {
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
     ref: focusScopeRef,
-    class: formFieldClasses(type$6, {
+    class: formFieldClasses(type$7, {
       errors,
       disabled,
       readonly
@@ -4688,13 +4763,16 @@ function Taglist(props) {
   });
 }
 Taglist.config = {
-  type: type$6,
+  type: type$7,
   keyed: true,
-  label: 'Tag list',
+  name: 'Tag list',
   group: 'selection',
   emptyValue: [],
   sanitizeValue: sanitizeMultiSelectValue,
-  create: createEmptyOptions
+  create: (options = {}) => ({
+    label: 'Tag list',
+    ...createEmptyOptions(options)
+  })
 };
 
 const NODE_TYPE_TEXT = 3,
@@ -4809,7 +4887,7 @@ function isValidAttribute(lcTag, lcName, value) {
   return true;
 }
 
-const type$5 = 'text';
+const type$6 = 'text';
 function Text(props) {
   const form = useService('form');
   const {
@@ -4856,22 +4934,25 @@ function Text(props) {
     sanitizeStyleTags: false
   });
   return 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',
+  name: 'Text view',
   group: 'presentation',
   create: (options = {}) => ({
     text: '# Text',
     ...options
-  })
+  }),
+  getSubheading: field => {
+    textToLabel(field.text);
+  }
 };
 
-const type$4 = 'html';
+const type$5 = 'html';
 function Html(props) {
   const form = useService('form');
   const {
@@ -4922,14 +5003,14 @@ function Html(props) {
     sanitizeStyleTags: false
   });
   return 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',
+  name: 'HTML view',
   group: 'presentation',
   create: (options = {}) => ({
     content: '',
@@ -4937,7 +5018,7 @@ Html.config = {
   })
 };
 
-const type$3 = 'expression';
+const type$4 = 'expression';
 function ExpressionField(props) {
   const {
     field,
@@ -4974,8 +5055,8 @@ function ExpressionField(props) {
   return null;
 }
 ExpressionField.config = {
-  type: type$3,
-  label: 'Expression',
+  type: type$4,
+  name: 'Expression',
   group: 'basic-input',
   keyed: true,
   emptyValue: null,
@@ -4986,7 +5067,7 @@ ExpressionField.config = {
   })
 };
 
-const type$2 = 'textfield';
+const type$3 = 'textfield';
 function Textfield(props) {
   const {
     disabled,
@@ -5028,7 +5109,7 @@ function Textfield(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$2, {
+    class: formFieldClasses(type$3, {
       errors,
       disabled,
       readonly
@@ -5066,9 +5147,9 @@ function Textfield(props) {
   });
 }
 Textfield.config = {
-  type: type$2,
+  type: type$3,
   keyed: true,
-  label: 'Text field',
+  name: 'Text field',
   group: 'basic-input',
   emptyValue: '',
   sanitizeValue: ({
@@ -5085,11 +5166,12 @@ Textfield.config = {
     return String(value);
   },
   create: (options = {}) => ({
+    label: 'Text field',
     ...options
   })
 };
 
-const type$1 = 'textarea';
+const type$2 = 'textarea';
 function Textarea(props) {
   const {
     disabled,
@@ -5139,7 +5221,7 @@ function Textarea(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$1, {
+    class: formFieldClasses(type$2, {
       errors,
       disabled,
       readonly
@@ -5171,15 +5253,16 @@ function Textarea(props) {
   });
 }
 Textarea.config = {
-  type: type$1,
+  type: type$2,
   keyed: true,
-  label: 'Text area',
+  name: 'Text area',
   group: 'basic-input',
   emptyValue: '',
   sanitizeValue: ({
     value
   }) => isArray(value) || isObject(value) || isNil(value) ? '' : String(value),
   create: (options = {}) => ({
+    label: 'Text area',
     ...options
   })
 };
@@ -5252,7 +5335,7 @@ var SvgCaretRight = function SvgCaretRight(props) {
   })));
 };
 
-const type = 'table';
+const type$1 = 'table';
 
 /**
  * @typedef {('asc'|'desc')} Direction
@@ -5291,9 +5374,7 @@ function Table(props) {
     id,
     label
   } = field;
-
-  /** @type {[(null|Sorting), import("preact/hooks").StateUpdater<null|Sorting>]} */
-  const [sortBy, setSortBy] = useState(null);
+  const [sortBy, setSortBy] = useState(/** @type {Sorting | null} */null);
   const evaluatedColumns = useEvaluatedColumns(columnsExpression || '', columns);
   const columnKeys = evaluatedColumns.map(({
     key
@@ -5335,7 +5416,7 @@ function Table(props) {
     });
   }
   return jsxs("div", {
-    class: formFieldClasses(type),
+    class: formFieldClasses(type$1),
     children: [jsx(Label, {
       htmlFor: prefixId(id),
       label: label
@@ -5432,9 +5513,9 @@ function Table(props) {
   });
 }
 Table.config = {
-  type,
+  type: type$1,
   keyed: false,
-  label: 'Table',
+  name: 'Table',
   group: 'presentation',
   create: (options = {}) => {
     const {
@@ -5463,6 +5544,7 @@ Table.config = {
     }
     return {
       ...remainingOptions,
+      label: 'Table',
       rowCount: 10,
       columns: [{
         label: 'ID',
@@ -5584,6 +5666,148 @@ function getHeaderAriaLabel(sortBy, key, label) {
   return `Click to sort by ${label} ascending`;
 }
 
+const type = 'filepicker';
+
+/**
+ * @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 {boolean} [field.multiple]
+ *
+ * @param {Props} props
+ * @returns {import("preact").JSX.Element}
+ */
+function FilePicker(props) {
+  /** @type {import("preact/hooks").Ref<HTMLInputElement>} */
+  const fileInputRef = useRef(null);
+  /** @type {[File[],import("preact/hooks").StateUpdater<File[]>]} */
+  const [selectedFiles, setSelectedFiles] = useState([]);
+  const eventBus = useService('eventBus');
+  const {
+    field,
+    onChange,
+    domId,
+    errors = [],
+    disabled,
+    readonly,
+    required
+  } = props;
+  const {
+    label,
+    multiple = '',
+    accept = '',
+    id
+  } = field;
+  const evaluatedAccept = useSingleLineTemplateEvaluation(accept);
+  const evaluatedMultiple = useSingleLineTemplateEvaluation(typeof multiple === 'string' ? multiple : multiple.toString()) === 'true';
+  const errorMessageId = `${domId}-error-message`;
+  useEffect(() => {
+    const reset = () => {
+      setSelectedFiles([]);
+      onChange({
+        value: null
+      });
+    };
+    eventBus.on('import.done', reset);
+    eventBus.on('reset', reset);
+    return () => {
+      eventBus.off('import.done', reset);
+      eventBus.off('reset', reset);
+    };
+  }, [eventBus, onChange]);
+  return jsxs("div", {
+    class: formFieldClasses(type, {
+      errors,
+      disabled,
+      readonly
+    }),
+    children: [jsx(Label, {
+      htmlFor: domId,
+      label: label,
+      required: required
+    }), jsx("input", {
+      type: "file",
+      className: "fjs-hidden",
+      ref: fileInputRef,
+      id: domId,
+      name: domId,
+      multiple: evaluatedMultiple === false ? undefined : evaluatedMultiple,
+      accept: evaluatedAccept === '' ? undefined : evaluatedAccept,
+      onChange: event => {
+        const input = /** @type {HTMLInputElement} */event.target;
+        if (input.files === null || input.files.length === 0) {
+          onChange({
+            value: null
+          });
+          return;
+        }
+        const files = Array.from(input.files);
+        onChange({
+          value: `${id}_value_key`
+        });
+        setSelectedFiles(files);
+      }
+    }), jsxs("div", {
+      className: "fjs-filepicker-container",
+      children: [jsx("button", {
+        type: "button",
+        disabled: disabled,
+        readonly: readonly,
+        class: "fjs-button",
+        onClick: () => {
+          fileInputRef.current.click();
+        },
+        children: "Browse"
+      }), jsx("span", {
+        className: "fjs-form-field-label",
+        children: getSelectedFilesLabel(selectedFiles)
+      })]
+    }), jsx(Errors, {
+      id: errorMessageId,
+      errors: errors
+    })]
+  });
+}
+FilePicker.config = {
+  type: 'filepicker',
+  keyed: true,
+  label: 'File picker',
+  group: 'basic-input',
+  emptyValue: null,
+  sanitizeValue: ({
+    value
+  }) => {
+    return value;
+  },
+  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.
  *
@@ -5720,7 +5944,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 */
@@ -6936,7 +7160,7 @@ class RepeatRenderManager {
  * @param {Object} props.itemValue
  * @param {Object} props.parentExpressionContextInfo
  * @param {Object} props.repeaterField
- * @param {Function} props.RowsRenderer
+ * @param {import('preact').FunctionComponent} props.RowsRenderer
  * @param {Object} props.indexes
  * @param {Function} props.onDeleteItem
  * @param {boolean} props.showRemove
@@ -7820,7 +8044,7 @@ class FieldFactory {
     this._pathRegistry = pathRegistry;
     this._formFields = formFields;
   }
-  create(attrs, applyDefaults = true) {
+  create(attrs, isNewField = true) {
     const {
       id,
       type,
@@ -7859,13 +8083,12 @@ class FieldFactory {
     })) {
       throw new Error(`binding path '${[...parentPath, ...path.split('.')].join('.')}' is already claimed`);
     }
-    const labelAttrs = applyDefaults && config.label ? {
-      label: config.label
-    } : {};
     const field = config.create({
-      ...labelAttrs,
+      ...(config.label ? {
+        label: config.label
+      } : {}),
       ...attrs
-    });
+    }, isNewField);
     this._ensureId(field);
     if (config.keyed) {
       this._ensureKey(field);
@@ -8989,7 +9212,7 @@ class Form {
   }
 }
 
-const schemaVersion = 16;
+const schemaVersion = 17;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -9014,5 +9237,5 @@ function createForm(options) {
   });
 }
 
-export { ALLOW_ATTRIBUTE, Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, Description, DynamicList, Errors, ExpressionField, ExpressionFieldModule, ExpressionLanguageModule, ExpressionLoopPreventer, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext, Group, Html, IFrame, Image, Importer, Label, LocalExpressionContext, MINUTES_IN_DAY, MarkdownRenderer, MarkdownRendererModule, Numberfield, OPTIONS_SOURCES, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, OPTIONS_SOURCES_PATHS, OPTIONS_SOURCE_DEFAULT, PathRegistry, Radio, RenderModule, RepeatRenderManager, RepeatRenderModule, SANDBOX_ATTRIBUTE, SECURITY_ATTRIBUTES_DEFINITIONS, Select, Separator, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Table, Taglist, Text, Textarea, Textfield, ViewerCommands, ViewerCommandsModule, buildExpressionContext, clone, createForm, createFormContainer, createInjector, escapeHTML, formFields, generateIdForType, generateIndexForType, getAncestryList, getOptionsSource, getSchemaVariables, getScrollContainer, hasEqualValue, iconsByType, isRequired, pathParse, pathsEqual, runExpressionEvaluation, runRecursively, sanitizeDateTimePickerValue, sanitizeHTML, sanitizeIFrameSource, sanitizeImageSource, sanitizeMultiSelectValue, sanitizeSingleSelectValue, schemaVersion, useExpressionEvaluation, useSingleLineTemplateEvaluation, useTemplateEvaluation, wrapCSSStyles, wrapObjectKeysWithUnderscores };
+export { ALLOW_ATTRIBUTE, Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, Description, DynamicList, Errors, ExpressionField, ExpressionFieldModule, ExpressionLanguageModule, ExpressionLoopPreventer, FeelExpressionLanguage, FeelersTemplating, FieldFactory, FilePicker, Form, FormComponent, FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext, Group, Html, IFrame, Image, Importer, Label, LocalExpressionContext, MINUTES_IN_DAY, MarkdownRenderer, MarkdownRendererModule, Numberfield, OPTIONS_SOURCES, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, OPTIONS_SOURCES_PATHS, OPTIONS_SOURCE_DEFAULT, PathRegistry, Radio, RenderModule, RepeatRenderManager, RepeatRenderModule, SANDBOX_ATTRIBUTE, SECURITY_ATTRIBUTES_DEFINITIONS, Select, Separator, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Table, Taglist, Text, Textarea, Textfield, ViewerCommands, ViewerCommandsModule, buildExpressionContext, clone, createForm, createFormContainer, createInjector, escapeHTML, formFields, generateIdForType, generateIndexForType, getAncestryList, getOptionsSource, getSchemaVariables, getScrollContainer, hasEqualValue, iconsByType, isRequired, pathParse, pathsEqual, runExpressionEvaluation, runRecursively, sanitizeDateTimePickerValue, sanitizeHTML, sanitizeIFrameSource, sanitizeImageSource, sanitizeMultiSelectValue, sanitizeSingleSelectValue, schemaVersion, useExpressionEvaluation, useSingleLineTemplateEvaluation, useTemplateEvaluation, wrapCSSStyles, wrapObjectKeysWithUnderscores };
 //# sourceMappingURL=index.es.js.map