@nebula.js/stardust 3.0.4 → 3.1.0-alpha.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.0.4
+* @nebula.js/stardust v3.1.0-alpha.0
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1580,6 +1580,24 @@
 			"zh-TW": "不符計算條件"
 		}
 	};
+	var Listbox_ScreenReaderInstructions = {
+		id: "Listbox.ScreenReaderInstructions",
+		locale: {
+			"en-US": "Activating the elements below will cause content on the page to be updated"
+		}
+	};
+	var Listbox_Search_ScreenReaderInstructions = {
+		id: "Listbox.Search.ScreenReaderInstructions",
+		locale: {
+			"en-US": "The following search field filters results below as you type"
+		}
+	};
+	var Listbox_ResultFilterLabel = {
+		id: "Listbox.ResultFilterLabel",
+		locale: {
+			"en-US": "Search Results Filter"
+		}
+	};
 	var all = {
 		Cancel: Cancel$1,
 		CurrentSelections_All: CurrentSelections_All,
@@ -1610,7 +1628,10 @@
 		Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 		Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 		Visualization_LayoutError: Visualization_LayoutError,
-		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
+		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
+		Listbox_ScreenReaderInstructions: Listbox_ScreenReaderInstructions,
+		Listbox_Search_ScreenReaderInstructions: Listbox_Search_ScreenReaderInstructions,
+		Listbox_ResultFilterLabel: Listbox_ResultFilterLabel
 	};
 
 	function appLocaleFn(language) {
@@ -1920,76 +1941,457 @@
 	  return ret;
 	};
 
-	var hasOwn = Object.prototype.hasOwnProperty;
-	var toStr = Object.prototype.toString;
-	var defineProperty = Object.defineProperty;
-	var gOPD = Object.getOwnPropertyDescriptor;
-
-	var isArray$1 = function isArray(arr) {
-		if (typeof Array.isArray === 'function') {
-			return Array.isArray(arr);
-		}
-
-		return toStr.call(arr) === '[object Array]';
-	};
+	function define(constructor, factory, prototype) {
+	  constructor.prototype = factory.prototype = prototype;
+	  prototype.constructor = constructor;
+	}
 
-	var isPlainObject$1 = function isPlainObject(obj) {
-		if (!obj || toStr.call(obj) !== '[object Object]') {
-			return false;
-		}
+	function extend$2(parent, definition) {
+	  var prototype = Object.create(parent.prototype);
+	  for (var key in definition) prototype[key] = definition[key];
+	  return prototype;
+	}
 
-		var hasOwnConstructor = hasOwn.call(obj, 'constructor');
-		var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf');
-		// Not own constructor property must be Object
-		if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
-			return false;
-		}
+	function Color() {}
 
-		// Own properties are enumerated firstly, so to speed up,
-		// if last one is own, then all properties are own.
-		var key;
-		for (key in obj) { /**/ }
+	var darker = 0.7;
+	var brighter = 1 / darker;
 
-		return typeof key === 'undefined' || hasOwn.call(obj, key);
-	};
+	var reI = "\\s*([+-]?\\d+)\\s*",
+	    reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
+	    reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
+	    reHex = /^#([0-9a-f]{3,8})$/,
+	    reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
+	    reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
+	    reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
+	    reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"),
+	    reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"),
+	    reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");
 
