@nebula.js/stardust 4.5.0 → 4.6.0

package/core/esm/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.
 */
@@ -708,26 +708,26 @@ var runtime = {exports: {}};
   }
 })(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);
@@ -5670,7 +5670,7 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @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
@@ -6844,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) {
@@ -6903,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,
@@ -6962,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, {
@@ -6997,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) {
@@ -7009,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) {
@@ -8228,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',
@@ -8262,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)',
@@ -8292,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)',
@@ -8323,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)',
@@ -8473,7 +8549,7 @@ function create$3(definition) {
   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', ''));
 });
@@ -8734,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" );
+  element.setAttribute('data-nebulajs-version', "4.6.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -8859,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];
   }
@@ -8872,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;
@@ -9987,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
     }
   };
 };
@@ -10010,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,
@@ -10022,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")
@@ -10041,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),
@@ -10050,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,
@@ -10070,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
@@ -10105,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({
@@ -10158,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)"),
@@ -10173,7 +10273,6 @@ const RowColRoot = styled$1('div', {
       }
     },
     ["& .".concat(rowColClasses.barSelected)]: {
-      zIndex: '0',
       '& .bar-filled': {
         opacity: '30%',
         background: theme.palette.background.lighter
@@ -10185,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)]: {
@@ -10209,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)]: {
@@ -10227,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',
@@ -10276,6 +10379,7 @@ function ListboxCheckbox(_ref2) {
     label,
     dense,
     excluded,
+    styles,
     showGray = true,
     dataN
   } = _ref2;
@@ -10293,7 +10397,8 @@ function ListboxCheckbox(_ref2) {
     icon: getIcon(classes$b, showGray, excluded),
     checkedIcon: /*#__PURE__*/React__default.createElement("span", {
       className: classes$b.cbIconChecked
-    })
+    }),
+    styles: styles
   });
 }
 
@@ -10345,7 +10450,6 @@ function ListBoxRadioButton(_ref2) {
 function ValueField(_ref) {
   let {
     label,
-    color,
     dense,
     showGray = true,
     checkboxes,
@@ -10359,7 +10463,6 @@ function ValueField(_ref) {
       cell,
       checkboxes
     }) && rowColClasses.excludedTextWithCheckbox]),
-    color: color,
     align: valueTextAlign,
     dir: "auto"
   }, /*#__PURE__*/React__default.createElement("span", null, label));
@@ -10393,7 +10496,6 @@ function CheckboxField(_ref) {
   let {
     onChange,
     label,
-    color,
     qElemNumber,
     isSelected,
     dense,
@@ -10402,7 +10504,8 @@ function CheckboxField(_ref) {
     showGray,
     isSingleSelect,
     checkboxes,
-    valueTextAlign
+    valueTextAlign,
+    styles
   } = _ref;
   const cb = /*#__PURE__*/React__default.createElement(ListboxCheckbox, {
     onChange: onChange,
@@ -10412,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,
@@ -10422,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,
@@ -10466,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,
@@ -10483,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,
@@ -10492,7 +10593,8 @@ function FieldWithRanges(_ref3) {
     showGray: showGray,
     isSingleSelect: isSingleSelect,
     checkboxes: checkboxes,
-    valueTextAlign: valueTextAlign
+    valueTextAlign: valueTextAlign,
+    styles: styles
   }) : LWR;
 }
 
@@ -10500,7 +10602,6 @@ function Field(_ref) {
   let {
     onChange,
     label,
-    color,
     qElemNumber,
     isSelected,
     dense,
@@ -10509,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,
@@ -10523,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,
@@ -11076,7 +11177,9 @@ function RowColumn(_ref) {
     sizes,
     translator,
     showSearch,
-    isModal
+    isModal,
+    contentFontStyle,
+    styles
   } = data;
   const {
     dense = false,
@@ -11087,7 +11190,7 @@ function RowColumn(_ref) {
     itemPadding
   } = sizes;
   let cellIndex;
-  let styles;
+  let styleOverrides;
   const count = {
     max: null,
     currentIndex: null
@@ -11103,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
@@ -11112,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);
@@ -11202,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,
@@ -11210,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",
@@ -11256,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,
@@ -11276,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,
@@ -12856,7 +12960,8 @@ function getListBoxComponents(_ref) {
     freqIsAllowed,
     translator,
     showSearch,
-    isModal
+    isModal,
+    styles
   } = _ref;
   const {
     layoutOptions = {}
@@ -12910,7 +13015,8 @@ function getListBoxComponents(_ref) {
     direction,
     translator,
     showSearch,
-    isModal
+    isModal,
+    styles
   });
   const List = _ref2 => {
     let {
@@ -13041,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 {
@@ -13067,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 {
@@ -13106,7 +13214,6 @@ function getMeasureText(layoutOrNumber) {
 }
 
 function useListSizes(_ref) {
-  var _theme$listBox;
   let {
     layout,
     width,
@@ -13115,7 +13222,7 @@ function useListSizes(_ref) {
     count,
     freqIsAllowed,
     checkboxes,
-    theme
+    styles
   } = _ref;
   const {
     layoutOptions = {}
@@ -13130,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),
@@ -13801,7 +13908,6 @@ function ListBox(_ref) {
     model,
     app,
     constraints,
-    theme,
     layout,
     selections,
     selectionState,
@@ -13828,7 +13934,8 @@ function ListBox(_ref) {
     renderedCallback,
     onCtrlF,
     showSearch,
-    isModal
+    isModal,
+    styles
   } = _ref;
   const {
     translator: translatorDynamic
@@ -13984,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.
@@ -14099,7 +14206,8 @@ function ListBox(_ref) {
     freqIsAllowed,
     translator: translatorDynamic,
     showSearch,
-    isModal
+    isModal,
+    styles
   });
   const {
     columnWidth,
@@ -14475,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,
@@ -14794,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'
   };
 });
@@ -14825,7 +14935,8 @@ function ListBoxSearch(_ref3) {
     wildCardSearch = false,
     searchEnabled,
     direction,
-    hide
+    hide,
+    styles
   } = _ref3;
   const {
     translator
@@ -14962,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'
     })),
@@ -15426,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,
@@ -15442,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);
@@ -15481,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)) {
@@ -15584,6 +15807,7 @@ function ListBoxPopover(_ref) {
     item: true,
     ref: searchContainerRef
   }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
+    styles: styles,
     visible: true,
     model: model,
     listCount: listCount,
@@ -15602,7 +15826,7 @@ function ListBoxPopover(_ref) {
     direction: "ltr",
     onSetListCount: c => setListCount(c),
     onCtrlF: onCtrlF,
-    theme: theme
+    styles: styles
   }))));
 }
 
@@ -15886,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,
@@ -16064,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,
@@ -16981,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 {
@@ -17093,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'
@@ -17128,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 => {
@@ -17157,7 +17360,7 @@ function ListBoxInline(_ref4) {
     app,
     direction,
     frequencyMode,
-    checkboxes,
+    checkboxes: checkboxesOption,
     search = true,
     focusSearch = false,
     rangeSelect = true,
@@ -17172,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.
@@ -17196,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
   });
@@ -17417,6 +17629,7 @@ function ListBoxInline(_ref4) {
     direction: "column",
     gap: 0,
     containerPadding: containerPadding,
+    styles: styles,
     style: {
       height: '100%',
       flexFlow: 'column nowrap'
@@ -17462,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({
@@ -17492,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,
@@ -17507,7 +17722,6 @@ function ListBoxInline(_ref4) {
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
       app: app,
-      theme: theme,
       constraints: constraints,
       layout: layout,
       selections: selections,
@@ -17540,7 +17754,8 @@ function ListBoxInline(_ref4) {
       },
       renderedCallback: renderedCallback,
       onCtrlF: onCtrlF,
-      isModal: isModalMode
+      isModal: isModalMode,
+      styles: styles
     });
   })))));
 }
@@ -18097,7 +18312,8 @@ function ListBoxPopoverWrapper(_ref) {
     close: handleCloseShowState,
     fieldName: fieldIdentifier,
     stateName: stateName,
-    autoFocus: options.autoFocus
+    autoFocus: options.autoFocus,
+    components: options.components
   });
 }
 
@@ -26002,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
@@ -26424,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.
            *