@mui/system 5.10.13 → 5.10.15

package/legacy/cssVars/createCssVarsProvider.js

@@ -17,131 +17,116 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
   var _options$theme = options.theme,
-      defaultTheme = _options$theme === void 0 ? {} : _options$theme,
-      _options$attribute = options.attribute,
-      defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
-      _options$modeStorageK = options.modeStorageKey,
-      defaultModeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
-      _options$colorSchemeS = options.colorSchemeStorageKey,
-      defaultColorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
-      _options$defaultMode = options.defaultMode,
-      designSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
-      designSystemColorScheme = options.defaultColorScheme,
-      _options$disableTrans = options.disableTransitionOnChange,
-      designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
-      designSystemShouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
-      resolveTheme = options.resolveTheme,
-      excludeVariablesFromRoot = options.excludeVariablesFromRoot;
-
+    defaultTheme = _options$theme === void 0 ? {} : _options$theme,
+    _options$attribute = options.attribute,
+    defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
+    _options$modeStorageK = options.modeStorageKey,
+    defaultModeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
+    _options$colorSchemeS = options.colorSchemeStorageKey,
+    defaultColorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
+    _options$defaultMode = options.defaultMode,
+    designSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
+    designSystemColorScheme = options.defaultColorScheme,
+    _options$disableTrans = options.disableTransitionOnChange,
+    designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
+    designSystemShouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
+    resolveTheme = options.resolveTheme,
+    excludeVariablesFromRoot = options.excludeVariablesFromRoot;
   if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
   }
-
   var ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
-
   var useColorScheme = function useColorScheme() {
     var value = React.useContext(ColorSchemeContext);
-
     if (!value) {
       throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `useColorScheme` must be called under <CssVarsProvider />" : _formatMuiErrorMessage(19));
     }
-
     return value;
   };
-
   function CssVarsProvider(_ref) {
     var children = _ref.children,
-        _ref$theme = _ref.theme,
-        themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
-        _ref$modeStorageKey = _ref.modeStorageKey,
-        modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
-        _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
-        colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? defaultColorSchemeStorageKey : _ref$colorSchemeStora,
-        _ref$attribute = _ref.attribute,
-        attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
-        _ref$defaultMode = _ref.defaultMode,
-        defaultMode = _ref$defaultMode === void 0 ? designSystemMode : _ref$defaultMode,
-        _ref$defaultColorSche = _ref.defaultColorScheme,
-        defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche,
-        _ref$disableTransitio = _ref.disableTransitionOnChange,
-        disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
-        _ref$storageWindow = _ref.storageWindow,
-        storageWindow = _ref$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _ref$storageWindow,
-        _ref$documentNode = _ref.documentNode,
-        documentNode = _ref$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _ref$documentNode,
-        _ref$colorSchemeNode = _ref.colorSchemeNode,
-        colorSchemeNode = _ref$colorSchemeNode === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _ref$colorSchemeNode,
-        _ref$colorSchemeSelec = _ref.colorSchemeSelector,
-        colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
-        _ref$shouldSkipGenera = _ref.shouldSkipGeneratingVar,
-        shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera;
+      _ref$theme = _ref.theme,
+      themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
+      _ref$modeStorageKey = _ref.modeStorageKey,
+      modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
+      _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
+      colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? defaultColorSchemeStorageKey : _ref$colorSchemeStora,
+      _ref$attribute = _ref.attribute,
+      attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
+      _ref$defaultMode = _ref.defaultMode,
+      defaultMode = _ref$defaultMode === void 0 ? designSystemMode : _ref$defaultMode,
+      _ref$defaultColorSche = _ref.defaultColorScheme,
+      defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche,
+      _ref$disableTransitio = _ref.disableTransitionOnChange,
+      disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
+      _ref$storageWindow = _ref.storageWindow,
+      storageWindow = _ref$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _ref$storageWindow,
+      _ref$documentNode = _ref.documentNode,
+      documentNode = _ref$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _ref$documentNode,
+      _ref$colorSchemeNode = _ref.colorSchemeNode,
+      colorSchemeNode = _ref$colorSchemeNode === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _ref$colorSchemeNode,
+      _ref$colorSchemeSelec = _ref.colorSchemeSelector,
+      colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
+      _ref$shouldSkipGenera = _ref.shouldSkipGeneratingVar,
+      shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera;
     var hasMounted = React.useRef(false);
-
     var _themeProp$colorSchem = themeProp.colorSchemes,
-        colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
-        _themeProp$components = themeProp.components,
-        components = _themeProp$components === void 0 ? {} : _themeProp$components,
-        cssVarPrefix = themeProp.cssVarPrefix,
-        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components", "cssVarPrefix"]);
-
+      colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
+      _themeProp$components = themeProp.components,
+      components = _themeProp$components === void 0 ? {} : _themeProp$components,
+      cssVarPrefix = themeProp.cssVarPrefix,
+      restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components", "cssVarPrefix"]);
     var allColorSchemes = Object.keys(colorSchemes);
     var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-    var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
+    var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
 
+    // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     var _useCurrentColorSchem = useCurrentColorScheme({
-      supportedColorSchemes: allColorSchemes,
-      defaultLightColorScheme: defaultLightColorScheme,
-      defaultDarkColorScheme: defaultDarkColorScheme,
-      modeStorageKey: modeStorageKey,
-      colorSchemeStorageKey: colorSchemeStorageKey,
-      defaultMode: defaultMode,
-      storageWindow: storageWindow
-    }),
-        mode = _useCurrentColorSchem.mode,
-        setMode = _useCurrentColorSchem.setMode,
-        systemMode = _useCurrentColorSchem.systemMode,
-        lightColorScheme = _useCurrentColorSchem.lightColorScheme,
-        darkColorScheme = _useCurrentColorSchem.darkColorScheme,
-        colorScheme = _useCurrentColorSchem.colorScheme,
-        setColorScheme = _useCurrentColorSchem.setColorScheme;
-
+        supportedColorSchemes: allColorSchemes,
+        defaultLightColorScheme: defaultLightColorScheme,
+        defaultDarkColorScheme: defaultDarkColorScheme,
+        modeStorageKey: modeStorageKey,
+        colorSchemeStorageKey: colorSchemeStorageKey,
+        defaultMode: defaultMode,
+        storageWindow: storageWindow
+      }),
+      mode = _useCurrentColorSchem.mode,
+      setMode = _useCurrentColorSchem.setMode,
+      systemMode = _useCurrentColorSchem.systemMode,
+      lightColorScheme = _useCurrentColorSchem.lightColorScheme,
+      darkColorScheme = _useCurrentColorSchem.darkColorScheme,
+      colorScheme = _useCurrentColorSchem.colorScheme,
+      setColorScheme = _useCurrentColorSchem.setColorScheme;
     var calculatedMode = function () {
       if (!mode) {
         // This scope occurs on the server
         if (defaultMode === 'system') {
           return designSystemMode;
         }
-
         return defaultMode;
       }
-
       return mode;
     }();
-
     var calculatedColorScheme = function () {
       if (!colorScheme) {
         // This scope occurs on the server
         if (calculatedMode === 'dark') {
           return defaultDarkColorScheme;
-        } // use light color scheme, if default mode is 'light' | 'system'
-
-
+        }
+        // use light color scheme, if default mode is 'light' | 'system'
         return defaultLightColorScheme;
       }
-
       return colorScheme;
-    }(); // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
-
+    }();
 
+    // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
     var _cssVarsParser = cssVarsParser(restThemeProp, {
-      prefix: cssVarPrefix,
-      shouldSkipGeneratingVar: shouldSkipGeneratingVar
-    }),
-        rootCss = _cssVarsParser.css,
-        rootVars = _cssVarsParser.vars,
-        parsedTheme = _cssVarsParser.parsedTheme; // 3. Start composing the theme object
-
-
+        prefix: cssVarPrefix,
+        shouldSkipGeneratingVar: shouldSkipGeneratingVar
+      }),
+      rootCss = _cssVarsParser.css,
+      rootVars = _cssVarsParser.vars,
+      parsedTheme = _cssVarsParser.parsedTheme; // 3. Start composing the theme object
     var theme = _extends({}, parsedTheme, {
       components: components,
       colorSchemes: colorSchemes,
@@ -150,49 +135,48 @@ export default function createCssVarsProvider(options) {
       getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
         return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
       }
-    }); // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
+    });
+
+    // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
     //    The default color scheme stylesheet is constructed to have the least CSS specificity.
     //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
-
-
     var defaultColorSchemeStyleSheet = {};
     var otherColorSchemesStyleSheet = {};
     Object.entries(colorSchemes).forEach(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          scheme = _ref3[1];
-
+        key = _ref3[0],
+        scheme = _ref3[1];
       var _cssVarsParser2 = cssVarsParser(scheme, {
-        prefix: cssVarPrefix,
-        shouldSkipGeneratingVar: shouldSkipGeneratingVar
-      }),
-          css = _cssVarsParser2.css,
-          vars = _cssVarsParser2.vars,
-          parsedScheme = _cssVarsParser2.parsedTheme;
-
+          prefix: cssVarPrefix,
+          shouldSkipGeneratingVar: shouldSkipGeneratingVar
+        }),
+        css = _cssVarsParser2.css,
+        vars = _cssVarsParser2.vars,
+        parsedScheme = _cssVarsParser2.parsedTheme;
       theme.vars = deepmerge(theme.vars, vars);
