@bpmn-io/form-js-viewer 0.11.0 → 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,16 +14,6 @@ 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]
@@ -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;
 }
@@ -625,8 +613,8 @@ class Validator {
           errors = [...errors, 'Value is expected to ' + (decimalDigits === 0 ? 'be an integer' : `have at most ${decimalDigits} decimal digit${decimalDigits > 1 ? 's' : ''}`) + '.'];
         }
         if (increment) {
-          const bigValue = Big__default['default'](value);
-          const bigIncrement = Big__default['default'](increment);
+          const bigValue = Big(value);
+          const bigIncrement = Big(increment);
           const offset = bigValue.mod(bigIncrement);
           if (offset.cmp(0) !== 0) {
             const previousValue = bigValue.minus(offset);
@@ -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 {
@@ -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]: ''
 };
 
@@ -931,12 +922,6 @@ function getSchemaVariables(schema) {
   return Array.from(new Set(variables));
 }
 
-// helper ///////////////
-
-function isExpression$1(value) {
-  return minDash.isString(value) && value.startsWith('=');
-}
-
 class Importer {
   /**
    * @constructor
@@ -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');
 }
 
@@ -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,6 +1254,7 @@ const FormRenderContext = preact.createContext({
     return props.children;
   }
 });
+var FormRenderContext$1 = FormRenderContext;
 
 /**
  * @param {string} type
@@ -1282,6 +1267,7 @@ 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,11 +1380,12 @@ 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);
 }
 
@@ -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,6 +1747,7 @@ Checklist.label = 'Checklist';
 Checklist.keyed = true;
 Checklist.emptyValue = [];
 Checklist.sanitizeValue = sanitizeMultiSelectValue;
+Checklist.group = 'selection';
 
 /**
  * Check if condition is met with given variables.
@@ -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: "currentColor"
+  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
     }),
@@ -1944,15 +1935,11 @@ function Datepicker(props) {
       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) {
@@ -2035,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(),
@@ -2048,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: "currentColor"
-}), /*#__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: "currentColor"
+  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) {
@@ -2088,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,
@@ -2118,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) {
@@ -2164,7 +2151,7 @@ function DropdownList(props) {
     },
     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),
@@ -2302,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)
 
@@ -2353,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
@@ -2479,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", {
@@ -2494,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
   };
 };
@@ -2507,6 +2494,8 @@ 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.
@@ -2670,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",
@@ -2683,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",
@@ -2714,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", {
@@ -2733,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) {
@@ -2782,12 +2805,12 @@ function Numberfield(props) {
   const displayValue = hooks.useMemo(() => {
     if (value === 'NaN') return 'NaN';
     if (stringValueCache === '-') return '-';
-    return cacheValueMatchesState ? stringValueCache : value || value === 0 ? Big__default['default'](value).toFixed() : '';
+    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)) {
@@ -2820,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
@@ -2868,7 +2891,7 @@ function Numberfield(props) {
   };
   const {
     formId
-  } = hooks.useContext(FormContext);
+  } = hooks.useContext(FormContext$1);
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$6, {
       errors,
@@ -2883,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
         }),
@@ -2904,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, {})
           })]
         })]
       })
@@ -2931,7 +2956,9 @@ function Numberfield(props) {
     })]
   });
 }
-Numberfield.create = (options = {}) => options;
+Numberfield.create = (options = {}) => ({
+  ...options
+});
 Numberfield.sanitizeValue = ({
   value,
   formField
@@ -2949,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) {
@@ -2979,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,
@@ -2992,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,
@@ -3013,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
   };
 };
@@ -3027,6 +3060,266 @@ Radio.label = 'Radio';
 Radio.keyed = true;
 Radio.emptyValue = null;
 Radio.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 XMarkIcon = (({
+  styles = {},
+  ...props
+}) => /*#__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",
+  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"
+})));
+
+function SearchableSelect(props) {
+  const {
+    id,
+    disabled,
+    errors,
+    field,
+    value
+  } = props;
+  const {
+    formId
+  } = hooks.useContext(FormContext$1);
+  const [filter, setFilter] = hooks.useState('');
+  const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
+  const [shouldApplyFilter, setShouldApplyFilter] = 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]);
+  const valueLabel = hooks.useMemo(() => value && valueToOptionMap[value] && valueToOptionMap[value].label || '', [value, valueToOptionMap]);
+
+  // 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) {
+      return shouldApplyFilter ? options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase())) : options;
+    }
+    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) {
@@ -3034,32 +3327,30 @@ function Select(props) {
     disabled,
     errors = [],
     field,
+    onChange,
     value
   } = props;
   const {
     description,
     id,
     label,
+    searchable = false,
     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);
+  } = 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,
@@ -3069,20 +3360,10 @@ function Select(props) {
       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}`);
-      })]
+    }), searchable ? jsxRuntime.jsx(SearchableSelect, {
+      ...selectProps
+    }) : jsxRuntime.jsx(SimpleSelect, {
+      ...selectProps
     }), jsxRuntime.jsx(Description, {
       description: description
     }), jsxRuntime.jsx(Errors, {
@@ -3090,13 +3371,18 @@ function Select(props) {
     })]
   });
 }
-Select.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
+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
   };
 };
@@ -3105,22 +3391,7 @@ Select.label = 'Select';
 Select.keyed = true;
 Select.emptyValue = null;
 Select.sanitizeValue = sanitizeSingleSelectValue;
-
-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__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", {
-  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"
-})));
+Select.group = 'selection';
 
 const type$3 = 'taglist';
 function Taglist(props) {
@@ -3137,7 +3408,7 @@ function Taglist(props) {
   } = 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);
@@ -3225,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,
@@ -3234,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, {})
             })]
           });
         })
@@ -3263,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),
@@ -3275,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),
@@ -3289,62 +3563,263 @@ function Taglist(props) {
     })]
   });
 }
-Taglist.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
+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 = 'Taglist';
+Taglist.label = 'Tag list';
 Taglist.keyed = true;
 Taglist.emptyValue = [];
 Taglist.sanitizeValue = sanitizeMultiSelectValue;
+Taglist.group = 'selection';
 
-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({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React__default['default'].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__default['default'].createElement("svg", _extends$c({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React__default['default'].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"
-})));
+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.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__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"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   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__default['default'].createElement("path", {
+}), /*#__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"
 })));
@@ -3353,20 +3828,20 @@ function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : func
 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",
@@ -3377,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"
 })));
@@ -3396,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",
@@ -3424,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"
 })));
@@ -3437,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"
 })));
@@ -3450,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"
 })));
 
@@ -3462,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"
 })));
@@ -3475,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"
 })));
 
@@ -3487,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"
 })));
@@ -3500,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"
 })));
@@ -3513,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",
@@ -3547,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) {
@@ -3808,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,
@@ -3866,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.
@@ -4209,7 +4471,7 @@ class Form {
   }
 }
 
-const schemaVersion = 6;
+const schemaVersion = 7;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -4246,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;
@@ -4278,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;