@mui/system 5.0.3 → 5.1.0

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.3
+/** @license MUI v5.1.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -47,18 +47,13 @@ var _exportNames = {
   getThemeProps: true,
   useTheme: true,
   useThemeWithoutDefault: true,
-  ThemeProvider: true
+  ThemeProvider: true,
+  unstable_createCssVarsProvider: true
 };
-Object.defineProperty(exports, "css", {
-  enumerable: true,
-  get: function () {
-    return _styledEngine.css;
-  }
-});
-Object.defineProperty(exports, "keyframes", {
+Object.defineProperty(exports, "Box", {
   enumerable: true,
   get: function () {
-    return _styledEngine.keyframes;
+    return _Box.default;
   }
 });
 Object.defineProperty(exports, "GlobalStyles", {
@@ -73,6 +68,12 @@ Object.defineProperty(exports, "StyledEngineProvider", {
     return _styledEngine.StyledEngineProvider;
   }
 });
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.default;
+  }
+});
 Object.defineProperty(exports, "borders", {
   enumerable: true,
   get: function () {
@@ -85,130 +86,136 @@ Object.defineProperty(exports, "breakpoints", {
     return _breakpoints.default;
   }
 });
-Object.defineProperty(exports, "handleBreakpoints", {
+Object.defineProperty(exports, "compose", {
   enumerable: true,
   get: function () {
-    return _breakpoints.handleBreakpoints;
+    return _compose.default;
   }
 });
-Object.defineProperty(exports, "mergeBreakpointsInOrder", {
+Object.defineProperty(exports, "createBox", {
   enumerable: true,
   get: function () {
-    return _breakpoints.mergeBreakpointsInOrder;
+    return _createBox.default;
   }
 });
-Object.defineProperty(exports, "unstable_resolveBreakpointValues", {
+Object.defineProperty(exports, "createBreakpoints", {
   enumerable: true,
   get: function () {
-    return _breakpoints.resolveBreakpointValues;
+    return _createBreakpoints.default;
   }
 });
-Object.defineProperty(exports, "compose", {
+Object.defineProperty(exports, "createSpacing", {
   enumerable: true,
   get: function () {
-    return _compose.default;
+    return _createSpacing.default;
   }
 });
-Object.defineProperty(exports, "display", {
+Object.defineProperty(exports, "createStyled", {
   enumerable: true,
   get: function () {
-    return _display.default;
+    return _createStyled.default;
   }
 });
-Object.defineProperty(exports, "flexbox", {
+Object.defineProperty(exports, "createTheme", {
   enumerable: true,
   get: function () {
-    return _flexbox.default;
+    return _createTheme.default;
   }
 });
-Object.defineProperty(exports, "grid", {
+Object.defineProperty(exports, "css", {
   enumerable: true,
   get: function () {
-    return _grid.default;
+    return _styledEngine.css;
   }
 });
-Object.defineProperty(exports, "palette", {
+Object.defineProperty(exports, "display", {
   enumerable: true,
   get: function () {
-    return _palette.default;
+    return _display.default;
   }
 });
-Object.defineProperty(exports, "positions", {
+Object.defineProperty(exports, "flexbox", {
   enumerable: true,
   get: function () {
-    return _positions.default;
+    return _flexbox.default;
   }
 });
-Object.defineProperty(exports, "shadows", {
+Object.defineProperty(exports, "getPath", {
   enumerable: true,
   get: function () {
-    return _shadows.default;
+    return _style.getPath;
   }
 });
-Object.defineProperty(exports, "sizing", {
+Object.defineProperty(exports, "getThemeProps", {
   enumerable: true,
   get: function () {
-    return _sizing.default;
+    return _useThemeProps.getThemeProps;
   }
 });
-Object.defineProperty(exports, "spacing", {
+Object.defineProperty(exports, "grid", {
   enumerable: true,
   get: function () {
-    return _spacing.default;
+    return _grid.default;
   }
 });
-Object.defineProperty(exports, "style", {
+Object.defineProperty(exports, "handleBreakpoints", {
   enumerable: true,
   get: function () {
-    return _style.default;
+    return _breakpoints.handleBreakpoints;
   }
 });
-Object.defineProperty(exports, "getPath", {
+Object.defineProperty(exports, "keyframes", {
   enumerable: true,
   get: function () {
-    return _style.getPath;
+    return _styledEngine.keyframes;
   }
 });
-Object.defineProperty(exports, "typography", {
+Object.defineProperty(exports, "mergeBreakpointsInOrder", {
   enumerable: true,
   get: function () {
-    return _typography.default;
+    return _breakpoints.mergeBreakpointsInOrder;
   }
 });
-Object.defineProperty(exports, "unstable_styleFunctionSx", {
+Object.defineProperty(exports, "palette", {
   enumerable: true,
   get: function () {
-    return _styleFunctionSx.default;
+    return _palette.default;
   }
 });
-Object.defineProperty(exports, "unstable_extendSxProp", {
+Object.defineProperty(exports, "positions", {
   enumerable: true,
   get: function () {
-    return _styleFunctionSx.extendSxProp;
+    return _positions.default;
   }
 });
-Object.defineProperty(exports, "unstable_getThemeValue", {
+Object.defineProperty(exports, "shadows", {
   enumerable: true,
   get: function () {
-    return _getThemeValue.default;
+    return _shadows.default;
   }
 });
-Object.defineProperty(exports, "Box", {
+Object.defineProperty(exports, "shape", {
   enumerable: true,
   get: function () {
-    return _Box.default;
+    return _shape.default;
   }
 });
-Object.defineProperty(exports, "createBox", {
+Object.defineProperty(exports, "sizing", {
   enumerable: true,
   get: function () {
-    return _createBox.default;
+    return _sizing.default;
   }
 });
-Object.defineProperty(exports, "createStyled", {
+Object.defineProperty(exports, "spacing", {
   enumerable: true,
   get: function () {
-    return _createStyled.default;
+    return _spacing.default;
+  }
+});
+Object.defineProperty(exports, "style", {
+  enumerable: true,
+  get: function () {
+    return _style.default;
   }
 });
 Object.defineProperty(exports, "styled", {
@@ -217,40 +224,40 @@ Object.defineProperty(exports, "styled", {
     return _styled.default;
   }
 });
-Object.defineProperty(exports, "createTheme", {
+Object.defineProperty(exports, "typography", {
   enumerable: true,
   get: function () {
-    return _createTheme.default;
+    return _typography.default;
   }
 });
-Object.defineProperty(exports, "createBreakpoints", {
+Object.defineProperty(exports, "unstable_createCssVarsProvider", {
   enumerable: true,
   get: function () {
-    return _createBreakpoints.default;
+    return _createCssVarsProvider.default;
   }
 });
-Object.defineProperty(exports, "createSpacing", {
+Object.defineProperty(exports, "unstable_extendSxProp", {
   enumerable: true,
   get: function () {
-    return _createSpacing.default;
+    return _styleFunctionSx.extendSxProp;
   }
 });
-Object.defineProperty(exports, "shape", {
+Object.defineProperty(exports, "unstable_getThemeValue", {
   enumerable: true,
   get: function () {
-    return _shape.default;
+    return _getThemeValue.default;
   }
 });
-Object.defineProperty(exports, "useThemeProps", {
+Object.defineProperty(exports, "unstable_resolveBreakpointValues", {
   enumerable: true,
   get: function () {
-    return _useThemeProps.default;
+    return _breakpoints.resolveBreakpointValues;
   }
 });
-Object.defineProperty(exports, "getThemeProps", {
+Object.defineProperty(exports, "unstable_styleFunctionSx", {
   enumerable: true,
   get: function () {
-    return _useThemeProps.getThemeProps;
+    return _styleFunctionSx.default;
   }
 });
 Object.defineProperty(exports, "useTheme", {
@@ -259,16 +266,16 @@ Object.defineProperty(exports, "useTheme", {
     return _useTheme.default;
   }
 });
-Object.defineProperty(exports, "useThemeWithoutDefault", {
+Object.defineProperty(exports, "useThemeProps", {
   enumerable: true,
   get: function () {
-    return _useThemeWithoutDefault.default;
+    return _useThemeProps.default;
   }
 });
-Object.defineProperty(exports, "ThemeProvider", {
+Object.defineProperty(exports, "useThemeWithoutDefault", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.default;
+    return _useThemeWithoutDefault.default;
   }
 });
 
@@ -450,6 +457,8 @@ Object.keys(_colorManipulator).forEach(function (key) {
 
 var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 
+var _createCssVarsProvider = _interopRequireDefault(require("./cssVars/createCssVarsProvider"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/legacy/breakpoints.js

@@ -10,12 +10,12 @@ export var values = {
   xs: 0,
   // phone
   sm: 600,
-  // tablets
+  // tablet
   md: 900,
   // small laptop
   lg: 1200,
   // desktop
-  xl: 1536 // large screens
+  xl: 1536 // large screen
 
 };
 var defaultBreakpoints = {
@@ -122,10 +122,40 @@ export function mergeBreakpointsInOrder(breakpointsInput) {
     return 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}
+
+export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
+  // fixed value
+  if (_typeof(breakpointValues) !== 'object') {
+    return {};
+  }
+
+  var base = {};
+  var breakpointsKeys = Object.keys(themeBreakpoints);
+
+  if (Array.isArray(breakpointValues)) {
+    breakpointsKeys.forEach(function (breakpoint, i) {
+      if (i < breakpointValues.length) {
+        base[breakpoint] = true;
+      }
+    });
+  } else {
+    breakpointsKeys.forEach(function (breakpoint) {
+      if (breakpointValues[breakpoint] != null) {
+        base[breakpoint] = true;
+      }
+    });
+  }
+
+  return base;
 }
 export function resolveBreakpointValues(_ref) {
   var breakpointValues = _ref.values,
-      base = _ref.base;
+      themeBreakpoints = _ref.breakpoints,
+      customBase = _ref.base;
+  var base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
   var keys = Object.keys(base);
 
   if (keys.length === 0) {
@@ -133,14 +163,15 @@ export function resolveBreakpointValues(_ref) {
   }
 
   var previous;
-  return keys.reduce(function (acc, breakpoint) {
-    if (_typeof(breakpointValues) === 'object') {
-      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
+  return keys.reduce(function (acc, breakpoint, i) {
+    if (Array.isArray(breakpointValues)) {
+      acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
+      previous = i;
     } else {
-      acc[breakpoint] = breakpointValues;
+      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
+      previous = breakpoint;
     }
 
-    previous = breakpoint;
     return acc;
   }, {});
 }

package/legacy/createBox.js

@@ -9,7 +9,10 @@ import useTheme from './useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var defaultTheme = options.defaultTheme;
+  var defaultTheme = options.defaultTheme,
+      _options$defaultClass = options.defaultClassName,
+      defaultClassName = _options$defaultClass === void 0 ? 'MuiBox-root' : _options$defaultClass,
+      generateClassName = options.generateClassName;
   var BoxRoot = styled('div')(styleFunctionSx);
   var Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     var theme = useTheme(defaultTheme);
@@ -23,7 +26,7 @@ export default function createBox() {
     return /*#__PURE__*/_jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