-
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
-        theme = _extends({}, theme, parsedScheme);
-
+        Object.keys(parsedScheme).forEach(function (schemeKey) {
+          if (parsedScheme[schemeKey] && _typeof(parsedScheme[schemeKey]) === 'object') {
+            // shallow merge the 1st level structure of the theme.
+            theme[schemeKey] = _extends({}, theme[schemeKey], parsedScheme[schemeKey]);
+          } else {
+            theme[schemeKey] = parsedScheme[schemeKey];
+          }
+        });
         if (theme.palette) {
           theme.palette.colorScheme = key;
         }
       }
-
       var resolvedDefaultColorScheme = function () {
         if (typeof defaultColorScheme === 'string') {
           return defaultColorScheme;
         }
-
         if (defaultMode === 'dark') {
           return defaultColorScheme.dark;
         }
-
         return defaultColorScheme.light;
       }();
-
       if (key === resolvedDefaultColorScheme) {
         if (excludeVariablesFromRoot) {
           var excludedVariables = {};
@@ -202,39 +186,38 @@ export default function createCssVarsProvider(options) {
           });
           defaultColorSchemeStyleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = excludedVariables;
         }
-
         defaultColorSchemeStyleSheet["".concat(colorSchemeSelector, ", [").concat(attribute, "=\"").concat(key, "\"]")] = css;
       } else {
         otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
       }
-    }); // 5. Declaring effects
-    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+    });
 
+    // 5. Declaring effects
+    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
     React.useEffect(function () {
       if (colorScheme && colorSchemeNode) {
         // attaches attribute to <html> because the css variables are attached to :root (html)
         colorSchemeNode.setAttribute(attribute, colorScheme);
       }
-    }, [colorScheme, attribute, colorSchemeNode]); // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
-    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+    }, [colorScheme, attribute, colorSchemeNode]);
 
+    // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
+    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
     React.useEffect(function () {
       var timer;
-
       if (disableTransitionOnChange && hasMounted.current && documentNode) {
         var css = documentNode.createElement('style');
         css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
-        documentNode.head.appendChild(css); // Force browser repaint
+        documentNode.head.appendChild(css);
 
+        // Force browser repaint
         (function () {
           return window.getComputedStyle(documentNode.body);
         })();
-
         timer = setTimeout(function () {
           documentNode.head.removeChild(css);
         }, 1);
       }
-
       return function () {
         clearTimeout(timer);
       };
@@ -271,69 +254,56 @@ export default function createCssVarsProvider(options) {
       })]
     });
   }
-
   process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
     /**
      * The body attribute name to attach colorScheme.
      */
     attribute: PropTypes.string,
-
     /**
      * The component tree.
      */
     children: PropTypes.node,
-
     /**
      * The node used to attach the color-scheme attribute
      */
     colorSchemeNode: PropTypes.any,
-
     /**
      * The CSS selector for attaching the generated custom properties
      */
     colorSchemeSelector: PropTypes.string,
-
     /**
      * localStorage key used to store `colorScheme`
      */
     colorSchemeStorageKey: PropTypes.string,
-
     /**
      * The initial color scheme used.
      */
     defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
     /**
      * The initial mode used.
      */
     defaultMode: PropTypes.string,
-
     /**
      * Disable CSS transitions when switching between modes or color schemes
      */
     disableTransitionOnChange: PropTypes.bool,
-
     /**
      * The document to attach the attribute to
      */
     documentNode: PropTypes.any,
-
     /**
      * The key in the local storage used to store current color scheme.
      */
     modeStorageKey: PropTypes.string,
-
     /**
      * A function to determine if the key, value should be attached as CSS Variable
      */
     shouldSkipGeneratingVar: PropTypes.func,
-
     /**
      * The window that attaches the 'storage' event listener
      * @default window
      */
     storageWindow: PropTypes.any,
-
     /**
      * The calculated theme object that will be passed through context.
      */
@@ -341,7 +311,6 @@ export default function createCssVarsProvider(options) {
   } : void 0;
   var defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   var defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-
   var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
     return systemGetInitColorSchemeScript(_extends({
       attribute: defaultAttribute,
@@ -352,7 +321,6 @@ export default function createCssVarsProvider(options) {
       modeStorageKey: defaultModeStorageKey
     }, params));
   };
-
   return {
     CssVarsProvider: CssVarsProvider,
     useColorScheme: useColorScheme,

package/legacy/cssVars/createGetCssVar.js

@@ -1,38 +1,30 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-
 /**
  * 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).
  */
 export default function createGetCssVar() {
   var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
   function appendVar() {
     for (var _len = arguments.length, vars = new Array(_len), _key = 0; _key < _len; _key++) {
       vars[_key] = arguments[_key];
     }
-
     if (!vars.length) {
       return '';
     }
-
     var 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(--".concat(prefix ? "".concat(prefix, "-") : '').concat(value).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
     }
-
     return ", ".concat(value);
-  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
-
+  }
 
+  // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
   var getCssVar = function getCssVar(field) {
     for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       fallbacks[_key2 - 1] = arguments[_key2];
     }
-
     return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, fallbacks), ")");
   };
-
   return getCssVar;
 }

package/legacy/cssVars/cssVarsParser.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -35,11 +34,11 @@ export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
       if (!temp[k]) {
         temp[k] = arrayKeys.includes(k) ? [] : {};
       }
-
       temp = temp[k];
     }
   });
 };
+
 /**
  *
  * @param {Object} obj : source object
@@ -51,16 +50,14 @@ export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
  * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
  * // ['palette', 'primary', 'main'] '#000000'
  */
-
 export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPaths) {
   function recurse(object) {
     var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     var arrayKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
     Object.entries(object).forEach(function (_ref) {
       var _ref2 = _slicedToArray(_ref, 2),
-          key = _ref2[0],
-          value = _ref2[1];
-
+        key = _ref2[0],
+        value = _ref2[1];
       if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([].concat(_toConsumableArray(parentKeys), [key]))) {
         if (value !== undefined && value !== null) {
           if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
@@ -72,10 +69,8 @@ export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPat
       }
     });
   }
-
   recurse(obj);
 };
-
 var getCssValue = function getCssValue(keys, value) {
   if (typeof value === 'number') {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(function (prop) {
@@ -84,19 +79,16 @@ var getCssValue = function getCssValue(keys, value) {
       // CSS property that are unitless
       return value;
     }
-
     var lastKey = keys[keys.length - 1];
-
     if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
       // opacity values are unitless
       return value;
     }
-
     return "".concat(value, "px");
   }
-
   return value;
 };
+
 /**
  * a function that parse theme and return { css, vars }
  *
@@ -120,13 +112,10 @@ var getCssValue = function getCssValue(keys, value) {
  * 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)' } } }
  */
-
-
 export default function cssVarsParser(theme, options) {
   var _ref3 = options || {},
-      prefix = _ref3.prefix,
-      shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
-
+    prefix = _ref3.prefix,
+    shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
   var css = {};
   var vars = {};
   var parsedTheme = {};
@@ -135,18 +124,16 @@ export default function cssVarsParser(theme, options) {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
-
         _extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
-
         assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
       }
     }
-
     assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, function (keys) {
     return keys[0] === 'vars';
   } // skip 'vars/*' paths
   );
+
   return {
     css: css,
     vars: vars,

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -5,21 +5,20 @@ export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
 export var DEFAULT_ATTRIBUTE = 'data-color-scheme';
 export default function getInitColorSchemeScript(options) {
   var _ref = options || {},
-      _ref$defaultMode = _ref.defaultMode,
-      defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
-      _ref$defaultLightColo = _ref.defaultLightColorScheme,
-      defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
-      _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
-      defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
-      _ref$modeStorageKey = _ref.modeStorageKey,
-      modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
-      _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
-      colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
-      _ref$attribute = _ref.attribute,
-      attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
-      _ref$colorSchemeNode = _ref.colorSchemeNode,
-      colorSchemeNode = _ref$colorSchemeNode === void 0 ? 'document.documentElement' : _ref$colorSchemeNode;
-
+    _ref$defaultMode = _ref.defaultMode,
+    defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
+    _ref$defaultLightColo = _ref.defaultLightColorScheme,
+    defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
+    _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
+    defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
+    _ref$modeStorageKey = _ref.modeStorageKey,
+    modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
+    _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
+    colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
+    _ref$attribute = _ref.attribute,
+    attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
+    _ref$colorSchemeNode = _ref.colorSchemeNode,
+    colorSchemeNode = _ref$colorSchemeNode === void 0 ? 'document.documentElement' : _ref$colorSchemeNode;
   return /*#__PURE__*/_jsx("script", {
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {