@mui/material 9.0.0 → 9.0.1

package/Checkbox/Checkbox.js

@@ -158,7 +158,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       slots,
       slotProps: {
         input: (0, _utils.mergeSlotProps)(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
-          'data-indeterminate': indeterminate
+          'data-indeterminate': indeterminate,
+          'aria-checked': indeterminate ? 'mixed' : undefined
         })
       }
     }

package/Checkbox/Checkbox.mjs

@@ -151,7 +151,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       slots,
       slotProps: {
         input: mergeSlotProps(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
-          'data-indeterminate': indeterminate
+          'data-indeterminate': indeterminate,
+          'aria-checked': indeterminate ? 'mixed' : undefined
         })
       }
     }

package/CircularProgress/CircularProgress.d.mts

@@ -30,6 +30,16 @@ export interface CircularProgressProps extends StandardProps<React.HTMLAttribute
    * @default false
    */
   enableTrackSlot?: boolean | undefined;
+  /**
+   * The maximum value for the progress indicator for the determinate variant.
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * The minimum value for the progress indicator for the determinate variant.
+   * @default 0
+   */
+  min?: number | undefined;
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
@@ -48,8 +58,8 @@ export interface CircularProgressProps extends StandardProps<React.HTMLAttribute
   thickness?: number | undefined;
   /**
    * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * Value between `min` and `max`.
+   * @default props.min ?? 0
    */
   value?: number | undefined;
   /**

package/CircularProgress/CircularProgress.d.ts

@@ -30,6 +30,16 @@ export interface CircularProgressProps extends StandardProps<React.HTMLAttribute
    * @default false
    */
   enableTrackSlot?: boolean | undefined;
+  /**
+   * The maximum value for the progress indicator for the determinate variant.
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * The minimum value for the progress indicator for the determinate variant.
+   * @default 0
+   */
+  min?: number | undefined;
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
@@ -48,8 +58,8 @@ export interface CircularProgressProps extends StandardProps<React.HTMLAttribute
   thickness?: number | undefined;
   /**
    * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * Value between `min` and `max`.
+   * @default props.min ?? 0
    */
   value?: number | undefined;
   /**

package/CircularProgress/CircularProgress.js

@@ -146,7 +146,7 @@ const CircularProgressCircle = (0, _zeroStyled.styled)('circle', {
       ownerState
     }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
     style: dashAnimation || {
-      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+      // At runtime for Pigment CSS, `dashAnimation` will be null and the generated keyframe will be used.
       animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
     }
   }]
@@ -178,13 +178,22 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     color = 'primary',
     disableShrink = false,
     enableTrackSlot = false,
+    min: minProp,
+    max: maxProp,
     size = 40,
     style,
     thickness = 3.6,
-    value = 0,
+    value = props.min ?? 0,
     variant = 'indeterminate',
     ...other
   } = props;
+  if (process.env.NODE_ENV !== 'production') {
+    if (variant === 'indeterminate' && (minProp !== undefined || maxProp !== undefined)) {
+      console.warn(`MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' variant. These props will have no effect.`);
+    }
+  }
+  const min = minProp ?? 0;
+  const max = maxProp ?? 100;
   const ownerState = {
     ...props,
     color,
@@ -201,10 +210,18 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
   const rootProps = {};
   if (variant === 'determinate') {
     const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
+    if (process.env.NODE_ENV !== 'production') {
+      if (value < min || value > max || min >= max) {
+        console.error(`MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`);
+      }
+    }
+    const range = max - min;
     circleStyle.strokeDasharray = circumference.toFixed(3);
-    rootProps['aria-valuenow'] = Math.round(value);
-    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
+    circleStyle.strokeDashoffset = range > 0 ? `${((max - value) / range * circumference).toFixed(3)}px` : `${circumference.toFixed(3)}px`; // empty-state fallback when range is invalid
     rootStyle.transform = 'rotate(-90deg)';
+    rootProps['aria-valuenow'] = value;
+    rootProps['aria-valuemin'] = min;
+    rootProps['aria-valuemax'] = max;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgressRoot, {
     className: (0, _clsx.default)(classes.root, className),
@@ -282,6 +299,16 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
    * @default false
    */
   enableTrackSlot: _propTypes.default.bool,