-      className: clsx(className, 'MuiBox-root'),
+      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
       theme: theme
     }, other));
   });
@@ -49,7 +52,7 @@ export default function createBox() {
     /**
      * @ignore
      */
-    sx: PropTypes.object
+    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
   } : void 0;
   return Box;
 }

package/legacy/createStyled.js

@@ -118,7 +118,11 @@ export default function createStyled() {
       }
 
       var expressionsWithDefaultTheme = expressions ? expressions.map(function (stylesArg) {
-        return typeof stylesArg === 'function' ? function (_ref) {
+        // 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 ? function (_ref) {
           var themeInput = _ref.theme,
               other = _objectWithoutProperties(_ref, ["theme"]);
 

package/legacy/createTheme/createBreakpoints.js

@@ -10,12 +10,12 @@ export default function createBreakpoints(breakpoints) {
     xs: 0,
     // phone
     sm: 600,
-    // tablets
+    // tablet
     md: 900,
     // small laptop
     lg: 1200,
     // desktop
-    xl: 1536 // large screens
+    xl: 1536 // large screen
 
   } : _breakpoints$values,
       _breakpoints$unit = breakpoints.unit,

package/legacy/cssVars/createCssVarsProvider.js

@@ -0,0 +1,215 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { GlobalStyles } from '@mui/styled-engine';
+import { deepmerge } from '@mui/utils';
+import cssVarsParser from './cssVarsParser';
+import ThemeProvider from '../ThemeProvider';
+import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import useCurrentColorScheme from './useCurrentColorScheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function createCssVarsProvider(options) {
+  var _options$theme = options.theme,
+      baseTheme = _options$theme === void 0 ? {} : _options$theme,
+      _options$defaultMode = options.defaultMode,
+      desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
+      designSystemColorScheme = options.defaultColorScheme,
+      _options$prefix = options.prefix,
+      designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
+      shouldSkipGeneratingVar = options.shouldSkipGeneratingVar;
+
+  if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.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 ? {} : _ref$theme,
+        _ref$prefix = _ref.prefix,
+        prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
+        _ref$modeStorageKey = _ref.modeStorageKey,
+        modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
+        _ref$attribute = _ref.attribute,
+        attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
+        _ref$defaultMode = _ref.defaultMode,
+        defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _ref$defaultMode,
+        _ref$defaultColorSche = _ref.defaultColorScheme,
+        defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche;
+
+    var _baseTheme$colorSchem = baseTheme.colorSchemes,
+        baseColorSchemes = _baseTheme$colorSchem === void 0 ? {} : _baseTheme$colorSchem,
+        restBaseTheme = _objectWithoutProperties(baseTheme, ["colorSchemes"]);
+
+    var _themeProp$colorSchem = themeProp.colorSchemes,
+        colorSchemesProp = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
+        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes"]);
+
+    var mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    var colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
+    var allColorSchemes = Object.keys(colorSchemes);
+    var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+    var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+
+    var _useCurrentColorSchem = useCurrentColorScheme({
+      supportedColorSchemes: allColorSchemes,
+      defaultLightColorScheme: defaultLightColorScheme,
+      defaultDarkColorScheme: defaultDarkColorScheme,
+      modeStorageKey: modeStorageKey,
+      defaultMode: defaultMode
+    }),
+        mode = _useCurrentColorSchem.mode,
+        setMode = _useCurrentColorSchem.setMode,
+        lightColorScheme = _useCurrentColorSchem.lightColorScheme,
+        darkColorScheme = _useCurrentColorSchem.darkColorScheme,
+        colorScheme = _useCurrentColorSchem.colorScheme,
+        setColorScheme = _useCurrentColorSchem.setColorScheme;
+
+    var resolvedColorScheme = function () {
+      if (!colorScheme) {
+        // This scope occurs on the server
+        if (defaultMode === 'dark') {
+          return defaultDarkColorScheme;
+        } // use light color scheme, if default mode is 'light' | 'auto'
+
+
+        return defaultLightColorScheme;
+      }
+
+      return colorScheme;
+    }();
+
+    var _cssVarsParser = cssVarsParser(mergedTheme, {
+      prefix: prefix,
+      basePrefix: designSystemPrefix,
+      shouldSkipGeneratingVar: shouldSkipGeneratingVar
+    }),
+        rootCss = _cssVarsParser.css,
+        rootVars = _cssVarsParser.vars;
+
+    mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      vars: rootVars
+    });
+    var styleSheet = {};
+    Object.entries(colorSchemes).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          scheme = _ref3[1];
+
+      var _cssVarsParser2 = cssVarsParser(scheme, {
+        prefix: prefix,
+        basePrefix: designSystemPrefix,
+        shouldSkipGeneratingVar: shouldSkipGeneratingVar
+      }),
+          css = _cssVarsParser2.css,
+          vars = _cssVarsParser2.vars;
+
+      if (key === resolvedColorScheme) {
+        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
+      }
+
+      var resolvedDefaultColorScheme = function () {
+        if (typeof defaultColorScheme === 'string') {
+          return defaultColorScheme;
+        }
+
+        if (defaultMode === 'dark') {
+          return defaultColorScheme.dark;
+        }
+
+        return defaultColorScheme.light;
+      }();
+
+      if (key === resolvedDefaultColorScheme) {
+        styleSheet[':root'] = css;
+      } else {
+        styleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = css;
+      }
+    });
+    React.useEffect(function () {
+      if (colorScheme) {
+        document.body.setAttribute(attribute, colorScheme);
+      }
+    }, [colorScheme, attribute]);
+    return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
+      value: {
+        mode: mode,
+        setMode: setMode,
+        lightColorScheme: lightColorScheme,
+        darkColorScheme: darkColorScheme,
+        colorScheme: colorScheme,
+        setColorScheme: setColorScheme,
+        allColorSchemes: allColorSchemes
+      },
+      children: [/*#__PURE__*/_jsx(GlobalStyles, {
+        styles: {
+          ':root': rootCss
+        }
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: styleSheet
+      }), /*#__PURE__*/_jsx(ThemeProvider, {
+        theme: mergedTheme,
+        children: children
+      })]
+    });
+  }
+
+  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
+    /**
+     * The body attribute name to attach colorScheme.
+     */
+    attribute: PropTypes.string,
+
+    /**
+     * Your component tree.
+     */
+    children: PropTypes.node,
+
+    /**
+     * The initial color scheme used.
+     */
+    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+    /**
+     * The initial mode used.
+     */
+    defaultMode: PropTypes.string,
+
+    /**
+     * The key in the local storage used to store current color scheme.
+     */
+    modeStorageKey: PropTypes.string,
+
+    /**
+     * css variable prefix
+     */
+    prefix: PropTypes.string,
+
+    /**
+     * The calculated theme object that will be passed through context.
+     */
+    theme: PropTypes.object
+  } : void 0;
+  return {
+    CssVarsProvider: CssVarsProvider,
+    useColorScheme: useColorScheme,
+    getInitColorSchemeScript: getInitColorSchemeScript
+  };
+}