@bpmn-io/form-js-editor 0.7.1 → 0.8.0-alpha.1

package/dist/index.es.js

@@ -1,17 +1,18 @@
 import { FormFieldRegistry as FormFieldRegistry$1, clone, Default, FormContext, FormRenderContext, FormComponent, FormFields, createFormContainer, createInjector, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import Ids from 'ids';
-import { isArray, isFunction, isNumber, bind, assign, debounce, get, isUndefined, set, has, forEach, isObject, uniqueBy, isString } from 'min-dash';
-import { createContext, render } from 'preact';
-import { useContext, useRef, useEffect, useMemo, useState, useCallback } from 'preact/hooks';
+import { isArray, isFunction, isNumber, bind, assign, debounce, sortBy, find, get, set, isUndefined, without, has, forEach, isObject, uniqueBy, isString } from 'min-dash';
+import { createContext, createElement, render } from 'preact';
+import { useContext, useState, useEffect, useRef, useCallback, useMemo } from 'preact/hooks';
+import classnames from 'classnames';
 import React from 'preact/compat';
-import { jsxs, jsx, Fragment } from 'preact/jsx-runtime';
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { query, matches, closest, event, domify } from 'min-dom';
 import dragula from 'dragula';
-import { matches, closest, event } from 'min-dom';
 import { mutate } from 'array-move';
 
 var FN_REF = '__fn';
-var DEFAULT_PRIORITY$2 = 1000;
+var DEFAULT_PRIORITY$3 = 1000;
 var slice = Array.prototype.slice;
 /**
  * A general purpose event bus.
@@ -127,7 +128,7 @@ EventBus.prototype.on = function (events, priority, callback, that) {
   if (isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$2;
+    priority = DEFAULT_PRIORITY$3;
   }
 
   if (!isNumber(priority)) {
@@ -169,7 +170,7 @@ EventBus.prototype.once = function (event, priority, callback, that) {
   if (isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$2;
+    priority = DEFAULT_PRIORITY$3;
   }
 
   if (!isNumber(priority)) {
@@ -765,36 +766,1710 @@ function useService (type, strict) {
   return getService(type, strict);
 }
 
-function _extends$c() { _extends$c = Object.assign || 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 ArrowIcon = function ArrowIcon(props) {
+  return jsx("svg", { ...props,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      d: "m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8z"
+    })
+  });
+};
+
+ArrowIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16"
+};
+
+var CreateIcon = function CreateIcon(props) {
+  return jsx("svg", { ...props,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      d: "M9 13V9h4a1 1 0 0 0 0-2H9V3a1 1 0 1 0-2 0v4H3a1 1 0 1 0 0 2h4v4a1 1 0 0 0 2 0z"
+    })
+  });
+};
+
+CreateIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16"
+};
+
+var DeleteIcon = function DeleteIcon(props) {
+  return jsx("svg", { ...props,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      d: "M12 6v7c0 1.1-.4 1.55-1.5 1.55h-5C4.4 14.55 4 14.1 4 13V6h8zm-1.5 1.5h-5v4.3c0 .66.5 1.2 1.111 1.2H9.39c.611 0 1.111-.54 1.111-1.2V7.5zM13 3h-2l-1-1H6L5 3H3v1.5h10V3z"
+    })
+  });
+};
+
+DeleteIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16"
+};
+
+var ExternalLinkIcon = function ExternalLinkIcon(props) {
+  return jsx("svg", { ...props,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12.637 12.637v-4.72h1.362v4.721c0 .36-.137.676-.411.95-.275.275-.591.412-.95.412H3.362c-.38 0-.703-.132-.967-.396A1.315 1.315 0 0 1 2 12.638V3.362c0-.38.132-.703.396-.967S2.982 2 3.363 2h4.553v1.363H3.363v9.274h9.274zM14 2H9.28l-.001 1.362h2.408L5.065 9.984l.95.95 6.622-6.622v2.409H14V2z",
+      fill: "#818798"
+    })
+  });
+};
+
+ExternalLinkIcon.defaultProps = {
+  width: "16",
+  height: "16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var FeelRequiredIcon = function FeelRequiredIcon(props) {
+  return jsxs("svg", { ...props,
+    children: [jsx("path", {
+      d: "M5.8 7.06V5.95h4.307v1.11H5.8zm0 3.071v-1.11h4.307v1.11H5.8z",
+      fill: "#505562"
+    }), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M8 3.268A4.732 4.732 0 1 0 12.732 8H14a6 6 0 1 1-6-6v1.268z",
+      fill: "#505562"
+    }), jsx("path", {
+      d: "m11.28 6.072-.832-.56 1.016-1.224L10 3.848l.312-.912 1.392.584L11.632 2h1.032l-.072 1.52 1.392-.584.312.912-1.464.44 1.008 1.224-.832.552-.864-1.296-.864 1.304z",
+      fill: "#505562"
+    })]
+  });
+};
+
+FeelRequiredIcon.defaultProps = {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var FeelOptionalIcon = function FeelOptionalIcon(props) {
+  return jsxs("svg", { ...props,
+    children: [jsx("path", {
+      d: "M5.845 7.04V5.93h4.307v1.11H5.845zm0 3.07V9h4.307v1.11H5.845z",
+      fill: "#505562"
+    }), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3.286 8a4.714 4.714 0 1 0 9.428 0 4.714 4.714 0 0 0-9.428 0zM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2z",
+      fill: "#505562"
+    })]
+  });
+};
+
+FeelOptionalIcon.defaultProps = {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+function Header(props) {
+  const {
+    element,
+    headerProvider
+  } = props;
+  const {
+    getElementIcon,
+    getDocumentationRef,
+    getElementLabel,
+    getTypeLabel
+  } = headerProvider;
+  const label = getElementLabel(element);
+  const type = getTypeLabel(element);
+  const documentationRef = getDocumentationRef && getDocumentationRef(element);
+  const ElementIcon = getElementIcon(element);
+  return jsxs("div", {
+    class: "bio-properties-panel-header",
+    children: [jsx("div", {
+      class: "bio-properties-panel-header-icon",
+      children: ElementIcon && jsx(ElementIcon, {
+        width: "32",
+        height: "32",
+        viewBox: "0 0 32 32"
+      })
+    }), jsxs("div", {
+      class: "bio-properties-panel-header-labels",
+      children: [jsx("div", {
+        title: type,
+        class: "bio-properties-panel-header-type",
+        children: type
+      }), label ? jsx("div", {
+        title: label,
+        class: "bio-properties-panel-header-label",
+        children: label
+      }) : null]
+    }), jsx("div", {
+      class: "bio-properties-panel-header-actions",
+      children: documentationRef ? jsx("a", {
+        rel: "noopener",
+        class: "bio-properties-panel-header-link",
+        href: documentationRef,
+        title: "Open documentation",
+        target: "_blank",
+        children: jsx(ExternalLinkIcon, {})
+      }) : null
+    })]
+  });
+}
+
+const DescriptionContext = createContext({
+  description: {},
+  getDescriptionForId: () => {}
+});
+/**
+ * @typedef {Function} <propertiesPanel.showEntry> callback
+ *
+ * @example
+ *
+ * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+ *   // ...
+ * });
+ *
+ * @param {Object} context
+ * @param {boolean} [context.focus]
+ *
+ * @returns void
+ */
+
+const EventContext = createContext({
+  eventBus: null
+});
+const LayoutContext = createContext({
+  layout: {},
+  setLayout: () => {},
+  getLayoutForKey: () => {},
+  setLayoutForKey: () => {}
+});
+/**
+ * Accesses the global DescriptionContext and returns a description for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const description = useDescriptionContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {object} element
+ *
+ * @returns {string}
+ */
+
+function useDescriptionContext(id, element) {
+  const {
+    getDescriptionForId
+  } = useContext(DescriptionContext);
+  return getDescriptionForId(id, element);
+}
+
+const DEFAULT_PRIORITY$2 = 1000;
+/**
+ * Subscribe to an event.
+ *
+ * @param {string} event
+ * @param {Function} callback
+ * @param {number} [priority]
+ *
+ * @returns {import('preact').Ref}
+ */
+
+function useEvent(event, callback, priority = DEFAULT_PRIORITY$2) {
+  const {
+    eventBus
+  } = useContext(EventContext);
+  useEffect(() => {
+    if (!eventBus) {
+      return;
+    }
+
+    eventBus.on(event, priority, callback);
+    return () => eventBus.off(event, callback);
+  }, [callback, event, eventBus, priority]);
+}
+
+const HIGH_PRIORITY = 10000;
+/**
+ * Buffer events and re-fire during passive effect phase.
+ *
+ * @param {string[]} bufferedEvents
+ * @param {Object} [eventBus]
+ */
+
+function useEventBuffer(bufferedEvents, eventBus) {
+  const buffer = useRef([]),
+        buffering = useRef(true);
+
+  const createCallback = event => data => {
+    if (buffering.current === true) {
+      buffer.current.unshift([event, data]);
+    }
+  }; // (1) buffer events
+
+
+  useEffect(() => {
+    if (!eventBus) {
+      return;
+    }
+
+    const listeners = bufferedEvents.map(event => {
+      return [event, createCallback(event)];
+    });
+    listeners.forEach(([event, callback]) => {
+      eventBus.on(event, HIGH_PRIORITY, callback);
+    });
+    return () => {
+      listeners.forEach(([event, callback]) => {
+        eventBus.off(event, callback);
+      });
+    };
+  }, [bufferedEvents, eventBus]); // (2) re-fire events
+
+  useEffect(() => {
+    if (!eventBus) {
+      return;
+    }
+
+    buffering.current = false;
+
+    while (buffer.current.length) {
+      const [event, data] = buffer.current.pop();
+      eventBus.fire(event, data);
+    }
+
+    buffering.current = true;
+  });
+}
+/**
+ * Creates a state that persists in the global LayoutContext.
+ *
+ * @example
+ * ```jsx
+ * function Group(props) {
+ *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+ * }
+ * ```
+ *
+ * @param {(string|number)[]} path
+ * @param {any} [defaultValue]
+ *
+ * @returns {[ any, Function ]}
+ */
+
+
+function useLayoutState(path, defaultValue) {
+  const {
+    getLayoutForKey,
+    setLayoutForKey
+  } = useContext(LayoutContext);
+  const layoutForKey = getLayoutForKey(path, defaultValue);
+  const [value, set] = useState(layoutForKey);
+
+  const setState = newValue => {
+    // (1) set component state
+    set(newValue); // (2) set context
+
+    setLayoutForKey(path, newValue);
+  };
+
+  return [value, setState];
+}
+/**
+ * @pinussilvestrus: we need to introduce our own hook to persist the previous
+ * state on updates.
+ *
+ * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+ */
+
+
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+/**
+ * Subscribe to `propertiesPanel.showEntry`.
+ *
+ * @param {Function} show
+ *
+ * @returns {import('preact').Ref}
+ */
+
+
+function useShowEntryEvent(show) {
+  const {
+    onShow
+  } = useContext(LayoutContext);
+  const ref = useRef();
+  const [focus, setFocus] = useState(false);
+  const onShowEntry = useCallback(event => {
+    if (show(event)) {
+      if (isFunction(onShow)) {
+        onShow();
+      }
+
+      if (event.focus && !focus) {
+        setFocus(true);
+      }
+    }
+  }, [show]);
+  useEffect(() => {
+    if (focus && ref.current) {
+      if (isFunction(ref.current.focus)) {
+        ref.current.focus();
+      }
+
+      if (isFunction(ref.current.select)) {
+        ref.current.select();
+      }
+
+      setFocus(false);
+    }
+  }, [focus]);
+  useEvent('propertiesPanel.showEntry', onShowEntry);
+  return ref;
+}
+/**
+ * Subscribe to `propertiesPanel.showError`. On `propertiesPanel.showError` set
+ * temporary error. Fire `propertiesPanel.showEntry` for temporary error to be
+ * visible. Unset error on `propertiesPanel.updated`.
+ *
+ * @param {Function} show
+ *
+ * @returns {import('preact').Ref}
+ */
+
+
+function useShowErrorEvent(show) {
+  const {
+    eventBus
+  } = useContext(EventContext);
+  const [temporaryError, setTemporaryError] = useState(null);
+  const onPropertiesPanelUpdated = useCallback(() => setTemporaryError(null), []);
+  useEvent('propertiesPanel.updated', onPropertiesPanelUpdated);
+  const onShowError = useCallback(event => {
+    setTemporaryError(null);
+
+    if (show(event)) {
+      if (eventBus) {
+        eventBus.fire('propertiesPanel.showEntry', event);
+      }
+
+      setTemporaryError(event.message);
+    }
+  }, [show]);
+  useEvent('propertiesPanel.showError', onShowError);
+  return temporaryError;
+}
+/**
+ * @callback setSticky
+ * @param {boolean} value
+ */
+
+/**
+ * Use IntersectionObserver to identify when DOM element is in sticky mode.
+ * If sticky is observered setSticky(true) will be called.
+ * If sticky mode is left, setSticky(false) will be called.
+ *
+ *
+ * @param {Object} ref
+ * @param {string} scrollContainerSelector
+ * @param {setSticky} setSticky
+ */
+
+
+function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
+  useEffect(() => {
+    // return early if IntersectionObserver is not available
+    if (!IntersectionObserver) {
+      return;
+    }
+
+    let observer;
+
+    if (ref.current) {
+      const scrollContainer = query(scrollContainerSelector);
+      observer = new IntersectionObserver(entries => {
+        if (entries[0].intersectionRatio < 1) {
+          setSticky(true);
+        } else if (entries[0].intersectionRatio === 1) {
+          setSticky(false);
+        }
+      }, {
+        root: scrollContainer,
+        rootMargin: '0px 0px 999999% 0px',
+        // Use bottom margin to avoid stickyness when scrolling out to bottom
+        threshold: [1]
+      });
+      observer.observe(ref.current);
+    } // Unobserve if unmounted
+
+
+    return () => {
+      if (ref.current && observer) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [ref]);
+}
+
+function Group(props) {
+  const {
+    element,
+    entries = [],
+    id,
+    label,
+    shouldOpen = false
+  } = props;
+  const groupRef = useRef(null);
+  const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
+  const onShow = useCallback(() => setOpen(true), [setOpen]);
+
+  const toggleOpen = () => setOpen(!open);
+
+  const [edited, setEdited] = useState(false);
+  const [sticky, setSticky] = useState(false); // set edited state depending on all entries
+
+  useEffect(() => {
+    const hasOneEditedEntry = entries.find(entry => {
+      const {
+        id,
+        isEdited
+      } = entry;
+      const entryNode = query(`[data-entry-id="${id}"]`);
+
+      if (!isFunction(isEdited) || !entryNode) {
+        return false;
+      }
+
+      const inputNode = query('.bio-properties-panel-input', entryNode);
+      return isEdited(inputNode);
+    });
+    setEdited(hasOneEditedEntry);
+  }, [entries]); // set css class when group is sticky to top
+
+  useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
+  const propertiesPanelContext = { ...useContext(LayoutContext),
+    onShow
+  };
+  return jsxs("div", {
+    class: "bio-properties-panel-group",
+    "data-group-id": 'group-' + id,
+    ref: groupRef,
+    children: [jsxs("div", {
+      class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
+      onClick: toggleOpen,
+      children: [jsx("div", {
+        title: label,
+        class: "bio-properties-panel-group-header-title",
+        children: label
+      }), jsxs("div", {
+        class: "bio-properties-panel-group-header-buttons",
+        children: [edited && jsx(DataMarker, {}), jsx("button", {
+          title: "Toggle section",
+          class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
+          children: jsx(ArrowIcon, {
+            class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
+          })
+        })]
+      })]
+    }), jsx("div", {
+      class: classnames('bio-properties-panel-group-entries', open ? 'open' : ''),
+      children: jsx(LayoutContext.Provider, {
+        value: propertiesPanelContext,
+        children: entries.map(entry => {
+          const {
+            component: Component,
+            id
+          } = entry;
+          return createElement(Component, { ...entry,
+            element: element,
+            key: id
+          });
+        })
+      })
+    })]
+  });
+}
+
+function DataMarker() {
+  return jsx("div", {
+    title: "Section contains data",
+    class: "bio-properties-panel-dot"
+  });
+}
+/**
+ * @typedef { {
+ *  text: (element: object) => string,
+ *  icon?: (element: Object) => import('preact').Component
+ * } } PlaceholderDefinition
+ *
+ * @param { PlaceholderDefinition } props
+ */
+
+
+function Placeholder(props) {
+  const {
+    text,
+    icon: Icon
+  } = props;
+  return jsx("div", {
+    class: "bio-properties-panel open",
+    children: jsxs("section", {
+      class: "bio-properties-panel-placeholder",
+      children: [Icon && jsx(Icon, {
+        class: "bio-properties-panel-placeholder-icon"
+      }), jsx("p", {
+        class: "bio-properties-panel-placeholder-text",
+        children: text
+      })]
+    })
+  });
+}
+
+const DEFAULT_LAYOUT = {
+  open: true
+};
+const DEFAULT_DESCRIPTION = {};
+const bufferedEvents = ['propertiesPanel.showEntry', 'propertiesPanel.showError'];
+/**
+ * @typedef { {
+ *    component: import('preact').Component,
+ *    id: String,
+ *    isEdited?: Function
+ * } } EntryDefinition
+ *
+ * @typedef { {
+ *    autoFocusEntry: String,
+ *    autoOpen?: Boolean,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    remove: (event: MouseEvent) => void
+ * } } ListItemDefinition
+ *
+ * @typedef { {
+ *    add: (event: MouseEvent) => void,
+ *    component: import('preact').Component,
+ *    element: Object,
+ *    id: String,
+ *    items: Array<ListItemDefinition>,
+ *    label: String,
+ *    shouldSort?: Boolean,
+ *    shouldOpen?: Boolean
+ * } } ListGroupDefinition
+ *
+ * @typedef { {
+ *    component?: import('preact').Component,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    shouldOpen?: Boolean
+ * } } GroupDefinition
+ *
+ *  @typedef { {
+ *    [id: String]: GetDescriptionFunction
+ * } } DescriptionConfig
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
+ * @typedef { {
+ *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+ *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+ * } } PlaceholderProvider
+ *
+ */
+
+/**
+ * A basic properties panel component. Describes *how* content will be rendered, accepts
+ * data from implementor to describe *what* will be rendered.
+ *
+ * @param {Object} props
+ * @param {Object|Array} props.element
+ * @param {import('./components/Header').HeaderProvider} props.headerProvider
+ * @param {PlaceholderProvider} [props.placeholderProvider]
+ * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+ * @param {Object} [props.layoutConfig]
+ * @param {Function} [props.layoutChanged]
+ * @param {DescriptionConfig} [props.descriptionConfig]
+ * @param {Function} [props.descriptionLoaded]
+ * @param {Object} [props.eventBus]
+ */
+
+function PropertiesPanel(props) {
+  const {
+    element,
+    headerProvider,
+    placeholderProvider,
+    groups,
+    layoutConfig = {},
+    layoutChanged,
+    descriptionConfig = {},
+    descriptionLoaded,
+    eventBus
+  } = props; // set-up layout context
+
+  const [layout, setLayout] = useState(createLayout(layoutConfig));
+  useEffect(() => {
+    if (typeof layoutChanged === 'function') {
+      layoutChanged(layout);
+    }
+  }, [layout, layoutChanged]);
+
+  const getLayoutForKey = (key, defaultValue) => {
+    return get(layout, key, defaultValue);
+  };
+
+  const setLayoutForKey = (key, config) => {
+    const newLayout = assign({}, layout);
+    set(newLayout, key, config);
+    setLayout(newLayout);
+  };
+
+  const layoutContext = {
+    layout,
+    setLayout,
+    getLayoutForKey,
+    setLayoutForKey
+  }; // set-up description context
+
+  const description = createDescriptionContext(descriptionConfig);
+
+  if (typeof descriptionLoaded === 'function') {
+    descriptionLoaded(description);
+  }
+
+  const getDescriptionForId = (id, element) => {
+    return description[id] && description[id](element);
+  };
+
+  const descriptionContext = {
+    description,
+    getDescriptionForId
+  };
+  useEventBuffer(bufferedEvents, eventBus);
+  const eventContext = {
+    eventBus
+  };
+  const propertiesPanelContext = {
+    element
+  }; // empty state
+
+  if (placeholderProvider && !element) {
+    return jsx(Placeholder, { ...placeholderProvider.getEmpty()
+    });
+  } // multiple state
+
+
+  if (placeholderProvider && isArray(element)) {
+    return jsx(Placeholder, { ...placeholderProvider.getMultiple()
+    });
+  }
+
+  return jsx(LayoutContext.Provider, {
+    value: propertiesPanelContext,
+    children: jsx(DescriptionContext.Provider, {
+      value: descriptionContext,
+      children: jsx(LayoutContext.Provider, {
+        value: layoutContext,
+        children: jsx(EventContext.Provider, {
+          value: eventContext,
+          children: jsxs("div", {
+            class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
+            children: [jsx(Header, {
+              element: element,
+              headerProvider: headerProvider
+            }), jsx("div", {
+              class: "bio-properties-panel-scroll-container",
+              children: groups.map(group => {
+                const {
+                  component: Component = Group,
+                  id
+                } = group;
+                return createElement(Component, { ...group,
+                  key: id,
+                  element: element
+                });
+              })
+            })]
+          })
+        })
+      })
+    })
+  });
+} // helpers //////////////////
+
+
+function createLayout(overrides) {
+  return { ...DEFAULT_LAYOUT,
+    ...overrides
+  };
+}
+
+function createDescriptionContext(overrides) {
+  return { ...DEFAULT_DESCRIPTION,
+    ...overrides
+  };
+}
+
+function CollapsibleEntry(props) {
+  const {
+    element,
+    entries = [],
+    id,
+    label,
+    open: shouldOpen,
+    remove
+  } = props;
+  const [open, setOpen] = useState(shouldOpen);
+
+  const toggleOpen = () => setOpen(!open);
+
+  const {
+    onShow
+  } = useContext(LayoutContext);
+  const propertiesPanelContext = { ...useContext(LayoutContext),
+    onShow: useCallback(() => {
+      setOpen(true);
+
+      if (isFunction(onShow)) {
+        onShow();
+      }
+    }, [onShow, setOpen])
+  }; // todo(pinussilvestrus): translate once we have a translate mechanism for the core
+
+  const placeholderLabel = '<empty>';
+  return jsxs("div", {
+    "data-entry-id": id,
+    class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
+    children: [jsxs("div", {
+      class: "bio-properties-panel-collapsible-entry-header",
+      onClick: toggleOpen,
+      children: [jsx("div", {
+        title: label || placeholderLabel,
+        class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
+        children: label || placeholderLabel
+      }), jsx("button", {
+        title: "Toggle list item",
+        class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
+        children: jsx(ArrowIcon, {
+          class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
+        })
+      }), remove ? jsx("button", {
+        title: "Delete item",
+        class: "bio-properties-panel-remove-entry",
+        onClick: remove,
+        children: jsx(DeleteIcon, {})
+      }) : null]
+    }), jsx("div", {
+      class: classnames('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
+      children: jsx(LayoutContext.Provider, {
+        value: propertiesPanelContext,
+        children: entries.map(entry => {
+          const {
+            component: Component,
+            id
+          } = entry;
+          return createElement(Component, { ...entry,
+            element: element,
+            key: id
+          });
+        })
+      })
+    })]
+  });
+}
+
+function ListItem(props) {
+  const {
+    autoFocusEntry,
+    autoOpen
+  } = props; // focus specified entry on auto open
+
+  useEffect(() => {
+    if (autoOpen && autoFocusEntry) {
+      const entry = query(`[data-entry-id="${autoFocusEntry}"]`);
+      const focusableInput = query('.bio-properties-panel-input', entry);
+
+      if (focusableInput) {
+        if (isFunction(focusableInput.select)) {
+          focusableInput.select();
+        } else if (isFunction(focusableInput.focus)) {
+          focusableInput.focus();
+        }
+      }
+    }
+  }, [autoOpen, autoFocusEntry]);
+  return jsx("div", {
+    class: "bio-properties-panel-list-item",
+    children: jsx(CollapsibleEntry, { ...props,
+      open: autoOpen
+    })
+  });
+}
+
+const noop$3 = () => {};
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
+ */
+
+
+function ListGroup(props) {
+  const {
+    add,
+    element,
+    id,
+    items,
+    label,
+    shouldOpen = true,
+    shouldSort = true
+  } = props;
+  const groupRef = useRef(null);
+  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+  const [sticky, setSticky] = useState(false);
+  const onShow = useCallback(() => setOpen(true), [setOpen]);
+  const [ordering, setOrdering] = useState([]);
+  const [newItemAdded, setNewItemAdded] = useState(false);
+  const prevItems = usePrevious(items);
+  const prevElement = usePrevious(element);
+  const elementChanged = element !== prevElement;
+  const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen); // reset initial ordering when element changes (before first render)
+
+  if (elementChanged) {
+    setOrdering(createOrdering(shouldSort ? sortItems(items) : items));
+  } // keep ordering in sync to items - and open changes
+  // (0) set initial ordering from given items
+
+
+  useEffect(() => {
+    if (!prevItems || !shouldSort) {
+      setOrdering(createOrdering(items));
+    }
+  }, [items, element]); // (1) items were added
+
+  useEffect(() => {
+    if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
+      let add = [];
+      items.forEach(item => {
+        if (!ordering.includes(item.id)) {
+          add.push(item.id);
+        }
+      });
+      let newOrdering = ordering; // open if not open and configured
+
+      if (!open && shouldOpen) {
+        toggleOpen(); // if I opened and I should sort, then sort items
+
+        if (shouldSort) {
+          newOrdering = createOrdering(sortItems(items));
+        }
+      } // add new items on top or bottom depending on sorting behavior
+
+
+      newOrdering = newOrdering.filter(item => !add.includes(item));
+
+      if (shouldSort) {
+        newOrdering.unshift(...add);
+      } else {
+        newOrdering.push(...add);
+      }
+
+      setOrdering(newOrdering);
+      setNewItemAdded(true);
+    } else {
+      setNewItemAdded(false);
+    }
+  }, [items, open, shouldHandleEffects]); // (2) sort items on open if shouldSort is set
+
+  useEffect(() => {
+    if (shouldSort && open && !newItemAdded) {
+      setOrdering(createOrdering(sortItems(items)));
+    }
+  }, [open, shouldSort]); // (3) items were deleted
+
+  useEffect(() => {
+    if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
+      let keep = [];
+      ordering.forEach(o => {
+        if (getItem(items, o)) {
+          keep.push(o);
+        }
+      });
+      setOrdering(keep);
+    }
+  }, [items, shouldHandleEffects]); // set css class when group is sticky to top
+
+  useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
+
+  const toggleOpen = () => setOpen(!open);
+
+  const hasItems = !!items.length;
+  const propertiesPanelContext = { ...useContext(LayoutContext),
+    onShow
+  };
+  return jsxs("div", {
+    class: "bio-properties-panel-group",
+    "data-group-id": 'group-' + id,
+    ref: groupRef,
+    children: [jsxs("div", {
+      class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
+      onClick: hasItems ? toggleOpen : noop$3,
+      children: [jsx("div", {
+        title: label,
+        class: "bio-properties-panel-group-header-title",
+        children: label
+      }), jsxs("div", {
+        class: "bio-properties-panel-group-header-buttons",
+        children: [add ? jsxs("button", {
+          title: "Create new list item",
+          class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
+          onClick: add,
+          children: [jsx(CreateIcon, {}), !hasItems ? jsx("span", {
+            class: "bio-properties-panel-add-entry-label",
+            children: "Create"
+          }) : null]
+        }) : null, hasItems ? jsx("div", {
+          title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
+          class: "bio-properties-panel-list-badge",
+          children: items.length
+        }) : null, hasItems ? jsx("button", {
+          title: "Toggle section",
+          class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
+          children: jsx(ArrowIcon, {
+            class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
+          })
+        }) : null]
+      })]
+    }), jsx("div", {
+      class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
+      children: jsx(LayoutContext.Provider, {
+        value: propertiesPanelContext,
+        children: ordering.map((o, index) => {
+          const item = getItem(items, o);
+
+          if (!item) {
+            return;
+          }
+
+          const {
+            id
+          } = item; // if item was added, open first or last item based on ordering
+
+          const autoOpen = newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1);
+          return createElement(ListItem, { ...item,
+            autoOpen: autoOpen,
+            element: element,
+            index: index,
+            key: id
+          });
+        })
+      })
+    })]
+  });
+} // helpers ////////////////////
+
+/**
+ * Sorts given items alphanumeric by label
+ */
+
+
+function sortItems(items) {
+  return sortBy(items, i => i.label.toLowerCase());
+}
+
+function getItem(items, id) {
+  return find(items, i => i.id === id);
+}
+
+function createOrdering(items) {
+  return items.map(i => i.id);
+}
+
+function Description$1(props) {
+  const {
+    element,
+    forId,
+    value
+  } = props;
+  const contextDescription = useDescriptionContext(forId, element);
+  const description = value || contextDescription;
+
+  if (description) {
+    return jsx("div", {
+      class: "bio-properties-panel-description",
+      children: description
+    });
+  }
+}
+
+const noop$2 = () => {};
+
+function Checkbox(props) {
+  const {
+    id,
+    label,
+    onChange,
+    disabled,
+    value = false,
+    show = noop$2
+  } = props;
+
+  const handleChange = ({
+    target
+  }) => {
+    onChange(target.checked);
+  };
+
+  const ref = useShowEntryEvent(show);
+  return jsxs("div", {
+    class: "bio-properties-panel-checkbox",
+    children: [jsx("input", {
+      ref: ref,
+      id: prefixId$6(id),
+      name: id,
+      type: "checkbox",
+      class: "bio-properties-panel-input",
+      onChange: handleChange,
+      checked: value,
+      disabled: disabled
+    }), jsx("label", {
+      for: prefixId$6(id),
+      class: "bio-properties-panel-label",
+      children: label
+    })]
+  });
+}
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {boolean} [props.disabled]
+ */
+
+
+function CheckboxEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    label,
+    getValue,
+    setValue,
+    disabled,
+    show = noop$2
+  } = props;
+  const value = getValue(element);
+  const error = useShowErrorEvent(show);
+  return jsxs("div", {
+    class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
+    "data-entry-id": id,
+    children: [jsx(Checkbox, {
+      disabled: disabled,
+      id: id,
+      label: label,
+      onChange: setValue,
+      show: show,
+      value: value
+    }), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+
+function isEdited$6(node) {
+  return node && !!node.checked;
+} // helpers /////////////////
+
+
+function prefixId$6(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+function NumberField(props) {
+  const {
+    debounce,
+    disabled,
+    id,
+    label,
+    max,
+    min,
+    onInput,
+    step,
+    value = ''
+  } = props;
+  const handleInput = useMemo(() => {
+    return debounce(event => {
+      const {
+        validity,
+        value
+      } = event.target;
+
+      if (validity.valid) {
+        onInput(value ? parseFloat(value) : undefined);
+      }
+    });
+  }, [onInput, debounce]);
+  return jsxs("div", {
+    class: "bio-properties-panel-numberfield",
+    children: [jsx("label", {
+      for: prefixId$5(id),
+      class: "bio-properties-panel-label",
+      children: label
+    }), jsx("input", {
+      id: prefixId$5(id),
+      type: "number",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      max: max,
+      min: min,
+      onInput: handleInput,
+      step: step,
+      value: value
+    })]
+  });
+}
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {Function} props.setValue
+ * @param {String} props.step
+ */
+
+
+function NumberFieldEntry(props) {
+  const {
+    debounce,
+    description,
+    disabled,
+    element,
+    getValue,
+    id,
+    label,
+    max,
+    min,
+    setValue,
+    step
+  } = props;
+  const value = getValue(element);
+  return jsxs("div", {
+    class: "bio-properties-panel-entry",
+    "data-entry-id": id,
+    children: [jsx(NumberField, {
+      debounce: debounce,
+      disabled: disabled,
+      id: id,
+      label: label,
+      onInput: setValue,
+      max: max,
+      min: min,
+      step: step,
+      value: value
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+
+function isEdited$5(node) {
+  return node && !!node.value;
+} // helpers /////////////////
+
+
+function prefixId$5(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+const noop$1 = () => {};
+/**
+ * @typedef { { value: string, label: string, disabled: boolean } } Option
+ */
+
+/**
+ * Provides basic select input.
+ *
+ * @param {object} props
+ * @param {string} props.id
+ * @param {string[]} props.path
+ * @param {string} props.label
+ * @param {Function} props.onChange
+ * @param {Array<Option>} [props.options]
+ * @param {string} props.value
+ * @param {boolean} [props.disabled]
+ */
+
+
+function Select(props) {
+  const {
+    id,
+    label,
+    onChange,
+    options = [],
+    value,
+    disabled,
+    show = noop$1
+  } = props;
+  const ref = useShowEntryEvent(show);
+
+  const handleChange = ({
+    target
+  }) => {
+    onChange(target.value);
+  };
+
+  return jsxs("div", {
+    class: "bio-properties-panel-select",
+    children: [jsx("label", {
+      for: prefixId$4(id),
+      class: "bio-properties-panel-label",
+      children: label
+    }), jsx("select", {
+      ref: ref,
+      id: prefixId$4(id),
+      name: id,
+      class: "bio-properties-panel-input",
+      onInput: handleChange,
+      value: value,
+      disabled: disabled,
+      children: options.map((option, idx) => {
+        return jsx("option", {
+          value: option.value,
+          disabled: option.disabled,
+          children: option.label
+        }, idx);
+      })
+    })]
+  });
+}
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} [props.description]
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.getOptions
+ * @param {boolean} [props.disabled]
+ */
+
+
+function SelectEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    label,
+    getValue,
+    setValue,
+    getOptions,
+    disabled,
+    show = noop$1
+  } = props;
+  const value = getValue(element);
+  const options = getOptions(element);
+  const error = useShowErrorEvent(show);
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsx(Select, {
+      id: id,
+      label: label,
+      value: value,
+      onChange: setValue,
+      options: options,
+      disabled: disabled,
+      show: show
+    }), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+
+function isEdited$4(node) {
+  return node && !!node.value;
+} // helpers /////////////////
+
+
+function prefixId$4(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+function FeelIcon(props) {
+  const {
+    label,
+    feel = false
+  } = props;
+  const feelRequiredLabel = ' must be a FEEL expression';
+  const feelOptionalLabel = ' can optionally be a FEEL expression';
+  return jsx("i", {
+    class: "bio-properties-panel-feel-icon",
+    title: label + (feel === 'required' ? feelRequiredLabel : feelOptionalLabel),
+    children: feel === 'required' ? jsx(FeelRequiredIcon, {}) : jsx(FeelOptionalIcon, {})
+  });
+}
+
+function TextArea(props) {
+  const {
+    id,
+    label,
+    rows = 2,
+    debounce,
+    feel,
+    onInput,
+    value = '',
+    disabled,
+    monospace
+  } = props;
+  const handleInput = useMemo(() => {
+    return debounce(({
+      target
+    }) => onInput(target.value.length ? target.value : undefined));
+  }, [onInput, debounce]);
+  return jsxs("div", {
+    class: "bio-properties-panel-textarea",
+    children: [jsxs("label", {
+      for: prefixId$2(id),
+      class: "bio-properties-panel-label",
+      children: [label, feel && jsx(FeelIcon, {
+        feel: feel,
+        label: label
+      })]
+    }), jsx("textarea", {
+      id: prefixId$2(id),
+      name: id,
+      spellCheck: "false",
+      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
+      onInput: handleInput,
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      rows: rows,
+      value: value,
+      disabled: disabled
+    })]
+  });
+}
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} props.description
+ * @param {boolean} props.debounce
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {number} props.rows
+ * @param {boolean} props.monospace
+ * @param {boolean} [props.disabled]
+ */
+
+
+function TextAreaEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    debounce,
+    feel,
+    label,
+    getValue,
+    setValue,
+    rows,
+    monospace,
+    disabled
+  } = props;
+  const value = getValue(element);
+  return jsxs("div", {
+    class: "bio-properties-panel-entry",
+    "data-entry-id": id,
+    children: [jsx(TextArea, {
+      id: id,
+      label: label,
+      value: value,
+      onInput: setValue,
+      rows: rows,
+      debounce: debounce,
+      monospace: monospace,
+      feel: feel,
+      disabled: disabled
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+
+function isEdited$2(node) {
+  return node && !!node.value;
+} // helpers /////////////////
+
+
+function prefixId$2(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+const noop = () => {};
+
+function Textfield(props) {
+  const {
+    debounce,
+    disabled = false,
+    id,
+    label,
+    onInput,
+    feel = false,
+    value = '',
+    show = noop
+  } = props;
+  const ref = useShowEntryEvent(show);
+  const handleInput = useMemo(() => {
+    return debounce(({
+      target
+    }) => onInput(target.value.length ? target.value : undefined));
+  }, [onInput, debounce]);
+  return jsxs("div", {
+    class: "bio-properties-panel-textfield",
+    children: [jsxs("label", {
+      for: prefixId$1(id),
+      class: "bio-properties-panel-label",
+      children: [label, feel && jsx(FeelIcon, {
+        feel: feel,
+        label: label
+      })]
+    }), jsx("input", {
+      ref: ref,
+      id: prefixId$1(id),
+      type: "text",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      onInput: handleInput,
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      value: value || ''
+    })]
+  });
+}
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.validate
+ */
+
+
+function TextfieldEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    debounce,
+    disabled,
+    feel,
+    label,
+    getValue,
+    setValue,
+    validate,
+    show = noop
+  } = props;
+  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
+  const [validationError, setValidationError] = useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setValidationError(newValidationError);
+    }
+  }, [value]);
+
+  const onInput = newValue => {
+    let newValidationError = null;
+
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+
+    setValidationError(newValidationError);
+  };
+
+  if (previousValue === value && validationError) {
+    value = cachedInvalidValue;
+  }
+
+  const temporaryError = useShowErrorEvent(show);
+  const error = temporaryError || validationError;
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsx(Textfield, {
+      debounce: debounce,
+      disabled: disabled,
+      feel: feel,
+      id: id,
+      label: label,
+      onInput: onInput,
+      show: show,
+      value: value
+    }), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+
+function isEdited$1(node) {
+  return node && !!node.value;
+} // helpers /////////////////
+
+
+function prefixId$1(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+function arrayAdd$1(array, index, item) {
+  const copy = [...array];
+  copy.splice(index, 0, item);
+  return copy;
+}
+function textToLabel(text = '...') {
+  if (text.length > 10) {
+    return `${text.substring(0, 30)}...`;
+  }
+
+  return text;
+}
+const INPUTS = ['checkbox', 'checklist', 'number', 'radio', 'select', 'taglist', 'textfield'];
+const VALUES_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
+
+function _extends$b() { _extends$b = Object.assign || 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 ButtonIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$c({
-  xmlns: "http://www.w3.org/2000/svg",
+}) => /*#__PURE__*/React.createElement("svg", _extends$b({
+  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$a() { _extends$a = Object.assign || 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 CheckboxIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$a({
+  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$9() { _extends$9 = Object.assign || 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 ChecklistIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$9({
   width: "54",
-  height: "54"
+  height: "54",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
 }, 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"
+  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$b() { _extends$b = Object.assign || 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 CheckboxIcon = (({
+function _extends$8() { _extends$8 = Object.assign || 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 TaglistIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$b({
-  xmlns: "http://www.w3.org/2000/svg",
+}) => /*#__PURE__*/React.createElement("svg", _extends$8({
   width: "54",
-  height: "54"
+  height: "54",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
 }, 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"
+  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$a() { _extends$a = Object.assign || 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); }
+function _extends$7() { _extends$7 = Object.assign || 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 FormIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$a({
+}) => /*#__PURE__*/React.createElement("svg", _extends$7({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -818,11 +2493,11 @@ var FormIcon = (({
   rx: "1"
 })));
 
-function _extends$9() { _extends$9 = Object.assign || 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); }
+function _extends$6() { _extends$6 = Object.assign || 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 ColumnsIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$9({
+}) => /*#__PURE__*/React.createElement("svg", _extends$6({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -831,11 +2506,11 @@ var ColumnsIcon = (({
   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$8() { _extends$8 = Object.assign || 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); }
+function _extends$5() { _extends$5 = Object.assign || 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 NumberIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$8({
+}) => /*#__PURE__*/React.createElement("svg", _extends$5({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -844,11 +2519,11 @@ var NumberIcon = (({
   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$7() { _extends$7 = Object.assign || 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); }
+function _extends$4() { _extends$4 = Object.assign || 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 RadioIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$7({
+}) => /*#__PURE__*/React.createElement("svg", _extends$4({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -856,11 +2531,11 @@ var RadioIcon = (({
   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$6() { _extends$6 = Object.assign || 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); }
+function _extends$3() { _extends$3 = Object.assign || 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 SelectIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$6({
+}) => /*#__PURE__*/React.createElement("svg", _extends$3({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -869,11 +2544,11 @@ var SelectIcon = (({
   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$5() { _extends$5 = Object.assign || 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); }
+function _extends$2() { _extends$2 = Object.assign || 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 TextIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$5({
+}) => /*#__PURE__*/React.createElement("svg", _extends$2({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -881,11 +2556,11 @@ var TextIcon = (({
   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$4() { _extends$4 = Object.assign || 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); }
+function _extends$1() { _extends$1 = Object.assign || 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 TextfieldIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$4({
+}) => /*#__PURE__*/React.createElement("svg", _extends$1({
   xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54"
@@ -897,755 +2572,438 @@ var TextfieldIcon = (({
 const iconsByType = {
   button: ButtonIcon,
   checkbox: CheckboxIcon,
+  checklist: ChecklistIcon,
   columns: ColumnsIcon,
   number: NumberIcon,
   radio: RadioIcon,
   select: SelectIcon,
+  taglist: TaglistIcon,
   text: TextIcon,
   textfield: TextfieldIcon,
   default: FormIcon
 };
 
-const types = [{
-  label: 'Text Field',
-  type: 'textfield'
-}, {
-  label: 'Number',
-  type: 'number'
-}, {
-  label: 'Checkbox',
-  type: 'checkbox'
-}, {
-  label: 'Radio',
-  type: 'radio'
-}, {
-  label: 'Select',
-  type: 'select'
-}, {
-  label: 'Text',
-  type: 'text'
-}, {
-  label: 'Button',
-  type: 'button'
-}];
-function Palette(props) {
-  return jsxs("div", {
-    class: "fjs-palette",
-    children: [jsxs("div", {
-      class: "fjs-palette-header",
-      title: "Form elements library",
-      children: [jsx("span", {
-        class: "fjs-hide-compact",
-        children: "FORM ELEMENTS "
-      }), "LIBRARY"]
-    }), jsx("div", {
-      class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
-      children: types.map(({
-        label,
-        type
-      }) => {
-        const Icon = iconsByType[type];
-        return jsxs("div", {
-          class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
-          "data-field-type": type,
-          title: `Create a ${label} element`,
-          children: [Icon ? jsx(Icon, {
-            class: "fjs-palette-field-icon",
-            width: "36",
-            height: "36",
-            viewBox: "0 0 54 54"
-          }) : null, jsx("span", {
-            class: "fjs-palette-field-text fjs-hide-compact",
-            children: label
-          })]
-        });
-      })
-    })]
-  });
-}
-
-function arrayAdd$1(array, index, item) {
-  const copy = [...array];
-  copy.splice(index, 0, item);
-  return copy;
-}
-function arrayRemove$1(array, index) {
-  const copy = [...array];
-  copy.splice(index, 1);
-  return copy;
-}
-function prefixId(id) {
-  return `fjs-properties-panel-${id}`;
-}
-function stopPropagation(listener) {
-  return event => {
-    event.stopPropagation();
-    listener(event);
-  };
-}
-function textToLabel(text = '...') {
-  if (text.length > 10) {
-    return `${text.substring(0, 30)}...`;
-  }
-
-  return text;
-}
-const INPUTS = ['checkbox', 'number', 'radio', 'select', 'textfield'];
-
-function CheckboxInput(props) {
-  const {
-    id,
-    label,
-    onChange,
-    value = false
-  } = props;
-
-  const handleChange = ({
-    target
-  }) => {
-    onChange(target.checked);
-  };
-
-  return jsxs("div", {
-    class: "fjs-properties-panel-checkbox",
-    children: [jsx("label", {
-      for: prefixId(id),
-      class: "fjs-properties-panel-label",
-      children: label
-    }), jsx("input", {
-      id: prefixId(id),
-      type: "checkbox",
-      class: "fjs-properties-panel-input",
-      onChange: handleChange,
-      checked: value
-    })]
-  });
-}
-
-function usePrevious(value) {
-  const ref = useRef();
-  useEffect(() => ref.current = value);
-  return ref.current;
-}
-
-function useDebounce(fn, dependencies = []) {
-  const debounce = useService('debounce');
-  const callback = useMemo(() => {
-    return debounce(fn);
-  }, dependencies); // cleanup async side-effect if callback #flush is provided.
-
-  useEffect(() => {
-    return () => {
-      typeof callback.flush === 'function' && callback.flush();
-    };
-  }, [callback]);
-  return callback;
-}
-
-function NumberInput(props) {
-  const {
-    id,
-    label,
-    max,
-    min,
-    value = '',
-    onInput: _onInput
-  } = props;
-  const onInput = useDebounce(event => {
+const labelsByType = {
+  button: 'BUTTON',
+  checkbox: 'CHECKBOX',
+  checklist: 'CHECKLIST',
+  columns: 'COLUMNS',
+  default: 'FORM',
+  number: 'NUMBER',
+  radio: 'RADIO',
+  select: 'SELECT',
+  taglist: 'TAGLIST',
+  text: 'TEXT',
+  textfield: 'TEXT FIELD'
+};
+const PropertiesPanelHeaderProvider = {
+  getElementLabel: field => {
     const {
-      validity,
-      value
-    } = event.target;
+      type
+    } = field;
 
-    if (validity.valid) {
-      _onInput(value ? parseInt(value, 10) : undefined);
+    if (type === 'text') {
+      return textToLabel(field.text);
     }
-  }, [_onInput]);
-  return jsxs("div", {
-    class: "fjs-properties-panel-number",
-    children: [jsx("label", {
-      for: prefixId(id),
-      class: "fjs-properties-panel-label",
-      children: label
-    }), jsx("input", {
-      id: prefixId(id),
-      type: "number",
-      class: "fjs-properties-panel-input",
-      max: max,
-      min: min,
-      onInput: onInput,
-      value: value
-    })]
-  });
-}
-
-function Select(props) {
-  const {
-    id,
-    label,
-    onChange,
-    options,
-    value
-  } = props;
-
-  const handleChange = ({
-    target
-  }) => {
-    onChange(target.value);
-  };
-
-  return jsxs("div", {
-    class: "fjs-properties-panel-select",
-    children: [jsx("label", {
-      for: prefixId(id),
-      class: "fjs-properties-panel-label",
-      children: label
-    }), jsx("select", {
-      id: prefixId(id),
-      class: "fjs-properties-panel-input",
-      onInput: handleChange,
-      children: options.map(option => {
-        return jsx("option", {
-          value: option.value,
-          selected: option.value === value,
-          children: option.label
-        });
-      })
-    })]
-  });
-}
-
-function Textarea(props) {
-  const {
-    id,
-    label,
-    rows = 10,
-    value = '',
-    onInput: _onInput
-  } = props;
-  const onInput = useDebounce(event => {
-    const value = event.target.value;
-
-    _onInput(value.length ? value : undefined);
-  }, [_onInput]);
-  return jsxs("div", {
-    class: "fjs-properties-panel-textarea",
-    children: [jsx("label", {
-      for: prefixId(id),
-      class: "fjs-properties-panel-label",
-      children: label
-    }), jsx("textarea", {
-      id: prefixId(id),
-      spellcheck: false,
-      class: "fjs-properties-panel-input",
-      onInput: onInput,
-      rows: rows,
-      value: value
-    })]
-  });
-}
 
-function TextInput(props) {
-  let {
-    id,
-    label,
-    validate = () => null,
-    onInput: _onInput,
-    value = ''
-  } = props;
-  const prevValue = usePrevious(value);
-  const [cachedValue, setCachedValue] = useState(null);
-  const [error, setError] = useState(null);
-  useEffect(() => setError(validate(value)), [validate, value]);
-  const onInput = useDebounce(event => {
-    const value = event.target.value;
-    const error = validate(value);
-
-    if (error) {
-      setCachedValue(value);
-    } else {
-      _onInput(value.length ? value : undefined);
+    if (type === 'default') {
+      return field.id;
     }
 
-    setError(error);
-  }, [validate, setCachedValue, _onInput]);
+    return field.label;
+  },
+  getElementIcon: field => {
+    const {
+      type
+    } = field;
+    const Icon = iconsByType[type];
+
+    if (Icon) {
+      return () => jsx(Icon, {
+        width: "36",
+        height: "36",
+        viewBox: "0 0 54 54"
+      });
+    }
+  },
+  getTypeLabel: field => {
+    const {
+      type
+    } = field;
+    return labelsByType[type];
+  }
+};
 
-  if (prevValue === value && error) {
-    value = cachedValue;
+/**
+ * Provide placeholders for empty and multiple state.
+ */
+const PropertiesPanelPlaceholderProvider = {
+  getEmpty: () => {
+    return {
+      text: 'Select a form field to edit its properties.'
+    };
+  },
+  getMultiple: () => {
+    return {
+      text: 'Multiple form fields are selected. Select a single form field to edit its properties.'
+    };
   }
+};
 
-  const classes = ['fjs-properties-panel-input'];
+function ActionEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
 
-  if (error) {
-    classes.push('fjs-has-error');
+  if (type === 'button') {
+    entries.push({
+      id: 'action',
+      component: Action,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$4
+    });
   }
 
-  return jsxs("div", {
-    class: "fjs-properties-panel-text",
-    children: [jsx("label", {
-      for: prefixId(id),
-      class: "fjs-properties-panel-label",
-      children: label
-    }), jsx("input", {
-      id: prefixId(id),
-      type: "text",
-      spellcheck: false,
-      class: classes.join(' '),
-      onInput: onInput,
-      value: value
-    }), error && jsx("div", {
-      class: "fjs-properties-panel-error",
-      children: error
-    })]
-  });
+  return entries;
 }
 
-function CheckboxInputEntry(props) {
+function Action(props) {
   const {
     editField,
     field,
-    id,
-    label,
-    path
+    id
   } = props;
+  const path = ['action'];
 
-  const onChange = value => {
-    if (editField && path) {
-      editField(field, path, value);
-    } else {
-      props.onChange(value);
-    }
+  const getValue = () => {
+    return get(field, path, '');
   };
 
-  const value = path ? get(field, path, false) : props.value;
-  return jsx("div", {
-    class: "fjs-properties-panel-entry",
-    children: jsx(CheckboxInput, {
-      id: id,
-      label: label,
-      onChange: onChange,
-      value: value
-    })
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+
+  const getOptions = () => [{
+    label: 'Submit',
+    value: 'submit'
+  }, {
+    label: 'Reset',
+    value: 'reset'
+  }];
+
+  return SelectEntry({
+    element: field,
+    getOptions,
+    getValue,
+    id,
+    label: 'Action',
+    setValue
   });
 }
 
-function NumberInputEntry(props) {
+function ColumnsEntry(props) {
   const {
     editField,
-    field,
-    id,
-    label,
-    max,
-    min,
-    onChange,
-    path
+    field
   } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
 
-  const onInput = value => {
-    if (editField && path) {
-      editField(field, path, value);
-    } else {
-      onChange(value);
-    }
-  };
+  if (type === 'columns') {
+    entries.push({
+      id: 'columns',
+      component: Columns,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$5
+    });
+  }
 
-  const value = path ? get(field, path, '') : props.value;
-  return jsx("div", {
-    class: "fjs-properties-panel-entry",
-    children: jsx(NumberInput, {
-      id: id,
-      label: label,
-      max: max,
-      min: min,
-      onInput: onInput,
-      value: value
-    })
-  });
+  return entries;
 }
 
-function SelectEntry(props) {
+function Columns(props) {
   const {
     editField,
     field,
-    id,
-    description,
-    label,
-    options,
-    path
+    id
   } = props;
+  const debounce = useService('debounce');
+
+  const getValue = () => {
+    return field.components.length;
+  };
+
+  const setValue = value => {
+    let components = field.components.slice();
 
-  const onChange = value => {
-    if (editField && path) {
-      editField(field, path, value);
+    if (value > components.length) {
+      while (value > components.length) {
+        components.push(Default.create({
+          _parent: field.id
+        }));
+      }
     } else {
-      props.onChange(value);
+      components = components.slice(0, value);
     }
+
+    editField(field, 'components', components);
   };
 
-  const value = path ? get(field, path, '') : props.value;
-  return jsxs("div", {
-    class: "fjs-properties-panel-entry",
-    children: [jsx(Select, {
-      id: id,
-      label: label,
-      onChange: onChange,
-      options: options,
-      value: value
-    }), description && jsx("div", {
-      class: "fjs-properties-panel-description",
-      children: description
-    })]
+  return NumberFieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Columns',
+    setValue
   });
 }
 
-function TextareaEntry(props) {
+function DescriptionEntry(props) {
   const {
     editField,
-    field,
-    id,
-    description,
-    label,
-    onChange,
-    path
+    field
   } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
 
-  const onInput = value => {
-    if (editField && path) {
-      editField(field, path, value);
-    } else {
-      onChange(value);
-    }
-  };
+  if (INPUTS.includes(type)) {
+    entries.push({
+      id: 'description',
+      component: Description,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$1
+    });
+  }
 
-  const value = path ? get(field, path, '') : props.value;
-  return jsxs("div", {
-    class: "fjs-properties-panel-entry",
-    children: [jsx(Textarea, {
-      id: id,
-      label: label,
-      onInput: onInput,
-      value: value
-    }), description && jsx("div", {
-      class: "fjs-properties-panel-description",
-      children: description
-    })]
-  });
+  return entries;
 }
 
-function TextInputEntry(props) {
+function Description(props) {
   const {
     editField,
     field,
-    id,
-    description,
-    label,
-    onChange,
-    path,
-    validate
+    id
   } = props;
+  const debounce = useService('debounce');
+  const path = ['description'];
 
-  const onInput = value => {
-    if (editField && path) {
-      editField(field, path, value);
-    } else {
-      onChange(value);
-    }
+  const getValue = () => {
+    return get(field, path, '');
   };
 
-  const value = path ? get(field, path, '') : props.value;
-  return jsxs("div", {
-    class: "fjs-properties-panel-entry",
-    children: [jsx(TextInput, {
-      id: id,
-      label: label,
-      onInput: onInput,
-      validate: validate,
-      value: value
-    }), description && jsx("div", {
-      class: "fjs-properties-panel-description",
-      children: description
-    })]
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Field description',
+    setValue
   });
 }
 
-function _extends$3() { _extends$3 = Object.assign || 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 CreateIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$3({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "12",
-  height: "12"
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  d: "M7 0v5h5v2H7v5H5V7H0V5h5V0h2z"
-})));
-
-function _extends$2() { _extends$2 = Object.assign || 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 ListArrowIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$2({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "7",
-  height: "9"
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  d: "M6.25 4.421L4.836 5.835h-.001L2.007 8.663.593 7.249 3.421 4.42.593 1.593 2.007.178 6.25 4.421z"
-})));
-
-function _extends$1() { _extends$1 = Object.assign || 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 ListDeleteIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$1({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "11",
-  height: "14"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M10 4v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4h9zM8 6H3v4.8c0 .66.5 1.2 1.111 1.2H6.89C7.5 12 8 11.46 8 10.8V6zm3-5H8.5l-1-1h-4l-1 1H0v1.5h11V1z"
-})));
-
-function _extends() { _extends = Object.assign || 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 SectionArrowIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "8",
-  height: "12"
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  d: "M2.007 11.66L.593 10.248l4.242-4.243L.593 1.761 2.007.347l5.657 5.657-5.657 5.657z"
-})));
-
-function CollapsibleEntry(props) {
+function DefaultOptionEntry(props) {
   const {
-    children,
-    label,
-    removeEntry = () => {}
+    editField,
+    field
   } = props;
-  const [collapsed, setCollapsed] = useState(false);
+  const {
+    type
+  } = field;
+  const entries = []; // Only make default values available when they are statically defined
 
-  const toggleCollapsed = () => setCollapsed(!collapsed);
+  if (!INPUTS.includes(type) || VALUES_INPUTS.includes(type) && !field.values) {
+    return entries;
+  }
 
-  const classes = ['fjs-properties-panel-collapsible-entry'];
+  const defaultOptions = {
+    editField,
+    field,
+    id: 'defaultValue',
+    label: 'Default value'
+  };
 
-  if (collapsed) {
-    classes.push('fjs-properties-panel-collapsible-entry-collapsed');
+  if (type === 'checkbox') {
+    entries.push({ ...defaultOptions,
+      component: DefaultValueCheckbox,
+      isEdited: isEdited$4
+    });
   }
 
-  return jsxs("div", {
-    class: classes.join(' '),
-    children: [jsxs("div", {
-      class: "fjs-properties-panel-collapsible-entry-header",
-      onClick: toggleCollapsed,
-      children: [jsxs("div", {
-        children: [jsx(ListArrowIcon, {
-          class: collapsed ? 'fjs-arrow-right' : 'fjs-arrow-down'
-        }), jsx("span", {
-          class: "fjs-properties-panel-collapsible-entry-header-label",
-          children: label
-        })]
-      }), jsx("button", {
-        class: "fjs-properties-panel-collapsible-entry-header-remove-entry",
-        onClick: stopPropagation(removeEntry),
-        children: jsx(ListDeleteIcon, {})
-      })]
-    }), collapsed ? null : jsx("div", {
-      class: "fjs-properties-panel-collapsible-entry-entries",
-      children: children
-    })]
-  });
-}
+  if (type === 'number') {
+    entries.push({ ...defaultOptions,
+      component: DefaultValueNumber,
+      isEdited: isEdited$5
+    });
+  }
 
-function Group(props) {
-  const {
-    children,
-    hasEntries = true,
-    label
-  } = props;
-  const [open, setOpen] = useState(hasEntries);
+  if (type === 'radio' || type === 'select') {
+    entries.push({ ...defaultOptions,
+      component: DefaultValueSingleSelect,
+      isEdited: isEdited$4
+    });
+  } // todo(Skaiir): implement a multiselect equivalent (cf. https://github.com/bpmn-io/form-js/issues/265)
 
-  const toggleOpen = () => setOpen(!open);
 
-  const addEntry = event => {
-    event.stopPropagation();
-    setOpen(true);
-    props.addEntry();
-  };
+  if (type === 'textfield') {
+    entries.push({ ...defaultOptions,
+      component: DefaultValueTextfield,
+      isEdited: isEdited$1
+    });
+  }
 
-  return jsxs("div", {
-    class: "fjs-properties-panel-group",
-    children: [jsxs("div", {
-      class: "fjs-properties-panel-group-header",
-      onClick: hasEntries ? toggleOpen : () => {},
-      children: [jsx("span", {
-        class: "fjs-properties-panel-group-header-label",
-        children: label
-      }), jsxs("div", {
-        class: "fjs-properties-panel-group-header-buttons",
-        children: [props.addEntry ? jsx("button", {
-          class: "fjs-properties-panel-group-header-button fjs-properties-panel-group-header-button-add-entry",
-          onClick: addEntry,
-          children: jsx(CreateIcon, {})
-        }) : null, jsx("button", {
-          class: "fjs-properties-panel-group-header-button fjs-properties-panel-group-header-button-toggle-open",
-          children: jsx(SectionArrowIcon, {
-            class: hasEntries && open ? 'fjs-arrow-down' : 'fjs-arrow-right'
-          })
-        })]
-      })]
-    }), hasEntries && open ? jsx("div", {
-      class: "fjs-properties-panel-group-entries",
-      children: children
-    }) : null]
-  });
+  return entries;
 }
 
-function ActionEntry(props) {
+function DefaultValueCheckbox(props) {
   const {
     editField,
-    field
+    field,
+    id,
+    label
   } = props;
-  const options = [{
-    label: 'Submit',
-    value: 'submit'
-  }, {
-    label: 'Reset',
-    value: 'reset'
-  }];
-  return jsx(SelectEntry, {
-    editField: editField,
-    field: field,
-    id: "action",
-    label: "Action",
-    options: options,
-    path: ['action']
-  });
-}
-
-function ColumnsEntry(props) {
   const {
-    editField,
-    field
-  } = props;
+    defaultValue
+  } = field;
+  const path = ['defaultValue'];
 
-  const onInput = value => {
-    let components = field.components.slice();
+  const getOptions = () => {
+    return [{
+      label: 'Checked',
+      value: 'true'
+    }, {
+      label: 'Not checked',
+      value: 'false'
+    }];
+  };
 
-    if (value > components.length) {
-      while (value > components.length) {
-        components.push(Default.create({
-          _parent: field.id
-        }));
-      }
-    } else {
-      components = components.slice(0, value);
-    }
+  const setValue = value => {
+    return editField(field, path, parseStringToBoolean(value));
+  };
 
-    editField(field, 'components', components);
+  const getValue = () => {
+    return parseBooleanToString(defaultValue);
   };
 
-  const value = field.components.length;
-  return jsx("div", {
-    class: "fjs-properties-panel-entry",
-    children: jsx(NumberInputEntry, {
-      id: "columns",
-      label: "Columns",
-      onInput: onInput,
-      value: value,
-      min: "1",
-      max: "3"
-    })
+  return SelectEntry({
+    element: field,
+    getOptions,
+    getValue,
+    id,
+    label,
+    setValue
   });
 }
 
-function DescriptionEntry(props) {
+function DefaultValueNumber(props) {
   const {
     editField,
-    field
+    field,
+    id,
+    label
   } = props;
-  return jsx(TextInputEntry, {
-    editField: editField,
-    field: field,
-    id: "description",
-    label: "Field Description",
-    path: ['description']
+  const debounce = useService('debounce');
+  const path = ['defaultValue'];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+
+  return NumberFieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label,
+    setValue
   });
 }
 
-function DefaultValueEntry(props) {
+function DefaultValueSingleSelect(props) {
   const {
     editField,
-    field
+    field,
+    id,
+    label
   } = props;
   const {
     defaultValue,
-    type,
     values = []
   } = field;
+  const path = ['defaultValue'];
 
-  if (type === 'checkbox') {
-    const options = [{
-      label: 'Checked',
-      value: 'true'
-    }, {
-      label: 'Not checked',
-      value: 'false'
-    }];
+  const getOptions = () => {
+    return [{
+      label: '<none>'
+    }, ...values];
+  };
 
-    const onChange = value => {
-      editField(field, ['defaultValue'], parseStringToBoolean(value));
-    };
+  const setValue = value => {
+    return editField(field, path, value.length ? value : undefined);
+  };
 
-    return jsx(SelectEntry, {
-      id: "defaultValue",
-      label: "Default Value",
-      onChange: onChange,
-      options: options,
-      value: parseBooleanToString(defaultValue)
-    });
-  }
+  const getValue = () => {
+    return defaultValue;
+  };
 
-  if (type === 'number') {
-    return jsx(NumberInputEntry, {
-      editField: editField,
-      field: field,
-      id: "defaultValue",
-      label: "Default Value",
-      path: ['defaultValue']
-    });
-  }
+  return SelectEntry({
+    element: field,
+    getOptions,
+    getValue,
+    id,
+    label,
+    setValue
+  });
+}
 
-  if (type === 'radio' || type === 'select') {
-    const options = [{
-      label: '<none>'
-    }, ...values];
+function DefaultValueTextfield(props) {
+  const {
+    editField,
+    field,
+    id,
+    label
+  } = props;
+  const debounce = useService('debounce');
+  const path = ['defaultValue'];
 
-    const onChange = value => {
-      editField(field, ['defaultValue'], value.length ? value : undefined);
-    };
+  const getValue = () => {
+    return get(field, path, '');
+  };
 
-    return jsx(SelectEntry, {
-      id: "defaultValue",
-      label: "Default Value",
-      onChange: onChange,
-      options: options,
-      value: defaultValue
-    });
-  }
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label,
+    setValue
+  });
+} // helpers /////////////////
 
-  if (type === 'textfield') {
-    return jsx(TextInputEntry, {
-      editField: editField,
-      field: field,
-      id: "defaultValue",
-      label: "Default Value",
-      path: ['defaultValue']
-    });
-  }
-}
 
 function parseStringToBoolean(value) {
   if (value === 'true') {
@@ -1668,17 +3026,46 @@ function DisabledEntry(props) {
     editField,
     field
   } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
+
+  if (INPUTS.includes(type)) {
+    entries.push({
+      id: 'disabled',
+      component: Disabled,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$6
+    });
+  }
+
+  return entries;
+}
+
+function Disabled(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const path = ['disabled'];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
 
-  const onChange = value => {
-    editField(field, 'disabled', value);
+  const setValue = value => {
+    return editField(field, path, value);
   };
 
-  return jsx(CheckboxInputEntry, {
-    id: "disabled",
-    field: field,
-    label: "Disabled",
-    path: ['disabled'],
-    onChange: onChange
+  return CheckboxEntry({
+    element: field,
+    getValue,
+    id,
+    label: 'Disabled',
+    setValue
   });
 }
 
@@ -1687,7 +3074,38 @@ function IdEntry(props) {
     editField,
     field
   } = props;
+  const entries = [];
+
+  if (field.type === 'default') {
+    entries.push({
+      id: 'id',
+      component: Id,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$1
+    });
+  }
+
+  return entries;
+}
+
+function Id(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
   const formFieldRegistry = useService('formFieldRegistry');
+  const debounce = useService('debounce');
+  const path = ['id'];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = value => {
+    return editField(field, path, value);
+  };
 
   const validate = value => {
     if (isUndefined(value) || !value.length) {
@@ -1703,16 +3121,18 @@ function IdEntry(props) {
     return validateId(value) || null;
   };
 
-  return jsx(TextInputEntry, {
-    editField: editField,
-    field: field,
-    id: "id",
-    label: "Id",
-    path: ['id'],
-    validate: validate
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'ID',
+    setValue,
+    validate
   });
 } // id structural validation /////////////
 
+
 const SPACE_REGEX = /\s/; // for QName validation as per http://www.w3.org/TR/REC-xml/#NT-NameChar
 
 const QNAME_REGEX = /^([a-z][\w-.]*:)?[a-z_][\w-.]*$/i; // for ID validation as per BPMN Schema (QName - Namespace)
@@ -1742,7 +3162,41 @@ function KeyEntry(props) {
     editField,
     field
   } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
+
+  if (INPUTS.includes(type)) {
+    entries.push({
+      id: 'key',
+      component: Key$1,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$1
+    });
+  }
+
+  return entries;
+}
+
+function Key$1(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
   const formFieldRegistry = useService('formFieldRegistry');
+  const debounce = useService('debounce');
+  const path = ['key'];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = value => {
+    return editField(field, path, value);
+  };
 
   const validate = value => {
     if (isUndefined(value) || !value.length) {
@@ -1753,134 +3207,306 @@ function KeyEntry(props) {
       return 'Must not contain spaces.';
     }
 
-    const assigned = formFieldRegistry._keys.assigned(value);
+    const assigned = formFieldRegistry._keys.assigned(value);
+
+    if (assigned && assigned !== field) {
+      return 'Must be unique.';
+    }
+
+    return null;
+  };
+
+  return TextfieldEntry({
+    debounce,
+    description: 'Binds to a form variable',
+    element: field,
+    getValue,
+    id,
+    label: 'Key',
+    setValue,
+    validate
+  });
+}
+
+function LabelEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
+
+  if (INPUTS.includes(type) || type === 'button') {
+    entries.push({
+      id: 'label',
+      component: Label$1,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$1
+    });
+  }
+
+  return entries;
+}
+
+function Label$1(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const path = ['label'];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Field label',
+    setValue
+  });
+}
+
+function TextEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
+
+  if (type === 'text') {
+    entries.push({
+      id: 'text',
+      component: Text,
+      editField: editField,
+      field: field,
+      isEdited: isEdited$2
+    });
+  }
+
+  return entries;
+}
+
+function Text(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const path = ['text'];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+
+  return TextAreaEntry({
+    debounce,
+    description: 'Use Markdown or basic HTML to format.',
+    element: field,
+    getValue,
+    id,
+    label: 'Text',
+    rows: 10,
+    setValue
+  });
+}
+
+function ValueEntry(props) {
+  const {
+    editField,
+    field,
+    idPrefix,
+    index,
+    validateFactory
+  } = props;
+  const entries = [{
+    component: Label,
+    editField,
+    field,
+    id: idPrefix + '-label',
+    idPrefix,
+    index,
+    validateFactory
+  }, {
+    component: Value$1,
+    editField,
+    field,
+    id: idPrefix + '-value',
+    idPrefix,
+    index,
+    validateFactory
+  }];
+  return entries;
+}
+
+function Label(props) {
+  const {
+    editField,
+    field,
+    id,
+    index,
+    validateFactory
+  } = props;
+  const debounce = useService('debounce');
 
-    if (assigned && assigned !== field) {
-      return 'Must be unique.';
-    }
+  const setValue = value => {
+    const values = get(field, ['values']);
+    return editField(field, 'values', set(values, [index, 'label'], value));
+  };
 
-    return null;
+  const getValue = () => {
+    return get(field, ['values', index, 'label']);
   };
 
-  return jsx(TextInputEntry, {
-    editField: editField,
-    field: field,
-    id: "key",
-    label: "Key",
-    description: "Maps to a process variable.",
-    path: ['key'],
-    validate: validate
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Label',
+    setValue,
+    validate: validateFactory(getValue())
   });
 }
 
-function LabelEntry(props) {
+function Value$1(props) {
   const {
     editField,
-    field
+    field,
+    id,
+    index,
+    validateFactory
   } = props;
-  return jsx(TextInputEntry, {
-    editField: editField,
-    field: field,
-    id: "label",
-    label: "Field Label",
-    path: ['label']
+  const debounce = useService('debounce');
+
+  const setValue = value => {
+    const values = get(field, ['values']);
+    return editField(field, 'values', set(values, [index, 'value'], value));
+  };
+
+  const getValue = () => {
+    return get(field, ['values', index, 'value']);
+  };
+
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Value',
+    setValue,
+    validate: validateFactory(getValue())
   });
 }
 
-function TextEntry(props) {
+function CustomValueEntry(props) {
   const {
     editField,
-    field
+    field,
+    idPrefix,
+    index,
+    validateFactory
   } = props;
-  return jsx(TextareaEntry, {
-    editField: editField,
-    field: field,
-    id: "text",
-    label: "Text",
-    path: ['text'],
-    description: "Use Markdown or basic HTML to format."
-  });
+  const entries = [{
+    component: Key,
+    editField,
+    field,
+    id: idPrefix + '-key',
+    idPrefix,
+    index,
+    validateFactory
+  }, {
+    component: Value,
+    editField,
+    field,
+    id: idPrefix + '-value',
+    idPrefix,
+    index,
+    validateFactory
+  }];
+  return entries;
 }
 
-function ValueEntry(props) {
+function Key(props) {
   const {
     editField,
     field,
+    id,
     index,
-    validate
+    validateFactory
   } = props;
+  const debounce = useService('debounce');
 
-  const getLabel = () => {
-    return get(field, ['values', index, 'label']);
+  const setValue = value => {
+    const properties = get(field, ['properties']);
+    const key = Object.keys(properties)[index];
+    return editField(field, 'properties', updateKey(properties, key, value));
   };
 
   const getValue = () => {
-    return get(field, ['values', index, 'value']);
-  };
-
-  const onChange = key => {
-    const values = get(field, ['values']);
-    return value => {
-      editField(field, 'values', set(values, [index, key], value));
-    };
+    return Object.keys(get(field, ['properties']))[index];
   };
 
-  return jsxs(Fragment, {
-    children: [jsx(TextInputEntry, {
-      id: `value-label-${index}`,
-      label: "Label",
-      onChange: onChange('label'),
-      value: getLabel()
-    }), jsx(TextInputEntry, {
-      id: `value-value-${index}`,
-      label: "Value",
-      onChange: onChange('value'),
-      value: getValue(),
-      validate: validate(getValue())
-    })]
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Key',
+    setValue,
+    validate: validateFactory(getValue())
   });
 }
 
-function CustomValueEntry(props) {
+function Value(props) {
   const {
     editField,
     field,
+    id,
     index,
-    validate
+    validateFactory
   } = props;
+  const debounce = useService('debounce');
 
-  const getKey = () => {
-    return Object.keys(get(field, ['properties']))[index];
+  const setValue = value => {
+    const properties = get(field, ['properties']);
+    const key = Object.keys(properties)[index];
+    editField(field, 'properties', updateValue(properties, key, value));
   };
 
   const getValue = () => {
-    return get(field, ['properties', getKey()]);
-  };
-
-  const onChange = key => {
     const properties = get(field, ['properties']);
-    return value => {
-      if (key === 'value') {
-        editField(field, 'properties', updateValue(properties, getKey(), value));
-      } else if (key === 'key') {
-        editField(field, 'properties', updateKey(properties, getKey(), value));
-      }
-    };
+    const key = Object.keys(properties)[index];
+    return get(field, ['properties', key]);
   };
 
-  return jsxs(Fragment, {
-    children: [jsx(TextInputEntry, {
-      id: `value-key-${index}`,
-      label: "Key",
-      onChange: onChange('key'),
-      value: getKey(),
-      validate: validate(getKey())
-    }), jsx(TextInputEntry, {
-      id: `value-value-${index}`,
-      label: "Value",
-      onChange: onChange('value'),
-      value: getValue()
-    })]
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Value',
+    setValue,
+    validate: validateFactory(getValue())
   });
 } // helpers //////////
 
@@ -1894,6 +3520,7 @@ function CustomValueEntry(props) {
  * @returns {Object}
  */
 
+
 function updateValue(properties, key, value) {
   return { ...properties,
     [key]: value
@@ -1919,79 +3546,225 @@ function updateKey(properties, oldKey, newKey) {
   }, {});
 }
 
-function GeneralGroup(field, editField) {
+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 ValuesSourceSelectEntry(props) {
   const {
-    type
-  } = field;
-  const entries = [];
+    editField,
+    field,
+    id
+  } = props;
+  return [{
+    id: id + '-select',
+    component: ValuesSourceSelect,
+    isEdited: isEdited$4,
+    editField,
+    field
+  }];
+}
 
-  if (type === 'default') {
-    entries.push(jsx(IdEntry, {
-      editField: editField,
-      field: field
-    }));
-  }
+function ValuesSourceSelect(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const getValue = getValuesSource;
+
+  const setValue = value => {
+    let newField = field;
+    Object.values(VALUES_SOURCES).forEach(source => {
+      // Clear all values source definitions and default the newly selected one
+      const newValue = value === source ? VALUES_SOURCES_DEFAULTS[source] : undefined;
+      newField = editField(field, VALUES_SOURCES_PATHS[source], newValue);
+    });
+    return newField;
+  };
 
-  if (INPUTS.includes(type) || type === 'button') {
-    entries.push(jsx(LabelEntry, {
-      editField: editField,
-      field: field
+  const getValuesSourceOptions = () => {
+    return Object.values(VALUES_SOURCES).map(valueSource => ({
+      label: VALUES_SOURCES_LABELS[valueSource],
+      value: valueSource
     }));
-  }
+  };
 
-  if (INPUTS.includes(type)) {
-    entries.push(jsx(DescriptionEntry, {
-      editField: editField,
-      field: field
-    }));
-  }
+  return SelectEntry({
+    label: 'Type',
+    element: field,
+    getOptions: getValuesSourceOptions,
+    getValue,
+    id,
+    setValue
+  });
+}
 
-  if (INPUTS.includes(type)) {
-    entries.push(jsx(KeyEntry, {
-      editField: editField,
-      field: field
-    }));
-  }
+function InputKeyValuesSourceEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  return [{
+    id: id + '-key',
+    component: InputValuesKey,
+    label: 'Input values key',
+    description: 'Define which input property to populate the values from',
+    isEdited: isEdited$1,
+    editField,
+    field
+  }];
+}
 
-  if (INPUTS.includes(type)) {
-    entries.push(jsx(DefaultValueEntry, {
-      editField: editField,
-      field: field
-    }));
-  }
+function InputValuesKey(props) {
+  const {
+    editField,
+    field,
+    id,
+    label,
+    description
+  } = props;
+  const debounce = useService('debounce');
+  const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT];
 
-  if (type === 'button') {
-    entries.push(jsx(ActionEntry, {
-      editField: editField,
-      field: field
-    }));
-  }
+  const getValue = () => get(field, path, '');
 
-  if (type === 'columns') {
-    entries.push(jsx(ColumnsEntry, {
-      editField: editField,
-      field: field
-    }));
-  }
+  const setValue = value => editField(field, path, value || '');
 
-  if (type === 'text') {
-    entries.push(jsx(TextEntry, {
-      editField: editField,
-      field: field
-    }));
-  }
+  return TextfieldEntry({
+    debounce,
+    description,
+    element: field,
+    getValue,
+    id,
+    label,
+    setValue
+  });
+}
 
-  if (INPUTS.includes(type)) {
-    entries.push(jsx(DisabledEntry, {
-      editField: editField,
-      field: field
-    }));
-  }
+function StaticValuesSourceEntry(props) {
+  const {
+    editField,
+    field,
+    id: idPrefix
+  } = props;
+  const {
+    values
+  } = field;
+
+  const addEntry = e => {
+    e.stopPropagation();
+    const index = values.length + 1;
+    const entry = {
+      label: `Value ${index}`,
+      value: `value${index}`
+    };
+    editField(field, VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC], arrayAdd$1(values, values.length, entry));
+  };
+
+  const removeEntry = entry => {
+    editField(field, VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC], without(values, entry));
+  };
+
+  const validateFactory = key => {
+    return value => {
+      if (value === key) {
+        return;
+      }
 
-  return jsx(Group, {
-    label: "General",
-    children: entries.length ? entries : null
+      if (isUndefined(value) || !value.length) {
+        return 'Must not be empty.';
+      }
+
+      const isValueAssigned = values.find(entry => entry.value === value);
+
+      if (isValueAssigned) {
+        return 'Must be unique.';
+      }
+    };
+  };
+
+  const items = values.map((entry, index) => {
+    const id = idPrefix + '-' + index;
+    return {
+      id,
+      label: entry.label,
+      entries: ValueEntry({
+        editField,
+        field,
+        idPrefix: id,
+        index,
+        validateFactory
+      }),
+      autoFocusEntry: id + '-label',
+      remove: () => removeEntry(entry)
+    };
   });
+  return {
+    items,
+    add: addEntry
+  };
+}
+
+function GeneralGroup(field, editField) {
+  const entries = [...IdEntry({
+    field,
+    editField
+  }), ...LabelEntry({
+    field,
+    editField
+  }), ...DescriptionEntry({
+    field,
+    editField
+  }), ...KeyEntry({
+    field,
+    editField
+  }), ...DefaultOptionEntry({
+    field,
+    editField
+  }), ...ActionEntry({
+    field,
+    editField
+  }), ...ColumnsEntry({
+    field,
+    editField
+  }), ...TextEntry({
+    field,
+    editField
+  }), ...DisabledEntry({
+    field,
+    editField
+  })];
+  return {
+    id: 'general',
+    label: 'General',
+    entries
+  };
 }
 
 function ValidationGroup(field, editField) {
@@ -1999,6 +3772,10 @@ function ValidationGroup(field, editField) {
     type
   } = field;
 
+  if (!(INPUTS.includes(type) && type !== 'checkbox' && type !== 'checklist' && type !== 'taglist')) {
+    return null;
+  }
+
   const onChange = key => {
     return value => {
       const validate = get(field, ['validate'], {});
@@ -2006,122 +3783,247 @@ function ValidationGroup(field, editField) {
     };
   };
 
-  const entries = [jsx(CheckboxInputEntry, {
-    id: "required",
-    label: "Required",
-    onChange: onChange('required'),
-    value: get(field, ['validate', 'required'])
-  })];
+  const getValue = key => {
+    return () => {
+      return get(field, ['validate', key]);
+    };
+  };
+
+  let entries = [{
+    id: 'required',
+    component: Required,
+    getValue,
+    field,
+    isEdited: isEdited$6,
+    onChange
+  }];
 
   if (type === 'textfield') {
-    entries.push(jsx(NumberInputEntry, {
-      id: "minLength",
-      label: "Minimum Length",
-      min: "0",
-      onChange: onChange('minLength'),
-      value: get(field, ['validate', 'minLength'])
-    }), jsx(NumberInputEntry, {
-      id: "maxLength",
-      label: "Maximum Length",
-      min: "0",
-      onChange: onChange('maxLength'),
-      value: get(field, ['validate', 'maxLength'])
-    }), jsx(TextInputEntry, {
-      id: "regularExpressionPattern",
-      label: "Regular Expression Pattern",
-      onChange: onChange('regularExpressionPattern'),
-      value: get(field, ['validate', 'regularExpressionPattern'])
-    }));
+    entries.push({
+      id: 'minLength',
+      component: MinLength,
+      getValue,
+      field,
+      isEdited: isEdited$5,
+      onChange
+    }, {
+      id: 'maxLength',
+      component: MaxLength,
+      getValue,
+      field,
+      isEdited: isEdited$5,
+      onChange
+    }, {
+      id: 'pattern',
+      component: Pattern,
+      getValue,
+      field,
+      isEdited: isEdited$1,
+      onChange
+    });
   }
 
   if (type === 'number') {
-    entries.push(jsx(NumberInputEntry, {
-      id: "min",
-      label: "Minimum",
-      onChange: onChange('min'),
-      value: get(field, ['validate', 'min'])
-    }), jsx(NumberInputEntry, {
-      id: "max",
-      label: "Maximum",
-      onChange: onChange('max'),
-      value: get(field, ['validate', 'max'])
-    }));
+    entries.push({
+      id: 'min',
+      component: Min,
+      getValue,
+      field,
+      isEdited: isEdited$5,
+      onChange
+    }, {
+      id: 'max',
+      component: Max,
+      getValue,
+      field,
+      isEdited: isEdited$5,
+      onChange
+    });
   }
 
-  return jsx(Group, {
-    label: "Validation",
-    children: entries.length ? entries : null
+  return {
+    id: 'validation',
+    label: 'Validation',
+    entries
+  };
+}
+
+function Required(props) {
+  const {
+    field,
+    getValue,
+    id,
+    onChange
+  } = props;
+  return CheckboxEntry({
+    element: field,
+    getValue: getValue('required'),
+    id,
+    label: 'Required',
+    setValue: onChange('required')
+  });
+}
+
+function MinLength(props) {
+  const {
+    field,
+    getValue,
+    id,
+    onChange
+  } = props;
+  const debounce = useService('debounce');
+  return NumberFieldEntry({
+    debounce,
+    element: field,
+    getValue: getValue('minLength'),
+    id,
+    label: 'Minimum length',
+    min: 0,
+    setValue: onChange('minLength')
+  });
+}
+
+function MaxLength(props) {
+  const {
+    field,
+    getValue,
+    id,
+    onChange
+  } = props;
+  const debounce = useService('debounce');
+  return NumberFieldEntry({
+    debounce,
+    element: field,
+    getValue: getValue('maxLength'),
+    id,
+    label: 'Maximum length',
+    min: 0,
+    setValue: onChange('maxLength')
   });
 }
 
-function ValuesGroup(field, editField) {
+function Pattern(props) {
   const {
+    field,
+    getValue,
     id,
-    values = []
-  } = field;
+    onChange
+  } = props;
+  const debounce = useService('debounce');
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue: getValue('pattern'),
+    id,
+    label: 'Regular expression pattern',
+    setValue: onChange('pattern')
+  });
+}
 
-  const addEntry = () => {
-    const index = values.length + 1;
-    const entry = {
-      label: `Value ${index}`,
-      value: `value${index}`
-    };
-    editField(field, ['values'], arrayAdd$1(values, values.length, entry));
-  };
+function Min(props) {
+  const {
+    field,
+    getValue,
+    id,
+    onChange
+  } = props;
+  const debounce = useService('debounce');
+  return NumberFieldEntry({
+    debounce,
+    element: field,
+    getValue: getValue('min'),
+    id,
+    label: 'Minimum',
+    min: 0,
+    setValue: onChange('min')
+  });
+}
 
-  const validateFactory = key => {
-    return value => {
-      if (value === key) {
-        return;
-      }
+function Max(props) {
+  const {
+    field,
+    getValue,
+    id,
+    onChange
+  } = props;
+  const debounce = useService('debounce');
+  return NumberFieldEntry({
+    debounce,
+    element: field,
+    getValue: getValue('max'),
+    id,
+    label: 'Maximum',
+    min: 0,
+    setValue: onChange('max')
+  });
+}
 
-      if (isUndefined(value) || !value.length) {
-        return 'Must not be empty.';
-      }
+function ValuesGroups(field, editField) {
+  const {
+    type,
+    id: fieldId
+  } = field;
 
-      const isValueAssigned = values.find(entry => entry.value === value);
+  if (!VALUES_INPUTS.includes(type)) {
+    return [];
+  }
 
-      if (isValueAssigned) {
-        return 'Must be unique.';
-      }
-    };
+  const context = {
+    editField,
+    field
   };
+  const valuesSourceId = `${fieldId}-valuesSource`;
+  /**
+   * @type {Array<Group|ListGroup>}
+   */
 
-  const hasEntries = values.length > 0;
-  return jsx(Group, {
-    label: "Values",
-    addEntry: addEntry,
-    hasEntries: hasEntries,
-    children: values.map((value, index) => {
-      const {
-        label
-      } = value;
-
-      const removeEntry = () => {
-        editField(field, ['values'], arrayRemove$1(values, index));
-      };
-
-      return jsx(CollapsibleEntry, {
-        label: label,
-        removeEntry: removeEntry,
-        children: jsx(ValueEntry, {
-          editField: editField,
-          field: field,
-          index: index,
-          validate: validateFactory
-        })
-      }, `${id}-${index}`);
+  const groups = [{
+    id: valuesSourceId,
+    label: 'Options source',
+    component: Group,
+    entries: ValuesSourceSelectEntry({ ...context,
+      id: valuesSourceId
     })
-  });
+  }];
+  const valuesSource = getValuesSource(field);
+
+  if (valuesSource === VALUES_SOURCES.INPUT) {
+    const dynamicValuesId = `${fieldId}-dynamicValues`;
+    groups.push({
+      id: dynamicValuesId,
+      label: 'Dynamic options',
+      component: Group,
+      entries: InputKeyValuesSourceEntry({ ...context,
+        id: dynamicValuesId
+      })
+    });
+  } else if (valuesSource === VALUES_SOURCES.STATIC) {
+    const staticValuesId = `${fieldId}-staticValues`;
+    groups.push({
+      id: staticValuesId,
+      label: 'Static options',
+      component: ListGroup,
+      ...StaticValuesSourceEntry({ ...context,
+        id: staticValuesId
+      })
+    });
+  }
+
+  return groups;
 }
 
 function CustomValuesGroup(field, editField) {
   const {
-    id,
-    properties = {}
+    properties = {},
+    type
   } = field;
 
-  const addEntry = () => {
+  if (type === 'default') {
+    return null;
+  }
+
+  const addEntry = event => {
+    event.stopPropagation();
     const index = Object.keys(properties).length + 1;
     const key = `key${index}`,
           value = 'value';
@@ -2146,28 +4048,35 @@ function CustomValuesGroup(field, editField) {
     };
   };
 
-  const hasEntries = Object.keys(properties).length > 0;
-  return jsx(Group, {
-    label: "Custom Properties",
-    addEntry: addEntry,
-    hasEntries: hasEntries,
-    children: Object.keys(properties).map((key, index) => {
-      const removeEntry = () => {
-        editField(field, ['properties'], removeKey(properties, key));
-      };
+  const items = Object.keys(properties).map((key, index) => {
+    const removeEntry = event => {
+      event.stopPropagation();
+      return editField(field, ['properties'], removeKey(properties, key));
+    };
 
-      return jsx(CollapsibleEntry, {
-        label: key,
-        removeEntry: removeEntry,
-        children: jsx(CustomValueEntry, {
-          editField: editField,
-          field: field,
-          index: index,
-          validate: validateFactory
-        })
-      }, `${id}-${index}`);
-    })
+    const id = `${field.id}-property-${index}`;
+    return {
+      autoFocusEntry: id + '-key',
+      entries: CustomValueEntry({
+        editField,
+        field,
+        idPrefix: id,
+        index,
+        validateFactory
+      }),
+      id,
+      label: key || '',
+      remove: removeEntry
+    };
   });
+  return {
+    add: addEntry,
+    component: ListGroup,
+    id: 'custom-values',
+    items,
+    label: 'Custom properties',
+    shouldSort: false
+  };
 } // helpers //////////
 
 /**
@@ -2193,95 +4102,54 @@ function removeKey(properties, oldKey) {
   }, {});
 }
 
-const labelsByType = {
-  button: 'BUTTON',
-  checkbox: 'CHECKBOX',
-  columns: 'COLUMNS',
-  default: 'FORM',
-  number: 'NUMBER',
-  radio: 'RADIO',
-  select: 'SELECT',
-  text: 'TEXT',
-  textfield: 'TEXT FIELD'
-};
-
 function getGroups(field, editField) {
-  const {
-    type
-  } = field;
-  const groups = [GeneralGroup(field, editField)];
-
-  if (type === 'radio' || type === 'select') {
-    groups.push(ValuesGroup(field, editField));
-  }
-
-  if (INPUTS.includes(type) && type !== 'checkbox') {
-    groups.push(ValidationGroup(field, editField));
+  if (!field) {
+    return [];
   }
 
-  if (type !== 'default') {
-    groups.push(CustomValuesGroup(field, editField));
-  }
+  const groups = [GeneralGroup(field, editField), ...ValuesGroups(field, editField), ValidationGroup(field, editField), CustomValuesGroup(field, editField)]; // contract: if a group returns null, it should not be displayed at all
 
-  return groups;
+  return groups.filter(group => group !== null);
 }
 
-function PropertiesPanel(props) {
+function FormPropertiesPanel(props) {
   const {
     editField,
     field
   } = props;
   const eventBus = useService('eventBus');
 
-  if (!field) {
-    return jsx("div", {
-      class: "fjs-properties-panel-placeholder",
-      children: "Select a form field to edit its properties."
-    });
-  }
-
   const onFocus = () => eventBus.fire('propertiesPanel.focusin');
 
   const onBlur = () => eventBus.fire('propertiesPanel.focusout');
 
-  const {
-    type
-  } = field;
-  const Icon = iconsByType[type];
-  const label = labelsByType[type];
-  return jsxs("div", {
+  return jsx("div", {
     class: "fjs-properties-panel",
-    "data-field": field.id,
+    "data-field": field && field.id,
     onFocusCapture: onFocus,
     onBlurCapture: onBlur,
-    children: [jsxs("div", {
-      class: "fjs-properties-panel-header",
-      children: [jsx("div", {
-        class: "fjs-properties-panel-header-icon",
-        children: jsx(Icon, {
-          width: "36",
-          height: "36",
-          viewBox: "0 0 54 54"
-        })
-      }), jsxs("div", {
-        children: [jsx("span", {
-          class: "fjs-properties-panel-header-type",
-          children: label
-        }), type === 'text' ? jsx("div", {
-          class: "fjs-properties-panel-header-label",
-          children: textToLabel(field.text)
-        }) : type === 'default' ? jsx("div", {
-          class: "fjs-properties-panel-header-label",
-          children: field.id
-        }) : jsx("div", {
-          class: "fjs-properties-panel-header-label",
-          children: field.label
-        })]
-      })]
-    }), getGroups(field, editField)]
+    children: jsx(PropertiesPanel, {
+      element: field,
+      eventBus: eventBus,
+      groups: getGroups(field, editField),
+      headerProvider: PropertiesPanelHeaderProvider,
+      placeholderProvider: PropertiesPanelPlaceholderProvider
+    })
   });
 }
 
+function _extends() { _extends = Object.assign || 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 ListDeleteIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "11",
+  height: "14"
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "M10 4v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4h9zM8 6H3v4.8c0 .66.5 1.2 1.111 1.2H6.89C7.5 12 8 11.46 8 10.8V6zm3-5H8.5l-1-1h-4l-1 1H0v1.5h11V1z"
+})));
+
 function ContextPad(props) {
   if (!props.children) {
     return null;
@@ -2396,12 +4264,15 @@ function FormEditor$1(props) {
         formFieldRegistry = useService('formFieldRegistry'),
         injector = useService('injector'),
         modeling = useService('modeling'),
-        selection = useService('selection');
+        selection = useService('selection'),
+        palette = useService('palette'),
+        paletteConfig = useService('config.palette');
 
   const {
     schema
   } = formEditor._getState();
 
+  const paletteRef = useRef(null);
   const [selectedFormField, setSelection] = useState(schema);
   useEffect(() => {
     function handleSelectionChanged(event) {
@@ -2485,6 +4356,10 @@ function FormEditor$1(props) {
       eventBus.off('attach', onAttach);
       eventBus.off('detach', onDetach);
     };
+  }, []); // fire event after first render to notify interested parties
+
+  useEffect(() => {
+    eventBus.fire('formEditor.rendered');
   }, []);
   const formRenderContext = {
     Children,
@@ -2519,14 +4394,21 @@ function FormEditor$1(props) {
   };
   const onSubmit = useCallback(() => {}, []);
   const onReset = useCallback(() => {}, []);
-  const editField = useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]);
+  const editField = useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]); // attach default palette
+
+  const hasDefaultPalette = defaultPalette(paletteConfig);
+  useEffect(() => {
+    if (hasDefaultPalette) {
+      palette.attachTo(paletteRef.current);
+    }
+  }, [palette, paletteRef, hasDefaultPalette]);
   return jsxs("div", {
     class: "fjs-form-editor",
     children: [jsxs(DragAndDropContext.Provider, {
       value: dragAndDropContext,
-      children: [jsx("div", {
-        class: "fjs-palette-container",
-        children: jsx(Palette, {})
+      children: [hasDefaultPalette && jsx("div", {
+        class: "fjs-editor-palette-container",
+        ref: paletteRef
       }), jsx("div", {
         class: "fjs-form-container",
         children: jsx(FormContext.Provider, {
@@ -2542,7 +4424,7 @@ function FormEditor$1(props) {
       }), jsx(CreatePreview, {})]
     }), jsx("div", {
       class: "fjs-properties-container",
-      children: jsx(PropertiesPanel, {
+      children: jsx(FormPropertiesPanel, {
         field: selectedFormField,
         editField: editField
       })
@@ -2587,6 +4469,11 @@ function CreatePreview(props) {
     return () => drake.off('cloned', handleCloned);
   }, [drake]);
   return null;
+} // helper //////
+
+
+function defaultPalette(paletteConfig) {
+  return !(paletteConfig && paletteConfig.parent);
 }
 
 class Renderer {
@@ -4643,6 +6530,145 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
+const types = [{
+  label: 'Text Field',
+  type: 'textfield'
+}, {
+  label: 'Number',
+  type: 'number'
+}, {
+  label: 'Checkbox',
+  type: 'checkbox'
+}, {
+  label: 'Checklist',
+  type: 'checklist'
+}, {
+  label: 'Taglist',
+  type: 'taglist'
+}, {
+  label: 'Radio',
+  type: 'radio'
+}, {
+  label: 'Select',
+  type: 'select'
+}, {
+  label: 'Text',
+  type: 'text'
+}, {
+  label: 'Button',
+  type: 'button'
+}];
+function Palette(props) {
+  return jsxs("div", {
+    class: "fjs-palette",
+    children: [jsxs("div", {
+      class: "fjs-palette-header",
+      title: "Form elements library",
+      children: [jsx("span", {
+        class: "fjs-hide-compact",
+        children: "FORM ELEMENTS "
+      }), "LIBRARY"]
+    }), jsx("div", {
+      class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
+      children: types.map(({
+        label,
+        type
+      }) => {
+        const Icon = iconsByType[type];
+        return jsxs("div", {
+          class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
+          "data-field-type": type,
+          title: `Create a ${label} element`,
+          children: [Icon ? jsx(Icon, {
+            class: "fjs-palette-field-icon",
+            width: "36",
+            height: "36",
+            viewBox: "0 0 54 54"
+          }) : null, jsx("span", {
+            class: "fjs-palette-field-text fjs-hide-compact",
+            children: label
+          })]
+        });
+      })
+    })]
+  });
+}
+
+class PaletteRenderer {
+  constructor(paletteConfig, eventBus) {
+    const {
+      parent
+    } = paletteConfig || {};
+    this._eventBus = eventBus;
+    this._container = domify('<div class="fjs-palette-container"></div>');
+
+    if (parent) {
+      this.attachTo(parent);
+    }
+
+    this._eventBus.once('formEditor.rendered', 500, () => {
+      this._render();
+    });
+  }
+  /**
+   * Attach the palette to a parent node.
+   *
+   * @param {HTMLElement} container
+   */
+
+
+  attachTo(container) {
+    if (!container) {
+      throw new Error('container required');
+    }
+
+    if (typeof container === 'string') {
+      container = query(container);
+    } // (1) detach from old parent
+
+
+    this.detach(); // (2) append to parent container
+
+    container.appendChild(this._container); // (3) notify interested parties
+
+    this._eventBus.fire('palette.attach');
+  }
+  /**
+   * Detach the palette from its parent node.
+   */
+
+
+  detach() {
+    const parentNode = this._container.parentNode;
+
+    if (parentNode) {
+      parentNode.removeChild(this._container);
+
+      this._eventBus.fire('palette.detach');
+    }
+  }
+
+  _render() {
+    render(jsx(Palette, {}), this._container);
+
+    this._eventBus.fire('palette.rendered');
+  }
+
+  _destroy() {
+    if (this._container) {
+      render(null, this._container);
+
+      this._eventBus.fire('palette.destroyed');
+    }
+  }
+
+}
+PaletteRenderer.$inject = ['config.palette', 'eventBus'];
+
+var PaletteModule = {
+  palette: ['type', PaletteRenderer]
+};
+
 const ids = new Ids([32, 36, 1]);
 /**
  * @typedef { import('./types').Injector } Injector
@@ -4924,7 +6950,7 @@ class FormEditor {
 
 
   _getModules() {
-    return [ModelingModule, EditorActionsModule, KeyboardModule, SelectionModule];
+    return [ModelingModule, EditorActionsModule, KeyboardModule, SelectionModule, PaletteModule];
   }
   /**
    * @internal