@nebula.js/stardust 4.6.2 → 4.8.0

package/dist/stardust.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.
 */
@@ -6952,7 +6952,7 @@
 	}
 
 	/**
-	 * @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
@@ -7000,7 +7000,7 @@
 	  return target;
 	}
 
-	const _excluded$R = ["values", "unit", "step"];
+	const _excluded$S = ["values", "unit", "step"];
 	const sortBreakpointsValues = values => {
 	  const breakpointsAsArray = Object.keys(values).map(key => ({
 	    key,
@@ -7035,7 +7035,7 @@
 	      unit = 'px',
 	      step = 5
 	    } = breakpoints,
-	    other = _objectWithoutPropertiesLoose$2(breakpoints, _excluded$R);
+	    other = _objectWithoutPropertiesLoose$2(breakpoints, _excluded$S);
 	  const sortedValues = sortBreakpointsValues(values);
 	  const keys = Object.keys(sortedValues);
 	  function up(key) {
@@ -8088,7 +8088,7 @@
 	styleFunctionSx.filterProps = ['sx'];
 	var styleFunctionSx$1 = styleFunctionSx;
 
-	const _excluded$Q = ["breakpoints", "palette", "spacing", "shape"];
+	const _excluded$R = ["breakpoints", "palette", "spacing", "shape"];
 	function createTheme$1(options = {}, ...args) {
 	  const {
 	      breakpoints: breakpointsInput = {},
@@ -8096,7 +8096,7 @@
 	      spacing: spacingInput,
 	      shape: shapeInput = {}
 	    } = options,
-	    other = _objectWithoutPropertiesLoose$2(options, _excluded$Q);
+	    other = _objectWithoutPropertiesLoose$2(options, _excluded$R);
 	  const breakpoints = createBreakpoints(breakpointsInput);
 	  const spacing = createSpacing(spacingInput);
 	  let muiTheme = deepmerge({
@@ -8146,7 +8146,7 @@
 	  });
 	}
 
-	const _excluded$P = ["sx"];
+	const _excluded$Q = ["sx"];
 	const splitProps = props => {
 	  var _props$theme$unstable, _props$theme;
 	  const result = {
@@ -8167,7 +8167,7 @@
 	  const {
 	      sx: inSx
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$2(props, _excluded$P);
+	    other = _objectWithoutPropertiesLoose$2(props, _excluded$Q);
 	  const {
 	    systemProps,
 	    otherProps
@@ -8193,7 +8193,7 @@
 
 	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$O = ["className", "component"];
+	const _excluded$P = ["className", "component"];
 	function createBox(options = {}) {
 	  const {
 	    themeId,
@@ -8211,7 +8211,7 @@
 	        className,
 	        component = 'div'
 	      } = _extendSxProp,
-	      other = _objectWithoutPropertiesLoose$2(_extendSxProp, _excluded$O);
+	      other = _objectWithoutPropertiesLoose$2(_extendSxProp, _excluded$P);
 	    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends$3({
 	      as: component,
 	      ref: ref,
@@ -8222,7 +8222,7 @@
 	  return Box;
 	}
 
-	const _excluded$N = ["variant"];
+	const _excluded$O = ["variant"];
 	function isEmpty$3(string) {
 	  return string.length === 0;
 	}
@@ -8236,7 +8236,7 @@
 	  const {
 	      variant
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$2(props, _excluded$N);
+	    other = _objectWithoutPropertiesLoose$2(props, _excluded$O);
 	  let classKey = variant || '';
 	  Object.keys(other).sort().forEach(key => {
 	    if (key === 'color') {
@@ -8248,7 +8248,7 @@
 	  return classKey;
 	}
 
-	const _excluded$M = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+	const _excluded$N = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 	function isEmpty$2(obj) {
 	  return Object.keys(obj).length === 0;
 	}
@@ -8385,7 +8385,7 @@
 	        // For more details: https://github.com/mui/material-ui/pull/37908
 	        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
 	      } = inputOptions,
-	      options = _objectWithoutPropertiesLoose$2(inputOptions, _excluded$M);
+	      options = _objectWithoutPropertiesLoose$2(inputOptions, _excluded$N);
 
 	    // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
 	    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -8888,7 +8888,7 @@
 	  });
 	}
 
-	const _excluded$L = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
+	const _excluded$M = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 	const defaultTheme$3 = createTheme$1();
 	// widening Theme to any so that the consumer can own the theme structure.
 	const defaultCreateStyledComponent = systemStyled('div', {
@@ -9021,7 +9021,7 @@
 	        className,
 	        useFlexGap = false
 	      } = props,
-	      other = _objectWithoutPropertiesLoose$2(props, _excluded$L);
+	      other = _objectWithoutPropertiesLoose$2(props, _excluded$M);
 	    const ownerState = {
 	      direction,
 	      spacing,
@@ -9040,7 +9040,7 @@
 	  return Stack;
 	}
 
-	const _excluded$K = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+	const _excluded$L = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
 	  _excluded2$4 = ["type", "mode"];
 	function adaptV4Theme(inputTheme) {
 	  const {
@@ -9051,7 +9051,7 @@
 	      props = {},
 	      styleOverrides = {}
 	    } = inputTheme,
-	    other = _objectWithoutPropertiesLoose$3(inputTheme, _excluded$K);
+	    other = _objectWithoutPropertiesLoose$3(inputTheme, _excluded$L);
 	  const theme = _extends$5({}, other, {
 	    components: {}
 	  });
@@ -9264,7 +9264,7 @@
 	};
 	var green$1 = green;
 
-	const _excluded$J = ["mode", "contrastThreshold", "tonalOffset"];
+	const _excluded$K = ["mode", "contrastThreshold", "tonalOffset"];
 	const light$1 = {
 	  // The colors used to style the text.
 	  text: {
@@ -9433,7 +9433,7 @@
 	      contrastThreshold = 3,
 	      tonalOffset = 0.2
 	    } = palette,
-	    other = _objectWithoutPropertiesLoose$3(palette, _excluded$J);
+	    other = _objectWithoutPropertiesLoose$3(palette, _excluded$K);
 	  const primary = palette.primary || getDefaultPrimary(mode);
 	  const secondary = palette.secondary || getDefaultSecondary(mode);
 	  const error = palette.error || getDefaultError(mode);
@@ -9532,7 +9532,7 @@
 	  return paletteOutput;
 	}
 
-	const _excluded$I = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+	const _excluded$J = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 	function round$3(value) {
 	  return Math.round(value * 1e5) / 1e5;
 	}
@@ -9563,7 +9563,7 @@
 	      allVariants,
 	      pxToRem: pxToRem2
 	    } = _ref,
-	    other = _objectWithoutPropertiesLoose$3(_ref, _excluded$I);
+	    other = _objectWithoutPropertiesLoose$3(_ref, _excluded$J);
 	  const coef = fontSize / 14;
 	  const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
 	  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$5({
@@ -9623,7 +9623,7 @@
 	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$H = ["duration", "easing", "delay"];
+	const _excluded$I = ["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 = {
@@ -9674,7 +9674,7 @@
 	        easing: easingOption = mergedEasing.easeInOut,
 	        delay = 0
 	      } = options;
-	      _objectWithoutPropertiesLoose$3(options, _excluded$H);
+	      _objectWithoutPropertiesLoose$3(options, _excluded$I);
 	    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$5({
@@ -9700,7 +9700,7 @@
 	};
 	var zIndex$1 = zIndex;
 
-	const _excluded$G = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+	const _excluded$H = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 	function createTheme(options = {}, ...args) {
 	  const {
 	      mixins: mixinsInput = {},
@@ -9708,7 +9708,7 @@
 	      transitions: transitionsInput = {},
 	      typography: typographyInput = {}
 	    } = options,
-	    other = _objectWithoutPropertiesLoose$3(options, _excluded$G);
+	    other = _objectWithoutPropertiesLoose$3(options, _excluded$H);
 	  if (options.vars) {
 	    throw new Error(formatMuiErrorMessage(18));
 	  }
@@ -9763,12 +9763,12 @@
 	});
 	var styled$1 = styled;
 
-	const _excluded$F = ["theme"];
+	const _excluded$G = ["theme"];
 	function ThemeProvider(_ref) {
 	  let {
 	      theme: themeInput
 	    } = _ref,
-	    props = _objectWithoutPropertiesLoose$3(_ref, _excluded$F);
+	    props = _objectWithoutPropertiesLoose$3(_ref, _excluded$G);
 	  const scopedTheme = themeInput[THEME_ID];
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$5({}, props, {
 	    themeId: scopedTheme ? THEME_ID : undefined,
@@ -10593,7 +10593,7 @@
 	const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 	var touchRippleClasses$1 = touchRippleClasses;
 
-	const _excluded$E = ["center", "classes", "className"];
+	const _excluded$F = ["center", "classes", "className"];
 	let _$1 = t => t,
 	  _t$1,
 	  _t2$1,
@@ -10722,7 +10722,7 @@
 	      classes = {},
 	      className
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$E);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$F);
 	  const [ripples, setRipples] = reactExports.useState([]);
 	  const nextKey = reactExports.useRef(0);
 	  const rippleCallback = reactExports.useRef(null);
@@ -10909,7 +10909,7 @@
 	const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 	var buttonBaseClasses$1 = buttonBaseClasses;
 
-	const _excluded$D = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+	const _excluded$E = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 	const useUtilityClasses$r = ownerState => {
 	  const {
 	    disabled,
@@ -11011,7 +11011,7 @@
 	      touchRippleRef,
 	      type
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$D);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$E);
 	  const buttonRef = reactExports.useRef(null);
 	  const rippleRef = reactExports.useRef(null);
 	  const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -11221,7 +11221,7 @@
 	const ButtonGroupButtonContext = /*#__PURE__*/reactExports.createContext(undefined);
 	var ButtonGroupButtonContext$1 = ButtonGroupButtonContext;
 
