@mui/material 6.0.0-alpha.8 → 6.0.0-beta.0

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);
 };
@@ -35,7 +35,11 @@ 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
+    }, {
+      [`& .${tabClasses.icon}`]: styles.icon
+    }];
   }
 })(({
   theme
@@ -80,7 +84,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'top',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginBottom: 6
       }
     }
@@ -90,7 +94,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'bottom',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginTop: 6
       }
     }
@@ -100,7 +104,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'start',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginRight: theme.spacing(1)
       }
     }
@@ -110,7 +114,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'end',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginLeft: theme.spacing(1)
       }
     }
@@ -175,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'
   });
@@ -217,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'
   });

package/modern/Table/Table.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import TableContext from './TableContext';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getTableUtilityClass } from './tableClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTable');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -53,7 +53,7 @@ const TableRoot = styled('table', {
 }));
 const defaultComponent = 'table';
 const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTable'
   });

package/modern/TableBody/TableBody.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getTableBodyUtilityClass } from './tableBodyClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableBody');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -30,7 +30,7 @@ const tablelvl2 = {
 };
 const defaultComponent = 'tbody';
 const TableBody = /*#__PURE__*/React.forwardRef(function TableBody(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableBody'
   });

package/modern/TableCell/TableCell.js

@@ -8,10 +8,10 @@ import { darken, alpha, lighten } from '@mui/system/colorManipulator';
 import capitalize from '../utils/capitalize';
 import TableContext from '../Table/TableContext';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import tableCellClasses, { getTableCellUtilityClass } from './tableCellClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableCell');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -150,7 +150,7 @@ const TableCellRoot = styled('td', {
  * or otherwise a `<td>` element.
  */
 const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableCell'
   });

package/modern/TableContainer/TableContainer.js

@@ -4,10 +4,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 '../DefaultPropsProvider';
 import { getTableContainerUtilityClass } from './tableContainerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableContainer');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -26,7 +26,7 @@ const TableContainerRoot = styled('div', {
   overflowX: 'auto'
 });
 const TableContainer = /*#__PURE__*/React.forwardRef(function TableContainer(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableContainer'
   });

package/modern/TableFooter/TableFooter.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getTableFooterUtilityClass } from './tableFooterClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableFooter');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -30,7 +30,7 @@ const tablelvl2 = {
 };
 const defaultComponent = 'tfoot';
 const TableFooter = /*#__PURE__*/React.forwardRef(function TableFooter(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableFooter'
   });

package/modern/TableHead/TableHead.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getTableHeadUtilityClass } from './tableHeadClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableHead');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -30,7 +30,7 @@ const tablelvl2 = {
 };
 const defaultComponent = 'thead';
 const TableHead = /*#__PURE__*/React.forwardRef(function TableHead(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableHead'
   });

package/modern/TablePagination/TablePagination.js

@@ -8,7 +8,8 @@ import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import { isHostComponent } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import InputBase from '../InputBase';
 import MenuItem from '../MenuItem';
 import Select from '../Select';
@@ -19,7 +20,6 @@ import useId from '../utils/useId';
 import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-const useThemeProps = createUseThemeProps('MuiTablePagination');
 const TablePaginationRoot = styled(TableCell, {
   name: 'MuiTablePagination',
   slot: 'Root',
@@ -146,7 +146,7 @@ const useUtilityClasses = ownerState => {
  * A `TableCell` based component for placing inside `TableFooter` for pagination.
  */
 const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTablePagination'
   });

package/modern/TableRow/TableRow.js

@@ -6,10 +6,10 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import tableRowClasses, { getTableRowUtilityClass } from './tableRowClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableRow');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -56,7 +56,7 @@ const defaultComponent = 'tr';
  * based on the material table element parent (head, body, etc).
  */
 const TableRow = /*#__PURE__*/React.forwardRef(function TableRow(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableRow'
   });

package/modern/TableSortLabel/TableSortLabel.js

@@ -6,11 +6,11 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import ButtonBase from '../ButtonBase';
 import ArrowDownwardIcon from '../internal/svg-icons/ArrowDownward';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableSortLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -18,7 +18,7 @@ const useUtilityClasses = ownerState => {
     active
   } = ownerState;
   const slots = {
-    root: ['root', active && 'active'],
+    root: ['root', active && 'active', `direction${capitalize(direction)}`],
     icon: ['icon', `iconDirection${capitalize(direction)}`]
   };
   return composeClasses(slots, getTableSortLabelUtilityClass, classes);
@@ -98,7 +98,7 @@ const TableSortLabelIcon = styled('span', {
  * A button based label for placing inside `TableCell` for column sorting.
  */
 const TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableSortLabel'
   });

package/modern/TableSortLabel/tableSortLabelClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTableSortLabelUtilityClass(slot) {
   return generateUtilityClass('MuiTableSortLabel', slot);
 }
-const tableSortLabelClasses = generateUtilityClasses('MuiTableSortLabel', ['root', 'active', 'icon', 'iconDirectionDesc', 'iconDirectionAsc']);
+const tableSortLabelClasses = generateUtilityClasses('MuiTableSortLabel', ['root', 'active', 'icon', 'iconDirectionDesc', 'iconDirectionAsc', 'directionDesc', 'directionAsc']);
 export default tableSortLabelClasses;

package/modern/Tabs/Tabs.js

@@ -8,10 +8,9 @@ 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, useTheme } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import debounce from '../utils/debounce';
-import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';
 import animate from '../internal/animate';
 import ScrollbarSize from './ScrollbarSize';
 import TabScrollButton from '../TabScrollButton';
