@mui/system 6.0.0-alpha.1 → 6.0.0-alpha.10

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 (189) hide show
  1. package/CHANGELOG.md +462 -4
  2. package/Container/Container.d.ts +1 -1
  3. package/Container/createContainer.js +39 -35
  4. package/RtlProvider/index.js +8 -11
  5. package/Stack/Stack.d.ts +1 -1
  6. package/Stack/createStack.d.ts +1 -1
  7. package/Stack/createStack.js +24 -26
  8. package/ThemeProvider/ThemeProvider.js +9 -5
  9. package/Unstable_Grid/Grid.d.ts +1 -1
  10. package/Unstable_Grid/createGrid.d.ts +1 -1
  11. package/Unstable_Grid/createGrid.js +21 -23
  12. package/Unstable_Grid/gridGenerator.js +20 -17
  13. package/breakpoints/breakpoints.js +26 -7
  14. package/createBox/createBox.js +9 -12
  15. package/createStyled/createStyled.js +56 -51
  16. package/createTheme/applyStyles.d.ts +1 -1
  17. package/createTheme/applyStyles.js +1 -1
  18. package/createTheme/createBreakpoints.js +24 -25
  19. package/createTheme/createTheme.d.ts +2 -1
  20. package/createTheme/createTheme.js +20 -14
  21. package/cssContainerQueries/cssContainerQueries.d.ts +24 -0
  22. package/cssContainerQueries/cssContainerQueries.js +70 -0
  23. package/cssContainerQueries/index.d.ts +3 -0
  24. package/cssContainerQueries/index.js +2 -0
  25. package/cssContainerQueries/package.json +6 -0
  26. package/cssVars/createCssVarsProvider.d.ts +1 -1
  27. package/cssVars/createCssVarsProvider.js +17 -16
  28. package/cssVars/createCssVarsTheme.js +3 -3
  29. package/cssVars/cssVarsParser.d.ts +1 -1
  30. package/cssVars/index.d.ts +2 -0
  31. package/cssVars/index.js +1 -0
  32. package/cssVars/prepareCssVars.js +30 -25
  33. package/cssVars/prepareTypographyVars.d.ts +8 -0
  34. package/cssVars/prepareTypographyVars.js +11 -0
  35. package/cssVars/useCurrentColorScheme.js +18 -11
  36. package/index.d.ts +2 -0
  37. package/index.js +2 -1
  38. package/modern/Container/createContainer.js +39 -35
  39. package/modern/RtlProvider/index.js +8 -11
  40. package/modern/Stack/createStack.js +24 -26
  41. package/modern/ThemeProvider/ThemeProvider.js +9 -5
  42. package/modern/Unstable_Grid/createGrid.js +21 -23
  43. package/modern/Unstable_Grid/gridGenerator.js +20 -17
  44. package/modern/breakpoints/breakpoints.js +26 -7
  45. package/modern/createBox/createBox.js +9 -12
  46. package/modern/createStyled/createStyled.js +56 -51
  47. package/modern/createTheme/applyStyles.js +1 -1
  48. package/modern/createTheme/createBreakpoints.js +24 -25
  49. package/modern/createTheme/createTheme.js +20 -14
  50. package/modern/cssContainerQueries/cssContainerQueries.js +70 -0
  51. package/modern/cssContainerQueries/index.js +2 -0
  52. package/modern/cssVars/createCssVarsProvider.js +17 -16
  53. package/modern/cssVars/createCssVarsTheme.js +3 -3
  54. package/modern/cssVars/index.js +1 -0
  55. package/modern/cssVars/prepareCssVars.js +30 -25
  56. package/modern/cssVars/prepareTypographyVars.js +11 -0
  57. package/modern/cssVars/useCurrentColorScheme.js +18 -11
  58. package/modern/index.js +2 -1
  59. package/modern/propsToClassKey/propsToClassKey.js +3 -5
  60. package/modern/styleFunctionSx/defaultSxConfig.js +3 -0
  61. package/modern/styleFunctionSx/extendSxProp.js +14 -10
  62. package/modern/styleFunctionSx/styleFunctionSx.js +2 -1
  63. package/node/Container/createContainer.js +39 -35
  64. package/node/RtlProvider/index.js +8 -11
  65. package/node/Stack/createStack.js +24 -26
  66. package/node/ThemeProvider/ThemeProvider.js +9 -5
  67. package/node/Unstable_Grid/createGrid.js +23 -25
  68. package/node/Unstable_Grid/gridGenerator.js +20 -18
  69. package/node/breakpoints/breakpoints.js +26 -7
  70. package/node/createBox/createBox.js +9 -12
  71. package/node/createStyled/createStyled.js +58 -52
  72. package/node/createTheme/applyStyles.js +1 -1
  73. package/node/createTheme/createBreakpoints.js +24 -26
  74. package/node/createTheme/createTheme.js +20 -14
  75. package/node/cssContainerQueries/cssContainerQueries.js +81 -0
  76. package/node/cssContainerQueries/index.js +32 -0
  77. package/node/cssVars/createCssVarsProvider.js +17 -16
  78. package/node/cssVars/createCssVarsTheme.js +3 -3
  79. package/node/cssVars/index.js +7 -0
  80. package/node/cssVars/prepareCssVars.js +30 -25
  81. package/node/cssVars/prepareTypographyVars.js +17 -0
  82. package/node/cssVars/useCurrentColorScheme.js +18 -12
  83. package/node/index.js +9 -1
  84. package/node/propsToClassKey/propsToClassKey.js +3 -5
  85. package/node/styleFunctionSx/defaultSxConfig.js +3 -0
  86. package/node/styleFunctionSx/extendSxProp.js +14 -10
  87. package/node/styleFunctionSx/styleFunctionSx.js +2 -1
  88. package/package.json +7 -7
  89. package/propsToClassKey/propsToClassKey.js +3 -5
  90. package/styleFunctionSx/defaultSxConfig.js +3 -0
  91. package/styleFunctionSx/extendSxProp.js +14 -10
  92. package/styleFunctionSx/styleFunctionSx.js +2 -1
  93. package/legacy/Box/Box.js +0 -30
  94. package/legacy/Box/boxClasses.js +0 -3
  95. package/legacy/Box/index.js +0 -5
  96. package/legacy/Container/Container.js +0 -61
  97. package/legacy/Container/ContainerProps.js +0 -1
  98. package/legacy/Container/containerClasses.js +0 -7
  99. package/legacy/Container/createContainer.js +0 -140
  100. package/legacy/Container/index.js +0 -5
  101. package/legacy/GlobalStyles/GlobalStyles.js +0 -37
  102. package/legacy/GlobalStyles/index.js +0 -4
  103. package/legacy/RtlProvider/index.js +0 -22
  104. package/legacy/Stack/Stack.js +0 -62
  105. package/legacy/Stack/StackProps.js +0 -1
  106. package/legacy/Stack/createStack.js +0 -180
  107. package/legacy/Stack/index.js +0 -7
  108. package/legacy/Stack/stackClasses.js +0 -7
  109. package/legacy/ThemeProvider/ThemeProvider.js +0 -87
  110. package/legacy/ThemeProvider/index.js +0 -3
  111. package/legacy/Unstable_Grid/Grid.js +0 -177
  112. package/legacy/Unstable_Grid/GridProps.js +0 -1
  113. package/legacy/Unstable_Grid/createGrid.js +0 -184
  114. package/legacy/Unstable_Grid/gridClasses.js +0 -28
  115. package/legacy/Unstable_Grid/gridGenerator.js +0 -216
  116. package/legacy/Unstable_Grid/index.js +0 -8
  117. package/legacy/Unstable_Grid/traverseBreakpoints.js +0 -48
  118. package/legacy/borders/borders.js +0 -51
  119. package/legacy/borders/index.js +0 -4
  120. package/legacy/breakpoints/breakpoints.js +0 -162
  121. package/legacy/breakpoints/index.js +0 -4
  122. package/legacy/colorManipulator/colorManipulator.js +0 -356
  123. package/legacy/colorManipulator/index.js +0 -3
  124. package/legacy/compose/compose.js +0 -32
  125. package/legacy/compose/index.js +0 -3
  126. package/legacy/createBox/createBox.js +0 -38
  127. package/legacy/createBox/index.js +0 -3
  128. package/legacy/createStyled/createStyled.js +0 -250
  129. package/legacy/createStyled/index.js +0 -4
  130. package/legacy/createTheme/applyStyles.js +0 -73
  131. package/legacy/createTheme/createBreakpoints.js +0 -83
  132. package/legacy/createTheme/createSpacing.js +0 -32
  133. package/legacy/createTheme/createTheme.js +0 -49
  134. package/legacy/createTheme/index.js +0 -3
  135. package/legacy/createTheme/shape.js +0 -4
  136. package/legacy/cssGrid/cssGrid.js +0 -91
  137. package/legacy/cssGrid/index.js +0 -4
  138. package/legacy/cssVars/createCssVarsProvider.js +0 -338
  139. package/legacy/cssVars/createCssVarsTheme.js +0 -13
  140. package/legacy/cssVars/createGetCssVar.js +0 -30
  141. package/legacy/cssVars/cssVarsParser.js +0 -141
  142. package/legacy/cssVars/getInitColorSchemeScript.js +0 -28
  143. package/legacy/cssVars/index.js +0 -6
  144. package/legacy/cssVars/prepareCssVars.js +0 -92
  145. package/legacy/cssVars/useCurrentColorScheme.js +0 -237
  146. package/legacy/display/display.js +0 -29
  147. package/legacy/display/index.js +0 -4
  148. package/legacy/flexbox/flexbox.js +0 -43
  149. package/legacy/flexbox/index.js +0 -4
  150. package/legacy/getThemeValue/getThemeValue.js +0 -47
  151. package/legacy/getThemeValue/index.js +0 -4
  152. package/legacy/index.js +0 -72
  153. package/legacy/memoize/index.js +0 -3
  154. package/legacy/memoize/memoize.js +0 -9
  155. package/legacy/merge/index.js +0 -3
  156. package/legacy/merge/merge.js +0 -10
  157. package/legacy/palette/index.js +0 -4
  158. package/legacy/palette/palette.js +0 -26
  159. package/legacy/positions/index.js +0 -4
  160. package/legacy/positions/positions.js +0 -22
  161. package/legacy/propsToClassKey/index.js +0 -3
  162. package/legacy/propsToClassKey/propsToClassKey.js +0 -24
  163. package/legacy/responsivePropType/index.js +0 -3
  164. package/legacy/responsivePropType/responsivePropType.js +0 -3
  165. package/legacy/shadows/index.js +0 -3
  166. package/legacy/shadows/shadows.js +0 -6
  167. package/legacy/sizing/index.js +0 -4
  168. package/legacy/sizing/sizing.js +0 -65
  169. package/legacy/spacing/index.js +0 -4
  170. package/legacy/spacing/spacing.js +0 -161
  171. package/legacy/style/index.js +0 -4
  172. package/legacy/style/style.js +0 -73
  173. package/legacy/styleFunctionSx/defaultSxConfig.js +0 -293
  174. package/legacy/styleFunctionSx/extendSxProp.js +0 -45
  175. package/legacy/styleFunctionSx/index.js +0 -4
  176. package/legacy/styleFunctionSx/styleFunctionSx.js +0 -126
  177. package/legacy/styled/index.js +0 -3
  178. package/legacy/styled/styled.js +0 -3
  179. package/legacy/typography/index.js +0 -4
  180. package/legacy/typography/typography.js +0 -37
  181. package/legacy/useMediaQuery/index.js +0 -2
  182. package/legacy/useMediaQuery/useMediaQuery.js +0 -145
  183. package/legacy/useTheme/index.js +0 -4
  184. package/legacy/useTheme/useTheme.js +0 -10
  185. package/legacy/useThemeProps/getThemeProps.js +0 -10
  186. package/legacy/useThemeProps/index.js +0 -4
  187. package/legacy/useThemeProps/useThemeProps.js +0 -20
  188. package/legacy/useThemeWithoutDefault/index.js +0 -3
  189. package/legacy/useThemeWithoutDefault/useThemeWithoutDefault.js +0 -13
@@ -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 {};
@@ -1,180 +0,0 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
3
- import _typeof from "@babel/runtime/helpers/esm/typeof";
4
- import _extends from "@babel/runtime/helpers/esm/extends";
5
- import * as React from 'react';
6
- import PropTypes from 'prop-types';
7
- import clsx from 'clsx';
8
- import deepmerge from '@mui/utils/deepmerge';
9
- import generateUtilityClass from '@mui/utils/generateUtilityClass';
10
- import composeClasses from '@mui/utils/composeClasses';
11
- import systemStyled from '../styled';
12
- import useThemePropsSystem from '../useThemeProps';
13
- import { extendSxProp } from '../styleFunctionSx';
14
- import createTheme from '../createTheme';
15
- import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from '../breakpoints';
16
- import { createUnarySpacing, getValue } from '../spacing';
17
- import { jsx as _jsx } from "react/jsx-runtime";
18
- var defaultTheme = createTheme();
19
- // widening Theme to any so that the consumer can own the theme structure.
20
- var defaultCreateStyledComponent = systemStyled('div', {
21
- name: 'MuiStack',
22
- slot: 'Root',
23
- overridesResolver: function overridesResolver(props, styles) {
24
- return styles.root;
25
- }
26
- });
27
- function useThemePropsDefault(props) {
28
- return useThemePropsSystem({
29
- props: props,
30
- name: 'MuiStack',
31
- defaultTheme: defaultTheme
32
- });
33
- }
34
-
35
- /**
36
- * Return an array with the separator React element interspersed between
37
- * each React node of the input children.
38
- *
39
- * > joinChildren([1,2,3], 0)
40
- * [1,0,2,0,3]
41
- */
42
- function joinChildren(children, separator) {
43
- var childrenArray = React.Children.toArray(children).filter(Boolean);
44
- return childrenArray.reduce(function (output, child, index) {
45
- output.push(child);
46
- if (index < childrenArray.length - 1) {
47
- output.push( /*#__PURE__*/React.cloneElement(separator, {
48
- key: "separator-".concat(index)
49
- }));
50
- }
51
- return output;
52
- }, []);
53
- }
54
- var getSideFromDirection = function getSideFromDirection(direction) {
55
- return {
56
- row: 'Left',
57
- 'row-reverse': 'Right',
58
- column: 'Top',
59
- 'column-reverse': 'Bottom'
60
- }[direction];
61
- };
62
- export var style = function style(_ref) {
63
- var ownerState = _ref.ownerState,
64
- theme = _ref.theme;
65
- var styles = _extends({
66
- display: 'flex',
67
- flexDirection: 'column'
68
- }, handleBreakpoints({
69
- theme: theme
70
- }, resolveBreakpointValues({
71
- values: ownerState.direction,
72
- breakpoints: theme.breakpoints.values
73
- }), function (propValue) {
74
- return {
75
- flexDirection: propValue
76
- };
77
- }));
78
- if (ownerState.spacing) {
79
- var transformer = createUnarySpacing(theme);
80
- var base = Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
81
- if (_typeof(ownerState.spacing) === 'object' && ownerState.spacing[breakpoint] != null || _typeof(ownerState.direction) === 'object' && ownerState.direction[breakpoint] != null) {
82
- acc[breakpoint] = true;
83
- }
84
- return acc;
85
- }, {});
86
- var directionValues = resolveBreakpointValues({
87
- values: ownerState.direction,
88
- base: base
89
- });
90
- var spacingValues = resolveBreakpointValues({
91
- values: ownerState.spacing,
92
- base: base
93
- });
94
- if (_typeof(directionValues) === 'object') {
95
- Object.keys(directionValues).forEach(function (breakpoint, index, breakpoints) {
96
- var directionValue = directionValues[breakpoint];
97
- if (!directionValue) {
98
- var previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
99
- directionValues[breakpoint] = previousDirectionValue;
100
- }
101
- });
102
- }
103
- var styleFromPropValue = function styleFromPropValue(propValue, breakpoint) {
104
- if (ownerState.useFlexGap) {
105
- return {
106
- gap: getValue(transformer, propValue)
107
- };
108
- }
109
- return {
110
- // The useFlexGap={false} implement relies on each child to give up control of the margin.
111
- // We need to reset the margin to avoid double spacing.
112
- '& > :not(style):not(style)': {
113
- margin: 0
114
- },
115
- '& > :not(style) ~ :not(style)': _defineProperty({}, "margin".concat(getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)), getValue(transformer, propValue))
116
- };
117
- };
118
- styles = deepmerge(styles, handleBreakpoints({
119
- theme: theme
120
- }, spacingValues, styleFromPropValue));
121
- }
122
- styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
123
- return styles;
124
- };
125
- export default function createStack() {
126
- var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
127
- var _options$createStyled = options.createStyledComponent,
128
- createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
129
- _options$useThemeProp = options.useThemeProps,
130
- useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
131
- _options$componentNam = options.componentName,
132
- componentName = _options$componentNam === void 0 ? 'MuiStack' : _options$componentNam;
133
- var useUtilityClasses = function useUtilityClasses() {
134
- var slots = {
135
- root: ['root']
136
- };
137
- return composeClasses(slots, function (slot) {
138
- return generateUtilityClass(componentName, slot);
139
- }, {});
140
- };
141
- var StackRoot = createStyledComponent(style);
142
- var Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
143
- var themeProps = useThemeProps(inProps);
144
- var props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
145
- var _props$component = props.component,
146
- component = _props$component === void 0 ? 'div' : _props$component,
147
- _props$direction = props.direction,
148
- direction = _props$direction === void 0 ? 'column' : _props$direction,
149
- _props$spacing = props.spacing,
150
- spacing = _props$spacing === void 0 ? 0 : _props$spacing,
151
- divider = props.divider,
152
- children = props.children,
153
- className = props.className,
154
- _props$useFlexGap = props.useFlexGap,
155
- useFlexGap = _props$useFlexGap === void 0 ? false : _props$useFlexGap,
156
- other = _objectWithoutProperties(props, ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"]);
157
- var ownerState = {
158
- direction: direction,
159
- spacing: spacing,
160
- useFlexGap: useFlexGap
161
- };
162
- var classes = useUtilityClasses();
163
- return /*#__PURE__*/_jsx(StackRoot, _extends({
164
- as: component,
165
- ownerState: ownerState,
166
- ref: ref,
167
- className: clsx(classes.root, className)
168
- }, other, {
169
- children: divider ? joinChildren(children, divider) : children
170
- }));
171
- });
172
- process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
173
- children: PropTypes.node,
174
- direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
175
- divider: PropTypes.node,
176
- spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
177
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
178
- } : void 0;
179
- return Stack;
180
- }
@@ -1,7 +0,0 @@
1
- 'use client';
2
-
3
- export { default } from './Stack';
4
- export { default as createStack } from './createStack';
5
- export * from './StackProps';
6
- export { default as stackClasses } from './stackClasses';
7
- export * from './stackClasses';
@@ -1,7 +0,0 @@
1
- import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
2
- import generateUtilityClass from '@mui/utils/generateUtilityClass';
3
- export function getStackUtilityClass(slot) {
4
- return generateUtilityClass('MuiStack', slot);
5
- }
6
- var stackClasses = generateUtilityClasses('MuiStack', ['root']);
7
- export default stackClasses;
@@ -1,87 +0,0 @@
1
- 'use client';
2
-
3
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
4
- import _extends from "@babel/runtime/helpers/esm/extends";
5
- import * as React from 'react';
6
- import PropTypes from 'prop-types';
7
- import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '@mui/private-theming';
8
- import exactProp from '@mui/utils/exactProp';
9
- import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
10
- import useThemeWithoutDefault from '../useThemeWithoutDefault';
11
- import RtlProvider from '../RtlProvider';
12
- import { jsx as _jsx } from "react/jsx-runtime";
13
- var EMPTY_THEME = {};
14
- function useThemeScoping(themeId, upperTheme, localTheme) {
15
- var isPrivate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
16
- return React.useMemo(function () {
17
- var resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
18
- if (typeof localTheme === 'function') {
19
- var mergedTheme = localTheme(resolvedTheme);
20
- var result = themeId ? _extends({}, upperTheme, _defineProperty({}, themeId, mergedTheme)) : mergedTheme;
21
- // must return a function for the private theme to NOT merge with the upper theme.
22
- // see the test case "use provided theme from a callback" in ThemeProvider.test.js
23
- if (isPrivate) {
24
- return function () {
25
- return result;
26
- };
27
- }
28
- return result;
29
- }
30
- return themeId ? _extends({}, upperTheme, _defineProperty({}, themeId, localTheme)) : _extends({}, upperTheme, localTheme);
31
- }, [themeId, upperTheme, localTheme, isPrivate]);
32
- }
33
-
34
- /**
35
- * This component makes the `theme` available down the React tree.
36
- * It should preferably be used at **the root of your component tree**.
37
- *
38
- * <ThemeProvider theme={theme}> // existing use case
39
- * <ThemeProvider theme={{ id: theme }}> // theme scoping
40
- */
41
- function ThemeProvider(props) {
42
- var children = props.children,
43
- localTheme = props.theme,
44
- themeId = props.themeId;
45
- var upperTheme = useThemeWithoutDefault(EMPTY_THEME);
46
- var upperPrivateTheme = usePrivateTheme() || EMPTY_THEME;
47
- if (process.env.NODE_ENV !== 'production') {
48
- if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
49
- console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
50
- }
51
- }
52
- var engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
53
- var privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
54
- var rtlValue = engineTheme.direction === 'rtl';
55
- return /*#__PURE__*/_jsx(MuiThemeProvider, {
56
- theme: privateTheme,
57
- children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
58
- value: engineTheme,
59
- children: /*#__PURE__*/_jsx(RtlProvider, {
60
- value: rtlValue,
61
- children: children
62
- })
63
- })
64
- });
65
- }
66
- process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes /* remove-proptypes */ = {
67
- // ┌────────────────────────────── Warning ──────────────────────────────┐
68
- // │ These PropTypes are generated from the TypeScript type definitions. │
69
- // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
70
- // └─────────────────────────────────────────────────────────────────────┘
71
- /**
72
- * Your component tree.
73
- */
74
- children: PropTypes.node,
75
- /**
76
- * A theme object. You can provide a function to extend the outer theme.
77
- */
78
- theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
79
- /**
80
- * The design system's unique id for getting the corresponded theme when there are multiple design systems.
81
- */
82
- themeId: PropTypes.string
83
- } : void 0;
84
- if (process.env.NODE_ENV !== 'production') {
85
- process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) : void 0;
86
- }
87
- export default ThemeProvider;
@@ -1,3 +0,0 @@
1
- 'use client';
2
-
3
- export { default } from './ThemeProvider';