@stratakit/mui 0.2.0 → 0.3.0

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 (35) hide show
  1. package/CHANGELOG.md +106 -23
  2. package/README.md +8 -4
  3. package/dist/DEV/Root.internal.js +57 -0
  4. package/dist/DEV/Root.js +7 -9
  5. package/dist/DEV/createTheme.js +220 -16
  6. package/dist/DEV/styles.css.js +2 -2
  7. package/dist/DEV/~components/MuiBadge.js +20 -0
  8. package/dist/DEV/~components/MuiButtonBase.js +53 -0
  9. package/dist/DEV/~components/MuiCard.js +59 -0
  10. package/dist/DEV/~components/MuiChip.js +83 -0
  11. package/dist/DEV/~components/MuiIconButton.js +17 -0
  12. package/dist/DEV/~components/MuiSnackbar.js +12 -0
  13. package/dist/DEV/~components/MuiTable.js +23 -0
  14. package/dist/Root.d.ts +3 -1
  15. package/dist/Root.internal.d.ts +3 -0
  16. package/dist/Root.internal.js +77 -0
  17. package/dist/Root.js +6 -4
  18. package/dist/createTheme.js +470 -10
  19. package/dist/styles.css.js +2 -2
  20. package/dist/types.d.ts +158 -1
  21. package/dist/~components/MuiBadge.d.ts +7 -0
  22. package/dist/~components/MuiBadge.js +17 -0
  23. package/dist/~components/MuiButtonBase.d.ts +7 -0
  24. package/dist/~components/MuiButtonBase.js +80 -0
  25. package/dist/~components/MuiCard.d.ts +4 -0
  26. package/dist/~components/MuiCard.js +49 -0
  27. package/dist/~components/MuiChip.d.ts +9 -0
  28. package/dist/~components/MuiChip.js +82 -0
  29. package/dist/~components/MuiIconButton.d.ts +6 -0
  30. package/dist/~components/MuiIconButton.js +27 -0
  31. package/dist/~components/MuiSnackbar.d.ts +2 -0
  32. package/dist/~components/MuiSnackbar.js +12 -0
  33. package/dist/~components/MuiTable.d.ts +4 -0
  34. package/dist/~components/MuiTable.js +28 -0
  35. package/package.json +13 -9
package/CHANGELOG.md CHANGED
@@ -1,51 +1,134 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.3.0
4
+
5
+ ### API changes
6
+
7
+ The following API changes apply to components exported from `@stratakit/mui`:
8
+
9
+ - [#1268](https://github.com/iTwin/stratakit/pull/1268): Added `render` prop to the `Root` component.
10
+ - [#1335](https://github.com/iTwin/stratakit/pull/1335): Added `rootNode` prop to the `Root` component.
11
+
12
+ The following API changes apply to components exported from `@mui/material`. Make sure to include `@stratakit/mui/types.d.ts` in your project to get the correct types.
13
+
14
+ - [#1212](https://github.com/iTwin/stratakit/pull/1212): Introduced a new `render` prop for all overrideable MUI components, replacing the previous `component` prop. The `render` prop is more flexible and aligns better with modern React patterns, while also allowing the StrataKit MUI theme to apply more powerful customizations.
15
+
16
+ If you were previously using the `component` prop to override MUI components, you should now use the `render` prop instead. The `component` prop has been marked as deprecated.
17
+
18
+ ```diff
19
+ - <Typography component="h2">
20
+ + <Typography render={<h2 />} />
21
+ ```
22
+
23
+ Note: Components that did not have a `component` prop previously will not have a `render` prop now.
24
+
25
+ - [#1321](https://github.com/iTwin/stratakit/pull/1321): Added a new `label` prop to `IconButton` and `ToggleButton`. When specified, the value of this prop will be used as the button's accessible name _and_ will also be shown in a tooltip when the button is hovered or focused.
26
+ - [#1287](https://github.com/iTwin/stratakit/pull/1287): Added a new `inline` prop to the `Badge` component to display the badge in normal document flow instead of positioned relative to its child.
27
+ - [#1252](https://github.com/iTwin/stratakit/pull/1252): Added a new `deleteLabel` prop to the `Chip` component for better localization.
28
+ - [#1259](https://github.com/iTwin/stratakit/pull/1259): ⚠️ Removed all values for the `size` prop from `Checkbox` and `Radio`.
29
+ - [#1288](https://github.com/iTwin/stratakit/pull/1288): ⚠️ Removed all values for the `color` prop from `Chip`.
30
+ - [#1294](https://github.com/iTwin/stratakit/pull/1294): ⚠️ Removed `"default"` value from `color` prop of `IconButton` component. The default color is now `"secondary"`.
31
+ - [#1332](https://github.com/iTwin/stratakit/pull/1332): ⚠️ Removed `LinkComponent` prop from `ButtonBase` (and therefore from all MUI components that extend it). Use the `render` prop instead.
32
+ - [#1287](https://github.com/iTwin/stratakit/pull/1287): ⚠️ Removed `"default"` value from `color` prop of `Badge` component. The default color is now `"secondary"`.
33
+
34
+ ## Implementation changes
35
+
36
+ - [#1312](https://github.com/iTwin/stratakit/pull/1312): MUI styling engine changes:
37
+ - Unnecessary vendor prefixes have been removed from the generated CSS using a custom Stylis plugin.
38
+ - Emotion's `speedy` mode is enabled in both development and production. As a result, MUI styles are now injected directly into the CSSOM using `insertRule`.
39
+ - Order of styles has been changed so that MUI styles are injected at the end of the `<head>` element, preventing issues where `@layer mui` would be added before other low-priority layers.
40
+ - [#1305](https://github.com/iTwin/stratakit/pull/1305): Removed [`role="region"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role) semantics from `Accordion` component.
41
+ - [#1269](https://github.com/iTwin/stratakit/pull/1269): `Card` will now be rendered as an `<article>` element by default. This should be used in combination with a heading inside the card. In cases where `CardHeader` is used, its `title` will be rendered as `<h2>` by default. In other cases, you can use the `Typography` component with `render` prop to specify the heading level.
42
+ - [#1274](https://github.com/iTwin/stratakit/pull/1274): `CardActionArea` has been redesigned to not wrap the entire card content. Instead, it should be used in the card's heading or title area. This improves the card's accessibility structure, while still allowing the entire card to be clickable.
43
+ - [#1252](https://github.com/iTwin/stratakit/pull/1252): Updated `Chip` component so the `root` element is no longer interactive. Deletable `Chip` now renders an interactive delete button, and clickable `Chip` renders its label as an interactive button.
44
+ - [#1298](https://github.com/iTwin/stratakit/pull/1298): Updated the default `variant` of `Typography` to `"body2"`.
45
+ - [#1296](https://github.com/iTwin/stratakit/pull/1296): Updated `Snackbar` to be rendered using a [portal](https://react.dev/reference/react-dom/createPortal).
46
+ - [#1213](https://github.com/iTwin/stratakit/pull/1213): Changed `Autocomplete` to make the clear indicator focusable.
47
+ - [#1214](https://github.com/iTwin/stratakit/pull/1214): Updated `Autocomplete` to make the clear indicator visible without requiring user interaction.
48
+
49
+ ### Styling changes
50
+
51
+ - [#1258](https://github.com/iTwin/stratakit/pull/1258): Styled `IconButton` to match the Strata visual design language.
52
+ - [#1281](https://github.com/iTwin/stratakit/pull/1281): Styled `Button` icons to match the Strata visual design language.
53
+ - [#1244](https://github.com/iTwin/stratakit/pull/1244): Styled `Switch` to match the Strata visual design language.
54
+ - [#1254](https://github.com/iTwin/stratakit/pull/1254): Styled `Slider` to match the Strata visual design language.
55
+ - [#1186](https://github.com/iTwin/stratakit/pull/1186): Styled `Checkbox` & `Radio` to match the Strata visual design language.
56
+ - [#1218](https://github.com/iTwin/stratakit/pull/1218): `Checkbox` & `Radio` touch target area no longer consume space.
57
+ - [#1276](https://github.com/iTwin/stratakit/pull/1276): Fixed the colors of various permutations of `Alert`.
58
+ - [#1315](https://github.com/iTwin/stratakit/pull/1315): Decreased spacing/sizing of `List` components.
59
+ - [#1316](https://github.com/iTwin/stratakit/pull/1316): Adjusted styling for `DialogActions`.
60
+ - [#1316](https://github.com/iTwin/stratakit/pull/1316): Adjusted styling for `Backdrop`.
61
+ - [#1306](https://github.com/iTwin/stratakit/pull/1306): Fixed color contrast for a few `Button` permutations.
62
+ - [#1307](https://github.com/iTwin/stratakit/pull/1307): Fixed color contrast of `BottomNavigation` selected item.
63
+ - [#1309](https://github.com/iTwin/stratakit/pull/1309): Use global component size variables in `Button`, `IconButton`, and `ToggleButton`.
64
+ - [#1310](https://github.com/iTwin/stratakit/pull/1310): Use global component size variables in inputs.
65
+ - [#1208](https://github.com/iTwin/stratakit/pull/1208): `InputLabel` and `FormHelperText` styling improvements.
66
+ - [#1273](https://github.com/iTwin/stratakit/pull/1273): Improved input styling with hover states, placeholders, and disabled cursor.
67
+ - [#1181](https://github.com/iTwin/stratakit/pull/1181): Added disabled and error styling to `TextField`, `InputLabel`, & `FormHelperText`.
68
+ - [#1298](https://github.com/iTwin/stratakit/pull/1298): Adjusted the `Typography` scale to better align with StrataKit's visual language.
69
+ - [#1313](https://github.com/iTwin/stratakit/pull/1313): Added border to `Badge`.
70
+ - [#1291](https://github.com/iTwin/stratakit/pull/1291): Updated the text selection color of `Badge`.
71
+ - [#1239](https://github.com/iTwin/stratakit/pull/1239): `NativeSelect` visually styled to match `Select`.
72
+
73
+ ### Misc
74
+
75
+ - [#1312](https://github.com/iTwin/stratakit/pull/1312): Added direct dependencies on `@emotion/react`, `@emotion/cache` & `@emotion/styled`.
76
+ - Updated dependencies:
77
+ - @stratakit/icons@0.3.1
78
+ - @stratakit/foundations@0.4.7
79
+
80
+ ## 0.2.1
81
+
82
+ - [#1188](https://github.com/iTwin/stratakit/pull/1188): Fixed a race condition where stylesheets could be prematurely removed in cases where multiple components that use the same styles were conditionally rendered.
83
+ - Updated dependencies:
84
+ - @stratakit/foundations@0.4.6
85
+
3
86
  ## 0.2.0
4
87
 
5
88
  ### Potentially breaking changes
6
89
 
7
90
  This release includes a few API changes in MUI components. Make sure to include `@stratakit/mui/types.d.ts` in your project to get the correct types.
8
91
 
9
- - [#1157](https://github.com/iTwin/design-system/pull/1157): Updated the default value of `Tooltip`'s `describeChild` prop to `true`.
92
+ - [#1157](https://github.com/iTwin/stratakit/pull/1157): Updated the default value of `Tooltip`'s `describeChild` prop to `true`.
10
93
  - `color` prop:
11
- - [#1152](https://github.com/iTwin/design-system/pull/1152), [#1158](https://github.com/iTwin/design-system/pull/1158): Removed the following values from the `color` prop of `Button` and `IconButton` components: `"info"`, `"success"`, `"warning"`, and `"inherit"`.
12
- - [#1183](https://github.com/iTwin/design-system/pull/1183): Removed all values for the `color` prop from form controls (i.e. `Checkbox`, `FormLabel`, `Radio`, `Select`, `Switch` and `TextField` components).
13
- - [#1161](https://github.com/iTwin/design-system/pull/1161): Removed the following values from `Fab`'s `color` prop: `"info"`, `"success"`, `"warning"`, `"error"`, `"default"`, and `"inherit"`. The default value is now `"primary"`.
14
- - [#1176](https://github.com/iTwin/design-system/pull/1176): Removed all values from `Slider`'s `color` prop (except the default `"primary"`).
94
+ - [#1152](https://github.com/iTwin/stratakit/pull/1152), [#1158](https://github.com/iTwin/stratakit/pull/1158): Removed the following values from the `color` prop of `Button` and `IconButton` components: `"info"`, `"success"`, `"warning"`, and `"inherit"`.
95
+ - [#1183](https://github.com/iTwin/stratakit/pull/1183): Removed all values for the `color` prop from form controls (i.e. `Checkbox`, `FormLabel`, `Radio`, `Select`, `Switch` and `TextField` components).
96
+ - [#1161](https://github.com/iTwin/stratakit/pull/1161): Removed the following values from `Fab`'s `color` prop: `"info"`, `"success"`, `"warning"`, `"error"`, `"default"`, and `"inherit"`. The default value is now `"primary"`.
97
+ - [#1176](https://github.com/iTwin/stratakit/pull/1176): Removed all values from `Slider`'s `color` prop (except the default `"primary"`).
15
98
 
16
99
  - `variant` prop:
17
- - [#1179](https://github.com/iTwin/design-system/pull/1179): Removed `variant="standard"` from `Alert` and changed the default to `variant="outlined"`.
18
- - [#1153](https://github.com/iTwin/design-system/pull/1153): Deprecated the `variant` prop in `TextField`.
100
+ - [#1179](https://github.com/iTwin/stratakit/pull/1179): Removed `variant="standard"` from `Alert` and changed the default to `variant="outlined"`.
101
+ - [#1153](https://github.com/iTwin/stratakit/pull/1153): Deprecated the `variant` prop in `TextField`.
19
102
 
20
103
  ### Non-breaking changes
21
104
 
22
- - [#1139](https://github.com/iTwin/design-system/pull/1139): Removed floating label and re-styled inputs to match the height of buttons.
23
- - [#1162](https://github.com/iTwin/design-system/pull/1162): Fixed input `outline` and label `color` on focus.
24
- - [#1170](https://github.com/iTwin/design-system/pull/1170): Updated global color mappings for various components, e.g. `Alert`, `Avatar`, `LinearProgress`, `Skeleton`, `Snackbar`, `TableCell`.
25
- - [#1171](https://github.com/iTwin/design-system/pull/1171): Fixed `ButtonGroup` default props to use `color="secondary"` and `disableRipple`.
26
- - [#1180](https://github.com/iTwin/design-system/pull/1180): Fixed `Link` color contrast.
27
- - [#1178](https://github.com/iTwin/design-system/pull/1178): Fixed `IconButton` color contrast.
28
- - [#1160](https://github.com/iTwin/design-system/pull/1160): Updated padding for `Dialog` actions.
29
- - [#1175](https://github.com/iTwin/design-system/pull/1175): Updated padding for `Card` actions.
30
- - [#1159](https://github.com/iTwin/design-system/pull/1159): Updated colors in `Accordion`, `Card` and `Chip` components.
31
- - [#1159](https://github.com/iTwin/design-system/pull/1159): Updated `AppBar` component to use neutral colors and no box-shadow.
32
- - [#1156](https://github.com/iTwin/design-system/pull/1156): Updated `ButtonBase` disabled styles to use `cursor: not-allowed` and not prevent `pointer-events`.
105
+ - [#1139](https://github.com/iTwin/stratakit/pull/1139): Removed floating label and re-styled inputs to match the height of buttons.
106
+ - [#1162](https://github.com/iTwin/stratakit/pull/1162): Fixed input `outline` and label `color` on focus.
107
+ - [#1170](https://github.com/iTwin/stratakit/pull/1170): Updated global color mappings for various components, e.g. `Alert`, `Avatar`, `LinearProgress`, `Skeleton`, `Snackbar`, `TableCell`.
108
+ - [#1171](https://github.com/iTwin/stratakit/pull/1171): Fixed `ButtonGroup` default props to use `color="secondary"` and `disableRipple`.
109
+ - [#1180](https://github.com/iTwin/stratakit/pull/1180): Fixed `Link` color contrast.
110
+ - [#1178](https://github.com/iTwin/stratakit/pull/1178): Fixed `IconButton` color contrast.
111
+ - [#1160](https://github.com/iTwin/stratakit/pull/1160): Updated padding for `Dialog` actions.
112
+ - [#1175](https://github.com/iTwin/stratakit/pull/1175): Updated padding for `Card` actions.
113
+ - [#1159](https://github.com/iTwin/stratakit/pull/1159): Updated colors in `Accordion`, `Card` and `Chip` components.
114
+ - [#1159](https://github.com/iTwin/stratakit/pull/1159): Updated `AppBar` component to use neutral colors and no box-shadow.
115
+ - [#1156](https://github.com/iTwin/stratakit/pull/1156): Updated `ButtonBase` disabled styles to use `cursor: not-allowed` and not prevent `pointer-events`.
33
116
  - Updated dependencies:
34
117
  - @stratakit/icons@0.3.0
35
118
 
36
119
  ## 0.1.3
37
120
 
38
- - [#1150](https://github.com/iTwin/design-system/pull/1150): Added a new `/types.d.ts` file for augmenting the types from MUI. This file should be included in all projects that rely on `@stratakit/mui`.
39
- - [#1146](https://github.com/iTwin/design-system/pull/1146): Updated `Button` to use `variant="contained"` by default.
121
+ - [#1150](https://github.com/iTwin/stratakit/pull/1150): Added a new `/types.d.ts` file for augmenting the types from MUI. This file should be included in all projects that rely on `@stratakit/mui`.
122
+ - [#1146](https://github.com/iTwin/stratakit/pull/1146): Updated `Button` to use `variant="contained"` by default.
40
123
 
41
124
  ## 0.1.2
42
125
 
43
- - [#1137](https://github.com/iTwin/design-system/pull/1137): Updated `border-radius` of `IconButton` component.
126
+ - [#1137](https://github.com/iTwin/stratakit/pull/1137): Updated `border-radius` of `IconButton` component.
44
127
 
45
128
  ## 0.1.1
46
129
 
47
- - [#1131](https://github.com/iTwin/design-system/pull/1131): Fixed the values for **warning** palette.
48
- - [#1135](https://github.com/iTwin/design-system/pull/1135): Global focus styles have been moved from `@layer stratakit` to `@layer reset`.
130
+ - [#1131](https://github.com/iTwin/stratakit/pull/1131): Fixed the values for **warning** palette.
131
+ - [#1135](https://github.com/iTwin/stratakit/pull/1135): Global focus styles have been moved from `@layer stratakit` to `@layer reset`.
49
132
  - Updated dependencies:
50
133
  - @stratakit/foundations@0.4.5
51
134
 
package/README.md CHANGED
@@ -12,11 +12,15 @@ npm add @stratakit/mui
12
12
 
13
13
  Additional setup/considerations:
14
14
 
15
- - `@stratakit/mui` has a direct dependency on [`@stratakit/foundations`](https://www.npmjs.com/package/@stratakit/foundations) and [`@stratakit/icons`](https://www.npmjs.com/package/@stratakit/icons), the latter of which requires [bundler configuration](https://github.com/iTwin/design-system/tree/main/packages/icons#bundler-configuration) to ensure that `.svg` files are not inlined.
15
+ - `@stratakit/mui` has a direct dependency on [`@stratakit/foundations`](https://www.npmjs.com/package/@stratakit/foundations) and [`@stratakit/icons`](https://www.npmjs.com/package/@stratakit/icons), the latter of which requires [bundler configuration](https://github.com/iTwin/stratakit/tree/main/packages/icons#bundler-configuration) to ensure that `.svg` files are not inlined.
16
16
  - You should ensure that [StrataKit fonts](#fonts) are loaded in your application.
17
17
  - [`/types.d.ts`](#typescript) must be included in your project to ensure that the module augmentation for MUI components is picked up by TypeScript.
18
18
  - If you are trying to use this package alongside iTwinUI, you will also need to set up the [theme bridge](https://github.com/iTwin/iTwinUI/wiki/StrataKit-theme-bridge).
19
19
 
20
+ Check out the minimal starter template on StackBlitz for a quick working example:
21
+
22
+ [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/iTwin/stratakit/tree/main/internal/minimal-template?file=src%2FApp.tsx)
23
+
20
24
  ## Usage
21
25
 
22
26
  To use the StrataKit MUI theme, you’ll need to wrap your application's entrypoint with the `<Root>` component and set its `colorScheme` (to `"light"` or `"dark"`). This component will automatically configure MUI's `ThemeProvider` with the StrataKit theme.
@@ -46,7 +50,7 @@ import svgPlaceholder from "@stratakit/icons/placeholder.svg";
46
50
  ```
47
51
 
48
52
  > [!NOTE]
49
- > `@stratakit/icons` requires [bundler configuration](https://github.com/iTwin/design-system/tree/main/packages/icons#bundler-configuration) to ensure that `.svg` files are not inlined.
53
+ > `@stratakit/icons` requires [bundler configuration](https://github.com/iTwin/stratakit/tree/main/packages/icons#bundler-configuration) to ensure that `.svg` files are not inlined.
50
54
 
51
55
  ## Fonts
52
56
 
@@ -101,6 +105,6 @@ Alternatively, if your project relies on the implicit inclusion of visible `@typ
101
105
 
102
106
  ## Contributing
103
107
 
104
- Are you interested in helping StrataKit grow? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/design-system/issues).
108
+ Are you interested in helping StrataKit grow? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/stratakit/issues).
105
109
 
106
- If you're interested in contributing code, please read [`CONTRIBUTING.md`](https://github.com/iTwin/design-system/blob/main/CONTRIBUTING.md) for more information.
110
+ If you're interested in contributing code, please read [`CONTRIBUTING.md`](https://github.com/iTwin/stratakit/blob/main/CONTRIBUTING.md) for more information.
package/dist/DEV/Root.internal.js ADDED
@@ -0,0 +1,57 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import createCache from "@emotion/cache";
4
+ import { CacheProvider } from "@emotion/react";
5
+ function StyledEngineProvider({ children }) {
6
+ const [cache] = React.useState(() => createEmotionCache());
7
+ return /* @__PURE__ */ jsx(CacheProvider, { value: cache, children });
8
+ }
9
+ function createEmotionCache() {
10
+ const cache = createCache({
11
+ key: "css",
12
+ speedy: true,
13
+ // This injects styles using the `insertRule` API.
14
+ stylisPlugins: [prefixer]
15
+ });
16
+ const prevInsert = cache.insert;
17
+ cache.insert = (...args) => {
18
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
19
+ args[1].styles = `@layer mui {${args[1].styles}}`;
20
+ }
21
+ return prevInsert(...args);
22
+ };
23
+ return cache;
24
+ }
25
+ function prefixer(element) {
26
+ if (element.length > -1 && !element.return && element.type === "decl") {
27
+ element.return = prefix(element.value, element.length);
28
+ }
29
+ }
30
+ function prefix(value, length) {
31
+ switch (hash(value, length)) {
32
+ // color-adjust
33
+ case 5103:
34
+ return `-webkit-print-${value}${value}`;
35
+ // box-decoration-break
36
+ case 3005:
37
+ // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
38
+ case 6391:
39
+ case 5879:
40
+ case 5623:
41
+ case 6135:
42
+ case 4599:
43
+ case 4855:
44
+ // user-select, hyphens, text-size-adjust
45
+ case 4246:
46
+ case 6968:
47
+ case 2756:
48
+ return `-webkit-${value}${value}`;
49
+ }
50
+ return value;
51
+ }
52
+ function hash(value, length) {
53
+ return (value.charCodeAt(0) | 0) ^ 45 ? (((length << 2 ^ (value.charCodeAt(0) | 0)) << 2 ^ (value.charCodeAt(1) | 0)) << 2 ^ (value.charCodeAt(2) | 0)) << 2 ^ (value.charCodeAt(3) | 0) : 0;
54
+ }
55
+ export {
56
+ StyledEngineProvider
57
+ };
package/dist/DEV/Root.js CHANGED
@@ -1,10 +1,6 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
- import {
4
- StyledEngineProvider,
5
- ThemeProvider,
6
- useColorScheme
7
- } from "@mui/material/styles";
3
+ import { ThemeProvider, useColorScheme } from "@mui/material/styles";
8
4
  import { Root as StrataKitRoot } from "@stratakit/foundations";
9
5
  import {
10
6
  RootContext,
@@ -12,14 +8,15 @@ import {
12
8
  } from "@stratakit/foundations/secret-internals";
13
9
  import cx from "classnames";
14
10
  import { createTheme } from "./createTheme.js";
11
+ import { StyledEngineProvider } from "./Root.internal.js";
15
12
  import css from "./styles.css.js";
16
13
  const theme = createTheme();
17
14
  const packageName = "@stratakit/mui";
18
- const key = `${packageName}@${"0.2.0"}`;
15
+ const key = `${packageName}@${"0.3.0"}`;
19
16
  const Root = React.forwardRef(
20
17
  (props, forwardedRef) => {
21
18
  const { children, colorScheme, ...rest } = props;
22
- return /* @__PURE__ */ jsx(StyledEngineProvider, { enableCssLayer: true, children: /* @__PURE__ */ jsxs(ThemeProvider, { theme, defaultMode: colorScheme, children: [
19
+ return /* @__PURE__ */ jsx(StyledEngineProvider, { children: /* @__PURE__ */ jsxs(ThemeProvider, { theme, defaultMode: colorScheme, children: [
23
20
  /* @__PURE__ */ jsx(ColorScheme, { colorScheme }),
24
21
  /* @__PURE__ */ jsxs(RootInner, { ...rest, colorScheme, ref: forwardedRef, children: [
25
22
  /* @__PURE__ */ jsx(Styles, {}),
@@ -31,13 +28,14 @@ const Root = React.forwardRef(
31
28
  DEV: Root.displayName = "Root";
32
29
  const RootInner = React.forwardRef(
33
30
  (props, forwardedRef) => {
34
- const { children, colorScheme, ...rest } = props;
31
+ const { children, colorScheme, rootNode, ...rest } = props;
35
32
  return /* @__PURE__ */ jsx(
36
33
  StrataKitRoot,
37
34
  {
38
35
  ...rest,
39
36
  className: cx("\u{1F95D}MuiRoot", props.className),
40
37
  colorScheme,
38
+ rootNode,
41
39
  synchronizeColorScheme: true,
42
40
  ref: forwardedRef,
43
41
  children
@@ -57,7 +55,7 @@ DEV: ColorScheme.displayName = "ColorScheme";
57
55
  function Styles() {
58
56
  const rootContext = useSafeContext(RootContext);
59
57
  if (!rootContext.versions?.has(packageName))
60
- rootContext.versions?.set(packageName, "0.2.0");
58
+ rootContext.versions?.set(packageName, "0.3.0");
61
59
  const { rootNode, loadStyles } = rootContext;
62
60
  React.useInsertionEffect(() => {
63
61
  if (!rootNode || !loadStyles) return;