@mui/system 6.4.0 → 6.4.2

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 (26) hide show
  1. package/CHANGELOG.md +69 -0
  2. package/RtlProvider/index.js +1 -0
  3. package/cssContainerQueries/cssContainerQueries.d.ts +1 -2
  4. package/cssVars/createCssVarsProvider.js +3 -1
  5. package/esm/RtlProvider/index.js +2 -0
  6. package/esm/cssVars/createCssVarsProvider.js +4 -1
  7. package/esm/styleFunctionSx/AliasesCSSProperties.js +1 -0
  8. package/esm/styleFunctionSx/OverwriteCSSProperties.js +1 -0
  9. package/esm/styleFunctionSx/StandardCssProperties.js +1 -0
  10. package/esm/version/index.js +2 -2
  11. package/index.js +1 -1
  12. package/modern/RtlProvider/index.js +2 -0
  13. package/modern/cssVars/createCssVarsProvider.js +4 -1
  14. package/modern/index.js +1 -1
  15. package/modern/styleFunctionSx/AliasesCSSProperties.js +1 -0
  16. package/modern/styleFunctionSx/OverwriteCSSProperties.js +1 -0
  17. package/modern/styleFunctionSx/StandardCssProperties.js +1 -0
  18. package/modern/version/index.js +2 -2
  19. package/package.json +4 -4
  20. package/styleFunctionSx/AliasesCSSProperties.d.ts +266 -267
  21. package/styleFunctionSx/AliasesCSSProperties.js +5 -0
  22. package/styleFunctionSx/OverwriteCSSProperties.d.ts +51 -52
  23. package/styleFunctionSx/OverwriteCSSProperties.js +5 -0
  24. package/styleFunctionSx/StandardCssProperties.d.ts +0 -1
  25. package/styleFunctionSx/StandardCssProperties.js +5 -0
  26. package/version/index.js +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,74 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 6.4.2
4
+
5
+ <!-- generated comparing v6.4.1..v6.x -->
6
+
7
+ _Jan 29, 2025_
8
+
9
+ A big thanks to the 5 contributors who made this release possible.
10
+
11
+ ### `@mui/material@6.4.2`
12
+
13
+ - [Autocomplete] Prevent shrink animation in uncontrolled Autocomplete when default value is set (#44873) @ZeeshanTamboli
14
+ - [Slider] Fix arrow keys past the end for Slider with custom marks (#45050) @joshkel
15
+ - [TextareaAutosize] Temporarily disconnect ResizeObserver to avoid loop error (#44540) @mj12albert
16
+
17
+ ### Core
18
+
19
+ - [code-infra] a few fixes uncovered during ESM updates (@Janpot) (#45100) @Janpot
20
+ - [code-infra] Remove rsc-builder (#45079) @Janpot
21
+ - [code-infra] Remove commonjs imports in docs (#44976) @Janpot
22
+ - Prepare stable release from the `v6.x` branch (#45133) @DiegoAndai
23
+
24
+ ### Docs
25
+
26
+ - Fix `/base-ui` redirect and prune links (#45083) @mj12albert
27
+
28
+ All contributors of this release in alphabetical order: @DiegoAndai, @Janpot, @joshkel, @mj12albert, @ZeeshanTamboli
29
+
30
+ ## 6.4.1
31
+
32
+ <!-- generated comparing v6.4.0..master -->
33
+
34
+ _Jan 21, 2025_
35
+
36
+ A big thanks to the 9 contributors who made this release possible.
37
+
38
+ ### `@mui/material@6.4.1`
39
+
40
+ - [ButtonBase] Export types used in ButtonBase props (#43530) @Janpot
41
+ - [Dialog] Add slots and slotProps (#44792) @sai6855
42
+ - [Drawer] Deprecate composed classes (#44870) @yash49
43
+ - [IconButton] Set default loading to `null` (#45057) @siriwatknp
44
+ - [ListItem] Add codemod for deprecated props (#45022) @sai6855
45
+ - [Modal] Add migration guide and codemod for deprecated props (#45021) @sai6855
46
+ - [TextField] Fix filled state to be synced with autofill (#44135) @DiegoAndai
47
+
48
+ ### `@mui/system@6.4.1`
49
+
50
+ - Fix dark mode flicker using `useEnhancedEffect` (#44812) @siriwatknp
51
+
52
+ ### `@mui/utils@6.4.1`
53
+
54
+ - Do not deep merge React component (#45058) @siriwatknp
55
+
56
+ ### Docs
57
+
58
+ - Fix typo (#45070) @Fullchee
59
+ - Improve Toolpad templates section (#44914) @bharatkashyap
60
+ - Fix expand / collapse icons orientation (#44989) @zanivan
61
+ - Rename "Base UI" to "MUI Base" in all text (#45060) @mj12albert
62
+ - Add @mui/base deprecation callout (#45030) @mj12albert
63
+ - Update @mui/base deprecation message (#45064) @mj12albert
64
+
65
+ ### Core
66
+
67
+ - [code-infra] Add "use client" directive to files with React APIs (#45036) @Janpot
68
+ - [docs] 301 redirect `/base-ui` to `base-ui.com` (#45061) @mj12albert
69
+
70
+ All contributors of this release in alphabetical order: @bharatkashyap, @DiegoAndai, @Fullchee, @Janpot, @mj12albert, @sai6855, @siriwatknp, @yash49, @zanivan
71
+
3
72
  ## 6.4.0
4
73
 
5
74
  <!-- generated comparing v6.3.1..master -->
package/RtlProvider/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
5
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
package/cssContainerQueries/cssContainerQueries.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Breakpoints } from '../createBreakpoints/createBreakpoints';
2
- interface ContainerQueries {
2
+ export interface ContainerQueries {
3
3
  up: Breakpoints['up'];
4
4
  down: Breakpoints['down'];
5
5
  between: Breakpoints['between'];
@@ -21,4 +21,3 @@ export declare function getContainerQuery(theme: CssContainerQueries, shorthand:
21
21
  export default function cssContainerQueries<T extends {
22
22
  breakpoints: Breakpoints;
23
23
  }>(themeInput: T): T & CssContainerQueries;
24
- export {};
package/cssVars/createCssVarsProvider.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
5
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -11,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
11
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
13
  var _styledEngine = require("@mui/styled-engine");
13
14
  var _privateTheming = require("@mui/private-theming");
15
+ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
14
16
  var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
15
17
  var _InitColorSchemeScript = _interopRequireWildcard(require("../InitColorSchemeScript/InitColorSchemeScript"));
16
18
  var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
@@ -155,7 +157,7 @@ function createCssVarsProvider(options) {
155
157
  // 5. Declaring effects
156
158
  // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
157
159
  const colorSchemeSelector = restThemeProp.colorSchemeSelector;
158
- React.useEffect(() => {
160
+ (0, _useEnhancedEffect.default)(() => {
159
161
  if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
160
162
  const selector = colorSchemeSelector;
161
163
  let rule = colorSchemeSelector;
package/esm/RtlProvider/index.js CHANGED
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  import * as React from 'react';
2
4
  import PropTypes from 'prop-types';
3
5
  import { jsx as _jsx } from "react/jsx-runtime";
package/esm/cssVars/createCssVarsProvider.js CHANGED
@@ -1,7 +1,10 @@
1
+ 'use client';
2
+
1
3
  import * as React from 'react';
2
4
  import PropTypes from 'prop-types';
3
5
  import { GlobalStyles } from '@mui/styled-engine';
4
6
  import { useTheme as muiUseTheme } from '@mui/private-theming';
7
+ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
5
8
  import ThemeProvider from "../ThemeProvider/index.js";
6
9
  import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
7
10
  import useCurrentColorScheme from "./useCurrentColorScheme.js";
@@ -146,7 +149,7 @@ export default function createCssVarsProvider(options) {
146
149
  // 5. Declaring effects
147
150
  // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
148
151
  const colorSchemeSelector = restThemeProp.colorSchemeSelector;
149
- React.useEffect(() => {
152
+ useEnhancedEffect(() => {
150
153
  if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
151
154
  const selector = colorSchemeSelector;
152
155
  let rule = colorSchemeSelector;
package/esm/styleFunctionSx/AliasesCSSProperties.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/esm/styleFunctionSx/OverwriteCSSProperties.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/esm/styleFunctionSx/StandardCssProperties.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/esm/version/index.js CHANGED
@@ -1,6 +1,6 @@
1
- export const version = "6.4.0";
1
+ export const version = "6.4.2";
2
2
  export const major = Number("6");
3
3
  export const minor = Number("4");
4
- export const patch = Number("0");
4
+ export const patch = Number("2");
5
5
  export const prerelease = undefined;
6
6
  export default version;
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/system v6.4.0
2
+ * @mui/system v6.4.2
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/modern/RtlProvider/index.js CHANGED
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  import * as React from 'react';
2
4
  import PropTypes from 'prop-types';
3
5
  import { jsx as _jsx } from "react/jsx-runtime";
package/modern/cssVars/createCssVarsProvider.js CHANGED
@@ -1,7 +1,10 @@
1
+ 'use client';
2
+
1
3
  import * as React from 'react';
2
4
  import PropTypes from 'prop-types';
3
5
  import { GlobalStyles } from '@mui/styled-engine';
4
6
  import { useTheme as muiUseTheme } from '@mui/private-theming';
7
+ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
5
8
  import ThemeProvider from "../ThemeProvider/index.js";
6
9
  import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
7
10
  import useCurrentColorScheme from "./useCurrentColorScheme.js";
@@ -146,7 +149,7 @@ export default function createCssVarsProvider(options) {
146
149
  // 5. Declaring effects
147
150
  // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
148
151
  const colorSchemeSelector = restThemeProp.colorSchemeSelector;
149
- React.useEffect(() => {
152
+ useEnhancedEffect(() => {
150
153
  if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
151
154
  const selector = colorSchemeSelector;
152
155
  let rule = colorSchemeSelector;
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/system v6.4.0
2
+ * @mui/system v6.4.2
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/modern/styleFunctionSx/AliasesCSSProperties.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/modern/styleFunctionSx/OverwriteCSSProperties.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/modern/styleFunctionSx/StandardCssProperties.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/modern/version/index.js CHANGED
@@ -1,6 +1,6 @@
1
- export const version = "6.4.0";
1
+ export const version = "6.4.2";
2
2
  export const major = Number("6");
3
3
  export const minor = Number("4");
4
- export const patch = Number("0");
4
+ export const patch = Number("2");
5
5
  export const prerelease = undefined;
6
6
  export default version;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/system",
3
- "version": "6.4.0",
3
+ "version": "6.4.2",
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.1",
31
31
  "csstype": "^3.1.3",
32
32
  "prop-types": "^15.8.1",
33
- "@mui/private-theming": "^6.4.0",
34
- "@mui/styled-engine": "^6.4.0",
33
+ "@mui/private-theming": "^6.4.2",
34
+ "@mui/styled-engine": "^6.4.2",
35
35
  "@mui/types": "^7.2.21",
36
- "@mui/utils": "^6.4.0"
36
+ "@mui/utils": "^6.4.2"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "@emotion/react": "^11.5.0",
package/styleFunctionSx/AliasesCSSProperties.d.ts CHANGED
@@ -1,270 +1,269 @@
1
1
  import { StandardCSSProperties } from './StandardCssProperties';
2
-
3
2
  export interface AliasesCSSProperties {
4
- /**
5
- * The **`background-color`** CSS property sets the background color of an element.
6
- *
7
- * **Initial value**: `transparent`
8
- *
9
- * | Chrome | Firefox | Safari | Edge | IE |
10
- * | :----: | :-----: | :----: | :----: | :---: |
11
- * | **1** | **1** | **1** | **12** | **4** |
12
- *
13
- * @see https://developer.mozilla.org/docs/Web/CSS/background-color
14
- */
15
- bgcolor?: StandardCSSProperties['backgroundColor'];
16
- /**
17
- * The **`margin`** CSS property sets the margin on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
18
- *
19
- * | Chrome | Firefox | Safari | Edge | IE |
20
- * | :----: | :-----: | :----: | :----: | :---: |
21
- * | **1** | **1** | **1** | **12** | **3** |
22
- *
23
- * @see https://developer.mozilla.org/docs/Web/CSS/margin
24
- */
25
- m?: StandardCSSProperties['margin'];
26
- /**
27
- * The **`margin-top`** CSS property sets the margin on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
28
- *
29
- * **Initial value**: `0`
30
- *
31
- * | Chrome | Firefox | Safari | Edge | IE |
32
- * | :----: | :-----: | :----: | :----: | :---: |
33
- * | **1** | **1** | **1** | **12** | **3** |
34
- *
35
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
36
- */
37
- mt?: StandardCSSProperties['marginTop'];
38
- /**
39
- * The **`margin-right`** CSS property sets the margin on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
40
- *
41
- * **Initial value**: `0`
42
- *
43
- * | Chrome | Firefox | Safari | Edge | IE |
44
- * | :----: | :-----: | :----: | :----: | :---: |
45
- * | **1** | **1** | **1** | **12** | **3** |
46
- *
47
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
48
- */
49
- mr?: StandardCSSProperties['marginRight'];
50
- /**
51
- * The **`margin-bottom`** CSS property sets the margin on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
52
- *
53
- * **Initial value**: `0`
54
- *
55
- * | Chrome | Firefox | Safari | Edge | IE |
56
- * | :----: | :-----: | :----: | :----: | :---: |
57
- * | **1** | **1** | **1** | **12** | **3** |
58
- *
59
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
60
- */
61
- mb?: StandardCSSProperties['marginBottom'];
62
- /**
63
- * The **`margin-left`** CSS property sets the margin on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
64
- *
65
- * **Initial value**: `0`
66
- *
67
- * | Chrome | Firefox | Safari | Edge | IE |
68
- * | :----: | :-----: | :----: | :----: | :---: |
69
- * | **1** | **1** | **1** | **12** | **3** |
70
- *
71
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
72
- */
73
- ml?: StandardCSSProperties['marginLeft'];
74
- /**
75
- * The **`mx`** property is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin on the left and right side of an element. A positive value places it
76
- * farther from its neighbors, while a negative value places it closer.
77
- *
78
- * **Initial value**: `0`
79
- *
80
- * | Chrome | Firefox | Safari | Edge | IE |
81
- * | :----: | :-----: | :----: | :----: | :---: |
82
- * | **1** | **1** | **1** | **12** | **3** |
83
- *
84
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
85
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
86
- */
87
- mx?: StandardCSSProperties['marginLeft'];
88
- /**
89
- * The **`marginX`** property is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin on the left and right side of an element. A positive value
90
- * places it farther from its neighbors, while a negative value places it closer.
91
- *
92
- * **Initial value**: `0`
93
- *
94
- * | Chrome | Firefox | Safari | Edge | IE |
95
- * | :----: | :-----: | :----: | :----: | :---: |
96
- * | **1** | **1** | **1** | **12** | **3** |
97
- *
98
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
99
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
100
- */
101
- marginX?: StandardCSSProperties['marginLeft'];
102
- /**
103
- * The **`my`** property is shorthand for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin on the top and bottom of an element. A positive value places it
104
- * farther from its neighbors, while a negative value places it closer.
105
- *
106
- * **Initial value**: `0`
107
- *
108
- * | Chrome | Firefox | Safari | Edge | IE |
109
- * | :----: | :-----: | :----: | :----: | :---: |
110
- * | **1** | **1** | **1** | **12** | **3** |
111
- *
112
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
113
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
114
- */
115
- my?: StandardCSSProperties['marginTop'];
116
- /**
117
- * The **`marginY`** property is shorthand for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin on the top and bottom of an element. A positive value places
118
- * it farther from its neighbors, while a negative value places it closer.
119
- *
120
- * **Initial value**: `0`
121
- *
122
- * | Chrome | Firefox | Safari | Edge | IE |
123
- * | :----: | :-----: | :----: | :----: | :---: |
124
- * | **1** | **1** | **1** | **12** | **3** |
125
- *
126
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
127
- * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
128
- */
129
- marginY?: StandardCSSProperties['marginTop'];
130
- /**
131
- * The **`padding`** CSS property sets the padding on all four sides of an element. It is a shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
132
- *
133
- * | Chrome | Firefox | Safari | Edge | IE |
134
- * | :----: | :-----: | :----: | :----: | :---: |
135
- * | **1** | **1** | **1** | **12** | **4** |
136
- *
137
- * @see https://developer.mozilla.org/docs/Web/CSS/padding
138
- */
139
- p?: StandardCSSProperties['padding'];
140
- /**
141
- * The **`padding-top`** CSS property sets the height of the padding at the top of an element.
142
- *
143
- * **Initial value**: `0`
144
- *
145
- * | Chrome | Firefox | Safari | Edge | IE |
146
- * | :----: | :-----: | :----: | :----: | :---: |
147
- * | **1** | **1** | **1** | **12** | **4** |
148
- *
149
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
150
- */
151
- pt?: StandardCSSProperties['paddingTop'];
152
- /**
153
- * The **`padding-right`** CSS property sets the width of the padding at the right side of an element.
154
- *
155
- * **Initial value**: `0`
156
- *
157
- * | Chrome | Firefox | Safari | Edge | IE |
158
- * | :----: | :-----: | :----: | :----: | :---: |
159
- * | **1** | **1** | **1** | **12** | **4** |
160
- *
161
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
162
- */
163
- pr?: StandardCSSProperties['paddingRight'];
164
- /**
165
- * The **`padding-bottom`** CSS property sets the height of the padding on the bottom of an element.
166
- *
167
- * **Initial value**: `0`
168
- *
169
- * | Chrome | Firefox | Safari | Edge | IE |
170
- * | :----: | :-----: | :----: | :----: | :---: |
171
- * | **1** | **1** | **1** | **12** | **4** |
172
- *
173
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
174
- */
175
- pb?: StandardCSSProperties['paddingBottom'];
176
- /**
177
- * The **`padding-left`** CSS property sets the width of the padding at the left side of an element.
178
- *
179
- * **Initial value**: `0`
180
- *
181
- * | Chrome | Firefox | Safari | Edge | IE |
182
- * | :----: | :-----: | :----: | :----: | :---: |
183
- * | **1** | **1** | **1** | **12** | **4** |
184
- *
185
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
186
- */
187
- pl?: StandardCSSProperties['paddingLeft'];
188
- /**
189
- * The **`px`** property is shorthand for the CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding at the left and right side of an element.
190
- *
191
- * **Initial value**: `0`
192
- *
193
- * | Chrome | Firefox | Safari | Edge | IE |
194
- * | :----: | :-----: | :----: | :----: | :---: |
195
- * | **1** | **1** | **1** | **12** | **4** |
196
- *
197
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
198
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
199
- */
200
- px?: StandardCSSProperties['paddingLeft'];
201
- /**
202
- * The **`paddingX`** property is shorthand for the CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding at the left and right sides of an element.
203
- *
204
- * **Initial value**: `0`
205
- *
206
- * | Chrome | Firefox | Safari | Edge | IE |
207
- * | :----: | :-----: | :----: | :----: | :---: |
208
- * | **1** | **1** | **1** | **12** | **4** |
209
- *
210
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
211
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
212
- */
213
- paddingX?: StandardCSSProperties['paddingLeft'];
214
- /**
215
- * The **`py`** property is shorthand for the CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding at the top and bottom of an element.
216
- *
217
- * **Initial value**: `0`
218
- *
219
- * | Chrome | Firefox | Safari | Edge | IE |
220
- * | :----: | :-----: | :----: | :----: | :---: |
221
- * | **1** | **1** | **1** | **12** | **4** |
222
- *
223
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
224
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
225
- */
226
- py?: StandardCSSProperties['paddingTop'];
227
- /**
228
- * The **`paddingY`** property is shorthand for the CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding at the top and bottom of an element.
229
- *
230
- * **Initial value**: `0`
231
- *
232
- * | Chrome | Firefox | Safari | Edge | IE |
233
- * | :----: | :-----: | :----: | :----: | :---: |
234
- * | **1** | **1** | **1** | **12** | **4** |
235
- *
236
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
237
- * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
238
- */
239
- paddingY?: StandardCSSProperties['paddingTop'];
240
- /**
241
- * The **`typography`** property is shorthand for the CSS properties **`font-family`**, **`font-weight`**, **`font-size`**, **`line-height`**, **`letter-spacing`** and **`text-transform``**.
242
- * It takes the values defined under `theme.typography` and spreads them on the element.
243
- *
244
- * **Initial value**: `0`
245
- *
246
- * | Chrome | Firefox | Safari | Edge | IE |
247
- * | :----: | :-----: | :----: | :----: | :---: |
248
- * | **2** | **1** | **1** | **12** | **5.5** |
249
- *
250
- * @see https://developer.mozilla.org/docs/Web/CSS/font-family
251
- * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
252
- * @see https://developer.mozilla.org/docs/Web/CSS/font-size
253
- * @see https://developer.mozilla.org/docs/Web/CSS/line-height
254
- * @see https://developer.mozilla.org/docs/Web/CSS/letter-spacing
255
- * @see https://developer.mozilla.org/docs/Web/CSS/text-transform
256
- */
257
- typography?: string;
258
- /**
259
- * The **`displayPrint`** property sets the display value for the element when the page is printed.
260
- *
261
- * **Initial value**: `inline`
262
- *
263
- * | Chrome | Firefox | Safari | Edge | IE |
264
- * | :----: | :-----: | :----: | :----: | :---: |
265
- * | **1** | **1** | **1** | **12** | **4** |
266
- *
267
- * @see https://developer.mozilla.org/docs/Web/CSS/display
268
- */
269
- displayPrint?: StandardCSSProperties['display'];
3
+ /**
4
+ * The **`background-color`** CSS property sets the background color of an element.
5
+ *
6
+ * **Initial value**: `transparent`
7
+ *
8
+ * | Chrome | Firefox | Safari | Edge | IE |
9
+ * | :----: | :-----: | :----: | :----: | :---: |
10
+ * | **1** | **1** | **1** | **12** | **4** |
11
+ *
12
+ * @see https://developer.mozilla.org/docs/Web/CSS/background-color
13
+ */
14
+ bgcolor?: StandardCSSProperties['backgroundColor'];
15
+ /**
16
+ * The **`margin`** CSS property sets the margin on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
17
+ *
18
+ * | Chrome | Firefox | Safari | Edge | IE |
19
+ * | :----: | :-----: | :----: | :----: | :---: |
20
+ * | **1** | **1** | **1** | **12** | **3** |
21
+ *
22
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin
23
+ */
24
+ m?: StandardCSSProperties['margin'];
25
+ /**
26
+ * The **`margin-top`** CSS property sets the margin on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
27
+ *
28
+ * **Initial value**: `0`
29
+ *
30
+ * | Chrome | Firefox | Safari | Edge | IE |
31
+ * | :----: | :-----: | :----: | :----: | :---: |
32
+ * | **1** | **1** | **1** | **12** | **3** |
33
+ *
34
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
35
+ */
36
+ mt?: StandardCSSProperties['marginTop'];
37
+ /**
38
+ * The **`margin-right`** CSS property sets the margin on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
39
+ *
40
+ * **Initial value**: `0`
41
+ *
42
+ * | Chrome | Firefox | Safari | Edge | IE |
43
+ * | :----: | :-----: | :----: | :----: | :---: |
44
+ * | **1** | **1** | **1** | **12** | **3** |
45
+ *
46
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
47
+ */
48
+ mr?: StandardCSSProperties['marginRight'];
49
+ /**
50
+ * The **`margin-bottom`** CSS property sets the margin on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
51
+ *
52
+ * **Initial value**: `0`
53
+ *
54
+ * | Chrome | Firefox | Safari | Edge | IE |
55
+ * | :----: | :-----: | :----: | :----: | :---: |
56
+ * | **1** | **1** | **1** | **12** | **3** |
57
+ *
58
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
59
+ */
60
+ mb?: StandardCSSProperties['marginBottom'];
61
+ /**
62
+ * The **`margin-left`** CSS property sets the margin on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
63
+ *
64
+ * **Initial value**: `0`
65
+ *
66
+ * | Chrome | Firefox | Safari | Edge | IE |
67
+ * | :----: | :-----: | :----: | :----: | :---: |
68
+ * | **1** | **1** | **1** | **12** | **3** |
69
+ *
70
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
71
+ */
72
+ ml?: StandardCSSProperties['marginLeft'];
73
+ /**
74
+ * The **`mx`** property is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin on the left and right side of an element. A positive value places it
75
+ * farther from its neighbors, while a negative value places it closer.
76
+ *
77
+ * **Initial value**: `0`
78
+ *
79
+ * | Chrome | Firefox | Safari | Edge | IE |
80
+ * | :----: | :-----: | :----: | :----: | :---: |
81
+ * | **1** | **1** | **1** | **12** | **3** |
82
+ *
83
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
84
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
85
+ */
86
+ mx?: StandardCSSProperties['marginLeft'];
87
+ /**
88
+ * The **`marginX`** property is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin on the left and right side of an element. A positive value
89
+ * places it farther from its neighbors, while a negative value places it closer.
90
+ *
91
+ * **Initial value**: `0`
92
+ *
93
+ * | Chrome | Firefox | Safari | Edge | IE |
94
+ * | :----: | :-----: | :----: | :----: | :---: |
95
+ * | **1** | **1** | **1** | **12** | **3** |
96
+ *
97
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
98
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
99
+ */
100
+ marginX?: StandardCSSProperties['marginLeft'];
101
+ /**
102
+ * The **`my`** property is shorthand for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin on the top and bottom of an element. A positive value places it
103
+ * farther from its neighbors, while a negative value places it closer.
104
+ *
105
+ * **Initial value**: `0`
106
+ *
107
+ * | Chrome | Firefox | Safari | Edge | IE |
108
+ * | :----: | :-----: | :----: | :----: | :---: |
109
+ * | **1** | **1** | **1** | **12** | **3** |
110
+ *
111
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
112
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
113
+ */
114
+ my?: StandardCSSProperties['marginTop'];
115
+ /**
116
+ * The **`marginY`** property is shorthand for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin on the top and bottom of an element. A positive value places
117
+ * it farther from its neighbors, while a negative value places it closer.
118
+ *
119
+ * **Initial value**: `0`
120
+ *
121
+ * | Chrome | Firefox | Safari | Edge | IE |
122
+ * | :----: | :-----: | :----: | :----: | :---: |
123
+ * | **1** | **1** | **1** | **12** | **3** |
124
+ *
125
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
126
+ * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
127
+ */
128
+ marginY?: StandardCSSProperties['marginTop'];
129
+ /**
130
+ * The **`padding`** CSS property sets the padding on all four sides of an element. It is a shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
131
+ *
132
+ * | Chrome | Firefox | Safari | Edge | IE |
133
+ * | :----: | :-----: | :----: | :----: | :---: |
134
+ * | **1** | **1** | **1** | **12** | **4** |
135
+ *
136
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding
137
+ */
138
+ p?: StandardCSSProperties['padding'];
139
+ /**
140
+ * The **`padding-top`** CSS property sets the height of the padding at the top of an element.
141
+ *
142
+ * **Initial value**: `0`
143
+ *
144
+ * | Chrome | Firefox | Safari | Edge | IE |
145
+ * | :----: | :-----: | :----: | :----: | :---: |
146
+ * | **1** | **1** | **1** | **12** | **4** |
147
+ *
148
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
149
+ */
150
+ pt?: StandardCSSProperties['paddingTop'];
151
+ /**
152
+ * The **`padding-right`** CSS property sets the width of the padding at the right side of an element.
153
+ *
154
+ * **Initial value**: `0`
155
+ *
156
+ * | Chrome | Firefox | Safari | Edge | IE |
157
+ * | :----: | :-----: | :----: | :----: | :---: |
158
+ * | **1** | **1** | **1** | **12** | **4** |
159
+ *
160
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
161
+ */
162
+ pr?: StandardCSSProperties['paddingRight'];
163
+ /**
164
+ * The **`padding-bottom`** CSS property sets the height of the padding on the bottom of an element.
165
+ *
166
+ * **Initial value**: `0`
167
+ *
168
+ * | Chrome | Firefox | Safari | Edge | IE |
169
+ * | :----: | :-----: | :----: | :----: | :---: |
170
+ * | **1** | **1** | **1** | **12** | **4** |
171
+ *
172
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
173
+ */
174
+ pb?: StandardCSSProperties['paddingBottom'];
175
+ /**
176
+ * The **`padding-left`** CSS property sets the width of the padding at the left side of an element.
177
+ *
178
+ * **Initial value**: `0`
179
+ *
180
+ * | Chrome | Firefox | Safari | Edge | IE |
181
+ * | :----: | :-----: | :----: | :----: | :---: |
182
+ * | **1** | **1** | **1** | **12** | **4** |
183
+ *
184
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
185
+ */
186
+ pl?: StandardCSSProperties['paddingLeft'];
187
+ /**
188
+ * The **`px`** property is shorthand for the CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding at the left and right side of an element.
189
+ *
190
+ * **Initial value**: `0`
191
+ *
192
+ * | Chrome | Firefox | Safari | Edge | IE |
193
+ * | :----: | :-----: | :----: | :----: | :---: |
194
+ * | **1** | **1** | **1** | **12** | **4** |
195
+ *
196
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
197
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
198
+ */
199
+ px?: StandardCSSProperties['paddingLeft'];
200
+ /**
201
+ * The **`paddingX`** property is shorthand for the CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding at the left and right sides of an element.
202
+ *
203
+ * **Initial value**: `0`
204
+ *
205
+ * | Chrome | Firefox | Safari | Edge | IE |
206
+ * | :----: | :-----: | :----: | :----: | :---: |
207
+ * | **1** | **1** | **1** | **12** | **4** |
208
+ *
209
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
210
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
211
+ */
212
+ paddingX?: StandardCSSProperties['paddingLeft'];
213
+ /**
214
+ * The **`py`** property is shorthand for the CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding at the top and bottom of an element.
215
+ *
216
+ * **Initial value**: `0`
217
+ *
218
+ * | Chrome | Firefox | Safari | Edge | IE |
219
+ * | :----: | :-----: | :----: | :----: | :---: |
220
+ * | **1** | **1** | **1** | **12** | **4** |
221
+ *
222
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
223
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
224
+ */
225
+ py?: StandardCSSProperties['paddingTop'];
226
+ /**
227
+ * The **`paddingY`** property is shorthand for the CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding at the top and bottom of an element.
228
+ *
229
+ * **Initial value**: `0`
230
+ *
231
+ * | Chrome | Firefox | Safari | Edge | IE |
232
+ * | :----: | :-----: | :----: | :----: | :---: |
233
+ * | **1** | **1** | **1** | **12** | **4** |
234
+ *
235
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
236
+ * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
237
+ */
238
+ paddingY?: StandardCSSProperties['paddingTop'];
239
+ /**
240
+ * The **`typography`** property is shorthand for the CSS properties **`font-family`**, **`font-weight`**, **`font-size`**, **`line-height`**, **`letter-spacing`** and **`text-transform``**.
241
+ * It takes the values defined under `theme.typography` and spreads them on the element.
242
+ *
243
+ * **Initial value**: `0`
244
+ *
245
+ * | Chrome | Firefox | Safari | Edge | IE |
246
+ * | :----: | :-----: | :----: | :----: | :---: |
247
+ * | **2** | **1** | **1** | **12** | **5.5** |
248
+ *
249
+ * @see https://developer.mozilla.org/docs/Web/CSS/font-family
250
+ * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
251
+ * @see https://developer.mozilla.org/docs/Web/CSS/font-size
252
+ * @see https://developer.mozilla.org/docs/Web/CSS/line-height
253
+ * @see https://developer.mozilla.org/docs/Web/CSS/letter-spacing
254
+ * @see https://developer.mozilla.org/docs/Web/CSS/text-transform
255
+ */
256
+ typography?: string;
257
+ /**
258
+ * The **`displayPrint`** property sets the display value for the element when the page is printed.
259
+ *
260
+ * **Initial value**: `inline`
261
+ *
262
+ * | Chrome | Firefox | Safari | Edge | IE |
263
+ * | :----: | :-----: | :----: | :----: | :---: |
264
+ * | **1** | **1** | **1** | **12** | **4** |
265
+ *
266
+ * @see https://developer.mozilla.org/docs/Web/CSS/display
267
+ */
268
+ displayPrint?: StandardCSSProperties['display'];
270
269
  }
package/styleFunctionSx/AliasesCSSProperties.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/styleFunctionSx/OverwriteCSSProperties.d.ts CHANGED
@@ -1,55 +1,54 @@
1
1
  import * as CSS from 'csstype';
2
-
3
2
  export interface OverwriteCSSProperties {
4
- /**
5
- * The **`border`** CSS property is shorthand for the CSS properties **`border-width`**, **`border-style`**, and **`border-color`**. It sets an element's border.
6
- *
7
- * **Initial value**: `none`
8
- *
9
- * | Chrome | Firefox | Safari | Edge | IE |
10
- * | :----: | :-----: | :----: | :----: | :---: |
11
- * | **1** | **1** | **1** | **12** | **4** |
12
- *
13
- * @see https://developer.mozilla.org/docs/Web/CSS/border
14
- */
15
- border?: CSS.Property.Border | number;
16
- /**
17
- * The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the
18
- * element for blur and spread radii, and by its color.
19
- *
20
- * **Initial value**: `none`
21
- *
22
- * | Chrome | Firefox | Safari | Edge | IE |
23
- * | :-----: | :-----: | :-----: | :----: | :---: |
24
- * | **10** | **4** | **5.1** | **12** | **9** |
25
- * | 1 _-x-_ | | 3 _-x-_ | | |
26
- *
27
- * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
28
- */
29
- boxShadow?: CSS.Property.BoxShadow | number;
30
- /**
31
- * The **`font-weight`** CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the `font-family` you are using. Some fonts are only
32
- * available in `normal` and `bold`.
33
- *
34
- * **Initial value**: `normal`
35
- *
36
- * | Chrome | Firefox | Safari | Edge | IE |
37
- * | :----: | :-----: | :----: | :----: | :---: |
38
- * | **2** | **1** | **1** | **12** | **3** |
39
- *
40
- * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
41
- */
42
- fontWeight?: CSS.Property.FontWeight | string;
43
- /**
44
- * The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a higher z-index cover those with a lower one.
45
- *
46
- * **Initial value**: `auto`
47
- *
48
- * | Chrome | Firefox | Safari | Edge | IE |
49
- * | :----: | :-----: | :----: | :----: | :---: |
50
- * | **1** | **1** | **1** | **12** | **4** |
51
- *
52
- * @see https://developer.mozilla.org/docs/Web/CSS/z-index
53
- */
54
- zIndex?: CSS.Property.ZIndex | string;
3
+ /**
4
+ * The **`border`** CSS property is shorthand for the CSS properties **`border-width`**, **`border-style`**, and **`border-color`**. It sets an element's border.
5
+ *
6
+ * **Initial value**: `none`
7
+ *
8
+ * | Chrome | Firefox | Safari | Edge | IE |
9
+ * | :----: | :-----: | :----: | :----: | :---: |
10
+ * | **1** | **1** | **1** | **12** | **4** |
11
+ *
12
+ * @see https://developer.mozilla.org/docs/Web/CSS/border
13
+ */
14
+ border?: CSS.Property.Border | number;
15
+ /**
16
+ * The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the
17
+ * element for blur and spread radii, and by its color.
18
+ *
19
+ * **Initial value**: `none`
20
+ *
21
+ * | Chrome | Firefox | Safari | Edge | IE |
22
+ * | :-----: | :-----: | :-----: | :----: | :---: |
23
+ * | **10** | **4** | **5.1** | **12** | **9** |
24
+ * | 1 _-x-_ | | 3 _-x-_ | | |
25
+ *
26
+ * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
27
+ */
28
+ boxShadow?: CSS.Property.BoxShadow | number;
29
+ /**
30
+ * The **`font-weight`** CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the `font-family` you are using. Some fonts are only
31
+ * available in `normal` and `bold`.
32
+ *
33
+ * **Initial value**: `normal`
34
+ *
35
+ * | Chrome | Firefox | Safari | Edge | IE |
36
+ * | :----: | :-----: | :----: | :----: | :---: |
37
+ * | **2** | **1** | **1** | **12** | **3** |
38
+ *
39
+ * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
40
+ */
41
+ fontWeight?: CSS.Property.FontWeight | string;
42
+ /**
43
+ * The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a higher z-index cover those with a lower one.
44
+ *
45
+ * **Initial value**: `auto`
46
+ *
47
+ * | Chrome | Firefox | Safari | Edge | IE |
48
+ * | :----: | :-----: | :----: | :----: | :---: |
49
+ * | **1** | **1** | **1** | **12** | **4** |
50
+ *
51
+ * @see https://developer.mozilla.org/docs/Web/CSS/z-index
52
+ */
53
+ zIndex?: CSS.Property.ZIndex | string;
55
54
  }
package/styleFunctionSx/OverwriteCSSProperties.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/styleFunctionSx/StandardCssProperties.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  import * as CSS from 'csstype';
2
-
3
2
  export type StandardCSSProperties = CSS.PropertiesFallback<number | string>;
package/styleFunctionSx/StandardCssProperties.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/version/index.js CHANGED
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
7
- const version = exports.version = "6.4.0";
7
+ const version = exports.version = "6.4.2";
8
8
  const major = exports.major = Number("6");
9
9
  const minor = exports.minor = Number("4");
10
- const patch = exports.patch = Number("0");
10
+ const patch = exports.patch = Number("2");
11
11
  const prerelease = exports.prerelease = undefined;
12
12
  var _default = exports.default = version;