@mui/material 5.5.3 → 5.6.0

package/node/Badge/Badge.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.badgeClasses = void 0;
+exports.default = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -19,9 +19,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("@mui/utils");
 
-var _base = require("@mui/base");
-
-var _BadgeUnstyled = _interopRequireWildcard(require("@mui/base/BadgeUnstyled"));
+var _BadgeUnstyled = _interopRequireDefault(require("@mui/base/BadgeUnstyled"));
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
@@ -31,17 +29,16 @@ var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shou
 
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
+var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"];
+const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const badgeClasses = (0, _extends2.default)({}, _BadgeUnstyled.badgeUnstyledClasses, (0, _base.generateUtilityClasses)('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
-'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
-exports.badgeClasses = badgeClasses;
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 
@@ -49,12 +46,15 @@ const extendUtilityClasses = ownerState => {
   const {
     color,
     anchorOrigin,
+    invisible,
     overlap,
+    variant,
     classes = {}
   } = ownerState;
-  return (0, _extends2.default)({}, classes, {
-    badge: (0, _clsx.default)(classes.badge, (0, _BadgeUnstyled.getBadgeUtilityClass)(`anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}${(0, _capitalize.default)(overlap)}`), (0, _BadgeUnstyled.getBadgeUtilityClass)(`overlap${(0, _capitalize.default)(overlap)}`), color !== 'default' && [(0, _BadgeUnstyled.getBadgeUtilityClass)(`color${(0, _capitalize.default)(color)}`), classes[`color${(0, _capitalize.default)(color)}`]])
-  });
+  return {
+    root: (0, _clsx.default)(classes.root, 'root'),
+    badge: (0, _clsx.default)(classes.badge, (0, _badgeClasses.getBadgeUtilityClass)('badge'), (0, _badgeClasses.getBadgeUtilityClass)(variant), `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}`, (0, _badgeClasses.getBadgeUtilityClass)(`anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}${(0, _capitalize.default)(overlap)}`), (0, _badgeClasses.getBadgeUtilityClass)(`overlap${(0, _capitalize.default)(overlap)}`), color !== 'default' && [(0, _badgeClasses.getBadgeUtilityClass)(`color${(0, _capitalize.default)(color)}`), classes[`color${(0, _capitalize.default)(color)}`]], invisible && (0, _badgeClasses.getBadgeUtilityClass)('invisible'))
+  };
 };
 
 const BadgeRoot = (0, _styled.default)('span', {
@@ -116,7 +116,7 @@ const BadgeBadge = (0, _styled.default)('span', {
   right: 0,
   transform: 'scale(1) translate(50%, -50%)',
   transformOrigin: '100% 0%',
-  [`&.${badgeClasses.invisible}`]: {
+  [`&.${_badgeClasses.default.invisible}`]: {
     transform: 'scale(0) translate(50%, -50%)'
   }
 }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {
@@ -124,7 +124,7 @@ const BadgeBadge = (0, _styled.default)('span', {
   right: 0,
   transform: 'scale(1) translate(50%, 50%)',
   transformOrigin: '100% 100%',
-  [`&.${badgeClasses.invisible}`]: {
+  [`&.${_badgeClasses.default.invisible}`]: {
     transform: 'scale(0) translate(50%, 50%)'
   }
 }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
@@ -132,7 +132,7 @@ const BadgeBadge = (0, _styled.default)('span', {
   left: 0,
   transform: 'scale(1) translate(-50%, -50%)',
   transformOrigin: '0% 0%',
-  [`&.${badgeClasses.invisible}`]: {
+  [`&.${_badgeClasses.default.invisible}`]: {
     transform: 'scale(0) translate(-50%, -50%)'
   }
 }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
@@ -140,7 +140,7 @@ const BadgeBadge = (0, _styled.default)('span', {
   left: 0,
   transform: 'scale(1) translate(-50%, 50%)',
   transformOrigin: '0% 100%',
-  [`&.${badgeClasses.invisible}`]: {
+  [`&.${_badgeClasses.default.invisible}`]: {
     transform: 'scale(0) translate(-50%, 50%)'
   }
 }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
@@ -148,7 +148,7 @@ const BadgeBadge = (0, _styled.default)('span', {
   right: '14%',
   transform: 'scale(1) translate(50%, -50%)',
   transformOrigin: '100% 0%',
-  [`&.${badgeClasses.invisible}`]: {
+  [`&.${_badgeClasses.default.invisible}`]: {
     transform: 'scale(0) translate(50%, -50%)'
   }
 }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
@@ -156,7 +156,7 @@ const BadgeBadge = (0, _styled.default)('span', {
   right: '14%',
   transform: 'scale(1) translate(50%, 50%)',
   transformOrigin: '100% 100%',
-  [`&.${badgeClasses.invisible}`]: {
+  [`&.${_badgeClasses.default.invisible}`]: {
     transform: 'scale(0) translate(50%, 50%)'
   }
 }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
@@ -164,7 +164,7 @@ const BadgeBadge = (0, _styled.default)('span', {
   left: '14%',
   transform: 'scale(1) translate(-50%, -50%)',
   transformOrigin: '0% 0%',
-  [`&.${badgeClasses.invisible}`]: {
+  [`&.${_badgeClasses.default.invisible}`]: {
     transform: 'scale(0) translate(-50%, -50%)'
   }
 }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
@@ -172,7 +172,7 @@ const BadgeBadge = (0, _styled.default)('span', {
   left: '14%',
   transform: 'scale(1) translate(-50%, 50%)',
   transformOrigin: '0% 100%',
-  [`&.${badgeClasses.invisible}`]: {
+  [`&.${_badgeClasses.default.invisible}`]: {
     transform: 'scale(0) translate(-50%, 50%)'
   }
 }, ownerState.invisible && {
@@ -182,7 +182,7 @@ const BadgeBadge = (0, _styled.default)('span', {
   })
 }));
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
-  var _componentsProps$root, _componentsProps$badg;
+  var _componentsProps$root, _componentsProps$root2, _componentsProps$badg, _componentsProps$badg2;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -193,12 +193,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       vertical: 'top',
       horizontal: 'right'
     },
+    className,
     component = 'span',
     components = {},
     componentsProps = {},
     overlap: overlapProp = 'rectangular',
     color: colorProp = 'default',
     invisible: invisibleProp = false,
+    max,
     badgeContent: badgeContentProp,
     showZero = false,
     variant: variantProp = 'standard'
@@ -207,7 +209,8 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const prevProps = (0, _utils.usePreviousProps)({
     anchorOrigin: anchorOriginProp,
     color: colorProp,
-    overlap: overlapProp
+    overlap: overlapProp,
+    variant: variantProp
   });
   let invisible = invisibleProp;
 
@@ -218,42 +221,55 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const {
     color = colorProp,
     overlap = overlapProp,
-    anchorOrigin = anchorOriginProp
+    anchorOrigin = anchorOriginProp,
+    variant = variantProp
   } = invisible ? prevProps : props;
   const ownerState = (0, _extends2.default)({}, props, {
     anchorOrigin,
     invisible,
     color,
-    overlap
+    overlap,
+    variant
   });
   const classes = extendUtilityClasses(ownerState);
+  let displayValue;
+
+  if (variant !== 'dot') {
+    displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
+  }
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeUnstyled.default, (0, _extends2.default)({
-    anchorOrigin: anchorOrigin,
     invisible: invisibleProp,
-    badgeContent: badgeContentProp,
+    badgeContent: displayValue,
     showZero: showZero,
-    variant: variantProp
+    max: max
   }, other, {
     components: (0, _extends2.default)({
       Root: BadgeRoot,
       Badge: BadgeBadge
     }, components),
+    className: (0, _clsx.default)(className, classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className),
     componentsProps: {
       root: (0, _extends2.default)({}, componentsProps.root, (0, _shouldSpreadAdditionalProps.default)(components.Root) && {
         as: component,
-        ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
+        ownerState: (0, _extends2.default)({}, (_componentsProps$root2 = componentsProps.root) == null ? void 0 : _componentsProps$root2.ownerState, {
+          anchorOrigin,
           color,
-          overlap
+          overlap,
+          variant
         })
       }),
-      badge: (0, _extends2.default)({}, componentsProps.badge, (0, _shouldSpreadAdditionalProps.default)(components.Badge) && {
-        ownerState: (0, _extends2.default)({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
+      badge: (0, _extends2.default)({}, componentsProps.badge, {
+        className: (0, _clsx.default)(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
+      }, (0, _shouldSpreadAdditionalProps.default)(components.Badge) && {
+        ownerState: (0, _extends2.default)({}, (_componentsProps$badg2 = componentsProps.badge) == null ? void 0 : _componentsProps$badg2.ownerState, {
+          anchorOrigin,
           color,
-          overlap
+          overlap,
+          variant
         })
       })
     },
-    classes: classes,
     ref: ref
   }));
 });
@@ -292,6 +308,11 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    */
   classes: _propTypes.default.object,
 
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/node/Badge/badgeClasses.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getBadgeUtilityClass = getBadgeUtilityClass;
+
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/base/generateUtilityClasses"));
+
+var _generateUtilityClass = _interopRequireDefault(require("@mui/base/generateUtilityClass"));
+
+function getBadgeUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiBadge', slot);
+}
+
+const badgeClasses = (0, _generateUtilityClasses.default)('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
+'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
+var _default = badgeClasses;
+exports.default = _default;

package/node/Badge/index.js

@@ -1,9 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  badgeClasses: true
+};
+Object.defineProperty(exports, "badgeClasses", {
+  enumerable: true,
+  get: function () {
+    return _badgeClasses.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -11,16 +21,18 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _Badge = _interopRequireWildcard(require("./Badge"));
+var _Badge = _interopRequireDefault(require("./Badge"));
+
+var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
 
-Object.keys(_Badge).forEach(function (key) {
+Object.keys(_badgeClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Badge[key]) return;
+  if (key in exports && exports[key] === _badgeClasses[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _Badge[key];
+      return _badgeClasses[key];
     }
   });
 });

package/node/Button/Button.js

@@ -89,106 +89,111 @@ const ButtonRoot = (0, _styled.default)(_ButtonBase.default, {
 })(({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, theme.typography.button, {
-  minWidth: 64,
-  padding: '6px 16px',
-  borderRadius: theme.shape.borderRadius,
-  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
-    duration: theme.transitions.duration.short
-  }),
-  '&:hover': (0, _extends2.default)({
-    textDecoration: 'none',
-    backgroundColor: (0, _system.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
+}) => {
+  var _theme$palette$getCon, _theme$palette;
+
+  return (0, _extends2.default)({}, theme.typography.button, {
+    minWidth: 64,
+    padding: '6px 16px',
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+      duration: theme.transitions.duration.short
+    }),
+    '&:hover': (0, _extends2.default)({
+      textDecoration: 'none',
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+      border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'contained' && {
+      backgroundColor: (theme.vars || theme).palette.grey.A100,
+      boxShadow: (theme.vars || theme).shadows[4],
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        boxShadow: (theme.vars || theme).shadows[2],
+        backgroundColor: (theme.vars || theme).palette.grey[300]
+      }
+    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+      }
+    }),
+    '&:active': (0, _extends2.default)({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[8]
+    }),
+    [`&.${_buttonClasses.default.focusVisible}`]: (0, _extends2.default)({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[6]
+    }),
+    [`&.${_buttonClasses.default.disabled}`]: (0, _extends2.default)({
+      color: (theme.vars || theme).palette.action.disabled
+    }, ownerState.variant === 'outlined' && {
+      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+    }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
+      border: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+    }, ownerState.variant === 'contained' && {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    })
+  }, ownerState.variant === 'text' && {
+    padding: '6px 8px'
   }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    backgroundColor: (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
+    color: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.variant === 'outlined' && {
+    padding: '5px 15px',
+    border: '1px solid currentColor'
   }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-    border: `1px solid ${theme.palette[ownerState.color].main}`,
-    backgroundColor: (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${(0, _system.alpha)(theme.palette[ownerState.color].main, 0.5)}`
   }, ownerState.variant === 'contained' && {
-    backgroundColor: theme.palette.grey.A100,
-    boxShadow: theme.shadows[4],
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      boxShadow: theme.shadows[2],
-      backgroundColor: theme.palette.grey[300]
-    }
+    color: theme.vars ? // this is safe because grey does not change between default light/dark mode
+    theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
+    backgroundColor: (theme.vars || theme).palette.grey[300],
+    boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    backgroundColor: theme.palette[ownerState.color].dark,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: theme.palette[ownerState.color].main
-    }
-  }),
-  '&:active': (0, _extends2.default)({}, ownerState.variant === 'contained' && {
-    boxShadow: theme.shadows[8]
-  }),
-  [`&.${_buttonClasses.default.focusVisible}`]: (0, _extends2.default)({}, ownerState.variant === 'contained' && {
-    boxShadow: theme.shadows[6]
-  }),
-  [`&.${_buttonClasses.default.disabled}`]: (0, _extends2.default)({
-    color: theme.palette.action.disabled
-  }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${theme.palette.action.disabledBackground}`
-  }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-    border: `1px solid ${theme.palette.action.disabled}`
-  }, ownerState.variant === 'contained' && {
-    color: theme.palette.action.disabled,
-    boxShadow: theme.shadows[0],
-    backgroundColor: theme.palette.action.disabledBackground
-  })
-}, ownerState.variant === 'text' && {
-  padding: '6px 8px'
-}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].main
-}, ownerState.variant === 'outlined' && {
-  padding: '5px 15px',
-  border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
-}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].main,
-  border: `1px solid ${(0, _system.alpha)(theme.palette[ownerState.color].main, 0.5)}`
-}, ownerState.variant === 'contained' && {
-  color: theme.palette.getContrastText(theme.palette.grey[300]),
-  backgroundColor: theme.palette.grey[300],
-  boxShadow: theme.shadows[2]
-}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].contrastText,
-  backgroundColor: theme.palette[ownerState.color].main
-}, ownerState.color === 'inherit' && {
-  color: 'inherit',
-  borderColor: 'currentColor'
-}, ownerState.size === 'small' && ownerState.variant === 'text' && {
-  padding: '4px 5px',
-  fontSize: theme.typography.pxToRem(13)
-}, ownerState.size === 'large' && ownerState.variant === 'text' && {
-  padding: '8px 11px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-  padding: '3px 9px',
-  fontSize: theme.typography.pxToRem(13)
-}, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
-  padding: '7px 21px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.size === 'small' && ownerState.variant === 'contained' && {
-  padding: '4px 10px',
-  fontSize: theme.typography.pxToRem(13)
-}, ownerState.size === 'large' && ownerState.variant === 'contained' && {
-  padding: '8px 22px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.fullWidth && {
-  width: '100%'
-}), ({
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.color === 'inherit' && {
+    color: 'inherit',
+    borderColor: 'currentColor'
+  }, ownerState.size === 'small' && ownerState.variant === 'text' && {
+    padding: '4px 5px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'text' && {
+    padding: '8px 11px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
+    padding: '3px 9px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
+    padding: '7px 21px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
+    padding: '4px 10px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
+    padding: '8px 22px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.fullWidth && {
+    width: '100%'
+  });
+}, ({
   ownerState
 }) => ownerState.disableElevation && {
   boxShadow: 'none',

package/node/Link/Link.js

@@ -27,6 +27,8 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
+var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _useIsFocusVisible = _interopRequireDefault(require("../utils/useIsFocusVisible"));
@@ -39,7 +41,7 @@ var _linkClasses = _interopRequireWildcard(require("./linkClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"];
+const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -127,6 +129,7 @@ const LinkRoot = (0, _styled.default)(_Typography.default, {
   });
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
+  const theme = (0, _useTheme.default)();
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiLink'
@@ -139,7 +142,8 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     onFocus,
     TypographyClasses,
     underline = 'always',
-    variant = 'inherit'
+    variant = 'inherit',
+    sx
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -176,7 +180,9 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   const ownerState = (0, _extends2.default)({}, props, {
-    color,
+    // It is too complex to support any types of `sx`.
+    // Need to find a better way to get rid of the color manipulation for `textDecorationColor`.
+    color: (typeof sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color) || color,
     component,
     focusVisible,
     underline,
@@ -186,13 +192,15 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     classes: TypographyClasses,
-    color: color,
     component: component,
     onBlur: handleBlur,
     onFocus: handleFocus,
     ref: handlerRef,
     ownerState: ownerState,
-    variant: variant
+    variant: variant,
+    sx: [{
+      color: colorTransformations[color] || color
+    }, ...(Array.isArray(sx) ? sx : [sx])]
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Link.propTypes

package/node/ListItemButton/ListItemButton.js

@@ -84,6 +84,7 @@ const ListItemButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   alignItems: 'center',
   position: 'relative',
   textDecoration: 'none',
+  minWidth: 0,
   boxSizing: 'border-box',
   textAlign: 'left',
   paddingTop: 8,

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.3
+/** @license MUI v5.6.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/locale/index.js

@@ -1066,9 +1066,12 @@ const etEE = {
 
           return 'Vali eelmine lehekülg';
         },
-        labelRowsPerPage: 'Ridu leheküljel:' // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} / ${count !== -1 ? count : `more than ${to}`}`,
-
+        labelRowsPerPage: 'Ridu leheküljel:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} / ${count !== -1 ? count : `rohkem kui ${to}`}`
       }
     },
     MuiRating: {