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

package/core/esm/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.
 */
@@ -3950,7 +3950,11 @@ function deprecatedPropType(validator, reason) {
 }
 
 function isMuiElement(element, muiNames) {
-  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+  var _muiName, _element$type;
+  return /*#__PURE__*/React.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) {
@@ -3989,6 +3993,13 @@ function setRef(ref, value) {
   }
 }
 
+/**
+ * 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' ? React.useLayoutEffect : React.useEffect;
 var useEnhancedEffect$1 = useEnhancedEffect;
 
@@ -4053,7 +4064,8 @@ function useControlled({
 }
 
 /**
- * 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) {
@@ -5658,7 +5670,7 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @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
@@ -6283,10 +6295,20 @@ const width = style$1({
 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[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);
@@ -6822,40 +6844,48 @@ const getStyleOverrides = (name, theme) => {
   }
   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) {
@@ -6881,6 +6911,29 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
+const muiStyledFunctionResolver = ({
+  styledArg,
+  props,
+  defaultTheme,
+  themeId
+}) => {
+  const resolvedStyles = styledArg(_extends$2({}, props, {
+    theme: resolveTheme(_extends$2({}, 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,
@@ -6940,16 +6993,61 @@ function createStyled(input = {}) {
         // 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$2({}, props, {
-            theme: resolveTheme(_extends$2({}, 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$2({}, props, {
@@ -6975,7 +7073,7 @@ function createStyled(input = {}) {
             defaultTheme,
             themeId
           }));
-          return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+          return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
       if (!skipSx) {
@@ -6987,18 +7085,6 @@ function createStyled(input = {}) {
         // 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$2({}, props, {
-          theme: resolveTheme(_extends$2({}, props, {
-            defaultTheme,
-            themeId
-          }))
-        }));
       }
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
       if (tag.muiName) {
@@ -8206,7 +8292,9 @@ const light = {
     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',
@@ -8240,9 +8328,13 @@ const light = {
       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)',
@@ -8270,7 +8362,9 @@ const dark = {
     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)',
@@ -8301,9 +8395,13 @@ const dark = {
       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)',
@@ -8451,7 +8549,7 @@ function create$3(definition) {
   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', ''));
 });
@@ -8712,7 +8810,7 @@ function boot(_ref2) {
   const appRef = React__default.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) {
@@ -8837,10 +8935,6 @@ function useSessionModel(definition, app) {
   const [modelStore] = useModelStore();
   const [rpcRequestSessionModelStore] = useRpcRequestSessionModelStore();
   const [model, setModel] = useState$1();
-  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];
   }
@@ -8850,9 +8944,9 @@ function useSessionModel(definition, app) {
     }
     // 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;
@@ -9916,6 +10010,9 @@ const frequencyTextNone = '-';
 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 => {
@@ -9962,17 +10059,30 @@ const getMaxFreqWidth = _ref2 => {
 };
 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
     }
   };
 };
@@ -9985,9 +10095,8 @@ const ellipsis = {
 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,
@@ -9997,8 +10106,21 @@ const RowColRoot = styled$1('div', {
     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")
@@ -10016,7 +10138,8 @@ const RowColRoot = styled$1('div', {
     },
     ["& .".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),
@@ -10025,10 +10148,11 @@ const RowColRoot = styled$1('div', {
     ["& .".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,
@@ -10045,8 +10169,9 @@ const RowColRoot = styled$1('div', {
       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
@@ -10080,32 +10205,32 @@ const RowColRoot = styled$1('div', {
       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({
@@ -10133,7 +10258,7 @@ const RowColRoot = styled$1('div', {
     ["& .".concat(rowColClasses.bar)]: {
       height: dense ? '16px' : '20px',
       position: 'absolute',
-      zIndex: '-1',
+      zIndex: 1,
       alignSelf: 'center',
       left: barPadPx,
       width: "calc(100% - ".concat(barPadPx * 2, "px)"),
@@ -10148,7 +10273,6 @@ const RowColRoot = styled$1('div', {
       }
     },
     ["& .".concat(rowColClasses.barSelected)]: {
-      zIndex: '0',
       '& .bar-filled': {
         opacity: '30%',
         background: theme.palette.background.lighter
@@ -10160,8 +10284,9 @@ const RowColRoot = styled$1('div', {
     },
     ["& .".concat(rowColClasses.barSelectedWithCheckbox)]: {
       '& .bar-filled': {
-        background: '#BFE5D0',
-        borderColor: '#BFE5D0'
+        opacity: '30%',
+        background: selectStyle.background || '#BFE5D0',
+        borderColor: selectStyle.background || '#BFE5D0'
       }
     },
     ["& .".concat(rowColClasses.excludedTextWithCheckbox)]: {
@@ -10184,9 +10309,12 @@ const classes$b = {
   checkbox: "".concat(PREFIX$b, "-checkbox"),
   dense: "".concat(PREFIX$b, "-dense")
 };
-const StyledCheckbox = styled$1(Checkbox)(_ref => {
+const StyledCheckbox = styled$1(Checkbox, {
+  shouldForwardProp: p => p !== 'styles'
+})(_ref => {
   let {
-    theme
+    theme,
+    styles
   } = _ref;
   return {
     ["& .".concat(classes$b.cbIcon)]: {
@@ -10202,7 +10330,7 @@ const StyledCheckbox = styled$1(Checkbox)(_ref => {
     },
     ["& .".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',
@@ -10251,6 +10379,7 @@ function ListboxCheckbox(_ref2) {
     label,
     dense,
     excluded,
+    styles,
     showGray = true,
     dataN
   } = _ref2;
@@ -10268,7 +10397,8 @@ function ListboxCheckbox(_ref2) {
     icon: getIcon(classes$b, showGray, excluded),
     checkedIcon: /*#__PURE__*/React__default.createElement("span", {
       className: classes$b.cbIconChecked
-    })
+    }),
+    styles: styles
   });
 }
 
@@ -10320,7 +10450,6 @@ function ListBoxRadioButton(_ref2) {
 function ValueField(_ref) {
   let {
     label,
-    color,
     dense,
     showGray = true,
     checkboxes,
@@ -10334,7 +10463,6 @@ function ValueField(_ref) {
       cell,
       checkboxes
     }) && rowColClasses.excludedTextWithCheckbox]),
-    color: color,
     align: valueTextAlign,
     dir: "auto"
   }, /*#__PURE__*/React__default.createElement("span", null, label));
@@ -10368,7 +10496,6 @@ function CheckboxField(_ref) {
   let {
     onChange,
     label,
-    color,
     qElemNumber,
     isSelected,
     dense,
@@ -10377,7 +10504,8 @@ function CheckboxField(_ref) {
     showGray,
     isSingleSelect,
     checkboxes,
-    valueTextAlign
+    valueTextAlign,
+    styles
   } = _ref;
   const cb = /*#__PURE__*/React__default.createElement(ListboxCheckbox, {
     onChange: onChange,
@@ -10387,7 +10515,8 @@ function CheckboxField(_ref) {
     excluded: isExcluded(cell),
     isGridCol: isGridCol,
     showGray: showGray,
-    dataN: qElemNumber
+    dataN: qElemNumber,
+    styles: styles
   });
   const rb = /*#__PURE__*/React__default.createElement(ListBoxRadioButton, {
     onChange: onChange,
@@ -10397,12 +10526,10 @@ function CheckboxField(_ref) {
     dataN: qElemNumber
   });
   return /*#__PURE__*/React__default.createElement(FormControlLabel, {
-    color: color,
     control: isSingleSelect ? rb : cb,
     className: rowColClasses.checkboxLabel,
     label: /*#__PURE__*/React__default.createElement(LabelTag, {
       label: label,
-      color: color,
       dense: dense,
       showGray: showGray,
       checkboxes: checkboxes,
@@ -10441,13 +10568,13 @@ function FieldWithRanges(_ref3) {
     checkboxes,
     dense,
     showGray,
-    color,
     qElemNumber,
     isSelected,
     cell,
     isGridCol,
     isSingleSelect,
-    valueTextAlign
+    valueTextAlign,
+    styles
   } = _ref3;
   const LWR = /*#__PURE__*/React__default.createElement(LabelsWithRanges, {
     labels: labels,
@@ -10458,7 +10585,6 @@ function FieldWithRanges(_ref3) {
   return checkboxes ? /*#__PURE__*/React__default.createElement(CheckboxField, {
     onChange: onChange,
     label: LWR,
-    color: color,
     qElemNumber: qElemNumber,
     isSelected: isSelected,
     dense: dense,
@@ -10467,7 +10593,8 @@ function FieldWithRanges(_ref3) {
     showGray: showGray,
     isSingleSelect: isSingleSelect,
     checkboxes: checkboxes,
-    valueTextAlign: valueTextAlign
+    valueTextAlign: valueTextAlign,
+    styles: styles
   }) : LWR;
 }
 
@@ -10475,7 +10602,6 @@ function Field(_ref) {
   let {
     onChange,
     label,
-    color,
     qElemNumber,
     isSelected,
     dense,
@@ -10484,12 +10610,12 @@ function Field(_ref) {
     showGray,
     isSingleSelect,
     checkboxes,
-    valueTextAlign
+    valueTextAlign,
+    styles
   } = _ref;
   return checkboxes ? /*#__PURE__*/React__default.createElement(CheckboxField, {
     onChange: onChange,
     label: label,
-    color: color,
     qElemNumber: qElemNumber,
     isSelected: isSelected,
     dense: dense,
@@ -10498,10 +10624,10 @@ function Field(_ref) {
     showGray: showGray,
     isSingleSelect: isSingleSelect,
     checkboxes: checkboxes,
-    valueTextAlign: valueTextAlign
+    valueTextAlign: valueTextAlign,
+    styles: styles
   }) : /*#__PURE__*/React__default.createElement(ValueField, {
     label: label,
-    color: color,
     dense: dense,
     showGray: true,
     checkboxes: checkboxes,
@@ -10757,13 +10883,13 @@ const KEYS = Object.freeze({
 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;
 };
 
@@ -10945,18 +11071,18 @@ function getRowsKeyboardNavigation(_ref) {
       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) {
@@ -11051,7 +11177,9 @@ function RowColumn(_ref) {
     sizes,
     translator,
     showSearch,
-    isModal
+    isModal,
+    contentFontStyle,
+    styles
   } = data;
   const {
     dense = false,
@@ -11062,7 +11190,7 @@ function RowColumn(_ref) {
     itemPadding
   } = sizes;
   let cellIndex;
-  let styles;
+  let styleOverrides;
   const count = {
     max: null,
     currentIndex: null
@@ -11078,7 +11206,7 @@ function RowColumn(_ref) {
       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
@@ -11087,7 +11215,7 @@ function RowColumn(_ref) {
     cellIndex = index;
     count.max = listCount;
     count.currentIndex = index;
-    styles = _objectSpread2({}, style);
+    styleOverrides = _objectSpread2({}, style);
   }
   cellIndex += dataOffset;
   const [rowRef, setRowRef] = useState$1(null);
@@ -11177,7 +11305,8 @@ function RowColumn(_ref) {
   return /*#__PURE__*/React__default.createElement(RowColRoot$1, {
     className: rowColClasses.barContainer,
     checkboxes: checkboxes,
-    style: styles,
+    style: styleOverrides,
+    styles: styles,
     isGridCol: isGridCol,
     isGridMode: dataLayout === 'grid',
     dense: dense,
@@ -11185,6 +11314,7 @@ function RowColumn(_ref) {
     sizes: sizes,
     frequencyMode: deducedFrequencyMode,
     freqHitsValue: freqHitsValue,
+    contentFontStyle: contentFontStyle,
     "data-testid": "listbox.item"
   }, /*#__PURE__*/React__default.createElement(ItemGrid, {
     role: "row",
@@ -11231,18 +11361,16 @@ function RowColumn(_ref) {
     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__default.createElement(Field$1, {
     onChange: onChange,
     label: label,
-    color: "inherit",
     qElemNumber: cell.qElemNumber,
     isSelected: isSelected,
     dense: dense,
@@ -11251,7 +11379,8 @@ function RowColumn(_ref) {
     showGray: showGray,
     isSingleSelect: isSingleSelect,
     checkboxes: checkboxes,
-    valueTextAlign: valueTextAlign
+    valueTextAlign: valueTextAlign,
+    styles: styles
   })), freqIsAllowed && /*#__PURE__*/React__default.createElement(Frequency, {
     cell: cell,
     checkboxes: checkboxes,
@@ -12831,7 +12960,8 @@ function getListBoxComponents(_ref) {
     freqIsAllowed,
     translator,
     showSearch,
-    isModal
+    isModal,
+    styles
   } = _ref;
   const {
     layoutOptions = {}
@@ -12885,7 +13015,8 @@ function getListBoxComponents(_ref) {
     direction,
     translator,
     showSearch,
-    isModal
+    isModal,
+    styles
   });
   const List = _ref2 => {
     let {
@@ -13016,6 +13147,7 @@ function calculateColumnMode(_ref) {
   } 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 {
@@ -13042,6 +13174,7 @@ function calculateRowMode(_ref) {
   } else {
     columnCount = Math.min(listCount, maxColumns, autoColumnCount);
   }
+  columnCount = Math.max(columnCount, 1);
   const columnWidth = innerWidth / columnCount;
   const rowCount = Math.ceil(listCount / columnCount);
   return {
@@ -13081,7 +13214,6 @@ function getMeasureText(layoutOrNumber) {
 }
 
 function useListSizes(_ref) {
-  var _theme$listBox;
   let {
     layout,
     width,
@@ -13090,7 +13222,7 @@ function useListSizes(_ref) {
     count,
     freqIsAllowed,
     checkboxes,
-    theme
+    styles
   } = _ref;
   const {
     layoutOptions = {}
@@ -13105,7 +13237,7 @@ function useListSizes(_ref) {
   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),
@@ -13137,9 +13269,8 @@ function useListSizes(_ref) {
   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.
@@ -13777,7 +13908,6 @@ function ListBox(_ref) {
     model,
     app,
     constraints,
-    theme,
     layout,
     selections,
     selectionState,
@@ -13804,7 +13934,8 @@ function ListBox(_ref) {
     renderedCallback,
     onCtrlF,
     showSearch,
-    isModal
+    isModal,
+    styles
   } = _ref;
   const {
     translator: translatorDynamic
@@ -13867,7 +13998,7 @@ function ListBox(_ref) {
   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 = useCallback(index => {
     if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
@@ -13960,7 +14091,7 @@ function ListBox(_ref) {
     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.
@@ -14075,7 +14206,8 @@ function ListBox(_ref) {
     freqIsAllowed,
     translator: translatorDynamic,
     showSearch,
-    isModal
+    isModal,
+    styles
   });
   const {
     columnWidth,
@@ -14451,7 +14583,7 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
   }), /*#__PURE__*/React__default.createElement(MenuList, {
     id: "moreMenuList"
   }, actions.map((item, ix) =>
-  /*#__PURE__*/
+  
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(MoreItem, {
     key: ix,
@@ -14620,7 +14752,7 @@ function ActionsToolbar(_ref3) {
     actionsRefMock = null,
     // for testing
     direction = 'ltr',
-    autoConfirm
+    autoConfirm = false
   } = _ref3;
   const defaultSelectionActions = useDefaultSelectionActions(selections);
   const {
@@ -14667,14 +14799,7 @@ function ActionsToolbar(_ref3) {
     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;
@@ -14751,13 +14876,15 @@ function ActionsToolbar(_ref3) {
     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;
@@ -14775,22 +14902,24 @@ var SearchIcon = (props => SvgIcon$2(search(props)));
 
 const TREE_PATH = '/qListObjectDef';
 const WILDCARD = '**';
-const StyledInputAdornment = styled$1(InputAdornment)(_ref => {
-  var _theme$listBox;
+const StyledInputAdornment = styled$1(InputAdornment, {
+  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)(_ref2 => {
-  var _theme$listBox2;
+const StyledOutlinedInput = styled$1(OutlinedInput, {
+  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'
   };
 });
@@ -14806,7 +14935,8 @@ function ListBoxSearch(_ref3) {
     wildCardSearch = false,
     searchEnabled,
     direction,
-    hide
+    hide,
+    styles
   } = _ref3;
   const {
     translator
@@ -14888,7 +15018,7 @@ function ListBoxSearch(_ref3) {
   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 {
@@ -14914,7 +15044,7 @@ function ListBoxSearch(_ref3) {
             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');
             });
           }
@@ -14943,8 +15073,10 @@ function ListBoxSearch(_ref3) {
     return null;
   }
   return /*#__PURE__*/React__default.createElement(StyledOutlinedInput, {
+    styles: styles,
     startAdornment: /*#__PURE__*/React__default.createElement(StyledInputAdornment, {
-      position: "start"
+      position: "start",
+      styles: styles
     }, /*#__PURE__*/React__default.createElement(SearchIcon, {
       size: dense ? 'small' : 'normal'
     })),
@@ -15223,12 +15355,12 @@ const getClickOutFuncs = _ref3 => {
     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);
     }
   };
 };
@@ -15353,7 +15485,7 @@ function selectionState() {
       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;
       }
     },
@@ -15407,6 +15539,104 @@ function hasSelections(layout) {
   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,
@@ -15423,7 +15653,9 @@ function ListBoxPopover(_ref) {
     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);
@@ -15462,13 +15694,23 @@ function ListBoxPopover(_ref) {
     model.unlock('/qListObjectDef');
   }, [model]);
   const {
-    translator
+    translator,
+    themeApi
   } = useContext(InstanceContext);
   const moreAlignTo = useRef();
   const containerRef = useRef();
   const [selections] = useObjectSelections(app, model, containerRef);
   const [layout] = useLayout$1(model);
   const [selectionState$1] = useState$1(() => selectionState());
+  const {
+    checkboxes = checkboxesOption
+  } = layout || {};
+  const styles = getStyles({
+    themeApi,
+    theme,
+    components,
+    checkboxes
+  });
   useEffect$1(() => {
     if (selections && open) {
       if (!selections.isModal(model)) {
@@ -15493,7 +15735,7 @@ function ListBoxPopover(_ref) {
   });
   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__default.createElement(Popover, {
@@ -15565,6 +15807,7 @@ function ListBoxPopover(_ref) {
     item: true,
     ref: searchContainerRef
   }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
+    styles: styles,
     visible: true,
     model: model,
     listCount: listCount,
@@ -15583,7 +15826,7 @@ function ListBoxPopover(_ref) {
     direction: "ltr",
     onSetListCount: c => setListCount(c),
     onCtrlF: onCtrlF,
-    theme: theme
+    styles: styles
   }))));
 }
 
@@ -15867,7 +16110,7 @@ function MultiState(_ref2) {
     variant: "contained",
     fullWidth: true
   }, clearAllStates)), field.states.map((s, ix) =>
-  /*#__PURE__*/
+  
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(ListItem, {
     key: ix,
@@ -16045,7 +16288,7 @@ function More(_ref2) {
   }, /*#__PURE__*/React__default.createElement(List, {
     dense: true
   }, items.map((s, ix) =>
-  /*#__PURE__*/
+  
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(ListItem, {
     key: ix,
@@ -16746,12 +16989,12 @@ const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
 var DrillDownIcon = (props => SvgIcon$2(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');
   });
 }
@@ -16799,13 +17042,13 @@ function useTempKeyboard(_ref) {
       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;
@@ -16847,7 +17090,7 @@ function getListboxContainerKeyboardNavigation(_ref) {
       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 => {
@@ -16962,26 +17205,6 @@ function getListboxContainerKeyboardNavigation(_ref) {
   };
 }
 
-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 {
@@ -17010,11 +17233,9 @@ function getListboxActionProps(_ref) {
     isLocked,
     listboxSelectionToolbarItems,
     selections,
-    keyboard,
-    autoConfirm
+    keyboard
   } = _ref;
   return {
-    autoConfirm,
     show: showToolbar && !isDetached,
     popover: {
       show: showToolbar && isDetached,
@@ -17035,10 +17256,10 @@ function getListboxActionProps(_ref) {
       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();
       }
     }
   };
@@ -17076,16 +17297,16 @@ const classes$4 = {
   listboxWrapper: "".concat(PREFIX$4, "-listboxWrapper")
 };
 const StyledGrid$3 = styled$1(Grid, {
-  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'
@@ -17111,15 +17332,14 @@ const StyledGrid$3 = styled$1(Grid, {
   };
 });
 const Title = styled$1(Typography)(_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 => {
@@ -17140,7 +17360,7 @@ function ListBoxInline(_ref4) {
     app,
     direction,
     frequencyMode,
-    checkboxes,
+    checkboxes: checkboxesOption,
     search = true,
     focusSearch = false,
     rangeSelect = true,
@@ -17155,7 +17375,8 @@ function ListBoxInline(_ref4) {
     scrollState = undefined,
     renderedCallback,
     toolbar = true,
-    isPopover = false
+    isPopover = false,
+    components
   } = options;
 
   // Hook that will trigger update when used in useEffects.
@@ -17179,7 +17400,15 @@ function ListBoxInline(_ref4) {
     themeApi,
     constraints
   } = 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
   });
@@ -17320,10 +17549,6 @@ function ListBoxInline(_ref4) {
   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;
@@ -17334,17 +17559,18 @@ function ListBoxInline(_ref4) {
       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';
@@ -17392,7 +17618,7 @@ function ListBoxInline(_ref4) {
     }
   }));
   if (isInvalid) {
-    renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
+    renderedCallback === null || renderedCallback === void 0 || renderedCallback();
   }
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
     direction: direction
@@ -17403,9 +17629,9 @@ function ListBoxInline(_ref4) {
     direction: "column",
     gap: 0,
     containerPadding: containerPadding,
+    styles: styles,
     style: {
       height: '100%',
-      minHeight: "".concat(minHeight, "px"),
       flexFlow: 'column nowrap'
     },
     onKeyDown: handleKeyDown,
@@ -17449,7 +17675,8 @@ function ListBoxInline(_ref4) {
     variant: "h6",
     noWrap: true,
     ref: titleRef,
-    title: layout.title
+    title: layout.title,
+    styles: styles
   }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
@@ -17460,7 +17687,7 @@ function ListBoxInline(_ref4) {
     direction: "column",
     style: {
       height: '100%',
-      minHeight: '50px'
+      minHeight: DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH
     },
     role: "region",
     "aria-label": translator.get('Listbox.ResultFilterLabel')
@@ -17479,7 +17706,8 @@ function ListBoxInline(_ref4) {
     wildCardSearch: wildCardSearch,
     searchEnabled: searchEnabled,
     direction: direction,
-    hide: showSearchIcon && onShowSearch
+    hide: showSearchIcon && onShowSearch,
+    styles: styles
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true,
@@ -17494,7 +17722,6 @@ function ListBoxInline(_ref4) {
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
       app: app,
-      theme: theme,
       constraints: constraints,
       layout: layout,
       selections: selections,
@@ -17527,7 +17754,8 @@ function ListBoxInline(_ref4) {
       },
       renderedCallback: renderedCallback,
       onCtrlF: onCtrlF,
-      isModal: isModalMode
+      isModal: isModalMode,
+      styles: styles
     });
   })))));
 }
@@ -17675,7 +17903,7 @@ const listdef = {
    */
   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
    */
@@ -18084,7 +18312,8 @@ function ListBoxPopoverWrapper(_ref) {
     close: handleCloseShowState,
     fieldName: fieldIdentifier,
     stateName: stateName,
-    autoFocus: options.autoFocus
+    autoFocus: options.autoFocus,
+    components: options.components
   });
 }
 
@@ -25989,6 +26218,37 @@ const DEFAULT_SNAPSHOT_CONFIG = /** @lends SnapshotConfiguration */{
   }
 };
 
+/**
+ * @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
@@ -26411,6 +26671,7 @@ function nuked() {
            * @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.
            *