@bpmn-io/form-js-viewer 1.12.0 → 1.13.0

package/dist/index.es.js

@@ -1690,7 +1690,7 @@ function useCleanupMultiSelectValue(props) {
   }, [field, options, onChange, memoizedValues, loadState]);
 }
 
-const type$i = 'button';
+const type$j = 'button';
 function Button(props) {
   const {
     disabled,
@@ -1705,7 +1705,7 @@ function Button(props) {
     debug: true
   });
   return jsx("div", {
-    class: formFieldClasses(type$i),
+    class: formFieldClasses(type$j),
     children: jsx("button", {
       class: "fjs-button",
       type: action,
@@ -1717,7 +1717,7 @@ function Button(props) {
   });
 }
 Button.config = {
-  type: type$i,
+  type: type$j,
   keyed: false,
   name: 'Button',
   group: 'action',
@@ -1746,6 +1746,14 @@ function Description(props) {
   });
 }
 
+/**
+ * @typedef Props
+ * @property {string} id
+ * @property {string[]} errors
+ *
+ * @param {Props} props
+ * @returns {import("preact").JSX.Element}
+ */
 function Errors(props) {
   const {
     errors,
@@ -1793,7 +1801,7 @@ function Label(props) {
   });
 }
 
-const type$h = 'checkbox';
+const type$i = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
@@ -1823,7 +1831,7 @@ function Checkbox(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$h, {
+    class: classNames(formFieldClasses(type$i, {
       errors,
       disabled,
       readonly
@@ -1860,7 +1868,7 @@ function Checkbox(props) {
   });
 }
 Checkbox.config = {
-  type: type$h,
+  type: type$i,
   keyed: true,
   name: 'Checkbox',
   group: 'selection',
@@ -1874,7 +1882,7 @@ Checkbox.config = {
   })
 };
 
-const type$g = 'checklist';
+const type$h = 'checklist';
 function Checklist(props) {
   const {
     disabled,
@@ -1929,7 +1937,7 @@ function Checklist(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
@@ -1974,7 +1982,7 @@ function Checklist(props) {
   });
 }
 Checklist.config = {
-  type: type$g,
+  type: type$h,
   keyed: true,
   name: 'Checkbox group',
   group: 'selection',
@@ -2293,16 +2301,16 @@ Default.config = {
   getSubheading: field => field.id
 };
 
-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 _path$z;
+function _extends$A() { return _extends$A = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$A.apply(null, arguments); }
 var SvgCalendar = function SvgCalendar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$y({
+  return /*#__PURE__*/React.createElement("svg", _extends$A({
     xmlns: "http://www.w3.org/2000/svg",
     width: 14,
     height: 15,
     fill: "none",
     viewBox: "0 0 28 30"
-  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__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",
@@ -2571,16 +2579,16 @@ function Datepicker(props) {
   });
 }
 
-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 _path$y, _path2$4;
+function _extends$z() { return _extends$z = 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$z.apply(null, arguments); }
 var SvgClock = function SvgClock(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
+  return /*#__PURE__*/React.createElement("svg", _extends$z({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none",
     viewBox: "0 0 28 29"
-  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__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", {
@@ -2853,7 +2861,7 @@ function Timepicker(props) {
   });
 }
 
-const type$f = 'datetime';
+const type$g = 'datetime';
 function Datetime(props) {
   const {
     disabled,
@@ -3024,7 +3032,7 @@ function Datetime(props) {
     'aria-describedby': [descriptionId, errorMessageId].join(' ')
   };
   return jsxs("div", {
-    class: formFieldClasses(type$f, {
+    class: formFieldClasses(type$g, {
       errors: allErrors,
       disabled,
       readonly
@@ -3049,7 +3057,7 @@ function Datetime(props) {
   });
 }
 Datetime.config = {
-  type: type$f,
+  type: type$g,
   keyed: true,
   name: 'Date time',
   group: 'basic-input',
@@ -3115,7 +3123,7 @@ Group.config = {
   })
 };
 
-const type$e = 'iframe';
+const type$f = 'iframe';
 const DEFAULT_HEIGHT = 300;
 function IFrame(props) {
   const {
@@ -3145,7 +3153,7 @@ function IFrame(props) {
     setIframeRefresh(count => count + 1);
   }, [sandbox, allow]);
   return jsxs("div", {
-    class: formFieldClasses(type$e, {
+    class: formFieldClasses(type$f, {
       disabled,
       readonly
     }),
@@ -3180,7 +3188,7 @@ function IFramePlaceholder(props) {
   });
 }
 IFrame.config = {
-  type: type$e,
+  type: type$f,
   keyed: false,
   name: 'iFrame',
   group: 'container',
@@ -3193,42 +3201,42 @@ IFrame.config = {
   })
 };
 
-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 _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 SvgButton = function SvgButton(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__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$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$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 SvgCheckbox = function SvgCheckbox(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$v({
+  return /*#__PURE__*/React.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__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$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$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 SvgChecklist = function SvgChecklist(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$u({
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__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",
@@ -3236,15 +3244,15 @@ var SvgChecklist = function SvgChecklist(props) {
   })));
 };
 
-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 _path$u, _path2$3, _path3;
+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 SvgDatetime = function SvgDatetime(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$t({
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__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", {
@@ -3255,15 +3263,15 @@ var SvgDatetime = function SvgDatetime(props) {
   })));
 };
 
-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 _path$t, _path2$2;
+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 SvgTaglist = function SvgTaglist(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
+  return /*#__PURE__*/React.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__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", {
@@ -3272,9 +3280,9 @@ var SvgTaglist = function SvgTaglist(props) {
 };
 
 var _rect, _rect2, _rect3;
-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); }
+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 SvgForm = function SvgForm(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54
@@ -3299,15 +3307,15 @@ var SvgForm = function SvgForm(props) {
   })));
 };
 
-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 _path$s;
+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 SvgGroup = function SvgGroup(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
+  return /*#__PURE__*/React.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__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",
@@ -3315,84 +3323,84 @@ 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 _path$r;
+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 SvgNumber = function SvgNumber(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$p || (_path$p = /*#__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-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 _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 SvgRadio = function SvgRadio(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__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"
   })));
 };
 
-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 _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 SvgSelect = function SvgSelect(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$n({
+  return /*#__PURE__*/React.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
+  }, 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-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 _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 SvgSeparator = function SvgSeparator(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
+  return /*#__PURE__*/React.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__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"
   })));
 };
 
-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 _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 SvgSpacer = function SvgSpacer(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
+  return /*#__PURE__*/React.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__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"
   })));
 };
 
-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 _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 SvgDynamicList = function SvgDynamicList(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+  return /*#__PURE__*/React.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__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",
@@ -3400,28 +3408,28 @@ var SvgDynamicList = function SvgDynamicList(props) {
   })));
 };
 
-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 _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 SvgText = function SvgText(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__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"
   })));
 };
 
-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 _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 SvgHtml = function SvgHtml(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
     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",
@@ -3429,15 +3437,15 @@ var SvgHtml = function SvgHtml(props) {
   })));
 };
 