@@ -20,7 +19,6 @@ import tabsClasses, { getTabsUtilityClass } from './tabsClasses';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTabs');
 const nextItem = (list, item) => {
   if (list === item) {
     return list.firstChild;
@@ -254,7 +252,7 @@ const TabsScrollbarSize = styled(ScrollbarSize)({
 const defaultIndicatorStyle = {};
 let warnedOnceTabPresent = false;
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTabs'
   });
@@ -348,7 +346,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
         scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? 'rtl' : 'ltr'),
         scrollWidth: tabsNode.scrollWidth,
         top: rect.top,
         bottom: rect.bottom,
@@ -398,8 +395,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     } else {
       startIndicator = isRtl ? 'right' : 'left';
       if (tabMeta && tabsMeta) {
-        const correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;
-        startValue = (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + correction);
+        startValue = (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + tabsMeta.scrollLeft);
       }
     }
     const newIndicatorStyle = {
@@ -407,10 +403,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       // May be wrong until the font is loaded.
       [size]: tabMeta ? tabMeta[size] : 0
     };
-
-    // IE11 support, replace with Number.isNaN
-    // eslint-disable-next-line no-restricted-globals
-    if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {
+    if (typeof indicatorStyle[startIndicator] !== 'number' || typeof indicatorStyle[size] !== 'number') {
       setIndicatorStyle(newIndicatorStyle);
     } else {
       const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);
@@ -437,8 +430,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       scrollValue += delta;
     } else {
       scrollValue += delta * (isRtl ? -1 : 1);
-      // Fix for Edge
-      scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1;
     }
     scroll(scrollValue);
   };

package/modern/TextField/TextField.js

@@ -6,7 +6,8 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import refType from '@mui/utils/refType';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Input from '../Input';
 import FilledInput from '../FilledInput';
 import OutlinedInput from '../OutlinedInput';
@@ -17,7 +18,6 @@ import Select from '../Select';
 import { getTextFieldUtilityClass } from './textFieldClasses';
 import useSlot from '../utils/useSlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTextField');
 const variantComponent = {
   standard: Input,
   filled: FilledInput,
@@ -71,7 +71,7 @@ const TextFieldRoot = styled(FormControl, {
  * - using the underlying components directly as shown in the demos
  */
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTextField'
   });

package/modern/ToggleButton/ToggleButton.js

@@ -9,13 +9,13 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
-import { createUseThemeProps, styled } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses';
 import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext';
 import ToggleButtonGroupButtonContext from '../ToggleButtonGroup/ToggleButtonGroupButtonContext';
 import isValueSelected from '../ToggleButtonGroup/isValueSelected';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiToggleButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -129,7 +129,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
     ...contextProps,
     selected: isValueSelected(inProps.value, contextValue)
   }, inProps);
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: resolvedProps,
     name: 'MuiToggleButton'
   });

package/modern/ToggleButtonGroup/ToggleButtonGroup.js

@@ -6,14 +6,14 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass } from './toggleButtonGroupClasses';
 import ToggleButtonGroupContext from './ToggleButtonGroupContext';
 import ToggleButtonGroupButtonContext from './ToggleButtonGroupButtonContext';
 import toggleButtonClasses from '../ToggleButton/toggleButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiToggleButtonGroup');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -115,7 +115,7 @@ const ToggleButtonGroupRoot = styled('div', {
   }]
 }));
 const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiToggleButtonGroup'
   });

package/modern/Toolbar/Toolbar.js

@@ -4,10 +4,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 '../DefaultPropsProvider';
 import { getToolbarUtilityClass } from './toolbarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiToolbar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -61,7 +61,7 @@ const ToolbarRoot = styled('div', {
   }]
 }));
 const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiToolbar'
   });

package/modern/Tooltip/Tooltip.js

@@ -9,19 +9,18 @@ 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 isFocusVisible from '@mui/utils/isFocusVisible';
+import { styled, useTheme } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
 import Popper from '../Popper';
 import useEventCallback from '../utils/useEventCallback';
 import useForkRef from '../utils/useForkRef';
 import useId from '../utils/useId';
-import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useControlled from '../utils/useControlled';
 import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTooltip');
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -310,7 +309,7 @@ function composeEventHandler(handler, eventHandler) {
 
 // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTooltip'
   });
@@ -445,18 +444,9 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       handleClose(event);
     });
   };
-  const {
-    isFocusVisibleRef,
-    onBlur: handleBlurVisible,
-    onFocus: handleFocusVisible,
-    ref: focusVisibleRef
-  } = useIsFocusVisible();
-  // We don't necessarily care about the focusVisible state (which is safe to access via ref anyway).
-  // We just need to re-render the Tooltip if the focus-visible state changes.
   const [, setChildIsFocusVisible] = React.useState(false);
   const handleBlur = event => {
-    handleBlurVisible(event);
-    if (isFocusVisibleRef.current === false) {
+    if (!isFocusVisible(event.target)) {
       setChildIsFocusVisible(false);
       handleMouseLeave(event);
     }
@@ -468,8 +458,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     if (!childNode) {
       setChildNode(event.currentTarget);
     }
-    handleFocusVisible(event);
-    if (isFocusVisibleRef.current === true) {
+    if (isFocusVisible(event.target)) {
       setChildIsFocusVisible(true);
       handleMouseOver(event);
     }
@@ -521,7 +510,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref);
+  const handleRef = useForkRef(children.ref, setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.
@@ -709,8 +698,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -724,8 +712,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */

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, internal_createExtendSxProp } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 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,
@@ -121,7 +121,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
   const {
     color,
     ...themeProps
-  } = useThemeProps({
+  } = useDefaultProps({
     props: inProps,
     name: 'MuiTypography'
   });

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.8
+ * @mui/material v6.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the