@mui/material 5.15.4 → 5.15.6

package/modern/Accordion/Accordion.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
+const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "slots", "slotProps", "TransitionComponent", "TransitionProps"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -15,6 +15,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";
@@ -127,8 +128,10 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
       expanded: expandedProp,
       onChange,
       square = false,
-      TransitionComponent = Collapse,
-      TransitionProps
+      slots = {},
+      slotProps = {},
+      TransitionComponent: TransitionComponentProp,
+      TransitionProps: TransitionPropsProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const [expanded, setExpandedState] = useControlled({
@@ -157,6 +160,21 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     expanded
   });
   const classes = useUtilityClasses(ownerState);
+  const backwardCompatibleSlots = _extends({
+    transition: TransitionComponentProp
+  }, slots);
+  const backwardCompatibleSlotProps = _extends({
+    transition: TransitionPropsProp
+  }, slotProps);
+  const [TransitionSlot, transitionProps] = useSlot('transition', {
+    elementType: Collapse,
+    externalForwardedProps: {
+      slots: backwardCompatibleSlots,
+      slotProps: backwardCompatibleSlotProps
+    },
+    ownerState
+  });
+  delete transitionProps.ownerState;
   return /*#__PURE__*/_jsxs(AccordionRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -166,10 +184,10 @@ const 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'],
@@ -233,6 +251,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
@@ -245,12 +277,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/modern/Alert/Alert.js

@@ -288,7 +288,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/modern/Avatar/Avatar.js

@@ -35,9 +35,8 @@ const AvatarRoot = styled('div', {
     return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
@@ -50,18 +49,36 @@ const 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]
+    })))
+  }]
+}));
 const AvatarImg = styled('img', {
   name: 'MuiAvatar',
   slot: 'Img',

package/modern/Badge/Badge.js

@@ -10,7 +10,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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/styles/createTheme.js

@@ -32,7 +32,21 @@ Please use another name.` : _formatMuiErrorMessage(18));
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends({}, zIndex)
+    zIndex: _extends({}, zIndex),
+    applyDarkStyles(css) {
+      if (this.vars) {
+        // If CssVarsProvider is used as a provider,
+        // returns ':where([data-mui-color-scheme="light|dark"]) &'
+        const selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
+        return {
+          [selector]: css
+        };
+      }
+      if (this.palette.mode === 'dark') {
+        return css;
+      }
+      return {};
+    }
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);

package/modern/utils/types.js

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

package/modern/utils/useSlot.js

@@ -0,0 +1,82 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"],
+  _excluded2 = ["component", "slots", "slotProps"],
+  _excluded3 = ["component"];
+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) {
+  const {
+      className,
+      elementType: initialElementType,
+      ownerState,
+      externalForwardedProps,
+      getSlotOwnerState,
+      internalForwardedProps
+    } = parameters,
+    useSlotPropsParams = _objectWithoutPropertiesLoose(parameters, _excluded);
+  const {
+      component: rootComponent,
+      slots = {
+        [name]: undefined
+      },
+      slotProps = {
+        [name]: undefined
+      }
+    } = externalForwardedProps,
+    other = _objectWithoutPropertiesLoose(externalForwardedProps, _excluded2);
+  const elementType = slots[name] || initialElementType;
+
+  // `slotProps[name]` can be a callback that receives the component's ownerState.
+  // `resolvedComponentsProps` is always a plain object.
+  const resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
+  const _mergeSlotProps = mergeSlotProps(_extends({
+      className
+    }, useSlotPropsParams, {
+      externalForwardedProps: name === 'root' ? other : undefined,
+      externalSlotProps: resolvedComponentsProps
+    })),
+    {
+      props: {
+        component: slotComponent
+      },
+      internalRef
+    } = _mergeSlotProps,
+    mergedProps = _objectWithoutPropertiesLoose(_mergeSlotProps.props, _excluded3);
+  const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.ref);
+  const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
+  const finalOwnerState = _extends({}, ownerState, slotOwnerState);
+  const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
+  const props = appendOwnerState(elementType, _extends({}, name === 'root' && !rootComponent && !slots[name] && internalForwardedProps, name !== 'root' && !slots[name] && internalForwardedProps, mergedProps, LeafComponent && {
+    as: LeafComponent
+  }, {
+    ref
+  }), finalOwnerState);
+  Object.keys(slotOwnerState).forEach(propName => {
+    delete props[propName];
+  });
+  return [elementType, props];
+}

package/modern/zero-styled/index.js

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

package/node/Accordion/Accordion.js

@@ -20,9 +20,10 @@ var _Collapse = _interopRequireDefault(require("../Collapse"));
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _AccordionContext = _interopRequireDefault(require("./AccordionContext"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _accordionClasses = _interopRequireWildcard(require("./accordionClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
+const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "slots", "slotProps", "TransitionComponent", "TransitionProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -134,8 +135,10 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
       expanded: expandedProp,
       onChange,
       square = false,
-      TransitionComponent = _Collapse.default,
-      TransitionProps
+      slots = {},
+      slotProps = {},
+      TransitionComponent: TransitionComponentProp,
+      TransitionProps: TransitionPropsProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [expanded, setExpandedState] = (0, _useControlled.default)({
@@ -164,6 +167,21 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     expanded
   });
   const classes = useUtilityClasses(ownerState);
+  const backwardCompatibleSlots = (0, _extends2.default)({
+    transition: TransitionComponentProp
+  }, slots);
+  const backwardCompatibleSlotProps = (0, _extends2.default)({
+    transition: TransitionPropsProp
+  }, slotProps);
+  const [TransitionSlot, transitionProps] = (0, _useSlot.default)('transition', {
+    elementType: _Collapse.default,
+    externalForwardedProps: {
+      slots: backwardCompatibleSlots,
+      slotProps: backwardCompatibleSlotProps
+    },
+    ownerState
+  });
+  delete transitionProps.ownerState;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccordionRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
@@ -173,10 +191,10 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AccordionContext.default.Provider, {
       value: contextValue,
       children: summary
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, (0, _extends2.default)({
       in: expanded,
       timeout: "auto"
-    }, TransitionProps, {
+    }, transitionProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         "aria-labelledby": summary.props.id,
         id: summary.props['aria-controls'],
@@ -240,6 +258,20 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    * @param {boolean} expanded The `expanded` state of the accordion.
    */
   onChange: _propTypes.default.func,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    transition: _propTypes.default.elementType
+  }),
   /**
    * If `true`, rounded corners are disabled.
    * @default false
@@ -252,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.default.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.default.object
 } : void 0;

package/node/Alert/Alert.js

@@ -296,7 +296,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.default.oneOf(['error', 'info', 'success', 'warning']),
+  severity: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['error', 'info', 'success', 'warning']), _propTypes.default.string]),
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.

package/node/Avatar/Avatar.js

@@ -43,9 +43,8 @@ const AvatarRoot = (0, _styled.default)('div', {
     return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
@@ -58,18 +57,36 @@ const AvatarRoot = (0, _styled.default)('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 && (0, _extends2.default)({
-  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: (0, _extends2.default)({
+      color: (theme.vars || theme).palette.background.default
+    }, theme.vars ? {
+      backgroundColor: theme.vars.palette.Avatar.defaultBg
+    } : (0, _extends2.default)({
+      backgroundColor: theme.palette.grey[400]
+    }, theme.applyDarkStyles({
+      backgroundColor: theme.palette.grey[600]
+    })))
+  }]
+}));
 const AvatarImg = (0, _styled.default)('img', {
   name: 'MuiAvatar',
   slot: 'Img',

package/node/Badge/Badge.js

@@ -15,7 +15,7 @@ var _utils = require("@mui/utils");
 var _composeClasses = require("@mui/base/composeClasses");
 var _useBadge = require("@mui/base/useBadge");
 var _base = require("@mui/base");
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.unstable_composeClasses)(slots, _badgeClasses.getBadgeUtilityClass, classes);
 };
-const BadgeRoot = (0, _styled.default)('span', {
+const BadgeRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiBadge',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -51,7 +51,7 @@ const BadgeRoot = (0, _styled.default)('span', {
   verticalAlign: 'middle',
   flexShrink: 0
 });
-const BadgeBadge = (0, _styled.default)('span', {
+const BadgeBadge = (0, _zeroStyled.styled)('span', {
   name: 'MuiBadge',
   slot: 'Badge',
   overridesResolver: (props, styles) => {

package/node/Divider/Divider.js

@@ -229,6 +229,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.default.bool,
   /**

package/node/PaginationItem/PaginationItem.js

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

package/node/PaginationItem/paginationItemClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getPaginationItemUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPaginationItem', slot);
 }
-const paginationItemClasses = (0, _generateUtilityClasses.default)('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+const paginationItemClasses = (0, _generateUtilityClasses.default)('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon', 'colorPrimary', 'colorSecondary']);
 var _default = exports.default = paginationItemClasses;

package/node/Rating/Rating.js

@@ -25,15 +25,6 @@ const _excluded = ["value"],
   _excluded2 = ["className", "defaultValue", "disabled", "emptyIcon", "emptyLabelText", "getLabelText", "highlightSelectedOnly", "icon", "IconContainerComponent", "max", "name", "onChange", "onChangeActive", "onMouseLeave", "onMouseMove", "precision", "readOnly", "size", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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;
@@ -91,6 +82,7 @@ const RatingRoot = (0, _styled.default)('span', {
   color: '#faaf00',
   cursor: 'pointer',
   textAlign: 'left',
+  width: 'min-content',
   WebkitTapHighlightColor: 'transparent',
   [`&.${_ratingClasses.default.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,
@@ -354,7 +346,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
       percent = (event.clientX - left) / containerWidth;
     }
     let newHover = roundValueToPrecision(max * percent + precision / 2, precision);
-    newHover = clamp(newHover, precision, max);
+    newHover = (0, _utils.clamp)(newHover, precision, max);
     setState(prev => prev.hover === newHover && prev.focus === newHover ? prev : {
       hover: newHover,
       focus: newHover