@nebula.js/stardust 4.5.0 → 4.6.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.5.0
+* @nebula.js/stardust v4.6.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -722,26 +722,26 @@
 	  }
 	})(runtime);
 
-	function ownKeys(e, r) {
-	  var t = Object.keys(e);
+	function ownKeys(object, enumerableOnly) {
+	  var keys = Object.keys(object);
 	  if (Object.getOwnPropertySymbols) {
-	    var o = Object.getOwnPropertySymbols(e);
-	    r && (o = o.filter(function (r) {
-	      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-	    })), t.push.apply(t, o);
-	  }
-	  return t;
-	}
-	function _objectSpread2(e) {
-	  for (var r = 1; r < arguments.length; r++) {
-	    var t = null != arguments[r] ? arguments[r] : {};
-	    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
-	      _defineProperty(e, r, t[r]);
-	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-	      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+	    var symbols = Object.getOwnPropertySymbols(object);
+	    enumerableOnly && (symbols = symbols.filter(function (sym) {
+	      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+	    })), keys.push.apply(keys, symbols);
+	  }
+	  return keys;
+	}
+	function _objectSpread2(target) {
+	  for (var i = 1; i < arguments.length; i++) {
+	    var source = null != arguments[i] ? arguments[i] : {};
+	    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+	      _defineProperty(target, key, source[key]);
+	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+	      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
 	    });
 	  }
-	  return e;
+	  return target;
 	}
 	function _defineProperty(obj, key, value) {
 	  key = _toPropertyKey(key);
@@ -6952,7 +6952,7 @@
 	}
 
 	/**
-	 * @mui/styled-engine v5.14.11
+	 * @mui/styled-engine v5.14.13
 	 *
 	 * @license MIT
 	 * This source code is licensed under the MIT license found in the
@@ -8267,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) {
@@ -8326,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,
@@ -8385,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, {
@@ -8420,7 +8496,7 @@
 	            defaultTheme,
 	            themeId
 	          }));
-	          return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+	          return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
 	        });
 	      }
 	      if (!skipSx) {
@@ -8432,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) {
@@ -11129,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,
@@ -11497,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',
@@ -11531,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)',
@@ -11561,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)',
@@ -11592,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)',
@@ -11742,7 +11818,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "7c03" ;
+	const NEBULA_VERSION_HASH = "ba42" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -12003,7 +12079,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.5.0" );
+	  element.setAttribute('data-nebulajs-version', "4.6.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -17020,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'
@@ -20819,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];
 	  }
@@ -20832,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;
@@ -21947,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
 	    }
 	  };
 	};
@@ -21970,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,
@@ -21982,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")
@@ -22001,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),
@@ -22010,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,
@@ -22030,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
@@ -22065,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({
@@ -22118,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)"),
@@ -22133,7 +22233,6 @@
 	      }
 	    },
 	    ["& .".concat(rowColClasses.barSelected)]: {
-	      zIndex: '0',
 	      '& .bar-filled': {
 	        opacity: '30%',
 	        background: theme.palette.background.lighter
@@ -22145,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)]: {
@@ -22169,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)]: {
@@ -22187,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',
@@ -22236,6 +22339,7 @@
 	    label,
 	    dense,
 	    excluded,
+	    styles,
 	    showGray = true,
 	    dataN
 	  } = _ref2;
@@ -22253,7 +22357,8 @@
 	    icon: getIcon(classes$b, showGray, excluded),
 	    checkedIcon: /*#__PURE__*/React.createElement("span", {
 	      className: classes$b.cbIconChecked
-	    })
+	    }),
+	    styles: styles
 	  });
 	}
 
@@ -22305,7 +22410,6 @@
 	function ValueField(_ref) {
 	  let {
 	    label,
-	    color,
 	    dense,
 	    showGray = true,
 	    checkboxes,
@@ -22319,7 +22423,6 @@
 	      cell,
 	      checkboxes
 	    }) && rowColClasses.excludedTextWithCheckbox]),
-	    color: color,
 	    align: valueTextAlign,
 	    dir: "auto"
 	  }, /*#__PURE__*/React.createElement("span", null, label));
@@ -22353,7 +22456,6 @@
 	  let {
 	    onChange,
 	    label,
-	    color,
 	    qElemNumber,
 	    isSelected,
 	    dense,
@@ -22362,7 +22464,8 @@
 	    showGray,
 	    isSingleSelect,
 	    checkboxes,
-	    valueTextAlign
+	    valueTextAlign,
+	    styles
 	  } = _ref;
 	  const cb = /*#__PURE__*/React.createElement(ListboxCheckbox, {
 	    onChange: onChange,
@@ -22372,7 +22475,8 @@
 	    excluded: isExcluded(cell),
 	    isGridCol: isGridCol,
 	    showGray: showGray,
-	    dataN: qElemNumber
+	    dataN: qElemNumber,
+	    styles: styles
 	  });
 	  const rb = /*#__PURE__*/React.createElement(ListBoxRadioButton, {
 	    onChange: onChange,
@@ -22382,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,
@@ -22426,13 +22528,13 @@
 	    checkboxes,
 	    dense,
 	    showGray,
-	    color,
 	    qElemNumber,
 	    isSelected,
 	    cell,
 	    isGridCol,
 	    isSingleSelect,
-	    valueTextAlign
+	    valueTextAlign,
+	    styles
 	  } = _ref3;
 	  const LWR = /*#__PURE__*/React.createElement(LabelsWithRanges, {
 	    labels: labels,
@@ -22443,7 +22545,6 @@
 	  return checkboxes ? /*#__PURE__*/React.createElement(CheckboxField, {
 	    onChange: onChange,
 	    label: LWR,
-	    color: color,
 	    qElemNumber: qElemNumber,
 	    isSelected: isSelected,
 	    dense: dense,
@@ -22452,7 +22553,8 @@
 	    showGray: showGray,
 	    isSingleSelect: isSingleSelect,
 	    checkboxes: checkboxes,
-	    valueTextAlign: valueTextAlign
+	    valueTextAlign: valueTextAlign,
+	    styles: styles
 	  }) : LWR;
 	}
 
@@ -22460,7 +22562,6 @@
 	  let {
 	    onChange,
 	    label,
-	    color,
 	    qElemNumber,
 	    isSelected,
 	    dense,
@@ -22469,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,
@@ -22483,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,
@@ -23036,7 +23137,9 @@
 	    sizes,
 	    translator,
 	    showSearch,
-	    isModal
+	    isModal,
+	    contentFontStyle,
+	    styles
 	  } = data;
 	  const {
 	    dense = false,
@@ -23047,7 +23150,7 @@
 	    itemPadding
 	  } = sizes;
 	  let cellIndex;
-	  let styles;
+	  let styleOverrides;
 	  const count = {
 	    max: null,
 	    currentIndex: null
@@ -23063,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
@@ -23072,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);
@@ -23162,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,
@@ -23170,6 +23274,7 @@
 	    sizes: sizes,
 	    frequencyMode: deducedFrequencyMode,
 	    freqHitsValue: freqHitsValue,
+	    contentFontStyle: contentFontStyle,
 	    "data-testid": "listbox.item"
 	  }, /*#__PURE__*/React.createElement(ItemGrid, {
 	    role: "row",
@@ -23216,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,
@@ -23236,7 +23339,8 @@
 	    showGray: showGray,
 	    isSingleSelect: isSingleSelect,
 	    checkboxes: checkboxes,
-	    valueTextAlign: valueTextAlign
+	    valueTextAlign: valueTextAlign,
+	    styles: styles
 	  })), freqIsAllowed && /*#__PURE__*/React.createElement(Frequency, {
 	    cell: cell,
 	    checkboxes: checkboxes,
@@ -24816,7 +24920,8 @@
 	    freqIsAllowed,
 	    translator,
 	    showSearch,
-	    isModal
+	    isModal,
+	    styles
 	  } = _ref;
 	  const {
 	    layoutOptions = {}
@@ -24870,7 +24975,8 @@
 	    direction,
 	    translator,
 	    showSearch,
-	    isModal
+	    isModal,
+	    styles
 	  });
 	  const List = _ref2 => {
 	    let {
@@ -25001,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 {
@@ -25027,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 {
@@ -25066,7 +25174,6 @@
 	}
 
 	function useListSizes(_ref) {
-	  var _theme$listBox;
 	  let {
 	    layout,
 	    width,
@@ -25075,7 +25182,7 @@
 	    count,
 	    freqIsAllowed,
 	    checkboxes,
-	    theme
+	    styles
 	  } = _ref;
 	  const {
 	    layoutOptions = {}
@@ -25090,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),
@@ -25611,7 +25718,6 @@
 	    model,
 	    app,
 	    constraints,
-	    theme,
 	    layout,
 	    selections,
 	    selectionState,
@@ -25638,7 +25744,8 @@
 	    renderedCallback,
 	    onCtrlF,
 	    showSearch,
-	    isModal
+	    isModal,
+	    styles
 	  } = _ref;
 	  const {
 	    translator: translatorDynamic
@@ -25794,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.
@@ -25909,7 +26016,8 @@
 	    freqIsAllowed,
 	    translator: translatorDynamic,
 	    showSearch,
-	    isModal
+	    isModal,
+	    styles
 	  });
 	  const {
 	    columnWidth,
@@ -26285,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,
@@ -26604,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'
 	  };
 	});
@@ -26635,7 +26745,8 @@
 	    wildCardSearch = false,
 	    searchEnabled,
 	    direction,
-	    hide
+	    hide,
+	    styles
 	  } = _ref3;
 	  const {
 	    translator
@@ -26772,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'
 	    })),
@@ -27236,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,
@@ -27252,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);
@@ -27291,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)) {
@@ -27394,6 +27617,7 @@
 	    item: true,
 	    ref: searchContainerRef
 	  }, /*#__PURE__*/React.createElement(ListBoxSearch, {
+	    styles: styles,
 	    visible: true,
 	    model: model,
 	    listCount: listCount,
@@ -27412,7 +27636,7 @@
 	    direction: "ltr",
 	    onSetListCount: c => setListCount(c),
 	    onCtrlF: onCtrlF,
-	    theme: theme
+	    styles: styles
 	  }))));
 	}
 
@@ -27696,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,
@@ -27874,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,
@@ -28791,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 {
@@ -28903,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'
@@ -28938,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 => {
@@ -28967,7 +29170,7 @@
 	    app,
 	    direction,
 	    frequencyMode,
-	    checkboxes,
+	    checkboxes: checkboxesOption,
 	    search = true,
 	    focusSearch = false,
 	    rangeSelect = true,
@@ -28982,7 +29185,8 @@
 	    scrollState = undefined,
 	    renderedCallback,
 	    toolbar = true,
-	    isPopover = false
+	    isPopover = false,
+	    components
 	  } = options;
 
 	  // Hook that will trigger update when used in useEffects.
@@ -29006,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
 	  });
@@ -29227,6 +29439,7 @@
 	    direction: "column",
 	    gap: 0,
 	    containerPadding: containerPadding,
+	    styles: styles,
 	    style: {
 	      height: '100%',
 	      flexFlow: 'column nowrap'
@@ -29272,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({
@@ -29302,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,
@@ -29317,7 +29532,6 @@
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
 	      app: app,
-	      theme: theme,
 	      constraints: constraints,
 	      layout: layout,
 	      selections: selections,
@@ -29350,7 +29564,8 @@
 	      },
 	      renderedCallback: renderedCallback,
 	      onCtrlF: onCtrlF,
-	      isModal: isModalMode
+	      isModal: isModalMode,
+	      styles: styles
 	    });
 	  })))));
 	}
@@ -29907,7 +30122,8 @@
 	    close: handleCloseShowState,
 	    fieldName: fieldIdentifier,
 	    stateName: stateName,
-	    autoFocus: options.autoFocus
+	    autoFocus: options.autoFocus,
+	    components: options.components
 	  });
 	}
 
@@ -37812,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
@@ -38234,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.
 	           *