@nebula.js/stardust 4.5.0-alpha.0 → 4.6.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.5.0-alpha.0
+* @nebula.js/stardust v4.6.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -4417,7 +4417,11 @@
 	}
 
 	function isMuiElement(element, muiNames) {
-	  return /*#__PURE__*/reactExports.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+	  var _muiName, _element$type;
+	  return /*#__PURE__*/reactExports.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
+	  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+	  // eslint-disable-next-line no-underscore-dangle
+	  (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
 	}
 
 	function ownerDocument(node) {
@@ -4456,6 +4460,13 @@
 	  }
 	}
 
+	/**
+	 * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+	 * This is useful for effects that are only needed for client-side rendering but not for SSR.
+	 *
+	 * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+	 * and confirm it doesn't apply to your use-case.
+	 */
 	const useEnhancedEffect = typeof window !== 'undefined' ? reactExports.useLayoutEffect : reactExports.useEffect;
 	var useEnhancedEffect$1 = useEnhancedEffect;
 
@@ -4520,7 +4531,8 @@
 	}
 
 	/**
-	 * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+	 * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+	 * See RFC in https://github.com/reactjs/rfcs/pull/220
 	 */
 
 	function useEventCallback(fn) {
@@ -6940,7 +6952,7 @@
 	}
 
 	/**
-	 * @mui/styled-engine v5.14.6
+	 * @mui/styled-engine v5.14.13
 	 *
 	 * @license MIT
 	 * This source code is licensed under the MIT license found in the
@@ -7620,10 +7632,20 @@
 	const maxWidth = props => {
 	  if (props.maxWidth !== undefined && props.maxWidth !== null) {
 	    const styleFromPropValue = propValue => {
-	      var _props$theme;
+	      var _props$theme, _props$theme2;
 	      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values$1[propValue];
+	      if (!breakpoint) {
+	        return {
+	          maxWidth: sizingTransform(propValue)
+	        };
+	      }
+	      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
+	        return {
+	          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
+	        };
+	      }
 	      return {
-	        maxWidth: breakpoint || sizingTransform(propValue)
+	        maxWidth: breakpoint
 	      };
 	    };
 	    return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
@@ -8245,40 +8267,48 @@
 	  }
 	  return null;
 	};
+	const transformVariants = variants => {
+	  const variantsStyles = {};
+	  if (variants) {
+	    variants.forEach(definition => {
+	      const key = propsToClassKey(definition.props);
+	      variantsStyles[key] = definition.style;
+	    });
+	  }
+	  return variantsStyles;
+	};
 	const getVariantStyles = (name, theme) => {
 	  let variants = [];
 	  if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
 	    variants = theme.components[name].variants;
 	  }
-	  const variantsStyles = {};
-	  variants.forEach(definition => {
-	    const key = propsToClassKey(definition.props);
-	    variantsStyles[key] = definition.style;
-	  });
-	  return variantsStyles;
+	  return transformVariants(variants);
 	};
-	const variantsResolver = (props, styles, theme, name) => {
-	  var _theme$components;
+	const variantsResolver = (props, styles, variants) => {
 	  const {
 	    ownerState = {}
 	  } = props;
 	  const variantsStyles = [];
-	  const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
-	  if (themeVariants) {
-	    themeVariants.forEach(themeVariant => {
+	  if (variants) {
+	    variants.forEach(variant => {
 	      let isMatch = true;
-	      Object.keys(themeVariant.props).forEach(key => {
-	        if (ownerState[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) {
+	      Object.keys(variant.props).forEach(key => {
+	        if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
 	          isMatch = false;
 	        }
 	      });
 	      if (isMatch) {
-	        variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
+	        variantsStyles.push(styles[propsToClassKey(variant.props)]);
 	      }
 	    });
 	  }
 	  return variantsStyles;
 	};
+	const themeVariantsResolver = (props, styles, theme, name) => {
+	  var _theme$components;
+	  const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
+	  return variantsResolver(props, styles, themeVariants);
+	};
 
 	// Update /system/styled/#api in case if this changes
 	function shouldForwardProp(prop) {
@@ -8304,6 +8334,29 @@
 	  }
 	  return (props, styles) => styles[slot];
 	}
+	const muiStyledFunctionResolver = ({
+	  styledArg,
+	  props,
+	  defaultTheme,
+	  themeId
+	}) => {
+	  const resolvedStyles = styledArg(_extends$3({}, props, {
+	    theme: resolveTheme(_extends$3({}, props, {
+	      defaultTheme,
+	      themeId
+	    }))
+	  }));
+	  let optionalVariants;
+	  if (resolvedStyles && resolvedStyles.variants) {
+	    optionalVariants = resolvedStyles.variants;
+	    delete resolvedStyles.variants;
+	  }
+	  if (optionalVariants) {
+	    const variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
+	    return [resolvedStyles, ...variantsStyles];
+	  }
+	  return resolvedStyles;
+	};
 	function createStyled(input = {}) {
 	  const {
 	    themeId,
@@ -8363,16 +8416,61 @@
 	        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
 	        // component stays as a function. This condition makes sure that we do not interpolate functions
 	        // which are basically components used as a selectors.
-	        return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
-	          return stylesArg(_extends$3({}, props, {
-	            theme: resolveTheme(_extends$3({}, props, {
-	              defaultTheme,
-	              themeId
-	            }))
-	          }));
-	        } : stylesArg;
+	        if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) {
+	          return props => muiStyledFunctionResolver({
+	            styledArg: stylesArg,
+	            props,
+	            defaultTheme,
+	            themeId
+	          });
+	        }
+	        if (isPlainObject(stylesArg)) {
+	          let transformedStylesArg = stylesArg;
+	          let styledArgVariants;
+	          if (stylesArg && stylesArg.variants) {
+	            styledArgVariants = stylesArg.variants;
+	            delete transformedStylesArg.variants;
+	            transformedStylesArg = props => {
+	              let result = stylesArg;
+	              const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+	              variantStyles.forEach(variantStyle => {
+	                result = deepmerge(result, variantStyle);
+	              });
+	              return result;
+	            };
+	          }
+	          return transformedStylesArg;
+	        }
+	        return stylesArg;
 	      }) : [];
 	      let transformedStyleArg = styleArg;
+	      if (isPlainObject(styleArg)) {
+	        let styledArgVariants;
+	        if (styleArg && styleArg.variants) {
+	          styledArgVariants = styleArg.variants;
+	          delete transformedStyleArg.variants;
+	          transformedStyleArg = props => {
+	            let result = styleArg;
+	            const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+	            variantStyles.forEach(variantStyle => {
+	              result = deepmerge(result, variantStyle);
+	            });
+	            return result;
+	          };
+	        }
+	      } else if (typeof styleArg === 'function' &&
+	      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
+	      // component stays as a function. This condition makes sure that we do not interpolate functions
+	      // which are basically components used as a selectors.
+	      styleArg.__emotion_real !== styleArg) {
+	        // If the type is function, we need to define the default theme.
+	        transformedStyleArg = props => muiStyledFunctionResolver({
+	          styledArg: styleArg,
+	          props,
+	          defaultTheme,
+	          themeId
+	        });
+	      }
 	      if (componentName && overridesResolver) {
 	        expressionsWithDefaultTheme.push(props => {
 	          const theme = resolveTheme(_extends$3({}, props, {
@@ -8398,7 +8496,7 @@
 	            defaultTheme,
 	            themeId
 	          }));
-	          return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+	          return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
 	        });
 	      }
 	      if (!skipSx) {
@@ -8410,18 +8508,6 @@
 	        // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
 	        transformedStyleArg = [...styleArg, ...placeholders];
 	        transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-	      } else if (typeof styleArg === 'function' &&
-	      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-	      // component stays as a function. This condition makes sure that we do not interpolate functions
-	      // which are basically components used as a selectors.
-	      styleArg.__emotion_real !== styleArg) {
-	        // If the type is function, we need to define the default theme.
-	        transformedStyleArg = props => styleArg(_extends$3({}, props, {
-	          theme: resolveTheme(_extends$3({}, props, {
-	            defaultTheme,
-	            themeId
-	          }))
-	        }));
 	      }
 	      const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
 	      if (tag.muiName) {
@@ -11107,7 +11193,7 @@
 	    type: type
 	  }, buttonProps, other, {
 	    children: [children, enableTouchRipple ?
-	    /*#__PURE__*/
+	    
 	    /* TouchRipple is only needed client-side, x2 boost on the server. */
 	    jsxRuntimeExports.jsx(TouchRipple$1, _extends$5({
 	      ref: handleRippleRef,
@@ -11129,6 +11215,12 @@
 	const ButtonGroupContext = /*#__PURE__*/reactExports.createContext({});
 	var ButtonGroupContext$1 = ButtonGroupContext;
 
+	/**
+	 * @ignore - internal component.
+	 */
+	const ButtonGroupButtonContext = /*#__PURE__*/reactExports.createContext(undefined);
+	var ButtonGroupButtonContext$1 = ButtonGroupButtonContext;
+
 	const _excluded$C = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 	const useUtilityClasses$q = ownerState => {
 	  const {
@@ -11334,6 +11426,7 @@
 	const Button = /*#__PURE__*/reactExports.forwardRef(function Button(inProps, ref) {
 	  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
 	  const contextProps = reactExports.useContext(ButtonGroupContext$1);
+	  const buttonGroupButtonContextPositionClassName = reactExports.useContext(ButtonGroupButtonContext$1);
 	  const resolvedProps = resolveProps(contextProps, inProps);
 	  const props = useThemeProps({
 	    props: resolvedProps,
@@ -11378,9 +11471,10 @@
 	    ownerState: ownerState,
 	    children: endIconProp
 	  });
+	  const positionClassName = buttonGroupButtonContextPositionClassName || '';
 	  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonRoot, _extends$5({
 	    ownerState: ownerState,
-	    className: clsx(contextProps.className, classes.root, className),
+	    className: clsx(contextProps.className, classes.root, className, positionClassName),
 	    component: component,
 	    disabled: disabled,
 	    focusRipple: !disableFocusRipple,
@@ -11467,7 +11561,9 @@
 	    text: {
 	      primary: colors.grey25,
 	      secondary: 'rgba(0, 0, 0, 0.55)',
-	      disabled: 'rgba(0, 0, 0, 0.3)'
+	      disabled: 'rgba(0, 0, 0, 0.3)',
+	      light: colors.grey100,
+	      dark: colors.grey0
 	    },
 	    action: {
 	      active: '#545454',
@@ -11501,9 +11597,13 @@
 	      main: colors.green,
 	      alternative: '#E4E4E4',
 	      excluded: '#BEBEBE',
+	      selectedExcluded: '#BEBEBE',
+	      possible: colors.grey100,
 	      mainContrastText: colors.grey100,
 	      alternativeContrastText: colors.grey25,
-	      excludedContrastText: colors.grey25
+	      excludedContrastText: colors.grey25,
+	      selectedExcludedContrastText: colors.grey100,
+	      possibleContrastText: colors.grey0
 	    },
 	    btn: {
 	      normal: 'rgba(255, 255, 255, 0.6)',
@@ -11531,7 +11631,9 @@
 	    text: {
 	      primary: colors.grey100,
 	      secondary: 'rgba(255, 255, 255, 0.6)',
-	      disabled: 'rgba(255, 255, 255, 0.3)'
+	      disabled: 'rgba(255, 255, 255, 0.3)',
+	      light: colors.grey100,
+	      dark: colors.grey0
 	    },
 	    action: {
 	      // active: 'rgba(0, 0, 0, 0.55)',
@@ -11562,9 +11664,13 @@
 	      main: colors.green,
 	      alternative: colors.grey20,
 	      excluded: colors.grey10,
+	      selectedExcluded: colors.grey10,
+	      possible: colors.grey80,
 	      mainContrastText: colors.grey100,
 	      alternativeContrastText: colors.grey100,
-	      excludedContrastText: colors.grey100
+	      excludedContrastText: colors.grey100,
+	      selectedExcludedContrastText: colors.grey100,
+	      possibleContrastText: colors.grey0
 	    },
 	    btn: {
 	      normal: 'rgba(255, 255, 255, 0.15)',
@@ -11712,7 +11818,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "d1ff" ;
+	const NEBULA_VERSION_HASH = "ba42" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -11973,7 +12079,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.5.0-alpha.0" );
+	  element.setAttribute('data-nebulajs-version', "4.6.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -12934,51 +13040,6 @@
 	      return;
 	    }
 	    const doc = ownerDocument(rootRef.current);
-	    const contain = nativeEvent => {
-	      const {
-	        current: rootElement
-	      } = rootRef;
-
-	      // Cleanup functions are executed lazily in React 17.
-	      // Contain can be called between the component being unmounted and its cleanup function being run.
-	      if (rootElement === null) {
-	        return;
-	      }
-	      if (!doc.hasFocus() || disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {
-	        ignoreNextEnforceFocus.current = false;
-	        return;
-	      }
-	      if (!rootElement.contains(doc.activeElement)) {
-	        // if the focus event is not coming from inside the children's react tree, reset the refs
-	        if (nativeEvent && reactFocusEventTarget.current !== nativeEvent.target || doc.activeElement !== reactFocusEventTarget.current) {
-	          reactFocusEventTarget.current = null;
-	        } else if (reactFocusEventTarget.current !== null) {
-	          return;
-	        }
-	        if (!activated.current) {
-	          return;
-	        }
-	        let tabbable = [];
-	        if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
-	          tabbable = getTabbable(rootRef.current);
-	        }
-	        if (tabbable.length > 0) {
-	          var _lastKeydown$current, _lastKeydown$current2;
-	          const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
-	          const focusNext = tabbable[0];
-	          const focusPrevious = tabbable[tabbable.length - 1];
-	          if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
-	            if (isShiftTab) {
-	              focusPrevious.focus();
-	            } else {
-	              focusNext.focus();
-	            }
-	          }
-	        } else {
-	          rootElement.focus();
-	        }
-	      }
-	    };
 	    const loopFocus = nativeEvent => {
 	      lastKeydown.current = nativeEvent;
 	      if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
@@ -12996,6 +13057,62 @@
 	        }
 	      }
 	    };
+	    const contain = () => {
+	      const rootElement = rootRef.current;
+
+	      // Cleanup functions are executed lazily in React 17.
+	      // Contain can be called between the component being unmounted and its cleanup function being run.
+	      if (rootElement === null) {
+	        return;
+	      }
+	      if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
+	        ignoreNextEnforceFocus.current = false;
+	        return;
+	      }
+
+	      // The focus is already inside
+	      if (rootElement.contains(doc.activeElement)) {
+	        return;
+	      }
+
+	      // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
+	      if (disableEnforceFocus && doc.activeElement !== sentinelStart.current && doc.activeElement !== sentinelEnd.current) {
+	        return;
+	      }
+
+	      // if the focus event is not coming from inside the children's react tree, reset the refs
+	      if (doc.activeElement !== reactFocusEventTarget.current) {
+	        reactFocusEventTarget.current = null;
+	      } else if (reactFocusEventTarget.current !== null) {
+	        return;
+	      }
+	      if (!activated.current) {
+	        return;
+	      }
+	      let tabbable = [];
+	      if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
+	        tabbable = getTabbable(rootRef.current);
+	      }
+
+	      // one of the sentinel nodes was focused, so move the focus
+	      // to the first/last tabbable element inside the focus trap
+	      if (tabbable.length > 0) {
+	        var _lastKeydown$current, _lastKeydown$current2;
+	        const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
+	        const focusNext = tabbable[0];
+	        const focusPrevious = tabbable[tabbable.length - 1];
+	        if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
+	          if (isShiftTab) {
+	            focusPrevious.focus();
+	          } else {
+	            focusNext.focus();
+	          }
+	        }
+	        // no tabbable elements in the trap focus or the focus was outside of the focus trap
+	      } else {
+	        rootElement.focus();
+	      }
+	    };
 	    doc.addEventListener('focusin', contain);
 	    doc.addEventListener('keydown', loopFocus, true);
 
@@ -13007,7 +13124,7 @@
 	    // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
 	    const interval = setInterval(() => {
 	      if (doc.activeElement && doc.activeElement.tagName === 'BODY') {
-	        contain(null);
+	        contain();
 	      }
 	    }, 50);
 	    return () => {
@@ -15448,7 +15565,7 @@
 	  }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
 	  const createHandleKeyDown = otherHandlers => event => {
 	    var _otherHandlers$onKeyD;
-	    (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null ? void 0 : _otherHandlers$onKeyD.call(otherHandlers, event);
+	    (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
 
 	    // The handler doesn't take event.defaultPrevented into account:
 	    //
@@ -15469,7 +15586,7 @@
 	  };
 	  const createHandleBackdropClick = otherHandlers => event => {
 	    var _otherHandlers$onClic;
-	    (_otherHandlers$onClic = otherHandlers.onClick) == null ? void 0 : _otherHandlers$onClic.call(otherHandlers, event);
+	    (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event);
 	    if (event.target !== event.currentTarget) {
 	      return;
 	    }
@@ -15517,8 +15634,8 @@
 	      }
 	    };
 	    return {
-	      onEnter: createChainedFunction(handleEnter, children.props.onEnter),
-	      onExited: createChainedFunction(handleExited, children.props.onExited)
+	      onEnter: createChainedFunction(handleEnter, children == null ? void 0 : children.props.onEnter),
+	      onExited: createChainedFunction(handleExited, children == null ? void 0 : children.props.onExited)
 	    };
 	  };
 	  return {
@@ -15656,53 +15773,51 @@
 	    if (isEmpty$1(newState)) {
 	      return;
 	    }
-	    setState(prevState => {
-	      return updateState(prevState, newState);
-	    });
+	    setState(prevState => updateState(prevState, newState));
 	  }, [getUpdatedState]);
-	  const syncHeightWithFlushSync = () => {
-	    const newState = getUpdatedState();
-	    if (isEmpty$1(newState)) {
-	      return;
-	    }
+	  useEnhancedEffect$1(() => {
+	    const syncHeightWithFlushSync = () => {
+	      const newState = getUpdatedState();
+	      if (isEmpty$1(newState)) {
+	        return;
+	      }
 
-	    // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-	    // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-	    // Related issue - https://github.com/facebook/react/issues/24331
-	    reactDomExports.flushSync(() => {
-	      setState(prevState => {
-	        return updateState(prevState, newState);
+	      // In React 18, state updates in a ResizeObserver's callback are happening after
+	      // the paint, this leads to an infinite rendering.
+	      //
+	      // Using flushSync ensures that the states is updated before the next pain.
+	      // Related issue - https://github.com/facebook/react/issues/24331
+	      reactDomExports.flushSync(() => {
+	        setState(prevState => updateState(prevState, newState));
 	      });
-	    });
-	  };
-	  reactExports.useEffect(() => {
-	    const handleResize = debounce$1(() => {
+	    };
+	    const handleResize = () => {
 	      renders.current = 0;
-
-	      // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
-	      // ResizeObserver's handler that runs because of the change in the layout is trying to
-	      // access a dom node that is no longer there (as the fallback component is being shown instead).
-	      // See https://github.com/mui/material-ui/issues/32640
-	      if (inputRef.current) {
-	        syncHeightWithFlushSync();
-	      }
-	    });
-	    let resizeObserver;
+	      syncHeightWithFlushSync();
+	    };
+	    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
+	    // in test.
+	    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
+	    // Also see https://github.com/mui/mui-x/issues/8733
+	    let rAF;
+	    const debounceHandleResize = debounce$1(handleResize);
 	    const input = inputRef.current;
 	    const containerWindow = ownerWindow(input);
-	    containerWindow.addEventListener('resize', handleResize);
+	    containerWindow.addEventListener('resize', debounceHandleResize);
+	    let resizeObserver;
 	    if (typeof ResizeObserver !== 'undefined') {
 	      resizeObserver = new ResizeObserver(handleResize);
 	      resizeObserver.observe(input);
 	    }
 	    return () => {
-	      handleResize.clear();
-	      containerWindow.removeEventListener('resize', handleResize);
+	      debounceHandleResize.clear();
+	      cancelAnimationFrame(rAF);
+	      containerWindow.removeEventListener('resize', debounceHandleResize);
 	      if (resizeObserver) {
 	        resizeObserver.disconnect();
 	      }
 	    };
-	  });
+	  }, [getUpdatedState]);
 	  useEnhancedEffect$1(() => {
 	    syncHeight();
 	  });
@@ -15907,7 +16022,7 @@
 	    type
 	  } = ownerState;
 	  const slots = {
-	    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size === 'small' && 'sizeSmall', multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
+	    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size && size !== 'medium' && `size${capitalize(size)}`, multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
 	    input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd', readOnly && 'readOnly']
 	  };
 	  return composeClasses(slots, getInputBaseUtilityClass, classes);
@@ -16981,7 +17096,7 @@
 	  color: (theme.vars || theme).palette.text.secondary
 	}, !ownerState.disableRipple && {
 	  '&:hover': {
-	    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+	    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
 	    // Reset on touch devices, it doesn't add specificity
 	    '@media (hover: none)': {
 	      backgroundColor: 'transparent'
@@ -17227,7 +17342,7 @@
 	}
 	generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-	const _excluded$m = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
+	const _excluded$m = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 	const useUtilityClasses$e = ownerState => {
 	  const {
 	    open,
@@ -19243,7 +19358,7 @@
 	generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
 	const _excluded$a = ["onEntering"],
-	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
 	  _excluded3 = ["slotProps"];
 	function getOffsetTop(rect, vertical) {
 	  let offset = 0;
@@ -19337,7 +19452,8 @@
 	      transitionDuration: transitionDurationProp = 'auto',
 	      TransitionProps: {
 	        onEntering
-	      } = {}
+	      } = {},
+	      disableScrollLock = false
 	    } = props,
 	    TransitionProps = _objectWithoutPropertiesLoose$3(props.TransitionProps, _excluded$a),
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded2$1);
@@ -19414,18 +19530,18 @@
 	    const widthThreshold = containerWindow.innerWidth - marginThreshold;
 
 	    // Check if the vertical axis needs shifting
-	    if (top < marginThreshold) {
+	    if (marginThreshold !== null && top < marginThreshold) {
 	      const diff = top - marginThreshold;
 	      top -= diff;
 	      elemTransformOrigin.vertical += diff;
-	    } else if (bottom > heightThreshold) {
+	    } else if (marginThreshold !== null && bottom > heightThreshold) {
 	      const diff = bottom - heightThreshold;
 	      top -= diff;
 	      elemTransformOrigin.vertical += diff;
 	    }
 
 	    // Check if the horizontal axis needs shifting
-	    if (left < marginThreshold) {
+	    if (marginThreshold !== null && left < marginThreshold) {
 	      const diff = left - marginThreshold;
 	      left -= diff;
 	      elemTransformOrigin.horizontal += diff;
@@ -19456,6 +19572,12 @@
 	    element.style.transformOrigin = positioning.transformOrigin;
 	    setIsPositioned(true);
 	  }, [getPositioningStyle]);
+	  reactExports.useEffect(() => {
+	    if (disableScrollLock) {
+	      window.addEventListener('scroll', setPositioningStyles);
+	    }
+	    return () => window.removeEventListener('scroll', setPositioningStyles);
+	  }, [anchorEl, disableScrollLock, setPositioningStyles]);
 	  const handleEntering = (element, isAppearing) => {
 	    if (onEntering) {
 	      onEntering(element, isAppearing);
@@ -19536,7 +19658,8 @@
 	    } = _useSlotProps,
 	    rootProps = _objectWithoutPropertiesLoose$3(_useSlotProps, _excluded3);
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(RootSlot, _extends$5({}, rootProps, !isHostComponent(RootSlot) && {
-	    slotProps: rootSlotPropsProp
+	    slotProps: rootSlotPropsProp,
+	    disableScrollLock
 	  }, {
 	    children: /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$5({
 	      appear: true,
@@ -20064,17 +20187,18 @@
 	function getRadioUtilityClass(slot) {
 	  return generateUtilityClass('MuiRadio', slot);
 	}
-	const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary']);
+	const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 	var radioClasses$1 = radioClasses;
 
 	const _excluded$6 = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 	const useUtilityClasses$1 = ownerState => {
 	  const {
 	    classes,
-	    color
+	    color,
+	    size
 	  } = ownerState;
 	  const slots = {
-	    root: ['root', `color${capitalize(color)}`]
+	    root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
 	  };
 	  return _extends$5({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
 	};
@@ -20771,10 +20895,6 @@
 	  const [modelStore] = useModelStore();
 	  const [rpcRequestSessionModelStore] = useRpcRequestSessionModelStore();
 	  const [model, setModel] = reactExports.useState();
-	  let rpcShared;
-	  if (key) {
-	    rpcShared = rpcRequestSessionModelStore.get(key);
-	  }
 	  for (var _len = arguments.length, deps = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
 	    deps[_key - 2] = arguments[_key];
 	  }
@@ -20784,9 +20904,9 @@
 	    }
 	    // Create new session object
 	    const create = async () => {
+	      let rpcShared = rpcRequestSessionModelStore.get(key);
 	      if (!rpcShared) {
-	        const rpc = app.createSessionObject(definition);
-	        rpcShared = rpc;
+	        rpcShared = app.createSessionObject(definition);
 	        rpcRequestSessionModelStore.set(key, rpcShared);
 	      }
 	      const newModel = await rpcShared;
@@ -21850,6 +21970,9 @@
 	const barPadPx = 4;
 	const barBorderWidthPx = 1;
 	const barWithCheckboxLeftPadPx = 29;
+	const GRID_ROW_HEIGHT = 32;
+	const LIST_ROW_HEIGHT = 29;
+	const DENSE_ROW_HEIGHT = 20; // same for both list and grid in dense mode
 
 	const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim();
 	const getBarWidth = _ref => {
@@ -21896,17 +22019,30 @@
 	};
 	const getSelectedStyle = _ref3 => {
 	  let {
-	    theme
+	    theme,
+	    styles,
+	    selectedState
 	  } = _ref3;
+	  const selectionStyles = styles.selections;
+	  const backgroundColor = selectionStyles[selectedState];
+	  const contrastTextColor = selectionStyles["".concat(selectedState, "Contrast")];
 	  return {
-	    background: theme.palette.selected.main,
-	    color: theme.palette.selected.mainContrastText,
+	    background: backgroundColor,
+	    color: contrastTextColor,
 	    '&:focus': {
 	      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder),
 	      outline: 'none'
 	    },
 	    '& $cell': {
 	      paddingRight: 0
+	    },
+	    // Override default label text style for selection states
+	    // when contrasting text is needed.
+	    ["& .".concat(rowColClasses.labelText)]: {
+	      color: contrastTextColor
+	    },
+	    ["& .".concat(rowColClasses.icon)]: {
+	      color: contrastTextColor
 	    }
 	  };
 	};
@@ -21919,9 +22055,8 @@
 	const iconWidth = 24; // tick and lock icon width in px
 
 	const RowColRoot = styled$1('div', {
-	  shouldForwardProp: prop => !['checkboxes', 'isGridMode', 'isGridCol', 'dense', 'direction', 'sizes', 'frequencyMode', 'freqHitsValue'].includes(prop)
+	  shouldForwardProp: prop => !['checkboxes', 'isGridMode', 'isGridCol', 'dense', 'direction', 'sizes', 'frequencyMode', 'freqHitsValue', 'layout', 'styles'].includes(prop)
 	})(_ref4 => {
-	  var _theme$listBox$conten, _theme$listBox, _theme$listBox$conten2, _theme$listBox2, _theme$listBox3, _theme$listBox4;
 	  let {
 	    theme,
 	    checkboxes,
@@ -21931,8 +22066,21 @@
 	    direction,
 	    sizes,
 	    frequencyMode,
-	    freqHitsValue
+	    freqHitsValue,
+	    styles
 	  } = _ref4;
+	  const rowFontColor = styles.content.color;
+	  const rowBackgroundColor = styles.content.backgroundColor;
+	  const selectStyle = getSelectedStyle({
+	    theme,
+	    styles,
+	    selectedState: 'selected'
+	  });
+	  const excludedSelectStyle = getSelectedStyle({
+	    theme,
+	    styles,
+	    selectedState: 'excluded'
+	  });
 	  return {
 	    '&:focus': {
 	      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
@@ -21950,7 +22098,8 @@
 	    },
 	    ["& .".concat(rowColClasses.row)]: {
 	      flexWrap: 'nowrap',
-	      color: (_theme$listBox$conten = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 || (_theme$listBox = _theme$listBox.content) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.color) !== null && _theme$listBox$conten !== void 0 ? _theme$listBox$conten : theme.palette.text.primary
+	      color: rowFontColor,
+	      backgroundColor: rowBackgroundColor
 	    },
 	    ["& .".concat(rowColClasses.rowBorderBottom)]: {
 	      borderBottom: isGridCol ? 'none' : "1px solid ".concat(theme.palette.divider),
@@ -21959,10 +22108,11 @@
 	    ["& .".concat(rowColClasses.column)]: {
 	      flexWrap: 'nowrap',
 	      borderRight: "1px solid ".concat(theme.palette.divider),
-	      color: (_theme$listBox$conten2 = (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 || (_theme$listBox2 = _theme$listBox2.content) === null || _theme$listBox2 === void 0 ? void 0 : _theme$listBox2.color) !== null && _theme$listBox$conten2 !== void 0 ? _theme$listBox$conten2 : theme.palette.text.primary
+	      color: rowFontColor
 	    },
 	    // The interior wrapper for all field content.
 	    ["& .".concat(rowColClasses.cell)]: {
+	      zIndex: 2,
 	      display: 'flex',
 	      alignItems: 'center',
 	      flexGrow: 1,
@@ -21979,8 +22129,9 @@
 	      userSelect: 'none',
 	      paddingRight: '1px'
 	    }, ellipsis), {}, {
-	      fontSize: (_theme$listBox3 = theme.listBox) === null || _theme$listBox3 === void 0 || (_theme$listBox3 = _theme$listBox3.content) === null || _theme$listBox3 === void 0 ? void 0 : _theme$listBox3.fontSize,
-	      fontFamily: (_theme$listBox4 = theme.listBox) === null || _theme$listBox4 === void 0 || (_theme$listBox4 = _theme$listBox4.content) === null || _theme$listBox4 === void 0 ? void 0 : _theme$listBox4.fontFamily
+	      fontSize: styles.content.fontSize,
+	      fontFamily: styles.content.fontFamily,
+	      color: rowFontColor
 	    }),
 	    ["& .".concat(rowColClasses.labelDense)]: {
 	      fontSize: 12
@@ -22014,32 +22165,32 @@
 	      justifyContent: 'center',
 	      width: iconWidth,
 	      minWidth: iconWidth,
-	      maxWidth: iconWidth
+	      maxWidth: iconWidth,
+	      color: rowFontColor
 	    },
-	    // Selection styles (S=Selected, XS=ExcludedSelected, A=Available, X=Excluded).
-	    ["& .".concat(rowColClasses.S)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
-	      theme
-	    })), {}, {
+	    // Selection styles (S=Selected, XS=ExcludedSelected, A=Alternative, X=Excluded).
+	    ["& .".concat(rowColClasses.S)]: _objectSpread2(_objectSpread2({}, selectStyle), {}, {
 	      border: isGridMode ? 'none' : undefined
 	    }),
 	    ["& .".concat(rowColClasses.XS)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
-	      theme
+	      theme,
+	      styles,
+	      selectedState: 'selectedExcluded'
 	    })), {}, {
-	      background: theme.palette.selected.excluded,
-	      color: theme.palette.selected.excludedContrastText,
 	      border: isGridMode ? 'none' : undefined
 	    }),
-	    ["& .".concat(rowColClasses.A)]: {
-	      background: theme.palette.selected.alternative,
-	      color: theme.palette.selected.alternativeContrastText,
+	    ["& .".concat(rowColClasses.A)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
+	      theme,
+	      styles,
+	      selectedState: 'alternative'
+	    })), {}, {
 	      border: isGridMode ? 'none' : undefined
-	    },
-	    ["& .".concat(rowColClasses.X)]: {
-	      background: theme.palette.selected.excluded,
-	      color: theme.palette.selected.excludedContrastText,
+	    }),
+	    ["& .".concat(rowColClasses.X)]: _objectSpread2(_objectSpread2({}, excludedSelectStyle), {}, {
 	      border: isGridMode ? 'none' : undefined
-	    },
+	    }),
 	    ["& .".concat(rowColClasses.frequencyCount)]: _objectSpread2(_objectSpread2({
+	      zIndex: 3,
 	      justifyContent: 'flex-end'
 	    }, ellipsis), {}, {
 	      flex: "0 0 ".concat(getFreqFlexBasis({
@@ -22067,7 +22218,7 @@
 	    ["& .".concat(rowColClasses.bar)]: {
 	      height: dense ? '16px' : '20px',
 	      position: 'absolute',
-	      zIndex: '-1',
+	      zIndex: 1,
 	      alignSelf: 'center',
 	      left: barPadPx,
 	      width: "calc(100% - ".concat(barPadPx * 2, "px)"),
@@ -22082,7 +22233,6 @@
 	      }
 	    },
 	    ["& .".concat(rowColClasses.barSelected)]: {
-	      zIndex: '0',
 	      '& .bar-filled': {
 	        opacity: '30%',
 	        background: theme.palette.background.lighter
@@ -22094,8 +22244,9 @@
 	    },
 	    ["& .".concat(rowColClasses.barSelectedWithCheckbox)]: {
 	      '& .bar-filled': {
-	        background: '#BFE5D0',
-	        borderColor: '#BFE5D0'
+	        opacity: '30%',
+	        background: selectStyle.background || '#BFE5D0',
+	        borderColor: selectStyle.background || '#BFE5D0'
 	      }
 	    },
 	    ["& .".concat(rowColClasses.excludedTextWithCheckbox)]: {
@@ -22118,9 +22269,12 @@
 	  checkbox: "".concat(PREFIX$b, "-checkbox"),
 	  dense: "".concat(PREFIX$b, "-dense")
 	};
-	const StyledCheckbox = styled$1(Checkbox$1)(_ref => {
+	const StyledCheckbox = styled$1(Checkbox$1, {
+	  shouldForwardProp: p => p !== 'styles'
+	})(_ref => {
 	  let {
-	    theme
+	    theme,
+	    styles
 	  } = _ref;
 	  return {
 	    ["& .".concat(classes$b.cbIcon)]: {
@@ -22136,7 +22290,7 @@
 	    },
 	    ["& .".concat(classes$b.cbIconChecked)]: {
 	      borderRadius,
-	      backgroundColor: theme.palette.selected.main,
+	      backgroundColor: styles.selections.selected,
 	      backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
 	      '&:before': {
 	        display: 'block',
@@ -22185,6 +22339,7 @@
 	    label,
 	    dense,
 	    excluded,
+	    styles,
 	    showGray = true,
 	    dataN
 	  } = _ref2;
@@ -22202,7 +22357,8 @@
 	    icon: getIcon(classes$b, showGray, excluded),
 	    checkedIcon: /*#__PURE__*/React.createElement("span", {
 	      className: classes$b.cbIconChecked
-	    })
+	    }),
+	    styles: styles
 	  });
 	}
 
@@ -22254,7 +22410,6 @@
 	function ValueField(_ref) {
 	  let {
 	    label,
-	    color,
 	    dense,
 	    showGray = true,
 	    checkboxes,
@@ -22268,7 +22423,6 @@
 	      cell,
 	      checkboxes
 	    }) && rowColClasses.excludedTextWithCheckbox]),
-	    color: color,
 	    align: valueTextAlign,
 	    dir: "auto"
 	  }, /*#__PURE__*/React.createElement("span", null, label));
@@ -22302,7 +22456,6 @@
 	  let {
 	    onChange,
 	    label,
-	    color,
 	    qElemNumber,
 	    isSelected,
 	    dense,
@@ -22311,7 +22464,8 @@
 	    showGray,
 	    isSingleSelect,
 	    checkboxes,
-	    valueTextAlign
+	    valueTextAlign,
+	    styles
 	  } = _ref;
 	  const cb = /*#__PURE__*/React.createElement(ListboxCheckbox, {
 	    onChange: onChange,
@@ -22321,7 +22475,8 @@
 	    excluded: isExcluded(cell),
 	    isGridCol: isGridCol,
 	    showGray: showGray,
-	    dataN: qElemNumber
+	    dataN: qElemNumber,
+	    styles: styles
 	  });
 	  const rb = /*#__PURE__*/React.createElement(ListBoxRadioButton, {
 	    onChange: onChange,
@@ -22331,12 +22486,10 @@
 	    dataN: qElemNumber
 	  });
 	  return /*#__PURE__*/React.createElement(FormControlLabel$1, {
-	    color: color,
 	    control: isSingleSelect ? rb : cb,
 	    className: rowColClasses.checkboxLabel,
 	    label: /*#__PURE__*/React.createElement(LabelTag, {
 	      label: label,
-	      color: color,
 	      dense: dense,
 	      showGray: showGray,
 	      checkboxes: checkboxes,
@@ -22375,13 +22528,13 @@
 	    checkboxes,
 	    dense,
 	    showGray,
-	    color,
 	    qElemNumber,
 	    isSelected,
 	    cell,
 	    isGridCol,
 	    isSingleSelect,
-	    valueTextAlign
+	    valueTextAlign,
+	    styles
 	  } = _ref3;
 	  const LWR = /*#__PURE__*/React.createElement(LabelsWithRanges, {
 	    labels: labels,
@@ -22392,7 +22545,6 @@
 	  return checkboxes ? /*#__PURE__*/React.createElement(CheckboxField, {
 	    onChange: onChange,
 	    label: LWR,
-	    color: color,
 	    qElemNumber: qElemNumber,
 	    isSelected: isSelected,
 	    dense: dense,
@@ -22401,7 +22553,8 @@
 	    showGray: showGray,
 	    isSingleSelect: isSingleSelect,
 	    checkboxes: checkboxes,
-	    valueTextAlign: valueTextAlign
+	    valueTextAlign: valueTextAlign,
+	    styles: styles
 	  }) : LWR;
 	}
 
@@ -22409,7 +22562,6 @@
 	  let {
 	    onChange,
 	    label,
-	    color,
 	    qElemNumber,
 	    isSelected,
 	    dense,
@@ -22418,12 +22570,12 @@
 	    showGray,
 	    isSingleSelect,
 	    checkboxes,
-	    valueTextAlign
+	    valueTextAlign,
+	    styles
 	  } = _ref;
 	  return checkboxes ? /*#__PURE__*/React.createElement(CheckboxField, {
 	    onChange: onChange,
 	    label: label,
-	    color: color,
 	    qElemNumber: qElemNumber,
 	    isSelected: isSelected,
 	    dense: dense,
@@ -22432,10 +22584,10 @@
 	    showGray: showGray,
 	    isSingleSelect: isSingleSelect,
 	    checkboxes: checkboxes,
-	    valueTextAlign: valueTextAlign
+	    valueTextAlign: valueTextAlign,
+	    styles: styles
 	  }) : /*#__PURE__*/React.createElement(ValueField, {
 	    label: label,
-	    color: color,
 	    dense: dense,
 	    showGray: true,
 	    checkboxes: checkboxes,
@@ -22691,13 +22843,13 @@
 	const getElementIndex = currentTarget => +currentTarget.getAttribute('data-n');
 	const focusSearch = container => {
 	  const searchField = container === null || container === void 0 ? void 0 : container.querySelector('.search input');
-	  searchField === null || searchField === void 0 ? void 0 : searchField.focus();
+	  searchField === null || searchField === void 0 || searchField.focus();
 	  return searchField;
 	};
 	const focusRow = container => {
 	  const row = container === null || container === void 0 ? void 0 : container.querySelector('.value.last-focused, .value.selector, .value');
-	  row === null || row === void 0 ? void 0 : row.setAttribute('tabIndex', 0);
-	  row === null || row === void 0 ? void 0 : row.focus();
+	  row === null || row === void 0 || row.setAttribute('tabIndex', 0);
+	  row === null || row === void 0 || row.focus();
 	  return row;
 	};
 
@@ -22879,18 +23031,18 @@
 	      case KEYS.HOME:
 	        focusListItems.setFirst(true);
 	        if (ctrlKey) {
-	          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowStart');
+	          setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('overflowStart');
 	          break;
 	        }
-	        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('start');
+	        setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('start');
 	        break;
 	      case KEYS.END:
 	        focusListItems.setLast(true);
 	        if (ctrlKey) {
-	          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowEnd');
+	          setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('overflowEnd');
 	          break;
 	        }
-	        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('end');
+	        setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('end');
 	        break;
 	      case KEYS.A:
 	        if (ctrlKey || metaKey) {
@@ -22985,7 +23137,9 @@
 	    sizes,
 	    translator,
 	    showSearch,
-	    isModal
+	    isModal,
+	    contentFontStyle,
+	    styles
 	  } = data;
 	  const {
 	    dense = false,
@@ -22996,7 +23150,7 @@
 	    itemPadding
 	  } = sizes;
 	  let cellIndex;
-	  let styles;
+	  let styleOverrides;
 	  const count = {
 	    max: null,
 	    currentIndex: null
@@ -23012,7 +23166,7 @@
 	      count.currentIndex = columnIndex;
 	    }
 	    const padding = 0;
-	    styles = _objectSpread2(_objectSpread2({}, style), {}, {
+	    styleOverrides = _objectSpread2(_objectSpread2({}, style), {}, {
 	      left: padding + (columnIndex === 0 ? style.left : Number(style.left) + columnIndex * padding),
 	      // right: columnIndex === columnCount ? style.right : Number(style.right) + columnIndex * padding,
 	      top: rowIndex === 0 ? style.top : Number(style.top) + rowIndex * padding
@@ -23021,7 +23175,7 @@
 	    cellIndex = index;
 	    count.max = listCount;
 	    count.currentIndex = index;
-	    styles = _objectSpread2({}, style);
+	    styleOverrides = _objectSpread2({}, style);
 	  }
 	  cellIndex += dataOffset;
 	  const [rowRef, setRowRef] = reactExports.useState(null);
@@ -23111,7 +23265,8 @@
 	  return /*#__PURE__*/React.createElement(RowColRoot$1, {
 	    className: rowColClasses.barContainer,
 	    checkboxes: checkboxes,
-	    style: styles,
+	    style: styleOverrides,
+	    styles: styles,
 	    isGridCol: isGridCol,
 	    isGridMode: dataLayout === 'grid',
 	    dense: dense,
@@ -23119,6 +23274,7 @@
 	    sizes: sizes,
 	    frequencyMode: deducedFrequencyMode,
 	    freqHitsValue: freqHitsValue,
+	    contentFontStyle: contentFontStyle,
 	    "data-testid": "listbox.item"
 	  }, /*#__PURE__*/React.createElement(ItemGrid, {
 	    role: "row",
@@ -23165,18 +23321,16 @@
 	    checkboxes: checkboxes,
 	    dense: dense,
 	    showGray: showGray,
-	    color: "inherit" // TODO: Check this
-	    ,
 	    qElemNumber: cell.qElemNumber,
 	    isSelected: isSelected,
 	    cell: cell,
 	    isGridCol: isGridCol,
 	    isSingleSelect: isSingleSelect,
-	    valueTextAlign: valueTextAlign
+	    valueTextAlign: valueTextAlign,
+	    styles: styles
 	  }) : /*#__PURE__*/React.createElement(Field$1, {
 	    onChange: onChange,
 	    label: label,
-	    color: "inherit",
 	    qElemNumber: cell.qElemNumber,
 	    isSelected: isSelected,
 	    dense: dense,
@@ -23185,7 +23339,8 @@
 	    showGray: showGray,
 	    isSingleSelect: isSingleSelect,
 	    checkboxes: checkboxes,
-	    valueTextAlign: valueTextAlign
+	    valueTextAlign: valueTextAlign,
+	    styles: styles
 	  })), freqIsAllowed && /*#__PURE__*/React.createElement(Frequency, {
 	    cell: cell,
 	    checkboxes: checkboxes,
@@ -24765,7 +24920,8 @@
 	    freqIsAllowed,
 	    translator,
 	    showSearch,
-	    isModal
+	    isModal,
+	    styles
 	  } = _ref;
 	  const {
 	    layoutOptions = {}
@@ -24819,7 +24975,8 @@
 	    direction,
 	    translator,
 	    showSearch,
-	    isModal
+	    isModal,
+	    styles
 	  });
 	  const List = _ref2 => {
 	    let {
@@ -24950,6 +25107,7 @@
 	  } else {
 	    rowCount = Math.min(listCount, maxRows, autoRowCount);
 	  }
+	  rowCount = Math.max(rowCount, 1);
 	  const columnCount = Math.ceil(listCount / rowCount);
 	  const columnWidth = Math.max(columnAutoWidth, containerWidth / columnCount, itemMinWidth);
 	  return {
@@ -24976,6 +25134,7 @@
 	  } else {
 	    columnCount = Math.min(listCount, maxColumns, autoColumnCount);
 	  }
+	  columnCount = Math.max(columnCount, 1);
 	  const columnWidth = innerWidth / columnCount;
 	  const rowCount = Math.ceil(listCount / columnCount);
 	  return {
@@ -25015,7 +25174,6 @@
 	}
 
 	function useListSizes(_ref) {
-	  var _theme$listBox;
 	  let {
 	    layout,
 	    width,
@@ -25024,7 +25182,7 @@
 	    count,
 	    freqIsAllowed,
 	    checkboxes,
-	    theme
+	    styles
 	  } = _ref;
 	  const {
 	    layoutOptions = {}
@@ -25039,7 +25197,7 @@
 	  const {
 	    fontSize = '12px',
 	    fontFamily = 'Source sans pro'
-	  } = (theme === null || theme === void 0 || (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.content) || {};
+	  } = (styles === null || styles === void 0 ? void 0 : styles.content) || {};
 	  const font = "".concat(fontSize, " ").concat(fontFamily); // font format as supported by HTML canvas
 	  const textWidth = useTextWidth({
 	    text: getMeasureText(layout),
@@ -25071,9 +25229,8 @@
 	  let rowCount;
 	  const isGridMode = dataLayout === 'grid';
 	  const itemPadding = 4;
-	  const denseItemHeight = 20;
-	  const normalItemHeight = isGridMode ? 32 : 29;
-	  let itemHeight = dense ? denseItemHeight : normalItemHeight;
+	  const normalItemHeight = isGridMode ? GRID_ROW_HEIGHT : LIST_ROW_HEIGHT;
+	  let itemHeight = dense ? DENSE_ROW_HEIGHT : normalItemHeight;
 	  if (isGridMode) {
 	    // Emulate a margin between items using padding, since the list library
 	    // needs an explicit row height and cannot handle margins.
@@ -25561,7 +25718,6 @@
 	    model,
 	    app,
 	    constraints,
-	    theme,
 	    layout,
 	    selections,
 	    selectionState,
@@ -25588,7 +25744,8 @@
 	    renderedCallback,
 	    onCtrlF,
 	    showSearch,
-	    isModal
+	    isModal,
+	    styles
 	  } = _ref;
 	  const {
 	    translator: translatorDynamic
@@ -25651,7 +25808,7 @@
 	  const cardinal = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qCardinal;
 	  if (itemsLoader !== null && itemsLoader !== void 0 && itemsLoader.pages.length && !awaitingFrequencyMax || cardinal === 0) {
 	    // All necessary data fetching done - signal rendering done!
-	    renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
+	    renderedCallback === null || renderedCallback === void 0 || renderedCallback();
 	  }
 	  const isItemLoaded = reactExports.useCallback(index => {
 	    if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
@@ -25744,7 +25901,7 @@
 	    count,
 	    freqIsAllowed,
 	    checkboxes,
-	    theme
+	    styles
 	  });
 	  if (sizes.columnWidth) {
 	    // In grid mode, where we have a dynamic item width, get a second opinion on showing/hiding frequency.
@@ -25859,7 +26016,8 @@
 	    freqIsAllowed,
 	    translator: translatorDynamic,
 	    showSearch,
-	    isModal
+	    isModal,
+	    styles
 	  });
 	  const {
 	    columnWidth,
@@ -26235,7 +26393,7 @@
 	  }), /*#__PURE__*/React.createElement(MenuList$1, {
 	    id: "moreMenuList"
 	  }, actions.map((item, ix) =>
-	  /*#__PURE__*/
+	  
 	  // eslint-disable-next-line react/no-array-index-key
 	  React.createElement(MoreItem, {
 	    key: ix,
@@ -26404,7 +26562,7 @@
 	    actionsRefMock = null,
 	    // for testing
 	    direction = 'ltr',
-	    autoConfirm
+	    autoConfirm = false
 	  } = _ref3;
 	  const defaultSelectionActions = useDefaultSelectionActions(selections);
 	  const {
@@ -26451,14 +26609,7 @@
 	    focusHandler.on('focus_toolbar_last', focusLast);
 	  }, []);
 	  if (autoConfirm) {
-	    const canConfirm = selections.show;
-	    if (canConfirm) {
-	      const confirm = defaultSelectionActions.find(o => o.key === 'confirm') || {
-	        action: () => {}
-	      };
-	      confirm.action();
-	    }
-	    return null;
+	    return undefined;
 	  }
 	  let moreEnabled = more$1.enabled;
 	  let moreActions = more$1.actions;
@@ -26535,13 +26686,15 @@
 	    transformOrigin: popoverTransformOrigin,
 	    hideBackdrop: true,
 	    style: popoverStyle,
-	    PaperProps: {
-	      id: 'njs-action-toolbar-popover',
-	      'data-testid': 'njs-action-toolbar-popover',
-	      className: ActionToolbarElement.className,
-	      style: {
-	        pointerEvents: 'auto',
-	        padding: theme.spacing(0.5, 0.25)
+	    slotProps: {
+	      paper: {
+	        id: 'njs-action-toolbar-popover',
+	        'data-testid': 'njs-action-toolbar-popover',
+	        className: ActionToolbarElement.className,
+	        style: {
+	          pointerEvents: 'auto',
+	          padding: theme.spacing(0.5, 0.25)
+	        }
 	      }
 	    }
 	  }, Actions) : show && Actions;
@@ -26559,22 +26712,24 @@
 
 	const TREE_PATH = '/qListObjectDef';
 	const WILDCARD = '**';
-	const StyledInputAdornment = styled$1(InputAdornment$1)(_ref => {
-	  var _theme$listBox;
+	const StyledInputAdornment = styled$1(InputAdornment$1, {
+	  shouldForwardProp: p => p !== 'styles'
+	})(_ref => {
 	  let {
-	    theme
+	    styles
 	  } = _ref;
 	  return {
-	    color: (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 || (_theme$listBox = _theme$listBox.content) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.color
+	    color: styles.content.color
 	  };
 	});
-	const StyledOutlinedInput = styled$1(OutlinedInput$1)(_ref2 => {
-	  var _theme$listBox2;
+	const StyledOutlinedInput = styled$1(OutlinedInput$1, {
+	  shouldForwardProp: p => p !== 'styles'
+	})(_ref2 => {
 	  let {
-	    theme
+	    styles
 	  } = _ref2;
 	  return {
-	    color: (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 || (_theme$listBox2 = _theme$listBox2.content) === null || _theme$listBox2 === void 0 ? void 0 : _theme$listBox2.color,
+	    color: styles.content.color,
 	    display: 'flex'
 	  };
 	});
@@ -26590,7 +26745,8 @@
 	    wildCardSearch = false,
 	    searchEnabled,
 	    direction,
-	    hide
+	    hide,
+	    styles
 	  } = _ref3;
 	  const {
 	    translator
@@ -26672,7 +26828,7 @@
 	  function focusRow(container) {
 	    const row = (container === null || container === void 0 ? void 0 : container.querySelector('.last-focused')) || (container === null || container === void 0 ? void 0 : container.querySelector('[role="row"]:first-child'));
 	    row.setAttribute('tabIndex', 0);
-	    row === null || row === void 0 ? void 0 : row.focus();
+	    row === null || row === void 0 || row.focus();
 	  }
 	  const onKeyDown = async e => {
 	    const {
@@ -26698,7 +26854,7 @@
 	            focusRow(container);
 
 	            // Clean up.
-	            container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+	            container === null || container === void 0 || container.querySelectorAll('.last-focused').forEach(elm => {
 	              elm.classList.remove('last-focused');
 	            });
 	          }
@@ -26727,8 +26883,10 @@
 	    return null;
 	  }
 	  return /*#__PURE__*/React.createElement(StyledOutlinedInput, {
+	    styles: styles,
 	    startAdornment: /*#__PURE__*/React.createElement(StyledInputAdornment, {
-	      position: "start"
+	      position: "start",
+	      styles: styles
 	    }, /*#__PURE__*/React.createElement(SearchIcon, {
 	      size: dense ? 'small' : 'normal'
 	    })),
@@ -27007,12 +27165,12 @@
 	    activateClickOut() {
 	      var _options$onSelectionA;
 	      document.addEventListener('mousedown', handler);
-	      options === null || options === void 0 || (_options$onSelectionA = options.onSelectionActivated) === null || _options$onSelectionA === void 0 ? void 0 : _options$onSelectionA.call(options);
+	      options === null || options === void 0 || (_options$onSelectionA = options.onSelectionActivated) === null || _options$onSelectionA === void 0 || _options$onSelectionA.call(options);
 	    },
 	    deactivateClickOut() {
 	      var _options$onSelectionD;
 	      document.removeEventListener('mousedown', handler);
-	      options === null || options === void 0 || (_options$onSelectionD = options.onSelectionDeactivated) === null || _options$onSelectionD === void 0 ? void 0 : _options$onSelectionD.call(options);
+	      options === null || options === void 0 || (_options$onSelectionD = options.onSelectionDeactivated) === null || _options$onSelectionD === void 0 || _options$onSelectionD.call(options);
 	    }
 	  };
 	};
@@ -27137,7 +27295,7 @@
 	      if (selected && !additive) {
 	        state.itemStates[elementNumber] = false;
 	      } else if (!selected) {
-	        selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.push(elementNumber);
+	        selectedValues === null || selectedValues === void 0 || selectedValues.push(elementNumber);
 	        state.itemStates[elementNumber] = true;
 	      }
 	    },
@@ -27191,6 +27349,104 @@
 	  return totalCounts > 0;
 	}
 
+	const LIGHT = '#FFF';
+	const DARK = '#000';
+	function getContrastingColor(backgroundColor) {
+	  let desiredTextColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+	  let dark = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DARK;
+	  let light = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : LIGHT;
+	  const CONTRAST_THRESHOLD = 3.0;
+	  let contrastingColor;
+	  if (desiredTextColor && getContrastRatio(desiredTextColor, backgroundColor) > CONTRAST_THRESHOLD) {
+	    contrastingColor = desiredTextColor;
+	  } else {
+	    contrastingColor = getContrastRatio(light, backgroundColor) > CONTRAST_THRESHOLD ? light : dark;
+	  }
+	  return contrastingColor;
+	}
+	const SUPPORTED_COMPONENTS = ['theme', 'selections'];
+	function getOverridesAsObject() {
+	  let components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+	  // Currently supporting components "theme" and "selections".
+	  const overrides = {};
+	  components.forEach(c => {
+	    const k = c === null || c === void 0 ? void 0 : c.key;
+	    if (SUPPORTED_COMPONENTS.includes(k)) {
+	      overrides[k] = c;
+	    }
+	  });
+	  return overrides;
+	}
+	function getSelectionColors(theme, getListboxStyle, overrides) {
+	  var _overrides$theme, _theme$palette, _overrides$theme$cont, _overrides$theme2, _overrides$selections, _selectionColors$sele, _theme$palette2, _selectionColors$alte, _theme$palette3, _selectionColors$excl, _theme$palette4, _selectionColors$sele2, _theme$palette5, _selectionColors$poss, _theme$palette6, _theme$palette7, _theme$palette8, _theme$palette9, _theme$palette10, _theme$palette11;
+	  const desiredTextColor = ((_overrides$theme = overrides.theme) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.content) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.fontColor) === null || _overrides$theme === void 0 ? void 0 : _overrides$theme.color) || getListboxStyle('content', 'color') || ((_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.text.primary);
+	  const useContrastTextColor = (_overrides$theme$cont = (_overrides$theme2 = overrides.theme) === null || _overrides$theme2 === void 0 || (_overrides$theme2 = _overrides$theme2.content) === null || _overrides$theme2 === void 0 ? void 0 : _overrides$theme2.useContrastColor) !== null && _overrides$theme$cont !== void 0 ? _overrides$theme$cont : true;
+
+	  // Background colors
+	  const selectionColors = ((_overrides$selections = overrides.selections) === null || _overrides$selections === void 0 ? void 0 : _overrides$selections.colors) || {};
+	  const selected = ((_selectionColors$sele = selectionColors.selected) === null || _selectionColors$sele === void 0 ? void 0 : _selectionColors$sele.color) || ((_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.selected.main) || '#009845';
+	  const alternative = ((_selectionColors$alte = selectionColors.alternative) === null || _selectionColors$alte === void 0 ? void 0 : _selectionColors$alte.color) || ((_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.selected.alternative) || '#E4E4E4';
+	  const excluded = ((_selectionColors$excl = selectionColors.excluded) === null || _selectionColors$excl === void 0 ? void 0 : _selectionColors$excl.color) || ((_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.selected.excluded) || '#A9A9A9';
+	  const selectedExcluded = ((_selectionColors$sele2 = selectionColors.selectedExcluded) === null || _selectionColors$sele2 === void 0 ? void 0 : _selectionColors$sele2.color) || ((_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.selected.selectedExcluded) || '#A9A9A9';
+	  const possible = ((_selectionColors$poss = selectionColors.possible) === null || _selectionColors$poss === void 0 ? void 0 : _selectionColors$poss.color) || getListboxStyle('', 'backgroundColor') || ((_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.selected.possible) || '#FFFFFF';
+
+	  // Font colors
+	  let selectedContrast = desiredTextColor || ((_theme$palette7 = theme.palette) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.selected.main);
+	  let alternativeContrast = desiredTextColor || ((_theme$palette8 = theme.palette) === null || _theme$palette8 === void 0 ? void 0 : _theme$palette8.selected.alternativeContrastText);
+	  let excludedContrast = desiredTextColor || ((_theme$palette9 = theme.palette) === null || _theme$palette9 === void 0 ? void 0 : _theme$palette9.selected.excludedContrastText);
+	  let selectedExcludedContrast = desiredTextColor || ((_theme$palette10 = theme.palette) === null || _theme$palette10 === void 0 ? void 0 : _theme$palette10.selected.selectedExcludedContrastText);
+	  let possibleContrast = desiredTextColor || ((_theme$palette11 = theme.palette) === null || _theme$palette11 === void 0 ? void 0 : _theme$palette11.selected.possibleContrastText);
+	  if (useContrastTextColor) {
+	    // Override preferred text color if it does not contrast enough with the background color.
+	    selectedContrast = getContrastingColor(selected, desiredTextColor);
+	    alternativeContrast = getContrastingColor(alternative, desiredTextColor);
+	    excludedContrast = getContrastingColor(excluded, desiredTextColor);
+	    selectedExcludedContrast = getContrastingColor(selectedExcluded, desiredTextColor);
+	    possibleContrast = getContrastingColor(possible, desiredTextColor);
+	  }
+	  return {
+	    selected,
+	    alternative,
+	    excluded,
+	    selectedExcluded,
+	    possible,
+	    selectedContrast,
+	    alternativeContrast,
+	    excludedContrast,
+	    selectedExcludedContrast,
+	    possibleContrast
+	  };
+	}
+	function getStyles(_ref) {
+	  var _themeOverrides$heade, _themeOverrides$heade2, _themeOverrides$conte;
+	  let {
+	    themeApi,
+	    theme,
+	    components = [],
+	    checkboxes = false
+	  } = _ref;
+	  const overrides = getOverridesAsObject(components);
+	  const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
+	  const selections = getSelectionColors(theme, getListboxStyle, overrides);
+	  const themeOverrides = overrides.theme || {};
+	  return {
+	    backgroundColor: getListboxStyle('', 'backgroundColor') || theme.palette.background.default,
+	    header: {
+	      color: ((_themeOverrides$heade = themeOverrides.header) === null || _themeOverrides$heade === void 0 || (_themeOverrides$heade = _themeOverrides$heade.fontColor) === null || _themeOverrides$heade === void 0 ? void 0 : _themeOverrides$heade.color) || getListboxStyle('title.main', 'color'),
+	      fontSize: ((_themeOverrides$heade2 = themeOverrides.header) === null || _themeOverrides$heade2 === void 0 ? void 0 : _themeOverrides$heade2.fontSize) || getListboxStyle('title.main', 'fontSize'),
+	      fontFamily: getListboxStyle('title.main', 'fontFamily'),
+	      fontWeight: getListboxStyle('title.main', 'fontWeight') || 'bold'
+	    },
+	    content: {
+	      backgroundColor: checkboxes ? undefined : selections.possible,
+	      color: selections.possibleContrast || getListboxStyle('content', 'color'),
+	      fontSize: ((_themeOverrides$conte = themeOverrides.content) === null || _themeOverrides$conte === void 0 ? void 0 : _themeOverrides$conte.fontSize) || getListboxStyle('content', 'fontSize'),
+	      fontFamily: getListboxStyle('content', 'fontFamily')
+	    },
+	    selections
+	  };
+	}
+
 	function ListBoxPopover(_ref) {
 	  let {
 	    alignTo,
@@ -27207,7 +27463,9 @@
 	    app,
 	    fieldName,
 	    stateName = '$',
-	    autoFocus
+	    autoFocus,
+	    components,
+	    checkboxes: checkboxesOption
 	  } = _ref;
 	  const isMasterDim = Boolean(fieldName === null || fieldName === void 0 ? void 0 : fieldName.qLibraryId);
 	  const open = show && Boolean(alignTo.current);
@@ -27246,13 +27504,23 @@
 	    model.unlock('/qListObjectDef');
 	  }, [model]);
 	  const {
-	    translator
+	    translator,
+	    themeApi
 	  } = reactExports.useContext(InstanceContext);
 	  const moreAlignTo = reactExports.useRef();
 	  const containerRef = reactExports.useRef();
 	  const [selections] = useObjectSelections(app, model, containerRef);
 	  const [layout] = useLayout$1(model);
 	  const [selectionState$1] = reactExports.useState(() => selectionState());
+	  const {
+	    checkboxes = checkboxesOption
+	  } = layout || {};
+	  const styles = getStyles({
+	    themeApi,
+	    theme,
+	    components,
+	    checkboxes
+	  });
 	  reactExports.useEffect(() => {
 	    if (selections && open) {
 	      if (!selections.isModal(model)) {
@@ -27277,7 +27545,7 @@
 	  });
 	  const onCtrlF = () => {
 	    const input = searchContainerRef.current.querySelector('input');
-	    input === null || input === void 0 ? void 0 : input.focus();
+	    input === null || input === void 0 || input.focus();
 	  };
 	  const hasSelections$1 = hasSelections(layout);
 	  return /*#__PURE__*/React.createElement(Popover$1, {
@@ -27349,6 +27617,7 @@
 	    item: true,
 	    ref: searchContainerRef
 	  }, /*#__PURE__*/React.createElement(ListBoxSearch, {
+	    styles: styles,
 	    visible: true,
 	    model: model,
 	    listCount: listCount,
@@ -27367,7 +27636,7 @@
 	    direction: "ltr",
 	    onSetListCount: c => setListCount(c),
 	    onCtrlF: onCtrlF,
-	    theme: theme
+	    styles: styles
 	  }))));
 	}
 
@@ -27651,7 +27920,7 @@
 	    variant: "contained",
 	    fullWidth: true
 	  }, clearAllStates)), field.states.map((s, ix) =>
-	  /*#__PURE__*/
+	  
 	  // eslint-disable-next-line react/no-array-index-key
 	  React.createElement(ListItem$1, {
 	    key: ix,
@@ -27829,7 +28098,7 @@
 	  }, /*#__PURE__*/React.createElement(List$1, {
 	    dense: true
 	  }, items.map((s, ix) =>
-	  /*#__PURE__*/
+	  
 	  // eslint-disable-next-line react/no-array-index-key
 	  React.createElement(ListItem$1, {
 	    key: ix,
@@ -28530,12 +28799,12 @@
 	var DrillDownIcon = (props => SvgIcon(drillDown(props)));
 
 	function removeInnnerTabStops(container) {
-	  container === null || container === void 0 ? void 0 : container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
+	  container === null || container === void 0 || container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
 	    elm.setAttribute('tabIndex', -1);
 	  });
 	}
 	function removeLastFocused(container) {
-	  container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+	  container === null || container === void 0 || container.querySelectorAll('.last-focused').forEach(elm => {
 	    elm.classList.remove('last-focused');
 	  });
 	}
@@ -28583,13 +28852,13 @@
 	      const firstRowElement = c === null || c === void 0 ? void 0 : c.querySelector('.value.selector, .value');
 	      const confirmButton = c === null || c === void 0 ? void 0 : c.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
 	      const elementToFocus = searchField || lastSelectedRow || firstRowElement || confirmButton;
-	      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.setAttribute('tabIndex', 0);
-	      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
+	      elementToFocus === null || elementToFocus === void 0 || elementToFocus.setAttribute('tabIndex', 0);
+	      elementToFocus === null || elementToFocus === void 0 || elementToFocus.focus();
 	    },
 	    focusSelection() {
 	      const confirmButton = document.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
-	      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.setAttribute('tabIndex', 0);
-	      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.focus();
+	      confirmButton === null || confirmButton === void 0 || confirmButton.setAttribute('tabIndex', 0);
+	      confirmButton === null || confirmButton === void 0 || confirmButton.focus();
 	    }
 	  };
 	  return keyboard;
@@ -28631,7 +28900,7 @@
 	      keyboard.blur();
 	      const c = currentTarget.closest('.listbox-container');
 	      c.setAttribute('tabIndex', -1);
-	      c === null || c === void 0 ? void 0 : c.focus();
+	      c === null || c === void 0 || c.focus();
 	    }
 	  };
 	  const handleKeyDown = event => {
@@ -28746,26 +29015,6 @@
 	  };
 	}
 
-	const addListboxTheme = themeApi => {
-	  const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
-	  return {
-	    backgroundColor: getListboxStyle('', 'backgroundColor'),
-	    title: {
-	      main: {
-	        color: getListboxStyle('title.main', 'color'),
-	        fontSize: getListboxStyle('title.main', 'fontSize'),
-	        fontFamily: getListboxStyle('title.main', 'fontFamily'),
-	        fontWeight: getListboxStyle('title.main', 'fontWeight')
-	      }
-	    },
-	    content: {
-	      color: getListboxStyle('content', 'color'),
-	      fontSize: getListboxStyle('content', 'fontSize'),
-	      fontFamily: getListboxStyle('content', 'fontFamily')
-	    }
-	  };
-	};
-
 	function showToolbarDetached(_ref) {
 	  var _titleRef$current$cli, _titleRef$current, _titleRef$current2, _titleRef$current3;
 	  let {
@@ -28794,11 +29043,9 @@
 	    isLocked,
 	    listboxSelectionToolbarItems,
 	    selections,
-	    keyboard,
-	    autoConfirm
+	    keyboard
 	  } = _ref;
 	  return {
-	    autoConfirm,
 	    show: showToolbar && !isDetached,
 	    popover: {
 	      show: showToolbar && isDetached,
@@ -28819,10 +29066,10 @@
 	      show: showToolbar,
 	      api: selections,
 	      onConfirm: () => {
-	        keyboard === null || keyboard === void 0 ? void 0 : keyboard.focus();
+	        keyboard === null || keyboard === void 0 || keyboard.focus();
 	      },
 	      onCancel: () => {
-	        keyboard === null || keyboard === void 0 ? void 0 : keyboard.focus();
+	        keyboard === null || keyboard === void 0 || keyboard.focus();
 	      }
 	    }
 	  };
@@ -28860,16 +29107,16 @@
 	  listboxWrapper: "".concat(PREFIX$4, "-listboxWrapper")
 	};
 	const StyledGrid$3 = styled$1(Grid$1, {
-	  shouldForwardProp: p => !['containerPadding', 'isGridMode'].includes(p)
+	  shouldForwardProp: p => !['containerPadding', 'isGridMode', 'styles'].includes(p)
 	})(_ref => {
-	  var _theme$listBox$backgr, _theme$listBox;
 	  let {
 	    theme,
 	    containerPadding,
-	    isGridMode
+	    isGridMode,
+	    styles
 	  } = _ref;
 	  return {
-	    backgroundColor: (_theme$listBox$backgr = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.backgroundColor) !== null && _theme$listBox$backgr !== void 0 ? _theme$listBox$backgr : theme.palette.background.default,
+	    background: styles.backgroundColor,
 	    ["& .".concat(classes$4.listBoxHeader)]: {
 	      alignSelf: 'center',
 	      display: 'flex'
@@ -28895,15 +29142,14 @@
 	  };
 	});
 	const Title = styled$1(Typography$1)(_ref2 => {
-	  var _theme$listBox2, _theme$listBox3, _theme$listBox4, _theme$listBox5;
 	  let {
-	    theme
+	    styles
 	  } = _ref2;
 	  return {
-	    color: (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 || (_theme$listBox2 = _theme$listBox2.title) === null || _theme$listBox2 === void 0 || (_theme$listBox2 = _theme$listBox2.main) === null || _theme$listBox2 === void 0 ? void 0 : _theme$listBox2.color,
-	    fontSize: (_theme$listBox3 = theme.listBox) === null || _theme$listBox3 === void 0 || (_theme$listBox3 = _theme$listBox3.title) === null || _theme$listBox3 === void 0 || (_theme$listBox3 = _theme$listBox3.main) === null || _theme$listBox3 === void 0 ? void 0 : _theme$listBox3.fontSize,
-	    fontFamily: (_theme$listBox4 = theme.listBox) === null || _theme$listBox4 === void 0 || (_theme$listBox4 = _theme$listBox4.title) === null || _theme$listBox4 === void 0 || (_theme$listBox4 = _theme$listBox4.main) === null || _theme$listBox4 === void 0 ? void 0 : _theme$listBox4.fontFamily,
-	    fontWeight: ((_theme$listBox5 = theme.listBox) === null || _theme$listBox5 === void 0 || (_theme$listBox5 = _theme$listBox5.title) === null || _theme$listBox5 === void 0 || (_theme$listBox5 = _theme$listBox5.main) === null || _theme$listBox5 === void 0 ? void 0 : _theme$listBox5.fontWeight) || 'bold'
+	    color: styles.header.color,
+	    fontSize: styles.header.fontSize,
+	    fontFamily: styles.header.fontFamily,
+	    fontWeight: styles.header.fontWeight
 	  };
 	});
 	const isModal = _ref3 => {
@@ -28924,7 +29170,7 @@
 	    app,
 	    direction,
 	    frequencyMode,
-	    checkboxes,
+	    checkboxes: checkboxesOption,
 	    search = true,
 	    focusSearch = false,
 	    rangeSelect = true,
@@ -28939,7 +29185,8 @@
 	    scrollState = undefined,
 	    renderedCallback,
 	    toolbar = true,
-	    isPopover = false
+	    isPopover = false,
+	    components
 	  } = options;
 
 	  // Hook that will trigger update when used in useEffects.
@@ -28963,7 +29210,15 @@
 	    themeApi,
 	    constraints
 	  } = reactExports.useContext(InstanceContext);
-	  theme.listBox = addListboxTheme(themeApi);
+	  const {
+	    checkboxes = checkboxesOption
+	  } = layout || {};
+	  const styles = getStyles({
+	    themeApi,
+	    theme,
+	    components,
+	    checkboxes
+	  });
 	  const isDirectQuery = isDirectQueryEnabled({
 	    appLayout: app === null || app === void 0 ? void 0 : app.layout
 	  });
@@ -29104,10 +29359,6 @@
 	  const showSearchToggle = search === 'toggle' && showSearch;
 	  const searchVisible = (search === true || showSearchToggle) && !selectDisabled() && searchEnabled !== false;
 	  const dense = (_layoutOptions$dense = layoutOptions.dense) !== null && _layoutOptions$dense !== void 0 ? _layoutOptions$dense : false;
-	  const searchHeight = dense ? 27 : 40;
-	  const extraheight = dense ? 39 : 49;
-	  const searchAddHeight = searchVisible ? searchHeight : 0;
-	  const minHeight = showToolbarWithTitle ? 49 + searchAddHeight + extraheight : 0;
 	  const headerHeight = 32;
 	  const onShowSearch = () => {
 	    const newValue = !showSearch;
@@ -29118,17 +29369,18 @@
 	      onShowSearch();
 	    } else {
 	      const input = searchContainer.current.querySelector('input');
-	      input === null || input === void 0 ? void 0 : input.focus();
+	      input === null || input === void 0 || input.focus();
 	    }
 	  };
-	  const getActionToolbarProps = isDetached => getListboxActionProps({
+	  const getActionToolbarProps = isDetached => _objectSpread2(_objectSpread2({}, getListboxActionProps({
 	    isDetached: isPopover ? false : isDetached,
 	    showToolbar,
 	    containerRef,
 	    isLocked,
 	    listboxSelectionToolbarItems,
 	    selections,
-	    keyboard,
+	    keyboard
+	  })), {}, {
 	    autoConfirm
 	  });
 	  const shouldAutoFocus = searchVisible && search === 'toggle';
@@ -29176,7 +29428,7 @@
 	    }
 	  }));
 	  if (isInvalid) {
-	    renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
+	    renderedCallback === null || renderedCallback === void 0 || renderedCallback();
 	  }
 	  return /*#__PURE__*/React.createElement(React.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React.createElement(ActionsToolbar, _extends$7({
 	    direction: direction
@@ -29187,9 +29439,9 @@
 	    direction: "column",
 	    gap: 0,
 	    containerPadding: containerPadding,
+	    styles: styles,
 	    style: {
 	      height: '100%',
-	      minHeight: "".concat(minHeight, "px"),
 	      flexFlow: 'column nowrap'
 	    },
 	    onKeyDown: handleKeyDown,
@@ -29233,7 +29485,8 @@
 	    variant: "h6",
 	    noWrap: true,
 	    ref: titleRef,
-	    title: layout.title
+	    title: layout.title,
+	    styles: styles
 	  }, layout.title)), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true
 	  }, /*#__PURE__*/React.createElement(ActionsToolbar, _extends$7({
@@ -29244,7 +29497,7 @@
 	    direction: "column",
 	    style: {
 	      height: '100%',
-	      minHeight: '50px'
+	      minHeight: DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH
 	    },
 	    role: "region",
 	    "aria-label": translator.get('Listbox.ResultFilterLabel')
@@ -29263,7 +29516,8 @@
 	    wildCardSearch: wildCardSearch,
 	    searchEnabled: searchEnabled,
 	    direction: direction,
-	    hide: showSearchIcon && onShowSearch
+	    hide: showSearchIcon && onShowSearch,
+	    styles: styles
 	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true,
@@ -29278,7 +29532,6 @@
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
 	      app: app,
-	      theme: theme,
 	      constraints: constraints,
 	      layout: layout,
 	      selections: selections,
@@ -29311,7 +29564,8 @@
 	      },
 	      renderedCallback: renderedCallback,
 	      onCtrlF: onCtrlF,
-	      isModal: isModalMode
+	      isModal: isModalMode,
+	      styles: styles
 	    });
 	  })))));
 	}
@@ -29459,7 +29713,7 @@
 	   */
 	  wildCardSearch: false,
 	  /**
-	   * Automatically confirm selections without showing the selections toolbar.
+	   * Automatically confirm selections when clicking outside a listbox, without showing the selections toolbar.
 	   * @type {boolean=}
 	   * @default
 	   */
@@ -29868,7 +30122,8 @@
 	    close: handleCloseShowState,
 	    fieldName: fieldIdentifier,
 	    stateName: stateName,
-	    autoFocus: options.autoFocus
+	    autoFocus: options.autoFocus,
+	    components: options.components
 	  });
 	}
 
@@ -37773,6 +38028,37 @@
 	  }
 	};
 
+	/**
+	 * @interface Component
+	 * @property {string} key The key of the component. Currently supporting components "theme" and "selections".
+	 * @example
+	 * const n = embed(app);
+	 * const inst = await n.field('field_name');
+	 * inst.mount(document.querySelector('.listbox'), {
+	 *   components: [{
+	 *    key: 'theme',
+	 *    header: {
+	 *      fontColor: { color: '#f00' },
+	 *      fontSize: 23,
+	 *    },
+	 *    content: {
+	 *      fontSize: 16,
+	 *      useContrastColor: false,
+	 *    }
+	 *   },{
+	 *    key: 'selections',
+	 *    colors: {
+	 *      selected: { color: '#0f0' },
+	 *      alternative: { color: '#ededed' },
+	 *      excluded: { color: '#ccc' },
+	 *      selectedExcluded: { color: '#bbb' },
+	 *      possible: { color: '#fefefe' },
+	 *      possible: { color: '#fefefe' },
+	 *    }
+	 *  }]
+	 * });
+	 */
+
 	/**
 	 * @interface Configuration
 	 * @property {LoadType=} load Fallback load function for missing types
@@ -38195,6 +38481,7 @@
 	           * @param {boolean=} [options.checkboxes=false] Show values as checkboxes instead of as fields (not applicable for existing objects)
 	           * @param {boolean=} [options.dense=false] Reduces padding and text size (not applicable for existing objects)
 	           * @param {string=} [options.stateName="$"] Sets the state to make selections in (not applicable for existing objects)
+	           * @param {Component[]} [options.components] Override individual components' styling, otherwise set by the theme or the default style.
 	           * @param {object=} [options.properties={}] Properties object to extend default properties with
 	           * @returns {Promise<void>} A promise that resolves when the data is fetched.
 	           *