@bpmn-io/form-js-viewer 0.10.0-alpha.3 → 0.10.1

package/dist/index.es.js

@@ -1,19 +1,20 @@
 import Ids from 'ids';
-import { isString, isArray, isFunction, isNumber, bind, assign, isNil, get, isUndefined, isObject, set } from 'min-dash';
+import { isString, isArray, isFunction, isNumber, bind, assign, isNil, get, isUndefined, set, isObject } from 'min-dash';
 import { unaryTest, evaluate, parseUnaryTests, parseExpressions } from 'feelin';
 import Big from 'big.js';
 import snarkdown from '@bpmn-io/snarkdown';
 import classNames from 'classnames';
 import { jsx, jsxs } from 'preact/jsx-runtime';
-import { useContext, useState, useEffect, useRef, useMemo, useCallback } from 'preact/hooks';
+import { useContext, useState, useEffect, useRef, useCallback, useMemo } from 'preact/hooks';
 import { createContext, createElement, Fragment, render } from 'preact';
 import React, { createPortal } from 'preact/compat';
+import flatpickr from 'flatpickr';
 import Markup from 'preact-markup';
 import { Injector } from 'didi';
 
-/**
- * @typedef {object} Condition
- * @property {string} [hide]
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
  */
 
 class ConditionChecker {
@@ -22,11 +23,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();
@@ -45,13 +46,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) {
@@ -72,12 +73,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) {
@@ -87,13 +88,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) {
@@ -702,11 +703,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 = parseUnaryTests(unaryTest);
@@ -721,11 +722,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 = parseExpressions(expression);
@@ -739,6 +740,71 @@ function getExpressionVariableNames(expression) {
   } while (cursor.next());
   return Array.from(variables);
 }
