@mui/system 5.10.13 → 5.10.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (206) hide show
  1. package/Box/Box.js +1 -10
  2. package/Box/Box.spec.d.ts +1 -1
  3. package/Box/index.js +0 -2
  4. package/CHANGELOG.md +70 -2
  5. package/Container/Container.d.ts +13 -13
  6. package/Container/Container.js +2 -17
  7. package/Container/ContainerProps.d.ts +40 -40
  8. package/Container/containerClasses.d.ts +22 -22
  9. package/Container/containerClasses.js +0 -3
  10. package/Container/createContainer.d.ts +18 -18
  11. package/Container/createContainer.js +15 -37
  12. package/Container/index.js +0 -6
  13. package/Stack/Stack.d.ts +13 -13
  14. package/Stack/Stack.js +1 -12
  15. package/Stack/StackProps.d.ts +42 -42
  16. package/Stack/createStack.d.ts +21 -21
  17. package/Stack/createStack.js +10 -48
  18. package/Stack/index.d.ts +5 -5
  19. package/Stack/index.js +0 -9
  20. package/Stack/stackClasses.d.ts +8 -8
  21. package/Stack/stackClasses.js +0 -3
  22. package/ThemeProvider/ThemeProvider.js +2 -22
  23. package/ThemeProvider/index.js +0 -2
  24. package/Unstable_Grid/Grid.d.ts +12 -12
  25. package/Unstable_Grid/Grid.js +6 -42
  26. package/Unstable_Grid/GridProps.d.ts +162 -162
  27. package/Unstable_Grid/createGrid.d.ts +11 -11
  28. package/Unstable_Grid/createGrid.js +19 -49
  29. package/Unstable_Grid/gridClasses.d.ts +20 -20
  30. package/Unstable_Grid/gridClasses.js +8 -7
  31. package/Unstable_Grid/gridGenerator.d.ts +29 -28
  32. package/Unstable_Grid/gridGenerator.js +22 -63
  33. package/Unstable_Grid/index.d.ts +5 -5
  34. package/Unstable_Grid/index.js +0 -9
  35. package/borders.js +0 -14
  36. package/breakpoints.js +3 -32
  37. package/colorManipulator.js +13 -55
  38. package/compose.js +0 -7
  39. package/createBox.js +5 -20
  40. package/createBox.spec.d.ts +1 -1
  41. package/createStyled.js +27 -71
  42. package/createTheme/createBreakpoints.js +22 -37
  43. package/createTheme/createSpacing.d.ts +10 -10
  44. package/createTheme/createSpacing.js +4 -8
  45. package/createTheme/createTheme.js +6 -16
  46. package/createTheme/index.js +0 -2
  47. package/cssGrid.js +0 -21
  48. package/cssVars/createCssVarsProvider.js +24 -72
  49. package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
  50. package/cssVars/createGetCssVar.d.ts +5 -5
  51. package/cssVars/createGetCssVar.js +2 -7
  52. package/cssVars/cssVarsParser.d.ts +65 -65
  53. package/cssVars/cssVarsParser.js +3 -15
  54. package/cssVars/getInitColorSchemeScript.d.ts +42 -42
  55. package/cssVars/getInitColorSchemeScript.js +0 -6
  56. package/cssVars/index.d.ts +3 -3
  57. package/cssVars/index.js +0 -3
  58. package/cssVars/useCurrentColorScheme.d.ts +53 -53
  59. package/cssVars/useCurrentColorScheme.js +20 -49
  60. package/display.js +0 -6
  61. package/esm/Box/Box.js +1 -6
  62. package/esm/Container/Container.js +3 -14
  63. package/esm/Container/createContainer.js +15 -25
  64. package/esm/Stack/Stack.js +1 -9
  65. package/esm/Stack/createStack.js +10 -29
  66. package/esm/ThemeProvider/ThemeProvider.js +2 -11
  67. package/esm/Unstable_Grid/Grid.js +6 -39
  68. package/esm/Unstable_Grid/createGrid.js +18 -35
  69. package/esm/Unstable_Grid/gridClasses.js +8 -4
  70. package/esm/Unstable_Grid/gridGenerator.js +20 -38
  71. package/esm/borders.js +0 -6
  72. package/esm/breakpoints.js +7 -22
  73. package/esm/colorManipulator.js +13 -43
  74. package/esm/compose.js +0 -5
  75. package/esm/createBox.js +5 -7
  76. package/esm/createStyled.js +27 -64
  77. package/esm/createTheme/createBreakpoints.js +22 -34
  78. package/esm/createTheme/createSpacing.js +4 -7
  79. package/esm/createTheme/createTheme.js +6 -9
  80. package/esm/cssGrid.js +0 -9
  81. package/esm/cssVars/createCssVarsProvider.js +24 -58
  82. package/esm/cssVars/createGetCssVar.js +2 -6
  83. package/esm/cssVars/cssVarsParser.js +3 -11
  84. package/esm/cssVars/useCurrentColorScheme.js +20 -44
  85. package/esm/getThemeValue.js +0 -2
  86. package/esm/index.js +1 -2
  87. package/esm/memoize.js +0 -1
  88. package/esm/merge.js +0 -3
  89. package/esm/palette.js +0 -3
  90. package/esm/propsToClassKey.js +4 -7
  91. package/esm/sizing.js +0 -5
  92. package/esm/spacing.js +3 -23
  93. package/esm/style.js +2 -19
  94. package/esm/styleFunctionSx/extendSxProp.js +3 -10
  95. package/esm/styleFunctionSx/styleFunctionSx.js +3 -16
  96. package/esm/sx/sx.js +0 -2
  97. package/esm/useTheme.js +0 -2
  98. package/esm/useThemeProps/getThemeProps.js +0 -2
  99. package/esm/useThemeWithoutDefault.js +0 -3
  100. package/flexbox.js +0 -4
  101. package/getThemeValue.js +0 -14
  102. package/index.js +1 -55
  103. package/index.spec.d.ts +1 -1
  104. package/legacy/Box/Box.js +1 -6
  105. package/legacy/Container/Container.js +3 -14
  106. package/legacy/Container/createContainer.js +29 -39
  107. package/legacy/Stack/Stack.js +1 -9
  108. package/legacy/Stack/createStack.js +17 -37
  109. package/legacy/ThemeProvider/ThemeProvider.js +3 -12
  110. package/legacy/Unstable_Grid/Grid.js +6 -39
  111. package/legacy/Unstable_Grid/createGrid.js +34 -53
  112. package/legacy/Unstable_Grid/gridGenerator.js +36 -58
  113. package/legacy/borders.js +0 -6
  114. package/legacy/breakpoints.js +9 -28
  115. package/legacy/colorManipulator.js +16 -48
  116. package/legacy/compose.js +0 -6
  117. package/legacy/createBox.js +9 -11
  118. package/legacy/createStyled.js +27 -68
  119. package/legacy/createTheme/createBreakpoints.js +20 -33
  120. package/legacy/createTheme/createSpacing.js +4 -9
  121. package/legacy/createTheme/createTheme.js +7 -13
  122. package/legacy/cssGrid.js +0 -9
  123. package/legacy/cssVars/createCssVarsProvider.js +90 -129
  124. package/legacy/cssVars/createGetCssVar.js +2 -10
  125. package/legacy/cssVars/cssVarsParser.js +7 -20
  126. package/legacy/cssVars/getInitColorSchemeScript.js +14 -15
  127. package/legacy/cssVars/useCurrentColorScheme.js +43 -69
  128. package/legacy/getThemeValue.js +0 -3
  129. package/legacy/index.js +2 -3
  130. package/legacy/memoize.js +0 -1
  131. package/legacy/merge.js +0 -3
  132. package/legacy/palette.js +0 -3
  133. package/legacy/propsToClassKey.js +2 -5
  134. package/legacy/sizing.js +0 -5
  135. package/legacy/spacing.js +6 -27
  136. package/legacy/style.js +6 -24
  137. package/legacy/styleFunctionSx/extendSxProp.js +3 -11
  138. package/legacy/styleFunctionSx/styleFunctionSx.js +6 -21
  139. package/legacy/sx/sx.js +0 -2
  140. package/legacy/useTheme.js +0 -2
  141. package/legacy/useThemeProps/getThemeProps.js +2 -4
  142. package/legacy/useThemeProps/useThemeProps.js +2 -2
  143. package/legacy/useThemeWithoutDefault.js +0 -3
  144. package/memoize.js +0 -2
  145. package/merge.js +0 -5
  146. package/modern/Box/Box.js +1 -6
  147. package/modern/Container/Container.js +3 -14
  148. package/modern/Container/createContainer.js +15 -25
  149. package/modern/Stack/Stack.js +1 -9
  150. package/modern/Stack/createStack.js +10 -29
  151. package/modern/ThemeProvider/ThemeProvider.js +2 -11
  152. package/modern/Unstable_Grid/Grid.js +6 -39
  153. package/modern/Unstable_Grid/createGrid.js +18 -34
  154. package/modern/Unstable_Grid/gridClasses.js +8 -4
  155. package/modern/Unstable_Grid/gridGenerator.js +20 -36
  156. package/modern/borders.js +0 -6
  157. package/modern/breakpoints.js +7 -21
  158. package/modern/colorManipulator.js +13 -43
  159. package/modern/compose.js +0 -5
  160. package/modern/createBox.js +5 -7
  161. package/modern/createStyled.js +27 -63
  162. package/modern/createTheme/createBreakpoints.js +22 -34
  163. package/modern/createTheme/createSpacing.js +4 -7
  164. package/modern/createTheme/createTheme.js +6 -9
  165. package/modern/cssGrid.js +0 -9
  166. package/modern/cssVars/createCssVarsProvider.js +24 -58
  167. package/modern/cssVars/createGetCssVar.js +2 -6
  168. package/modern/cssVars/cssVarsParser.js +3 -11
  169. package/modern/cssVars/useCurrentColorScheme.js +20 -44
  170. package/modern/getThemeValue.js +0 -2
  171. package/modern/index.js +2 -3
  172. package/modern/memoize.js +0 -1
  173. package/modern/merge.js +0 -3
  174. package/modern/palette.js +0 -3
  175. package/modern/propsToClassKey.js +4 -7
  176. package/modern/sizing.js +0 -4
  177. package/modern/spacing.js +3 -22
  178. package/modern/style.js +2 -19
  179. package/modern/styleFunctionSx/extendSxProp.js +3 -10
  180. package/modern/styleFunctionSx/styleFunctionSx.js +3 -16
  181. package/modern/sx/sx.js +0 -2
  182. package/modern/useTheme.js +0 -2
  183. package/modern/useThemeProps/getThemeProps.js +0 -2
  184. package/modern/useThemeWithoutDefault.js +0 -3
  185. package/package.json +6 -6
  186. package/palette.js +0 -6
  187. package/positions.js +0 -6
  188. package/propsToClassKey.js +4 -10
  189. package/responsivePropType.js +0 -3
  190. package/shadows.js +0 -3
  191. package/sizing.js +0 -11
  192. package/spacing.js +3 -37
  193. package/style.js +2 -24
  194. package/styleFunctionSx/extendSxProp.js +3 -15
  195. package/styleFunctionSx/index.js +0 -5
  196. package/styleFunctionSx/styleFunctionSx.js +3 -21
  197. package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
  198. package/styled.js +0 -3
  199. package/sx/index.js +0 -2
  200. package/sx/sx.js +0 -4
  201. package/typography.js +0 -4
  202. package/useTheme.js +0 -6
  203. package/useThemeProps/getThemeProps.js +0 -4
  204. package/useThemeProps/index.js +0 -3
  205. package/useThemeProps/useThemeProps.js +0 -4
  206. package/useThemeWithoutDefault.js +0 -4
