@mui/material 6.0.0-alpha.10 → 6.0.0-alpha.11

package/modern/styles/index.js

@@ -14,7 +14,7 @@ export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictM
 export { default as createStyles } from './createStyles';
 export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
 export { default as responsiveFontSizes } from './responsiveFontSizes';
-export { duration, easing } from './createTransitions';
+export { default as createTransitions, duration, easing } from './createTransitions';
 export { default as useTheme } from './useTheme';
 export { default as useThemeProps } from './useThemeProps';
 export { default as styled } from './styled';
@@ -31,6 +31,7 @@ export { default as extendTheme } from './extendTheme';
 export { default as experimental_extendTheme } from './experimental_extendTheme'; // TODO: Remove in v7
 export { default as getOverlayAlpha } from './getOverlayAlpha';
 export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';
+export * from './stringifyTheme';
 
 // Private methods for creating parts of the theme
 export { default as private_createTypography } from './createTypography';

package/modern/styles/stringifyTheme.js

@@ -0,0 +1,55 @@
+/* eslint-disable import/prefer-default-export */
+import { isPlainObject } from '@mui/utils/deepmerge';
+function isSerializable(val) {
+  return isPlainObject(val) || typeof val === 'undefined' || typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number' || Array.isArray(val);
+}
+
+/**
+ * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+export function stringifyTheme(baseTheme = {}) {
+  const serializableTheme = {
+    ...baseTheme
+  };
+  function serializeTheme(object) {
+    const array = Object.entries(object);
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < array.length; index++) {
+      const [key, value] = array[index];
+      if (!isSerializable(value) || key.startsWith('unstable_')) {
+        delete object[key];
+      } else if (isPlainObject(value)) {
+        object[key] = {
+          ...value
+        };
+        serializeTheme(object[key]);
+      }
+    }
+  }
+  serializeTheme(serializableTheme);
+  return `import { createBreakpoints } from '@mui/system';
+import { createTransitions } from '@mui/material/styles';
+
+const theme = ${JSON.stringify(serializableTheme, null, 2)};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`;
+}

package/modern/zero-styled/index.js

@@ -1,8 +1,27 @@
+import * as React from 'react';
+import { extendSxProp } from '@mui/system/styleFunctionSx';
 import useThemeProps from '../styles/useThemeProps';
+import useTheme from '../styles/useTheme';
+import GlobalStyles from '../GlobalStyles';
+import { jsx as _jsx } from "react/jsx-runtime";
 export { css, keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
+export function globalCss(styles) {
+  var _GlobalStyles;
+  return function GlobalStylesWrapper() {
+    return _GlobalStyles || (_GlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
+      styles: styles
+    }));
+  };
+}
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function createUseThemeProps(name) {
   return useThemeProps;
-}
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_createExtendSxProp() {
+  return extendSxProp;
+}
+export { useTheme };

package/node/Autocomplete/Autocomplete.js

@@ -99,6 +99,15 @@ const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })({
+  [`&.${_autocompleteClasses.default.focused} .${_autocompleteClasses.default.clearIndicator}`]: {
+    visibility: 'visible'
+  },
+  /* Avoid double tap issue on iOS */
+  '@media (pointer: fine)': {
+    [`&:hover .${_autocompleteClasses.default.clearIndicator}`]: {
+      visibility: 'visible'
+    }
+  },
   [`& .${_autocompleteClasses.default.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
@@ -115,23 +124,6 @@ const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
       minWidth: 30
     }
   },
-  [`&.${_autocompleteClasses.default.focused}`]: {
-    [`& .${_autocompleteClasses.default.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`& .${_autocompleteClasses.default.input}`]: {
-      minWidth: 0
-    }
-  },
-  /* Avoid double tap issue on iOS */
-  '@media (pointer: fine)': {
-    [`&:hover .${_autocompleteClasses.default.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`&:hover .${_autocompleteClasses.default.input}`]: {
-      minWidth: 0
-    }
-  },
   [`& .${_inputClasses.default.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {

package/node/Chip/Chip.js

@@ -404,8 +404,6 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     if (event.currentTarget === event.target) {
       if (onDelete && isDeleteKeyboardEvent(event)) {
         onDelete(event);
-      } else if (event.key === 'Escape' && chipRef.current) {
-        chipRef.current.blur();
       }
     }
     if (onKeyUp) {

package/node/Collapse/Collapse.js

@@ -16,7 +16,6 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _zeroStyled = require("../zero-styled");
 var _createTransitions = require("../styles/createTransitions");
 var _utils = require("../transitions/utils");
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _utils2 = require("../utils");
 var _collapseClasses = require("./collapseClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -158,7 +157,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     collapsedSize: collapsedSizeProp
   };
   const classes = useUtilityClasses(ownerState);
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const timer = (0, _useTimeout.default)();
   const wrapperRef = React.useRef(null);
   const autoTransitionDuration = React.useRef();

package/node/Dialog/Dialog.js

@@ -18,7 +18,6 @@ var _Paper = _interopRequireDefault(require("../Paper"));
 var _dialogClasses = _interopRequireWildcard(require("./dialogClasses"));
 var _DialogContext = _interopRequireDefault(require("./DialogContext"));
 var _Backdrop = _interopRequireDefault(require("../Backdrop"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -200,7 +199,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     props: inProps,
     name: 'MuiDialog'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen

package/node/Drawer/Drawer.js

@@ -18,7 +18,6 @@ var _Modal = _interopRequireDefault(require("../Modal"));
 var _Slide = _interopRequireDefault(require("../Slide"));
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _drawerClasses = require("./drawerClasses");
@@ -182,7 +181,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     props: inProps,
     name: 'MuiDrawer'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,

package/node/Fade/Fade.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -30,7 +30,7 @@ const styles = {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const defaultTimeout = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen

package/node/Grid/Grid.js

@@ -37,13 +37,6 @@ var _gridClasses = _interopRequireWildcard(require("./gridClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function getOffset(val) {
-  const parse = parseFloat(val);
-  if (Number.isNaN(parse)) {
-    return val;
-  }
-  return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
-}
 function generateGrid({
   theme,
   ownerState
@@ -88,7 +81,7 @@ function generateGrid({
       if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
         const themeSpacing = theme.spacing(ownerState.columnSpacing);
         if (themeSpacing !== '0px') {
-          const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
+          const fullWidth = `calc(${width} + ${themeSpacing})`;
           more = {
             flexBasis: fullWidth,
             maxWidth: fullWidth
@@ -189,9 +182,9 @@ function generateRowGap({
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
-          marginTop: `-${getOffset(themeSpacing)}`,
+          marginTop: theme.spacing(-propValue),
           [`& > .${_gridClasses.default.item}`]: {
-            paddingTop: getOffset(themeSpacing)
+            paddingTop: themeSpacing
           }
         };
       }
@@ -235,11 +228,12 @@ function generateColumnGap({
       var _zeroValueBreakpointK2;
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
+        const negativeValue = theme.spacing(-propValue);
         return {
-          width: `calc(100% + ${getOffset(themeSpacing)})`,
-          marginLeft: `-${getOffset(themeSpacing)}`,
+          width: `calc(100% + ${themeSpacing})`,
+          marginLeft: negativeValue,
           [`& > .${_gridClasses.default.item}`]: {
-            paddingLeft: getOffset(themeSpacing)
+            paddingLeft: themeSpacing
           }
         };
       }

package/node/Grow/Grow.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
 var _reactTransitionGroup = require("react-transition-group");
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -63,7 +63,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   } = props;
   const timer = (0, _useTimeout.default)();
   const autoTimeout = React.useRef();
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const nodeRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {

package/node/InputBase/InputBase.js

@@ -22,10 +22,10 @@ var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
-var _GlobalStyles = _interopRequireDefault(require("../GlobalStyles"));
 var _utils2 = require("./utils");
 var _inputBaseClasses = _interopRequireWildcard(require("./inputBaseClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _InputGlobalStyles;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiInputBase');
@@ -155,8 +155,6 @@ const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input',
     // Make the flex item shrink with Firefox
     minWidth: 0,
     flexGrow: 1,
-    animationName: 'mui-auto-fill-cancel',
-    animationDuration: '10ms',
     '&::-webkit-input-placeholder': placeholder,
     '&::-moz-placeholder': placeholder,
     // Firefox 19+
@@ -190,11 +188,19 @@ const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input',
       // Reset iOS opacity
       WebkitTextFillColor: (theme.vars || theme).palette.text.disabled // Fix opacity Safari bug
     },
-    '&:-webkit-autofill': {
-      animationDuration: '5000s',
-      animationName: 'mui-auto-fill'
-    },
     variants: [{
+      props: ({
+        ownerState
+      }) => !ownerState.disableInjectingGlobalStyles,
+      style: {
+        animationName: 'mui-auto-fill-cancel',
+        animationDuration: '10ms',
+        '&:-webkit-autofill': {
+          animationDuration: '5000s',
+          animationName: 'mui-auto-fill'
+        }
+      }
+    }, {
       props: {
         size: 'small'
       },
@@ -221,17 +227,15 @@ const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input',
     }]
   };
 });
-const inputGlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, {
-  styles: {
-    '@keyframes mui-auto-fill': {
-      from: {
-        display: 'block'
-      }
-    },
-    '@keyframes mui-auto-fill-cancel': {
-      from: {
-        display: 'block'
-      }
+const InputGlobalStyles = (0, _zeroStyled.globalCss)({
+  '@keyframes mui-auto-fill': {
+    from: {
+      display: 'block'
+    }
+  },
+  '@keyframes mui-auto-fill-cancel': {
+    from: {
+      display: 'block'
     }
   }
 });
@@ -467,7 +471,9 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     ...((_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+    children: [!disableInjectingGlobalStyles && typeof InputGlobalStyles === 'function' && ( // For Emotion/Styled-components, InputGlobalStyles will be a function
+    // For Pigment CSS, this has no effect because the InputGlobalStyles will be null.
+    _InputGlobalStyles || (_InputGlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputGlobalStyles, {}))), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
       ...rootProps,
       ref: ref,
       onClick: handleClick,

package/node/Link/Link.js

@@ -19,7 +19,6 @@ var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _linkClasses = _interopRequireWildcard(require("./linkClasses"));
 var _getTextDecoration = _interopRequireWildcard(require("./getTextDecoration"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -131,7 +130,7 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     props: inProps,
     name: 'MuiLink'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const {
     className,
     color = 'primary',

package/node/Paper/Paper.js

@@ -15,7 +15,6 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
 var _getOverlayAlpha = _interopRequireDefault(require("../styles/getOverlayAlpha"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _paperClasses = require("./paperClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -78,7 +77,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
     props: inProps,
     name: 'MuiPaper'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const {
     className,
     component = 'div',

package/node/Popper/Popper.js

@@ -26,13 +26,13 @@ const PopperRoot = (0, _styles.styled)(_Popper.Popper, {
  *
  * Demos:
  *
- * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
- * - [Menu](https://mui.com/material-ui/react-menu/)
- * - [Popper](https://mui.com/material-ui/react-popper/)
+ * - [Autocomplete](https://next.mui.com/material-ui/react-autocomplete/)
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
+ * - [Popper](https://next.mui.com/material-ui/react-popper/)
  *
  * API:
  *
- * - [Popper API](https://mui.com/material-ui/api/popper/)
+ * - [Popper API](https://next.mui.com/material-ui/api/popper/)
  */
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   var _slots$root;

package/node/Slide/Slide.js

@@ -15,7 +15,7 @@ var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementTyp
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -83,7 +83,7 @@ function setTranslateValue(direction, node, containerProp) {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const defaultEasing = {
     enter: theme.transitions.easing.easeOut,
     exit: theme.transitions.easing.sharp

package/node/Snackbar/Snackbar.js

@@ -13,7 +13,6 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _ClickAwayListener = require("@mui/base/ClickAwayListener");
 var _useSnackbar = require("@mui/base/useSnackbar");
 var _zeroStyled = require("../zero-styled");
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Grow = _interopRequireDefault(require("../Grow"));
 var _SnackbarContent = _interopRequireDefault(require("../SnackbarContent"));
@@ -111,7 +110,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     props: inProps,
     name: 'MuiSnackbar'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen

package/node/SpeedDial/SpeedDial.js

@@ -14,7 +14,6 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
 var _zeroStyled = require("../zero-styled");
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _Zoom = _interopRequireDefault(require("../Zoom"));
 var _Fab = _interopRequireDefault(require("../Fab"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -151,7 +150,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     props: inProps,
     name: 'MuiSpeedDial'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen

package/node/SwipeableDrawer/SwipeableDrawer.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
-var _useThemeProps = _interopRequireDefault(require("@mui/system/useThemeProps"));
 var _base = require("@mui/base");
 var _Drawer = _interopRequireWildcard(require("../Drawer/Drawer"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -19,12 +18,14 @@ var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _SwipeArea = _interopRequireDefault(require("./SwipeArea"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSwipeableDrawer');
+
 // This value is closed to what browsers are using internally to
 // trigger a native scroll.
 const UNCERTAINTY_THRESHOLD = 3; // px
@@ -122,11 +123,11 @@ function computeHasNativeHandler({
 }
 const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
 const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     name: 'MuiSwipeableDrawer',
     props: inProps
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const transitionDurationDefault = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen

package/node/Tab/Tab.js

@@ -43,7 +43,9 @@ const TabRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${(0, _capitalize.default)(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${(0, _capitalize.default)(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, {
+      [`& .${_tabClasses.default.iconWrapper}`]: styles.iconWrapper
+    }];
   }
 })(({
   theme

package/node/Tabs/Tabs.js

@@ -15,7 +15,6 @@ var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _zeroStyled = require("../zero-styled");
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _animate = _interopRequireDefault(require("../internal/animate"));
 var _ScrollbarSize = _interopRequireDefault(require("./ScrollbarSize"));
@@ -265,7 +264,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     props: inProps,
     name: 'MuiTabs'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const {
     'aria-label': ariaLabel,

package/node/Tooltip/Tooltip.js

@@ -17,7 +17,6 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _zeroStyled = require("../zero-styled");
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Grow = _interopRequireDefault(require("../Grow"));
 var _Popper = _interopRequireDefault(require("../Popper"));
@@ -360,7 +359,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const children = /*#__PURE__*/React.isValidElement(childrenProp) ? childrenProp : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     children: childrenProp
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);

package/node/Typography/Typography.js

@@ -9,7 +9,6 @@ exports.default = exports.TypographyRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _styleFunctionSx = require("@mui/system/styleFunctionSx");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -18,6 +17,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTypography');
+const extendSxProp = (0, _zeroStyled.internal_createExtendSxProp)();
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -134,7 +134,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     name: 'MuiTypography'
   });
   const textColor = colorTransformations[color];
-  const props = (0, _styleFunctionSx.extendSxProp)({
+  const props = extendSxProp({
     ...themeProps,
     ...(textColor !== null && {
       color: textColor || color

package/node/Zoom/Zoom.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,7 +31,7 @@ const styles = {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const defaultTimeout = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.10
+ * @mui/material v6.0.0-alpha.11
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/createTheme.js

@@ -55,7 +55,7 @@ Please use another name.` : (0, _formatMuiErrorMessage2.default)(18));
     const traverse = (node, component) => {
       let key;
 
-      // eslint-disable-next-line guard-for-in, no-restricted-syntax
+      // eslint-disable-next-line guard-for-in
       for (key in node) {
         const child = node[key];
         if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {