@nebula.js/stardust 3.0.0-alpha4 → 3.0.0-rc.1

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.0.0-alpha4
+* @nebula.js/stardust v3.0.0-rc.1
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -9,7 +9,7 @@ import React__default, { Children, isValidElement, cloneElement, useState as use
 import ReactDOM from 'react-dom';
 import emStyled from '@emotion/styled';
 import { CacheProvider, Global, ThemeContext as ThemeContext$1, keyframes } from '@emotion/react';
-import { Checkbox, Radio, Grid, FormControlLabel, Typography, 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, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Box, Icon, CircularProgress, Paper } from '@mui/material';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -4939,7 +4939,7 @@ function GlobalStyles(props) {
   });
 }
 
-/** @license MUI v5.8.0
+/** @license MUI v5.8.7
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5308,11 +5308,11 @@ function composeClasses(slots, getUtilityClass, classes) {
   slot => {
     output[slot] = slots[slot].reduce((acc, key) => {
       if (key) {
+        acc.push(getUtilityClass(key));
+
         if (classes && classes[key]) {
           acc.push(classes[key]);
         }
-
-        acc.push(getUtilityClass(key));
       }
 
       return acc;
@@ -5344,26 +5344,26 @@ const createClassNameGenerator = () => {
 const ClassNameGenerator = createClassNameGenerator();
 
 const globalStateClassesMapping = {
-  active: 'Mui-active',
-  checked: 'Mui-checked',
-  completed: 'Mui-completed',
-  disabled: 'Mui-disabled',
-  error: 'Mui-error',
-  expanded: 'Mui-expanded',
-  focused: 'Mui-focused',
-  focusVisible: 'Mui-focusVisible',
-  required: 'Mui-required',
-  selected: 'Mui-selected'
+  active: 'active',
+  checked: 'checked',
+  completed: 'completed',
+  disabled: 'disabled',
+  error: 'error',
+  expanded: 'expanded',
+  focused: 'focused',
+  focusVisible: 'focusVisible',
+  required: 'required',
+  selected: 'selected'
 };
-function generateUtilityClass(componentName, slot) {
+function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
   const globalStateClass = globalStateClassesMapping[slot];
-  return globalStateClass || `${ClassNameGenerator.generate(componentName)}-${slot}`;
+  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
 }
 
-function generateUtilityClasses(componentName, slots) {
+function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
   const result = {};
   slots.forEach(slot => {
-    result[slot] = generateUtilityClass(componentName, slot);
+    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
   });
   return result;
 }
@@ -5433,7 +5433,7 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
 function createEmptyBreakpointObject(breakpointsInput = {}) {
   var _breakpointsInput$key;
 
-  const breakpointsInOrder = breakpointsInput == null ? void 0 : (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+  const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
     return acc;
@@ -6104,7 +6104,7 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
     } = props || {};
 
     if (!sx) {
-      return null; // emotion & styled-components will neglect null
+      return null; // Emotion & styled-components will neglect null
     }
     /*
      * Receive `sxInput` as object or callback
@@ -6169,7 +6169,7 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 
-const _excluded$i = ["sx"];
+const _excluded$j = ["sx"];
 
 const splitProps = props => {
   const result = {
@@ -6190,7 +6190,7 @@ function extendSxProp(props) {
   const {
     sx: inSx
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$i);
+        other = _objectWithoutPropertiesLoose(props, _excluded$j);
 
   const {
     systemProps,
@@ -6219,48 +6219,9 @@ function extendSxProp(props) {
   });
 }
 
-function toVal(mix) {
-	var k, y, str='';
+function r$1(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$1(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$1(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$1(e))&&(n&&(n+=" "),n+=t);return n}
 
-	if (typeof mix === 'string' || typeof mix === 'number') {
-		str += mix;
-	} else if (typeof mix === 'object') {
-		if (Array.isArray(mix)) {
-			for (k=0; k < mix.length; k++) {
-				if (mix[k]) {
-					if (y = toVal(mix[k])) {
-						str && (str += ' ');
-						str += y;
-					}
-				}
-			}
-		} else {
-			for (k in mix) {
-				if (mix[k]) {
-					str && (str += ' ');
-					str += k;
-				}
-			}
-		}
-	}
-
-	return str;
-}
-
-function clsx () {
-	var i=0, tmp, x, str='';
-	while (i < arguments.length) {
-		if (tmp = arguments[i++]) {
-			if (x = toVal(tmp)) {
-				str && (str += ' ');
-				str += x;
-			}
-		}
-	}
-	return str;
-}
-
-const _excluded$h = ["values", "unit", "step"];
+const _excluded$i = ["values", "unit", "step"];
 
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -6296,7 +6257,7 @@ function createBreakpoints(breakpoints) {
     unit = 'px',
     step = 5
   } = breakpoints,
-        other = _objectWithoutPropertiesLoose(breakpoints, _excluded$h);
+        other = _objectWithoutPropertiesLoose(breakpoints, _excluded$i);
 
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
@@ -6382,7 +6343,7 @@ function createSpacing(spacingInput = 8) {
   return spacing;
 }
 
-const _excluded$g = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$h = ["breakpoints", "palette", "spacing", "shape"];
 
 function createTheme$1(options = {}, ...args) {
   const {
@@ -6391,7 +6352,7 @@ function createTheme$1(options = {}, ...args) {
     spacing: spacingInput,
     shape: shapeInput = {}
   } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded$g);
+        other = _objectWithoutPropertiesLoose(options, _excluded$h);
 
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
@@ -6474,7 +6435,7 @@ function useTheme$2(defaultTheme = systemDefaultTheme$1) {
   return useTheme$3(defaultTheme);
 }
 
-const _excluded$f = ["className", "component"];
+const _excluded$g = ["className", "component"];
 function createBox(options = {}) {
   const {
     defaultTheme,
@@ -6491,12 +6452,12 @@ function createBox(options = {}) {
       className,
       component = 'div'
     } = _extendSxProp,
-          other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$f);
+          other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$g);
 
     return /*#__PURE__*/jsxRuntime.exports.jsx(BoxRoot, _extends$1({
       as: component,
       ref: ref,
-      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
+      className: clsx$1(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
       theme: theme
     }, other));
   });