-	// If name is '__proto__', and Object.defineProperty is available, define __proto__ as an own property on target
-	var setProperty = function setProperty(target, options) {
-		if (defineProperty && options.name === '__proto__') {
-			defineProperty(target, options.name, {
-				enumerable: true,
-				configurable: true,
-				value: options.newValue,
-				writable: true
-			});
-		} else {
-			target[options.name] = options.newValue;
-		}
+	var named = {
+	  aliceblue: 0xf0f8ff,
+	  antiquewhite: 0xfaebd7,
+	  aqua: 0x00ffff,
+	  aquamarine: 0x7fffd4,
+	  azure: 0xf0ffff,
+	  beige: 0xf5f5dc,
+	  bisque: 0xffe4c4,
+	  black: 0x000000,
+	  blanchedalmond: 0xffebcd,
+	  blue: 0x0000ff,
+	  blueviolet: 0x8a2be2,
+	  brown: 0xa52a2a,
+	  burlywood: 0xdeb887,
+	  cadetblue: 0x5f9ea0,
+	  chartreuse: 0x7fff00,
+	  chocolate: 0xd2691e,
+	  coral: 0xff7f50,
+	  cornflowerblue: 0x6495ed,
+	  cornsilk: 0xfff8dc,
+	  crimson: 0xdc143c,
+	  cyan: 0x00ffff,
+	  darkblue: 0x00008b,
+	  darkcyan: 0x008b8b,
+	  darkgoldenrod: 0xb8860b,
+	  darkgray: 0xa9a9a9,
+	  darkgreen: 0x006400,
+	  darkgrey: 0xa9a9a9,
+	  darkkhaki: 0xbdb76b,
+	  darkmagenta: 0x8b008b,
+	  darkolivegreen: 0x556b2f,
+	  darkorange: 0xff8c00,
+	  darkorchid: 0x9932cc,
+	  darkred: 0x8b0000,
+	  darksalmon: 0xe9967a,
+	  darkseagreen: 0x8fbc8f,
+	  darkslateblue: 0x483d8b,
+	  darkslategray: 0x2f4f4f,
+	  darkslategrey: 0x2f4f4f,
+	  darkturquoise: 0x00ced1,
+	  darkviolet: 0x9400d3,
+	  deeppink: 0xff1493,
+	  deepskyblue: 0x00bfff,
+	  dimgray: 0x696969,
+	  dimgrey: 0x696969,
+	  dodgerblue: 0x1e90ff,
+	  firebrick: 0xb22222,
+	  floralwhite: 0xfffaf0,
+	  forestgreen: 0x228b22,
+	  fuchsia: 0xff00ff,
+	  gainsboro: 0xdcdcdc,
+	  ghostwhite: 0xf8f8ff,
+	  gold: 0xffd700,
+	  goldenrod: 0xdaa520,
+	  gray: 0x808080,
+	  green: 0x008000,
+	  greenyellow: 0xadff2f,
+	  grey: 0x808080,
+	  honeydew: 0xf0fff0,
+	  hotpink: 0xff69b4,
+	  indianred: 0xcd5c5c,
+	  indigo: 0x4b0082,
+	  ivory: 0xfffff0,
+	  khaki: 0xf0e68c,
+	  lavender: 0xe6e6fa,
+	  lavenderblush: 0xfff0f5,
+	  lawngreen: 0x7cfc00,
+	  lemonchiffon: 0xfffacd,
+	  lightblue: 0xadd8e6,
+	  lightcoral: 0xf08080,
+	  lightcyan: 0xe0ffff,
+	  lightgoldenrodyellow: 0xfafad2,
+	  lightgray: 0xd3d3d3,
+	  lightgreen: 0x90ee90,
+	  lightgrey: 0xd3d3d3,
+	  lightpink: 0xffb6c1,
+	  lightsalmon: 0xffa07a,
+	  lightseagreen: 0x20b2aa,
+	  lightskyblue: 0x87cefa,
+	  lightslategray: 0x778899,
+	  lightslategrey: 0x778899,
+	  lightsteelblue: 0xb0c4de,
+	  lightyellow: 0xffffe0,
+	  lime: 0x00ff00,
+	  limegreen: 0x32cd32,
+	  linen: 0xfaf0e6,
+	  magenta: 0xff00ff,
+	  maroon: 0x800000,
+	  mediumaquamarine: 0x66cdaa,
+	  mediumblue: 0x0000cd,
+	  mediumorchid: 0xba55d3,
+	  mediumpurple: 0x9370db,
+	  mediumseagreen: 0x3cb371,
+	  mediumslateblue: 0x7b68ee,
+	  mediumspringgreen: 0x00fa9a,
+	  mediumturquoise: 0x48d1cc,
+	  mediumvioletred: 0xc71585,
+	  midnightblue: 0x191970,
+	  mintcream: 0xf5fffa,
+	  mistyrose: 0xffe4e1,
+	  moccasin: 0xffe4b5,
+	  navajowhite: 0xffdead,
+	  navy: 0x000080,
+	  oldlace: 0xfdf5e6,
+	  olive: 0x808000,
+	  olivedrab: 0x6b8e23,
+	  orange: 0xffa500,
+	  orangered: 0xff4500,
+	  orchid: 0xda70d6,
+	  palegoldenrod: 0xeee8aa,
+	  palegreen: 0x98fb98,
+	  paleturquoise: 0xafeeee,
+	  palevioletred: 0xdb7093,
+	  papayawhip: 0xffefd5,
+	  peachpuff: 0xffdab9,
+	  peru: 0xcd853f,
+	  pink: 0xffc0cb,
+	  plum: 0xdda0dd,
+	  powderblue: 0xb0e0e6,
+	  purple: 0x800080,
+	  rebeccapurple: 0x663399,
+	  red: 0xff0000,
+	  rosybrown: 0xbc8f8f,
+	  royalblue: 0x4169e1,
+	  saddlebrown: 0x8b4513,
+	  salmon: 0xfa8072,
+	  sandybrown: 0xf4a460,
+	  seagreen: 0x2e8b57,
+	  seashell: 0xfff5ee,
+	  sienna: 0xa0522d,
+	  silver: 0xc0c0c0,
+	  skyblue: 0x87ceeb,
+	  slateblue: 0x6a5acd,
+	  slategray: 0x708090,
+	  slategrey: 0x708090,
+	  snow: 0xfffafa,
+	  springgreen: 0x00ff7f,
+	  steelblue: 0x4682b4,
+	  tan: 0xd2b48c,
+	  teal: 0x008080,
+	  thistle: 0xd8bfd8,
+	  tomato: 0xff6347,
+	  turquoise: 0x40e0d0,
+	  violet: 0xee82ee,
+	  wheat: 0xf5deb3,
+	  white: 0xffffff,
+	  whitesmoke: 0xf5f5f5,
+	  yellow: 0xffff00,
+	  yellowgreen: 0x9acd32
 	};
 
-	// Return undefined instead of __proto__ if '__proto__' is not an own property
-	var getProperty = function getProperty(obj, name) {
-		if (name === '__proto__') {
-			if (!hasOwn.call(obj, name)) {
-				return void 0;
-			} else if (gOPD) {
-				// In early versions of node, obj['__proto__'] is buggy when obj has
-				// __proto__ as an own property. Object.getOwnPropertyDescriptor() works.
-				return gOPD(obj, name).value;
-			}
-		}
+	define(Color, color$3, {
+	  copy: function(channels) {
+	    return Object.assign(new this.constructor, this, channels);
+	  },
+	  displayable: function() {
+	    return this.rgb().displayable();
+	  },
+	  hex: color_formatHex, // Deprecated! Use color.formatHex.
+	  formatHex: color_formatHex,
+	  formatHsl: color_formatHsl,
+	  formatRgb: color_formatRgb,
+	  toString: color_formatRgb
+	});
 
-		return obj[name];
-	};
+	function color_formatHex() {
+	  return this.rgb().formatHex();
+	}
 
-	var extend$2 = function extend() {
-		var options, name, src, copy, copyIsArray, clone;
-		var target = arguments[0];
-		var i = 1;
-		var length = arguments.length;
-		var deep = false;
+	function color_formatHsl() {
+	  return hslConvert(this).formatHsl();
+	}
 
-		// Handle a deep copy situation
+	function color_formatRgb() {
+	  return this.rgb().formatRgb();
+	}
+
+	function color$3(format) {
+	  var m, l;
+	  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
+	      : 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)
+	      : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
+	      : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
+	      : null;
+	}
+
+	function rgbn(n) {
+	  return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
+	}
+
+	function rgba(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) return new Rgb;
+	  o = o.rgb();
+	  return new Rgb(o.r, o.g, o.b, o.opacity);
+	}
+
+	function rgb(r, g, b, opacity) {
+	  return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
+	}
+
+	function Rgb(r, g, b, opacity) {
+	  this.r = +r;
+	  this.g = +g;
+	  this.b = +b;
+	  this.opacity = +opacity;
+	}
+
+	define(Rgb, rgb, extend$2(Color, {
+	  brighter: function(k) {
+	    k = k == null ? brighter : Math.pow(brighter, k);
+	    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+	  },
+	  darker: function(k) {
+	    k = k == null ? darker : Math.pow(darker, k);
+	    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+	  },
+	  rgb: function() {
+	    return this;
+	  },
+	  displayable: function() {
+	    return (-0.5 <= this.r && this.r < 255.5)
+	        && (-0.5 <= this.g && this.g < 255.5)
+	        && (-0.5 <= this.b && this.b < 255.5)
+	        && (0 <= this.opacity && this.opacity <= 1);
+	  },
+	  hex: rgb_formatHex, // Deprecated! Use color.formatHex.
+	  formatHex: rgb_formatHex,
+	  formatRgb: rgb_formatRgb,
+	  toString: rgb_formatRgb
+	}));
+
+	function rgb_formatHex() {
+	  return "#" + hex(this.r) + hex(this.g) + hex(this.b);
+	}
+
+	function rgb_formatRgb() {
+	  var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
+	  return (a === 1 ? "rgb(" : "rgba(")
+	      + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", "
+	      + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", "
+	      + Math.max(0, Math.min(255, Math.round(this.b) || 0))
+	      + (a === 1 ? ")" : ", " + a + ")");
+	}
+
+	function hex(value) {
+	  value = Math.max(0, Math.min(255, Math.round(value) || 0));
+	  return (value < 16 ? "0" : "") + value.toString(16);
+	}
+
+	function hsla(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;
+	  return new Hsl(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) return new Hsl;
+	  if (o instanceof Hsl) return o;
+	  o = o.rgb();
+	  var r = o.r / 255,
+	      g = o.g / 255,
+	      b = o.b / 255,
+	      min = Math.min(r, g, b),
+	      max = Math.max(r, g, b),
+	      h = NaN,
+	      s = max - min,
+	      l = (max + min) / 2;
+	  if (s) {
+	    if (r === max) h = (g - b) / s + (g < b) * 6;
+	    else if (g === max) h = (b - r) / s + 2;
+	    else h = (r - g) / s + 4;
+	    s /= l < 0.5 ? max + min : 2 - max - min;
+	    h *= 60;
+	  } else {
+	    s = l > 0 && l < 1 ? 0 : h;
+	  }
+	  return new Hsl(h, s, l, o.opacity);
+	}
+
+	function hsl(h, s, l, opacity) {
+	  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
+	}
+
+	function Hsl(h, s, l, opacity) {
+	  this.h = +h;
+	  this.s = +s;
+	  this.l = +l;
+	  this.opacity = +opacity;
+	}
+
+	define(Hsl, hsl, extend$2(Color, {
+	  brighter: function(k) {
+	    k = k == null ? brighter : Math.pow(brighter, k);
+	    return new Hsl(this.h, this.s, this.l * k, this.opacity);
+	  },
+	  darker: function(k) {
+	    k = k == null ? darker : Math.pow(darker, k);
+	    return new Hsl(this.h, this.s, this.l * k, this.opacity);
+	  },
+	  rgb: function() {
+	    var h = this.h % 360 + (this.h < 0) * 360,
+	        s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
+	        l = this.l,
+	        m2 = l + (l < 0.5 ? l : 1 - l) * s,
+	        m1 = 2 * l - m2;
+	    return new Rgb(
+	      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
+	      hsl2rgb(h, m1, m2),
+	      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
+	      this.opacity
+	    );
+	  },
+	  displayable: function() {
+	    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
+	        && (0 <= this.l && this.l <= 1)
+	        && (0 <= this.opacity && this.opacity <= 1);
+	  },
+	  formatHsl: function() {
+	    var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
+	    return (a === 1 ? "hsl(" : "hsla(")
+	        + (this.h || 0) + ", "
+	        + (this.s || 0) * 100 + "%, "
+	        + (this.l || 0) * 100 + "%"
+	        + (a === 1 ? ")" : ", " + a + ")");
+	  }
+	}));
+
+	/* From FvD 13.37, CSS Color Module Level 3 */
+	function hsl2rgb(h, m1, m2) {
+	  return (h < 60 ? m1 + (m2 - m1) * h / 60
+	      : h < 180 ? m2
+	      : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
+	      : m1) * 255;
+	}
+
+	var hasOwn = Object.prototype.hasOwnProperty;
+	var toStr = Object.prototype.toString;
+	var defineProperty = Object.defineProperty;
+	var gOPD = Object.getOwnPropertyDescriptor;
+
+	var isArray$1 = function isArray(arr) {
+		if (typeof Array.isArray === 'function') {
+			return Array.isArray(arr);
+		}
+
+		return toStr.call(arr) === '[object Array]';
+	};
+
+	var isPlainObject$1 = function isPlainObject(obj) {
+		if (!obj || toStr.call(obj) !== '[object Object]') {
+			return false;
+		}
+
+		var hasOwnConstructor = hasOwn.call(obj, 'constructor');
+		var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf');
+		// Not own constructor property must be Object
+		if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
+			return false;
+		}
+
+		// Own properties are enumerated firstly, so to speed up,
+		// if last one is own, then all properties are own.
+		var key;
+		for (key in obj) { /**/ }
+
+		return typeof key === 'undefined' || hasOwn.call(obj, key);
+	};
+
+	// If name is '__proto__', and Object.defineProperty is available, define __proto__ as an own property on target
+	var setProperty = function setProperty(target, options) {
+		if (defineProperty && options.name === '__proto__') {
+			defineProperty(target, options.name, {
+				enumerable: true,
+				configurable: true,
+				value: options.newValue,
+				writable: true
+			});
+		} else {
+			target[options.name] = options.newValue;
+		}
+	};
+
+	// Return undefined instead of __proto__ if '__proto__' is not an own property
+	var getProperty = function getProperty(obj, name) {
+		if (name === '__proto__') {
+			if (!hasOwn.call(obj, name)) {
+				return void 0;
+			} else if (gOPD) {
+				// In early versions of node, obj['__proto__'] is buggy when obj has
+				// __proto__ as an own property. Object.getOwnPropertyDescriptor() works.
+				return gOPD(obj, name).value;
+			}
+		}
+
+		return obj[name];
+	};
+
+	var extend$1 = function extend() {
+		var options, name, src, copy, copyIsArray, clone;
+		var target = arguments[0];
+		var i = 1;
+		var length = arguments.length;
+		var deep = false;
+
+		// Handle a deep copy situation
 		if (typeof target === 'boolean') {
 			deep = target;
 			target = arguments[1] || {};
@@ -2253,11 +2655,11 @@
 		"@H6": "10px"
 	};
 	var type$1 = "light";
-	var color$3 = "@B35";
+	var color$2 = "@B35";
 	var lightRawJSON = {
 		_variables: _variables$1,
 		type: type$1,
-		color: color$3
+		color: color$2
 	};
 
 	var _variables = {
@@ -2278,18 +2680,18 @@
 		"@H6": "10px"
 	};
 	var type = "dark";
-	var color$2 = "@B98";
+	var color$1 = "@B98";
 	var darkRawJSON = {
 		_variables: _variables,
 		type: type,
-		color: color$2
+		color: color$1
 	};
 
 	function setTheme(t, resolve) {
 	  const colorRawJSON = t.type === 'dark' ? darkRawJSON : lightRawJSON;
-	  const root = extend$2(true, {}, baseRawJSON, colorRawJSON); // avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
+	  const root = extend$1(true, {}, baseRawJSON, colorRawJSON); // avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
 
-	  const rawThemeJSON = extend$2(true, {}, root, {
+	  const rawThemeJSON = extend$1(true, {}, root, {
 	    scales: null,
 	    palettes: {
 	      data: null,
@@ -2375,430 +2777,49 @@
 	          translation: s.translation,
 	          type: 'row',
 	          colors: s.colors
-	        });
-	      });
-	      return pals;
-	    },
-
-	    dataColors() {
-	      /** @interface Theme~DataColorSpecials */
-	      return (
-	        /** @lends Theme~DataColorSpecials */
-	        {
-	          /** @type {string} */
-	          primary: resolvedTheme.dataColors.primaryColor,
-
-	          /** @type {string} */
-	          nil: resolvedTheme.dataColors.nullColor,
-
-	          /** @type {string} */
-	          others: resolvedTheme.dataColors.othersColor
-	        }
-	      );
-	    },
-
-	    uiColor(c) {
-	      if (c.index < 0 || typeof c.index === 'undefined') {
-	        return c.color;
-	      }
-
-	      if (typeof uiPalette === 'undefined') {
-	        uiPalette = this.uiPalettes()[0] || false;
-	      }
-
-	      if (!uiPalette) {
-	        return c.color;
-	      }
-
-	      if (typeof uiPalette.colors[c.index] === 'undefined') {
-	        return c.color;
-	      }
-
-	      return uiPalette.colors[c.index];
-	    }
-
-	  };
-	}
-
-	function define(constructor, factory, prototype) {
-	  constructor.prototype = factory.prototype = prototype;
-	  prototype.constructor = constructor;
-	}
-
-	function extend$1(parent, definition) {
-	  var prototype = Object.create(parent.prototype);
-	  for (var key in definition) prototype[key] = definition[key];
-	  return prototype;
-	}
-
-	function Color() {}
-
-	var darker = 0.7;
-	var brighter = 1 / darker;
-
-	var reI = "\\s*([+-]?\\d+)\\s*",
-	    reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
-	    reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
-	    reHex = /^#([0-9a-f]{3,8})$/,
-	    reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
-	    reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
-	    reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
-	    reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"),
-	    reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"),
-	    reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");
-
-	var named = {
-	  aliceblue: 0xf0f8ff,
-	  antiquewhite: 0xfaebd7,
-	  aqua: 0x00ffff,
-	  aquamarine: 0x7fffd4,
-	  azure: 0xf0ffff,
-	  beige: 0xf5f5dc,
-	  bisque: 0xffe4c4,
-	  black: 0x000000,
-	  blanchedalmond: 0xffebcd,
-	  blue: 0x0000ff,
-	  blueviolet: 0x8a2be2,
-	  brown: 0xa52a2a,
-	  burlywood: 0xdeb887,
-	  cadetblue: 0x5f9ea0,
-	  chartreuse: 0x7fff00,
-	  chocolate: 0xd2691e,
-	  coral: 0xff7f50,
-	  cornflowerblue: 0x6495ed,
-	  cornsilk: 0xfff8dc,
-	  crimson: 0xdc143c,
-	  cyan: 0x00ffff,
-	  darkblue: 0x00008b,
-	  darkcyan: 0x008b8b,
-	  darkgoldenrod: 0xb8860b,
-	  darkgray: 0xa9a9a9,
-	  darkgreen: 0x006400,
-	  darkgrey: 0xa9a9a9,
-	  darkkhaki: 0xbdb76b,
-	  darkmagenta: 0x8b008b,
-	  darkolivegreen: 0x556b2f,
-	  darkorange: 0xff8c00,
-	  darkorchid: 0x9932cc,
-	  darkred: 0x8b0000,
-	  darksalmon: 0xe9967a,
-	  darkseagreen: 0x8fbc8f,
-	  darkslateblue: 0x483d8b,
-	  darkslategray: 0x2f4f4f,
-	  darkslategrey: 0x2f4f4f,
-	  darkturquoise: 0x00ced1,
-	  darkviolet: 0x9400d3,
-	  deeppink: 0xff1493,
-	  deepskyblue: 0x00bfff,
-	  dimgray: 0x696969,
-	  dimgrey: 0x696969,
-	  dodgerblue: 0x1e90ff,
-	  firebrick: 0xb22222,
-	  floralwhite: 0xfffaf0,
-	  forestgreen: 0x228b22,
-	  fuchsia: 0xff00ff,
-	  gainsboro: 0xdcdcdc,
-	  ghostwhite: 0xf8f8ff,
-	  gold: 0xffd700,
-	  goldenrod: 0xdaa520,
-	  gray: 0x808080,
-	  green: 0x008000,
-	  greenyellow: 0xadff2f,
-	  grey: 0x808080,
-	  honeydew: 0xf0fff0,
-	  hotpink: 0xff69b4,
-	  indianred: 0xcd5c5c,
-	  indigo: 0x4b0082,
-	  ivory: 0xfffff0,
-	  khaki: 0xf0e68c,
-	  lavender: 0xe6e6fa,
-	  lavenderblush: 0xfff0f5,
-	  lawngreen: 0x7cfc00,
-	  lemonchiffon: 0xfffacd,
-	  lightblue: 0xadd8e6,
-	  lightcoral: 0xf08080,
-	  lightcyan: 0xe0ffff,
-	  lightgoldenrodyellow: 0xfafad2,
-	  lightgray: 0xd3d3d3,
-	  lightgreen: 0x90ee90,
-	  lightgrey: 0xd3d3d3,
-	  lightpink: 0xffb6c1,
-	  lightsalmon: 0xffa07a,
-	  lightseagreen: 0x20b2aa,
-	  lightskyblue: 0x87cefa,
-	  lightslategray: 0x778899,
-	  lightslategrey: 0x778899,
-	  lightsteelblue: 0xb0c4de,
-	  lightyellow: 0xffffe0,
-	  lime: 0x00ff00,
-	  limegreen: 0x32cd32,
-	  linen: 0xfaf0e6,
-	  magenta: 0xff00ff,
-	  maroon: 0x800000,
-	  mediumaquamarine: 0x66cdaa,
-	  mediumblue: 0x0000cd,
-	  mediumorchid: 0xba55d3,
-	  mediumpurple: 0x9370db,
-	  mediumseagreen: 0x3cb371,
-	  mediumslateblue: 0x7b68ee,
-	  mediumspringgreen: 0x00fa9a,
-	  mediumturquoise: 0x48d1cc,
-	  mediumvioletred: 0xc71585,
-	  midnightblue: 0x191970,
-	  mintcream: 0xf5fffa,
-	  mistyrose: 0xffe4e1,
-	  moccasin: 0xffe4b5,
-	  navajowhite: 0xffdead,
-	  navy: 0x000080,
-	  oldlace: 0xfdf5e6,
-	  olive: 0x808000,
-	  olivedrab: 0x6b8e23,
-	  orange: 0xffa500,
-	  orangered: 0xff4500,
-	  orchid: 0xda70d6,
-	  palegoldenrod: 0xeee8aa,
-	  palegreen: 0x98fb98,
-	  paleturquoise: 0xafeeee,
-	  palevioletred: 0xdb7093,
-	  papayawhip: 0xffefd5,
-	  peachpuff: 0xffdab9,
-	  peru: 0xcd853f,
-	  pink: 0xffc0cb,
-	  plum: 0xdda0dd,
-	  powderblue: 0xb0e0e6,
-	  purple: 0x800080,
-	  rebeccapurple: 0x663399,
-	  red: 0xff0000,
-	  rosybrown: 0xbc8f8f,
-	  royalblue: 0x4169e1,
-	  saddlebrown: 0x8b4513,
-	  salmon: 0xfa8072,
-	  sandybrown: 0xf4a460,
-	  seagreen: 0x2e8b57,
-	  seashell: 0xfff5ee,
-	  sienna: 0xa0522d,
-	  silver: 0xc0c0c0,
-	  skyblue: 0x87ceeb,
-	  slateblue: 0x6a5acd,
-	  slategray: 0x708090,
-	  slategrey: 0x708090,
-	  snow: 0xfffafa,
-	  springgreen: 0x00ff7f,
-	  steelblue: 0x4682b4,
-	  tan: 0xd2b48c,
-	  teal: 0x008080,
-	  thistle: 0xd8bfd8,
-	  tomato: 0xff6347,
-	  turquoise: 0x40e0d0,
-	  violet: 0xee82ee,
-	  wheat: 0xf5deb3,
-	  white: 0xffffff,
-	  whitesmoke: 0xf5f5f5,
-	  yellow: 0xffff00,
-	  yellowgreen: 0x9acd32
-	};
-
-	define(Color, color$1, {
-	  copy: function(channels) {
-	    return Object.assign(new this.constructor, this, channels);
-	  },
-	  displayable: function() {
-	    return this.rgb().displayable();
-	  },
-	  hex: color_formatHex, // Deprecated! Use color.formatHex.
-	  formatHex: color_formatHex,
-	  formatHsl: color_formatHsl,
-	  formatRgb: color_formatRgb,
-	  toString: color_formatRgb
-	});
-
-	function color_formatHex() {
-	  return this.rgb().formatHex();
-	}
-
-	function color_formatHsl() {
-	  return hslConvert(this).formatHsl();
-	}
-
-	function color_formatRgb() {
-	  return this.rgb().formatRgb();
-	}
-
-	function color$1(format) {
-	  var m, l;
-	  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
-	      : 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)
-	      : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
-	      : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
-	      : null;
-	}
-
-	function rgbn(n) {
-	  return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
-	}
-
-	function rgba(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$1(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) {
-	  return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
-	}
-
-	function Rgb(r, g, b, opacity) {
-	  this.r = +r;
-	  this.g = +g;
-	  this.b = +b;
-	  this.opacity = +opacity;
-	}
-
-	define(Rgb, rgb, extend$1(Color, {
-	  brighter: function(k) {
-	    k = k == null ? brighter : Math.pow(brighter, k);
-	    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
-	  },
-	  darker: function(k) {
-	    k = k == null ? darker : Math.pow(darker, k);
-	    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
-	  },
-	  rgb: function() {
-	    return this;
-	  },
-	  displayable: function() {
-	    return (-0.5 <= this.r && this.r < 255.5)
-	        && (-0.5 <= this.g && this.g < 255.5)
-	        && (-0.5 <= this.b && this.b < 255.5)
-	        && (0 <= this.opacity && this.opacity <= 1);
-	  },
-	  hex: rgb_formatHex, // Deprecated! Use color.formatHex.
-	  formatHex: rgb_formatHex,
-	  formatRgb: rgb_formatRgb,
-	  toString: rgb_formatRgb
-	}));
+	        });
+	      });
+	      return pals;
+	    },
 