-	const _excluded$C = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+	const _excluded$D = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 	const useUtilityClasses$q = ownerState => {
 	  const {
 	    color,
@@ -11448,7 +11448,7 @@
 	      type,
 	      variant = 'text'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$C);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$D);
 	  const ownerState = _extends$5({}, props, {
 	    color,
 	    component,
@@ -11820,7 +11820,7 @@
 	  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', ''));
 	});
@@ -12081,7 +12081,7 @@
 	  const appRef = React.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) {
@@ -12154,7 +12154,7 @@
 	}
 	generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-	const _excluded$B = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+	const _excluded$C = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 	const useUtilityClasses$p = ownerState => {
 	  const {
 	    color,
@@ -12222,7 +12222,7 @@
 	      titleAccess,
 	      viewBox = '0 0 24 24'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$B);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$C);
 	  const hasSvgAsChild = /*#__PURE__*/reactExports.isValidElement(children) && children.type === 'svg';
 	  const ownerState = _extends$5({}, props, {
 	    color,
@@ -12319,7 +12319,7 @@
 	}
 	generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-	const _excluded$A = ["className", "component", "elevation", "square", "variant"];
+	const _excluded$B = ["className", "component", "elevation", "square", "variant"];
 	const useUtilityClasses$o = ownerState => {
 	  const {
 	    square,
@@ -12374,7 +12374,7 @@
 	      square = false,
 	      variant = 'elevation'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$A);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$B);
 	  const ownerState = _extends$5({}, props, {
 	    component,
 	    elevation,
@@ -12397,7 +12397,7 @@
 	const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 	var iconButtonClasses$1 = iconButtonClasses;
 
-	const _excluded$z = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+	const _excluded$A = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 	const useUtilityClasses$n = ownerState => {
 	  const {
 	    classes,
@@ -12498,7 +12498,7 @@
 	      disableFocusRipple = false,
 	      size = 'medium'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$z);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$A);
 	  const ownerState = _extends$5({}, props, {
 	    edge,
 	    color,
@@ -12525,7 +12525,7 @@
 	}
 	generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
 
-	const _excluded$y = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+	const _excluded$z = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 	const useUtilityClasses$m = ownerState => {
 	  const {
 	    align,
@@ -12612,7 +12612,7 @@
 	      variant = 'body1',
 	      variantMapping = defaultVariantMapping
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$y);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$z);
 	  const ownerState = _extends$5({}, props, {
 	    align,
 	    color,
@@ -12829,7 +12829,7 @@
 	  };
 	}
 
-	const _excluded$x = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
+	const _excluded$y = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
 	/**
 	 * @ignore - do not document.
 	 * Builds the props to be passed into the slot of an unstyled component.
@@ -12846,7 +12846,7 @@
 	      ownerState,
 	      skipResolvingSlotProps = false
 	    } = parameters,
-	    rest = _objectWithoutPropertiesLoose(parameters, _excluded$x);
+	    rest = _objectWithoutPropertiesLoose(parameters, _excluded$y);
 	  const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
 	  const {
 	    props: mergedProps,
@@ -15021,7 +15021,7 @@
 	}
 	generateUtilityClasses('MuiPopper', ['root']);
 
-	const _excluded$w = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+	const _excluded$x = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
 	  _excluded2$3 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
 	function flipPlacement(placement, direction) {
 	  if (direction === 'ltr') {
@@ -15071,7 +15071,7 @@
 	      // @ts-ignore internal logic
 	      // prevent from spreading to DOM, it can come from the parent component e.g. Select.
 	    } = props,
-	    other = _objectWithoutPropertiesLoose(props, _excluded$w);
+	    other = _objectWithoutPropertiesLoose(props, _excluded$x);
 	  const tooltipRef = reactExports.useRef(null);
 	  const ownRef = useForkRef(tooltipRef, forwardedRef);
 	  const popperRef = reactExports.useRef(null);
@@ -15575,7 +15575,9 @@
 	    // clicking a checkbox to check it, hitting a button to submit a form,
 	    // and hitting left arrow to move the cursor in a text input etc.
 	    // Only special HTML elements have these default behaviors.
-	    if (event.key !== 'Escape' || !isTopModal()) {
+	    if (event.key !== 'Escape' || event.which === 229 ||
+	    // Wait until IME is settled.
+	    !isTopModal()) {
 	      return;
 	    }
 	    if (!disableEscapeKeyDown) {
@@ -15652,7 +15654,7 @@
 	  };
 	}
 
-	const _excluded$v = ["onChange", "maxRows", "minRows", "style", "value"];
+	const _excluded$w = ["onChange", "maxRows", "minRows", "style", "value"];
 	function getStyleValue(value) {
 	  return parseInt(value, 10) || 0;
 	}
@@ -15694,7 +15696,7 @@
 	      style,
 	      value
 	    } = props,
-	    other = _objectWithoutPropertiesLoose(props, _excluded$v);
+	    other = _objectWithoutPropertiesLoose(props, _excluded$w);
 	  const {
 	    current: isControlled
 	  } = reactExports.useRef(value != null);
@@ -15863,7 +15865,7 @@
 	  });
 	});
 
-	const _excluded$u = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
+	const _excluded$v = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
 	const PopperRoot = styled$1(Popper$2, {
 	  name: 'MuiPopper',
 	  slot: 'Root',
@@ -15906,7 +15908,7 @@
 	      slots,
 	      slotProps
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$u);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$v);
 	  const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
 	  const otherProps = _extends$5({
 	    anchorEl,
@@ -15993,7 +15995,7 @@
 	const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 	var inputBaseClasses$1 = inputBaseClasses;
 
-	const _excluded$t = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
+	const _excluded$u = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 	const rootOverridesResolver = (props, styles) => {
 	  const {
 	    ownerState
@@ -16224,7 +16226,7 @@
 	      type = 'text',
 	      value: valueProp
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$t);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$u);
 	  const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
 	  const {
 	    current: isControlled
@@ -16437,7 +16439,7 @@
 	const outlinedInputClasses = _extends$5({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 	var outlinedInputClasses$1 = outlinedInputClasses;
 
-	const _excluded$s = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+	const _excluded$t = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 	const styles$1 = {
 	  entering: {
 	    opacity: 1
@@ -16474,7 +16476,7 @@
 	      // eslint-disable-next-line react/prop-types
 	      TransitionComponent = Transition$1
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$s);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$t);
 	  const nodeRef = reactExports.useRef(null);
 	  const handleRef = useForkRef(nodeRef, children.ref, ref);
 	  const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -16560,7 +16562,7 @@
 	}
 	generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-	const _excluded$r = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+	const _excluded$s = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 	const useUtilityClasses$j = ownerState => {
 	  const {
 	    classes,
@@ -16615,7 +16617,7 @@
 	      TransitionComponent = Fade$1,
 	      transitionDuration
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$r);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$s);
 	  const ownerState = _extends$5({}, props, {
 	    component,
 	    invisible
@@ -16648,7 +16650,7 @@
 	'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
 	var badgeClasses$1 = badgeClasses;
 
-	const _excluded$q = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
+	const _excluded$r = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 	const RADIUS_STANDARD = 10;
 	const RADIUS_DOT = 4;
 	const useUtilityClasses$i = ownerState => {
@@ -16816,7 +16818,7 @@
 	      showZero = false,
 	      variant: variantProp = 'standard'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$q);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$r);
 	  const {
 	    badgeContent,
 	    invisible: invisibleFromHook,
@@ -16900,7 +16902,7 @@
 	}
 	generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-	const _excluded$p = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
+	const _excluded$q = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
 	const useUtilityClasses$h = ownerState => {
 	  const {
 	    classes,
@@ -16966,7 +16968,7 @@
 	      type,
 	      value
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$p);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$q);
 	  const [checked, setCheckedState] = useControlled({
 	    controlled: checkedProp,
 	    default: Boolean(defaultChecked),
@@ -17069,7 +17071,7 @@
 	const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
 	var checkboxClasses$1 = checkboxClasses;
 
-	const _excluded$o = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
+	const _excluded$p = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
 	const useUtilityClasses$g = ownerState => {
 	  const {
 	    classes,
@@ -17133,7 +17135,7 @@
 	      size = 'medium',
 	      className
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$o);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$p);
 	  const icon = indeterminate ? indeterminateIconProp : iconProp;
 	  const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
 	  const ownerState = _extends$5({}, props, {
@@ -17167,7 +17169,7 @@
 	}
 	generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
 
-	const _excluded$n = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
+	const _excluded$o = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
 	let _ = t => t,
 	  _t,
 	  _t2,
@@ -17292,7 +17294,7 @@
 	      value = 0,
 	      variant = 'indeterminate'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$n);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$o);
 	  const ownerState = _extends$5({}, props, {
 	    color,
 	    disableShrink,
@@ -17346,7 +17348,7 @@
 	}
 	generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-	const _excluded$m = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
+	const _excluded$n = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 	const useUtilityClasses$e = ownerState => {
 	  const {
 	    open,
@@ -17434,7 +17436,7 @@
 	      slots
 	      // eslint-disable-next-line react/prop-types
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$m);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$n);
 	  const propsWithDefaults = _extends$5({}, props, {
 	    closeAfterTransition,
 	    disableAutoFocus,
@@ -17537,7 +17539,7 @@
 	const dividerClasses = generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
 	var dividerClasses$1 = dividerClasses;
 
-	const _excluded$l = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
+	const _excluded$m = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
 	const useUtilityClasses$d = ownerState => {
 	  const {
 	    absolute,
@@ -17679,7 +17681,7 @@
 	      textAlign = 'center',
 	      variant = 'fullWidth'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$l);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$m);
 	  const ownerState = _extends$5({}, props, {
 	    absolute,
 	    component,
@@ -17732,7 +17734,7 @@
 	const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
 	var formControlLabelClasses$1 = formControlLabelClasses;
 
-	const _excluded$k = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
+	const _excluded$l = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
 	const useUtilityClasses$c = ownerState => {
 	  const {
 	    classes,
@@ -17826,7 +17828,7 @@
 	      required: requiredProp,
 	      slotProps = {}
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$k);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$l);
 	  const muiFormControl = useFormControl();
 	  const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
 	  const required = requiredProp != null ? requiredProp : control.props.required;
@@ -17867,8 +17869,7 @@
 	    ref: ref
 	  }, other, {
 	    children: [/*#__PURE__*/reactExports.cloneElement(control, controlProps), required ? /*#__PURE__*/jsxRuntimeExports.jsxs(Stack$1, {
-	      direction: "row",
-	      alignItems: "center",
+	      display: "block",
 	      children: [label, /*#__PURE__*/jsxRuntimeExports.jsxs(AsteriskComponent, {
 	        ownerState: ownerState,
 	        "aria-hidden": true,
@@ -17903,7 +17904,7 @@
 	// grid sizes for all breakpoints
 	...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
 
-	const _excluded$j = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
+	const _excluded$k = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
 	function getOffset$1(val) {
 	  const parse = parseFloat(val);
 	  return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
@@ -18263,7 +18264,7 @@
 	      wrap = 'wrap',
 	      zeroMinWidth = false
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$j);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$k);
 	  const rowSpacing = rowSpacingProp || spacing;
 	  const columnSpacing = columnSpacingProp || spacing;
 	  const columnsContext = reactExports.useContext(GridContext$1);
@@ -18304,7 +18305,7 @@
 	});
 	var Grid$1 = Grid;
 
-	const _excluded$i = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+	const _excluded$j = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 	function getScale(value) {
 	  return `scale(${value}, ${value ** 2})`;
 	}
@@ -18348,7 +18349,7 @@
 	      // eslint-disable-next-line react/prop-types
 	      TransitionComponent = Transition$1
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$i);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$j);
 	  const timer = reactExports.useRef();
 	  const autoTimeout = reactExports.useRef();
 	  const theme = useTheme$1();
@@ -18483,7 +18484,7 @@
 	}
 	generateUtilityClasses('MuiIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-	const _excluded$h = ["baseClassName", "className", "color", "component", "fontSize"];
+	const _excluded$i = ["baseClassName", "className", "color", "component", "fontSize"];
 	const useUtilityClasses$a = ownerState => {
 	  const {
 	    color,
@@ -18550,7 +18551,7 @@
 	      component: Component = 'span',
 	      fontSize = 'medium'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$h);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$i);
 	  const ownerState = _extends$5({}, props, {
 	    baseClassName,
 	    color,
@@ -18579,7 +18580,7 @@
 	var inputAdornmentClasses$1 = inputAdornmentClasses;
 
 	var _span$1;
-	const _excluded$g = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
+	const _excluded$h = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
 	const overridesResolver$2 = (props, styles) => {
 	  const {
 	    ownerState
@@ -18644,7 +18645,7 @@
 	      position,
 	      variant: variantProp
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$g);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$h);
 	  const muiFormControl = useFormControl() || {};
 	  let variant = variantProp;
 	  if (variantProp && muiFormControl.variant) ;
@@ -18692,7 +18693,7 @@
 	}
 	generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-	const _excluded$f = ["children", "className", "component", "dense", "disablePadding", "subheader"];
+	const _excluded$g = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 	const useUtilityClasses$8 = ownerState => {
 	  const {
 	    classes,
@@ -18740,7 +18741,7 @@
 	      disablePadding = false,
 	      subheader
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$f);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$g);
 	  const context = reactExports.useMemo(() => ({
 	    dense
 	  }), [dense]);
@@ -18778,7 +18779,7 @@
 	}
 	generateUtilityClasses('MuiListItemSecondaryAction', ['root', 'disableGutters']);
 
-	const _excluded$e = ["className"];
+	const _excluded$f = ["className"];
 	const useUtilityClasses$7 = ownerState => {
 	  const {
 	    disableGutters,
@@ -18820,7 +18821,7 @@
 	  const {
 	      className
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$e);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$f);
 	  const context = reactExports.useContext(ListContext$1);
 	  const ownerState = _extends$5({}, props, {
 	    disableGutters: context.disableGutters
@@ -18835,7 +18836,7 @@
 	ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
 	var ListItemSecondaryAction$1 = ListItemSecondaryAction;
 
-	const _excluded$d = ["className"],
+	const _excluded$e = ["className"],
 	  _excluded2$2 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
 	const overridesResolver$1 = (props, styles) => {
 	  const {
@@ -18977,7 +18978,7 @@
 	      slotProps = {},
 	      slots = {}
 	    } = props,
-	    ContainerProps = _objectWithoutPropertiesLoose$3(props.ContainerProps, _excluded$d),
+	    ContainerProps = _objectWithoutPropertiesLoose$3(props.ContainerProps, _excluded$e),
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded2$2);
 	  const context = reactExports.useContext(ListContext$1);
 	  const childContext = reactExports.useMemo(() => ({
@@ -19076,7 +19077,7 @@
 	const listItemIconClasses = generateUtilityClasses('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
 	var listItemIconClasses$1 = listItemIconClasses;
 
-	const _excluded$c = ["className"];
+	const _excluded$d = ["className"];
 	const useUtilityClasses$5 = ownerState => {
 	  const {
 	    alignItems,
@@ -19119,7 +19120,7 @@
 	  const {
 	      className
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$c);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$d);
 	  const context = reactExports.useContext(ListContext$1);
 	  const ownerState = _extends$5({}, props, {
 	    alignItems: context.alignItems
@@ -19136,7 +19137,7 @@
 	const listItemTextClasses = generateUtilityClasses('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
 	var listItemTextClasses$1 = listItemTextClasses;
 
-	const _excluded$b = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
+	const _excluded$c = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 	function nextItem(list, item, disableListWrap) {
 	  if (list === item) {
 	    return list.firstChild;
@@ -19218,7 +19219,7 @@
 	      onKeyDown,
 	      variant = 'selectedMenu'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$b);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$c);
 	  const listRef = reactExports.useRef(null);
 	  const textCriteriaRef = reactExports.useRef({
 	    keys: [],
@@ -19361,7 +19362,7 @@
 	}
 	generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
-	const _excluded$a = ["onEntering"],
+	const _excluded$b = ["onEntering"],
 	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
 	  _excluded3 = ["slotProps"];
 	function getOffsetTop(rect, vertical) {
@@ -19459,7 +19460,7 @@
 	      } = {},
 	      disableScrollLock = false
 	    } = props,
-	    TransitionProps = _objectWithoutPropertiesLoose$3(props.TransitionProps, _excluded$a),
+	    TransitionProps = _objectWithoutPropertiesLoose$3(props.TransitionProps, _excluded$b),
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded2$1);
 	  const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
 	  const paperRef = reactExports.useRef();
@@ -19686,7 +19687,7 @@
 	const menuItemClasses = generateUtilityClasses('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
 	var menuItemClasses$1 = menuItemClasses;
 
-	const _excluded$9 = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
+	const _excluded$a = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
 	const overridesResolver = (props, styles) => {
 	  const {
 	    ownerState
@@ -19808,7 +19809,7 @@
 	      tabIndex: tabIndexProp,
 	      className
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$9);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$a);
 	  const context = reactExports.useContext(ListContext$1);
 	  const childContext = reactExports.useMemo(() => ({
 	    dense: dense || context.dense || false,
@@ -19851,7 +19852,7 @@
 	var MenuItem$1 = MenuItem;
 
 	var _span;
-	const _excluded$8 = ["children", "classes", "className", "label", "notched"];
+	const _excluded$9 = ["children", "classes", "className", "label", "notched"];
 	const NotchedOutlineRoot$1 = styled$1('fieldset', {
 	  shouldForwardProp: rootShouldForwardProp
 	})({
@@ -19928,7 +19929,7 @@
 	      label,
 	      notched
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$8);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$9);
 	  const withLabel = label != null && label !== '';
 	  const ownerState = _extends$5({}, props, {
 	    notched,
@@ -19952,7 +19953,7 @@
 	  }));
 	}
 
-	const _excluded$7 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
+	const _excluded$8 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 	const useUtilityClasses$2 = ownerState => {
 	  const {
 	    classes
@@ -20071,7 +20072,7 @@
 	      slots = {},
 	      type = 'text'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$7);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$8);
 	  const classes = useUtilityClasses$2(props);
 	  const muiFormControl = useFormControl();
 	  const fcs = formControlState({
@@ -20200,7 +20201,7 @@
 	const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 	var radioClasses$1 = radioClasses;
 
-	const _excluded$6 = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
+	const _excluded$7 = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 	const useUtilityClasses$1 = ownerState => {
 	  const {
 	    classes,
@@ -20272,7 +20273,7 @@
 	      size = 'medium',
 	      className
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$6);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$7);
 	  const ownerState = _extends$5({}, props, {
 	    color,
 	    size
@@ -20315,7 +20316,7 @@
 	const tooltipClasses = generateUtilityClasses('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
 	var tooltipClasses$1 = tooltipClasses;
 
-	const _excluded$5 = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
+	const _excluded$6 = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
 	function round$1(value) {
 	  return Math.round(value * 1e5) / 1e5;
 	}
@@ -20537,7 +20538,7 @@
 	      TransitionComponent: TransitionComponentProp = Grow$1,
 	      TransitionProps
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$5);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$6);
 
 	  // to prevent runtime errors, developers will need to provide a child as a React element anyway.
 	  const children = /*#__PURE__*/reactExports.isValidElement(childrenProp) ? childrenProp : /*#__PURE__*/jsxRuntimeExports.jsx("span", {
@@ -21998,6 +21999,7 @@
 	};
 	const getFrequencyText = qFrequency => qFrequency || frequencyTextNone;
 
+	const _excluded$5 = ["backgroundColor"];
 	const getFreqFlexBasis = _ref => {
 	  let {
 	    sizes,
@@ -22079,8 +22081,8 @@
 	    freqHitsValue,
 	    styles
 	  } = _ref4;
-	  const rowFontColor = styles.content.color;
-	  const rowBackgroundColor = styles.content.backgroundColor;
+	  const _styles$content = styles.content,
+	    contentFontStyles = _objectWithoutProperties(_styles$content, _excluded$5);
 	  const selectStyle = getSelectedStyle({
 	    theme,
 	    styles,
@@ -22106,20 +22108,17 @@
 	        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,
@@ -22138,11 +22137,7 @@
 	      lineHeight: '16px',
 	      userSelect: 'none',
 	      paddingRight: '1px'
-	    }, ellipsis), {}, {
-	      fontSize: styles.content.fontSize,
-	      fontFamily: styles.content.fontFamily,
-	      color: rowFontColor
-	    }),
+	    }, ellipsis), contentFontStyles),
 	    ["& .".concat(rowColClasses.labelDense)]: {
 	      fontSize: 12
 	    },
@@ -22176,7 +22171,7 @@
 	      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), {}, {
@@ -22283,7 +22278,6 @@
 	  shouldForwardProp: p => p !== 'styles'
 	})(_ref => {
 	  let {
-	    theme,
 	    styles
 	  } = _ref;
 	  return {
@@ -22314,13 +22308,13 @@
 	      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,
@@ -26326,7 +26320,7 @@
 	  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
 	    }
 	  };
@@ -26384,6 +26378,12 @@
 	    slotProps: {
 	      root: {
 	        className: ActionsToolbarMoreElement.className
+	      },
+	      paper: {
+	        style: _objectSpread2({
+	          pointerEvents: 'auto',
+	          maxWidth: '250px'
+	        }, popoverPaperStyle)
 	      }
 	    },
 	    anchorOrigin: {
@@ -26393,12 +26393,6 @@
 	    transformOrigin: {
 	      vertical: 'top',
 	      horizontal: 'right'
-	    },
-	    PaperProps: {
-	      style: _objectSpread2({
-	        pointerEvents: 'auto',
-	        maxWidth: '250px'
-	      }, popoverPaperStyle)
 	    }
 	  }), /*#__PURE__*/React.createElement(MenuList$1, {
 	    id: "moreMenuList"
@@ -26722,28 +26716,53 @@
 
 	const TREE_PATH = '/qListObjectDef';
 	const WILDCARD = '**';
-	const StyledInputAdornment = styled$1(InputAdornment$1, {
-	  shouldForwardProp: p => p !== 'styles'
+	const StyledOutlinedInput = styled$1(OutlinedInput$1, {
+	  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$1, {
-	  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,
@@ -26757,20 +26776,18 @@
 	    direction,
 	    hide,
 	    styles
-	  } = _ref3;
+	  } = _ref2;
 	  const {
 	    translator
 	  } = reactExports.useContext(InstanceContext);
 	  const [value, setValue] = reactExports.useState('');
 	  const [wildcardOn, setWildcardOn] = reactExports.useState(false);
 	  const inputRef = reactExports.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()) {
@@ -26894,37 +26911,14 @@
 	  }
 	  return /*#__PURE__*/React.createElement(StyledOutlinedInput, {
 	    styles: styles,
-	    startAdornment: /*#__PURE__*/React.createElement(StyledInputAdornment, {
-	      position: "start",
-	      styles: styles
+	    dense: dense,
+	    isRtl: isRtl,
+	    startAdornment: /*#__PURE__*/React.createElement(InputAdornment$1, {
+	      position: "start"
 	    }, /*#__PURE__*/React.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,
@@ -26936,9 +26930,6 @@
 	    autoFocus: autoFocus,
 	    inputProps: {
 	      tabIndex: keyboard.innerTabStops ? 0 : -1,
-	      style: {
-	        textAlign: "".concat(inpuTextAlign)
-	      },
 	      'data-testid': 'search-input-field',
 	      'aria-label': translator.get('Listbox.Search.ScreenReaderInstructions')
 	    }
@@ -28136,7 +28127,7 @@
 	 * @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
@@ -28929,6 +28920,211 @@
 	  }
 	}
 
+	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;
@@ -28983,11 +29179,17 @@
 	  });
 	  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) || {};
@@ -29024,31 +29226,94 @@
 	    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
 	  };
@@ -30722,8 +30987,8 @@
 	    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'
@@ -30746,33 +31011,50 @@
 	    '&:focus-visible': {
 	      outline: 'none'
 	    }
-	  };
+	  });
 	});
-	const Title = styled$1(Typography$1)(_ref2 => {
+	const StyledGridHeader = styled$1(Grid$1, {
+	  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$1)(_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,
@@ -30821,6 +31103,7 @@
 	    checkboxes = checkboxesOption
 	  } = layout || {};
 	  const styles = getStyles({
+	    app,
 	    themeApi,
 	    theme,
 	    components,
@@ -30966,7 +31249,6 @@
 	  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);
@@ -31060,15 +31342,14 @@
 	    },
 	    isGridMode: isGridMode,
 	    "aria-label": keyboard.active ? translator.get('Listbox.ScreenReaderInstructions') : ''
-	  }, showToolbarWithTitle && /*#__PURE__*/React.createElement(Grid$1, {
+	  }, showToolbarWithTitle && /*#__PURE__*/React.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.createElement(Grid$1, {
 	    item: true,
 	    container: true,
@@ -31095,7 +31376,8 @@
 	    title: layout.title,
 	    styles: styles
 	  }, layout.title)), /*#__PURE__*/React.createElement(Grid$1, {
-	    item: true
+	    item: true,
+	    display: "flex"
 	  }, /*#__PURE__*/React.createElement(ActionsToolbar, _extends$7({
 	    direction: direction
 	  }, getActionToolbarProps(isToolbarDetached))))), /*#__PURE__*/React.createElement(Grid$1, {
@@ -31131,11 +31413,11 @@
 	    className: classes$4.listboxWrapper
 	  }, isInvalid ? /*#__PURE__*/React.createElement(ListBoxError, {
 	    text: errorText
-	  }) : /*#__PURE__*/React.createElement(AutoSizer, null, _ref5 => {
+	  }) : /*#__PURE__*/React.createElement(AutoSizer, null, _ref6 => {
 	    let {
 	      height,
 	      width
-	    } = _ref5;
+	    } = _ref6;
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
 	      app: app,
@@ -31177,10 +31459,10 @@
 	  })))));
 	}
 	const ListBoxInlineMemoed = React.memo(ListBoxInline);
-	function IsolateUseLayoutWrapper(_ref6) {
+	function IsolateUseLayoutWrapper(_ref7) {
 	  let {
 	    options = {}
-	  } = _ref6;
+	  } = _ref7;
 	  const {
 	    model
 	  } = options;
@@ -33595,117 +33877,33 @@
 	  }));
 	}
 
-	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 = reactExports.useMemo(() => {
+	    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
@@ -34036,9 +34234,14 @@
 	    enter: null,
 	    leave: null
 	  });
-	  const [bgColor, setBgColor] = reactExports.useState(undefined);
-	  const [bgImage, setBgImage] = reactExports.useState(undefined); // {url: "", size: "", pos: ""}
-	  const [titleStyles, setTitleStyles] = reactExports.useState(undefined);
+	  const {
+	    titleStyles,
+	    bgColor,
+	    bgImage,
+	    border,
+	    borderRadius,
+	    boxShadow
+	  } = useStyling(layout, halo.public.theme, halo.app, themeName);
 	  const focusHandler = reactExports.useRef({
 	    focusToolbarButton(last) {
 	      // eslint-disable-next-line react/no-this-in-sfc
@@ -34048,18 +34251,6 @@
 	  reactExports.useEffect(() => {
 	    eventmixin(focusHandler.current);
 	  }, []);
-	  reactExports.useEffect(() => {
-	    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) {
@@ -34250,7 +34441,11 @@
 	      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,
@@ -37192,6 +37387,17 @@
 	    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,
@@ -37232,6 +37438,10 @@
 	          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 => {
@@ -37241,7 +37451,7 @@
 	          });
 	          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;
 	          }
@@ -37251,7 +37461,7 @@
 	          return {
 	            model: vs.model,
 	            id: c.name,
-	            bounds: c.bounds,
+	            bounds: getBounds(c, columns, rows),
 	            cellRef: React.createRef(),
 	            currentId: uid(),
 	            mounted,