@mui/material 5.5.0 → 5.5.3

package/modern/OutlinedInput/OutlinedInput.js

@@ -178,7 +178,9 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes
@@ -270,7 +272,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * If `true`, a `textarea` element is rendered.
+   * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,

package/modern/Pagination/Pagination.js

@@ -155,6 +155,8 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes
 
   /**
    * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/modern/PaginationItem/PaginationItem.js

@@ -300,6 +300,8 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
 
   /**
    * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/modern/Popper/Popper.js

@@ -1,11 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
-import { HTMLElementType, refType } from '@mui/utils';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
+import { HTMLElementType, refType } from '@mui/utils';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { styled, useThemeProps } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-
+const PopperRoot = styled(PopperUnstyled, {
+  name: 'MuiPopper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
 /**
  *
  * Demos:
@@ -18,9 +23,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * - [Popper API](https://mui.com/api/popper/)
  */
-const Popper = /*#__PURE__*/React.forwardRef(function Popper(props, ref) {
+
+const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   const theme = useTheme();
-  return /*#__PURE__*/_jsx(PopperUnstyled, _extends({
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPopper'
+  });
+  return /*#__PURE__*/_jsx(PopperRoot, _extends({
     direction: theme?.direction
   }, props, {
     ref: ref
@@ -124,6 +134,11 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
    */
   popperRef: refType,
 
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
   /**
    * Help supporting a react-transition-group/Transition component.
    * @default false

package/modern/Radio/Radio.js

@@ -153,7 +153,9 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Slider/Slider.js

@@ -538,7 +538,9 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Snackbar/Snackbar.js

@@ -291,7 +291,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       onMouseLeave: handleMouseLeave,
       ownerState: ownerState,
       ref: ref // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
-      // See https://github.com/mui-org/material-ui/issues/29080
+      // See https://github.com/mui/material-ui/issues/29080
       ,
       role: "presentation"
     }, other, {

package/modern/SvgIcon/SvgIcon.js

@@ -133,7 +133,9 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
    * @default 'inherit'
    */

package/modern/Switch/Switch.js

@@ -256,7 +256,9 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/TextField/TextField.js

@@ -248,7 +248,9 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/ToggleButton/ToggleButton.js

@@ -166,6 +166,8 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
 
   /**
    * The color of the button when it is in an active state.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/modern/ToggleButtonGroup/ToggleButtonGroup.js

@@ -191,7 +191,9 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of a button when it is selected.
+   * The color of the button when it is selected.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/modern/Unstable_TrapFocus/index.js

@@ -1 +1 @@
-export { default } from '@mui/base/Unstable_TrapFocus';
+export { default } from '@mui/base/TrapFocus';

package/modern/index.js

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

package/modern/locale/index.js

@@ -2281,6 +2281,90 @@ export const kzKZ = {
       }
     }
   }
+}; // Macedonian - Македонски
+
+export const mkMK = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Прикажи патека'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Оди на прва страница';
+          }
+
+          if (type === 'last') {
+            return 'Оди на последна страница';
+          }
+
+          if (type === 'next') {
+            return 'Оди на следна страница';
+          } // if (type === 'previous') {
+
+
+          return 'Оди на предходна страница';
+        },
+        labelRowsPerPage: 'Редови по страница:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} од ${count !== -1 ? count : `повеќе од ${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => {
+          const lastDigit = value % 10;
+          return `${value} Ѕвезд${lastDigit === 1 ? 'а' : 'и'}`;
+        },
+        emptyLabelText: 'Празно'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'Избриши',
+        closeText: 'Затвори',
+        loadingText: 'Се презема',
+        noOptionsText: 'Нема опција',
+        openText: 'Отвори'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'Затвори'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Навигација низ страници',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'Оди на '}страница ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'Оди на прва страница';
+          }
+
+          if (type === 'last') {
+            return 'Оди на последна страница';
+          }
+
+          if (type === 'next') {
+            return 'Оди на следна страница';
+          } // if (type === 'previous') {
+
+
+          return 'Оди на предходна страница';
+        }
+      }
+    }
+  }
 };
 export const nbNO = {
   components: {

package/modern/styles/zIndex.js

@@ -2,6 +2,7 @@
 // like global values in the browser.
 const zIndex = {
   mobileStepper: 1000,
+  fab: 1050,
   speedDial: 1050,
   appBar: 1100,
   drawer: 1200,

package/node/Alert/Alert.js

@@ -246,7 +246,9 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   closeText: _propTypes.default.string,
 
   /**
-   * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
+   * The color of the component. Unless provided, the value is taken from the `severity` prop.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    */
   color: _propTypes.default
   /* @typescript-to-proptypes-ignore */

package/node/AppBar/AppBar.js

@@ -166,7 +166,9 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes
   className: _propTypes.default.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: _propTypes.default

package/node/Autocomplete/Autocomplete.js

@@ -799,7 +799,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   disablePortal: _propTypes.default.bool,
 
   /**
-   * A filter function that determines the options that are eligible.
+   * A function that determines the filtered options to be rendered on search.
    *
    * @param {T[]} options The options to render.
    * @param {object} state The state of the component.

package/node/Backdrop/Backdrop.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.backdropClasses = void 0;
+exports.default = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -15,9 +15,9 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _base = require("@mui/base");
+var _clsx = _interopRequireDefault(require("clsx"));
 
-var _BackdropUnstyled = _interopRequireWildcard(require("@mui/base/BackdropUnstyled"));
+var _base = require("@mui/base");
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
@@ -25,22 +25,25 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _Fade = _interopRequireDefault(require("../Fade"));
 
+var _backdropClasses = require("./backdropClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
+const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 
 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 backdropClasses = _BackdropUnstyled.backdropUnstyledClasses;
-exports.backdropClasses = backdropClasses;
-
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    invisible
   } = ownerState;
-  return classes;
+  const slots = {
+    root: ['root', invisible && 'invisible']
+  };
+  return (0, _base.unstable_composeClasses)(slots, _backdropClasses.getBackdropUtilityClass, classes);
 };
 
 const BackdropRoot = (0, _styled.default)('div', {
@@ -69,7 +72,7 @@ const BackdropRoot = (0, _styled.default)('div', {
   backgroundColor: 'transparent'
 }));
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _componentsProps$root;
+  var _components$Root, _componentsProps$root;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -77,6 +80,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   });
   const {
     children,
+    component = 'div',
     components = {},
     componentsProps = {},
     className,
@@ -88,24 +92,19 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, props, {
+    component,
     invisible
   });
-  const classes = extendUtilityClasses(ownerState);
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
     in: open,
     timeout: transitionDuration
   }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BackdropUnstyled.default, {
-      className: className,
-      invisible: invisible,
-      components: (0, _extends2.default)({
-        Root: BackdropRoot
-      }, components),
-      componentsProps: {
-        root: (0, _extends2.default)({}, componentsProps.root, (!components.Root || !(0, _base.isHostComponent)(components.Root)) && {
-          ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
-        })
-      },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropRoot, {
+      "aria-hidden": true,
+      as: (_components$Root = components.Root) != null ? _components$Root : component,
+      className: (0, _clsx.default)(classes.root, className),
+      ownerState: (0, _extends2.default)({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),
       classes: classes,
       ref: ref,
       children: children
@@ -135,6 +134,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    */
   className: _propTypes.default.string,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+
   /**
    * The components used for each slot inside the Backdrop.
    * Either a string to use a HTML element or a component.

package/node/Backdrop/backdropClasses.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getBackdropUtilityClass = getBackdropUtilityClass;
+
+var _base = require("@mui/base");
+
+function getBackdropUtilityClass(slot) {
+  return (0, _base.generateUtilityClass)('MuiBackdrop', slot);
+}
+
+const backdropClasses = (0, _base.generateUtilityClasses)('MuiBackdrop', ['root', 'invisible']);
+var _default = backdropClasses;
+exports.default = _default;

package/node/Backdrop/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 = {
+  backdropClasses: true
+};
+Object.defineProperty(exports, "backdropClasses", {
+  enumerable: true,
+  get: function () {
+    return _backdropClasses.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -11,16 +21,18 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _Backdrop = _interopRequireWildcard(require("./Backdrop"));
+var _Backdrop = _interopRequireDefault(require("./Backdrop"));
+
+var _backdropClasses = _interopRequireWildcard(require("./backdropClasses"));
 
-Object.keys(_Backdrop).forEach(function (key) {
+Object.keys(_backdropClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Backdrop[key]) return;
+  if (key in exports && exports[key] === _backdropClasses[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _Backdrop[key];
+      return _backdropClasses[key];
     }
   });
 });

package/node/Badge/Badge.js

@@ -293,7 +293,9 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   classes: _propTypes.default.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: _propTypes.default

package/node/Button/Button.js

@@ -326,7 +326,9 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
   className: _propTypes.default.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: _propTypes.default

package/node/ButtonBase/ButtonBase.js

@@ -170,11 +170,16 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       buttonRef.current.focus();
     }
   }), []);
+  const [mountedState, setMountedState] = React.useState(false);
+  React.useEffect(() => {
+    setMountedState(true);
+  }, []);
+  const enableTouchRipple = mountedState && !disableRipple && !disabled;
   React.useEffect(() => {
-    if (focusVisible && focusRipple && !disableRipple) {
+    if (focusVisible && focusRipple && !disableRipple && mountedState) {
       rippleRef.current.pulsate();
     }
-  }, [disableRipple, focusRipple, focusVisible]);
+  }, [disableRipple, focusRipple, focusVisible, mountedState]);
 
   function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
     return (0, _useEventCallback.default)(event => {
@@ -318,11 +323,6 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
 
   const handleOwnRef = (0, _useForkRef.default)(focusVisibleRef, buttonRef);
   const handleRef = (0, _useForkRef.default)(ref, handleOwnRef);
-  const [mountedState, setMountedState] = React.useState(false);
-  React.useEffect(() => {
-    setMountedState(true);
-  }, []);
-  const enableTouchRipple = mountedState && !disableRipple && !disabled;
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/node/ButtonGroup/ButtonGroup.js

@@ -228,7 +228,9 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
   className: _propTypes.default.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: _propTypes.default

package/node/Checkbox/Checkbox.js

@@ -159,7 +159,9 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
   classes: _propTypes.default.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: _propTypes.default

package/node/Chip/Chip.js

@@ -474,7 +474,9 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes
   clickable: _propTypes.default.bool,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: _propTypes.default

package/node/CircularProgress/CircularProgress.js

@@ -229,7 +229,9 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes
   className: _propTypes.default.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: _propTypes.default

package/node/Fab/Fab.js

@@ -72,6 +72,7 @@ const FabRoot = (0, _styled.default)(_ButtonBase.default, {
   minWidth: 0,
   width: 56,
   height: 56,
+  zIndex: theme.zIndex.fab,
   boxShadow: theme.shadows[6],
   '&:active': {
     boxShadow: theme.shadows[12]
@@ -197,7 +198,9 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
   className: _propTypes.default.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: _propTypes.default.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),