@@ -17,131 +17,116 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
17
17
  export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
18
18
  export default function createCssVarsProvider(options) {
19
19
  var _options$theme = options.theme,
20
- defaultTheme = _options$theme === void 0 ? {} : _options$theme,
21
- _options$attribute = options.attribute,
22
- defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
23
- _options$modeStorageK = options.modeStorageKey,
24
- defaultModeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
25
- _options$colorSchemeS = options.colorSchemeStorageKey,
26
- defaultColorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
27
- _options$defaultMode = options.defaultMode,
28
- designSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
29
- designSystemColorScheme = options.defaultColorScheme,
30
- _options$disableTrans = options.disableTransitionOnChange,
31
- designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
32
- designSystemShouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
33
- resolveTheme = options.resolveTheme,
34
- excludeVariablesFromRoot = options.excludeVariablesFromRoot;
35
-
20
+ defaultTheme = _options$theme === void 0 ? {} : _options$theme,
21
+ _options$attribute = options.attribute,
22
+ defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
23
+ _options$modeStorageK = options.modeStorageKey,
24
+ defaultModeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
25
+ _options$colorSchemeS = options.colorSchemeStorageKey,
26
+ defaultColorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
27
+ _options$defaultMode = options.defaultMode,
28
+ designSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
29
+ designSystemColorScheme = options.defaultColorScheme,
30
+ _options$disableTrans = options.disableTransitionOnChange,
31
+ designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
32
+ designSystemShouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
33
+ resolveTheme = options.resolveTheme,
34
+ excludeVariablesFromRoot = options.excludeVariablesFromRoot;
36
35
  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]) {
37
36
  console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
38
37
  }
39
-
40
38
  var ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
41
-
42
39
  var useColorScheme = function useColorScheme() {
43
40
  var value = React.useContext(ColorSchemeContext);
44
-
45
41
  if (!value) {
46
42
  throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `useColorScheme` must be called under <CssVarsProvider />" : _formatMuiErrorMessage(19));
47
43
  }
48
-
49
44
  return value;
50
45
  };
51
-
52
46
  function CssVarsProvider(_ref) {
53
47
  var children = _ref.children,
54
- _ref$theme = _ref.theme,
55
- themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
56
- _ref$modeStorageKey = _ref.modeStorageKey,
57
- modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
58
- _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
59
- colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? defaultColorSchemeStorageKey : _ref$colorSchemeStora,
60
- _ref$attribute = _ref.attribute,
61
- attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
62
- _ref$defaultMode = _ref.defaultMode,
63
- defaultMode = _ref$defaultMode === void 0 ? designSystemMode : _ref$defaultMode,
64
- _ref$defaultColorSche = _ref.defaultColorScheme,
65
- defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche,
66
- _ref$disableTransitio = _ref.disableTransitionOnChange,
67
- disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
68
- _ref$storageWindow = _ref.storageWindow,
69
- storageWindow = _ref$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _ref$storageWindow,
70
- _ref$documentNode = _ref.documentNode,
71
- documentNode = _ref$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _ref$documentNode,
72
- _ref$colorSchemeNode = _ref.colorSchemeNode,
73
- colorSchemeNode = _ref$colorSchemeNode === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _ref$colorSchemeNode,
74
- _ref$colorSchemeSelec = _ref.colorSchemeSelector,
75
- colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
76
- _ref$shouldSkipGenera = _ref.shouldSkipGeneratingVar,
77
- shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera;
48
+ _ref$theme = _ref.theme,
49
+ themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
50
+ _ref$modeStorageKey = _ref.modeStorageKey,
51
+ modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
52
+ _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
53
+ colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? defaultColorSchemeStorageKey : _ref$colorSchemeStora,
54
+ _ref$attribute = _ref.attribute,
55
+ attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
56
+ _ref$defaultMode = _ref.defaultMode,
57
+ defaultMode = _ref$defaultMode === void 0 ? designSystemMode : _ref$defaultMode,
58
+ _ref$defaultColorSche = _ref.defaultColorScheme,
59
+ defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche,
60
+ _ref$disableTransitio = _ref.disableTransitionOnChange,
61
+ disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
62
+ _ref$storageWindow = _ref.storageWindow,
63
+ storageWindow = _ref$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _ref$storageWindow,
64
+ _ref$documentNode = _ref.documentNode,
65
+ documentNode = _ref$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _ref$documentNode,
66
+ _ref$colorSchemeNode = _ref.colorSchemeNode,
67
+ colorSchemeNode = _ref$colorSchemeNode === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _ref$colorSchemeNode,
68
+ _ref$colorSchemeSelec = _ref.colorSchemeSelector,
69
+ colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
70
+ _ref$shouldSkipGenera = _ref.shouldSkipGeneratingVar,
71
+ shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera;
78
72
  var hasMounted = React.useRef(false);
79
-
80
73
  var _themeProp$colorSchem = themeProp.colorSchemes,
81
- colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
82
- _themeProp$components = themeProp.components,
83
- components = _themeProp$components === void 0 ? {} : _themeProp$components,
84
- cssVarPrefix = themeProp.cssVarPrefix,
85
- restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components", "cssVarPrefix"]);
86
-
74
+ colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
75
+ _themeProp$components = themeProp.components,
76
+ components = _themeProp$components === void 0 ? {} : _themeProp$components,
77
+ cssVarPrefix = themeProp.cssVarPrefix,
78
+ restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components", "cssVarPrefix"]);
87
79
  var allColorSchemes = Object.keys(colorSchemes);
88
80
  var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
89
- var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
81
+ var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
90
82
 
83
+ // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
91
84
  var _useCurrentColorSchem = useCurrentColorScheme({
92
- supportedColorSchemes: allColorSchemes,
93
- defaultLightColorScheme: defaultLightColorScheme,
94
- defaultDarkColorScheme: defaultDarkColorScheme,
95
- modeStorageKey: modeStorageKey,
96
- colorSchemeStorageKey: colorSchemeStorageKey,
97
- defaultMode: defaultMode,
98
- storageWindow: storageWindow
99
- }),
100
- mode = _useCurrentColorSchem.mode,
101
- setMode = _useCurrentColorSchem.setMode,
102
- systemMode = _useCurrentColorSchem.systemMode,
103
- lightColorScheme = _useCurrentColorSchem.lightColorScheme,
104
- darkColorScheme = _useCurrentColorSchem.darkColorScheme,
105
- colorScheme = _useCurrentColorSchem.colorScheme,
106
- setColorScheme = _useCurrentColorSchem.setColorScheme;
107
-
85
+ supportedColorSchemes: allColorSchemes,
86
+ defaultLightColorScheme: defaultLightColorScheme,
87
+ defaultDarkColorScheme: defaultDarkColorScheme,
88
+ modeStorageKey: modeStorageKey,
89
+ colorSchemeStorageKey: colorSchemeStorageKey,
90
+ defaultMode: defaultMode,
91
+ storageWindow: storageWindow
92
+ }),
93
+ mode = _useCurrentColorSchem.mode,
94
+ setMode = _useCurrentColorSchem.setMode,
95
+ systemMode = _useCurrentColorSchem.systemMode,
96
+ lightColorScheme = _useCurrentColorSchem.lightColorScheme,
97
+ darkColorScheme = _useCurrentColorSchem.darkColorScheme,
98
+ colorScheme = _useCurrentColorSchem.colorScheme,
99
+ setColorScheme = _useCurrentColorSchem.setColorScheme;
108
100
  var calculatedMode = function () {
109
101
  if (!mode) {
110
102
  // This scope occurs on the server
111
103
  if (defaultMode === 'system') {
112
104
  return designSystemMode;
113
105
  }
114
-
115
106
  return defaultMode;
116
107
  }
117
-
118
108
  return mode;
119
109
  }();
120
-
121
110
  var calculatedColorScheme = function () {
122
111
  if (!colorScheme) {
123
112
  // This scope occurs on the server
124
113
  if (calculatedMode === 'dark') {
125
114
  return defaultDarkColorScheme;
126
- } // use light color scheme, if default mode is 'light' | 'system'
127
-
128
-
115
+ }
116
+ // use light color scheme, if default mode is 'light' | 'system'
129
117
  return defaultLightColorScheme;
130
118
  }
131
-
132
119
  return colorScheme;
133
- }(); // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
134
-
120
+ }();
135
121
 
122
+ // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
136
123
  var _cssVarsParser = cssVarsParser(restThemeProp, {
137
- prefix: cssVarPrefix,
138
- shouldSkipGeneratingVar: shouldSkipGeneratingVar
139
- }),
140
- rootCss = _cssVarsParser.css,
141
- rootVars = _cssVarsParser.vars,
142
- parsedTheme = _cssVarsParser.parsedTheme; // 3. Start composing the theme object
143
-
144
-
124
+ prefix: cssVarPrefix,
125
+ shouldSkipGeneratingVar: shouldSkipGeneratingVar
126
+ }),
127
+ rootCss = _cssVarsParser.css,
128
+ rootVars = _cssVarsParser.vars,
129
+ parsedTheme = _cssVarsParser.parsedTheme; // 3. Start composing the theme object
145
130
  var theme = _extends({}, parsedTheme, {
146
131
  components: components,
147
132
  colorSchemes: colorSchemes,
@@ -150,49 +135,41 @@ export default function createCssVarsProvider(options) {
150
135
  getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
151
136
  return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
152
137
  }
153
- }); // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
138
+ });
139
+
140
+ // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
154
141
  // The default color scheme stylesheet is constructed to have the least CSS specificity.
