@mui/material 5.6.0 → 5.6.3

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.0
+/** @license MUI v5.6.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -1628,7 +1628,7 @@
   };
 
   {
-    var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
+    var contentValuePattern = /(var|attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
     var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
     var oldProcessStyleValue = processStyleValue;
     var msPattern = /^-ms-/;
@@ -2042,7 +2042,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.8.2",
+  	version: "11.9.0",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -2071,7 +2071,7 @@
   		"@babel/runtime": "^7.13.10",
   		"@emotion/babel-plugin": "^11.7.1",
   		"@emotion/cache": "^11.7.1",
-  		"@emotion/serialize": "^1.0.2",
+  		"@emotion/serialize": "^1.0.3",
   		"@emotion/utils": "^1.1.0",
   		"@emotion/weak-memoize": "^0.2.5",
   		"hoist-non-react-statics": "^3.3.1"
@@ -2090,7 +2090,7 @@
   	},
   	devDependencies: {
   		"@babel/core": "^7.13.10",
-  		"@emotion/css": "11.7.1",
+  		"@emotion/css": "11.9.0",
   		"@emotion/css-prettifier": "1.0.1",
   		"@emotion/server": "11.4.0",
   		"@emotion/styled": "11.8.1",
@@ -5706,9 +5706,24 @@
   function getPath(obj, path) {
     if (!path || typeof path !== 'string') {
       return null;
+    } // Check if CSS variables are used
+
+
+    if (obj && obj.vars) {
+      const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+
+      if (val != null) {
+        return val;
+      }
     }
 
-    return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+    return path.split('.').reduce((acc, item) => {
+      if (acc && acc[item] != null) {
+        return acc[item];
+      }
+
+      return null;
+    }, obj);
   }
 
   function getValue$1(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
@@ -5847,7 +5862,9 @@
   const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
   const spacingKeys = [...marginKeys, ...paddingKeys];
   function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-    const themeSpacing = getPath(theme, themeKey) || defaultValue;
+    var _getPath;
+
+    const themeSpacing = (_getPath = getPath(theme, themeKey)) != null ? _getPath : defaultValue;
 
     if (typeof themeSpacing === 'number') {
       return abs => {
@@ -6834,30 +6851,6 @@
         theme: theme
       }, other));
     });
-    Box.propTypes
-    /* remove-proptypes */
-    = {
-      // ----------------------------- Warning --------------------------------
-      // | These PropTypes are generated from the TypeScript type definitions |
-      // |     To update them edit the d.ts file and run "yarn proptypes"     |
-      // ----------------------------------------------------------------------
-
-      /**
-       * @ignore
-       */
-      children: PropTypes.node,
-
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component: PropTypes.elementType,
-
-      /**
-       * @ignore
-       */
-      sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
-    } ;
     return Box;
   }
 
@@ -7468,7 +7461,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  ThemeProvider.propTypes = {
+  ThemeProvider.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
     /**
      * Your component tree.
      */
@@ -7477,7 +7477,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     /**
      * A theme object. You can provide a function to extend the outer theme.
      */
-    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+    theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
   } ;
 
   {
@@ -9434,14 +9434,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return result;
   }
 