-	function rgb_formatHex() {
-	  return "#" + hex(this.r) + hex(this.g) + hex(this.b);
-	}
+	    dataColors() {
+	      /** @interface Theme~DataColorSpecials */
+	      return (
+	        /** @lends Theme~DataColorSpecials */
+	        {
+	          /** @type {string} */
+	          primary: resolvedTheme.dataColors.primaryColor,
 
-	function rgb_formatRgb() {
-	  var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
-	  return (a === 1 ? "rgb(" : "rgba(")
-	      + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", "
-	      + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", "
-	      + Math.max(0, Math.min(255, Math.round(this.b) || 0))
-	      + (a === 1 ? ")" : ", " + a + ")");
-	}
+	          /** @type {string} */
+	          nil: resolvedTheme.dataColors.nullColor,
 
-	function hex(value) {
-	  value = Math.max(0, Math.min(255, Math.round(value) || 0));
-	  return (value < 16 ? "0" : "") + value.toString(16);
-	}
+	          /** @type {string} */
+	          others: resolvedTheme.dataColors.othersColor
+	        }
+	      );
+	    },
 
-	function hsla(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;
-	  return new Hsl(h, s, l, a);
-	}
+	    uiColor(c) {
+	      if (c.index < 0 || typeof c.index === 'undefined') {
+	        return c.color;
+	      }
 
-	function hslConvert(o) {
-	  if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
-	  if (!(o instanceof Color)) o = color$1(o);
-	  if (!o) return new Hsl;
-	  if (o instanceof Hsl) return o;
-	  o = o.rgb();
-	  var r = o.r / 255,
-	      g = o.g / 255,
-	      b = o.b / 255,
-	      min = Math.min(r, g, b),
-	      max = Math.max(r, g, b),
-	      h = NaN,
-	      s = max - min,
-	      l = (max + min) / 2;
-	  if (s) {
-	    if (r === max) h = (g - b) / s + (g < b) * 6;
-	    else if (g === max) h = (b - r) / s + 2;
-	    else h = (r - g) / s + 4;
-	    s /= l < 0.5 ? max + min : 2 - max - min;
-	    h *= 60;
-	  } else {
-	    s = l > 0 && l < 1 ? 0 : h;
-	  }
-	  return new Hsl(h, s, l, o.opacity);
-	}
+	      if (typeof uiPalette === 'undefined') {
+	        uiPalette = this.uiPalettes()[0] || false;
+	      }
 
-	function hsl(h, s, l, opacity) {
-	  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
-	}
+	      if (!uiPalette) {
+	        return c.color;
+	      }
 
-	function Hsl(h, s, l, opacity) {
-	  this.h = +h;
-	  this.s = +s;
-	  this.l = +l;
-	  this.opacity = +opacity;
-	}
+	      if (typeof uiPalette.colors[c.index] === 'undefined') {
+	        return c.color;
+	      }
 
-	define(Hsl, hsl, extend$1(Color, {
-	  brighter: function(k) {
-	    k = k == null ? brighter : Math.pow(brighter, k);
-	    return new Hsl(this.h, this.s, this.l * k, this.opacity);
-	  },
-	  darker: function(k) {
-	    k = k == null ? darker : Math.pow(darker, k);
-	    return new Hsl(this.h, this.s, this.l * k, this.opacity);
-	  },
-	  rgb: function() {
-	    var h = this.h % 360 + (this.h < 0) * 360,
-	        s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
-	        l = this.l,
-	        m2 = l + (l < 0.5 ? l : 1 - l) * s,
-	        m1 = 2 * l - m2;
-	    return new Rgb(
-	      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
-	      hsl2rgb(h, m1, m2),
-	      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
-	      this.opacity
-	    );
-	  },
-	  displayable: function() {
-	    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
-	        && (0 <= this.l && this.l <= 1)
-	        && (0 <= this.opacity && this.opacity <= 1);
-	  },
-	  formatHsl: function() {
-	    var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
-	    return (a === 1 ? "hsl(" : "hsla(")
-	        + (this.h || 0) + ", "
-	        + (this.s || 0) * 100 + "%, "
-	        + (this.l || 0) * 100 + "%"
-	        + (a === 1 ? ")" : ", " + a + ")");
-	  }
-	}));
+	      return uiPalette.colors[c.index];
+	    }
 
