@bpmn-io/form-js-viewer 1.7.3 → 1.8.0

package/dist/index.es.js

@@ -8,12 +8,12 @@ import { createContext, createElement, Fragment as Fragment$1, render } from 'pr
 import isEqual from 'lodash/isEqual';
 import flatpickr from 'flatpickr';
 import * as React from 'preact/compat';
-import { createPortal } from 'preact/compat';
+import { useEffect as useEffect$1, createPortal } from 'preact/compat';
 import DOMPurify from 'dompurify';
 import { Injector } from 'didi';
 import { parseExpression, parseUnaryTests, evaluate, unaryTest } from 'feelin';
 import { evaluate as evaluate$1, parser, buildSimpleTree } from 'feelers';
-import showdown from 'showdown';
+import { marked } from 'marked';
 
 const getFlavouredFeelVariableNames = (feelString, feelFlavour = 'expression', options = {}) => {
   const {
@@ -581,7 +581,7 @@ function prefixId(id, formId, indexes) {
   return result;
 }
 
-const type$g = 'button';
+const type$h = 'button';
 function Button(props) {
   const {
     disabled,
@@ -593,7 +593,7 @@ function Button(props) {
     action = 'submit'
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$g),
+    class: formFieldClasses(type$h),
     children: jsx("button", {
       class: "fjs-button",
       type: action,
@@ -605,7 +605,7 @@ function Button(props) {
   });
 }
 Button.config = {
-  type: type$g,
+  type: type$h,
   keyed: false,
   label: 'Button',
   group: 'action',
@@ -1050,44 +1050,124 @@ const _getValueHash = value => {
 };
 
 /**
- * Custom hook to scroll an element into view only when it is not visible within the viewport.
+ * Wrap CSS styles with a given prefix.
+ *
+ * @param {HTMLElement} rootNode
+ * @param {string} prefix
+ *
+ * @returns {HTMLElement}
+ */
+function wrapCSSStyles(rootNode, prefix) {
+  const styleTags = rootNode.querySelectorAll('style');
+  styleTags.forEach(styleTag => {
+    const topLevelRules = extractTopLevelRules(styleTag.textContent);
+    const scopedCss = topLevelRules.map(rule => {
+      const {
+        selector,
+        styles
+      } = splitRule(rule);
+      const scopedSelector = scopeSelector(selector, prefix);
+      return `${scopedSelector} ${styles}`;
+    }).join(' ');
+    styleTag.textContent = scopedCss;
+  });
+  return rootNode;
+}
+function extractTopLevelRules(cssString) {
+  let cursor = 0;
+  let start = 0;
+  let level = 0;
+  const topLevelRules = [];
+  while (cursor < cssString.length) {
+    if (cssString[cursor] === '{') {
+      level++;
+    }
+    if (cssString[cursor] === '}') {
+      level--;
+      if (level === 0) {
+        topLevelRules.push(cssString.substring(start, cursor + 1));
+        start = cursor + 1;
+      }
+    }
+    cursor++;
+  }
+  return topLevelRules.map(rule => rule.trim());
+}
+function splitRule(rule) {
+  const firstBracket = rule.indexOf('{');
+  const selector = rule.substring(0, firstBracket);
+  const styles = rule.substring(firstBracket);
+  return {
+    selector,
+    styles
+  };
+}
+function scopeSelector(selector, prefix) {
+  return selector.split(',').map(sel => `${prefix} ${sel.trim()}`).join(', ');
+}
+function getScrollContainer(el) {
+  while (el && el !== document.body && el !== document.documentElement) {
+    if (_isElementScrollable(el)) {
+      return el;
+    }
+    el = el.parentElement;
+  }
+  if (_isElementScrollable(document.body)) {
+    return document.body;
+  } else if (_isElementScrollable(document.documentElement)) {
+    return document.documentElement;
+  }
+  return null;
+}
+function _isElementScrollable(el) {
+  const style = window.getComputedStyle(el);
+  const overflowY = style.overflowY || style.overflow;
+  return (overflowY === 'auto' || overflowY === 'scroll') && el.scrollHeight > el.clientHeight;
+}
+
+const EMPTY_OBJECT = {};
+const EMPTY_ARRAY = [];
+
+/**
+ * Custom hook to scroll an element within a scrollable container.
  *
- * @param {Object} targetRef - A ref pointing to the DOM element to scroll into view.
+ * @param {Object} scrolledElementRef - A ref pointing to the DOM element to scroll into view.
  * @param {Array} deps - An array of dependencies that trigger the effect.
- * @param {Array} flagRefs - An array of refs that are used as flags to control when to scroll.
  * @param {Object} [scrollOptions={}] - Options defining the behavior of the scrolling.
  * @param {String} [scrollOptions.align='center'] - The alignment of the element within the viewport.
  * @param {String} [scrollOptions.behavior='auto'] - The scrolling behavior.
  * @param {Number} [scrollOptions.offset=0] - An offset that is added to the scroll position.
  * @param {Boolean} [scrollOptions.scrollIfVisible=false] - Whether to scroll even if the element is visible.
+ * @param {Array} [flagRefs] - An array of refs that are used as flags to control when to scroll.
  */
-function useScrollIntoView(targetRef, deps, scrollOptions = null, flagRefs = []) {
+function useScrollIntoView(scrolledElementRef, deps, scrollOptions, flagRefs) {
+  const _scrollOptions = scrollOptions || EMPTY_OBJECT;
+  const _flagRefs = flagRefs || EMPTY_ARRAY;
   useEffect(() => {
     // return early if flags are not raised, or component is not mounted
-    if (some(flagRefs, ref => !ref.current) || !targetRef.current) {
+    if (some(_flagRefs, ref => !ref.current) || !scrolledElementRef.current) {
       return;
     }
-    for (let i = 0; i < flagRefs.length; i++) {
-      flagRefs[i].current = false;
+    for (let i = 0; i < _flagRefs.length; i++) {
+      _flagRefs[i].current = false;
     }
-    const itemToBeScrolled = targetRef.current;
-    const scrollContainer = _getNearestScrollableAncestor(itemToBeScrolled);
+    const itemToBeScrolled = scrolledElementRef.current;
+    const scrollContainer = getScrollContainer(itemToBeScrolled);
     if (!scrollContainer) {
       return;
     }
     const itemRect = itemToBeScrolled.getBoundingClientRect();
     const containerRect = scrollContainer.getBoundingClientRect();
-
-    // should scroll if visible or scrollIfVisible option is set
-    const shouldScroll = scrollOptions.scrollIfVisible || !(itemRect.top >= containerRect.top && itemRect.bottom <= containerRect.bottom);
-    if (!shouldScroll) {
-      return;
-    }
     const {
       align = 'center',
       offset = 0,
-      behavior = 'auto'
-    } = scrollOptions;
+      behavior = 'auto',
+      scrollIfVisible = false
+    } = _scrollOptions;
+    const shouldScroll = scrollIfVisible || !(itemRect.top >= containerRect.top && itemRect.bottom <= containerRect.bottom);
+    if (!shouldScroll) {
+      return;
+    }
     const topOffset = _getTopOffset(itemToBeScrolled, scrollContainer, {
       align,
       offset
@@ -1103,14 +1183,6 @@ function useScrollIntoView(targetRef, deps, scrollOptions = null, flagRefs = [])
 
 // helper //////////////////////
 
-function _getNearestScrollableAncestor(el) {
-  while (el) {
-    if (el.scrollHeight > el.clientHeight) {
-      return el;
-    }
-    el = el.parentElement;
-  }
-}
 function _getTopOffset(item, scrollContainer, options) {
   const itemRect = item.getBoundingClientRect();
   const containerRect = scrollContainer.getBoundingClientRect();
@@ -1228,6 +1300,17 @@ function useFlushDebounce(func) {
   return [debounceFunc, flushFunc];
 }
 
+function useEffectOnChange(value, callback, dependencies = []) {
+  const previousValue = usePrevious(value);
+  useEffect$1(() => {
+    if (value !== previousValue) {
+      callback();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, ...dependencies]);
+}
+
 /**
  * Template a string reactively based on form data. If the string is not a template, it is returned as is.
  * Memoised to minimize re-renders
@@ -1661,7 +1744,7 @@ function Label(props) {
   });
 }
 
-const type$f = 'checkbox';
+const type$g = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
@@ -1692,7 +1775,7 @@ function Checkbox(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$f, {
+    class: classNames(formFieldClasses(type$g, {
       errors,
       disabled,
       readonly
@@ -1727,7 +1810,7 @@ function Checkbox(props) {
   });
 }
 Checkbox.config = {
-  type: type$f,
+  type: type$g,
   keyed: true,
   label: 'Checkbox',
   group: 'selection',
@@ -1740,7 +1823,7 @@ Checkbox.config = {
   })
 };
 
-const type$e = 'checklist';
+const type$f = 'checklist';
 function Checklist(props) {
   const {
     disabled,
@@ -1794,7 +1877,7 @@ function Checklist(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$e, {
+    class: classNames(formFieldClasses(type$f, {
       errors,
       disabled,
       readonly
@@ -1838,7 +1921,7 @@ function Checklist(props) {
   });
 }
 Checklist.config = {
-  type: type$e,
+  type: type$f,
   keyed: true,
   label: 'Checkbox group',
   group: 'selection',
@@ -1881,6 +1964,7 @@ function FormField(props) {
   if (!FormFieldComponent) {
     throw new Error(`cannot render field <${field.type}>`);
   }
+  const fieldConfig = FormFieldComponent.config;
   const valuePath = useMemo(() => pathRegistry.getValuePath(field, {
     indexes
   }), [field, indexes, pathRegistry]);
@@ -1933,11 +2017,11 @@ function FormField(props) {
     setInitialValidationTrigger(false);
 
     // add indexes of the keyed field to the update, if any
-    onChange(FormFieldComponent.config.keyed ? {
+    onChange(fieldConfig.keyed ? {
       ...update,
       indexes
     } : update);
-  }, [onChange, FormFieldComponent.config.keyed, indexes]);
+  }, [onChange, fieldConfig.keyed, indexes]);
   if (hidden) {
     return jsx(Hidden, {
       field: field
@@ -1945,23 +2029,27 @@ function FormField(props) {
   }
   const domId = `${prefixId(field.id, formId, indexes)}`;
   const fieldErrors = get(errors, [field.id, ...Object.values(indexes || {})]) || [];
+  const formFieldElement = jsx(FormFieldComponent, {
+    ...props,
+    disabled: disabled,
+    errors: fieldErrors,
+    domId: domId,
+    onChange: disabled || readonly ? noop$1 : onChangeIndexed,
+    onBlur: disabled || readonly ? noop$1 : onBlur,
+    onFocus: disabled || readonly ? noop$1 : onFocus,
+    readonly: readonly,
+    value: value
+  });
+  if (fieldConfig.escapeGridRender) {
+    return formFieldElement;
+  }
   return jsx(Column, {
     field: field,
     class: gridColumnClasses(field),
     children: jsx(Element, {
       class: "fjs-element",
       field: field,
-      children: jsx(FormFieldComponent, {
-        ...props,
-        disabled: disabled,
-        errors: fieldErrors,
-        domId: domId,
-        onChange: disabled || readonly ? noop$1 : onChangeIndexed,
-        onBlur: disabled || readonly ? noop$1 : onBlur,
-        onFocus: disabled || readonly ? noop$1 : onFocus,
-        readonly: readonly,
-        value: value
-      })
+      children: formFieldElement
     })
   });
 }
@@ -2121,16 +2209,16 @@ Default.config = {
   })
 };
 
-var _path$v;
-function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+var _path$w;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 var SvgCalendar = function SvgCalendar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
+  return /*#__PURE__*/React.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     width: 14,
     height: 15,
     fill: "none",
     viewBox: "0 0 28 30"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__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-2v2ZM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7Zm-5 4v17h24V11H2Z",
@@ -2394,16 +2482,16 @@ function Datepicker(props) {
   });
 }
 
-var _path$u, _path2$5;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+var _path$v, _path2$5;
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 var SvgClock = function SvgClock(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$v({
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none",
     viewBox: "0 0 28 29"
-  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M13 14.41 18.59 20 20 18.59l-5-5.01V5h-2v9.41Z"
   })), _path2$5 || (_path2$5 = /*#__PURE__*/React.createElement("path", {
@@ -2675,7 +2763,7 @@ function Timepicker(props) {
   });
 }
 
-const type$d = 'datetime';
+const type$e = 'datetime';
 function Datetime(props) {
   const {
     disabled,
@@ -2847,7 +2935,7 @@ function Datetime(props) {
     'aria-describedby': [descriptionId, errorMessageId].join(' ')
   };
   return jsxs("div", {
-    class: formFieldClasses(type$d, {
+    class: formFieldClasses(type$e, {
       errors: allErrors,
       disabled,
       readonly
@@ -2872,7 +2960,7 @@ function Datetime(props) {
   });
 }
 Datetime.config = {
-  type: type$d,
+  type: type$e,
   keyed: true,
   label: 'Date time',
   group: 'basic-input',
@@ -2932,7 +3020,7 @@ Group.config = {
   })
 };
 
-const type$c = 'iframe';
+const type$d = 'iframe';
 const DEFAULT_HEIGHT = 300;
 function IFrame(props) {
   const {
@@ -2962,7 +3050,7 @@ function IFrame(props) {
     setIframeRefresh(count => count + 1);
   }, [sandbox, allow]);
   return jsxs("div", {
-    class: formFieldClasses(type$c, {
+    class: formFieldClasses(type$d, {
       disabled,
       readonly
     }),
@@ -2997,7 +3085,7 @@ function IFramePlaceholder(props) {
   });
 }
 IFrame.config = {
-  type: type$c,
+  type: type$d,
   keyed: false,
   label: 'iFrame',
   group: 'container',
@@ -3009,44 +3097,44 @@ IFrame.config = {
   })
 };
 
-var _path$t;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+var _path$u;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 var SvgButton = function SvgButton(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$u({
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
     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-3h36zm-9 8.889H18v2.222h18v-2.222z"
   })));
 };
 var ButtonIcon = SvgButton;
 
-var _path$s;
-function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
+var _path$t;
+function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 var SvgCheckbox = function SvgCheckbox(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$t({
+  return /*#__PURE__*/React.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__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-2zm-9 14-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
   })));
 };
 var CheckboxIcon = SvgCheckbox;
 
-var _path$r;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+var _path$s;
+function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 var SvgChecklist = function SvgChecklist(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M14.35 24.75H19v4.65h-4.65v-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.414ZM14.35 37.05H19v4.65h-4.65v-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.414ZM14.35 12.45H19v4.65h-4.65v-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.414Zm12.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.293Zm0 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.293Zm0-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.293Z",
@@ -3055,15 +3143,15 @@ var SvgChecklist = function SvgChecklist(props) {
 };
 var ChecklistIcon = SvgChecklist;
 
-var _path$q, _path2$4, _path3;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+var _path$r, _path2$4, _path3;
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 var SvgDatetime = function SvgDatetime(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
+  return /*#__PURE__*/React.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "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.06z"
   })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
@@ -3075,15 +3163,15 @@ var SvgDatetime = function SvgDatetime(props) {
 };
 var DatetimeIcon = SvgDatetime;
 
-var _path$p, _path2$3;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+var _path$q, _path2$3;
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 var SvgTaglist = function SvgTaglist(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__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-3h36Zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1Z"
   })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
@@ -3093,9 +3181,9 @@ var SvgTaglist = function SvgTaglist(props) {
 var TaglistIcon = SvgTaglist;
 
 var _rect, _rect2, _rect3;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 var SvgForm = function SvgForm(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54
@@ -3121,104 +3209,104 @@ var SvgForm = function SvgForm(props) {
 };
 var FormIcon = SvgForm;
 
-var _path$o;
-function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+var _path$p;
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 var SvgGroup = function SvgGroup(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
+  return /*#__PURE__*/React.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M8 33v5a1 1 0 0 0 1 1h4v2H9a3 3 0 0 1-3-3v-5h2Zm18 6v2H15v-2h11Zm13 0v2H28v-2h11Zm9-6v5a3 3 0 0 1-3 3h-4v-2h4a1 1 0 0 0 .993-.883L46 38v-5h2ZM8 22v9H6v-9h2Zm40 0v9h-2v-9h2Zm-35-9v2H9a1 1 0 0 0-.993.883L8 16v4H6v-4a3 3 0 0 1 3-3h4Zm32 0a3 3 0 0 1 3 3v4h-2v-4a1 1 0 0 0-.883-.993L45 15h-4v-2h4Zm-6 0v2H28v-2h11Zm-13 0v2H15v-2h11Z"
   })));
 };
 var GroupIcon = SvgGroup;
 
-var _path$n;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+var _path$o;
+function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 var SvgNumber = function SvgNumber(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$n({
+  return /*#__PURE__*/React.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
   })));
 };
 var NumberIcon = SvgNumber;
 
-var _path$m;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+var _path$n;
+function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 var SvgRadio = function SvgRadio(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
+  return /*#__PURE__*/React.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
     d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16z"
   })));
 };
 var RadioIcon = SvgRadio;
 
-var _path$l;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+var _path$m;
+function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 var SvgSelect = function SvgSelect(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
+  return /*#__PURE__*/React.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zm-12 7h9l-4.5 6-4.5-6z"
   })));
 };
 var SelectIcon = SvgSelect;
 
-var _path$k;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+var _path$l;
+function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 var SvgSeparator = function SvgSeparator(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M26.293 16.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 18.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4ZM9 26h36v2H9v-2Zm13.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.414Z"
   })));
 };
 var SeparatorIcon = SvgSeparator;
 
-var _path$j;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+var _path$k;
+function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 var SvgSpacer = function SvgSpacer(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M9 15v2h36v-2H9Zm0 22v2h36v-2H9Zm17.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.414l4-4Zm-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.414Z"
   })));
 };
 var SpacerIcon = SvgSpacer;
 
-var _path$i;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+var _path$j;
+function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 var SvgDynamicList = function SvgDynamicList(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M2.7 43.296v1.254c0 .746.604 1.35 1.35 1.35h1.275v-1.795c.049.14.075.29.075.445v-1.254h-.075V43.2H4.05c.177 0 .347.034.502.096H2.7Zm2.7-2.507v-2.507H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.015V23.24H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.014V13.21H2.7v2.507h2.7Zm-2.7-5.014h1.852a1.346 1.346 0 0 1-.502.096h1.275v-.096H5.4V9.45c0 .156-.026.306-.075.445V8.1H4.05A1.35 1.35 0 0 0 2.7 9.45v1.254Zm5.175.096h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1-2.7v1.795a1.348 1.348 0 0 1-.075-.445v1.254h.075v.096h1.275c-.177 0-.347-.034-.502-.096H51.3V9.45a1.35 1.35 0 0 0-1.35-1.35h-1.275Zm-.075 5.11v2.508h2.7V13.21h-2.7Zm0 5.015v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7V23.24h-2.7Zm0 5.015v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7v-2.507h-2.7Zm2.7 5.014h-1.852c.155-.062.325-.096.502-.096h-1.275v.096H48.6v1.254c0-.156.026-.305.075-.445V45.9h1.275a1.35 1.35 0 0 0 1.35-1.35v-1.254Zm-5.175-.096h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7ZM16.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.05h1.35Zm0 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.35Zm27 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.05V21.6Zm-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.35ZM43.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.7V37.8Zm-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.05h1.35Z",
@@ -3227,29 +3315,29 @@ var SvgDynamicList = function SvgDynamicList(props) {
 };
 var DynamicListIcon = SvgDynamicList;
 
-var _path$h;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+var _path$i;
+function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 var SvgText = function SvgText(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
     d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 0 1 2.4.14 3.42 3.42 0 0 1 1.41.55 3.47 3.47 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.63 3.63 0 0 1-1.09 1.4 3.89 3.89 0 0 1-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 0 0 1.1-.49 1.41 1.41 0 0 0 .41-1 1.49 1.49 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.52 11.52 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.69 1.69 0 0 0-.86-.62 9.28 9.28 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.09 7.09 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.31 5.31 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.21z"
   })));
 };
 var TextIcon = SvgText;
 
-var _path$g;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+var _path$h;
+function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 var SvgHtml = function SvgHtml(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "none"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__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.039h40.016Zm0 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.013ZM14.934 26.055v-3.78h2.194v9.45h-2.194v-3.78h-3.29v3.78H9.45v-9.45h2.194v3.78h3.29Zm4.388-1.89h2.194v7.56h2.193v-7.56h2.194v-1.89h-6.581v1.89Zm14.26-1.89h2.193v9.45h-2.194V25.11l-1.645 3.78-1.645-3.78v6.615h-2.194v-9.45h2.194l1.645 3.78 1.645-3.78Zm4.387 0h2.194v7.56h4.387v1.89h-6.581v-9.45Z",
@@ -3258,6 +3346,23 @@ var SvgHtml = function SvgHtml(props) {
 };
 var HTMLIcon = SvgHtml;
 
+var _path$g;
+function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+var SvgExpressionField = function SvgExpressionField(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 54,
+    height: 54,
+    fill: "none"
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    fillRule: "evenodd",
+    d: "M12.78 16.2v6.75c0 1.619-.635 3.059-1.618 4.05.983.991 1.618 2.431 1.618 4.05v6.75h3.51v2.7h-3.51c-1.289 0-2.34-1.213-2.34-2.7v-6.75c0-1.487-1.051-2.7-2.34-2.7v-2.7c1.289 0 2.34-1.213 2.34-2.7V16.2c0-1.487 1.051-2.7 2.34-2.7h3.51v2.7h-3.51Zm30.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.7ZM21.8 34.531c.467-.379.787-.965.959-1.758l1.788-8.34h1.585l.387-1.828h-1.585l.405-1.878h1.585l.387-1.827H25.69c-.847 0-1.505.19-1.972.569-.454.379-.768.965-.94 1.758l-.294 1.378H21.34l-.387 1.827h1.142l-1.898 8.841h-1.585l-.387 1.827h1.622c.848 0 1.499-.19 1.953-.569Zm7.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.599l1.696 4.24Z",
+    clipRule: "evenodd"
+  })));
+};
+var ExpressionFieldIcon = SvgExpressionField;
+
 var _path$f;
 function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 var SvgTextfield = function SvgTextfield(props) {
@@ -3355,6 +3460,7 @@ const iconsByType = type => {
     iframe: IFrameIcon,
     image: ImageIcon,
     number: NumberIcon,
+    expression: ExpressionFieldIcon,
     radio: RadioIcon,
     select: SelectIcon,
     separator: SeparatorIcon,
@@ -3370,7 +3476,7 @@ const iconsByType = type => {
   }[type];
 };
 
-const type$b = 'image';
+const type$c = 'image';
 function Image(props) {
   const {
     field
@@ -3392,7 +3498,7 @@ function Image(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$b),
+    class: formFieldClasses(type$c),
     children: [safeSource && jsx("div", {
       class: "fjs-image-container",
       children: jsx("img", {
@@ -3416,7 +3522,7 @@ function Image(props) {
   });
 }
 Image.config = {
-  type: type$b,
+  type: type$c,
   keyed: false,
   label: 'Image view',
   group: 'presentation',
@@ -3508,7 +3614,7 @@ function isNullEquivalentValue(value) {
   return value === undefined || value === null || value === '';
 }
 
-const type$a = 'number';
+const type$b = 'number';
 function Numberfield(props) {
   const {
     disabled,
@@ -3653,7 +3759,7 @@ function Numberfield(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$a, {
+    class: formFieldClasses(type$b, {
       errors,
       disabled,
       readonly
@@ -3730,7 +3836,7 @@ function Numberfield(props) {
   });
 }
 Numberfield.config = {
-  type: type$a,
+  type: type$b,
   keyed: true,
   label: 'Number',
   group: 'basic-input',
@@ -3750,7 +3856,7 @@ Numberfield.config = {
   })
 };
 
-const type$9 = 'radio';
+const type$a = 'radio';
 function Radio(props) {
   const {
     disabled,
@@ -3803,7 +3909,7 @@ function Radio(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$9, {
+    class: formFieldClasses(type$a, {
       errors,
       disabled,
       readonly
@@ -3847,7 +3953,7 @@ function Radio(props) {
   });
 }
 Radio.config = {
-  type: type$9,
+  type: type$a,
   keyed: true,
   label: 'Radio group',
   group: 'selection',
@@ -4160,7 +4266,7 @@ function SimpleSelect(props) {
   });
 }
 
-const type$8 = 'select';
+const type$9 = 'select';
 function Select(props) {
   const {
     disabled,
@@ -4199,7 +4305,7 @@ function Select(props) {
     'aria-describedby': [descriptionId, errorMessageId].join(' ')
   };
   return jsxs("div", {
-    class: formFieldClasses(type$8, {
+    class: formFieldClasses(type$9, {
       errors,
       disabled,
       readonly
@@ -4228,7 +4334,7 @@ function Select(props) {
   });
 }
 Select.config = {
-  type: type$8,
+  type: type$9,
   keyed: true,
   label: 'Select',
   group: 'selection',
@@ -4237,15 +4343,15 @@ Select.config = {
   create: createEmptyOptions
 };
 
-const type$7 = 'separator';
+const type$8 = 'separator';
 function Separator() {
   return jsx("div", {
-    class: formFieldClasses(type$7),
+    class: formFieldClasses(type$8),
     children: jsx("hr", {})
   });
 }
 Separator.config = {
-  type: type$7,
+  type: type$8,
   keyed: false,
   label: 'Separator',
   group: 'presentation',
@@ -4254,7 +4360,7 @@ Separator.config = {
   })
 };
 
-const type$6 = 'spacer';
+const type$7 = 'spacer';
 function Spacer(props) {
   const {
     field
@@ -4263,14 +4369,14 @@ function Spacer(props) {
     height = 60
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$6),
+    class: formFieldClasses(type$7),
     style: {
       height: height
     }
   });
 }
 Spacer.config = {
-  type: type$6,
+  type: type$7,
   keyed: false,
   label: 'Spacer',
   group: 'presentation',
@@ -4351,7 +4457,7 @@ function SkipLink(props) {
   });
 }
 
-const type$5 = 'taglist';
+const type$6 = 'taglist';
 function Taglist(props) {
   const {
     disabled,
@@ -4495,7 +4601,7 @@ function Taglist(props) {
   const errorMessageId = `${domId}-error-message`;
   return jsxs("div", {
     ref: focusScopeRef,
-    class: formFieldClasses(type$5, {
+    class: formFieldClasses(type$6, {
       errors,
       disabled,
       readonly
@@ -4580,7 +4686,7 @@ function Taglist(props) {
   });
 }
 Taglist.config = {
-  type: type$5,
+  type: type$6,
   keyed: true,
   label: 'Tag list',
   group: 'selection',
@@ -4702,7 +4808,7 @@ function isValidAttribute(lcTag, lcName, value) {
   return true;
 }
 
-const type$4 = 'text';
+const type$5 = 'text';
 function Text(props) {
   const form = useService('form');
   const {
@@ -4749,12 +4855,12 @@ function Text(props) {
     sanitizeStyleTags: false
   });
   return jsx("div", {
-    class: formFieldClasses(type$4),
+    class: formFieldClasses(type$5),
     dangerouslySetInnerHTML: dangerouslySetInnerHTML
   });
 }
 Text.config = {
-  type: type$4,
+  type: type$5,
   keyed: false,
   label: 'Text view',
   group: 'presentation',
@@ -4764,64 +4870,7 @@ Text.config = {
   })
 };
 
-/**
- * Wrap CSS styles with a given prefix.
- *
- * @param {HTMLElement} rootNode
- * @param {string} prefix
- *
- * @returns {HTMLElement}
- */
-function wrapCSSStyles(rootNode, prefix) {
-  const styleTags = rootNode.querySelectorAll('style');
-  styleTags.forEach(styleTag => {
-    const topLevelRules = extractTopLevelRules(styleTag.textContent);
-    const scopedCss = topLevelRules.map(rule => {
-      const {
-        selector,
-        styles
-      } = splitRule(rule);
-      const scopedSelector = scopeSelector(selector, prefix);
-      return `${scopedSelector} ${styles}`;
-    }).join(' ');
-    styleTag.textContent = scopedCss;
-  });
-  return rootNode;
-}
-function extractTopLevelRules(cssString) {
-  let cursor = 0;
-  let start = 0;
-  let level = 0;
-  const topLevelRules = [];
-  while (cursor < cssString.length) {
-    if (cssString[cursor] === '{') {
-      level++;
-    }
-    if (cssString[cursor] === '}') {
-      level--;
-      if (level === 0) {
-        topLevelRules.push(cssString.substring(start, cursor + 1));
-        start = cursor + 1;
-      }
-    }
-    cursor++;
-  }
-  return topLevelRules.map(rule => rule.trim());
-}
-function splitRule(rule) {
-  const firstBracket = rule.indexOf('{');
-  const selector = rule.substring(0, firstBracket);
-  const styles = rule.substring(firstBracket);
-  return {
-    selector,
-    styles
-  };
-}
-function scopeSelector(selector, prefix) {
-  return selector.split(',').map(sel => `${prefix} ${sel.trim()}`).join(', ');
-}
-
-const type$3 = 'html';
+const type$4 = 'html';
 function Html(props) {
   const form = useService('form');
   const {
@@ -4872,12 +4921,12 @@ function Html(props) {
     sanitizeStyleTags: false
   });
   return jsx("div", {
-    class: classNames(formFieldClasses(type$3), styleScope),
+    class: classNames(formFieldClasses(type$4), styleScope),
     dangerouslySetInnerHTML: dangerouslySetInnerHTML
   });
 }
 Html.config = {
-  type: type$3,
+  type: type$4,
   keyed: false,
   label: 'HTML',
   group: 'presentation',
@@ -4887,6 +4936,51 @@ Html.config = {
   })
 };
 
+const type$3 = 'expression';
+function ExpressionField(props) {
+  const {
+    field,
+    onChange
+  } = props;
+  const {
+    computeOn,
+    expression
+  } = field;
+  const evaluation = useExpressionEvaluation(expression);
+  const evaluationMemo = useDeepCompareMemoize(evaluation);
+  const eventBus = useService('eventBus');
+  const sendValue = useCallback(() => {
+    onChange && onChange({
+      field,
+      value: evaluationMemo
+    });
+  }, [field, evaluationMemo, onChange]);
+  useEffectOnChange(evaluationMemo, () => {
+    if (computeOn !== 'change') {
+      return;
+    }
+    sendValue();
+  }, [computeOn, sendValue]);
+  useEffect(() => {
+    if (computeOn === 'presubmit') {
+      eventBus.on('presubmit', sendValue);
+      return () => eventBus.off('presubmit', sendValue);
+    }
+  }, [computeOn, sendValue, eventBus]);
+  return null;
+}
+ExpressionField.config = {
+  type: type$3,
+  label: 'Expression',
+  group: 'basic-input',
+  keyed: true,
+  escapeGridRender: true,
+  create: (options = {}) => ({
+    computeOn: 'change',
+    ...options
+  })
+};
+
 const type$2 = 'textfield';
 function Textfield(props) {
   const {
@@ -5206,7 +5300,7 @@ function Table(props) {
     key
   }) => key);
   const evaluatedDataSource = useExpressionEvaluation(dataSource);
-  const data = Array.isArray(evaluatedDataSource) ? evaluatedDataSource : [];
+  const data = Array.isArray(evaluatedDataSource) ? evaluatedDataSource.filter(i => i !== undefined) : [];
   const sortedData = sortBy === null ? data : sortByColumn(data, sortBy.key, sortBy.direction);
 
   /** @type {unknown[][]} */
@@ -5620,7 +5714,7 @@ function FormComponent(props) {
   });
 }
 
-const formFields = [Button, Checkbox, Checklist, Default, DynamicList, Numberfield, Datetime, Radio, Select, Taglist, Textfield, Textarea, Text, Image, Table, Html, Spacer, Separator, Group, DynamicList, IFrame];
+const formFields = [Button, Checkbox, Checklist, Default, DynamicList, Numberfield, Datetime, Radio, Select, Taglist, Textfield, Textarea, ExpressionField, Text, Image, Table, Html, Spacer, Separator, Group, DynamicList, IFrame];
 
 class FormFields {
   constructor() {
@@ -5944,13 +6038,7 @@ const ExpressionLanguageModule = {
   conditionChecker: ['type', ConditionChecker]
 };
 
-// bootstrap showdown to support github flavored markdown
-showdown.setFlavor('github');
 class MarkdownRenderer {
-  constructor() {
-    this._converter = new showdown.Converter();
-  }
-
   /**
    * Render markdown to HTML.
    *
@@ -5959,7 +6047,11 @@ class MarkdownRenderer {
    * @returns {string} HTML
    */
   render(markdown) {
-    return this._converter.makeHtml(markdown);
+    // @ts-expect-error
+    return marked.parse(markdown, {
+      gfm: true,
+      breaks: true
+    });
   }
 }
 MarkdownRenderer.$inject = [];
@@ -8301,6 +8393,7 @@ class Form {
     if (properties.readOnly || properties.disabled) {
       throw new Error('form is read-only');
     }
+    this._emit('presubmit');
     const data = this._getSubmitData();
     const errors = this.validate();
     const result = {
@@ -8697,7 +8790,7 @@ class Form {
   }
 }
 
-const schemaVersion = 15;
+const schemaVersion = 16;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -8722,5 +8815,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, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext, Group, Html, IFrame, Image, Importer, Label, LocalExpressionContext, MINUTES_IN_DAY, MarkdownRenderer, MarkdownRendererModule, Numberfield, OPTIONS_SOURCES, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, OPTIONS_SOURCES_PATHS, OPTIONS_SOURCE_DEFAULT, PathRegistry, Radio, RenderModule, RepeatRenderManager, RepeatRenderModule, SANDBOX_ATTRIBUTE, SECURITY_ATTRIBUTES_DEFINITIONS, Select, Separator, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Table, Taglist, Text, Textarea, Textfield, ViewerCommands, ViewerCommandsModule, buildExpressionContext, clone, createForm, createFormContainer, createInjector, escapeHTML, formFields, generateIdForType, generateIndexForType, getAncestryList, getOptionsSource, getSchemaVariables, hasEqualValue, iconsByType, isRequired, pathParse, pathsEqual, runRecursively, sanitizeDateTimePickerValue, sanitizeHTML, sanitizeIFrameSource, sanitizeImageSource, sanitizeMultiSelectValue, sanitizeSingleSelectValue, schemaVersion, useExpressionEvaluation, useSingleLineTemplateEvaluation, useTemplateEvaluation };
+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, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext, Group, Html, IFrame, Image, Importer, Label, LocalExpressionContext, MINUTES_IN_DAY, MarkdownRenderer, MarkdownRendererModule, Numberfield, OPTIONS_SOURCES, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, OPTIONS_SOURCES_PATHS, OPTIONS_SOURCE_DEFAULT, PathRegistry, Radio, RenderModule, RepeatRenderManager, RepeatRenderModule, SANDBOX_ATTRIBUTE, SECURITY_ATTRIBUTES_DEFINITIONS, Select, Separator, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Table, Taglist, Text, Textarea, Textfield, ViewerCommands, ViewerCommandsModule, buildExpressionContext, clone, createForm, createFormContainer, createInjector, escapeHTML, formFields, generateIdForType, generateIndexForType, getAncestryList, getOptionsSource, getSchemaVariables, getScrollContainer, hasEqualValue, iconsByType, isRequired, pathParse, pathsEqual, runRecursively, sanitizeDateTimePickerValue, sanitizeHTML, sanitizeIFrameSource, sanitizeImageSource, sanitizeMultiSelectValue, sanitizeSingleSelectValue, schemaVersion, useExpressionEvaluation, useSingleLineTemplateEvaluation, useTemplateEvaluation, wrapCSSStyles };
 //# sourceMappingURL=index.es.js.map