@mui/material 6.0.0-alpha.4 → 6.0.0-alpha.6

package/StepLabel/StepLabel.d.ts

@@ -42,7 +42,7 @@ export interface StepLabelProps
   /**
    * The props used for each slot inside.
    * @default {}
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps?: {
     /**
@@ -66,12 +66,12 @@ export interface StepLabelProps
   optional?: React.ReactNode;
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
-   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   StepIconComponent?: React.ElementType<StepIconProps>;
   /**
    * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
-   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   StepIconProps?: Partial<StepIconProps>;
   /**

package/StepLabel/StepLabel.js

@@ -215,7 +215,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
   /**
    * The props used for each slot inside.
    * @default {}
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps: PropTypes.shape({
     label: PropTypes.object
@@ -251,12 +251,12 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
   }),
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
-   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   StepIconComponent: PropTypes.elementType,
   /**
    * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
-   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   StepIconProps: PropTypes.object,
   /**

package/SvgIcon/SvgIcon.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getSvgIconUtilityClass } from './svgIconClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSvgIcon');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -33,32 +33,82 @@ const SvgIconRoot = styled('svg', {
     return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   userSelect: 'none',
   width: '1em',
   height: '1em',
   display: 'inline-block',
-  // the <svg> will define the property that has `currentColor`
-  // for example heroicons uses fill="none" and stroke="currentColor"
-  fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
   flexShrink: 0,
   transition: theme.transitions?.create?.('fill', {
-    duration: theme.transitions?.duration?.shorter
+    duration: (theme.vars ?? theme).transitions?.duration?.shorter
   }),
-  fontSize: {
-    inherit: 'inherit',
-    small: theme.typography?.pxToRem?.(20) || '1.25rem',
-    medium: theme.typography?.pxToRem?.(24) || '1.5rem',
-    large: theme.typography?.pxToRem?.(35) || '2.1875rem'
-  }[ownerState.fontSize],
-  // TODO v5 deprecate, v6 remove for sx
-  color: (theme.vars || theme).palette?.[ownerState.color]?.main ?? {
-    action: (theme.vars || theme).palette?.action?.active,
-    disabled: (theme.vars || theme).palette?.action?.disabled,
-    inherit: undefined
-  }[ownerState.color]
+  variants: [{
+    props: props => !props.hasSvgAsChild,
+    style: {
+      // the <svg> will define the property that has `currentColor`
+      // for example heroicons uses fill="none" and stroke="currentColor"
+      fill: 'currentColor'
+    }
+  }, {
+    props: {
+      fontSize: 'inherit'
+    },
+    style: {
+      fontSize: 'inherit'
+    }
+  }, {
+    props: {
+      fontSize: 'small'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(20) || '1.25rem'
+    }
+  }, {
+    props: {
+      fontSize: 'medium'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(24) || '1.5rem'
+    }
+  }, {
+    props: {
+      fontSize: 'large'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(35) || '2.1875rem'
+    }
+  },
+  // TODO v5 deprecate color prop, v6 remove for sx
+  ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.[color]?.main
+    }
+  })), {
+    props: {
+      color: 'action'
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.action?.active
+    }
+  }, {
+    props: {
+      color: 'disabled'
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.action?.disabled
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: undefined
+    }
+  }]
 }));
 const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   const props = useThemeProps({
@@ -179,5 +229,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
    */
   viewBox: PropTypes.string
 } : void 0;
-SvgIcon.muiName = 'SvgIcon';
+if (SvgIcon) {
+  SvgIcon.muiName = 'SvgIcon';
+}
 export default SvgIcon;

package/SwipeableDrawer/SwipeArea.js

