@mui/system 6.0.0-alpha.1 → 6.0.0-alpha.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 (128) hide show
  1. package/CHANGELOG.md +114 -2
  2. package/Container/Container.d.ts +1 -1
  3. package/Stack/Stack.d.ts +1 -1
  4. package/Stack/createStack.d.ts +1 -1
  5. package/Unstable_Grid/Grid.d.ts +1 -1
  6. package/Unstable_Grid/createGrid.d.ts +1 -1
  7. package/breakpoints/breakpoints.js +19 -1
  8. package/createTheme/createTheme.d.ts +2 -1
  9. package/createTheme/createTheme.js +2 -0
  10. package/cssContainerQueries/cssContainerQueries.d.ts +24 -0
  11. package/cssContainerQueries/cssContainerQueries.js +68 -0
  12. package/cssContainerQueries/index.d.ts +3 -0
  13. package/cssContainerQueries/index.js +2 -0
  14. package/cssContainerQueries/package.json +6 -0
  15. package/cssVars/cssVarsParser.d.ts +1 -1
  16. package/index.d.ts +2 -0
  17. package/index.js +2 -1
  18. package/modern/breakpoints/breakpoints.js +19 -1
  19. package/modern/createTheme/createTheme.js +2 -0
  20. package/modern/cssContainerQueries/cssContainerQueries.js +68 -0
  21. package/modern/cssContainerQueries/index.js +2 -0
  22. package/modern/index.js +2 -1
  23. package/modern/styleFunctionSx/styleFunctionSx.js +2 -1
  24. package/node/breakpoints/breakpoints.js +19 -1
  25. package/node/createTheme/createTheme.js +2 -0
  26. package/node/cssContainerQueries/cssContainerQueries.js +79 -0
  27. package/node/cssContainerQueries/index.js +32 -0
  28. package/node/index.js +9 -1
  29. package/node/styleFunctionSx/styleFunctionSx.js +2 -1
  30. package/package.json +5 -5
  31. package/styleFunctionSx/styleFunctionSx.js +2 -1
  32. package/legacy/Box/Box.js +0 -30
  33. package/legacy/Box/boxClasses.js +0 -3
  34. package/legacy/Box/index.js +0 -5
  35. package/legacy/Container/Container.js +0 -61
  36. package/legacy/Container/ContainerProps.js +0 -1
  37. package/legacy/Container/containerClasses.js +0 -7
  38. package/legacy/Container/createContainer.js +0 -140
  39. package/legacy/Container/index.js +0 -5
  40. package/legacy/GlobalStyles/GlobalStyles.js +0 -37
  41. package/legacy/GlobalStyles/index.js +0 -4
  42. package/legacy/RtlProvider/index.js +0 -22
  43. package/legacy/Stack/Stack.js +0 -62
  44. package/legacy/Stack/StackProps.js +0 -1
  45. package/legacy/Stack/createStack.js +0 -180
  46. package/legacy/Stack/index.js +0 -7
  47. package/legacy/Stack/stackClasses.js +0 -7
  48. package/legacy/ThemeProvider/ThemeProvider.js +0 -87
  49. package/legacy/ThemeProvider/index.js +0 -3
  50. package/legacy/Unstable_Grid/Grid.js +0 -177
  51. package/legacy/Unstable_Grid/GridProps.js +0 -1
  52. package/legacy/Unstable_Grid/createGrid.js +0 -184
  53. package/legacy/Unstable_Grid/gridClasses.js +0 -28
  54. package/legacy/Unstable_Grid/gridGenerator.js +0 -216
  55. package/legacy/Unstable_Grid/index.js +0 -8
  56. package/legacy/Unstable_Grid/traverseBreakpoints.js +0 -48
  57. package/legacy/borders/borders.js +0 -51
  58. package/legacy/borders/index.js +0 -4
  59. package/legacy/breakpoints/breakpoints.js +0 -162
  60. package/legacy/breakpoints/index.js +0 -4
  61. package/legacy/colorManipulator/colorManipulator.js +0 -356
  62. package/legacy/colorManipulator/index.js +0 -3
  63. package/legacy/compose/compose.js +0 -32
  64. package/legacy/compose/index.js +0 -3
  65. package/legacy/createBox/createBox.js +0 -38
  66. package/legacy/createBox/index.js +0 -3
  67. package/legacy/createStyled/createStyled.js +0 -250
  68. package/legacy/createStyled/index.js +0 -4
  69. package/legacy/createTheme/applyStyles.js +0 -73
  70. package/legacy/createTheme/createBreakpoints.js +0 -83
  71. package/legacy/createTheme/createSpacing.js +0 -32
  72. package/legacy/createTheme/createTheme.js +0 -49
  73. package/legacy/createTheme/index.js +0 -3
  74. package/legacy/createTheme/shape.js +0 -4
  75. package/legacy/cssGrid/cssGrid.js +0 -91
  76. package/legacy/cssGrid/index.js +0 -4
  77. package/legacy/cssVars/createCssVarsProvider.js +0 -338
  78. package/legacy/cssVars/createCssVarsTheme.js +0 -13
  79. package/legacy/cssVars/createGetCssVar.js +0 -30
  80. package/legacy/cssVars/cssVarsParser.js +0 -141
  81. package/legacy/cssVars/getInitColorSchemeScript.js +0 -28
  82. package/legacy/cssVars/index.js +0 -6
  83. package/legacy/cssVars/prepareCssVars.js +0 -92
  84. package/legacy/cssVars/useCurrentColorScheme.js +0 -237
  85. package/legacy/display/display.js +0 -29
  86. package/legacy/display/index.js +0 -4
  87. package/legacy/flexbox/flexbox.js +0 -43
  88. package/legacy/flexbox/index.js +0 -4
  89. package/legacy/getThemeValue/getThemeValue.js +0 -47
  90. package/legacy/getThemeValue/index.js +0 -4
  91. package/legacy/index.js +0 -72
  92. package/legacy/memoize/index.js +0 -3
  93. package/legacy/memoize/memoize.js +0 -9
  94. package/legacy/merge/index.js +0 -3
  95. package/legacy/merge/merge.js +0 -10
  96. package/legacy/palette/index.js +0 -4
  97. package/legacy/palette/palette.js +0 -26
  98. package/legacy/positions/index.js +0 -4
  99. package/legacy/positions/positions.js +0 -22
  100. package/legacy/propsToClassKey/index.js +0 -3
  101. package/legacy/propsToClassKey/propsToClassKey.js +0 -24
  102. package/legacy/responsivePropType/index.js +0 -3
  103. package/legacy/responsivePropType/responsivePropType.js +0 -3
  104. package/legacy/shadows/index.js +0 -3
  105. package/legacy/shadows/shadows.js +0 -6
  106. package/legacy/sizing/index.js +0 -4
  107. package/legacy/sizing/sizing.js +0 -65
  108. package/legacy/spacing/index.js +0 -4
  109. package/legacy/spacing/spacing.js +0 -161
  110. package/legacy/style/index.js +0 -4
  111. package/legacy/style/style.js +0 -73
  112. package/legacy/styleFunctionSx/defaultSxConfig.js +0 -293
  113. package/legacy/styleFunctionSx/extendSxProp.js +0 -45
  114. package/legacy/styleFunctionSx/index.js +0 -4
  115. package/legacy/styleFunctionSx/styleFunctionSx.js +0 -126
  116. package/legacy/styled/index.js +0 -3
  117. package/legacy/styled/styled.js +0 -3
  118. package/legacy/typography/index.js +0 -4
  119. package/legacy/typography/typography.js +0 -37
  120. package/legacy/useMediaQuery/index.js +0 -2
  121. package/legacy/useMediaQuery/useMediaQuery.js +0 -145
  122. package/legacy/useTheme/index.js +0 -4
  123. package/legacy/useTheme/useTheme.js +0 -10
  124. package/legacy/useThemeProps/getThemeProps.js +0 -10
  125. package/legacy/useThemeProps/index.js +0 -4
  126. package/legacy/useThemeProps/useThemeProps.js +0 -20
  127. package/legacy/useThemeWithoutDefault/index.js +0 -3
  128. package/legacy/useThemeWithoutDefault/useThemeWithoutDefault.js +0 -13
@@ -0,0 +1,79 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = cssContainerQueries;
8
+ exports.getContainerQuery = getContainerQuery;
9
+ exports.isCqShorthand = isCqShorthand;
10
+ exports.sortContainerQueries = sortContainerQueries;
11
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
12
+ var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
13
+ /**
14
+ * For using in `sx` prop to sort the breakpoint from low to high.
15
+ * Note: this function does not work and will not support multiple units.
16
+ * e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
17
+ * output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
18
+ */
19
+ function sortContainerQueries(theme, css) {
20
+ if (!theme.containerQueries) {
21
+ return css;
22
+ }
23
+ const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
24
+ var _a$match, _b$match;
25
+ const regex = /min-width:\s*([0-9.]+)/;
26
+ return +(((_a$match = a.match(regex)) == null ? void 0 : _a$match[1]) || 0) - +(((_b$match = b.match(regex)) == null ? void 0 : _b$match[1]) || 0);
27
+ });
28
+ if (!sorted.length) {
29
+ return css;
30
+ }
31
+ return sorted.reduce((acc, key) => {
32
+ const value = css[key];
33
+ delete acc[key];
34
+ acc[key] = value;
35
+ return acc;
36
+ }, (0, _extends2.default)({}, css));
37
+ }
38
+ function isCqShorthand(breakpointKeys, value) {
39
+ return value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
40
+ }
41
+ function getContainerQuery(theme, shorthand) {
42
+ const matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
43
+ if (!matches) {
44
+ if (process.env.NODE_ENV !== 'production') {
45
+ throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
46
+ For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : (0, _formatMuiErrorMessage2.default)(21, `(${shorthand})`));
47
+ }
48
+ return null;
49
+ }
50
+ const [, containerQuery, containerName] = matches;
51
+ const value = Number.isNaN(+containerQuery) ? containerQuery : +containerQuery;
52
+ return theme.containerQueries(containerName).up(value);
53
+ }
54
+ function cssContainerQueries(themeInput) {
55
+ const toContainerQuery = (mediaQuery, name) => mediaQuery.replace('@media', name ? `@container ${name}` : '@container');
56
+ function attachCq(node, name) {
57
+ node.up = (...args) => toContainerQuery(themeInput.breakpoints.up(...args), name);
58
+ node.down = (...args) => toContainerQuery(themeInput.breakpoints.down(...args), name);
59
+ node.between = (...args) => toContainerQuery(themeInput.breakpoints.between(...args), name);
60
+ node.only = (...args) => toContainerQuery(themeInput.breakpoints.only(...args), name);
61
+ node.not = (...args) => {
62
+ const result = toContainerQuery(themeInput.breakpoints.not(...args), name);
63
+ if (result.includes('not all and')) {
64
+ // `@container` does not work with `not all and`, so need to invert the logic
65
+ return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>');
66
+ }
67
+ return result;
68
+ };
69
+ }
70
+ const node = {};
71
+ const containerQueries = name => {
72
+ attachCq(node, name);
73
+ return node;
74
+ };
75
+ attachCq(containerQueries);
76
+ return (0, _extends2.default)({}, themeInput, {
77
+ containerQueries
78
+ });
79
+ }
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "default", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _cssContainerQueries.default;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "getContainerQuery", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _cssContainerQueries.getContainerQuery;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "isCqShorthand", {
19
+ enumerable: true,
20
+ get: function () {
21
+ return _cssContainerQueries.isCqShorthand;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "sortContainerQueries", {
25
+ enumerable: true,
26
+ get: function () {
27
+ return _cssContainerQueries.sortContainerQueries;
28
+ }
29
+ });
30
+ var _cssContainerQueries = _interopRequireWildcard(require("./cssContainerQueries"));
31
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
32
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
package/node/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/system v6.0.0-alpha.1
2
+ * @mui/system v6.0.0-alpha.3
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -22,6 +22,7 @@ var _exportNames = {
22
22
  handleBreakpoints: true,
23
23
  mergeBreakpointsInOrder: true,
24
24
  unstable_resolveBreakpointValues: true,
25
+ cssContainerQueries: true,
25
26
  compose: true,
26
27
  display: true,
27
28
  flexbox: true,
@@ -174,6 +175,12 @@ Object.defineProperty(exports, "css", {
174
175
  return _styledEngine.css;
175
176
  }
176
177
  });
178
+ Object.defineProperty(exports, "cssContainerQueries", {
179
+ enumerable: true,
180
+ get: function () {
181
+ return _cssContainerQueries.default;
182
+ }
183
+ });
177
184
  Object.defineProperty(exports, "display", {
178
185
  enumerable: true,
179
186
  get: function () {
@@ -395,6 +402,7 @@ Object.keys(_borders).forEach(function (key) {
395
402
  });
396
403
  });
397
404
  var _breakpoints = _interopRequireWildcard(require("./breakpoints"));
405
+ var _cssContainerQueries = _interopRequireDefault(require("./cssContainerQueries"));
398
406
  var _compose = _interopRequireDefault(require("./compose"));
399
407
  var _display = _interopRequireDefault(require("./display"));
400
408
  var _flexbox = _interopRequireWildcard(require("./flexbox"));
@@ -10,6 +10,7 @@ var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
10
10
  var _merge = _interopRequireDefault(require("../merge"));
11
11
  var _style = require("../style");
12
12
  var _breakpoints = require("../breakpoints");
13
+ var _cssContainerQueries = require("../cssContainerQueries");
13
14
  var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
14
15
  function objectsHaveSameKeys(...objects) {
15
16
  const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
@@ -124,7 +125,7 @@ function unstable_createStyleFunctionSx() {
124
125
  }
125
126
  }
126
127
  });
