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

package/modern/ScopedCssBaseline/ScopedCssBaseline.js

@@ -4,8 +4,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { html, body } from '../CssBaseline/CssBaseline';
 import { getScopedCssBaselineUtilityClass } from './scopedCssBaselineClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,19 +23,25 @@ const ScopedCssBaselineRoot = styled('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const colorSchemeStyles = {};
-  if (ownerState.enableColorScheme && theme.colorSchemes) {
+  if (theme.colorSchemes) {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
-      colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = {
-        colorScheme: scheme.palette?.mode
-      };
+      const selector = theme.getColorSchemeSelector(key);
+      if (selector.startsWith('@')) {
+        colorSchemeStyles[selector] = {
+          colorScheme: scheme.palette?.mode
+        };
+      } else {
+        colorSchemeStyles[`&${selector.replace(/\s*&/, '')}`] = {
+          colorScheme: scheme.palette?.mode
+        };
+      }
     });
   }
   return {
-    ...html(theme, ownerState.enableColorScheme),
+    ...html(theme, false),
     ...body(theme),
     '& *, & *::before, & *::after': {
       boxSizing: 'inherit'
@@ -43,11 +49,18 @@ const ScopedCssBaselineRoot = styled('div', {
     '& strong, & b': {
       fontWeight: theme.typography.fontWeightBold
     },
-    ...colorSchemeStyles
+    variants: [{
+      props: {
+        enableColorScheme: true
+      },
+      style: theme.vars ? colorSchemeStyles : {
+        colorScheme: theme.palette.mode
+      }
+    }]
   };
 });
 const ScopedCssBaseline = /*#__PURE__*/React.forwardRef(function ScopedCssBaseline(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiScopedCssBaseline'
   });

package/modern/Skeleton/Skeleton.js

@@ -5,10 +5,10 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha, unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from '../styles';
-import { keyframes, css, createUseThemeProps, styled } from '../zero-styled';
+import { keyframes, css, styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getSkeletonUtilityClass } from './skeletonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiSkeleton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -174,7 +174,7 @@ const SkeletonRoot = styled('span', {
   };
 });
 const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiSkeleton'
   });

package/modern/Slider/Slider.js

@@ -9,14 +9,14 @@ import composeClasses from '@mui/utils/composeClasses';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import BaseSliderValueLabel from './SliderValueLabel';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiSlider');
 function Identity(x) {
   return x;
 }
@@ -535,7 +535,7 @@ const Forward = ({
   children
 }) => children;
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inputProps,
     name: 'MuiSlider'
   });

package/modern/Snackbar/Snackbar.js

@@ -6,13 +6,13 @@ 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, useTheme } from '../zero-styled';
+import { styled, useTheme } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
 import SnackbarContent from '../SnackbarContent';
 import { getSnackbarUtilityClass } from './snackbarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiSnackbar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -98,7 +98,7 @@ const SnackbarRoot = styled('div', {
   }]
 }));
 const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiSnackbar'
   });

package/modern/SnackbarContent/SnackbarContent.js

@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { emphasize } from '@mui/system/colorManipulator';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Paper from '../Paper';
 import { getSnackbarContentUtilityClass } from './snackbarContentClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiSnackbarContent');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -65,7 +65,7 @@ const SnackbarContentAction = styled('div', {
   marginRight: -8
 });
 const SnackbarContent = /*#__PURE__*/React.forwardRef(function SnackbarContent(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiSnackbarContent'
   });

package/modern/SpeedDial/SpeedDial.js

@@ -7,7 +7,8 @@ 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, useTheme } from '../zero-styled';
+import { styled, useTheme } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Zoom from '../Zoom';
 import Fab from '../Fab';
 import capitalize from '../utils/capitalize';
@@ -17,7 +18,6 @@ import useControlled from '../utils/useControlled';
 import speedDialClasses, { getSpeedDialUtilityClass } from './speedDialClasses';
 import useSlot from '../utils/useSlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiSpeedDial');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -138,7 +138,7 @@ const SpeedDialActions = styled('div', {
   }]
 });
 const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiSpeedDial'
   });

package/modern/SpeedDialAction/SpeedDialAction.js

