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

package/TextField/TextField.d.ts

@@ -299,12 +299,12 @@ export type TextFieldOwnerState = BaseTextFieldProps;
  * It's important to understand that the text field is a simple abstraction
  * on top of the following components:
  *
- * *   [FormControl](https://mui.com/material-ui/api/form-control/)
- * *   [InputLabel](https://mui.com/material-ui/api/input-label/)
- * *   [FilledInput](https://mui.com/material-ui/api/filled-input/)
- * *   [OutlinedInput](https://mui.com/material-ui/api/outlined-input/)
- * *   [Input](https://mui.com/material-ui/api/input/)
- * *   [FormHelperText](https://mui.com/material-ui/api/form-helper-text/)
+ * *   [FormControl](https://next.mui.com/material-ui/api/form-control/)
+ * *   [InputLabel](https://next.mui.com/material-ui/api/input-label/)
+ * *   [FilledInput](https://next.mui.com/material-ui/api/filled-input/)
+ * *   [OutlinedInput](https://next.mui.com/material-ui/api/outlined-input/)
+ * *   [Input](https://next.mui.com/material-ui/api/input/)
+ * *   [FormHelperText](https://next.mui.com/material-ui/api/form-helper-text/)
  *
  * If you wish to alter the props applied to the `input` element, you can do so as follows:
  *
@@ -324,13 +324,13 @@ export type TextFieldOwnerState = BaseTextFieldProps;
  *
  * Demos:
  *
- * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
- * - [Text Field](https://mui.com/material-ui/react-text-field/)
+ * - [Autocomplete](https://next.mui.com/material-ui/react-autocomplete/)
+ * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [TextField API](https://mui.com/material-ui/api/text-field/)
- * - inherits [FormControl API](https://mui.com/material-ui/api/form-control/)
+ * - [TextField API](https://next.mui.com/material-ui/api/text-field/)
+ * - inherits [FormControl API](https://next.mui.com/material-ui/api/form-control/)
  */
 export default function TextField<Variant extends TextFieldVariants>(
   props: {

package/ToggleButton/ToggleButton.d.ts

@@ -91,12 +91,12 @@ export type ToggleButtonTypeMap<
  *
  * Demos:
  *
- * - [Toggle Button](https://mui.com/material-ui/react-toggle-button/)
+ * - [Toggle Button](https://next.mui.com/material-ui/react-toggle-button/)
  *
  * API:
  *
- * - [ToggleButton API](https://mui.com/material-ui/api/toggle-button/)
- * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ * - [ToggleButton API](https://next.mui.com/material-ui/api/toggle-button/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
  */
 declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
 

package/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -80,10 +80,10 @@ export interface ToggleButtonGroupProps
  *
  * Demos:
  *
- * - [Toggle Button](https://mui.com/material-ui/react-toggle-button/)
+ * - [Toggle Button](https://next.mui.com/material-ui/react-toggle-button/)
  *
  * API:
  *
- * - [ToggleButtonGroup API](https://mui.com/material-ui/api/toggle-button-group/)
+ * - [ToggleButtonGroup API](https://next.mui.com/material-ui/api/toggle-button-group/)
  */
 export default function ToggleButtonGroup(props: ToggleButtonGroupProps): React.JSX.Element;

package/Toolbar/Toolbar.d.ts

@@ -44,11 +44,11 @@ export interface ToolbarTypeMap<
  *
  * Demos:
  *
- * - [App Bar](https://mui.com/material-ui/react-app-bar/)
+ * - [App Bar](https://next.mui.com/material-ui/react-app-bar/)
  *
  * API:
  *
- * - [Toolbar API](https://mui.com/material-ui/api/toolbar/)
+ * - [Toolbar API](https://next.mui.com/material-ui/api/toolbar/)
  */
 declare const Toolbar: OverridableComponent<ToolbarTypeMap>;
 

package/Tooltip/Tooltip.d.ts

@@ -217,10 +217,10 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
  *
  * Demos:
  *
- * - [Tooltip](https://mui.com/material-ui/react-tooltip/)
+ * - [Tooltip](https://next.mui.com/material-ui/react-tooltip/)
  *
  * API:
  *
- * - [Tooltip API](https://mui.com/material-ui/api/tooltip/)
+ * - [Tooltip API](https://next.mui.com/material-ui/api/tooltip/)
  */
 export default function Tooltip(props: TooltipProps): React.JSX.Element;

package/Tooltip/Tooltip.js

@@ -9,8 +9,7 @@ import { appendOwnerState } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
-import { styled, createUseThemeProps } from '../zero-styled';
-import useTheme from '../styles/useTheme';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
 import Popper from '../Popper';

package/Typography/Typography.d.ts

@@ -85,12 +85,12 @@ export interface TypographyTypeMap<
  *
  * Demos:
  *
- * - [Breadcrumbs](https://mui.com/material-ui/react-breadcrumbs/)
- * - [Typography](https://mui.com/material-ui/react-typography/)
+ * - [Breadcrumbs](https://next.mui.com/material-ui/react-breadcrumbs/)
+ * - [Typography](https://next.mui.com/material-ui/react-typography/)
  *
  * API:
  *
- * - [Typography API](https://mui.com/material-ui/api/typography/)
+ * - [Typography API](https://next.mui.com/material-ui/api/typography/)
  */
 declare const Typography: OverridableComponent<TypographyTypeMap>;
 

package/Typography/Typography.js

@@ -3,13 +3,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { extendSxProp } from '@mui/system/styleFunctionSx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled, createUseThemeProps, internal_createExtendSxProp } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import { getTypographyUtilityClass } from './typographyClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTypography');
+const extendSxProp = internal_createExtendSxProp();
 const useUtilityClasses = ownerState => {
   const {
     align,

package/Zoom/Zoom.d.ts

@@ -35,16 +35,16 @@ export interface ZoomProps extends TransitionProps {
 
 /**
  * The Zoom transition can be used for the floating variant of the
- * [Button](https://mui.com/material-ui/react-button/#floating-action-buttons) component.
+ * [Button](https://next.mui.com/material-ui/react-button/#floating-action-buttons) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Transitions](https://mui.com/material-ui/transitions/)
+ * - [Transitions](https://next.mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Zoom API](https://mui.com/material-ui/api/zoom/)
+ * - [Zoom API](https://next.mui.com/material-ui/api/zoom/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 export default function Zoom(props: ZoomProps): React.JSX.Element;

package/Zoom/Zoom.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import useTheme from '../styles/useTheme';
+import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";

package/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/modern/Autocomplete/Autocomplete.js

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

package/modern/Chip/Chip.js

@@ -396,8 +396,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/modern/Collapse/Collapse.js

@@ -7,10 +7,9 @@ import { Transition } from 'react-transition-group';
 import useTimeout from '@mui/utils/useTimeout';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import { duration } from '../styles/createTransitions';
 import { getTransitionProps } from '../transitions/utils';
-import useTheme from '../styles/useTheme';
 import { useForkRef } from '../utils';
 import { getCollapseUtilityClass } from './collapseClasses';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/Dialog/Dialog.js

@@ -12,8 +12,7 @@ import Paper from '../Paper';
 import dialogClasses, { getDialogUtilityClass } from './dialogClasses';
 import DialogContext from './DialogContext';
 import Backdrop from '../Backdrop';
-import useTheme from '../styles/useTheme';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiDialog');
 const DialogBackdrop = styled(Backdrop, {

package/modern/Drawer/Drawer.js

@@ -10,9 +10,8 @@ import Modal from '../Modal';
 import Slide from '../Slide';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
-import useTheme from '../styles/useTheme';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import { getDrawerUtilityClass } from './drawerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiDrawer');

package/modern/Fade/Fade.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import useTheme from '../styles/useTheme';
+import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/Grid/Grid.js

@@ -23,13 +23,6 @@ import useTheme from '../styles/useTheme';
 import GridContext from './GridContext';
 import gridClasses, { getGridUtilityClass } from './gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-function getOffset(val) {
-  const parse = parseFloat(val);
-  if (Number.isNaN(parse)) {
-    return val;
-  }
-  return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
-}
 export function generateGrid({
   theme,
   ownerState
@@ -74,7 +67,7 @@ export 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
@@ -174,9 +167,9 @@ export function generateRowGap({
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
-          marginTop: `-${getOffset(themeSpacing)}`,
+          marginTop: theme.spacing(-propValue),
           [`& > .${gridClasses.item}`]: {
-            paddingTop: getOffset(themeSpacing)
+            paddingTop: themeSpacing
           }
         };
       }
@@ -219,11 +212,12 @@ export function generateColumnGap({
     }, columnSpacingValues, (propValue, breakpoint) => {
       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.item}`]: {
-            paddingLeft: getOffset(themeSpacing)
+            paddingLeft: themeSpacing
           }
         };
       }

package/modern/Grow/Grow.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import useTimeout from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { Transition } from 'react-transition-group';
-import useTheme from '../styles/useTheme';
+import { useTheme } from '../zero-styled';
 import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/InputBase/InputBase.js

@@ -1,6 +1,7 @@
 'use client';
 
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+var _InputGlobalStyles;
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,11 +13,10 @@ import composeClasses from '@mui/utils/composeClasses';
 import formControlState from '../FormControl/formControlState';
 import FormControlContext from '../FormControl/FormControlContext';
 import useFormControl from '../FormControl/useFormControl';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled, createUseThemeProps, globalCss } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
-import GlobalStyles from '../GlobalStyles';
 import { isFilled } from './utils';
 import inputBaseClasses, { getInputBaseUtilityClass } from './inputBaseClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -145,8 +145,6 @@ export const InputBaseInput = 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+
@@ -180,11 +178,19 @@ export const InputBaseInput = 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'
       },
@@ -211,17 +217,15 @@ export const InputBaseInput = styled('input', {
     }]
   };
 });
-const inputGlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
-  styles: {
-    '@keyframes mui-auto-fill': {
-      from: {
-        display: 'block'
-      }
-    },
-    '@keyframes mui-auto-fill-cancel': {
-      from: {
-        display: 'block'
-      }
+const InputGlobalStyles = globalCss({
+  '@keyframes mui-auto-fill': {
+    from: {
+      display: 'block'
+    }
+  },
+  '@keyframes mui-auto-fill-cancel': {
+    from: {
+      display: 'block'
     }
   }
 });
@@ -456,7 +460,9 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     ...(slotProps.input ?? componentsProps.input)
   };
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_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__*/_jsx(InputGlobalStyles, {}))), /*#__PURE__*/_jsxs(Root, {
       ...rootProps,
       ref: ref,
       onClick: handleClick,

package/modern/Link/Link.js

@@ -7,13 +7,12 @@ import { alpha } from '@mui/system/colorManipulator';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
 import Typography from '../Typography';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
 import getTextDecoration, { colorTransformations } from './getTextDecoration';
-import useTheme from '../styles/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiLink');
 const useUtilityClasses = ownerState => {

package/modern/Paper/Paper.js

@@ -7,9 +7,8 @@ import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import getOverlayAlpha from '../styles/getOverlayAlpha';
-import useTheme from '../styles/useTheme';
 import { getPaperUtilityClass } from './paperClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiPaper');

package/modern/Popper/Popper.js

@@ -18,13 +18,13 @@ const PopperRoot = styled(BasePopper, {
  *
  * 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) {
   const theme = useTheme();

package/modern/Slide/Slide.js

@@ -8,7 +8,7 @@ import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import debounce from '../utils/debounce';
 import useForkRef from '../utils/useForkRef';
-import useTheme from '../styles/useTheme';
+import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils';
 

package/modern/Snackbar/Snackbar.js

@@ -6,8 +6,7 @@ import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { ClickAwayListener } from '@mui/base/ClickAwayListener';
 import { useSnackbar } from '@mui/base/useSnackbar';
-import { styled, createUseThemeProps } from '../zero-styled';
-import useTheme from '../styles/useTheme';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
 import SnackbarContent from '../SnackbarContent';

package/modern/SpeedDial/SpeedDial.js

@@ -7,8 +7,7 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import useTimeout from '@mui/utils/useTimeout';
 import clamp from '@mui/utils/clamp';
-import { styled, createUseThemeProps } from '../zero-styled';
-import useTheme from '../styles/useTheme';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import Zoom from '../Zoom';
 import Fab from '../Fab';
 import capitalize from '../utils/capitalize';

package/modern/SwipeableDrawer/SwipeableDrawer.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
-import useThemeProps from '@mui/system/useThemeProps';
 import { NoSsr } from '@mui/base';
 import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
 import useForkRef from '../utils/useForkRef';
@@ -12,13 +11,14 @@ import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import useEventCallback from '../utils/useEventCallback';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
-import useTheme from '../styles/useTheme';
+import { createUseThemeProps, useTheme } from '../zero-styled';
 import { getTransitionProps } from '../transitions/utils';
 import SwipeArea from './SwipeArea';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSwipeableDrawer');
 
 // This value is closed to what browsers are using internally to
 // trigger a native scroll.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const UNCERTAINTY_THRESHOLD = 3; // px
 
 // This is the part of the drawer displayed on touch start.

package/modern/Tab/Tab.js

@@ -35,7 +35,9 @@ const TabRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, {
+      [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper
+    }];
   }
 })(({
   theme

package/modern/Tabs/Tabs.js

@@ -8,8 +8,7 @@ import refType from '@mui/utils/refType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { useRtl } from '@mui/system/RtlProvider';
-import { styled, createUseThemeProps } from '../zero-styled';
-import useTheme from '../styles/useTheme';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import debounce from '../utils/debounce';
 import animate from '../internal/animate';
 import ScrollbarSize from './ScrollbarSize';

package/modern/Tooltip/Tooltip.js

@@ -9,8 +9,7 @@ import { appendOwnerState } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
-import { styled, createUseThemeProps } from '../zero-styled';
-import useTheme from '../styles/useTheme';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
 import Popper from '../Popper';

package/modern/Typography/Typography.js

@@ -3,13 +3,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { extendSxProp } from '@mui/system/styleFunctionSx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled, createUseThemeProps, internal_createExtendSxProp } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import { getTypographyUtilityClass } from './typographyClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTypography');
+const extendSxProp = internal_createExtendSxProp();
 const useUtilityClasses = ownerState => {
   const {
     align,

package/modern/Zoom/Zoom.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import useTheme from '../styles/useTheme';
+import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/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/modern/styles/createTheme.js

@@ -45,7 +45,7 @@ Please use another name.` : _formatMuiErrorMessage(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) {