npm - @bpmn-io/form-js-playground - Versions diffs - 1.12.0 → 1.13.1 - Mend

@bpmn-io/form-js-playground 1.12.0 → 1.13.1

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

Files changed (2) hide show

package/dist/form-playground.umd.js +894 -261
package/package.json +4 -4

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

@@ -63585,7 +63585,7 @@
       }
     }, [field, options, onChange, memoizedValues, loadState]);
   }
-  const type$i = 'button';
+  const type$j = 'button';
   function Button(props) {
     const {
       disabled,
@@ -63600,7 +63600,7 @@
       debug: true
     });
     return o("div", {
-      class: formFieldClasses(type$i),
+      class: formFieldClasses(type$j),
       children: o("button", {
         class: "fjs-button",
         type: action,
@@ -63612,7 +63612,7 @@
     });
   }
   Button.config = {
-    type: type$i,
+    type: type$j,
     keyed: false,
     name: 'Button',
     group: 'action',
@@ -63639,6 +63639,15 @@
       children: evaluatedDescription
     });
   }
+  /**
+   * @typedef Props
+   * @property {string} id
+   * @property {string[]} errors
+   *
+   * @param {Props} props
+   * @returns {import("preact").JSX.Element}
+   */
   function Errors(props) {
     const {
       errors,
@@ -63684,7 +63693,7 @@
       })]
     });
   }
-  const type$h = 'checkbox';
+  const type$i = 'checkbox';
   function Checkbox$1(props) {
     const {
       disabled,
@@ -63714,7 +63723,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return o("div", {
-      class: classNames(formFieldClasses(type$h, {
+      class: classNames(formFieldClasses(type$i, {
         errors,
         disabled,
         readonly
@@ -63751,7 +63760,7 @@
     });
   }
   Checkbox$1.config = {
-    type: type$h,
+    type: type$i,
     keyed: true,
     name: 'Checkbox',
     group: 'selection',
@@ -63764,7 +63773,7 @@
       ...options
     })
   };
-  const type$g = 'checklist';
+  const type$h = 'checklist';
   function Checklist(props) {
     const {
       disabled,
@@ -63819,7 +63828,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return o("div", {
-      class: classNames(formFieldClasses(type$g, {
+      class: classNames(formFieldClasses(type$h, {
         errors,
         disabled,
         readonly
@@ -63864,7 +63873,7 @@
     });
   }
   Checklist.config = {
-    type: type$g,
+    type: type$h,
     keyed: true,
     name: 'Checkbox group',
     group: 'selection',
@@ -64179,24 +64188,24 @@
     }),
     getSubheading: field => field.id
   };
-  var _path$x;
-  function _extends$y() {
-    return _extends$y = Object.assign ? Object.assign.bind() : function (n) {
+  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$y.apply(null, arguments);
+    }, _extends$A.apply(null, arguments);
   }
   var SvgCalendar = function SvgCalendar(props) {
-    return /*#__PURE__*/y$1("svg", _extends$y({
+    return /*#__PURE__*/y$1("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__*/y$1("path", {
+    }, props), _path$z || (_path$z = /*#__PURE__*/y$1("path", {
       fill: "currentColor",
       fillRule: "evenodd",
       d: "M19 2H9V0H7v2H2a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-5V0h-2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3zm-5 4v17h24V11z",
@@ -64462,24 +64471,24 @@
       })]
     });
   }
-  var _path$w, _path2$4;
-  function _extends$x() {
-    return _extends$x = Object.assign ? Object.assign.bind() : function (n) {
+  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$x.apply(null, arguments);
+    }, _extends$z.apply(null, arguments);
   }
   var SvgClock = function SvgClock(props) {
-    return /*#__PURE__*/y$1("svg", _extends$x({
+    return /*#__PURE__*/y$1("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__*/y$1("path", {
+    }, props), _path$y || (_path$y = /*#__PURE__*/y$1("path", {
       fill: "currentColor",
       d: "M13 14.41 18.59 20 20 18.59l-5-5.01V5h-2z"
     })), _path2$4 || (_path2$4 = /*#__PURE__*/y$1("path", {
@@ -64749,7 +64758,7 @@
       })]
     });
   }
-  const type$f = 'datetime';
+  const type$g = 'datetime';
   function Datetime(props) {
     const {
       disabled,
@@ -64920,7 +64929,7 @@
       'aria-describedby': [descriptionId, errorMessageId].join(' ')
     };
     return o("div", {
-      class: formFieldClasses(type$f, {
+      class: formFieldClasses(type$g, {
         errors: allErrors,
         disabled,
         readonly
@@ -64945,7 +64954,7 @@
     });
   }
   Datetime.config = {
-    type: type$f,
+    type: type$g,
     keyed: true,
     name: 'Date time',
     group: 'basic-input',
@@ -65009,7 +65018,7 @@
       ...options
     })
   };
-  const type$e = 'iframe';
+  const type$f = 'iframe';
   const DEFAULT_HEIGHT = 300;
   function IFrame(props) {
     const {
@@ -65039,7 +65048,7 @@
       setIframeRefresh(count => count + 1);
     }, [sandbox, allow]);
     return o("div", {
-      class: formFieldClasses(type$e, {
+      class: formFieldClasses(type$f, {
         disabled,
         readonly
       }),
@@ -65074,7 +65083,7 @@
     });
   }
   IFrame.config = {
-    type: type$e,
+    type: type$f,
     keyed: false,
     name: 'iFrame',
     group: 'container',
@@ -65086,87 +65095,87 @@
       ...options
     })
   };
-  var _path$v;
-  function _extends$w() {
-    return _extends$w = Object.assign ? Object.assign.bind() : function (n) {
+  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$w.apply(null, arguments);
+    }, _extends$y.apply(null, arguments);
   }
   var SvgButton = function SvgButton(props) {
-    return /*#__PURE__*/y$1("svg", _extends$w({
+    return /*#__PURE__*/y$1("svg", _extends$y({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$v || (_path$v = /*#__PURE__*/y$1("path", {
+    }, props), _path$x || (_path$x = /*#__PURE__*/y$1("path", {
       fillRule: "evenodd",
       d: "M45 17a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V20a3 3 0 0 1 3-3zm-9 8.889H18v2.222h18z"
     })));
   };
-  var _path$u;
-  function _extends$v() {
-    return _extends$v = Object.assign ? Object.assign.bind() : function (n) {
+  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$v.apply(null, arguments);
+    }, _extends$x.apply(null, arguments);
   }
   var SvgCheckbox = function SvgCheckbox(props) {
-    return /*#__PURE__*/y$1("svg", _extends$v({
+    return /*#__PURE__*/y$1("svg", _extends$x({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$u || (_path$u = /*#__PURE__*/y$1("path", {
+    }, props), _path$w || (_path$w = /*#__PURE__*/y$1("path", {
       d: "M34 18H20a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V20a2 2 0 0 0-2-2m-9 14-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23z"
     })));
   };
-  var _path$t;
-  function _extends$u() {
-    return _extends$u = Object.assign ? Object.assign.bind() : function (n) {
+  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$u.apply(null, arguments);
+    }, _extends$w.apply(null, arguments);
   }
   var SvgChecklist = function SvgChecklist(props) {
-    return /*#__PURE__*/y$1("svg", _extends$u({
+    return /*#__PURE__*/y$1("svg", _extends$w({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "none"
-    }, props), _path$t || (_path$t = /*#__PURE__*/y$1("path", {
+    }, props), _path$v || (_path$v = /*#__PURE__*/y$1("path", {
       fill: "currentColor",
       fillRule: "evenodd",
       d: "M14.35 24.75H19v4.65h-4.65zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414M14.35 37.05H19v4.65h-4.65zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414M14.35 12.45H19v4.65h-4.65zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414m12.007 14.977a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293m0 12.3a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293m0-24.6a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293",
       clipRule: "evenodd"
     })));
   };
-  var _path$s, _path2$3, _path3$1;
-  function _extends$t() {
-    return _extends$t = Object.assign ? Object.assign.bind() : function (n) {
+  var _path$u, _path2$3, _path3$1;
+  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$t.apply(null, arguments);
+    }, _extends$v.apply(null, arguments);
   }
   var SvgDatetime = function SvgDatetime(props) {
-    return /*#__PURE__*/y$1("svg", _extends$t({
+    return /*#__PURE__*/y$1("svg", _extends$v({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$s || (_path$s = /*#__PURE__*/y$1("path", {
+    }, props), _path$u || (_path$u = /*#__PURE__*/y$1("path", {
       fillRule: "evenodd",
       d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 0 0-2.06 2.06v23.549a2.07 2.07 0 0 0 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 0 1-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 0 1 .707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06"
     })), _path2$3 || (_path2$3 = /*#__PURE__*/y$1("path", {
@@ -65176,23 +65185,23 @@
       d: "M23.08 36.962a9.678 9.678 0 1 0 17.883-7.408 9.678 9.678 0 0 0-17.882 7.408Zm4.54-10.292a7.924 7.924 0 1 1 8.805 13.177A7.924 7.924 0 0 1 27.62 26.67"
     })));
   };
-  var _path$r, _path2$2;
-  function _extends$s() {
-    return _extends$s = Object.assign ? Object.assign.bind() : function (n) {
+  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$s.apply(null, arguments);
+    }, _extends$u.apply(null, arguments);
   }
   var SvgTaglist = function SvgTaglist(props) {
-    return /*#__PURE__*/y$1("svg", _extends$s({
+    return /*#__PURE__*/y$1("svg", _extends$u({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "currentcolor"
-    }, props), _path$r || (_path$r = /*#__PURE__*/y$1("path", {
+    }, props), _path$t || (_path$t = /*#__PURE__*/y$1("path", {
       fillRule: "evenodd",
       d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1"
     })), _path2$2 || (_path2$2 = /*#__PURE__*/y$1("path", {
@@ -65200,17 +65209,17 @@
     })));
   };
   var _rect$1, _rect2, _rect3;
-  function _extends$r() {
-    return _extends$r = Object.assign ? Object.assign.bind() : function (n) {
+  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$r.apply(null, arguments);
+    }, _extends$t.apply(null, arguments);
   }
   var SvgForm = function SvgForm(props) {
-    return /*#__PURE__*/y$1("svg", _extends$r({
+    return /*#__PURE__*/y$1("svg", _extends$t({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54
@@ -65234,29 +65243,70 @@
       rx: 1
     })));
   };
-  var _path$q;
-  function _extends$q() {
-    return _extends$q = Object.assign ? Object.assign.bind() : function (n) {
+  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$q.apply(null, arguments);
+    }, _extends$s.apply(null, arguments);
   }
   var SvgGroup = function SvgGroup(props) {
-    return /*#__PURE__*/y$1("svg", _extends$q({
+    return /*#__PURE__*/y$1("svg", _extends$s({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "none"
-    }, props), _path$q || (_path$q = /*#__PURE__*/y$1("path", {
+    }, props), _path$s || (_path$s = /*#__PURE__*/y$1("path", {
       fill: "#000",
       fillRule: "evenodd",
       d: "M4.05 42.132v1.164c0 .693.604 1.254 1.35 1.254h1.35v-2.507h-2.7v.09Zm0-2.328h2.7v-2.328h-2.7zm0-4.656h2.7V32.82h-2.7zm0-4.656h2.7v-2.328h-2.7zm0-4.656h2.7v-2.328h-2.7zm0-4.656h2.7v-2.328h-2.7zm0-4.656h2.7v-2.328h-2.7zm0-4.656v.09h2.7V9.45H5.4c-.746 0-1.35.561-1.35 1.254zm5.4-2.418v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7V9.45zm5.4 0v2.507h2.7v-1.253c0-.693-.604-1.254-1.35-1.254zm2.7 4.746h-2.7v2.328h2.7zm0 4.656h-2.7v2.328h2.7zm0 4.656h-2.7v2.328h2.7zm0 4.656h-2.7v2.328h2.7zm0 4.656h-2.7v2.328h2.7zm0 4.656h-2.7v2.328h2.7zm0 4.656v-.09h-2.7v2.508h1.35c.746 0 1.35-.561 1.35-1.254zm-5.4 2.418v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507zm-5.4 0v-2.507h-2.7v2.507z",
       clipRule: "evenodd"
     })));
   };
+  var _path$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__*/y$1("svg", _extends$r({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 54,
+      height: 54,
+      fill: "currentcolor"
+    }, props), _path$r || (_path$r = /*#__PURE__*/y$1("path", {
+      fillRule: "evenodd",
+      d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1M35 28.444h7l-3.5 4zM35 26h7l-3.5-4z"
+    })));
+  };
+  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__*/y$1("svg", _extends$q({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 54,
+      height: 54,
+      fill: "currentcolor"
+    }, props), _path$q || (_path$q = /*#__PURE__*/y$1("path", {
+      d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5m0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10m0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16"
+    })));
+  };
   var _path$p;
   function _extends$p() {
     return _extends$p = Object.assign ? Object.assign.bind() : function (n) {
@@ -65267,7 +65317,7 @@
       return n;
     }, _extends$p.apply(null, arguments);
   }
-  var SvgNumber = function SvgNumber(props) {
+  var SvgSelect = function SvgSelect(props) {
     return /*#__PURE__*/y$1("svg", _extends$p({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
@@ -65275,7 +65325,7 @@
       fill: "currentcolor"
     }, props), _path$p || (_path$p = /*#__PURE__*/y$1("path", {
       fillRule: "evenodd",
-      d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1M35 28.444h7l-3.5 4zM35 26h7l-3.5-4z"
+      d: "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$o;
@@ -65288,14 +65338,15 @@
       return n;
     }, _extends$o.apply(null, arguments);
   }
-  var SvgRadio = function SvgRadio(props) {
+  var SvgSeparator = function SvgSeparator(props) {
     return /*#__PURE__*/y$1("svg", _extends$o({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "currentcolor"
+      fill: "none"
     }, props), _path$o || (_path$o = /*#__PURE__*/y$1("path", {
-      d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5m0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10m0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16"
+      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$n;
@@ -65308,15 +65359,15 @@
       return n;
     }, _extends$n.apply(null, arguments);
   }
-  var SvgSelect = function SvgSelect(props) {
+  var SvgSpacer = function SvgSpacer(props) {
     return /*#__PURE__*/y$1("svg", _extends$n({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "currentcolor"
+      fill: "none"
     }, props), _path$n || (_path$n = /*#__PURE__*/y$1("path", {
-      fillRule: "evenodd",
-      d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1m-12 7h9l-4.5 6z"
+      fill: "currentColor",
+      d: "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$m;
@@ -65329,7 +65380,7 @@
       return n;
     }, _extends$m.apply(null, arguments);
   }
-  var SvgSeparator = function SvgSeparator(props) {
+  var SvgDynamicList = function SvgDynamicList(props) {
     return /*#__PURE__*/y$1("svg", _extends$m({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
@@ -65337,7 +65388,9 @@
       fill: "none"
     }, props), _path$m || (_path$m = /*#__PURE__*/y$1("path", {
       fill: "currentColor",
-      d: "M26.293 16.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 18.414l-3.293 3.293a1 1 0 0 1-1.414-1.414zM9 26h36v2H9zm13.293 7.707 4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L27 35.586l-3.293-3.293a1 1 0 0 0-1.414 1.414"
+      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$l;
@@ -65350,15 +65403,14 @@
       return n;
     }, _extends$l.apply(null, arguments);
   }
-  var SvgSpacer = function SvgSpacer(props) {
+  var SvgText = function SvgText(props) {
     return /*#__PURE__*/y$1("svg", _extends$l({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "none"
+      fill: "currentcolor"
     }, props), _path$l || (_path$l = /*#__PURE__*/y$1("path", {
-      fill: "currentColor",
-      d: "M9 15v2h36v-2zm0 22v2h36v-2zm17.293-17.707a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 21.414l-3.293 3.293a1 1 0 0 1-1.414-1.414zm-4 11.414 4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L27 32.586l-3.293-3.293a1 1 0 0 0-1.414 1.414"
+      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$k;
@@ -65371,7 +65423,7 @@
       return n;
     }, _extends$k.apply(null, arguments);
   }
-  var SvgDynamicList = function SvgDynamicList(props) {
+  var SvgHtml = function SvgHtml(props) {
     return /*#__PURE__*/y$1("svg", _extends$k({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
@@ -65380,7 +65432,7 @@
     }, props), _path$k || (_path$k = /*#__PURE__*/y$1("path", {
       fill: "currentColor",
       fillRule: "evenodd",
-      d: "M2.7 43.296v1.254c0 .746.604 1.35 1.35 1.35h1.275v-1.795q.074.211.075.445v-1.254h-.075V43.2H4.05c.177 0 .347.034.502.096zm2.7-2.507v-2.507H2.7v2.507zm0-5.014v-2.507H2.7v2.507zm0-5.014v-2.507H2.7v2.507zm0-5.015V23.24H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507zm0-5.014V13.21H2.7v2.507zm-2.7-5.014h1.852a1.4 1.4 0 0 1-.502.096h1.275v-.096H5.4V9.45q0 .235-.075.445V8.1H4.05A1.35 1.35 0 0 0 2.7 9.45zm5.175.096h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1 0h2.55V8.1h-2.55zm5.1-2.7v1.795a1.4 1.4 0 0 1-.075-.445v1.254h.075v.096h1.275a1.4 1.4 0 0 1-.502-.096H51.3V9.45a1.35 1.35 0 0 0-1.35-1.35zm-.075 5.11v2.508h2.7V13.21zm0 5.015v2.507h2.7v-2.507zm0 5.014v2.507h2.7V23.24zm0 5.015v2.507h2.7v-2.507zm0 5.014v2.507h2.7v-2.507zm0 5.014v2.507h2.7v-2.507zm2.7 5.014h-1.852a1.4 1.4 0 0 1 .502-.096h-1.275v.096H48.6v1.254q0-.235.075-.445V45.9h1.275a1.35 1.35 0 0 0 1.35-1.35zm-5.175-.096h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zm-5.1 0h-2.55v2.7h2.55zM16.2 17.55a4.05 4.05 0 0 1 4.05 4.05v1.35A4.05 4.05 0 0 1 16.2 27h-1.35a4.05 4.05 0 0 1-4.05-4.05V21.6a4.05 4.05 0 0 1 4.05-4.05zm0 2.7h-1.35a1.35 1.35 0 0 0-1.35 1.35v1.35c0 .746.604 1.35 1.35 1.35h1.35a1.35 1.35 0 0 0 1.35-1.35V21.6a1.35 1.35 0 0 0-1.35-1.35m27 1.35a4.05 4.05 0 0 0-4.05-4.05H29.7a4.05 4.05 0 0 0-4.05 4.05v1.35A4.05 4.05 0 0 0 29.7 27h9.45a4.05 4.05 0 0 0 4.05-4.05zm-13.5-1.35h9.45c.746 0 1.35.604 1.35 1.35v1.35a1.35 1.35 0 0 1-1.35 1.35H29.7a1.35 1.35 0 0 1-1.35-1.35V21.6c0-.746.604-1.35 1.35-1.35M43.2 37.8a4.05 4.05 0 0 0-4.05-4.05H29.7a4.05 4.05 0 0 0-4.05 4.05v1.35h2.7V37.8c0-.746.604-1.35 1.35-1.35h9.45c.746 0 1.35.604 1.35 1.35v1.35h2.7zm-27-4.05a4.05 4.05 0 0 1 4.05 4.05v1.35h-2.7V37.8a1.35 1.35 0 0 0-1.35-1.35h-1.35a1.35 1.35 0 0 0-1.35 1.35v1.35h-2.7V37.8a4.05 4.05 0 0 1 4.05-4.05z",
+      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"
     })));
   };
@@ -65394,14 +65446,17 @@
       return n;
     }, _extends$j.apply(null, arguments);
   }
-  var SvgText = function SvgText(props) {
+  var SvgExpressionField = function SvgExpressionField(props) {
     return /*#__PURE__*/y$1("svg", _extends$j({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "currentcolor"
+      fill: "none"
     }, props), _path$j || (_path$j = /*#__PURE__*/y$1("path", {
-      d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36-1.86-5-1.83 5zM22 20.23h5.41a15.5 15.5 0 0 1 2.4.14 3.4 3.4 0 0 1 1.41.55 3.5 3.5 0 0 1 1 1.14 3 3 0 0 1 .42 1.58 3.26 3.26 0 0 1-1.91 2.94 3.63 3.63 0 0 1 1.91 1.22 3.28 3.28 0 0 1 .66 2 4 4 0 0 1-.43 1.8 3.6 3.6 0 0 1-1.09 1.4 3.9 3.9 0 0 1-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.8 1.8 0 0 0 1.1-.49 1.4 1.4 0 0 0 .41-1 1.5 1.5 0 0 0-.35-1 1.54 1.54 0 0 0-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.5 11.5 0 0 0 1.88-.09 1.65 1.65 0 0 0 1-.54 1.6 1.6 0 0 0 .38-1.14 1.75 1.75 0 0 0-.29-1 1.7 1.7 0 0 0-.86-.62 9.3 9.3 0 0 0-2.41-.23zm19.62.92 2.65.84a5.94 5.94 0 0 1-2 3.29A5.74 5.74 0 0 1 41.38 34a5.87 5.87 0 0 1-4.44-1.84 7.1 7.1 0 0 1-1.73-5A7.43 7.43 0 0 1 37 21.87 6 6 0 0 1 41.54 20a5.64 5.64 0 0 1 4 1.47A5.33 5.33 0 0 1 47 24l-2.7.65a2.8 2.8 0 0 0-2.86-2.27A3.09 3.09 0 0 0 39 23.42a5.3 5.3 0 0 0-.93 3.5 5.62 5.62 0 0 0 .93 3.65 3 3 0 0 0 2.4 1.09 2.72 2.72 0 0 0 1.82-.66 4 4 0 0 0 1.13-2.21"
+      fill: "currentcolor",
+      fillRule: "evenodd",
+      d: "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$i;
@@ -65414,17 +65469,15 @@
       return n;
     }, _extends$i.apply(null, arguments);
   }
-  var SvgHtml = function SvgHtml(props) {
+  var SvgTextfield = function SvgTextfield(props) {
     return /*#__PURE__*/y$1("svg", _extends$i({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "none"
+      fill: "currentcolor"
     }, props), _path$i || (_path$i = /*#__PURE__*/y$1("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",
-      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$h;
@@ -65437,17 +65490,15 @@
       return n;
     }, _extends$h.apply(null, arguments);
   }
-  var SvgExpressionField = function SvgExpressionField(props) {
+  var SvgTextarea = function SvgTextarea(props) {
     return /*#__PURE__*/y$1("svg", _extends$h({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "none"
+      fill: "currentcolor"
     }, props), _path$h || (_path$h = /*#__PURE__*/y$1("path", {
-      fill: "currentcolor",
       fillRule: "evenodd",
-      d: "M12.78 16.2v6.75c0 1.619-.635 3.059-1.618 4.05.983.991 1.618 2.431 1.618 4.05v6.75h3.51v2.7h-3.51c-1.289 0-2.34-1.213-2.34-2.7v-6.75c0-1.487-1.051-2.7-2.34-2.7v-2.7c1.289 0 2.34-1.213 2.34-2.7V16.2c0-1.487 1.051-2.7 2.34-2.7h3.51v2.7zm30.78 0v6.75c0 1.487 1.051 2.7 2.34 2.7v2.7c-1.289 0-2.34 1.213-2.34 2.7v6.75c0 1.487-1.051 2.7-2.34 2.7h-3.51v-2.7h3.51v-6.75c0-1.619.635-3.059 1.618-4.05-.983-.991-1.618-2.431-1.618-4.05V16.2h-3.51v-2.7h3.51c1.289 0 2.34 1.213 2.34 2.7M21.8 34.531q.7-.569.959-1.758l1.788-8.34h1.585l.387-1.828h-1.585l.405-1.878h1.585l.387-1.827H25.69q-1.271 0-1.972.569-.681.569-.94 1.758l-.294 1.378H21.34l-.387 1.827h1.142l-1.898 8.841h-1.585l-.387 1.827h1.622q1.272 0 1.953-.569m7.248-7.686-3.797 4.808h2.599l2.12-3.016h.22l.885 3.016h2.599l-1.677-4.36 3.778-4.688h-2.599l-2.12 2.947h-.22l-.885-2.947h-2.599z",
-      clipRule: "evenodd"
+      d: "M45 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$g;
@@ -65460,18 +65511,20 @@
       return n;
     }, _extends$g.apply(null, arguments);
   }
-  var SvgTextfield = function SvgTextfield(props) {
+  var SvgIFrame = function SvgIFrame(props) {
     return /*#__PURE__*/y$1("svg", _extends$g({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "currentcolor"
+      fill: "none"
     }, props), _path$g || (_path$g = /*#__PURE__*/y$1("path", {
+      fill: "currentColor",
       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.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$f;
+  var _path$f, _path2$1$1;
   function _extends$f() {
     return _extends$f = Object.assign ? Object.assign.bind() : function (n) {
       for (var e = 1; e < arguments.length; e++) {
@@ -65481,7 +65534,7 @@
       return n;
     }, _extends$f.apply(null, arguments);
   }
-  var SvgTextarea = function SvgTextarea(props) {
+  var SvgImage = function SvgImage(props) {
     return /*#__PURE__*/y$1("svg", _extends$f({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
@@ -65489,7 +65542,12 @@
       fill: "currentcolor"
     }, props), _path$f || (_path$f = /*#__PURE__*/y$1("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"
+      d: "M34.636 21.91A3.818 3.818 0 1 1 27 21.908a3.818 3.818 0 0 1 7.636 0Zm-2 0A1.818 1.818 0 1 1 29 21.908a1.818 1.818 0 0 1 3.636 0Z",
+      clipRule: "evenodd"
+    })), _path2$1$1 || (_path2$1$1 = /*#__PURE__*/y$1("path", {
+      fillRule: "evenodd",
+      d: "M15 13a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V15a2 2 0 0 0-2-2zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 0 1 2.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 0 1 2.411.239L39 32.73zM15 39v-8.754a1 1 0 0 0 .168-.135l5.893-5.893 6.684 6.685a1.91 1.91 0 0 0 2.41.238l2.657-1.77 6.02 6.02q.078.077.168.135V39z",
+      clipRule: "evenodd"
     })));
   };
   var _path$e;
@@ -65502,20 +65560,19 @@
       return n;
     }, _extends$e.apply(null, arguments);
   }
-  var SvgIFrame = function SvgIFrame(props) {
+  var SvgTable = function SvgTable(props) {
     return /*#__PURE__*/y$1("svg", _extends$e({
       xmlns: "http://www.w3.org/2000/svg",
-      width: 54,
-      height: 54,
-      fill: "none"
+      fill: "none",
+      viewBox: "0 0 54 54"
     }, props), _path$e || (_path$e = /*#__PURE__*/y$1("path", {
-      fill: "currentColor",
+      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: "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$d, _path2$1$1;
+  var _path$d;
   function _extends$d() {
     return _extends$d = Object.assign ? Object.assign.bind() : function (n) {
       for (var e = 1; e < arguments.length; e++) {
@@ -65525,19 +65582,16 @@
       return n;
     }, _extends$d.apply(null, arguments);
   }
-  var SvgImage = function SvgImage(props) {
+  var SvgFilePicker = function SvgFilePicker(props) {
     return /*#__PURE__*/y$1("svg", _extends$d({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
-      fill: "currentcolor"
+      fill: "none"
     }, props), _path$d || (_path$d = /*#__PURE__*/y$1("path", {
+      fill: "currentcolor",
       fillRule: "evenodd",
-      d: "M34.636 21.91A3.818 3.818 0 1 1 27 21.908a3.818 3.818 0 0 1 7.636 0Zm-2 0A1.818 1.818 0 1 1 29 21.908a1.818 1.818 0 0 1 3.636 0Z",
-      clipRule: "evenodd"
-    })), _path2$1$1 || (_path2$1$1 = /*#__PURE__*/y$1("path", {
-      fillRule: "evenodd",
-      d: "M15 13a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V15a2 2 0 0 0-2-2zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 0 1 2.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 0 1 2.411.239L39 32.73zM15 39v-8.754a1 1 0 0 0 .168-.135l5.893-5.893 6.684 6.685a1.91 1.91 0 0 0 2.41.238l2.657-1.77 6.02 6.02q.078.077.168.135V39z",
+      d: "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"
     })));
   };
@@ -65551,38 +65605,16 @@
       return n;
     }, _extends$c.apply(null, arguments);
   }
-  var SvgTable = function SvgTable(props) {
+  var SvgDocumentPreview = function SvgDocumentPreview(props) {
     return /*#__PURE__*/y$1("svg", _extends$c({
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 54 54"
-    }, props), _path$c || (_path$c = /*#__PURE__*/y$1("path", {
-      fill: "currentcolor",
-      fillRule: "evenodd",
-      d: "M42.545 12.273A2.455 2.455 0 0 1 45 14.727v24.546a2.455 2.455 0 0 1-2.455 2.454h-31.09A2.455 2.455 0 0 1 9 39.273V14.727a2.455 2.455 0 0 1 2.455-2.454zM27.818 40.09h14.727a.82.82 0 0 0 .819-.818v-4.91H27.818Zm-1.636-5.727v5.727H11.455a.82.82 0 0 1-.819-.818v-4.91zm1.636-1.637h15.546V27H27.818ZM26.182 27v5.727H10.636V27zm1.636-1.636h15.546v-5.728H27.818Zm-1.636-5.728v5.728H10.636v-5.728z",
-      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 SvgFilePicker = function SvgFilePicker(props) {
-    return /*#__PURE__*/y$1("svg", _extends$b({
       xmlns: "http://www.w3.org/2000/svg",
       width: 54,
       height: 54,
       fill: "none"
-    }, props), _path$b || (_path$b = /*#__PURE__*/y$1("path", {
+    }, props), _path$c || (_path$c = /*#__PURE__*/y$1("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",
+      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"
     })));
   };
@@ -65610,10 +65642,11 @@
       textarea: SvgTextarea,
       table: SvgTable,
       filepicker: SvgFilePicker,
+      documentPreview: SvgDocumentPreview,
       default: SvgForm
     }[type];
   };
-  const type$d = 'image';
+  const type$e = 'image';
   function Image$1(props) {
     const {
       field
@@ -65635,7 +65668,7 @@
       formId
     } = q$1(FormContext);
     return o("div", {
-      class: formFieldClasses(type$d),
+      class: formFieldClasses(type$e),
       children: [safeSource && o("div", {
         class: "fjs-image-container",
         children: o("img", {
@@ -65659,7 +65692,7 @@
     });
   }
   Image$1.config = {
-    type: type$d,
+    type: type$e,
     keyed: false,
     name: 'Image view',
     group: 'presentation',
@@ -65683,22 +65716,22 @@
       post: evaluatedPost
     });
   }
-  var _path$a;
-  function _extends$a() {
-    return _extends$a = Object.assign ? Object.assign.bind() : function (n) {
+  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$a.apply(null, arguments);
+    }, _extends$b.apply(null, arguments);
   }
   var SvgAngelDown = function SvgAngelDown(props) {
-    return /*#__PURE__*/y$1("svg", _extends$a({
+    return /*#__PURE__*/y$1("svg", _extends$b({
       xmlns: "http://www.w3.org/2000/svg",
       width: 8,
       height: 8
-    }, props), _path$a || (_path$a = /*#__PURE__*/y$1("path", {
+    }, props), _path$b || (_path$b = /*#__PURE__*/y$1("path", {
       fill: "currentColor",
       fillRule: "evenodd",
       stroke: "currentColor",
@@ -65707,22 +65740,22 @@
       clipRule: "evenodd"
     })));
   };
-  var _path$9;
-  function _extends$9() {
-    return _extends$9 = Object.assign ? Object.assign.bind() : function (n) {
+  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$9.apply(null, arguments);
+    }, _extends$a.apply(null, arguments);
   }
   var SvgAngelUp = function SvgAngelUp(props) {
-    return /*#__PURE__*/y$1("svg", _extends$9({
+    return /*#__PURE__*/y$1("svg", _extends$a({
       xmlns: "http://www.w3.org/2000/svg",
       width: 8,
       height: 8
-    }, props), _path$9 || (_path$9 = /*#__PURE__*/y$1("path", {
+    }, props), _path$a || (_path$a = /*#__PURE__*/y$1("path", {
       fill: "currentColor",
       fillRule: "evenodd",
       stroke: "currentColor",
@@ -65759,7 +65792,7 @@
   function isNullEquivalentValue(value) {
     return value === undefined || value === null || value === '';
   }
-  const type$c = 'number';
+  const type$d = 'number';
   function Numberfield(props) {
     const {
       disabled,
@@ -65906,7 +65939,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return o("div", {
-      class: formFieldClasses(type$c, {
+      class: formFieldClasses(type$d, {
         errors,
         disabled,
         readonly
@@ -65983,7 +66016,7 @@
     });
   }
   Numberfield.config = {
-    type: type$c,
+    type: type$d,
     keyed: true,
     name: 'Number',
     group: 'basic-input',
@@ -66003,7 +66036,7 @@
       ...options
     })
   };
-  const type$b = 'radio';
+  const type$c = 'radio';
   function Radio(props) {
     const {
       disabled,
@@ -66057,7 +66090,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return o("div", {
-      class: formFieldClasses(type$b, {
+      class: formFieldClasses(type$c, {
         errors,
         disabled,
         readonly
@@ -66106,7 +66139,7 @@
     });
   }
   Radio.config = {
-    type: type$b,
+    type: type$c,
     keyed: true,
     name: 'Radio group',
     group: 'selection',
@@ -66117,22 +66150,22 @@
       ...createEmptyOptions(options)
     })
   };
-  var _path$8;
-  function _extends$8() {
-    return _extends$8 = Object.assign ? Object.assign.bind() : function (n) {
+  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$8.apply(null, arguments);
+    }, _extends$9.apply(null, arguments);
   }
   var SvgXMark = function SvgXMark(props) {
-    return /*#__PURE__*/y$1("svg", _extends$8({
+    return /*#__PURE__*/y$1("svg", _extends$9({
       xmlns: "http://www.w3.org/2000/svg",
       width: 8,
       height: 8
-    }, props), _path$8 || (_path$8 = /*#__PURE__*/y$1("path", {
+    }, props), _path$9 || (_path$9 = /*#__PURE__*/y$1("path", {
       fill: "currentColor",
       fillRule: "evenodd",
       stroke: "currentColor",
@@ -66427,7 +66460,7 @@
       })]
     });
   }
-  const type$a = 'select';
+  const type$b = 'select';
   function Select$1(props) {
     const {
       disabled,
@@ -66466,7 +66499,7 @@
       'aria-describedby': [descriptionId, errorMessageId].join(' ')
     };
     return o("div", {
-      class: formFieldClasses(type$a, {
+      class: formFieldClasses(type$b, {
         errors,
         disabled,
         readonly
@@ -66495,7 +66528,7 @@
     });
   }
   Select$1.config = {
-    type: type$a,
+    type: type$b,
     keyed: true,
     name: 'Select',
     group: 'selection',
@@ -66506,15 +66539,15 @@
       ...createEmptyOptions(options)
     })
   };
-  const type$9 = 'separator';
+  const type$a = 'separator';
   function Separator() {
     return o("div", {
-      class: formFieldClasses(type$9),
+      class: formFieldClasses(type$a),
       children: o("hr", {})
     });
   }
   Separator.config = {
-    type: type$9,
+    type: type$a,
     keyed: false,
     name: 'Separator',
     group: 'presentation',
@@ -66522,7 +66555,7 @@
       ...options
     })
   };
-  const type$8 = 'spacer';
+  const type$9 = 'spacer';
   function Spacer(props) {
     const {
       field
@@ -66531,14 +66564,14 @@
       height = 60
     } = field;
     return o("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',
@@ -66617,7 +66650,7 @@
       children: label
     });
   }
-  const type$7 = 'taglist';
+  const type$8 = 'taglist';
   function Taglist(props) {
     const {
       disabled,
@@ -66763,7 +66796,7 @@
     const errorMessageId = `${domId}-error-message`;
     return o("div", {
       ref: focusScopeRef,
-      class: formFieldClasses(type$7, {
+      class: formFieldClasses(type$8, {
         errors,
         disabled,
         readonly
@@ -66848,7 +66881,7 @@
     });
   }
   Taglist.config = {
-    type: type$7,
+    type: type$8,
     keyed: true,
     name: 'Tag list',
     group: 'selection',
@@ -66970,7 +67003,7 @@
     }
     return true;
   }
-  const type$6 = 'text';
+  const type$7 = 'text';
   function Text$1(props) {
     const form = useService$2('form');
     const {
@@ -67017,12 +67050,12 @@
       sanitizeStyleTags: false
     });
     return o("div", {
-      class: formFieldClasses(type$6),
+      class: formFieldClasses(type$7),
       dangerouslySetInnerHTML: dangerouslySetInnerHTML
     });
   }
   Text$1.config = {
-    type: type$6,
+    type: type$7,
     keyed: false,
     name: 'Text view',
     group: 'presentation',
@@ -67034,7 +67067,7 @@
       textToLabel(field.text);
     }
   };
-  const type$5 = 'html';
+  const type$6 = 'html';
   function Html(props) {
     const form = useService$2('form');
     const {
@@ -67085,12 +67118,12 @@
       sanitizeStyleTags: false
     });
     return o("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',
@@ -67099,7 +67132,7 @@
       ...options
     })
   };
-  const type$4 = 'expression';
+  const type$5 = 'expression';
   function ExpressionField(props) {
     const {
       field,
@@ -67136,7 +67169,7 @@
     return null;
   }
   ExpressionField.config = {
-    type: type$4,
+    type: type$5,
     name: 'Expression',
     group: 'basic-input',
     keyed: true,
@@ -67147,7 +67180,7 @@
       ...options
     })
   };
-  const type$3 = 'textfield';
+  const type$4 = 'textfield';
   function Textfield$1(props) {
     const {
       disabled,
@@ -67189,7 +67222,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return o("div", {
-      class: formFieldClasses(type$3, {
+      class: formFieldClasses(type$4, {
         errors,
         disabled,
         readonly
@@ -67227,7 +67260,7 @@
     });
   }
   Textfield$1.config = {
-    type: type$3,
+    type: type$4,
     keyed: true,
     name: 'Text field',
     group: 'basic-input',
@@ -67250,7 +67283,7 @@
       ...options
     })
   };
-  const type$2 = 'textarea';
+  const type$3 = 'textarea';
   function Textarea(props) {
     const {
       disabled,
@@ -67300,7 +67333,7 @@
     const descriptionId = `${domId}-description`;
     const errorMessageId = `${domId}-error-message`;
     return o("div", {
-      class: formFieldClasses(type$2, {
+      class: formFieldClasses(type$3, {
         errors,
         disabled,
         readonly
@@ -67332,7 +67365,7 @@
     });
   }
   Textarea.config = {
-    type: type$2,
+    type: type$3,
     keyed: true,
     name: 'Text area',
     group: 'basic-input',
@@ -67363,85 +67396,85 @@
     // Overflow is hidden by default to hide scrollbar flickering
     textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
   };
-  var _path$7;
-  function _extends$7() {
-    return _extends$7 = Object.assign ? Object.assign.bind() : function (n) {
+  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$7.apply(null, arguments);
+    }, _extends$8.apply(null, arguments);
   }
   var SvgArrowDown = function SvgArrowDown(props) {
-    return /*#__PURE__*/y$1("svg", _extends$7({
+    return /*#__PURE__*/y$1("svg", _extends$8({
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 32 32"
-    }, props), _path$7 || (_path$7 = /*#__PURE__*/y$1("path", {
+    }, props), _path$8 || (_path$8 = /*#__PURE__*/y$1("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$1() {
-    return _extends$6$1 = Object.assign ? Object.assign.bind() : function (n) {
+  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$6$1.apply(null, arguments);
+    }, _extends$7.apply(null, arguments);
   }
   var SvgArrowUp = function SvgArrowUp(props) {
-    return /*#__PURE__*/y$1("svg", _extends$6$1({
+    return /*#__PURE__*/y$1("svg", _extends$7({
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 32 32"
-    }, props), _path$6 || (_path$6 = /*#__PURE__*/y$1("path", {
+    }, props), _path$7 || (_path$7 = /*#__PURE__*/y$1("path", {
       fill: "currentcolor",
       d: "M16 4 6 14l1.41 1.41L15 7.83V28h2V7.83l7.59 7.58L26 14z"
     })));
   };
-  var _path$5$1;
-  function _extends$5$1() {
-    return _extends$5$1 = Object.assign ? Object.assign.bind() : function (n) {
+  var _path$6;
+  function _extends$6$1() {
+    return _extends$6$1 = 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$1.apply(null, arguments);
+    }, _extends$6$1.apply(null, arguments);
   }
   var SvgCaretLeft = function SvgCaretLeft(props) {
-    return /*#__PURE__*/y$1("svg", _extends$5$1({
+    return /*#__PURE__*/y$1("svg", _extends$6$1({
       xmlns: "http://www.w3.org/2000/svg",
       xmlSpace: "preserve",
       viewBox: "0 0 32 32"
-    }, props), _path$5$1 || (_path$5$1 = /*#__PURE__*/y$1("path", {
+    }, props), _path$6 || (_path$6 = /*#__PURE__*/y$1("path", {
       fill: "currentcolor",
       d: "m20 24-10-8 10-8z"
     })));
   };
-  var _path$4$1;
-  function _extends$4$1() {
-    return _extends$4$1 = Object.assign ? Object.assign.bind() : function (n) {
+  var _path$5$1;
+  function _extends$5$1() {
+    return _extends$5$1 = 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$1.apply(null, arguments);
+    }, _extends$5$1.apply(null, arguments);
   }
   var SvgCaretRight = function SvgCaretRight(props) {
-    return /*#__PURE__*/y$1("svg", _extends$4$1({
+    return /*#__PURE__*/y$1("svg", _extends$5$1({
       xmlns: "http://www.w3.org/2000/svg",
       xmlSpace: "preserve",
       viewBox: "0 0 32 32"
-    }, props), _path$4$1 || (_path$4$1 = /*#__PURE__*/y$1("path", {
+    }, props), _path$5$1 || (_path$5$1 = /*#__PURE__*/y$1("path", {
       fill: "currentcolor",
       d: "m12 8 10 8-10 8z"
     })));
   };
-  const type$1 = 'table';
+  const type$2 = 'table';
   /**
    * @typedef {('asc'|'desc')} Direction
@@ -67522,7 +67555,7 @@
       });
     }
     return o("div", {
-      class: formFieldClasses(type$1),
+      class: formFieldClasses(type$2),
       children: [o(Label$3, {
         htmlFor: prefixId$2(id),
         label: label
@@ -67619,7 +67652,7 @@
     });
   }
   Table.config = {
-    type: type$1,
+    type: type$2,
     keyed: false,
     name: 'Table',
     group: 'presentation',
@@ -67772,7 +67805,7 @@
     return `Click to sort by ${label} ascending`;
   }
   const FILE_PICKER_FILE_KEY_PREFIX = 'files::';
-  const type$j = 'filepicker';
+  const type$1 = 'filepicker';
   const ids$1 = new Ids();
   const EMPTY_ARRAY$1 = [];
@@ -67860,7 +67893,7 @@
     };
     const isInputDisabled = disabled || readonly || fileRegistry === null;
     return o("div", {
-      className: formFieldClasses(type$j, {
+      className: formFieldClasses(type$1, {
         errors,
         disabled,
         readonly
@@ -67926,6 +67959,329 @@
     }
     return `${files.length} files selected`;
   }
+  var _path$4$1;
+  function _extends$4$1() {
+    return _extends$4$1 = 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$1.apply(null, arguments);
+  }
+  var SvgDownload = function SvgDownload(props) {
+    return /*#__PURE__*/y$1("svg", _extends$4$1({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 16,
+      height: 16
+    }, props), _path$4$1 || (_path$4$1 = /*#__PURE__*/y$1("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__*/y$1("path", {
+      d: "M0 0h16v16H0z",
+      style: {
+        fill: "none"
+      }
+    }));
+  };
+  const type$k = '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 o("div", {
+      class: formFieldClasses(type$k),
+      children: [o(Label$3, {
+        htmlFor: domId,
+        label: evaluatedLabel
+      }), o("div", {
+        class: `fjs-${type$k}-document-container`,
+        id: domId,
+        children: isValidDocumentEndpoint(endpoint) ? data.map((document, index) => o(DocumentRenderer, {
+          documentMetadata: document,
+          endpoint: endpoint,
+          maxHeight: maxHeight,
+          domId: `${domId}-${index}`
+        }, document.documentId)) : null
+      }), o(Errors, {
+        id: errorMessageId,
+        errors: getErrors({
+          dataSource,
+          endpoint,
+          endpointKey
+        })
+      })]
+    });
+  }
+  DocumentPreview.config = {
+    type: type$k,
+    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$2(dataSource) || dataSource.length < 1) {
+      errors.push('Document reference is not defined.');
+    }
+    if (!isString$2(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] = h(false);
+    const ref = _$1(null);
+    const isInViewport = useInViewport(ref);
+    const fullUrl = endpoint.replace(DOCUMENT_ID_PLACEHOLDER, documentMetadata.documentId);
+    const singleDocumentContainerClassName = `fjs-${type$k}-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 o("div", {
+        class: singleDocumentContainerClassName,
+        style: {
+          maxHeight
+        },
+        "aria-describedby": hasError ? errorMessageId : undefined,
+        children: [o("img", {
+          src: fullUrl,
+          alt: metadata.fileName,
+          class: `fjs-${type$k}-image`
+        }), o(DownloadButton, {
+          endpoint: fullUrl,
+          fileName: metadata.fileName,
+          onDownloadError: () => {
+            setHasError(true);
+          }
+        }), hasError ? o(Errors, {
+          id: errorMessageId,
+          errors: [errorMessage]
+        }) : null]
+      });
+    }
+    if (isContentTypePresent && metadata.contentType.toLowerCase() === 'application/pdf' && isInViewport) {
+      return o("div", {
+        class: singleDocumentContainerClassName,
+        style: {
+          maxHeight
+        },
+        "aria-describedby": hasError ? errorMessageId : undefined,
+        children: [o("embed", {
+          src: fullUrl,
+          type: "application/pdf",
+          class: `fjs-${type$k}-pdf-viewer`
+        }), hasError ? o(Errors, {
+          id: errorMessageId,
+          errors: [errorMessage]
+        }) : null]
+      });
+    }
+    return o("div", {
+      class: classNames(`fjs-${type$k}-non-preview-item`, `fjs-${type$k}-single-document-container`),
+      ref: ref,
+      "aria-describedby": hasError ? errorMessageId : undefined,
+      children: [o("div", {
+        children: [o("div", {
+          class: "fjs-document-preview-title",
+          children: metadata.fileName
+        }), hasError ? o(Errors, {
+          id: errorMessageId,
+          errors: [errorMessage]
+        }) : null]
+      }), o(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 o("button", {
+      type: "button",
+      onClick: handleDownload,
+      class: classNames(`fjs-${type$k}-download-button`),
+      "aria-label": `Download ${fileName}`,
+      children: o(SvgDownload, {})
+    });
+  }
+  /**
+   *
+   * @param {import("preact").RefObject<HTMLElement>} ref
+   * @returns boolean
+   */
+  function useInViewport(ref) {
+    const [isInViewport, setIsInViewport] = h(false);
+    p(() => {
+      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.
@@ -68063,7 +68419,7 @@
   const formFields = [/* Input */
   Textfield$1, Textarea, Numberfield, Datetime, ExpressionField, FilePicker, /* Selection */
   Checkbox$1, Checklist, Radio, Select$1, Taglist, /* Presentation */
-  Text$1, Image$1, Table, Html, Spacer, Separator, /* Containers */
+  Text$1, Image$1, Table, Html, DocumentPreview, Spacer, Separator, /* Containers */
   Group$1, DynamicList, IFrame, /* Other */
   Button, Default];
   class FormFields {
@@ -68080,8 +68436,8 @@
       return this._formFields[type];
     }
   }
-  const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression', '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
@@ -69100,23 +69456,23 @@
       d: "M12 7.5H8.5V4h-1v3.5H4v1h3.5V12h1V8.5H12z"
     })));
   };
-  var _path$y;
-  function _extends$z() {
-    return _extends$z = Object.assign ? Object.assign.bind() : function (n) {
+  var _path$A;
+  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$z.apply(null, arguments);
+    }, _extends$B.apply(null, arguments);
   }
   var SvgDelete$1 = function SvgDelete(props) {
-    return /*#__PURE__*/y$1("svg", _extends$z({
+    return /*#__PURE__*/y$1("svg", _extends$B({
       xmlns: "http://www.w3.org/2000/svg",
       width: 16,
       height: 16,
       fill: "none"
-    }, props), _path$y || (_path$y = /*#__PURE__*/y$1("path", {
+    }, props), _path$A || (_path$A = /*#__PURE__*/y$1("path", {
       fill: "currentColor",
       d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"
     })));
@@ -71481,7 +71837,7 @@
       return get$1(workingData, path, {});
     }
   }
-  const schemaVersion = 17;
+  const schemaVersion = 18;
   function _e(t) {
     return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
@@ -76676,7 +77032,36 @@
     ...ExpressionField.config,
     escapeGridRender: false
   };
-  const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable, EditorExpressionField];
+  function EditorDocumentPreview(props) {
+    const {
+      field,
+      domId
+    } = props;
+    const {
+      label
+    } = field;
+    const Icon = iconsByType(field.type);
+    return o("div", {
+      class: editorFormFieldClasses(field.type),
+      children: [o(Label$3, {
+        id: domId,
+        label: label
+      }), o("div", {
+        class: "fjs-documentPreview-placeholder",
+        id: domId,
+        children: o("p", {
+          class: "fjs-documentPreview-placeholder-text",
+          children: [o(Icon, {
+            width: "32",
+            height: "24",
+            viewBox: "0 0 56 56"
+          }), "Document preview"]
+        })
+      })]
+    });
+  }
+  EditorDocumentPreview.config = DocumentPreview.config;
+  const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable, EditorExpressionField, EditorDocumentPreview];
   class EditorFormFields extends FormFields {
     constructor() {
       super();
@@ -84913,7 +85298,7 @@
     const prohibitedSegments = ['__proto__', 'prototype', 'constructor'];
     return path.split('.').some(segment => prohibitedSegments.includes(segment));
   }
-  const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table'];
+  const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table', 'documentPreview'];
   const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea', 'filepicker'];
   const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
   function hasEntryConfigured(formFieldDefinition, entryId) {
@@ -85749,7 +86134,7 @@
         return field.type === 'datetime' && (field.subtype === DATETIME_SUBTYPES.TIME || field.subtype === DATETIME_SUBTYPES.DATETIME);
       }
     });
-    const isSimplyLabled = field => {
+    const isSimplyLabeled = field => {
       return [...INPUTS.filter(input => input !== 'datetime'), ...LABELED_NON_INPUTS].includes(field.type);
     };
     entries.push({
@@ -85758,7 +86143,7 @@
       editField,
       field,
       isEdited: isEdited$6,
-      isDefaultVisible: isSimplyLabled
+      isDefaultVisible: isSimplyLabeled
     });
     return entries;
   }
@@ -85862,6 +86247,7 @@
       case 'table':
         return 'Table label';
       case 'iframe':
+      case 'documentPreview':
         return 'Title';
       default:
         return 'Field label';
@@ -85917,7 +86303,7 @@
       id,
       getValue,
       setValue,
-      validate: validate$7
+      validate: validate$a
     });
   }
@@ -85927,7 +86313,7 @@
    * @param {number|void} value
    * @returns {string|null}
    */
-  const validate$7 = value => {
+  const validate$a = value => {
     if (typeof value !== 'number') {
       return 'A number is required.';
     }
@@ -85990,7 +86376,7 @@
       setValue,
       singleLine: true,
       tooltip: getTooltip$1(),
-      validate: validate$6,
+      validate: validate$9,
       variables
     });
   }
@@ -86017,7 +86403,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  const validate$6 = value => {
+  const validate$9 = value => {
     if (!value || value.startsWith('=')) {
       return;
     }
@@ -86106,7 +86492,7 @@
     };
     return FeelTemplatingEntry({
       debounce,
-      description: description$2,
+      description: description$4,
       element: field,
       getValue,
       id,
@@ -86116,7 +86502,7 @@
       variables
     });
   }
-  const description$2 = o(k$2, {
+  const description$4 = o(k$2, {
     children: ["Supports markdown and templating.", ' ', o("a", {
       href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
       target: "_blank",
@@ -86157,13 +86543,13 @@
     };
     return FeelTemplatingEntry({
       debounce,
-      description: description$1,
+      description: description$3,
       element: field,
       getValue,
       id,
       label: 'Content',
       hostLanguage: 'html',
-      validate: validate$5,
+      validate: validate$8,
       setValue,
       variables
     });
@@ -86171,7 +86557,7 @@
   // helpers //////////
-  const description$1 = o(k$2, {
+  const description$3 = o(k$2, {
     children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', o("a", {
       href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
       target: "_blank",
@@ -86183,7 +86569,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  const validate$5 = value => {
+  const validate$8 = value => {
     // allow empty state
     if (typeof value !== 'string' || value === '') {
       return null;
@@ -87010,7 +87396,7 @@
       id,
       label: 'Input values key',
       setValue,
-      validate: validate$4
+      validate: validate$7
     });
   }
@@ -87020,7 +87406,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  const validate$4 = value => {
+  const validate$7 = value => {
     if (typeof value !== 'string' || value.length === 0) {
       return 'Must not be empty.';
     }
@@ -87455,7 +87841,7 @@
       setValue,
       singleLine: true,
       variables,
-      validate: validate$3
+      validate: validate$6
     });
   }
@@ -87465,7 +87851,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  const validate$3 = value => {
+  const validate$6 = value => {
     if (!isString$2(value) || value.length === 0) {
       return 'Must not be empty.';
     }
@@ -87567,7 +87953,7 @@
       id,
       getValue,
       setValue,
-      validate: validate$2
+      validate: validate$5
     });
   }
@@ -87577,7 +87963,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  const validate$2 = value => {
+  const validate$5 = value => {
     if (isNil(value)) {
       return null;
     }
@@ -87749,7 +88135,7 @@
       setValue,
       singleLine: true,
       variables,
-      validate: validate$1
+      validate: validate$4
     });
   }
@@ -87759,7 +88145,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  const validate$1 = value => {
+  const validate$4 = value => {
     if (!isString$2(value) || value.length === 0 || value === '=') {
       return 'Must not be empty.';
     }
@@ -87856,7 +88242,7 @@
       id,
       label: 'Key',
       setValue,
-      validate
+      validate: validate$3
     });
   }
@@ -87866,7 +88252,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  function validate(value) {
+  function validate$3(value) {
     if (!isString$2(value) || value.length === 0) {
       return 'Must not be empty.';
     }
@@ -88001,13 +88387,13 @@
       singleLine: true,
       setValue,
       variables,
-      description
+      description: description$2
     });
   }
   // helpers //////////
-  const description = o(k$2, {
+  const description$2 = o(k$2, {
     children: ["A comma-separated list of", ' ', o("a", {
       href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
       target: "_blank",
@@ -88059,6 +88445,233 @@
       variables
     });
   }
+  function DocumentsDataSourceEntry(props) {
+    const {
+      editField,
+      field
+    } = props;
+    const entries = [];
+    entries.push({
+      id: 'dataSource',
+      component: DocumentsDataSource,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$6,
+      isDefaultVisible: field => field.type === 'documentPreview'
+    });
+    return entries;
+  }
+  function DocumentsDataSource(props) {
+    const {
+      editField,
+      field,
+      id
+    } = props;
+    const debounce = useService('debounce');
+    const variables = useVariables().map(name => ({
+      name
+    }));
+    const path = ['dataSource'];
+    const getValue = () => {
+      return get$1(field, path, '');
+    };
+    const setValue = value => {
+      return editField(field, path, value);
+    };
+    const schema = `[
+  {
+    "documentId": "u123",
+    "metadata": {
+      "fileName": "Document.pdf",
+      "contentType": "application/pdf"
+    }
+  }
+]`;
+    const tooltip = o("div", {
+      children: [o("p", {
+        children: "A source is a JSON object containing metadata for a document or an array of documents."
+      }), o("p", {
+        children: "Each entry must include a document ID, name, and MIME type."
+      }), o("p", {
+        children: "Additional details are optional. The expected format is as follows:"
+      }), o("pre", {
+        children: o("code", {
+          children: schema
+        })
+      })]
+    });
+    return FeelTemplatingEntry({
+      debounce,
+      element: field,
+      getValue,
+      id,
+      label: 'Document reference',
+      feel: 'required',
+      singleLine: true,
+      setValue,
+      variables,
+      tooltip,
+      validate: validate$2
+    });
+  }
+  // helpers //////////
+  /**
+   * @param {string|undefined} value
+   * @returns {string|null}
+   */
+  const validate$2 = value => {
+    if (typeof value !== 'string' || value.length === 0) {
+      return 'The document data source is required.';
+    }
+  };
+  function EndpointKeyEntry(props) {
+    const {
+      editField,
+      field
+    } = props;
+    const entries = [];
+    entries.push({
+      id: 'endpointKey',
+      component: EndpointKey,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$6,
+      isDefaultVisible: field => field.type === 'documentPreview'
+    });
+    return entries;
+  }
+  function EndpointKey(props) {
+    const {
+      editField,
+      field,
+      id
+    } = props;
+    const debounce = useService('debounce');
+    const variables = useVariables().map(name => ({
+      name
+    }));
+    const path = ['endpointKey'];
+    const getValue = () => {
+      return get$1(field, path, '');
+    };
+    const setValue = value => {
+      return editField(field, path, value);
+    };
+    const tooltip = o("div", {
+      children: [o("p", {
+        children: "Enter a context key that generates a string with the API endpoint to download a document."
+      }), o("p", {
+        children: ["The string must contain ", o("code", {
+          children: '{ documentId }'
+        }), ", which will be replaced with the document ID from the document's reference."]
+      }), o("p", {
+        children: "If you're using the Camunda Tasklist, this variable is automatically added to the context for you."
+      }), o("p", {
+        children: ["For more details, see the", ' ', o("a", {
+          href: "https://docs.camunda.io/docs/next/components/modeler/forms/form-element-library/forms-element-library-document-preview/",
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: "Camunda documentation"
+        })]
+      })]
+    });
+    return FeelTemplatingEntry({
+      debounce,
+      element: field,
+      getValue,
+      id,
+      label: 'Document URL',
+      feel: 'required',
+      singleLine: true,
+      setValue,
+      variables,
+      description: description$1,
+      tooltip,
+      validate: validate$1
+    });
+  }
+  // helpers //////////
+  /**
+   * @param {string|undefined} value
+   * @returns {string|null}
+   */
+  const validate$1 = value => {
+    if (typeof value !== 'string' || value.length === 0) {
+      return 'The document reference is required.';
+    }
+  };
+  const description$1 = o(k$2, {
+    children: "Define an API URL for downloading a document"
+  });
+  function MaxHeightEntry(props) {
+    const {
+      editField,
+      field
+    } = props;
+    const entries = [];
+    entries.push({
+      id: 'maxHeight',
+      component: MaxHeight,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$7,
+      isDefaultVisible: field => field.type === 'documentPreview'
+    });
+    return entries;
+  }
+  function MaxHeight(props) {
+    const {
+      editField,
+      field,
+      id
+    } = props;
+    const debounce = useService('debounce');
+    const path = ['maxHeight'];
+    const getValue = () => {
+      return get$1(field, path, '');
+    };
+    const setValue = value => {
+      return editField(field, path, value);
+    };
+    return NumberFieldEntry({
+      debounce,
+      label: 'Max height of preview container',
+      element: field,
+      id,
+      getValue,
+      setValue,
+      validate,
+      description
+    });
+  }
+  // helpers //////////
+  /**
+   * @param {string|number|undefined} value
+   * @returns {string|null}
+   */
+  const validate = value => {
+    if (value === undefined || value === '') {
+      return null;
+    }
+    if (typeof value === 'string') {
+      return 'Value must be a number.';
+    }
+    if (!Number.isInteger(value)) {
+      return 'Should be an integer.';
+    }
+    if (value < 1) {
+      return 'Should be greater than zero.';
+    }
+  };
+  const description = o(k$2, {
+    children: "Documents with height that exceeds the defined value will be vertically scrollable"
+  });
   function GeneralGroup(field, editField, getService) {
     const entries = [...IdEntry({
       field,
@@ -88146,6 +88759,9 @@
     }), ...RowCountEntry({
       field,
       editField
+    }), ...DocumentsDataSourceEntry({
+      field,
+      editField
     })];
     if (entries.length === 0) {
       return null;
@@ -88597,6 +89213,9 @@
     }), ...LayouterAppearanceEntry({
       field,
       editField
+    }), ...MaxHeightEntry({
+      field,
+      editField
     })];
     if (!entries.length) {
       return null;
@@ -88760,6 +89379,20 @@
 "Expression" defines options that are populated from a FEEL expression.
 `;
+  function DownloadSettings(field, editField) {
+    const entries = [...EndpointKeyEntry({
+      field,
+      editField
+    })];
+    if (!entries.length) {
+      return null;
+    }
+    return {
+      id: 'downloadSettings',
+      label: 'Download settings',
+      entries
+    };
+  }
   class PropertiesProvider {
     constructor(propertiesPanel, injector) {
       this._injector = injector;
@@ -88795,7 +89428,7 @@
           return groups;
         }
         const getService = (type, strict = true) => this._injector.get(type, strict);
-        groups = [...groups, GeneralGroup(field, editField, getService), ...OptionsGroups(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
+        groups = [...groups, GeneralGroup(field, editField, getService), DownloadSettings(field, editField), ...OptionsGroups(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
         this._filterVisibleEntries(groups, field, getService);
         // contract: if a group has no entries or items, it should not be displayed at all