@nebula.js/stardust 4.7.0 → 4.8.1

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.7.0
+* @nebula.js/stardust v4.8.1
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -8,7 +8,7 @@ import * as React from 'react';
 import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, useContext, createElement, Component } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
-import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$4, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
+import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$4, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
 import styled$3 from '@emotion/styled';
 
 function getDefaultExportFromCjs (x) {
@@ -5670,7 +5670,7 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @mui/styled-engine v5.14.17
+ * @mui/styled-engine v5.14.18
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5718,7 +5718,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$f = ["values", "unit", "step"];
+const _excluded$g = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -5753,7 +5753,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$f);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$g);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -6751,7 +6751,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$e = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$f = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -6759,7 +6759,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$e);
+    other = _objectWithoutPropertiesLoose(options, _excluded$f);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -6799,7 +6799,7 @@ function useTheme$3(defaultTheme = systemDefaultTheme$1) {
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const _excluded$d = ["variant"];
+const _excluded$e = ["variant"];
 function isEmpty$2(string) {
   return string.length === 0;
 }
@@ -6813,7 +6813,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+    other = _objectWithoutPropertiesLoose(props, _excluded$e);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -6825,7 +6825,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$c = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$d = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty$1(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -6962,7 +6962,7 @@ function createStyled(input = {}) {
         // For more details: https://github.com/mui/material-ui/pull/37908
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$c);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$d);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -7441,7 +7441,7 @@ function ThemeProvider$1(props) {
   });
 }
 
-const _excluded$b = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+const _excluded$c = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
   _excluded2$1 = ["type", "mode"];
 function adaptV4Theme(inputTheme) {
   const {
@@ -7452,7 +7452,7 @@ function adaptV4Theme(inputTheme) {
       props = {},
       styleOverrides = {}
     } = inputTheme,
-    other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$b);
+    other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$c);
   const theme = _extends$3({}, other, {
     components: {}
   });
