@mui/system 5.10.13 → 5.10.14

package/cssVars/createCssVarsProvider.js

@@ -1,44 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DISABLE_CSS_TRANSITION = void 0;
 exports.default = createCssVarsProvider;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _utils = require("@mui/utils");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledEngine = require("@mui/styled-engine");
-
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
-
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
-
 var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
-
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
-
 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; }
-
 const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 exports.DISABLE_CSS_TRANSITION = DISABLE_CSS_TRANSITION;
-
 function createCssVarsProvider(options) {
   const {
     theme: defaultTheme = {},
@@ -52,23 +35,17 @@ function createCssVarsProvider(options) {
     resolveTheme,
     excludeVariablesFromRoot
   } = options;
-
   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: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
   }
-
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
-
   const useColorScheme = () => {
     const value = React.useContext(ColorSchemeContext);
-
     if (!value) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : (0, _utils.formatMuiErrorMessage)(19));
     }
-
     return value;
   };
-
   function CssVarsProvider({
     children,
     theme: themeProp = defaultTheme,
@@ -86,15 +63,16 @@ function createCssVarsProvider(options) {
   }) {
     const hasMounted = React.useRef(false);
     const {
-      colorSchemes = {},
-      components = {},
-      cssVarPrefix
-    } = themeProp,
-          restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(themeProp, _excluded);
+        colorSchemes = {},
+        components = {},
+        cssVarPrefix
+      } = themeProp,
+      restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(themeProp, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
+    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
 
+    // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
       mode,
       setMode,
@@ -112,35 +90,29 @@ function createCssVarsProvider(options) {
       defaultMode,
       storageWindow
     });
-
     const calculatedMode = (() => {
       if (!mode) {
         // This scope occurs on the server
         if (defaultMode === 'system') {
           return designSystemMode;
         }
-
         return defaultMode;
       }
-
       return mode;
     })();
-
     const calculatedColorScheme = (() => {
       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)
     const {
       css: rootCss,
       vars: rootVars,
@@ -148,18 +120,20 @@ function createCssVarsProvider(options) {
     } = (0, _cssVarsParser.default)(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
-    }); // 3. Start composing the theme object
+    });
 