+function isExpression$2(value) {
+  return isString(value) && value.startsWith('=');
+}
+
+// config  ///////////////////
+
+const MINUTES_IN_DAY = 60 * 24;
+const DATETIME_SUBTYPES = {
+  DATE: 'date',
+  TIME: 'time',
+  DATETIME: 'datetime'
+};
+const TIME_SERIALISING_FORMATS = {
+  UTC_OFFSET: 'utc_offset',
+  UTC_NORMALIZED: 'utc_normalized',
+  NO_TIMEZONE: 'no_timezone'
+};
+const DATETIME_SUBTYPES_LABELS = {
+  [DATETIME_SUBTYPES.DATE]: 'Date',
+  [DATETIME_SUBTYPES.TIME]: 'Time',
+  [DATETIME_SUBTYPES.DATETIME]: 'Date & Time'
+};
+const TIME_SERIALISINGFORMAT_LABELS = {
+  [TIME_SERIALISING_FORMATS.UTC_OFFSET]: 'UTC offset',
+  [TIME_SERIALISING_FORMATS.UTC_NORMALIZED]: 'UTC normalized',
+  [TIME_SERIALISING_FORMATS.NO_TIMEZONE]: 'No timezone'
+};
+const DATETIME_SUBTYPE_PATH = ['subtype'];
+const DATE_LABEL_PATH = ['dateLabel'];
+const DATE_DISALLOW_PAST_PATH = ['disallowPassedDates'];
+const TIME_LABEL_PATH = ['timeLabel'];
+const TIME_USE24H_PATH = ['use24h'];
+const TIME_INTERVAL_PATH = ['timeInterval'];
+const TIME_SERIALISING_FORMAT_PATH = ['timeSerializingFormat'];
+
+// config  ///////////////////
+
+const VALUES_SOURCES = {
+  STATIC: 'static',
+  INPUT: 'input'
+};
+const VALUES_SOURCE_DEFAULT = VALUES_SOURCES.STATIC;
+const VALUES_SOURCES_LABELS = {
+  [VALUES_SOURCES.STATIC]: 'Static',
+  [VALUES_SOURCES.INPUT]: 'Input data'
+};
+const VALUES_SOURCES_PATHS = {
+  [VALUES_SOURCES.STATIC]: ['values'],
+  [VALUES_SOURCES.INPUT]: ['valuesKey']
+};
+const VALUES_SOURCES_DEFAULTS = {
+  [VALUES_SOURCES.STATIC]: [],
+  [VALUES_SOURCES.INPUT]: ''
+};
+
+// helpers ///////////////////
+
+function getValuesSource(field) {
+  for (const source of Object.values(VALUES_SOURCES)) {
+    if (get(field, VALUES_SOURCES_PATHS[source]) !== undefined) {
+      return source;
+    }
+  }
+  return VALUES_SOURCE_DEFAULT;
+}
 
 function createInjector(bootstrapModules) {
   const injector = new Injector(bootstrapModules);
@@ -746,10 +812,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');
@@ -757,7 +823,7 @@ function createFormContainer(prefix = 'fjs') {
   return container;
 }
 
-const EXPRESSION_PROPERTIES = ['alt', 'source'];
+const EXPRESSION_PROPERTIES = ['alt', 'source', 'text'];
 function findErrors(errors, path) {
   return errors[pathStringify(path)];
 }
@@ -794,22 +860,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) {
@@ -822,7 +888,7 @@ function getSchemaVariables(schema) {
       type,
       conditional
     } = component;
-    if (['text', 'button'].includes(type)) {
+    if (['button'].includes(type)) {
       return variables;
     }
     if (key) {
@@ -858,25 +924,25 @@ function isExpression$1(value) {
 }
 
 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
@@ -895,11 +961,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 {
@@ -950,10 +1016,10 @@ class Importer {
     });
   }
 
-  /**
-   * @param {Object} data
-   *
-   * @return {Object} initializedData
+  /**
+   * @param {Object} data
+   *
+   * @return {Object} initializedData
    */
   initializeFieldValues(data) {
     return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -995,7 +1061,7 @@ var importModule = {
 
 const NODE_TYPE_TEXT = 3,
   NODE_TYPE_ELEMENT = 1;
-const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'span', 'em', 'a', 'p', 'div', 'ul', 'ol', 'li', 'hr', 'blockquote', 'img', 'pre', 'code', 'br', 'strong'];
+const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'em', 'a', 'p', 'div', 'ul', 'ol', 'li', 'hr', 'blockquote', 'img', 'pre', 'code', 'br', 'strong'];
 const ALLOWED_ATTRIBUTES = ['align', 'alt', 'class', 'href', 'id', 'name', 'rel', 'target', 'src'];
 const ALLOWED_URI_PATTERN = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i; // eslint-disable-line no-useless-escape
 const ALLOWED_IMAGE_SRC_PATTERN = /^(https?|data):.*/i; // eslint-disable-line no-useless-escape
@@ -1003,11 +1069,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');
@@ -1027,15 +1093,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
@@ -1079,13 +1145,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
@@ -1127,7 +1193,7 @@ function prefixId(id, formId) {
   return `fjs-form-${id}`;
 }
 function markdownToHTML(markdown) {
-  const htmls = markdown.split(/(?:\r?\n){2,}/).map(line => /^((\d+.)|[><\s#-*])/.test(line) ? snarkdown(line) : `<p>${snarkdown(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');
 }
 
@@ -1137,58 +1203,20 @@ 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);
 }
-function sanitizeSingleSelectValue(options) {
-  const {
-    formField,
-    data,
-    value
-  } = options;
-  const {
-    valuesKey,
-    values
-  } = formField;
-  try {
-    const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
-    return validValues.includes(value) ? value : null;
-  } catch (error) {
-    // use default value in case of formatting error
-    // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
-    return null;
-  }
-}
-function sanitizeMultiSelectValue(options) {
-  const {
-    formField,
-    data,
-    value
-  } = options;
-  const {
-    valuesKey,
-    values
-  } = formField;
-  try {
-    const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
-    return value.filter(v => validValues.includes(v));
-  } catch (error) {
-    // use default value in case of formatting error
-    // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
-    return [];
-  }
-}
 
-const type$a = 'button';
+const type$b = 'button';
 function Button(props) {
   const {
     disabled,
@@ -1198,7 +1226,7 @@ function Button(props) {
     action = 'submit'
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$a),
+    class: formFieldClasses(type$b),
     children: jsx("button", {
       class: "fjs-button",
       type: action,
@@ -1213,7 +1241,7 @@ Button.create = function (options = {}) {
     ...options
   };
 };
-Button.type = type$a;
+Button.type = type$b;
 Button.label = 'Button';
 Button.keyed = true;
 
@@ -1229,11 +1257,11 @@ const FormRenderContext = createContext({
   }
 });
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const FormContext = createContext({
@@ -1277,11 +1305,14 @@ function Label(props) {
   const {
     id,
     label,
+    collapseOnEmpty = true,
     required = false
   } = props;
   return jsxs("label", {
     for: id,
-    class: classNames('fjs-form-field-label', props['class']),
+    class: classNames('fjs-form-field-label', {
+      'fjs-incollapsible-label': !collapseOnEmpty
+    }, props['class']),
     children: [props.children, label || '', required && jsx("span", {
       class: "fjs-asterix",
       children: "*"
@@ -1289,7 +1320,7 @@ function Label(props) {
   });
 }
 
-const type$9 = 'checkbox';
+const type$a = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
@@ -1314,7 +1345,7 @@ function Checkbox(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$9, {
+    class: classNames(formFieldClasses(type$a, {
       errors,
       disabled
     }), {
@@ -1344,7 +1375,7 @@ Checkbox.create = function (options = {}) {
     ...options
   };
 };
-Checkbox.type = type$9;
+Checkbox.type = type$a;
 Checkbox.label = 'Checkbox';
 Checkbox.keyed = true;
 Checkbox.emptyValue = false;
@@ -1359,8 +1390,8 @@ function useService (type, strict) {
   return getService(type, strict);
 }
 
-/**
- * @enum { String }
+/**
+ * @enum { String }
  */
 const LOAD_STATES = {
   LOADING: 'loading',
@@ -1368,17 +1399,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 {
@@ -1419,7 +1450,222 @@ const buildLoadedState = values => ({
   state: LOAD_STATES.LOADED
 });
 
-const type$8 = 'checklist';
+const ENTER_KEYDOWN_EVENT = new KeyboardEvent('keydown', {
+  code: 'Enter',
+  key: 'Enter',
+  charCode: 13,
+  keyCode: 13,
+  view: window,
+  bubbles: true
+});
+function focusRelevantFlatpickerDay(flatpickrInstance) {
+  if (!flatpickrInstance) return;
+  !flatpickrInstance.isOpen && flatpickrInstance.open();
+  const container = flatpickrInstance.calendarContainer;
+  const dayToFocus = container.querySelector('.flatpickr-day.selected') || container.querySelector('.flatpickr-day.today') || container.querySelector('.flatpickr-day');
+  dayToFocus && dayToFocus.focus();
+}
+function formatTime(use24h, minutes) {
+  if (minutes === null) return null;
+  const wrappedMinutes = minutes % (24 * 60);
+  const minute = minutes % 60;
+  let hour = Math.floor(wrappedMinutes / 60);
+  if (use24h) {
+    return _getZeroPaddedString(hour) + ':' + _getZeroPaddedString(minute);
+  }
+  hour = hour % 12 || 12;
+  const isPM = wrappedMinutes >= 12 * 60;
+  return _getZeroPaddedString(hour) + ':' + _getZeroPaddedString(minute) + ' ' + (isPM ? 'PM' : 'AM');
+}
+function parseInputTime(stringTime) {
+  let workingString = stringTime.toLowerCase();
+  const is12h = workingString.includes('am') || workingString.includes('pm');
+  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 isValidDisplayHour = isNumber(displayHour) && displayHour >= 1 && displayHour <= 12;
+    const isValidMinute = minute >= 0 && minute <= 59;
+    if (!isValidDisplayHour || !isValidMinute) return null;
+    const hour = displayHour % 12 + (isPM ? 12 : 0);
+    return hour * 60 + minute;
+  } else {
+    const digits = workingString.match(/\d+/g);
+    const hour = parseInt(digits?.[0]);
+    const minute = parseInt(digits?.[1]);
+    const isValidHour = isNumber(hour) && hour >= 0 && hour <= 23;
+    const isValidMinute = isNumber(minute) && minute >= 0 && minute <= 59;
+    if (!isValidHour || !isValidMinute) return null;
+    return hour * 60 + minute;
+  }
+}
+function serializeTime(minutes, offset, timeSerializingFormat) {
+  if (timeSerializingFormat === TIME_SERIALISING_FORMATS.UTC_NORMALIZED) {
+    const normalizedMinutes = (minutes + offset + MINUTES_IN_DAY) % MINUTES_IN_DAY;
+    return _getZeroPaddedString(Math.floor(normalizedMinutes / 60)) + ':' + _getZeroPaddedString(normalizedMinutes % 60) + 'Z';
+  }
+  const baseTime = _getZeroPaddedString(Math.floor(minutes / 60)) + ':' + _getZeroPaddedString(minutes % 60);
+  const addUTCOffset = timeSerializingFormat === TIME_SERIALISING_FORMATS.UTC_OFFSET;
+  return baseTime + (addUTCOffset ? formatTimezoneOffset(offset) : '');
+}
+function parseIsoTime(isoTimeString) {
+  if (!isoTimeString) return null;
+  const parseBasicMinutes = timeString => {
+    const timeSegments = timeString.split(':');
+    const hour = parseInt(timeSegments[0]);
+    const minute = timeSegments.length > 1 ? parseInt(timeSegments[1]) : 0;
+    if (isNaN(hour) || hour < 0 || hour > 24 || isNaN(minute) || minute < 0 || minute > 60) return null;
+    return hour * 60 + minute;
+  };
+  const localOffset = new Date().getTimezoneOffset();
+
+  // Parse normalized time
+  if (isoTimeString.includes('Z')) {
+    isoTimeString = isoTimeString.replace('Z', '');
+    const minutes = parseBasicMinutes(isoTimeString);
+    if (minutes === null) return null;
+    return (minutes - localOffset + MINUTES_IN_DAY) % MINUTES_IN_DAY;
+  }
+
+  // Parse offset positive time
+  else if (isoTimeString.includes('+')) {
+    const [timeString, offsetString] = isoTimeString.split('+');
+    const minutes = parseBasicMinutes(timeString);
+    let inboundOffset = parseBasicMinutes(offsetString);
+    if (minutes === null || inboundOffset === null) return null;
+
+    // The offset is flipped for consistency with javascript
+    inboundOffset = -inboundOffset;
+    return (minutes + inboundOffset - localOffset + MINUTES_IN_DAY) % MINUTES_IN_DAY;
+  }
+
+  // Parse offset negative time
+  else if (isoTimeString.includes('-')) {
+    const [timeString, offsetString] = isoTimeString.split('-');
+    const minutes = parseBasicMinutes(timeString);
+    let inboundOffset = parseBasicMinutes(offsetString);
+    if (minutes === null || inboundOffset === null) return null;
+    return (minutes + inboundOffset - localOffset + MINUTES_IN_DAY) % MINUTES_IN_DAY;
+  }
+
+  // Default to local parsing
+  else {
+    return parseBasicMinutes(isoTimeString);
+  }
+}
+function serializeDate(date) {
+  var d = new Date(date),
+    month = '' + (d.getMonth() + 1),
+    day = '' + d.getDate(),
+    year = d.getFullYear();
+  if (month.length < 2) month = '0' + month;
+  if (day.length < 2) day = '0' + day;
+  return [year, month, day].join('-');
+}
+
+// this method is used to make the `new Date(value)` parsing behavior stricter
+function isDateTimeInputInformationSufficient(value) {
+  if (!value || typeof value !== 'string') return false;
+  const segments = value.split('T');
+  if (segments.length != 2) return false;
+  const dateNumbers = segments[0].split('-');
+  if (dateNumbers.length != 3) return false;
+  return true;
+}
+
+// this method checks if the date isn't a datetime, or a partial date
+function isDateInputInformationMatching(value) {
+  if (!value || typeof value !== 'string') return false;
+  if (value.includes('T')) return false;
+  const dateNumbers = value.split('-');
+  if (dateNumbers.length != 3) return false;
+  return true;
+}
+function serializeDateTime(date, time, timeSerializingFormat) {
+  const workingDate = new Date();
+  workingDate.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
+  workingDate.setHours(Math.floor(time / 60), time % 60, 0, 0);
+  if (timeSerializingFormat === TIME_SERIALISING_FORMATS.UTC_NORMALIZED) {
+    const timezoneOffsetMinutes = workingDate.getTimezoneOffset();
+    const dayOffset = time + timezoneOffsetMinutes < 0 ? -1 : time + timezoneOffsetMinutes > MINUTES_IN_DAY ? 1 : 0;
+
+    // Apply the date rollover pre-emptively
+    workingDate.setHours(workingDate.getHours() + dayOffset * 24);
+  }
+  return serializeDate(workingDate) + 'T' + serializeTime(time, workingDate.getTimezoneOffset(), timeSerializingFormat);
+}
+function formatTimezoneOffset(minutes) {
+  return _getSignedPaddedHours(minutes) + ':' + _getZeroPaddedString(Math.abs(minutes % 60));
+}
+function isInvalidDateString(value) {
+  return isNaN(new Date(Date.parse(value)).getTime());
+}
+function _getSignedPaddedHours(minutes) {
+  if (minutes > 0) {
+    return '-' + _getZeroPaddedString(Math.floor(minutes / 60));
+  } else {
+    return '+' + _getZeroPaddedString(Math.floor((0 - minutes) / 60));
+  }
+}
+function _getZeroPaddedString(time) {
+  return time.toString().padStart(2, '0');
+}
+
+function sanitizeDateTimePickerValue(options) {
+  const {
+    formField,
+    value
+  } = options;
+  const {
+    subtype
+  } = formField;
+  if (typeof value !== 'string') return null;
+  if (subtype === DATETIME_SUBTYPES.DATE && (isInvalidDateString(value) || !isDateInputInformationMatching(value))) return null;
+  if (subtype === DATETIME_SUBTYPES.TIME && parseIsoTime(value) === null) return null;
+  if (subtype === DATETIME_SUBTYPES.DATETIME && (isInvalidDateString(value) || !isDateTimeInputInformationSufficient(value))) return null;
+  return value;
+}
+function sanitizeSingleSelectValue(options) {
+  const {
+    formField,
+    data,
+    value
+  } = options;
+  const {
+    valuesKey,
+    values
+  } = formField;
+  try {
+    const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
+    return validValues.includes(value) ? value : null;
+  } catch (error) {
+    // use default value in case of formatting error
+    // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
+    return null;
+  }
+}
+function sanitizeMultiSelectValue(options) {
+  const {
+    formField,
+    data,
+    value
+  } = options;
+  const {
+    valuesKey,
+    values
+  } = formField;
+  try {
+    const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
+    return value.filter(v => validValues.includes(v));
+  } catch (error) {
+    // use default value in case of formatting error
+    // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
+    return [];
+  }
+}
+
+const type$9 = 'checklist';
 function Checklist(props) {
   const {
     disabled,
@@ -1452,7 +1698,7 @@ function Checklist(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$8, {
+    class: classNames(formFieldClasses(type$9, {
       errors,
       disabled
     })),
@@ -1492,26 +1738,33 @@ Checklist.create = function (options = {}) {
     ...options
   };
 };
-Checklist.type = type$8;
+Checklist.type = type$9;
 Checklist.label = 'Checklist';
 Checklist.keyed = true;
 Checklist.emptyValue = [];
 Checklist.sanitizeValue = sanitizeMultiSelectValue;
 
-/**
- * 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;
   const conditionChecker = useService('conditionChecker', false);
   if (!conditionChecker) {
     return null;
   }
-  return conditionChecker.check(condition, data);
+
+  // make sure we do not use data from hidden fields
+  const filteredData = {
+    ...initialData,
+    ...conditionChecker.applyConditions(data, data)
+  };
+  return conditionChecker.check(condition, filteredData);
 }
 
 const noop$1 = () => false;
@@ -1593,32 +1846,688 @@ Default.create = function (options = {}) {
 Default.type = 'default';
 Default.keyed = false;
 
-/**
- * This file must not be changed or exchanged.
- *
- * @see http://bpmn.io/license for more information.
- */
-function Logo() {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 14.02 5.57",
-    width: "53",
-    height: "21",
-    style: "vertical-align:middle",
-    children: [jsx("path", {
-      fill: "currentColor",
-      d: "M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"
-    }), jsx("path", {
-      fill: "currentColor",
-      d: "M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"
+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 CalendarIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$h({
+  width: "14",
+  height: "15",
+  viewBox: "0 0 28 30",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, 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"
+})));
+
+function InputAdorner(props) {
+  const {
+    pre = null,
+    post = null,
+    rootRef,
+    inputRef,
+    children,
+    disabled,
+    hasErrors
+  } = props;
+  const onAdornmentClick = () => inputRef?.current?.focus();
+  return jsxs("div", {
+    class: classNames('fjs-input-group', {
+      'disabled': disabled
+    }, {
+      'hasErrors': hasErrors
+    }),
+    ref: rootRef,
+    children: [pre !== null && jsxs("span", {
+      class: "fjs-input-adornment border-right border-radius-left",
+      onClick: onAdornmentClick,
+      children: [" ", pre, " "]
+    }), children, post !== null && jsxs("span", {
+      class: "fjs-input-adornment border-left border-radius-right",
+      onClick: onAdornmentClick,
+      children: [" ", post, " "]
     })]
   });
 }
-function Lightbox(props) {
+
+function Datepicker(props) {
   const {
-    open
-  } = props;
-  if (!open) {
+    id,
+    label,
+    collapseLabelOnEmpty,
+    formId,
+    required,
+    disabled,
+    disallowPassedDates,
+    date,
+    setDate
+  } = props;
+  const dateInputRef = useRef();
+  const focusScopeRef = useRef();
+  const [flatpickrInstance, setFlatpickrInstance] = useState(null);
+  const [isInputDirty, setIsInputDirty] = useState(false);
+  const [forceFocusCalendar, setForceFocusCalendar] = useState(false);
+
+  // shorts the date value back to the source
+  useEffect(() => {
+    if (!flatpickrInstance || !flatpickrInstance.config) return;
+    flatpickrInstance.setDate(date, true);
+    setIsInputDirty(false);
+  }, [flatpickrInstance, date.toString()]);
+  useEffect(() => {
+    if (!forceFocusCalendar) return;
+    focusRelevantFlatpickerDay(flatpickrInstance);
+    setForceFocusCalendar(false);
+  }, [flatpickrInstance, forceFocusCalendar]);
+
+  // setup flatpickr instance
+  useEffect(() => {
+    if (disabled) {
+      setFlatpickrInstance(null);
+      return;
+    }
+    let config = {
+      allowInput: true,
+      dateFormat: 'm/d/Y',
+      static: true,
+      clickOpens: false,
+      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(dateInputRef.current, config);
+    setFlatpickrInstance(instance);
+    const onCalendarFocusOut = e => {
+      if (!instance.calendarContainer.contains(e.relatedTarget) && e.relatedTarget != dateInputRef.current) {
+        instance.close();
+      }
+    };
+
+    // remove dirty tag to have mouse day selection prioritize input blur
+    const onCalendarMouseDown = e => {
+      if (e.target.classList.contains('flatpickr-day')) {
+        setIsInputDirty(false);
+      }
+    };
+
+    // when the dropdown of the datepickr opens, we register a few event handlers to re-implement some of the
+    // 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]);
+
+  // onChange is updated dynamically, so not to re-render the flatpicker every time it changes
+  useEffect(() => {
+    if (!flatpickrInstance || !flatpickrInstance.config) return;
+    flatpickrInstance.config.onChange = [date => setDate(new Date(date)), () => setIsInputDirty(false)];
+  }, [flatpickrInstance, setDate]);
+  const onInputKeyDown = useCallback(e => {
+    if (!flatpickrInstance) return;
+    if (e.code === 'Escape') {
+      flatpickrInstance.close();
+    }
+    if (e.code === 'ArrowDown') {
+      if (isInputDirty) {
+        // trigger an enter keypress to submit the new input, then focus calendar day on the next render cycle
+        dateInputRef.current.dispatchEvent(ENTER_KEYDOWN_EVENT);
+        setIsInputDirty(false);
+        setForceFocusCalendar(true);
+      } else {
+        // focus calendar day immediately
+        focusRelevantFlatpickerDay(flatpickrInstance);
+      }
+      e.preventDefault();
+    }
+    if (e.code === 'Enter') {
+      setIsInputDirty(false);
+    }
+  }, [flatpickrInstance, isInputDirty]);
+  const onInputFocus = useCallback(e => {
+    if (!flatpickrInstance || focusScopeRef.current.contains(e.relatedTarget)) return;
+    flatpickrInstance.open();
+  }, [flatpickrInstance]);
+
+  // simulate an enter press on blur to make sure the date value is submitted in all scenarios
+  const onInputBlur = useCallback(e => {
+    if (!isInputDirty || e.relatedTarget && e.relatedTarget.classList.contains('flatpickr-day')) return;
+    dateInputRef.current.dispatchEvent(ENTER_KEYDOWN_EVENT);
+    setIsInputDirty(false);
+  }, [isInputDirty]);
+  const fullId = `${prefixId(id, formId)}--date`;
+  return jsxs("div", {
+    class: "fjs-datetime-subsection",
+    children: [jsx(Label, {
+      id: fullId,
+      label: label,
+      collapseOnEmpty: collapseLabelOnEmpty,
+      required: required
+    }), jsx(InputAdorner, {
+      pre: jsx(CalendarIcon, {}),
+      disabled: disabled,
+      rootRef: focusScopeRef,
+      inputRef: dateInputRef,
+      children: jsx("div", {
+        class: "fjs-datepicker",
+        style: {
+          width: '100%'
+        },
+        children: jsx("input", {
+          ref: dateInputRef,
+          type: "text",
+          id: fullId,
+          class: 'fjs-input',
+          disabled: disabled,
+          placeholder: "mm/dd/yyyy",
+          autoComplete: "false",
+          onFocus: onInputFocus,
+          onKeyDown: onInputKeyDown,
+          onMouseDown: e => !flatpickrInstance.isOpen && flatpickrInstance.open(),
+          onBlur: onInputBlur,
+          onInput: e => setIsInputDirty(true),
+          "data-input": true
+        })
+      })
+    })]
+  });
+}
+
+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 ClockIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$g({
+  width: "16",
+  height: "16",
+  viewBox: "0 0 28 29",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z",
+  fill: "#000"
+}), /*#__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"
+})));
+
+function useKeyDownAction(targetKey, action, listenerElement = window) {
+  function downHandler({
+    key
+  }) {
+    if (key === targetKey) {
+      action();
+    }
+  }
+  useEffect(() => {
+    listenerElement.addEventListener('keydown', downHandler);
+    return () => {
+      listenerElement.removeEventListener('keydown', downHandler);
+    };
+  });
+}
+
+const DEFAULT_LABEL_GETTER = value => value;
+const NOOP = () => {};
+function DropdownList(props) {
+  const {
+    keyEventsListener = window,
+    values = [],
+    getLabel = DEFAULT_LABEL_GETTER,
+    onValueSelected = NOOP,
+    height = 235,
+    emptyListMessage = 'No results',
+    initialFocusIndex = 0
+  } = props;
+  const [mouseControl, setMouseControl] = useState(false);
+  const [focusedValueIndex, setFocusedValueIndex] = useState(initialFocusIndex);
+  const [smoothScrolling, setSmoothScrolling] = useState(false);
+  const dropdownContainer = useRef();
+  const mouseScreenPos = useRef();
+  const focusedItem = useMemo(() => values.length ? values[focusedValueIndex] : null, [focusedValueIndex, values]);
+  const changeFocusedValueIndex = useCallback(delta => {
+    setFocusedValueIndex(x => Math.min(Math.max(0, x + delta), values.length - 1));
+  }, [values.length]);
+  useEffect(() => {
+    if (focusedValueIndex === 0) return;
+    if (!focusedValueIndex || !values.length) {
+      setFocusedValueIndex(0);
+    } else if (focusedValueIndex >= values.length) {
+      setFocusedValueIndex(values.length - 1);
+    }
+  }, [focusedValueIndex, values.length]);
+  useKeyDownAction('ArrowUp', () => {
+    if (values.length) {
+      changeFocusedValueIndex(-1);
+      setMouseControl(false);
+    }
+  }, keyEventsListener);
+  useKeyDownAction('ArrowDown', () => {
+    if (values.length) {
+      changeFocusedValueIndex(1);
+      setMouseControl(false);
+    }
+  }, keyEventsListener);
+  useKeyDownAction('Enter', () => {
+    if (focusedItem) {
+      onValueSelected(focusedItem);
+    }
+  }, keyEventsListener);
+  useEffect(() => {
+    const individualEntries = dropdownContainer.current.children;
+    if (individualEntries.length && !mouseControl) {
+      individualEntries[focusedValueIndex].scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }, [focusedValueIndex, mouseControl]);
+  useEffect(() => {
+    setSmoothScrolling(true);
+  }, []);
+  const onMouseMovedInKeyboardMode = (event, valueIndex) => {
+    const userMovedCursor = !mouseScreenPos.current || mouseScreenPos.current.x !== event.screenX && mouseScreenPos.current.y !== event.screenY;
+    if (userMovedCursor) {
+      mouseScreenPos.current = {
+        x: event.screenX,
+        y: event.screenY
+      };
+      setMouseControl(true);
+      setFocusedValueIndex(valueIndex);
+    }
+  };
+  return jsxs("div", {
+    ref: dropdownContainer,
+    tabIndex: -1,
+    class: "fjs-dropdownlist",
+    style: {
+      maxHeight: height,
+      scrollBehavior: smoothScrolling ? 'smooth' : 'auto'
+    },
+    children: [values.length > 0 && values.map((v, i) => {
+      return jsx("div", {
+        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);
+        },
+        children: getLabel(v)
+      });
+    }), !values.length && jsx("div", {
+      class: "fjs-dropdownlist-empty",
+      children: emptyListMessage
+    })]
+  });
+}
+
+function Timepicker(props) {
+  const {
+    id,
+    label,
+    collapseLabelOnEmpty,
+    formId,
+    required,
+    disabled,
+    use24h = false,
+    timeInterval,
+    time,
+    setTime
+  } = props;
+  const timeInputRef = useRef();
+  const [dropdownIsOpen, setDropdownIsOpen] = useState(false);
+  const useDropdown = useMemo(() => timeInterval !== 1, [timeInterval]);
+  const [rawValue, setRawValue] = useState('');
+
+  // populates values from source
+  useEffect(() => {
+    if (time === null) {
+      setRawValue('');
+      return;
+    }
+    const intervalAdjustedTime = time - time % timeInterval;
+    setRawValue(formatTime(use24h, intervalAdjustedTime));
+    if (intervalAdjustedTime != time) {
+      setTime(intervalAdjustedTime);
+    }
+  }, [time, setTime, use24h, timeInterval]);
+  const propagateRawToMinute = useCallback(newRawValue => {
+    const localRawValue = newRawValue || rawValue;
+
+    // If no raw value exists, set the minute to null
+    if (!localRawValue) {
+      setTime(null);
+      return;
+    }
+    const minutes = parseInputTime(localRawValue);
+
+    // If raw string couldn't be parsed, clean everything up
+    if (!isNumber(minutes)) {
+      setRawValue('');
+      setTime(null);
+      return;
+    }
+
+    // Enforce the minutes to match the timeInterval
+    const correctedMinutes = minutes - minutes % timeInterval;
+
+    // Enforce the raw text to be formatted properly
+    setRawValue(formatTime(use24h, correctedMinutes));
+    setTime(correctedMinutes);
+  }, [rawValue, timeInterval, use24h, setTime]);
+  const timeOptions = useMemo(() => {
+    const minutesInDay = 24 * 60;
+    const intervalCount = Math.floor(minutesInDay / timeInterval);
+    return [...Array(intervalCount).keys()].map(intervalIndex => formatTime(use24h, intervalIndex * timeInterval));
+  }, [timeInterval, use24h]);
+  const initialFocusIndex = useMemo(() => {
+    // if there are no options, there will not be any focusing
+    if (!timeOptions || !timeInterval) return null;
+
+    // if there is a set minute value, we focus it in the dropdown
+    if (time) return time / timeInterval;
+    const cacheTime = parseInputTime(rawValue);
+
+    // if there is a valid value in the input cache, we try and focus close to it
+    if (cacheTime) {
+      const flooredCacheTime = cacheTime - cacheTime % timeInterval;
+      return flooredCacheTime / timeInterval;
+    }
+
+    // If there is no set value, simply focus the middle of the dropdown (12:00)
+    return Math.floor(timeOptions.length / 2);
+  }, [rawValue, time, timeInterval, timeOptions]);
+  const onInputKeyDown = e => {
+    switch (e.key) {
+      case 'ArrowUp':
+        e.preventDefault();
+        break;
+      case 'ArrowDown':
+        useDropdown && setDropdownIsOpen(true);
+        e.preventDefault();
+        break;
+      case 'Escape':
+        useDropdown && setDropdownIsOpen(false);
+        break;
+      case 'Enter':
+        !dropdownIsOpen && propagateRawToMinute();
+        break;
+    }
+  };
+  const onInputBlur = e => {
+    setDropdownIsOpen(false);
+    propagateRawToMinute();
+  };
+  const onDropdownValueSelected = value => {
+    setDropdownIsOpen(false);
+    propagateRawToMinute(value);
+  };
+  const fullId = `${prefixId(id, formId)}--time`;
+  return jsxs("div", {
+    class: "fjs-datetime-subsection",
+    children: [jsx(Label, {
+      id: fullId,
+      label: label,
+      collapseOnEmpty: collapseLabelOnEmpty,
+      required: required
+    }), jsx(InputAdorner, {
+      pre: jsx(ClockIcon, {}),
+      inputRef: timeInputRef,
+      disabled: disabled,
+      children: jsxs("div", {
+        class: "fjs-timepicker fjs-timepicker-anchor",
+        children: [jsx("input", {
+          ref: timeInputRef,
+          type: "text",
+          id: fullId,
+          class: "fjs-input",
+          value: rawValue,
+          disabled: disabled,
+          placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
+          autoComplete: "false",
+          onFocus: () => useDropdown && setDropdownIsOpen(true),
+          onClick: () => useDropdown && setDropdownIsOpen(true)
+
+          // @ts-ignore
+          ,
+          onInput: e => {
+            setRawValue(e.target.value);
+            useDropdown && setDropdownIsOpen(false);
+          },
+          onBlur: onInputBlur,
+          onKeyDown: onInputKeyDown,
+          "data-input": true
+        }), dropdownIsOpen && jsx(DropdownList, {
+          values: timeOptions,
+          height: 150,
+          onValueSelected: onDropdownValueSelected,
+          listenerElement: timeInputRef.current,
+          initialFocusIndex: initialFocusIndex
+        })]
+      })
+    })]
+  });
+}
+
+const type$8 = 'datetime';
+function Datetime(props) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    onChange,
+    value = ''
+  } = props;
+  const {
+    description,
+    id,
+    dateLabel,
+    timeLabel,
+    validate = {},
+    subtype,
+    use24h,
+    disallowPassedDates,
+    timeInterval,
+    timeSerializingFormat
+  } = field;
+  const {
+    required
+  } = validate;
+  const {
+    formId
+  } = useContext(FormContext);
+  const getNullDateTime = () => ({
+    date: new Date(Date.parse(null)),
+    time: null
+  });
+  const [dateTime, setDateTime] = useState(getNullDateTime());
+  const [dateTimeUpdateRequest, setDateTimeUpdateRequest] = useState(null);
+  const isValidDate = date => date && !isNaN(date.getTime());
+  const isValidTime = time => !isNaN(parseInt(time));
+  const useDatePicker = useMemo(() => subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
+  const useTimePicker = useMemo(() => subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
+  useEffect(() => {
+    let {
+      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;
+          }
+      }
+    }
+    setDateTime({
+      date,
+      time
+    });
+  }, [subtype, value, disabled]);
+  const computeAndSetState = useCallback(({
+    date,
+    time
+  }) => {
+    let newDateTimeValue = null;
+    if (subtype === DATETIME_SUBTYPES.DATE && isValidDate(date)) {
+      newDateTimeValue = serializeDate(date);
+    } else if (subtype === DATETIME_SUBTYPES.TIME && isValidTime(time)) {
+      newDateTimeValue = serializeTime(time, new Date().getTimezoneOffset(), timeSerializingFormat);
+    } else if (subtype === DATETIME_SUBTYPES.DATETIME && isValidDate(date) && isValidTime(time)) {
+      newDateTimeValue = serializeDateTime(date, time, timeSerializingFormat);
+    }
+    onChange({
+      value: newDateTimeValue,
+      field
+    });
+  }, [field, onChange, subtype, timeSerializingFormat]);
+  useEffect(() => {
+    if (dateTimeUpdateRequest) {
+      if (dateTimeUpdateRequest.refreshOnly) {
+        computeAndSetState(dateTime);
+      } else {
+        const newDateTime = {
+          ...dateTime,
+          ...dateTimeUpdateRequest
+        };
+        setDateTime(newDateTime);
+        computeAndSetState(newDateTime);
+      }
+      setDateTimeUpdateRequest(null);
+    }
+  }, [computeAndSetState, dateTime, dateTimeUpdateRequest]);
+  useEffect(() => {
+    setDateTimeUpdateRequest({
+      refreshOnly: true
+    });
+  }, [timeSerializingFormat]);
+  const allErrors = useMemo(() => {
+    if (required || subtype !== DATETIME_SUBTYPES.DATETIME) return errors;
+    const isOnlyOneFieldSet = isValidDate(dateTime.date) && !isValidTime(dateTime.time) || !isValidDate(dateTime.date) && isValidTime(dateTime.time);
+    return isOnlyOneFieldSet ? ['Date and time must both be entered.', ...errors] : errors;
+  }, [required, subtype, dateTime, errors]);
+  const setDate = useCallback(date => {
+    setDateTimeUpdateRequest(prev => prev ? {
+      ...prev,
+      date
+    } : {
+      date
+    });
+  }, []);
+  const setTime = useCallback(time => {
+    setDateTimeUpdateRequest(prev => prev ? {
+      ...prev,
+      time
+    } : {
+      time
+    });
+  }, []);
+  const datePickerProps = {
+    id,
+    label: dateLabel,
+    collapseLabelOnEmpty: !timeLabel,
+    formId,
+    required,
+    disabled,
+    disallowPassedDates,
+    date: dateTime.date,
+    setDate
+  };
+  const timePickerProps = {
+    id,
+    label: timeLabel,
+    collapseLabelOnEmpty: !dateLabel,
+    formId,
+    required,
+    disabled,
+    use24h,
+    timeInterval,
+    time: dateTime.time,
+    setTime
+  };
+  return jsxs("div", {
+    class: formFieldClasses(type$8, {
+      errors: allErrors,
+      disabled
+    }),
+    children: [jsxs("div", {
+      class: classNames('fjs-vertical-group'),
+      children: [useDatePicker && jsx(Datepicker, {
+        ...datePickerProps
+      }), useTimePicker && useDatePicker && jsx("div", {
+        class: "fjs-datetime-separator"
+      }), useTimePicker && jsx(Timepicker, {
+        ...timePickerProps
+      })]
+    }), jsx(Description, {
+      description: description
+    }), jsx(Errors, {
+      errors: allErrors
+    })]
+  });
+}
+Datetime.create = function (options = {}) {
+  const newOptions = {};
+  set(newOptions, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
+  set(newOptions, DATE_LABEL_PATH, 'Date');
+  return {
+    ...newOptions,
+    ...options
+  };
+};
+Datetime.type = type$8;
+Datetime.keyed = true;
+Datetime.emptyValue = null;
+Datetime.sanitizeValue = sanitizeDateTimePickerValue;
+
+/**
+ * This file must not be changed or exchanged.
+ *
+ * @see http://bpmn.io/license for more information.
+ */
+function Logo() {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 14.02 5.57",
+    width: "53",
+    height: "21",
+    style: "vertical-align:middle",
+    children: [jsx("path", {
+      fill: "currentColor",
+      d: "M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"
+    }), jsx("path", {
+      fill: "currentColor",
+      d: "M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"
+    })]
+  });
+}
+function Lightbox(props) {
+  const {
+    open
+  } = props;
+  if (!open) {
     return null;
   }
   return jsxs("div", {
@@ -1713,22 +2622,29 @@ 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;
   const conditionChecker = useService('conditionChecker', false);
   if (!conditionChecker) {
     return null;
   }
-  return conditionChecker.evaluate(expression, data);
+
+  // make sure we do not use data from hidden fields
+  const filteredData = {
+    ...initialData,
+    ...conditionChecker.applyConditions(data, data)
+  };
+  return conditionChecker.evaluate(expression, filteredData);
 }
 
-/**
- *
- * @param {string} value
+/**
+ *
+ * @param {string} value
  */
 function useExpressionValue(value) {
   const formData = useService('form')._getState().data;
@@ -1748,11 +2664,11 @@ function isExpression(value) {
   return isString(value) && value.startsWith('=');
 }
 
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+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 ImagePlaceholder = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$1({
+}) => /*#__PURE__*/React.createElement("svg", _extends$f({
   width: "64",
   height: "64",
   viewBox: "0 0 1280 1280",
@@ -1832,11 +2748,16 @@ function Numberfield(props) {
     description,
     id,
     label,
+    appearance = {},
     validate = {},
     decimalDigits,
     serializeToString = false,
     increment: incrementValue
   } = field;
+  const {
+    prefixAdorner,
+    suffixAdorner
+  } = appearance;
   const {
     required
   } = validate;
@@ -1946,45 +2867,52 @@ function Numberfield(props) {
       id: prefixId(id, formId),
       label: label,
       required: required
-    }), jsxs("div", {
-      class: classNames('fjs-input-group', {
-        'disabled': disabled
-      }, {
-        'hasErrors': errors.length
-      }),
-      children: [jsx("input", {
-        ref: inputRef,
-        class: "fjs-input",
-        disabled: disabled,
-        id: prefixId(id, formId),
-        onKeyDown: onKeyDown,
-        onKeyPress: onKeyPress
-
-        // @ts-ignore
-        ,
-        onInput: e => setValue(e.target.value),
-        type: "text",
-        autoComplete: "off",
-        step: arrowIncrementValue,
-        value: displayValue
-      }), jsxs("div", {
-        class: classNames('fjs-number-arrow-container', {
+    }), jsx(InputAdorner, {
+      disabled: disabled,
+      pre: prefixAdorner,
+      post: suffixAdorner,
+      children: jsxs("div", {
+        class: classNames('fjs-vertical-group', {
           'disabled': disabled
+        }, {
+          'hasErrors': errors.length
         }),
-        children: [jsx("button", {
-          class: "fjs-number-arrow-up",
-          onClick: () => increment(),
-          tabIndex: -1,
-          children: "\u02C4"
-        }), jsx("div", {
-          class: "fjs-number-arrow-separator"
-        }), jsx("button", {
-          class: "fjs-number-arrow-down",
-          onClick: () => decrement(),
-          tabIndex: -1,
-          children: "\u02C5"
+        children: [jsx("input", {
+          ref: inputRef,
+          class: "fjs-input",
+          disabled: disabled,
+          id: prefixId(id, formId),
+          onKeyDown: onKeyDown,
+          onKeyPress: onKeyPress
+
+          // @ts-ignore
+          ,
+          onInput: e => setValue(e.target.value),
+          type: "text",
+          autoComplete: "off",
+          step: arrowIncrementValue,
+          value: displayValue
+        }), jsxs("div", {
+          class: classNames('fjs-number-arrow-container', {
+            'disabled': disabled
+          }),
+          children: [jsx("button", {
+            class: "fjs-number-arrow-up",
+            type: "button",
+            onClick: () => increment(),
+            tabIndex: -1,
+            children: "\u02C4"
+          }), jsx("div", {
+            class: "fjs-number-arrow-separator"
+          }), jsx("button", {
+            class: "fjs-number-arrow-down",
+            type: "button",
+            onClick: () => decrement(),
+            tabIndex: -1,
+            children: "\u02C5"
+          })]
         })]
-      })]
+      })
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
@@ -2167,11 +3095,11 @@ Select.keyed = true;
 Select.emptyValue = null;
 Select.sanitizeValue = sanitizeSingleSelectValue;
 
-function _extends() { _extends = 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.apply(this, arguments); }
+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 = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
+}) => /*#__PURE__*/React.createElement("svg", _extends$e({
   width: "16",
   height: "16",
   fill: "none",
@@ -2183,113 +3111,6 @@ var CloseIcon = (({
   fill: "currentColor"
 })));
 
-function useKeyDownAction(targetKey, action, listenerElement = window) {
-  function downHandler({
-    key
-  }) {
-    if (key === targetKey) {
-      action();
-    }
-  }
-  useEffect(() => {
-    listenerElement.addEventListener('keydown', downHandler);
-    return () => {
-      listenerElement.removeEventListener('keydown', downHandler);
-    };
-  });
-}
-
-const DEFAULT_LABEL_GETTER = value => value;
-const NOOP = () => {};
-function DropdownList(props) {
-  const {
-    keyEventsListener = window,
-    values = [],
-    getLabel = DEFAULT_LABEL_GETTER,
-    onValueSelected = NOOP,
-    height = 235,
-    emptyListMessage = 'No results'
-  } = props;
-  const [mouseControl, setMouseControl] = useState(true);
-  const [focusedValueIndex, setFocusedValueIndex] = useState(0);
-  const dropdownContainer = useRef();
-  const mouseScreenPos = useRef();
-  const focusedItem = useMemo(() => values.length ? values[focusedValueIndex] : null, [focusedValueIndex, values]);
-  const changeFocusedValueIndex = useCallback(delta => {
-    setFocusedValueIndex(x => Math.min(Math.max(0, x + delta), values.length - 1));
-  }, [values.length]);
-  useEffect(() => {
-    if (focusedValueIndex === 0) return;
-    if (!focusedValueIndex || !values.length) {
-      setFocusedValueIndex(0);
-    } else if (focusedValueIndex >= values.length) {
-      setFocusedValueIndex(values.length - 1);
-    }
-  }, [focusedValueIndex, values.length]);
-  useKeyDownAction('ArrowUp', () => {
-    if (values.length) {
-      changeFocusedValueIndex(-1);
-      setMouseControl(false);
-    }
-  }, keyEventsListener);
-  useKeyDownAction('ArrowDown', () => {
-    if (values.length) {
-      changeFocusedValueIndex(1);
-      setMouseControl(false);
-    }
-  }, keyEventsListener);
-  useKeyDownAction('Enter', () => {
-    if (focusedItem) {
-      onValueSelected(focusedItem);
-    }
-  }, keyEventsListener);
-  useEffect(() => {
-    const individualEntries = dropdownContainer.current.children;
-    if (individualEntries.length && !mouseControl) {
-      individualEntries[focusedValueIndex].scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest'
-      });
-    }
-  }, [focusedValueIndex, mouseControl]);
-  const mouseMove = (e, i) => {
-    const userMoved = !mouseScreenPos.current || mouseScreenPos.current.x !== e.screenX && mouseScreenPos.current.y !== e.screenY;
-    if (userMoved) {
-      mouseScreenPos.current = {
-        x: e.screenX,
-        y: e.screenY
-      };
-      if (!mouseControl) {
-        setMouseControl(true);
-        setFocusedValueIndex(i);
-      }
-    }
-  };
-  return jsxs("div", {
-    ref: dropdownContainer,
-    tabIndex: -1,
-    class: "fjs-dropdownlist",
-    style: {
-      maxHeight: height
-    },
-    children: [!!values.length && values.map((v, i) => {
-      return jsx("div", {
-        class: 'fjs-dropdownlist-item' + (focusedValueIndex === i ? ' focused' : ''),
-        onMouseMove: e => mouseMove(e, i),
-        onMouseEnter: mouseControl ? () => setFocusedValueIndex(i) : undefined,
-        onMouseDown: e => {
-          e.preventDefault();
-          onValueSelected(v);
-        },
-        children: getLabel(v)
-      });
-    }), !values.length && jsx("div", {
-      class: "fjs-dropdownlist-empty",
-      children: emptyListMessage
-    })]
-  });
-}
-
 const type$3 = 'taglist';
 function Taglist(props) {
   const {
@@ -2473,20 +3294,261 @@ Taglist.keyed = true;
 Taglist.emptyValue = [];
 Taglist.sanitizeValue = sanitizeMultiSelectValue;
 
+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.createElement("svg", _extends$d({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, 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"
+})));
+
+function _extends$c() { _extends$c = 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$c.apply(this, arguments); }
+var CheckboxIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$c({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, 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"
+})));
+
+function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
+var ChecklistIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$b({
+  width: "54",
+  height: "54",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, 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.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"
+})));
+
+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.createElement("svg", _extends$a({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54",
+  fill: "none"
+}, 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.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.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",
+  clipRule: "evenodd"
+})));
+
+function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
+var TaglistIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$9({
+  width: "54",
+  height: "54",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, 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.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"
+})));
+
+function _extends$8() { _extends$8 = 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$8.apply(this, arguments); }
+var FormIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$8({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React.createElement("rect", {
+  x: "15",
+  y: "17",
+  width: "24",
+  height: "4",
+  rx: "1"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "15",
+  y: "25",
+  width: "24",
+  height: "4",
+  rx: "1"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "15",
+  y: "33",
+  width: "13",
+  height: "4",
+  rx: "1"
+})));
+
+function _extends$7() { _extends$7 = 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$7.apply(this, arguments); }
+var ColumnsIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$7({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, 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"
+})));
+
+function _extends$6() { _extends$6 = 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$6.apply(this, arguments); }
+var NumberIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$6({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, 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"
+})));
+
+function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
+var RadioIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$5({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, 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"
+})));
+
+function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
+var SelectIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$4({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, 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"
+})));
+
+function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
+var TextIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$3({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, 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"
+})));
+
+function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
+var TextfieldIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$2({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, 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"
+})));
+
+function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+var TextareaIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$1({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, 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"
+})));
+
+function _extends() { _extends = 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.apply(this, arguments); }
+var ImageIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "54",
+  height: "54",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, 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.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",
+  fill: "#000"
+})));
+
+const iconsByType = {
+  button: ButtonIcon,
+  checkbox: CheckboxIcon,
+  checklist: ChecklistIcon,
+  columns: ColumnsIcon,
+  datetime: DatetimeIcon,
+  image: ImageIcon,
+  number: NumberIcon,
+  radio: RadioIcon,
+  select: SelectIcon,
+  taglist: TaglistIcon,
+  text: TextIcon,
+  textfield: TextfieldIcon,
+  textarea: TextareaIcon,
+  default: FormIcon
+};
+
 const type$2 = 'text';
 function Text(props) {
   const {
-    field
+    field,
+    disabled
   } = props;
   const {
     text = ''
   } = field;
+  const textValue = useExpressionValue(text) || '';
   return jsx("div", {
     class: formFieldClasses(type$2),
-    children: jsx(Markup, {
-      markup: safeMarkdown(text),
-      trim: false
-    })
+    children: renderText(field, textValue, disabled)
   });
 }
 Text.create = function (options = {}) {
@@ -2498,6 +3560,37 @@ Text.create = function (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 jsxs("div", {
+        class: "fjs-form-field-placeholder",
+        children: [jsx(Icon, {
+          viewBox: "0 0 54 54"
+        }), "Text view is empty"]
+      });
+    }
+    if (isExpression$2(text)) {
+      return jsxs("div", {
+        class: "fjs-form-field-placeholder",
+        children: [jsx(Icon, {
+          viewBox: "0 0 54 54"
+        }), "Text view is populated by an expression"]
+      });
+    }
+  }
+  return jsx(Markup, {
+    markup: safeMarkdown(content),
+    trim: false
+  });
+}
+
 const type$1 = 'textfield';
 function Textfield(props) {
   const {
@@ -2510,8 +3603,13 @@ function Textfield(props) {
     description,
     id,
     label,
+    appearance = {},
     validate = {}
   } = field;
+  const {
+    prefixAdorner,
+    suffixAdorner
+  } = appearance;
   const {
     required
   } = validate;
@@ -2535,13 +3633,18 @@ function Textfield(props) {
       id: prefixId(id, formId),
       label: label,
       required: required
-    }), jsx("input", {
-      class: "fjs-input",
+    }), jsx(InputAdorner, {
       disabled: disabled,
-      id: prefixId(id, formId),
-      onInput: onChange,
-      type: "text",
-      value: value
+      pre: prefixAdorner,
+      post: suffixAdorner,
+      children: jsx("input", {
+        class: "fjs-input",
+        disabled: disabled,
+        id: prefixId(id, formId),
+        onInput: onChange,
+        type: "text",
+        value: value
+      })
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
@@ -2643,7 +3746,7 @@ Textarea.sanitizeValue = ({
   value
 }) => isArray(value) || isObject(value) ? '' : String(value);
 
-const formFields = [Button, Checkbox, Checklist, Default, Image, Numberfield, Radio, Select, Taglist, Text, Textfield, Textarea];
+const formFields = [Button, Checkbox, Checklist, Default, Image, Numberfield, Datetime, Radio, Select, Taglist, Text, Textfield, Textarea];
 
 class FormFields {
   constructor() {
@@ -3120,5 +4223,5 @@ function createForm(options) {
   });
 }
 
-export { Button, Checkbox, Checklist, Default, Form, FormComponent, FormContext, FormFieldRegistry, FormFields, FormRenderContext, Image, Numberfield, Radio, Select, Taglist, Text, Textarea, Textfield, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, getSchemaVariables, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
+export { Button, Checkbox, Checklist, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, Form, FormComponent, FormContext, FormFieldRegistry, FormFields, FormRenderContext, Image, MINUTES_IN_DAY, Numberfield, Radio, Select, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Taglist, Text, Textarea, Textfield, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, VALUES_SOURCES_PATHS, VALUES_SOURCE_DEFAULT, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
 //# sourceMappingURL=index.es.js.map