@nebula.js/stardust 2.3.1 → 2.6.1

package/dist/stardust.dev.js

@@ -1,6 +1,6 @@
 /*
-* @nebula.js/stardust v2.3.1
-* Copyright (c) 2021 QlikTech International AB
+* @nebula.js/stardust v2.6.1
+* Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
 
@@ -3210,8 +3210,8 @@
        * @returns {string} The style value
        *
        * @example
-       * theme.getStyle('object', 'title.main', 'fontSize'));
-       * theme.getStyle('', '', 'fontSize'));
+       * theme.getStyle('object', 'title.main', 'fontSize');
+       * theme.getStyle('', '', 'fontSize');
        */
       getStyle(basePath, path, attribute) {
         if (!styleResolverInstanceCache[basePath]) {
@@ -11023,7 +11023,7 @@
     return [appSelections, navState];
   }
 
-  const NEBULA_VERSION_HASH = "03e4" ;
+  const NEBULA_VERSION_HASH = "375a" ;
   let counter = 0;
   const NebulaApp = react.exports.forwardRef((_ref, ref) => {
     let {
@@ -11083,7 +11083,7 @@
     const appRef = React.createRef();
     const element = document.createElement('div');
     element.style.display = 'none';
-    element.setAttribute('data-nebulajs-version', "2.3.1" );
+    element.setAttribute('data-nebulajs-version', "2.6.1" );
     element.setAttribute('data-app-id', app.id);
     document.body.appendChild(element);
     ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -11182,6 +11182,109 @@
     }, function () {});
   }
 
+  var styles$r = function styles(theme) {
+    return {
+      /* Styles applied to the root element. */
+      root: {
+        userSelect: 'none',
+        width: '1em',
+        height: '1em',
+        display: 'inline-block',
+        fill: 'currentColor',
+        flexShrink: 0,
+        fontSize: theme.typography.pxToRem(24),
+        transition: theme.transitions.create('fill', {
+          duration: theme.transitions.duration.shorter
+        })
+      },
+
+      /* Styles applied to the root element if `color="primary"`. */
+      colorPrimary: {
+        color: theme.palette.primary.main
+      },
+
+      /* Styles applied to the root element if `color="secondary"`. */
+      colorSecondary: {
+        color: theme.palette.secondary.main
+      },
+
+      /* Styles applied to the root element if `color="action"`. */
+      colorAction: {
+        color: theme.palette.action.active
+      },
+
+      /* Styles applied to the root element if `color="error"`. */
+      colorError: {
+        color: theme.palette.error.main
+      },
+
+      /* Styles applied to the root element if `color="disabled"`. */
+      colorDisabled: {
+        color: theme.palette.action.disabled
+      },
+
+      /* Styles applied to the root element if `fontSize="inherit"`. */
+      fontSizeInherit: {
+        fontSize: 'inherit'
+      },
+
+      /* Styles applied to the root element if `fontSize="small"`. */
+      fontSizeSmall: {
+        fontSize: theme.typography.pxToRem(20)
+      },
+
+      /* Styles applied to the root element if `fontSize="large"`. */
+      fontSizeLarge: {
+        fontSize: theme.typography.pxToRem(35)
+      }
+    };
+  };
+  var SvgIcon$1 = /*#__PURE__*/react.exports.forwardRef(function SvgIcon(props, ref) {
+    var children = props.children,
+        classes = props.classes,
+        className = props.className,
+        _props$color = props.color,
+        color = _props$color === void 0 ? 'inherit' : _props$color,
+        _props$component = props.component,
+        Component = _props$component === void 0 ? 'svg' : _props$component,
+        _props$fontSize = props.fontSize,
+        fontSize = _props$fontSize === void 0 ? 'medium' : _props$fontSize,
+        htmlColor = props.htmlColor,
+        titleAccess = props.titleAccess,
+        _props$viewBox = props.viewBox,
+        viewBox = _props$viewBox === void 0 ? '0 0 24 24' : _props$viewBox,
+        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "fontSize", "htmlColor", "titleAccess", "viewBox"]);
+
+    return /*#__PURE__*/react.exports.createElement(Component, _extends$4({
+      className: clsx(classes.root, className, color !== 'inherit' && classes["color".concat(capitalize(color))], fontSize !== 'default' && fontSize !== 'medium' && classes["fontSize".concat(capitalize(fontSize))]),
+      focusable: "false",
+      viewBox: viewBox,
+      color: htmlColor,
+      "aria-hidden": titleAccess ? undefined : true,
+      role: titleAccess ? 'img' : undefined,
+      ref: ref
+    }, other), children, titleAccess ? /*#__PURE__*/react.exports.createElement("title", null, titleAccess) : null);
+  });
+  SvgIcon$1.muiName = 'SvgIcon';
+  var SvgIcon$2 = withStyles(styles$r, {
+    name: 'MuiSvgIcon'
+  })(SvgIcon$1);
+
+  /**
+   * Private module reserved for @material-ui/x packages.
+   */
+
+  function createSvgIcon(path, displayName) {
+    var Component = function Component(props, ref) {
+      return /*#__PURE__*/React.createElement(SvgIcon$2, _extends$4({
+        ref: ref
+      }, props), path);
+    };
+
+    Component.muiName = SvgIcon$2.muiName;
+    return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
+  }
+
   // Corresponds to 10 frames at 60 Hz.
   // A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
   function debounce(func) {
@@ -11233,6 +11336,30 @@
     }
   }
 
+  /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+  function useControlled(_ref) {
+    var controlled = _ref.controlled,
+        defaultProp = _ref.default;
+        _ref.name;
+        _ref.state;
+
+    var _React$useRef = react.exports.useRef(controlled !== undefined),
+        isControlled = _React$useRef.current;
+
+    var _React$useState = react.exports.useState(defaultProp),
+        valueState = _React$useState[0],
+        setValue = _React$useState[1];
+
+    var value = isControlled ? controlled : valueState;
+
+    var setValueIfUncontrolled = react.exports.useCallback(function (newValue) {
+      if (!isControlled) {
+        setValue(newValue);
+      }
+    }, []);
+    return [value, setValueIfUncontrolled];
+  }
+
   var useEnhancedEffect$6 = typeof window !== 'undefined' ? react.exports.useLayoutEffect : react.exports.useEffect;
   /**
    * https://github.com/facebook/react/issues/14099#issuecomment-440013892
@@ -12205,7 +12332,7 @@
     };
   }
 
-  var styles$n = function styles(theme) {
+  var styles$q = function styles(theme) {
     var elevations = {};
     theme.shadows.forEach(function (shadow, index) {
       elevations["elevation".concat(index)] = {
@@ -12249,7 +12376,7 @@
       ref: ref
     }, other));
   });
-  var Paper$1 = withStyles(styles$n, {
+  var Paper$1 = withStyles(styles$q, {
     name: 'MuiPaper'
   })(Paper);
 
@@ -12325,7 +12452,7 @@
 
   var DURATION = 550;
   var DELAY_RIPPLE = 80;
-  var styles$m = function styles(theme) {
+  var styles$p = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -12605,12 +12732,12 @@
       exit: true
     }, ripples));
   });
-  var TouchRipple$1 = withStyles(styles$m, {
+  var TouchRipple$1 = withStyles(styles$p, {
     flip: false,
     name: 'MuiTouchRipple'
   })( /*#__PURE__*/react.exports.memo(TouchRipple));
 
-  var styles$l = {
+  var styles$o = {
     /* Styles applied to the root element. */
     root: {
       display: 'inline-flex',
@@ -12914,11 +13041,11 @@
       center: centerRipple
     }, TouchRippleProps)) : null);
   });
-  var ButtonBase$1 = withStyles(styles$l, {
+  var ButtonBase$1 = withStyles(styles$o, {
     name: 'MuiButtonBase'
   })(ButtonBase);
 
-  var styles$k = function styles(theme) {
+  var styles$n = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -13043,13 +13170,13 @@
       className: classes.label
     }, children));
   });
-  var IconButton$1 = withStyles(styles$k, {
+  var IconButton$1 = withStyles(styles$n, {
     name: 'MuiIconButton'
   })(IconButton);
 
   var RADIUS_STANDARD = 10;
   var RADIUS_DOT = 4;
-  var styles$j = function styles(theme) {
+  var styles$m = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -13341,7 +13468,7 @@
       className: clsx(classes.badge, classes["".concat(anchorOrigin.horizontal).concat(capitalize(anchorOrigin.vertical), "}")], classes["anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)).concat(capitalize(overlap))], color !== 'default' && classes["color".concat(capitalize(color))], invisible && classes.invisible, variant === 'dot' && classes.dot)
     }, displayValue));
   });
-  var Badge$1 = withStyles(styles$j, {
+  var Badge$1 = withStyles(styles$m, {
     name: 'MuiBadge'
   })(Badge);
 
@@ -13355,7 +13482,7 @@
   });
   var Box$1 = Box;
 
-  var styles$i = function styles(theme) {
+  var styles$l = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -13527,11 +13654,11 @@
       ref: ref
     }, other));
   });