155
142
  // 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.
156
-
157
-
158
143
  var defaultColorSchemeStyleSheet = {};
159
144
  var otherColorSchemesStyleSheet = {};
160
145
  Object.entries(colorSchemes).forEach(function (_ref2) {
161
146
  var _ref3 = _slicedToArray(_ref2, 2),
162
- key = _ref3[0],
163
- scheme = _ref3[1];
164
-
147
+ key = _ref3[0],
148
+ scheme = _ref3[1];
165
149
  var _cssVarsParser2 = cssVarsParser(scheme, {
166
- prefix: cssVarPrefix,
167
- shouldSkipGeneratingVar: shouldSkipGeneratingVar
168
- }),
169
- css = _cssVarsParser2.css,
170
- vars = _cssVarsParser2.vars,
171
- parsedScheme = _cssVarsParser2.parsedTheme;
172
-
150
+ prefix: cssVarPrefix,
151
+ shouldSkipGeneratingVar: shouldSkipGeneratingVar
152
+ }),
153
+ css = _cssVarsParser2.css,
154
+ vars = _cssVarsParser2.vars,
155
+ parsedScheme = _cssVarsParser2.parsedTheme;
173
156
  theme.vars = deepmerge(theme.vars, vars);
174
-
175
157
  if (key === calculatedColorScheme) {
176
158
  // 4.1 Merge the selected color scheme to the theme
177
159
  theme = _extends({}, theme, parsedScheme);
178
-
179
160
  if (theme.palette) {
180
161
  theme.palette.colorScheme = key;
181
162
  }
182
163
  }
183
-
184
164
  var resolvedDefaultColorScheme = function () {
185
165
  if (typeof defaultColorScheme === 'string') {
186
166
  return defaultColorScheme;
187
167
  }
188
-
189
168
  if (defaultMode === 'dark') {
190
169
  return defaultColorScheme.dark;
191
170
  }
192
-
193
171
  return defaultColorScheme.light;
194
172
  }();
195
-
196
173
  if (key === resolvedDefaultColorScheme) {
197
174
  if (excludeVariablesFromRoot) {
198
175
  var excludedVariables = {};
@@ -202,39 +179,38 @@ export default function createCssVarsProvider(options) {
202
179
  });
203
180
  defaultColorSchemeStyleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = excludedVariables;
204
181
  }
205
-
206
182
  defaultColorSchemeStyleSheet["".concat(colorSchemeSelector, ", [").concat(attribute, "=\"").concat(key, "\"]")] = css;
207
183
  } else {
208
184
  otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
209
185
  }
210
- }); // 5. Declaring effects
211
- // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
186
+ });
212
187
 
188
+ // 5. Declaring effects
189
+ // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
213
190
  React.useEffect(function () {
214
191
  if (colorScheme && colorSchemeNode) {
215
192
  // attaches attribute to <html> because the css variables are attached to :root (html)
216
193
  colorSchemeNode.setAttribute(attribute, colorScheme);
217
194
  }
218
- }, [colorScheme, attribute, colorSchemeNode]); // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
219
- // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
195
+ }, [colorScheme, attribute, colorSchemeNode]);
220
196
 
197
+ // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
198
+ // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
221
199
  React.useEffect(function () {
222
200
  var timer;
223
-
224
201
  if (disableTransitionOnChange && hasMounted.current && documentNode) {
225
202
  var css = documentNode.createElement('style');
226
203
  css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
227
- documentNode.head.appendChild(css); // Force browser repaint
204
+ documentNode.head.appendChild(css);
228
205
 
206
+ // Force browser repaint
229
207
  (function () {
230
208
  return window.getComputedStyle(documentNode.body);
231
209
  })();
232
-
233
210
  timer = setTimeout(function () {
234
211
  documentNode.head.removeChild(css);
235
212
  }, 1);
236
213
  }
237
-
238
214
  return function () {
239
215
  clearTimeout(timer);
240
216
  };
@@ -271,69 +247,56 @@ export default function createCssVarsProvider(options) {
271
247
  })]
272
248
  });
273
249
  }
274
-
275
250
  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
276
251
  /**
277
252
  * The body attribute name to attach colorScheme.
278
253
  */
279
254
  attribute: PropTypes.string,
280
-
281
255
  /**
282
256
  * The component tree.
283
257
  */
284
258
  children: PropTypes.node,
285
-
286
259
  /**
287
260
  * The node used to attach the color-scheme attribute
288
261
  */
289
262
  colorSchemeNode: PropTypes.any,
290
-
291
263
  /**
292
264
  * The CSS selector for attaching the generated custom properties
293
265
  */
294
266
  colorSchemeSelector: PropTypes.string,
295
-
296
267
  /**
297
268
  * localStorage key used to store `colorScheme`
298
269
  */
299
270
  colorSchemeStorageKey: PropTypes.string,
300
-
301
271
  /**
302
272
  * The initial color scheme used.
303
273
  */
304
274
  defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
305
-
306
275
  /**
307
276
  * The initial mode used.
308
277
  */
309
278
  defaultMode: PropTypes.string,
310
-
311
279
  /**
312
280
  * Disable CSS transitions when switching between modes or color schemes
313
281
  */
314
282
  disableTransitionOnChange: PropTypes.bool,
315
-
316
283
  /**
317
284
  * The document to attach the attribute to
318
285
  */
319
286
  documentNode: PropTypes.any,
320
-
321
287
  /**
322
288
  * The key in the local storage used to store current color scheme.
323
289
  */
324
290
  modeStorageKey: PropTypes.string,
325
-
326
291
  /**
327
292
  * A function to determine if the key, value should be attached as CSS Variable
328
293
  */
329
294
  shouldSkipGeneratingVar: PropTypes.func,
330
-
331
295
  /**
332
296
  * The window that attaches the 'storage' event listener
333
297
  * @default window
334
298
  */
335
299
  storageWindow: PropTypes.any,
336
-
337
300
  /**
338
301
  * The calculated theme object that will be passed through context.
339
302
  */
@@ -341,7 +304,6 @@ export default function createCssVarsProvider(options) {
341
304
  } : void 0;
342
305
  var defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
343
306
  var defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
344
-
345
307
  var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
346
308
  return systemGetInitColorSchemeScript(_extends({
347
309
  attribute: defaultAttribute,
@@ -352,7 +314,6 @@ export default function createCssVarsProvider(options) {
352
314
  modeStorageKey: defaultModeStorageKey
353
315
  }, params));
354
316
  };
355
-
356
317
  return {
357
318
  CssVarsProvider: CssVarsProvider,
358
319
  useColorScheme: useColorScheme,
@@ -1,38 +1,30 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
2
-
3
2
  /**
4
3
  * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
5
4
  * and they does not need to remember the prefix (defined once).
6
5
  */
7
6
  export default function createGetCssVar() {
8
7
  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
9
-
10
8
  function appendVar() {
11
9
  for (var _len = arguments.length, vars = new Array(_len), _key = 0; _key < _len; _key++) {
12
10
  vars[_key] = arguments[_key];
13
11
  }
14
-
15
12
  if (!vars.length) {
16
13
  return '';
17
14
  }
18
-
19
15
  var value = vars[0];
20
-
21
16
  if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
22
17
  return ", var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(value).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
23
18
  }
24
-
25
19
  return ", ".concat(value);
26
- } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
27
-
20
+ }
28
21
 
22
+ // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
29
23
  var getCssVar = function getCssVar(field) {
30
24
  for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
31
25
  fallbacks[_key2 - 1] = arguments[_key2];
32
26
  }
33
-
34
27
  return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, fallbacks), ")");
35
28
  };
36
-
37
29
  return getCssVar;
38
30
  }
@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
3
3
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
4
4
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
5
5
  import _typeof from "@babel/runtime/helpers/esm/typeof";
6
-
7
6
  /**
8
7
  * This function create an object from keys, value and then assign to target
9
8
  *
@@ -35,11 +34,11 @@ export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
35
34
  if (!temp[k]) {
36
35
  temp[k] = arrayKeys.includes(k) ? [] : {};
37
36
  }
38
-
39
37
  temp = temp[k];
40
38
  }
41
39
  });
42
40
  };
41
+
43
42
  /**
44
43
  *
45
44
  * @param {Object} obj : source object
@@ -51,16 +50,14 @@ export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
51
50
  * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
52
51
  * // ['palette', 'primary', 'main'] '#000000'
53
52
  */
54
-
55
53
  export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPaths) {
56
54
  function recurse(object) {
57
55
  var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
58
56
  var arrayKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
59
57
  Object.entries(object).forEach(function (_ref) {
60
58
  var _ref2 = _slicedToArray(_ref, 2),
61
- key = _ref2[0],
62
- value = _ref2[1];
63
-
59
+ key = _ref2[0],
60
+ value = _ref2[1];
64
61
  if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([].concat(_toConsumableArray(parentKeys), [key]))) {
65
62
  if (value !== undefined && value !== null) {
66
63
  if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
@@ -72,10 +69,8 @@ export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPat
72
69
  }
73
70
  });
74
71
  }
75
-
76
72
  recurse(obj);
77
73
  };
78
-
79
74
  var getCssValue = function getCssValue(keys, value) {
80
75
  if (typeof value === 'number') {
81
76
  if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(function (prop) {
@@ -84,19 +79,16 @@ var getCssValue = function getCssValue(keys, value) {
84
79
  // CSS property that are unitless
85
80
  return value;
86
81
  }
87
-
88
82
  var lastKey = keys[keys.length - 1];
89
-
90
83
  if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
91
84
  // opacity values are unitless
92
85
  return value;
93
86
  }
94
-
95
87
  return "".concat(value, "px");
96
88
  }
97
-
98
89
  return value;
99
90
  };
91
+
100
92
  /**
101
93
  * a function that parse theme and return { css, vars }
102
94
  *
@@ -120,13 +112,10 @@ var getCssValue = function getCssValue(keys, value) {
120
112
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
121
113
  * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
122
114
  */
123
-
124
-
125
115
  export default function cssVarsParser(theme, options) {
126
116
  var _ref3 = options || {},
127
- prefix = _ref3.prefix,
128
- shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
129
-
117
+ prefix = _ref3.prefix,
118
+ shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
130
119
  var css = {};
131
120
  var vars = {};
132
121
  var parsedTheme = {};
@@ -135,18 +124,16 @@ export default function cssVarsParser(theme, options) {
135
124
  if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
136
125
  // only create css & var if `shouldSkipGeneratingVar` return false
137
126
  var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
138
-
139
127
  _extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
140
-
141
128
  assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
142
129
  }
143
130
  }
144
-
145
131
  assignNestedKeys(parsedTheme, keys, value, arrayKeys);
146
132
  }, function (keys) {
147
133
  return keys[0] === 'vars';
148
134
  } // skip 'vars/*' paths
149
135
  );
136
+
150
137
  return {
151
138
  css: css,
152
139
  vars: vars,
@@ -5,21 +5,20 @@ export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
5
5
  export var DEFAULT_ATTRIBUTE = 'data-color-scheme';
6
6
  export default function getInitColorSchemeScript(options) {
7
7
  var _ref = options || {},
8
- _ref$defaultMode = _ref.defaultMode,
9
- defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
10
- _ref$defaultLightColo = _ref.defaultLightColorScheme,
11
- defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
12
- _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
13
- defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
14
- _ref$modeStorageKey = _ref.modeStorageKey,
15
- modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
16
- _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
17
- colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
18
- _ref$attribute = _ref.attribute,
19
- attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
20
- _ref$colorSchemeNode = _ref.colorSchemeNode,
21
- colorSchemeNode = _ref$colorSchemeNode === void 0 ? 'document.documentElement' : _ref$colorSchemeNode;
22
-
8
+ _ref$defaultMode = _ref.defaultMode,
9
+ defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
10
+ _ref$defaultLightColo = _ref.defaultLightColorScheme,
11
+ defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
12
+ _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
13
+ defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
14
+ _ref$modeStorageKey = _ref.modeStorageKey,
15
+ modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
16
+ _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
17
+ colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
18
+ _ref$attribute = _ref.attribute,
19
+ attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
20
+ _ref$colorSchemeNode = _ref.colorSchemeNode,
21
+ colorSchemeNode = _ref$colorSchemeNode === void 0 ? 'document.documentElement' : _ref$colorSchemeNode;
23
22
  return /*#__PURE__*/_jsx("script", {
24
23
  // eslint-disable-next-line react/no-danger
25
24
  dangerouslySetInnerHTML: {