+  /**
+   * The maximum value for the progress indicator for the determinate variant.
+   * @default 100
+   */
+  max: _propTypes.default.number,
+  /**
+   * The minimum value for the progress indicator for the determinate variant.
+   * @default 0
+   */
+  min: _propTypes.default.number,
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
@@ -304,8 +331,8 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
   thickness: _propTypes.default.number,
   /**
    * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * Value between `min` and `max`.
+   * @default props.min ?? 0
    */
   value: _propTypes.default.number,
   /**

package/CircularProgress/CircularProgress.mjs

@@ -139,7 +139,7 @@ const CircularProgressCircle = styled('circle', {
       ownerState
     }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
     style: dashAnimation || {
-      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+      // At runtime for Pigment CSS, `dashAnimation` will be null and the generated keyframe will be used.
       animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
     }
   }]
@@ -171,13 +171,22 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     color = 'primary',
     disableShrink = false,
     enableTrackSlot = false,
+    min: minProp,
+    max: maxProp,
     size = 40,
     style,
     thickness = 3.6,
-    value = 0,
+    value = props.min ?? 0,
     variant = 'indeterminate',
     ...other
   } = props;
+  if (process.env.NODE_ENV !== 'production') {
+    if (variant === 'indeterminate' && (minProp !== undefined || maxProp !== undefined)) {
+      console.warn(`MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' variant. These props will have no effect.`);
+    }
+  }
+  const min = minProp ?? 0;
+  const max = maxProp ?? 100;
   const ownerState = {
     ...props,
     color,
@@ -194,10 +203,18 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
   const rootProps = {};
   if (variant === 'determinate') {
     const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
+    if (process.env.NODE_ENV !== 'production') {
+      if (value < min || value > max || min >= max) {
+        console.error(`MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`);
+      }
+    }
+    const range = max - min;
     circleStyle.strokeDasharray = circumference.toFixed(3);
-    rootProps['aria-valuenow'] = Math.round(value);
-    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
+    circleStyle.strokeDashoffset = range > 0 ? `${((max - value) / range * circumference).toFixed(3)}px` : `${circumference.toFixed(3)}px`; // empty-state fallback when range is invalid
     rootStyle.transform = 'rotate(-90deg)';
+    rootProps['aria-valuenow'] = value;
+    rootProps['aria-valuemin'] = min;
+    rootProps['aria-valuemax'] = max;
   }
   return /*#__PURE__*/_jsx(CircularProgressRoot, {
     className: clsx(classes.root, className),
@@ -275,6 +292,16 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
    * @default false
    */
   enableTrackSlot: PropTypes.bool,
+  /**
+   * The maximum value for the progress indicator for the determinate variant.
+   * @default 100
+   */
+  max: PropTypes.number,
+  /**
+   * The minimum value for the progress indicator for the determinate variant.
+   * @default 0
+   */
+  min: PropTypes.number,
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
@@ -297,8 +324,8 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
   thickness: PropTypes.number,
   /**
    * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * Value between `min` and `max`.
+   * @default props.min ?? 0
    */
   value: PropTypes.number,
   /**

package/ClickAwayListener/ClickAwayListener.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ClickAwayListener = ClickAwayListener;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _contains = _interopRequireDefault(require("@mui/utils/contains"));
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
@@ -72,7 +73,7 @@ function ClickAwayListener(props) {
     syntheticEventRef.current = false;
     const doc = (0, _ownerDocument.default)(nodeRef.current);
 
-    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 1. IE 11 support, which trigger the handleClickAway even after the unbind
     // 2. The child might render null.
     // 3. Behave like a blur listener.
     if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
@@ -90,11 +91,7 @@ function ClickAwayListener(props) {
     if (event.composedPath) {
       insideDOM = event.composedPath().includes(nodeRef.current);
     } else {
-      insideDOM = !doc.documentElement.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target) || nodeRef.current.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target);
+      insideDOM = !(0, _contains.default)(doc.documentElement, event.target) || (0, _contains.default)(nodeRef.current, event.target);
     }
     if (!insideDOM && (disableReactTree || !insideReactTree)) {
       onClickAway(event);

package/ClickAwayListener/ClickAwayListener.mjs

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import contains from '@mui/utils/contains';
 import ownerDocument from '@mui/utils/ownerDocument';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -66,7 +67,7 @@ function ClickAwayListener(props) {
     syntheticEventRef.current = false;
     const doc = ownerDocument(nodeRef.current);
 
-    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 1. IE 11 support, which trigger the handleClickAway even after the unbind
     // 2. The child might render null.
     // 3. Behave like a blur listener.
     if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
@@ -84,11 +85,7 @@ function ClickAwayListener(props) {
     if (event.composedPath) {
       insideDOM = event.composedPath().includes(nodeRef.current);
     } else {
-      insideDOM = !doc.documentElement.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target) || nodeRef.current.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target);
+      insideDOM = !contains(doc.documentElement, event.target) || contains(nodeRef.current, event.target);
     }
     if (!insideDOM && (disableReactTree || !insideReactTree)) {
       onClickAway(event);

package/Dialog/Dialog.js

@@ -23,6 +23,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _focusable = require("../utils/focusable");
 var _jsxRuntime = require("react/jsx-runtime");
 const DialogBackdrop = (0, _zeroStyled.styled)(_Backdrop.default, {
   name: 'MuiDialog',
@@ -298,7 +299,16 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
-    className: classes.paper
+    className: classes.paper,
+    additionalProps: {
+      elevation: 24,
+      role,
+      'aria-describedby': ariaDescribedby,
+      'aria-labelledby': ariaLabelledby,
+      'aria-modal': ariaModal,
+      tabIndex: -1,
+      [_focusable.FOCUSABLE_ATTRIBUTE]: ''
+    }
   });
   const [ContainerSlot, containerSlotProps] = (0, _useSlot.default)('container', {
     elementType: DialogContainer,
@@ -340,11 +350,6 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
         ...containerSlotProps,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {
           as: PaperComponent,
-          elevation: 24,
-          role: role,
-          "aria-describedby": ariaDescribedby,
-          "aria-labelledby": ariaLabelledby,
-          "aria-modal": ariaModal,
           ...paperSlotProps,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContext.default.Provider, {
             value: dialogContextValue,

package/Dialog/Dialog.mjs

@@ -16,6 +16,7 @@ import { styled, useTheme } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { FOCUSABLE_ATTRIBUTE } from "../utils/focusable.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DialogBackdrop = styled(Backdrop, {
   name: 'MuiDialog',
@@ -291,7 +292,16 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
-    className: classes.paper
+    className: classes.paper,
+    additionalProps: {
+      elevation: 24,
+      role,
+      'aria-describedby': ariaDescribedby,
+      'aria-labelledby': ariaLabelledby,
+      'aria-modal': ariaModal,
+      tabIndex: -1,
+      [FOCUSABLE_ATTRIBUTE]: ''
+    }
   });
   const [ContainerSlot, containerSlotProps] = useSlot('container', {
     elementType: DialogContainer,
@@ -333,11 +343,6 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
         ...containerSlotProps,
         children: /*#__PURE__*/_jsx(PaperSlot, {
           as: PaperComponent,
-          elevation: 24,
-          role: role,
-          "aria-describedby": ariaDescribedby,
-          "aria-labelledby": ariaLabelledby,
-          "aria-modal": ariaModal,
           ...paperSlotProps,
           children: /*#__PURE__*/_jsx(DialogContext.Provider, {
             value: dialogContextValue,

package/Drawer/Drawer.js

@@ -23,8 +23,10 @@ var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShoul
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _drawerClasses = require("./drawerClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _focusable = require("../utils/focusable");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const overridesResolver = (props, styles) => {
@@ -203,9 +205,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
   const mounted = React.useRef(false);
+  const rootRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(ref, rootRef);
   React.useEffect(() => {
     mounted.current = true;
   }, []);
+
+  // Resolve the container lazily so Slide reads the mounted modal root
+  // after refs are assigned, rather than the initial null ref during render.
+  const resolveSlideContainer = React.useCallback(() => rootRef.current, []);
   const anchorInvariant = getAnchor({
     direction: isRtl ? 'rtl' : 'ltr'
   }, anchorProp);
@@ -229,7 +237,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     }
   };
   const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
-    ref,
+    ref: handleRef,
     elementType: DrawerRoot,
     className: (0, _clsx.default)(classes.root, classes.modal, className),
     shouldForwardComponentProp: true,
@@ -240,6 +248,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       ...ModalProps
     },
     additionalProps: {
+      closeAfterTransition: true,
       open,
       onClose,
       hideBackdrop,
@@ -262,13 +271,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       square: true,
       ...(variant === 'temporary' && {
         role: 'dialog',
-        'aria-modal': 'true'
+        'aria-modal': 'true',
+        [_focusable.FOCUSABLE_ATTRIBUTE]: '',
+        tabIndex: -1
       })
     }
   });
   const [DockedSlot, dockedSlotProps] = (0, _useSlot.default)('docked', {
     elementType: DrawerDockedRoot,
-    ref,
+    ref: handleRef,
     className: (0, _clsx.default)(classes.root, classes.docked, className),
     ownerState,
     externalForwardedProps,
@@ -282,7 +293,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       in: open,
       direction: oppositeDirection[anchorInvariant],
       timeout: transitionDuration,
-      appear: mounted.current
+      appear: mounted.current,
+      ...(variant === 'temporary' && (slots.transition == null || slots.transition === _Slide.default) && {
+        container: resolveSlideContainer
+      })
     }
   });
   const drawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {

package/Drawer/Drawer.mjs

@@ -14,8 +14,10 @@ import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import { styled, useTheme } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import useForkRef from "../utils/useForkRef.mjs";
 import { getDrawerUtilityClass } from "./drawerClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { FOCUSABLE_ATTRIBUTE } from "../utils/focusable.mjs";
 import { mergeSlotProps } from "../utils/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
@@ -194,9 +196,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
   const mounted = React.useRef(false);
+  const rootRef = React.useRef(null);
+  const handleRef = useForkRef(ref, rootRef);
   React.useEffect(() => {
     mounted.current = true;
   }, []);
+
+  // Resolve the container lazily so Slide reads the mounted modal root
+  // after refs are assigned, rather than the initial null ref during render.
+  const resolveSlideContainer = React.useCallback(() => rootRef.current, []);
   const anchorInvariant = getAnchor({
     direction: isRtl ? 'rtl' : 'ltr'
   }, anchorProp);
@@ -220,7 +228,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     }
   };
   const [RootSlot, rootSlotProps] = useSlot('root', {
-    ref,
+    ref: handleRef,
     elementType: DrawerRoot,
     className: clsx(classes.root, classes.modal, className),
     shouldForwardComponentProp: true,
@@ -231,6 +239,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       ...ModalProps
     },
     additionalProps: {
+      closeAfterTransition: true,
       open,
       onClose,
       hideBackdrop,
@@ -253,13 +262,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       square: true,
       ...(variant === 'temporary' && {
         role: 'dialog',
-        'aria-modal': 'true'
+        'aria-modal': 'true',
+        [FOCUSABLE_ATTRIBUTE]: '',
+        tabIndex: -1
       })
     }
   });
   const [DockedSlot, dockedSlotProps] = useSlot('docked', {
     elementType: DrawerDockedRoot,
-    ref,
+    ref: handleRef,
     className: clsx(classes.root, classes.docked, className),
     ownerState,
     externalForwardedProps,
@@ -273,7 +284,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       in: open,
       direction: oppositeDirection[anchorInvariant],
       timeout: transitionDuration,
-      appear: mounted.current
+      appear: mounted.current,
+      ...(variant === 'temporary' && (slots.transition == null || slots.transition === Slide) && {
+        container: resolveSlideContainer
+      })
     }
   });
   const drawer = /*#__PURE__*/_jsx(PaperSlot, {

package/Fab/Fab.js

@@ -194,6 +194,12 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FabRoot, {
     className: (0, _clsx.default)(classes.root, className),
     component: component,
@@ -204,7 +210,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: children
   });
 });