@@ -7665,7 +7665,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$a = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$b = ["mode", "contrastThreshold", "tonalOffset"];
 const light$1 = {
   // The colors used to style the text.
   text: {
@@ -7834,7 +7834,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose$1(palette, _excluded$a);
+    other = _objectWithoutPropertiesLoose$1(palette, _excluded$b);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -7933,7 +7933,7 @@ function createPalette(palette) {
   return paletteOutput;
 }
 
-const _excluded$9 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$a = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round$1(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -7964,7 +7964,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose$1(_ref, _excluded$9);
+    other = _objectWithoutPropertiesLoose$1(_ref, _excluded$a);
   const coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
   const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$3({
@@ -8024,7 +8024,7 @@ function createShadow(...px) {
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$1 = shadows;
 
-const _excluded$8 = ["duration", "easing", "delay"];
+const _excluded$9 = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -8075,7 +8075,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options;
-      _objectWithoutPropertiesLoose$1(options, _excluded$8);
+      _objectWithoutPropertiesLoose$1(options, _excluded$9);
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
   return _extends$3({
@@ -8101,7 +8101,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$7 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$8 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -8109,7 +8109,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose$1(options, _excluded$7);
+    other = _objectWithoutPropertiesLoose$1(options, _excluded$8);
   if (options.vars) {
     throw new Error(formatMuiErrorMessage(18));
   }
@@ -8164,12 +8164,12 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
-const _excluded$6 = ["theme"];
+const _excluded$7 = ["theme"];
 function ThemeProvider(_ref) {
   let {
       theme: themeInput
     } = _ref,
-    props = _objectWithoutPropertiesLoose$1(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose$1(_ref, _excluded$7);
   const scopedTheme = themeInput[THEME_ID];
   return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$3({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
@@ -8551,7 +8551,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "d794" ;
+const NEBULA_VERSION_HASH = "cca9" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8812,7 +8812,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.7.0" );
+  element.setAttribute('data-nebulajs-version', "4.8.1" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -10015,6 +10015,7 @@ 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 GRID_ITEM_PADDING = 4;
 
 const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim();
 const getBarWidth = _ref => {
@@ -10030,6 +10031,7 @@ const getBarWidth = _ref => {
 };
 const getFrequencyText = qFrequency => qFrequency || frequencyTextNone;
 
+const _excluded$6 = ["backgroundColor"];
 const getFreqFlexBasis = _ref => {
   let {
     sizes,
@@ -10111,8 +10113,8 @@ const RowColRoot = styled$1('div', {
     freqHitsValue,
     styles
   } = _ref4;
-  const rowFontColor = styles.content.color;
-  const rowBackgroundColor = styles.content.backgroundColor;
+  const _styles$content = styles.content,
+    contentFontStyles = _objectWithoutProperties(_styles$content, _excluded$6);
   const selectStyle = getSelectedStyle({
     theme,
     styles,
@@ -10138,20 +10140,17 @@ const RowColRoot = styled$1('div', {
         outline: 'none'
       }
     },
-    ["& .".concat(rowColClasses.row)]: {
-      flexWrap: 'nowrap',
-      color: rowFontColor,
-      backgroundColor: rowBackgroundColor
-    },
+    ["& .".concat(rowColClasses.row)]: _objectSpread2({
+      flexWrap: 'nowrap'
+    }, styles.content),
     ["& .".concat(rowColClasses.rowBorderBottom)]: {
       borderBottom: isGridCol ? 'none' : "1px solid ".concat(theme.palette.divider),
       borderLeft: isGridCol ? "1px solid ".concat(theme.palette.divider) : 'none'
     },
-    ["& .".concat(rowColClasses.column)]: {
+    ["& .".concat(rowColClasses.column)]: _objectSpread2({
       flexWrap: 'nowrap',
-      borderRight: "1px solid ".concat(theme.palette.divider),
-      color: rowFontColor
-    },
+      borderRight: "1px solid ".concat(theme.palette.divider)
+    }, styles.content),
     // The interior wrapper for all field content.
     ["& .".concat(rowColClasses.cell)]: {
       zIndex: 2,
@@ -10170,11 +10169,7 @@ const RowColRoot = styled$1('div', {
       lineHeight: '16px',
       userSelect: 'none',
       paddingRight: '1px'
-    }, ellipsis), {}, {
-      fontSize: styles.content.fontSize,
-      fontFamily: styles.content.fontFamily,
-      color: rowFontColor
-    }),
+    }, ellipsis), contentFontStyles),
     ["& .".concat(rowColClasses.labelDense)]: {
       fontSize: 12
     },
@@ -10208,7 +10203,7 @@ const RowColRoot = styled$1('div', {
       width: iconWidth,
       minWidth: iconWidth,
       maxWidth: iconWidth,
-      color: rowFontColor
+      color: contentFontStyles.color
     },
     // Selection styles (S=Selected, XS=ExcludedSelected, A=Alternative, X=Excluded).
     ["& .".concat(rowColClasses.S)]: _objectSpread2(_objectSpread2({}, selectStyle), {}, {
@@ -10695,7 +10690,8 @@ function getGridItemSizes(_ref) {
   let {
     dataLayout,
     layoutOrder,
-    itemPadding
+    itemPadding,
+    fillHeight
   } = _ref;
   // Simulate margin/padding by making the item smaller than its container.
   if (dataLayout === 'singleColumn') {
@@ -10707,14 +10703,14 @@ function getGridItemSizes(_ref) {
   switch (layoutOrder) {
     case 'row':
       return {
-        height: "calc(100% - ".concat(itemPadding, "px)"),
+        height: fillHeight ? '100%' : "calc(100% - ".concat(itemPadding, "px)"),
         width: "calc(100% - ".concat(2 * itemPadding, "px)"),
         position: 'absolute',
         left: 4
       };
     case 'column':
       return {
-        height: "calc(100% - ".concat(itemPadding, "px)"),
+        height: fillHeight ? '100%' : "calc(100% - ".concat(itemPadding, "px)"),
         width: "calc(100% - ".concat(2 * itemPadding, "px)"),
         position: 'absolute',
         left: 4
@@ -10725,21 +10721,23 @@ function getGridItemSizes(_ref) {
 }
 
 const ItemGrid = styled$1(Grid, {
-  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight', 'direction'].includes(prop)
+  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight', 'direction', 'fillHeight'].includes(prop)
 })(_ref => {
   let {
     dataLayout,
     layoutOrder,
     itemPadding,
     cellPaddingRight,
-    direction
+    direction,
+    fillHeight
   } = _ref;
   const att = "padding".concat(direction === 'rtl' ? 'Left' : 'Right');
   return {
     ["&.".concat(rowColClasses.fieldRoot)]: _objectSpread2(_objectSpread2({}, getGridItemSizes({
       dataLayout,
       layoutOrder,
-      itemPadding
+      itemPadding,
+      fillHeight
     })), {}, {
       [att]: cellPaddingRight ? '8px' : undefined
     })
@@ -11180,7 +11178,8 @@ function RowColumn(_ref) {
     showSearch,
     isModal,
     contentFontStyle,
-    styles
+    styles,
+    fillHeight
   } = data;
   const {
     dense = false,
@@ -11208,6 +11207,7 @@ function RowColumn(_ref) {
     }
     const padding = 0;
     styleOverrides = _objectSpread2(_objectSpread2({}, style), {}, {
+      height: fillHeight ? '100%' : style.height,
       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
@@ -11344,7 +11344,8 @@ function RowColumn(_ref) {
     onContextMenu: preventContextMenu,
     tabIndex: isFirstElement && keyboard.innerTabStops ? 0 : -1,
     "data-n": cell === null || cell === void 0 ? void 0 : cell.qElemNumber,
-    direction: direction
+    direction: direction,
+    fillHeight: fillHeight
   }, (cell === null || cell === void 0 ? void 0 : cell.qFrequency) && /*#__PURE__*/React__default.createElement(Histogram, {
     qFrequency: cell === null || cell === void 0 ? void 0 : cell.qFrequency,
     histogram: histogram,
@@ -12242,7 +12243,7 @@ function createListComponent(_ref) {
           scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
           return {
             isScrolling: true,
-            scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
+            scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
             scrollOffset: scrollOffset,
             scrollUpdateWasRequested: false
           };
@@ -12984,6 +12985,7 @@ function getListBoxComponents(_ref) {
     className: classes$9.styledScrollbars
   };
   const isLocked = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qLocked;
+  const fillHeight = listHeight <= itemHeight;
 
   // Item data common for List and Grid.
   const commonItemData = _objectSpread2(_objectSpread2({
@@ -13017,7 +13019,8 @@ function getListBoxComponents(_ref) {
     translator,
     showSearch,
     isModal,
-    styles
+    styles,
+    fillHeight
   });
   const List = _ref2 => {
     let {
@@ -13214,6 +13217,21 @@ function getMeasureText(layoutOrNumber) {
   return measureString;
 }
 
+function getItemHeight(_ref) {
+  let {
+    isGridMode,
+    dense
+  } = _ref;
+  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.
+    itemHeight += GRID_ITEM_PADDING;
+  }
+  return itemHeight;
+}
+
 function useListSizes(_ref) {
   let {
     layout,
@@ -13269,14 +13287,10 @@ function useListSizes(_ref) {
   let columnWidth;
   let rowCount;
   const isGridMode = dataLayout === 'grid';
-  const itemPadding = 4;
-  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.
-    itemHeight += itemPadding;
-  }
+  const itemHeight = getItemHeight({
+    isGridMode,
+    dense
+  });
   const listHeight = height !== null && height !== void 0 ? height : 8 * itemHeight;
   if (layoutOrder) {
     // Modify container width to achieve the exact design with 8px margins on each side (left and right).
@@ -13285,7 +13299,7 @@ function useListSizes(_ref) {
       overflowStyling = {
         overflowX: 'hidden'
       };
-      containerWidth += itemPadding * 2;
+      containerWidth += GRID_ITEM_PADDING * 2;
       ({
         rowCount,
         columnWidth,
@@ -13340,7 +13354,7 @@ function useListSizes(_ref) {
       row: maxRowCount,
       column: maxColumnCount
     },
-    itemPadding,
+    itemPadding: GRID_ITEM_PADDING,
     textWidth,
     freqMinWidth,
     freqMaxWidth
@@ -14507,7 +14521,7 @@ const StyledPopover$1 = styled$1(Popover)(_ref => {
   return {
     // Set here to allow clicking through the modals container
     pointerEvents: 'none',
-    ["& .".concat(classes$8.icon)]: {
+    ["& .".concat(classes$8.icon, " *")]: {
       color: theme.palette.text.primary
     }
   };
@@ -14565,6 +14579,12 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
     slotProps: {
       root: {
         className: ActionsToolbarMoreElement.className
+      },
+      paper: {
+        style: _objectSpread2({
+          pointerEvents: 'auto',
+          maxWidth: '250px'
+        }, popoverPaperStyle)
       }
     },
     anchorOrigin: {
@@ -14574,12 +14594,6 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
     transformOrigin: {
       vertical: 'top',
       horizontal: 'right'
-    },
-    PaperProps: {
-      style: _objectSpread2({
-        pointerEvents: 'auto',
-        maxWidth: '250px'
-      }, popoverPaperStyle)
     }
   }), /*#__PURE__*/React__default.createElement(MenuList, {
     id: "moreMenuList"
@@ -14903,30 +14917,53 @@ var SearchIcon = (props => SvgIcon$2(search(props)));
 
 const TREE_PATH = '/qListObjectDef';
 const WILDCARD = '**';
-const StyledInputAdornment = styled$1(InputAdornment, {
-  shouldForwardProp: p => p !== 'styles'
+const StyledOutlinedInput = styled$1(OutlinedInput, {
+  shouldForwardProp: p => !['styles', 'dense', 'isRtl'].includes(p)
 })(_ref => {
   let {
-    styles
+    theme,
+    styles,
+    dense,
+    isRtl
   } = _ref;
-  return {
-    color: styles.search.color
-  };
-});
-const StyledOutlinedInput = styled$1(OutlinedInput, {
-  shouldForwardProp: p => p !== 'styles'
-})(_ref2 => {
-  let {
-    styles
-  } = _ref2;
-  return {
+  let denseProps = {};
+  if (dense) {
+    denseProps = {
+      fontSize: 12,
+      paddingLeft: theme.spacing(1),
+      '& input': {
+        paddingTop: '5px',
+        paddingBottom: '5px'
+      }
+    };
+  }
+  return _objectSpread2({
     display: 'flex',
-    '& .MuiInputBase-root': {
+    border: 'none',
+    fontSize: 14,
+    borderRadius: 0,
+    backgroundColor: styles.search.backgroundColor,
+    paddingLeft: "".concat(CELL_PADDING_LEFT, "px"),
+    flexDirection: isRtl ? 'row-reverse' : 'row',
+    '& fieldset': {
+      borderColor: "".concat(styles.search.borderColor),
+      borderWidth: '1px 0 1px 0',
+      borderRadius: 0
+    },
+    '& .MuiInputBase-root': _objectSpread2({}, styles.search),
+    '& *': {
       color: styles.search.color
+    },
+    '& input': {
+      color: styles.search.color,
+      textAlign: isRtl ? 'right' : 'left'
+    },
+    '&.Mui-focused fieldset.OutlinedInput-notchedOutline': {
+      borderColor: "".concat(styles.search.highlightBorderColor, " !important")
     }
-  };
+  }, denseProps);
 });
-function ListBoxSearch(_ref3) {
+function ListBoxSearch(_ref2) {
   let {
     selections,
     selectionState,
@@ -14940,20 +14977,18 @@ function ListBoxSearch(_ref3) {
     direction,
     hide,
     styles
-  } = _ref3;
+  } = _ref2;
   const {
     translator
   } = useContext(InstanceContext);
   const [value, setValue] = useState$1('');
   const [wildcardOn, setWildcardOn] = useState$1(false);
   const inputRef = useRef();
-  const theme = useTheme$1();
   const {
     getStoreValue,
     setStoreValue
   } = useDataStore(model);
   const isRtl = direction === 'rtl';
-  const inpuTextAlign = isRtl ? 'right' : 'left';
   const cancel = () => selections.isActive() && selections.cancel();
   const abortSearch = async () => {
     if (!selections.isModal()) {
@@ -15077,37 +15112,14 @@ function ListBoxSearch(_ref3) {
   }
   return /*#__PURE__*/React__default.createElement(StyledOutlinedInput, {
     styles: styles,
-    startAdornment: /*#__PURE__*/React__default.createElement(StyledInputAdornment, {
-      position: "start",
-      styles: styles
+    dense: dense,
+    isRtl: isRtl,
+    startAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
+      position: "start"
     }, /*#__PURE__*/React__default.createElement(SearchIcon, {
       size: dense ? 'small' : 'normal'
     })),
     className: "search",
-    sx: [{
-      border: 'none',
-      fontSize: 14,
-      borderRadius: 0,
-      backgroundColor: 'transparent',
-      '& fieldset': {
-        border: "1px solid ".concat(theme.palette.divider),
-        borderWidth: '1px 0 1px 0',
-        borderRadius: 0
-      },
-      '&:hover': {
-        border: 'none'
-      },
-      paddingLeft: "".concat(CELL_PADDING_LEFT, "px")
-    }, dense && {
-      fontSize: 12,
-      paddingLeft: theme.spacing(1),
-      '& input': {
-        paddingTop: '5px',
-        paddingBottom: '5px'
-      }
-    }, {
-      flexDirection: isRtl ? 'row-reverse' : 'row'
-    }],
     inputRef: inputRef,
     size: "small",
     fullWidth: true,
@@ -15119,9 +15131,6 @@ function ListBoxSearch(_ref3) {
     autoFocus: autoFocus,
     inputProps: {
       tabIndex: keyboard.innerTabStops ? 0 : -1,
-      style: {
-        textAlign: "".concat(inpuTextAlign)
-      },
       'data-testid': 'search-input-field',
       'aria-label': translator.get('Listbox.Search.ScreenReaderInstructions')
     }
@@ -16319,7 +16328,7 @@ const {
  * @class
  * @classdesc Class which provides color transformation functionality
  * @description This is a constructor.
- * @private This is a constructor.
+ * @private
  * @param {object} - Parameters to create a color from different notations
  * @example
  * // a few ways of instantiating a red color
@@ -17112,6 +17121,211 @@ class Color {
   }
 }
 
+const MULTI_REG = /,(?![^(]*\))/;
+const SINGLE_REG = /\s(?![^(]*\))/;
+const LENGTH_REG = /^[0-9]+[a-zA-Z%]+?$/;
+const PREDEFINED_STRINGS = ['none', 'inset', 'initial', 'inherit'];
+const isLength = v => v === '0' || LENGTH_REG.test(v);
+const getColor = singleShadowString => {
+  if (!singleShadowString) return undefined;
+  const parts = singleShadowString.split(SINGLE_REG).filter(part => !PREDEFINED_STRINGS.includes(part.toLowerCase()));
+  const last = parts.at(-1);
+  const color = last && !isLength(last) && !PREDEFINED_STRINGS.includes(last.toLowerCase()) ? last : undefined;
+  return color;
+};
+const getShadows = shadowString => {
+  if (!shadowString) return [];
+  return shadowString.split(MULTI_REG).map(s => s.trim());
+};
+
+/**
+ * Combine box shadow with box shadow color.
+ * @private
+ * @param {string} boxShadow - Box shadow which may include color
+ * @param {string} themeBoxShadow - Box shadow from theme which may include color
+ * @param {string | undefined} boxShadowColor - Box shadow color
+ * @returns {string} Returns the combined box shadow and box shadow color
+ *
+ * If boxShadow is a single shadow and has a color then this color will be replaced by boxShadowColor and then
+ * returned as the result,otherwise boxShadowColor will be added to boxShadow and then returned as the result.
+ * If boxShadow is multiple shadows or an empty string then it will be returned as the result.
+ *
+ * @example getFullBoxShadow('none', '', 'red') returns 'none'
+ *
+ * @example getFullBoxShadow('initial', '', 'red') returns 'initial'
+ *
+ * @example getFullBoxShadow('inherit', '', 'red') returns 'inherit'
+ *
+ * @example getFullBoxShadow('', '', 'red') returns ''
+ *
+ * @example getFullBoxShadow('1px 2px blue, 3px 6px green', '', 'red') returns '1px 2px blue, 3px 6px green'
+ *
+ * @example getFullBoxShadow('1px 2px blue', '', 'red') returns '1px 2px red'
+ *
+ * @example getFullBoxShadow('1px 2px', '', 'red') returns '1px 2px red'
+ *
+ * @example getFullBoxShadow('1px 2px', '2px 5px green', undefined) returns '1px 2px green'
+ *
+ * @example getFullBoxShadow('1px 2px', '2px 5px', undefined) returns '1px 2px'
+ */
+const getFullBoxShadow = (boxShadow, themeBoxShadow, boxShadowColor) => {
+  if (boxShadow && PREDEFINED_STRINGS.includes(boxShadow.toLowerCase())) return boxShadow.toLowerCase();
+  const shadowArray = getShadows(boxShadow);
+  if (shadowArray.length !== 1) return boxShadow;
+  let shadowColor = boxShadowColor;
+  if (!shadowColor) {
+    const themeShadowArray = getShadows(themeBoxShadow);
+    if (themeShadowArray.length !== 1) return boxShadow;
+    shadowColor = getColor(themeShadowArray[0]);
+  }
+  if (!shadowColor) return boxShadow;
+  const color = getColor(shadowArray[0]);
+  if (color) return boxShadow.replace(color, shadowColor);
+  return "".concat(boxShadow, " ").concat(shadowColor);
+};
+
+function resolveProperty(path, attribute, theme, objectType) {
+  if (theme && objectType) {
+    return theme.getStyle("object.".concat(objectType), path, attribute);
+  }
+  if (theme) {
+    return theme.getStyle('', path, attribute);
+  }
+  return undefined;
+}
+
+const supportNone = true;
+function resolveColor(colorObj, path, attribute, theme, objectType) {
+  if (colorObj && theme) {
+    return colorObj.color !== 'none' ? theme.getColorPickerColor(colorObj, supportNone) : undefined;
+  }
+  return resolveProperty(path, attribute, theme, objectType);
+}
+
+const imageSizingToCssProperty = {
+  originalSize: 'auto auto',
+  alwaysFit: 'contain',
+  fitWidth: '100% auto',
+  fitHeight: 'auto 100%',
+  stretchFit: '100% 100%',
+  alwaysFill: 'cover'
+};
+const positionToCss = {
+  'top-left': 'top left',
+  'top-center': 'top center',
+  'top-right': 'top right',
+  'center-left': 'center left',
+  'center-center': 'center center',
+  'center-right': 'center right',
+  'bottom-left': 'bottom left',
+  'bottom-center': 'bottom center',
+  'bottom-right': 'bottom right'
+};
+
+// TODO: this needs some proper verification
+function getSenseServerUrl(app) {
+  var _app$session;
+  let config;
+  let wsUrl;
+  let protocol;
+  let isSecure;
+  if (app !== null && app !== void 0 && (_app$session = app.session) !== null && _app$session !== void 0 && _app$session.config) {
+    config = app.session.config;
+    wsUrl = new URL(config.url);
+    isSecure = wsUrl.protocol === 'wss:';
+    protocol = isSecure ? 'https://' : 'http://';
+    return protocol + wsUrl.host;
+  }
+  return '';
+}
+function getBackgroundPosition(bgComp) {
+  var _bgComp$bgImage;
+  let bkgImagePosition = 'center center';
+  if (bgComp !== null && bgComp !== void 0 && (_bgComp$bgImage = bgComp.bgImage) !== null && _bgComp$bgImage !== void 0 && _bgComp$bgImage.position) {
+    bkgImagePosition = positionToCss[bgComp.bgImage.position];
+  }
+  return bkgImagePosition;
+}
+function getBackgroundSize(bgComp) {
+  var _bgComp$bgImage2;
+  let bkgImageSize = imageSizingToCssProperty.originalSize;
+  const size = bgComp === null || bgComp === void 0 || (_bgComp$bgImage2 = bgComp.bgImage) === null || _bgComp$bgImage2 === void 0 ? void 0 : _bgComp$bgImage2.sizing;
+  if (size) {
+    bkgImageSize = imageSizingToCssProperty[size];
+  }
+  return bkgImageSize;
+}
+function resolveImageUrl(app, relativeUrl) {
+  return relativeUrl ? getSenseServerUrl(app) + relativeUrl : undefined;
+}
+function resolveBgImage(bgComp, app) {
+  const bgImageDef = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgImage;
+  if (bgImageDef) {
+    let url = '';
+    if (bgImageDef.mode === 'media' || bgComp.useImage === 'media') {
+      const urlObj = bgImageDef === null || bgImageDef === void 0 ? void 0 : bgImageDef.mediaUrl;
+      const {
+        qUrl
+      } = (urlObj === null || urlObj === void 0 ? void 0 : urlObj.qStaticContentUrl) || {};
+      url = qUrl ? decodeURIComponent(qUrl) : undefined;
+      url = resolveImageUrl(app, url);
+    }
+    if (bgImageDef.mode === 'expression') {
+      url = bgImageDef.expressionUrl ? decodeURIComponent(bgImageDef.expressionUrl) : undefined;
+    }
+    const pos = getBackgroundPosition(bgComp);
+    const size = getBackgroundSize(bgComp);
+    return url ? {
+      url,
+      pos,
+      size
+    } : undefined;
+  }
+  return undefined;
+}
+function resolveBgColor(comp, theme, objectType) {
+  const bgColor = comp === null || comp === void 0 ? void 0 : comp.bgColor;
+  if (bgColor && theme) {
+    if (bgColor.useExpression) {
+      return theme.validateColor(bgColor.colorExpression);
+    }
+  }
+  return resolveColor(bgColor === null || bgColor === void 0 ? void 0 : bgColor.color, '', 'backgroundColor', theme, objectType);
+}
+function resolveBorder(comp, theme, objectType) {
+  const borderColor = resolveColor(comp === null || comp === void 0 ? void 0 : comp.borderColor, '', 'borderColor', theme, objectType);
+  const borderWidth = (comp === null || comp === void 0 ? void 0 : comp.borderWidth) || resolveProperty('', 'borderWidth', theme, objectType);
+  return borderWidth && borderColor ? "".concat(borderWidth, " solid ").concat(borderColor) : undefined;
+}
+function resolveBorderRadius(comp, theme, objectType) {
+  return (comp === null || comp === void 0 ? void 0 : comp.borderRadius) || resolveProperty('', 'borderRadius', theme, objectType);
+}
+function resolveBoxShadow(comp, theme, objectType) {
+  var _comp$shadow, _comp$shadow2;
+  const themeBoxShadow = resolveProperty('shadow', 'boxShadow', theme, objectType);
+  const boxShadow = (comp === null || comp === void 0 || (_comp$shadow = comp.shadow) === null || _comp$shadow === void 0 ? void 0 : _comp$shadow.boxShadow) || themeBoxShadow;
+  const boxShadowColor = resolveColor(comp === null || comp === void 0 || (_comp$shadow2 = comp.shadow) === null || _comp$shadow2 === void 0 ? void 0 : _comp$shadow2.boxShadowColor, 'shadow', 'boxShadowColor', theme, objectType);
+  return getFullBoxShadow(boxShadow, themeBoxShadow, boxShadowColor);
+}
+function unfurlFontStyle(fontStyle, target) {
+  if (fontStyle && Array.isArray(fontStyle)) {
+    return fontStyle;
+  }
+  return target === 'main' ? ['bold'] : [];
+}
+function resolveTextStyle(textComp, target, theme, objectType) {
+  var _textComp$title;
+  const textProps = (textComp === null || textComp === void 0 || (_textComp$title = textComp.title) === null || _textComp$title === void 0 ? void 0 : _textComp$title[target]) || {};
+  const fontStyle = unfurlFontStyle(textProps.fontStyle, target);
+  return {
+    fontFamily: textProps.fontFamily || theme.getStyle("object.".concat(objectType), "title.".concat(target), 'fontFamily'),
+    color: textProps.color && textProps.color.color !== 'none' ? theme.getColorPickerColor(textProps.color, true) : theme.getStyle("object.".concat(objectType), target, 'color'),
+    fontWeight: fontStyle.includes('bold') ? 'bold' : 'normal',
+    fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',
+    textDecoration: fontStyle.includes('underline') ? 'underline' : 'initial'
+  };
+}
+
 const LIGHT = '#FFF';
 const DARK = '#000';
 const CONTRAST_THRESHOLD = 1.5;
@@ -17213,14 +17427,40 @@ function getSelectionColors(_ref) {
     possibleContrast
   };
 }
-function getStyles(_ref2) {
-  var _themeOverrides$heade, _themeOverrides$heade2, _themeOverrides$conte;
+function getBackgroundColor(_ref2) {
   let {
+    themeApi,
+    themeOverrides
+  } = _ref2;
+  let color;
+  const bgColor = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.background;
+  if (!bgColor) {
+    return color;
+  }
+  if (bgColor !== null && bgColor !== void 0 && bgColor.useExpression) {
+    color = resolveBgColor({
+      bgColor
+    }, themeApi, 'listBox');
+  } else {
+    var _themeApi$getColorPic;
+    color = (_themeApi$getColorPic = themeApi.getColorPickerColor(bgColor, true)) === null || _themeApi$getColorPic === void 0 ? void 0 : _themeApi$getColorPic.color;
+  }
+  return color;
+}
+function getSearchColor(getListboxStyle) {
+  const desiredTextColor = getListboxStyle('content', 'color');
+  const color = getContrastingColor('#fff', desiredTextColor);
+  return color;
+}
+function getStyles(_ref3) {
+  var _themeOverrides$heade, _themeOverrides$backg, _themeOverrides$heade2, _themeOverrides$conte, _themeOverrides$heade3, _themeOverrides$heade4, _themeOverrides$conte2, _themeOverrides$conte3;
+  let {
+    app,
     themeApi,
     theme,
     components = [],
     checkboxes = false
-  } = _ref2;
+  } = _ref3;
   const overrides = getOverridesAsObject(components);
   const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
   const selections = getSelectionColors({
@@ -17230,22 +17470,51 @@ function getStyles(_ref2) {
     checkboxes
   });
   const themeOverrides = overrides.theme || {};
+  const headerColor = ((_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');
+  const bgComponentColor = getBackgroundColor({
+    themeApi,
+    themeOverrides
+  });
+  const bgImage = (_themeOverrides$backg = themeOverrides.background) !== null && _themeOverrides$backg !== void 0 && _themeOverrides$backg.image ? resolveBgImage({
+    bgImage: themeOverrides.background.image
+  }, app) : undefined;
+  const searchBgColor = 'rgba(255, 255, 255, 0.7)';
+  const searchColor = getSearchColor(getListboxStyle);
+  const headerFontStyle = ((_themeOverrides$heade2 = themeOverrides.header) === null || _themeOverrides$heade2 === void 0 ? void 0 : _themeOverrides$heade2.fontStyle) || {};
+  const contentFontStyle = ((_themeOverrides$conte = themeOverrides.content) === null || _themeOverrides$conte === void 0 ? void 0 : _themeOverrides$conte.fontStyle) || {};
+
+  // Ensure we only return falseValue when the component is used, and thus has a false value.
+  const getWithFallback = (value, trueValue, falseValue) => value === true && trueValue || value === false && falseValue || undefined;
   return {
-    backgroundColor: getListboxStyle('', 'backgroundColor') || theme.palette.background.default,
+    background: {
+      backgroundColor: bgComponentColor || getListboxStyle('', 'backgroundColor') || theme.palette.background.default,
+      backgroundImage: bgImage !== null && bgImage !== void 0 && bgImage.url && !(bgImage !== null && bgImage !== void 0 && bgImage.url.startsWith('url(')) ? "url('".concat(bgImage.url, "')") : undefined,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: bgImage === null || bgImage === void 0 ? void 0 : bgImage.size,
+      backgroundPosition: bgImage === null || bgImage === void 0 ? void 0 : bgImage.pos
+    },
     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'
+      color: headerColor,
+      fontSize: ((_themeOverrides$heade3 = themeOverrides.header) === null || _themeOverrides$heade3 === void 0 ? void 0 : _themeOverrides$heade3.fontSize) || getListboxStyle('title.main', 'fontSize'),
+      fontFamily: ((_themeOverrides$heade4 = themeOverrides.header) === null || _themeOverrides$heade4 === void 0 ? void 0 : _themeOverrides$heade4.fontFamily) || getListboxStyle('title.main', 'fontFamily'),
+      fontWeight: getWithFallback(headerFontStyle.bold, 'bold', 'normal') || getListboxStyle('title.main', 'fontWeight') || 'bold',
+      textDecoration: headerFontStyle.underline ? 'underline' : 'initial',
+      fontStyle: getWithFallback(headerFontStyle.italic, 'italic', 'normal') || getListboxStyle('title.main', 'fontStyle') || 'initial'
     },
     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')
+      fontSize: ((_themeOverrides$conte2 = themeOverrides.content) === null || _themeOverrides$conte2 === void 0 ? void 0 : _themeOverrides$conte2.fontSize) || getListboxStyle('content', 'fontSize'),
+      fontFamily: ((_themeOverrides$conte3 = themeOverrides.content) === null || _themeOverrides$conte3 === void 0 ? void 0 : _themeOverrides$conte3.fontFamily) || getListboxStyle('content', 'fontFamily'),
+      fontWeight: getWithFallback(contentFontStyle.bold, 'bold', 'normal') || getListboxStyle('content', 'fontWeight') || 'normal',
+      textDecoration: contentFontStyle.underline ? 'underline' : 'initial',
+      fontStyle: getWithFallback(contentFontStyle.italic, 'italic', 'normal') || getListboxStyle('content', 'fontStyle') || 'initial'
     },
     search: {
-      color: getListboxStyle('content', 'color')
+      color: searchColor,
+      borderColor: theme.palette.divider,
+      highlightBorderColor: theme.palette.primary.main,
+      backgroundColor: searchBgColor
     },
     selections
   };
@@ -18904,6 +19173,33 @@ function isDirectQueryEnabled(_ref) {
   return isDQ;
 }
 
+function getContainerPadding(_ref) {
+  let {
+    isGridMode,
+    dense,
+    height,
+    layoutOrder
+  } = _ref;
+  let containerPadding;
+  if (isGridMode) {
+    const itemHeight = getItemHeight({
+      isGridMode,
+      dense
+    });
+    let paddingY;
+    if (itemHeight > height) {
+      paddingY = '0px';
+    } else {
+      paddingY = '2px';
+    }
+    containerPadding = layoutOrder === 'row' ? "".concat(paddingY, " 4px") : "".concat(paddingY, " 6px ").concat(paddingY, " 4px");
+  } else {
+    containerPadding = undefined; // to prevent overriding any default padding
+  }
+
+  return containerPadding;
+}
+
 const PREFIX$4 = 'ListBoxInline';
 const classes$4 = {
   listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
@@ -18919,8 +19215,8 @@ const StyledGrid$3 = styled$1(Grid, {
     isGridMode,
     styles
   } = _ref;
-  return {
-    background: styles.backgroundColor,
+  return _objectSpread2(_objectSpread2({}, styles.background), {}, {
+    // sets background color and image of listbox
     ["& .".concat(classes$4.listBoxHeader)]: {
       alignSelf: 'center',
       display: 'flex'
@@ -18943,33 +19239,50 @@ const StyledGrid$3 = styled$1(Grid, {
     '&:focus-visible': {
       outline: 'none'
     }
-  };
+  });
 });
-const Title = styled$1(Typography)(_ref2 => {
+const StyledGridHeader = styled$1(Grid, {
+  shouldForwardProp: p => !['styles', 'isRtl'].includes(p)
+})(_ref2 => {
   let {
-    styles
+    styles,
+    isRtl
   } = _ref2;
-  return {
-    color: styles.header.color,
-    fontSize: styles.header.fontSize,
-    fontFamily: styles.header.fontFamily,
-    fontWeight: styles.header.fontWeight
-  };
+  return _objectSpread2(_objectSpread2({
+    flexDirection: isRtl ? 'row-reverse' : 'row',
+    wrap: 'nowrap',
+    minHeight: 32,
+    alignContent: 'center'
+  }, styles.header), {}, {
+    '& *': {
+      // Assign the styles color as defaul color for all elements in the header
+      color: styles.header.color
+    }
+  });
+});
+const Title = styled$1(Typography)(_ref3 => {
+  let {
+    styles
+  } = _ref3;
+  return _objectSpread2(_objectSpread2({}, styles.header), {}, {
+    paddingRight: '1px' // make place for italic font style
+  });
 });
-const isModal = _ref3 => {
+
+const isModal = _ref4 => {
   var _app$isInModalSelecti, _app$isInModalSelecti2;
   let {
     app,
     appSelections
-  } = _ref3;
+  } = _ref4;
   return (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
 };
-function ListBoxInline(_ref4) {
-  var _layout$qListObject, _layout$qListObject2, _layoutOptions$dense;
+function ListBoxInline(_ref5) {
+  var _layout$qListObject, _layout$qListObject2, _layoutOptions$dense, _containerRef$current;
   let {
     options,
     layout
-  } = _ref4;
+  } = _ref5;
   const {
     app,
     direction,
@@ -19018,6 +19331,7 @@ function ListBoxInline(_ref4) {
     checkboxes = checkboxesOption
   } = layout || {};
   const styles = getStyles({
+    app,
     themeApi,
     theme,
     components,
@@ -19163,7 +19477,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 headerHeight = 32;
   const onShowSearch = () => {
     const newValue = !showSearch;
     setShowSearch(newValue);
@@ -19191,10 +19504,12 @@ function ListBoxInline(_ref4) {
 
   // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
   const isGridMode = (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.dataLayout) === 'grid';
-  let containerPadding;
-  if (isGridMode) {
-    containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
-  }
+  const containerPadding = getContainerPadding({
+    isGridMode,
+    dense,
+    height: (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight,
+    layoutOrder: layoutOptions.layoutOrder
+  });
   const searchIconComp = constraints !== null && constraints !== void 0 && constraints.active ? /*#__PURE__*/React__default.createElement(SearchIcon, {
     title: translator.get('Listbox.Search'),
     size: "large",
@@ -19234,6 +19549,7 @@ function ListBoxInline(_ref4) {
   if (isInvalid) {
     renderedCallback === null || renderedCallback === void 0 || renderedCallback();
   }
+  const listBoxMinHeight = showToolbarWithTitle ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
     direction: direction
   }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
@@ -19257,15 +19573,14 @@ function ListBoxInline(_ref4) {
     },
     isGridMode: isGridMode,
     "aria-label": keyboard.active ? translator.get('Listbox.ScreenReaderInstructions') : ''
-  }, showToolbarWithTitle && /*#__PURE__*/React__default.createElement(Grid, {
+  }, showToolbarWithTitle && /*#__PURE__*/React__default.createElement(StyledGridHeader, {
     item: true,
     container: true,
-    minHeight: headerHeight,
-    flexDirection: isRtl ? 'row-reverse' : 'row',
+    styles: styles,
+    isRtl: isRtl,
     marginY: 1,
     paddingLeft: "".concat(headerPaddingLeft, "px"),
-    paddingRight: "".concat(headerPaddingRight, "px"),
-    wrap: "nowrap"
+    paddingRight: "".concat(headerPaddingRight, "px")
   }, showIcons && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -19292,17 +19607,16 @@ function ListBoxInline(_ref4) {
     title: layout.title,
     styles: styles
   }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
+    item: true,
+    display: "flex"
   }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
     direction: direction
   }, getActionToolbarProps(isToolbarDetached))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     direction: "column",
-    style: {
-      height: '100%',
-      minHeight: DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH
-    },
+    height: "100%",
+    minHeight: listBoxMinHeight,
     role: "region",
     "aria-label": translator.get('Listbox.ResultFilterLabel')
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -19328,11 +19642,11 @@ function ListBoxInline(_ref4) {
     className: classes$4.listboxWrapper
   }, isInvalid ? /*#__PURE__*/React__default.createElement(ListBoxError, {
     text: errorText
-  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref5 => {
+  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref6 => {
     let {
       height,
       width
-    } = _ref5;
+    } = _ref6;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
       app: app,
@@ -19374,10 +19688,10 @@ function ListBoxInline(_ref4) {
   })))));
 }
 const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
-function IsolateUseLayoutWrapper(_ref6) {
+function IsolateUseLayoutWrapper(_ref7) {
   let {
     options = {}
-  } = _ref6;
+  } = _ref7;
   const {
     model
   } = options;
@@ -21792,205 +22106,6 @@ function Supernova(_ref) {
   }));
 }
 
-const MULTI_REG = /,(?![^(]*\))/;
-const SINGLE_REG = /\s(?![^(]*\))/;
-const LENGTH_REG = /^[0-9]+[a-zA-Z%]+?$/;
-const PREDEFINED_STRINGS = ['none', 'inset', 'initial', 'inherit'];
-const isLength = v => v === '0' || LENGTH_REG.test(v);
-const getColor = singleShadowString => {
-  if (!singleShadowString) return undefined;
-  const parts = singleShadowString.split(SINGLE_REG).filter(part => !PREDEFINED_STRINGS.includes(part.toLowerCase()));
-  const last = parts.at(-1);
-  const color = last && !isLength(last) && !PREDEFINED_STRINGS.includes(last.toLowerCase()) ? last : undefined;
-  return color;
-};
-const getShadows = shadowString => {
-  if (!shadowString) return [];
-  return shadowString.split(MULTI_REG).map(s => s.trim());
-};
-
-/**
- * Combine box shadow with box shadow color.
- * @param {string} boxShadow - Box shadow which may include color
- * @param {string} themeBoxShadow - Box shadow from theme which may include color
- * @param {string | undefined} boxShadowColor - Box shadow color
- * @returns {string} Returns the combined box shadow and box shadow color
- *
- * If boxShadow is a single shadow and has a color then this color will be replaced by boxShadowColor and then
- * returned as the result,otherwise boxShadowColor will be added to boxShadow and then returned as the result.
- * If boxShadow is multiple shadows or an empty string then it will be returned as the result.
- *
- * @example getFullBoxShadow('none', '', 'red') returns 'none'
- *
- * @example getFullBoxShadow('initial', '', 'red') returns 'initial'
- *
- * @example getFullBoxShadow('inherit', '', 'red') returns 'inherit'
- *
- * @example getFullBoxShadow('', '', 'red') returns ''
- *
- * @example getFullBoxShadow('1px 2px blue, 3px 6px green', '', 'red') returns '1px 2px blue, 3px 6px green'
- *
- * @example getFullBoxShadow('1px 2px blue', '', 'red') returns '1px 2px red'
- *
- * @example getFullBoxShadow('1px 2px', '', 'red') returns '1px 2px red'
- *
- * @example getFullBoxShadow('1px 2px', '2px 5px green', undefined) returns '1px 2px green'
- *
- * @example getFullBoxShadow('1px 2px', '2px 5px', undefined) returns '1px 2px'
- */
-const getFullBoxShadow = (boxShadow, themeBoxShadow, boxShadowColor) => {
-  if (boxShadow && PREDEFINED_STRINGS.includes(boxShadow.toLowerCase())) return boxShadow.toLowerCase();
-  const shadowArray = getShadows(boxShadow);
-  if (shadowArray.length !== 1) return boxShadow;
-  let shadowColor = boxShadowColor;
-  if (!shadowColor) {
-    const themeShadowArray = getShadows(themeBoxShadow);
-    if (themeShadowArray.length !== 1) return boxShadow;
-    shadowColor = getColor(themeShadowArray[0]);
-  }
-  if (!shadowColor) return boxShadow;
-  const color = getColor(shadowArray[0]);
-  if (color) return boxShadow.replace(color, shadowColor);
-  return "".concat(boxShadow, " ").concat(shadowColor);
-};
-
-function resolveProperty(path, attribute, theme, objectType) {
-  if (theme && objectType) {
-    return theme.getStyle("object.".concat(objectType), path, attribute);
-  }
-  if (theme) {
-    return theme.getStyle('', path, attribute);
-  }
-  return undefined;
-}
-
-function resolveColor(colorObj, path, attribute, theme, objectType) {
-  if (colorObj && theme) {
-    return colorObj.color !== 'none' ? theme.getColorPickerColor(colorObj, true) : undefined;
-  }
-  return resolveProperty(path, attribute, theme, objectType);
-}
-
-const imageSizingToCssProperty = {
-  originalSize: 'auto auto',
-  alwaysFit: 'contain',
-  fitWidth: '100% auto',
-  fitHeight: 'auto 100%',
-  stretchFit: '100% 100%',
-  alwaysFill: 'cover'
-};
-const positionToCss = {
-  'top-left': 'top left',
-  'top-center': 'top center',
-  'top-right': 'top right',
-  'center-left': 'center left',
-  'center-center': 'center center',
-  'center-right': 'center right',
-  'bottom-left': 'bottom left',
-  'bottom-center': 'bottom center',
-  'bottom-right': 'bottom right'
-};
-
-// TODO: this needs some proper verification
-function getSenseServerUrl(app) {
-  var _app$session;
-  let config;
-  let wsUrl;
-  let protocol;
-  let isSecure;
-  if (app !== null && app !== void 0 && (_app$session = app.session) !== null && _app$session !== void 0 && _app$session.config) {
-    config = app.session.config;
-    wsUrl = new URL(config.url);
-    isSecure = wsUrl.protocol === 'wss:';
-    protocol = isSecure ? 'https://' : 'http://';
-    return protocol + wsUrl.host;
-  }
-  return '';
-}
-function getBackgroundPosition(bgComp) {
-  var _bgComp$bgImage;
-  let bkgImagePosition = 'center center';
-  if (bgComp !== null && bgComp !== void 0 && (_bgComp$bgImage = bgComp.bgImage) !== null && _bgComp$bgImage !== void 0 && _bgComp$bgImage.position) {
-    bkgImagePosition = positionToCss[bgComp.bgImage.position];
-  }
-  return bkgImagePosition;
-}
-function getBackgroundSize(bgComp) {
-  var _bgComp$bgImage2;
-  let bkgImageSize = imageSizingToCssProperty.originalSize;
-  if (bgComp !== null && bgComp !== void 0 && (_bgComp$bgImage2 = bgComp.bgImage) !== null && _bgComp$bgImage2 !== void 0 && _bgComp$bgImage2.sizing) {
-    bkgImageSize = imageSizingToCssProperty[bgComp.bgImage.sizing];
-  }
-  return bkgImageSize;
-}
-function resolveImageUrl(app, relativeUrl) {
-  return relativeUrl ? getSenseServerUrl(app) + relativeUrl : undefined;
-}
-function resolveBgImage(bgComp, app) {
-  const bgImageDef = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgImage;
-  if (bgImageDef) {
-    let url = '';
-    if (bgImageDef.mode === 'media' || bgComp.useImage === 'media') {
-      var _bgImageDef$mediaUrl;
-      url = bgImageDef !== null && bgImageDef !== void 0 && (_bgImageDef$mediaUrl = bgImageDef.mediaUrl) !== null && _bgImageDef$mediaUrl !== void 0 && (_bgImageDef$mediaUrl = _bgImageDef$mediaUrl.qStaticContentUrl) !== null && _bgImageDef$mediaUrl !== void 0 && _bgImageDef$mediaUrl.qUrl ? decodeURIComponent(bgImageDef.mediaUrl.qStaticContentUrl.qUrl) : undefined;
-      url = resolveImageUrl(app, url);
-    }
-    if (bgImageDef.mode === 'expression') {
-      url = bgImageDef.expressionUrl ? decodeURIComponent(bgImageDef.expressionUrl) : undefined;
-    }
-    const pos = getBackgroundPosition(bgComp);
-    const size = getBackgroundSize(bgComp);
-    return url ? {
-      url,
-      pos,
-      size
-    } : undefined;
-  }
-  return undefined;
-}
-function resolveBgColor(comp, theme, objectType) {
-  const bgColor = comp === null || comp === void 0 ? void 0 : comp.bgColor;
-  if (bgColor && theme) {
-    if (bgColor.useExpression) {
-      return theme.validateColor(bgColor.colorExpression);
-    }
-  }
-  return resolveColor(bgColor === null || bgColor === void 0 ? void 0 : bgColor.color, '', 'backgroundColor', theme, objectType);
-}
-function resolveBorder(comp, theme, objectType) {
-  const borderColor = resolveColor(comp === null || comp === void 0 ? void 0 : comp.borderColor, '', 'borderColor', theme, objectType);
-  const borderWidth = (comp === null || comp === void 0 ? void 0 : comp.borderWidth) || resolveProperty('', 'borderWidth', theme, objectType);
-  return borderWidth && borderColor ? "".concat(borderWidth, " solid ").concat(borderColor) : undefined;
-}
-function resolveBorderRadius(comp, theme, objectType) {
-  return (comp === null || comp === void 0 ? void 0 : comp.borderRadius) || resolveProperty('', 'borderRadius', theme, objectType);
-}
-function resolveBoxShadow(comp, theme, objectType) {
-  var _comp$shadow, _comp$shadow2;
-  const themeBoxShadow = resolveProperty('shadow', 'boxShadow', theme, objectType);
-  const boxShadow = (comp === null || comp === void 0 || (_comp$shadow = comp.shadow) === null || _comp$shadow === void 0 ? void 0 : _comp$shadow.boxShadow) || themeBoxShadow;
-  const boxShadowColor = resolveColor(comp === null || comp === void 0 || (_comp$shadow2 = comp.shadow) === null || _comp$shadow2 === void 0 ? void 0 : _comp$shadow2.boxShadowColor, 'shadow', 'boxShadowColor', theme, objectType);
-  return getFullBoxShadow(boxShadow, themeBoxShadow, boxShadowColor);
-}
-function unfurlFontStyle(fontStyle, target) {
-  if (fontStyle && Array.isArray(fontStyle)) {
-    return fontStyle;
-  }
-  return target === 'main' ? ['bold'] : [];
-}
-function resolveTextStyle(textComp, target, theme, objectType) {
-  var _textComp$title;
-  const textProps = (textComp === null || textComp === void 0 || (_textComp$title = textComp.title) === null || _textComp$title === void 0 ? void 0 : _textComp$title[target]) || {};
-  const fontStyle = unfurlFontStyle(textProps.fontStyle, target);
-  return {
-    fontFamily: textProps.fontFamily || theme.getStyle("object.".concat(objectType), "title.".concat(target), 'fontFamily'),
-    color: textProps.color && textProps.color.color !== 'none' ? theme.getColorPickerColor(textProps.color, true) : theme.getStyle("object.".concat(objectType), target, 'color'),
-    fontWeight: fontStyle.includes('bold') ? 'bold' : 'normal',
-    fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',
-    textDecoration: fontStyle.includes('underline') ? 'underline' : 'initial'
-  };
-}
-
 const useStyling = (layout, theme, app, themeName) => {
   const styling = useMemo$1(() => {
     if (layout && theme) {
@@ -25501,6 +25616,17 @@ function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initial
     onMount: onMount
   }));
 }
+function getBounds(pos, columns, rows) {
+  if (pos.bounds) {
+    return pos.bounds;
+  }
+  return {
+    y: pos.row / rows * 100,
+    x: pos.col / columns * 100,
+    width: pos.colspan / columns * 100,
+    height: pos.rowspan / rows * 100
+  };
+}
 function Sheet(_ref) {
   let {
     model,
@@ -25541,6 +25667,10 @@ function Sheet(_ref) {
           root.removeCell(c.currentId);
         });
         const lCells = layout.cells;
+        const {
+          columns,
+          rows
+        } = layout;
         // TODO - should try reuse existing objects on subsequent renders
         // Non-id updates should only change the "css"
         const cs = await Promise.all(lCells.map(async c => {
@@ -25550,7 +25680,7 @@ function Sheet(_ref) {
           });
           const cell = cells.find(ce => ce.id === c.name);
           if (cell) {
-            cell.bounds = c.bounds;
+            cell.bounds = getBounds(c, columns, rows);
             delete cell.mountedPromise;
             return cell;
           }
@@ -25560,7 +25690,7 @@ function Sheet(_ref) {
           return {
             model: vs.model,
             id: c.name,
-            bounds: c.bounds,
+            bounds: getBounds(c, columns, rows),
             cellRef: React__default.createRef(),
             currentId: uid(),
             mounted,