127
- return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
128
+ return (0, _cssContainerQueries.sortContainerQueries)(theme, (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css));
128
129
  }
129
130
  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
130
131
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/system",
3
- "version": "6.0.0-alpha.1",
3
+ "version": "6.0.0-alpha.3",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -30,10 +30,10 @@
30
30
  "clsx": "^2.1.0",
31
31
  "csstype": "^3.1.3",
32
32
  "prop-types": "^15.8.1",
33
- "@mui/private-theming": "^6.0.0-alpha.1",
34
- "@mui/styled-engine": "^6.0.0-alpha.1",
35
- "@mui/utils": "^6.0.0-alpha.1",
36
- "@mui/types": "^7.2.14"
33
+ "@mui/private-theming": "^6.0.0-alpha.3",
34
+ "@mui/styled-engine": "^6.0.0-alpha.3",
35
+ "@mui/types": "^7.2.14",
36
+ "@mui/utils": "^6.0.0-alpha.3"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "@emotion/react": "^11.5.0",
@@ -2,6 +2,7 @@ import capitalize from '@mui/utils/capitalize';
2
2
  import merge from '../merge';
3
3
  import { getPath, getStyleValue as getValue } from '../style';
4
4
  import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
5
+ import { sortContainerQueries } from '../cssContainerQueries';
5
6
  import defaultSxConfig from './defaultSxConfig';
6
7
  function objectsHaveSameKeys(...objects) {
7
8
  const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
@@ -115,7 +116,7 @@ export function unstable_createStyleFunctionSx() {
115
116
  }
116
117
  }
117
118
  });
118
- return removeUnusedBreakpoints(breakpointsKeys, css);
119
+ return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
119
120
  }
120
121
  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
121
122
  }
package/legacy/Box/Box.js DELETED
@@ -1,30 +0,0 @@
1
- 'use client';
2
-
3
- import PropTypes from 'prop-types';
4
- import ClassNameGenerator from '@mui/utils/ClassNameGenerator';
5
- import createBox from '../createBox';
6
- import boxClasses from './boxClasses';
7
- var Box = createBox({
8
- defaultClassName: boxClasses.root,
9
- generateClassName: ClassNameGenerator.generate
10
- });
11
- process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
12
- // ┌────────────────────────────── Warning ──────────────────────────────┐
13
- // │ These PropTypes are generated from the TypeScript type definitions. │
14
- // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
15
- // └─────────────────────────────────────────────────────────────────────┘
16
- /**
17
- * @ignore
18
- */
19
- children: PropTypes.node,
20
- /**
21
- * The component used for the root node.
22
- * Either a string to use a HTML element or a component.
23
- */
24
- component: PropTypes.elementType,
25
- /**
26
- * The system prop that allows defining system overrides as well as additional CSS styles.
27
- */
28
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
29
- } : void 0;
30
- export default Box;
@@ -1,3 +0,0 @@
1
- import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
2
- var boxClasses = generateUtilityClasses('MuiBox', ['root']);
3
- export default boxClasses;
@@ -1,5 +0,0 @@
1
- 'use client';
2
-
3
- export { default } from './Box';
4
- export { default as boxClasses } from './boxClasses';
5
- export * from './boxClasses';
@@ -1,61 +0,0 @@
1
- 'use client';
2
-
3
- import PropTypes from 'prop-types';
4
- import createContainer from './createContainer';
5
-
6
- /**
7
- *
8
- * Demos:
9
- *
10
- * - [Container (Material UI)](https://mui.com/material-ui/react-container/)
11
- * - [Container (MUI System)](https://mui.com/system/react-container/)
12
- *
13
- * API:
14
- *
15
- * - [Container API](https://mui.com/system/api/container/)
16
- */
17
- var Container = createContainer();
18
- process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
19
- // ┌────────────────────────────── Warning ──────────────────────────────┐
20
- // │ These PropTypes are generated from the TypeScript type definitions. │
21
- // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
22
- // └─────────────────────────────────────────────────────────────────────┘
23
- /**
24
- * @ignore
25
- */
26
- children: PropTypes.node,
27
- /**
28
- * Override or extend the styles applied to the component.
29
- */
30
- classes: PropTypes.object,
31
- /**
32
- * The component used for the root node.
33
- * Either a string to use a HTML element or a component.
34
- */
35
- component: PropTypes.elementType,
36
- /**
37
- * If `true`, the left and right padding is removed.
38
- * @default false
39
- */
40
- disableGutters: PropTypes.bool,
41
- /**
42
- * Set the max-width to match the min-width of the current breakpoint.
43
- * This is useful if you'd prefer to design for a fixed set of sizes
44
- * instead of trying to accommodate a fully fluid viewport.
45
- * It's fluid by default.
46
- * @default false
47
- */
48
- fixed: PropTypes.bool,
49
- /**
50
- * Determine the max-width of the container.
51
- * The container width grows with the size of the screen.
52
- * Set to `false` to disable `maxWidth`.
53
- * @default 'lg'
54
- */
55
- maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
56
- /**
57
- * The system prop that allows defining system overrides as well as additional CSS styles.
58
- */
59
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
60
- } : void 0;
61
- export default Container;
@@ -1 +0,0 @@
1
- export {};
@@ -1,7 +0,0 @@
1
- import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
2
- import generateUtilityClass from '@mui/utils/generateUtilityClass';
3
- export function getContainerUtilityClass(slot) {
4
- return generateUtilityClass('MuiContainer', slot);
5
- }
6
- var containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
7
- export default containerClasses;
@@ -1,140 +0,0 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
3
- import _extends from "@babel/runtime/helpers/esm/extends";
4
- import * as React from 'react';
5
- import PropTypes from 'prop-types';
6
- import clsx from 'clsx';
7
- import generateUtilityClass from '@mui/utils/generateUtilityClass';
8
- import composeClasses from '@mui/utils/composeClasses';
9
- import capitalize from '@mui/utils/capitalize';
10
- import useThemePropsSystem from '../useThemeProps';
11
- import systemStyled from '../styled';
12
- import createTheme from '../createTheme';
13
- import { jsx as _jsx } from "react/jsx-runtime";
14
- var defaultTheme = createTheme();
15
- var defaultCreateStyledComponent = systemStyled('div', {
16
- name: 'MuiContainer',
17
- slot: 'Root',
18
- overridesResolver: function overridesResolver(props, styles) {
19
- var ownerState = props.ownerState;
20
- return [styles.root, styles["maxWidth".concat(capitalize(String(ownerState.maxWidth)))], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
21
- }
22
- });
23
- var useThemePropsDefault = function useThemePropsDefault(inProps) {
24
- return useThemePropsSystem({
25
- props: inProps,
26
- name: 'MuiContainer',
27
- defaultTheme: defaultTheme
28
- });
29
- };
30
- var useUtilityClasses = function useUtilityClasses(ownerState, componentName) {
31
- var getContainerUtilityClass = function getContainerUtilityClass(slot) {
32
- return generateUtilityClass(componentName, slot);
33
- };
34
- var classes = ownerState.classes,
35
- fixed = ownerState.fixed,
36
- disableGutters = ownerState.disableGutters,
37
- maxWidth = ownerState.maxWidth;
38
- var slots = {
39
- root: ['root', maxWidth && "maxWidth".concat(capitalize(String(maxWidth))), fixed && 'fixed', disableGutters && 'disableGutters']
40
- };
41
- return composeClasses(slots, getContainerUtilityClass, classes);
42
- };
43
- export default function createContainer() {
44
- var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
45
- var _options$createStyled = options.createStyledComponent,
46
- createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
47
- _options$useThemeProp = options.useThemeProps,
48
- useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
49
- _options$componentNam = options.componentName,
50
- componentName = _options$componentNam === void 0 ? 'MuiContainer' : _options$componentNam;
51
- var ContainerRoot = createStyledComponent(function (_ref) {
52
- var theme = _ref.theme,
53
- ownerState = _ref.ownerState;
54
- return _extends({
55
- width: '100%',
56
- marginLeft: 'auto',
57
- boxSizing: 'border-box',
58
- marginRight: 'auto',
59
- display: 'block'
60
- }, !ownerState.disableGutters && _defineProperty({
61
- paddingLeft: theme.spacing(2),
62
- paddingRight: theme.spacing(2)
63
- }, theme.breakpoints.up('sm'), {
64
- paddingLeft: theme.spacing(3),
65
- paddingRight: theme.spacing(3)
66
- }));
67
- }, function (_ref3) {
68
- var theme = _ref3.theme,
69
- ownerState = _ref3.ownerState;
70
- return ownerState.fixed && Object.keys(theme.breakpoints.values).reduce(function (acc, breakpointValueKey) {
71
- var breakpoint = breakpointValueKey;
72
- var value = theme.breakpoints.values[breakpoint];
73
- if (value !== 0) {
74
- // @ts-ignore
75
- acc[theme.breakpoints.up(breakpoint)] = {
76
- maxWidth: "".concat(value).concat(theme.breakpoints.unit)
77
- };
78
- }
79
- return acc;
80
- }, {});
81
- }, function (_ref4) {
82
- var theme = _ref4.theme,
83
- ownerState = _ref4.ownerState;
84
- return _extends({}, ownerState.maxWidth === 'xs' && _defineProperty({}, theme.breakpoints.up('xs'), {
85
- // @ts-ignore module augmentation fails if custom breakpoints are used
86
- maxWidth: Math.max(theme.breakpoints.values.xs, 444)
87
- }), ownerState.maxWidth &&
88
- // @ts-ignore module augmentation fails if custom breakpoints are used
89
- ownerState.maxWidth !== 'xs' && _defineProperty({}, theme.breakpoints.up(ownerState.maxWidth), {
90
- // @ts-ignore module augmentation fails if custom breakpoints are used
91
- maxWidth: "".concat(theme.breakpoints.values[ownerState.maxWidth]).concat(theme.breakpoints.unit)
92
- }));
93
- });
94
- var Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
95
- var props = useThemeProps(inProps);
96
- var className = props.className,
97
- _props$component = props.component,
98
- component = _props$component === void 0 ? 'div' : _props$component,
99
- _props$disableGutters = props.disableGutters,
100
- disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
101
- _props$fixed = props.fixed,
102
- fixed = _props$fixed === void 0 ? false : _props$fixed,
103
- _props$maxWidth = props.maxWidth,
104
- maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
105
- classesProp = props.classes,
106
- other = _objectWithoutProperties(props, ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"]);
107
- var ownerState = _extends({}, props, {
108
- component: component,
109
- disableGutters: disableGutters,
110
- fixed: fixed,
111
- maxWidth: maxWidth
112
- });
113
-
114
- // @ts-ignore module augmentation fails if custom breakpoints are used
115
- var classes = useUtilityClasses(ownerState, componentName);
116
- return (
117
- /*#__PURE__*/
118
- // @ts-ignore theme is injected by the styled util
119
- _jsx(ContainerRoot, _extends({
120
- as: component
121
- // @ts-ignore module augmentation fails if custom breakpoints are used
122
- ,
123
- ownerState: ownerState,
124
- className: clsx(classes.root, className),
125
- ref: ref
126
- }, other))
127
- );
128
- });
129
- process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
130
- children: PropTypes.node,
131
- classes: PropTypes.object,
132
- className: PropTypes.string,
133
- component: PropTypes.elementType,
134
- disableGutters: PropTypes.bool,
135
- fixed: PropTypes.bool,
136
- maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
137
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
138
- } : void 0;
139
- return Container;
140
- }
@@ -1,5 +0,0 @@
1
- 'use client';
2
-
3
- export { default } from './Container';
4
- export { default as containerClasses } from './containerClasses';
5
- export * from './containerClasses';
@@ -1,37 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import PropTypes from 'prop-types';
5
- import { GlobalStyles as MuiGlobalStyles } from '@mui/styled-engine';
6
- import useTheme from '../useTheme';
7
- import { jsx as _jsx } from "react/jsx-runtime";
8
- function GlobalStyles(_ref) {
9
- var styles = _ref.styles,
10
- themeId = _ref.themeId,
11
- _ref$defaultTheme = _ref.defaultTheme,
12
- defaultTheme = _ref$defaultTheme === void 0 ? {} : _ref$defaultTheme;
13
- var upperTheme = useTheme(defaultTheme);
14
- var globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
15
- return /*#__PURE__*/_jsx(MuiGlobalStyles, {
16
- styles: globalStyles
17
- });
18
- }
19
- process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
20
- // ┌────────────────────────────── Warning ──────────────────────────────┐
21
- // │ These PropTypes are generated from the TypeScript type definitions. │
22
- // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
23
- // └─────────────────────────────────────────────────────────────────────┘
24
- /**
25
- * @ignore
26
- */
27
- defaultTheme: PropTypes.object,
28
- /**
29
- * @ignore
30
- */
31
- styles: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.array, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
32
- /**
33
- * @ignore
34
- */
35
- themeId: PropTypes.string
36
- } : void 0;
37
- export default GlobalStyles;
@@ -1,4 +0,0 @@
1
- 'use client';
2
-
3
- export { default } from './GlobalStyles';
4
- export * from './GlobalStyles';
@@ -1,22 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
- import * as React from 'react';
4
- import PropTypes from 'prop-types';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- var RtlContext = /*#__PURE__*/React.createContext();
7
- function RtlProvider(_ref) {
8
- var value = _ref.value,
9
- props = _objectWithoutProperties(_ref, ["value"]);
10
- return /*#__PURE__*/_jsx(RtlContext.Provider, _extends({
11
- value: value != null ? value : true
12
- }, props));
13
- }
14
- process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
15
- children: PropTypes.node,
16
- value: PropTypes.bool
17
- } : void 0;
18
- export var useRtl = function useRtl() {
19
- var value = React.useContext(RtlContext);
20
- return value != null ? value : false;
21
- };
22
- export default RtlProvider;
@@ -1,62 +0,0 @@
1
- 'use client';
2
-
3
- import PropTypes from 'prop-types';
4
- import createStack from './createStack';
5
- /**
6
- *
7
- * Demos:
8
- *
9
- * - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
10
- * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
11
- * - [Stack (MUI System)](https://mui.com/system/react-stack/)
12
- *
13
- * API:
14
- *
15
- * - [Stack API](https://mui.com/system/api/stack/)
16
- */
17
- var Stack = createStack();
18
- process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
19
- // ┌────────────────────────────── Warning ──────────────────────────────┐
20
- // │ These PropTypes are generated from the TypeScript type definitions. │
21
- // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
22
- // └─────────────────────────────────────────────────────────────────────┘
23
- /**
24
- * The content of the component.
25
- */
26
- children: PropTypes.node,
27
- /**
28
- * The component used for the root node.
29
- * Either a string to use a HTML element or a component.
30
- */
31
- component: PropTypes.elementType,
32
- /**
33
- * Defines the `flex-direction` style property.
34
- * It is applied for all screen sizes.
35
- * @default 'column'
36
- */
37
- direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
38
- /**
39
- * Add an element between each child.
40
- */
41
- divider: PropTypes.node,
42
- /**
43
- * Defines the space between immediate children.
44
- * @default 0
45
- */
46
- spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
47
- /**
48
- * The system prop, which allows defining system overrides as well as additional CSS styles.
49
- */
50
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
51
- /**
52
- * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
53
- *
54
- * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
55
- * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
56
- *
57
- * To enable this flag globally, follow the theme's default props configuration.
58
- * @default false
59
- */
60
- useFlexGap: PropTypes.bool
61
- } : void 0;
62
- export default Stack;
@@ -1 +0,0 @@
1
- export {};