@mui/material 5.15.13 → 6.0.0-alpha.0

package/Backdrop/Backdrop.d.ts

@@ -5,10 +5,46 @@ import { TransitionProps } from '../transitions/transition';
 import { Theme } from '../styles';
 import { BackdropClasses } from './backdropClasses';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
+export interface BackdropSlots {
+  /**
+   * The component that renders the root.
+   * @default 'div'
+   */
+  root?: React.ElementType;
+  /**
+   * The component that renders the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Fade
+   */
+  transition?: React.JSXElementConstructor<
+    TransitionProps & { children: React.ReactElement<any, any> }
+  >;
+}
 export interface BackdropComponentsPropsOverrides {}
 
-export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>> {
+export interface BackdropTransitionSlotPropsOverrides {}
+
+export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  BackdropSlots,
+  {
+    root: SlotProps<
+      React.ElementType<HTMLDivElement>,
+      BackdropComponentsPropsOverrides,
+      BackdropOwnerState
+    >;
+    transition: SlotProps<
+      React.JSXElementConstructor<TransitionProps>,
+      BackdropTransitionSlotPropsOverrides,
+      BackdropOwnerState
+    >;
+  }
+>;
+
+export interface BackdropOwnProps
+  extends Partial<Omit<FadeProps, 'children'>>,
+    BackdropSlotsAndSlotProps {
   /**
    * The content of the component.
    */
@@ -50,27 +86,6 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>> {
    * If `true`, the component is shown.
    */
   open: boolean;
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
-   * @default {}
-   */
-  slotProps?: {
-    root?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
-  };
-  /**
-   * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
-   * @default {}
-   */
-  slots?: {
-    root?: React.ElementType;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -84,6 +99,7 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>> {
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent?: React.JSXElementConstructor<
     TransitionProps & {
@@ -124,4 +140,6 @@ export type BackdropProps<
   component?: React.ElementType;
 };
 
+export interface BackdropOwnerState extends BackdropProps {}
+
 export default Backdrop;

package/Backdrop/Backdrop.js

@@ -1,17 +1,18 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className", "component", "invisible", "open", "components", "componentsProps", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
+import useSlot from '../utils/useSlot';
 import Fade from '../Fade';
 import { getBackdropUtilityClass } from './backdropClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiBackdrop');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -31,9 +32,7 @@ const BackdropRoot = styled('div', {
     } = props;
     return [styles.root, ownerState.invisible && styles.invisible];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   position: 'fixed',
   display: 'flex',
   alignItems: 'center',
@@ -43,12 +42,17 @@ const BackdropRoot = styled('div', {
   top: 0,
   left: 0,
   backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  WebkitTapHighlightColor: 'transparent'
-}, ownerState.invisible && {
-  backgroundColor: 'transparent'
-}));
+  WebkitTapHighlightColor: 'transparent',
+  variants: [{
+    props: {
+      invisible: true
+    },
+    style: {
+      backgroundColor: 'transparent'
+    }
+  }]
+});
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _slotProps$root, _ref, _slots$root;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiBackdrop'
@@ -57,13 +61,13 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       children,
       className,
       component = 'div',
-      components = {},
-      componentsProps = {},
       invisible = false,
       open,
+      components = {},
+      componentsProps = {},
       slotProps = {},
       slots = {},
-      TransitionComponent = Fade,
+      TransitionComponent: TransitionComponentProp,
       transitionDuration
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -72,17 +76,34 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     invisible
   });
   const classes = useUtilityClasses(ownerState);