@@ -6,13 +6,13 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { emphasize } from '@mui/system/colorManipulator';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Fab from '../Fab';
 import Tooltip from '../Tooltip';
 import capitalize from '../utils/capitalize';
 import speedDialActionClasses, { getSpeedDialActionUtilityClass } from './speedDialActionClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiSpeedDialAction');
 const useUtilityClasses = ownerState => {
   const {
     open,
@@ -131,7 +131,7 @@ const SpeedDialActionStaticTooltipLabel = styled('span', {
   wordBreak: 'keep-all'
 }));
 const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiSpeedDialAction'
   });

package/modern/SpeedDialIcon/SpeedDialIcon.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import AddIcon from '../internal/svg-icons/Add';
 import speedDialIconClasses, { getSpeedDialIconUtilityClass } from './speedDialIconClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiSpeedDialIcon');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -89,7 +89,7 @@ const SpeedDialIconRoot = styled('span', {
   }]
 }));
 const SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiSpeedDialIcon'
   });

package/modern/Step/Step.js

@@ -7,10 +7,10 @@ import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
 import StepperContext from '../Stepper/StepperContext';
 import StepContext from './StepContext';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getStepUtilityClass } from './stepClasses';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiStep');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -52,7 +52,7 @@ const StepRoot = styled('div', {
   }]
 });
 const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiStep'
   });

package/modern/StepButton/StepButton.js

@@ -4,7 +4,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import ButtonBase from '../ButtonBase';
 import StepLabel from '../StepLabel';
 import isMuiElement from '../utils/isMuiElement';
@@ -12,7 +13,6 @@ import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import stepButtonClasses, { getStepButtonUtilityClass } from './stepButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiStepButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -55,7 +55,7 @@ const StepButtonRoot = styled(ButtonBase, {
   }]
 });
 const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiStepButton'
   });

package/modern/StepConnector/StepConnector.js

@@ -5,12 +5,12 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import { getStepConnectorUtilityClass } from './stepConnectorClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiStepConnector');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -93,7 +93,7 @@ const StepConnectorLine = styled('span', {
   };
 });
 const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiStepConnector'
   });

package/modern/StepContent/StepContent.js

@@ -4,13 +4,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Collapse from '../Collapse';
 import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import { getStepContentUtilityClass } from './stepContentClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiStepContent');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -55,7 +55,7 @@ const StepContentTransition = styled(Collapse, {
   overridesResolver: (props, styles) => styles.transition
 })({});
 const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiStepContent'
   });

package/modern/StepIcon/StepIcon.js

@@ -5,13 +5,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import CheckCircle from '../internal/svg-icons/CheckCircle';
 import Warning from '../internal/svg-icons/Warning';
 import SvgIcon from '../SvgIcon';
 import stepIconClasses, { getStepIconUtilityClass } from './stepIconClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiStepIcon');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -59,7 +59,7 @@ const StepIconText = styled('text', {
   fontFamily: theme.typography.fontFamily
 }));
 const StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiStepIcon'
   });

package/modern/StepLabel/StepLabel.js

@@ -7,11 +7,11 @@ import * as React from 'react';
 import StepContext from '../Step/StepContext';
 import StepIcon from '../StepIcon';
 import StepperContext from '../Stepper/StepperContext';
-import { createUseThemeProps, styled } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import stepLabelClasses, { getStepLabelUtilityClass } from './stepLabelClasses';
 import useSlot from '../utils/useSlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiStepLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -110,7 +110,7 @@ const StepLabelLabelContainer = styled('span', {
   }
 }));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiStepLabel'
   });

package/modern/Stepper/Stepper.js

@@ -5,20 +5,21 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getStepperUtilityClass } from './stepperClasses';
 import StepConnector from '../StepConnector';
 import StepperContext from './StepperContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiStepper');
 const useUtilityClasses = ownerState => {
   const {
     orientation,
+    nonLinear,
     alternativeLabel,
     classes
   } = ownerState;
   const slots = {
-    root: ['root', orientation, alternativeLabel && 'alternativeLabel']
+    root: ['root', orientation, nonLinear && 'nonLinear', alternativeLabel && 'alternativeLabel']
   };
   return composeClasses(slots, getStepperUtilityClass, classes);
 };
@@ -29,7 +30,7 @@ const StepperRoot = styled('div', {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel];
+    return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, ownerState.nonLinear && styles.nonLinear];
   }
 })({
   display: 'flex',
@@ -59,7 +60,7 @@ const StepperRoot = styled('div', {
 });
 const defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiStepper'
   });
@@ -76,6 +77,7 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   } = props;
   const ownerState = {
     ...props,
+    nonLinear,
     alternativeLabel,
     orientation,
     component

package/modern/Stepper/stepperClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getStepperUtilityClass(slot) {
   return generateUtilityClass('MuiStepper', slot);
 }
-const stepperClasses = generateUtilityClasses('MuiStepper', ['root', 'horizontal', 'vertical', 'alternativeLabel']);
+const stepperClasses = generateUtilityClasses('MuiStepper', ['root', 'horizontal', 'vertical', 'nonLinear', 'alternativeLabel']);
 export default stepperClasses;

package/modern/SvgIcon/SvgIcon.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getSvgIconUtilityClass } from './svgIconClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiSvgIcon');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -108,7 +108,7 @@ const SvgIconRoot = styled('svg', {
   }]
 }));
 const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiSvgIcon'
   });

package/modern/SwipeableDrawer/SwipeableDrawer.js

@@ -11,14 +11,14 @@ import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import useEventCallback from '../utils/useEventCallback';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
-import { createUseThemeProps, useTheme } from '../zero-styled';
+import { useTheme } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 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.
@@ -114,7 +114,7 @@ function computeHasNativeHandler({
 }
 const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
 const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiSwipeableDrawer',
     props: inProps
   });

package/modern/Switch/Switch.js

@@ -9,10 +9,10 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha, darken, lighten } from '@mui/system/colorManipulator';
 import capitalize from '../utils/capitalize';
 import SwitchBase from '../internal/SwitchBase';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import switchClasses, { getSwitchUtilityClass } from './switchClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiSwitch');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -200,7 +200,7 @@ const SwitchThumb = styled('span', {
   borderRadius: '50%'
 }));
 const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiSwitch'
   });

package/modern/Tab/Tab.js

@@ -6,11 +6,11 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import unsupportedProp from '../utils/unsupportedProp';
 import tabClasses, { getTabUtilityClass } from './tabClasses';
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTab');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -24,7 +24,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', icon && label && 'labelIcon', `textColor${capitalize(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],
-    iconWrapper: ['iconWrapper']
+    icon: ['iconWrapper', 'icon']
   };
   return composeClasses(slots, getTabUtilityClass, classes);
 };
@@ -37,6 +37,8 @@ const TabRoot = styled(ButtonBase, {
     } = props;
     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
+    }, {
+      [`& .${tabClasses.icon}`]: styles.icon
     }];
   }
 })(({
@@ -82,7 +84,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'top',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginBottom: 6
       }
     }
@@ -92,7 +94,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'bottom',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginTop: 6
       }
     }
@@ -102,7 +104,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'start',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginRight: theme.spacing(1)
       }
     }
@@ -112,7 +114,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'end',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginLeft: theme.spacing(1)
       }
     }
@@ -177,7 +179,7 @@ const TabRoot = styled(ButtonBase, {
   }]
 }));
 const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTab'
   });
@@ -219,7 +221,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const icon = iconProp && label && /*#__PURE__*/React.isValidElement(iconProp) ? /*#__PURE__*/React.cloneElement(iconProp, {
-    className: clsx(classes.iconWrapper, iconProp.props.className)
+    className: clsx(classes.icon, iconProp.props.className)
   }) : iconProp;
   const handleClick = event => {
     if (!selected && onChange) {

package/modern/Tab/tabClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTabUtilityClass(slot) {
   return generateUtilityClass('MuiTab', slot);
 }
-const tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper']);
+const tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper', 'icon']);
 export default tabClasses;

package/modern/TabScrollButton/TabScrollButton.js

@@ -10,10 +10,10 @@ import { useRtl } from '@mui/system/RtlProvider';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import ButtonBase from '../ButtonBase';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTabScrollButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -55,7 +55,7 @@ const TabScrollButtonRoot = styled(ButtonBase, {
   }]
 });
 const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTabScrollButton'
   });