-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 _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 SvgExpressionField = function SvgExpressionField(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__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",
@@ -3445,43 +3453,43 @@ var SvgExpressionField = function SvgExpressionField(props) {
   })));
 };
 
-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 _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 SvgTextfield = function SvgTextfield(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__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"
   })));
 };
 
-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 _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 SvgTextarea = function SvgTextarea(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 13a3 3 0 0 1 3 3v22a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V16a3 3 0 0 1 3-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 _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 SvgIFrame = function SvgIFrame(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__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",
@@ -3489,15 +3497,15 @@ var SvgIFrame = function SvgIFrame(props) {
   })));
 };
 
-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 _path$f, _path2$1;
+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 SvgImage = function SvgImage(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M34.636 21.91A3.818 3.818 0 1 1 27 21.908a3.818 3.818 0 0 1 7.636 0Zm-2 0A1.818 1.818 0 1 1 29 21.908a1.818 1.818 0 0 1 3.636 0Z",
     clipRule: "evenodd"
@@ -3508,14 +3516,14 @@ var SvgImage = function SvgImage(props) {
   })));
 };
 
-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 _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 SvgTable = function SvgTable(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 54 54"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__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",
@@ -3523,15 +3531,15 @@ var SvgTable = function SvgTable(props) {
   })));
 };
 
