@nebula.js/stardust 3.0.0-rc.2 → 3.0.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.0.0-rc.2
+* @nebula.js/stardust v3.0.0
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -816,8 +816,8 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$6() {
+  _extends$6 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -830,10 +830,10 @@ function _extends$2() {
 
     return target;
   };
-  return _extends$2.apply(this, arguments);
+  return _extends$6.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$1(source, excluded) {
+function _objectWithoutPropertiesLoose$3(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -851,7 +851,7 @@ function _objectWithoutPropertiesLoose$1(source, excluded) {
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
 
-  var target = _objectWithoutPropertiesLoose$1(source, excluded);
+  var target = _objectWithoutPropertiesLoose$3(source, excluded);
 
   var key, i;
 
@@ -3583,8 +3583,8 @@ function deviceTypeFn(deviceType) {
   return detectTouchscreen() ? 'touch' : 'desktop';
 }
 
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$5() {
+  _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -3597,10 +3597,10 @@ function _extends$1() {
 
     return target;
   };
-  return _extends$1.apply(this, arguments);
+  return _extends$5.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _objectWithoutPropertiesLoose$2(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -4939,7 +4939,7 @@ function GlobalStyles(props) {
   });
 }
 
-/** @license MUI v5.8.7
+/** @license MUI v5.10.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -4948,7 +4948,15 @@ function styled$2(tag, options) {
   const stylesFactory = emStyled(tag, options);
 
   return stylesFactory;
-}
+} // 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
+  if (Array.isArray(tag.__emotion_styles)) {
+    tag.__emotion_styles = processor(tag.__emotion_styles);
+  }
+};
 
 function chainPropTypes(propType1, propType2) {
   {
@@ -4956,13 +4964,30 @@ function chainPropTypes(propType1, propType2) {
   }
 }
 
+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);
+}
+
 function isPlainObject(item) {
   return item !== null && typeof item === 'object' && item.constructor === Object;
 }
 function deepmerge(target, source, options = {
   clone: true
 }) {
-  const output = options.clone ? _extends$1({}, target) : target;
+  const output = options.clone ? _extends$4({}, target) : target;
 
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
@@ -5291,7 +5316,7 @@ validatorNoop.isRequired = validatorNoop;
  * @returns {object} resolved props
  */
 function resolveProps(defaultProps, props) {
-  const output = _extends$1({}, props);
+  const output = _extends$4({}, props);
 
   Object.keys(defaultProps).forEach(propName => {
     if (output[propName] === undefined) {
@@ -5368,6 +5393,23 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui')
   return result;
 }
 
+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);
+}
+
 function merge(acc, item) {
   if (!item) {
     return acc;
@@ -5452,6 +5494,66 @@ function removeUnusedBreakpoints(breakpointKeys, style) {
     return acc;
   }, style);
 }
+function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
+  const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
+  const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge(prev, next), {});
+  return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
+} // compute base for responsive values; e.g.,
+// [1,2,3] => {xs: true, sm: true, md: true}
+// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
+
+function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
+  // fixed value
+  if (typeof breakpointValues !== 'object') {
+    return {};
+  }
+
+  const base = {};
+  const breakpointsKeys = Object.keys(themeBreakpoints);
+
+  if (Array.isArray(breakpointValues)) {
+    breakpointsKeys.forEach((breakpoint, i) => {
+      if (i < breakpointValues.length) {
+        base[breakpoint] = true;
+      }
+    });
+  } else {
+    breakpointsKeys.forEach(breakpoint => {
+      if (breakpointValues[breakpoint] != null) {
+        base[breakpoint] = true;
+      }
+    });
+  }
+
+  return base;
+}
+function resolveBreakpointValues({
+  values: breakpointValues,
+  breakpoints: themeBreakpoints,
+  base: customBase
+}) {
+  const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
+  const keys = Object.keys(base);
+
+  if (keys.length === 0) {
+    return breakpointValues;
+  }
+
+  let previous;
+  return keys.reduce((acc, breakpoint, i) => {
+    if (Array.isArray(breakpointValues)) {
+      acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
+      previous = i;
+    } else if (typeof breakpointValues === 'object') {
+      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
+      previous = breakpoint;
+    } else {
+      acc[breakpoint] = breakpointValues;
+    }
+
+    return acc;
+  }, {});
+}
 
 function getPath$1(obj, path, checkVars = true) {
   if (!path || typeof path !== 'string') {
@@ -5494,7 +5596,7 @@ function getValue$2(themeMapping, transform, propValueFinal, userValue = propVal
   return value;
 }
 
-function style$1(options) {
+function style$2(options) {
   const {
     prop,
     cssProperty = options.prop,
@@ -5681,13 +5783,13 @@ function resolveCssProperty(props, keys, prop, transformer) {
   return handleBreakpoints(props, propValue, styleFromPropValue);
 }
 
-function style(props, keys) {
+function style$1(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);
+  return style$1(props, spacingKeys);
 }
 
 spacing.propTypes = {};
@@ -5701,48 +5803,48 @@ function getBorder(value) {
   return `${value}px solid`;
 }
 
-const border = style$1({
+const border = style$2({
   prop: 'border',
   themeKey: 'borders',
   transform: getBorder
 });
-const borderTop = style$1({
+const borderTop = style$2({
   prop: 'borderTop',
   themeKey: 'borders',
   transform: getBorder
 });
-const borderRight = style$1({
+const borderRight = style$2({
   prop: 'borderRight',
   themeKey: 'borders',
   transform: getBorder
 });
-const borderBottom = style$1({
+const borderBottom = style$2({
   prop: 'borderBottom',
   themeKey: 'borders',
   transform: getBorder
 });
-const borderLeft = style$1({
+const borderLeft = style$2({
   prop: 'borderLeft',
   themeKey: 'borders',
   transform: getBorder
 });
-const borderColor = style$1({
+const borderColor = style$2({
   prop: 'borderColor',
   themeKey: 'palette'
 });
-const borderTopColor = style$1({
+const borderTopColor = style$2({
   prop: 'borderTopColor',
   themeKey: 'palette'
 });
-const borderRightColor = style$1({
+const borderRightColor = style$2({
   prop: 'borderRightColor',
   themeKey: 'palette'
 });
-const borderBottomColor = style$1({
+const borderBottomColor = style$2({
   prop: 'borderBottomColor',
   themeKey: 'palette'
 });
-const borderLeftColor = style$1({
+const borderLeftColor = style$2({
   prop: 'borderLeftColor',
   themeKey: 'palette'
 });
@@ -5763,7 +5865,7 @@ borderRadius$1.propTypes = {};
 borderRadius$1.filterProps = ['borderRadius'];
 const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius$1);
 
-const displayPrint = style$1({
+const displayPrint = style$2({
   prop: 'displayPrint',
   cssProperty: false,
   transform: value => ({
@@ -5772,60 +5874,60 @@ const displayPrint = style$1({
     }
   })
 });
-const displayRaw = style$1({
+const displayRaw = style$2({
   prop: 'display'
 });
-const overflow = style$1({
+const overflow = style$2({
   prop: 'overflow'
 });
-const textOverflow = style$1({
+const textOverflow = style$2({
   prop: 'textOverflow'
 });
-const visibility = style$1({
+const visibility = style$2({
   prop: 'visibility'
 });
-const whiteSpace = style$1({
+const whiteSpace = style$2({
   prop: 'whiteSpace'
 });
 var display = compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
 
-const flexBasis = style$1({
+const flexBasis = style$2({
   prop: 'flexBasis'
 });
-const flexDirection = style$1({
+const flexDirection = style$2({
   prop: 'flexDirection'
 });
-const flexWrap = style$1({
+const flexWrap = style$2({
   prop: 'flexWrap'
 });
-const justifyContent = style$1({
+const justifyContent = style$2({
   prop: 'justifyContent'
 });
-const alignItems = style$1({
+const alignItems = style$2({
   prop: 'alignItems'
 });
-const alignContent = style$1({
+const alignContent = style$2({
   prop: 'alignContent'
 });
-const order = style$1({
+const order = style$2({
   prop: 'order'
 });
-const flex = style$1({
+const flex = style$2({
   prop: 'flex'
 });
-const flexGrow = style$1({
+const flexGrow = style$2({
   prop: 'flexGrow'
 });
-const flexShrink = style$1({
+const flexShrink = style$2({
   prop: 'flexShrink'
 });
-const alignSelf = style$1({
+const alignSelf = style$2({
   prop: 'alignSelf'
 });
-const justifyItems = style$1({
+const justifyItems = style$2({
   prop: 'justifyItems'
 });
-const justifySelf = style$1({
+const justifySelf = style$2({
   prop: 'justifySelf'
 });
 const flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
@@ -5875,72 +5977,72 @@ const rowGap = props => {
 };
 rowGap.propTypes = {};
 rowGap.filterProps = ['rowGap'];
-const gridColumn = style$1({
+const gridColumn = style$2({
   prop: 'gridColumn'
 });
-const gridRow = style$1({
+const gridRow = style$2({
   prop: 'gridRow'
 });
-const gridAutoFlow = style$1({
+const gridAutoFlow = style$2({
   prop: 'gridAutoFlow'
 });
-const gridAutoColumns = style$1({
+const gridAutoColumns = style$2({
   prop: 'gridAutoColumns'
 });
-const gridAutoRows = style$1({
+const gridAutoRows = style$2({
   prop: 'gridAutoRows'
 });
-const gridTemplateColumns = style$1({
+const gridTemplateColumns = style$2({
   prop: 'gridTemplateColumns'
 });
-const gridTemplateRows = style$1({
+const gridTemplateRows = style$2({
   prop: 'gridTemplateRows'
 });
-const gridTemplateAreas = style$1({
+const gridTemplateAreas = style$2({
   prop: 'gridTemplateAreas'
 });
-const gridArea = style$1({
+const gridArea = style$2({
   prop: 'gridArea'
 });
 const grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
 
-const color = style$1({
+const color = style$2({
   prop: 'color',
   themeKey: 'palette'
 });
-const bgcolor = style$1({
+const bgcolor = style$2({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette'
 });
-const backgroundColor = style$1({
+const backgroundColor = style$2({
   prop: 'backgroundColor',
   themeKey: 'palette'
 });
 const palette = compose(color, bgcolor, backgroundColor);
 
-const position = style$1({
+const position = style$2({
   prop: 'position'
 });
-const zIndex$1 = style$1({
+const zIndex$1 = style$2({
   prop: 'zIndex',
   themeKey: 'zIndex'
 });
-const top = style$1({
+const top = style$2({
   prop: 'top'
 });
-const right = style$1({
+const right = style$2({
   prop: 'right'
 });
-const bottom = style$1({
+const bottom = style$2({
   prop: 'bottom'
 });
-const left = style$1({
+const left = style$2({
   prop: 'left'
 });
 var positions = compose(position, zIndex$1, top, right, bottom, left);
 
-const boxShadow = style$1({
+const boxShadow = style$2({
   prop: 'boxShadow',
   themeKey: 'shadows'
 });
@@ -5949,7 +6051,7 @@ function transform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
 
-const width = style$1({
+const width = style$2({
   prop: 'width',
   transform
 });
@@ -5970,66 +6072,66 @@ const maxWidth = props => {
   return null;
 };
 maxWidth.filterProps = ['maxWidth'];
-const minWidth = style$1({
+const minWidth = style$2({
   prop: 'minWidth',
   transform
 });
-const height = style$1({
+const height = style$2({
   prop: 'height',
   transform
 });
-const maxHeight = style$1({
+const maxHeight = style$2({
   prop: 'maxHeight',
   transform
 });
-const minHeight = style$1({
+const minHeight = style$2({
   prop: 'minHeight',
   transform
 });
-style$1({
+style$2({
   prop: 'size',
   cssProperty: 'width',
   transform
 });
-style$1({
+style$2({
   prop: 'size',
   cssProperty: 'height',
   transform
 });
-const boxSizing = style$1({
+const boxSizing = style$2({
   prop: 'boxSizing'
 });
 const sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
 
-const fontFamily = style$1({
+const fontFamily = style$2({
   prop: 'fontFamily',
   themeKey: 'typography'
 });
-const fontSize = style$1({
+const fontSize = style$2({
   prop: 'fontSize',
   themeKey: 'typography'
 });
-const fontStyle = style$1({
+const fontStyle = style$2({
   prop: 'fontStyle',
   themeKey: 'typography'
 });
-const fontWeight = style$1({
+const fontWeight = style$2({
   prop: 'fontWeight',
   themeKey: 'typography'
 });
-const letterSpacing = style$1({
+const letterSpacing = style$2({
   prop: 'letterSpacing'
 });
-const textTransform = style$1({
+const textTransform = style$2({
   prop: 'textTransform'
 });
-const lineHeight = style$1({
+const lineHeight = style$2({
   prop: 'lineHeight'
 });
-const textAlign = style$1({
+const textAlign = style$2({
   prop: 'textAlign'
 });
-const typographyVariant = style$1({
+const typographyVariant = style$2({
   prop: 'typography',
   cssProperty: false,
   themeKey: 'typography'
@@ -6169,7 +6271,22 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 
-const _excluded$j = ["sx"];
+function _objectWithoutPropertiesLoose$1(source, excluded) {
+  if (source == null) return {};
+  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$k = ["sx"];
 
 const splitProps = props => {
   const result = {
@@ -6190,7 +6307,7 @@ function extendSxProp(props) {
   const {
     sx: inSx
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$j);
+        other = _objectWithoutPropertiesLoose$1(props, _excluded$k);
 
   const {
     systemProps,
@@ -6208,20 +6325,20 @@ function extendSxProp(props) {
         return systemProps;
       }
 
-      return _extends$1({}, systemProps, result);
+      return _extends$3({}, systemProps, result);
     };
   } else {
-    finalSx = _extends$1({}, systemProps, inSx);
+    finalSx = _extends$3({}, systemProps, inSx);
   }
 
-  return _extends$1({}, otherProps, {
+  return _extends$3({}, otherProps, {
     sx: finalSx
   });
 }
 
 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}
 
-const _excluded$i = ["values", "unit", "step"];
+const _excluded$j = ["values", "unit", "step"];
 
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -6231,7 +6348,7 @@ const sortBreakpointsValues = values => {
 
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends$1({}, acc, {
+    return _extends$3({}, acc, {
       [obj.key]: obj.val
     });
   }, {});
@@ -6257,7 +6374,7 @@ function createBreakpoints(breakpoints) {
     unit = 'px',
     step = 5
   } = breakpoints,
-        other = _objectWithoutPropertiesLoose(breakpoints, _excluded$i);
+        other = _objectWithoutPropertiesLoose$1(breakpoints, _excluded$j);
 
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
@@ -6300,7 +6417,7 @@ function createBreakpoints(breakpoints) {
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
 
-  return _extends$1({
+  return _extends$3({
     keys,
     values: sortedValues,
     up,
@@ -6343,7 +6460,7 @@ function createSpacing(spacingInput = 8) {
   return spacing;
 }
 
-const _excluded$h = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$i = ["breakpoints", "palette", "spacing", "shape"];
 
 function createTheme$1(options = {}, ...args) {
   const {
@@ -6352,7 +6469,7 @@ function createTheme$1(options = {}, ...args) {
     spacing: spacingInput,
     shape: shapeInput = {}
   } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded$h);
+        other = _objectWithoutPropertiesLoose$1(options, _excluded$i);
 
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
@@ -6361,16 +6478,33 @@ function createTheme$1(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: _extends$1({
+    palette: _extends$3({
       mode: 'light'
     }, paletteInput),
     spacing,
-    shape: _extends$1({}, shape, shapeInput)
+    shape: _extends$3({}, shape, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
   return muiTheme;
 }
 
+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);
 
 function useTheme$4() {
@@ -6389,7 +6523,7 @@ function mergeOuterLocalTheme(outerTheme, localTheme) {
     return mergedTheme;
   }
 
-  return _extends$1({}, outerTheme, localTheme);
+  return _extends$2({}, outerTheme, localTheme);
 }
 /**
  * This component takes a `theme` prop.
@@ -6435,7 +6569,7 @@ function useTheme$2(defaultTheme = systemDefaultTheme$1) {
   return useTheme$3(defaultTheme);
 }
 
-const _excluded$g = ["className", "component"];
+const _excluded$h = ["className", "component"];
 function createBox(options = {}) {
   const {
     defaultTheme,
@@ -6443,7 +6577,9 @@ function createBox(options = {}) {
     generateClassName,
     styleFunctionSx: styleFunctionSx$1 = styleFunctionSx
   } = options;
-  const BoxRoot = styled$2('div')(styleFunctionSx$1);
+  const BoxRoot = styled$2('div', {
+    shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
+  })(styleFunctionSx$1);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = useTheme$2(defaultTheme);
 
@@ -6452,9 +6588,9 @@ function createBox(options = {}) {
       className,
       component = 'div'
     } = _extendSxProp,
-          other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$g);
+          other = _objectWithoutPropertiesLoose$1(_extendSxProp, _excluded$h);
 
-    return /*#__PURE__*/jsxRuntime.exports.jsx(BoxRoot, _extends$1({
+    return /*#__PURE__*/jsxRuntime.exports.jsx(BoxRoot, _extends$3({
       as: component,
       ref: ref,
       className: clsx$1(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
@@ -6466,7 +6602,7 @@ function createBox(options = {}) {
 
 createBox();
 
-const _excluded$f = ["variant"];
+const _excluded$g = ["variant"];
 
 function isEmpty$2(string) {
   return string.length === 0;
@@ -6482,7 +6618,7 @@ function propsToClassKey(props) {
   const {
     variant
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$f);
+        other = _objectWithoutPropertiesLoose$1(props, _excluded$g);
 
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
@@ -6495,12 +6631,20 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$e = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+const _excluded$f = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
       _excluded2$3 = ["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
+
+
+function isStringTag(tag) {
+  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) => {
@@ -6566,7 +6710,19 @@ function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp,
     styleFunctionSx: styleFunctionSx$1 = styleFunctionSx
   } = input;
+
+  const systemSx = props => {
+    const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
+    return styleFunctionSx$1(_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,
@@ -6574,7 +6730,7 @@ function createStyled(input = {}) {
       skipSx: inputSkipSx,
       overridesResolver
     } = inputOptions,
-          options = _objectWithoutPropertiesLoose(inputOptions, _excluded$e); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+          options = _objectWithoutPropertiesLoose$1(inputOptions, _excluded$f); // 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;
@@ -6588,9 +6744,12 @@ function createStyled(input = {}) {
     } else if (componentSlot) {
       // any other slot specified
       shouldForwardPropOption = slotShouldForwardProp;
+    } else if (isStringTag(tag)) {
+      // for string (html) tag, preserve the behavior in emotion & styled-components.
+      shouldForwardPropOption = undefined;
     }
 
-    const defaultStyledResolver = styled$2(tag, _extends$1({
+    const defaultStyledResolver = styled$2(tag, _extends$3({
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
@@ -6600,14 +6759,13 @@ function createStyled(input = {}) {
         // 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
         return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? _ref => {
           let {
             theme: themeInput
           } = _ref,
-              other = _objectWithoutPropertiesLoose(_ref, _excluded2$3);
+              other = _objectWithoutPropertiesLoose$1(_ref, _excluded2$3);
 
-          return stylesArg(_extends$1({
+          return stylesArg(_extends$3({
             theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
           }, other));
         } : stylesArg;
@@ -6622,7 +6780,7 @@ function createStyled(input = {}) {
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$1({}, props, {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$3({}, props, {
                 theme
               })) : slotStyle;
             });
@@ -6641,12 +6799,7 @@ function createStyled(input = {}) {
       }
 
       if (!skipSx) {
-        expressionsWithDefaultTheme.push(props => {
-          const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
-          return styleFunctionSx$1(_extends$1({}, props, {
-            theme
-          }));
-        });
+        expressionsWithDefaultTheme.push(systemSx);
       }
 
       const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
@@ -6659,16 +6812,15 @@ function createStyled(input = {}) {
       } 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
       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);
+              other = _objectWithoutPropertiesLoose$1(_ref2, _excluded3);
 
-          return styleArg(_extends$1({
+          return styleArg(_extends$3({
             theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
           }, other));
         };
@@ -7245,7 +7397,7 @@ function getColorScheme(state) {
   });
 }
 
-function resolveValue$2(key, defaultValue) {
+function initializeValue(key, defaultValue) {
   if (typeof window === 'undefined') {
     return undefined;
   }
@@ -7254,6 +7406,11 @@ function resolveValue$2(key, defaultValue) {
 
   try {
     value = localStorage.getItem(key) || undefined;
+
+    if (!value) {
+      // the first time that user enters the site.
+      localStorage.setItem(key, defaultValue);
+    }
   } catch (e) {// Unsupported
   }
 
@@ -7272,50 +7429,63 @@ function useCurrentColorScheme(options) {
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
   const [state, setState] = React.useState(() => {
-    const initialMode = resolveValue$2(modeStorageKey, defaultMode);
+    const initialMode = initializeValue(modeStorageKey, defaultMode);
+    const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+    const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
     return {
       mode: initialMode,
       systemMode: getSystemMode(initialMode),
-      lightColorScheme: resolveValue$2(`${colorSchemeStorageKey}-light`) || defaultLightColorScheme,
-      darkColorScheme: resolveValue$2(`${colorSchemeStorageKey}-dark`) || defaultDarkColorScheme
+      lightColorScheme,
+      darkColorScheme
     };
   });
   const colorScheme = getColorScheme(state);
   const setMode = React.useCallback(mode => {
     setState(currentState => {
-      const newMode = !mode ? defaultMode : mode;
-
       if (mode === currentState.mode) {
+        // do nothing if mode does not change
         return currentState;
       }
 
-      if (typeof localStorage !== 'undefined') {
+      const newMode = !mode ? defaultMode : mode;
+
+      try {
         localStorage.setItem(modeStorageKey, newMode);
+      } catch (e) {// Unsupported
       }
 
-      return _extends$1({}, currentState, {
+      return _extends$3({}, currentState, {
         mode: newMode,
         systemMode: getSystemMode(newMode)
       });
     });
   }, [modeStorageKey, defaultMode]);
   const setColorScheme = React.useCallback(value => {
-    if (!value || typeof value === 'string') {
+    if (!value) {
+      setState(currentState => {
+        try {
+          localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+          localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
+        } catch (e) {// Unsupported
+        }
+
+        return _extends$3({}, currentState, {
+          lightColorScheme: defaultLightColorScheme,
+          darkColorScheme: defaultDarkColorScheme
+        });
+      });
+    } else if (typeof value === 'string') {
       if (value && !joinedColorSchemes.includes(value)) {
         console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
-          const newState = _extends$1({}, currentState);
-
-          if (!value) {
-            // reset to default color scheme
-            newState.lightColorScheme = defaultLightColorScheme;
-            newState.darkColorScheme = defaultDarkColorScheme;
-            return newState;
-          }
+          const newState = _extends$3({}, currentState);
 
           processState(currentState, mode => {
-            localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+            } catch (e) {// Unsupported
+            }
 
             if (mode === 'light') {
               newState.lightColorScheme = value;
@@ -7328,35 +7498,46 @@ function useCurrentColorScheme(options) {
           return newState;
         });
       }
-    } else if (value.light && !joinedColorSchemes.includes(value.light) || value.dark && !joinedColorSchemes.includes(value.dark)) {
-      console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
     } else {
       setState(currentState => {
-        const newState = _extends$1({}, currentState);
+        const newState = _extends$3({}, currentState);
 
-        if (value.light || value.light === null) {
-          newState.lightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+
+        if (newLightColorScheme) {
+          if (!joinedColorSchemes.includes(newLightColorScheme)) {
+            console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.lightColorScheme = newLightColorScheme;
+
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
-        if (value.dark || value.dark === null) {
-          newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+        if (newDarkColorScheme) {
+          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+            console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.darkColorScheme = newDarkColorScheme;
+
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
+            } catch (error) {// Unsupported
+            }
+          }
         }
 
         return newState;
       });
-
-      if (value.light) {
-        localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
-      }
-
-      if (value.dark) {
-        localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
-      }
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(e => {
     if (state.mode === 'system') {
-      setState(currentState => _extends$1({}, currentState, {
+      setState(currentState => _extends$3({}, currentState, {
         systemMode: e != null && e.matches ? 'dark' : 'light'
       }));
     }
@@ -7373,23 +7554,7 @@ function useCurrentColorScheme(options) {
     media.addListener(handler);
     handler(media);
     return () => media.removeListener(handler);
-  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
-
-  React.useEffect(() => {
-    if (state.mode) {
-      localStorage.setItem(modeStorageKey, state.mode);
-    }
-
-    processState(state, mode => {
-      if (mode === 'light') {
-        localStorage.setItem(`${colorSchemeStorageKey}-light`, state.lightColorScheme);
-      }
-
-      if (mode === 'dark') {
-        localStorage.setItem(`${colorSchemeStorageKey}-dark`, state.darkColorScheme);
-      }
-    });
-  }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+  }, []); // Handle when localStorage has changed
 
   React.useEffect(() => {
     const handleStorage = event => {
@@ -7423,14 +7588,14 @@ function useCurrentColorScheme(options) {
 
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return _extends$1({}, state, {
+  return _extends$3({}, state, {
     colorScheme,
     setMode,
     setColorScheme
   });
 }
 
-const _excluded$d = ["colorSchemes", "components", "cssVarPrefix"];
+const _excluded$e = ["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 {
@@ -7485,7 +7650,7 @@ function createCssVarsProvider(options) {
       components = {},
       cssVarPrefix
     } = themeProp,
-          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$d);
+          restThemeProp = _objectWithoutPropertiesLoose$1(themeProp, _excluded$e);
 
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -7531,7 +7696,7 @@ function createCssVarsProvider(options) {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
     });
-    theme = _extends$1({}, parsedTheme, {
+    theme = _extends$3({}, parsedTheme, {
       components,
       colorSchemes,
       cssVarPrefix,
@@ -7552,7 +7717,7 @@ function createCssVarsProvider(options) {
       theme.vars = deepmerge(theme.vars, vars);
 
       if (key === resolvedColorScheme) {
-        theme = _extends$1({}, theme, parsedScheme);
+        theme = _extends$3({}, theme, parsedScheme);
 
         if (theme.palette) {
           // assign runtime mode & colorScheme
@@ -7653,7 +7818,7 @@ function createCssVarsProvider(options) {
     });
   }
 
-  const getInitColorSchemeScript$1 = params => getInitColorSchemeScript(_extends$1({
+  const getInitColorSchemeScript$1 = params => getInitColorSchemeScript(_extends$3({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     modeStorageKey: defaultModeStorageKey,
@@ -7694,9 +7859,9 @@ function createGetCssVar$1(prefix = '') {
   return getCssVar;
 }
 
-const _excluded$c = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
-const defaultTheme$3 = createTheme$1();
-const defaultCreateStyledComponent$1 = styled$1('div', {
+const _excluded$d = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+const defaultTheme$4 = createTheme$1();
+const defaultCreateStyledComponent$2 = styled$1('div', {
   name: 'MuiContainer',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -7707,10 +7872,10 @@ const defaultCreateStyledComponent$1 = styled$1('div', {
   }
 });
 
-const useThemePropsDefault$1 = inProps => useThemeProps$1({
+const useThemePropsDefault$2 = inProps => useThemeProps$1({
   props: inProps,
   name: 'MuiContainer',
-  defaultTheme: defaultTheme$3
+  defaultTheme: defaultTheme$4
 });
 
 const useUtilityClasses$1 = (ownerState, componentName) => {
@@ -7733,14 +7898,14 @@ 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$1,
-    useThemeProps = useThemePropsDefault$1,
+    createStyledComponent = defaultCreateStyledComponent$2,
+    useThemeProps = useThemePropsDefault$2,
     componentName = 'MuiContainer'
   } = options;
   const ContainerRoot = createStyledComponent(({
     theme,
     ownerState
-  }) => _extends$1({
+  }) => _extends$3({
     width: '100%',
     marginLeft: 'auto',
     boxSizing: 'border-box',
@@ -7772,7 +7937,7 @@ function createContainer(options = {}) {
   }, {}), ({
     theme,
     ownerState
-  }) => _extends$1({}, ownerState.maxWidth === 'xs' && {
+  }) => _extends$3({}, ownerState.maxWidth === 'xs' && {
     // @ts-ignore module augmentation fails if custom breakpoints are used
     [theme.breakpoints.up('xs')]: {
       // @ts-ignore module augmentation fails if custom breakpoints are used
@@ -7796,9 +7961,9 @@ function createContainer(options = {}) {
       fixed = false,
       maxWidth = 'lg'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$c);
+          other = _objectWithoutPropertiesLoose$1(props, _excluded$d);
 
-    const ownerState = _extends$1({}, props, {
+    const ownerState = _extends$3({}, props, {
       component,
       disableGutters,
       fixed,
@@ -7810,7 +7975,7 @@ function createContainer(options = {}) {
     return (
       /*#__PURE__*/
       // @ts-ignore theme is injected by the styled util
-      jsxRuntime.exports.jsx(ContainerRoot, _extends$1({
+      jsxRuntime.exports.jsx(ContainerRoot, _extends$3({
         as: component // @ts-ignore module augmentation fails if custom breakpoints are used
         ,
         ownerState: ownerState,
@@ -8014,10 +8179,10 @@ const generateGridDirectionStyles = ({
 const generateGridStyles = ({
   ownerState
 }) => {
-  return _extends$1({
+  return _extends$3({
     minWidth: 0,
     boxSizing: 'border-box'
-  }, ownerState.container ? _extends$1({
+  }, ownerState.container ? _extends$3({
     display: 'flex',
     flexWrap: 'wrap'
   }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
@@ -8026,14 +8191,14 @@ const generateGridStyles = ({
     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({
+  }, ownerState.nested ? _extends$3({
     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({
+  }) : _extends$3({
     padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`
   }, ownerState.disableEqualOverflow && {
     padding: `calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))`
@@ -8074,28 +8239,28 @@ const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
   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 _excluded$c = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
+const defaultTheme$3 = createTheme$1(); // widening Theme to any so that the consumer can own the theme structure.
 
-const defaultCreateStyledComponent = styled$1('div', {
+const defaultCreateStyledComponent$1 = styled$1('div', {
   name: 'MuiGrid',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 });
 
-function useThemePropsDefault(props) {
+function useThemePropsDefault$1(props) {
   return useThemeProps$1({
     props,
     name: 'MuiGrid',
-    defaultTheme: defaultTheme$2
+    defaultTheme: defaultTheme$3
   });
 }
 
 function createGrid(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 = 'MuiGrid'
   } = options;
   const NestedContext = /*#__PURE__*/React.createContext(false);
@@ -8138,7 +8303,7 @@ function createGrid(options = {}) {
       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.
+          rest = _objectWithoutPropertiesLoose$1(props, _excluded$c); // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
 
 
     let disableEqualOverflow = themeDisableEqualOverflow;
@@ -8165,7 +8330,7 @@ function createGrid(options = {}) {
     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, {
+    const ownerState = _extends$3({}, props, {
       nested,
       columns,
       container,
@@ -8184,7 +8349,7 @@ function createGrid(options = {}) {
 
     const classes = useUtilityClasses(ownerState, theme);
 
-    let result = /*#__PURE__*/jsxRuntime.exports.jsx(GridRoot, _extends$1({
+    let result = /*#__PURE__*/jsxRuntime.exports.jsx(GridRoot, _extends$3({
       ref: ref,
       as: component,
       ownerState: ownerState,
@@ -8236,6 +8401,179 @@ generateUtilityClasses('MuiGrid', ['root', 'container', 'item', // spacings
 ...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$b = ["component", "direction", "spacing", "divider", "children", "className"];
+const defaultTheme$2 = createTheme$1();
+// widening Theme to any so that the consumer can own the theme structure.
+const defaultCreateStyledComponent = styled$1('div', {
+  name: 'MuiStack',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+});
+
+function useThemePropsDefault(props) {
+  return useThemeProps$1({
+    props,
+    name: 'MuiStack',
+    defaultTheme: defaultTheme$2
+  });
+}
+/**
+ * Return an array with the separator React element interspersed between
+ * each React node of the input children.
+ *
+ * > joinChildren([1,2,3], 0)
+ * [1,0,2,0,3]
+ */
+
+
+function joinChildren(children, separator) {
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  return childrenArray.reduce((output, child, index) => {
+    output.push(child);
+
+    if (index < childrenArray.length - 1) {
+      output.push( /*#__PURE__*/React.cloneElement(separator, {
+        key: `separator-${index}`
+      }));
+    }
+
+    return output;
+  }, []);
+}
+
+const getSideFromDirection = direction => {
+  return {
+    row: 'Left',
+    'row-reverse': 'Right',
+    column: 'Top',
+    'column-reverse': 'Bottom'
+  }[direction];
+};
+
+const style = ({
+  ownerState,
+  theme
+}) => {
+  let styles = _extends$3({
+    display: 'flex',
+    flexDirection: 'column'
+  }, handleBreakpoints({
+    theme
+  }, resolveBreakpointValues({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  }), propValue => ({
+    flexDirection: propValue
+  })));
+
+  if (ownerState.spacing) {
+    const transformer = createUnarySpacing(theme);
+    const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
+      if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
+        acc[breakpoint] = true;
+      }
+
+      return acc;
+    }, {});
+    const directionValues = resolveBreakpointValues({
+      values: ownerState.direction,
+      base
+    });
+    const spacingValues = resolveBreakpointValues({
+      values: ownerState.spacing,
+      base
+    });
+
+    if (typeof directionValues === 'object') {
+      Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
+        const directionValue = directionValues[breakpoint];
+
+        if (!directionValue) {
+          const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
+          directionValues[breakpoint] = previousDirectionValue;
+        }
+      });
+    }
+
+    const styleFromPropValue = (propValue, breakpoint) => {
+      return {
+        '& > :not(style) + :not(style)': {
+          margin: 0,
+          [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue$1(transformer, propValue)
+        }
+      };
+    };
+
+    styles = deepmerge(styles, handleBreakpoints({
+      theme
+    }, spacingValues, styleFromPropValue));
+  }
+
+  styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
+  return styles;
+};
+function createStack(options = {}) {
+  const {
+    // This will allow adding custom styled fn (for example for custom sx style function)
+    createStyledComponent = defaultCreateStyledComponent,
+    useThemeProps = useThemePropsDefault,
+    componentName = 'MuiStack'
+  } = options;
+
+  const useUtilityClasses = () => {
+    const slots = {
+      root: ['root']
+    };
+    return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
+  };
+
+  const StackRoot = createStyledComponent(style);
+  const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
+    const themeProps = useThemeProps(inProps);
+    const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+
+    const {
+      component = 'div',
+      direction = 'column',
+      spacing = 0,
+      divider,
+      children,
+      className
+    } = props,
+          other = _objectWithoutPropertiesLoose$1(props, _excluded$b);
+
+    const ownerState = {
+      direction,
+      spacing
+    };
+    const classes = useUtilityClasses();
+    return /*#__PURE__*/jsxRuntime.exports.jsx(StackRoot, _extends$3({
+      as: component,
+      ownerState: ownerState,
+      ref: ref,
+      className: clsx$1(classes.root, className)
+    }, other, {
+      children: divider ? joinChildren(children, divider) : children
+    }));
+  });
+  return Stack;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
+ *
+ * API:
+ *
+ * - [Stack API](https://mui.com/system/api/stack/)
+ */
+
+createStack();
+
+generateUtilityClasses('MuiStack', ['root']);
+
 const _excluded$a = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
       _excluded2$2 = ["type", "mode"];
 function adaptV4Theme(inputTheme) {
@@ -8248,9 +8586,9 @@ function adaptV4Theme(inputTheme) {
     props = {},
     styleOverrides = {}
   } = inputTheme,
-        other = _objectWithoutPropertiesLoose(inputTheme, _excluded$a);
+        other = _objectWithoutPropertiesLoose$2(inputTheme, _excluded$a);
 
-  const theme = _extends$1({}, other, {
+  const theme = _extends$5({}, other, {
     components: {}
   }); // default props
 
@@ -8281,13 +8619,13 @@ function adaptV4Theme(inputTheme) {
 
   const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
-  theme.mixins = _extends$1({
+  theme.mixins = _extends$5({
     gutters: (styles = {}) => {
-      return _extends$1({
+      return _extends$5({
         paddingLeft: spacing(2),
         paddingRight: spacing(2)
       }, styles, {
-        [breakpoints.up('sm')]: _extends$1({
+        [breakpoints.up('sm')]: _extends$5({
           paddingLeft: spacing(3),
           paddingRight: spacing(3)
         }, styles[breakpoints.up('sm')])
@@ -8299,10 +8637,10 @@ function adaptV4Theme(inputTheme) {
     type: typeInput,
     mode: modeInput
   } = palette,
-        paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$2);
+        paletteRest = _objectWithoutPropertiesLoose$2(palette, _excluded2$2);
 
   const finalMode = modeInput || typeInput || 'light';
-  theme.palette = _extends$1({
+  theme.palette = _extends$5({
     // theme.palette.text.hint
     text: {
       hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
@@ -8356,6 +8694,8 @@ generateUtilityClasses('MuiSlider', ['root', 'active', 'focusVisible', 'disabled
 
 generateUtilityClasses('MuiSwitch', ['root', 'input', 'track', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
 
+generateUtilityClasses('MuiTablePaginationUnstyled', ['root', 'toolbar', 'spacer', 'selectLabel', 'selectRoot', 'select', 'selectIcon', 'input', 'menuItem', 'displayedRows', 'actions']);
+
 generateUtilityClasses('TabPanelUnstyled', ['root', 'hidden']);
 
 generateUtilityClasses('TabsUnstyled', ['root', 'horizontal', 'vertical']);
@@ -8365,7 +8705,7 @@ generateUtilityClasses('TabsListUnstyled', ['root', 'horizontal', 'vertical']);
 generateUtilityClasses('TabUnstyled', ['root', 'selected', 'disabled']);
 
 function createMixins(breakpoints, mixins) {
-  return _extends$1({
+  return _extends$5({
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -8688,7 +9028,7 @@ function createPalette(palette) {
     contrastThreshold = 3,
     tonalOffset = 0.2
   } = palette,
-        other = _objectWithoutPropertiesLoose(palette, _excluded$9);
+        other = _objectWithoutPropertiesLoose$2(palette, _excluded$9);
 
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
@@ -8712,7 +9052,7 @@ function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = _extends$1({}, color);
+    color = _extends$5({}, color);
 
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
@@ -8741,9 +9081,9 @@ function createPalette(palette) {
     light: light$1
   };
 
-  const paletteOutput = deepmerge(_extends$1({
+  const paletteOutput = deepmerge(_extends$5({
     // A collection of common colors.
-    common: _extends$1({}, common),
+    common: _extends$5({}, common),
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -8830,13 +9170,13 @@ function createTypography(palette, typography) {
     allVariants,
     pxToRem: pxToRem2
   } = _ref,
-        other = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+        other = _objectWithoutPropertiesLoose$2(_ref, _excluded$8);
 
   const coef = fontSize / 14;
 
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
 
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$1({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$5({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
@@ -8861,7 +9201,7 @@ function createTypography(palette, typography) {
     caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
     overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
   };
-  return deepmerge(_extends$1({
+  return deepmerge(_extends$5({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -8932,9 +9272,9 @@ function getAutoHeightDuration(height) {
 }
 
 function createTransitions(inputTransitions) {
-  const mergedEasing = _extends$1({}, easing, inputTransitions.easing);
+  const mergedEasing = _extends$5({}, easing, inputTransitions.easing);
 
-  const mergedDuration = _extends$1({}, duration, inputTransitions.duration);
+  const mergedDuration = _extends$5({}, duration, inputTransitions.duration);
 
   const create = (props = ['all'], options = {}) => {
     const {
@@ -8942,12 +9282,12 @@ function createTransitions(inputTransitions) {
       easing: easingOption = mergedEasing.easeInOut,
       delay = 0
     } = options;
-          _objectWithoutPropertiesLoose(options, _excluded$7);
+          _objectWithoutPropertiesLoose$2(options, _excluded$7);
 
     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$1({
+  return _extends$5({
     getAutoHeightDuration,
     create
   }, inputTransitions, {
@@ -8978,7 +9318,7 @@ function createTheme(options = {}, ...args) {
     transitions: transitionsInput = {},
     typography: typographyInput = {}
   } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded$6);
+        other = _objectWithoutPropertiesLoose$2(options, _excluded$6);
 
   if (options.vars) {
     throw new Error(formatMuiErrorMessage(18));
@@ -8993,7 +9333,7 @@ function createTheme(options = {}, ...args) {
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends$1({}, zIndex)
+    zIndex: _extends$5({}, zIndex)
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
@@ -9057,7 +9397,7 @@ styled('div', {
 }) => {
   var _theme$vars$overlays;
 
-  return _extends$1({
+  return _extends$5({
     backgroundColor: (theme.vars || theme).palette.background.paper,
     color: (theme.vars || theme).palette.text.primary,
     transition: theme.transitions.create('box-shadow')
@@ -9065,7 +9405,7 @@ styled('div', {
     borderRadius: theme.shape.borderRadius
   }, ownerState.variant === 'outlined' && {
     border: `1px solid ${(theme.vars || theme).palette.divider}`
-  }, ownerState.variant === 'elevation' && _extends$1({
+  }, ownerState.variant === 'elevation' && _extends$5({
     boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
   }, !theme.vars && theme.palette.mode === 'dark' && {
     backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
@@ -9105,33 +9445,33 @@ function extendTheme(options = {}, ...args) {
     colorSchemes: colorSchemesInput = {},
     cssVarPrefix = 'mui'
   } = options,
-        input = _objectWithoutPropertiesLoose(options, _excluded$5);
+        input = _objectWithoutPropertiesLoose$2(options, _excluded$5);
 
   const getCssVar = createGetCssVar(cssVarPrefix);
 
-  const _createThemeWithoutVa = createTheme(_extends$1({}, input, colorSchemesInput.light && {
+  const _createThemeWithoutVa = createTheme(_extends$5({}, input, colorSchemesInput.light && {
     palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
   })),
         {
     palette: lightPalette
   } = _createThemeWithoutVa,
-        muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$1);
+        muiTheme = _objectWithoutPropertiesLoose$2(_createThemeWithoutVa, _excluded2$1);
 
   const {
     palette: darkPalette
   } = createTheme({
-    palette: _extends$1({
+    palette: _extends$5({
       mode: 'dark'
     }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
   });
 
-  let theme = _extends$1({}, muiTheme, {
+  let theme = _extends$5({}, muiTheme, {
     cssVarPrefix,
     getCssVar,
-    colorSchemes: _extends$1({}, colorSchemesInput, {
-      light: _extends$1({}, colorSchemesInput.light, {
+    colorSchemes: _extends$5({}, colorSchemesInput, {
+      light: _extends$5({}, colorSchemesInput.light, {
         palette: lightPalette,
-        opacity: _extends$1({
+        opacity: _extends$5({
           inputPlaceholder: 0.42,
           inputUnderline: 0.42,
           switchTrackDisabled: 0.12,
@@ -9139,9 +9479,9 @@ function extendTheme(options = {}, ...args) {
         }, (_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, {
+      dark: _extends$5({}, colorSchemesInput.dark, {
         palette: darkPalette,
-        opacity: _extends$1({
+        opacity: _extends$5({
           inputPlaceholder: 0.5,
           inputUnderline: 0.7,
           switchTrackDisabled: 0.2,
@@ -9350,7 +9690,7 @@ createCssVarsProvider({
     dark: 'dark'
   },
   resolveTheme: theme => {
-    const newTheme = _extends$1({}, theme, {
+    const newTheme = _extends$5({}, theme, {
       typography: createTypography(theme.palette, theme.typography)
     });
 
@@ -9359,6 +9699,38 @@ createCssVarsProvider({
   shouldSkipGeneratingVar
 });
 
+function _extends$1() {
+  _extends$1 = 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$1.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  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;
+}
+
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -10937,7 +11309,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     classes = {},
     className
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$4);
+        other = _objectWithoutPropertiesLoose$2(props, _excluded$4);
 
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
@@ -11108,7 +11480,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     start,
     stop
   }), [pulsate, start, stop]);
-  return /*#__PURE__*/jsxRuntime.exports.jsx(TouchRippleRoot, _extends$1({
+  return /*#__PURE__*/jsxRuntime.exports.jsx(TouchRippleRoot, _extends$5({
     className: clsx(touchRippleClasses.root, classes.root, className),
     ref: container
   }, other, {
@@ -11232,7 +11604,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     touchRippleRef,
     type
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$3);
+        other = _objectWithoutPropertiesLoose$2(props, _excluded$3);
 
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
@@ -11409,7 +11781,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
   const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
   const handleRef = useForkRef(ref, handleOwnRef);
 
-  const ownerState = _extends$1({}, props, {
+  const ownerState = _extends$5({}, props, {
     centerRipple,
     component,
     disabled,
@@ -11421,7 +11793,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
   });
 
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/jsxRuntime.exports.jsxs(ButtonBaseRoot, _extends$1({
+  return /*#__PURE__*/jsxRuntime.exports.jsxs(ButtonBaseRoot, _extends$5({
     as: ComponentProp,
     className: clsx(classes.root, className),
     ownerState: ownerState,
@@ -11446,7 +11818,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     /*#__PURE__*/
 
     /* TouchRipple is only needed client-side, x2 boost on the server. */
-    jsxRuntime.exports.jsx(TouchRipple, _extends$1({
+    jsxRuntime.exports.jsx(TouchRipple, _extends$5({
       ref: handleRippleRef,
       center: centerRipple
     }, TouchRippleProps)) : null]
@@ -11455,7 +11827,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
 
 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' && {
+const commonIconStyles = ownerState => _extends$5({}, ownerState.size === 'small' && {
   '& > *:nth-of-type(1)': {
     fontSize: 18
   }
@@ -11485,14 +11857,14 @@ styled(ButtonBase, {
 }) => {
   var _theme$palette$getCon, _theme$palette;
 
-  return _extends$1({}, theme.typography.button, {
+  return _extends$5({}, theme.typography.button, {
     minWidth: 64,
     padding: '6px 16px',
     borderRadius: (theme.vars || theme).shape.borderRadius,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
       duration: theme.transitions.duration.short
     }),
-    '&:hover': _extends$1({
+    '&:hover': _extends$5({
       textDecoration: 'none',
       backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
@@ -11527,13 +11899,13 @@ styled(ButtonBase, {
         backgroundColor: (theme.vars || theme).palette[ownerState.color].main
       }
     }),
-    '&:active': _extends$1({}, ownerState.variant === 'contained' && {
+    '&:active': _extends$5({}, ownerState.variant === 'contained' && {
       boxShadow: (theme.vars || theme).shadows[8]
     }),
-    [`&.${buttonClasses.focusVisible}`]: _extends$1({}, ownerState.variant === 'contained' && {
+    [`&.${buttonClasses.focusVisible}`]: _extends$5({}, ownerState.variant === 'contained' && {
       boxShadow: (theme.vars || theme).shadows[6]
     }),
-    [`&.${buttonClasses.disabled}`]: _extends$1({
+    [`&.${buttonClasses.disabled}`]: _extends$5({
       color: (theme.vars || theme).palette.action.disabled
     }, ownerState.variant === 'outlined' && {
       border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
@@ -11614,7 +11986,7 @@ styled('span', {
   }
 })(({
   ownerState
-}) => _extends$1({
+}) => _extends$5({
   display: 'inherit',
   marginRight: 8,
   marginLeft: -4
@@ -11632,7 +12004,7 @@ styled('span', {
   }
 })(({
   ownerState
-}) => _extends$1({
+}) => _extends$5({
   display: 'inherit',
   marginRight: -4,
   marginLeft: 8
@@ -11954,7 +12326,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "6be9" ;
+const NEBULA_VERSION_HASH = "272f" ;
 ClassNameGenerator.configure(componentName => {
 
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
@@ -12527,7 +12899,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-rc.2" );
+  element.setAttribute('data-nebulajs-version', "3.0.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
@@ -12683,7 +13055,7 @@ function SvgIcon(_ref) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
-      React__default.createElement(Type, _extends$2({
+      React__default.createElement(Type, _extends$6({
         key: ix
       }, attrs))
     );
@@ -15340,7 +15712,7 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
   } = _ref3;
   const showActions = actions.length > 0;
   return showActions && /*#__PURE__*/React__default.createElement(StyledPopover$1 // eslint-disable-next-line react/jsx-props-no-spreading
-  , _extends$2({}, popoverProps, {
+  , _extends$6({}, popoverProps, {
     onClose: onCloseOrActionClick,
     ref: ref,
     open: show,
@@ -17339,6 +17711,7 @@ AutoSizer.defaultProps = {
 /**
  * Hook that confirms selection when
  * user interact outside of passed element ref.
+ * @ignore
  */
 
 function useConfirmUnfocus(ref, selections, shouldConfirmOnBlur) {
@@ -17814,12 +18187,6 @@ function removeIndex(array, index) {
   return removeIdx;
 }
 
-const nxDimension = f => ({
-  qDef: {
-    qFieldDefs: [f]
-  }
-});
-
 const nxMeasure = f => ({
   qDef: {
     qDef: f
@@ -17849,9 +18216,10 @@ function hcHandler(_ref) {
     },
 
     addDimension(d) {
-      const dimension = typeof d === 'string' ? nxDimension(d) : _objectSpread2(_objectSpread2({}, d), {}, {
+      const dimension = _objectSpread2(_objectSpread2({}, d), {}, {
         qDef: d.qDef || {}
       });
+
       dimension.qDef.cId = dimension.qDef.cId || uid(); // ====== add default objects and arrays for NxDimension =====
       // TODO - apply autosort properties based on tags
 
@@ -19128,13 +19496,13 @@ function Progress(_ref2) {
   const s = SIZES[size];
   return /*#__PURE__*/React__default.createElement(Root, {
     className: classes$3.root
-  }, /*#__PURE__*/React__default.createElement(CircularProgress, _extends$2({
+  }, /*#__PURE__*/React__default.createElement(CircularProgress, _extends$6({
     variant: "determinate",
     value: 100,
     className: classes$3.back,
     size: s,
     thickness: 3
-  }, props)), /*#__PURE__*/React__default.createElement(CircularProgress, _extends$2({
+  }, props)), /*#__PURE__*/React__default.createElement(CircularProgress, _extends$6({
     variant: "indeterminate",
     disableShrink: true,
     className: classes$3.front,
@@ -19185,7 +19553,7 @@ function Cancel(_ref) {
     variant: "h6",
     align: "center",
     "data-tid": "update-active"
-  }, translator.get('Object.Update.Active')))), /*#__PURE__*/React__default.createElement(Grid, _extends$2({
+  }, translator.get('Object.Update.Active')))), /*#__PURE__*/React__default.createElement(Grid, _extends$6({
     item: true
   }, props), /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained",
@@ -19213,7 +19581,7 @@ function Retry(_ref2) {
     "data-tid": "update-cancelled"
   }, translator.get('Object.Update.Cancelled'))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Button, _extends$2({
+  }, /*#__PURE__*/React__default.createElement(Button, _extends$6({
     variant: "contained",
     onClick: retry
   }, props), translator.get('Retry'))));
@@ -25297,14 +25665,14 @@ function nuked() {
  */
 
 
-var index = nuked(DEFAULT_CONFIG);
+var index$1 = nuked(DEFAULT_CONFIG);
 
 var enigmaMocker = {exports: {}};
 
 var enigmaMocker_dev = {exports: {}};
 
 /*
-* @nebula.js/enigma-mocker v3.0.0-rc.1
+* @nebula.js/enigma-mocker v3.0.0-rc.2
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -25573,12 +25941,13 @@ var enigmaMocker_dev = {exports: {}};
      *   id: getValue(fixture.id, { defaultValue: 'object-id-${+Date.now()}'}),
      * }
      * ```
-     *
+     * @type function
+     * @ignore
      * @param {any} prop Fixture property. Either a fixed value (string / object / boolean / ...) or a function invoked when the value is needed.
      * @param {object} options Options.
      * @param {Array<any>} options.args Arguments used to evaluate the property value.
      * @param {any} options.defaultValue Default value in case not value is defined in fixture.
-     * @returns The property value.
+     * @returns {any} The property value.
      */
 
 
@@ -25614,13 +25983,14 @@ var enigmaMocker_dev = {exports: {}};
      *   getHyperCubeData: getPropFn(fixture.getHyperCubeData, { defaultValue: [], usePromise: true })
      * };
      * ```
-     *
+     * @type function
+     * @ignore
      * @param {any} prop Fixture property. Either a fixed value (string / object / boolean / ...) or a function invoked when the value is needed.
      * @param {object} options Options.
      * @param {any} options.defaultValue Default value in case not value is defined in fixture.
      * @param {boolean} options.async When `true` the returns value is wrapped in a promise, otherwise the value is directly returned.
      * @param {number} options.number Delay before value is returned.
-     * @returns A fixture property function
+     * @returns {function} A fixture property function
      */
 
 
@@ -25648,12 +26018,15 @@ var enigmaMocker_dev = {exports: {}};
     const _excluded = ["id", "session"];
     /**
      * Properties on `getObject()` operating synchronously.
+     * @ignore
+     * @type Array
      */
 
     const PROPS_SYNC = ['addListener', 'emit', 'listeners', 'on', 'once', 'removeAllListeners', 'removeListener', 'setMaxListerners'];
     /**
      * Is property operating asynchrously.
      * @param {string} name Property name.
+     * @ignore
      * @returns `true` if property is operating asynchrously, otherwise `false`.
      */
 
@@ -25663,6 +26036,7 @@ var enigmaMocker_dev = {exports: {}};
     /**
      * Get `qId` for visualization.
      * @param {object} genericObject Generic object describing behaviour of mock
+     * @ignore
      * @returns The `qId`, undefined if not present
      */
 
@@ -25675,6 +26049,7 @@ var enigmaMocker_dev = {exports: {}};
      * Create a mock of a generic object. Mandatory properties are added, functions returns async values where applicable etc.
      * @param {object} genericObject Generic object describing behaviour of mock
      * @param {EnigmaMockerOptions} options Options.
+     * @ignore
      * @returns The mocked object
      */
 
@@ -25718,6 +26093,7 @@ var enigmaMocker_dev = {exports: {}};
      * Create mocked objects from list of generic objects.
      * @param {Array<object>} genericObjects Generic objects describing behaviour of mock
      * @param {EnigmaMockerOptions} options options
+     * @ignore
      * @returns Object with mocks where key is `qId` and value is the mocked object.
      */
 
@@ -25728,6 +26104,7 @@ var enigmaMocker_dev = {exports: {}};
     /**
      * Validates if mandatory information is available.
      * @param {object} genericObject Generic object to validate
+     * @ignore
      * @throws {}
      * <ul>
      *   <li>{Error} If getLayout is missing</li>
@@ -25751,6 +26128,7 @@ var enigmaMocker_dev = {exports: {}};
      * Creates mock of `getObject(id)` based on an array of generic objects.
      * @param {Array<object>} genericObjects Generic objects.
      * @param {EnigmaMockerOptions} options Options.
+     * @ignore
      * @returns Function to retrieve the mocked generic object with the corresponding id.
      */
 
@@ -25775,41 +26153,8 @@ var enigmaMocker_dev = {exports: {}};
         id: 'app-layout'
       });
     }
-    /**
-     * @interface EnigmaMockerOptions
-     * @property {number} delay Simulate delay (in ms) for calls in enigma-mocker.
-     */
-
-    /**
-     * Mocks Engima app functionality. It accepts one / many generic objects as input argument and returns the mocked Enigma app. Each generic object represents one visulization and specifies how it behaves. For example, what layout to use the data to present.
-     *
-     * The generic object is represented with a Javascript object with a number of properties. The name of the property correlates to the name in the Enigma model for `app.getObject(id)`. For example, the property `getLayout` in the generic object is used to define `app.getObject(id).getLayout()`. Any property can be added to the fixture (just make sure it exists and behaves as in the Enigma model!).
-     *
-     * The value for each property is either fixed (string / boolean / number / object) or a function. Arguments are forwarded to the function to allow for greater flexibility. For example, this can be used to return different hypercube data when scrolling in the chart.
-     *
-     * @param {Array<object>} genericObjects Generic objects controling behaviour of visualizations.
-     * @param {EnigmaMockerOptions} options Options
-     * @returns {Promise<enigma.Doc>}
-     * @example
-     * const genericObject = {
-     *   getLayout() {
-     *     return {
-     *       qInfo: {
-     *         qId: 'qqj4zx',
-     *         qType: 'sn-grid-chart'
-     *       },
-     *       ...
-     *     }
-     *   },
-     *   getHyperCubeData(path, page) {
-     *     return [ ... ];
-     *   }
-     * };
-     * const app = await EnigmaMocker.fromGenericObjects([genericObject]);
-     */
-
 
-    var fromGenericObjects = function (genericObjects) {
+    function fromGenericObjects(genericObjects) {
       let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       const session = new SessionMock();
       const createSessionObject = new CreateSessionObjectMock();
@@ -25823,12 +26168,61 @@ var enigmaMocker_dev = {exports: {}};
         getAppLayout
       };
       return Promise.resolve(app);
-    };
+    }
+    /**
+     * @interface EnigmaMockerOptions
+     * @property {number} delay Simulate delay (in ms) for calls in enigma-mocker.
+     * @description Options for Enigma Mocker
+     * @experimental
+     * @since 3.0.0
+     */
+
+    /**
+     * @entry
+     * @alias EnigmaMocker
+     * @description Mocks Engima app functionality for demo and testing purposes.
+     */
+
+
+    const api =
+    /** @lends EnigmaMocker# */
+    {
+      /**
+       * Mocks Engima app functionality. It accepts one / many generic objects as input argument and returns the mocked Enigma app. Each generic object represents one visulization and specifies how it behaves. For example, what layout to use the data to present.
+       *
+       * The generic object is represented with a Javascript object with a number of properties. The name of the property correlates to the name in the Enigma model for `app.getObject(id)`. For example, the property `getLayout` in the generic object is used to define `app.getObject(id).getLayout()`. Any property can be added to the fixture (just make sure it exists and behaves as in the Enigma model!).
+       *
+       * The value for each property is either fixed (string / boolean / number / object) or a function. Arguments are forwarded to the function to allow for greater flexibility. For example, this can be used to return different hypercube data when scrolling in the chart.
+       * @type function
+       * @experimental
+       * @since 3.0.0
+       * @param {Array<object>} genericObjects Generic objects controling behaviour of visualizations.
+       * @param {EnigmaMockerOptions} options Options
+       * @returns {Promise<EngineAPI.IApp>}
+       * @example
+       * const genericObject = {
+       *   getLayout() {
+       *     return {
+       *       qInfo: {
+       *         qId: 'qqj4zx',
+       *         qType: 'sn-grid-chart'
+       *       },
+       *       ...
+       *     }
+       *   },
+       *   getHyperCubeData(path, page) {
+       *     return [ ... ];
+       *   }
+       * };
+       * const app = await EnigmaMocker.fromGenericObjects([genericObject]);
+       */
+      fromGenericObjects(genericObjects) {
+        let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        return fromGenericObjects(genericObjects, options);
+      }
 
-    var index = {
-      fromGenericObjects
     };
-    return index;
+    return api;
   });
 })(enigmaMocker_dev);
 
@@ -25836,7 +26230,7 @@ var enigmaMocker_dev = {exports: {}};
   module.exports = enigmaMocker_dev.exports;
 })(enigmaMocker);
 
-var EnigmaMocker = /*@__PURE__*/getDefaultExportFromCjs(enigmaMocker.exports);
+var index = /*@__PURE__*/getDefaultExportFromCjs(enigmaMocker.exports);
 
 /* eslint no-underscore-dangle: 0 */
 
@@ -25844,9 +26238,8 @@ const __DO_NOT_USE__ = {
   generator: generatorFn,
   hook,
   theme,
-  locale,
-  EnigmaMocker
+  locale
 };
 
-export { __DO_NOT_USE__, conversion, index as embed, onTakeSnapshot, useAction, useApp, useAppLayout, useConstraints, useDeviceType, useEffect, useElement, useEmbed, useGlobal, useImperativeHandle, useKeyboard, useLayout, useMemo, useModel, useOptions, usePlugins, usePromise, useRect, useRenderState, useSelections, useStaleLayout, useState, useTheme, useTranslator };
+export { index as EnigmaMocker, __DO_NOT_USE__, conversion, index$1 as embed, onTakeSnapshot, useAction, useApp, useAppLayout, useConstraints, useDeviceType, useEffect, useElement, useEmbed, useGlobal, useImperativeHandle, useKeyboard, useLayout, useMemo, useModel, useOptions, usePlugins, usePromise, useRect, useRenderState, useSelections, useStaleLayout, useState, useTheme, useTranslator };
 //# sourceMappingURL=dev.js.map