-  var Typography$1 = withStyles(styles$i, {
+  var Typography$1 = withStyles(styles$l, {
     name: 'MuiTypography'
   })(Typography);
 
-  var styles$h = function styles(theme) {
+  var styles$k = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: _extends$4({}, theme.typography.button, {
@@ -13856,7 +13983,7 @@
       className: classes.label
     }, startIcon, children, endIcon));
   });
-  var Button$1 = withStyles(styles$h, {
+  var Button$1 = withStyles(styles$k, {
     name: 'MuiButton'
   })(Button);
 
@@ -13866,13 +13993,265 @@
 
   var FormControlContext = react.exports.createContext();
 
-  function useFormControl() {
+  function useFormControl$1() {
     return react.exports.useContext(FormControlContext);
   }
   var FormControlContext$1 = FormControlContext;
 
+  function useFormControl() {
+    return react.exports.useContext(FormControlContext$1);
+  }
+
+  var styles$j = {
+    root: {
+      padding: 9
+    },
+    checked: {},
+    disabled: {},
+    input: {
+      cursor: 'inherit',
+      position: 'absolute',
+      opacity: 0,
+      width: '100%',
+      height: '100%',
+      top: 0,
+      left: 0,
+      margin: 0,
+      padding: 0,
+      zIndex: 1
+    }
+  };
+  /**
+   * @ignore - internal component.
+   */
+
+  var SwitchBase = /*#__PURE__*/react.exports.forwardRef(function SwitchBase(props, ref) {
+    var autoFocus = props.autoFocus,
+        checkedProp = props.checked,
+        checkedIcon = props.checkedIcon,
+        classes = props.classes,
+        className = props.className,
+        defaultChecked = props.defaultChecked,
+        disabledProp = props.disabled,
+        icon = props.icon,
+        id = props.id,
+        inputProps = props.inputProps,
+        inputRef = props.inputRef,
+        name = props.name,
+        onBlur = props.onBlur,
+        onChange = props.onChange,
+        onFocus = props.onFocus,
+        readOnly = props.readOnly,
+        required = props.required,
+        tabIndex = props.tabIndex,
+        type = props.type,
+        value = props.value,
+        other = _objectWithoutProperties(props, ["autoFocus", "checked", "checkedIcon", "classes", "className", "defaultChecked", "disabled", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"]);
+
+    var _useControlled = useControlled({
+      controlled: checkedProp,
+      default: Boolean(defaultChecked),
+      name: 'SwitchBase',
+      state: 'checked'
+    }),
+        _useControlled2 = _slicedToArray(_useControlled, 2),
+        checked = _useControlled2[0],
+        setCheckedState = _useControlled2[1];
+
+    var muiFormControl = useFormControl();
+
+    var handleFocus = function handleFocus(event) {
+      if (onFocus) {
+        onFocus(event);
+      }
+
+      if (muiFormControl && muiFormControl.onFocus) {
+        muiFormControl.onFocus(event);
+      }
+    };
+
+    var handleBlur = function handleBlur(event) {
+      if (onBlur) {
+        onBlur(event);
+      }
+
+      if (muiFormControl && muiFormControl.onBlur) {
+        muiFormControl.onBlur(event);
+      }
+    };
+
+    var handleInputChange = function handleInputChange(event) {
+      var newChecked = event.target.checked;
+      setCheckedState(newChecked);
+
+      if (onChange) {
+        // TODO v5: remove the second argument.
+        onChange(event, newChecked);
+      }
+    };
+
+    var disabled = disabledProp;
+
+    if (muiFormControl) {
+      if (typeof disabled === 'undefined') {
+        disabled = muiFormControl.disabled;
+      }
+    }
+
+    var hasLabelFor = type === 'checkbox' || type === 'radio';
+    return /*#__PURE__*/react.exports.createElement(IconButton$1, _extends$4({
+      component: "span",
+      className: clsx(classes.root, className, checked && classes.checked, disabled && classes.disabled),
+      disabled: disabled,
+      tabIndex: null,
+      role: undefined,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      ref: ref
+    }, other), /*#__PURE__*/react.exports.createElement("input", _extends$4({
+      autoFocus: autoFocus,
+      checked: checkedProp,
+      defaultChecked: defaultChecked,
+      className: classes.input,
+      disabled: disabled,
+      id: hasLabelFor && id,
+      name: name,
+      onChange: handleInputChange,
+      readOnly: readOnly,
+      ref: inputRef,
+      required: required,
+      tabIndex: tabIndex,
+      type: type,
+      value: value
+    }, inputProps)), checked ? checkedIcon : icon);
+  }); // NB: If changed, please update Checkbox, Switch and Radio
+  var SwitchBase$1 = withStyles(styles$j, {
+    name: 'PrivateSwitchBase'
+  })(SwitchBase);
+
+  /**
+   * @ignore - internal component.
+   */
+
+  var CheckBoxOutlineBlankIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
+    d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+  }));
+
+  /**
+   * @ignore - internal component.
+   */
+
+  var CheckBoxIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
+    d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+  }));
+
+  /**
+   * @ignore - internal component.
+   */
+
+  var IndeterminateCheckBoxIcon = createSvgIcon( /*#__PURE__*/react.exports.createElement("path", {
+    d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
+  }));
+
+  var styles$i = function styles(theme) {
+    return {
+      /* Styles applied to the root element. */
+      root: {
+        color: theme.palette.text.secondary
+      },
+
+      /* Pseudo-class applied to the root element if `checked={true}`. */
+      checked: {},
+
+      /* Pseudo-class applied to the root element if `disabled={true}`. */
+      disabled: {},
+
+      /* Pseudo-class applied to the root element if `indeterminate={true}`. */
+      indeterminate: {},
+
+      /* Styles applied to the root element if `color="primary"`. */
+      colorPrimary: {
+        '&$checked': {
+          color: theme.palette.primary.main,
+          '&:hover': {
+            backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
+            // Reset on touch devices, it doesn't add specificity
+            '@media (hover: none)': {
+              backgroundColor: 'transparent'
+            }
+          }
+        },
+        '&$disabled': {
+          color: theme.palette.action.disabled
+        }
+      },
+
+      /* Styles applied to the root element if `color="secondary"`. */
+      colorSecondary: {
+        '&$checked': {
+          color: theme.palette.secondary.main,
+          '&:hover': {
+            backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
+            // Reset on touch devices, it doesn't add specificity
+            '@media (hover: none)': {
+              backgroundColor: 'transparent'
+            }
+          }
+        },
+        '&$disabled': {
+          color: theme.palette.action.disabled
+        }
+      }
+    };
+  };
+  var defaultCheckedIcon = /*#__PURE__*/react.exports.createElement(CheckBoxIcon, null);
+  var defaultIcon = /*#__PURE__*/react.exports.createElement(CheckBoxOutlineBlankIcon, null);
+  var defaultIndeterminateIcon = /*#__PURE__*/react.exports.createElement(IndeterminateCheckBoxIcon, null);
+  var Checkbox = /*#__PURE__*/react.exports.forwardRef(function Checkbox(props, ref) {
+    var _props$checkedIcon = props.checkedIcon,
+        checkedIcon = _props$checkedIcon === void 0 ? defaultCheckedIcon : _props$checkedIcon,
+        classes = props.classes,
+        _props$color = props.color,
+        color = _props$color === void 0 ? 'secondary' : _props$color,
+        _props$icon = props.icon,
+        iconProp = _props$icon === void 0 ? defaultIcon : _props$icon,
+        _props$indeterminate = props.indeterminate,
+        indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,
+        _props$indeterminateI = props.indeterminateIcon,
+        indeterminateIconProp = _props$indeterminateI === void 0 ? defaultIndeterminateIcon : _props$indeterminateI,
+        inputProps = props.inputProps,
+        _props$size = props.size,
+        size = _props$size === void 0 ? 'medium' : _props$size,
+        other = _objectWithoutProperties(props, ["checkedIcon", "classes", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"]);
+
+    var icon = indeterminate ? indeterminateIconProp : iconProp;
+    var indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
+    return /*#__PURE__*/react.exports.createElement(SwitchBase$1, _extends$4({
+      type: "checkbox",
+      classes: {
+        root: clsx(classes.root, classes["color".concat(capitalize(color))], indeterminate && classes.indeterminate),
+        checked: classes.checked,
+        disabled: classes.disabled
+      },
+      color: color,
+      inputProps: _extends$4({
+        'data-indeterminate': indeterminate
+      }, inputProps),
+      icon: /*#__PURE__*/react.exports.cloneElement(icon, {
+        fontSize: icon.props.fontSize === undefined && size === "small" ? size : icon.props.fontSize
+      }),
+      checkedIcon: /*#__PURE__*/react.exports.cloneElement(indeterminateIcon, {
+        fontSize: indeterminateIcon.props.fontSize === undefined && size === "small" ? size : indeterminateIcon.props.fontSize
+      }),
+      ref: ref
+    }, other));
+  });
+  var Checkbox$1 = withStyles(styles$i, {
+    name: 'MuiCheckbox'
+  })(Checkbox);
+
   var SIZE = 44;
-  var styles$g = function styles(theme) {
+  var styles$h = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -14032,7 +14411,7 @@
       strokeWidth: thickness
     })));
   });
