@nebula.js/stardust 4.6.1 → 4.7.0

package/dist/stardust.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.
 */
@@ -2363,7 +2363,7 @@
 	  return prototype;
 	}
 
-	function Color() {}
+	function Color$1() {}
 
 	var darker = 0.7;
 	var brighter = 1 / darker;
@@ -2530,7 +2530,7 @@
 	  yellowgreen: 0x9acd32
 	};
 
-	define(Color, color$3, {
+	define(Color$1, color$3, {
 	  copy(channels) {
 	    return Object.assign(new this.constructor, this, channels);
 	  },
@@ -2566,15 +2566,15 @@
 	  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;
@@ -2584,19 +2584,19 @@
 	  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);
 	}
 
@@ -2607,7 +2607,7 @@
 	  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);
@@ -2636,11 +2636,11 @@
 	}));
 
 	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() {
@@ -2656,12 +2656,12 @@
 	  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;
@@ -2670,7 +2670,7 @@
 
 	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();
@@ -2694,7 +2694,7 @@
 	  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);
 	}
 
@@ -2705,7 +2705,7 @@
 	  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);
@@ -3298,7 +3298,7 @@
 	  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) {
@@ -4540,10 +4540,10 @@
 	  useEnhancedEffect$1(() => {
 	    ref.current = fn;
 	  });
-	  return reactExports.useCallback((...args) =>
+	  return reactExports.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) {
@@ -6952,7 +6952,7 @@
 	}
 
 	/**
-	 * @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
@@ -9533,7 +9533,7 @@
 	}
 
 	const _excluded$I = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
-	function round$2(value) {
+	function round$3(value) {
 	  return Math.round(value * 1e5) / 1e5;
 	}
 	const caseAllCaps = {
@@ -9573,7 +9573,7 @@
 	    // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
 	    lineHeight
 	  }, fontFamily === defaultFontFamily ? {
-	    letterSpacing: `${round$2(letterSpacing / size)}em`
+	    letterSpacing: `${round$3(letterSpacing / size)}em`
 	  } : {}, casing, allVariants);
 	  const variants = {
 	    h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
@@ -11599,6 +11599,7 @@
 	      excluded: '#BEBEBE',
 	      selectedExcluded: '#BEBEBE',
 	      possible: colors.grey100,
+	      selectedContrastText: colors.grey100,
 	      mainContrastText: colors.grey100,
 	      alternativeContrastText: colors.grey25,
 	      excludedContrastText: colors.grey25,
@@ -11666,6 +11667,7 @@
 	      excluded: colors.grey10,
 	      selectedExcluded: colors.grey10,
 	      possible: colors.grey80,
+	      selectedContrastText: colors.grey100,
 	      mainContrastText: colors.grey100,
 	      alternativeContrastText: colors.grey100,
 	      excludedContrastText: colors.grey100,
@@ -11818,7 +11820,7 @@
 	  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', ''));
 	});
@@ -12079,7 +12081,7 @@
 	  const appRef = React.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) {
@@ -12147,246 +12149,6 @@
 	  }, appRef, rendered];
 	}
 
-	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
-	});
-
 	function getSvgIconUtilityClass(slot) {
 	  return generateUtilityClass('MuiSvgIcon', slot);
 	}
@@ -13025,7 +12787,7 @@
 	  if (!getSlotProps) {
 	    // The simpler case - getSlotProps is not defined, so no internal event handlers are defined,
 	    // so we can simply merge all the props without having to worry about extracting event handlers.
-	    const joinedClasses = clsx(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className);
+	    const joinedClasses = clsx(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
 	    const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
 	    const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
 	    if (joinedClasses.length > 0) {
@@ -13566,7 +13328,7 @@
 
 	var max = Math.max;
 	var min = Math.min;
-	var round$1 = Math.round;
+	var round$2 = Math.round;
 
 	function getUAString() {
 	  var uaData = navigator.userAgentData;
@@ -13598,8 +13360,8 @@
 	  var scaleY = 1;
 
 	  if (includeScale && isHTMLElement$1(element)) {
-	    scaleX = element.offsetWidth > 0 ? round$1(clientRect.width) / element.offsetWidth || 1 : 1;
-	    scaleY = element.offsetHeight > 0 ? round$1(clientRect.height) / element.offsetHeight || 1 : 1;
+	    scaleX = element.offsetWidth > 0 ? round$2(clientRect.width) / element.offsetWidth || 1 : 1;
+	    scaleY = element.offsetHeight > 0 ? round$2(clientRect.height) / element.offsetHeight || 1 : 1;
 	  }
 
 	  var _ref = isElement(element) ? getWindow(element) : window,
@@ -13894,8 +13656,8 @@
 	      y = _ref.y;
 	  var dpr = win.devicePixelRatio || 1;
 	  return {
-	    x: round$1(x * dpr) / dpr || 0,
-	    y: round$1(y * dpr) / dpr || 0
+	    x: round$2(x * dpr) / dpr || 0,
+	    y: round$2(y * dpr) / dpr || 0
 	  };
 	}
 
@@ -14884,8 +14646,8 @@
 
 	function isElementScaled(element) {
 	  var rect = element.getBoundingClientRect();
-	  var scaleX = round$1(rect.width) / element.offsetWidth || 1;
-	  var scaleY = round$1(rect.height) / element.offsetHeight || 1;
+	  var scaleX = round$2(rect.width) / element.offsetWidth || 1;
+	  var scaleY = round$2(rect.height) / element.offsetHeight || 1;
 	  return scaleX !== 1 || scaleY !== 1;
 	} // Returns the composite rect of an element relative to its offsetParent.
 	// Composite means it takes into account transforms as well as layout.
@@ -15813,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) {
@@ -17162,7 +16926,9 @@
 	}, ownerState.edge === 'end' && {
 	  marginRight: ownerState.size === 'small' ? -3 : -12
 	}));
-	const SwitchBaseInput = styled$1('input')({
+	const SwitchBaseInput = styled$1('input', {
+	  shouldForwardProp: rootShouldForwardProp
+	})({
 	  cursor: 'inherit',
 	  position: 'absolute',
 	  opacity: 0,
@@ -17327,7 +17093,7 @@
 	    const {
 	      ownerState
 	    } = props;
-	    return [styles.root, ownerState.indeterminate && styles.indeterminate, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
+	    return [styles.root, ownerState.indeterminate && styles.indeterminate, styles[`size${capitalize(ownerState.size)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
 	  }
 	})(({
 	  theme,
@@ -20088,7 +19854,9 @@
 
 	var _span;
 	const _excluded$8 = ["children", "classes", "className", "label", "notched"];
-	const NotchedOutlineRoot$1 = styled$1('fieldset')({
+	const NotchedOutlineRoot$1 = styled$1('fieldset', {
+	  shouldForwardProp: rootShouldForwardProp
+	})({
 	  textAlign: 'left',
 	  position: 'absolute',
 	  bottom: 0,
@@ -20104,7 +19872,9 @@
 	  overflow: 'hidden',
 	  minWidth: '0%'
 	});
-	const NotchedOutlineLegend = styled$1('legend')(({
+	const NotchedOutlineLegend = styled$1('legend', {
+	  shouldForwardProp: rootShouldForwardProp
+	})(({
 	  ownerState,
 	  theme
 	}) => _extends$5({
@@ -20360,7 +20130,9 @@
 	  d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
 	}), 'RadioButtonChecked');
 
-	const RadioButtonIconRoot = styled$1('span')({
+	const RadioButtonIconRoot = styled$1('span', {
+	  shouldForwardProp: rootShouldForwardProp
+	})({
 	  position: 'relative',
 	  display: 'flex'
 	});
@@ -20450,7 +20222,7 @@
 	    const {
 	      ownerState
 	    } = props;
-	    return [styles.root, styles[`color${capitalize(ownerState.color)}`]];
+	    return [styles.root, ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], styles[`color${capitalize(ownerState.color)}`]];
 	  }
 	})(({
 	  theme,
@@ -20546,7 +20318,7 @@
 	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"];
-	function round(value) {
+	function round$1(value) {
 	  return Math.round(value * 1e5) / 1e5;
 	}
 	const useUtilityClasses = ownerState => {
@@ -20655,7 +20427,7 @@
 	}, ownerState.touch && {
 	  padding: '8px 16px',
 	  fontSize: theme.typography.pxToRem(14),
-	  lineHeight: `${round(16 / 14)}em`,
+	  lineHeight: `${round$1(16 / 14)}em`,
 	  fontWeight: theme.typography.fontWeightRegular
 	}, {
 	  [`.${tooltipClasses$1.popper}[data-popper-placement*="left"] &`]: _extends$5({
@@ -22513,7 +22285,6 @@
 	  shouldForwardProp: p => p !== 'styles'
 	})(_ref => {
 	  let {
-	    theme,
 	    styles
 	  } = _ref;
 	  return {
@@ -22544,13 +22315,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,
@@ -26959,7 +26730,7 @@
 	    styles
 	  } = _ref;
 	  return {
-	    color: styles.content.color
+	    color: styles.search.color
 	  };
 	});
 	const StyledOutlinedInput = styled$1(OutlinedInput$1, {
@@ -26969,8 +26740,10 @@
 	    styles
 	  } = _ref2;
 	  return {
-	    color: styles.content.color,
-	    display: 'flex'
+	    display: 'flex',
+	    '& .MuiInputBase-root': {
+	      color: styles.search.color
+	    }
 	  };
 	});
 	function ListBoxSearch(_ref3) {
@@ -27589,57 +27362,1614 @@
 	  return totalCounts > 0;
 	}
 
-	const LIGHT = '#FFF';
-	const DARK = '#000';
-	const TRANSPARENT = 'rgba(255, 255, 255, 0)';
+	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 */
+
 
 	/**
-	 * 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;
 	}
@@ -27656,10 +28986,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;
-	  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) || {};
@@ -27670,7 +29007,7 @@
 	  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);
@@ -27696,17 +29033,22 @@
 	    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,
@@ -27722,6 +29064,9 @@
 	      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
 	  };
 	}
@@ -32267,6 +33612,85 @@
 	  }));
 	}
 
+	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',
@@ -32344,21 +33768,29 @@
 	  }
 	  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)) {
@@ -32379,6 +33811,34 @@
 	  };
 	}
 
+	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 {};
+	  }, [layout, theme, app, themeName]);
+	  return styling;
+	};
+
 	/**
 	 * @interface
 	 * @extends HTMLElement
@@ -32708,9 +34168,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
@@ -32720,18 +34185,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) {
@@ -32922,7 +34375,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,