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

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.1.0-alpha.1
+* @nebula.js/stardust v3.1.0-alpha.2
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -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
@@ -3289,14 +3332,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 +3348,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 +3524,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 +3877,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 +3927,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 +4024,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 +4086,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 +4234,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 +4639,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 +4662,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 +4680,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 +4694,6 @@ function deepmerge(target, source, options = {
       }
     });
   }
-
   return output;
 }
 
@@ -4612,16 +4706,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 +4725,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 +4775,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 +4790,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 +4807,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 +4817,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 +4824,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 +4835,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 +4854,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 +4864,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 +4889,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 +4901,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 +4935,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 +4954,6 @@ function memoize(fn) {
     if (cache[arg] === undefined) {
       cache[arg] = fn(arg);
     }
-
     return cache[arg];
   };
 }
@@ -4922,10 +4975,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 +4989,6 @@ const getCssProperties = memoize(prop => {
       return [prop];
     }
   }
-
   const [a, b] = prop.split('');
   const property = properties[a];
   const direction = directions[b] || '';
@@ -4946,33 +4999,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 +5028,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 +5044,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 +5069,8 @@ function getBorder(value) {
   if (typeof value !== 'number') {
     return value;
   }
-
   return `${value}px solid`;
 }
-
 const border = style$1({
   prop: 'border',
   themeKey: 'borders',
@@ -5084,14 +5119,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 +5202,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 +5214,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 +5226,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 +5269,8 @@ function transform$1(value, userValue) {
   if (userValue === 'grey') {
     return userValue;
   }
-
   return value;
 }
-
 const color = style$1({
   prop: 'color',
   themeKey: 'palette',
@@ -5299,7 +5320,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 +5328,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 +5442,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 +5454,6 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
     });
     return acc;
   }, {});
-
   function getThemeValue(prop, value, theme) {
     const inputProps = {
       [prop]: value,
@@ -5449,43 +5464,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 +5504,6 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
               }, value, x => ({
                 [styleKey]: x
               }));
-
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css[styleKey] = styleFunctionSx({
                   sx: value,
@@ -5513,10 +5520,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 +5533,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 +5626,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 +5680,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 +5705,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 +5737,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 +5774,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 +5806,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 +5821,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 +5841,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 +5874,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 +5885,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 +5907,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 +5959,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 +5986,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 +6020,7 @@ function decomposeColor(color) {
     colorSpace
   };
 }
+
 /**
  * Converts a color object with type and values to a string.
  * @param {object} color - Decomposed color
@@ -6098,7 +6028,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 +6036,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 +6043,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 +6065,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 +6085,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 +6094,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 +6108,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 +6130,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 +6153,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 +6164,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 +6183,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 +6208,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 +6220,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 +6241,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 +6471,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 +6484,6 @@ function addLightOrDark(intent, direction, shade, tonalOffset) {
     }
   }
 }
-
 function getDefaultPrimary(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -6579,14 +6492,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 +6506,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 +6520,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 +6534,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 +6548,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 +6562,6 @@ function getDefaultWarning(mode = 'light') {
       dark: orange$1[700]
     };
   }
-
   return {
     main: '#ed6c02',
     // closest to orange[800] that pass 3:1.
@@ -6667,30 +6569,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 +6598,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 +6675,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 +6717,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 +6743,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 +6770,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 +6787,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 +6835,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 +6859,6 @@ function createTheme(options = {}, ...args) {
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-
   return muiTheme;
 }
 
@@ -6994,7 +6867,6 @@ var defaultTheme$1 = defaultTheme;
 
 function useTheme$1() {
   const theme = useTheme$2(defaultTheme$1);
-
   return theme;
 }
 
@@ -7354,7 +7226,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "8857" ;
+const NEBULA_VERSION_HASH = "de86" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -7872,7 +7744,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.2" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
@@ -20051,7 +19923,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.1
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -20091,6 +19963,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 +20003,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;