@@ -6505,7 +6466,7 @@ function createBox(options = {}) {
 
 createBox();
 
-const _excluded$e = ["variant"];
+const _excluded$f = ["variant"];
 
 function isEmpty$2(string) {
   return string.length === 0;
@@ -6521,7 +6482,7 @@ function propsToClassKey(props) {
   const {
     variant
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$e);
+        other = _objectWithoutPropertiesLoose(props, _excluded$f);
 
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
@@ -6534,7 +6495,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$d = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+const _excluded$e = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
       _excluded2$3 = ["theme"],
       _excluded3 = ["theme"];
 
@@ -6613,7 +6574,7 @@ function createStyled(input = {}) {
       skipSx: inputSkipSx,
       overridesResolver
     } = inputOptions,
-          options = _objectWithoutPropertiesLoose(inputOptions, _excluded$d); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+          options = _objectWithoutPropertiesLoose(inputOptions, _excluded$e); // 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;
@@ -6636,7 +6597,7 @@ function createStyled(input = {}) {
 
     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
+        // 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.
         // eslint-disable-next-line no-underscore-dangle
@@ -6695,7 +6656,7 @@ function createStyled(input = {}) {
 
         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.
       // eslint-disable-next-line no-underscore-dangle
@@ -6791,7 +6752,7 @@ function hexToRgb(color) {
  * Returns an object with the type and values of a color.
  *
  * Note: Does not support rgb % values.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @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[]}
  */
 
@@ -6841,7 +6802,7 @@ function decomposeColor(color) {
 /**
  * Returns a channel created from the input color.
  *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
  */
 
@@ -6852,7 +6813,7 @@ const colorChannel = color => {
 /**
  * Converts a color object with type and values to a string.
  * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */
@@ -7019,6 +6980,17 @@ function lighten(color, coefficient) {
 
   return recomposeColor(color);
 }
+/**
+ * Darken or lighten a color, depending on its luminance.
+ * Light colors are darkened, dark colors are lightened.
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
+ * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+
+function emphasize(color, coefficient = 0.15) {
+  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+}
 
 function InnerThemeProvider(props) {
   const theme = useTheme$2();
@@ -7135,13 +7107,9 @@ const getCssValue = (keys, value) => {
  * @param {Object} theme
  * @param {{
  *  prefix?: string,
- *  basePrefix?: string,
  *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
  * }} options.
- *  `basePrefix`: defined by design system.
- *  `prefix`: defined by application
- *
- *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
  * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
  *
@@ -7152,16 +7120,15 @@ const getCssValue = (keys, value) => {
  *   palette: { primary: { 500: 'var(--color)' } }
  * }, { prefix: 'foo' })
  *
- * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
- * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 
 
 function cssVarsParser(theme, options) {
   const {
     prefix,
-    basePrefix = '',
     shouldSkipGeneratingVar
   } = options || {};
   const css = {};
@@ -7169,16 +7136,6 @@ function cssVarsParser(theme, options) {
   const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
-      if (typeof value === 'string' && value.match(/var\(\s*--/)) {
-        // for CSS variable, apply prefix or remove basePrefix from the variable
-        if (!basePrefix && prefix) {
-          value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
-        } else {
-          value = prefix ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces
-          : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--');
-        }
-      }
-
       if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
@@ -7204,6 +7161,7 @@ const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
 const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 function getInitColorSchemeScript(options) {
   const {
+    enableColorScheme = true,
     enableSystem = false,
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
@@ -7217,13 +7175,16 @@ function getInitColorSchemeScript(options) {
     dangerouslySetInnerHTML: {
       __html: `(function() { try {
         var mode = localStorage.getItem('${modeStorageKey}');
+        var cssColorScheme = mode;
         var colorScheme = '';
         if (mode === 'system' || (!mode && !!${enableSystem})) {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {
+            cssColorScheme = 'dark';
             colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
           } else {
+            cssColorScheme = 'light';
             colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
           }
         }
@@ -7236,6 +7197,9 @@ function getInitColorSchemeScript(options) {
         if (colorScheme) {
           ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
+        if (${enableColorScheme} && !!cssColorScheme) {
+          ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme);
+        }
       } catch (e) {} })();`
     }
   });
@@ -7393,7 +7357,7 @@ function useCurrentColorScheme(options) {
   const handleMediaQuery = React.useCallback(e => {
     if (state.mode === 'system') {
       setState(currentState => _extends$1({}, currentState, {
-        systemMode: e.matches ? 'dark' : 'light'
+        systemMode: e != null && e.matches ? 'dark' : 'light'
       }));
     }
   }, [state.mode]); // Ref hack to avoid adding handleMediaQuery as a dep
@@ -7466,34 +7430,7 @@ function useCurrentColorScheme(options) {
   });
 }
 
-/**
- * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
- * and they does not need to remember the prefix (defined once).
- */
-function createGetCssVar(prefix = '') {
-  function appendVar(...vars) {
-    if (!vars.length) {
-      return '';
-    }
-
-    const value = vars[0];
-
-    if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
-      return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
-    }
-
-    return `, ${value}`;
-  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
-
-
-  const getCssVar = (field, ...vars) => {
-    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
-  };
-
-  return getCssVar;
-}
-
-const _excluded$c = ["colorSchemes", "components"];
+const _excluded$d = ["colorSchemes", "components", "cssVarPrefix"];
 const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 function createCssVarsProvider(options) {
   const {
@@ -7505,8 +7442,7 @@ function createCssVarsProvider(options) {
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
     enableColorScheme: designSystemEnableColorScheme = true,
-    prefix: designSystemPrefix = '',
-    shouldSkipGeneratingVar,
+    shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme
   } = options;
 
@@ -7529,7 +7465,6 @@ function createCssVarsProvider(options) {
   function CssVarsProvider({
     children,
     theme: themeProp = defaultTheme,
-    prefix = designSystemPrefix,
     modeStorageKey = defaultModeStorageKey,
     colorSchemeStorageKey = defaultColorSchemeStorageKey,
     attribute = defaultAttribute,
@@ -7540,15 +7475,17 @@ function createCssVarsProvider(options) {
     storageWindow = typeof window === 'undefined' ? undefined : window,
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-    colorSchemeSelector = ':root'
+    colorSchemeSelector = ':root',
+    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
   }) {
     const hasMounted = React.useRef(false);
 
     const {
       colorSchemes = {},
-      components = {}
+      components = {},
+      cssVarPrefix
     } = themeProp,
-          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$c);
+          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$d);
 
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -7591,16 +7528,14 @@ function createCssVarsProvider(options) {
       vars: rootVars,
       parsedTheme
     } = cssVarsParser(theme, {
-      prefix,
-      basePrefix: designSystemPrefix,
+      prefix: cssVarPrefix,
       shouldSkipGeneratingVar
     });
     theme = _extends$1({}, parsedTheme, {
       components,
       colorSchemes,
-      prefix,
+      cssVarPrefix,
       vars: rootVars,
-      getCssVar: createGetCssVar(prefix),
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
     });
     const defaultColorSchemeStyleSheet = {};
@@ -7611,8 +7546,7 @@ function createCssVarsProvider(options) {
         vars,
         parsedTheme: parsedScheme
       } = cssVarsParser(scheme, {
-        prefix,
-        basePrefix: designSystemPrefix,
+        prefix: cssVarPrefix,
         shouldSkipGeneratingVar
       });
       theme.vars = deepmerge(theme.vars, vars);
@@ -7640,7 +7574,7 @@ function createCssVarsProvider(options) {
       })();
 
       if (key === resolvedDefaultColorScheme) {
-        defaultColorSchemeStyleSheet[colorSchemeSelector] = css;
+        defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
       } else {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
@@ -7722,7 +7656,8 @@ function createCssVarsProvider(options) {
   const getInitColorSchemeScript$1 = params => getInitColorSchemeScript(_extends$1({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    modeStorageKey: defaultModeStorageKey
+    modeStorageKey: defaultModeStorageKey,
+    enableColorScheme: designSystemEnableColorScheme
   }, params));
 
   return {
@@ -7732,9 +7667,36 @@ function createCssVarsProvider(options) {
   };
 }
 
-const _excluded$b = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
-const defaultTheme$2 = createTheme$1();
-const defaultCreateStyledComponent = styled$1('div', {
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+function createGetCssVar$1(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    const value = vars[0];
+
+    if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
+      return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
+    }
+
+    return `, ${value}`;
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+  const getCssVar = (field, ...fallbacks) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;
+  };
+
+  return getCssVar;
+}
+
+const _excluded$c = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+const defaultTheme$3 = createTheme$1();
+const defaultCreateStyledComponent$1 = styled$1('div', {
   name: 'MuiContainer',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -7745,10 +7707,10 @@ const defaultCreateStyledComponent = styled$1('div', {
   }
 });
 
-const useThemePropsDefault = inProps => useThemeProps$1({
+const useThemePropsDefault$1 = inProps => useThemeProps$1({
   props: inProps,
   name: 'MuiContainer',
-  defaultTheme: defaultTheme$2
+  defaultTheme: defaultTheme$3
 });
 
 const useUtilityClasses$1 = (ownerState, componentName) => {
@@ -7771,8 +7733,8 @@ const useUtilityClasses$1 = (ownerState, componentName) => {
 function createContainer(options = {}) {
   const {
     // This will allow adding custom styled fn (for example for custom sx style function)
-    createStyledComponent = defaultCreateStyledComponent,
-    useThemeProps = useThemePropsDefault,
+    createStyledComponent = defaultCreateStyledComponent$1,
+    useThemeProps = useThemePropsDefault$1,
     componentName = 'MuiContainer'
   } = options;
   const ContainerRoot = createStyledComponent(({
@@ -7834,7 +7796,7 @@ function createContainer(options = {}) {
       fixed = false,
       maxWidth = 'lg'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$b);
+          other = _objectWithoutPropertiesLoose(props, _excluded$c);
 
     const ownerState = _extends$1({}, props, {
       component,
@@ -7852,7 +7814,7 @@ function createContainer(options = {}) {
         as: component // @ts-ignore module augmentation fails if custom breakpoints are used
         ,
         ownerState: ownerState,
-        className: clsx(classes.root, className),
+        className: clsx$1(classes.root, className),
         ref: ref
       }, other))
     );
@@ -7876,6 +7838,404 @@ createContainer();
 
 generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
 
+const traverseBreakpoints = (breakpoints, responsize, iterator) => {
+  const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
+
+  if (Array.isArray(responsize)) {
+    responsize.forEach((breakpointValue, index) => {
+      iterator((responsizeStyles, style) => {
+        if (index <= breakpoints.keys.length - 1) {
+          if (index === 0) {
+            Object.assign(responsizeStyles, style);
+          } else {
+            responsizeStyles[breakpoints.up(breakpoints.keys[index])] = style;
+          }
+        }
+      }, breakpointValue);
+    });
+  } else if (responsize && typeof responsize === 'object') {
+    // prevent null
+    // responsize could be a very big object, pick the smallest responsive values
+    const keys = Object.keys(responsize).length > breakpoints.keys.length ? breakpoints.keys : Object.keys(responsize);
+    keys.forEach(key => {
+      if (breakpoints.keys.indexOf(key) !== -1) {
+        // @ts-ignore already checked that responsize is an object
+        const breakpointValue = responsize[key];
+
+        if (breakpointValue !== undefined) {
+          iterator((responsizeStyles, style) => {
+            if (smallestBreakpoint === key) {
+              Object.assign(responsizeStyles, style);
+            } else {
+              responsizeStyles[breakpoints.up(key)] = style;
+            }
+          }, breakpointValue);
+        }
+      }
+    });
+  } else if (typeof responsize === 'number' || typeof responsize === 'string') {
+    iterator((responsizeStyles, style) => {
+      Object.assign(responsizeStyles, style);
+    }, responsize);
+  }
+};
+const generateGridSizeStyles = ({
+  theme,
+  ownerState
+}) => {
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
+    let style = {};
+
+    if (value === true) {
+      style = {
+        flexBasis: 0,
+        flexGrow: 1,
+        maxWidth: '100%'
+      };
+    }
+
+    if (value === 'auto') {
+      style = {
+        flexBasis: 'auto',
+        flexGrow: 0,
+        flexShrink: 0,
+        maxWidth: 'none',
+        width: 'auto'
+      };
+    }
+
+    if (typeof value === 'number') {
+      style = {
+        flexGrow: 0,
+        flexBasis: 'auto',
+        width: `calc(100% * ${value} / var(--Grid-columns)${ownerState.nested && ownerState.container ? ` + var(--Grid-columnSpacing)` : ''})`
+      };
+    }
+
+    appendStyle(styles, style);
+  });
+  return styles;
+};
+const generateGridOffsetStyles = ({
+  theme,
+  ownerState
+}) => {
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
+    let style = {};
+
+    if (value === 'auto') {
+      style = {
+        marginLeft: 'auto'
+      };
+    }
+
+    if (typeof value === 'number') {
+      style = {
+        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(--Grid-columns))`
+      };
+    }
+
+    appendStyle(styles, style);
+  });
+  return styles;
+};
+const generateGridColumnsStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+
+  const styles = {
+    '--Grid-columns': 12
+  };
+  traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
+    appendStyle(styles, {
+      '--Grid-columns': value
+    });
+  });
+  return styles;
+};
+const generateGridRowSpacingStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+    var _theme$spacing;
+
+    appendStyle(styles, {
+      '--Grid-rowSpacing': typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
+    });
+  });
+  return styles;
+};
+const generateGridColumnSpacingStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+    var _theme$spacing2;
+
+    appendStyle(styles, {
+      '--Grid-columnSpacing': typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
+    });
+  });
+  return styles;
+};
+const generateGridDirectionStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
+    appendStyle(styles, {
+      flexDirection: value
+    });
+  });
+  return styles;
+};
+const generateGridStyles = ({
+  ownerState
+}) => {
+  return _extends$1({
+    minWidth: 0,
+    boxSizing: 'border-box'
+  }, ownerState.container ? _extends$1({
+    display: 'flex',
+    flexWrap: 'wrap'
+  }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
+    flexWrap: ownerState.wrap
+  }, {
+    margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`
+  }, ownerState.disableEqualOverflow && {
+    margin: `calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)`
+  }, ownerState.nested ? _extends$1({
+    padding: `calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)`
+  }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
+    padding: `calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))`
+  }) : {
+    '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
+    '--Grid-nested-columnSpacing': 'var(--Grid-columnSpacing)'
+  }) : _extends$1({
+    padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`
+  }, ownerState.disableEqualOverflow && {
+    padding: `calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))`
+  }));
+};
+const generateSizeClassNames = gridSize => {
+  const classNames = [];
+  Object.entries(gridSize).forEach(([key, value]) => {
+    if (value !== false && value !== undefined) {
+      classNames.push(`grid-${key}-${String(value)}`);
+    }
+  });
+  return classNames;
+};
+const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
+  function isValidSpacing(val) {
+    if (val === undefined) {
+      return false;
+    }
+
+    return typeof val === 'string' && !Number.isNaN(Number(val)) || typeof val === 'number' && val > 0;
+  }
+
+  if (isValidSpacing(spacing)) {
+    return [`spacing-${smallestBreakpoint}-${String(spacing)}`];
+  }
+
+  if (typeof spacing === 'object' && !Array.isArray(spacing)) {
+    const classNames = [];
+    Object.entries(spacing).forEach(([key, value]) => {
+      if (isValidSpacing(value)) {
+        classNames.push(`spacing-${key}-${String(value)}`);
+      }
+    });
+    return classNames;
+  }
+
+  return [];
+};
+
+const _excluded$b = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
+const defaultTheme$2 = createTheme$1(); // widening Theme to any so that the consumer can own the theme structure.
+
+const defaultCreateStyledComponent = styled$1('div', {
+  name: 'MuiGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+});
+
+function useThemePropsDefault(props) {
+  return useThemeProps$1({
+    props,
+    name: 'MuiGrid',
+    defaultTheme: defaultTheme$2
+  });
+}
+
+function createGrid(options = {}) {
+  const {
+    // This will allow adding custom styled fn (for example for custom sx style function)
+    createStyledComponent = defaultCreateStyledComponent,
+    useThemeProps = useThemePropsDefault,
+    componentName = 'MuiGrid'
+  } = options;
+  const NestedContext = /*#__PURE__*/React.createContext(false);
+  const OverflowContext = /*#__PURE__*/React.createContext(undefined);
+
+  const useUtilityClasses = (ownerState, theme) => {
+    const {
+      container,
+      direction,
+      spacing,
+      wrap,
+      gridSize
+    } = ownerState;
+    const slots = {
+      root: ['root', container && 'container', direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
+    };
+    return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
+  };
+
+  const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
+  const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
+    var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin, _ref3, _disableEqualOverflow;
+
+    const theme = useTheme$2();
+    const themeProps = useThemeProps(inProps);
+    const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+
+    const nested = React.useContext(NestedContext);
+    const overflow = React.useContext(OverflowContext);
+
+    const {
+      className,
+      columns: columnsProp = 12,
+      container = false,
+      component = 'div',
+      direction = 'row',
+      wrap = 'wrap',
+      spacing: spacingProp = 0,
+      rowSpacing: rowSpacingProp = spacingProp,
+      columnSpacing: columnSpacingProp = spacingProp,
+      disableEqualOverflow: themeDisableEqualOverflow
+    } = props,
+          rest = _objectWithoutPropertiesLoose(props, _excluded$b); // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
+
+
+    let disableEqualOverflow = themeDisableEqualOverflow;
+
+    if (nested && themeDisableEqualOverflow !== undefined) {
+      disableEqualOverflow = inProps.disableEqualOverflow;
+    } // collect breakpoints related props because they can be customized from the theme.
+
+
+    const gridSize = {};
+    const gridOffset = {};
+    const other = {};
+    Object.entries(rest).forEach(([key, val]) => {
+      if (theme.breakpoints.values[key] !== undefined) {
+        gridSize[key] = val;
+      } else if (theme.breakpoints.values[key.replace('Offset', '')] !== undefined) {
+        gridOffset[key.replace('Offset', '')] = val;
+      } else {
+        other[key] = val;
+      }
+    });
+    const columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : nested ? undefined : columnsProp;
+    const spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : nested ? undefined : spacingProp;
+    const rowSpacing = (_ref = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref : nested ? undefined : rowSpacingProp;
+    const columnSpacing = (_ref2 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref2 : nested ? undefined : columnSpacingProp;
+
+    const ownerState = _extends$1({}, props, {
+      nested,
+      columns,
+      container,
+      direction,
+      wrap,
+      spacing,
+      rowSpacing,
+      columnSpacing,
+      gridSize,
+      gridOffset,
+      disableEqualOverflow: (_ref3 = (_disableEqualOverflow = disableEqualOverflow) != null ? _disableEqualOverflow : overflow) != null ? _ref3 : false,
+      // use context value if exists.
+      parentDisableEqualOverflow: overflow // for nested grid
+
+    });
+
+    const classes = useUtilityClasses(ownerState, theme);
+
+    let result = /*#__PURE__*/jsxRuntime.exports.jsx(GridRoot, _extends$1({
+      ref: ref,
+      as: component,
+      ownerState: ownerState,
+      className: clsx$1(classes.root, className)
+    }, other));
+
+    if (!nested) {
+      result = /*#__PURE__*/jsxRuntime.exports.jsx(NestedContext.Provider, {
+        value: true,
+        children: result
+      });
+    }
+
+    if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
+      // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
+      // 1. It is the root grid with `disableEqualOverflow`.
+      // 2. It is a nested grid with different `disableEqualOverflow` from the context.
+      result = /*#__PURE__*/jsxRuntime.exports.jsx(OverflowContext.Provider, {
+        value: disableEqualOverflow,
+        children: result
+      });
+    }
+
+    return result;
+  });
+  return Grid;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
+ *
+ * API:
+ *
+ * - [Grid API](https://mui.com/system/api/grid/)
+ */
+
+createGrid();
+
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
+const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+generateUtilityClasses('MuiGrid', ['root', 'container', 'item', // spacings
+...SPACINGS.map(spacing => `spacing-xs-${spacing}`), // direction values
+...DIRECTIONS.map(direction => `direction-xs-${direction}`), // wrap values
+...WRAPS.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints
+...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
+
 const _excluded$a = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
       _excluded2$2 = ["type", "mode"];
 function adaptV4Theme(inputTheme) {
@@ -7980,6 +8340,8 @@ MenuUnstyledContext.displayName = 'MenuUnstyledContext';
 
 generateUtilityClasses('MuiMenuUnstyled', ['root', 'listbox', 'expanded']);
 
+generateUtilityClasses('MuiPopperUnstyled', ['root']);
+
 generateUtilityClasses('MuiMenuItemUnstyled', ['root', 'disabled', 'focusVisible']);
 
 generateUtilityClasses('MuiModal', ['root', 'hidden']);
@@ -8618,6 +8980,10 @@ function createTheme(options = {}, ...args) {
   } = options,
         other = _objectWithoutPropertiesLoose(options, _excluded$6);
 
+  if (options.vars) {
+    throw new Error(formatMuiErrorMessage(18));
+  }
+
   const palette = createPalette(paletteInput);
   const systemTheme = createTheme$1(options);
   let muiTheme = deepmerge(systemTheme, {
@@ -8660,6 +9026,8 @@ const styled = createStyled({
   rootShouldForwardProp
 });
 
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
 generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
 const getOverlayAlpha = elevation => {
@@ -8706,7 +9074,7 @@ styled('div', {
   }));
 });
 
-const _excluded$5 = ["colorSchemes"],
+const _excluded$5 = ["colorSchemes", "cssVarPrefix"],
       _excluded2$1 = ["palette"];
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
@@ -8716,14 +9084,31 @@ const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   const overlay = getOverlayAlpha(index);
   return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
 });
+
+function assignNode(obj, keys) {
+  keys.forEach(k => {
+    if (!obj[k]) {
+      obj[k] = {};
+    }
+  });
+}
+
+function setColor(obj, key, defaultValue) {
+  obj[key] = obj[key] || defaultValue;
+}
+
+const createGetCssVar = (cssVarPrefix = 'mui') => createGetCssVar$1(cssVarPrefix);
 function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
   const {
-    colorSchemes: colorSchemesInput = {}
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui'
   } = options,
         input = _objectWithoutPropertiesLoose(options, _excluded$5);
 
+  const getCssVar = createGetCssVar(cssVarPrefix);
+
   const _createThemeWithoutVa = createTheme(_extends$1({}, input, colorSchemesInput.light && {
     palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
   })),
@@ -8741,20 +9126,26 @@ function extendTheme(options = {}, ...args) {
   });
 
   let theme = _extends$1({}, muiTheme, {
+    cssVarPrefix,
+    getCssVar,
     colorSchemes: _extends$1({}, colorSchemesInput, {
       light: _extends$1({}, colorSchemesInput.light, {
         palette: lightPalette,
         opacity: _extends$1({
-          placeholder: 0.42,
-          inputTouchBottomLine: 0.42
+          inputPlaceholder: 0.42,
+          inputUnderline: 0.42,
+          switchTrackDisabled: 0.12,
+          switchTrack: 0.38
         }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
         overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
       }),
       dark: _extends$1({}, colorSchemesInput.dark, {
         palette: darkPalette,
         opacity: _extends$1({
-          placeholder: 0.5,
-          inputTouchBottomLine: 0.7
+          inputPlaceholder: 0.5,
+          inputUnderline: 0.7,
+          switchTrackDisabled: 0.2,
+          switchTrack: 0.3
         }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
         overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
       })
@@ -8764,23 +9155,142 @@ function extendTheme(options = {}, ...args) {
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
 
-    if (key === 'dark') {
-      palette.common.background = palette.common.background || '#000';
-      palette.common.onBackground = palette.common.onBackground || '#fff';
+    if (key === 'light') {
+      setColor(palette.common, 'background', '#fff');
+      setColor(palette.common, 'onBackground', '#000');
+    } else {
+      setColor(palette.common, 'background', '#000');
+      setColor(palette.common, 'onBackground', '#fff');
+    } // assign component variables
+
+
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+
+    if (key === 'light') {
+      setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
+      setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
+      setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
+      setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
+      setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
+      setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));
+      setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
+      setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
+      const snackbarContentBackground = emphasize(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
+      setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
     } else {
-      palette.common.background = palette.common.background || '#fff';
-      palette.common.onBackground = palette.common.onBackground || '#000';
+      setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
+      setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
+      setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
+      setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
+      setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
+      setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
+      setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
+
+      setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
+
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));
+      setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
+      setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
+      const snackbarContentBackground = emphasize(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
+      setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
     }
 
     palette.common.backgroundChannel = colorChannel(palette.common.background);
     palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
-    palette.dividerChannel = colorChannel(palette.divider); // special token for Tooltip
-    // TODO: consider adding `main`, and `light` to palette.grey to make it consistent.
-
-    if (!palette.grey.dark) {
-      palette.grey.dark = palette.grey[700];
-    }
-
+    palette.dividerChannel = colorChannel(palette.divider);
     Object.keys(palette).forEach(color => {
       const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
@@ -8807,18 +9317,28 @@ function extendTheme(options = {}, ...args) {
 
       if (colors.secondary) {
         palette[color].secondaryChannel = colorChannel(colors.secondary);
-      } // Action colors: action.activeChannel
+      } // Action colors: action.active, action.selected
 
 
       if (colors.active) {
         palette[color].activeChannel = colorChannel(colors.active);
       }
+
+      if (colors.selected) {
+        palette[color].selectedChannel = colorChannel(colors.selected);
+      }
     });
   });
   theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
   return theme;
 }
 
+const shouldSkipGeneratingVar = keys => {
+  var _keys$;
+
+  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+};
+
 const defaultTheme = extendTheme();
 createCssVarsProvider({
   theme: defaultTheme,
@@ -8829,7 +9349,6 @@ createCssVarsProvider({
     light: 'light',
     dark: 'dark'
   },
-  prefix: 'md',
   resolveTheme: theme => {
     const newTheme = _extends$1({}, theme, {
       typography: createTypography(theme.palette, theme.typography)
@@ -8837,7 +9356,7 @@ createCssVarsProvider({
 
     return newTheme;
   },
-  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+  shouldSkipGeneratingVar
 });
 
 function _setPrototypeOf(o, p) {
@@ -8903,6 +9422,10 @@ var config = {
 
 var TransitionGroupContext = React__default.createContext(null);
 
+var forceReflow = function forceReflow(node) {
+  return node.scrollTop;
+};
+
 var UNMOUNTED = 'unmounted';
 var EXITED = 'exited';
 var ENTERING = 'entering';
@@ -9122,6 +9645,14 @@ var Transition = /*#__PURE__*/function (_React$Component) {
       this.cancelNextCallback();
 
       if (nextStatus === ENTERING) {
+        if (this.props.unmountOnExit || this.props.mountOnEnter) {
+          var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
+          // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
+          // To make the animation happen,  we have to separate each rendering and avoid being processed as batched.
+
+          if (node) forceReflow(node);
+        }
+
         this.performEnter(mounting);
       } else {
         this.performExit();
@@ -9544,8 +10075,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
 
 
     if (phase === 'active') {
-      /* eslint-disable no-unused-expressions */
-      node && node.scrollTop;
+      if (node) forceReflow(node);
     }
 
     if (className) {
@@ -10493,7 +11023,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       const {
         clientX,
         clientY
-      } = event.touches ? event.touches[0] : event;
+      } = event.touches && event.touches.length > 0 ? event.touches[0] : event;
       rippleX = Math.round(clientX - rect.left);
       rippleY = Math.round(clientY - rect.top);
     }
@@ -10579,7 +11109,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     stop
   }), [pulsate, start, stop]);
   return /*#__PURE__*/jsxRuntime.exports.jsx(TouchRippleRoot, _extends$1({
-    className: clsx(classes.root, touchRippleClasses.root, className),
+    className: clsx(touchRippleClasses.root, classes.root, className),
     ref: container
   }, other, {
     children: /*#__PURE__*/jsxRuntime.exports.jsx(TransitionGroup, {
@@ -10923,7 +11453,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
   }));
 });
 
-const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
 
 const commonIconStyles = ownerState => _extends$1({}, ownerState.size === 'small' && {
   '& > *:nth-of-type(1)': {
@@ -11424,7 +11954,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "2842" ;
+const NEBULA_VERSION_HASH = "f2d4" ;
 ClassNameGenerator.configure(componentName => {
 
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
@@ -11997,7 +12527,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "3.0.0-alpha4" );
+  element.setAttribute('data-nebulajs-version', "3.0.0-rc.1" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
@@ -14249,8 +14779,8 @@ const MINIMUM_BATCH_SIZE = 100;
 const classes$9 = {
   styledScrollbars: "".concat(PREFIX$9, "-styledScrollbars")
 };
-const StyledInfiniteLoader = styled(InfiniteLoader)(() => ({
-  ["& .".concat(classes$9.styledScrollbars)]: {
+const StyledFixedSizeList = styled(FixedSizeList)(() => ({
+  ["&.".concat(classes$9.styledScrollbars)]: {
     scrollbarColor: "".concat(scrollBarThumb, " ").concat(scrollBarBackground),
     '&::-webkit-scrollbar': {
       width: 10,
@@ -14276,13 +14806,14 @@ function getSizeInfo(_ref) {
     dense,
     height
   } = _ref;
+  const sizeHorizontal = 200;
   let sizeVertical = checkboxes ? 40 : 33;
 
   if (dense) {
     sizeVertical = 20;
   }
 
-  const itemSize = isVertical ? sizeVertical : 200;
+  const itemSize = isVertical ? sizeVertical : sizeHorizontal;
   const listHeight = height || 8 * itemSize;
   return {
     itemSize,
@@ -14367,13 +14898,22 @@ function ListBox(_ref2) {
     setIsLoadingData(true);
     return new Promise(resolve => {
       local.current.timeout = setTimeout(() => {
-        const sorted = local.current.queue.slice(-2).sort((a, b) => a.start - b.start);
-        const reqPromise = model.getListObjectData('/qListObjectDef', sorted.map(s => ({
-          qTop: s.start,
-          qHeight: s.stop - s.start + 1,
+        const lastItemInQueue = local.current.queue.slice(-1)[0];
+        const reqPromise = model.getListObjectData('/qListObjectDef', // we need to ask for two payloads
+        // 2nd one is our starting index + MINIMUM_BATCH_SIZE items
+        // 1st one is 2nd ones starting index - MINIMUM_BATCH_SIZE items
+        // we do this because we don't want to miss any items between fast scrolls
+        [{
+          qTop: lastItemInQueue.start > MINIMUM_BATCH_SIZE ? lastItemInQueue.start - MINIMUM_BATCH_SIZE : 0,
+          qHeight: MINIMUM_BATCH_SIZE,
+          qLeft: 0,
+          qWidth: 1
+        }, {
+          qTop: lastItemInQueue.start,
+          qHeight: MINIMUM_BATCH_SIZE,
           qLeft: 0,
           qWidth: 1
-        }))).then(p => {
+        }]).then(p => {
           const processedPages = postProcessPages ? postProcessPages(p) : p;
           local.current.validPages = true;
           listData.current.pages = processedPages;
@@ -14459,9 +14999,10 @@ function ListBox(_ref2) {
   const {
     frequencyMax
   } = layout;
-  return /*#__PURE__*/React__default.createElement(StyledInfiniteLoader, {
+  return /*#__PURE__*/React__default.createElement(InfiniteLoader, {
     isItemLoaded: isItemLoaded,
-    itemCount: count,
+    itemCount: listCount || 1 // must be more than 0 or loadMoreItems will never be called again
+    ,
     loadMoreItems: loadMoreItems,
     threshold: 0,
     minimumBatchSize: MINIMUM_BATCH_SIZE,
@@ -14472,11 +15013,10 @@ function ListBox(_ref2) {
       ref
     } = _ref3;
     local.current.listRef = ref;
-    return /*#__PURE__*/React__default.createElement(FixedSizeList, {
+    return /*#__PURE__*/React__default.createElement(StyledFixedSizeList, {
       direction: direction,
       "data-testid": "fixed-size-list",
       useIsScrolling: true,
-      style: {},
       height: listHeight,
       width: width,
       itemCount: listCount,
@@ -15098,38 +15638,57 @@ function ListBoxSearch(_ref) {
   let {
     model,
     keyboard,
-    dense = false
+    dense = false,
+    visible = true
   } = _ref;
   const {
     translator
   } = useContext(InstanceContext);
   const [value, setValue] = useState$1('');
+  const [isSearching, setIsSearching] = useState$1(false);
   const theme = useTheme$1();
 
+  const abortSearch = async () => {
+    await model.abortListObjectSearch(TREE_PATH);
+    setIsSearching(false);
+  };
+
+  useEffect$1(() => {
+    if (!visible && isSearching) {
+      abortSearch();
+    }
+  }, [visible]);
+
   const onChange = e => {
     setValue(e.target.value);
 
     if (e.target.value.length === 0) {
-      model.abortListObjectSearch(TREE_PATH);
+      abortSearch();
     } else {
       model.searchListObjectFor(TREE_PATH, e.target.value);
+      setIsSearching(true);
     }
   };
 
   const onKeyDown = e => {
     switch (e.key) {
       case 'Enter':
-        // This is disabled to "solve" QB-10955 with the lowest risk
-        // await model.acceptListObjectSearch(TREE_PATH, true);
-        // setValue('');
+        // Maybe we only want to accept if isSearching is true
+        model.acceptListObjectSearch(TREE_PATH, true);
+        setValue('');
         break;
 
       case 'Escape':
-        model.abortListObjectSearch(TREE_PATH);
+        abortSearch();
+        setValue('');
         break;
     }
   };
 
+  if (!visible) {
+    return null;
+  }
+
   return /*#__PURE__*/React__default.createElement(OutlinedInput, {
     startAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
       position: "start"
@@ -15525,7 +16084,8 @@ function ListBoxPopover(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: moreAlignTo
   }), /*#__PURE__*/React__default.createElement(ListBoxSearch, {
-    model: model
+    model: model,
+    visible: true
   }), /*#__PURE__*/React__default.createElement(ListBox, {
     model: model,
     selections: selections,
@@ -16852,7 +17412,6 @@ function ListBoxInline(_ref) {
     postProcessPages = undefined,
     calculatePagesHeight,
     showGray = true,
-    sortByState = 1,
     scrollState = undefined,
     setCount = undefined,
     shouldConfirmOnBlur = undefined
@@ -16903,7 +17462,7 @@ function ListBoxInline(_ref) {
     return [ref, setRef];
   };
 
-  const listdef = _objectSpread2({
+  const listdef = {
     qInfo: {
       qType: 'njsListbox'
     },
@@ -16919,7 +17478,7 @@ function ListBoxInline(_ref) {
       }],
       qDef: {
         qSortCriterias: [{
-          qSortByState: sortByState,
+          qSortByState: 1,
           qSortByAscii: 1,
           qSortByNumeric: 1,
           qSortByLoadOrder: 1
@@ -16927,8 +17486,8 @@ function ListBoxInline(_ref) {
       }
     },
     title
-  }, properties); // Something something lib dimension
-
+  };
+  extend$2(true, listdef, properties); // Something something lib dimension
 
   let fieldName;
 
@@ -17113,13 +17672,14 @@ function ListBoxInline(_ref) {
       onConfirm: () => {},
       onCancel: () => {}
     }
-  }))), searchVisible && /*#__PURE__*/React__default.createElement(Grid, {
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     ref: searchContainerRef
   }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
     model: model,
     dense: dense,
-    keyboard: keyboard
+    keyboard: keyboard,
+    visible: searchVisible
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
@@ -17150,7 +17710,7 @@ function ListBoxInline(_ref) {
       keyboard: keyboard,
       showGray: showGray,
       scrollState: scrollState,
-      sortByState: sortByState,
+      sortByState: listdef.qListObjectDef.qDef.qSortCriterias[0].qSortByState,
       setCount: setCount
     });
   })));
@@ -24316,7 +24876,6 @@ const mergeConfigs = (base, c) => ({
  * @property {PromiseFunction} [options.fetchStart] A function called when the Listbox starts fetching data. Receives the fetch request promise as an argument.
  * @property {ReceiverFunction} [options.update] A function which receives an update function which upon call will trigger a data fetch.
  * @property {{setScrollPos:function(number):void, initScrollPos:number}} [options.scrollState=] Object including a setScrollPos function that sets current scroll position index. A initial scroll position index.
- * @property {number=} [options.sortByState=1] Sort by state, detault 1 = sort descending, 0 = no sorting, -1 sort ascending.
  * @property {function(number):void} [options.setCount=] A function that gets called with the length of the data in the Listbox.
  * @property {boolean} [options.shouldConfirmOnBlur=] A boolean that determines if the listbox should actively confirm selections on blur events.
  */
@@ -24619,7 +25178,7 @@ function nuked() {
            * @param {boolean=} [options.toolbar=true] Show the toolbar
            * @param {boolean=} [options.checkboxes=false] Show values as checkboxes instead of as fields
            * @param {boolean=} [options.dense=false] Reduces padding and text size
-           * @param {boolean=} [options.stateName="$"] Sets the state to make selections in
+           * @param {string=} [options.stateName="$"] Sets the state to make selections in
            * @param {object=} [options.properties={}] Properties object to extend default properties with
            *
            * @since 1.1.0
@@ -24744,7 +25303,7 @@ var enigmaMocker = {exports: {}};
 var enigmaMocker_dev = {exports: {}};
 
 /*
-* @nebula.js/enigma-mocker v3.0.0-alpha3
+* @nebula.js/enigma-mocker v3.0.0-alpha13
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -24842,128 +25401,138 @@ var enigmaMocker_dev = {exports: {}};
       return target;
     }
 
-    var hasOwn = Object.prototype.hasOwnProperty;
-    var toStr = Object.prototype.toString;
-    var defineProperty = Object.defineProperty;
-    var gOPD = Object.getOwnPropertyDescriptor;
+    var extend;
+    var hasRequiredExtend;
 
-    var isArray = function isArray(arr) {
-      if (typeof Array.isArray === 'function') {
-        return Array.isArray(arr);
-      }
+    function requireExtend() {
+      if (hasRequiredExtend) return extend;
+      hasRequiredExtend = 1;
+      var hasOwn = Object.prototype.hasOwnProperty;
+      var toStr = Object.prototype.toString;
+      var defineProperty = Object.defineProperty;
+      var gOPD = Object.getOwnPropertyDescriptor;
 
-      return toStr.call(arr) === '[object Array]';
-    };
-
-    var isPlainObject = function isPlainObject(obj) {
-      if (!obj || toStr.call(obj) !== '[object Object]') {
-        return false;
-      }
+      var isArray = function isArray(arr) {
+        if (typeof Array.isArray === 'function') {
+          return Array.isArray(arr);
+        }
 
-      var hasOwnConstructor = hasOwn.call(obj, 'constructor');
-      var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf'); // Not own constructor property must be Object
+        return toStr.call(arr) === '[object Array]';
+      };
 
-      if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
-        return false;
-      } // Own properties are enumerated firstly, so to speed up,
-      // if last one is own, then all properties are own.
+      var isPlainObject = function isPlainObject(obj) {
+        if (!obj || toStr.call(obj) !== '[object Object]') {
+          return false;
+        }
 
+        var hasOwnConstructor = hasOwn.call(obj, 'constructor');
+        var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf'); // Not own constructor property must be Object
 
-      var key;
+        if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
+          return false;
+        } // Own properties are enumerated firstly, so to speed up,
+        // if last one is own, then all properties are own.
 
-      for (key in obj) {
-        /**/
-      }
 
-      return typeof key === 'undefined' || hasOwn.call(obj, key);
-    }; // If name is '__proto__', and Object.defineProperty is available, define __proto__ as an own property on target
+        var key;
 
+        for (key in obj) {
+          /**/
+        }
 
-    var setProperty = function setProperty(target, options) {
-      if (defineProperty && options.name === '__proto__') {
-        defineProperty(target, options.name, {
-          enumerable: true,
-          configurable: true,
-          value: options.newValue,
-          writable: true
-        });
-      } else {
-        target[options.name] = options.newValue;
-      }
-    }; // Return undefined instead of __proto__ if '__proto__' is not an own property
+        return typeof key === 'undefined' || hasOwn.call(obj, key);
+      }; // If name is '__proto__', and Object.defineProperty is available, define __proto__ as an own property on target
 
 
-    var getProperty = function getProperty(obj, name) {
-      if (name === '__proto__') {
-        if (!hasOwn.call(obj, name)) {
-          return void 0;
-        } else if (gOPD) {
-          // In early versions of node, obj['__proto__'] is buggy when obj has
-          // __proto__ as an own property. Object.getOwnPropertyDescriptor() works.
-          return gOPD(obj, name).value;
+      var setProperty = function setProperty(target, options) {
+        if (defineProperty && options.name === '__proto__') {
+          defineProperty(target, options.name, {
+            enumerable: true,
+            configurable: true,
+            value: options.newValue,
+            writable: true
+          });
+        } else {
+          target[options.name] = options.newValue;
         }
-      }
-
-      return obj[name];
-    };
+      }; // Return undefined instead of __proto__ if '__proto__' is not an own property
 
-    var extend = function extend() {
-      var options, name, src, copy, copyIsArray, clone;
-      var target = arguments[0];
-      var i = 1;
-      var length = arguments.length;
-      var deep = false; // Handle a deep copy situation
 
-      if (typeof target === 'boolean') {
-        deep = target;
-        target = arguments[1] || {}; // skip the boolean and the target
-
-        i = 2;
-      }
+      var getProperty = function getProperty(obj, name) {
+        if (name === '__proto__') {
+          if (!hasOwn.call(obj, name)) {
+            return void 0;
+          } else if (gOPD) {
+            // In early versions of node, obj['__proto__'] is buggy when obj has
+            // __proto__ as an own property. Object.getOwnPropertyDescriptor() works.
+            return gOPD(obj, name).value;
+          }
+        }
 
-      if (target == null || typeof target !== 'object' && typeof target !== 'function') {
-        target = {};
-      }
+        return obj[name];
+      };
 
-      for (; i < length; ++i) {
-        options = arguments[i]; // Only deal with non-null/undefined values
+      extend = function extend() {
+        var options, name, src, copy, copyIsArray, clone;
+        var target = arguments[0];
+        var i = 1;
+        var length = arguments.length;
+        var deep = false; // Handle a deep copy situation
 
-        if (options != null) {
-          // Extend the base object
-          for (name in options) {
-            src = getProperty(target, name);
-            copy = getProperty(options, name); // Prevent never-ending loop
+        if (typeof target === 'boolean') {
+          deep = target;
+          target = arguments[1] || {}; // skip the boolean and the target
 
-            if (target !== copy) {
-              // Recurse if we're merging plain objects or arrays
-              if (deep && copy && (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
-                if (copyIsArray) {
-                  copyIsArray = false;
-                  clone = src && isArray(src) ? src : [];
-                } else {
-                  clone = src && isPlainObject(src) ? src : {};
-                } // Never move original objects, clone them
+          i = 2;
+        }
 
+        if (target == null || typeof target !== 'object' && typeof target !== 'function') {
+          target = {};
+        }
 
-                setProperty(target, {
-                  name: name,
-                  newValue: extend(deep, clone, copy)
-                }); // Don't bring in undefined values
-              } else if (typeof copy !== 'undefined') {
-                setProperty(target, {
-                  name: name,
-                  newValue: copy
-                });
+        for (; i < length; ++i) {
+          options = arguments[i]; // Only deal with non-null/undefined values
+
+          if (options != null) {
+            // Extend the base object
+            for (name in options) {
+              src = getProperty(target, name);
+              copy = getProperty(options, name); // Prevent never-ending loop
+
+              if (target !== copy) {
+                // Recurse if we're merging plain objects or arrays
+                if (deep && copy && (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
+                  if (copyIsArray) {
+                    copyIsArray = false;
+                    clone = src && isArray(src) ? src : [];
+                  } else {
+                    clone = src && isPlainObject(src) ? src : {};
+                  } // Never move original objects, clone them
+
+
+                  setProperty(target, {
+                    name: name,
+                    newValue: extend(deep, clone, copy)
+                  }); // Don't bring in undefined values
+                } else if (typeof copy !== 'undefined') {
+                  setProperty(target, {
+                    name: name,
+                    newValue: copy
+                  });
+                }
               }
             }
           }
-        }
-      } // Return the modified object
+        } // Return the modified object
 
 
-      return target;
-    }; // eslint-disable-next-line no-undef
+        return target;
+      };
+
+      return extend;
+    }
 
+    var extendExports = requireExtend(); // eslint-disable-next-line no-undef
 
     const crt = globalThis.crypto || {
       getRandomValues: () => 123456
@@ -24976,7 +25545,7 @@ var enigmaMocker_dev = {exports: {}};
 
     function CreateSessionObjectMock() {
       return props => {
-        const properties = extend({}, props);
+        const properties = extendExports({}, props);
         properties.qInfo = properties.qInfo || {};
         properties.qInfo.qId = properties.qInfo.qId || "mock-".concat(uuidv4());
         const mockedInclusions = properties._mock;
@@ -24984,7 +25553,7 @@ var enigmaMocker_dev = {exports: {}};
 
         if (mockedInclusions) {
           delete properties._mock;
-          layout = extend({}, properties, mockedInclusions);
+          layout = extendExports({}, properties, mockedInclusions);
         }
 
         return Promise.resolve(_objectSpread2({