-	/* From FvD 13.37, CSS Color Module Level 3 */
-	function hsl2rgb(h, m1, m2) {
-	  return (h < 60 ? m1 + (m2 - m1) * h / 60
-	      : h < 180 ? m2
-	      : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
-	      : m1) * 255;
+	  };
 	}
 
 	/**
@@ -2839,7 +2860,7 @@
 	    this.startLevel = 0;
 	    this.max = 1;
 	    this.min = 0;
-	    this.nanColor = color$1(nanColor);
+	    this.nanColor = color$3(nanColor);
 	  }
 	  /**
 	   * Adds a part to this color scale. The input colors span one part of the gradient, colors between them are interpolated. Input two equal colors for a solid scale part.
@@ -2859,7 +2880,7 @@
 	      this.colorParts[level] = [];
 	    }
 
-	    this.colorParts[level].push([color$1(color1), color$1(color2)]);
+	    this.colorParts[level].push([color$3(color1), color$3(color2)]);
 	  }
 	  /**
 	   * Gets the color which represents the input value
@@ -2965,7 +2986,7 @@
 	        }
 	    }
 
-	    level.push(color$1(c).formatHex());
+	    level.push(color$3(c).formatHex());
 	  }
 
 	  return level;
@@ -3155,7 +3176,7 @@
 
 	styleResolver.resolveRawTheme = raw => {
 	  // TODO - validate format
-	  const c = extend$2(true, {}, raw);
+	  const c = extend$1(true, {}, raw);
 	  resolveVariables(c, c._variables); // eslint-disable-line
 	  // generate class-pyramid
 
@@ -3167,7 +3188,7 @@
 	};
 
 	function luminance(colStr) {
-	  const c = color$1(colStr).rgb();
+	  const c = color$3(colStr).rgb();
 	  const {
 	    r,
 	    g,
@@ -3308,6 +3329,23 @@
 	      }
 
 	      return styleResolverInstanceCache[basePath].getStyle(path, attribute);
+	    },
+
+	    /**
+	     * Validates a color string using d3-color.
+	     * See https://www.npmjs.com/package/d3-color
+	     * @param {string} specifier
+	     * @returns {string|undefined} The resolved color or undefined
+	     * @ignore
+	     *
+	     * @example
+	     * theme.validateColor("red"); // returns "rgba(255,0,0,1)"
+	     * theme.validateColor("#00ff00"); // returns "rgba(0,255,0,1)"
+	     * theme.validateColor("FOO"); // returns undefined
+	     */
+	    validateColor() {
+	      const c = color$3(...arguments);
+	      return c ? c.toString() : undefined;
 	    }
 
 	  };
@@ -12781,7 +12819,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "85ad" ;
+	const NEBULA_VERSION_HASH = "1c8e" ;
 	ClassNameGenerator$1.configure(componentName => {
 
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
@@ -13354,7 +13392,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "3.0.4" );
+	  element.setAttribute('data-nebulajs-version', "3.1.0-alpha.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -19990,7 +20028,7 @@
 	  } = _ref2;
 
 	  const focusInsideListbox = element => {
-	    const fieldElement = element.querySelector('.search input, .value.selector, .value');
+	    const fieldElement = element.querySelector('.search input, .value.selector, .value, .ActionsToolbar-* button');
 	    setKeyboardActive(true);
 
 	    if (fieldElement) {
@@ -20147,11 +20185,11 @@
 	      width: '100%',
 	      height: '100%',
 	      // The checkbox's span
-	      '& > span:nth-child(1)': {
+	      '& > span:nth-of-type(1)': {
 	        paddingRight: '8px'
 	      },
 	      // The checkbox's label container.
-	      '& > span:nth-child(2)': _objectSpread2(_objectSpread2({}, ellipsis), {}, {
+	      '& > span:nth-of-type(2)': _objectSpread2(_objectSpread2({}, ellipsis), {}, {
 	        display: 'flex',
 	        alignItems: 'center',
 	        paddingLeft: 0
@@ -20544,7 +20582,6 @@
 	    keyboard = {},
 	    showGray = true,
 	    scrollState,
-	    sortByState,
 	    selectDisabled = () => false,
 	    setCount
 	  } = _ref2;
@@ -20635,9 +20672,9 @@
 	    local.current.validPages = false;
 
 	    if (loaderRef.current) {
-	      loaderRef.current.resetloadMoreItemsCache(true); // Skip scrollToItem if we are in selections, or if we dont sort by state.
+	      loaderRef.current.resetloadMoreItemsCache(true); // Skip scrollToItem if we are in selections.
 
-	      if (layout && layout.qSelectionInfo.qInSelections || sortByState === 0) {
+	      if (layout && layout.qSelectionInfo.qInSelections) {
 	        return;
 	      }
 
@@ -20888,6 +20925,7 @@
 	};
 	const Item = React.forwardRef((_ref, ref) => {
 	  let {
+	    ariaExpanded = false,
 	    item,
 	    addAnchor = false
 	  } = _ref;
@@ -20908,7 +20946,9 @@
 	    disabled: disabled,
 	    style: style,
 	    className: ActionElement.className,
-	    size: "large"
+	    size: "large",
+	    "aria-expanded": ariaExpanded,
+	    "aria-controls": "moreMenuList"
 	  }, hasSvgIconShape && SvgIcon(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React.createElement("div", {
 	    ref: ref,
 	    style: {
@@ -21025,7 +21065,8 @@
 	  return !hidden ? /*#__PURE__*/React.createElement(MenuItem$1, {
 	    title: item.label,
 	    onClick: handleClick,
-	    disabled: disabled
+	    disabled: disabled,
+	    tabindex: "0"
 	  }, hasSvgIconShape && /*#__PURE__*/React.createElement(ListItemIcon$1, {
 	    className: classes$8.icon
 	  }, SvgIcon(item.getSvgIconShape())), /*#__PURE__*/React.createElement(Typography$1, {
@@ -21071,7 +21112,9 @@
 	        maxWidth: '250px'
 	      }, popoverPaperStyle)
 	    }
-	  }), /*#__PURE__*/React.createElement(MenuList$1, null, actions.map((item, ix) =>
+	  }), /*#__PURE__*/React.createElement(MenuList$1, {
+	    id: "moreMenuList"
+	  }, actions.map((item, ix) =>
 	  /*#__PURE__*/
 	  // eslint-disable-next-line react/no-array-index-key
 	  React.createElement(MoreItem, {
@@ -21115,6 +21158,7 @@
 	};
 	const ActionsGroup = React.forwardRef((_ref2, ref) => {
 	  let {
+	    ariaExpanded = false,
 	    actions = [],
 	    first = false,
 	    last = false,
@@ -21147,6 +21191,7 @@
 	      key: e.key,
 	      className: cls.join(' ').trim()
 	    }, /*#__PURE__*/React.createElement(Item, {
+	      ariaExpanded: ariaExpanded,
 	      key: e.key,
 	      item: e,
 	      ref: ix === 0 ? ref : null,
@@ -21285,6 +21330,7 @@
 	    last: !showMore && !selections.show
 	  }), showMore && /*#__PURE__*/React.createElement(ActionsGroup, {
 	    ref: moreRef,
+	    ariaExpanded: showMoreItems,
 	    actions: [moreItem],
 	    first: !showActions,
 	    last: !selections.show,
@@ -23110,146 +23156,59 @@
 
 	const PREFIX$4 = 'ListBoxInline';
 	const classes$4 = {
-	  listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader")
+	  listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
+	  screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly")
 	};
 	const StyledGrid$3 = styled$1(Grid$1)(() => ({
 	  ["& .".concat(classes$4.listBoxHeader)]: {
 	    alignSelf: 'center',
 	    display: 'inline-flex'
+	  },
+	  ["& .".concat(classes$4.screenReaderOnly)]: {
+	    position: 'absolute',
+	    height: 0,
+	    width: 0,
+	    overflow: 'hidden'
 	  }
-	}));
-	function ListBoxInline(_ref) {
-	  let {
-	    app,
-	    fieldIdentifier,
-	    stateName = '$',
-	    options = {},
-	    fieldDef
-	  } = _ref;
-	  const {
-	    title,
-	    direction,
-	    listLayout,
-	    search = true,
-	    focusSearch = false,
-	    toolbar = true,
-	    rangeSelect = true,
-	    checkboxes = false,
-	    properties = {},
-	    sessionModel = undefined,
-	    selectionsApi = undefined,
-	    update = undefined,
-	    fetchStart = undefined,
-	    dense = false,
-	    selectDisabled = () => false,
-	    postProcessPages = undefined,
-	    calculatePagesHeight,
-	    showGray = true,
-	    scrollState = undefined,
-	    setCount = undefined,
-	    shouldConfirmOnBlur = undefined
-	  } = options;
-	  let {
-	    frequencyMode,
-	    histogram = false
-	  } = options;
-
-	  if (fieldDef && fieldDef.failedToFetchFieldDef) {
-	    histogram = false;
-	    frequencyMode = 'N';
-	  }
-
-	  switch (true) {
-	    case ['none', 'N', 'NX_FREQUENCY_NONE'].includes(frequencyMode):
-	      frequencyMode = 'N';
-	      break;
-
-	    case ['value', 'V', 'NX_FREQUENCY_VALUE', 'default'].includes(frequencyMode):
-	      frequencyMode = 'V';
-	      break;
-
-	    case ['percent', 'P', 'NX_FREQUENCY_PERCENT'].includes(frequencyMode):
-	      frequencyMode = 'P';
-	      break;
-
-	    case ['relative', 'R', 'NX_FREQUENCY_RELATIVE'].includes(frequencyMode):
-	      frequencyMode = 'R';
-	      break;
-
-	    default:
-	      frequencyMode = 'N';
-	      break;
-	  }
-
-	  const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode; // Hook that will trigger update when used in useEffects.
-	  // Modified from: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
-
-
-	  const useRefWithCallback = () => {
-	    const [ref, setInternalRef] = react.exports.useState({});
-	    const setRef = react.exports.useCallback(node => {
-	      setInternalRef({
-	        current: node
-	      });
-	    }, [setInternalRef]);
-	    return [ref, setRef];
-	  };
-
-	  const listdef = {
-	    qInfo: {
-	      qType: 'njsListbox'
-	    },
-	    qListObjectDef: {
-	      qStateName: stateName,
-	      qShowAlternatives: true,
-	      qFrequencyMode: getListdefFrequencyMode(),
-	      qInitialDataFetch: [{
-	        qTop: 0,
-	        qLeft: 0,
-	        qWidth: 0,
-	        qHeight: 0
-	      }],
-	      qDef: {
-	        qSortCriterias: [{
-	          qSortByState: 1,
-	          qSortByAscii: 1,
-	          qSortByNumeric: 1,
-	          qSortByLoadOrder: 1
-	        }]
-	      }
-	    },
-	    title
-	  };
-	  extend$2(true, listdef, properties); // Something something lib dimension
-
-	  let fieldName;
-
-	  if (fieldIdentifier.qLibraryId) {
-	    listdef.qListObjectDef.qLibraryId = fieldIdentifier.qLibraryId;
-	    fieldName = fieldIdentifier.qLibraryId;
-	  } else {
-	    listdef.qListObjectDef.qDef.qFieldDefs = [fieldIdentifier];
-	    fieldName = fieldIdentifier;
-	  }
-
-	  if (frequencyMode !== 'N' || histogram) {
-	    const field = fieldIdentifier.qLibraryId ? fieldDef : fieldName;
-	    listdef.frequencyMax = {
-	      qValueExpression: "Max(AGGR(Count([".concat(field, "]), [").concat(field, "]))")
-	    };
-	  }
-
-	  let [model] = useSessionModel(listdef, sessionModel ? null : app, fieldName, stateName);
-
-	  if (sessionModel) {
-	    model = sessionModel;
-	  }
-
-	  let selections = useObjectSelections(selectionsApi ? {} : app, model)[0];
+	}));
+	function ListBoxInline(_ref) {
+	  let {
+	    options = {}
+	  } = _ref;
+	  const {
+	    direction,
+	    frequencyMode,
+	    histogram = false,
+	    listLayout,
+	    search = true,
+	    focusSearch = false,
+	    toolbar = true,
+	    rangeSelect = true,
+	    checkboxes = false,
+	    model,
+	    selections,
+	    update = undefined,
+	    fetchStart = undefined,
+	    dense = false,
+	    selectDisabled = () => false,
+	    postProcessPages = undefined,
+	    calculatePagesHeight,
+	    showGray = true,
+	    scrollState = undefined,
+	    setCount = undefined,
+	    shouldConfirmOnBlur = undefined
+	  } = options; // Hook that will trigger update when used in useEffects.
+	  // Modified from: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
 
-	  if (selectionsApi) {
-	    selections = selectionsApi;
-	  }
+	  const useRefWithCallback = () => {
+	    const [ref, setInternalRef] = react.exports.useState({});
+	    const setRef = react.exports.useCallback(node => {
+	      setInternalRef({
+	        current: node
+	      });
+	    }, [setInternalRef]);
+	    return [ref, setRef];
+	  };
 
 	  const theme = useTheme$1();
 	  const lock = react.exports.useCallback(() => {
@@ -23300,7 +23259,7 @@
 	    }
 
 	    return () => {
-	      if (selections) {
+	      if (selections && selections.removeListener) {
 	        selections.removeListener('deactivated', show);
 	        selections.removeListener('activated', hide);
 	      }
@@ -23362,7 +23321,8 @@
 	    gap: 0,
 	    style: {
 	      height: '100%',
-	      minHeight: "".concat(minHeight, "px")
+	      minHeight: "".concat(minHeight, "px"),
+	      flexFlow: 'column nowrap'
 	    },
 	    onKeyDown: handleKeyDown,
 	    ref: listBoxRef
@@ -23412,9 +23372,21 @@
 	      onCancel: () => {}
 	    }
 	  }))), /*#__PURE__*/React.createElement(Grid$1, {
+	    item: true,
+	    container: true,
+	    direction: "column",
+	    style: {
+	      height: '100%',
+	      minHeight: "".concat(minHeight, "px")
+	    },
+	    role: "region",
+	    "aria-label": translator.get('Listbox.ResultFilterLabel')
+	  }, /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    ref: searchContainerRef
-	  }, /*#__PURE__*/React.createElement(ListBoxSearch, {
+	  }, /*#__PURE__*/React.createElement("div", {
+	    className: classes$4.screenReaderOnly
+	  }, translator.get('Listbox.Search.ScreenReaderInstructions')), /*#__PURE__*/React.createElement(ListBoxSearch, {
 	    selections: selections,
 	    model: model,
 	    dense: dense,
@@ -23426,7 +23398,9 @@
 	    xs: true
 	  }, /*#__PURE__*/React.createElement("div", {
 	    ref: moreAlignTo
-	  }), /*#__PURE__*/React.createElement(AutoSizer, null, _ref2 => {
+	  }), /*#__PURE__*/React.createElement("div", {
+	    className: classes$4.screenReaderOnly
+	  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React.createElement(AutoSizer, null, _ref2 => {
 	    let {
 	      height,
 	      width
@@ -23451,32 +23425,63 @@
 	      keyboard: keyboard,
 	      showGray: showGray,
 	      scrollState: scrollState,
-	      sortByState: listdef.qListObjectDef.qDef.qSortCriterias[0].qSortByState,
 	      setCount: setCount
 	    });
-	  })));
+	  }))));
+	}
+
+	function useExistingModel(_ref) {
+	  let {
+	    app,
+	    qId,
+	    options = {}
+	  } = _ref;
+	  const [model, setModel] = react.exports.useState();
+	  const [modelStore] = useModelStore();
+	  const {
+	    sessionModel
+	  } = options;
+	  react.exports.useEffect(() => {
+	    async function fetchObject() {
+	      const modelFromStore = modelStore.get(qId);
+
+	      if (modelFromStore) {
+	        setModel(modelFromStore);
+	      } else {
+	        const m = await app.getObject(qId);
+	        modelStore.set(m.id, m);
+	        setModel(m);
+	      }
+	    }
+
+	    if (sessionModel) {
+	      setModel(sessionModel);
+	    } else {
+	      fetchObject();
+	    }
+	  }, []);
+	  return model;
 	}
 
-	function ListBoxFetchMasterItem(_ref) {
+	function useOnTheFlyModel(_ref) {
 	  let {
 	    app,
 	    fieldIdentifier,
-	    stateName = '$',
+	    stateName,
 	    options = {}
 	  } = _ref;
 	  const [fieldDef, setFieldDef] = react.exports.useState('');
-	  const [isFetchingData, setIsFetchingData] = react.exports.useState(false);
+	  const [isFetching, setIsFetching] = react.exports.useState(true);
+	  const [model, setModel] = react.exports.useState();
 	  react.exports.useEffect(() => {
-	    async function fetchData() {
-	      setIsFetchingData(true);
-
+	    async function fetchMasterItem() {
 	      try {
 	        const dim = await app.getDimension(fieldIdentifier.qLibraryId);
 	        const dimLayout = await dim.getLayout();
 	        setFieldDef(dimLayout.qDim.qFieldDefs ? dimLayout.qDim.qFieldDefs[0] : '');
-	        setIsFetchingData(false);
+	        setIsFetching(false);
 	      } catch (e) {
-	        setIsFetchingData(false);
+	        setIsFetching(false);
 	        setFieldDef({
 	          failedToFetchFieldDef: true
 	        });
@@ -23484,36 +23489,193 @@
 	      }
 	    }
 
-	    fetchData();
+	    const isFrequencyMaxNeeded = options.histogram || options.frequencyMode !== 'N';
+	    const shouldFetchMasterItem = fieldIdentifier.qLibraryId && isFrequencyMaxNeeded;
+
+	    if (shouldFetchMasterItem) {
+	      fetchMasterItem();
+	    } else {
+	      setIsFetching(false);
+	    }
 	  }, []);
+	  const {
+	    title,
+	    properties = {}
+	  } = options;
+	  let {
+	    frequencyMode,
+	    histogram = false
+	  } = options;
 
-	  if (isFetchingData) {
-	    return null;
+	  if (fieldDef && fieldDef.failedToFetchFieldDef) {
+	    histogram = false;
+	    frequencyMode = 'N';
 	  }
 
-	  return /*#__PURE__*/React.createElement(ListBoxInline, {
-	    app: app,
-	    fieldIdentifier: fieldIdentifier,
-	    stateName: stateName,
-	    options: options,
-	    fieldDef: fieldDef
-	  });
+	  switch (true) {
+	    case ['none', 'N', 'NX_FREQUENCY_NONE'].includes(frequencyMode):
+	      frequencyMode = 'N';
+	      break;
+
+	    case ['value', 'V', 'NX_FREQUENCY_VALUE', 'default'].includes(frequencyMode):
+	      frequencyMode = 'V';
+	      break;
+
+	    case ['percent', 'P', 'NX_FREQUENCY_PERCENT'].includes(frequencyMode):
+	      frequencyMode = 'P';
+	      break;
+
+	    case ['relative', 'R', 'NX_FREQUENCY_RELATIVE'].includes(frequencyMode):
+	      frequencyMode = 'R';
+	      break;
+
+	    default:
+	      frequencyMode = 'N';
+	      break;
+	  }
+
+	  const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode;
+
+	  const listdef = {
+	    qInfo: {
+	      qType: 'njsListbox'
+	    },
+	    qListObjectDef: {
+	      qStateName: stateName,
+	      qShowAlternatives: true,
+	      qFrequencyMode: getListdefFrequencyMode(),
+	      qInitialDataFetch: [{
+	        qTop: 0,
+	        qLeft: 0,
+	        qWidth: 0,
+	        qHeight: 0
+	      }],
+	      qDef: {
+	        qSortCriterias: [{
+	          qSortByState: 1,
+	          qSortByAscii: 1,
+	          qSortByNumeric: 1,
+	          qSortByLoadOrder: 1
+	        }]
+	      }
+	    },
+	    title
+	  };
+	  extend$1(true, listdef, properties); // Something something lib dimension
+
+	  let fieldName;
+
+	  if (fieldIdentifier.qLibraryId) {
+	    listdef.qListObjectDef.qLibraryId = fieldIdentifier.qLibraryId;
+	    fieldName = fieldIdentifier.qLibraryId;
+	  } else {
+	    listdef.qListObjectDef.qDef.qFieldDefs = [fieldIdentifier];
+	    fieldName = fieldIdentifier;
+	  }
+
+	  if (frequencyMode !== 'N' || histogram) {
+	    const field = fieldIdentifier.qLibraryId ? fieldDef : fieldName;
+	    listdef.frequencyMax = {
+	      qValueExpression: "Max(AGGR(Count([".concat(field, "]), [").concat(field, "]))")
+	    };
+	  }
+
+	  const [sessionModel] = useSessionModel(listdef, isFetching ? null : app, fieldName, stateName);
+	  react.exports.useEffect(() => {
+	    if (!sessionModel) {
+	      return;
+	    }
+
+	    setModel(sessionModel);
+	  }, [sessionModel]);
+	  return model;
+	}
+
+	const OBJECT_SOURCE = {
+	  ON_THE_FLY: 'ON_THE_FLY',
+	  EXISTING: 'EXISTING'
+	};
+	const SELECTIONS_API = {
+	  INTERNAL: 'INTERNAL',
+	  EXTERNAL: 'EXTERNAL'
+	};
+
+	function identify(_ref) {
+	  let {
+	    qId,
+	    options
+	  } = _ref;
+	  const variant = {}; // Existing or on the fly
+
+	  variant.objectSource = qId || options.sessionModel ? OBJECT_SOURCE.EXISTING : OBJECT_SOURCE.ON_THE_FLY; // Use internal or external selectionsApi
+
+	  variant.selectionsApi = options.selectionsApi ? SELECTIONS_API.EXTERNAL : SELECTIONS_API.INTERNAL;
+	  return variant;
 	}
-	function ListBoxPortal(_ref2) {
+
+	function ListBoxWrapper(_ref2) {
 	  let {
 	    app,
 	    fieldIdentifier,
+	    qId,
 	    stateName,
-	    element,
 	    options
 	  } = _ref2;
-	  const isFrequencyMaxNeeded = options.histogram || options.frequencyMode !== 'N';
-	  const TheComponent = fieldIdentifier.qLibraryId && isFrequencyMaxNeeded ? ListBoxFetchMasterItem : ListBoxInline;
-	  return ReactDOM.createPortal( /*#__PURE__*/React.createElement(TheComponent, {
+	  const {
+	    objectSource,
+	    selectionsApi
+	  } = identify({
+	    qId,
+	    options
+	  });
+	  const [changeCount, setChangeCount] = react.exports.useState(0);
+	  react.exports.useEffect(() => {
+	    if (changeCount) {
+	      throw new Error('Source or selection Api can not change after a listbox has been mounted');
+	    }
+
+	    setChangeCount(changeCount + 1);
+	  }, [objectSource, selectionsApi]);
+	  const model = objectSource === OBJECT_SOURCE.EXISTING ? useExistingModel({
+	    app,
+	    qId,
+	    options
+	  }) : useOnTheFlyModel({
+	    app,
+	    fieldIdentifier,
+	    stateName,
+	    options
+	  });
+	  const selections = selectionsApi === SELECTIONS_API.EXTERNAL ? options.selectionsApi : useObjectSelections(app, model)[0];
+
+	  if (!selections || !model) {
+	    return null;
+	  }
+
+	  const opts = _objectSpread2(_objectSpread2({}, options), {}, {
+	    selections,
+	    model
+	  });
+
+	  return /*#__PURE__*/React.createElement(ListBoxInline, {
+	    options: opts
+	  });
+	}
+
+	function ListBoxPortal(_ref3) {
+	  let {
+	    element,
+	    app,
+	    fieldIdentifier,
+	    qId,
+	    stateName = '$',
+	    options = {}
+	  } = _ref3;
+	  return ReactDOM.createPortal( /*#__PURE__*/React.createElement(ListBoxWrapper, {
 	    app: app,
 	    fieldIdentifier: fieldIdentifier,
+	    qId: qId,
 	    stateName: stateName,
-	    element: element,
 	    options: options
 	  }), element);
 	}
@@ -23615,12 +23777,15 @@
 	        hc.qLayoutExclude.qHyperCubeDef.qMeasures = hc.qLayoutExclude.qHyperCubeDef.qMeasures || [];
 	        hc.qLayoutExclude.qHyperCubeDef.qDimensions.push(dimension);
 	      }
+
+	      return dimension;
 	    },
 
 	    removeDimension(idx) {
 	      const dimension = hc.qDimensions.splice(idx, 1)[0];
 	      removeIndex(hc.qInterColumnSortOrder, idx);
 	      def.dimensions.removed(dimension, objectProperties, idx);
+	      return dimension;
 	    },
 
 	    addMeasure(m) {
@@ -24010,7 +24175,7 @@
 	}
 
 	function createDefaultDimension(dimensionDef, dimensionProperties) {
-	  const def = extend$2(true, {}, dimensionProperties, dimensionDef);
+	  const def = extend$1(true, {}, dimensionProperties, dimensionDef);
 
 	  if (!utils.getValue(def, 'qOtherTotalSpec.qOtherCounted')) {
 	    utils.setValue(def, 'qOtherTotalSpec.qOtherCounted', {
@@ -24032,7 +24197,7 @@
 	}
 
 	function createDefaultMeasure(measureDef, measureProperties) {
-	  return extend$2(true, {}, measureProperties, measureDef);
+	  return extend$1(true, {}, measureProperties, measureDef);
 	}
 
 	function resolveValue$1(data, input, defaultValue) {
@@ -24128,7 +24293,7 @@
 	  Object.keys(exportFormat.properties).forEach(key => {
 	    if (key === 'qLayoutExclude') {
 	      if (exportFormat.properties[key].quarantine) {
-	        newProperties.qLayoutExclude.quarantine = extend$2(true, {}, exportFormat.properties[key].quarantine);
+	        newProperties.qLayoutExclude.quarantine = extend$1(true, {}, exportFormat.properties[key].quarantine);
 	      }
 	    } else if (key === 'qHyperCubeDef' && hypercubePath) {
 	      utils.setValue(newProperties, "".concat(hypercubePath, ".qHyperCubeDef"), exportFormat.properties.qHyperCubeDef);
@@ -24139,7 +24304,7 @@
 	      newProperties.qLayoutExclude.disabled[key] = exportFormat.properties[key];
 	    }
 	  });
-	  newProperties = extend$2(true, {}, initialProperties, newProperties);
+	  newProperties = extend$1(true, {}, initialProperties, newProperties);
 
 	  if (newProperties.components === null) {
 	    newProperties.components = [];
@@ -25363,6 +25528,115 @@
 	  }));
 	}
 
+	const imageSizingToCssProperty = {
+	  originalSize: 'auto auto',
+	  alwaysFit: 'contain',
+	  fitWidth: '100% auto',
+	  fitHeight: 'auto 100%',
+	  stretchFit: '100% 100%',
+	  alwaysFill: 'cover'
+	};
+	const positionToCss = {
+	  'top-left': 'top left',
+	  'top-center': 'top center',
+	  'top-right': 'top right',
+	  'center-left': 'center left',
+	  'center-center': 'center center',
+	  'center-right': 'center right',
+	  'bottom-left': 'bottom left',
+	  'bottom-center': 'bottom center',
+	  'bottom-right': 'bottom right'
+	}; // TODO: this needs some proper verification
+
+	function getSenseServerUrl(app) {
+	  var _app$session;
+
+	  let config;
+	  let wsUrl;
+	  let protocol;
+	  let isSecure;
+
+	  if (app !== null && app !== void 0 && (_app$session = app.session) !== null && _app$session !== void 0 && _app$session.config) {
+	    config = app.session.config;
+	    wsUrl = new URL(config.url);
+	    isSecure = wsUrl.protocol === 'wss:';
+	    protocol = isSecure ? 'https://' : 'http://';
+	    return protocol + wsUrl.host;
+	  }
+
+	  return undefined;
+	}
+
+	function getBackgroundPosition(bgComp) {
+	  var _bgComp$bgImage;
+
+	  let bkgImagePosition = 'center center';
+
+	  if (bgComp !== null && bgComp !== void 0 && (_bgComp$bgImage = bgComp.bgImage) !== null && _bgComp$bgImage !== void 0 && _bgComp$bgImage.position) {
+	    bkgImagePosition = positionToCss[bgComp.bgImage.position];
+	  }
+
+	  return bkgImagePosition;
+	}
+
+	function getBackgroundSize(bgComp) {
+	  var _bgComp$bgImage2;
+
+	  let bkgImageSize = imageSizingToCssProperty.originalSize;
+
+	  if (bgComp !== null && bgComp !== void 0 && (_bgComp$bgImage2 = bgComp.bgImage) !== null && _bgComp$bgImage2 !== void 0 && _bgComp$bgImage2.sizing) {
+	    bkgImageSize = imageSizingToCssProperty[bgComp.bgImage.sizing];
+	  }
+
+	  return bkgImageSize;
+	}
+
+	function resolveImageUrl(app, relativeUrl) {
+	  return relativeUrl ? getSenseServerUrl(app) + relativeUrl : undefined;
+	}
+
+	const resolveBgImage = (bgComp, app) => {
+	  const bgImageDef = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgImage;
+
+	  if (bgImageDef) {
+	    let url = '';
+
+	    if (bgImageDef.mode === 'media') {
+	      var _bgImageDef$mediaUrl, _bgImageDef$mediaUrl$;
+
+	      url = bgImageDef !== null && bgImageDef !== void 0 && (_bgImageDef$mediaUrl = bgImageDef.mediaUrl) !== null && _bgImageDef$mediaUrl !== void 0 && (_bgImageDef$mediaUrl$ = _bgImageDef$mediaUrl.qStaticContentUrl) !== null && _bgImageDef$mediaUrl$ !== void 0 && _bgImageDef$mediaUrl$.qUrl ? decodeURIComponent(bgImageDef.mediaUrl.qStaticContentUrl.qUrl) : undefined;
+	      url = resolveImageUrl(app, url);
+	    }
+
+	    if (bgImageDef.mode === 'expression') {
+	      url = bgImageDef.expressionUrl ? decodeURIComponent(bgImageDef.expressionUrl) : undefined;
+	    }
+
+	    const pos = getBackgroundPosition(bgComp);
+	    const size = getBackgroundSize(bgComp);
+	    return url ? {
+	      url,
+	      pos,
+	      size
+	    } : undefined;
+	  }
+
+	  return undefined;
+	};
+	const resolveBgColor = (bgComp, theme) => {
+	  const bgColor = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgColor;
+
+	  if (bgColor && theme) {
+	    if (bgColor.useColorExpression) {
+	      return theme.validateColor(bgColor.colorExpression);
+	    }
+
+	    return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color) : undefined;
+	  }
+
+	  return undefined;
+	};
+
 	/**
 	 * @interface
 	 * @extends HTMLElement
@@ -25703,6 +25977,9 @@
 	    enter: null,
 	    leave: null
 	  });
+	  const [bgColor, setBgColor] = react.exports.useState(undefined);
+	  const [bgImage, setBgImage] = react.exports.useState(undefined); // {url: "", size: "", pos: ""}
+
 	  const focusHandler = react.exports.useRef({
 	    focusToolbarButton(last) {
 	      // eslint-disable-next-line react/no-this-in-sfc
@@ -25713,6 +25990,11 @@
 	  react.exports.useEffect(() => {
 	    eventmixin(focusHandler.current);
 	  }, []);
+	  react.exports.useEffect(() => {
+	    const bgComp = layout !== null && layout !== void 0 && layout.components ? layout.components.find(comp => comp.key === 'general') : null;
+	    setBgColor(resolveBgColor(bgComp, halo.public.theme));
+	    setBgImage(resolveBgImage(bgComp, halo.app));
+	  }, [layout, halo.public.theme, halo.app]);
 
 	  focusHandler.current.blurCallback = resetFocus => {
 	    halo.root.toggleFocusOfCells();
@@ -25927,7 +26209,12 @@
 	      position: 'relative',
 	      width: '100%',
 	      height: '100%',
-	      overflow: 'hidden'
+	      overflow: 'hidden',
+	      backgroundColor: bgColor,
+	      backgroundImage: bgImage && bgImage.url ? "url(".concat(bgImage.url, ")") : undefined,
+	      backgroundRepeat: 'no-repeat',
+	      backgroundSize: bgImage && bgImage.size,
+	      backgroundPosition: bgImage && bgImage.pos
 	    },
 	    elevation: 0,
 	    square: true,
@@ -26424,7 +26711,7 @@
 	}
 
 	/* eslint no-param-reassign: 0, no-restricted-globals: 0 */
-	const extend = extend$2.bind(null, true);
+	const extend = extend$1.bind(null, true);
 	const JSONPatch = {};
 	const {
 	  isArray
@@ -30906,7 +31193,7 @@
 
 	      /**
 	       * Gets the listbox instance of the specified field
-	       * @param {string|LibraryField} fieldIdentifier Fieldname as a string or a Library dimension
+	       * @param {string|LibraryField|QInfo} fieldIdentifier Fieldname as a string, a Library dimension or an object id
 	       * @returns {Promise<FieldInstance>}
 	       * @since 1.1.0
 	       * @example
@@ -30914,10 +31201,13 @@
 	       * fieldInstance.mount(element, { title: "Hello Field"});
 	       */
 	      field: async fieldIdentifier => {
+	        let qId;
 	        const fieldName = typeof fieldIdentifier === 'string' ? fieldIdentifier : fieldIdentifier.qLibraryId;
 
-	        if (!fieldName) {
-	          throw new Error("Field identifier must be provided");
+	        if (fieldIdentifier.qId) {
+	          qId = fieldIdentifier.qId;
+	        } else if (!fieldName) {
+	          throw new Error("Field identifier or object id must be provided");
 	        }
 	        /**
 	         * @typedef { 'ltr' | 'rtl' } Direction
@@ -30970,17 +31260,18 @@
 	            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
 	            if (!element) {
-	              throw new Error("Element for ".concat(fieldName, " not provided"));
+	              throw new Error("Element for ".concat(fieldName || qId, " not provided"));
 	            }
 
 	            if (this._instance) {
-	              throw new Error("Field ".concat(fieldName, " already mounted"));
+	              throw new Error("Field or object ".concat(fieldName || qId, " already mounted"));
 	            }
 
 	            this._instance = ListBoxPortal({
 	              element,
 	              app,
 	              fieldIdentifier,
+	              qId,
 	              options: getOptions(options),
 	              stateName: options.stateName || '$'
 	            });
@@ -31075,6 +31366,11 @@
 	 * @property {function(): Promise<ThemeJSON>} load A function that should return a Promise that resolves to a raw JSON theme.
 	 */
 
+	/**
+	 * @interface QInfo
+	 * @property {string} qId Generic object id
+	 */
+
 
 	var index$1 = nuked(DEFAULT_CONFIG);
 
@@ -31083,7 +31379,7 @@
 	var enigmaMocker_dev = {exports: {}};
 
 	/*
-	* @nebula.js/enigma-mocker v3.0.3
+	* @nebula.js/enigma-mocker v3.0.4
 	* Copyright (c) 2022 QlikTech International AB
 	* Released under the MIT license.
 	*/