@nebula.js/stardust 2.5.0 → 2.6.1

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v2.5.0
+* @nebula.js/stardust v2.6.1
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -11023,7 +11023,7 @@
     return [appSelections, navState];
   }
 
-  const NEBULA_VERSION_HASH = "daf8" ;
+  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.5.0" );
+    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) ;
@@ -18468,6 +18947,7 @@
       selections,
       pages = [],
       rangeSelect = true,
+      checkboxes = false,
       doc = document
     } = _ref;
     const [instantPages, setInstantPages] = react.exports.useState(pages);
@@ -18506,6 +18986,14 @@
       });
     };
 
+    const onClick = react.exports.useCallback(event => {
+      if (selectingValues) {
+        return;
+      }
+
+      const elemNumber = +event.currentTarget.getAttribute('data-n');
+      setPreSelected([elemNumber]);
+    }, [selectingValues]);
     const onMouseDown = react.exports.useCallback(event => {
       if (selectingValues) {
         return;
@@ -18567,7 +19055,7 @@
       setSelected(alreadySelected);
     }, [pages]);
     react.exports.useEffect(() => {
-      if (selectingValues || !pages || !mouseDown) {
+      if (selectingValues || !pages || !checkboxes && !mouseDown) {
         return;
       } // Render pre-selections before they have been selected in Engine.
 
@@ -18575,15 +19063,28 @@
       const newPages = applySelectionsOnPages(pages, preSelected);
       setInstantPages(newPages);
     }, [preSelected]);
-    const rangeSelectEvents = rangeSelect ? {
-      onMouseUp,
-      onMouseEnter
-    } : {};
+    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: _objectSpread2({
-        onMouseDown
-      }, rangeSelectEvents)
+      interactionEvents
     };
   }
 
@@ -18598,187 +19099,196 @@
 
   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 => ({
-    row: {
-      flexWrap: 'nowrap',
-      borderBottom: "1px solid ".concat(theme.palette.divider),
-      '&:focus': {
-        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusOutline),
-        outline: 'none'
-      }
-    },
-    cell: {
-      padding: '8px',
-      '& span': {
-        whiteSpace: 'nowrap',
-        fontSize: '12px',
-        lineHeight: '16px',
-        userSelect: 'none'
-      },
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
+    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))'
     },
-    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'
+    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: '""'
       }
     },
-    A: {
-      background: theme.palette.selected.alternative,
-      color: theme.palette.selected.alternativeContrastText
-    },
-    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 {
-      onMouseDown,
-      onMouseUp,
-      onMouseEnter,
-      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,
-      onMouseDown: onMouseDown,
-      onMouseUp: onMouseUp,
-      onMouseEnter: onMouseEnter,
-      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',
-        userSelect: 'none'
-      },
-      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,
@@ -18794,128 +19304,206 @@
     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,
       onMouseDown,
       onMouseUp,
       onMouseEnter,
-      pages
+      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,
-      alignItems: "center",
+      onClick: onClick,
       onMouseDown: onMouseDown,
       onMouseUp: onMouseUp,
       onMouseEnter: onMouseEnter,
-      role: "row",
+      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"
     })));
   }
 
-  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,
@@ -18924,8 +19512,10 @@
       width,
       listLayout = 'vertical',
       rangeSelect = true,
-      update = undefined
-    } = _ref;
+      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);
@@ -18937,6 +19527,7 @@
       selections,
       pages,
       rangeSelect,
+      checkboxes,
       doc: document
     });
     const loaderRef = react.exports.useRef(null);
@@ -19028,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,
@@ -19037,11 +19636,11 @@
       threshold: 0,
       minimumBatchSize: 100,
       ref: loaderRef
-    }, _ref2 => {
+    }, _ref3 => {
       let {
         onItemsRendered,
         ref
-      } = _ref2;
+      } = _ref3;
       local.current.listRef = ref;
       return /*#__PURE__*/React.createElement(FixedSizeList, {
         direction: direction,
@@ -19052,13 +19651,18 @@
         width: width,
         itemCount: count,
         layout: listLayout,
-        itemData: _objectSpread2(_objectSpread2({}, interactionEvents), {}, {
+        itemData: _objectSpread2(_objectSpread2({
+          isLocked,
+          column: !isVertical,
           pages
+        }, isLocked ? {} : interactionEvents), {}, {
+          checkboxes,
+          dense
         }),
-        itemSize: ITEM_SIZE,
+        itemSize: itemSize,
         onItemsRendered: onItemsRendered,
         ref: ref
-      }, isVertical ? Row : Column);
+      }, RowColumn);
     });
   }
 
@@ -19633,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
@@ -19668,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,
@@ -21282,10 +21897,12 @@
       search = true,
       toolbar = true,
       rangeSelect = true,
+      checkboxes = false,
       properties = {},
       sessionModel = undefined,
       selectionsApi = undefined,
-      update = undefined
+      update = undefined,
+      dense = false
     } = options;
 
     const listdef = _objectSpread2({
@@ -21436,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
@@ -21453,9 +22071,11 @@
         direction: direction,
         listLayout: listLayout,
         rangeSelect: rangeSelect,
+        checkboxes: checkboxes,
         height: height,
         width: width,
-        update: update
+        update: update,
+        dense: dense
       });
     })));
   }
@@ -25689,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
@@ -28753,8 +29375,11 @@
              * @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.toolbar=true] To show the toolbar
+             * @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.
@@ -28848,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