package/Fab/Fab.mjs

@@ -187,6 +187,12 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/_jsx(FabRoot, {
     className: clsx(classes.root, className),
     component: component,
@@ -197,7 +203,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: children
   });
 });

package/FilledInput/FilledInput.d.mts

@@ -20,6 +20,10 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
    * @default false
    */
   disableUnderline?: boolean | undefined;
+  /**
+   * @internal
+   */
+  notched?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/FilledInput/FilledInput.d.ts

@@ -20,6 +20,10 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
    * @default false
    */
   disableUnderline?: boolean | undefined;
+  /**
+   * @internal
+   */
+  notched?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/FilledInput/FilledInput.js

@@ -201,28 +201,20 @@ const FilledInputInput = (0, _zeroStyled.styled)(_InputBase2.InputBaseInput, {
   paddingRight: 12,
   paddingBottom: 8,
   paddingLeft: 12,
-  ...(!theme.vars && {
-    '&:-webkit-autofill': {
+  '&:-webkit-autofill': {
+    ...(!theme.vars && {
       WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
       WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-      caretColor: theme.palette.mode === 'light' ? null : '#fff',
-      borderTopLeftRadius: 'inherit',
-      borderTopRightRadius: 'inherit'
-    }
-  }),
-  ...(theme.vars && {
-    '&:-webkit-autofill': {
-      borderTopLeftRadius: 'inherit',
-      borderTopRightRadius: 'inherit'
-    },
-    [theme.getColorSchemeSelector('dark')]: {
-      '&:-webkit-autofill': {
-        WebkitBoxShadow: '0 0 0 100px #266798 inset',
-        WebkitTextFillColor: '#fff',
-        caretColor: '#fff'
-      }
-    }
-  }),
+      caretColor: theme.palette.mode === 'light' ? null : '#fff'
+    }),
+    borderTopLeftRadius: 'inherit',
+    borderTopRightRadius: 'inherit',
+    ...(theme.vars && theme.applyStyles('dark', {
+      WebkitBoxShadow: '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: '#fff',
+      caretColor: '#fff'
+    }))
+  },
   variants: [{
     props: {
       size: 'small'
@@ -285,6 +277,8 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     // declare here to prevent spreading to DOM
     inputComponent = 'input',
     multiline = false,
+    notched,
+    // declare here to prevent spreading to DOM
     slotProps,
     slots = {},
     type = 'text',
@@ -428,6 +422,10 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    * Name attribute of the `input` element.
    */
   name: _propTypes.default.string,
+  /**
+   * @internal
+   */
+  notched: _propTypes.default.bool,
   /**
    * Callback fired when the value is changed.
    *