-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 _path$d;
+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 SvgFilePicker = function SvgFilePicker(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     fill: "currentcolor",
     fillRule: "evenodd",
     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",
@@ -3539,6 +3547,22 @@ var SvgFilePicker = function SvgFilePicker(props) {
   })));
 };
 
+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 SvgDocumentPreview = function SvgDocumentPreview(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 54,
+    height: 54,
+    fill: "none"
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    fillRule: "evenodd",
+    d: "M17.55 41.175h6.75v2.363h-6.75a2.37 2.37 0 0 1-2.363-2.363v-28.35a2.37 2.37 0 0 1 2.363-2.362h11.813a1.07 1.07 0 0 1 .826.354l8.27 8.269a1.07 1.07 0 0 1 .353.827v7.256H36.45v-4.894h-7.088A2.37 2.37 0 0 1 27 19.913v-7.088h-9.45zm18.427-21.262-6.614-6.616v6.616zm-2.212 10.564-.015-.001h-.015a8.86 8.86 0 0 0-7.926 5.656l-.003.008a.9.9 0 0 0 0 .62l.003.008a8.85 8.85 0 0 0 7.926 5.655l.015.001h.015a8.86 8.86 0 0 0 7.926-5.656l.003-.008a.9.9 0 0 0 0-.62l-.003-.008a8.85 8.85 0 0 0-7.926-5.655M33.75 40.6c-2.456 0-5.088-1.802-6.107-4.151 1.019-2.349 3.651-4.151 6.107-4.151s5.088 1.802 6.107 4.151c-1.019 2.349-3.65 4.151-6.107 4.151m0-7.593a3.443 3.443 0 1 0 0 6.885 3.443 3.443 0 0 0 0-6.886Zm-.316 1.853a1.62 1.62 0 1 1 .632 3.178 1.62 1.62 0 0 1-.632-3.178",
+    clipRule: "evenodd"
+  })));
+};
+
 const iconsByType = type => {
   return {
     button: SvgButton,
@@ -3563,11 +3587,12 @@ const iconsByType = type => {
     textarea: SvgTextarea,
     table: SvgTable,
     filepicker: SvgFilePicker,
+    documentPreview: SvgDocumentPreview,
     default: SvgForm
   }[type];
 };
 
-const type$d = 'image';
+const type$e = 'image';
 function Image(props) {
   const {
     field
@@ -3589,7 +3614,7 @@ function Image(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$d),
+    class: formFieldClasses(type$e),
     children: [safeSource && jsx("div", {
       class: "fjs-image-container",
       children: jsx("img", {
@@ -3613,7 +3638,7 @@ function Image(props) {
   });
 }
 Image.config = {
-  type: type$d,
+  type: type$e,
   keyed: false,
   name: 'Image view',
   group: 'presentation',
@@ -3639,14 +3664,14 @@ function TemplatedInputAdorner(props) {
   });
 }
 
-var _path$a;
-function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
+var _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 SvgAngelDown = function SvgAngelDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -3656,14 +3681,14 @@ var SvgAngelDown = function SvgAngelDown(props) {
   })));
 };
 
-var _path$9;
-function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
+var _path$a;
+function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
 var SvgAngelUp = function SvgAngelUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -3702,7 +3727,7 @@ function isNullEquivalentValue(value) {
   return value === undefined || value === null || value === '';
 }
 
-const type$c = 'number';
+const type$d = 'number';
 function Numberfield(props) {
   const {
     disabled,
@@ -3849,7 +3874,7 @@ function Numberfield(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$c, {
+    class: formFieldClasses(type$d, {
       errors,
       disabled,
       readonly
@@ -3925,7 +3950,7 @@ function Numberfield(props) {
   });
 }
 Numberfield.config = {
-  type: type$c,
+  type: type$d,
   keyed: true,
   name: 'Number',
   group: 'basic-input',
@@ -3946,7 +3971,7 @@ Numberfield.config = {
   })
 };
 
-const type$b = 'radio';
+const type$c = 'radio';
 function Radio(props) {
   const {
     disabled,
@@ -4000,7 +4025,7 @@ function Radio(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$b, {
+    class: formFieldClasses(type$c, {
       errors,
       disabled,
       readonly
@@ -4049,7 +4074,7 @@ function Radio(props) {
   });
 }
 Radio.config = {
-  type: type$b,
+  type: type$c,
   keyed: true,
   name: 'Radio group',
   group: 'selection',
@@ -4061,14 +4086,14 @@ Radio.config = {
   })
 };
 
-var _path$8;
-function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
+var _path$9;
+function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
 var SvgXMark = function SvgXMark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -4366,7 +4391,7 @@ function SimpleSelect(props) {
   });
 }
 
-const type$a = 'select';
+const type$b = 'select';
 function Select(props) {
   const {
     disabled,
@@ -4405,7 +4430,7 @@ function Select(props) {
     'aria-describedby': [descriptionId, errorMessageId].join(' ')
   };
   return jsxs("div", {
-    class: formFieldClasses(type$a, {
+    class: formFieldClasses(type$b, {
       errors,
       disabled,
       readonly
@@ -4434,7 +4459,7 @@ function Select(props) {
   });
 }
 Select.config = {
-  type: type$a,
+  type: type$b,
   keyed: true,
   name: 'Select',
   group: 'selection',
@@ -4446,15 +4471,15 @@ Select.config = {
   })
 };
 
-const type$9 = 'separator';
+const type$a = 'separator';
 function Separator() {
   return jsx("div", {
-    class: formFieldClasses(type$9),
+    class: formFieldClasses(type$a),
     children: jsx("hr", {})
   });
 }
 Separator.config = {
-  type: type$9,
+  type: type$a,
   keyed: false,
   name: 'Separator',
   group: 'presentation',
@@ -4463,7 +4488,7 @@ Separator.config = {
   })
 };
 
-const type$8 = 'spacer';
+const type$9 = 'spacer';
 function Spacer(props) {
   const {
     field
@@ -4472,14 +4497,14 @@ function Spacer(props) {
     height = 60
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$8),
+    class: formFieldClasses(type$9),
     style: {
       height: height
     }
   });
 }
 Spacer.config = {
-  type: type$8,
+  type: type$9,
   keyed: false,
   name: 'Spacer',
   group: 'presentation',
@@ -4561,7 +4586,7 @@ function SkipLink(props) {
   });
 }
 
-const type$7 = 'taglist';
+const type$8 = 'taglist';
 function Taglist(props) {
   const {
     disabled,
@@ -4707,7 +4732,7 @@ function Taglist(props) {
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
     ref: focusScopeRef,
-    class: formFieldClasses(type$7, {
+    class: formFieldClasses(type$8, {
       errors,
       disabled,
       readonly
@@ -4792,7 +4817,7 @@ function Taglist(props) {
   });
 }
 Taglist.config = {
-  type: type$7,
+  type: type$8,
   keyed: true,
   name: 'Tag list',
   group: 'selection',
@@ -4916,7 +4941,7 @@ function isValidAttribute(lcTag, lcName, value) {
   return true;
 }
 
-const type$6 = 'text';
+const type$7 = 'text';
 function Text(props) {
   const form = useService('form');
   const {
@@ -4963,12 +4988,12 @@ function Text(props) {
     sanitizeStyleTags: false
   });
   return jsx("div", {
-    class: formFieldClasses(type$6),
+    class: formFieldClasses(type$7),
     dangerouslySetInnerHTML: dangerouslySetInnerHTML
   });
 }
 Text.config = {
-  type: type$6,
+  type: type$7,
   keyed: false,
   name: 'Text view',
   group: 'presentation',
@@ -4981,7 +5006,7 @@ Text.config = {
   }
 };
 
-const type$5 = 'html';
+const type$6 = 'html';
 function Html(props) {
   const form = useService('form');
   const {
@@ -5032,12 +5057,12 @@ function Html(props) {
     sanitizeStyleTags: false
   });
   return jsx("div", {
-    class: classNames(formFieldClasses(type$5), styleScope),
+    class: classNames(formFieldClasses(type$6), styleScope),
     dangerouslySetInnerHTML: dangerouslySetInnerHTML
   });
 }
 Html.config = {
-  type: type$5,
+  type: type$6,
   keyed: false,
   name: 'HTML view',
   group: 'presentation',
@@ -5047,7 +5072,7 @@ Html.config = {
   })
 };
 
-const type$4 = 'expression';
+const type$5 = 'expression';
 function ExpressionField(props) {
   const {
     field,
@@ -5084,7 +5109,7 @@ function ExpressionField(props) {
   return null;
 }
 ExpressionField.config = {
-  type: type$4,
+  type: type$5,
   name: 'Expression',
   group: 'basic-input',
   keyed: true,
@@ -5096,7 +5121,7 @@ ExpressionField.config = {
   })
 };
 
-const type$3 = 'textfield';
+const type$4 = 'textfield';
 function Textfield(props) {
   const {
     disabled,
@@ -5138,7 +5163,7 @@ function Textfield(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$3, {
+    class: formFieldClasses(type$4, {
       errors,
       disabled,
       readonly
@@ -5176,7 +5201,7 @@ function Textfield(props) {
   });
 }
 Textfield.config = {
-  type: type$3,
+  type: type$4,
   keyed: true,
   name: 'Text field',
   group: 'basic-input',
@@ -5200,7 +5225,7 @@ Textfield.config = {
   })
 };
 
-const type$2 = 'textarea';
+const type$3 = 'textarea';
 function Textarea(props) {
   const {
     disabled,
@@ -5250,7 +5275,7 @@ function Textarea(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$2, {
+    class: formFieldClasses(type$3, {
       errors,
       disabled,
       readonly
@@ -5282,7 +5307,7 @@ function Textarea(props) {
   });
 }
 Textarea.config = {
-  type: type$2,
+  type: type$3,
   keyed: true,
   name: 'Text area',
   group: 'basic-input',
@@ -5314,57 +5339,57 @@ const autoSizeTextarea = textarea => {
   textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
 };
 
-var _path$7;
-function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
+var _path$8;
+function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
 var SvgArrowDown = function SvgArrowDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     fill: "currentcolor",
     d: "M24.59 16.59 17 24.17V4h-2v20.17l-7.59-7.58L6 18l10 10 10-10z"
   })));
 };
 
-var _path$6;
-function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
+var _path$7;
+function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
 var SvgArrowUp = function SvgArrowUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
     fill: "currentcolor",
     d: "M16 4 6 14l1.41 1.41L15 7.83V28h2V7.83l7.59 7.58L26 14z"
   })));
 };
 
-var _path$5;
-function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
+var _path$6;
+function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
 var SvgCaretLeft = function SvgCaretLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     viewBox: "0 0 32 32"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
     fill: "currentcolor",
     d: "m20 24-10-8 10-8z"
   })));
 };
 
-var _path$4;
-function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
+var _path$5;
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
 var SvgCaretRight = function SvgCaretRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     viewBox: "0 0 32 32"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
     fill: "currentcolor",
     d: "m12 8 10 8-10 8z"
   })));
 };
 
-const type$1 = 'table';
+const type$2 = 'table';
 
 /**
  * @typedef {('asc'|'desc')} Direction
@@ -5445,7 +5470,7 @@ function Table(props) {
     });
   }
   return jsxs("div", {
-    class: formFieldClasses(type$1),
+    class: formFieldClasses(type$2),
     children: [jsx(Label, {
       htmlFor: prefixId(id),
       label: label
@@ -5542,7 +5567,7 @@ function Table(props) {
   });
 }
 Table.config = {
-  type: type$1,
+  type: type$2,
   keyed: false,
   name: 'Table',
   group: 'presentation',
@@ -5697,7 +5722,7 @@ function getHeaderAriaLabel(sortBy, key, label) {
 
 const FILE_PICKER_FILE_KEY_PREFIX = 'files::';
 
-const type = 'filepicker';
+const type$1 = 'filepicker';
 const ids$1 = new Ids();
 const EMPTY_ARRAY$1 = [];
 
@@ -5785,7 +5810,7 @@ function FilePicker(props) {
   };
   const isInputDisabled = disabled || readonly || fileRegistry === null;
   return jsxs("div", {
-    className: formFieldClasses(type, {
+    className: formFieldClasses(type$1, {
       errors,
       disabled,
       readonly
@@ -5852,6 +5877,323 @@ function getSelectedFilesLabel(files) {
   return `${files.length} files selected`;
 }
 
+var _path$4;
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
+var SvgDownload = function SvgDownload(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M13 12v2H3v-2H2v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-2zm0-5-.705-.705-3.795 3.79V1h-1v9.085l-3.795-3.79L3 7l5 5z"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h16v16H0z",
+    style: {
+      fill: "none"
+    }
+  }));
+};
+
+const type = 'documentPreview';
+
+/**
+ * @typedef DocumentMetadata
+ * @property {string} documentId
+ * @property {Object} metadata
+ * @property {string|undefined} [metadata.contentType]
+ * @property {string} metadata.fileName
+ *
+ * @typedef Field
+ * @property {string} id
+ * @property {string} [title]
+ * @property {string} [dataSource]
+ * @property {string} [endpointKey]
+ * @property {number} [maxHeight]
+ * @property {string} [label]
+ *
+ * @typedef Props
+ * @property {Field} field
+ * @property {string} domId
+ *
+ * @param {Props} props
+ * @returns {import("preact").JSX.Element}
+ */
+function DocumentPreview(props) {
+  const {
+    field,
+    domId
+  } = props;
+  const {
+    dataSource,
+    endpointKey,
+    maxHeight,
+    label
+  } = field;
+  const errorMessageId = `${domId}-error-message`;
+  const endpoint = useExpressionEvaluation(endpointKey || '');
+  const data = useValidDocumentData(dataSource || '');
+  const evaluatedLabel = useSingleLineTemplateEvaluation(label, {
+    debug: true
+  });
+  return jsxs("div", {
+    class: formFieldClasses(type),
+    children: [jsx(Label, {
+      htmlFor: domId,
+      label: evaluatedLabel
+    }), jsx("div", {
+      class: `fjs-${type}-document-container`,
+      id: domId,
+      children: isValidDocumentEndpoint(endpoint) ? data.map((document, index) => jsx(DocumentRenderer, {
+        documentMetadata: document,
+        endpoint: endpoint,
+        maxHeight: maxHeight,
+        domId: `${domId}-${index}`
+      }, document.documentId)) : null
+    }), jsx(Errors, {
+      id: errorMessageId,
+      errors: getErrors({
+        dataSource,
+        endpoint,
+        endpointKey
+      })
+    })]
+  });
+}
+DocumentPreview.config = {
+  type,
+  keyed: false,
+  group: 'presentation',
+  name: 'Document preview',
+  create: (options = {}) => ({
+    label: 'Document preview',
+    endpointKey: DEFAULT_ENDPOINT_KEY,
+    ...options
+  })
+};
+
+// helpers /////////////////////////////
+
+const DOCUMENT_ID_PLACEHOLDER = '{documentId}';
+const DEFAULT_ENDPOINT_KEY = '=defaultDocumentsEndpointKey';
+
+/**
+ * @typedef GetErrorOptions
+ * @property {string|undefined} dataSource
+ * @property {string|undefined} endpointKey
+ * @property {string|null} endpoint
+ *
+ * @param {GetErrorOptions} options
+ * @returns {string[]}
+ */
+function getErrors(options) {
+  const {
+    dataSource,
+    endpointKey,
+    endpoint
+  } = options;
+  let errors = [];
+  if (!isString(dataSource) || dataSource.length < 1) {
+    errors.push('Document reference is not defined.');
+  }
+  if (!isString(endpointKey) || endpointKey.length < 1) {
+    errors.push('Endpoint key is not defined.');
+  }
+  if (endpointKey !== DEFAULT_ENDPOINT_KEY && !URL.canParse(endpoint)) {
+    errors.push(`If you change the endpoint key from "${DEFAULT_ENDPOINT_KEY}", the document preview won't work with Camunda Tasklist and you must provide a valid URL.`);
+  } else if (endpointKey !== DEFAULT_ENDPOINT_KEY && !isValidDocumentEndpoint(endpoint)) {
+    errors.push('Endpoint must contain "{documentId}".');
+  }
+  return errors;
+}
+
+/**
+ *
+ * @param {unknown} endpoint
+ * @returns boolean
+ */
+function isValidDocumentEndpoint(endpoint) {
+  return typeof endpoint === 'string' && URL.canParse(endpoint) && endpoint.includes(DOCUMENT_ID_PLACEHOLDER);
+}
+
+/**
+ * @param {unknown} document
+ * @returns {metadata is DocumentMetadata}
+ */
+function isValidDocument(document) {
+  return typeof document === 'object' && 'documentId' in document && 'metadata' in document && typeof document.metadata === 'object' && 'fileName' in document.metadata;
+}
+
+/**
+ * @param {string} dataSource
+ * @returns {DocumentMetadata[]}
+ */
+function useValidDocumentData(dataSource) {
+  const data = useExpressionEvaluation(dataSource);
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  return data.filter(isValidDocument);
+}
+
+/**
+ *
+ * @param {Object} props
+ * @param {DocumentMetadata} props.documentMetadata
+ * @param {string} props.endpoint
+ * @param {string} props.domId
+ * @param {number|undefined} props.maxHeight
+ *
+ * @returns {import("preact").JSX.Element}
+ */
+function DocumentRenderer(props) {
+  const {
+    documentMetadata,
+    endpoint,
+    maxHeight,
+    domId
+  } = props;
+  const {
+    metadata
+  } = documentMetadata;
+  const [hasError, setHasError] = useState(false);
+  const ref = useRef(null);
+  const isInViewport = useInViewport(ref);
+  const fullUrl = endpoint.replace(DOCUMENT_ID_PLACEHOLDER, documentMetadata.documentId);
+  const singleDocumentContainerClassName = `fjs-${type}-single-document-container`;
+  const errorMessageId = `${domId}-error-message`;
+  const errorMessage = 'Unable to download document';
+  const isContentTypePresent = typeof metadata.contentType === 'string';
+  if (isContentTypePresent && metadata.contentType.toLowerCase().startsWith('image/') && isInViewport) {
+    return jsxs("div", {
+      class: singleDocumentContainerClassName,
+      style: {
+        maxHeight
+      },
+      "aria-describedby": hasError ? errorMessageId : undefined,
+      children: [jsx("img", {
+        src: fullUrl,
+        alt: metadata.fileName,
+        class: `fjs-${type}-image`
+      }), jsx(DownloadButton, {
+        endpoint: fullUrl,
+        fileName: metadata.fileName,
+        onDownloadError: () => {
+          setHasError(true);
+        }
+      }), hasError ? jsx(Errors, {
+        id: errorMessageId,
+        errors: [errorMessage]
+      }) : null]
+    });
+  }
+  if (isContentTypePresent && metadata.contentType.toLowerCase() === 'application/pdf' && isInViewport) {
+    return jsxs("div", {
+      class: singleDocumentContainerClassName,
+      style: {
+        maxHeight
+      },
+      "aria-describedby": hasError ? errorMessageId : undefined,
+      children: [jsx("embed", {
+        src: fullUrl,
+        type: "application/pdf",
+        class: `fjs-${type}-pdf-viewer`
+      }), hasError ? jsx(Errors, {
+        id: errorMessageId,
+        errors: [errorMessage]
+      }) : null]
+    });
+  }
+  return jsxs("div", {
+    class: classNames(`fjs-${type}-non-preview-item`, `fjs-${type}-single-document-container`),
+    ref: ref,
+    "aria-describedby": hasError ? errorMessageId : undefined,
+    children: [jsxs("div", {
+      children: [jsx("div", {
+        class: "fjs-document-preview-title",
+        children: metadata.fileName
+      }), hasError ? jsx(Errors, {
+        id: errorMessageId,
+        errors: [errorMessage]
+      }) : null]
+    }), jsx(DownloadButton, {
+      endpoint: fullUrl,
+      fileName: metadata.fileName,
+      onDownloadError: () => {
+        setHasError(true);
+      }
+    })]
+  });
+}
+
+/**
+ * @param {Object} props
+ * @param {string} props.endpoint
+ * @param {string} props.fileName
+ * @param {Function} props.onDownloadError
+ *
+ * @returns {import("preact").JSX.Element}
+ */
+function DownloadButton(props) {
+  const {
+    endpoint,
+    fileName,
+    onDownloadError
+  } = props;
+  const handleDownload = async () => {
+    try {
+      const response = await fetch(endpoint);
+      if (!response.ok) {
+        onDownloadError();
+        return;
+      }
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = fileName;
+      link.click();
+      window.URL.revokeObjectURL(url);
+    } catch {
+      onDownloadError();
+    }
+  };
+  return jsx("button", {
+    type: "button",
+    onClick: handleDownload,
+    class: classNames(`fjs-${type}-download-button`),
+    "aria-label": `Download ${fileName}`,
+    children: jsx(SvgDownload, {})
+  });
+}
+
+/**
+ *
+ * @param {import("preact").RefObject<HTMLElement>} ref
+ * @returns boolean
+ */
+function useInViewport(ref) {
+  const [isInViewport, setIsInViewport] = useState(false);
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setIsInViewport(true);
+      }
+    }, {
+      threshold: 0
+    });
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [ref]);
+  return isInViewport;
+}
+
 /**
  * This file must not be changed or exchanged.
  *
@@ -5990,7 +6332,7 @@ function FormComponent(props) {
 const formFields = [/* Input */
 Textfield, Textarea, Numberfield, Datetime, ExpressionField, FilePicker, /* Selection */
 Checkbox, Checklist, Radio, Select, Taglist, /* Presentation */
-Text, Image, Table, Html, Spacer, Separator, /* Containers */
+Text, Image, Table, Html, Spacer, Separator, DocumentPreview, /* Containers */
 Group, DynamicList, IFrame, /* Other */
 Button, Default];
 
@@ -6009,8 +6351,8 @@ class FormFields {
   }
 }
 
-const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression', 'multiple', 'accept'];
-const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url'];
+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', 'multiple', 'accept', 'endpointKey', 'title'];
+const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url', 'title'];
 
 /**
  * @typedef { import('../types').Schema } Schema
@@ -9402,7 +9744,7 @@ class Form {
   }
 }
 
-const schemaVersion = 17;
+const schemaVersion = 18;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -9427,5 +9769,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, 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 };
+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, DocumentPreview, 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