migrate to useDefaultProps

packages/mui-lab/src/LoadingButton/LoadingButton.js

@@ -4,15 +4,14 @@ import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
 import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { useDefaultProps } from '@mui/material/PropsProvider';
 import Button from '@mui/material/Button';
 import { ButtonGroupContext } from '@mui/material/ButtonGroup';
 import CircularProgress from '@mui/material/CircularProgress';
 import resolveProps from '@mui/utils/resolveProps';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
 import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
 
-const useThemeProps = createUseThemeProps('MuiLoadingButton');
-
 const useUtilityClasses = (ownerState) => {
   const { loading, loadingPosition, classes } = ownerState;
 
@@ -198,7 +197,7 @@ const LoadingButtonLoadingIndicator = styled('span', {
 const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) {
   const contextProps = React.useContext(ButtonGroupContext);
   const resolvedProps = resolveProps(contextProps, inProps);
-  const props = useThemeProps({ props: resolvedProps, name: 'MuiLoadingButton' });
+  const props = useDefaultProps({ props: resolvedProps, name: 'MuiLoadingButton' });
   const {
     children,
     disabled = false,

packages/mui-material/src/Accordion/Accordion.js

@@ -5,16 +5,15 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../PropsProvider';
 import Collapse from '../Collapse';
 import Paper from '../Paper';
 import AccordionContext from './AccordionContext';
 import useControlled from '../utils/useControlled';
 import useSlot from '../utils/useSlot';
 import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
 
-const useThemeProps = createUseThemeProps('MuiAccordion');
-
 const useUtilityClasses = (ownerState) => {
   const { classes, square, expanded, disabled, disableGutters } = ownerState;
 
@@ -126,7 +125,7 @@ const AccordionRoot = styled(Paper, {
 );
 
 const Accordion = React.forwardRef(function Accordion(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAccordion' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAccordion' });
   const {
     children: childrenProp,
     className,

packages/mui-material/src/AccordionActions/AccordionActions.js

@@ -3,11 +3,10 @@ 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 '../PropsProvider';
 import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
 
-const useThemeProps = createUseThemeProps('MuiAccordionActions');
-
 const useUtilityClasses = (ownerState) => {
   const { classes, disableSpacing } = ownerState;
 
@@ -44,7 +43,7 @@ const AccordionActionsRoot = styled('div', {
 });
 
 const AccordionActions = React.forwardRef(function AccordionActions(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAccordionActions' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAccordionActions' });
   const { className, disableSpacing = false, ...other } = props;
   const ownerState = { ...props, disableSpacing };
 

packages/mui-material/src/AccordionDetails/AccordionDetails.js

@@ -3,11 +3,10 @@ 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 '../PropsProvider';
 import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
 
-const useThemeProps = createUseThemeProps('MuiAccordionDetails');
-
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
@@ -27,7 +26,7 @@ const AccordionDetailsRoot = styled('div', {
 }));
 
 const AccordionDetails = React.forwardRef(function AccordionDetails(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAccordionDetails' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAccordionDetails' });
   const { className, ...other } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);

packages/mui-material/src/AccordionSummary/AccordionSummary.js

@@ -3,15 +3,14 @@ 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 '../PropsProvider';
 import ButtonBase from '../ButtonBase';
 import AccordionContext from '../Accordion/AccordionContext';
 import accordionSummaryClasses, {
   getAccordionSummaryUtilityClass,
 } from './accordionSummaryClasses';
 
-const useThemeProps = createUseThemeProps('MuiAccordionSummary');
-
 const useUtilityClasses = (ownerState) => {
   const { classes, expanded, disabled, disableGutters } = ownerState;
 
@@ -101,7 +100,7 @@ const AccordionSummaryExpandIconWrapper = styled('div', {
 }));
 
 const AccordionSummary = React.forwardRef(function AccordionSummary(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAccordionSummary' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAccordionSummary' });
   const { children, className, expandIcon, focusVisibleClassName, onClick, ...other } = props;
 
   const { disabled = false, disableGutters, expanded, toggle } = React.useContext(AccordionContext);

packages/mui-material/src/Alert/Alert.js

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { darken, lighten } from '@mui/system/colorManipulator';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../PropsProvider';
 import useSlot from '../utils/useSlot';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
@@ -16,8 +17,6 @@ import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
 import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
 import CloseIcon from '../internal/svg-icons/Close';
 
-const useThemeProps = createUseThemeProps('MuiAlert');
-
 const useUtilityClasses = (ownerState) => {
   const { variant, color, severity, classes } = ownerState;
 
@@ -157,7 +156,7 @@ const defaultIconMapping = {
 };
 
 const Alert = React.forwardRef(function Alert(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAlert' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAlert' });
   const {
     action,
     children,

packages/mui-material/src/AlertTitle/AlertTitle.js

@@ -3,12 +3,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 '../PropsProvider';
 import Typography from '../Typography';
 import { getAlertTitleUtilityClass } from './alertTitleClasses';
 
-const useThemeProps = createUseThemeProps('MuiAlertTitle');
-
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
@@ -31,7 +30,7 @@ const AlertTitleRoot = styled(Typography, {
 });
 
 const AlertTitle = React.forwardRef(function AlertTitle(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiAlertTitle',
   });

packages/mui-material/src/AppBar/AppBar.js

@@ -3,13 +3,12 @@ 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 '../PropsProvider';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
 import { getAppBarUtilityClass } from './appBarClasses';
 
-const useThemeProps = createUseThemeProps('MuiAppBar');
-
 const useUtilityClasses = (ownerState) => {
   const { color, position, classes } = ownerState;
 
@@ -161,7 +160,7 @@ const AppBarRoot = styled(Paper, {
 }));
 
 const AppBar = React.forwardRef(function AppBar(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAppBar' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAppBar' });
   const {
     className,
     color = 'primary',

packages/mui-material/src/Autocomplete/Autocomplete.js

@@ -18,13 +18,12 @@ import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
 import filledInputClasses from '../FilledInput/filledInputClasses';
 import ClearIcon from '../internal/svg-icons/Close';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../PropsProvider';
 import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
 import capitalize from '../utils/capitalize';
 import useSlot from '../utils/useSlot';
 
-const useThemeProps = createUseThemeProps('MuiAutocomplete');
-
 const useUtilityClasses = (ownerState) => {
   const {
     classes,
@@ -411,7 +410,7 @@ const AutocompleteGroupUl = styled('ul', {
 export { createFilterOptions };
 
 const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAutocomplete' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAutocomplete' });
 
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const {

packages/mui-material/src/Avatar/Avatar.js

@@ -3,13 +3,12 @@ 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 '../PropsProvider';
 import Person from '../internal/svg-icons/Person';
 import { getAvatarUtilityClass } from './avatarClasses';
 import useSlot from '../utils/useSlot';
 
-const useThemeProps = createUseThemeProps('MuiAvatar');
-
 const useUtilityClasses = (ownerState) => {
   const { classes, variant, colorDefault } = ownerState;
 
@@ -143,7 +142,7 @@ function useLoaded({ crossOrigin, referrerPolicy, src, srcSet }) {
 }
 
 const Avatar = React.forwardRef(function Avatar(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAvatar' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAvatar' });
   const {
     alt,
     children: childrenProp,

packages/mui-material/src/AvatarGroup/AvatarGroup.js

@@ -5,7 +5,8 @@ import { isFragment } from 'react-is';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../PropsProvider';
 import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
 import useSlot from '../utils/useSlot';
@@ -15,8 +16,6 @@ const SPACINGS = {
   medium: -8,
 };
 
-const useThemeProps = createUseThemeProps('MuiAlert');
-
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
@@ -49,7 +48,7 @@ const AvatarGroupRoot = styled('div', {
 }));
 
 const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiAvatarGroup',
   });

packages/mui-material/src/Backdrop/Backdrop.js

@@ -3,13 +3,12 @@ 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 '../PropsProvider';
 import useSlot from '../utils/useSlot';
 import Fade from '../Fade';
 import { getBackdropUtilityClass } from './backdropClasses';
 
-const useThemeProps = createUseThemeProps('MuiBackdrop');
-
 const useUtilityClasses = (ownerState) => {
   const { classes, invisible } = ownerState;
 
@@ -50,7 +49,7 @@ const BackdropRoot = styled('div', {
 });
 
 const Backdrop = React.forwardRef(function Backdrop(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiBackdrop' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiBackdrop' });
   const {
     children,
     className,

packages/mui-material/src/Badge/Badge.js

@@ -6,15 +6,14 @@ import usePreviousProps from '@mui/utils/usePreviousProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useBadge } from '@mui/base/useBadge';
 import { useSlotProps } from '@mui/base/utils';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../PropsProvider';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 
-const useThemeProps = createUseThemeProps('MuiBadge');
-
 const useUtilityClasses = (ownerState) => {
   const { color, anchorOrigin, invisible, overlap, variant, classes = {} } = ownerState;
 
@@ -240,7 +239,7 @@ const BadgeBadge = styled('span', {
 }));
 
 const Badge = React.forwardRef(function Badge(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiBadge' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiBadge' });
   const {
     anchorOrigin: anchorOriginProp = {
       vertical: 'top',

packages/mui-material/src/BottomNavigation/BottomNavigation.js

@@ -4,11 +4,10 @@ import { isFragment } from 'react-is';
 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 '../PropsProvider';
 import { getBottomNavigationUtilityClass } from './bottomNavigationClasses';
 
-const useThemeProps = createUseThemeProps('MuiBottomNavigation');
-
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
@@ -31,7 +30,7 @@ const BottomNavigationRoot = styled('div', {
 }));
 
 const BottomNavigation = React.forwardRef(function BottomNavigation(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiBottomNavigation' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiBottomNavigation' });
   const {
     children,
     className,

packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js

@@ -3,15 +3,14 @@ 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 '../PropsProvider';
 import ButtonBase from '../ButtonBase';
 import unsupportedProp from '../utils/unsupportedProp';
 import bottomNavigationActionClasses, {
   getBottomNavigationActionUtilityClass,
 } from './bottomNavigationActionClasses';
 
-const useThemeProps = createUseThemeProps('MuiBottomNavigationAction');
-
 const useUtilityClasses = (ownerState) => {
   const { classes, showLabel, selected } = ownerState;
 
@@ -85,7 +84,7 @@ const BottomNavigationActionLabel = styled('span', {
 }));
 
 const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiBottomNavigationAction' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiBottomNavigationAction' });
   const {
     className,
     icon,