@@ -1,38 +1,59 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["anchor", "classes", "className", "width", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import capitalize from '../utils/capitalize';
 import { isHorizontal } from '../Drawer/Drawer';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SwipeAreaRoot = styled('div', {
   shouldForwardProp: rootShouldForwardProp
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'fixed',
   top: 0,
   left: 0,
   bottom: 0,
-  zIndex: theme.zIndex.drawer - 1
-}, ownerState.anchor === 'left' && {
-  right: 'auto'
-}, ownerState.anchor === 'right' && {
-  left: 'auto',
-  right: 0
-}, ownerState.anchor === 'top' && {
-  bottom: 'auto',
-  right: 0
-}, ownerState.anchor === 'bottom' && {
-  top: 'auto',
-  bottom: 0,
-  right: 0
+  zIndex: theme.zIndex.drawer - 1,
+  variants: [{
+    props: {
+      anchor: 'left'
+    },
+    style: {
+      right: 'auto'
+    }
+  }, {
+    props: {
+      anchor: 'right'
+    },
+    style: {
+      left: 'auto',
+      right: 0
+    }
+  }, {
+    props: {
+      anchor: 'top'
+    },
+    style: {
+      bottom: 'auto',
+      right: 0
+    }
+  }, {
+    props: {
+      anchor: 'bottom'
+    },
+    style: {
+      top: 'auto',
+      bottom: 0,
+      right: 0
+    }
+  }]
 }));
 
 /**

package/Tab/Tab.js

@@ -9,11 +9,11 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 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,
@@ -41,8 +41,7 @@ const TabRoot = styled(ButtonBase, {
     return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({}, theme.typography.button, {
   maxWidth: 360,
   minWidth: 90,
@@ -52,57 +51,130 @@ const TabRoot = styled(ButtonBase, {
   padding: '12px 16px',
   overflow: 'hidden',
   whiteSpace: 'normal',
-  textAlign: 'center'
-}, ownerState.label && {
-  flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'
-}, {
-  lineHeight: 1.25
-}, ownerState.icon && ownerState.label && {
-  minHeight: 72,
-  paddingTop: 9,
-  paddingBottom: 9,
-  [`& > .${tabClasses.iconWrapper}`]: _extends({}, ownerState.iconPosition === 'top' && {
-    marginBottom: 6
-  }, ownerState.iconPosition === 'bottom' && {
-    marginTop: 6
-  }, ownerState.iconPosition === 'start' && {
-    marginRight: theme.spacing(1)
-  }, ownerState.iconPosition === 'end' && {
-    marginLeft: theme.spacing(1)
-  })
-}, ownerState.textColor === 'inherit' && {
-  color: 'inherit',
-  opacity: 0.6,
-  // same opacity as theme.palette.text.secondary
-  [`&.${tabClasses.selected}`]: {
-    opacity: 1
-  },
-  [`&.${tabClasses.disabled}`]: {
-    opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.textColor === 'primary' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${tabClasses.selected}`]: {
-    color: (theme.vars || theme).palette.primary.main
-  },
-  [`&.${tabClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.textColor === 'secondary' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${tabClasses.selected}`]: {
-    color: (theme.vars || theme).palette.secondary.main
-  },
-  [`&.${tabClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.fullWidth && {
-  flexShrink: 1,
-  flexGrow: 1,
-  flexBasis: 0,
-  maxWidth: 'none'
-}, ownerState.wrapped && {
-  fontSize: theme.typography.pxToRem(12)
+  textAlign: 'center',
+  lineHeight: 1.25,
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.label && (ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom'),
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.label && ownerState.iconPosition !== 'top' && ownerState.iconPosition !== 'bottom',
+    style: {
+      flexDirection: 'row'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.icon && ownerState.label,
+    style: {
+      minHeight: 72,
+      paddingTop: 9,
+      paddingBottom: 9
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'top',
+    style: {
+      [`& > .${tabClasses.iconWrapper}`]: {
+        marginBottom: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'bottom',
+    style: {
+      [`& > .${tabClasses.iconWrapper}`]: {
+        marginTop: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'start',
+    style: {
+      [`& > .${tabClasses.iconWrapper}`]: {
+        marginRight: theme.spacing(1)
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'end',
+    style: {
+      [`& > .${tabClasses.iconWrapper}`]: {
+        marginLeft: theme.spacing(1)
+      }
+    }
+  }, {
+    props: {
+      textColor: 'inherit'
+    },
+    style: {
+      color: 'inherit',
+      opacity: 0.6,
+      // same opacity as theme.palette.text.secondary
+      [`&.${tabClasses.selected}`]: {
+        opacity: 1
+      },
+      [`&.${tabClasses.disabled}`]: {
+        opacity: (theme.vars || theme).palette.action.disabledOpacity
+      }
+    }
+  }, {
+    props: {
+      textColor: 'primary'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      [`&.${tabClasses.selected}`]: {
+        color: (theme.vars || theme).palette.primary.main
+      },
+      [`&.${tabClasses.disabled}`]: {
+        color: (theme.vars || theme).palette.text.disabled
+      }
+    }
+  }, {
+    props: {
+      textColor: 'secondary'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      [`&.${tabClasses.selected}`]: {
+        color: (theme.vars || theme).palette.secondary.main
+      },
+      [`&.${tabClasses.disabled}`]: {
+        color: (theme.vars || theme).palette.text.disabled
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.fullWidth,
+    style: {
+      flexShrink: 1,
+      flexGrow: 1,
+      flexBasis: 0,
+      maxWidth: 'none'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.wrapped,
+    style: {
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }]
 }));
 const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
   const props = useThemeProps({

package/TabScrollButton/TabScrollButton.js

@@ -1,8 +1,8 @@
 'use client';
 
 /* eslint-disable jsx-a11y/aria-role */
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "slots", "slotProps", "direction", "orientation", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -13,10 +13,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 useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTabScrollButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -37,22 +37,26 @@ const TabScrollButtonRoot = styled(ButtonBase, {
     } = props;
     return [styles.root, ownerState.orientation && styles[ownerState.orientation]];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   width: 40,
   flexShrink: 0,
   opacity: 0.8,
   [`&.${tabScrollButtonClasses.disabled}`]: {
     opacity: 0
-  }
-}, ownerState.orientation === 'vertical' && {
-  width: '100%',
-  height: 40,
-  '& svg': {
-    transform: `rotate(${ownerState.isRtl ? -90 : 90}deg)`
-  }
-}));
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      width: '100%',
+      height: 40,
+      '& svg': {
+        transform: 'var(--TabScrollButton-svgRotate)'
+      }
+    }
+  }]
+});
 const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -62,7 +66,8 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
       className,
       slots = {},
       slotProps = {},
-      direction
+      direction,
+      orientation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isRtl = useRtl();
@@ -96,6 +101,9 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     ownerState: ownerState,
     tabIndex: null
   }, other, {
+    style: _extends({}, other.style, orientation === 'vertical' && {
+      '--TabScrollButton-svgRotate': `rotate(${isRtl ? -90 : 90}deg)`
+    }),
     children: direction === 'left' ? /*#__PURE__*/_jsx(StartButtonIcon, _extends({}, startButtonIconProps)) : /*#__PURE__*/_jsx(EndButtonIcon, _extends({}, endButtonIconProps))
   }));
 });
@@ -146,6 +154,10 @@ process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-prop
     EndScrollButtonIcon: PropTypes.elementType,
     StartScrollButtonIcon: PropTypes.elementType
   }),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Table/Table.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import TableContext from './TableContext';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableUtilityClass } from './tableClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTable');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/TableBody/TableBody.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableBodyUtilityClass } from './tableBodyClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableBody');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/TableCell/TableCell.js

@@ -11,10 +11,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 useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import tableCellClasses, { getTableCellUtilityClass } from './tableCellClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableCell');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/TableContainer/TableContainer.js

@@ -7,10 +7,10 @@ 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, createUseThemeProps } from '../zero-styled';
 import { getTableContainerUtilityClass } from './tableContainerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableContainer');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/TableFooter/TableFooter.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableFooterUtilityClass } from './tableFooterClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableFooter');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/TableHead/TableHead.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableHeadUtilityClass } from './tableHeadClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableHead');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/TablePagination/TablePagination.js

@@ -11,8 +11,7 @@ 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 from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import InputBase from '../InputBase';
 import MenuItem from '../MenuItem';
 import Select from '../Select';
@@ -23,6 +22,7 @@ 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',

package/TableRow/TableRow.js

@@ -9,10 +9,10 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import tableRowClasses, { getTableRowUtilityClass } from './tableRowClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableRow');
 const useUtilityClasses = ownerState => {
   const {
     classes,