@nebula.js/stardust 3.1.0-alpha.1 → 3.1.0-alpha.3

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.1.0-alpha.1
+* @nebula.js/stardust v3.1.0-alpha.3
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -8,7 +8,7 @@ import * as React from 'react';
 import React__default, { useState as useState$1, useEffect as useEffect$1, useReducer, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useCallback, useLayoutEffect as useLayoutEffect$1, createElement, PureComponent, useRef, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
-import { Checkbox, Radio, Grid, Typography, FormControlLabel, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Box, Icon, CircularProgress, Paper } from '@mui/material';
+import { Checkbox, Radio, Grid, Typography, FormControlLabel, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Box, Icon, CircularProgress, Paper } from '@mui/material';
 import emStyled from '@emotion/styled';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -316,27 +316,30 @@ var runtime = {exports: {}};
     // delegate iterator, or by modifying context.method and context.arg,
     // setting context.delegate to null, and returning the ContinueSentinel.
     function maybeInvokeDelegate(delegate, context) {
-      var method = delegate.iterator[context.method];
+      var methodName = context.method;
+      var method = delegate.iterator[methodName];
       if (method === undefined$1) {
         // A .throw or .return when the delegate iterator has no .throw
-        // method always terminates the yield* loop.
+        // method, or a missing .next mehtod, always terminate the
+        // yield* loop.
         context.delegate = null;
-        if (context.method === "throw") {
-          // Note: ["return"] must be used for ES3 parsing compatibility.
-          if (delegate.iterator["return"]) {
-            // If the delegate iterator has a return method, give it a
-            // chance to clean up.
-            context.method = "return";
-            context.arg = undefined$1;
-            maybeInvokeDelegate(delegate, context);
-            if (context.method === "throw") {
-              // If maybeInvokeDelegate(context) changed context.method from
-              // "return" to "throw", let that override the TypeError below.
-              return ContinueSentinel;
-            }
+
+        // Note: ["return"] must be used for ES3 parsing compatibility.
+        if (methodName === "throw" && delegate.iterator["return"]) {
+          // If the delegate iterator has a return method, give it a
+          // chance to clean up.
+          context.method = "return";
+          context.arg = undefined$1;
+          maybeInvokeDelegate(delegate, context);
+          if (context.method === "throw") {
+            // If maybeInvokeDelegate(context) changed context.method from
+            // "return" to "throw", let that override the TypeError below.
+            return ContinueSentinel;
           }
+        }
+        if (methodName !== "return") {
           context.method = "throw";
-          context.arg = new TypeError("The iterator does not provide a 'throw' method");
+          context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method");
         }
         return ContinueSentinel;
       }
@@ -708,6 +711,7 @@ function _objectSpread2(target) {
   return target;
 }
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -761,6 +765,20 @@ function _objectWithoutProperties(source, excluded) {
   }
   return target;
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
 const format = function () {
   let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -1869,15 +1887,15 @@ 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*",
+    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] + "\\)$");
+    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,
@@ -2031,14 +2049,15 @@ var named = {
 };
 
 define(Color, color$3, {
-  copy: function(channels) {
+  copy(channels) {
     return Object.assign(new this.constructor, this, channels);
   },
-  displayable: function() {
+  displayable() {
     return this.rgb().displayable();
   },
   hex: color_formatHex, // Deprecated! Use color.formatHex.
   formatHex: color_formatHex,
+  formatHex8: color_formatHex8,
   formatHsl: color_formatHsl,
   formatRgb: color_formatRgb,
   toString: color_formatRgb
@@ -2048,6 +2067,10 @@ function color_formatHex() {
   return this.rgb().formatHex();
 }
 
+function color_formatHex8() {
+  return this.rgb().formatHex8();
+}
+
 function color_formatHsl() {
   return hslConvert(this).formatHsl();
 }
@@ -2103,18 +2126,21 @@ function Rgb(r, g, b, opacity) {
 }
 
 define(Rgb, rgb, extend$2(Color, {
-  brighter: function(k) {
+  brighter(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) {
+  darker(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() {
+  rgb() {
     return this;
   },
-  displayable: function() {
+  clamp() {
+    return new Rgb(clampi(this.r), clampi(this.g), clampi(this.b), clampa(this.opacity));
+  },
+  displayable() {
     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)
@@ -2122,25 +2148,34 @@ define(Rgb, rgb, extend$2(Color, {
   },
   hex: rgb_formatHex, // Deprecated! Use color.formatHex.
   formatHex: rgb_formatHex,
+  formatHex8: rgb_formatHex8,
   formatRgb: rgb_formatRgb,
   toString: rgb_formatRgb
 }));
 
 function rgb_formatHex() {
-  return "#" + hex(this.r) + hex(this.g) + hex(this.b);
+  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}`;
+}
+
+function rgb_formatHex8() {
+  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}${hex((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
 }
 
 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 + ")");
+  const a = clampa(this.opacity);
+  return `${a === 1 ? "rgb(" : "rgba("}${clampi(this.r)}, ${clampi(this.g)}, ${clampi(this.b)}${a === 1 ? ")" : `, ${a})`}`;
+}
+
+function clampa(opacity) {
+  return isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));
+}
+
+function clampi(value) {
+  return Math.max(0, Math.min(255, Math.round(value) || 0));
 }
 
 function hex(value) {
-  value = Math.max(0, Math.min(255, Math.round(value) || 0));
+  value = clampi(value);
   return (value < 16 ? "0" : "") + value.toString(16);
 }
 
@@ -2189,15 +2224,15 @@ function Hsl(h, s, l, opacity) {
 }
 
 define(Hsl, hsl, extend$2(Color, {
-  brighter: function(k) {
+  brighter(k) {
     k = k == null ? brighter : Math.pow(brighter, k);
     return new Hsl(this.h, this.s, this.l * k, this.opacity);
   },
-  darker: function(k) {
+  darker(k) {
     k = k == null ? darker : Math.pow(darker, k);
     return new Hsl(this.h, this.s, this.l * k, this.opacity);
   },
-  rgb: function() {
+  rgb() {
     var h = this.h % 360 + (this.h < 0) * 360,
         s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
         l = this.l,
@@ -2210,21 +2245,29 @@ define(Hsl, hsl, extend$2(Color, {
       this.opacity
     );
   },
-  displayable: function() {
+  clamp() {
+    return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));
+  },
+  displayable() {
     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 + ")");
+  formatHsl() {
+    const a = clampa(this.opacity);
+    return `${a === 1 ? "hsl(" : "hsla("}${clamph(this.h)}, ${clampt(this.s) * 100}%, ${clampt(this.l) * 100}%${a === 1 ? ")" : `, ${a})`}`;
   }
 }));
 
+function clamph(value) {
+  value = (value || 0) % 360;
+  return value < 0 ? value + 360 : value;
+}
+
+function clampt(value) {
+  return Math.max(0, Math.min(1, value || 0));
+}
+
 /* From FvD 13.37, CSS Color Module Level 3 */
 function hsl2rgb(h, m1, m2) {
   return (h < 60 ? m1 + (m2 - m1) * h / 60
@@ -2699,7 +2742,9 @@ function theme$1(resolvedTheme) {
         }
       );
     },
-    uiColor(c) {
+    uiColor(c, shift) {
+      // eslint-disable-next-line no-param-reassign
+      shift = !!shift;
       if (c.index < 0 || typeof c.index === 'undefined') {
         return c.color;
       }
@@ -2709,10 +2754,10 @@ function theme$1(resolvedTheme) {
       if (!uiPalette) {
         return c.color;
       }
-      if (typeof uiPalette.colors[c.index] === 'undefined') {
+      if (typeof uiPalette.colors[c.index - shift] === 'undefined') {
         return c.color;
       }
-      return uiPalette.colors[c.index];
+      return uiPalette.colors[c.index - shift];
     }
   };
 }
@@ -2935,7 +2980,7 @@ function constructPaths(pathSteps, baseSteps) {
   }
   return ret;
 }
-function getObject$1(root, steps) {
+function getObject$2(root, steps) {
   let obj = root;
   for (let i = 0; i < steps.length; i++) {
     if (obj[steps[i]]) {
@@ -2949,7 +2994,7 @@ function getObject$1(root, steps) {
 function searchPathArray(pathArray, attribute, theme) {
   const attributeArray = attribute.split('.');
   for (let i = 0; i < pathArray.length; i++) {
-    const restult = getObject$1(theme, [...pathArray[i], ...attributeArray]);
+    const restult = getObject$2(theme, [...pathArray[i], ...attributeArray]);
     if (restult !== undefined) return restult;
   }
   return undefined;
@@ -3118,10 +3163,12 @@ function theme() {
      * @param {object} c
      * @param {number=} c.index
      * @param {string=} c.color
+     * @param {boolean=} supportNone Shifts the palette index by one to account for the "none" color
      * @returns {string} The resolved color.
      *
      * @example
      * theme.getColorPickerColor({ index: 1 });
+     * theme.getColorPickerColor({ index: 1 }, true);
      * theme.getColorPickerColor({ color: 'red' });
      */
     getColorPickerColor() {
@@ -3289,14 +3336,12 @@ function _extends$5() {
   _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends$5.apply(this, arguments);
@@ -3307,13 +3352,11 @@ function _objectWithoutPropertiesLoose$1(source, excluded) {
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
@@ -3485,7 +3528,7 @@ var assign = Object.assign;
  * @return {number}
  */
 function hash (value, length) {
-	return (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3)
+	return charat(value, 0) ^ 45 ? (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3) : 0
 }
 
 /**
@@ -3838,7 +3881,7 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 		switch (previous = character, character = next()) {
 			// (
 			case 40:
-				if (previous != 108 && characters.charCodeAt(length - 1) == 58) {
+				if (previous != 108 && charat(characters, length - 1) == 58) {
 					if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f') != -1)
 						ampersand = -1;
 					break
@@ -3888,7 +3931,7 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 							if (offset === 0)
 								parse(characters, root, reference, reference, props, rulesets, length, points, children);
 							else
-								switch (atrule) {
+								switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
 									// d m s
 									case 100: case 109: case 115:
 										parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children);
@@ -3985,123 +4028,6 @@ function declaration (value, root, parent, length) {
 	return node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length)
 }
 
-/**
- * @param {string} value
- * @param {number} length
- * @return {string}
- */
-function prefix (value, length) {
-	switch (hash(value, length)) {
-		// color-adjust
-		case 5103:
-			return WEBKIT + 'print-' + value + value
-		// animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
-		case 5737: case 4201: case 3177: case 3433: case 1641: case 4457: case 2921:
-		// text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
-		case 5572: case 6356: case 5844: case 3191: case 6645: case 3005:
-		// mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
-		case 6391: case 5879: case 5623: case 6135: case 4599: case 4855:
-		// background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
-		case 4215: case 6389: case 5109: case 5365: case 5621: case 3829:
-			return WEBKIT + value + value
-		// appearance, user-select, transform, hyphens, text-size-adjust
-		case 5349: case 4246: case 4810: case 6968: case 2756:
-			return WEBKIT + value + MOZ + value + MS + value + value
-		// flex, flex-direction
-		case 6828: case 4268:
-			return WEBKIT + value + MS + value + value
-		// order
-		case 6165:
-			return WEBKIT + value + MS + 'flex-' + value + value
-		// align-items
-		case 5187:
-			return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value
-		// align-self
-		case 5443:
-			return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/, '') + value
-		// align-content
-		case 4675:
-			return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + value
-		// flex-shrink
-		case 5548:
-			return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value
-		// flex-basis
-		case 5292:
-			return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value
-		// flex-grow
-		case 6060:
-			return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value
-		// transition
-		case 4554:
-			return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value
-		// cursor
-		case 6187:
-			return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value
-		// background, background-image
-		case 5495: case 3959:
-			return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1')
-		// justify-content
-		case 4968:
-			return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value
-		// (margin|padding)-inline-(start|end)
-		case 4095: case 3583: case 4068: case 2532:
-			return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value
-		// (min|max)?(width|height|inline-size|block-size)
-		case 8116: case 7059: case 5753: case 5535:
-		case 5445: case 5701: case 4933: case 4677:
-		case 5533: case 5789: case 5021: case 4765:
-			// stretch, max-content, min-content, fill-available
-			if (strlen(value) - 1 - length > 6)
-				switch (charat(value, length + 1)) {
-					// (m)ax-content, (m)in-content
-					case 109:
-						// -
-						if (charat(value, length + 4) !== 45)
-							break
-					// (f)ill-available, (f)it-content
-					case 102:
-						return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value
-					// (s)tretch
-					case 115:
-						return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length) + value : value
-				}
-			break
-		// position: sticky
-		case 4949:
-			// (s)ticky?
-			if (charat(value, length + 1) !== 115)
-				break
-		// display: (flex|inline-flex)
-		case 6444:
-			switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) {
-				// stic(k)y
-				case 107:
-					return replace(value, ':', ':' + WEBKIT) + value
-				// (inline-)?fl(e)x
-				case 101:
-					return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value
-			}
-			break
-		// writing-mode
-		case 5936:
-			switch (charat(value, length + 11)) {
-				// vertical-l(r)
-				case 114:
-					return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value
-				// vertical-r(l)
-				case 108:
-					return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value
-				// horizontal(-)tb
-				case 45:
-					return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value
-			}
-
-			return WEBKIT + value + MS + value + value
-	}
-
-	return value
-}
-
 /**
  * @param {object[]} children
  * @param {function} callback
@@ -4164,41 +4090,6 @@ function rulesheet (callback) {
 	}
 }
 
-/**
- * @param {object} element
- * @param {number} index
- * @param {object[]} children
- * @param {function} callback
- */
-function prefixer (element, index, children, callback) {
-	if (element.length > -1)
-		if (!element.return)
-			switch (element.type) {
-				case DECLARATION: element.return = prefix(element.value, element.length);
-					break
-				case KEYFRAMES:
-					return serialize([copy(element, {value: replace(element.value, '@', '@' + WEBKIT)})], callback)
-				case RULESET:
-					if (element.length)
-						return combine(element.props, function (value) {
-							switch (match(value, /(::plac\w+|:read-\w+)/)) {
-								// :read-(only|write)
-								case ':read-only': case ':read-write':
-									return serialize([copy(element, {props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]})], callback)
-								// :placeholder
-								case '::placeholder':
-									return serialize([
-										copy(element, {props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]}),
-										copy(element, {props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]}),
-										copy(element, {props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]})
-									], callback)
-							}
-
-							return ''
-						})
-			}
-}
-
 var weakMemoize = function weakMemoize(func) {
   // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
   var cache = new WeakMap();
@@ -4347,6 +4238,218 @@ var removeLabel = function removeLabel(element) {
   }
 };
 
+/* eslint-disable no-fallthrough */
+
+function prefix(value, length) {
+  switch (hash(value, length)) {
+    // color-adjust
+    case 5103:
+      return WEBKIT + 'print-' + value + value;
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return WEBKIT + value + value;
+    // appearance, user-select, transform, hyphens, text-size-adjust
+
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return WEBKIT + value + MOZ + value + MS + value + value;
+    // flex, flex-direction
+
+    case 6828:
+    case 4268:
+      return WEBKIT + value + MS + value + value;
+    // order
+
+    case 6165:
+      return WEBKIT + value + MS + 'flex-' + value + value;
+    // align-items
+
+    case 5187:
+      return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value;
+    // align-self
+
+    case 5443:
+      return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/, '') + value;
+    // align-content
+
+    case 4675:
+      return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + value;
+    // flex-shrink
+
+    case 5548:
+      return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value;
+    // flex-basis
+
+    case 5292:
+      return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value;
+    // flex-grow
+
+    case 6060:
+      return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value;
+    // transition
+
+    case 4554:
+      return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value;
+    // cursor
+
+    case 6187:
+      return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value;
+    // background, background-image
+
+    case 5495:
+    case 3959:
+      return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1');
+    // justify-content
+
+    case 4968:
+      return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value;
+    // (margin|padding)-inline-(start|end)
+
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value;
+    // (min|max)?(width|height|inline-size|block-size)
+
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      // stretch, max-content, min-content, fill-available
+      if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {
+        // (m)ax-content, (m)in-content
+        case 109:
+          // -
+          if (charat(value, length + 4) !== 45) break;
+        // (f)ill-available, (f)it-content
+
+        case 102:
+          return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
+        // (s)tretch
+
+        case 115:
+          return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length) + value : value;
+      }
+      break;
+    // position: sticky
+
+    case 4949:
+      // (s)ticky?
+      if (charat(value, length + 1) !== 115) break;
+    // display: (flex|inline-flex)
+
+    case 6444:
+      switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) {
+        // stic(k)y
+        case 107:
+          return replace(value, ':', ':' + WEBKIT) + value;
+        // (inline-)?fl(e)x
+
+        case 101:
+          return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;
+      }
+
+      break;
+    // writing-mode
+
+    case 5936:
+      switch (charat(value, length + 11)) {
+        // vertical-l(r)
+        case 114:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
+        // vertical-r(l)
+
+        case 108:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
+        // horizontal(-)tb
+
+        case 45:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
+      }
+
+      return WEBKIT + value + MS + value + value;
+  }
+
+  return value;
+}
+
+var prefixer = function prefixer(element, index, children, callback) {
+  if (element.length > -1) if (!element["return"]) switch (element.type) {
+    case DECLARATION:
+      element["return"] = prefix(element.value, element.length);
+      break;
+
+    case KEYFRAMES:
+      return serialize([copy(element, {
+        value: replace(element.value, '@', '@' + WEBKIT)
+      })], callback);
+
+    case RULESET:
+      if (element.length) return combine(element.props, function (value) {
+        switch (match(value, /(::plac\w+|:read-\w+)/)) {
+          // :read-(only|write)
+          case ':read-only':
+          case ':read-write':
+            return serialize([copy(element, {
+              props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
+            })], callback);
+          // :placeholder
+
+          case '::placeholder':
+            return serialize([copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]
+            }), copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
+            }), copy(element, {
+              props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
+            })], callback);
+        }
+
+        return '';
+      });
+  }
+};
+
 var isBrowser = typeof document !== 'undefined';
 var getServerStylisCache = isBrowser ? undefined : weakMemoize(function () {
   return memoize$1(function () {
@@ -4540,17 +4643,17 @@ function StyledEngineProvider(props) {
   }) : children;
 }
 
-/** @license MUI v5.10.8
+/** @license MUI v5.10.16
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 function styled$2(tag, options) {
   const stylesFactory = emStyled(tag, options);
-
   return stylesFactory;
-} // eslint-disable-next-line @typescript-eslint/naming-convention
+}
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
 const internal_processStyles = (tag, processor) => {
   // Emotion attaches all the styles as `__emotion_styles`.
   // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
@@ -4563,14 +4666,12 @@ function _extends$4() {
   _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends$4.apply(this, arguments);
@@ -4583,14 +4684,12 @@ function deepmerge(target, source, options = {
   clone: true
 }) {
   const output = options.clone ? _extends$4({}, target) : target;
-
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
       // Avoid prototype pollution
       if (key === '__proto__') {
         return;
       }
-
       if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
         // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
         output[key] = deepmerge(target[key], source[key], options);
@@ -4599,7 +4698,6 @@ function deepmerge(target, source, options = {
       }
     });
   }
-
   return output;
 }
 
@@ -4612,16 +4710,13 @@ function formatMuiErrorMessage(code) {
   // Apply babel-plugin-transform-template-literals in loose mode
   // loose mode is safe iff we're concatenating primitives
   // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
-
   /* eslint-disable prefer-template */
   let url = 'https://mui.com/production-error/?code=' + code;
-
   for (let i = 1; i < arguments.length; i += 1) {
     // rest params over-transpile for this case
     // eslint-disable-next-line prefer-rest-params
     url += '&args[]=' + encodeURIComponent(arguments[i]);
   }
-
   return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
   /* eslint-enable prefer-template */
 }
@@ -4634,30 +4729,24 @@ function capitalize(string) {
   if (typeof string !== 'string') {
     throw new Error(formatMuiErrorMessage(7));
   }
-
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
 const defaultGenerator = componentName => componentName;
-
 const createClassNameGenerator = () => {
   let generate = defaultGenerator;
   return {
     configure(generator) {
       generate = generator;
     },
-
     generate(componentName) {
       return generate(componentName);
     },
-
     reset() {
       generate = defaultGenerator;
     }
-
   };
 };
-
 const ClassNameGenerator = createClassNameGenerator();
 var ClassNameGenerator$1 = ClassNameGenerator;
 
@@ -4690,14 +4779,12 @@ function _extends$3() {
   _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends$3.apply(this, arguments);
@@ -4707,15 +4794,13 @@ function merge(acc, item) {
   if (!item) {
     return acc;
   }
-
   return deepmerge(acc, item, {
     clone: false // No need to clone deep, it's way faster.
-
   });
 }
 
+// The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
-
 const values = {
   xs: 0,
   // phone
@@ -4726,8 +4811,8 @@ const values = {
   lg: 1200,
   // desktop
   xl: 1536 // large screen
-
 };
+
 const defaultBreakpoints = {
   // Sorted ASC by size. That's important.
   // It can't be configured as it's used statically for propTypes.
@@ -4736,7 +4821,6 @@ const defaultBreakpoints = {
 };
 function handleBreakpoints(props, propValue, styleFromPropValue) {
   const theme = props.theme || {};
-
   if (Array.isArray(propValue)) {
     const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
     return propValue.reduce((acc, item, index) => {
@@ -4744,7 +4828,6 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
       return acc;
     }, {});
   }
-
   if (typeof propValue === 'object') {
     const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
     return Object.keys(propValue).reduce((acc, breakpoint) => {
@@ -4756,18 +4839,14 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
         const cssKey = breakpoint;
         acc[cssKey] = propValue[cssKey];
       }
-
       return acc;
     }, {});
   }
-
   const output = styleFromPropValue(propValue);
   return output;
 }
-
 function createEmptyBreakpointObject(breakpointsInput = {}) {
   var _breakpointsInput$key;
-
   const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
@@ -4779,11 +4858,9 @@ function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce((acc, key) => {
     const breakpointOutput = acc[key];
     const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
-
     if (isBreakpointUnused) {
       delete acc[key];
     }
-
     return acc;
   }, style);
 }
@@ -4791,29 +4868,24 @@ function removeUnusedBreakpoints(breakpointKeys, style) {
 function getPath$1(obj, path, checkVars = true) {
   if (!path || typeof path !== 'string') {
     return null;
-  } // Check if CSS variables are used
-
+  }
 
+  // Check if CSS variables are used
   if (obj && obj.vars && checkVars) {
     const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
-
     if (val != null) {
       return val;
     }
   }
-
   return path.split('.').reduce((acc, item) => {
     if (acc && acc[item] != null) {
       return acc[item];
     }
-
     return null;
   }, obj);
 }
-
-function getValue$3(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
   let value;
-
   if (typeof themeMapping === 'function') {
     value = themeMapping(propValueFinal);
   } else if (Array.isArray(themeMapping)) {
@@ -4821,14 +4893,11 @@ function getValue$3(themeMapping, transform, propValueFinal, userValue = propVal
   } else {
     value = getPath$1(themeMapping, propValueFinal) || userValue;
   }
-
   if (transform) {
     value = transform(value, userValue);
   }
-
   return value;
 }
-
 function style$1(options) {
   const {
     prop,
@@ -4836,36 +4905,28 @@ function style$1(options) {
     themeKey,
     transform
   } = options;
-
   const fn = props => {
     if (props[prop] == null) {
       return null;
     }
-
     const propValue = props[prop];
     const theme = props.theme;
     const themeMapping = getPath$1(theme, themeKey) || {};
-
     const styleFromPropValue = propValueFinal => {
-      let value = getValue$3(themeMapping, transform, propValueFinal);
-
+      let value = getStyleValue(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getValue$3(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
       }
-
       if (cssProperty === false) {
         return value;
       }
-
       return {
         [cssProperty]: value
       };
     };
-
     return handleBreakpoints(props, propValue, styleFromPropValue);
   };
-
   fn.propTypes = {};
   fn.filterProps = [prop];
   return fn;
@@ -4878,17 +4939,14 @@ function compose(...styles) {
     });
     return acc;
   }, {});
-
   const fn = props => {
     return Object.keys(props).reduce((acc, prop) => {
       if (handlers[prop]) {
         return merge(acc, handlers[prop](props));
       }
-
       return acc;
     }, {});
   };
-
   fn.propTypes = {};
   fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);
   return fn;
@@ -4900,7 +4958,6 @@ function memoize(fn) {
     if (cache[arg] === undefined) {
       cache[arg] = fn(arg);
     }
-
     return cache[arg];
   };
 }
@@ -4922,10 +4979,11 @@ const aliases = {
   marginY: 'my',
   paddingX: 'px',
   paddingY: 'py'
-}; // memoize() impact:
+};
+
+// memoize() impact:
 // From 300,000 ops/sec
 // To 350,000 ops/sec
-
 const getCssProperties = memoize(prop => {
   // It's not a shorthand notation.
   if (prop.length > 2) {
@@ -4935,7 +4993,6 @@ const getCssProperties = memoize(prop => {
       return [prop];
     }
   }
-
   const [a, b] = prop.split('');
   const property = properties[a];
   const direction = directions[b] || '';
@@ -4946,33 +5003,26 @@ const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddin
 const spacingKeys = [...marginKeys, ...paddingKeys];
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   var _getPath;
-
   const themeSpacing = (_getPath = getPath$1(theme, themeKey, false)) != null ? _getPath : defaultValue;
-
   if (typeof themeSpacing === 'number') {
     return abs => {
       if (typeof abs === 'string') {
         return abs;
       }
-
       return themeSpacing * abs;
     };
   }
-
   if (Array.isArray(themeSpacing)) {
     return abs => {
       if (typeof abs === 'string') {
         return abs;
       }
-
       return themeSpacing[abs];
     };
   }
-
   if (typeof themeSpacing === 'function') {
     return themeSpacing;
   }
-
   return () => undefined;
 }
 function createUnarySpacing(theme) {
@@ -4982,18 +5032,14 @@ function getValue$2(transformer, propValue) {
   if (typeof propValue === 'string' || propValue == null) {
     return propValue;
   }
-
   const abs = Math.abs(propValue);
   const transformed = transformer(abs);
-
   if (propValue >= 0) {
     return transformed;
   }
-
   if (typeof transformed === 'number') {
     return -transformed;
   }
-
   return `-${transformed}`;
 }
 function getStyleFromPropValue(cssProperties, transformer) {
@@ -5002,29 +5048,24 @@ function getStyleFromPropValue(cssProperties, transformer) {
     return acc;
   }, {});
 }
-
 function resolveCssProperty(props, keys, prop, transformer) {
   // Using a hash computation over an array iteration could be faster, but with only 28 items,
   // it's doesn't worth the bundle size.
   if (keys.indexOf(prop) === -1) {
     return null;
   }
-
   const cssProperties = getCssProperties(prop);
   const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
   const propValue = props[prop];
   return handleBreakpoints(props, propValue, styleFromPropValue);
 }
-
 function style(props, keys) {
   const transformer = createUnarySpacing(props.theme);
   return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
 }
-
 function spacing(props) {
   return style(props, spacingKeys);
 }
-
 spacing.propTypes = {};
 spacing.filterProps = spacingKeys;
 
@@ -5032,10 +5073,8 @@ function getBorder(value) {
   if (typeof value !== 'number') {
     return value;
   }
-
   return `${value}px solid`;
 }
-
 const border = style$1({
   prop: 'border',
   themeKey: 'borders',
@@ -5084,14 +5123,11 @@ const borderLeftColor = style$1({
 const borderRadius$1 = props => {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {
     const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4);
-
     const styleFromPropValue = propValue => ({
       borderRadius: getValue$2(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
   }
-
   return null;
 };
 borderRadius$1.propTypes = {};
@@ -5170,14 +5206,11 @@ var flexbox$1 = flexbox;
 const gap = props => {
   if (props.gap !== undefined && props.gap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8);
-
     const styleFromPropValue = propValue => ({
       gap: getValue$2(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.gap, styleFromPropValue);
   }
-
   return null;
 };
 gap.propTypes = {};
@@ -5185,14 +5218,11 @@ gap.filterProps = ['gap'];
 const columnGap = props => {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8);
-
     const styleFromPropValue = propValue => ({
       columnGap: getValue$2(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.columnGap, styleFromPropValue);
   }
-
   return null;
 };
 columnGap.propTypes = {};
@@ -5200,14 +5230,11 @@ columnGap.filterProps = ['columnGap'];
 const rowGap = props => {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8);
-
     const styleFromPropValue = propValue => ({
       rowGap: getValue$2(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.rowGap, styleFromPropValue);
   }
-
   return null;
 };
 rowGap.propTypes = {};
@@ -5246,10 +5273,8 @@ function transform$1(value, userValue) {
   if (userValue === 'grey') {
     return userValue;
   }
-
   return value;
 }
-
 const color = style$1({
   prop: 'color',
   themeKey: 'palette',
@@ -5299,7 +5324,6 @@ var shadows$2 = boxShadow;
 function transform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
-
 const width = style$1({
   prop: 'width',
   transform
@@ -5308,16 +5332,13 @@ const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     const styleFromPropValue = propValue => {
       var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
-
       const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values[propValue];
       return {
         maxWidth: breakpoint || transform(propValue)
       };
     };
-
     return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
   }
-
   return null;
 };
 maxWidth.filterProps = ['maxWidth'];
@@ -5425,12 +5446,11 @@ function objectsHaveSameKeys(...objects) {
   const union = new Set(allKeys);
   return objects.every(object => union.size === Object.keys(object).length);
 }
-
 function callIfFn(maybeFn, arg) {
   return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
-} // eslint-disable-next-line @typescript-eslint/naming-convention
-
+}
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
 function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMapping) {
   const propToStyleFunction = Object.keys(styleFunctionMapping$1).reduce((acc, styleFnName) => {
     styleFunctionMapping$1[styleFnName].filterProps.forEach(propName => {
@@ -5438,7 +5458,6 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
     });
     return acc;
   }, {});
-
   function getThemeValue(prop, value, theme) {
     const inputProps = {
       [prop]: value,
@@ -5449,43 +5468,36 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
       [prop]: value
     };
   }
-
   function styleFunctionSx(props) {
     const {
       sx,
       theme = {}
     } = props || {};
-
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
+
     /*
      * Receive `sxInput` as object or callback
      * and then recursively check keys & values to create media query object styles.
      * (the result will be used in `styled`)
      */
-
-
     function traverse(sxInput) {
       let sxObject = sxInput;
-
       if (typeof sxInput === 'function') {
         sxObject = sxInput(theme);
       } else if (typeof sxInput !== 'object') {
         // value
         return sxInput;
       }
-
       if (!sxObject) {
         return null;
       }
-
       const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
       const breakpointsKeys = Object.keys(emptyBreakpoints);
       let css = emptyBreakpoints;
       Object.keys(sxObject).forEach(styleKey => {
         const value = callIfFn(sxObject[styleKey], theme);
-
         if (value !== null && value !== undefined) {
           if (typeof value === 'object') {
             if (propToStyleFunction[styleKey]) {
@@ -5496,7 +5508,6 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
               }, value, x => ({
                 [styleKey]: x
               }));
-
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css[styleKey] = styleFunctionSx({
                   sx: value,
@@ -5513,10 +5524,8 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
       });
       return removeUnusedBreakpoints(breakpointsKeys, css);
     }
-
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
-
   return styleFunctionSx;
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
@@ -5528,95 +5537,81 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
 const _excluded$b = ["values", "unit", "step"];
-
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
     val: values[key]
-  })) || []; // Sort in ascending order
-
+  })) || [];
+  // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
     return _extends$3({}, acc, {
       [obj.key]: obj.val
     });
   }, {});
-}; // Keep in mind that @media is inclusive by the CSS specification.
-
+};
 
+// Keep in mind that @media is inclusive by the CSS specification.
 function createBreakpoints(breakpoints) {
   const {
-    // The breakpoint **start** at this value.
-    // For instance with the first breakpoint xs: [xs, sm).
-    values = {
-      xs: 0,
-      // phone
-      sm: 600,
-      // tablet
-      md: 900,
-      // small laptop
-      lg: 1200,
-      // desktop
-      xl: 1536 // large screen
-
-    },
-    unit = 'px',
-    step = 5
-  } = breakpoints,
-        other = _objectWithoutPropertiesLoose(breakpoints, _excluded$b);
+      // The breakpoint **start** at this value.
+      // For instance with the first breakpoint xs: [xs, sm).
+      values = {
+        xs: 0,
+        // phone
+        sm: 600,
+        // tablet
+        md: 900,
+        // small laptop
+        lg: 1200,
+        // desktop
+        xl: 1536 // large screen
+      },
 
+      unit = 'px',
+      step = 5
+    } = breakpoints,
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$b);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
-
   function up(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `@media (min-width:${value}${unit})`;
   }
-
   function down(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `@media (max-width:${value - step / 100}${unit})`;
   }
-
   function between(start, end) {
     const endIndex = keys.indexOf(end);
     return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
   }
-
   function only(key) {
     if (keys.indexOf(key) + 1 < keys.length) {
       return between(key, keys[keys.indexOf(key) + 1]);
     }
-
     return up(key);
   }
-
   function not(key) {
     // handle first and last key separately, for better readability
     const keyIndex = keys.indexOf(key);
-
     if (keyIndex === 0) {
       return up(keys[1]);
     }
-
     if (keyIndex === keys.length - 1) {
       return down(keys[keyIndex]);
     }
-
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-
   return _extends$3({
     keys,
     values: sortedValues,
@@ -5635,43 +5630,39 @@ const shape = {
 var shape$1 = shape;
 
 /* tslint:enable:unified-signatures */
+
 function createSpacing(spacingInput = 8) {
   // Already transformed.
   if (spacingInput.mui) {
     return spacingInput;
-  } // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
+  }
+
+  // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
   // Smaller components, such as icons, can align to a 4dp grid.
   // https://m2.material.io/design/layout/understanding-layout.html
-
-
   const transform = createUnarySpacing({
     spacing: spacingInput
   });
-
   const spacing = (...argsInput) => {
-
     const args = argsInput.length === 0 ? [1] : argsInput;
     return args.map(argument => {
       const output = transform(argument);
       return typeof output === 'number' ? `${output}px` : output;
     }).join(' ');
   };
-
   spacing.mui = true;
   return spacing;
 }
 
 const _excluded$a = ["breakpoints", "palette", "spacing", "shape"];
-
 function createTheme$1(options = {}, ...args) {
   const {
-    breakpoints: breakpointsInput = {},
-    palette: paletteInput = {},
-    spacing: spacingInput,
-    shape: shapeInput = {}
-  } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded$a);
-
+      breakpoints: breakpointsInput = {},
+      palette: paletteInput = {},
+      spacing: spacingInput,
+      shape: shapeInput = {}
+    } = options,
+    other = _objectWithoutPropertiesLoose(options, _excluded$a);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -5693,26 +5684,22 @@ function _extends$2() {
   _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends$2.apply(this, arguments);
 }
 
 const ThemeContext = /*#__PURE__*/React.createContext(null);
-
 var ThemeContext$1 = ThemeContext;
 
 function useTheme$4() {
   const theme = React.useContext(ThemeContext$1);
-
   return theme;
 }
 
@@ -5722,33 +5709,27 @@ var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
 function mergeOuterLocalTheme(outerTheme, localTheme) {
   if (typeof localTheme === 'function') {
     const mergedTheme = localTheme(outerTheme);
-
     return mergedTheme;
   }
-
   return _extends$2({}, outerTheme, localTheme);
 }
+
 /**
  * This component takes a `theme` prop.
  * It makes the `theme` available down the React tree thanks to React context.
  * This component should preferably be used at **the root of your component tree**.
  */
-
-
 function ThemeProvider$1(props) {
   const {
     children,
     theme: localTheme
   } = props;
   const outerTheme = useTheme$4();
-
   const theme = React.useMemo(() => {
     const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
-
     if (output != null) {
       output[nested] = outerTheme !== null;
     }
-
     return output;
   }, [localTheme, outerTheme]);
   return /*#__PURE__*/jsxRuntime.exports.jsx(ThemeContext$1.Provider, {
@@ -5760,36 +5741,31 @@ function ThemeProvider$1(props) {
 function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
-
 function useTheme$3(defaultTheme = null) {
   const contextTheme = useTheme$4();
   return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
 }
 
 const systemDefaultTheme$1 = createTheme$1();
-
 function useTheme$2(defaultTheme = systemDefaultTheme$1) {
   return useTheme$3(defaultTheme);
 }
 
 const _excluded$9 = ["variant"];
-
 function isEmpty$2(string) {
   return string.length === 0;
 }
+
 /**
  * Generates string classKey based on the properties provided. It starts with the
  * variant if defined, and then it appends all other properties in alphabetical order.
  * @param {object} props - the properties for which the classKey should be created.
  */
-
-
 function propsToClassKey(props) {
   const {
-    variant
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$9);
-
+      variant
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$9);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -5802,36 +5778,31 @@ function propsToClassKey(props) {
 }
 
 const _excluded$8 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-      _excluded2$2 = ["theme"],
-      _excluded3 = ["theme"];
-
+  _excluded2$2 = ["theme"],
+  _excluded3 = ["theme"];
 function isEmpty$1(obj) {
   return Object.keys(obj).length === 0;
-} // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
-
+}
 
+// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
 function isStringTag(tag) {
-  return typeof tag === 'string' && // 96 is one less than the char code
+  return typeof tag === 'string' &&
+  // 96 is one less than the char code
   // for "a" so this is checking that
   // it's a lowercase character
   tag.charCodeAt(0) > 96;
 }
-
 const getStyleOverrides = (name, theme) => {
   if (theme.components && theme.components[name] && theme.components[name].styleOverrides) {
     return theme.components[name].styleOverrides;
   }
-
   return null;
 };
-
 const getVariantStyles = (name, theme) => {
   let variants = [];
-
   if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
     variants = theme.components[name].variants;
   }
-
   const variantsStyles = {};
   variants.forEach(definition => {
     const key = propsToClassKey(definition.props);
@@ -5839,16 +5810,13 @@ const getVariantStyles = (name, theme) => {
   });
   return variantsStyles;
 };
-
 const variantsResolver = (props, styles, theme, name) => {
   var _theme$components, _theme$components$nam;
-
   const {
     ownerState = {}
   } = props;
   const variantsStyles = [];
   const themeVariants = theme == null ? void 0 : (_theme$components = theme.components) == null ? void 0 : (_theme$components$nam = _theme$components[name]) == null ? void 0 : _theme$components$nam.variants;
-
   if (themeVariants) {
     themeVariants.forEach(themeVariant => {
       let isMatch = true;
@@ -5857,22 +5825,19 @@ const variantsResolver = (props, styles, theme, name) => {
           isMatch = false;
         }
       });
-
       if (isMatch) {
         variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
       }
     });
   }
-
   return variantsStyles;
-}; // Update /system/styled/#api in case if this changes
-
+};
 
+// Update /system/styled/#api in case if this changes
 function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
 const systemDefaultTheme = createTheme$1();
-
 function createStyled(input = {}) {
   const {
     defaultTheme = systemDefaultTheme,
@@ -5880,35 +5845,30 @@ function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp,
     styleFunctionSx = defaultStyleFunctionSx
   } = input;
-
   const systemSx = props => {
     const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
     return styleFunctionSx(_extends$3({}, props, {
       theme
     }));
   };
-
   systemSx.__mui_systemSx = true;
   return (tag, inputOptions = {}) => {
     // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
     internal_processStyles(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
-
     const {
-      name: componentName,
-      slot: componentSlot,
-      skipVariantsResolver: inputSkipVariantsResolver,
-      skipSx: inputSkipSx,
-      overridesResolver
-    } = inputOptions,
-          options = _objectWithoutPropertiesLoose(inputOptions, _excluded$8); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-
-
+        name: componentName,
+        slot: componentSlot,
+        skipVariantsResolver: inputSkipVariantsResolver,
+        skipSx: inputSkipSx,
+        overridesResolver
+      } = inputOptions,
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$8);
+
+    // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
     const skipSx = inputSkipSx || false;
     let label;
-
     let shouldForwardPropOption = shouldForwardProp;
-
     if (componentSlot === 'Root') {
       shouldForwardPropOption = rootShouldForwardProp;
     } else if (componentSlot) {
@@ -5918,12 +5878,10 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-
     const defaultStyledResolver = styled$2(tag, _extends$3({
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
-
     const muiStyledResolver = (styleArg, ...expressions) => {
       const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
         // On the server Emotion doesn't use React.forwardRef for creating components, so the created
@@ -5931,22 +5889,19 @@ function createStyled(input = {}) {
         // which are basically components used as a selectors.
         return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? _ref => {
           let {
-            theme: themeInput
-          } = _ref,
-              other = _objectWithoutPropertiesLoose(_ref, _excluded2$2);
-
+              theme: themeInput
+            } = _ref,
+            other = _objectWithoutPropertiesLoose(_ref, _excluded2$2);
           return stylesArg(_extends$3({
             theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
           }, other));
         } : stylesArg;
       }) : [];
       let transformedStyleArg = styleArg;
-
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
           const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
           const styleOverrides = getStyleOverrides(componentName, theme);
-
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
@@ -5956,55 +5911,46 @@ function createStyled(input = {}) {
             });
             return overridesResolver(props, resolvedStyleOverrides);
           }
-
           return null;
         });
       }
-
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
           const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
           return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
-
       if (!skipSx) {
         expressionsWithDefaultTheme.push(systemSx);
       }
-
       const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-
       if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
-        const placeholders = new Array(numOfCustomFnsApplied).fill(''); // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
-
+        const placeholders = new Array(numOfCustomFnsApplied).fill('');
+        // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
         transformedStyleArg = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-      } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
+      } else if (typeof styleArg === 'function' &&
+      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
       styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
         transformedStyleArg = _ref2 => {
           let {
-            theme: themeInput
-          } = _ref2,
-              other = _objectWithoutPropertiesLoose(_ref2, _excluded3);
-
+              theme: themeInput
+            } = _ref2,
+            other = _objectWithoutPropertiesLoose(_ref2, _excluded3);
           return styleArg(_extends$3({
             theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
           }, other));
         };
       }
-
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
-
       return Component;
     };
-
     if (defaultStyledResolver.withConfig) {
       muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
     }
-
     return muiStyledResolver;
   };
 }
@@ -6017,29 +5963,26 @@ function createStyled(input = {}) {
  * @returns {number} A number in the range [min, max]
  */
 function clamp(value, min = 0, max = 1) {
-
   return Math.min(Math.max(min, value), max);
 }
+
 /**
  * Converts a color from CSS hex format to CSS rgb format.
  * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
  * @returns {string} A CSS rgb color string
  */
-
-
 function hexToRgb(color) {
   color = color.slice(1);
   const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
   let colors = color.match(re);
-
   if (colors && colors[0].length === 1) {
     colors = colors.map(n => n + n);
   }
-
   return colors ? `rgb${colors.length === 4 ? 'a' : ''}(${colors.map((n, index) => {
     return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
   }).join(', ')})` : '';
 }
+
 /**
  * Returns an object with the type and values of a color.
  *
@@ -6047,43 +5990,33 @@ function hexToRgb(color) {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {object} - A MUI color object: {type: string, values: number[]}
  */
-
-
 function decomposeColor(color) {
   // Idempotent
   if (color.type) {
     return color;
   }
-
   if (color.charAt(0) === '#') {
     return decomposeColor(hexToRgb(color));
   }
-
   const marker = color.indexOf('(');
   const type = color.substring(0, marker);
-
   if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
     throw new Error(formatMuiErrorMessage(9, color));
   }
-
   let values = color.substring(marker + 1, color.length - 1);
   let colorSpace;
-
   if (type === 'color') {
     values = values.split(' ');
     colorSpace = values.shift();
-
     if (values.length === 4 && values[3].charAt(0) === '/') {
       values[3] = values[3].slice(1);
     }
-
     if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
       throw new Error(formatMuiErrorMessage(10, colorSpace));
     }
   } else {
     values = values.split(',');
   }
-
   values = values.map(value => parseFloat(value));
   return {
     type,
@@ -6091,6 +6024,7 @@ function decomposeColor(color) {
     colorSpace
   };
 }
+
 /**
  * Converts a color object with type and values to a string.
  * @param {object} color - Decomposed color
@@ -6098,7 +6032,6 @@ function decomposeColor(color) {
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */
-
 function recomposeColor(color) {
   const {
     type,
@@ -6107,7 +6040,6 @@ function recomposeColor(color) {
   let {
     values
   } = color;
-
   if (type.indexOf('rgb') !== -1) {
     // Only convert the first 3 values to int (i.e. not alpha)
     values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
@@ -6115,21 +6047,19 @@ function recomposeColor(color) {
     values[1] = `${values[1]}%`;
     values[2] = `${values[2]}%`;
   }
-
   if (type.indexOf('color') !== -1) {
     values = `${colorSpace} ${values.join(' ')}`;
   } else {
     values = `${values.join(', ')}`;
   }
-
   return `${type}(${values})`;
 }
+
 /**
  * Converts a color from hsl format to rgb format.
  * @param {string} color - HSL color values
  * @returns {string} rgb color values
  */
-
 function hslToRgb(color) {
   color = decomposeColor(color);
   const {
@@ -6139,17 +6069,13 @@ function hslToRgb(color) {
   const s = values[1] / 100;
   const l = values[2] / 100;
   const a = s * Math.min(l, 1 - l);
-
   const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-
   let type = 'rgb';
   const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
-
   if (color.type === 'hsla') {
     type += 'a';
     rgb.push(values[3]);
   }
-
   return recomposeColor({
     type,
     values: rgb
@@ -6163,7 +6089,6 @@ function hslToRgb(color) {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {number} The relative brightness of the color in the range 0 - 1
  */
-
 function getLuminance(color) {
   color = decomposeColor(color);
   let rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;
@@ -6173,10 +6098,12 @@ function getLuminance(color) {
     }
 
     return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
-  }); // Truncate at 3 digits
+  });
 
+  // Truncate at 3 digits
   return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
 }
+
 /**
  * Calculates the contrast ratio between two colors.
  *
@@ -6185,23 +6112,21 @@ function getLuminance(color) {
  * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {number} A contrast ratio value in the range 0 - 21.
  */
-
 function getContrastRatio(foreground, background) {
   const lumA = getLuminance(foreground);
   const lumB = getLuminance(background);
   return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
 }
+
 /**
  * Darkens a color.
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-
 function darken(color, coefficient) {
   color = decomposeColor(color);
   coefficient = clamp(coefficient);
-
   if (color.type.indexOf('hsl') !== -1) {
     color.values[2] *= 1 - coefficient;
   } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
@@ -6209,20 +6134,18 @@ function darken(color, coefficient) {
       color.values[i] *= 1 - coefficient;
     }
   }
-
   return recomposeColor(color);
 }
+
 /**
  * Lightens a color.
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-
 function lighten(color, coefficient) {
   color = decomposeColor(color);
   coefficient = clamp(coefficient);
-
   if (color.type.indexOf('hsl') !== -1) {
     color.values[2] += (100 - color.values[2]) * coefficient;
   } else if (color.type.indexOf('rgb') !== -1) {
@@ -6234,12 +6157,10 @@ function lighten(color, coefficient) {
       color.values[i] += (1 - color.values[i]) * coefficient;
     }
   }
-
   return recomposeColor(color);
 }
 
 const EMPTY_THEME = {};
-
 function InnerThemeProvider(props) {
   const theme = useTheme$2();
   return /*#__PURE__*/jsxRuntime.exports.jsx(ThemeContext$2.Provider, {
@@ -6247,11 +6168,11 @@ function InnerThemeProvider(props) {
     children: props.children
   });
 }
+
 /**
  * This component makes the `theme` available down the React tree.
  * It should preferably be used at **the root of your component tree**.
  */
-
 function ThemeProvider(props) {
   const {
     children,
@@ -6266,24 +6187,22 @@ function ThemeProvider(props) {
 }
 
 const _excluded$7 = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-      _excluded2$1 = ["type", "mode"];
+  _excluded2$1 = ["type", "mode"];
 function adaptV4Theme(inputTheme) {
-
   const {
-    defaultProps = {},
-    mixins = {},
-    overrides = {},
-    palette = {},
-    props = {},
-    styleOverrides = {}
-  } = inputTheme,
-        other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$7);
-
+      defaultProps = {},
+      mixins = {},
+      overrides = {},
+      palette = {},
+      props = {},
+      styleOverrides = {}
+    } = inputTheme,
+    other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$7);
   const theme = _extends$5({}, other, {
     components: {}
-  }); // default props
-
+  });
 
+  // default props
   Object.keys(defaultProps).forEach(component => {
     const componentValue = theme.components[component] || {};
     componentValue.defaultProps = defaultProps[component];
@@ -6293,8 +6212,9 @@ function adaptV4Theme(inputTheme) {
     const componentValue = theme.components[component] || {};
     componentValue.defaultProps = props[component];
     theme.components[component] = componentValue;
-  }); // CSS overrides
+  });
 
+  // CSS overrides
   Object.keys(styleOverrides).forEach(component => {
     const componentValue = theme.components[component] || {};
     componentValue.styleOverrides = styleOverrides[component];
@@ -6304,10 +6224,12 @@ function adaptV4Theme(inputTheme) {
     const componentValue = theme.components[component] || {};
     componentValue.styleOverrides = overrides[component];
     theme.components[component] = componentValue;
-  }); // theme.spacing
+  });
 
-  theme.spacing = createSpacing(inputTheme.spacing); // theme.mixins.gutters
+  // theme.spacing
+  theme.spacing = createSpacing(inputTheme.spacing);
 
+  // theme.mixins.gutters
   const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
   theme.mixins = _extends$5({
@@ -6323,13 +6245,11 @@ function adaptV4Theme(inputTheme) {
       });
     }
   }, mixins);
-
   const {
-    type: typeInput,
-    mode: modeInput
-  } = palette,
-        paletteRest = _objectWithoutPropertiesLoose$1(palette, _excluded2$1);
-
+      type: typeInput,
+      mode: modeInput
+    } = palette,
+    paletteRest = _objectWithoutPropertiesLoose$1(palette, _excluded2$1);
   const finalMode = modeInput || typeInput || 'light';
   theme.palette = _extends$5({
     // theme.palette.text.hint
@@ -6555,11 +6475,9 @@ const dark$1 = {
     activatedOpacity: 0.24
   }
 };
-
 function addLightOrDark(intent, direction, shade, tonalOffset) {
   const tonalOffsetLight = tonalOffset.light || tonalOffset;
   const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
-
   if (!intent[direction]) {
     if (intent.hasOwnProperty(shade)) {
       intent[direction] = intent[shade];
@@ -6570,7 +6488,6 @@ function addLightOrDark(intent, direction, shade, tonalOffset) {
     }
   }
 }
-
 function getDefaultPrimary(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -6579,14 +6496,12 @@ function getDefaultPrimary(mode = 'light') {
       dark: blue$1[400]
     };
   }
-
   return {
     main: blue$1[700],
     light: blue$1[400],
     dark: blue$1[800]
   };
 }
-
 function getDefaultSecondary(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -6595,14 +6510,12 @@ function getDefaultSecondary(mode = 'light') {
       dark: purple$1[400]
     };
   }
-
   return {
     main: purple$1[500],
     light: purple$1[300],
     dark: purple$1[700]
   };
 }
-
 function getDefaultError(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -6611,14 +6524,12 @@ function getDefaultError(mode = 'light') {
       dark: red$1[700]
     };
   }
-
   return {
     main: red$1[700],
     light: red$1[400],
     dark: red$1[800]
   };
 }
-
 function getDefaultInfo(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -6627,14 +6538,12 @@ function getDefaultInfo(mode = 'light') {
       dark: lightBlue$1[700]
     };
   }
-
   return {
     main: lightBlue$1[700],
     light: lightBlue$1[500],
     dark: lightBlue$1[900]
   };
 }
-
 function getDefaultSuccess(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -6643,14 +6552,12 @@ function getDefaultSuccess(mode = 'light') {
       dark: green$1[700]
     };
   }
-
   return {
     main: green$1[800],
     light: green$1[500],
     dark: green$1[900]
   };
 }
-
 function getDefaultWarning(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -6659,7 +6566,6 @@ function getDefaultWarning(mode = 'light') {
       dark: orange$1[700]
     };
   }
-
   return {
     main: '#ed6c02',
     // closest to orange[800] that pass 3:1.
@@ -6667,30 +6573,27 @@ function getDefaultWarning(mode = 'light') {
     dark: orange$1[900]
   };
 }
-
 function createPalette(palette) {
   const {
-    mode = 'light',
-    contrastThreshold = 3,
-    tonalOffset = 0.2
-  } = palette,
-        other = _objectWithoutPropertiesLoose$1(palette, _excluded$6);
-
+      mode = 'light',
+      contrastThreshold = 3,
+      tonalOffset = 0.2
+    } = palette,
+    other = _objectWithoutPropertiesLoose$1(palette, _excluded$6);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
   const info = palette.info || getDefaultInfo(mode);
   const success = palette.success || getDefaultSuccess(mode);
-  const warning = palette.warning || getDefaultWarning(mode); // Use the same logic as
+  const warning = palette.warning || getDefaultWarning(mode);
+
+  // Use the same logic as
   // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
   // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
-
   function getContrastText(background) {
     const contrastText = getContrastRatio(background, dark$1.text.primary) >= contrastThreshold ? dark$1.text.primary : light$1.text.primary;
-
     return contrastText;
   }
-
   const augmentColor = ({
     color,
     name,
@@ -6699,34 +6602,26 @@ function createPalette(palette) {
     darkShade = 700
   }) => {
     color = _extends$5({}, color);
-
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
-
     if (!color.hasOwnProperty('main')) {
       throw new Error(formatMuiErrorMessage(11, name ? ` (${name})` : '', mainShade));
     }
-
     if (typeof color.main !== 'string') {
       throw new Error(formatMuiErrorMessage(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
     }
-
     addLightOrDark(color, 'light', lightShade, tonalOffset);
     addLightOrDark(color, 'dark', darkShade, tonalOffset);
-
     if (!color.contrastText) {
       color.contrastText = getContrastText(color.main);
     }
-
     return color;
   };
-
   const modes = {
     dark: dark$1,
     light: light$1
   };
-
   const paletteOutput = deepmerge(_extends$5({
     // A collection of common colors.
     common: _extends$5({}, common$1),
@@ -6784,44 +6679,39 @@ function createPalette(palette) {
 }
 
 const _excluded$5 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
-
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
-
 const caseAllCaps = {
   textTransform: 'uppercase'
 };
 const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
+
 /**
  * @see @link{https://m2.material.io/design/typography/the-type-system.html}
  * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
  */
-
 function createTypography(palette, typography) {
   const _ref = typeof typography === 'function' ? typography(palette) : typography,
-        {
-    fontFamily = defaultFontFamily,
-    // The default font size of the Material Specification.
-    fontSize = 14,
-    // px
-    fontWeightLight = 300,
-    fontWeightRegular = 400,
-    fontWeightMedium = 500,
-    fontWeightBold = 700,
-    // Tell MUI what's the font-size on the html element.
-    // 16px is the default font-size used by browsers.
-    htmlFontSize = 16,
-    // Apply the CSS properties to all the variants.
-    allVariants,
-    pxToRem: pxToRem2
-  } = _ref,
-        other = _objectWithoutPropertiesLoose$1(_ref, _excluded$5);
-
+    {
+      fontFamily = defaultFontFamily,
+      // The default font size of the Material Specification.
+      fontSize = 14,
+      // px
+      fontWeightLight = 300,
+      fontWeightRegular = 400,
+      fontWeightMedium = 500,
+      fontWeightBold = 700,
+      // Tell MUI what's the font-size on the html element.
+      // 16px is the default font-size used by browsers.
+      htmlFontSize = 16,
+      // Apply the CSS properties to all the variants.
+      allVariants,
+      pxToRem: pxToRem2
+    } = _ref,
+    other = _objectWithoutPropertiesLoose$1(_ref, _excluded$5);
   const coef = fontSize / 14;
-
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-
   const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$5({
     fontFamily,
     fontWeight,
@@ -6831,7 +6721,6 @@ function createTypography(palette, typography) {
   }, fontFamily === defaultFontFamily ? {
     letterSpacing: `${round(letterSpacing / size)}em`
   } : {}, casing, allVariants);
-
   const variants = {
     h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
     h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
@@ -6858,19 +6747,17 @@ function createTypography(palette, typography) {
     fontWeightBold
   }, variants), other, {
     clone: false // No need to clone deep
-
   });
 }
 
 const shadowKeyUmbraOpacity = 0.2;
 const shadowKeyPenumbraOpacity = 0.14;
 const shadowAmbientShadowOpacity = 0.12;
-
 function createShadow(...px) {
   return [`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`].join(',');
-} // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
-
+}
 
+// Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$1 = shadows;
 
@@ -6887,9 +6774,10 @@ const easing = {
   easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
   // The sharp curve is used by objects that may return to the screen at any time.
   sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
-}; // Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
-// to learn when use what timing
+};
 
+// Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
+// to learn when use what timing
 const duration = {
   shortest: 150,
   shorter: 200,
@@ -6903,37 +6791,30 @@ const duration = {
   // recommended when something is leaving screen
   leavingScreen: 195
 };
-
 function formatMs(milliseconds) {
   return `${Math.round(milliseconds)}ms`;
 }
-
 function getAutoHeightDuration(height) {
   if (!height) {
     return 0;
   }
+  const constant = height / 36;
 
-  const constant = height / 36; // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
-
+  // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
-
 function createTransitions(inputTransitions) {
   const mergedEasing = _extends$5({}, easing, inputTransitions.easing);
-
   const mergedDuration = _extends$5({}, duration, inputTransitions.duration);
-
   const create = (props = ['all'], options = {}) => {
     const {
-      duration: durationOption = mergedDuration.standard,
-      easing: easingOption = mergedEasing.easeInOut,
-      delay = 0
-    } = options;
-          _objectWithoutPropertiesLoose$1(options, _excluded$4);
-
+        duration: durationOption = mergedDuration.standard,
+        easing: easingOption = mergedEasing.easeInOut,
+        delay = 0
+      } = options;
+      _objectWithoutPropertiesLoose$1(options, _excluded$4);
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
-
   return _extends$5({
     getAutoHeightDuration,
     create
@@ -6958,20 +6839,17 @@ const zIndex = {
 var zIndex$1 = zIndex;
 
 const _excluded$3 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
-
 function createTheme(options = {}, ...args) {
   const {
-    mixins: mixinsInput = {},
-    palette: paletteInput = {},
-    transitions: transitionsInput = {},
-    typography: typographyInput = {}
-  } = options,
-        other = _objectWithoutPropertiesLoose$1(options, _excluded$3);
-
+      mixins: mixinsInput = {},
+      palette: paletteInput = {},
+      transitions: transitionsInput = {},
+      typography: typographyInput = {}
+    } = options,
+    other = _objectWithoutPropertiesLoose$1(options, _excluded$3);
   if (options.vars) {
     throw new Error(formatMuiErrorMessage(18));
   }
-
   const palette = createPalette(paletteInput);
   const systemTheme = createTheme$1(options);
   let muiTheme = deepmerge(systemTheme, {
@@ -6985,7 +6863,6 @@ function createTheme(options = {}, ...args) {
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-
   return muiTheme;
 }
 
@@ -6994,7 +6871,6 @@ var defaultTheme$1 = defaultTheme;
 
 function useTheme$1() {
   const theme = useTheme$2(defaultTheme$1);
-
   return theme;
 }
 
@@ -7354,7 +7230,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "8857" ;
+const NEBULA_VERSION_HASH = "d1ab" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -7363,7 +7239,8 @@ var InstanceContext = React__default.createContext({
   language: null,
   theme: null,
   translator: null,
-  constraints: {}
+  constraints: {},
+  themeApi: null
 });
 
 var createKeyStore = (function () {
@@ -7872,7 +7749,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "3.1.0-alpha.1" );
+  element.setAttribute('data-nebulajs-version', "3.1.0-alpha.3" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
@@ -7891,6 +7768,9 @@ function boot(_ref2) {
     addCell(id, cell) {
       cells[id] = cell;
     },
+    removeCell(id) {
+      delete cells[id];
+    },
     add(component) {
       (async () => {
         await rendered;
@@ -9662,7 +9542,7 @@ const ellipsis = {
 const barPadPx = 4;
 const barBorderWidthPx = 1;
 const barWithCheckboxLeftPadPx = 29;
-const frequencyTextNone = '0';
+const frequencyTextNone = '-';
 const getSelectedStyle = _ref => {
   let {
     theme
@@ -9680,13 +9560,14 @@ const getSelectedStyle = _ref => {
   };
 };
 const Root$1 = styled$1('div')(_ref2 => {
+  var _theme$listBox$conten, _theme$listBox, _theme$listBox$conten2, _theme$listBox$conten3, _theme$listBox2, _theme$listBox2$conte, _theme$listBox3, _theme$listBox3$conte, _theme$listBox4, _theme$listBox4$conte;
   let {
     theme
   } = _ref2;
   return {
     ["& .".concat(classes$a.row)]: {
       flexWrap: 'nowrap',
-      color: theme.palette.text.primary
+      color: (_theme$listBox$conten = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : (_theme$listBox$conten2 = _theme$listBox.content) === null || _theme$listBox$conten2 === void 0 ? void 0 : _theme$listBox$conten2.color) !== null && _theme$listBox$conten !== void 0 ? _theme$listBox$conten : theme.palette.text.primary
     },
     ["& .".concat(classes$a.rowBorderBottom)]: {
       borderBottom: "1px solid ".concat(theme.palette.divider)
@@ -9694,7 +9575,7 @@ const Root$1 = styled$1('div')(_ref2 => {
     ["& .".concat(classes$a.column)]: {
       flexWrap: 'nowrap',
       borderRight: "1px solid ".concat(theme.palette.divider),
-      color: theme.palette.text.primary
+      color: (_theme$listBox$conten3 = (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$conte = _theme$listBox2.content) === null || _theme$listBox2$conte === void 0 ? void 0 : _theme$listBox2$conte.color) !== null && _theme$listBox$conten3 !== void 0 ? _theme$listBox$conten3 : theme.palette.text.primary
     },
     ["& .".concat(classes$a.fieldRoot)]: {
       '&:focus': {
@@ -9715,12 +9596,15 @@ const Root$1 = styled$1('div')(_ref2 => {
       paddingRight: '9px'
     },
     // The leaf node, containing the label text.
-    ["& .".concat(classes$a.labelText)]: _objectSpread2({
+    ["& .".concat(classes$a.labelText)]: _objectSpread2(_objectSpread2({
       flexBasis: 'max-content',
       lineHeight: '16px',
       userSelect: 'none',
       whiteSpace: 'pre'
-    }, ellipsis),
+    }, ellipsis), {}, {
+      fontSize: (_theme$listBox3 = theme.listBox) === null || _theme$listBox3 === void 0 ? void 0 : (_theme$listBox3$conte = _theme$listBox3.content) === null || _theme$listBox3$conte === void 0 ? void 0 : _theme$listBox3$conte.fontSize,
+      fontFamily: (_theme$listBox4 = theme.listBox) === null || _theme$listBox4 === void 0 ? void 0 : (_theme$listBox4$conte = _theme$listBox4.content) === null || _theme$listBox4$conte === void 0 ? void 0 : _theme$listBox4$conte.fontFamily
+    }),
     ["& .".concat(classes$a.labelDense)]: {
       fontSize: 12
     },
@@ -9826,7 +9710,7 @@ function RowColumn(_ref3) {
     column = false,
     checkboxes = false,
     dense = false,
-    frequencyMode = 'N',
+    freqIsAllowed,
     isSingleSelect,
     actions,
     frequencyMax = '',
@@ -10019,7 +9903,7 @@ function RowColumn(_ref3) {
     color: 'inherit'
   }) : getFieldWithRanges({
     lbls: labels
-  })), frequencyMode !== 'N' && /*#__PURE__*/React__default.createElement(Grid, {
+  })), freqIsAllowed && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     style: {
       display: 'flex',
@@ -10048,6 +9932,7 @@ const scrollBarThumb = '#BBB';
 const scrollBarThumbHover = '#555';
 const scrollBarBackground = '#f1f1f1';
 const MINIMUM_BATCH_SIZE = 100;
+const FREQUENCY_MIN_SHOW_WIDTH = 80;
 const classes$9 = {
   styledScrollbars: "".concat(PREFIX$9, "-styledScrollbars")
 };
@@ -10098,7 +9983,7 @@ function ListBox(_ref2) {
     height,
     width,
     listLayout = 'vertical',
-    frequencyMode = 'N',
+    frequencyMode,
     histogram = false,
     checkboxes = false,
     update = undefined,
@@ -10238,6 +10123,14 @@ function ListBox(_ref2) {
     const h = Math.max(...ps.map(page => page.qArea.qTop + page.qArea.qHeight));
     return hasFilteredValues ? h : count;
   };
+  const getFrequencyAllowed = () => {
+    const widthPermitsFreq = width > FREQUENCY_MIN_SHOW_WIDTH;
+    const {
+      frequencyEnabled = false
+    } = layout.qListObject;
+    const hasValidFreqOption = !['none', undefined].includes(frequencyMode);
+    return widthPermitsFreq && (hasValidFreqOption || frequencyEnabled);
+  };
   const listCount = pages && pages.length && calculatePagesHeight ? getCalculatedHeight(pages) : count;
   onSetListCount === null || onSetListCount === void 0 ? void 0 : onSetListCount(listCount);
   const dense = (_layout$layoutOptions = (_layout$layoutOptions2 = layout.layoutOptions) === null || _layout$layoutOptions2 === void 0 ? void 0 : _layout$layoutOptions2.dense) !== null && _layout$layoutOptions !== void 0 ? _layout$layoutOptions : false;
@@ -10254,6 +10147,7 @@ function ListBox(_ref2) {
   const {
     frequencyMax
   } = layout;
+  const freqIsAllowed = getFrequencyAllowed();
   return /*#__PURE__*/React__default.createElement(InfiniteLoader, {
     isItemLoaded: isItemLoaded,
     itemCount: listCount || 1 // must be more than 0 or loadMoreItems will never be called again
@@ -10287,6 +10181,7 @@ function ListBox(_ref2) {
         checkboxes,
         dense,
         frequencyMode,
+        freqIsAllowed,
         isSingleSelect,
         actions: {
           select,
@@ -10873,7 +10768,25 @@ const search = props => _objectSpread2(_objectSpread2({}, props), {}, {
 var SearchIcon = (props => SvgIcon(search(props)));
 
 const TREE_PATH = '/qListObjectDef';
-function ListBoxSearch(_ref) {
+const StyledInputAdornment = styled$1(InputAdornment)(_ref => {
+  var _theme$listBox, _theme$listBox$conten;
+  let {
+    theme
+  } = _ref;
+  return {
+    color: (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : (_theme$listBox$conten = _theme$listBox.content) === null || _theme$listBox$conten === void 0 ? void 0 : _theme$listBox$conten.color
+  };
+});
+const StyledOutlinedInput = styled$1(OutlinedInput)(_ref2 => {
+  var _theme$listBox2, _theme$listBox2$conte;
+  let {
+    theme
+  } = _ref2;
+  return {
+    color: (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$conte = _theme$listBox2.content) === null || _theme$listBox2$conte === void 0 ? void 0 : _theme$listBox2$conte.color
+  };
+});
+function ListBoxSearch(_ref3) {
   let {
     selections,
     model,
@@ -10881,7 +10794,7 @@ function ListBoxSearch(_ref) {
     listCount,
     dense = false,
     visible = true
-  } = _ref;
+  } = _ref3;
   const {
     translator
   } = useContext(InstanceContext);
@@ -10950,8 +10863,8 @@ function ListBoxSearch(_ref) {
   if (!visible) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement(OutlinedInput, {
-    startAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
+  return /*#__PURE__*/React__default.createElement(StyledOutlinedInput, {
+    startAdornment: /*#__PURE__*/React__default.createElement(StyledInputAdornment, {
       position: "start"
     }, /*#__PURE__*/React__default.createElement(SearchIcon, {
       size: dense ? 'small' : 'normal'
@@ -10960,6 +10873,7 @@ function ListBoxSearch(_ref) {
     sx: [{
       border: 'none',
       borderRadius: 0,
+      backgroundColor: 'transparent',
       '& fieldset': {
         border: "1px solid ".concat(theme.palette.divider),
         borderWidth: '1px 0 1px 0',
@@ -12598,28 +12512,65 @@ AutoSizer.defaultProps = {
   style: {}
 };
 
+const addListboxTheme = themeApi => {
+  const getListboxStyle = prop => themeApi.getStyle('object', '', "listBox.".concat(prop));
+  return {
+    backgroundColor: getListboxStyle('backgroundColor'),
+    title: {
+      main: {
+        color: getListboxStyle('title.main.color'),
+        fontSize: getListboxStyle('title.main.fontSize'),
+        fontFamily: getListboxStyle('title.main.fontFamily')
+      }
+    },
+    content: {
+      color: getListboxStyle('content.color'),
+      fontSize: getListboxStyle('content.fontSize'),
+      fontFamily: getListboxStyle('content.fontFamily')
+    }
+  };
+};
+
 const PREFIX$4 = 'ListBoxInline';
 const classes$4 = {
   listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
   screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly")
 };
-const StyledGrid$3 = styled$1(Grid)(() => ({
-  ["& .".concat(classes$4.listBoxHeader)]: {
-    alignSelf: 'center',
-    display: 'inline-flex'
-  },
-  ["& .".concat(classes$4.screenReaderOnly)]: {
-    position: 'absolute',
-    height: 0,
-    width: 0,
-    overflow: 'hidden'
-  }
-}));
-function ListBoxInline(_ref) {
+const StyledGrid$3 = styled$1(Grid)(_ref => {
+  var _theme$listBox$backgr, _theme$listBox;
+  let {
+    theme
+  } = _ref;
+  return {
+    backgroundColor: (_theme$listBox$backgr = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.backgroundColor) !== null && _theme$listBox$backgr !== void 0 ? _theme$listBox$backgr : theme.palette.background.default,
+    ["& .".concat(classes$4.listBoxHeader)]: {
+      alignSelf: 'center',
+      display: 'inline-flex'
+    },
+    ["& .".concat(classes$4.screenReaderOnly)]: {
+      position: 'absolute',
+      height: 0,
+      width: 0,
+      overflow: 'hidden'
+    }
+  };
+});
+const Title = styled$1(Typography)(_ref2 => {
+  var _theme$listBox2, _theme$listBox2$title, _theme$listBox2$title2, _theme$listBox3, _theme$listBox3$title, _theme$listBox3$title2, _theme$listBox4, _theme$listBox4$title, _theme$listBox4$title2;
+  let {
+    theme
+  } = _ref2;
+  return {
+    color: (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$title = _theme$listBox2.title) === null || _theme$listBox2$title === void 0 ? void 0 : (_theme$listBox2$title2 = _theme$listBox2$title.main) === null || _theme$listBox2$title2 === void 0 ? void 0 : _theme$listBox2$title2.color,
+    fontSize: (_theme$listBox3 = theme.listBox) === null || _theme$listBox3 === void 0 ? void 0 : (_theme$listBox3$title = _theme$listBox3.title) === null || _theme$listBox3$title === void 0 ? void 0 : (_theme$listBox3$title2 = _theme$listBox3$title.main) === null || _theme$listBox3$title2 === void 0 ? void 0 : _theme$listBox3$title2.fontSize,
+    fontFamily: (_theme$listBox4 = theme.listBox) === null || _theme$listBox4 === void 0 ? void 0 : (_theme$listBox4$title = _theme$listBox4.title) === null || _theme$listBox4$title === void 0 ? void 0 : (_theme$listBox4$title2 = _theme$listBox4$title.main) === null || _theme$listBox4$title2 === void 0 ? void 0 : _theme$listBox4$title2.fontFamily
+  };
+});
+function ListBoxInline(_ref3) {
   var _layout$layoutOptions, _layout$layoutOptions2;
   let {
     options = {}
-  } = _ref;
+  } = _ref3;
   const {
     direction,
     frequencyMode,
@@ -12662,8 +12613,10 @@ function ListBoxInline(_ref) {
   }, [model]);
   const {
     translator,
-    keyboardNavigation
+    keyboardNavigation,
+    themeApi
   } = useContext(InstanceContext);
+  theme.listBox = addListboxTheme(themeApi);
   const moreAlignTo = useRef();
   const [searchContainer, searchContainerRef] = useRefWithCallback();
   const [layout] = useLayout$1(model);
@@ -12778,7 +12731,7 @@ function ListBoxInline(_ref) {
   })) : getSearchOrUnlock()), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: classes$4.listBoxHeader
-  }, /*#__PURE__*/React__default.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Title, {
     variant: "h6",
     noWrap: true
   }, layout.title || layout.qListObject.qDimensionInfo.qFallbackTitle)), /*#__PURE__*/React__default.createElement(Grid, {
@@ -12835,11 +12788,11 @@ function ListBoxInline(_ref) {
     ref: moreAlignTo
   }), /*#__PURE__*/React__default.createElement("div", {
     className: classes$4.screenReaderOnly
-  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref2 => {
+  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref4 => {
     let {
       height,
       width
-    } = _ref2;
+    } = _ref4;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
       selections: selections,
@@ -12879,6 +12832,9 @@ function useExistingModel(_ref) {
   if (options.dense) {
     throw new Error('Option "dense" is not applicable for existing objects.');
   }
+  if (options.frequencyMode) {
+    throw new Error('Option "frequencyMode" is not applicable for existing objects.');
+  }
   useEffect$1(() => {
     async function fetchObject() {
       const modelFromStore = modelStore.get(qId);
@@ -14862,7 +14818,7 @@ const resolveBgImage = (bgComp, app) => {
   const bgImageDef = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgImage;
   if (bgImageDef) {
     let url = '';
-    if (bgImageDef.mode === 'media') {
+    if (bgImageDef.mode === 'media' || bgComp.useImage === '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);
@@ -14886,7 +14842,7 @@ const resolveBgColor = (bgComp, theme) => {
     if (bgColor.useColorExpression) {
       return theme.validateColor(bgColor.colorExpression);
     }
-    return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color) : undefined;
+    return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color, true) : undefined;
   }
   return undefined;
 };
@@ -15178,6 +15134,7 @@ const Cell = forwardRef((_ref6, ref) => {
     disableCellPadding = false
   } = halo.context || {};
   const {
+    theme: themeName,
     translator,
     language,
     keyboardNavigation
@@ -15194,11 +15151,8 @@ const Cell = forwardRef((_ref6, ref) => {
   const [contentRef, contentRect, contentNode] = useRect$1();
   const [snOptions, setSnOptions] = useState$1(initialSnOptions);
   const [snPlugins, setSnPlugins] = useState$1(initialSnPlugins);
-  const [clickOutElement, setClickOutElement] = useState$1();
-  const clickOutElements = [{
-    current: clickOutElement
-  }, '.njs-action-toolbar-popover']; // elements which will not trigger the click out listener
-  const [selections] = useObjectSelections(app, model, clickOutElements);
+  const cellElementId = "njs-cell-".concat(currentId);
+  const [selections] = useObjectSelections(app, model, ["#".concat(cellElementId), '.njs-action-toolbar-popover']); // elements which will not trigger the click out listener
   const [hovering, setHover] = useState$1(false);
   const hoveringDebouncer = useRef({
     enter: null,
@@ -15216,17 +15170,11 @@ const Cell = forwardRef((_ref6, ref) => {
   useEffect$1(() => {
     eventmixin(focusHandler.current);
   }, []);
-  useEffect$1(() => {
-    if (!contentNode) {
-      return;
-    }
-    setClickOutElement(cellNode);
-  }, [cellRect]);
   useEffect$1(() => {
     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]);
+  }, [layout, halo.public.theme, halo.app, themeName]);
   focusHandler.current.blurCallback = resetFocus => {
     halo.root.toggleFocusOfCells();
     if (resetFocus && contentNode) {
@@ -15417,7 +15365,7 @@ const Cell = forwardRef((_ref6, ref) => {
       width: '100%',
       height: '100%',
       overflow: 'hidden',
-      backgroundColor: bgColor,
+      backgroundColor: bgColor || 'unset',
       backgroundImage: bgImage && bgImage.url ? "url(".concat(bgImage.url, ")") : undefined,
       backgroundRepeat: 'no-repeat',
       backgroundSize: bgImage && bgImage.size,
@@ -15427,6 +15375,7 @@ const Cell = forwardRef((_ref6, ref) => {
     square: true,
     className: CellElement.className,
     ref: cellRef,
+    id: cellElementId,
     onMouseEnter: handleOnMouseEnter,
     onMouseLeave: handleOnMouseLeave
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -15466,7 +15415,7 @@ const Cell = forwardRef((_ref6, ref) => {
   }));
 });
 
-function glue(_ref) {
+function glue$1(_ref) {
   let {
     halo,
     element,
@@ -15572,7 +15521,7 @@ function validatePlugins(plugins) {
   });
 }
 
-const noopi = () => {};
+const noopi$1 = () => {};
 function viz() {
   let {
     model,
@@ -15580,7 +15529,7 @@ function viz() {
     initialError,
     onDestroy = async () => {}
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let unmountCell = noopi;
+  let unmountCell = noopi$1;
   let cellRef = null;
   let mountedReference = null;
   let onMount = null;
@@ -15630,6 +15579,11 @@ function viz() {
      * @type {string}
      */
     id: model.id,
+    /**
+     * This visualizations Enigma model, a representation of the generic object.
+     * @type {string}
+     */
+    model,
     /**
      * Destroys the visualization and removes it from the the DOM.
      * @example
@@ -15642,7 +15596,7 @@ function viz() {
     async destroy() {
       await onDestroy();
       unmountCell();
-      unmountCell = noopi;
+      unmountCell = noopi$1;
     },
     /**
      * Converts the visualization to a different registered type
@@ -15681,7 +15635,7 @@ function viz() {
           throw new Error('Already mounted');
         }
         mountedReference = element;
-        [unmountCell, cellRef] = glue({
+        [unmountCell, cellRef] = glue$1({
           halo,
           element,
           model,
@@ -15821,6 +15775,350 @@ async function createSessionObject(_ref, halo) {
   }, halo, error, onDestroy);
 }
 
+async function getObject$1(_ref, halo) {
+  let {
+    id,
+    options,
+    plugins,
+    element
+  } = _ref;
+  const key = "".concat(id);
+  let rpc = rpcRequestModelStore.get(key);
+  if (!rpc) {
+    rpc = halo.app.getObject(id);
+    rpcRequestModelStore.set(key, rpc);
+  }
+  const model = await rpc;
+  modelStore.set(key, model);
+  return init(model, {
+    options,
+    plugins,
+    element
+  }, halo);
+}
+
+/**
+ * @interface
+ * @extends HTMLElement
+ * @experimental
+ * @since 3.1.0
+ */
+const SheetElement = {
+  /** @type {'njs-sheet'} */
+  className: 'njs-sheet'
+};
+function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initialError, onMount) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = cell.bounds;
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      left: "".concat(x, "%"),
+      top: "".concat(y, "%"),
+      width: "".concat(width, "%"),
+      height: "".concat(height, "%"),
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/React__default.createElement(Cell, {
+    ref: cell.cellRef,
+    halo: halo,
+    model: cell.model,
+    currentId: cell.currentId,
+    initialSnOptions: initialSnOptions,
+    initialSnPlugins: initialSnPlugins,
+    initialError: initialError,
+    onMount: onMount
+  }));
+}
+function Sheet(_ref) {
+  let {
+    model,
+    halo,
+    initialSnOptions,
+    initialSnPlugins,
+    initialError,
+    onMount
+  } = _ref;
+  const {
+    root
+  } = halo;
+  const [layout] = useLayout$1(model);
+  const {
+    theme: themeName
+  } = useContext(InstanceContext);
+  const [cells, setCells] = useState$1([]);
+  const [bgColor, setBgColor] = useState$1(undefined);
+  const [bgImage, setBgImage] = useState$1(undefined);
+  const [deepHash, setDeepHash] = useState$1('');
+
+  /// For each object
+  useEffect$1(() => {
+    if (layout) {
+      const hash = JSON.stringify(layout.cells);
+      if (hash === deepHash) {
+        return;
+      }
+      setDeepHash(hash);
+      const fetchObjects = async () => {
+        /*
+          Need to always fetch and evaluate everything as the sheet need to support multiple instances of the same object?
+          No, there is no way to add the same chart twice, so the optimization should be worth it.
+        */
+
+        // Clear the cell list
+        cells.forEach(c => {
+          root.removeCell(c.currentId);
+        });
+        const lCells = layout.cells;
+        // TODO - should try reuse existing objects on subsequent renders
+        // Non-id updates should only change the "css"
+        const cs = await Promise.all(lCells.map(async c => {
+          let mounted;
+          const mountedPromise = new Promise(resolve => {
+            mounted = resolve;
+          });
+          const cell = cells.find(ce => ce.id === c.name);
+          if (cell) {
+            cell.bounds = c.bounds;
+            delete cell.mountedPromise;
+            return cell;
+          }
+          const vs = await getObject$1({
+            id: c.name
+          }, halo);
+          return {
+            model: vs.model,
+            id: c.name,
+            bounds: c.bounds,
+            cellRef: React__default.createRef(),
+            currentId: uid(),
+            mounted,
+            mountedPromise
+          };
+        }));
+        cs.forEach(c => root.addCell(c.currentId, c.cellRef));
+        setCells(cs);
+      };
+      fetchObjects();
+    }
+  }, [layout]);
+  const cellRenderers = useMemo$1(() => cells ? cells.map(c => getCellRenderer(c, halo, initialSnOptions, initialSnPlugins, initialError, c.mounted)) : [], [cells]);
+  useEffect$1(() => {
+    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, themeName]);
+
+  /* TODO
+    - sheet title + bg + logo etc + as option
+    - sheet exposed classnames for theming
+  */
+
+  const height = !layout || Number.isNaN(layout.height) ? '100%' : "".concat(Number(layout.height), "%");
+  const promises = cells.map(c => c.mountedPromise);
+  const ps = promises.filter(p => !!p);
+  if (ps.length) {
+    Promise.all(promises).then(() => {
+      // TODO - correct? Currently called each time a new cell is mounted?
+      onMount();
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SheetElement.className,
+    style: {
+      width: "100%",
+      height,
+      position: 'relative',
+      backgroundColor: bgColor,
+      backgroundImage: bgImage && bgImage.url ? "url(".concat(bgImage.url, ")") : undefined,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: bgImage && bgImage.size,
+      backgroundPosition: bgImage && bgImage.pos
+    }
+  }, cellRenderers);
+}
+
+function glue(_ref) {
+  let {
+    halo,
+    element,
+    model,
+    initialSnOptions,
+    initialSnPlugins,
+    onMount,
+    initialError
+  } = _ref;
+  const {
+    root
+  } = halo;
+  const sheetRef = React__default.createRef();
+  const portal = ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Sheet, {
+    ref: sheetRef,
+    halo: halo,
+    model: model,
+    initialSnOptions: initialSnOptions,
+    initialSnPlugins: initialSnPlugins,
+    initialError: initialError,
+    onMount: onMount
+  }), element, model.id);
+  const unmount = () => {
+    root.remove(portal);
+    model.removeListener('closed', unmount);
+  };
+  model.on('closed', unmount);
+  root.add(portal);
+  return [unmount, sheetRef];
+}
+
+const noopi = () => {};
+function sheet() {
+  let {
+    model,
+    halo,
+    initialError,
+    onDestroy = async () => {}
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let unmountSheet = noopi;
+  let sheetRef = null;
+  let mountedReference = null;
+  let onMount = null;
+  const mounted = new Promise(resolve => {
+    onMount = resolve;
+  });
+  let initialSnOptions = {};
+  let initialSnPlugins = [];
+  const setSnOptions = async opts => {
+    if (mountedReference) {
+      (async () => {
+        await mounted;
+        sheetRef.current.setSnOptions(_objectSpread2(_objectSpread2({}, initialSnOptions), opts));
+      })();
+    } else {
+      // Handle setting options before mount
+      initialSnOptions = _objectSpread2(_objectSpread2({}, initialSnOptions), opts);
+    }
+  };
+  const setSnPlugins = async plugins => {
+    validatePlugins(plugins);
+    if (mountedReference) {
+      (async () => {
+        await mounted;
+        sheetRef.current.setSnPlugins(plugins);
+      })();
+    } else {
+      // Handle setting plugins before mount
+      initialSnPlugins = plugins;
+    }
+  };
+
+  /**
+   * @class
+   * @alias Sheet
+   * @classdesc A controller to further modify a visualization after it has been rendered.
+   * @experimental
+   * @since 3.1.0
+   * @example
+   * const sheet = await embed(app).render({
+   *   element,
+   *   id: "jD5Gd"
+   * });
+   * sheet.destroy();
+   */
+  const api = /** @lends Sheet# */{
+    /**
+     * The id of this sheets's generic object.
+     * @type {string}
+     */
+    id: model.id,
+    /**
+     * This sheets Enigma model, a representation of the generic object.
+     * @type {string}
+     */
+    model,
+    /**
+     * Destroys the sheet and removes it from the the DOM.
+     * @example
+     * const sheet = await embed(app).render({
+     *   element,
+     *   id: "jD5Gd"
+     * });
+     * sheet.destroy();
+     */
+    async destroy() {
+      await onDestroy();
+      unmountSheet();
+      unmountSheet = noopi;
+    },
+    // ===== unexposed experimental API - use at own risk ======
+    __DO_NOT_USE__: {
+      mount(element) {
+        if (mountedReference) {
+          throw new Error('Already mounted');
+        }
+        mountedReference = element;
+        [unmountSheet, sheetRef] = glue({
+          halo,
+          element,
+          model,
+          initialSnOptions,
+          initialSnPlugins,
+          initialError,
+          onMount
+        });
+        return mounted;
+      },
+      async applyProperties(props) {
+        const current = await model.getEffectiveProperties();
+        const patches = getPatches('/', props, current);
+        if (patches.length) {
+          return model.applyPatches(patches, true);
+        }
+        return undefined;
+      },
+      options(opts) {
+        setSnOptions(opts);
+      },
+      plugins(plugins) {
+        setSnPlugins(plugins);
+      },
+      exportImage() {
+        throw new Error('Not implemented');
+      },
+      takeSnapshot() {
+        throw new Error('Not implemented');
+      },
+      getModel() {
+        return model;
+      }
+    }
+  };
+  return api;
+}
+
+/* eslint no-underscore-dangle:0 */
+async function initSheet(model, optional, halo, initialError) {
+  let onDestroy = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : async () => {};
+  const api = sheet({
+    model,
+    halo,
+    initialError,
+    onDestroy
+  });
+  if (optional.options) {
+    api.__DO_NOT_USE__.options(optional.options);
+  }
+  if (optional.plugins) {
+    api.__DO_NOT_USE__.plugins(optional.plugins);
+  }
+  if (optional.element) {
+    await api.__DO_NOT_USE__.mount(optional.element);
+  }
+  return api;
+}
+
 /**
  * @interface BaseConfig
  * @description Basic rendering configuration for rendering an object
@@ -15851,6 +16149,13 @@ async function getObject(_ref, halo) {
   }
   const model = await rpc;
   modelStore.set(key, model);
+  if (model.genericType === 'sheet') {
+    return initSheet(model, {
+      options,
+      plugins,
+      element
+    }, halo);
+  }
   return init(model, {
     options,
     plugins,
@@ -19720,6 +20025,7 @@ function nuked() {
       themes: configuration.themes,
       root
     });
+    currentContext.themeApi = appTheme$1.externalAPI;
     const publicAPIs = {
       galaxy: /** @lends Galaxy */{
         /** @type {Translator} */
@@ -19765,9 +20071,10 @@ function nuked() {
      */
     const api = /** @lends Embed# */{
       /**
-       * Renders a visualization into an HTMLElement.
+       * Renders a visualization or sheet into an HTMLElement.
+       * Support for sense sheets is experimental.
        * @param {CreateConfig | GetConfig} cfg - The render configuration.
-       * @returns {Promise<Viz>} A controller to the rendered visualization.
+       * @returns {Promise<Viz|Sheet>} A controller to the rendered visualization or sheet.
        * @example
        * // render from existing object
        * n.render({
@@ -20051,7 +20358,7 @@ var enigmaMocker = {exports: {}};
 var enigmaMocker_dev = {exports: {}};
 
 /*
-* @nebula.js/enigma-mocker v3.1.0-alpha.0
+* @nebula.js/enigma-mocker v3.1.0-alpha.2
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -20091,6 +20398,7 @@ var enigmaMocker_dev = {exports: {}};
       return target;
     }
     function _defineProperty(obj, key, value) {
+      key = _toPropertyKey(key);
       if (key in obj) {
         Object.defineProperty(obj, key, {
           value: value,
@@ -20130,6 +20438,20 @@ var enigmaMocker_dev = {exports: {}};
       }
       return target;
     }
+    function _toPrimitive(input, hint) {
+      if (typeof input !== "object" || input === null) return input;
+      var prim = input[Symbol.toPrimitive];
+      if (prim !== undefined) {
+        var res = prim.call(input, hint || "default");
+        if (typeof res !== "object") return res;
+        throw new TypeError("@@toPrimitive must return a primitive value.");
+      }
+      return (hint === "string" ? String : Number)(input);
+    }
+    function _toPropertyKey(arg) {
+      var key = _toPrimitive(arg, "string");
+      return typeof key === "symbol" ? key : String(key);
+    }
     var hasOwn = Object.prototype.hasOwnProperty;
     var toStr = Object.prototype.toString;
     var defineProperty = Object.defineProperty;
@@ -20410,7 +20732,7 @@ var enigmaMocker_dev = {exports: {}};
         throw new Error("Generic object has multiple IDs, qInfo.qId: ".concat(qId, ", id: ").concat(id));
       }
       qId = qId || id || "object - ".concat(+Date.now());
-      const mock = _objectSpread2({
+      const mock = _objectSpread2(_objectSpread2({
         id: qId,
         session: getPropValue(session, {
           defaultValue: true
@@ -20425,7 +20747,9 @@ var enigmaMocker_dev = {exports: {}};
             delay
           })
         });
-      }, {}));
+      }, {})), {}, {
+        genericType: genericObject.type
+      });
       return {
         [qId]: mock
       };