+    // 3. Start composing the theme object
     let theme = (0, _extends2.default)({}, parsedTheme, {
       components,
       colorSchemes,
       cssVarPrefix,
       vars: rootVars,
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${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.
-
     const defaultColorSchemeStyleSheet = {};
     const otherColorSchemesStyleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -172,28 +146,22 @@ function createCssVarsProvider(options) {
         shouldSkipGeneratingVar
       });
       theme.vars = (0, _utils.deepmerge)(theme.vars, vars);
-
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
         theme = (0, _extends2.default)({}, theme, parsedScheme);
-
         if (theme.palette) {
           theme.palette.colorScheme = key;
         }
       }
-
       const resolvedDefaultColorScheme = (() => {
         if (typeof defaultColorScheme === 'string') {
           return defaultColorScheme;
         }
-
         if (defaultMode === 'dark') {
           return defaultColorScheme.dark;
         }
-
         return defaultColorScheme.light;
       })();
-
       if (key === resolvedDefaultColorScheme) {
         if (excludeVariablesFromRoot) {
           const excludedVariables = {};
@@ -203,37 +171,36 @@ function createCssVarsProvider(options) {
           });
           defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables;
         }
-
         defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
       } else {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${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(() => {
       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(() => {
       let timer;
-
       if (disableTransitionOnChange && hasMounted.current && documentNode) {
         const 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
         (() => window.getComputedStyle(documentNode.body))();
-
         timer = setTimeout(() => {
           documentNode.head.removeChild(css);
         }, 1);
       }
-
       return () => {
         clearTimeout(timer);
       };
@@ -270,69 +237,56 @@ function createCssVarsProvider(options) {
       })]
     });
   }
-
   process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
     /**
      * The body attribute name to attach colorScheme.
      */
     attribute: _propTypes.default.string,
-
     /**
      * The component tree.
      */
     children: _propTypes.default.node,
-
     /**
      * The node used to attach the color-scheme attribute
      */
     colorSchemeNode: _propTypes.default.any,
-
     /**
      * The CSS selector for attaching the generated custom properties
      */
     colorSchemeSelector: _propTypes.default.string,
-
     /**
      * localStorage key used to store `colorScheme`
      */
     colorSchemeStorageKey: _propTypes.default.string,
-
     /**
      * The initial color scheme used.
      */
     defaultColorScheme: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-
     /**
      * The initial mode used.
      */
     defaultMode: _propTypes.default.string,
-
     /**
      * Disable CSS transitions when switching between modes or color schemes
      */
     disableTransitionOnChange: _propTypes.default.bool,
-
     /**
      * The document to attach the attribute to
      */
     documentNode: _propTypes.default.any,
-
     /**
      * The key in the local storage used to store current color scheme.
      */
     modeStorageKey: _propTypes.default.string,
-
     /**
      * A function to determine if the key, value should be attached as CSS Variable
      */
     shouldSkipGeneratingVar: _propTypes.default.func,
-
     /**
      * The window that attaches the 'storage' event listener
      * @default window
      */
     storageWindow: _propTypes.default.any,
-
     /**
      * The calculated theme object that will be passed through context.
      */
@@ -340,7 +294,6 @@ function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-
   const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)((0, _extends2.default)({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
@@ -349,7 +302,6 @@ function createCssVarsProvider(options) {
     defaultDarkColorScheme,
     modeStorageKey: defaultModeStorageKey
   }, params));
-
   return {
     CssVarsProvider,
     useColorScheme,

package/cssVars/createCssVarsProvider.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/cssVars/createGetCssVar.d.ts

@@ -1,5 +1,5 @@
-/**
- * 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<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...fallbacks: (T | AdditionalVars)[]) => string;
+/**
+ * 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<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...fallbacks: (T | AdditionalVars)[]) => string;

package/cssVars/createGetCssVar.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createGetCssVar;
-
 /**
  * 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).
@@ -14,20 +13,16 @@ function createGetCssVar(prefix = '') {
     if (!vars.length) {
       return '';
     }
-
     const value = vars[0];
-
     if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
       return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
     }
-
     return `, ${value}`;
-  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
-
+  }
 
+  // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
   const getCssVar = (field, ...fallbacks) => {
     return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;
   };
-
   return getCssVar;
 }

package/cssVars/cssVarsParser.d.ts

@@ -1,65 +1,65 @@
-declare type NestedRecord<V = any> = {
-    [k: string | number]: NestedRecord<V> | V;
-};
-/**
- * This function create an object from keys, value and then assign to target
- *
- * @param {Object} obj : the target object to be assigned
- * @param {string[]} keys
- * @param {string | number} value
- *
- * @example
- * const source = {}
- * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
- *
- * @example
- * const source = { palette: { primary: 'var(--palette-primary)' } }
- * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
- */
-export declare const assignNestedKeys: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
-/**
- *
- * @param {Object} obj : source object
- * @param {Function} callback : a function that will be called when
- *                   - the deepest key in source object is reached
- *                   - the value of the deepest key is NOT `undefined` | `null`
- *
- * @example
- * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
- * // ['palette', 'primary', 'main'] '#000000'
- */
-export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
-/**
- * a function that parse theme and return { css, vars }
- *
- * @param {Object} theme
- * @param {{
- *  prefix?: string,
- *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
- * }} options.
- *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
- *
- * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
- *
- * @example
- * const { css, vars, parsedTheme } = parser({
- *   fontSize: 12,
- *   lineHeight: 1.2,
- *   palette: { primary: { 500: 'var(--color)' } }
- * }, { prefix: 'foo' })
- *
- * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
- * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
- */
-export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
-    prefix?: string;
-    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-}): {
-    css: Record<string, string | number>;
-    vars: NestedRecord<string>;
-    parsedTheme: T;
-};
-export {};
+declare type NestedRecord<V = any> = {
+    [k: string | number]: NestedRecord<V> | V;
+};
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export declare const assignNestedKeys: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
+ *
+ * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+ *
+ * @example
+ * const { css, vars, parsedTheme } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
+ *
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
+ */
+export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
+    prefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    css: Record<string, string | number>;
+    vars: NestedRecord<string>;
+    parsedTheme: T;
+};
+export {};

package/cssVars/cssVarsParser.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.assignNestedKeys = void 0;
 exports.default = cssVarsParser;
 exports.walkObjectDeep = void 0;
-
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -37,11 +36,11 @@ const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
       if (!temp[k]) {
         temp[k] = arrayKeys.includes(k) ? [] : {};
       }
-
       temp = temp[k];
     }
   });
 };
+
 /**
  *
  * @param {Object} obj : source object
@@ -53,10 +52,7 @@ const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
  * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
  * // ['palette', 'primary', 'main'] '#000000'
  */
-
-
 exports.assignNestedKeys = assignNestedKeys;
-
 const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = [], arrayKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
@@ -71,31 +67,25 @@ const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
       }
     });
   }
-
   recurse(obj);
 };
-
 exports.walkObjectDeep = walkObjectDeep;
-
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
       // CSS property that are unitless
       return value;
     }
-
     const lastKey = keys[keys.length - 1];
-
     if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
       // opacity values are unitless
       return value;
     }
-
     return `${value}px`;
   }
-
   return value;
 };
+
 /**
  * a function that parse theme and return { css, vars }
  *
@@ -119,8 +109,6 @@ const 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)' } } }
  */
-
-
 function cssVarsParser(theme, options) {
   const {
     prefix,
@@ -140,10 +128,10 @@ function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
-
     assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
   );
+
   return {
     css,
     vars,

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,42 +1,42 @@
-/// <reference types="react" />
-export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
-export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
-export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
-export interface GetInitColorSchemeScriptOptions {
-    /**
-     * The mode to be used for the first visit
-     * @default 'light'
-     */
-    defaultMode?: 'light' | 'dark' | 'system';
-    /**
-     * The default color scheme to be used on the light mode
-     * @default 'light'
-     */
-    defaultLightColorScheme?: string;
-    /**
-     * The default color scheme to be used on the dark mode
-     * * @default 'dark'
-     */
-    defaultDarkColorScheme?: string;
-    /**
-     * The node (provided as string) used to attach the color-scheme attribute
-     * @default 'document.documentElement'
-     */
-    colorSchemeNode?: string;
-    /**
-     * localStorage key used to store `mode`
-     * @default 'mode'
-     */
-    modeStorageKey?: string;
-    /**
-     * localStorage key used to store `colorScheme`
-     * @default 'color-scheme'
-     */
-    colorSchemeStorageKey?: string;
-    /**
-     * DOM attribute for applying color scheme
-     * @default 'data-color-scheme'
-     */
-    attribute?: string;
-}
-export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;
+/// <reference types="react" />
+export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
+export interface GetInitColorSchemeScriptOptions {
+    /**
+     * The mode to be used for the first visit
+     * @default 'light'
+     */
+    defaultMode?: 'light' | 'dark' | 'system';
+    /**
+     * The default color scheme to be used on the light mode
+     * @default 'light'
+     */
+    defaultLightColorScheme?: string;
+    /**
+     * The default color scheme to be used on the dark mode
+     * * @default 'dark'
+     */
+    defaultDarkColorScheme?: string;
+    /**
+     * The node (provided as string) used to attach the color-scheme attribute
+     * @default 'document.documentElement'
+     */
+    colorSchemeNode?: string;
+    /**
+     * localStorage key used to store `mode`
+     * @default 'mode'
+     */
+    modeStorageKey?: string;
+    /**
+     * localStorage key used to store `colorScheme`
+     * @default 'color-scheme'
+     */
+    colorSchemeStorageKey?: string;
+    /**
+     * DOM attribute for applying color scheme
+     * @default 'data-color-scheme'
+     */
+    attribute?: string;
+}
+export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;