-  function getBadgeUtilityClass$1(slot) {
+  function getBadgeUnstyledUtilityClass(slot) {
     return generateUtilityClass('BaseBadge', slot);
   }
   generateUtilityClasses('BaseBadge', ['root', 'badge', 'invisible']);
 
   const _excluded$2d = ["badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero"];
 
-  const useUtilityClasses$1O = ownerState => {
+  const useUtilityClasses$1P = ownerState => {
     const {
       invisible
     } = ownerState;
@@ -9449,7 +9449,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       root: ['root'],
       badge: ['badge', invisible && 'invisible']
     };
-    return composeClasses(slots, getBadgeUtilityClass$1, undefined);
+    return composeClasses(slots, getBadgeUnstyledUtilityClass, undefined);
   };
 
   const BadgeUnstyled = /*#__PURE__*/React__namespace.forwardRef(function BadgeUnstyled(props, ref) {
@@ -9480,7 +9480,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       showZero
     });
 
-    const classes = useUtilityClasses$1O(ownerState);
+    const classes = useUtilityClasses$1P(ownerState);
     const Root = component || components.Root || 'span';
     const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
     const Badge = components.Badge || 'span';
@@ -9577,7 +9577,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Click Away Listener](https://mui.com/base/react-click-away-listener/)
+   * - [Click away listener](https://mui.com/base/react-click-away-listener/)
    *
    * API:
    *
@@ -12732,7 +12732,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   const _excluded$2b = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
 
-  const useUtilityClasses$1N = ownerState => {
+  const useUtilityClasses$1O = ownerState => {
     const {
       open,
       exited,
@@ -12758,12 +12758,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   /**
    * Modal is a lower-level construct that is leveraged by the following components:
    *
-   * - [Dialog](/api/dialog/)
-   * - [Drawer](/api/drawer/)
-   * - [Menu](/api/menu/)
-   * - [Popover](/api/popover/)
+   * - [Dialog](/material-ui/api/dialog/)
+   * - [Drawer](/material-ui/api/drawer/)
+   * - [Menu](/material-ui/api/menu/)
+   * - [Popover](/material-ui/api/popover/)
    *
-   * If you are creating a modal dialog, you probably want to use the [Dialog](/api/dialog/) component
+   * If you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component
    * rather than directly using Modal.
    *
    * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
@@ -12879,7 +12879,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       keepMounted
     });
 
-    const classes = useUtilityClasses$1N(ownerState);
+    const classes = useUtilityClasses$1O(ownerState);
 
     if (!keepMounted && !open && (!hasTransition || exited)) {
       return null;
@@ -13121,6 +13121,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     /**
      * Callback fired when the backdrop is clicked.
+     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
      */
     onBackdropClick: PropTypes.func,
 
@@ -13954,7 +13955,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   const Identity = x => x;
 
-  const useUtilityClasses$1M = ownerState => {
+  const useUtilityClasses$1N = ownerState => {
     const {
       disabled,
       dragging,
@@ -14070,7 +14071,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const Input = components.Input || 'input';
     const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
     const hiddenInputProps = getHiddenInputProps();
-    const classes = useUtilityClasses$1M(ownerState);
+    const classes = useUtilityClasses$1N(ownerState);
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, getRootProps({
       onMouseDown
     }), {
@@ -15618,7 +15619,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$23 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 
-  const useUtilityClasses$1L = ownerState => {
+  const useUtilityClasses$1M = ownerState => {
     const {
       color,
       fontSize,
@@ -15703,7 +15704,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       more.viewBox = viewBox;
     }
 
-    const classes = useUtilityClasses$1L(ownerState);
+    const classes = useUtilityClasses$1M(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -15745,7 +15746,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
      * @default 'inherit'
      */
@@ -16840,7 +16841,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$22 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 
-  const useUtilityClasses$1K = ownerState => {
+  const useUtilityClasses$1L = ownerState => {
     const {
       orientation,
       classes
@@ -16911,7 +16912,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }));
   /**
    * The Collapse transition is used by the
-   * [Vertical Stepper](/components/steppers/#vertical-stepper) StepContent component.
+   * [Vertical Stepper](/material-ui/react-stepper/#vertical-stepper) StepContent component.
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
 
@@ -16948,7 +16949,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       collapsedSize: collapsedSizeProp
     });
 
-    const classes = useUtilityClasses$1K(ownerState);
+    const classes = useUtilityClasses$1L(ownerState);
     const theme = useTheme();
     const timer = React__namespace.useRef();
     const wrapperRef = React__namespace.useRef(null);
@@ -17262,7 +17263,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return (alphaValue / 100).toFixed(2);
   };
 
-  const useUtilityClasses$1J = ownerState => {
+  const useUtilityClasses$1K = ownerState => {
     const {
       square,
       elevation,
@@ -17322,7 +17323,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1J(ownerState);
+    const classes = useUtilityClasses$1K(ownerState);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -17429,7 +17430,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$20 = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
 
-  const useUtilityClasses$1I = ownerState => {
+  const useUtilityClasses$1J = ownerState => {
     const {
       classes,
       square,
@@ -17573,7 +17574,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       expanded
     });
 
-    const classes = useUtilityClasses$1I(ownerState);
+    const classes = useUtilityClasses$1J(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17677,7 +17678,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Collapse
      */
     TransitionComponent: PropTypes.elementType,
@@ -17698,7 +17699,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1$ = ["className", "disableSpacing"];
 
-  const useUtilityClasses$1H = ownerState => {
+  const useUtilityClasses$1I = ownerState => {
     const {
       classes,
       disableSpacing
@@ -17746,7 +17747,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableSpacing
     });
 
-    const classes = useUtilityClasses$1H(ownerState);
+    const classes = useUtilityClasses$1I(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionActionsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17797,7 +17798,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1_ = ["className"];
 
-  const useUtilityClasses$1G = ownerState => {
+  const useUtilityClasses$1H = ownerState => {
     const {
       classes
     } = ownerState;
@@ -17828,7 +17829,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$1_);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1G(ownerState);
+    const classes = useUtilityClasses$1H(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -18301,7 +18302,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1Y = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 
-  const useUtilityClasses$1F = ownerState => {
+  const useUtilityClasses$1G = ownerState => {
     const {
       disabled,
       focusVisible,
@@ -18603,7 +18604,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       focusVisible
     });
 
-    const classes = useUtilityClasses$1F(ownerState);
+    const classes = useUtilityClasses$1G(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
       className: clsx(classes.root, className),
@@ -18839,7 +18840,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1X = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
 
-  const useUtilityClasses$1E = ownerState => {
+  const useUtilityClasses$1F = ownerState => {
     const {
       classes,
       expanded,
@@ -18960,7 +18961,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableGutters
     });
 
-    const classes = useUtilityClasses$1E(ownerState);
+    const classes = useUtilityClasses$1F(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionSummaryRoot, _extends({
       focusRipple: false,
       disableRipple: true,
@@ -19048,7 +19049,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1W = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 
-  const useUtilityClasses$1D = ownerState => {
+  const useUtilityClasses$1E = ownerState => {
     const {
       classes,
       disabled,
@@ -19126,7 +19127,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }));
   /**
-   * Refer to the [Icons](/components/icons/) section of the documentation
+   * Refer to the [Icons](/material-ui/icons/) section of the documentation
    * regarding the available icon options.
    */
 
@@ -19155,7 +19156,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1D(ownerState);
+    const classes = useUtilityClasses$1E(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconButtonRoot, _extends({
       className: clsx(classes.root, className),
       centerRipple: true,
@@ -19201,7 +19202,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -19278,7 +19279,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1V = ["action", "children", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
 
-  const useUtilityClasses$1C = ownerState => {
+  const useUtilityClasses$1D = ownerState => {
     const {
       variant,
       color,
@@ -19402,7 +19403,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1C(ownerState);
+    const classes = useUtilityClasses$1D(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AlertRoot, _extends({
       role: role,
       elevation: 0,
@@ -19468,7 +19469,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Override the default label for the *close popup* icon button.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Close'
      */
     closeText: PropTypes.string,
@@ -19476,7 +19477,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -19544,7 +19545,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1U = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 
-  const useUtilityClasses$1B = ownerState => {
+  const useUtilityClasses$1C = ownerState => {
     const {
       align,
       gutterBottom,
@@ -19645,7 +19646,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-    const classes = useUtilityClasses$1B(ownerState);
+    const classes = useUtilityClasses$1C(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TypographyRoot, _extends({
       as: Component,
       ref: ref,
@@ -19755,7 +19756,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1T = ["className"];
 
-  const useUtilityClasses$1A = ownerState => {
+  const useUtilityClasses$1B = ownerState => {
     const {
       classes
     } = ownerState;
@@ -19789,7 +19790,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$1T);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1A(ownerState);
+    const classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AlertTitleRoot, _extends({
       gutterBottom: true,
       component: "div",
@@ -19836,7 +19837,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
 
-  const useUtilityClasses$1z = ownerState => {
+  const useUtilityClasses$1A = ownerState => {
     const {
       color,
       position,
@@ -19934,7 +19935,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       enableColorOnDark
     });
 
-    const classes = useUtilityClasses$1z(ownerState);
+    const classes = useUtilityClasses$1A(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
       square: true,
       component: "header",
@@ -19970,7 +19971,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -20007,13 +20008,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * Demos:
    *
-   * - [Autocomplete](https://mui.com/components/autocomplete/)
-   * - [Menus](https://mui.com/components/menus/)
-   * - [Popper](https://mui.com/components/popper/)
+   * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
+   * - [Menus](https://mui.com/material-ui/react-menu/)
+   * - [Popper](https://mui.com/material-ui/react-popper/)
    *
    * API:
    *
-   * - [Popper API](https://mui.com/api/popper/)
+   * - [Popper API](https://mui.com/material-ui/api/popper/)
    */
 
   const Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
@@ -20147,7 +20148,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1R = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
 
-  const useUtilityClasses$1y = ownerState => {
+  const useUtilityClasses$1z = ownerState => {
     const {
       classes,
       color,
@@ -20220,7 +20221,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inset
     });
 
-    const classes = useUtilityClasses$1y(ownerState);
+    const classes = useUtilityClasses$1z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListSubheaderRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -20300,7 +20301,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1Q = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"];
 
-  const useUtilityClasses$1x = ownerState => {
+  const useUtilityClasses$1y = ownerState => {
     const {
       classes,
       disabled,
@@ -20634,7 +20635,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1x(ownerState);
+    const classes = useUtilityClasses$1y(ownerState);
     const moreProps = component === ButtonBase$1 ? _extends({
       component: ComponentProp || 'div',
       focusVisibleClassName: classes.focusVisible
@@ -20735,7 +20736,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -20918,7 +20919,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
   };
 
-  const useUtilityClasses$1w = ownerState => {
+  const useUtilityClasses$1x = ownerState => {
     const {
       classes,
       color,
@@ -21330,7 +21331,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type
     });
 
-    const classes = useUtilityClasses$1w(ownerState);
+    const classes = useUtilityClasses$1x(ownerState);
     const Root = components.Root || InputBaseRoot;
     const rootProps = componentsProps.root || {};
     const Input = components.Input || InputBaseComponent;
@@ -21418,7 +21419,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -21520,7 +21521,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
+     * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -21660,7 +21661,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1O = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
 
-  const useUtilityClasses$1v = ownerState => {
+  const useUtilityClasses$1w = ownerState => {
     const {
       classes,
       disablePortal,
@@ -22083,7 +22084,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1v(ownerState);
+    const classes = useUtilityClasses$1w(ownerState);
     let startAdornment;
 
     if (multiple && value.length > 0) {
@@ -22284,7 +22285,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]),
 
     /**
-     * Props applied to the [`Chip`](/api/chip/) element.
+     * Props applied to the [`Chip`](/material-ui/api/chip/) element.
      */
     ChipProps: PropTypes.object,
 
@@ -22322,7 +22323,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Override the default text for the *clear* icon button.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Clear'
      */
     clearText: PropTypes.string,
@@ -22330,7 +22331,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Override the default text for the *close popup* icon button.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Close'
      */
     closeText: PropTypes.string,
@@ -22446,6 +22447,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Used to determine the string value for a given option.
      * It's used to fill the input (and the list box options if `renderOption` is not provided).
      *
+     * If used in free solo mode, it must accept both the type of the options and a string.
+     *
      * @param {T} option
      * @returns {string}
      * @default (option) => option.label ?? option
@@ -22524,7 +22527,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Text to display when in a loading state.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Loading…'
      */
     loadingText: PropTypes.node,
@@ -22538,7 +22541,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Text to display when there are no options.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'No options'
      */
     noOptionsText: PropTypes.node,
@@ -22602,7 +22605,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Override the default text for the *open popup* icon button.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Open'
      */
     openText: PropTypes.string,
@@ -22719,7 +22722,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1N = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
 
-  const useUtilityClasses$1u = ownerState => {
+  const useUtilityClasses$1v = ownerState => {
     const {
       classes,
       variant,
@@ -22872,7 +22875,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1u(ownerState);
+    const classes = useUtilityClasses$1v(ownerState);
 
     if (hasImgNotFailing) {
       children = /*#__PURE__*/jsxRuntime_1(AvatarImg, _extends({
@@ -22987,7 +22990,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     medium: null
   };
 
-  const useUtilityClasses$1t = ownerState => {
+  const useUtilityClasses$1u = ownerState => {
     const {
       classes
     } = ownerState;
@@ -23059,7 +23062,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1t(ownerState);
+    const classes = useUtilityClasses$1u(ownerState);
     const children = React__namespace.Children.toArray(childrenProp).filter(child => {
       {
         if (reactIs_2(child)) {
@@ -23186,7 +23189,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   };
   /**
-   * The Fade transition is used by the [Modal](/components/modal/) component.
+   * The Fade transition is used by the [Modal](/material-ui/react-modal/) component.
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
 
@@ -23399,7 +23402,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1K = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 
-  const useUtilityClasses$1s = ownerState => {
+  const useUtilityClasses$1t = ownerState => {
     const {
       classes,
       invisible
@@ -23462,7 +23465,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       invisible
     });
 
-    const classes = useUtilityClasses$1s(ownerState);
+    const classes = useUtilityClasses$1t(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       in: open,
       timeout: transitionDuration
@@ -23570,7 +23573,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
 
-  const extendUtilityClasses$2 = ownerState => {
+  const useUtilityClasses$1s = ownerState => {
     const {
       color,
       anchorOrigin,
@@ -23579,10 +23582,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant,
       classes = {}
     } = ownerState;
-    return {
-      root: clsx(classes.root, 'root'),
-      badge: clsx(classes.badge, getBadgeUtilityClass('badge'), getBadgeUtilityClass(variant), `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]], invisible && getBadgeUtilityClass('invisible'))
+    const slots = {
+      root: ['root'],
+      badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== 'default' && `color${capitalize(color)}`]
     };
+    return composeClasses(slots, getBadgeUtilityClass, classes);
   };
 
   const BadgeRoot = styled$1('span', {
@@ -23763,7 +23767,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = extendUtilityClasses$2(ownerState);
+    const classes = useUtilityClasses$1s(ownerState);
     let displayValue;
 
     if (variant !== 'dot') {
@@ -23848,7 +23852,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -24091,17 +24095,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transition: theme.transitions.create(['color', 'padding-top'], {
       duration: theme.transitions.duration.short
     }),
-    padding: '6px 12px 8px',
+    padding: '0px 12px',
     minWidth: 80,
     maxWidth: 168,
     color: theme.palette.text.secondary,
     flexDirection: 'column',
     flex: '1'
   }, !ownerState.showLabel && !ownerState.selected && {
-    paddingTop: 16
+    paddingTop: 14
+  }, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
+    paddingTop: 0
   }, {
     [`&.${bottomNavigationActionClasses$1.selected}`]: {
-      paddingTop: 6,
       color: theme.palette.primary.main
     }
   }));
@@ -24235,15 +24240,35 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var BottomNavigationAction$1 = BottomNavigationAction;
 
   const defaultTheme = createTheme$1();
-  /**
-   * @ignore - do not document.
-   */
-
   const Box = createBox({
     defaultTheme,
     defaultClassName: 'MuiBox-root',
     generateClassName: ClassNameGenerator$1.generate
   });
+  Box.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    children: PropTypes.node,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
+    /**
+     * 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])
+  } ;
   var Box$1 = Box;
 
   var MoreHorizIcon = createSvgIcon( /*#__PURE__*/jsxRuntime_1("path", {
@@ -24498,7 +24523,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Override the default label for the expand button.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Show path'
      */
     expandText: PropTypes.string,
@@ -24851,7 +24876,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -25149,7 +25174,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -26429,7 +26454,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -26730,7 +26755,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -27119,12 +27144,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   /**
    * Modal is a lower-level construct that is leveraged by the following components:
    *
-   * - [Dialog](/api/dialog/)
-   * - [Drawer](/api/drawer/)
-   * - [Menu](/api/menu/)
-   * - [Popover](/api/popover/)
+   * - [Dialog](/material-ui/api/dialog/)
+   * - [Drawer](/material-ui/api/drawer/)
+   * - [Menu](/material-ui/api/menu/)
+   * - [Popover](/material-ui/api/popover/)
    *
-   * If you are creating a modal dialog, you probably want to use the [Dialog](/api/dialog/) component
+   * If you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component
    * rather than directly using Modal.
    *
    * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
@@ -27215,7 +27240,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     BackdropComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the [`Backdrop`](/api/backdrop/) element.
+     * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
      */
     BackdropProps: PropTypes.object,
 
@@ -27324,6 +27349,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * Callback fired when the backdrop is clicked.
+     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
      */
     onBackdropClick: PropTypes.func,
 
@@ -27697,6 +27723,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * Callback fired when the backdrop is clicked.
+     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
      */
     onBackdropClick: PropTypes.func,
 
@@ -27720,7 +27747,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     PaperComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the [`Paper`](/api/paper/) element.
+     * Props applied to the [`Paper`](/material-ui/api/paper/) element.
      * @default {}
      */
     PaperProps: PropTypes.object,
@@ -27738,7 +27765,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Fade
      */
     TransitionComponent: PropTypes.elementType,
@@ -28458,7 +28485,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }
   /**
-   * The Slide transition is used by the [Drawer](/components/drawers/) component.
+   * The Slide transition is used by the [Drawer](/material-ui/react-drawer/) component.
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
 
@@ -28862,7 +28889,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
   }
   /**
-   * The props of the [Modal](/api/modal/) component are available
+   * The props of the [Modal](/material-ui/api/modal/) component are available
    * when `variant="temporary"` is set.
    */
 
@@ -29018,7 +29045,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     hideBackdrop: PropTypes.bool,
 
     /**
-     * Props applied to the [`Modal`](/api/modal/) element.
+     * Props applied to the [`Modal`](/material-ui/api/modal/) element.
      * @default {}
      */
     ModalProps: PropTypes.object,
@@ -29037,13 +29064,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     open: PropTypes.bool,
 
     /**
-     * Props applied to the [`Paper`](/api/paper/) element.
+     * Props applied to the [`Paper`](/material-ui/api/paper/) element.
      * @default {}
      */
     PaperProps: PropTypes.object,
 
     /**
-     * Props applied to the [`Slide`](/api/slide/) element.
+     * Props applied to the [`Slide`](/material-ui/api/slide/) element.
      */
     SlideProps: PropTypes.object,
 
@@ -29248,7 +29275,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
@@ -29383,7 +29410,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       },
       [`&.${filledInputClasses$1.focused}:after`]: {
-        transform: 'scaleX(1)'
+        // translateX(0) is a workaround for Safari transform scale bug
+        // See https://github.com/mui/material-ui/issues/31766
+        transform: 'scaleX(1) translateX(0)'
       },
       [`&.${filledInputClasses$1.error}:after`]: {
         borderBottomColor: theme.palette.error.main,
@@ -29539,7 +29568,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -29647,7 +29676,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
+     * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -29771,7 +29800,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *  - Input
    *  - InputLabel
    *
-   * You can find one composition example below and more going to [the demos](/components/text-fields/#components).
+   * You can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).
    *
    * ```jsx
    * <FormControl>
@@ -29954,7 +29983,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -30682,7 +30711,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -31260,14 +31289,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   };
   /**
-   * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
-   * Remove this workaround once the Safari bug is fixed.
+   * Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
+   * Remove this workaround once the WebKit bug fix is released.
    */
 
-  const isSafari154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && /version\/15\.[4-9]/i.test(navigator.userAgent);
+  const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
   /**
-   * The Grow transition is used by the [Tooltip](/components/tooltips/) and
-   * [Popover](/components/popover/) components.
+   * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
+   * [Popover](/material-ui/react-popover/) components.
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
 
@@ -31338,7 +31367,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         duration,
         delay
       }), theme.transitions.create('transform', {
-        duration: isSafari154 ? duration : duration * 0.666,
+        duration: isWebKit154 ? duration : duration * 0.666,
         delay,
         easing: transitionTimingFunction
       })].join(',');
@@ -31374,8 +31403,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         duration,
         delay
       }), theme.transitions.create('transform', {
-        duration: isSafari154 ? duration : duration * 0.666,
-        delay: isSafari154 ? delay : delay || duration * 0.333,
+        duration: isWebKit154 ? duration : duration * 0.666,
+        delay: isWebKit154 ? delay : delay || duration * 0.333,
         easing: transitionTimingFunction
       })].join(',');
       node.style.opacity = 0;
@@ -32374,7 +32403,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'inherit'
      */
     color: PropTypes
@@ -33055,7 +33084,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       },
       [`&.${inputClasses$1.focused}:after`]: {
-        transform: 'scaleX(1)'
+        // translateX(0) is a workaround for Safari transform scale bug
+        // See https://github.com/mui/material-ui/issues/31766
+        transform: 'scaleX(1) translateX(0)'
       },
       [`&.${inputClasses$1.error}:after`]: {
         borderBottomColor: theme.palette.error.main,
@@ -33163,7 +33194,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -33263,7 +33294,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
+     * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -33675,7 +33706,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -34062,7 +34093,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -34203,6 +34234,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$10);
 
+    const sxColor = typeof sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color;
     const {
       isFocusVisibleRef,
       onBlur: handleBlurVisible,
@@ -34239,7 +34271,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       // 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,
+      color: (typeof sxColor === 'function' ? sxColor(theme) : sxColor) || color,
       component,
       focusVisible,
       underline,
@@ -34248,6 +34280,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const classes = useUtilityClasses$Q(ownerState);
     return /*#__PURE__*/jsxRuntime_1(LinkRoot, _extends({
+      color: color,
       className: clsx(classes.root, className),
       classes: TypographyClasses,
       component: component,
@@ -34256,9 +34289,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ref: handlerRef,
       ownerState: ownerState,
       variant: variant,
-      sx: [{
+      sx: [...(inProps.color ? [{
         color: colorTransformations[color] || color
-      }, ...(Array.isArray(sx) ? sx : [sx])]
+      }] : []), ...(Array.isArray(sx) ? sx : [sx])]
     }, other));
   });
   Link.propTypes
@@ -34314,7 +34347,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
     /**
-     * `classes` prop applied to the [`Typography`](/api/typography/) element.
+     * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element.
      */
     TypographyClasses: PropTypes.object,
 
@@ -35085,7 +35118,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * If `true`, the list item is focused during the first mount.
      * Focus will also be triggered if the value changes from false to true.
      * @default false
-     * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+     * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
      */
     autoFocus: PropTypes.bool,
 
@@ -35093,7 +35126,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * If `true`, the list item is a button (using `ButtonBase`). Props intended
      * for `ButtonBase` can then be applied to `ListItem`.
      * @default false
-     * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+     * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
      */
     button: PropTypes.bool,
 
@@ -35180,7 +35213,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * If `true`, the component is disabled.
      * @default false
-     * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+     * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
      */
     disabled: PropTypes.bool,
 
@@ -35215,7 +35248,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Use to apply selected styling.
      * @default false
-     * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+     * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
      */
     selected: PropTypes.bool,
 
@@ -35681,7 +35714,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   /**
    * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton.
-   * It's exposed to help customization of the [`Menu`](/api/menu/) component if you
+   * It's exposed to help customization of the [`Menu`](/material-ui/api/menu/) component if you
    * use it separately you need to move focus into the component manually. Once
    * the focus is placed inside the component it is fully keyboard accessible.
    */
@@ -36338,7 +36371,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     open: PropTypes.bool.isRequired,
 
     /**
-     * Props applied to the [`Paper`](/api/paper/) element.
+     * Props applied to the [`Paper`](/material-ui/api/paper/) element.
      * @default {}
      */
     PaperProps: PropTypes
@@ -36371,7 +36404,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Grow
      */
     TransitionComponent: PropTypes.elementType,
@@ -36622,7 +36655,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     disableAutoFocusItem: PropTypes.bool,
 
     /**
-     * Props applied to the [`MenuList`](/api/menu-list/) element.
+     * Props applied to the [`MenuList`](/material-ui/api/menu-list/) element.
      * @default {}
      */
     MenuListProps: PropTypes.object,
@@ -36646,7 +36679,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     PaperProps: PropTypes.object,
 
     /**
-     * `classes` prop applied to the [`Popover`](/api/popover/) element.
+     * `classes` prop applied to the [`Popover`](/material-ui/api/popover/) element.
      */
     PopoverClasses: PropTypes.object,
 
@@ -37813,7 +37846,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -37905,7 +37938,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
+     * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -38394,7 +38427,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -38620,7 +38653,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -38649,7 +38682,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Accepts a function which returns a string value that provides a user-friendly name for the current page.
      * This is important for screen reader users.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
      * @param {number} page The page number to format.
      * @param {bool} selected If true, the current page is selected.
@@ -38984,7 +39017,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -39774,7 +39807,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating.
      * This is important for screen reader users.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @param {number} value The rating label's value to format.
      * @returns {string}
      * @default function defaultLabelText(value) {
@@ -40319,7 +40352,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }
 
-    const items = childrenArray.map(child => {
+    const items = childrenArray.map((child, index, arr) => {
       if (! /*#__PURE__*/React__namespace.isValidElement(child)) {
         return null;
       }
@@ -40354,6 +40387,27 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         foundMatch = true;
       }
 
+      if (child.props.value === undefined) {
+        return /*#__PURE__*/React__namespace.cloneElement(child, {
+          'aria-readonly': true,
+          role: 'option'
+        });
+      }
+
+      const isFirstSelectableElement = () => {
+        if (value) {
+          return selected;
+        }
+
+        const firstSelectableElement = arr.find(item => item.props.value !== undefined && item.props.disabled !== true);
+
+        if (child === firstSelectableElement) {
+          return true;
+        }
+
+        return selected;
+      };
+
       return /*#__PURE__*/React__namespace.cloneElement(child, {
         'aria-selected': selected ? 'true' : 'false',
         onClick: handleItemClick(child),
@@ -40370,7 +40424,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           }
         },
         role: 'option',
-        selected,
+        selected: arr[0].props.value === undefined || arr[0].props.disabled === true ? isFirstSelectableElement() : selected,
         value: undefined,
         // The value is most likely not a valid HTML attribute.
         'data-value': child.props.value // Instead, we provide it as a data attribute.
@@ -40578,7 +40632,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     labelId: PropTypes.string,
 
     /**
-     * Props applied to the [`Menu`](/api/menu/) element.
+     * Props applied to the [`Menu`](/material-ui/api/menu/) element.
      */
     MenuProps: PropTypes.object,
 
@@ -40864,7 +40918,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     inputProps: PropTypes.object,
 
     /**
-     * See [OutlinedInput#label](/api/outlined-input/#props)
+     * See [OutlinedInput#label](/material-ui/api/outlined-input/#props)
      */
     label: PropTypes.node,
 
@@ -40875,7 +40929,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     labelId: PropTypes.string,
 
     /**
-     * Props applied to the [`Menu`](/api/menu/) element.
+     * Props applied to the [`Menu`](/material-ui/api/menu/) element.
      */
     MenuProps: PropTypes.object,
 
@@ -41710,7 +41764,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -42421,7 +42475,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ClickAwayListenerProps: PropTypes.object,
 
     /**
-     * Props applied to the [`SnackbarContent`](/api/snackbar-content/) element.
+     * Props applied to the [`SnackbarContent`](/material-ui/api/snackbar-content/) element.
      */
     ContentProps: PropTypes.object,
 
@@ -42496,7 +42550,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Grow
      */
     TransitionComponent: PropTypes.elementType,
@@ -42535,7 +42589,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   };
   /**
    * The Zoom transition can be used for the floating variant of the
-   * [Button](/components/buttons/#floating-action-buttons) component.
+   * [Button](/material-ui/react-button/#floating-action-buttons) component.
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
 
@@ -43190,7 +43244,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
 
     /**
-     * Props applied to the [`Fab`](/api/fab/) element.
+     * Props applied to the [`Fab`](/material-ui/api/fab/) element.
      * @default {}
      */
     FabProps: PropTypes.object,
@@ -43265,7 +43319,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Zoom
      */
     TransitionComponent: PropTypes.elementType,
@@ -44070,7 +44124,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     PopperComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the [`Popper`](/api/popper/) element.
+     * Props applied to the [`Popper`](/material-ui/api/popper/) element.
      * @default {}
      */
     PopperProps: PropTypes.object,
@@ -44089,7 +44143,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Grow
      */
     TransitionComponent: PropTypes.elementType,
@@ -44313,7 +44367,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     delay: PropTypes.number,
 
     /**
-     * Props applied to the [`Fab`](/api/fab/) component.
+     * Props applied to the [`Fab`](/material-ui/api/fab/) component.
      * @default {}
      */
     FabProps: PropTypes.object,
@@ -44340,7 +44394,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
     /**
-     * `classes` prop applied to the [`Tooltip`](/api/tooltip/) element.
+     * `classes` prop applied to the [`Tooltip`](/material-ui/api/tooltip/) element.
      */
     TooltipClasses: PropTypes.object,
 
@@ -45270,12 +45324,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     optional: PropTypes.node,
 
     /**
-     * The component to render in place of the [`StepIcon`](/api/step-icon/).
+     * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
      */
     StepIconComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the [`StepIcon`](/api/step-icon/) element.
+     * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
      */
     StepIconProps: PropTypes.object,
 
@@ -45691,7 +45745,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Collapse
      */
     TransitionComponent: PropTypes.elementType,
@@ -46804,7 +46858,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -48137,7 +48191,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   });
   TablePaginationActions.propTypes = {
     /**
-     * Props applied to the back arrow [`IconButton`](/api/icon-button/) element.
+     * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) element.
      */
     backIconButtonProps: PropTypes.object,
 
@@ -48149,7 +48203,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Accepts a function which returns a string value that provides a user-friendly name for the current page.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      *
      * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
      * @param {number} page The page number to format.
@@ -48158,7 +48212,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     getItemAriaLabel: PropTypes.func.isRequired,
 
     /**
-     * Props applied to the next arrow [`IconButton`](/api/icon-button/) element.
+     * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
      */
     nextIconButtonProps: PropTypes.object,
 
@@ -48450,7 +48504,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ActionsComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the back arrow [`IconButton`](/api/icon-button/) component.
+     * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
      */
     backIconButtonProps: PropTypes.object,
 
@@ -48486,7 +48540,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Accepts a function which returns a string value that provides a user-friendly name for the current page.
      * This is important for screen reader users.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
      * @returns {string}
      * @default function defaultGetAriaLabel(type) {
@@ -48499,7 +48553,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
      * object.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default function defaultLabelDisplayedRows({ from, to, count }) {
      *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
      * }
@@ -48509,13 +48563,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Customize the rows per page label.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Rows per page:'
      */
     labelRowsPerPage: PropTypes.node,
 
     /**
-     * Props applied to the next arrow [`IconButton`](/api/icon-button/) element.
+     * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
      */
     nextIconButtonProps: PropTypes.object,
 
@@ -48576,7 +48630,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     })]).isRequired),
 
     /**
-     * Props applied to the rows per page [`Select`](/api/select/) element.
+     * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
      * @default {}
      */
     SelectProps: PropTypes.object,
@@ -49949,7 +50003,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     TabIndicatorProps: PropTypes.object,
 
     /**
-     * Props applied to the [`TabScrollButton`](/api/tab-scroll-button/) element.
+     * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
      * @default {}
      */
     TabScrollButtonProps: PropTypes.object,
@@ -50024,12 +50078,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    * It's important to understand that the text field is a simple abstraction
    * on top of the following components:
    *
-   * - [FormControl](/api/form-control/)
-   * - [InputLabel](/api/input-label/)
-   * - [FilledInput](/api/filled-input/)
-   * - [OutlinedInput](/api/outlined-input/)
-   * - [Input](/api/input/)
-   * - [FormHelperText](/api/form-helper-text/)
+   * - [FormControl](/material-ui/api/form-control/)
+   * - [InputLabel](/material-ui/api/input-label/)
+   * - [FilledInput](/material-ui/api/filled-input/)
+   * - [OutlinedInput](/material-ui/api/outlined-input/)
+   * - [Input](/material-ui/api/input/)
+   * - [FormHelperText](/material-ui/api/form-helper-text/)
    *
    * If you wish to alter the props applied to the `input` element, you can do so as follows:
    *
@@ -50226,7 +50280,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -50251,7 +50305,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     error: PropTypes.bool,
 
     /**
-     * Props applied to the [`FormHelperText`](/api/form-helper-text/) element.
+     * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
      */
     FormHelperTextProps: PropTypes.object,
 
@@ -50273,7 +50327,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     id: PropTypes.string,
 
     /**
-     * Props applied to the [`InputLabel`](/api/input-label/) element.
+     * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
      * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
      */
     InputLabelProps: PropTypes.object,
@@ -50285,8 +50339,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * Props applied to the Input element.
-     * It will be a [`FilledInput`](/api/filled-input/),
-     * [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/)
+     * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+     * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
      * component depending on the `variant` prop value.
      */
     InputProps: PropTypes.object,
@@ -50363,14 +50417,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * Render a [`Select`](/api/select/) element while passing the Input element to `Select` as `input` parameter.
+     * Render a [`Select`](/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
      * If this option is set you must pass the options of the select as children.
      * @default false
      */
     select: PropTypes.bool,
 
     /**
-     * Props applied to the [`Select`](/api/select/) element.
+     * Props applied to the [`Select`](/material-ui/api/select/) element.
      */
     SelectProps: PropTypes.object,
 
@@ -50567,7 +50621,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -50846,7 +50900,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes