@nebula.js/stardust 4.6.2 → 4.8.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.6.2
+* @nebula.js/stardust v4.8.0
 * 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.16
+ * @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 = "ca95" ;
+const NEBULA_VERSION_HASH = "f910" ;
 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.6.2" );
+  element.setAttribute('data-nebulajs-version', "4.8.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -10030,6 +10030,7 @@ const getBarWidth = _ref => {
 };
 const getFrequencyText = qFrequency => qFrequency || frequencyTextNone;
 
+const _excluded$6 = ["backgroundColor"];
 const getFreqFlexBasis = _ref => {
   let {
     sizes,
@@ -10111,8 +10112,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 +10139,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 +10168,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 +10202,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), {}, {
@@ -10315,7 +10309,6 @@ const StyledCheckbox = styled$1(Checkbox, {
   shouldForwardProp: p => p !== 'styles'
 })(_ref => {
   let {
-    theme,
     styles
   } = _ref;
   return {
@@ -10346,13 +10339,13 @@ const StyledCheckbox = styled$1(Checkbox, {
       borderRadius: borderRadius - 1,
       width: 12,
       height: 12,
-      backgroundColor: theme.palette.selected.excluded
+      backgroundColor: styles.selections.excluded
     },
     ["& .".concat(classes$b.cbIconAlternative)]: {
       borderRadius: borderRadius - 1,
       width: 12,
       height: 12,
-      backgroundColor: theme.palette.selected.alternative
+      backgroundColor: styles.selections.alternative
     },
     ["&.".concat(classes$b.checkbox)]: {
       margin: 0,
@@ -14508,7 +14501,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
     }
   };
@@ -14566,6 +14559,12 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
     slotProps: {
       root: {
         className: ActionsToolbarMoreElement.className
+      },
+      paper: {
+        style: _objectSpread2({
+          pointerEvents: 'auto',
+          maxWidth: '250px'
+        }, popoverPaperStyle)
       }
     },
     anchorOrigin: {
@@ -14575,12 +14574,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"
@@ -14904,28 +14897,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.content.color
-  };
-});
-const StyledOutlinedInput = styled$1(OutlinedInput, {
-  shouldForwardProp: p => p !== 'styles'
-})(_ref2 => {
-  let {
-    styles
-  } = _ref2;
-  return {
-    color: styles.content.color,
-    display: 'flex'
-  };
+  let denseProps = {};
+  if (dense) {
+    denseProps = {
+      fontSize: 12,
+      paddingLeft: theme.spacing(1),
+      '& input': {
+        paddingTop: '5px',
+        paddingBottom: '5px'
+      }
+    };
+  }
+  return _objectSpread2({
+    display: 'flex',
+    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,
@@ -14939,20 +14957,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()) {
@@ -15076,37 +15092,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,
@@ -15118,9 +15111,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')
     }
@@ -16318,7 +16308,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
@@ -17111,6 +17101,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;
@@ -17165,11 +17360,17 @@ function getOverridesAsObject() {
   });
   return overrides;
 }
-function getSelectionColors(theme, getListboxStyle, overrides) {
+function getSelectionColors(_ref) {
   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;
+  let {
+    theme,
+    getListboxStyle,
+    overrides,
+    checkboxes
+  } = _ref;
   const componentContentTextColor = (_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;
   const desiredTextColor = componentContentTextColor || 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;
+  const useContrastTextColor = !checkboxes && ((_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) || {};
@@ -17206,31 +17407,94 @@ function getSelectionColors(theme, getListboxStyle, overrides) {
     possibleContrast
   };
 }
-function getStyles(_ref) {
-  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
-  } = _ref;
+  } = _ref3;
   const overrides = getOverridesAsObject(components);
   const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
-  const selections = getSelectionColors(theme, getListboxStyle, overrides);
+  const selections = getSelectionColors({
+    theme,
+    getListboxStyle,
+    overrides,
+    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: searchColor,
+      borderColor: theme.palette.divider,
+      highlightBorderColor: theme.palette.primary.main,
+      backgroundColor: searchBgColor
     },
     selections
   };
@@ -18904,8 +19168,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'
@@ -18928,33 +19192,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 isModal = _ref3 => {
+const Title = styled$1(Typography)(_ref3 => {
+  let {
+    styles
+  } = _ref3;
+  return _objectSpread2(_objectSpread2({}, styles.header), {}, {
+    paddingRight: '1px' // make place for italic font style
+  });
+});
+
+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) {
+function ListBoxInline(_ref5) {
   var _layout$qListObject, _layout$qListObject2, _layoutOptions$dense;
   let {
     options,
     layout
-  } = _ref4;
+  } = _ref5;
   const {
     app,
     direction,
@@ -19003,6 +19284,7 @@ function ListBoxInline(_ref4) {
     checkboxes = checkboxesOption
   } = layout || {};
   const styles = getStyles({
+    app,
     themeApi,
     theme,
     components,
@@ -19148,7 +19430,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);
@@ -19242,15 +19523,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,
@@ -19277,7 +19557,8 @@ 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, {
@@ -19313,11 +19594,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,
@@ -19359,10 +19640,10 @@ function ListBoxInline(_ref4) {
   })))));
 }
 const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
-function IsolateUseLayoutWrapper(_ref6) {
+function IsolateUseLayoutWrapper(_ref7) {
   let {
     options = {}
-  } = _ref6;
+  } = _ref7;
   const {
     model
   } = options;
@@ -21777,117 +22058,33 @@ function Supernova(_ref) {
   }));
 }
 
-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(bgComp, theme, objectType) {
-  const bgColor = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgColor;
-  if (bgColor && theme) {
-    if (bgColor.useExpression) {
-      return theme.validateColor(bgColor.colorExpression);
+const useStyling = (layout, theme, app, themeName) => {
+  const styling = useMemo$1(() => {
+    if (layout && theme) {
+      const generalComp = layout.components ? layout.components.find(comp => comp.key === 'general') : null;
+      const titleStyles = {
+        main: resolveTextStyle(generalComp, 'main', theme, layout.visualization),
+        footer: resolveTextStyle(generalComp, 'footer', theme, layout.visualization),
+        subTitle: resolveTextStyle(generalComp, 'subTitle', theme, layout.visualization)
+      };
+      const bgColor = resolveBgColor(generalComp, theme, layout.visualization);
+      const bgImage = resolveBgImage(generalComp, app);
+      const border = resolveBorder(generalComp, theme, layout.visualization);
+      const borderRadius = resolveBorderRadius(generalComp, theme, layout.visualization);
+      const boxShadow = resolveBoxShadow(generalComp, theme, layout.visualization);
+      return {
+        titleStyles,
+        bgColor,
+        bgImage,
+        border,
+        borderRadius,
+        boxShadow
+      };
     }
-    return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color, true) : undefined;
-  }
-  if (theme && objectType) {
-    return theme.getStyle("object.".concat(objectType), '', 'backgroundColor');
-  }
-  if (theme) {
-    return theme.getStyle('', '', 'backgroundColor');
-  }
-  return undefined;
-}
-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'
-  };
-}
+    return {};
+  }, [layout, theme, app, themeName]);
+  return styling;
+};
 
 /**
  * @interface
@@ -22218,9 +22415,14 @@ const Cell = forwardRef((_ref6, ref) => {
     enter: null,
     leave: null
   });
-  const [bgColor, setBgColor] = useState$1(undefined);
-  const [bgImage, setBgImage] = useState$1(undefined); // {url: "", size: "", pos: ""}
-  const [titleStyles, setTitleStyles] = useState$1(undefined);
+  const {
+    titleStyles,
+    bgColor,
+    bgImage,
+    border,
+    borderRadius,
+    boxShadow
+  } = useStyling(layout, halo.public.theme, halo.app, themeName);
   const focusHandler = useRef({
     focusToolbarButton(last) {
       // eslint-disable-next-line react/no-this-in-sfc
@@ -22230,18 +22432,6 @@ const Cell = forwardRef((_ref6, ref) => {
   useEffect$1(() => {
     eventmixin(focusHandler.current);
   }, []);
-  useEffect$1(() => {
-    if (layout && halo.public.theme) {
-      const bgComp = layout.components ? layout.components.find(comp => comp.key === 'general') : null;
-      setTitleStyles({
-        main: resolveTextStyle(bgComp, 'main', halo.public.theme, layout.visualization),
-        footer: resolveTextStyle(bgComp, 'footer', halo.public.theme, layout.visualization),
-        subTitle: resolveTextStyle(bgComp, 'subTitle', halo.public.theme, layout.visualization)
-      });
-      setBgColor(resolveBgColor(bgComp, halo.public.theme, layout.visualization));
-      setBgImage(resolveBgImage(bgComp, halo.app));
-    }
-  }, [layout, halo.public.theme, halo.app, themeName]);
   focusHandler.current.blurCallback = resetFocus => {
     halo.root.toggleFocusOfCells();
     if (resetFocus && contentNode) {
@@ -22432,7 +22622,11 @@ const Cell = forwardRef((_ref6, ref) => {
       backgroundImage: bgImage && bgImage.url ? "url(".concat(bgImage.url, ")") : undefined,
       backgroundRepeat: 'no-repeat',
       backgroundSize: bgImage && bgImage.size,
-      backgroundPosition: bgImage && bgImage.pos
+      backgroundPosition: bgImage && bgImage.pos,
+      border,
+      borderRadius,
+      boxShadow,
+      boxSizing: 'border-box'
     },
     elevation: 0,
     square: true,
@@ -25374,6 +25568,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,
@@ -25414,6 +25619,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 => {
@@ -25423,7 +25632,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;
           }
@@ -25433,7 +25642,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,