@nebula.js/stardust 4.6.1 → 4.7.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.6.1
+* @nebula.js/stardust v4.7.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -2306,7 +2306,7 @@ function extend$3(parent, definition) {
   return prototype;
 }
 
-function Color() {}
+function Color$1() {}
 
 var darker = 0.7;
 var brighter = 1 / darker;
@@ -2473,7 +2473,7 @@ var named = {
   yellowgreen: 0x9acd32
 };
 
-define(Color, color$3, {
+define(Color$1, color$3, {
   copy(channels) {
     return Object.assign(new this.constructor, this, channels);
   },
@@ -2509,15 +2509,15 @@ function color$3(format) {
   format = (format + "").trim().toLowerCase();
   return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
       : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
-      : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
-      : l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
+      : l === 8 ? rgba$1(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
+      : l === 4 ? rgba$1((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
       : null) // invalid hex
       : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
       : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
-      : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
-      : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
-      : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
-      : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
+      : (m = reRgbaInteger.exec(format)) ? rgba$1(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
+      : (m = reRgbaPercent.exec(format)) ? rgba$1(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
+      : (m = reHslPercent.exec(format)) ? hsla$1(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
+      : (m = reHslaPercent.exec(format)) ? hsla$1(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
       : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
       : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
       : null;
@@ -2527,19 +2527,19 @@ function rgbn(n) {
   return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
 }
 
-function rgba(r, g, b, a) {
+function rgba$1(r, g, b, a) {
   if (a <= 0) r = g = b = NaN;
   return new Rgb(r, g, b, a);
 }
 
 function rgbConvert(o) {
-  if (!(o instanceof Color)) o = color$3(o);
+  if (!(o instanceof Color$1)) o = color$3(o);
   if (!o) return new Rgb;
   o = o.rgb();
   return new Rgb(o.r, o.g, o.b, o.opacity);
 }
 
-function rgb(r, g, b, opacity) {
+function rgb$1(r, g, b, opacity) {
   return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
 }
 
@@ -2550,7 +2550,7 @@ function Rgb(r, g, b, opacity) {
   this.opacity = +opacity;
 }
 
-define(Rgb, rgb, extend$3(Color, {
+define(Rgb, rgb$1, extend$3(Color$1, {
   brighter(k) {
     k = k == null ? brighter : Math.pow(brighter, k);
     return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
@@ -2579,11 +2579,11 @@ define(Rgb, rgb, extend$3(Color, {
 }));
 
 function rgb_formatHex() {
-  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}`;
+  return `#${hex$1(this.r)}${hex$1(this.g)}${hex$1(this.b)}`;
 }
 
 function rgb_formatHex8() {
-  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}${hex((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
+  return `#${hex$1(this.r)}${hex$1(this.g)}${hex$1(this.b)}${hex$1((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
 }
 
 function rgb_formatRgb() {
@@ -2599,12 +2599,12 @@ function clampi(value) {
   return Math.max(0, Math.min(255, Math.round(value) || 0));
 }
 
-function hex(value) {
+function hex$1(value) {
   value = clampi(value);
   return (value < 16 ? "0" : "") + value.toString(16);
 }
 
-function hsla(h, s, l, a) {
+function hsla$1(h, s, l, a) {
   if (a <= 0) h = s = l = NaN;
   else if (l <= 0 || l >= 1) h = s = NaN;
   else if (s <= 0) h = NaN;
@@ -2613,7 +2613,7 @@ function hsla(h, s, l, a) {
 
 function hslConvert(o) {
   if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
-  if (!(o instanceof Color)) o = color$3(o);
+  if (!(o instanceof Color$1)) o = color$3(o);
   if (!o) return new Hsl;
   if (o instanceof Hsl) return o;
   o = o.rgb();
@@ -2637,7 +2637,7 @@ function hslConvert(o) {
   return new Hsl(h, s, l, o.opacity);
 }
 
-function hsl(h, s, l, opacity) {
+function hsl$1(h, s, l, opacity) {
   return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
 }
 
@@ -2648,7 +2648,7 @@ function Hsl(h, s, l, opacity) {
   this.opacity = +opacity;
 }
 
-define(Hsl, hsl, extend$3(Color, {
+define(Hsl, hsl$1, extend$3(Color$1, {
   brighter(k) {
     k = k == null ? brighter : Math.pow(brighter, k);
     return new Hsl(this.h, this.s, this.l * k, this.opacity);
@@ -3241,7 +3241,7 @@ function blend(c1, c2, t) {
   const g = Math.floor(c1.g + (c2.g - c1.g) * t);
   const b = Math.floor(c1.b + (c2.b - c1.b) * t);
   const a = Math.floor(c1.opacity + (c2.opacity - c1.opacity) * t);
-  return rgb(r, g, b, a);
+  return rgb$1(r, g, b, a);
 }
 class ColorScale {
   constructor(nanColor) {
@@ -4073,10 +4073,10 @@ function useEventCallback(fn) {
   useEnhancedEffect$1(() => {
     ref.current = fn;
   });
-  return React.useCallback((...args) =>
+  return React.useRef((...args) =>
   // @ts-expect-error hide `this`
   // tslint:disable-next-line:ban-comma-operator
-  (0, ref.current)(...args), []);
+  (0, ref.current)(...args)).current;
 }
 
 function useForkRef(...refs) {
@@ -5670,7 +5670,7 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @mui/styled-engine v5.14.13
+ * @mui/styled-engine v5.14.17
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7934,7 +7934,7 @@ function createPalette(palette) {
 }
 
 const _excluded$9 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
-function round(value) {
+function round$1(value) {
   return Math.round(value * 1e5) / 1e5;
 }
 const caseAllCaps = {
@@ -7974,7 +7974,7 @@ function createTypography(palette, typography) {
     // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
     lineHeight
   }, fontFamily === defaultFontFamily ? {
-    letterSpacing: `${round(letterSpacing / size)}em`
+    letterSpacing: `${round$1(letterSpacing / size)}em`
   } : {}, casing, allVariants);
   const variants = {
     h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
@@ -8330,6 +8330,7 @@ const light = {
       excluded: '#BEBEBE',
       selectedExcluded: '#BEBEBE',
       possible: colors.grey100,
+      selectedContrastText: colors.grey100,
       mainContrastText: colors.grey100,
       alternativeContrastText: colors.grey25,
       excludedContrastText: colors.grey25,
@@ -8397,6 +8398,7 @@ const dark = {
       excluded: colors.grey10,
       selectedExcluded: colors.grey10,
       possible: colors.grey80,
+      selectedContrastText: colors.grey100,
       mainContrastText: colors.grey100,
       alternativeContrastText: colors.grey100,
       excludedContrastText: colors.grey100,
@@ -8549,7 +8551,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "2504" ;
+const NEBULA_VERSION_HASH = "d794" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8810,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.1" );
+  element.setAttribute('data-nebulajs-version', "4.7.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -10313,7 +10315,6 @@ const StyledCheckbox = styled$1(Checkbox, {
   shouldForwardProp: p => p !== 'styles'
 })(_ref => {
   let {
-    theme,
     styles
   } = _ref;
   return {
@@ -10344,13 +10345,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,
@@ -14909,7 +14910,7 @@ const StyledInputAdornment = styled$1(InputAdornment, {
     styles
   } = _ref;
   return {
-    color: styles.content.color
+    color: styles.search.color
   };
 });
 const StyledOutlinedInput = styled$1(OutlinedInput, {
@@ -14919,8 +14920,10 @@ const StyledOutlinedInput = styled$1(OutlinedInput, {
     styles
   } = _ref2;
   return {
-    color: styles.content.color,
-    display: 'flex'
+    display: 'flex',
+    '& .MuiInputBase-root': {
+      color: styles.search.color
+    }
   };
 });
 function ListBoxSearch(_ref3) {
@@ -15539,297 +15542,1614 @@ function hasSelections(layout) {
   return totalCounts > 0;
 }
 
-const pink = {
-  50: '#fce4ec',
-  100: '#f8bbd0',
-  200: '#f48fb1',
-  300: '#f06292',
-  400: '#ec407a',
-  500: '#e91e63',
-  600: '#d81b60',
-  700: '#c2185b',
-  800: '#ad1457',
-  900: '#880e4f',
-  A100: '#ff80ab',
-  A200: '#ff4081',
-  A400: '#f50057',
-  A700: '#c51162'
-};
-var pink$1 = pink;
-
-const deepPurple = {
-  50: '#ede7f6',
-  100: '#d1c4e9',
-  200: '#b39ddb',
-  300: '#9575cd',
-  400: '#7e57c2',
-  500: '#673ab7',
-  600: '#5e35b1',
-  700: '#512da8',
-  800: '#4527a0',
-  900: '#311b92',
-  A100: '#b388ff',
-  A200: '#7c4dff',
-  A400: '#651fff',
-  A700: '#6200ea'
-};
-var deepPurple$1 = deepPurple;
-
-const indigo = {
-  50: '#e8eaf6',
-  100: '#c5cae9',
-  200: '#9fa8da',
-  300: '#7986cb',
-  400: '#5c6bc0',
-  500: '#3f51b5',
-  600: '#3949ab',
-  700: '#303f9f',
-  800: '#283593',
-  900: '#1a237e',
-  A100: '#8c9eff',
-  A200: '#536dfe',
-  A400: '#3d5afe',
-  A700: '#304ffe'
-};
-var indigo$1 = indigo;
-
-const cyan = {
-  50: '#e0f7fa',
-  100: '#b2ebf2',
-  200: '#80deea',
-  300: '#4dd0e1',
-  400: '#26c6da',
-  500: '#00bcd4',
-  600: '#00acc1',
-  700: '#0097a7',
-  800: '#00838f',
-  900: '#006064',
-  A100: '#84ffff',
-  A200: '#18ffff',
-  A400: '#00e5ff',
-  A700: '#00b8d4'
-};
-var cyan$1 = cyan;
-
-const teal = {
-  50: '#e0f2f1',
-  100: '#b2dfdb',
-  200: '#80cbc4',
-  300: '#4db6ac',
-  400: '#26a69a',
-  500: '#009688',
-  600: '#00897b',
-  700: '#00796b',
-  800: '#00695c',
-  900: '#004d40',
-  A100: '#a7ffeb',
-  A200: '#64ffda',
-  A400: '#1de9b6',
-  A700: '#00bfa5'
-};
-var teal$1 = teal;
-
-const lightGreen = {
-  50: '#f1f8e9',
-  100: '#dcedc8',
-  200: '#c5e1a5',
-  300: '#aed581',
-  400: '#9ccc65',
-  500: '#8bc34a',
-  600: '#7cb342',
-  700: '#689f38',
-  800: '#558b2f',
-  900: '#33691e',
-  A100: '#ccff90',
-  A200: '#b2ff59',
-  A400: '#76ff03',
-  A700: '#64dd17'
-};
-var lightGreen$1 = lightGreen;
-
-const lime = {
-  50: '#f9fbe7',
-  100: '#f0f4c3',
-  200: '#e6ee9c',
-  300: '#dce775',
-  400: '#d4e157',
-  500: '#cddc39',
-  600: '#c0ca33',
-  700: '#afb42b',
-  800: '#9e9d24',
-  900: '#827717',
-  A100: '#f4ff81',
-  A200: '#eeff41',
-  A400: '#c6ff00',
-  A700: '#aeea00'
-};
-var lime$1 = lime;
-
-const yellow = {
-  50: '#fffde7',
-  100: '#fff9c4',
-  200: '#fff59d',
-  300: '#fff176',
-  400: '#ffee58',
-  500: '#ffeb3b',
-  600: '#fdd835',
-  700: '#fbc02d',
-  800: '#f9a825',
-  900: '#f57f17',
-  A100: '#ffff8d',
-  A200: '#ffff00',
-  A400: '#ffea00',
-  A700: '#ffd600'
-};
-var yellow$1 = yellow;
-
-const amber = {
-  50: '#fff8e1',
-  100: '#ffecb3',
-  200: '#ffe082',
-  300: '#ffd54f',
-  400: '#ffca28',
-  500: '#ffc107',
-  600: '#ffb300',
-  700: '#ffa000',
-  800: '#ff8f00',
-  900: '#ff6f00',
-  A100: '#ffe57f',
-  A200: '#ffd740',
-  A400: '#ffc400',
-  A700: '#ffab00'
-};
-var amber$1 = amber;
-
-const deepOrange = {
-  50: '#fbe9e7',
-  100: '#ffccbc',
-  200: '#ffab91',
-  300: '#ff8a65',
-  400: '#ff7043',
-  500: '#ff5722',
-  600: '#f4511e',
-  700: '#e64a19',
-  800: '#d84315',
-  900: '#bf360c',
-  A100: '#ff9e80',
-  A200: '#ff6e40',
-  A400: '#ff3d00',
-  A700: '#dd2c00'
-};
-var deepOrange$1 = deepOrange;
-
-const brown = {
-  50: '#efebe9',
-  100: '#d7ccc8',
-  200: '#bcaaa4',
-  300: '#a1887f',
-  400: '#8d6e63',
-  500: '#795548',
-  600: '#6d4c41',
-  700: '#5d4037',
-  800: '#4e342e',
-  900: '#3e2723',
-  A100: '#d7ccc8',
-  A200: '#bcaaa4',
-  A400: '#8d6e63',
-  A700: '#5d4037'
-};
-var brown$1 = brown;
-
-const blueGrey = {
-  50: '#eceff1',
-  100: '#cfd8dc',
-  200: '#b0bec5',
-  300: '#90a4ae',
-  400: '#78909c',
-  500: '#607d8b',
-  600: '#546e7a',
-  700: '#455a64',
-  800: '#37474f',
-  900: '#263238',
-  A100: '#cfd8dc',
-  A200: '#b0bec5',
-  A400: '#78909c',
-  A700: '#455a64'
-};
-var blueGrey$1 = blueGrey;
-
-var namedColors = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	amber: amber$1,
-	blue: blue$1,
-	blueGrey: blueGrey$1,
-	brown: brown$1,
-	common: common$1,
-	cyan: cyan$1,
-	deepOrange: deepOrange$1,
-	deepPurple: deepPurple$1,
-	green: green$1,
-	grey: grey$1,
-	indigo: indigo$1,
-	lightBlue: lightBlue$1,
-	lightGreen: lightGreen$1,
-	lime: lime$1,
-	orange: orange$1,
-	pink: pink$1,
-	purple: purple$1,
-	red: red$1,
-	teal: teal$1,
-	yellow: yellow$1
-});
+const colorStruct = {
+  aliceblue: {
+    r: 240,
+    g: 248,
+    b: 255
+  },
+  antiquewhite: {
+    r: 250,
+    g: 235,
+    b: 215
+  },
+  aqua: {
+    r: 0,
+    g: 255,
+    b: 255
+  },
+  aquamarine: {
+    r: 127,
+    g: 255,
+    b: 212
+  },
+  azure: {
+    r: 240,
+    g: 255,
+    b: 255
+  },
+  beige: {
+    r: 245,
+    g: 245,
+    b: 220
+  },
+  bisque: {
+    r: 255,
+    g: 228,
+    b: 196
+  },
+  black: {
+    r: 0,
+    g: 0,
+    b: 0
+  },
+  blanchedalmond: {
+    r: 255,
+    g: 235,
+    b: 205
+  },
+  blue: {
+    r: 0,
+    g: 0,
+    b: 255
+  },
+  blueviolet: {
+    r: 138,
+    g: 43,
+    b: 226
+  },
+  brown: {
+    r: 165,
+    g: 42,
+    b: 42
+  },
+  burlywood: {
+    r: 222,
+    g: 184,
+    b: 135
+  },
+  cadetblue: {
+    r: 95,
+    g: 158,
+    b: 160
+  },
+  chartreuse: {
+    r: 127,
+    g: 255,
+    b: 0
+  },
+  chocolate: {
+    r: 210,
+    g: 105,
+    b: 30
+  },
+  coral: {
+    r: 255,
+    g: 127,
+    b: 80
+  },
+  cornflowerblue: {
+    r: 100,
+    g: 149,
+    b: 237
+  },
+  cornsilk: {
+    r: 255,
+    g: 248,
+    b: 220
+  },
+  crimson: {
+    r: 220,
+    g: 20,
+    b: 60
+  },
+  cyan: {
+    r: 0,
+    g: 255,
+    b: 255
+  },
+  darkblue: {
+    r: 0,
+    g: 0,
+    b: 139
+  },
+  darkcyan: {
+    r: 0,
+    g: 139,
+    b: 139
+  },
+  darkgoldenrod: {
+    r: 184,
+    g: 134,
+    b: 11
+  },
+  darkgray: {
+    r: 169,
+    g: 169,
+    b: 169
+  },
+  darkgreen: {
+    r: 0,
+    g: 100,
+    b: 0
+  },
+  darkgrey: {
+    r: 169,
+    g: 169,
+    b: 169
+  },
+  darkkhaki: {
+    r: 189,
+    g: 183,
+    b: 107
+  },
+  darkmagenta: {
+    r: 139,
+    g: 0,
+    b: 139
+  },
+  darkolivegreen: {
+    r: 85,
+    g: 107,
+    b: 47
+  },
+  darkorange: {
+    r: 255,
+    g: 140,
+    b: 0
+  },
+  darkorchid: {
+    r: 153,
+    g: 50,
+    b: 204
+  },
+  darkred: {
+    r: 139,
+    g: 0,
+    b: 0
+  },
+  darksalmon: {
+    r: 233,
+    g: 150,
+    b: 122
+  },
+  darkseagreen: {
+    r: 143,
+    g: 188,
+    b: 143
+  },
+  darkslateblue: {
+    r: 72,
+    g: 61,
+    b: 139
+  },
+  darkslategray: {
+    r: 47,
+    g: 79,
+    b: 79
+  },
+  darkslategrey: {
+    r: 47,
+    g: 79,
+    b: 79
+  },
+  darkturquoise: {
+    r: 0,
+    g: 206,
+    b: 209
+  },
+  darkviolet: {
+    r: 148,
+    g: 0,
+    b: 211
+  },
+  deeppink: {
+    r: 255,
+    g: 20,
+    b: 147
+  },
+  deepskyblue: {
+    r: 0,
+    g: 191,
+    b: 255
+  },
+  dimgray: {
+    r: 105,
+    g: 105,
+    b: 105
+  },
+  dimgrey: {
+    r: 105,
+    g: 105,
+    b: 105
+  },
+  dodgerblue: {
+    r: 30,
+    g: 144,
+    b: 255
+  },
+  firebrick: {
+    r: 178,
+    g: 34,
+    b: 34
+  },
+  floralwhite: {
+    r: 255,
+    g: 250,
+    b: 240
+  },
+  forestgreen: {
+    r: 34,
+    g: 139,
+    b: 34
+  },
+  fuchsia: {
+    r: 255,
+    g: 0,
+    b: 255
+  },
+  gainsboro: {
+    r: 220,
+    g: 220,
+    b: 220
+  },
+  ghostwhite: {
+    r: 248,
+    g: 248,
+    b: 255
+  },
+  gold: {
+    r: 255,
+    g: 215,
+    b: 0
+  },
+  goldenrod: {
+    r: 218,
+    g: 165,
+    b: 32
+  },
+  gray: {
+    r: 128,
+    g: 128,
+    b: 128
+  },
+  green: {
+    r: 0,
+    g: 128,
+    b: 0
+  },
+  greenyellow: {
+    r: 173,
+    g: 255,
+    b: 47
+  },
+  grey: {
+    r: 128,
+    g: 128,
+    b: 128
+  },
+  honeydew: {
+    r: 240,
+    g: 255,
+    b: 240
+  },
+  hotpink: {
+    r: 255,
+    g: 105,
+    b: 180
+  },
+  indianred: {
+    r: 205,
+    g: 92,
+    b: 92
+  },
+  indigo: {
+    r: 75,
+    g: 0,
+    b: 130
+  },
+  ivory: {
+    r: 255,
+    g: 255,
+    b: 240
+  },
+  khaki: {
+    r: 240,
+    g: 230,
+    b: 140
+  },
+  lavender: {
+    r: 230,
+    g: 230,
+    b: 250
+  },
+  lavenderblush: {
+    r: 255,
+    g: 240,
+    b: 245
+  },
+  lawngreen: {
+    r: 124,
+    g: 252,
+    b: 0
+  },
+  lemonchiffon: {
+    r: 255,
+    g: 250,
+    b: 205
+  },
+  lightblue: {
+    r: 173,
+    g: 216,
+    b: 230
+  },
+  lightcoral: {
+    r: 240,
+    g: 128,
+    b: 128
+  },
+  lightcyan: {
+    r: 224,
+    g: 255,
+    b: 255
+  },
+  lightgoldenrodyellow: {
+    r: 250,
+    g: 250,
+    b: 210
+  },
+  lightgray: {
+    r: 211,
+    g: 211,
+    b: 211
+  },
+  lightgreen: {
+    r: 144,
+    g: 238,
+    b: 144
+  },
+  lightgrey: {
+    r: 211,
+    g: 211,
+    b: 211
+  },
+  lightpink: {
+    r: 255,
+    g: 182,
+    b: 193
+  },
+  lightsalmon: {
+    r: 255,
+    g: 160,
+    b: 122
+  },
+  lightseagreen: {
+    r: 32,
+    g: 178,
+    b: 170
+  },
+  lightskyblue: {
+    r: 135,
+    g: 206,
+    b: 250
+  },
+  lightslategray: {
+    r: 119,
+    g: 136,
+    b: 153
+  },
+  lightslategrey: {
+    r: 119,
+    g: 136,
+    b: 153
+  },
+  lightsteelblue: {
+    r: 176,
+    g: 196,
+    b: 222
+  },
+  lightyellow: {
+    r: 255,
+    g: 255,
+    b: 224
+  },
+  lime: {
+    r: 0,
+    g: 255,
+    b: 0
+  },
+  limegreen: {
+    r: 50,
+    g: 205,
+    b: 50
+  },
+  linen: {
+    r: 250,
+    g: 240,
+    b: 230
+  },
+  magenta: {
+    r: 255,
+    g: 0,
+    b: 255
+  },
+  maroon: {
+    r: 128,
+    g: 0,
+    b: 0
+  },
+  mediumaquamarine: {
+    r: 102,
+    g: 205,
+    b: 170
+  },
+  mediumblue: {
+    r: 0,
+    g: 0,
+    b: 205
+  },
+  mediumorchid: {
+    r: 186,
+    g: 85,
+    b: 211
+  },
+  mediumpurple: {
+    r: 147,
+    g: 112,
+    b: 219
+  },
+  mediumseagreen: {
+    r: 60,
+    g: 179,
+    b: 113
+  },
+  mediumslateblue: {
+    r: 123,
+    g: 104,
+    b: 238
+  },
+  mediumspringgreen: {
+    r: 0,
+    g: 250,
+    b: 154
+  },
+  mediumturquoise: {
+    r: 72,
+    g: 209,
+    b: 204
+  },
+  mediumvioletred: {
+    r: 199,
+    g: 21,
+    b: 133
+  },
+  midnightblue: {
+    r: 25,
+    g: 25,
+    b: 112
+  },
+  mintcream: {
+    r: 245,
+    g: 255,
+    b: 250
+  },
+  mistyrose: {
+    r: 255,
+    g: 228,
+    b: 225
+  },
+  moccasin: {
+    r: 255,
+    g: 228,
+    b: 181
+  },
+  navajowhite: {
+    r: 255,
+    g: 222,
+    b: 173
+  },
+  navy: {
+    r: 0,
+    g: 0,
+    b: 128
+  },
+  oldlace: {
+    r: 253,
+    g: 245,
+    b: 230
+  },
+  olive: {
+    r: 128,
+    g: 128,
+    b: 0
+  },
+  olivedrab: {
+    r: 107,
+    g: 142,
+    b: 35
+  },
+  orange: {
+    r: 255,
+    g: 165,
+    b: 0
+  },
+  orangered: {
+    r: 255,
+    g: 69,
+    b: 0
+  },
+  orchid: {
+    r: 218,
+    g: 112,
+    b: 214
+  },
+  palegoldenrod: {
+    r: 238,
+    g: 232,
+    b: 170
+  },
+  palegreen: {
+    r: 152,
+    g: 251,
+    b: 152
+  },
+  paleturquoise: {
+    r: 175,
+    g: 238,
+    b: 238
+  },
+  palevioletred: {
+    r: 219,
+    g: 112,
+    b: 147
+  },
+  papayawhip: {
+    r: 255,
+    g: 239,
+    b: 213
+  },
+  peachpuff: {
+    r: 255,
+    g: 218,
+    b: 185
+  },
+  peru: {
+    r: 205,
+    g: 133,
+    b: 63
+  },
+  pink: {
+    r: 255,
+    g: 192,
+    b: 203
+  },
+  plum: {
+    r: 221,
+    g: 160,
+    b: 221
+  },
+  powderblue: {
+    r: 176,
+    g: 224,
+    b: 230
+  },
+  purple: {
+    r: 128,
+    g: 0,
+    b: 128
+  },
+  red: {
+    r: 255,
+    g: 0,
+    b: 0
+  },
+  rosybrown: {
+    r: 188,
+    g: 143,
+    b: 143
+  },
+  royalblue: {
+    r: 65,
+    g: 105,
+    b: 225
+  },
+  saddlebrown: {
+    r: 139,
+    g: 69,
+    b: 19
+  },
+  salmon: {
+    r: 250,
+    g: 128,
+    b: 114
+  },
+  sandybrown: {
+    r: 244,
+    g: 164,
+    b: 96
+  },
+  seagreen: {
+    r: 46,
+    g: 139,
+    b: 87
+  },
+  seashell: {
+    r: 255,
+    g: 245,
+    b: 238
+  },
+  sienna: {
+    r: 160,
+    g: 82,
+    b: 45
+  },
+  silver: {
+    r: 192,
+    g: 192,
+    b: 192
+  },
+  skyblue: {
+    r: 135,
+    g: 206,
+    b: 235
+  },
+  slateblue: {
+    r: 106,
+    g: 90,
+    b: 205
+  },
+  slategray: {
+    r: 112,
+    g: 128,
+    b: 144
+  },
+  slategrey: {
+    r: 112,
+    g: 128,
+    b: 144
+  },
+  snow: {
+    r: 255,
+    g: 250,
+    b: 250
+  },
+  springgreen: {
+    r: 0,
+    g: 255,
+    b: 127
+  },
+  steelblue: {
+    r: 70,
+    g: 130,
+    b: 180
+  },
+  tan: {
+    r: 210,
+    g: 180,
+    b: 140
+  },
+  teal: {
+    r: 0,
+    g: 128,
+    b: 128
+  },
+  thistle: {
+    r: 216,
+    g: 191,
+    b: 216
+  },
+  tomato: {
+    r: 255,
+    g: 99,
+    b: 71
+  },
+  transparent: {
+    r: 255,
+    g: 255,
+    b: 255,
+    a: 0
+  },
+  turquoise: {
+    r: 64,
+    g: 224,
+    b: 208
+  },
+  violet: {
+    r: 238,
+    g: 130,
+    b: 238
+  },
+  wheat: {
+    r: 245,
+    g: 222,
+    b: 179
+  },
+  white: {
+    r: 255,
+    g: 255,
+    b: 255
+  },
+  whitesmoke: {
+    r: 245,
+    g: 245,
+    b: 245
+  },
+  yellow: {
+    r: 255,
+    g: 255,
+    b: 0
+  },
+  yellowgreen: {
+    r: 154,
+    g: 205,
+    b: 50
+  }
+};
+
+/* eslint-disable no-param-reassign */
+/* eslint-disable camelcase */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable no-cond-assign */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable no-underscore-dangle */
 
-const LIGHT = '#FFF';
-const DARK = '#000';
-const TRANSPARENT = 'rgba(255, 255, 255, 0)';
 
 /**
- * If needed, converts a named color to a more reliable CSS color format.
- *
- * @param {string} c The CSS color.
- * @returns {string} Converted color or same color as before.
+ * Module which defines a color object
  * @private
+ * @exports objects.views/charts/representation/color
+ * @expose module:objects.views/charts/representation/color~Color
+ */
+
+// color formats
+const rgb = /^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)$/i;
+const rgba = /^rgba\((\d{1,3}),(\d{1,3}),(\d{1,3}),(\d(\.\d+)?)\)$/i;
+const hex = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/i;
+const hexShort = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/i;
+const hsl = /^hsl\(\s*(\d+(\.\d+)?)\s*,\s*(\d+(\.\d+)?%?)\s*,\s*(\d+(\.\d+)?%?)\s*\)$/i;
+const hsla = /^hsla\(\s*(\d+(\.\d+)?)\s*,\s*(\d+(\.\d+)?%?)\s*,\s*(\d+(\.\d+)?%?)\s*,(\d(\.\d+)?)\)$/i;
+const {
+  floor
+} = Math;
+const {
+  round
+} = Math;
+
+/**
+ * @class
+ * @classdesc Class which provides color transformation functionality
+ * @description This is a constructor.
+ * @private This is a constructor.
+ * @param {object} - Parameters to create a color from different notations
  * @example
- *  convertNamedColor('red') => '#FF0000'
+ * // a few ways of instantiating a red color
+ * var red;
+ * red = new Color(255, 0, 0, 1); // rgba as parameters
+ * red = new Color('#ff0000'); // hex
+ * red = new Color('rgb(255,0,0)');//rgb as string
+ * red = new Color('hsl(0, 100, 50)');// hsl as string
+ * red = new Color(16711680);// uint
  */
-function convertNamedColor(c) {
-  let out = c;
-  try {
-    if (c in namedColors) {
-      ({
-        500: out
-      } = namedColors[c]); // 500 exposes the standard color
-    } else if (c === 'transparent') {
-      out = TRANSPARENT;
+class Color {
+  constructor() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-  } catch (err) {
-    out = c;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    let a = 1;
+    let h;
+    let s;
+    let lcs;
+    let l;
+    let v;
+    let c;
+    let h_;
+    let x;
+    let rgb_;
+    let m;
+    let matches;
+    let colorString;
+    this._invalid = false;
+    if (args[0] instanceof Color) {
+      r = args[0]._r;
+      g = args[0]._g;
+      b = args[0]._b;
+      a = args[0]._a;
+      this._invalid = args[0]._invalid;
+    } else if (args.length < 3) {
+      if (typeof args[0] === 'string') {
+        colorString = args[0];
+        if (matches = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(colorString)) {
+          r = parseInt(matches[1], 10);
+          g = parseInt(matches[2], 10);
+          b = parseInt(matches[3], 10);
+        } else if (matches = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d(\.\d+)?)\s*\)$/i.exec(colorString)) {
+          // rgba(1, 2, 3, 0.4)
+          r = parseInt(matches[1], 10);
+          g = parseInt(matches[2], 10);
+          b = parseInt(matches[3], 10);
+          a = parseFloat(matches[4]);
+        } else if (matches = /^ARGB\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(colorString)) {
+          // ARGB(255,255,255,255)
+          a = parseInt(matches[1], 10) / 255;
+          r = parseInt(matches[2], 10);
+          g = parseInt(matches[3], 10);
+          b = parseInt(matches[4], 10);
+        } else if (matches = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/i.exec(colorString)) {
+          // #aBc123
+          r = parseInt(matches[1], 16);
+          g = parseInt(matches[2], 16);
+          b = parseInt(matches[3], 16);
+          a = 1;
+        } else if (matches = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/i.exec(colorString)) {
+          // #a5F
+          r = parseInt(matches[1] + matches[1], 16);
+          g = parseInt(matches[2] + matches[2], 16);
+          b = parseInt(matches[3] + matches[3], 16);
+          a = 1;
+        } else if (matches = /^hsl\(\s*(\d+(\.\d+)?)\s*,\s*(\d+(\.\d+)?%?)\s*,\s*(\d+(\.\d+)?%?)\s*\)$/i.exec(colorString)) {
+          // hsl(1, 2, 3)
+          h = parseFloat(matches[1]);
+          s = parseFloat(matches[3]);
+          l = parseFloat(matches[5]);
+          h %= 360;
+          s /= 100;
+          l /= 100;
+          h = h < 0 ? 0 : h > 360 ? 360 : h;
+          s = s < 0 ? 0 : s > 1 ? 1 : s;
+          l = l < 0 ? 0 : l > 1 ? 1 : l;
+          c = l <= 0.5 ? 2 * l * s : (2 - 2 * l) * s;
+          h_ = h / 60;
+          x = c * (1 - Math.abs(h_ % 2 - 1));
+          rgb_ = [];
+          h_ = Math.floor(h_);
+          switch (h_) {
+            case 0:
+              rgb_ = [c, x, 0];
+              break;
+            case 1:
+              rgb_ = [x, c, 0];
+              break;
+            case 2:
+              rgb_ = [0, c, x];
+              break;
+            case 3:
+              rgb_ = [0, x, c];
+              break;
+            case 4:
+              rgb_ = [x, 0, c];
+              break;
+            case 5:
+              rgb_ = [c, 0, x];
+              break;
+            default:
+              rgb_ = [0, 0, 0];
+          }
+          m = l - 0.5 * c;
+          r = rgb_[0] + m;
+          g = rgb_[1] + m;
+          b = rgb_[2] + m;
+          r = round(255 * r);
+          g = round(255 * g);
+          b = round(255 * b);
+          a = 1.0;
+        } else if (matches = /^hsla\(\s*(\d+(\.\d+)?)\s*,\s*(\d+(\.\d+)?%?)\s*,\s*(\d+(\.\d+)?%?)\s*,(\d(\.\d+)?)\)$/i.exec(colorString)) {
+          // hsla(1,2,3,0.4)
+          h = parseFloat(matches[1]);
+          s = parseFloat(matches[3]);
+          l = parseFloat(matches[5]);
+          a = parseFloat(matches[7]);
+          h %= 360;
+          s /= 100;
+          l /= 100;
+          h = h < 0 ? 0 : h > 360 ? 360 : h;
+          s = s < 0 ? 0 : s > 1 ? 1 : s;
+          l = l < 0 ? 0 : l > 1 ? 1 : l;
+          c = l <= 0.5 ? 2 * l * s : (2 - 2 * l) * s;
+          h_ = h / 60;
+          x = c * (1 - Math.abs(h_ % 2 - 1));
+          rgb_ = [];
+          h_ = Math.floor(h_);
+          switch (h_) {
+            case 0:
+              rgb_ = [c, x, 0];
+              break;
+            case 1:
+              rgb_ = [x, c, 0];
+              break;
+            case 2:
+              rgb_ = [0, c, x];
+              break;
+            case 3:
+              rgb_ = [0, x, c];
+              break;
+            case 4:
+              rgb_ = [x, 0, c];
+              break;
+            case 5:
+              rgb_ = [c, 0, x];
+              break;
+            default:
+              rgb_ = [0, 0, 0];
+          }
+          m = l - 0.5 * c;
+          r = rgb_[0] + m;
+          g = rgb_[1] + m;
+          b = rgb_[2] + m;
+          r = round(255 * r);
+          g = round(255 * g);
+          b = round(255 * b);
+        } else if (matches = /^hsv\(\s*(\d+(\.\d+)?)\s*,\s*(\d+(\.\d+)?%?)\s*,\s*(\d+(\.\d+)?%?)\s*\)$/i.exec(colorString)) {
+          // hsv(1, 2, 3) {
+          h = parseFloat(matches[1]);
+          s = parseFloat(matches[3]);
+          v = parseFloat(matches[5]);
+          h %= 360;
+          s /= 100;
+          v /= 100;
+          h = h < 0 ? 0 : h > 360 ? 360 : h;
+          s = s < 0 ? 0 : s > 1 ? 1 : s;
+          v = v < 0 ? 0 : v > 1 ? 1 : v;
+          c = v * s;
+          h_ = h / 60;
+          x = c * (1 - Math.abs(h_ % 2 - 1));
+          rgb_ = [];
+          h_ = Math.floor(h_);
+          switch (h_) {
+            case 0:
+              rgb_ = [c, x, 0];
+              break;
+            case 1:
+              rgb_ = [x, c, 0];
+              break;
+            case 2:
+              rgb_ = [0, c, x];
+              break;
+            case 3:
+              rgb_ = [0, x, c];
+              break;
+            case 4:
+              rgb_ = [x, 0, c];
+              break;
+            case 5:
+              rgb_ = [c, 0, x];
+              break;
+            default:
+              rgb_ = [0, 0, 0];
+          }
+          m = v - c;
+          r = rgb_[0] + m;
+          g = rgb_[1] + m;
+          b = rgb_[2] + m;
+          r = round(255 * r);
+          g = round(255 * g);
+          b = round(255 * b);
+          a = 1.0;
+        } else if (colorStruct[colorString.toLowerCase()]) {
+          lcs = colorString.toLowerCase();
+          r = colorStruct[lcs].r;
+          g = colorStruct[lcs].g;
+          b = colorStruct[lcs].b;
+          a = typeof colorStruct[lcs].a === 'number' ? colorStruct[lcs].a : 1.0;
+        } else {
+          this._invalid = true;
+        }
+      } else if (typeof args[0] === 'number' && args[0] >= 0 && args[1] === 'argb') {
+        a = (0xff000000 & args[0]) >>> 24;
+        a /= 255;
+        r = (0xff0000 & args[0]) >> 16;
+        g = (0x00ff00 & args[0]) >> 8;
+        b = 0x0000ff & args[0];
+      } else if (typeof args[0] === 'number' && args[0] >= 0) {
+        r = (0xff0000 & args[0]) >> 16;
+        g = (0x00ff00 & args[0]) >> 8;
+        b = 0x0000ff & args[0];
+      } else {
+        this._invalid = true;
+      }
+    } else if (args.length >= 3) {
+      r = args[0];
+      g = args[1];
+      b = args[2];
+      a = arguments.length >= 4 ? args[3] : 1;
+    } else {
+      this._invalid = true;
+    }
+    if (Number.isNaN(+r + g + b + a)) {
+      this._invalid = true;
+    }
+    this._r = floor(r);
+    this._g = floor(g);
+    this._b = floor(b);
+    this._a = a;
+
+    // object to cache string representations in various color spaces
+    this._spaces = {};
+  }
+  isInvalid() {
+    return this._invalid;
+  }
+
+  /**
+   * Sets alpha value of color
+   * @private
+   * @param {number} a - Alpha value of the color
+   */
+  setAlpha(a) {
+    this._a = a;
+    this._spaces = {};
+  }
+
+  /**
+   * Gets the alpha value of this color
+   * @private
+   * @returns {number}
+   */
+  getAlpha() {
+    return this._a;
+  }
+
+  /**
+   * Returns an rgb string representation of this color.
+   * @private
+   * @return {string} An rgb string representation of this color
+   */
+  toRGB() {
+    if (!this._spaces.rgb) {
+      this._spaces.rgb = Color.toRGB(this);
+    }
+    return this._spaces.rgb;
+  }
+
+  /**
+   * Returns an rgba string representation of this color.
+   * @private
+   * @return {string} An rgba string representation of this color.
+   */
+  toRGBA() {
+    if (!this._spaces.rgba) {
+      this._spaces.rgba = Color.toRGBA(this);
+    }
+    return this._spaces.rgba;
+  }
+  toString() {
+    if (!this._spaces.rgb) {
+      this._spaces.rgb = Color.toRGB(this);
+    }
+    return this._spaces.rgb;
+  }
+
+  /**
+   * Returns a hex string representation of this color.
+   * @private
+   * @return {string}
+   */
+  toHex() {
+    if (!this._spaces.hex) {
+      this._spaces.hex = Color.toHex(this);
+    }
+    return this._spaces.hex;
+  }
+
+  /**
+   * Returns a hsl string representation of this color using "bi-hexcone" model for lightness
+   * @private
+   * @param {boolean} luma - Whether to use luma calculation
+   * @return {string} In format hsl(0,0,0)
+   */
+  toHSL(luma) {
+    if (!this._spaces.hsl) {
+      this._spaces.hsl = Color.toHSL(this, luma);
+    }
+    return this._spaces.hsl;
+  }
+
+  /**
+   * Returns a hsla string representation of this color using "bi-hexcone" model for lightness
+   * @private
+   * @param {boolean} luma - Whether to use luma calculation
+   * @return {string} In format hsla(0,0,0,0)
+   */
+  toHSLA(luma) {
+    if (!this._spaces.hsla) {
+      this._spaces.hsla = Color.toHSLA(this, luma);
+    }
+    return this._spaces.hsla;
+  }
+
+  /**
+   * Return the color components in hsv space using "hexcone" model for value (lightness)
+   * @private
+   * @param {Color|string} c
+   * @returns {object} The color components in hsv space {h:0-360, s:0-100, v:0-100}
+   */
+  toHSV() {
+    const hsvComp = this.toHSVComponents();
+    return "hsv(".concat(hsvComp.h, ",").concat(hsvComp.s, ",").concat(hsvComp.v, ")");
+  }
+
+  /**
+   * Return the color components in hsv space using "hexcone" model for value (lightness)
+   * @private
+   * @param {Color|string} c
+   * @returns {object} The color components in hsv space {h:0-360, s:0-100, v:0-100}
+   */
+  toHSVComponents() {
+    if (!this._spaces.hsvComp) {
+      this._spaces.hsvComp = Color.toHSVComponents(this);
+    }
+    return this._spaces.hsvComp;
+  }
+
+  /**
+   * Returns a uint representation of this color
+   * @private
+   * @return {number}
+   */
+  toNumber() {
+    if (!this._spaces.num) {
+      this._spaces.num = Color.toNumber(this);
+    }
+    return this._spaces.num;
+  }
+
+  /**
+   * Checks if this color is perceived as dark.
+   * @private
+   * @return {string} True if the luminance is below 160, false otherwise.
+   */
+  isDark() {
+    return this.isInvalid() || this.getLuminance() < 125; // luminace calc option #2
+    // return this.getLuminance() < 160; //luminace calc option #3
+  }
+
+  /**
+   * Calculates the perceived luminance of the color.
+   * @private
+   * @return {number} A value in the range 0-255 where a low value is considered dark and vice versa.
+   */
+  getLuminance() {
+    // alpha channel is not considered
+    if (typeof this._lumi === 'undefined') {
+      // calculate luminance
+      // this._lumi = 0.2126 * this._r + 0.7152 * this._g + 0.0722 * this._b; // option 1
+      this._lumi = 0.299 * this._r + 0.587 * this._g + 0.114 * this._b; // option 2
+      // this._lumi = Math.sqrt( 0.241 * this._r * this._r + 0.691 * this._g * this._g + 0.068 * this._b * this._b ); // option 3
+    }
+
+    return this._lumi;
+  }
+
+  /**
+   * Shifts the color towards a lighter or darker shade
+   * @private
+   * @param {number} value - A value in the range -100-100 to shift the color with along the HSL lightness.
+   * @return {string} The shifted color as hsla string.
+   */
+  shiftLuminance(value) {
+    const chsla = this.toHSLA();
+    const matches = /^hsla\(\s*(\d+(\.\d+)?)\s*,\s*(\d+(\.\d+)?%?)\s*,\s*(\d+(\.\d+)?%?)\s*,(\d(\.\d+)?)\)$/i.exec(chsla);
+    const h = parseFloat(matches[1]);
+    const s = parseFloat(matches[3]);
+    let l = parseFloat(matches[5]);
+    const a = parseFloat(matches[7]);
+    // l *= 1 + value / 100;
+    // l = Math.max( 0, l % 100 );
+    l += value;
+    l = Math.max(0, Math.min(l, 100));
+
+    // if( value > 0 ){
+    // s = s*0.2; //removing saturation to avoid the border from being too light
+    // }
+
+    return "hsla(".concat(h, ",").concat(s, ",").concat(l, ",").concat(a, ")");
+  }
+
+  /**
+   * Compares two colors.
+   * @private
+   * @param {Color} c The color to compare with.
+   * @return {boolean} True if the rgba channels are the same, false otherwise
+   */
+  isEqual(c) {
+    if (c instanceof Color) {
+      return this._r === c._r && this._g === c._g && this._b === c._b && this._a === c._a;
+    }
+    c = new Color(c);
+    return this._r === c._r && this._g === c._g && this._b === c._b && this._a === c._a;
+  }
+
+  /**
+   * Linearly interpolates each channel of two colors.
+   * @private
+   * @param {Color} c2 The other color.
+   * @param {number} t The interpolation value in the range (0-1).
+   * @return {string} The blend as an rgb string.
+   */
+  blend(c2, t) {
+    const r = floor(this._r + (c2._r - this._r) * t);
+    const g = floor(this._g + (c2._g - this._g) * t);
+    const b = floor(this._b + (c2._b - this._b) * t);
+    const a = floor(this._a + (c2._a - this._a) * t);
+    return "rgba(".concat([r, g, b, a].join(','), ")");
+  }
+  createShiftedColor(v) {
+    if (v === undefined || Number.isNaN(+v)) {
+      v = 1;
+    }
+    const lumi = this.getLuminance();
+    const greenMultiplier = this._g < 126 ? 1 : 1 + this._g / 512;
+    const hsla_string = this.shiftLuminance((lumi * greenMultiplier < 220 ? 0.8 + 4 * (1 / (lumi + 1)) : -(0.8 + 1 * (lumi / 255))) * 20 * v);
+    return new Color(hsla_string);
+  }
+
+  /**
+   * Returns an rgb string representation of this color
+   * @private
+   * @param {Color|string} c
+   * @returns {string} An rgb string with channel values within range 0-255.
+   */
+  static toRGB(c) {
+    if (c instanceof Color) {
+      return "rgb(".concat([c._r, c._g, c._b].join(','), ")");
+    }
+    if (typeof c === 'string') {
+      c = Color.toNumber(c);
+    }
+    const r = (c & 0xff0000) >> 16;
+    const g = (c & 0x00ff00) >> 8;
+    const b = c & 0x0000ff;
+    return "rgb(".concat(r, ",").concat(g, ",").concat(b, ")");
+  }
+
+  /**
+   *
+   * @private
+   * @param c
+   * @param a
+   * @returns {string} The color rgb format.
+   */
+  static toRGBA(c, a) {
+    if (c instanceof Color) {
+      return "rgba(".concat([c._r, c._g, c._b, typeof a !== 'undefined' ? a : c._a].join(','), ")");
+    }
+    if (typeof c === 'string') {
+      c = Color.toNumber(c);
+    }
+    const r = (c & 0xff0000) >> 16;
+    const g = (c & 0x00ff00) >> 8;
+    const b = c & 0x0000ff;
+    return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(typeof a !== 'undefined' ? a : c._a, ")");
+  }
+
+  /**
+   *
+   * @private
+   * @param {Color|string} c
+   * @returns {string} The color in hexadecimal space.
+   */
+  static toHex(c) {
+    let r;
+    let g;
+    let b;
+    if (c instanceof Color) {
+      r = c._r.toString(16);
+      g = c._g.toString(16);
+      b = c._b.toString(16);
+      if (r.length === 1) {
+        r = "0".concat(r);
+      }
+      if (g.length === 1) {
+        g = "0".concat(g);
+      }
+      if (b.length === 1) {
+        b = "0".concat(b);
+      }
+      return "#".concat([r, g, b].join(''));
+    }
+    if (typeof c === 'string') {
+      c = Color.toNumber(c);
+    }
+    r = ((c & 0xff0000) >> 16).toString(16);
+    g = ((c & 0x00ff00) >> 8).toString(16);
+    b = (c & 0x0000ff).toString(16);
+    if (r.length === 1) {
+      r = "0".concat(r);
+    }
+    if (g.length === 1) {
+      g = "0".concat(g);
+    }
+    if (b.length === 1) {
+      b = "0".concat(b);
+    }
+    return "#".concat(r).concat(g).concat(b);
+  }
+
+  /**
+   * Return the color in hsl space using "bi-hexcone" model for lightness
+   * @private
+   * @param {Color|string} c
+   * @param {boolean} luma - Whether to use luma calculation
+   * @returns {string} The color in hsl space.
+   */
+  static toHSL(c, luma) {
+    let h = 0;
+    let s;
+    let l;
+    let ch;
+    if (typeof c === 'string') {
+      c = new Color(c);
+    }
+
+    // red, green, blue, hue, saturation, lightness/luma, max, min, chroma
+    const r = c._r / 255;
+    const g = c._g / 255;
+    const b = c._b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    if (luma) {
+      // Y'709 http://en.wikipedia.org/wiki/Rec._709
+      // Y′709 = 0.21R + 0.72G + 0.07B
+      l = 0.21 * r + 0.72 * g + 0.07 * b;
+    } else {
+      l = (max + min) / 2;
+    }
+    if (max === min) {
+      // greyscale
+      s = 0;
+      h = 0;
+    } else {
+      ch = max - min;
+      s = l > 0.5 ? ch / (2 - max - min) : ch / (max + min);
+      switch (max) {
+        case r:
+          h = (g - b) / ch + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / ch + 2;
+          break;
+        case b:
+          h = (r - g) / ch + 4;
+          break;
+      }
+      h /= 6;
+    }
+    return "hsl(".concat(h * 360, ",").concat(s * 100, ",").concat(l * 100, ")");
+  }
+
+  /**
+   * Return the color in hsla space using "bi-hexcone" model for lightness
+   * @private
+   * @param {Color|string} c
+   * @param {boolean} luma - Whether to use luma calculation
+   * @returns {string} The color in hsla space.
+   */
+  static toHSLA(c, luma) {
+    let h = 0;
+    let s;
+    let l;
+    let ch;
+    if (typeof c === 'string') {
+      c = new Color(c);
+    }
+
+    // red, green, blue, hue, saturation, lightness/luma, max, min, chroma
+    const r = c._r / 255;
+    const g = c._g / 255;
+    const b = c._b / 255;
+    const a = c._a;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    if (luma) {
+      // Y'709 http://en.wikipedia.org/wiki/Rec._709
+      // Y′709 = 0.21R + 0.72G + 0.07B
+      l = 0.21 * r + 0.72 * g + 0.07 * b;
+    } else {
+      l = (max + min) / 2;
+    }
+    if (max === min) {
+      // greyscale
+      s = 0;
+      h = 0;
+    } else {
+      ch = max - min;
+      s = l > 0.5 ? ch / (2 - max - min) : ch / (max + min);
+      switch (max) {
+        case r:
+          h = (g - b) / ch + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / ch + 2;
+          break;
+        case b:
+          h = (r - g) / ch + 4;
+          break;
+      }
+      h /= 6;
+    }
+    return "hsla(".concat(h * 360, ",").concat(s * 100, ",").concat(l * 100, ",").concat(a, ")");
+  }
+
+  /**
+   * Return the color components in hsv space using "hexcone" model for value (lightness)
+   * @private
+   * @param {Color|string} c
+   * @returns {object} The color components in hsv space {h:0-360, s:0-100, v:0-100}
+   */
+  static toHSVComponents(c) {
+    let h = 0;
+    let s;
+    let ch;
+    if (typeof c === 'string') {
+      c = new Color(c);
+    }
+
+    // red, green, blue, hue, saturation, value/luma, max, min, chroma
+    const r = c._r / 255;
+    const g = c._g / 255;
+    const b = c._b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const v = max;
+    if (max === min) {
+      // greyscale
+      s = 0;
+      h = 0;
+    } else {
+      ch = max - min;
+      s = ch === 0 ? 0 : ch / v;
+      switch (max) {
+        case r:
+          h = (g - b) / ch + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / ch + 2;
+          break;
+        case b:
+          h = (r - g) / ch + 4;
+          break;
+      }
+      h /= 6;
+    }
+    return {
+      h: h * 360 % 360,
+      s: s * 100,
+      v: v * 100
+    };
+  }
+
+  /**
+   * Returns an number representation of the color
+   * @private
+   * @param {Color|string} c
+   * @returns {Number} Unsigned integer in the range 0-16 777 216
+   */
+  static toNumber() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    if (args.length === 1 && args[0] instanceof Color) {
+      return (args[0]._r << 16) + (args[0]._g << 8) + args[0]._b;
+    }
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    let matches;
+    let colorString;
+    if (args.length === 1) {
+      if (typeof args[0] === 'string') {
+        colorString = args[0];
+        if (matches = /^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)$/i.exec(colorString)) {
+          r = parseInt(matches[1], 10);
+          g = parseInt(matches[2], 10);
+          b = parseInt(matches[3], 10);
+        } else if (matches = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/i.exec(colorString)) {
+          r = parseInt(matches[1], 16);
+          g = parseInt(matches[2], 16);
+          b = parseInt(matches[3], 16);
+        } else if (matches = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/i.exec(colorString)) {
+          r = parseInt(matches[1] + matches[1], 16);
+          g = parseInt(matches[2] + matches[2], 16);
+          b = parseInt(matches[3] + matches[3], 16);
+        }
+      }
+    }
+    return (r << 16) + (g << 8) + b;
+  }
+  static blend(c1, c2, t) {
+    c1 = Color.toNumber(c1);
+    c2 = Color.toNumber(c2);
+    const r1 = (c1 & 0xff0000) >> 16;
+    const g1 = (c1 & 0x00ff00) >> 8;
+    const b1 = c1 & 0x0000ff;
+    const r2 = (c2 & 0xff0000) >> 16;
+    const g2 = (c2 & 0x00ff00) >> 8;
+    const b2 = c2 & 0x0000ff;
+    const r = r1 + (r2 - r1) * t;
+    const g = g1 + (g2 - g1) * t;
+    const b = b1 + (b2 - b1) * t;
+    return (r << 16) + (g << 8) + b;
+  }
+  static getBlend(c1, c2, t) {
+    const r = c1._r + (c2._r - c1._r) * t;
+    const g = c1._g + (c2._g - c1._g) * t;
+    const b = c1._b + (c2._b - c1._b) * t;
+    const a = c1._a + (c2._a - c1._a) * t;
+    return new Color(r, g, b, a);
+  }
+  static isCSSColor(color) {
+    if (arguments.length > 1 || typeof color !== 'string') {
+      return false;
+    }
+    return rgb.test(color) || rgba.test(color) || hex.test(color) || hexShort.test(color) || hsl.test(color) || hsla.test(color) || colorStruct[color.toLowerCase()];
+  }
+  static getBestContrast(color, cl, cd) {
+    const lum = color.getLuminance();
+    return Math.abs(lum - cl.getLuminance()) > Math.abs(lum - cd.getLuminance()) ? cl : cd;
+  }
+  static getContrast(color1, color2) {
+    if (!color1 || !color2) {
+      return undefined;
+    }
+    const l1 = color1.getLuminance() / 100;
+    const l2 = color2.getLuminance() / 100;
+    if (l1 > l2) {
+      return (l1 + 0.05) / (l2 + 0.05);
+    }
+    return (l2 + 0.05) / (l1 + 0.05);
+  }
+  static isDark() {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+    const C = new Color(...args);
+    return C.isDark(...args);
+  }
+  static useDarkLabel(areaColor, bgIsDark) {
+    return areaColor._a > 0.5 ? !areaColor.isDark() : !bgIsDark;
   }
-  return out;
 }
-const hasEnoughContrast = (desiredTextColor, backgroundColor) => {
-  const desired = convertNamedColor(desiredTextColor);
-  const background = convertNamedColor(backgroundColor);
-  const CONTRAST_THRESHOLD = 3.0;
-  let isContrastingEnough;
+
+const LIGHT = '#FFF';
+const DARK = '#000';
+const CONTRAST_THRESHOLD = 1.5;
+const LIGHT_PREFERRED_THRESHOLD = 3;
+const getContrast = (desired, background) => {
+  let contrast = false;
+  const des = new Color(desired);
+  const bg = new Color(background);
+  if (bg.isInvalid() || des.isInvalid() || bg.getAlpha() < 1 || des.getAlpha() < 1) {
+    return undefined;
+  }
   try {
-    isContrastingEnough = getContrastRatio(desired, background) > CONTRAST_THRESHOLD;
+    contrast = Color.getContrast(des, bg);
   } catch (err) {
-    // The function throws on unsupported or misspelled colors.
-    // In these cases, simply return true.
-    isContrastingEnough = true;
+    contrast = undefined;
   }
-  return isContrastingEnough;
+  return contrast;
 };
 function getContrastingColor(backgroundColor) {
   let desiredTextColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
   let dark = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DARK;
   let light = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : LIGHT;
+  const lightColor = new Color(light);
+  const bg = new Color(backgroundColor);
+  const des = new Color(desiredTextColor);
+  if (bg.isInvalid() || des.isInvalid() || bg.getAlpha() < 1 || des.getAlpha() < 1) {
+    return desiredTextColor;
+  }
+
+  // Always prioritise light color if it gives better contrast than desired color's.
+  const lightColorContrast = getContrast(lightColor, bg);
+  const desiredColorContrast = getContrast(des, bg);
+  const useLightColor = lightColorContrast > desiredColorContrast || lightColorContrast > LIGHT_PREFERRED_THRESHOLD;
   let contrastingColor;
-  if (desiredTextColor && hasEnoughContrast(desiredTextColor, backgroundColor)) {
+  if (desiredTextColor && desiredColorContrast > CONTRAST_THRESHOLD && !useLightColor) {
     contrastingColor = desiredTextColor;
   } else {
-    contrastingColor = hasEnoughContrast(light, backgroundColor) ? light : dark;
+    contrastingColor = useLightColor ? light : dark;
   }
   return contrastingColor;
 }
@@ -15846,10 +17166,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;
-  const desiredTextColor = ((_overrides$theme = overrides.theme) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.content) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.fontColor) === null || _overrides$theme === void 0 ? void 0 : _overrides$theme.color) || getListboxStyle('content', 'color') || ((_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.text.primary);
-  const useContrastTextColor = (_overrides$theme$cont = (_overrides$theme2 = overrides.theme) === null || _overrides$theme2 === void 0 || (_overrides$theme2 = _overrides$theme2.content) === null || _overrides$theme2 === void 0 ? void 0 : _overrides$theme2.useContrastColor) !== null && _overrides$theme$cont !== void 0 ? _overrides$theme$cont : true;
+  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 = !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) || {};
@@ -15860,7 +17187,7 @@ function getSelectionColors(theme, getListboxStyle, overrides) {
   const possible = ((_selectionColors$poss = selectionColors.possible) === null || _selectionColors$poss === void 0 ? void 0 : _selectionColors$poss.color) || getListboxStyle('', 'backgroundColor') || ((_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.selected.possible) || '#FFFFFF';
 
   // Font colors
-  let selectedContrast = desiredTextColor || ((_theme$palette7 = theme.palette) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.selected.main);
+  let selectedContrast = desiredTextColor || ((_theme$palette7 = theme.palette) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.selected.selectedContrastText);
   let alternativeContrast = desiredTextColor || ((_theme$palette8 = theme.palette) === null || _theme$palette8 === void 0 ? void 0 : _theme$palette8.selected.alternativeContrastText);
   let excludedContrast = desiredTextColor || ((_theme$palette9 = theme.palette) === null || _theme$palette9 === void 0 ? void 0 : _theme$palette9.selected.excludedContrastText);
   let selectedExcludedContrast = desiredTextColor || ((_theme$palette10 = theme.palette) === null || _theme$palette10 === void 0 ? void 0 : _theme$palette10.selected.selectedExcludedContrastText);
@@ -15886,17 +17213,22 @@ function getSelectionColors(theme, getListboxStyle, overrides) {
     possibleContrast
   };
 }
-function getStyles(_ref) {
+function getStyles(_ref2) {
   var _themeOverrides$heade, _themeOverrides$heade2, _themeOverrides$conte;
   let {
     themeApi,
     theme,
     components = [],
     checkboxes = false
-  } = _ref;
+  } = _ref2;
   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 || {};
   return {
     backgroundColor: getListboxStyle('', 'backgroundColor') || theme.palette.background.default,
@@ -15912,6 +17244,9 @@ function getStyles(_ref) {
       fontSize: ((_themeOverrides$conte = themeOverrides.content) === null || _themeOverrides$conte === void 0 ? void 0 : _themeOverrides$conte.fontSize) || getListboxStyle('content', 'fontSize'),
       fontFamily: getListboxStyle('content', 'fontFamily')
     },
+    search: {
+      color: getListboxStyle('content', 'color')
+    },
     selections
   };
 }
@@ -20457,6 +21792,85 @@ function Supernova(_ref) {
   }));
 }
 
+const MULTI_REG = /,(?![^(]*\))/;
+const SINGLE_REG = /\s(?![^(]*\))/;
+const LENGTH_REG = /^[0-9]+[a-zA-Z%]+?$/;
+const PREDEFINED_STRINGS = ['none', 'inset', 'initial', 'inherit'];
+const isLength = v => v === '0' || LENGTH_REG.test(v);
+const getColor = singleShadowString => {
+  if (!singleShadowString) return undefined;
+  const parts = singleShadowString.split(SINGLE_REG).filter(part => !PREDEFINED_STRINGS.includes(part.toLowerCase()));
+  const last = parts.at(-1);
+  const color = last && !isLength(last) && !PREDEFINED_STRINGS.includes(last.toLowerCase()) ? last : undefined;
+  return color;
+};
+const getShadows = shadowString => {
+  if (!shadowString) return [];
+  return shadowString.split(MULTI_REG).map(s => s.trim());
+};
+
+/**
+ * Combine box shadow with box shadow color.
+ * @param {string} boxShadow - Box shadow which may include color
+ * @param {string} themeBoxShadow - Box shadow from theme which may include color
+ * @param {string | undefined} boxShadowColor - Box shadow color
+ * @returns {string} Returns the combined box shadow and box shadow color
+ *
+ * If boxShadow is a single shadow and has a color then this color will be replaced by boxShadowColor and then
+ * returned as the result,otherwise boxShadowColor will be added to boxShadow and then returned as the result.
+ * If boxShadow is multiple shadows or an empty string then it will be returned as the result.
+ *
+ * @example getFullBoxShadow('none', '', 'red') returns 'none'
+ *
+ * @example getFullBoxShadow('initial', '', 'red') returns 'initial'
+ *
+ * @example getFullBoxShadow('inherit', '', 'red') returns 'inherit'
+ *
+ * @example getFullBoxShadow('', '', 'red') returns ''
+ *
+ * @example getFullBoxShadow('1px 2px blue, 3px 6px green', '', 'red') returns '1px 2px blue, 3px 6px green'
+ *
+ * @example getFullBoxShadow('1px 2px blue', '', 'red') returns '1px 2px red'
+ *
+ * @example getFullBoxShadow('1px 2px', '', 'red') returns '1px 2px red'
+ *
+ * @example getFullBoxShadow('1px 2px', '2px 5px green', undefined) returns '1px 2px green'
+ *
+ * @example getFullBoxShadow('1px 2px', '2px 5px', undefined) returns '1px 2px'
+ */
+const getFullBoxShadow = (boxShadow, themeBoxShadow, boxShadowColor) => {
+  if (boxShadow && PREDEFINED_STRINGS.includes(boxShadow.toLowerCase())) return boxShadow.toLowerCase();
+  const shadowArray = getShadows(boxShadow);
+  if (shadowArray.length !== 1) return boxShadow;
+  let shadowColor = boxShadowColor;
+  if (!shadowColor) {
+    const themeShadowArray = getShadows(themeBoxShadow);
+    if (themeShadowArray.length !== 1) return boxShadow;
+    shadowColor = getColor(themeShadowArray[0]);
+  }
+  if (!shadowColor) return boxShadow;
+  const color = getColor(shadowArray[0]);
+  if (color) return boxShadow.replace(color, shadowColor);
+  return "".concat(boxShadow, " ").concat(shadowColor);
+};
+
+function resolveProperty(path, attribute, theme, objectType) {
+  if (theme && objectType) {
+    return theme.getStyle("object.".concat(objectType), path, attribute);
+  }
+  if (theme) {
+    return theme.getStyle('', path, attribute);
+  }
+  return undefined;
+}
+
+function resolveColor(colorObj, path, attribute, theme, objectType) {
+  if (colorObj && theme) {
+    return colorObj.color !== 'none' ? theme.getColorPickerColor(colorObj, true) : undefined;
+  }
+  return resolveProperty(path, attribute, theme, objectType);
+}
+
 const imageSizingToCssProperty = {
   originalSize: 'auto auto',
   alwaysFit: 'contain',
@@ -20534,21 +21948,29 @@ function resolveBgImage(bgComp, app) {
   }
   return undefined;
 }
-function resolveBgColor(bgComp, theme, objectType) {
-  const bgColor = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgColor;
+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 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;
+  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)) {
@@ -20569,6 +21991,34 @@ function resolveTextStyle(textComp, target, theme, objectType) {
   };
 }
 
+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 {};
+  }, [layout, theme, app, themeName]);
+  return styling;
+};
+
 /**
  * @interface
  * @extends HTMLElement
@@ -20898,9 +22348,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
@@ -20910,18 +22365,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) {
@@ -21112,7 +22555,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,