@mui/system 6.1.2 → 6.1.3

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 (353) hide show
  1. package/Box/Box.js +17 -11
  2. package/Box/boxClasses.js +10 -3
  3. package/Box/index.js +35 -3
  4. package/Box/package.json +2 -2
  5. package/CHANGELOG.md +81 -7
  6. package/Container/Container.js +17 -12
  7. package/Container/ContainerProps.js +5 -1
  8. package/Container/containerClasses.js +14 -6
  9. package/Container/createContainer.js +36 -28
  10. package/Container/index.js +35 -3
  11. package/Container/package.json +2 -2
  12. package/DefaultPropsProvider/DefaultPropsProvider.js +19 -11
  13. package/DefaultPropsProvider/index.js +19 -1
  14. package/DefaultPropsProvider/package.json +2 -2
  15. package/GlobalStyles/GlobalStyles.js +18 -11
  16. package/GlobalStyles/index.js +25 -2
  17. package/GlobalStyles/package.json +2 -2
  18. package/Grid/Grid.js +38 -27
  19. package/Grid/GridProps.d.ts +16 -11
  20. package/Grid/GridProps.js +5 -1
  21. package/Grid/createGrid.js +46 -38
  22. package/Grid/gridClasses.js +14 -6
  23. package/Grid/gridGenerator.d.ts +3 -7
  24. package/Grid/gridGenerator.js +62 -69
  25. package/Grid/index.js +63 -6
  26. package/Grid/package.json +2 -2
  27. package/Grid/traverseBreakpoints.js +11 -3
  28. package/InitColorSchemeScript/InitColorSchemeScript.js +16 -7
  29. package/InitColorSchemeScript/index.js +13 -1
  30. package/InitColorSchemeScript/package.json +2 -2
  31. package/RtlProvider/index.js +17 -8
  32. package/RtlProvider/package.json +2 -2
  33. package/Stack/Stack.js +17 -11
  34. package/Stack/StackProps.js +5 -1
  35. package/Stack/createStack.js +46 -36
  36. package/Stack/index.js +55 -5
  37. package/Stack/package.json +2 -2
  38. package/Stack/stackClasses.js +14 -6
  39. package/ThemeProvider/ThemeProvider.js +27 -20
  40. package/ThemeProvider/index.js +13 -1
  41. package/ThemeProvider/package.json +2 -2
  42. package/borders/borders.js +36 -26
  43. package/borders/index.js +25 -2
  44. package/borders/package.json +2 -2
  45. package/breakpoints/breakpoints.js +34 -21
  46. package/breakpoints/index.js +25 -2
  47. package/breakpoints/package.json +2 -2
  48. package/colorManipulator/colorManipulator.js +50 -25
  49. package/colorManipulator/index.js +16 -1
  50. package/colorManipulator/package.json +2 -2
  51. package/compose/compose.js +10 -3
  52. package/compose/index.js +13 -1
  53. package/compose/package.json +2 -2
  54. package/createBox/createBox.js +20 -13
  55. package/createBox/index.js +13 -1
  56. package/createBox/package.json +2 -2
  57. package/createBreakpoints/createBreakpoints.js +9 -2
  58. package/createBreakpoints/index.js +13 -3
  59. package/createBreakpoints/package.json +2 -2
  60. package/createStyled/createStyled.js +161 -117
  61. package/createStyled/index.js +25 -2
  62. package/createStyled/package.json +2 -2
  63. package/createTheme/applyStyles.js +7 -1
  64. package/createTheme/createSpacing.js +8 -3
  65. package/createTheme/createTheme.d.ts +16 -10
  66. package/createTheme/createTheme.js +25 -18
  67. package/createTheme/index.js +27 -3
  68. package/createTheme/package.json +2 -2
  69. package/createTheme/shape.js +7 -1
  70. package/cssContainerQueries/cssContainerQueries.js +16 -7
  71. package/cssContainerQueries/index.js +31 -2
  72. package/cssContainerQueries/package.json +2 -2
  73. package/cssGrid/cssGrid.js +40 -31
  74. package/cssGrid/index.js +25 -2
  75. package/cssGrid/package.json +2 -2
  76. package/cssVars/createCssVarsProvider.d.ts +1 -1
  77. package/cssVars/createCssVarsProvider.js +39 -30
  78. package/cssVars/createCssVarsTheme.js +14 -7
  79. package/cssVars/createGetCssVar.js +7 -1
  80. package/cssVars/cssVarsParser.js +13 -3
  81. package/cssVars/getColorSchemeSelector.js +7 -1
  82. package/cssVars/index.js +41 -5
  83. package/cssVars/package.json +2 -2
  84. package/cssVars/prepareCssVars.js +16 -9
  85. package/cssVars/prepareTypographyVars.js +7 -1
  86. package/cssVars/useCurrentColorScheme.js +15 -7
  87. package/display/display.js +16 -9
  88. package/display/index.js +25 -2
  89. package/display/package.json +2 -2
  90. package/esm/Box/Box.js +30 -0
  91. package/esm/Box/boxClasses.js +3 -0
  92. package/esm/Box/index.js +3 -0
  93. package/{node → esm}/Container/Container.js +12 -17
  94. package/esm/Container/ContainerProps.js +1 -0
  95. package/esm/Container/containerClasses.js +7 -0
  96. package/{node → esm}/Container/createContainer.js +28 -36
  97. package/esm/Container/index.js +3 -0
  98. package/{node → esm}/DefaultPropsProvider/DefaultPropsProvider.js +11 -19
  99. package/esm/DefaultPropsProvider/index.js +1 -0
  100. package/esm/GlobalStyles/GlobalStyles.js +37 -0
  101. package/esm/GlobalStyles/index.js +2 -0
  102. package/esm/Grid/Grid.js +106 -0
  103. package/esm/Grid/GridProps.js +1 -0
  104. package/esm/Grid/createGrid.js +148 -0
  105. package/{node → esm}/Grid/gridClasses.js +6 -14
  106. package/esm/Grid/gridGenerator.js +193 -0
  107. package/esm/Grid/index.js +6 -0
  108. package/{node → esm}/Grid/traverseBreakpoints.js +3 -11
  109. package/{node → esm}/InitColorSchemeScript/InitColorSchemeScript.js +7 -16
  110. package/esm/InitColorSchemeScript/index.js +1 -0
  111. package/esm/RtlProvider/index.js +22 -0
  112. package/{node → esm}/Stack/Stack.js +11 -17
  113. package/esm/Stack/StackProps.js +1 -0
  114. package/{node → esm}/Stack/createStack.js +36 -46
  115. package/esm/Stack/index.js +5 -0
  116. package/esm/Stack/stackClasses.js +7 -0
  117. package/{node → esm}/ThemeProvider/ThemeProvider.js +20 -27
  118. package/esm/ThemeProvider/index.js +1 -0
  119. package/esm/borders/borders.js +49 -0
  120. package/esm/borders/index.js +2 -0
  121. package/{node → esm}/breakpoints/breakpoints.js +21 -34
  122. package/esm/breakpoints/index.js +2 -0
  123. package/{node → esm}/colorManipulator/colorManipulator.js +23 -51
  124. package/esm/colorManipulator/index.js +1 -0
  125. package/{node → esm}/compose/compose.js +3 -10
  126. package/esm/compose/index.js +1 -0
  127. package/esm/createBox/createBox.js +35 -0
  128. package/esm/createBox/index.js +1 -0
  129. package/{node → esm}/createBreakpoints/createBreakpoints.js +2 -9
  130. package/esm/createBreakpoints/index.js +3 -0
  131. package/esm/createStyled/createStyled.js +276 -0
  132. package/esm/createStyled/index.js +2 -0
  133. package/{node → esm}/createTheme/applyStyles.js +1 -7
  134. package/{node → esm}/createTheme/createSpacing.js +3 -8
  135. package/esm/createTheme/createTheme.js +49 -0
  136. package/esm/createTheme/index.js +3 -0
  137. package/esm/createTheme/shape.js +4 -0
  138. package/{node → esm}/cssContainerQueries/cssContainerQueries.js +6 -17
  139. package/esm/cssContainerQueries/index.js +2 -0
  140. package/esm/cssGrid/cssGrid.js +85 -0
  141. package/esm/cssGrid/index.js +2 -0
  142. package/{node → esm}/cssVars/createCssVarsProvider.js +30 -39
  143. package/esm/cssVars/createCssVarsTheme.js +21 -0
  144. package/{node → esm}/cssVars/createGetCssVar.js +1 -7
  145. package/{node → esm}/cssVars/cssVarsParser.js +3 -13
  146. package/{node → esm}/cssVars/getColorSchemeSelector.js +1 -7
  147. package/esm/cssVars/index.js +5 -0
  148. package/{node → esm}/cssVars/prepareCssVars.js +9 -16
  149. package/{node → esm}/cssVars/prepareTypographyVars.js +1 -7
  150. package/{node → esm}/cssVars/useCurrentColorScheme.js +7 -15
  151. package/esm/display/display.js +27 -0
  152. package/esm/display/index.js +2 -0
  153. package/esm/flexbox/flexbox.js +43 -0
  154. package/esm/flexbox/index.js +2 -0
  155. package/esm/getThemeValue/getThemeValue.js +51 -0
  156. package/esm/getThemeValue/index.js +2 -0
  157. package/esm/index.js +68 -0
  158. package/esm/memoTheme.js +28 -0
  159. package/esm/memoize/index.js +1 -0
  160. package/{node → esm}/memoize/memoize.js +1 -7
  161. package/esm/merge/index.js +1 -0
  162. package/esm/merge/merge.js +10 -0
  163. package/esm/palette/index.js +2 -0
  164. package/esm/palette/palette.js +26 -0
  165. package/esm/positions/index.js +2 -0
  166. package/esm/positions/positions.js +22 -0
  167. package/esm/preprocessStyles.js +25 -0
  168. package/esm/propsToClassKey/index.js +1 -0
  169. package/esm/propsToClassKey/propsToClassKey.js +25 -0
  170. package/esm/responsivePropType/index.js +1 -0
  171. package/esm/responsivePropType/responsivePropType.js +3 -0
  172. package/esm/shadows/index.js +1 -0
  173. package/esm/shadows/shadows.js +6 -0
  174. package/esm/sizing/index.js +2 -0
  175. package/esm/sizing/sizing.js +64 -0
  176. package/esm/spacing/index.js +2 -0
  177. package/{node → esm}/spacing/spacing.js +21 -36
  178. package/esm/style/index.js +2 -0
  179. package/{node → esm}/style/style.js +9 -18
  180. package/{node → esm}/styleFunctionSx/defaultSxConfig.js +65 -71
  181. package/{node → esm}/styleFunctionSx/extendSxProp.js +5 -12
  182. package/esm/styleFunctionSx/index.js +4 -0
  183. package/{node → esm}/styleFunctionSx/styleFunctionSx.js +19 -27
  184. package/esm/styled/index.js +1 -0
  185. package/esm/styled/styled.js +3 -0
  186. package/esm/typography/index.js +2 -0
  187. package/esm/typography/typography.js +37 -0
  188. package/esm/useMediaQuery/index.js +2 -0
  189. package/{node → esm}/useMediaQuery/useMediaQuery.js +8 -15
  190. package/esm/useTheme/index.js +2 -0
  191. package/esm/useTheme/useTheme.js +9 -0
  192. package/esm/useThemeProps/getThemeProps.js +12 -0
  193. package/esm/useThemeProps/index.js +2 -0
  194. package/esm/useThemeProps/useThemeProps.js +20 -0
  195. package/esm/useThemeWithoutDefault/index.js +1 -0
  196. package/esm/useThemeWithoutDefault/useThemeWithoutDefault.js +12 -0
  197. package/esm/version/index.js +6 -0
  198. package/flexbox/flexbox.js +24 -17
  199. package/flexbox/index.js +25 -2
  200. package/flexbox/package.json +2 -2
  201. package/getThemeValue/getThemeValue.js +40 -33
  202. package/getThemeValue/index.js +25 -2
  203. package/getThemeValue/package.json +2 -2
  204. package/index.d.ts +2 -0
  205. package/index.js +606 -63
  206. package/memoTheme.d.ts +12 -0
  207. package/memoTheme.js +34 -0
  208. package/memoize/index.js +13 -1
  209. package/memoize/memoize.js +7 -1
  210. package/memoize/package.json +2 -2
  211. package/merge/index.js +13 -1
  212. package/merge/merge.js +10 -3
  213. package/merge/package.json +2 -2
  214. package/modern/Grid/Grid.js +16 -11
  215. package/modern/Grid/createGrid.js +1 -1
  216. package/modern/Grid/gridGenerator.js +28 -51
  217. package/modern/colorManipulator/colorManipulator.js +3 -4
  218. package/modern/createStyled/createStyled.js +144 -109
  219. package/modern/cssContainerQueries/cssContainerQueries.js +1 -2
  220. package/modern/index.js +3 -2
  221. package/modern/memoTheme.js +28 -0
  222. package/modern/preprocessStyles.js +25 -0
  223. package/modern/version/index.js +2 -2
  224. package/package.json +7 -7
  225. package/palette/index.js +25 -2
  226. package/palette/package.json +2 -2
  227. package/palette/palette.js +16 -8
  228. package/positions/index.js +25 -2
  229. package/positions/package.json +2 -2
  230. package/positions/positions.js +16 -9
  231. package/preprocessStyles.d.ts +5 -0
  232. package/preprocessStyles.js +31 -0
  233. package/propsToClassKey/index.js +13 -1
  234. package/propsToClassKey/package.json +2 -2
  235. package/propsToClassKey/propsToClassKey.js +11 -4
  236. package/responsivePropType/index.js +13 -1
  237. package/responsivePropType/package.json +2 -2
  238. package/responsivePropType/responsivePropType.js +10 -3
  239. package/shadows/index.js +13 -1
  240. package/shadows/package.json +2 -2
  241. package/shadows/shadows.js +10 -3
  242. package/sizing/index.js +25 -2
  243. package/sizing/package.json +2 -2
  244. package/sizing/sizing.js +27 -17
  245. package/spacing/index.js +25 -2
  246. package/spacing/package.json +2 -2
  247. package/spacing/spacing.js +36 -21
  248. package/style/index.js +25 -2
  249. package/style/package.json +2 -2
  250. package/style/style.js +18 -9
  251. package/styleFunctionSx/defaultSxConfig.js +71 -65
  252. package/styleFunctionSx/extendSxProp.js +12 -5
  253. package/styleFunctionSx/index.js +34 -4
  254. package/styleFunctionSx/package.json +2 -2
  255. package/styleFunctionSx/styleFunctionSx.d.ts +1 -1
  256. package/styleFunctionSx/styleFunctionSx.js +27 -19
  257. package/styled/index.js +13 -1
  258. package/styled/package.json +2 -2
  259. package/styled/styled.js +10 -3
  260. package/typography/index.js +25 -2
  261. package/typography/package.json +2 -2
  262. package/typography/typography.js +20 -13
  263. package/useMediaQuery/index.js +25 -2
  264. package/useMediaQuery/package.json +2 -2
  265. package/useMediaQuery/useMediaQuery.js +15 -8
  266. package/useTheme/index.js +25 -2
  267. package/useTheme/package.json +2 -2
  268. package/useTheme/useTheme.js +11 -5
  269. package/useThemeProps/getThemeProps.js +10 -3
  270. package/useThemeProps/index.js +20 -2
  271. package/useThemeProps/package.json +2 -2
  272. package/useThemeProps/useThemeProps.js +11 -5
  273. package/useThemeWithoutDefault/index.js +13 -1
  274. package/useThemeWithoutDefault/package.json +2 -2
  275. package/useThemeWithoutDefault/useThemeWithoutDefault.js +10 -4
  276. package/version/index.js +12 -6
  277. package/version/package.json +2 -2
  278. package/node/Box/Box.js +0 -36
  279. package/node/Box/boxClasses.js +0 -10
  280. package/node/Box/index.js +0 -35
  281. package/node/Container/ContainerProps.js +0 -5
  282. package/node/Container/containerClasses.js +0 -15
  283. package/node/Container/index.js +0 -35
  284. package/node/DefaultPropsProvider/index.js +0 -19
  285. package/node/GlobalStyles/GlobalStyles.js +0 -44
  286. package/node/GlobalStyles/index.js +0 -25
  287. package/node/Grid/Grid.js +0 -107
  288. package/node/Grid/GridProps.js +0 -5
  289. package/node/Grid/createGrid.js +0 -156
  290. package/node/Grid/gridGenerator.js +0 -232
  291. package/node/Grid/index.js +0 -63
  292. package/node/InitColorSchemeScript/index.js +0 -13
  293. package/node/RtlProvider/index.js +0 -31
  294. package/node/Stack/StackProps.js +0 -5
  295. package/node/Stack/index.js +0 -55
  296. package/node/Stack/stackClasses.js +0 -15
  297. package/node/ThemeProvider/index.js +0 -13
  298. package/node/borders/borders.js +0 -59
  299. package/node/borders/index.js +0 -25
  300. package/node/breakpoints/index.js +0 -25
  301. package/node/colorManipulator/index.js +0 -16
  302. package/node/compose/index.js +0 -13
  303. package/node/createBox/createBox.js +0 -42
  304. package/node/createBox/index.js +0 -13
  305. package/node/createBreakpoints/index.js +0 -13
  306. package/node/createStyled/createStyled.js +0 -252
  307. package/node/createStyled/index.js +0 -25
  308. package/node/createTheme/createTheme.js +0 -56
  309. package/node/createTheme/index.js +0 -27
  310. package/node/createTheme/shape.js +0 -10
  311. package/node/cssContainerQueries/index.js +0 -31
  312. package/node/cssGrid/cssGrid.js +0 -94
  313. package/node/cssGrid/index.js +0 -25
  314. package/node/cssVars/createCssVarsTheme.js +0 -28
  315. package/node/cssVars/index.js +0 -41
  316. package/node/display/display.js +0 -34
  317. package/node/display/index.js +0 -25
  318. package/node/flexbox/flexbox.js +0 -50
  319. package/node/flexbox/index.js +0 -25
  320. package/node/getThemeValue/getThemeValue.js +0 -58
  321. package/node/getThemeValue/index.js +0 -25
  322. package/node/index.js +0 -609
  323. package/node/memoize/index.js +0 -13
  324. package/node/merge/index.js +0 -13
  325. package/node/merge/merge.js +0 -17
  326. package/node/palette/index.js +0 -25
  327. package/node/palette/palette.js +0 -34
  328. package/node/positions/index.js +0 -25
  329. package/node/positions/positions.js +0 -29
  330. package/node/propsToClassKey/index.js +0 -13
  331. package/node/propsToClassKey/propsToClassKey.js +0 -32
  332. package/node/responsivePropType/index.js +0 -13
  333. package/node/responsivePropType/responsivePropType.js +0 -10
  334. package/node/shadows/index.js +0 -13
  335. package/node/shadows/shadows.js +0 -13
  336. package/node/sizing/index.js +0 -25
  337. package/node/sizing/sizing.js +0 -74
  338. package/node/spacing/index.js +0 -25
  339. package/node/style/index.js +0 -25
  340. package/node/styleFunctionSx/index.js +0 -34
  341. package/node/styled/index.js +0 -13
  342. package/node/styled/styled.js +0 -10
  343. package/node/typography/index.js +0 -25
  344. package/node/typography/typography.js +0 -44
  345. package/node/useMediaQuery/index.js +0 -25
  346. package/node/useTheme/index.js +0 -25
  347. package/node/useTheme/useTheme.js +0 -15
  348. package/node/useThemeProps/getThemeProps.js +0 -19
  349. package/node/useThemeProps/index.js +0 -20
  350. package/node/useThemeProps/useThemeProps.js +0 -26
  351. package/node/useThemeWithoutDefault/index.js +0 -13
  352. package/node/useThemeWithoutDefault/useThemeWithoutDefault.js +0 -18
  353. package/node/version/index.js +0 -12
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- var _exportNames = {};
8
- Object.defineProperty(exports, "default", {
9
- enumerable: true,
10
- get: function () {
11
- return _breakpoints.default;
12
- }
13
- });
14
- var _breakpoints = _interopRequireWildcard(require("./breakpoints"));
15
- Object.keys(_breakpoints).forEach(function (key) {
16
- if (key === "default" || key === "__esModule") return;
17
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
18
- if (key in exports && exports[key] === _breakpoints[key]) return;
19
- Object.defineProperty(exports, key, {
20
- enumerable: true,
21
- get: function () {
22
- return _breakpoints[key];
23
- }
24
- });
25
- });
@@ -1,16 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- var _colorManipulator = require("./colorManipulator");
7
- Object.keys(_colorManipulator).forEach(function (key) {
8
- if (key === "default" || key === "__esModule") return;
9
- if (key in exports && exports[key] === _colorManipulator[key]) return;
10
- Object.defineProperty(exports, key, {
11
- enumerable: true,
12
- get: function () {
13
- return _colorManipulator[key];
14
- }
15
- });
16
- });
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "default", {
8
- enumerable: true,
9
- get: function () {
10
- return _compose.default;
11
- }
12
- });
13
- var _compose = _interopRequireDefault(require("./compose"));
@@ -1,42 +0,0 @@
1
- "use strict";
2
- 'use client';
3
-
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
- Object.defineProperty(exports, "__esModule", {
7
- value: true
8
- });
9
- exports.default = createBox;
10
- var React = _interopRequireWildcard(require("react"));
11
- var _clsx = _interopRequireDefault(require("clsx"));
12
- var _styledEngine = _interopRequireDefault(require("@mui/styled-engine"));
13
- var _styleFunctionSx = _interopRequireWildcard(require("../styleFunctionSx"));
14
- var _useTheme = _interopRequireDefault(require("../useTheme"));
15
- var _jsxRuntime = require("react/jsx-runtime");
16
- function createBox(options = {}) {
17
- const {
18
- themeId,
19
- defaultTheme,
20
- defaultClassName = 'MuiBox-root',
21
- generateClassName
22
- } = options;
23
- const BoxRoot = (0, _styledEngine.default)('div', {
24
- shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
25
- })(_styleFunctionSx.default);
26
- const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
27
- const theme = (0, _useTheme.default)(defaultTheme);
28
- const {
29
- className,
30
- component = 'div',
31
- ...other
32
- } = (0, _styleFunctionSx.extendSxProp)(inProps);
33
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxRoot, {
34
- as: component,
35
- ref: ref,
36
- className: (0, _clsx.default)(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
37
- theme: themeId ? theme[themeId] || theme : theme,
38
- ...other
39
- });
40
- });
41
- return Box;
42
- }
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "default", {
8
- enumerable: true,
9
- get: function () {
10
- return _createBox.default;
11
- }
12
- });
13
- var _createBox = _interopRequireDefault(require("./createBox"));
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "unstable_createBreakpoints", {
8
- enumerable: true,
9
- get: function () {
10
- return _createBreakpoints.default;
11
- }
12
- });
13
- var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
@@ -1,252 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = createStyled;
9
- exports.shouldForwardProp = shouldForwardProp;
10
- exports.systemDefaultTheme = void 0;
11
- var _styledEngine = _interopRequireWildcard(require("@mui/styled-engine"));
12
- var _deepmerge = require("@mui/utils/deepmerge");
13
- var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
14
- var _getDisplayName = _interopRequireDefault(require("@mui/utils/getDisplayName"));
15
- var _createTheme = _interopRequireDefault(require("../createTheme"));
16
- var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx"));
17
- /* eslint-disable no-underscore-dangle */
18
-
19
- const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
20
-
21
- // Update /system/styled/#api in case if this changes
22
- function shouldForwardProp(prop) {
23
- return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
24
- }
25
- function resolveTheme(themeId, theme, defaultTheme) {
26
- return isObjectEmpty(theme) ? defaultTheme : theme[themeId] || theme;
27
- }
28
- const PROCESSED_PROPS = Symbol('mui.processed_props');
29
- function attachTheme(props, themeId, defaultTheme) {
30
- if (PROCESSED_PROPS in props) {
31
- return props[PROCESSED_PROPS];
32
- }
33
- const processedProps = {
34
- ...props,
35
- theme: resolveTheme(themeId, props.theme, defaultTheme)
36
- };
37
- props[PROCESSED_PROPS] = processedProps;
38
- processedProps[PROCESSED_PROPS] = processedProps;
39
- return processedProps;
40
- }
41
- function defaultOverridesResolver(slot) {
42
- if (!slot) {
43
- return null;
44
- }
45
- return (_props, styles) => styles[slot];
46
- }
47
- function processStyle(style, props) {
48
- const resolvedStyle = typeof style === 'function' ? style(props) : style;
49
- if (Array.isArray(resolvedStyle)) {
50
- return resolvedStyle.flatMap(subStyle => processStyle(subStyle, props));
51
- }
52
- if (Array.isArray(resolvedStyle?.variants)) {
53
- const {
54
- variants,
55
- ...otherStyles
56
- } = resolvedStyle;
57
- let result = otherStyles;
58
- let mergedState; // We might not need it, initalized lazily
59
-
60
- /* eslint-disable no-labels */
61
- variantLoop: for (let i = 0; i < variants.length; i += 1) {
62
- const variant = variants[i];
63
- if (typeof variant.props === 'function') {
64
- mergedState ?? (mergedState = {
65
- ...props,
66
- ...props.ownerState,
67
- ownerState: props.ownerState
68
- });
69
- if (!variant.props(mergedState)) {
70
- continue;
71
- }
72
- } else {
73
- for (const key in variant.props) {
74
- if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
75
- continue variantLoop;
76
- }
77
- }
78
- }
79
- if (!Array.isArray(result)) {
80
- result = [result];
81
- }
82
- if (typeof variant.style === 'function') {
83
- mergedState ?? (mergedState = {
84
- ...props,
85
- ...props.ownerState,
86
- ownerState: props.ownerState
87
- });
88
- result.push(variant.style(mergedState));
89
- } else {
90
- result.push(variant.style);
91
- }
92
- }
93
- /* eslint-enable no-labels */
94
-
95
- return result;
96
- }
97
- return resolvedStyle;
98
- }
99
- function createStyled(input = {}) {
100
- const {
101
- themeId,
102
- defaultTheme = systemDefaultTheme,
103
- rootShouldForwardProp = shouldForwardProp,
104
- slotShouldForwardProp = shouldForwardProp
105
- } = input;
106
- const systemSx = props => {
107
- return (0, _styleFunctionSx.default)(attachTheme(props, themeId, defaultTheme));
108
- };
109
- systemSx.__mui_systemSx = true;
110
- const styled = (tag, inputOptions = {}) => {
111
- // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
112
- (0, _styledEngine.internal_processStyles)(tag, styles => styles.filter(style => !style?.__mui_systemSx));
113
- const {
114
- name: componentName,
115
- slot: componentSlot,
116
- skipVariantsResolver: inputSkipVariantsResolver,
117
- skipSx: inputSkipSx,
118
- // TODO v6: remove `lowercaseFirstLetter()` in the next major release
119
- // For more details: https://github.com/mui/material-ui/pull/37908
120
- overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
121
- ...options
122
- } = inputOptions;
123
-
124
- // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
125
- const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
126
- // TODO v6: remove `Root` in the next major release
127
- // For more details: https://github.com/mui/material-ui/pull/37908
128
- componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
129
- const skipSx = inputSkipSx || false;
130
- let label;
131
- if (process.env.NODE_ENV !== 'production') {
132
- if (componentName) {
133
- // TODO v6: remove `lowercaseFirstLetter()` in the next major release
134
- // For more details: https://github.com/mui/material-ui/pull/37908
135
- label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
136
- }
137
- }
138
- let shouldForwardPropOption = shouldForwardProp;
139
-
140
- // TODO v6: remove `Root` in the next major release
141
- // For more details: https://github.com/mui/material-ui/pull/37908
142
- if (componentSlot === 'Root' || componentSlot === 'root') {
143
- shouldForwardPropOption = rootShouldForwardProp;
144
- } else if (componentSlot) {
145
- // any other slot specified
146
- shouldForwardPropOption = slotShouldForwardProp;
147
- } else if (isStringTag(tag)) {
148
- // for string (html) tag, preserve the behavior in emotion & styled-components.
149
- shouldForwardPropOption = undefined;
150
- }
151
- const defaultStyledResolver = (0, _styledEngine.default)(tag, {
152
- shouldForwardProp: shouldForwardPropOption,
153
- label,
154
- ...options
155
- });
156
- const transformStyleArg = style => {
157
- // On the server Emotion doesn't use React.forwardRef for creating components, so the created
158
- // component stays as a function. This condition makes sure that we do not interpolate functions
159
- // which are basically components used as a selectors.
160
- if (typeof style === 'function' && style.__emotion_real !== style || (0, _deepmerge.isPlainObject)(style)) {
161
- return props => processStyle(style, attachTheme(props, themeId, defaultTheme));
162
- }
163
- return style;
164
- };
165
- const muiStyledResolver = (style, ...expressions) => {
166
- let transformedStyle = transformStyleArg(style);
167
- const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
168
- if (componentName && overridesResolver) {
169
- expressionsWithDefaultTheme.push(props => {
170
- const theme = resolveTheme(themeId, props.theme, defaultTheme);
171
- if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
172
- return null;
173
- }
174
- const styleOverrides = theme.components[componentName].styleOverrides;
175
- const resolvedStyleOverrides = {};
176
- const propsWithTheme = attachTheme(props, themeId, defaultTheme);
177
-
178
- // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
179
- // eslint-disable-next-line guard-for-in
180
- for (const slotKey in styleOverrides) {
181
- resolvedStyleOverrides[slotKey] = processStyle(styleOverrides[slotKey], propsWithTheme);
182
- }
183
- return overridesResolver(props, resolvedStyleOverrides);
184
- });
185
- }
186
- if (componentName && !skipVariantsResolver) {
187
- expressionsWithDefaultTheme.push(props => {
188
- const theme = resolveTheme(themeId, props.theme, defaultTheme);
189
- const themeVariants = theme?.components?.[componentName]?.variants;
190
- if (!themeVariants) {
191
- return null;
192
- }
193
- return processStyle({
194
- variants: themeVariants
195
- }, attachTheme(props, themeId, defaultTheme));
196
- });
197
- }
198
- if (!skipSx) {
199
- expressionsWithDefaultTheme.push(systemSx);
200
- }
201
- const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
202
- if (Array.isArray(style) && numOfCustomFnsApplied > 0) {
203
- const placeholders = new Array(numOfCustomFnsApplied).fill('');
204
- // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
205
- transformedStyle = [...style, ...placeholders];
206
- transformedStyle.raw = [...style.raw, ...placeholders];
207
- }
208
- const Component = defaultStyledResolver(transformedStyle, ...expressionsWithDefaultTheme);
209
- if (process.env.NODE_ENV !== 'production') {
210
- let displayName;
211
- if (componentName) {
212
- displayName = `${componentName}${(0, _capitalize.default)(componentSlot || '')}`;
213
- }
214
- if (displayName === undefined) {
215
- displayName = `Styled(${(0, _getDisplayName.default)(tag)})`;
216
- }
217
- Component.displayName = displayName;
218
- }
219
- if (tag.muiName) {
220
- Component.muiName = tag.muiName;
221
- }
222
- return Component;
223
- };
224
- if (defaultStyledResolver.withConfig) {
225
- muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
226
- }
227
- return muiStyledResolver;
228
- };
229
- return styled;
230
- }
231
- function isObjectEmpty(object) {
232
- // eslint-disable-next-line
233
- for (const _ in object) {
234
- return false;
235
- }
236
- return true;
237
- }
238
-
239
- // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
240
- function isStringTag(tag) {
241
- return typeof tag === 'string' &&
242
- // 96 is one less than the char code
243
- // for "a" so this is checking that
244
- // it's a lowercase character
245
- tag.charCodeAt(0) > 96;
246
- }
247
- function lowercaseFirstLetter(string) {
248
- if (!string) {
249
- return string;
250
- }
251
- return string.charAt(0).toLowerCase() + string.slice(1);
252
- }
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- var _exportNames = {};
8
- Object.defineProperty(exports, "default", {
9
- enumerable: true,
10
- get: function () {
11
- return _createStyled.default;
12
- }
13
- });
14
- var _createStyled = _interopRequireWildcard(require("./createStyled"));
15
- Object.keys(_createStyled).forEach(function (key) {
16
- if (key === "default" || key === "__esModule") return;
17
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
18
- if (key in exports && exports[key] === _createStyled[key]) return;
19
- Object.defineProperty(exports, key, {
20
- enumerable: true,
21
- get: function () {
22
- return _createStyled[key];
23
- }
24
- });
25
- });
@@ -1,56 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
9
- var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
10
- var _cssContainerQueries = _interopRequireDefault(require("../cssContainerQueries"));
11
- var _shape = _interopRequireDefault(require("./shape"));
12
- var _createSpacing = _interopRequireDefault(require("./createSpacing"));
13
- var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx/styleFunctionSx"));
14
- var _defaultSxConfig = _interopRequireDefault(require("../styleFunctionSx/defaultSxConfig"));
15
- var _applyStyles = _interopRequireDefault(require("./applyStyles"));
16
- function createTheme(options = {}, ...args) {
17
- const {
18
- breakpoints: breakpointsInput = {},
19
- palette: paletteInput = {},
20
- spacing: spacingInput,
21
- shape: shapeInput = {},
22
- ...other
23
- } = options;
24
- const breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
25
- const spacing = (0, _createSpacing.default)(spacingInput);
26
- let muiTheme = (0, _deepmerge.default)({
27
- breakpoints,
28
- direction: 'ltr',
29
- components: {},
30
- // Inject component definitions.
31
- palette: {
32
- mode: 'light',
33
- ...paletteInput
34
- },
35
- spacing,
36
- shape: {
37
- ..._shape.default,
38
- ...shapeInput
39
- }
40
- }, other);
41
- muiTheme = (0, _cssContainerQueries.default)(muiTheme);
42
- muiTheme.applyStyles = _applyStyles.default;
43
- muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
44
- muiTheme.unstable_sxConfig = {
45
- ..._defaultSxConfig.default,
46
- ...other?.unstable_sxConfig
47
- };
48
- muiTheme.unstable_sx = function sx(props) {
49
- return (0, _styleFunctionSx.default)({
50
- sx: props,
51
- theme: this
52
- });
53
- };
54
- return muiTheme;
55
- }
56
- var _default = exports.default = createTheme;
@@ -1,27 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "default", {
8
- enumerable: true,
9
- get: function () {
10
- return _createTheme.default;
11
- }
12
- });
13
- Object.defineProperty(exports, "private_createBreakpoints", {
14
- enumerable: true,
15
- get: function () {
16
- return _createBreakpoints.default;
17
- }
18
- });
19
- Object.defineProperty(exports, "unstable_applyStyles", {
20
- enumerable: true,
21
- get: function () {
22
- return _applyStyles.default;
23
- }
24
- });
25
- var _createTheme = _interopRequireDefault(require("./createTheme"));
26
- var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
27
- var _applyStyles = _interopRequireDefault(require("./applyStyles"));
@@ -1,10 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- const shape = {
8
- borderRadius: 4
9
- };
10
- var _default = exports.default = shape;
@@ -1,31 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "default", {
8
- enumerable: true,
9
- get: function () {
10
- return _cssContainerQueries.default;
11
- }
12
- });
13
- Object.defineProperty(exports, "getContainerQuery", {
14
- enumerable: true,
15
- get: function () {
16
- return _cssContainerQueries.getContainerQuery;
17
- }
18
- });
19
- Object.defineProperty(exports, "isCqShorthand", {
20
- enumerable: true,
21
- get: function () {
22
- return _cssContainerQueries.isCqShorthand;
23
- }
24
- });
25
- Object.defineProperty(exports, "sortContainerQueries", {
26
- enumerable: true,
27
- get: function () {
28
- return _cssContainerQueries.sortContainerQueries;
29
- }
30
- });
31
- var _cssContainerQueries = _interopRequireWildcard(require("./cssContainerQueries"));
@@ -1,94 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.rowGap = exports.gridTemplateRows = exports.gridTemplateColumns = exports.gridTemplateAreas = exports.gridRow = exports.gridColumn = exports.gridAutoRows = exports.gridAutoFlow = exports.gridAutoColumns = exports.gridArea = exports.gap = exports.default = exports.columnGap = void 0;
8
- var _style = _interopRequireDefault(require("../style"));
9
- var _compose = _interopRequireDefault(require("../compose"));
10
- var _spacing = require("../spacing");
11
- var _breakpoints = require("../breakpoints");
12
- var _responsivePropType = _interopRequireDefault(require("../responsivePropType"));
13
- // false positive
14
- // eslint-disable-next-line react/function-component-definition
15
- const gap = props => {
16
- if (props.gap !== undefined && props.gap !== null) {
17
- const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'gap');
18
- const styleFromPropValue = propValue => ({
19
- gap: (0, _spacing.getValue)(transformer, propValue)
20
- });
21
- return (0, _breakpoints.handleBreakpoints)(props, props.gap, styleFromPropValue);
22
- }
23
- return null;
24
- };
25
- exports.gap = gap;
26
- gap.propTypes = process.env.NODE_ENV !== 'production' ? {
27
- gap: _responsivePropType.default
28
- } : {};
29
- gap.filterProps = ['gap'];
30
-
31
- // false positive
32
- // eslint-disable-next-line react/function-component-definition
33
- const columnGap = props => {
34
- if (props.columnGap !== undefined && props.columnGap !== null) {
35
- const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'columnGap');
36
- const styleFromPropValue = propValue => ({
37
- columnGap: (0, _spacing.getValue)(transformer, propValue)
38
- });
39
- return (0, _breakpoints.handleBreakpoints)(props, props.columnGap, styleFromPropValue);
40
- }
41
- return null;
42
- };
43
- exports.columnGap = columnGap;
44
- columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
45
- columnGap: _responsivePropType.default
46
- } : {};
47
- columnGap.filterProps = ['columnGap'];
48
-
49
- // false positive
50
- // eslint-disable-next-line react/function-component-definition
51
- const rowGap = props => {
52
- if (props.rowGap !== undefined && props.rowGap !== null) {
53
- const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'rowGap');
54
- const styleFromPropValue = propValue => ({
55
- rowGap: (0, _spacing.getValue)(transformer, propValue)
56
- });
57
- return (0, _breakpoints.handleBreakpoints)(props, props.rowGap, styleFromPropValue);
58
- }
59
- return null;
60
- };
61
- exports.rowGap = rowGap;
62
- rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
63
- rowGap: _responsivePropType.default
64
- } : {};
65
- rowGap.filterProps = ['rowGap'];
66
- const gridColumn = exports.gridColumn = (0, _style.default)({
67
- prop: 'gridColumn'
68
- });
69
- const gridRow = exports.gridRow = (0, _style.default)({
70
- prop: 'gridRow'
71
- });
72
- const gridAutoFlow = exports.gridAutoFlow = (0, _style.default)({
73
- prop: 'gridAutoFlow'
74
- });
75
- const gridAutoColumns = exports.gridAutoColumns = (0, _style.default)({
76
- prop: 'gridAutoColumns'
77
- });
78
- const gridAutoRows = exports.gridAutoRows = (0, _style.default)({
79
- prop: 'gridAutoRows'
80
- });
81
- const gridTemplateColumns = exports.gridTemplateColumns = (0, _style.default)({
82
- prop: 'gridTemplateColumns'
83
- });
84
- const gridTemplateRows = exports.gridTemplateRows = (0, _style.default)({
85
- prop: 'gridTemplateRows'
86
- });
87
- const gridTemplateAreas = exports.gridTemplateAreas = (0, _style.default)({
88
- prop: 'gridTemplateAreas'
89
- });
90
- const gridArea = exports.gridArea = (0, _style.default)({
91
- prop: 'gridArea'
92
- });
93
- const grid = (0, _compose.default)(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
94
- var _default = exports.default = grid;
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- var _exportNames = {};
8
- Object.defineProperty(exports, "default", {
9
- enumerable: true,
10
- get: function () {
11
- return _cssGrid.default;
12
- }
13
- });
14
- var _cssGrid = _interopRequireWildcard(require("./cssGrid"));
15
- Object.keys(_cssGrid).forEach(function (key) {
16
- if (key === "default" || key === "__esModule") return;
17
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
18
- if (key in exports && exports[key] === _cssGrid[key]) return;
19
- Object.defineProperty(exports, key, {
20
- enumerable: true,
21
- get: function () {
22
- return _cssGrid[key];
23
- }
24
- });
25
- });