@mui/material 5.15.4 → 5.15.6

package/Divider/Divider.d.ts

@@ -30,6 +30,7 @@ export interface DividerOwnProps {
   /**
    * If `true`, the divider will have a lighter color.
    * @default false
+   * @deprecated Use <Divider sx={{ bgcolor: '#eee' }} /> (or any color) instead.
    */
   light?: boolean;
   /**

package/Divider/Divider.js

@@ -221,6 +221,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
   /**
    * If `true`, the divider will have a lighter color.
    * @default false
+   * @deprecated Use <Divider sx={{ bgcolor: '#eee' }} /> (or any color) instead.
    */
   light: PropTypes.bool,
   /**

package/Divider/dividerClasses.d.ts

@@ -7,7 +7,9 @@ export interface DividerClasses {
     inset: string;
     /** Styles applied to the root element if `variant="fullWidth"`. */
     fullWidth: string;
-    /** Styles applied to the root element if `light={true}`. */
+    /** Styles applied to the root element if `light={true}`.
+     * @deprecated
+     */
     light: string;
     /** Styles applied to the root element if `variant="middle"`. */
     middle: string;
@@ -17,7 +19,9 @@ export interface DividerClasses {
     flexItem: string;
     /** Styles applied to the root element if divider have text. */
     withChildren: string;
-    /** Styles applied to the root element if divider have text and `orientation="vertical"`. */
+    /** Styles applied to the root element if divider have text and `orientation="vertical"`.
+     * @deprecated Combine the [.MuiDivider-withChildren](/material-ui/api/divider/#divider-classes-withChildren) and [.MuiDivider-vertical](/material-ui/api/divider/#divider-classes-vertical) classes instead.
+     */
     withChildrenVertical: string;
     /** Styles applied to the root element if `textAlign="right" orientation="horizontal"`. */
     textAlignRight: string;

package/PaginationItem/PaginationItem.js

@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root', `size${capitalize(size)}`, variant, shape, color !== 'standard' && `${variant}${capitalize(color)}`, disabled && 'disabled', selected && 'selected', {
+    root: ['root', `size${capitalize(size)}`, variant, shape, color !== 'standard' && `color${capitalize(color)}`, color !== 'standard' && `${variant}${capitalize(color)}`, disabled && 'disabled', selected && 'selected', {
       page: 'page',
       first: 'firstLast',
       last: 'firstLast',

package/PaginationItem/paginationItemClasses.d.ts

@@ -9,15 +9,27 @@ export interface PaginationItemClasses {
     sizeLarge: string;
     /** Styles applied to the root element if `variant="text"`. */
     text: string;
-    /** Styles applied to the root element if `variant="text"` and `color="primary"`. */
+    /** Styles applied to the root element if `variant="text"` and `color="primary"`.
+     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text)
+     *  and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead.
+     */
     textPrimary: string;
-    /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
+    /** Styles applied to the root element if `variant="text"` and `color="secondary"`.
+     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text)
+     *  and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead.
+     */
     textSecondary: string;
     /** Styles applied to the root element if `variant="outlined"`. */
     outlined: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
+     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined)
+     * and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead.
+     */
     outlinedPrimary: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined)
+     * and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead.
+     */
     outlinedSecondary: string;
     /** Styles applied to the root element if `rounded="true"`. */
     rounded: string;
@@ -35,6 +47,10 @@ export interface PaginationItemClasses {
     selected: string;
     /** Styles applied to the icon to display. */
     icon: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: string;
 }
 export type PaginationItemClassKey = keyof PaginationItemClasses;
 export declare function getPaginationItemUtilityClass(slot: string): string;

package/PaginationItem/paginationItemClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getPaginationItemUtilityClass(slot) {
   return generateUtilityClass('MuiPaginationItem', slot);
 }
-const paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+const paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon', 'colorPrimary', 'colorSecondary']);
 export default paginationItemClasses;

package/README.md

@@ -1,11 +1,11 @@
 <!-- markdownlint-disable-next-line -->
 <p align="center">
-  <a href="https://mui.com/material-ui/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
+  <a href="https://mui.com/material-ui/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
 </p>
 
-<h1 align="center">Material UI</h1>
+<h1 align="center">Material UI</h1>
 
-Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/design/introduction/). It's comprehensive and can be used in production out of the box.
+Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/design/introduction/). It's comprehensive and can be used in production out of the box.
 
 ## Installation
 
@@ -26,13 +26,13 @@ Use the "material-ui" tag on Stack Overflow to make it easier for the community
 
 ## Examples
 
-Our documentation features [a collection of example projects using Material UI](https://mui.com/material-ui/getting-started/example-projects/).
+Our documentation features [a collection of example projects using Material UI](https://mui.com/material-ui/getting-started/example-projects/).
 
 ## Contributing
 
 Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
 
-Contributing to Material UI is about more than just issues and pull requests!
+Contributing to Material UI is about more than just issues and pull requests!
 There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
 
 ## Changelog

package/Rating/Rating.js

@@ -7,7 +7,7 @@ const _excluded = ["value"],
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes, visuallyHidden } from '@mui/utils';
+import { chainPropTypes, visuallyHidden, clamp } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import useTheme from '../styles/useTheme';
 import { capitalize, useForkRef, useIsFocusVisible, useControlled, unstable_useId as useId } from '../utils';
@@ -18,15 +18,6 @@ import styled, { slotShouldForwardProp } from '../styles/styled';
 import ratingClasses, { getRatingUtilityClass } from './ratingClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-}
 function getDecimalPrecision(num) {
   const decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;
@@ -84,6 +75,7 @@ const RatingRoot = styled('span', {
   color: '#faaf00',
   cursor: 'pointer',
   textAlign: 'left',
+  width: 'min-content',
   WebkitTapHighlightColor: 'transparent',
   [`&.${ratingClasses.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,

package/SpeedDial/SpeedDial.js

@@ -10,6 +10,7 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import { clamp } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
@@ -44,15 +45,6 @@ function getOrientation(direction) {
   }
   return undefined;
 }
-function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-}
 const dialRadius = 32;
 const spacingActions = 16;
 const SpeedDialRoot = styled('div', {

package/TablePagination/TablePagination.d.ts

@@ -114,7 +114,7 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    * Use -1 for the value with a custom label to show all the rows.
    * @default [10, 25, 50, 100]
    */
-  rowsPerPageOptions?: Array<number | { value: number; label: string }>;
+  rowsPerPageOptions?: ReadonlyArray<number | { value: number; label: string }>;
   /**
    * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
    *

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.4
+ * @mui/material v5.15.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Accordion/Accordion.js

@@ -17,6 +17,7 @@ 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';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -122,10 +123,13 @@ var Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
     onChange = props.onChange,
     _props$square = props.square,
     square = _props$square === void 0 ? false : _props$square,
-    _props$TransitionComp = props.TransitionComponent,
-    TransitionComponent = _props$TransitionComp === void 0 ? Collapse : _props$TransitionComp,
-    TransitionProps = props.TransitionProps,
-    other = _objectWithoutProperties(props, ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"]);
+    _props$slots = props.slots,
+    slots = _props$slots === void 0 ? {} : _props$slots,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+    TransitionComponentProp = props.TransitionComponent,
+    TransitionPropsProp = props.TransitionProps,
+    other = _objectWithoutProperties(props, ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "slots", "slotProps", "TransitionComponent", "TransitionProps"]);
   var _useControlled = useControlled({
       controlled: expandedProp,
       default: defaultExpanded,
@@ -160,6 +164,24 @@ var Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
     expanded: expanded
   });
   var classes = useUtilityClasses(ownerState);
+  var backwardCompatibleSlots = _extends({
+    transition: TransitionComponentProp
+  }, slots);
+  var backwardCompatibleSlotProps = _extends({
+    transition: TransitionPropsProp
+  }, slotProps);
+  var _useSlot = useSlot('transition', {
+      elementType: Collapse,
+      externalForwardedProps: {
+        slots: backwardCompatibleSlots,
+        slotProps: backwardCompatibleSlotProps
+      },
+      ownerState: ownerState
+    }),
+    _useSlot2 = _slicedToArray(_useSlot, 2),
+    TransitionSlot = _useSlot2[0],
+    transitionProps = _useSlot2[1];
+  delete transitionProps.ownerState;
   return /*#__PURE__*/_jsxs(AccordionRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -169,10 +191,10 @@ var Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
     children: [/*#__PURE__*/_jsx(AccordionContext.Provider, {
       value: contextValue,
       children: summary
-    }), /*#__PURE__*/_jsx(TransitionComponent, _extends({
+    }), /*#__PURE__*/_jsx(TransitionSlot, _extends({
       in: expanded,
       timeout: "auto"
-    }, TransitionProps, {
+    }, transitionProps, {
       children: /*#__PURE__*/_jsx("div", {
         "aria-labelledby": summary.props.id,
         id: summary.props['aria-controls'],
@@ -236,6 +258,20 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    * @param {boolean} expanded The `expanded` state of the accordion.
    */
   onChange: PropTypes.func,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    transition: PropTypes.elementType
+  }),
   /**
    * If `true`, rounded corners are disabled.
    * @default false
@@ -248,12 +284,13 @@ process.env.NODE_ENV !== "production" ? Accordion.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 Collapse
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7.
    */
   TransitionComponent: PropTypes.elementType,
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7.
    */
   TransitionProps: PropTypes.object
 } : void 0;

package/legacy/Alert/Alert.js

@@ -295,7 +295,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
    * The severity of the alert. This defines the color and icon used.
    * @default 'success'
    */
-  severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
+  severity: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.

package/legacy/Avatar/Avatar.js

@@ -30,9 +30,8 @@ var AvatarRoot = styled('div', {
     return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  return _extends({
+  var theme = _ref.theme;
+  return {
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
@@ -45,18 +44,36 @@ var AvatarRoot = styled('div', {
     lineHeight: 1,
     borderRadius: '50%',
     overflow: 'hidden',
-    userSelect: 'none'
-  }, ownerState.variant === 'rounded' && {
-    borderRadius: (theme.vars || theme).shape.borderRadius
-  }, ownerState.variant === 'square' && {
-    borderRadius: 0
-  }, ownerState.colorDefault && _extends({
-    color: (theme.vars || theme).palette.background.default
-  }, theme.vars ? {
-    backgroundColor: theme.vars.palette.Avatar.defaultBg
-  } : {
-    backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-  }));
+    userSelect: 'none',
+    variants: [{
+      props: {
+        variant: 'rounded'
+      },
+      style: {
+        borderRadius: (theme.vars || theme).shape.borderRadius
+      }
+    }, {
+      props: {
+        variant: 'square'
+      },
+      style: {
+        borderRadius: 0
+      }
+    }, {
+      props: {
+        colorDefault: true
+      },
+      style: _extends({
+        color: (theme.vars || theme).palette.background.default
+      }, theme.vars ? {
+        backgroundColor: theme.vars.palette.Avatar.defaultBg
+      } : _extends({
+        backgroundColor: theme.palette.grey[400]
+      }, theme.applyDarkStyles({
+        backgroundColor: theme.palette.grey[600]
+      })))
+    }]
+  };
 });
 var AvatarImg = styled('img', {
   name: 'MuiAvatar',

package/legacy/Badge/Badge.js

@@ -11,7 +11,7 @@ import { usePreviousProps } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { useBadge } from '@mui/base/useBadge';
 import { useSlotProps } from '@mui/base';
-import styled from '../styles/styled';
+import { styled } from '../zero-styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';

package/legacy/Divider/Divider.js

@@ -226,6 +226,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
   /**
    * If `true`, the divider will have a lighter color.
    * @default false
+   * @deprecated Use <Divider sx={{ bgcolor: '#eee' }} /> (or any color) instead.
    */
   light: PropTypes.bool,
   /**

package/legacy/PaginationItem/PaginationItem.js

@@ -34,7 +34,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     type = ownerState.type,
     variant = ownerState.variant;
   var slots = {
-    root: ['root', "size".concat(capitalize(size)), variant, shape, color !== 'standard' && "".concat(variant).concat(capitalize(color)), disabled && 'disabled', selected && 'selected', {
+    root: ['root', "size".concat(capitalize(size)), variant, shape, color !== 'standard' && "color".concat(capitalize(color)), color !== 'standard' && "".concat(variant).concat(capitalize(color)), disabled && 'disabled', selected && 'selected', {
       page: 'page',
       first: 'firstLast',
       last: 'firstLast',

package/legacy/PaginationItem/paginationItemClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getPaginationItemUtilityClass(slot) {
   return generateUtilityClass('MuiPaginationItem', slot);
 }
-var paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+var paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon', 'colorPrimary', 'colorSecondary']);
 export default paginationItemClasses;

package/legacy/Rating/Rating.js

@@ -7,7 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes, visuallyHidden } from '@mui/utils';
+import { chainPropTypes, visuallyHidden, clamp } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import useTheme from '../styles/useTheme';
 import { capitalize, useForkRef, useIsFocusVisible, useControlled, unstable_useId as useId } from '../utils';
@@ -18,15 +18,6 @@ import styled, { slotShouldForwardProp } from '../styles/styled';
 import ratingClasses, { getRatingUtilityClass } from './ratingClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-}
 function getDecimalPrecision(num) {
   var decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;
@@ -78,6 +69,7 @@ var RatingRoot = styled('span', {
     color: '#faaf00',
     cursor: 'pointer',
     textAlign: 'left',
+    width: 'min-content',
     WebkitTapHighlightColor: 'transparent'
   }, "&.".concat(ratingClasses.disabled), {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,

package/legacy/SpeedDial/SpeedDial.js

@@ -9,6 +9,7 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import { clamp } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
@@ -41,15 +42,6 @@ function getOrientation(direction) {
   }
   return undefined;
 }
-function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-}
 var dialRadius = 32;
 var spacingActions = 16;
 var SpeedDialRoot = styled('div', {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.4
+ * @mui/material v5.15.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/styles/createTheme.js

@@ -37,7 +37,19 @@ function createTheme() {
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends({}, zIndex)
+    zIndex: _extends({}, zIndex),
+    applyDarkStyles: function applyDarkStyles(css) {
+      if (this.vars) {
+        // If CssVarsProvider is used as a provider,
+        // returns ':where([data-mui-color-scheme="light|dark"]) &'
+        var selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
+        return _defineProperty({}, selector, css);
+      }
+      if (this.palette.mode === 'dark') {
+        return css;
+      }
+      return {};
+    }
   });
   muiTheme = deepmerge(muiTheme, other);
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

package/legacy/utils/types.js

@@ -0,0 +1 @@
+export {};

package/legacy/utils/useSlot.js

@@ -0,0 +1,71 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { appendOwnerState, resolveComponentProps, mergeSlotProps } from '@mui/base/utils';
+/**
+ * An internal function to create a Material UI slot.
+ *
+ * This is an advanced version of Base UI `useSlotProps` because Material UI allows leaf component to be customized via `component` prop
+ * while Base UI does not need to support leaf component customization.
+ *
+ * @param {string} name: name of the slot
+ * @param {object} parameters
+ * @returns {[Slot, slotProps]} The slot's React component and the slot's props
+ *
+ * Note: the returned slot's props
+ * - will never contain `component` prop.
+ * - might contain `as` prop.
+ */
+export default function useSlot(
+/**
+ * The slot's name. All Material UI components should have `root` slot.
+ *
+ * If the name is `root`, the logic behaves differently from other slots,
+ * e.g. the `externalForwardedProps` are spread to `root` slot but not other slots.
+ */
+name, parameters) {
+  var className = parameters.className,
+    initialElementType = parameters.elementType,
+    ownerState = parameters.ownerState,
+    externalForwardedProps = parameters.externalForwardedProps,
+    getSlotOwnerState = parameters.getSlotOwnerState,
+    internalForwardedProps = parameters.internalForwardedProps,
+    useSlotPropsParams = _objectWithoutProperties(parameters, ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"]);
+  var rootComponent = externalForwardedProps.component,
+    _externalForwardedPro = externalForwardedProps.slots,
+    slots = _externalForwardedPro === void 0 ? _defineProperty({}, name, undefined) : _externalForwardedPro,
+    _externalForwardedPro2 = externalForwardedProps.slotProps,
+    slotProps = _externalForwardedPro2 === void 0 ? _defineProperty({}, name, undefined) : _externalForwardedPro2,
+    other = _objectWithoutProperties(externalForwardedProps, ["component", "slots", "slotProps"]);
+  var elementType = slots[name] || initialElementType;
+
+  // `slotProps[name]` can be a callback that receives the component's ownerState.
+  // `resolvedComponentsProps` is always a plain object.
+  var resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
+  var _mergeSlotProps = mergeSlotProps(_extends({
+      className: className
+    }, useSlotPropsParams, {
+      externalForwardedProps: name === 'root' ? other : undefined,
+      externalSlotProps: resolvedComponentsProps
+    })),
+    _mergeSlotProps$props = _mergeSlotProps.props,
+    slotComponent = _mergeSlotProps$props.component,
+    mergedProps = _objectWithoutProperties(_mergeSlotProps$props, ["component"]),
+    internalRef = _mergeSlotProps.internalRef;
+  var ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, parameters.ref);
+  var slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
+  var finalOwnerState = _extends({}, ownerState, slotOwnerState);
+  var LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
+  var props = appendOwnerState(elementType, _extends({}, name === 'root' && !rootComponent && !slots[name] && internalForwardedProps, name !== 'root' && !slots[name] && internalForwardedProps, mergedProps, LeafComponent && {
+    as: LeafComponent
+  }, {
+    ref: ref
+  }), finalOwnerState);
+  Object.keys(slotOwnerState).forEach(function (propName) {
+    delete props[propName];
+  });
+  return [elementType, props];
+}

package/legacy/zero-styled/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as styled } from '../styles/styled';