-  const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  const backwardCompatibleSlots = _extends({
+    transition: TransitionComponentProp,
+    root: components.Root
+  }, slots);
+  const backwardCompatibleSlotProps = _extends({}, componentsProps, slotProps);
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BackdropRoot,
+    externalForwardedProps,
+    className: clsx(classes.root, className),
+    ownerState
+  });
+  const [TransitionSlot, transitionProps] = useSlot('transition', {
+    elementType: Fade,
+    externalForwardedProps,
+    ownerState
+  });
+  delete transitionProps.ownerState;
+  return /*#__PURE__*/_jsx(TransitionSlot, _extends({
     in: open,
     timeout: transitionDuration
-  }, other, {
-    children: /*#__PURE__*/_jsx(BackdropRoot, _extends({
+  }, other, transitionProps, {
+    children: /*#__PURE__*/_jsx(RootSlot, _extends({
       "aria-hidden": true
-    }, rootSlotProps, {
-      as: (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : component,
-      className: clsx(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
-      ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+    }, rootProps, {
       classes: classes,
       ref: ref,
       children: children
@@ -145,25 +166,20 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    */
   open: PropTypes.bool.isRequired,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
-    root: PropTypes.object
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({
-    root: PropTypes.elementType
+    root: PropTypes.elementType,
+    transition: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -173,6 +189,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent: PropTypes.elementType,
   /**

package/Badge/Badge.js

@@ -13,8 +13,7 @@ import { useSlotProps } from '@mui/base/utils';
 import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 const useThemeProps = createUseThemeProps('MuiBadge');
@@ -55,171 +54,164 @@ const BadgeBadge = styled('span', {
   }
 })(({
   theme
-}) => {
-  var _theme$vars;
-  return {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    alignContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-    boxSizing: 'border-box',
-    fontFamily: theme.typography.fontFamily,
-    fontWeight: theme.typography.fontWeightMedium,
-    fontSize: theme.typography.pxToRem(12),
-    minWidth: RADIUS_STANDARD * 2,
-    lineHeight: 1,
-    padding: '0 6px',
-    height: RADIUS_STANDARD * 2,
-    borderRadius: RADIUS_STANDARD,
-    zIndex: 1,
-    // Render the badge on top of potential ripples.
-    transition: theme.transitions.create('transform', {
-      easing: theme.transitions.easing.easeInOut,
-      duration: theme.transitions.duration.enteringScreen
-    }),
-    variants: [...Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(key => {
-      var _theme$vars2, _theme$vars3;
-      return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main && ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette[key].contrastText;
-    }).map(color => ({
-      props: {
-        color
-      },
-      style: {
-        backgroundColor: (theme.vars || theme).palette[color].main,
-        color: (theme.vars || theme).palette[color].contrastText
-      }
-    })), {
-      props: {
-        variant: 'dot'
-      },
-      style: {
-        borderRadius: RADIUS_DOT,
-        height: RADIUS_DOT * 2,
-        minWidth: RADIUS_DOT * 2,
-        padding: 0
-      }
-    }, {
-      props: ({
-        ownerState
-      }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
-      style: {
-        top: 0,
-        right: 0,
-        transform: 'scale(1) translate(50%, -50%)',
-        transformOrigin: '100% 0%',
-        [`&.${badgeClasses.invisible}`]: {
-          transform: 'scale(0) translate(50%, -50%)'
-        }
-      }
-    }, {
-      props: ({
-        ownerState
-      }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
-      style: {
-        bottom: 0,
-        right: 0,
-        transform: 'scale(1) translate(50%, 50%)',
-        transformOrigin: '100% 100%',
-        [`&.${badgeClasses.invisible}`]: {
-          transform: 'scale(0) translate(50%, 50%)'
-        }
+}) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'center',
+  alignContent: 'center',
+  alignItems: 'center',
+  position: 'absolute',
+  boxSizing: 'border-box',
+  fontFamily: theme.typography.fontFamily,
+  fontWeight: theme.typography.fontWeightMedium,
+  fontSize: theme.typography.pxToRem(12),
+  minWidth: RADIUS_STANDARD * 2,
+  lineHeight: 1,
+  padding: '0 6px',
+  height: RADIUS_STANDARD * 2,
+  borderRadius: RADIUS_STANDARD,
+  zIndex: 1,
+  // Render the badge on top of potential ripples.
+  transition: theme.transitions.create('transform', {
+    easing: theme.transitions.easing.easeInOut,
+    duration: theme.transitions.duration.enteringScreen
+  }),
+  variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main && (theme.vars ?? theme).palette[key].contrastText).map(color => ({
+    props: {
+      color
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette[color].main,
+      color: (theme.vars || theme).palette[color].contrastText
+    }
+  })), {
+    props: {
+      variant: 'dot'
+    },
+    style: {
+      borderRadius: RADIUS_DOT,
+      height: RADIUS_DOT * 2,
+      minWidth: RADIUS_DOT * 2,
+      padding: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
+    style: {
+      top: 0,
+      right: 0,
+      transform: 'scale(1) translate(50%, -50%)',
+      transformOrigin: '100% 0%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(50%, -50%)'
       }
-    }, {
-      props: ({
-        ownerState
-      }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
-      style: {
-        top: 0,
-        left: 0,
-        transform: 'scale(1) translate(-50%, -50%)',
-        transformOrigin: '0% 0%',
-        [`&.${badgeClasses.invisible}`]: {
-          transform: 'scale(0) translate(-50%, -50%)'
-        }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
+    style: {
+      bottom: 0,
+      right: 0,
+      transform: 'scale(1) translate(50%, 50%)',
+      transformOrigin: '100% 100%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(50%, 50%)'
       }
-    }, {
-      props: ({
-        ownerState
-      }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
-      style: {
-        bottom: 0,
-        left: 0,
-        transform: 'scale(1) translate(-50%, 50%)',
-        transformOrigin: '0% 100%',
-        [`&.${badgeClasses.invisible}`]: {
-          transform: 'scale(0) translate(-50%, 50%)'
-        }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
+    style: {
+      top: 0,
+      left: 0,
+      transform: 'scale(1) translate(-50%, -50%)',
+      transformOrigin: '0% 0%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(-50%, -50%)'
       }
-    }, {
-      props: ({
-        ownerState
-      }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
-      style: {
-        top: '14%',
-        right: '14%',
-        transform: 'scale(1) translate(50%, -50%)',
-        transformOrigin: '100% 0%',
-        [`&.${badgeClasses.invisible}`]: {
-          transform: 'scale(0) translate(50%, -50%)'
-        }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
+    style: {
+      bottom: 0,
+      left: 0,
+      transform: 'scale(1) translate(-50%, 50%)',
+      transformOrigin: '0% 100%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(-50%, 50%)'
       }
-    }, {
-      props: ({
-        ownerState
-      }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
-      style: {
-        bottom: '14%',
-        right: '14%',
-        transform: 'scale(1) translate(50%, 50%)',
-        transformOrigin: '100% 100%',
-        [`&.${badgeClasses.invisible}`]: {
-          transform: 'scale(0) translate(50%, 50%)'
-        }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
+    style: {
+      top: '14%',
+      right: '14%',
+      transform: 'scale(1) translate(50%, -50%)',
+      transformOrigin: '100% 0%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(50%, -50%)'
       }
-    }, {
-      props: ({
-        ownerState
-      }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
-      style: {
-        top: '14%',
-        left: '14%',
-        transform: 'scale(1) translate(-50%, -50%)',
-        transformOrigin: '0% 0%',
-        [`&.${badgeClasses.invisible}`]: {
-          transform: 'scale(0) translate(-50%, -50%)'
-        }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
+    style: {
+      bottom: '14%',
+      right: '14%',
+      transform: 'scale(1) translate(50%, 50%)',
+      transformOrigin: '100% 100%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(50%, 50%)'
       }
-    }, {
-      props: ({
-        ownerState
-      }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
-      style: {
-        bottom: '14%',
-        left: '14%',
-        transform: 'scale(1) translate(-50%, 50%)',
-        transformOrigin: '0% 100%',
-        [`&.${badgeClasses.invisible}`]: {
-          transform: 'scale(0) translate(-50%, 50%)'
-        }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
+    style: {
+      top: '14%',
+      left: '14%',
+      transform: 'scale(1) translate(-50%, -50%)',
+      transformOrigin: '0% 0%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(-50%, -50%)'
       }
-    }, {
-      props: {
-        invisible: true
-      },
-      style: {
-        transition: theme.transitions.create('transform', {
-          easing: theme.transitions.easing.easeInOut,
-          duration: theme.transitions.duration.leavingScreen
-        })
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
+    style: {
+      bottom: '14%',
+      left: '14%',
+      transform: 'scale(1) translate(-50%, 50%)',
+      transformOrigin: '0% 100%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(-50%, 50%)'
       }
-    }]
-  };
-});
+    }
+  }, {
+    props: {
+      invisible: true
+    },
+    style: {
+      transition: theme.transitions.create('transform', {
+        easing: theme.transitions.easing.easeInOut,
+        duration: theme.transitions.duration.leavingScreen
+      })
+    }
+  }]
+}));
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiBadge'
@@ -285,10 +277,10 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot;
-  const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge;
-  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge;
+  const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
+  const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
+  const rootSlotProps = slotProps?.root ?? componentsProps.root;
+  const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
   const rootProps = useSlotProps({
     elementType: RootSlot,
     externalSlotProps: rootSlotProps,
@@ -298,13 +290,13 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       as: component
     },
     ownerState,
-    className: clsx(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
+    className: clsx(rootSlotProps?.className, classes.root, className)
   });
   const badgeProps = useSlotProps({
     elementType: BadgeSlot,
     externalSlotProps: badgeSlotProps,
     ownerState,
-    className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
+    className: clsx(classes.badge, badgeSlotProps?.className)
   });
   return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
     children: [children, /*#__PURE__*/_jsx(BadgeSlot, _extends({}, badgeProps, {

package/BottomNavigation/BottomNavigation.js

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