@mui/system 5.0.4 → 5.0.5

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 ### [Versions](https://mui.com/versions/)
 
+## 5.0.5
+
+<!-- generated comparing v5.0.4..master -->
+
+_Oct 26, 2021_
+
+A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔧 Implement `Masonry` using Flexbox by @hbjORbj.
+- 🧪 Add three components to `@mui/core` by @rebeccahongsf and @hbjORbj.
+
+### `@mui/codemod@5.0.5`
+
+- &#8203;<!-- 38 -->[codemod] Support new package name in `link-underline-hover` transformer (#29214) @siriwatknp
+
+### `@mui/core@5.0.0-alpha.52`
+
+- &#8203;<!-- 39 -->[ClickAwayListener] Move to the core package (#29186) @hbjORbj
+- &#8203;<!-- 13 -->[Popper] Move from mui-material to mui-core (#28923) @rebeccahongsf
+- &#8203;<!-- 04 -->[TextareaAutosize] Move to the core package (#29148) @hbjORbj
+
+### `@mui/lab@5.0.0-alpha.52`
+
+- &#8203;<!-- 16 -->[Masonry] Improve demo styles (#29218) @hbjORbj
+- &#8203;<!-- 15 -->[Masonry] Implement Masonry using Flexbox (#28059) @hbjORbj
+
+### `@mui/icons@5.0.5`
+
+- &#8203;<!-- 19 -->[icons] Add TipsAndUpdates icon (#29004) @hbjORbj
+
+### `@mui/material@5.0.5`
+
+- &#8203;<!-- 40 -->[CardMedia] Apply specified `img` role instead of custom `image` role (#29172) @eps1lon
+- &#8203;<!-- 32 -->[CSSBaseline] Remove incorrect @deprecated annotation (#29069) @adamfitzgibbon
+- &#8203;<!-- 20 -->[Grid] Support custom columns with nested grid (#28743) @Devesh21700Kumar
+- &#8203;<!-- 18 -->[InputBase] Remove wrong theme overriding with MUI's default theme (#29157) @hbjORbj
+- &#8203;<!-- 17 -->[LoadingButton] Fix `fullWidth` styling (#28652) @nikitabobers
+- &#8203;<!-- 16 -->[Popper] make Popper display:none whenever it's closed (#29233) @adamfitzgibbon
+- &#8203;<!-- 14 -->[Menu] Reduce min-height & padding in menu-item with dense property (#29180) @jatinsandilya
+- &#8203;<!-- 07 -->[Tab] `iconPosition` prop added in Tab (#28764) @deepanshu2506
+- &#8203;<!-- 03 -->[Tooltip] Correct inconsistent prop precedence (#29132) @michaldudak
+
+### `@mui/system@5.0.5`
+
+- &#8203;<!-- 11 -->[system] Allow function type for `sx` prop (#29198) @hbjORbj
+- &#8203;<!-- 10 -->[system] Fix various issues reported by using @mui/styled-engine-sc (#29035) @mnajdova
+- &#8203;<!-- 09 -->[system] Fix `colorScheme` conflict between application (#29139) @siriwatknp
+- &#8203;<!-- 08 -->[system] Add `unstable_createCssVarsProvider` api (#28965) @siriwatknp
+
+### Documentation
+
+- &#8203;<!-- 31 -->[docs] Fix path to `DataGrid` CSV export options page (#29220) @DanailH
+- &#8203;<!-- 30 -->[docs] Give anonymous components a name (#29189) @eps1lon
+- &#8203;<!-- 29 -->[docs] Add deploy context variables (#29195) @siriwatknp
+- &#8203;<!-- 28 -->[docs] Add MUI packages explanation (#29073) @siriwatknp
+- &#8203;<!-- 27 -->[docs] Fix typo in CSP policy (#29187) @JuliaNeumann
+- &#8203;<!-- 26 -->[docs] Dark mode conditional content rendering (#28665) @michal-perlakowski
+- &#8203;<!-- 25 -->[docs] Fix ClassNameGenerator introduced version #29177 @siriwatknp
+- &#8203;<!-- 24 -->[docs] Add missing `justifyContent` values and update box styling (#29117) @omarmosid
+- &#8203;<!-- 23 -->[docs] Make landing page hero section scrollable (#29141) @waxidiotic
+- &#8203;<!-- 22 -->[docs] Discourage importing different bundles directly (#29133) @eps1lon
+- &#8203;<!-- 21 -->[docs] Update module augmentation reference url (#29064) @gnowland
+- &#8203;<!-- 12 -->[pricing] Add tooltip to pricing icon (#28959) @siriwatknp
+- &#8203;<!-- 07 -->[Team] Add Alexandre in the about page (#29289)
+- &#8203;<!-- 02 -->[website] Fix status label overflow in AdvancedShowcase (#29143) @LorenzHenk
+- &#8203;<!-- 01 -->[website] Update legacy logos (#28908) @michaldudak
+
+### Core
+
+- &#8203;<!-- 37 -->[core] Order repro methods by preference (#29156) @eps1lon
+- &#8203;<!-- 36 -->[core] Remove unnecessary usages of `useEventCallback` (#28910) @NMinhNguyen
+- &#8203;<!-- 35 -->[core] add `unstable_ClassNameGenerator` API (#29051) @siriwatknp
+- &#8203;<!-- 34 -->[core] Fix issues when using styled-components (#29048) @mnajdova
+- &#8203;<!-- 33 -->[core] replace hard-coded classname with classes (#29070) @siriwatknp
+- &#8203;<!-- 06 -->[test] Add documentation for visual regression tests (#29154) @eps1lon
+- &#8203;<!-- 05 -->[test] Enable "missing act" warnings using new proposal (#29167) @eps1lon
+
+All contributors of this release in alphabetical order: @adamfitzgibbon, @DanailH, @deepanshu2506, @Devesh21700Kumar, @eps1lon, @gnowland, @hbjORbj, @jatinsandilya, @JuliaNeumann, @LorenzHenk, @michal-perlakowski, @michaldudak, @mnajdova, @nikitabobers, @NMinhNguyen, @omarmosid, @rebeccahongsf, @siriwatknp, @waxidiotic
+
 ## 5.0.4
 
 <!-- generated comparing v5.0.3..master -->

package/createStyled.d.ts

@@ -1,208 +1,34 @@
 import * as React from 'react';
-import * as CSS from 'csstype';
+import {
+  CreateMUIStyled as CreateMUIStyledStyledEngine,
+  CSSInterpolation,
+} from '@mui/styled-engine';
 import { SxProps } from './styleFunctionSx';
 import { Theme as DefaultTheme } from './createTheme';
 
-export interface SerializedStyles {
-  name: string;
-  styles: string;
-  map?: string;
-  next?: SerializedStyles;
-}
-
-export type CSSProperties = CSS.PropertiesFallback<number | string>;
-export type CSSPropertiesWithMultiValues = {
-  [K in keyof CSSProperties]: CSSProperties[K] | Array<Extract<CSSProperties[K], string>>;
-};
-export type CSSPseudos = { [K in CSS.Pseudos]?: unknown | CSSObject };
-
-export interface CSSOthersObject {
-  [propertiesName: string]: unknown | CSSInterpolation;
-}
-export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject };
-
-export interface ArrayCSSInterpolation extends Array<CSSInterpolation> {}
-
-export interface CSSOthersObjectForCSSObject {
-  [propertiesName: string]: CSSInterpolation;
-}
-
-export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {}
-
-export interface ComponentSelector {
-  __emotion_styles: any;
-}
-
-export type Keyframes = {
-  name: string;
-  styles: string;
-  anim: number;
-  toString: () => string;
-} & string;
-
-export type Equal<A, B, T, F> = A extends B ? (B extends A ? T : F) : F;
-
-export type InterpolationPrimitive =
-  | null
-  | undefined
-  | boolean
-  | number
-  | string
-  | ComponentSelector
-  | Keyframes
-  | SerializedStyles
-  | CSSObject;
-
-export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation;
-
-export interface FunctionInterpolation<Props> {
-  (props: Props): Interpolation<Props>;
-}
-
-export interface ArrayInterpolation<Props> extends Array<Interpolation<Props>> {}
-
-export type Interpolation<Props> =
-  | InterpolationPrimitive
-  | ArrayInterpolation<Props>
-  | FunctionInterpolation<Props>;
-
-/**
- * @desc Utility type for getting props type of React component.
- * It takes `defaultProps` into an account - making props with defaults optional.
- */
-export type PropsOf<C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> =
-  JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>;
-
-export type Overwrapped<T, U> = Pick<T, Extract<keyof T, keyof U>>;
-
-export interface StyledComponent<InnerProps, OwnerState, Theme extends object>
-  extends React.FunctionComponent<InnerProps & OwnerState & { theme?: Theme }>,
-    ComponentSelector {}
+export function shouldForwardProp(propName: PropertyKey): boolean;
 
-export interface StyledOptions {
-  label?: string;
-  shouldForwardProp?(propName: PropertyKey): boolean;
-  target?: string;
+export interface MUIStyledCommonProps<Theme extends object = DefaultTheme> {
+  theme?: Theme;
+  as?: React.ElementType;
+  sx?: SxProps<Theme>;
 }
 
 export interface MuiStyledOptions {
   name?: string;
   slot?: string;
+  // The difference between Interpolation and CSSInterpolation is that the former supports functions based on props
+  // If we want to support props in the overrides, we will need to change the CSSInterpolation to Interpolation<Props>
   overridesResolver?: (props: any, styles: Record<string, CSSInterpolation>) => CSSInterpolation;
   skipVariantsResolver?: boolean;
   skipSx?: boolean;
 }
 
-/** Same as StyledOptions but shouldForwardProp must be a type guard */
-export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> {
-  label?: string;
-  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
-  target?: string;
-}
-
-/**
- * @typeparam ComponentProps  Props which will be included when withComponent is called
- * @typeparam SpecificComponentProps  Props which will *not* be included when withComponent is called
- */
-export interface CreateStyledComponent<
-  ComponentProps extends {},
-  SpecificComponentProps extends {} = {},
-  JSXProps extends {} = {},
-> {
-  /**
-   * @typeparam AdditionalProps  Additional props to add to your styled component
-   */
-  <AdditionalProps extends {} = {}>(
-    ...styles: Array<
-      Interpolation<
-        ComponentProps & SpecificComponentProps & AdditionalProps & { theme: DefaultTheme }
-      >
-    >
-  ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
-
-  (
-    template: TemplateStringsArray,
-    ...styles: Array<
-      Interpolation<ComponentProps & SpecificComponentProps & { theme: DefaultTheme }>
-    >
-  ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
-
-  /**
-   * @typeparam AdditionalProps  Additional props to add to your styled component
-   */
-  <AdditionalProps extends {}>(
-    template: TemplateStringsArray,
-    ...styles: Array<
-      Interpolation<
-        ComponentProps & SpecificComponentProps & AdditionalProps & { theme: DefaultTheme }
-      >
-    >
-  ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
-}
-
-export interface MUIStyledCommonProps<Theme extends object = DefaultTheme> {
-  theme?: Theme;
-  as?: React.ElementType;
-  sx?: SxProps<Theme>;
-}
-
-export interface CreateMUIStyled<Theme extends object = DefaultTheme> {
-  <
-    C extends React.ComponentClass<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>,
-  >(
-    component: C,
-    options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions,
-  ): CreateStyledComponent<
-    Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps<Theme>,
-    {},
-    {
-      ref?: React.Ref<InstanceType<C>>;
-    }
-  >;
-
-  <C extends React.ComponentClass<React.ComponentProps<C>>>(
-    component: C,
-    options?: StyledOptions & MuiStyledOptions,
-  ): CreateStyledComponent<
-    PropsOf<C> & MUIStyledCommonProps<Theme>,
-    {},
-    {
-      ref?: React.Ref<InstanceType<C>>;
-    }
-  >;
-
-  <
-    C extends React.JSXElementConstructor<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>,
-  >(
-    component: C,
-    options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions,
-  ): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps<Theme>>;
-
-  <C extends React.JSXElementConstructor<React.ComponentProps<C>>>(
-    component: C,
-    options?: StyledOptions & MuiStyledOptions,
-  ): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps<Theme>>;
-
-  <
-    Tag extends keyof JSX.IntrinsicElements,
-    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag],
-  >(
-    tag: Tag,
-    options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps> & MuiStyledOptions,
-  ): CreateStyledComponent<
-    MUIStyledCommonProps<Theme>,
-    Pick<JSX.IntrinsicElements[Tag], ForwardedProps>
-  >;
-
-  <Tag extends keyof JSX.IntrinsicElements>(
-    tag: Tag,
-    options?: StyledOptions & MuiStyledOptions,
-  ): CreateStyledComponent<MUIStyledCommonProps<Theme>, JSX.IntrinsicElements[Tag]>;
-}
-
-export function shouldForwardProp(propName: PropertyKey): boolean;
+export type CreateMUIStyled<T extends object = DefaultTheme> = CreateMUIStyledStyledEngine<
+  MUIStyledCommonProps<T>,
+  MuiStyledOptions,
+  T
+>;
 
 export default function createStyled<T extends object = DefaultTheme>(options?: {
   defaultTheme?: T;

package/cssVars/createCssVarsProvider.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+
+type PartialDeep<T> = {
+  [K in keyof T]?: PartialDeep<T[K]>;
+};
+
+export type BuildCssVarsTheme<ThemeInput> = ThemeInput extends {
+  colorSchemes: Record<string, infer Colors>;
+}
+  ? Omit<ThemeInput, 'colorSchemes'> & { vars: Omit<ThemeInput, 'colorSchemes'> & Colors }
+  : never;
+
+/**
+ * DesignSystemColorScheme: is what a design system provide by default. Mostly, `light` and `dark`
+ * ApplicationColorScheme: is what developer can extend from a design system. Ex, `comfort` `trueDark` ...any name that they want
+ *
+ * This type enhance customization experience by checking if developer has extended the colorScheme or not (usually via module augmentation)
+ * If yes, they must provide the palette of the extended colorScheme. Otherwise `theme` is optional.
+ */
+type DecideTheme<
+  Theme extends { colorSchemes: Record<DesignSystemColorScheme | ApplicationColorScheme, any> },
+  DesignSystemColorScheme extends string,
+  ApplicationColorScheme extends string | never,
+> = [ApplicationColorScheme] extends [never]
+  ? { theme?: PartialDeep<Theme> }
+  : {
+      theme: PartialDeep<Omit<Theme, 'colorSchemes'>> & {
+        colorSchemes: PartialDeep<
+          Record<DesignSystemColorScheme, Theme['colorSchemes'][DesignSystemColorScheme]>
+        > &
+          Record<ApplicationColorScheme, Theme['colorSchemes'][ApplicationColorScheme]>;
+      };
+    };
+
+export interface ColorSchemeContextValue<DesignSystemColorScheme extends string> {
+  allColorSchemes: DesignSystemColorScheme[];
+  colorScheme: DesignSystemColorScheme | undefined;
+  setColorScheme: React.Dispatch<React.SetStateAction<DesignSystemColorScheme | undefined>>;
+}
+
+export default function createCssVarsProvider<
+  ThemeInput extends {
+    colorSchemes: Record<DesignSystemColorScheme | ApplicationColorScheme, any>;
+  },
+  DesignSystemColorScheme extends string,
+  ApplicationColorScheme extends string = never,
+>(
+  ThemeContext: React.Context<BuildCssVarsTheme<ThemeInput> | undefined>,
+  options: {
+    theme: Omit<ThemeInput, 'colorSchemes'> & {
+      colorSchemes: Record<
+        DesignSystemColorScheme,
+        ThemeInput['colorSchemes'][DesignSystemColorScheme]
+      > &
+        Partial<
+          Record<
+            ApplicationColorScheme,
+            ThemeInput['colorSchemes'][DesignSystemColorScheme | ApplicationColorScheme]
+          >
+        >;
+    };
+    defaultColorScheme: DesignSystemColorScheme;
+    prefix?: string;
+  },
+): {
+  CssVarsProvider: (
+    props: React.PropsWithChildren<
+      {
+        defaultColorScheme?: DesignSystemColorScheme | ApplicationColorScheme;
+        storageKey?: string;
+        attribute?: string;
+        prefix?: string;
+      } & DecideTheme<ThemeInput, DesignSystemColorScheme, ApplicationColorScheme>
+    >,
+  ) => React.ReactElement;
+  useColorScheme: () => ColorSchemeContextValue<DesignSystemColorScheme | ApplicationColorScheme>;
+  getInitColorSchemeScript: () => React.ReactElement;
+};
+
+// disable automatic export
+export {};

package/cssVars/createCssVarsProvider.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["colorSchemes"],
+      _excluded2 = ["colorSchemes"];
+
+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 resolveMode = (key, fallback, supportedColorSchemes) => {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  let value;
+
+  try {
+    value = localStorage.getItem(key) || undefined;
+
+    if (!supportedColorSchemes.includes(value)) {
+      value = undefined;
+    }
+  } catch (e) {// Unsupported
+  }
+
+  return value || fallback;
+};
+
+function createCssVarsProvider(ThemeContext, options) {
+  const {
+    theme: baseTheme = {},
+    defaultColorScheme: designSystemColorScheme,
+    prefix: designSystemPrefix = ''
+  } = options;
+
+  if (!baseTheme.colorSchemes || !baseTheme.colorSchemes[designSystemColorScheme]) {
+    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 = {},
+    prefix = designSystemPrefix,
+    storageKey = _getInitColorSchemeScript.DEFAULT_STORAGE_KEY,
+    attribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
+    defaultColorScheme = designSystemColorScheme
+  }) {
+    const {
+      colorSchemes: baseColorSchemes = {}
+    } = baseTheme,
+          restBaseTheme = (0, _objectWithoutPropertiesLoose2.default)(baseTheme, _excluded);
+    const {
+      colorSchemes: colorSchemesProp = {}
+    } = themeProp,
+          restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(themeProp, _excluded2);
+    let mergedTheme = (0, _utils.deepmerge)(restBaseTheme, restThemeProp);
+    const colorSchemes = (0, _utils.deepmerge)(baseColorSchemes, colorSchemesProp);
+    const allColorSchemes = Object.keys(colorSchemes);
+    const joinedColorSchemes = allColorSchemes.join(',');
+    const [colorScheme, setColorScheme] = React.useState(() => resolveMode(storageKey, defaultColorScheme, allColorSchemes));
+    const resolvedColorScheme = colorScheme || defaultColorScheme;
+    const {
+      css: rootCss,
+      vars: rootVars
+    } = (0, _cssVarsParser.default)(mergedTheme, {
+      prefix
+    });
+    mergedTheme = (0, _extends2.default)({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      vars: rootVars
+    });
+    const styleSheet = {};
+    Object.entries(colorSchemes).forEach(([key, scheme]) => {
+      const {
+        css,
+        vars
+      } = (0, _cssVarsParser.default)(scheme, {
+        prefix
+      });
+
+      if (key === resolvedColorScheme) {
+        mergedTheme.vars = (0, _extends2.default)({}, mergedTheme.vars, vars);
+      }
+
+      if (key === defaultColorScheme) {
+        styleSheet[':root'] = (0, _utils.deepmerge)(rootCss, css);
+      } else {
+        styleSheet[`[${attribute}="${key}"]`] = css;
+      }
+    });
+    React.useEffect(() => {
+      if (colorScheme) {
+        document.body.setAttribute(attribute, colorScheme);
+        localStorage.setItem(storageKey, colorScheme);
+      }
+    }, [colorScheme, attribute, storageKey]); // local storage modified in the context of another document
+
+    React.useEffect(() => {
+      const handleStorage = event => {
+        const storageColorScheme = event.newValue;
+
+        if (event.key === storageKey && joinedColorSchemes.match(storageColorScheme)) {
+          if (storageColorScheme) {
+            setColorScheme(storageColorScheme);
+          }
+        }
+      };
+
+      window.addEventListener('storage', handleStorage);
+      return () => window.removeEventListener('storage', handleStorage);
+    }, [setColorScheme, storageKey, joinedColorSchemes]);
+    const wrappedSetColorScheme = React.useCallback(val => {
+      if (typeof val === 'string' && !allColorSchemes.includes(val)) {
+        console.error(`\`${val}\` does not exist in \`theme.colorSchemes\`.`);
+      } else {
+        setColorScheme(val);
+      }
+    }, [setColorScheme, allColorSchemes]);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ColorSchemeContext.Provider, {
+      value: {
+        colorScheme,
+        setColorScheme: wrappedSetColorScheme,
+        allColorSchemes
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+        styles: styleSheet
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
+        value: mergedTheme,
+        children: children
+      })]
+    });
+  }
+
+  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
+    /**
+     * The body attribute name to attach colorScheme.
+     */
+    attribute: _propTypes.default.string,
+
+    /**
+     * Your component tree.
+     */
+    children: _propTypes.default.node,
+
+    /**
+     * The initial color scheme used.
+     */
+    defaultColorScheme: _propTypes.default.string,
+
+    /**
+     * css variable prefix
+     */
+    prefix: _propTypes.default.string,
+
+    /**
+     * The key in the local storage used to store current color scheme.
+     */
+    storageKey: _propTypes.default.string,
+
+    /**
+     * The calculated theme object that will be passed through context.
+     */
+    theme: _propTypes.default.object
+  } : void 0;
+  return {
+    CssVarsProvider,
+    useColorScheme,
+    getInitColorSchemeScript: _getInitColorSchemeScript.default
+  };
+}

package/cssVars/createCssVarsProvider.spec.d.ts

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

package/cssVars/cssVarsParser.d.ts

@@ -0,0 +1,57 @@
+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: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => 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) => void) => void;
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{ prefix?: string }} options
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
+ *
+ * @example
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: '#000000' } }
+ * })
+ *
+ * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
+ * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ */
+export default function cssVarsParser(obj: Record<string, any>, options?: {
+    prefix?: string;
+}): {
+    css: NestedRecord<string>;
+    vars: NestedRecord<string>;
+};
+export {};