-  var CircularProgress$1 = withStyles(styles$g, {
+  var CircularProgress$1 = withStyles(styles$h, {
     name: 'MuiCircularProgress',
     flip: false
   })(CircularProgress);
@@ -14517,7 +14896,7 @@
     }));
   }
 
-  var styles$f = {
+  var styles$g = {
     /* Styles applied to the root element. */
     root: {
       zIndex: -1,
@@ -14549,7 +14928,7 @@
       "aria-hidden": true,
       ref: ref
     }, other, {
-      style: _extends$4({}, styles$f.root, invisible ? styles$f.invisible : {}, other.style)
+      style: _extends$4({}, styles$g.root, invisible ? styles$g.invisible : {}, other.style)
     })) : null;
   });
   var SimpleBackdrop$1 = SimpleBackdrop;
@@ -14566,7 +14945,7 @@
 
 
   var defaultManager = new ModalManager();
-  var styles$e = function styles(theme) {
+  var styles$f = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -14767,7 +15146,7 @@
       }
     };
 
-    var inlineStyle = styles$e(theme || {
+    var inlineStyle = styles$f(theme || {
       zIndex: zIndex$1
     });
     var childProps = {};
@@ -14806,7 +15185,7 @@
   });
   var Modal$1 = Modal;
 
-  var styles$d = function styles(theme) {
+  var styles$e = function styles(theme) {
     return {
       /* Styles applied to the root element. */
       root: {
@@ -14880,7 +15259,7 @@
       ref: ref
     }, other));
   });
-  var Divider$1 = withStyles(styles$d, {
+  var Divider$1 = withStyles(styles$e, {
     name: 'MuiDivider'
   })(Divider);
 
@@ -14906,7 +15285,7 @@
   }
 
   var useEnhancedEffect$3 = typeof window !== 'undefined' ? react.exports.useLayoutEffect : react.exports.useEffect;
-  var styles$c = {
+  var styles$d = {
     /* Styles applied to the shadow textarea element. */
     shadow: {
       // Visibility needed to hide the extra text area on iPads
@@ -15048,7 +15427,7 @@
       readOnly: true,
       ref: shadowRef,
       tabIndex: -1,
-      style: _extends$4({}, styles$c.shadow, style)
+      style: _extends$4({}, styles$d.shadow, style)
     }));
   });
   var TextareaAutosize$1 = TextareaAutosize;
@@ -15074,7 +15453,7 @@
     return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
   } // Determine if an Input is adorned on start.
 
-  var styles$b = function styles(theme) {
+  var styles$c = function styles(theme) {
     var light = theme.palette.type === 'light';
     var placeholder = {
       color: 'currentColor',
@@ -15310,7 +15689,7 @@
         focused = _React$useState[0],
         setFocused = _React$useState[1];
 
-    var muiFormControl = useFormControl();
+    var muiFormControl = useFormControl$1();
 
     var fcs = formControlState({
       props: props,
@@ -15506,10 +15885,110 @@
       startAdornment: startAdornment
     })) : null);
   });
-  var InputBase$1 = withStyles(styles$b, {
+  var InputBase$1 = withStyles(styles$c, {
     name: 'MuiInputBase'
   })(InputBase);
 
+  var styles$b = function styles(theme) {
+    return {
+      /* Styles applied to the root element. */
+      root: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+        // For correct alignment with the text.
+        verticalAlign: 'middle',
+        WebkitTapHighlightColor: 'transparent',
+        marginLeft: -11,
+        marginRight: 16,
+        // used for row presentation of radio/checkbox
+        '&$disabled': {
+          cursor: 'default'
+        }
+      },
+
+      /* Styles applied to the root element if `labelPlacement="start"`. */
+      labelPlacementStart: {
+        flexDirection: 'row-reverse',
+        marginLeft: 16,
+        // used for row presentation of radio/checkbox
+        marginRight: -11
+      },
+
+      /* Styles applied to the root element if `labelPlacement="top"`. */
+      labelPlacementTop: {
+        flexDirection: 'column-reverse',
+        marginLeft: 16
+      },
+
+      /* Styles applied to the root element if `labelPlacement="bottom"`. */
+      labelPlacementBottom: {
+        flexDirection: 'column',
+        marginLeft: 16
+      },
+
+      /* Pseudo-class applied to the root element if `disabled={true}`. */
+      disabled: {},
+
+      /* Styles applied to the label's Typography component. */
+      label: {
+        '&$disabled': {
+          color: theme.palette.text.disabled
+        }
+      }
+    };
+  };
+  /**
+   * Drop in replacement of the `Radio`, `Switch` and `Checkbox` component.
+   * Use this component if you want to display an extra label.
+   */
+
+  var FormControlLabel = /*#__PURE__*/react.exports.forwardRef(function FormControlLabel(props, ref) {
+    props.checked;
+        var classes = props.classes,
+        className = props.className,
+        control = props.control,
+        disabledProp = props.disabled;
+        props.inputRef;
+        var label = props.label,
+        _props$labelPlacement = props.labelPlacement,
+        labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement;
+        props.name;
+        props.onChange;
+        props.value;
+        var other = _objectWithoutProperties(props, ["checked", "classes", "className", "control", "disabled", "inputRef", "label", "labelPlacement", "name", "onChange", "value"]);
+
+    var muiFormControl = useFormControl();
+    var disabled = disabledProp;
+
+    if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
+      disabled = control.props.disabled;
+    }
+
+    if (typeof disabled === 'undefined' && muiFormControl) {
+      disabled = muiFormControl.disabled;
+    }
+
+    var controlProps = {
+      disabled: disabled
+    };
+    ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(function (key) {
+      if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
+        controlProps[key] = props[key];
+      }
+    });
+    return /*#__PURE__*/react.exports.createElement("label", _extends$4({
+      className: clsx(classes.root, className, labelPlacement !== 'end' && classes["labelPlacement".concat(capitalize(labelPlacement))], disabled && classes.disabled),
+      ref: ref
+    }, other), /*#__PURE__*/react.exports.cloneElement(control, controlProps), /*#__PURE__*/react.exports.createElement(Typography$1, {
+      component: "span",
+      className: clsx(classes.label, disabled && classes.disabled)
+    }, label));
+  });
+  var FormControlLabel$1 = withStyles(styles$b, {
+    name: 'MuiFormControlLabel'
+  })(FormControlLabel);
+
   var SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   var GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
@@ -16064,7 +16543,7 @@
         variantProp = props.variant,
         other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"]);
 
-    var muiFormControl = useFormControl() || {};
+    var muiFormControl = useFormControl$1() || {};
     var variant = variantProp;
 
     if (variantProp && muiFormControl.variant) ;
@@ -18337,192 +18816,479 @@
     return InfiniteLoader;
   }(react.exports.PureComponent);
 
