@bpmn-io/form-js-viewer 0.10.1 → 0.12.0

package/dist/index.cjs

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var Ids = require('ids');
 var minDash = require('min-dash');
 var feelin = require('feelin');
@@ -16,19 +14,9 @@ var flatpickr = require('flatpickr');
 var Markup = require('preact-markup');
 var didi = require('didi');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var Ids__default = /*#__PURE__*/_interopDefaultLegacy(Ids);
-var Big__default = /*#__PURE__*/_interopDefaultLegacy(Big);
-var snarkdown__default = /*#__PURE__*/_interopDefaultLegacy(snarkdown);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
-var Markup__default = /*#__PURE__*/_interopDefaultLegacy(Markup);
-
-/**
- * @typedef {object} Condition
- * @property {string} [hide]
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
  */
 
 class ConditionChecker {
@@ -37,11 +25,11 @@ class ConditionChecker {
     this._eventBus = eventBus;
   }
 
-  /**
-   * For given data, remove properties based on condition.
-   *
-   * @param {Object<string, any>} properties
-   * @param {Object<string, any>} data
+  /**
+   * For given data, remove properties based on condition.
+   *
+   * @param {Object<string, any>} properties
+   * @param {Object<string, any>} data
    */
   applyConditions(properties, data = {}) {
     const conditions = this._getConditions();
@@ -60,13 +48,13 @@ class ConditionChecker {
     return newProperties;
   }
 
-  /**
-   * Check if given condition is met. Returns null for invalid/missing conditions.
-   *
-   * @param {string} condition
-   * @param {import('../types').Data} [data]
-   *
-   * @returns {boolean|null}
+  /**
+   * Check if given condition is met. Returns null for invalid/missing conditions.
+   *
+   * @param {string} condition
+   * @param {import('../types').Data} [data]
+   *
+   * @returns {boolean|null}
    */
   check(condition, data = {}) {
     if (!condition) {
@@ -87,12 +75,12 @@ class ConditionChecker {
     }
   }
 
-  /**
-   * Check if hide condition is met.
-   *
-   * @param {Condition} condition
-   * @param {Object<string, any>} data
-   * @returns {boolean}
+  /**
+   * Check if hide condition is met.
+   *
+   * @param {Condition} condition
+   * @param {Object<string, any>} data
+   * @returns {boolean}
    */
   _checkHideCondition(condition, data) {
     if (!condition.hide) {
@@ -102,13 +90,13 @@ class ConditionChecker {
     return result === true;
   }
 
-  /**
-   * Evaluate an expression.
-   *
-   * @param {string} expression
-   * @param {import('../types').Data} [data]
-   *
-   * @returns {any}
+  /**
+   * Evaluate an expression.
+   *
+   * @param {string} expression
+   * @param {import('../types').Data} [data]
+   *
+   * @returns {any}
    */
   evaluate(expression, data = {}) {
     if (!expression) {
@@ -580,7 +568,7 @@ function invokeFunction(fn, args) {
 }
 
 function countDecimals(number) {
-  const num = Big__default['default'](number);
+  const num = Big(number);
   if (num.toString() === num.toFixed(0)) return 0;
   return num.toFixed().split('.')[1].length || 0;
 }
@@ -616,7 +604,7 @@ class Validator {
     if (type === 'number') {
       const {
         decimalDigits,
-        step
+        increment
       } = field;
       if (value === 'NaN') {
         errors = [...errors, 'Value is not a number.'];
@@ -624,13 +612,13 @@ class Validator {
         if (decimalDigits >= 0 && countDecimals(value) > decimalDigits) {
           errors = [...errors, 'Value is expected to ' + (decimalDigits === 0 ? 'be an integer' : `have at most ${decimalDigits} decimal digit${decimalDigits > 1 ? 's' : ''}`) + '.'];
         }
-        if (step) {
-          const bigValue = Big__default['default'](value);
-          const bigStep = Big__default['default'](step);
-          const offset = bigValue.mod(bigStep);
+        if (increment) {
+          const bigValue = Big(value);
+          const bigIncrement = Big(increment);
+          const offset = bigValue.mod(bigIncrement);
           if (offset.cmp(0) !== 0) {
             const previousValue = bigValue.minus(offset);
-            const nextValue = previousValue.plus(bigStep);
+            const nextValue = previousValue.plus(bigIncrement);
             errors = [...errors, `Please select a valid value, the two nearest valid values are ${previousValue} and ${nextValue}.`];
           }
         }
@@ -645,10 +633,10 @@ class Validator {
     if (validate.required && (minDash.isNil(value) || value === '')) {
       errors = [...errors, 'Field is required.'];
     }
-    if ('min' in validate && value && value < validate.min) {
+    if ('min' in validate && (value || value === 0) && value < validate.min) {
       errors = [...errors, `Field must have minimum value of ${validate.min}.`];
     }
-    if ('max' in validate && value && value > validate.max) {
+    if ('max' in validate && (value || value === 0) && value > validate.max) {
       errors = [...errors, `Field must have maximum value of ${validate.max}.`];
     }
     if ('minLength' in validate && value && value.trim().length < validate.minLength) {
@@ -673,8 +661,8 @@ class FormFieldRegistry {
     this._eventBus = eventBus;
     this._formFields = {};
     eventBus.on('form.clear', () => this.clear());
-    this._ids = new Ids__default['default']([32, 36, 1]);
-    this._keys = new Ids__default['default']([32, 36, 1]);
+    this._ids = new Ids([32, 36, 1]);
+    this._keys = new Ids([32, 36, 1]);
   }
   add(formField) {
     const {
@@ -717,11 +705,11 @@ class FormFieldRegistry {
 }
 FormFieldRegistry.$inject = ['eventBus'];
 
-/**
- * Retrieve variable names from given FEEL unary test.
- *
- * @param {string} unaryTest
- * @returns {string[]}
+/**
+ * Retrieve variable names from given FEEL unary test.
+ *
+ * @param {string} unaryTest
+ * @returns {string[]}
  */
 function getVariableNames(unaryTest) {
   const tree = feelin.parseUnaryTests(unaryTest);
@@ -736,11 +724,11 @@ function getVariableNames(unaryTest) {
   return Array.from(variables);
 }
 
-/**
- * Retrieve variable names from given FEEL expression.
- *
- * @param {string} expression
- * @returns {string[]}
+/**
+ * Retrieve variable names from given FEEL expression.
+ *
+ * @param {string} expression
+ * @returns {string[]}
  */
 function getExpressionVariableNames(expression) {
   const tree = feelin.parseExpressions(expression);
@@ -754,7 +742,7 @@ function getExpressionVariableNames(expression) {
   } while (cursor.next());
   return Array.from(variables);
 }
-function isExpression$2(value) {
+function isExpression$1(value) {
   return minDash.isString(value) && value.startsWith('=');
 }
 
@@ -805,7 +793,10 @@ const VALUES_SOURCES_PATHS = {
   [VALUES_SOURCES.INPUT]: ['valuesKey']
 };
 const VALUES_SOURCES_DEFAULTS = {
-  [VALUES_SOURCES.STATIC]: [],
+  [VALUES_SOURCES.STATIC]: [{
+    label: 'Value',
+    value: 'value'
+  }],
   [VALUES_SOURCES.INPUT]: ''
 };
 
@@ -826,10 +817,10 @@ function createInjector(bootstrapModules) {
   return injector;
 }
 
-/**
- * @param {string?} prefix
- *
- * @returns Element
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
  */
 function createFormContainer(prefix = 'fjs') {
   const container = document.createElement('div');
@@ -874,22 +865,22 @@ function generateIdForType(type) {
   return `${type}${generateIndexForType(type)}`;
 }
 
-/**
- * @template T
- * @param {T} data
- * @param {(this: any, key: string, value: any) => any} [replacer]
- * @return {T}
+/**
+ * @template T
+ * @param {T} data
+ * @param {(this: any, key: string, value: any) => any} [replacer]
+ * @return {T}
  */
 function clone(data, replacer) {
   return JSON.parse(JSON.stringify(data, replacer));
 }
 
-/**
- * Parse the schema for input variables a form might make use of
- *
- * @param {any} schema
- *
- * @return {string[]}
+/**
+ * Parse the schema for input variables a form might make use of
+ *
+ * @param {any} schema
+ *
+ * @return {string[]}
  */
 function getSchemaVariables(schema) {
   if (!schema.components) {
@@ -931,32 +922,26 @@ function getSchemaVariables(schema) {
   return Array.from(new Set(variables));
 }
 
-// helper ///////////////
-
-function isExpression$1(value) {
-  return minDash.isString(value) && value.startsWith('=');
-}
-
 class Importer {
-  /**
-   * @constructor
-   * @param { import('../core').FormFieldRegistry } formFieldRegistry
-   * @param { import('../render/FormFields').default } formFields
+  /**
+   * @constructor
+   * @param { import('../core').FormFieldRegistry } formFieldRegistry
+   * @param { import('../render/FormFields').default } formFields
    */
   constructor(formFieldRegistry, formFields) {
     this._formFieldRegistry = formFieldRegistry;
     this._formFields = formFields;
   }
 
-  /**
-   * Import schema adding `id`, `_parent` and `_path`
-   * information to each field and adding it to the
-   * form field registry.
-   *
-   * @param {any} schema
-   * @param {any} [data]
-   *
-   * @return { { warnings: Array<any>, schema: any, data: any } }
+  /**
+   * Import schema adding `id`, `_parent` and `_path`
+   * information to each field and adding it to the
+   * form field registry.
+   *
+   * @param {any} schema
+   * @param {any} [data]
+   *
+   * @return { { warnings: Array<any>, schema: any, data: any } }
    */
   importSchema(schema, data = {}) {
     // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
@@ -975,11 +960,11 @@ class Importer {
     }
   }
 
-  /**
-   * @param {any} formField
-   * @param {string} [parentId]
-   *
-   * @return {any} importedField
+  /**
+   * @param {any} formField
+   * @param {string} [parentId]
+   *
+   * @return {any} importedField
    */
   importFormField(formField, parentId) {
     const {
@@ -1030,10 +1015,10 @@ class Importer {
     });
   }
 
-  /**
-   * @param {Object} data
-   *
-   * @return {Object} initializedData
+  /**
+   * @param {Object} data
+   *
+   * @return {Object} initializedData
    */
   initializeFieldValues(data) {
     return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -1083,11 +1068,11 @@ const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u
 
 const FORM_ELEMENT = document.createElement('form');
 
-/**
- * Sanitize a HTML string and return the cleaned, safe version.
- *
- * @param {string} html
- * @return {string}
+/**
+ * Sanitize a HTML string and return the cleaned, safe version.
+ *
+ * @param {string} html
+ * @return {string}
  */
 function sanitizeHTML(html) {
   const doc = new DOMParser().parseFromString(`<!DOCTYPE html>\n<html><body><div>${html}`, 'text/html');
@@ -1107,15 +1092,15 @@ function sanitizeImageSource(src) {
   return valid ? src : '';
 }
 
-/**
- * Recursively sanitize a HTML node, potentially
- * removing it, its children or attributes.
- *
- * Inspired by https://github.com/developit/snarkdown/issues/70
- * and https://github.com/cure53/DOMPurify. Simplified
- * for our use-case.
- *
- * @param {Element} node
+/**
+ * Recursively sanitize a HTML node, potentially
+ * removing it, its children or attributes.
+ *
+ * Inspired by https://github.com/developit/snarkdown/issues/70
+ * and https://github.com/cure53/DOMPurify. Simplified
+ * for our use-case.
+ *
+ * @param {Element} node
  */
 function sanitizeNode(node) {
   // allow text nodes
@@ -1159,13 +1144,13 @@ function sanitizeNode(node) {
   }
 }
 
-/**
- * Validates attributes for validity.
- *
- * @param {string} lcTag
- * @param {string} lcName
- * @param {string} value
- * @return {boolean}
+/**
+ * Validates attributes for validity.
+ *
+ * @param {string} lcTag
+ * @param {string} lcName
+ * @param {string} value
+ * @return {boolean}
  */
 function isValidAttribute(lcTag, lcName, value) {
   // disallow most attributes based on whitelist
@@ -1195,7 +1180,7 @@ function formFieldClasses(type, {
   if (!type) {
     throw new Error('type required');
   }
-  return classNames__default['default']('fjs-form-field', `fjs-form-field-${type}`, {
+  return classNames('fjs-form-field', `fjs-form-field-${type}`, {
     'fjs-has-errors': errors.length > 0,
     'fjs-disabled': disabled
   });
@@ -1207,7 +1192,7 @@ function prefixId(id, formId) {
   return `fjs-form-${id}`;
 }
 function markdownToHTML(markdown) {
-  const htmls = markdown.toString().split(/(?:\r?\n){2,}/).map(line => /^((\d+.)|[><\s#-*])/.test(line) ? snarkdown__default['default'](line) : `<p>${snarkdown__default['default'](line)}</p>`);
+  const htmls = markdown.toString().split(/(?:\r?\n){2,}/).map(line => /^((\d+.)|[><\s#-*])/.test(line) ? snarkdown(line) : `<p>${snarkdown(line)}</p>`);
   return htmls.join('\n\n');
 }
 
@@ -1217,14 +1202,14 @@ function safeMarkdown(markdown) {
   return sanitizeHTML(html);
 }
 
-/**
- * Sanitizes an image source to ensure we only allow for data URI and links
- * that start with http(s).
- *
- * Note: Most browsers anyway do not support script execution in <img> elements.
- *
- * @param {string} src
- * @returns {string}
+/**
+ * Sanitizes an image source to ensure we only allow for data URI and links
+ * that start with http(s).
+ *
+ * Note: Most browsers anyway do not support script execution in <img> elements.
+ *
+ * @param {string} src
+ * @returns {string}
  */
 function safeImageSource(src) {
   return sanitizeImageSource(src);
@@ -1249,15 +1234,14 @@ function Button(props) {
     })
   });
 }
-Button.create = function (options = {}) {
-  return {
-    action: 'submit',
-    ...options
-  };
-};
+Button.create = (options = {}) => ({
+  action: 'submit',
+  ...options
+});
 Button.type = type$b;
 Button.label = 'Button';
 Button.keyed = true;
+Button.group = 'action';
 
 const FormRenderContext = preact.createContext({
   Empty: props => {
@@ -1270,18 +1254,20 @@ const FormRenderContext = preact.createContext({
     return props.children;
   }
 });
+var FormRenderContext$1 = FormRenderContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const FormContext = preact.createContext({
   getService,
   formId: null
 });
+var FormContext$1 = FormContext;
 
 function Description(props) {
   const {
@@ -1324,7 +1310,7 @@ function Label(props) {
   } = props;
   return jsxRuntime.jsxs("label", {
     for: id,
-    class: classNames__default['default']('fjs-form-field-label', {
+    class: classNames('fjs-form-field-label', {
       'fjs-incollapsible-label': !collapseOnEmpty
     }, props['class']),
     children: [props.children, label || '', required && jsxRuntime.jsx("span", {
@@ -1357,9 +1343,9 @@ function Checkbox(props) {
   };
   const {
     formId
-  } = hooks.useContext(FormContext);
+  } = hooks.useContext(FormContext$1);
   return jsxRuntime.jsxs("div", {
-    class: classNames__default['default'](formFieldClasses(type$a, {
+    class: classNames(formFieldClasses(type$a, {
       errors,
       disabled
     }), {
@@ -1384,11 +1370,9 @@ function Checkbox(props) {
     })]
   });
 }
-Checkbox.create = function (options = {}) {
-  return {
-    ...options
-  };
-};
+Checkbox.create = (options = {}) => ({
+  ...options
+});
 Checkbox.type = type$a;
 Checkbox.label = 'Checkbox';
 Checkbox.keyed = true;
@@ -1396,16 +1380,17 @@ Checkbox.emptyValue = false;
 Checkbox.sanitizeValue = ({
   value
 }) => value === true;
+Checkbox.group = 'selection';
 
 function useService (type, strict) {
   const {
     getService
-  } = hooks.useContext(FormContext);
+  } = hooks.useContext(FormContext$1);
   return getService(type, strict);
 }
 
-/**
- * @enum { String }
+/**
+ * @enum { String }
  */
 const LOAD_STATES = {
   LOADING: 'loading',
@@ -1413,17 +1398,17 @@ const LOAD_STATES = {
   ERROR: 'error'
 };
 
-/**
- * @typedef {Object} ValuesGetter
- * @property {Object[]} values - The values data
- * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+/**
+ * @typedef {Object} ValuesGetter
+ * @property {Object[]} values - The values data
+ * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
  */
 
-/**
- * A hook to load values for single and multiselect components.
- *
- * @param {Object} field - The form field to handle values for
- * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+/**
+ * A hook to load values for single and multiselect components.
+ *
+ * @param {Object} field - The form field to handle values for
+ * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
  */
 function useValuesAsync (field) {
   const {
@@ -1497,8 +1482,8 @@ function parseInputTime(stringTime) {
   if (is12h) {
     const isPM = workingString.includes('pm');
     const digits = workingString.match(/\d+/g);
-    const displayHour = parseInt(digits?.[0]);
-    const minute = parseInt(digits?.[1]) || 0;
+    const displayHour = parseInt(digits && digits[0]);
+    const minute = parseInt(digits && digits[1]) || 0;
     const isValidDisplayHour = minDash.isNumber(displayHour) && displayHour >= 1 && displayHour <= 12;
     const isValidMinute = minute >= 0 && minute <= 59;
     if (!isValidDisplayHour || !isValidMinute) return null;
@@ -1506,8 +1491,8 @@ function parseInputTime(stringTime) {
     return hour * 60 + minute;
   } else {
     const digits = workingString.match(/\d+/g);
-    const hour = parseInt(digits?.[0]);
-    const minute = parseInt(digits?.[1]);
+    const hour = parseInt(digits && digits[0]);
+    const minute = parseInt(digits && digits[1]);
     const isValidHour = minDash.isNumber(hour) && hour >= 0 && hour <= 23;
     const isValidMinute = minDash.isNumber(minute) && minute >= 0 && minute <= 59;
     if (!isValidHour || !isValidMinute) return null;
@@ -1710,9 +1695,9 @@ function Checklist(props) {
   } = useValuesAsync(field);
   const {
     formId
-  } = hooks.useContext(FormContext);
+  } = hooks.useContext(FormContext$1);
   return jsxRuntime.jsxs("div", {
-    class: classNames__default['default'](formFieldClasses(type$9, {
+    class: classNames(formFieldClasses(type$9, {
       errors,
       disabled
     })),
@@ -1722,7 +1707,7 @@ function Checklist(props) {
       return jsxRuntime.jsx(Label, {
         id: prefixId(`${id}-${index}`, formId),
         label: v.label,
-        class: classNames__default['default']({
+        class: classNames({
           'fjs-checked': value.includes(v.value)
         }),
         required: false,
@@ -1742,13 +1727,18 @@ function Checklist(props) {
     })]
   });
 }
-Checklist.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
+Checklist.create = (options = {}) => {
+  const defaults = {};
+
+  // provide default values if valuesKey isn't set
+  if (!options.valuesKey) {
+    defaults.values = [{
       label: 'Value',
       value: 'value'
-    }],
+    }];
+  }
+  return {
+    ...defaults,
     ...options
   };
 };
@@ -1757,14 +1747,15 @@ Checklist.label = 'Checklist';
 Checklist.keyed = true;
 Checklist.emptyValue = [];
 Checklist.sanitizeValue = sanitizeMultiSelectValue;
+Checklist.group = 'selection';
 
-/**
- * Check if condition is met with given variables.
- *
- * @param {string | undefined} condition
- * @param {import('../../types').Data} data
- *
- * @returns {boolean} true if condition is met or no condition or condition checker exists
+/**
+ * Check if condition is met with given variables.
+ *
+ * @param {string | undefined} condition
+ * @param {import('../../types').Data} data
+ *
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
  */
 function useCondition(condition, data) {
   const initialData = useService('form')._getState().initialData;
@@ -1800,7 +1791,7 @@ function FormField(props) {
   const {
     Element,
     Empty
-  } = hooks.useContext(FormRenderContext);
+  } = hooks.useContext(FormRenderContext$1);
   const FormFieldComponent = formFields.get(field.type);
   if (!FormFieldComponent) {
     throw new Error(`cannot render field <${field.type}>`);
@@ -1832,7 +1823,7 @@ function Default(props) {
   const {
     Children,
     Empty
-  } = hooks.useContext(FormRenderContext);
+  } = hooks.useContext(FormRenderContext$1);
   const {
     field
   } = props;
@@ -1851,30 +1842,30 @@ function Default(props) {
     }), components.length ? null : jsxRuntime.jsx(Empty, {})]
   });
 }
-Default.create = function (options = {}) {
-  return {
-    components: [],
-    ...options
-  };
-};
+Default.create = (options = {}) => ({
+  components: [],
+  ...options
+});
 Default.type = 'default';
 Default.keyed = false;
+Default.label = null;
+Default.group = null;
 
-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); }
+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 CalendarIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$h({
+}) => /*#__PURE__*/React.createElement("svg", _extends$j({
   width: "14",
   height: "15",
   viewBox: "0 0 28 30",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M19 2H9V0H7v2H2a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V4a2 2 0 00-2-2h-5V0h-2v2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7zm-5 4v17h24V11H2z",
-  fill: "#000"
+  fill: "currentColor",
+  d: "M19 2H9V0H7v2H2a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V4a2 2 0 00-2-2h-5V0h-2v2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7zm-5 4v17h24V11H2z"
 })));
 
 function InputAdorner(props) {
@@ -1887,10 +1878,10 @@ function InputAdorner(props) {
     disabled,
     hasErrors
   } = props;
-  const onAdornmentClick = () => inputRef?.current?.focus();
+  const onAdornmentClick = () => inputRef && inputRef.current && inputRef.current.focus();
   return jsxRuntime.jsxs("div", {
-    class: classNames__default['default']('fjs-input-group', {
-      'disabled': disabled
+    class: classNames('fjs-input-group', {
+      'fjs-disabled': disabled
     }, {
       'hasErrors': hasErrors
     }),
@@ -1939,24 +1930,16 @@ function Datepicker(props) {
 
   // setup flatpickr instance
   hooks.useEffect(() => {
-    if (disabled) {
-      setFlatpickrInstance(null);
-      return;
-    }
     let config = {
       allowInput: true,
       dateFormat: 'm/d/Y',
       static: true,
       clickOpens: false,
+      // TODO: support dates prior to 1900 (https://github.com/bpmn-io/form-js/issues/533)
+      minDate: disallowPassedDates ? 'today' : '01/01/1900',
       errorHandler: () => {/* do nothing, we expect the values to sometimes be erronous and we don't want warnings polluting the console */}
     };
-    if (disallowPassedDates) {
-      config = {
-        ...config,
-        minDate: 'today'
-      };
-    }
-    const instance = flatpickr__default['default'](dateInputRef.current, config);
+    const instance = flatpickr(dateInputRef.current, config);
     setFlatpickrInstance(instance);
     const onCalendarFocusOut = e => {
       if (!instance.calendarContainer.contains(e.relatedTarget) && e.relatedTarget != dateInputRef.current) {
@@ -1975,7 +1958,7 @@ function Datepicker(props) {
     // flatpicker logic that was lost when setting allowInput to true
     instance.config.onOpen = [() => instance.calendarContainer.addEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.addEventListener('mousedown', onCalendarMouseDown)];
     instance.config.onClose = [() => instance.calendarContainer.removeEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.removeEventListener('mousedown', onCalendarMouseDown)];
-  }, [disabled, disallowPassedDates]);
+  }, [disallowPassedDates]);
 
   // onChange is updated dynamically, so not to re-render the flatpicker every time it changes
   hooks.useEffect(() => {
@@ -2039,7 +2022,7 @@ function Datepicker(props) {
           class: 'fjs-input',
           disabled: disabled,
           placeholder: "mm/dd/yyyy",
-          autoComplete: "false",
+          autoComplete: "off",
           onFocus: onInputFocus,
           onKeyDown: onInputKeyDown,
           onMouseDown: e => !flatpickrInstance.isOpen && flatpickrInstance.open(),
@@ -2052,24 +2035,24 @@ function Datepicker(props) {
   });
 }
 
-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); }
+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 ClockIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$g({
+}) => /*#__PURE__*/React.createElement("svg", _extends$i({
   width: "16",
   height: "16",
   viewBox: "0 0 28 29",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
-  d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z",
-  fill: "#000"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z"
+}), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M6.222 25.64A14 14 0 1021.778 2.36 14 14 0 006.222 25.64zM7.333 4.023a12 12 0 1113.334 19.955A12 12 0 017.333 4.022z",
-  fill: "#000"
+  fill: "currentColor",
+  d: "M6.222 25.64A14 14 0 1021.778 2.36 14 14 0 006.222 25.64zM7.333 4.023a12 12 0 1113.334 19.955A12 12 0 017.333 4.022z"
 })));
 
 function useKeyDownAction(targetKey, action, listenerElement = window) {
@@ -2092,7 +2075,7 @@ const DEFAULT_LABEL_GETTER = value => value;
 const NOOP = () => {};
 function DropdownList(props) {
   const {
-    keyEventsListener = window,
+    listenerElement = window,
     values = [],
     getLabel = DEFAULT_LABEL_GETTER,
     onValueSelected = NOOP,
@@ -2122,18 +2105,18 @@ function DropdownList(props) {
       changeFocusedValueIndex(-1);
       setMouseControl(false);
     }
-  }, keyEventsListener);
+  }, listenerElement);
   useKeyDownAction('ArrowDown', () => {
     if (values.length) {
       changeFocusedValueIndex(1);
       setMouseControl(false);
     }
-  }, keyEventsListener);
+  }, listenerElement);
   useKeyDownAction('Enter', () => {
     if (focusedItem) {
       onValueSelected(focusedItem);
     }
-  }, keyEventsListener);
+  }, listenerElement);
   hooks.useEffect(() => {
     const individualEntries = dropdownContainer.current.children;
     if (individualEntries.length && !mouseControl) {
@@ -2161,21 +2144,19 @@ function DropdownList(props) {
     ref: dropdownContainer,
     tabIndex: -1,
     class: "fjs-dropdownlist",
+    onMouseDown: e => e.preventDefault(),
     style: {
       maxHeight: height,
       scrollBehavior: smoothScrolling ? 'smooth' : 'auto'
     },
     children: [values.length > 0 && values.map((v, i) => {
       return jsxRuntime.jsx("div", {
-        class: classNames__default['default']('fjs-dropdownlist-item', {
+        class: classNames('fjs-dropdownlist-item', {
           'focused': focusedValueIndex === i
         }),
         onMouseMove: mouseControl ? undefined : e => onMouseMovedInKeyboardMode(e, i),
         onMouseEnter: mouseControl ? () => setFocusedValueIndex(i) : undefined,
-        onMouseDown: e => {
-          e.preventDefault();
-          onValueSelected(v);
-        },
+        onMouseDown: e => onValueSelected(v),
         children: getLabel(v)
       });
     }), !values.length && jsxRuntime.jsx("div", {
@@ -2308,7 +2289,7 @@ function Timepicker(props) {
           value: rawValue,
           disabled: disabled,
           placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
-          autoComplete: "false",
+          autoComplete: "off",
           onFocus: () => useDropdown && setDropdownIsOpen(true),
           onClick: () => useDropdown && setDropdownIsOpen(true)
 
@@ -2359,7 +2340,7 @@ function Datetime(props) {
   } = validate;
   const {
     formId
-  } = hooks.useContext(FormContext);
+  } = hooks.useContext(FormContext$1);
   const getNullDateTime = () => ({
     date: new Date(Date.parse(null)),
     time: null
@@ -2375,31 +2356,29 @@ function Datetime(props) {
       date,
       time
     } = getNullDateTime();
-    if (!disabled) {
-      switch (subtype) {
-        case DATETIME_SUBTYPES.DATE:
-          {
-            date = new Date(Date.parse(value));
-            break;
-          }
-        case DATETIME_SUBTYPES.TIME:
-          {
-            time = parseIsoTime(value);
-            break;
-          }
-        case DATETIME_SUBTYPES.DATETIME:
-          {
-            date = new Date(Date.parse(value));
-            time = isValidDate(date) ? 60 * date.getHours() + date.getMinutes() : null;
-            break;
-          }
-      }
+    switch (subtype) {
+      case DATETIME_SUBTYPES.DATE:
+        {
+          date = new Date(Date.parse(value));
+          break;
+        }
+      case DATETIME_SUBTYPES.TIME:
+        {
+          time = parseIsoTime(value);
+          break;
+        }
+      case DATETIME_SUBTYPES.DATETIME:
+        {
+          date = new Date(Date.parse(value));
+          time = isValidDate(date) ? 60 * date.getHours() + date.getMinutes() : null;
+          break;
+        }
     }
     setDateTime({
       date,
       time
     });
-  }, [subtype, value, disabled]);
+  }, [subtype, value]);
   const computeAndSetState = hooks.useCallback(({
     date,
     time
@@ -2487,7 +2466,7 @@ function Datetime(props) {
       disabled
     }),
     children: [jsxRuntime.jsxs("div", {
-      class: classNames__default['default']('fjs-vertical-group'),
+      class: classNames('fjs-vertical-group'),
       children: [useDatePicker && jsxRuntime.jsx(Datepicker, {
         ...datePickerProps
       }), useTimePicker && useDatePicker && jsxRuntime.jsx("div", {
@@ -2502,12 +2481,12 @@ function Datetime(props) {
     })]
   });
 }
-Datetime.create = function (options = {}) {
-  const newOptions = {};
-  minDash.set(newOptions, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
-  minDash.set(newOptions, DATE_LABEL_PATH, 'Date');
+Datetime.create = (options = {}) => {
+  const defaults = {};
+  minDash.set(defaults, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
+  minDash.set(defaults, DATE_LABEL_PATH, 'Date');
   return {
-    ...newOptions,
+    ...defaults,
     ...options
   };
 };
@@ -2515,11 +2494,13 @@ Datetime.type = type$8;
 Datetime.keyed = true;
 Datetime.emptyValue = null;
 Datetime.sanitizeValue = sanitizeDateTimePickerValue;
+Datetime.label = 'Date time';
+Datetime.group = 'basic-input';
 
-/**
- * This file must not be changed or exchanged.
- *
- * @see http://bpmn.io/license for more information.
+/**
+ * This file must not be changed or exchanged.
+ *
+ * @see http://bpmn.io/license for more information.
  */
 function Logo() {
   return jsxRuntime.jsxs("svg", {
@@ -2636,10 +2617,10 @@ function FormComponent(props) {
   });
 }
 
-/**
- *
- * @param {string | undefined} expression
- * @param {import('../../types').Data} data
+/**
+ *
+ * @param {string | undefined} expression
+ * @param {import('../../types').Data} data
  */
 function useEvaluation(expression, data) {
   const initialData = useService('form')._getState().initialData;
@@ -2656,9 +2637,9 @@ function useEvaluation(expression, data) {
   return conditionChecker.evaluate(expression, filteredData);
 }
 
-/**
- *
- * @param {string} value
+/**
+ *
+ * @param {string} value
  */
 function useExpressionValue(value) {
   const formData = useService('form')._getState().data;
@@ -2678,11 +2659,11 @@ function isExpression(value) {
   return minDash.isString(value) && value.startsWith('=');
 }
 
-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); }
+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 ImagePlaceholder = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$f({
+}) => /*#__PURE__*/React.createElement("svg", _extends$h({
   width: "64",
   height: "64",
   viewBox: "0 0 1280 1280",
@@ -2691,16 +2672,16 @@ var ImagePlaceholder = (({
   clipRule: "evenodd",
   strokeLinejoin: "round",
   strokeMiterlimit: "2"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fill: "#e5e9ed",
   d: "M0 0h1280v1280H0z"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
+}), /*#__PURE__*/React.createElement("path", {
   d: "M910 410H370v470h540V410zm-57.333 57.333v355.334H427.333V467.333h425.334z",
   fill: "#cad3db"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
+}), /*#__PURE__*/React.createElement("path", {
   d: "M810 770H480v-60l100-170 130 170 100-65v125z",
   fill: "#cad3db"
-}), /*#__PURE__*/React__default['default'].createElement("circle", {
+}), /*#__PURE__*/React.createElement("circle", {
   cx: "750",
   cy: "550",
   r: "50",
@@ -2722,7 +2703,7 @@ function Image(props) {
   const altText = useExpressionValue(alt);
   const {
     formId
-  } = hooks.useContext(FormContext);
+  } = hooks.useContext(FormContext$1);
   return jsxRuntime.jsx("div", {
     class: formFieldClasses(type$7),
     children: jsxRuntime.jsxs("div", {
@@ -2741,13 +2722,47 @@ function Image(props) {
     })
   });
 }
-Image.create = function (options = {}) {
-  return {
-    ...options
-  };
-};
+Image.create = (options = {}) => ({
+  ...options
+});
 Image.type = type$7;
 Image.keyed = false;
+Image.label = 'Image view';
+Image.group = 'presentation';
+
+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 AngelDownIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$g({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "8",
+  height: "8"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  fill: "currentColor",
+  stroke: "currentColor",
+  strokeWidth: ".5",
+  d: "M7.75 1.336L4 6.125.258 1.335 0 1.54l4 5.125L8 1.54zm0 0"
+})));
+
+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 AngelUpIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$f({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "8",
+  height: "8"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  fill: "currentColor",
+  stroke: "currentColor",
+  strokeWidth: ".5",
+  d: "M7.75 6.664L4 1.875.258 6.665 0 6.46l4-5.125L8 6.46zm0 0"
+})));
 
 const type$6 = 'number';
 function Numberfield(props) {
@@ -2789,12 +2804,13 @@ function Numberfield(props) {
   }), [stringValueCache, value, field]);
   const displayValue = hooks.useMemo(() => {
     if (value === 'NaN') return 'NaN';
-    return cacheValueMatchesState ? stringValueCache : value || value === 0 ? Big__default['default'](value).toFixed() : '';
+    if (stringValueCache === '-') return '-';
+    return cacheValueMatchesState ? stringValueCache : value || value === 0 ? Big(value).toFixed() : '';
   }, [stringValueCache, value, cacheValueMatchesState]);
   const arrowIncrementValue = hooks.useMemo(() => {
-    if (incrementValue) return Big__default['default'](incrementValue);
-    if (decimalDigits) return Big__default['default'](`1e-${decimalDigits}`);
-    return Big__default['default']('1');
+    if (incrementValue) return Big(incrementValue);
+    if (decimalDigits) return Big(`1e-${decimalDigits}`);
+    return Big('1');
   }, [decimalDigits, incrementValue]);
   const setValue = hooks.useCallback(stringValue => {
     if (isNullEquivalentValue(stringValue)) {
@@ -2808,6 +2824,10 @@ function Numberfield(props) {
 
     // treat commas as dots
     stringValue = stringValue.replaceAll(',', '.');
+    if (stringValue === '-') {
+      setStringValueCache('-');
+      return;
+    }
     if (isNaN(Number(stringValue))) {
       setStringValueCache('NaN');
       onChange({
@@ -2823,14 +2843,14 @@ function Numberfield(props) {
     });
   }, [field, onChange, serializeToString]);
   const increment = () => {
-    const base = isValidNumber(value) ? Big__default['default'](value) : Big__default['default'](0);
+    const base = isValidNumber(value) ? Big(value) : Big(0);
     const stepFlooredValue = base.minus(base.mod(arrowIncrementValue));
 
     // note: toFixed() behaves differently in big.js
     setValue(stepFlooredValue.plus(arrowIncrementValue).toFixed());
   };
   const decrement = () => {
-    const base = isValidNumber(value) ? Big__default['default'](value) : Big__default['default'](0);
+    const base = isValidNumber(value) ? Big(value) : Big(0);
     const offset = base.mod(arrowIncrementValue);
     if (offset.cmp(0) === 0) {
       // if we're already on a valid step, decrement
@@ -2871,7 +2891,7 @@ function Numberfield(props) {
   };
   const {
     formId
-  } = hooks.useContext(FormContext);
+  } = hooks.useContext(FormContext$1);
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$6, {
       errors,
@@ -2886,8 +2906,8 @@ function Numberfield(props) {
       pre: prefixAdorner,
       post: suffixAdorner,
       children: jsxRuntime.jsxs("div", {
-        class: classNames__default['default']('fjs-vertical-group', {
-          'disabled': disabled
+        class: classNames('fjs-vertical-group', {
+          'fjs-disabled': disabled
         }, {
           'hasErrors': errors.length
         }),
@@ -2907,23 +2927,25 @@ function Numberfield(props) {
           step: arrowIncrementValue,
           value: displayValue
         }), jsxRuntime.jsxs("div", {
-          class: classNames__default['default']('fjs-number-arrow-container', {
-            'disabled': disabled
+          class: classNames('fjs-number-arrow-container', {
+            'fjs-disabled': disabled
           }),
           children: [jsxRuntime.jsx("button", {
             class: "fjs-number-arrow-up",
             type: "button",
+            "aria-label": "Increment",
             onClick: () => increment(),
             tabIndex: -1,
-            children: "\u02C4"
+            children: jsxRuntime.jsx(AngelUpIcon, {})
           }), jsxRuntime.jsx("div", {
             class: "fjs-number-arrow-separator"
           }), jsxRuntime.jsx("button", {
             class: "fjs-number-arrow-down",
             type: "button",
+            "aria-label": "Decrement",
             onClick: () => decrement(),
             tabIndex: -1,
-            children: "\u02C5"
+            children: jsxRuntime.jsx(AngelDownIcon, {})
           })]
         })]
       })
@@ -2934,7 +2956,9 @@ function Numberfield(props) {
     })]
   });
 }
-Numberfield.create = (options = {}) => options;
+Numberfield.create = (options = {}) => ({
+  ...options
+});
 Numberfield.sanitizeValue = ({
   value,
   formField
@@ -2952,6 +2976,7 @@ Numberfield.type = type$6;
 Numberfield.keyed = true;
 Numberfield.label = 'Number';
 Numberfield.emptyValue = null;
+Numberfield.group = 'basic-input';
 
 const type$5 = 'radio';
 function Radio(props) {
@@ -2982,7 +3007,7 @@ function Radio(props) {
   } = useValuesAsync(field);
   const {
     formId
-  } = hooks.useContext(FormContext);
+  } = hooks.useContext(FormContext$1);
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$5, {
       errors,
@@ -2995,7 +3020,7 @@ function Radio(props) {
       return jsxRuntime.jsx(Label, {
         id: prefixId(`${id}-${index}`, formId),
         label: option.label,
-        class: classNames__default['default']({
+        class: classNames({
           'fjs-checked': option.value === value
         }),
         required: false,
@@ -3016,12 +3041,17 @@ function Radio(props) {
   });
 }
 Radio.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
+  const defaults = {};
+
+  // provide default values if valuesKey isn't set
+  if (!options.valuesKey) {
+    defaults.values = [{
       label: 'Value',
       value: 'value'
-    }],
+    }];
+  }
+  return {
+    ...defaults,
     ...options
   };
 };
@@ -3030,121 +3060,39 @@ Radio.label = 'Radio';
 Radio.keyed = true;
 Radio.emptyValue = null;
 Radio.sanitizeValue = sanitizeSingleSelectValue;
-
-const type$4 = 'select';
-function Select(props) {
-  const {
-    disabled,
-    errors = [],
-    field,
-    value
-  } = props;
-  const {
-    description,
-    id,
-    label,
-    validate = {}
-  } = field;
-  const {
-    required
-  } = validate;
-  const onChange = ({
-    target
-  }) => {
-    props.onChange({
-      field,
-      value: target.value === '' ? null : target.value
-    });
-  };
-  const {
-    state: loadState,
-    values: options
-  } = useValuesAsync(field);
-  const {
-    formId
-  } = hooks.useContext(FormContext);
-  return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$4, {
-      errors,
-      disabled
-    }),
-    children: [jsxRuntime.jsx(Label, {
-      id: prefixId(id, formId),
-      label: label,
-      required: required
-    }), jsxRuntime.jsxs("select", {
-      class: "fjs-select",
-      disabled: disabled,
-      id: prefixId(id, formId),
-      onChange: onChange,
-      value: value || '',
-      children: [jsxRuntime.jsx("option", {
-        value: ""
-      }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
-        return jsxRuntime.jsx("option", {
-          value: option.value,
-          children: option.label
-        }, `${id}-${index}`);
-      })]
-    }), jsxRuntime.jsx(Description, {
-      description: description
-    }), jsxRuntime.jsx(Errors, {
-      errors: errors
-    })]
-  });
-}
-Select.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
-      label: 'Value',
-      value: 'value'
-    }],
-    ...options
-  };
-};
-Select.type = type$4;
-Select.label = 'Select';
-Select.keyed = true;
-Select.emptyValue = null;
-Select.sanitizeValue = sanitizeSingleSelectValue;
+Radio.group = 'selection';
 
 function _extends$e() { _extends$e = 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$e.apply(this, arguments); }
-var CloseIcon = (({
+var XMarkIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$e({
-  width: "16",
-  height: "16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}) => /*#__PURE__*/React.createElement("svg", _extends$e({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "8",
+  height: "8"
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7z",
-  fill: "currentColor"
+  fill: "currentColor",
+  stroke: "currentColor",
+  strokeWidth: ".5",
+  d: "M4 3.766L7.43.336l.234.234L4.234 4l3.43 3.43-.234.234L4 4.234.57 7.664.336 7.43 3.766 4 .336.57.57.336zm0 0"
 })));
 
-const type$3 = 'taglist';
-function Taglist(props) {
+function SearchableSelect(props) {
   const {
+    id,
     disabled,
-    errors = [],
+    errors,
     field,
-    value: values = []
+    value
   } = props;
-  const {
-    description,
-    id,
-    label
-  } = field;
   const {
     formId
-  } = hooks.useContext(FormContext);
+  } = hooks.useContext(FormContext$1);
   const [filter, setFilter] = hooks.useState('');
-  const [filteredOptions, setFilteredOptions] = hooks.useState([]);
   const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
-  const [hasOptionsLeft, setHasOptionsLeft] = hooks.useState(true);
+  const [shouldApplyFilter, setShouldApplyFilter] = hooks.useState(true);
   const [isEscapeClosed, setIsEscapeClose] = hooks.useState(false);
   const searchbarRef = hooks.useRef();
   const {
@@ -3156,15 +3104,335 @@ function Taglist(props) {
   const valueToOptionMap = hooks.useMemo(() => Object.assign({}, ...options.map((o, x) => ({
     [o.value]: options[x]
   }))), [options]);
+  const valueLabel = hooks.useMemo(() => value && valueToOptionMap[value] && valueToOptionMap[value].label || '', [value, valueToOptionMap]);
 
-  // Usage of stringify is necessary here because we want this effect to only trigger when there is a value change to the array
+  // whenever we change the underlying value, set the label to it
   hooks.useEffect(() => {
+    setFilter(valueLabel);
+  }, [valueLabel]);
+  const filteredOptions = hooks.useMemo(() => {
     if (loadState === LOAD_STATES.LOADED) {
-      setFilteredOptions(options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
-    } else {
-      setFilteredOptions([]);
+      return shouldApplyFilter ? options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase())) : options;
     }
-  }, [filter, JSON.stringify(values), options, loadState]);
+    return [];
+  }, [filter, loadState, options, shouldApplyFilter]);
+  const onChange = ({
+    target
+  }) => {
+    setIsEscapeClose(false);
+    setIsDropdownExpanded(true);
+    setShouldApplyFilter(true);
+    setFilter(target.value || '');
+  };
+  const setValue = hooks.useCallback(option => {
+    setFilter(option && option.label || '');
+    props.onChange({
+      value: option && option.value || null,
+      field
+    });
+  }, [field, props]);
+  const onInputKeyDown = hooks.useCallback(keyDownEvent => {
+    switch (keyDownEvent.key) {
+      case 'ArrowUp':
+        keyDownEvent.preventDefault();
+        break;
+      case 'ArrowDown':
+        {
+          if (!isDropdownExpanded) {
+            setIsDropdownExpanded(true);
+            setShouldApplyFilter(false);
+          }
+          keyDownEvent.preventDefault();
+          break;
+        }
+      case 'Escape':
+        setIsEscapeClose(true);
+        break;
+      case 'Enter':
+        if (isEscapeClosed) {
+          setIsEscapeClose(false);
+        }
+        break;
+    }
+  }, [isDropdownExpanded, isEscapeClosed]);
+  const displayState = hooks.useMemo(() => {
+    const ds = {};
+    ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+    ds.displayCross = ds.componentReady && value !== null && value !== undefined;
+    ds.displayDropdown = !disabled && isDropdownExpanded && !isEscapeClosed;
+    return ds;
+  }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, value]);
+  const onAngelMouseDown = hooks.useCallback(e => {
+    setIsEscapeClose(false);
+    setIsDropdownExpanded(!isDropdownExpanded);
+    const searchbar = searchbarRef.current;
+    isDropdownExpanded ? searchbar.blur() : searchbar.focus();
+    e.preventDefault();
+  }, [isDropdownExpanded]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs("div", {
+      id: prefixId(`${id}`, formId),
+      class: classNames('fjs-input-group', {
+        'disabled': disabled
+      }, {
+        'hasErrors': errors.length
+      }),
+      children: [jsxRuntime.jsx("input", {
+        disabled: disabled,
+        class: "fjs-input",
+        ref: searchbarRef,
+        id: prefixId(`${id}-search`, formId),
+        onChange: onChange,
+        type: "text",
+        value: filter,
+        placeholder: 'Search',
+        autoComplete: "off",
+        onKeyDown: e => onInputKeyDown(e),
+        onMouseDown: () => {
+          setIsEscapeClose(false);
+          setIsDropdownExpanded(true);
+          setShouldApplyFilter(false);
+        },
+        onFocus: () => {
+          setIsDropdownExpanded(true);
+          setShouldApplyFilter(false);
+        },
+        onBlur: () => {
+          setIsDropdownExpanded(false);
+          setFilter(valueLabel);
+        }
+      }), displayState.displayCross && jsxRuntime.jsxs("span", {
+        class: "fjs-select-cross",
+        onMouseDown: e => {
+          setValue(null);
+          e.preventDefault();
+        },
+        children: [jsxRuntime.jsx(XMarkIcon, {}), " "]
+      }), jsxRuntime.jsx("span", {
+        class: "fjs-select-arrow",
+        onMouseDown: e => onAngelMouseDown(e),
+        children: displayState.displayDropdown ? jsxRuntime.jsx(AngelUpIcon, {}) : jsxRuntime.jsx(AngelDownIcon, {})
+      })]
+    }), jsxRuntime.jsx("div", {
+      class: "fjs-select-anchor",
+      children: displayState.displayDropdown && jsxRuntime.jsx(DropdownList, {
+        values: filteredOptions,
+        getLabel: o => o.label,
+        onValueSelected: o => {
+          setValue(o);
+          setIsDropdownExpanded(false);
+        },
+        listenerElement: searchbarRef.current
+      })
+    })]
+  });
+}
+
+function SimpleSelect(props) {
+  const {
+    id,
+    disabled,
+    errors,
+    field,
+    value
+  } = props;
+  const {
+    formId
+  } = hooks.useContext(FormContext$1);
+  const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
+  const selectRef = hooks.useRef();
+  const {
+    state: loadState,
+    values: options
+  } = useValuesAsync(field);
+
+  // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
+  const valueToOptionMap = hooks.useMemo(() => Object.assign({}, ...options.map((o, x) => ({
+    [o.value]: options[x]
+  }))), [options]);
+  const valueLabel = hooks.useMemo(() => value && valueToOptionMap[value] && valueToOptionMap[value].label || '', [value, valueToOptionMap]);
+  const setValue = hooks.useCallback(option => {
+    props.onChange({
+      value: option && option.value || null,
+      field
+    });
+  }, [field, props]);
+  const displayState = hooks.useMemo(() => {
+    const ds = {};
+    ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+    ds.displayCross = ds.componentReady && value !== null && value !== undefined;
+    ds.displayDropdown = !disabled && isDropdownExpanded;
+    return ds;
+  }, [disabled, isDropdownExpanded, loadState, value]);
+  const onMouseDown = hooks.useCallback(e => {
+    const select = selectRef.current;
+    setIsDropdownExpanded(!isDropdownExpanded);
+    if (isDropdownExpanded) {
+      select.blur();
+    } else {
+      select.focus();
+    }
+    e.preventDefault();
+  }, [isDropdownExpanded]);
+  const initialFocusIndex = hooks.useMemo(() => value && minDash.findIndex(options, o => o.value === value) || 0, [options, value]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs("div", {
+      ref: selectRef,
+      id: prefixId(`${id}`, formId),
+      class: classNames('fjs-input-group', {
+        'disabled': disabled
+      }, {
+        'hasErrors': errors.length
+      }),
+      onFocus: () => setIsDropdownExpanded(true),
+      onBlur: () => setIsDropdownExpanded(false),
+      onMouseDown: e => onMouseDown(e),
+      tabIndex: disabled ? undefined : 0,
+      children: [jsxRuntime.jsx("div", {
+        class: classNames('fjs-select-display', {
+          'fjs-select-placeholder': !value
+        }),
+        id: prefixId(`${id}-display`, formId),
+        children: valueLabel || 'Select'
+      }), displayState.displayCross && jsxRuntime.jsx("span", {
+        class: "fjs-select-cross",
+        onMouseDown: e => {
+          setValue(null);
+          e.stopPropagation();
+        },
+        children: jsxRuntime.jsx(XMarkIcon, {})
+      }), jsxRuntime.jsx("span", {
+        class: "fjs-select-arrow",
+        children: displayState.displayDropdown ? jsxRuntime.jsx(AngelUpIcon, {}) : jsxRuntime.jsx(AngelDownIcon, {})
+      })]
+    }), jsxRuntime.jsx("div", {
+      class: "fjs-select-anchor",
+      children: displayState.displayDropdown && jsxRuntime.jsx(DropdownList, {
+        values: options,
+        getLabel: o => o.label,
+        initialFocusIndex: initialFocusIndex,
+        onValueSelected: o => {
+          setValue(o);
+          setIsDropdownExpanded(false);
+        },
+        listenerElement: selectRef.current
+      })
+    })]
+  });
+}
+
+const type$4 = 'select';
+function Select(props) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    onChange,
+    value
+  } = props;
+  const {
+    description,
+    id,
+    label,
+    searchable = false,
+    validate = {}
+  } = field;
+  const {
+    required
+  } = validate;
+  const {
+    formId
+  } = hooks.useContext(FormContext$1);
+  const selectProps = hooks.useMemo(() => ({
+    id,
+    disabled,
+    errors,
+    field,
+    value,
+    onChange
+  }), [disabled, errors, field, id, value, onChange]);
+  return jsxRuntime.jsxs("div", {
+    class: formFieldClasses(type$4, {
+      errors,
+      disabled
+    }),
+    children: [jsxRuntime.jsx(Label, {
+      id: prefixId(id, formId),
+      label: label,
+      required: required
+    }), searchable ? jsxRuntime.jsx(SearchableSelect, {
+      ...selectProps
+    }) : jsxRuntime.jsx(SimpleSelect, {
+      ...selectProps
+    }), jsxRuntime.jsx(Description, {
+      description: description
+    }), jsxRuntime.jsx(Errors, {
+      errors: errors
+    })]
+  });
+}
+Select.create = (options = {}) => {
+  const defaults = {};
+
+  // provide default values if valuesKey isn't set
+  if (!options.valuesKey) {
+    defaults.values = [{
+      label: 'Value',
+      value: 'value'
+    }];
+  }
+  return {
+    ...defaults,
+    ...options
+  };
+};
+Select.type = type$4;
+Select.label = 'Select';
+Select.keyed = true;
+Select.emptyValue = null;
+Select.sanitizeValue = sanitizeSingleSelectValue;
+Select.group = 'selection';
+
+const type$3 = 'taglist';
+function Taglist(props) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    value: values = []
+  } = props;
+  const {
+    description,
+    id,
+    label
+  } = field;
+  const {
+    formId
+  } = hooks.useContext(FormContext$1);
+  const [filter, setFilter] = hooks.useState('');
+  const [filteredOptions, setFilteredOptions] = hooks.useState([]);
+  const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
+  const [hasOptionsLeft, setHasOptionsLeft] = hooks.useState(true);
+  const [isEscapeClosed, setIsEscapeClose] = hooks.useState(false);
+  const searchbarRef = hooks.useRef();
+  const {
+    state: loadState,
+    values: options
+  } = useValuesAsync(field);
+
+  // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
+  const valueToOptionMap = hooks.useMemo(() => Object.assign({}, ...options.map((o, x) => ({
+    [o.value]: options[x]
+  }))), [options]);
+
+  // Usage of stringify is necessary here because we want this effect to only trigger when there is a value change to the array
+  hooks.useEffect(() => {
+    if (loadState === LOAD_STATES.LOADED) {
+      setFilteredOptions(options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
+    } else {
+      setFilteredOptions([]);
+    }
+  }, [filter, JSON.stringify(values), options, loadState]);
   hooks.useEffect(() => {
     setHasOptionsLeft(options.length > values.length);
   }, [options.length, values.length]);
@@ -3228,6 +3496,7 @@ function Taglist(props) {
       searchbarRef.current.focus();
     }
   };
+  const shouldDisplayDropdown = hooks.useMemo(() => !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed, [disabled, isDropdownExpanded, isEscapeClosed, loadState]);
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$3, {
       errors,
@@ -3237,24 +3506,26 @@ function Taglist(props) {
       label: label,
       id: prefixId(`${id}-search`, formId)
     }), jsxRuntime.jsxs("div", {
-      class: classNames__default['default']('fjs-taglist', {
-        'disabled': disabled
+      class: classNames('fjs-taglist', {
+        'fjs-disabled': disabled
       }),
-      children: [!disabled && loadState === LOAD_STATES.LOADED && jsxRuntime.jsx("div", {
+      children: [loadState === LOAD_STATES.LOADED && jsxRuntime.jsx("div", {
         class: "fjs-taglist-tags",
         children: values.map(v => {
           return jsxRuntime.jsxs("div", {
-            class: "fjs-taglist-tag",
+            class: classNames('fjs-taglist-tag', {
+              'fjs-disabled': disabled
+            }),
             onMouseDown: e => e.preventDefault(),
             children: [jsxRuntime.jsx("span", {
               class: "fjs-taglist-tag-label",
               children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
-            }), jsxRuntime.jsx("button", {
+            }), !disabled && jsxRuntime.jsx("button", {
               type: "button",
               title: "Remove tag",
               class: "fjs-taglist-tag-remove",
               onClick: event => onTagRemoveClick(event, v),
-              children: jsxRuntime.jsx(CloseIcon, {})
+              children: jsxRuntime.jsx(XMarkIcon, {})
             })]
           });
         })
@@ -3266,7 +3537,7 @@ function Taglist(props) {
         onChange: onFilterChange,
         type: "text",
         value: filter,
-        placeholder: 'Search',
+        placeholder: disabled ? '' : 'Search',
         autoComplete: "off",
         onKeyDown: e => onInputKeyDown(e),
         onMouseDown: () => setIsEscapeClose(false),
@@ -3278,7 +3549,7 @@ function Taglist(props) {
       })]
     }), jsxRuntime.jsx("div", {
       class: "fjs-taglist-anchor",
-      children: !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed && jsxRuntime.jsx(DropdownList, {
+      children: shouldDisplayDropdown && jsxRuntime.jsx(DropdownList, {
         values: filteredOptions,
         getLabel: o => o.label,
         onValueSelected: o => selectValue(o.value),
@@ -3292,31 +3563,232 @@ function Taglist(props) {
     })]
   });
 }
-Taglist.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
-      label: 'Value',
-      value: 'value'
-    }],
-    ...options
-  };
-};
-Taglist.type = type$3;
-Taglist.label = 'Taglist';
-Taglist.keyed = true;
-Taglist.emptyValue = [];
-Taglist.sanitizeValue = sanitizeMultiSelectValue;
+Taglist.create = (options = {}) => {
+  const defaults = {};
+
+  // provide default values if valuesKey isn't set
+  if (!options.valuesKey) {
+    defaults.values = [{
+      label: 'Value',
+      value: 'value'
+    }];
+  }
+  return {
+    ...defaults,
+    ...options
+  };
+};
+Taglist.type = type$3;
+Taglist.label = 'Tag list';
+Taglist.keyed = true;
+Taglist.emptyValue = [];
+Taglist.sanitizeValue = sanitizeMultiSelectValue;
+Taglist.group = 'selection';
+
+const type$2 = 'text';
+function Text(props) {
+  const {
+    field,
+    disableLinks
+  } = props;
+  const {
+    text = ''
+  } = field;
+  const textValue = useExpressionValue(text) || '';
+  const componentOverrides = disableLinks ? {
+    'a': DisabledLink
+  } : {};
+  return jsxRuntime.jsx("div", {
+    class: formFieldClasses(type$2),
+    children: jsxRuntime.jsx(Markup, {
+      markup: safeMarkdown(textValue),
+      components: componentOverrides,
+      trim: false
+    })
+  });
+}
+Text.create = (options = {}) => ({
+  text: '# Text',
+  ...options
+});
+Text.type = type$2;
+Text.keyed = false;
+Text.group = 'presentation';
+Text.label = 'Text view';
+function DisabledLink({
+  href,
+  children
+}) {
+  return jsxRuntime.jsx("a", {
+    class: "fjs-disabled-link",
+    href: href,
+    tabIndex: -1,
+    children: children
+  });
+}
+
+const type$1 = 'textfield';
+function Textfield(props) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    value = ''
+  } = props;
+  const {
+    description,
+    id,
+    label,
+    appearance = {},
+    validate = {}
+  } = field;
+  const {
+    prefixAdorner,
+    suffixAdorner
+  } = appearance;
+  const {
+    required
+  } = validate;
+  const onChange = ({
+    target
+  }) => {
+    props.onChange({
+      field,
+      value: target.value
+    });
+  };
+  const {
+    formId
+  } = hooks.useContext(FormContext$1);
+  return jsxRuntime.jsxs("div", {
+    class: formFieldClasses(type$1, {
+      errors,
+      disabled
+    }),
+    children: [jsxRuntime.jsx(Label, {
+      id: prefixId(id, formId),
+      label: label,
+      required: required
+    }), jsxRuntime.jsx(InputAdorner, {
+      disabled: disabled,
+      pre: prefixAdorner,
+      post: suffixAdorner,
+      children: jsxRuntime.jsx("input", {
+        class: "fjs-input",
+        disabled: disabled,
+        id: prefixId(id, formId),
+        onInput: onChange,
+        type: "text",
+        value: value
+      })
+    }), jsxRuntime.jsx(Description, {
+      description: description
+    }), jsxRuntime.jsx(Errors, {
+      errors: errors
+    })]
+  });
+}
+Textfield.create = (options = {}) => ({
+  ...options
+});
+Textfield.type = type$1;
+Textfield.label = 'Text field';
+Textfield.keyed = true;
+Textfield.emptyValue = '';
+Textfield.sanitizeValue = ({
+  value
+}) => minDash.isArray(value) || minDash.isObject(value) ? '' : String(value);
+Textfield.group = 'basic-input';
+
+const type = 'textarea';
+function Textarea(props) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    value = ''
+  } = props;
+  const {
+    description,
+    id,
+    label,
+    validate = {}
+  } = field;
+  const {
+    required
+  } = validate;
+  const textareaRef = hooks.useRef();
+  const onInput = ({
+    target
+  }) => {
+    props.onChange({
+      field,
+      value: target.value
+    });
+  };
+  const autoSizeTextarea = hooks.useCallback(textarea => {
+    // Ensures the textarea shrinks back, and improves resizing behavior consistency
+    textarea.style.height = '0px';
+    const computed = window.getComputedStyle(textarea);
+    const calculatedHeight = parseInt(computed.getPropertyValue('border-top-width')) + parseInt(computed.getPropertyValue('padding-top')) + textarea.scrollHeight + parseInt(computed.getPropertyValue('padding-bottom')) + parseInt(computed.getPropertyValue('border-bottom-width'));
+    const minHeight = 75;
+    const maxHeight = 350;
+    const displayHeight = Math.max(Math.min(calculatedHeight, maxHeight), minHeight);
+    textarea.style.height = `${displayHeight}px`;
+
+    // Overflow is hidden by default to hide scrollbar flickering
+    textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
+  }, []);
+  hooks.useEffect(() => {
+    autoSizeTextarea(textareaRef.current);
+  }, [autoSizeTextarea, value]);
+  const {
+    formId
+  } = hooks.useContext(FormContext$1);
+  return jsxRuntime.jsxs("div", {
+    class: formFieldClasses(type, {
+      errors,
+      disabled
+    }),
+    children: [jsxRuntime.jsx(Label, {
+      id: prefixId(id, formId),
+      label: label,
+      required: required
+    }), jsxRuntime.jsx("textarea", {
+      class: "fjs-textarea",
+      disabled: disabled,
+      id: prefixId(id, formId),
+      onInput: onInput,
+      value: value,
+      ref: textareaRef
+    }), jsxRuntime.jsx(Description, {
+      description: description
+    }), jsxRuntime.jsx(Errors, {
+      errors: errors
+    })]
+  });
+}
+Textarea.create = (options = {}) => ({
+  ...options
+});
+Textarea.type = type;
+Textarea.label = 'Text area';
+Textarea.keyed = true;
+Textarea.emptyValue = '';
+Textarea.sanitizeValue = ({
+  value
+}) => minDash.isArray(value) || minDash.isObject(value) ? '' : String(value);
+Textarea.group = 'basic-input';
 
 function _extends$d() { _extends$d = 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$d.apply(this, arguments); }
 var ButtonIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$d({
+}) => /*#__PURE__*/React.createElement("svg", _extends$d({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   d: "M45 17a3 3 0 013 3v14a3 3 0 01-3 3H9a3 3 0 01-3-3V20a3 3 0 013-3h36zm-9 8.889H18v2.222h18V25.89z"
 })));
@@ -3325,11 +3797,11 @@ function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : func
 var CheckboxIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$c({
+}) => /*#__PURE__*/React.createElement("svg", _extends$c({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   d: "M34 18H20a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V20a2 2 0 00-2-2zm-9 14l-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
 })));
 
@@ -3337,39 +3809,39 @@ function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : func
 var ChecklistIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$b({
+}) => /*#__PURE__*/React.createElement("svg", _extends$b({
+  xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  fill: "none"
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M19 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6 18h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6-30h-6v6h6V8zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2V8a2 2 0 00-2-2h-6z",
-  fill: "#22242A"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
-  d: "M26 26a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0 16a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0-32a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2z",
-  fill: "#22242A"
+  d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 36h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6z",
+  fill: "#161616"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M23 14.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 26.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 38.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1z",
+  fill: "#161616"
 })));
 
 function _extends$a() { _extends$a = 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$a.apply(this, arguments); }
 var DatetimeIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$a({
+}) => /*#__PURE__*/React.createElement("svg", _extends$a({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54",
   fill: "none"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fill: "#000",
   fillRule: "evenodd",
   d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36c-1.132 0-2.06.928-2.06 2.06v23.549c0 1.132.928 2.06 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 01-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592c.39 0 .707.317.707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06z",
   clipRule: "evenodd"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
+}), /*#__PURE__*/React.createElement("path", {
   fill: "#000",
   d: "M35.13 37.603l1.237-1.237-3.468-3.475v-5.926h-1.754v6.654l3.984 3.984z"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
+}), /*#__PURE__*/React.createElement("path", {
   fill: "#000",
   fillRule: "evenodd",
   d: "M23.08 36.962a9.678 9.678 0 1017.883-7.408 9.678 9.678 0 00-17.882 7.408zm4.54-10.292a7.924 7.924 0 118.805 13.177A7.924 7.924 0 0127.62 26.67z",
@@ -3380,17 +3852,17 @@ function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : func
 var TaglistIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$9({
+}) => /*#__PURE__*/React.createElement("svg", _extends$9({
   width: "54",
   height: "54",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1z",
   fill: "#000"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
+}), /*#__PURE__*/React.createElement("path", {
   d: "M11 22a1 1 0 011-1h19a1 1 0 011 1v10a1 1 0 01-1 1H12a1 1 0 01-1-1V22z",
   fill: "#505562"
 })));
@@ -3399,23 +3871,23 @@ function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : func
 var FormIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$8({
+}) => /*#__PURE__*/React.createElement("svg", _extends$8({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("rect", {
+}, props), /*#__PURE__*/React.createElement("rect", {
   x: "15",
   y: "17",
   width: "24",
   height: "4",
   rx: "1"
-}), /*#__PURE__*/React__default['default'].createElement("rect", {
+}), /*#__PURE__*/React.createElement("rect", {
   x: "15",
   y: "25",
   width: "24",
   height: "4",
   rx: "1"
-}), /*#__PURE__*/React__default['default'].createElement("rect", {
+}), /*#__PURE__*/React.createElement("rect", {
   x: "15",
   y: "33",
   width: "13",
@@ -3427,11 +3899,11 @@ function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : func
 var ColumnsIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$7({
+}) => /*#__PURE__*/React.createElement("svg", _extends$7({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   d: "M8 33v5a1 1 0 001 1h4v2H9a3 3 0 01-3-3v-5h2zm18 6v2H15v-2h11zm13 0v2H28v-2h11zm9-6v5a3 3 0 01-3 3h-4v-2h4a1 1 0 00.993-.883L46 38v-5h2zM8 22v9H6v-9h2zm40 0v9h-2v-9h2zm-35-9v2H9a1 1 0 00-.993.883L8 16v4H6v-4a3 3 0 013-3h4zm32 0a3 3 0 013 3v4h-2v-4a1 1 0 00-.883-.993L45 15h-4v-2h4zm-6 0v2H28v-2h11zm-13 0v2H15v-2h11z"
 })));
@@ -3440,11 +3912,11 @@ function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : func
 var NumberIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$6({
+}) => /*#__PURE__*/React.createElement("svg", _extends$6({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
 })));
@@ -3453,11 +3925,11 @@ function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : func
 var RadioIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$5({
+}) => /*#__PURE__*/React.createElement("svg", _extends$5({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__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 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
 })));
 
@@ -3465,11 +3937,11 @@ function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : func
 var SelectIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$4({
+}) => /*#__PURE__*/React.createElement("svg", _extends$4({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-12 7h9l-4.5 6-4.5-6z"
 })));
@@ -3478,11 +3950,11 @@ function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : func
 var TextIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$3({
+}) => /*#__PURE__*/React.createElement("svg", _extends$3({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36l-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 012.4.14 3.42 3.42 0 011.41.55 3.47 3.47 0 011 1.14 3 3 0 01.42 1.58 3.26 3.26 0 01-1.91 2.94 3.63 3.63 0 011.91 1.22 3.28 3.28 0 01.66 2 4 4 0 01-.43 1.8 3.63 3.63 0 01-1.09 1.4 3.89 3.89 0 01-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 001.1-.49 1.41 1.41 0 00.41-1 1.49 1.49 0 00-.35-1 1.54 1.54 0 00-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 001.88-.09 1.65 1.65 0 001-.54 1.6 1.6 0 00.38-1.14 1.75 1.75 0 00-.29-1 1.69 1.69 0 00-.86-.62 9.28 9.28 0 00-2.41-.23zM44.35 28.79l2.65.84a5.94 5.94 0 01-2 3.29A5.74 5.74 0 0141.38 34a5.87 5.87 0 01-4.44-1.84 7.09 7.09 0 01-1.73-5A7.43 7.43 0 0137 21.87 6 6 0 0141.54 20a5.64 5.64 0 014 1.47A5.33 5.33 0 0147 24l-2.7.65a2.8 2.8 0 00-2.86-2.27A3.09 3.09 0 0039 23.42a5.31 5.31 0 00-.93 3.5 5.62 5.62 0 00.93 3.65 3 3 0 002.4 1.09 2.72 2.72 0 001.82-.66 4 4 0 001.13-2.21z"
 })));
 
@@ -3490,11 +3962,11 @@ function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : func
 var TextfieldIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$2({
+}) => /*#__PURE__*/React.createElement("svg", _extends$2({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   d: "M45 16a3 3 0 013 3v16a3 3 0 01-3 3H9a3 3 0 01-3-3V19a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v16a1 1 0 001 1h36a1 1 0 001-1V19a1 1 0 00-1-1zm-32 4v10h-2V22h2z"
 })));
@@ -3503,11 +3975,11 @@ function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : func
 var TextareaIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends$1({
+}) => /*#__PURE__*/React.createElement("svg", _extends$1({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   d: "M45 13a3 3 0 013 3v22a3 3 0 01-3 3H9a3 3 0 01-3-3V16a3 3 0 013-3h36zm0 2H9a1 1 0 00-1 1v22a1 1 0 001 1h36a1 1 0 001-1V16a1 1 0 00-1-1zm-1.136 15.5l.848.849-6.363 6.363-.849-.848 6.364-6.364zm.264 3.5l.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
 })));
@@ -3516,17 +3988,17 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 var ImageIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends({
+}) => /*#__PURE__*/React.createElement("svg", _extends({
   width: "54",
   height: "54",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M34.636 21.91A3.818 3.818 0 1127 21.908a3.818 3.818 0 017.636 0zm-2 0A1.818 1.818 0 1129 21.908a1.818 1.818 0 013.636 0z",
   fill: "#000"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
+}), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M15 13a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V15a2 2 0 00-2-2H15zm24 2H15v12.45l4.71-4.709a1.91 1.91 0 012.702 0l6.695 6.695 2.656-1.77a1.91 1.91 0 012.411.239L39 32.73V15zM15 39v-8.754c.06-.038.116-.083.168-.135l5.893-5.893 6.684 6.685a1.911 1.911 0 002.41.238l2.657-1.77 6.02 6.02c.052.051.108.097.168.135V39H15z",
@@ -3550,226 +4022,13 @@ const iconsByType = {
   default: FormIcon
 };
 
-const type$2 = 'text';
-function Text(props) {
-  const {
-    field,
-    disabled
-  } = props;
-  const {
-    text = ''
-  } = field;
-  const textValue = useExpressionValue(text) || '';
-  return jsxRuntime.jsx("div", {
-    class: formFieldClasses(type$2),
-    children: renderText(field, textValue, disabled)
-  });
-}
-Text.create = function (options = {}) {
-  return {
-    text: '# Text',
-    ...options
-  };
-};
-Text.type = type$2;
-Text.keyed = false;
-
-// helper //////////////
-
-function renderText(field, content, disabled) {
-  const {
-    text
-  } = field;
-  const Icon = iconsByType['text'];
-  if (disabled) {
-    if (!text) {
-      return jsxRuntime.jsxs("div", {
-        class: "fjs-form-field-placeholder",
-        children: [jsxRuntime.jsx(Icon, {
-          viewBox: "0 0 54 54"
-        }), "Text view is empty"]
-      });
-    }
-    if (isExpression$2(text)) {
-      return jsxRuntime.jsxs("div", {
-        class: "fjs-form-field-placeholder",
-        children: [jsxRuntime.jsx(Icon, {
-          viewBox: "0 0 54 54"
-        }), "Text view is populated by an expression"]
-      });
-    }
-  }
-  return jsxRuntime.jsx(Markup__default['default'], {
-    markup: safeMarkdown(content),
-    trim: false
-  });
-}
-
-const type$1 = 'textfield';
-function Textfield(props) {
-  const {
-    disabled,
-    errors = [],
-    field,
-    value = ''
-  } = props;
-  const {
-    description,
-    id,
-    label,
-    appearance = {},
-    validate = {}
-  } = field;
-  const {
-    prefixAdorner,
-    suffixAdorner
-  } = appearance;
-  const {
-    required
-  } = validate;
-  const onChange = ({
-    target
-  }) => {
-    props.onChange({
-      field,
-      value: target.value
-    });
-  };
-  const {
-    formId
-  } = hooks.useContext(FormContext);
-  return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$1, {
-      errors,
-      disabled
-    }),
-    children: [jsxRuntime.jsx(Label, {
-      id: prefixId(id, formId),
-      label: label,
-      required: required
-    }), jsxRuntime.jsx(InputAdorner, {
-      disabled: disabled,
-      pre: prefixAdorner,
-      post: suffixAdorner,
-      children: jsxRuntime.jsx("input", {
-        class: "fjs-input",
-        disabled: disabled,
-        id: prefixId(id, formId),
-        onInput: onChange,
-        type: "text",
-        value: value
-      })
-    }), jsxRuntime.jsx(Description, {
-      description: description
-    }), jsxRuntime.jsx(Errors, {
-      errors: errors
-    })]
-  });
-}
-Textfield.create = function (options = {}) {
-  return {
-    ...options
-  };
-};
-Textfield.type = type$1;
-Textfield.label = 'Text field';
-Textfield.keyed = true;
-Textfield.emptyValue = '';
-Textfield.sanitizeValue = ({
-  value
-}) => minDash.isArray(value) || minDash.isObject(value) ? '' : String(value);
-
-const type = 'textarea';
-function Textarea(props) {
-  const {
-    disabled,
-    errors = [],
-    field,
-    value = ''
-  } = props;
-  const {
-    description,
-    id,
-    label,
-    validate = {}
-  } = field;
-  const {
-    required
-  } = validate;
-  const textareaRef = hooks.useRef();
-  const onInput = ({
-    target
-  }) => {
-    props.onChange({
-      field,
-      value: target.value
-    });
-  };
-  const autoSizeTextarea = hooks.useCallback(textarea => {
-    // Ensures the textarea shrinks back, and improves resizing behavior consistency
-    textarea.style.height = '0px';
-    const computed = window.getComputedStyle(textarea);
-    const calculatedHeight = parseInt(computed.getPropertyValue('border-top-width')) + parseInt(computed.getPropertyValue('padding-top')) + textarea.scrollHeight + parseInt(computed.getPropertyValue('padding-bottom')) + parseInt(computed.getPropertyValue('border-bottom-width'));
-    const minHeight = 75;
-    const maxHeight = 350;
-    const displayHeight = Math.max(Math.min(calculatedHeight, maxHeight), minHeight);
-    textarea.style.height = `${displayHeight}px`;
-
-    // Overflow is hidden by default to hide scrollbar flickering
-    textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
-  }, []);
-  hooks.useEffect(() => {
-    autoSizeTextarea(textareaRef.current);
-  }, [autoSizeTextarea, value]);
-  const {
-    formId
-  } = hooks.useContext(FormContext);
-  return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type, {
-      errors,
-      disabled
-    }),
-    children: [jsxRuntime.jsx(Label, {
-      id: prefixId(id, formId),
-      label: label,
-      required: required
-    }), jsxRuntime.jsx("textarea", {
-      class: "fjs-textarea",
-      disabled: disabled,
-      id: prefixId(id, formId),
-      onInput: onInput,
-      value: value,
-      ref: textareaRef
-    }), jsxRuntime.jsx(Description, {
-      description: description
-    }), jsxRuntime.jsx(Errors, {
-      errors: errors
-    })]
-  });
-}
-Textarea.create = function (options = {}) {
-  return {
-    ...options
-  };
-};
-Textarea.type = type;
-Textarea.label = 'Text area';
-Textarea.keyed = true;
-Textarea.emptyValue = '';
-Textarea.sanitizeValue = ({
-  value
-}) => minDash.isArray(value) || minDash.isObject(value) ? '' : String(value);
-
 const formFields = [Button, Checkbox, Checklist, Default, Image, Numberfield, Datetime, Radio, Select, Taglist, Text, Textfield, Textarea];
 
 class FormFields {
   constructor() {
     this._formFields = {};
     formFields.forEach(formField => {
-      const {
-        type
-      } = formField;
-      this.register(type, formField);
+      this.register(formField.type, formField);
     });
   }
   register(type, formField) {
@@ -3811,7 +4070,7 @@ function Renderer(config, eventBus, form, injector) {
     if (!schema) {
       return null;
     }
-    return jsxRuntime.jsx(FormContext.Provider, {
+    return jsxRuntime.jsx(FormContext$1.Provider, {
       value: formContext,
       children: jsxRuntime.jsx(FormComponent, {
         onChange: onChange,
@@ -3869,7 +4128,7 @@ var core = {
  * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
  */
 
-const ids = new Ids__default['default']([32, 36, 1]);
+const ids = new Ids([32, 36, 1]);
 
 /**
  * The form.
@@ -4212,7 +4471,7 @@ class Form {
   }
 }
 
-const schemaVersion = 6;
+const schemaVersion = 7;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -4249,10 +4508,10 @@ exports.Datetime = Datetime;
 exports.Default = Default;
 exports.Form = Form;
 exports.FormComponent = FormComponent;
-exports.FormContext = FormContext;
+exports.FormContext = FormContext$1;
 exports.FormFieldRegistry = FormFieldRegistry;
 exports.FormFields = FormFields;
-exports.FormRenderContext = FormRenderContext;
+exports.FormRenderContext = FormRenderContext$1;
 exports.Image = Image;
 exports.MINUTES_IN_DAY = MINUTES_IN_DAY;
 exports.Numberfield = Numberfield;
@@ -4281,9 +4540,12 @@ exports.findErrors = findErrors;
 exports.formFields = formFields;
 exports.generateIdForType = generateIdForType;
 exports.generateIndexForType = generateIndexForType;
+exports.getExpressionVariableNames = getExpressionVariableNames;
 exports.getSchemaVariables = getSchemaVariables;
 exports.getValuesSource = getValuesSource;
+exports.getVariableNames = getVariableNames;
 exports.iconsByType = iconsByType;
+exports.isExpression = isExpression$1;
 exports.isRequired = isRequired;
 exports.pathParse = pathParse;
 exports.pathStringify = pathStringify;