-  const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
-    shapes: [{
-      type: 'path',
-      attrs: {
-        d: 'M6,10 L13,3 L15,5 L8,12 L6,14 L1,9 L3,7 L6,10 Z'
+  const SELECTED_STATES = ['S', 'XS'];
+
+  const flatten = arr => arr.reduce((prev, cur) => prev.concat(cur));
+
+  function isStateSelected(qState) {
+    return SELECTED_STATES.includes(qState);
+  }
+
+  function getUniques(arr) {
+    return Array.isArray(arr) ? Array.from(new Set(arr)) : undefined;
+  }
+  function getSelectedValues(pages) {
+    if (!pages || !pages.length) {
+      return [];
+    }
+
+    const elementNbrs = pages.map(page => {
+      const elementNumbers = page.qMatrix.map(p => {
+        const [p0] = p;
+        return isStateSelected(p0.qState) ? p0.qElemNumber : false;
+      });
+      return elementNumbers.filter(n => n !== false);
+    });
+    return flatten(elementNbrs);
+  }
+  function applySelectionsOnPages(pages, elmNumbers) {
+    const getNewSelectionState = qState => elmNumbers.length <= 1 && isStateSelected(qState) ? 'A' : 'S';
+
+    const matrices = pages.map(page => {
+      const qMatrix = page.qMatrix.map(p => {
+        const [p0] = p;
+        const selectionMatchesElement = elmNumbers.includes(p0.qElemNumber);
+        const qState = selectionMatchesElement ? getNewSelectionState(p0.qState) : p0.qState;
+        return [_objectSpread2(_objectSpread2({}, p0), {}, {
+          qState
+        }), p.slice(1)];
+      });
+      return _objectSpread2(_objectSpread2({}, page), {}, {
+        qMatrix
+      });
+    });
+    return matrices;
+  }
+  async function selectValues(_ref) {
+    let {
+      selections,
+      elemNumbers,
+      isSingleSelect = false
+    } = _ref;
+    let resolved = Promise.resolve(false);
+    const hasNanValues = elemNumbers.some(elemNumber => Number.isNaN(elemNumber));
+
+    if (!hasNanValues) {
+      const elemNumbersToSelect = elemNumbers;
+      resolved = selections.select({
+        method: 'selectListObjectValues',
+        params: ['/qListObjectDef', elemNumbersToSelect, !isSingleSelect]
+      }).then(success => success !== false).catch(() => false);
+    }
+
+    return resolved;
+  }
+  function getElemNumbersFromPages(pages) {
+    if (!pages || !pages.length) {
+      return [];
+    }
+
+    const elemNumbersArr = pages.map(page => {
+      const qElemNumbers = page.qMatrix.map(p => {
+        const [{
+          qElemNumber
+        }] = p;
+        return qElemNumber;
+      });
+      return qElemNumbers;
+    });
+    const elemNumbers = flatten(elemNumbersArr);
+    return elemNumbers;
+  }
+  /**
+   * @typedef {object} MinMaxResult
+   * @property {number} min
+   * @property {number} max
+   */
+
+  /**
+   * Returns the min and max indices of elemNumbersOrdered which contains
+   * all numbers in elementNbrs.
+   *
+   * @param {number[]} elementNbrs
+   * @param {number[]} elemNumbersOrdered
+   * @returns {MinMaxResult}
+   */
+
+  function getMinMax(elementNbrs, elemNumbersOrdered) {
+    let min = Infinity;
+    let max = -Infinity;
+    elementNbrs.forEach(nbr => {
+      const index = elemNumbersOrdered.indexOf(nbr);
+      min = index < min ? index : min;
+      max = index > max ? index : max;
+    });
+    return {
+      min,
+      max
+    };
+  }
+
+  function fillRange(elementNbrs, elemNumbersOrdered) {
+    if (!elementNbrs) {
+      return [];
+    }
+
+    if (elementNbrs.length <= 1) {
+      return elementNbrs;
+    } // Interpolate values algorithm
+
+
+    const {
+      min,
+      max
+    } = getMinMax(elementNbrs, elemNumbersOrdered);
+    return elemNumbersOrdered.slice(min, max + 1);
+  }
+
+  function useSelectionsInteractions(_ref) {
+    let {
+      layout,
+      selections,
+      pages = [],
+      rangeSelect = true,
+      checkboxes = false,
+      doc = document
+    } = _ref;
+    const [instantPages, setInstantPages] = react.exports.useState(pages);
+    const [mouseDown, setMouseDown] = react.exports.useState(false);
+    const [selectingValues, setSelectingValues] = react.exports.useState(false);
+    const [selected, setSelected] = react.exports.useState([]);
+    const [isRangeSelection, setIsRangeSelection] = react.exports.useState(false);
+    const [preSelected, setPreSelected] = react.exports.useState([]);
+    const elemNumbersOrdered = getElemNumbersFromPages(pages);
+
+    const getIsSingleSelect = () => !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne); // Select values for real, by calling the backend.
+
+
+    const select = async function () {
+      let elemNumbers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      setSelectingValues(true);
+      const isSingleSelect = getIsSingleSelect();
+      const filtered = additive ? elemNumbers.filter(n => !selected.includes(n)) : elemNumbers;
+      await selectValues({
+        selections,
+        elemNumbers: filtered,
+        isSingleSelect
+      });
+      setSelectingValues(false);
+    }; // Show estimated selection states instantly before applying the selections for real.
+
+
+    const preSelect = function (elemNumbers) {
+      let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      setPreSelected(existing => {
+        const uniques = getUniques([...existing, ...elemNumbers]);
+        const filtered = additive ? uniques.filter(n => !selected.includes(n)) : uniques;
+        const filled = additive ? fillRange(uniques, elemNumbersOrdered) : filtered;
+        return filled;
+      });
+    };
+
+    const onClick = react.exports.useCallback(event => {
+      if (selectingValues) {
+        return;
       }
-    }]
-  });
 
-  var Tick = (props => SvgIcon(tick(props)));
+      const elemNumber = +event.currentTarget.getAttribute('data-n');
+      setPreSelected([elemNumber]);
+    }, [selectingValues]);
+    const onMouseDown = react.exports.useCallback(event => {
+      if (selectingValues) {
+        return;
+      }
 
-  const useStyles$b = makeStyles$1(theme => ({
-    row: {
-      flexWrap: 'nowrap',
-      borderBottom: "1px solid ".concat(theme.palette.divider),
-      '&:focus': {
-        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusOutline),
-        outline: 'none'
+      setIsRangeSelection(false);
+      setMouseDown(true);
+      const elemNumber = +event.currentTarget.getAttribute('data-n');
+      setPreSelected([elemNumber]);
+    }, [selectingValues]);
+    const onMouseUp = react.exports.useCallback(event => {
+      const elemNumber = +event.currentTarget.getAttribute('data-n');
+
+      if (getIsSingleSelect() || !rangeSelect || !mouseDown || selectingValues || preSelected.length === 1 && preSelected[0] === elemNumber // prevent toggling again on mouseup
+      ) {
+        return;
       }
-    },
-    cell: {
-      padding: '8px',
-      '& span': {
-        whiteSpace: 'nowrap',
-        fontSize: '12px',
-        lineHeight: '16px'
-      },
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
-    icon: {
-      padding: theme.spacing(1)
-    },
-    S: {
-      background: theme.palette.selected.main,
-      color: theme.palette.selected.mainContrastText,
-      '&:focus': {
-        boxShadow: "inset 0 0 0 2px rgba(0, 0, 0, 0.3)",
-        outline: 'none'
+
+      preSelect([elemNumber]);
+    }, [mouseDown, selectingValues, preSelected, selected, isRangeSelection]);
+    const onMouseUpDoc = react.exports.useCallback(() => {
+      // Ensure we end interactions when mouseup happens outside the Listbox.
+      setMouseDown(false);
+      setSelectingValues(false);
+    }, []);
+    const onMouseEnter = react.exports.useCallback(event => {
+      if (getIsSingleSelect() || !mouseDown || selectingValues) {
+        return;
+      }
+
+      setIsRangeSelection(true);
+      const elemNumber = +event.currentTarget.getAttribute('data-n');
+      preSelect([elemNumber], true);
+    }, [mouseDown, selectingValues, isRangeSelection, preSelected, selected, layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne]);
+    react.exports.useEffect(() => {
+      // Perform selections of pre-selected values. This can
+      // happen only when interactions have finished (mouseup).
+      const interactionIsFinished = !mouseDown;
+
+      if (!preSelected || !preSelected.length || selectingValues || !interactionIsFinished || !layout) {
+        return;
+      }
+
+      select(preSelected, isRangeSelection);
+    }, [preSelected, mouseDown]);
+    react.exports.useEffect(() => {
+      doc.addEventListener('mouseup', onMouseUpDoc);
+      return () => {
+        doc.removeEventListener('mouseup', onMouseUpDoc);
+      };
+    }, []);
+    react.exports.useEffect(() => {
+      if (selectingValues || mouseDown) {
+        return;
+      } // Keep track of (truely) selected fields so we can prevent toggling them on range select.
+
+
+      const alreadySelected = getSelectedValues(pages);
+      setSelected(alreadySelected);
+    }, [pages]);
+    react.exports.useEffect(() => {
+      if (selectingValues || !pages || !checkboxes && !mouseDown) {
+        return;
+      } // Render pre-selections before they have been selected in Engine.
+
+
+      const newPages = applySelectionsOnPages(pages, preSelected);
+      setInstantPages(newPages);
+    }, [preSelected]);
+    const interactionEvents = {};
+
+    if (checkboxes) {
+      Object.assign(interactionEvents, {
+        onClick
+      });
+    } else if (rangeSelect) {
+      Object.assign(interactionEvents, {
+        onMouseUp,
+        onMouseDown,
+        onMouseEnter
+      });
+    } else {
+      Object.assign(interactionEvents, {
+        onMouseUp,
+        onMouseDown
+      });
+    }
+
+    return {
+      instantPages,
+      interactionEvents
+    };
+  }
+
+  const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
+    shapes: [{
+      type: 'path',
+      attrs: {
+        d: 'M6,10 L13,3 L15,5 L8,12 L6,14 L1,9 L3,7 L6,10 Z'
       }
+    }]
+  });
+
+  var Tick = (props => SvgIcon(tick(props)));
+
+  const CheckboxChecked = "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")";
+
+  const useStyles$b = makeStyles$1(theme => ({
+    cbIcon: {
+      borderRadius: 3,
+      width: 16,
+      height: 16,
+      boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+      backgroundColor: '#f5f8fa',
+      backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))'
     },
-    A: {
-      background: theme.palette.selected.alternative,
-      color: theme.palette.selected.alternativeContrastText
+    cbIconChecked: {
+      borderRadius: 3,
+      backgroundColor: theme.palette.selected.main,
+      backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+      '&:before': {
+        display: 'block',
+        width: 16,
+        height: 16,
+        backgroundImage: CheckboxChecked,
+        content: '""'
+      }
     },
-    X: {
-      background: theme.palette.selected.excluded,
-      color: theme.palette.selected.excludedContrastText
+    checkbox: {
+      margin: 0,
+      '&:hover': {
+        backgroundColor: 'inherit !important'
+      }
     },
-    highlighted: {
-      backgroundColor: '#FFC72A'
+    dense: {
+      padding: '4px 8px'
     }
   }));
-  function Row(_ref) {
+  function ListboxCheckbox(_ref) {
     let {
-      index,
-      style,
-      data
+      checked,
+      label,
+      dense
     } = _ref;
-    const classes = useStyles$b();
-    const classArr = [classes.row];
-    let label = '';
-    const {
-      onClick,
-      pages
-    } = data;
-    let cell;
-
-    if (pages) {
-      const page = pages.filter(p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight)[0];
-
-      if (page) {
-        const area = page.qArea;
-
-        if (index >= area.qTop && index < area.qTop + area.qHeight) {
-          [cell] = page.qMatrix[index - area.qTop];
-        }
-      }
-    }
+    const styles = useStyles$b();
+    return /*#__PURE__*/React.createElement(Checkbox$1, {
+      edge: "start",
+      checked: checked,
+      tabIndex: -1,
+      disableRipple: true,
+      className: [styles.checkbox, dense && styles.dense].filter(Boolean).join(' '),
+      inputProps: {
+        'aria-labelledby': label
+      },
+      name: label,
+      icon: /*#__PURE__*/React.createElement("span", {
+        className: styles.cbIcon
+      }),
+      checkedIcon: /*#__PURE__*/React.createElement("span", {
+        className: styles.cbIconChecked
+      })
+    });
+  }
 
-    let locked = false;
-    let selected = false;
+  /**
+   * @typedef {object} Range
+   * @property {number} qCharPos The (absolute) index where the highlighted range starts.
+   * @property {number} qCharCount The length of the sub-string (starting from qChartPos) that should be highlighted.
+   */
 
-    if (cell) {
-      label = cell.qText;
-      locked = cell.qState === 'L' || cell.qState === 'XL';
-      selected = cell.qState === 'S' || cell.qState === 'XS';
+  /**
+   * @typedef {object} Segment
+   * @property {string} segment The sub-string/segment cut out from the original label.
+   * @property {boolean} highlighted A flag which tells whether the segment should be highlighted or not.
+   */
 
-      if (cell.qState === 'S' || cell.qState === 'L') {
-        classArr.push(classes.S);
-      } else if (cell.qState === 'A') {
-        classArr.push(classes.A);
-      } else if (cell.qState === 'X' || cell.qState === 'XS' || cell.qState === 'XL') {
-        classArr.push(classes.X);
-      }
-    } // Handle search highlights
+  /**
+   * @param {string} label The label we want to create segments out of.
+   * @param {Range} range The indexes which define how to create the segments.
+   * @param {number=} [startIndex] An optional index which tells where we want to start the first segment from
+   *   (only relevant for creating the first unhighlighted segment of a string/sub-string).
+   * @returns {Segment[]} An array of segments.
+   */
+  function getSegmentsFromRange(label, range) {
+    let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    const {
+      qCharPos,
+      qCharCount
+    } = range;
+    const segments = [];
 
+    if (qCharPos > startIndex) {
+      // Create a non-highlighted section before the highighted section.
+      segments.push([label.slice(startIndex, qCharPos), false]);
+    } // Highlighted segment.
 
-    const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
-    const labels = ranges.reduce((acc, curr, ix) => {
-      // First non highlighted segment
-      if (curr.qCharPos > 0 && ix === 0) {
-        acc.push([label.slice(0, curr.qCharPos)]);
-      } // Previous non highlighted segment
 
+    segments.push([label.slice(qCharPos, qCharPos + qCharCount), true]);
+    return segments;
+  }
+  /**
+   * @param {string} label The label we want to create segments out of.
+   * @param {Range[]} ranges The ranges defining indices for cutting the string into segments.
+   * @returns {Segment[]} An array of segments, covering the entire string label.
+   */
 
-      const prev = ranges[ix - 1];
 
-      if (prev) {
-        acc.push([label.slice(prev.qCharPos + prev.qCharPos + 1, curr.qCharPos)]);
-      } // Highlighted segment
+  function getSegmentsFromRanges(label, ranges) {
+    if (!ranges.length) {
+      return [];
+    }
 
+    const labels = ranges.reduce((acc, curr, ix) => {
+      const startIndex = ix === 0 ? 0 : ranges[ix - 1].qCharPos + ranges[ix - 1].qCharCount;
+      acc.push(...getSegmentsFromRange(label, curr, startIndex)); // Last non highlighted segment
 
-      acc.push([label.slice(curr.qCharPos, curr.qCharPos + curr.qCharCount), classes.highlighted]); // Last non highlighted segment
+      const isLastRange = ix === ranges.length - 1;
+      const endIndex = ranges[ix].qCharPos + ranges[ix].qCharCount;
 
-      if (ix === ranges.length - 1 && curr.qCharPos + curr.qCharCount < label.length) {
-        acc.push([label.slice(curr.qCharPos + curr.qCharCount)]);
+      if (isLastRange && endIndex < label.length) {
+        acc.push([label.slice(endIndex), false]);
       }
 
       return acc;
     }, []);
-    return /*#__PURE__*/React.createElement(Grid$1, {
-      container: true,
-      spacing: 0,
-      className: classArr.join(' ').trim(),
-      style: style,
-      onClick: onClick,
-      role: "row",
-      tabIndex: 0,
-      "data-n": cell && cell.qElemNumber
-    }, /*#__PURE__*/React.createElement(Grid$1, {
-      item: true,
-      style: {
-        minWidth: 0,
-        flexGrow: 1
-      },
-      className: classes.cell,
-      title: "".concat(label)
-    }, ranges.length === 0 ? /*#__PURE__*/React.createElement(Typography$1, {
-      component: "span",
-      noWrap: true,
-      color: "inherit"
-    }, "".concat(label)) : labels.map((_ref2, ix) => {
-      let [l, highlighted] = _ref2;
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line react/no-array-index-key
-        React.createElement(Typography$1, {
-          component: "span",
-          key: ix,
-          className: highlighted,
-          noWrap: true
-        }, l)
-      );
-    })), /*#__PURE__*/React.createElement(Grid$1, {
-      item: true,
-      className: classes.icon
-    }, locked && /*#__PURE__*/React.createElement(Lock, {
-      size: "small"
-    }), selected && /*#__PURE__*/React.createElement(Tick, {
-      size: "small"
-    })));
+    return labels;
   }
 
+  const ellipsis = {
+    width: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  };
   const useStyles$a = makeStyles$1(theme => ({
+    row: {
+      flexWrap: 'nowrap',
+      borderBottom: "1px solid ".concat(theme.palette.divider),
+      color: theme.palette.text.primary,
+      '&:focus': {
+        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusOutline),
+        outline: 'none'
+      }
+    },
     column: {
       flexWrap: 'nowrap',
       borderRight: "1px solid ".concat(theme.palette.divider),
+      color: theme.palette.text.primary,
       '&:focus': {
         boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusOutline),
         outline: 'none'
       }
     },
+    // The interior wrapper for all field content.
     cell: {
-      padding: '8px',
-      '& span': {
-        whiteSpace: 'nowrap',
-        fontSize: '12px',
-        lineHeight: '16px'
-      },
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
+      display: 'flex',
+      alignItems: 'center',
+      minWidth: 0,
+      flexGrow: 1,
+      // Note that this padding is overridden when using checkboxes.
+      paddingLeft: '12px',
+      paddingRight: '12px'
+    },
+    // The leaf node, containing the label text.
+    labelText: _objectSpread2({
+      flexBasis: 'max-content',
+      lineHeight: '16px',
+      userSelect: 'none',
+      whiteSpace: 'pre'
+    }, ellipsis),
+    labelDense: {
+      fontSize: 12
+    },
+    // Highlight is added to labelText spans, which are created as siblings to original labelText,
+    // when a search string is matched.
+    highlighted: {
+      overflow: 'visible',
+      width: '100%',
+      '& > span': {
+        width: '100%',
+        backgroundColor: '#FFC72A'
+      }
+    },
+    // Checkbox and label container.
+    checkboxLabel: {
+      margin: 0,
+      width: '100%',
+      // For checkboxes the first child is the checkbox container, second is the label container.
+      '& > span:nth-child(2)': _objectSpread2({}, ellipsis)
     },
+    // The icons container holding tick and lock, shown inside fields.
     icon: {
+      display: 'flex',
       padding: theme.spacing(1)
     },
+    // Selection styles (S=Selected, A=Available, X=Excluded).
     S: {
       background: theme.palette.selected.main,
       color: theme.palette.selected.mainContrastText,
@@ -18538,135 +19304,232 @@
     X: {
       background: theme.palette.selected.excluded,
       color: theme.palette.selected.excludedContrastText
-    },
-    highlighted: {
-      backgroundColor: '#FFC72A'
     }
   }));
-  function Column(_ref) {
+  function RowColumn(_ref) {
     let {
       index,
       style,
-      data
+      data,
+      column = false
     } = _ref;
-    const classes = useStyles$a();
-    const classArr = [classes.column];
-    let label = '';
     const {
       onClick,
-      pages
+      onMouseDown,
+      onMouseUp,
+      onMouseEnter,
+      pages,
+      isLocked,
+      checkboxes = false,
+      dense = false
     } = data;
-    let cell;
+    const [isSelected, setSelected] = react.exports.useState(false);
+    const [cell, setCell] = react.exports.useState();
+    const classes = useStyles$a();
+    const [classArr, setClassArr] = react.exports.useState([]);
+    react.exports.useEffect(() => {
+      if (!pages) {
+        return;
+      }
 
-    if (pages) {
+      let c;
       const page = pages.filter(p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight)[0];
 
       if (page) {
         const area = page.qArea;
 
         if (index >= area.qTop && index < area.qTop + area.qHeight) {
-          [cell] = page.qMatrix[index - area.qTop];
+          [c] = page.qMatrix[index - area.qTop];
         }
       }
-    }
-
-    let locked = false;
-    let selected = false;
 
-    if (cell) {
-      label = cell.qText;
-      locked = cell.qState === 'L' || cell.qState === 'XL';
-      selected = cell.qState === 'S' || cell.qState === 'XS';
-
-      if (cell.qState === 'S' || cell.qState === 'L') {
-        classArr.push(classes.S);
-      } else if (cell.qState === 'A') {
-        classArr.push(classes.A);
-      } else if (cell.qState === 'X' || cell.qState === 'XS' || cell.qState === 'XL') {
-        classArr.push(classes.X);
+      setCell(c);
+    }, [pages]);
+    react.exports.useEffect(() => {
+      if (!cell) {
+        return;
       }
-    } // Handle search highlights
 
+      const selected = cell.qState === 'S' || cell.qState === 'XS' || cell.qState === 'L';
+      setSelected(selected);
+      const clazzArr = [column ? classes.column : classes.row];
 
-    const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
-    const labels = ranges.reduce((acc, curr, ix) => {
-      // First non highlighted segment
-      if (curr.qCharPos > 0 && ix === 0) {
-        acc.push([label.slice(0, curr.qCharPos)]);
-      } // Previous non highlighted segment
+      if (!checkboxes) {
+        if (cell.qState === 'S' || cell.qState === 'L') {
+          clazzArr.push(classes.S);
+        } else if (cell.qState === 'A') {
+          clazzArr.push(classes.A);
+        } else if (cell.qState === 'X' || cell.qState === 'XS' || cell.qState === 'XL') {
+          clazzArr.push(classes.X);
+        }
+      }
 
+      setClassArr(clazzArr);
+    }, [cell && cell.qState]);
 
-      const prev = ranges[ix - 1];
+    const getValueField = _ref2 => {
+      let {
+        lbl,
+        ix,
+        color,
+        highlighted = false
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(Typography$1, {
+        component: "span",
+        variant: "body2",
+        key: ix,
+        className: [classes.labelText, highlighted && classes.highlighted, dense && classes.labelDense].filter(c => !!c).join(' ').trim(),
+        color: color
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          whiteSpace: 'pre'
+        }
+      }, lbl));
+    };
 
-      if (prev) {
-        acc.push([label.slice(prev.qCharPos + prev.qCharPos + 1, curr.qCharPos)]);
-      } // Highlighted segment
+    const getCheckboxField = _ref3 => {
+      let {
+        lbl,
+        color,
+        qElemNumber
+      } = _ref3;
+      const cb = /*#__PURE__*/React.createElement(ListboxCheckbox, {
+        label: lbl,
+        checked: isSelected,
+        dense: dense
+      });
+      const labelTag = typeof lbl === 'string' ? getValueField({
+        lbl,
+        color,
+        highlighted: false
+      }) : lbl;
+      return /*#__PURE__*/React.createElement(FormControlLabel$1, {
+        color: color,
+        control: cb,
+        className: classes.checkboxLabel,
+        label: labelTag,
+        key: qElemNumber
+      });
+    };
 
+    const label = cell ? cell.qText : ''; // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
 
-      acc.push([label.slice(curr.qCharPos, curr.qCharPos + curr.qCharCount), classes.highlighted]); // Last non highlighted segment
+    const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
+    const labels = getSegmentsFromRanges(label, ranges);
+    const getField = checkboxes ? getCheckboxField : getValueField;
 
-      if (ix === ranges.length - 1 && curr.qCharPos + curr.qCharCount < label.length) {
-        acc.push([label.slice(curr.qCharPos + curr.qCharCount)]);
-      }
+    const getFieldWithRanges = _ref4 => {
+      let {
+        lbls
+      } = _ref4;
+      const labelsWithRanges = lbls.map((_ref5, ix) => {
+        let [lbl, highlighted] = _ref5;
+        return getValueField({
+          ix,
+          highlighted,
+          lbl
+        });
+      });
+      return checkboxes ? getCheckboxField({
+        lbl: labelsWithRanges
+      }) : labelsWithRanges;
+    };
 
-      return acc;
-    }, []);
+    const iconStyles = {
+      alignItems: 'center',
+      display: 'flex'
+    };
+    const showLock = isSelected && isLocked;
+    const showTick = !checkboxes && isSelected && !isLocked;
+    const cellStyle = {
+      display: 'flex',
+      alignItems: 'center',
+      minWidth: 0,
+      flexGrow: 1,
+      padding: checkboxes ? 0 : undefined
+    };
     return /*#__PURE__*/React.createElement(Grid$1, {
       container: true,
       spacing: 0,
-      className: classArr.join(' ').trim(),
+      className: ['value', ...classArr].join(' ').trim(),
       style: style,
       onClick: onClick,
-      alignItems: "center",
-      role: "row",
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onMouseEnter: onMouseEnter,
+      role: column ? 'column' : 'row',
       tabIndex: 0,
       "data-n": cell && cell.qElemNumber
     }, /*#__PURE__*/React.createElement(Grid$1, {
       item: true,
-      style: {
-        minWidth: 0,
-        flexGrow: 1
-      },
+      style: cellStyle,
       className: classes.cell,
       title: "".concat(label)
-    }, ranges.length === 0 ? /*#__PURE__*/React.createElement(Typography$1, {
-      component: "span",
-      noWrap: true,
-      color: "inherit"
-    }, "".concat(label)) : labels.map((_ref2, ix) => {
-      let [l, highlighted] = _ref2;
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line react/no-array-index-key
-        React.createElement(Typography$1, {
-          component: "span",
-          key: ix,
-          className: highlighted,
-          noWrap: true
-        }, l)
-      );
-    })), /*#__PURE__*/React.createElement(Grid$1, {
+    }, ranges.length === 0 ? getField({
+      lbl: label,
+      color: 'inherit'
+    }) : getFieldWithRanges({
+      lbls: labels
+    })), (showLock || showTick) && /*#__PURE__*/React.createElement(Grid$1, {
       item: true,
       className: classes.icon
-    }, locked && /*#__PURE__*/React.createElement(Lock, {
+    }, showLock && /*#__PURE__*/React.createElement(Lock, {
+      style: iconStyles,
       size: "small"
-    }), selected && /*#__PURE__*/React.createElement(Tick, {
+    }), showTick && /*#__PURE__*/React.createElement(Tick, {
+      style: iconStyles,
       size: "small"
     })));
   }
 
-  /* eslint no-underscore-dangle:0 */
-  function ListBox(_ref) {
+  function getSizeInfo(_ref) {
+    let {
+      isVertical,
+      checkboxes,
+      dense,
+      height
+    } = _ref;
+    let sizeVertical = checkboxes ? 40 : 33;
+
+    if (dense) {
+      sizeVertical = 24;
+    }
+
+    const itemSize = isVertical ? sizeVertical : 200;
+    const listHeight = height || 8 * itemSize;
+    return {
+      itemSize,
+      listHeight
+    };
+  }
+
+  function ListBox(_ref2) {
     let {
       model,
       selections,
       direction,
       height,
       width,
-      listLayout = 'vertical'
-    } = _ref;
+      listLayout = 'vertical',
+      rangeSelect = true,
+      checkboxes = false,
+      update = undefined,
+      dense = false
+    } = _ref2;
     const [layout] = useLayout$1(model);
     const [pages, setPages] = react.exports.useState(null);
+    const [isLoadingData, setIsLoadingData] = react.exports.useState(false);
+    const {
+      instantPages = [],
+      interactionEvents
+    } = useSelectionsInteractions({
+      layout,
+      selections,
+      pages,
+      rangeSelect,
+      checkboxes,
+      doc: document
+    });
     const loaderRef = react.exports.useRef(null);
     const local = react.exports.useRef({
       queue: [],
@@ -18675,28 +19538,17 @@
     const listData = react.exports.useRef({
       pages: []
     });
-    const onClick = react.exports.useCallback(e => {
-      if (layout && layout.qListObject.qDimensionInfo.qLocked) {
-        return;
-      }
-
-      const elemNumber = +e.currentTarget.getAttribute('data-n');
-
-      if (!Number.isNaN(elemNumber)) {
-        selections.select({
-          method: 'selectListObjectValues',
-          params: ['/qListObjectDef', [elemNumber], !layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne]
-        });
-      }
-    }, [model, layout && !!layout.qListObject.qDimensionInfo.qLocked, layout && !!layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne]);
     const isItemLoaded = react.exports.useCallback(index => {
       if (!pages || !local.current.validPages) {
         return false;
       }
 
       local.current.checkIdx = index;
-      const page = pages.filter(p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight)[0];
-      return page && page.qArea.qTop <= index && index < page.qArea.qTop + page.qArea.qHeight;
+
+      const isLoaded = p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight;
+
+      const page = pages.filter(p => isLoaded(p))[0];
+      return page && isLoaded(page);
     }, [layout, pages]);
     const loadMoreItems = react.exports.useCallback((startIndex, stopIndex) => {
       local.current.queue.push({
@@ -18710,6 +19562,7 @@
       }
 
       clearTimeout(local.current.timeout);
+      setIsLoadingData(true);
       return new Promise(resolve => {
         local.current.timeout = setTimeout(() => {
           const sorted = local.current.queue.slice(-2).sort((a, b) => a.start - b.start);
@@ -18722,12 +19575,14 @@
             local.current.validPages = true;
             listData.current.pages = p;
             setPages(p);
+            setIsLoadingData(false);
             resolve();
           });
         }, isScrolling ? 500 : 0);
       });
     }, [layout]);
-    react.exports.useEffect(() => {
+
+    const fetchData = () => {
       local.current.queue = [];
       local.current.validPages = false;
 
@@ -18740,7 +19595,23 @@
 
         loaderRef.current._listRef.scrollToItem(0);
       }
+    };
+
+    if (update) {
+      // Hand over the update function for manual refresh from hosting application.
+      update.call(null, fetchData);
+    }
+
+    react.exports.useEffect(() => {
+      fetchData();
     }, [layout]);
+    react.exports.useEffect(() => {
+      if (!instantPages || isLoadingData) {
+        return;
+      }
+
+      setPages(instantPages);
+    }, [instantPages]);
 
     if (!layout) {
       return null;
@@ -18748,8 +19619,16 @@
 
     const isVertical = listLayout !== 'horizontal';
     const count = layout.qListObject.qSize.qcy;
-    const ITEM_SIZE = isVertical ? 33 : 200;
-    const listHeight = height || 8 * ITEM_SIZE;
+    const {
+      itemSize,
+      listHeight
+    } = getSizeInfo({
+      isVertical,
+      checkboxes,
+      dense,
+      height
+    });
+    const isLocked = layout && layout.qListObject.qDimensionInfo.qLocked;
     return /*#__PURE__*/React.createElement(InfiniteLoader, {
       isItemLoaded: isItemLoaded,
       itemCount: count,
@@ -18757,28 +19636,33 @@
       threshold: 0,
       minimumBatchSize: 100,
       ref: loaderRef
-    }, _ref2 => {
+    }, _ref3 => {
       let {
         onItemsRendered,
         ref
-      } = _ref2;
+      } = _ref3;
       local.current.listRef = ref;
       return /*#__PURE__*/React.createElement(FixedSizeList, {
         direction: direction,
+        "data-testid": "fixed-size-list",
         useIsScrolling: true,
         style: {},
         height: listHeight,
         width: width,
         itemCount: count,
         layout: listLayout,
-        itemData: {
-          onClick,
+        itemData: _objectSpread2(_objectSpread2({
+          isLocked,
+          column: !isVertical,
           pages
-        },
-        itemSize: ITEM_SIZE,
+        }, isLocked ? {} : interactionEvents), {}, {
+          checkboxes,
+          dense
+        }),
+        itemSize: itemSize,
         onItemsRendered: onItemsRendered,
         ref: ref
-      }, isVertical ? Row : Column);
+      }, RowColumn);
     });
   }
 
@@ -19353,13 +20237,22 @@
         borderRadius: 0,
         borderColor: "".concat(theme.palette.divider, " transparent")
       }
+    },
+    dense: {
+      fontSize: 12,
+      paddingLeft: theme.spacing(1),
+      '& input': {
+        paddingTop: '5px',
+        paddingBottom: '5px'
+      }
     }
   }));
   const TREE_PATH = '/qListObjectDef';
   function ListBoxSearch(_ref) {
     let {
       model,
-      autoFocus = true
+      autoFocus = true,
+      dense = false
     } = _ref;
     const {
       translator
@@ -19388,8 +20281,10 @@
     return /*#__PURE__*/React.createElement(OutlinedInput$1, {
       startAdornment: /*#__PURE__*/React.createElement(InputAdornment$1, {
         position: "start"
-      }, /*#__PURE__*/React.createElement(Search, null)),
-      className: [classes.root].join(' '),
+      }, /*#__PURE__*/React.createElement(Search, {
+        size: dense ? 'small' : 'normal'
+      })),
+      className: ['search', classes.root, dense && classes.dense].filter(Boolean).join(' '),
       autoFocus: autoFocus,
       margin: "dense",
       fullWidth: true,
@@ -21000,7 +21895,14 @@
       direction,
       listLayout,
       search = true,
-      properties = {}
+      toolbar = true,
+      rangeSelect = true,
+      checkboxes = false,
+      properties = {},
+      sessionModel = undefined,
+      selectionsApi = undefined,
+      update = undefined,
+      dense = false
     } = options;
 
     const listdef = _objectSpread2({
@@ -21026,9 +21928,10 @@
         }
       },
       title
-    }, properties);
+    }, properties); // Something something lib dimension
+
 
-    let fieldName; // Something something lib dimension
+    let fieldName;
 
     if (fieldIdentifier.qLibraryId) {
       listdef.qListObjectDef.qLibraryId = fieldIdentifier.qLibraryId;
@@ -21038,8 +21941,19 @@
       fieldName = fieldIdentifier;
     }
 
+    let [model] = useSessionModel(listdef, sessionModel ? null : app, fieldName, stateName);
+
+    if (sessionModel) {
+      model = sessionModel;
+    }
+
+    let selections = useObjectSelections(selectionsApi ? {} : app, model)[0];
+
+    if (selectionsApi) {
+      selections = selectionsApi;
+    }
+
     const theme = useTheme$2();
-    const [model] = useSessionModel(listdef, app, fieldName, stateName);
     const lock = react.exports.useCallback(() => {
       model.lock('/qListObjectDef');
     }, [model]);
@@ -21050,7 +21964,6 @@
       translator
     } = react.exports.useContext(InstanceContext);
     const moreAlignTo = react.exports.useRef();
-    const [selections] = useObjectSelections(app, model);
     const [layout] = useLayout$1(model);
     const [showToolbar, setShowToolbar] = react.exports.useState(false);
     react.exports.useEffect(() => {
@@ -21076,11 +21989,11 @@
     }
 
     const isLocked = layout.qListObject.qDimensionInfo.qLocked === true;
-    const listboxSelectionToolbarItems = createListboxSelectionToolbar({
+    const listboxSelectionToolbarItems = toolbar ? createListboxSelectionToolbar({
       layout,
       model,
       translator
-    });
+    }) : [];
     const counts = layout.qListObject.qDimensionInfo.qStateCounts;
     const hasSelections = counts.qSelected + counts.qSelectedExcluded + counts.qLocked + counts.qLockedExcluded > 0;
     const minHeight = 49 + (search ? 40 : 0) + 49;
@@ -21092,7 +22005,7 @@
         height: '100%',
         minHeight: "".concat(minHeight, "px")
       }
-    }, /*#__PURE__*/React.createElement(Grid$1, {
+    }, toolbar && /*#__PURE__*/React.createElement(Grid$1, {
       item: true,
       container: true,
       style: {
@@ -21140,7 +22053,8 @@
       item: true
     }, /*#__PURE__*/React.createElement(ListBoxSearch, {
       model: model,
-      autoFocus: false
+      autoFocus: false,
+      dense: dense
     })) : '', /*#__PURE__*/React.createElement(Grid$1, {
       item: true,
       xs: true
@@ -21156,8 +22070,12 @@
         selections: selections,
         direction: direction,
         listLayout: listLayout,
+        rangeSelect: rangeSelect,
+        checkboxes: checkboxes,
         height: height,
-        width: width
+        width: width,
+        update: update,
+        dense: dense
       });
     })));
   }
@@ -21398,10 +22316,10 @@
   /**
    * @since 1.1.0
    * @interface ExportDataDef
-   * @property {qae.NxDimension[]} dimensions
-   * @property {qae.NxMeasure[]} measures
-   * @property {qae.NxDimension[]} excludedDimensions
-   * @property {qae.NxMeasure[]} excludedMeasures
+   * @property {EngineAPI.INxDimension[]} dimensions
+   * @property {EngineAPI.INxMeasure[]} measures
+   * @property {EngineAPI.INxDimension[]} excludedDimensions
+   * @property {EngineAPI.INxMeasure[]} excludedMeasures
    * @property {number[]} interColumnSortOrder
    */
 
@@ -22845,10 +23763,16 @@
 
   }
 
+  /**
+   * @interface VizElementAttributes
+   * @extends NamedNodeMap
+   * @property {string} data-render-count
+   */
+
   /**
    * @interface
    * @extends HTMLElement
-   * @property {string} attributes.data-render-count
+   * @property {VizElementAttributes} attributes
    */
 
   const VizElement = {
@@ -23292,6 +24216,9 @@
     const {
       nebbie
     } = halo.public;
+    const {
+      disableCellPadding = false
+    } = halo.context || {};
     const {
       translator,
       language,
@@ -23551,12 +24478,13 @@
       container: true,
       direction: "column",
       spacing: 0,
-      style: _objectSpread2({
+      style: _objectSpread2(_objectSpread2({
         position: 'relative',
         width: '100%',
-        height: '100%',
+        height: '100%'
+      }, !disableCellPadding ? {
         padding: theme.spacing(1)
-      }, state.longRunningQuery ? {
+      } : {}), state.longRunningQuery ? {
         opacity: '0.3'
       } : {})
     }, cellNode && layout && state.sn && /*#__PURE__*/React.createElement(Header, {
@@ -23898,7 +24826,7 @@
   }
 
   /**
-   * @typedef {string | qae.NxDimension | qae.NxMeasure | LibraryField} Field
+   * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
    */
 
   /**
@@ -23906,9 +24834,9 @@
    * @description Rendering configuration for creating and rendering a new object
    * @extends BaseConfig
    * @property {string} type
-   * @property {string} version
+   * @property {string=} version
    * @property {(Field[])=} fields
-   * @property {qae.GenericObjectProperties=} properties
+   * @property {EngineAPI.IGenericObjectProperties=} properties
    */
 
   async function createSessionObject(_ref, halo) {
@@ -25081,7 +26009,7 @@
   /**
    * Gets the layout of the generic object associated with this visualization.
    * @entry
-   * @returns {qae.GenericObjectLayout}
+   * @returns {EngineAPI.IGenericObjectLayout}
    * @example
    * import { useLayout } from '@nebula.js/stardust';
    * // ...
@@ -25101,7 +26029,7 @@
    * The returned value from `useStaleLayout()` and `useLayout()` are identical when the object
    * is not in a modal state.
    * @entry
-   * @returns {qae.GenericObjectLayout}
+   * @returns {EngineAPI.IGenericObjectLayout}
    * @example
    * import { useStaleLayout } from '@nebula.js/stardust';
    * // ...
@@ -25124,7 +26052,7 @@
   /**
    * Gets the layout of the app associated with this visualization.
    * @entry
-   * @returns {qae.NxAppLayout} The app layout
+   * @returns {EngineAPI.INxAppLayout} The app layout
    * @example
    * import { useAppLayout } from '@nebula.js/stardust';
    * // ...
@@ -25138,7 +26066,7 @@
   /**
    * Gets the generic object API of the generic object connected to this visualization.
    * @entry
-   * @returns {enigma.GenericObject|undefined}
+   * @returns {EngineAPI.IGenericObject|undefined}
    * @example
    * import { useModel } from '@nebula.js/stardust';
    * // ...
@@ -25157,7 +26085,7 @@
   /**
    * Gets the doc API.
    * @entry
-   * @returns {enigma.Doc|undefined} The doc API.
+   * @returns {EngineAPI.IApp|undefined} The doc API.
    * @example
    * import { useApp } from '@nebula.js/stardust';
    * // ...
@@ -25176,7 +26104,7 @@
   /**
    * Gets the global API.
    * @entry
-   * @returns {enigma.Global|undefined} The global API.
+   * @returns {EngineAPI.IGlobal|undefined} The global API.
    * @example
    * import { useGlobal } from '@nebula.js/stardust';
    *
@@ -25381,9 +26309,11 @@
    * @example
    * // configure embed to disallow active interactions when rendering
    * embed(app, {
-   *   constraints: {
-   *     active: true, // do not allow interactions
-   *   }
+   *  context: {
+   *    constraints: {
+   *      active: true, // do not allow interactions
+   *    }
+   *  }
    * }).render({ element, id: 'sdfsdf' });
    *
    * @example
@@ -25501,7 +26431,7 @@
   /**
    * Registers a callback that is called when a snapshot is taken.
    * @entry
-   * @param {function(qae.GenericObjectLayout): Promise<qae.GenericObjectLayout>} snapshotCallback
+   * @param {function(EngineAPI.IGenericObjectLayout): Promise<EngineAPI.IGenericObjectLayout>} snapshotCallback
    * @example
    * import { onTakeSnapshot } from '@nebula.js/stardust';
    * import { useState } from '@nebula.js/stardust';
@@ -25527,13 +26457,19 @@
 
     h.fn = cb;
   }
+  /**
+   * @interface RenderState
+   * @property {any} pending
+   * @property {any} restore
+   */
+
   /**
    * Gets render state instance.
    *
    * Used to update properties and get a new layout without triggering onInitialRender.
    * @entry
    * @experimental
-   * @returns {{ pending, restore }} The render state.
+   * @returns {RenderState} The render state.
    * @example
    * import { useRenderState } from '@nebula.js/stardust';
    *
@@ -26093,7 +27029,7 @@
 
   /**
    * @interface QAEDefinition
-   * @property {qae.GenericObjectProperties=} properties
+   * @property {EngineAPI.IGenericObjectProperties=} properties
    * @property {object=} data
    * @property {DataTarget[]} data.targets
    * @property {importProperties=} importProperties
@@ -26103,8 +27039,23 @@
   /**
    * @interface DataTarget
    * @property {string} path
-   * @property {FieldTarget<qae.NxDimension>=} dimensions
-   * @property {FieldTarget<qae.NxMeasure>=} measures
+   * @property {FieldTarget<EngineAPI.INxDimension>=} dimensions
+   * @property {FieldTarget<EngineAPI.INxMeasure>=} measures
+   */
+
+  /**
+   * @callback fieldTargetAddedCallback
+   * @template T
+   * @param {T} field
+   * @param {EngineAPI.IGenericObjectProperties} properties
+   */
+
+  /**
+   * @callback fieldTargetRemovedCallback
+   * @template T
+   * @param {T} field
+   * @param {EngineAPI.IGenericObjectProperties} properties
+   * @param {number} index
    */
 
   /**
@@ -26112,8 +27063,8 @@
    * @template T
    * @property {function():number} [min]
    * @property {function():number} [max]
-   * @property {function(T, qae.GenericObjectProperties)} [added]
-   * @property {function(T, qae.GenericObjectProperties, number)} [removed]
+   * @property {fieldTargetAddedCallback<T>} [added]
+   * @property {fieldTargetRemovedCallback<T>} [removed]
    */
 
 
@@ -27901,7 +28852,7 @@
   /**
    * @interface TypeInfo
    * @property {string} name
-   * @property {string} version
+   * @property {string=} version
    * @property {LoadType} load
    * @property {object=} meta
    */
@@ -28061,6 +29012,7 @@
 
   /**
    * @interface Context
+   * @property {boolean=} disableCellPadding
    * @property {boolean=} keyboardNavigation
    * @property {object=} constraints
    * @property {boolean=} constraints.active
@@ -28080,7 +29032,8 @@
     /** @type {string=} */
     deviceType: 'auto',
     constraints: {},
-    keyboardNavigation: false
+    keyboardNavigation: false,
+    disableCellPadding: false
   };
   /**
    * @interface SnapshotConfiguration
@@ -28182,7 +29135,7 @@
      * Initiates a new `Embed` instance using the specified enigma `app`.
      * @entry
      * @function embed
-     * @param {enigma.Doc} app
+     * @param {EngineAPI.IApp} app
      * @param {Configuration=} instanceConfig
      * @returns {Embed}
      * @example
@@ -28401,6 +29354,10 @@
           if (!fieldName) {
             throw new Error("Field identifier must be provided");
           }
+          /**
+           * @typedef {function(function)} ReceiverFunction A callback function which receives another function as input.
+           */
+
           /**
            * @class
            * @alias FieldInstance
@@ -28418,10 +29375,18 @@
              * @param {string=} options.title Custom title, defaults to fieldname
              * @param {string=} [options.direction=ltr] Direction setting ltr|rtl.
              * @param {string=} [options.listLayout=vertical] Layout direction vertical|horizontal
-             * @param {boolean=} [options.search=true] To show the search bar
+             * @param {boolean=} [options.search=true] Show the search bar
+             * @param {boolean=} [options.toolbar=true] Show the toolbar
+             * @param {boolean=} [options.checkboxes=false] Show values as checkboxes instead of as fields
+             * @param {boolean=} [options.rangeSelect=true] Enable range selection
+             * @param {boolean=} [options.dense=false] Reduces padding and text size
              * @param {boolean=} [options.stateName="$"] Sets the state to make selections in
              * @param {object=} [options.properties={}] Properties object to extend default properties with
+             * @param {object} [options.sessionModel] Use a custom sessionModel.
+             * @param {object} [options.selectionsApi] Use a custom selectionsApi to customize how values are selected.
+             * @param {ReceiverFunction} [options.update] A function which receives an update function which upon call will trigger a data fetch.
              * @since 1.1.0
+             * @instance
              * @example
              * fieldInstance.mount(element);
              */
@@ -28449,6 +29414,7 @@
             /**
              * Unmounts the field listbox from the DOM.
              * @since 1.1.0
+             * @instance
              * @example
              * listbox.unmount();
              */
@@ -28507,7 +29473,9 @@
      * // create an alternate config with dark theme
      * // and inherit the config from the previous
      * const d = m.createConfiguration({
-     *  theme: 'dark'
+     *  context: {
+     *    theme: 'dark'
+     *  }
      * });
      *
      * m(app).render({ type: 'mekko' }); // will render the object with default theme
@@ -28521,6 +29489,10 @@
     embed.config = configuration;
     return embed;
   }
+  /**
+   * @typedef {any} ThemeJSON
+   */
+
   /**
    * @interface ThemeInfo
    * @property {string} id Theme identifier