@mui/material 7.3.7 → 7.3.9

package/AvatarGroup/AvatarGroup.d.ts

@@ -25,12 +25,12 @@ export interface AvatarGroupOwnProps extends AvatarGroupSlotsAndSlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<AvatarGroupClasses>;
+  classes?: Partial<AvatarGroupClasses> | undefined;
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
@@ -40,38 +40,38 @@ export interface AvatarGroupOwnProps extends AvatarGroupSlotsAndSlotProps {
    * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps?: {
-    additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> & AvatarGroupComponentsPropsOverrides;
-  };
+    additionalAvatar?: (React.ComponentPropsWithRef<typeof Avatar> & AvatarGroupComponentsPropsOverrides) | undefined;
+  } | undefined;
   /**
    * Max avatars to show before +x.
    * @default 5
    */
-  max?: number;
+  max?: number | undefined;
   /**
    * custom renderer of extraAvatars
    * @param {number} surplus number of extra avatars
    * @returns {React.ReactNode} custom element to display
    */
-  renderSurplus?: (surplus: number) => React.ReactNode;
+  renderSurplus?: ((surplus: number) => React.ReactNode) | undefined;
   /**
    * Spacing between avatars.
    * @default 'medium'
    */
-  spacing?: 'small' | 'medium' | number;
+  spacing?: 'small' | 'medium' | number | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The total number of avatars. Used for calculating the number of extra avatars.
    * @default children.length
    */
-  total?: number;
+  total?: number | undefined;
   /**
    * The variant to use.
    * @default 'circular'
    */
-  variant?: OverridableStringUnion<'circular' | 'rounded' | 'square', AvatarGroupPropsVariantOverrides>;
+  variant?: OverridableStringUnion<'circular' | 'rounded' | 'square', AvatarGroupPropsVariantOverrides> | undefined;
 }
 export interface AvatarGroupTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & AvatarGroupOwnProps;
@@ -90,7 +90,7 @@ export interface AvatarGroupTypeMap<AdditionalProps = {}, RootComponent extends
  */
 declare const AvatarGroup: OverridableComponent<AvatarGroupTypeMap>;
 export type AvatarGroupProps<RootComponent extends React.ElementType = AvatarGroupTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<AvatarGroupTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export interface AvatarGroupOwnerState extends PartiallyRequired<AvatarGroupProps, 'max' | 'spacing' | 'component' | 'variant'> {}
 export default AvatarGroup;

package/Backdrop/Backdrop.d.ts

@@ -46,8 +46,8 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>>,
    * @default {}
    */
   components?: {
-    Root?: React.ElementType;
-  };
+    Root?: React.ElementType | undefined;
+  } | undefined;
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
@@ -57,18 +57,18 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>>,
    * @default {}
    */
   componentsProps?: {
-    root?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
-  };
+    root?: (React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides) | undefined;
+  } | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<BackdropClasses>;
+  classes?: Partial<BackdropClasses> | undefined;
   /**
    * If `true`, the backdrop is invisible.
    * It can be used when rendering a popover or a custom select component.
    * @default false
    */
-  invisible?: boolean;
+  invisible?: boolean | undefined;
   /**
    * If `true`, the component is shown.
    */
@@ -76,12 +76,12 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>>,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    */
-  transitionDuration?: TransitionProps['timeout'];
+  transitionDuration?: TransitionProps['timeout'] | undefined;
   /**
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
@@ -90,7 +90,7 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>>,
    */
   TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
     children: React.ReactElement<unknown, any>;
-  }>;
+  }> | undefined;
 }
 export interface BackdropTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & BackdropOwnProps;
@@ -112,7 +112,7 @@ export declare const BackdropRoot: React.FC<BackdropRootProps>;
  */
 declare const Backdrop: OverridableComponent<BackdropTypeMap>;
 export type BackdropProps<RootComponent extends React.ElementType = BackdropTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BackdropTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export interface BackdropOwnerState extends BackdropProps {}
 export default Backdrop;

package/Badge/Badge.d.ts

@@ -45,8 +45,8 @@ export type BadgeOwnerState = Simplify<Omit<BadgeOwnProps, 'slotProps' | 'slots'
   variant: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>;
 }>;
 export interface BadgeOrigin {
-  vertical?: 'top' | 'bottom';
-  horizontal?: 'left' | 'right';
+  vertical?: 'top' | 'bottom' | undefined;
+  horizontal?: 'left' | 'right' | undefined;
 }
 export interface BadgeOwnProps extends BadgeSlotsAndSlotProps {
   /**
@@ -56,7 +56,7 @@ export interface BadgeOwnProps extends BadgeSlotsAndSlotProps {
    *   horizontal: 'right',
    * }
    */
-  anchorOrigin?: BadgeOrigin;
+  anchorOrigin?: BadgeOrigin | undefined;
   /**
    * The content rendered within the badge.
    */
@@ -68,18 +68,18 @@ export interface BadgeOwnProps extends BadgeSlotsAndSlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<BadgeClasses>;
+  classes?: Partial<BadgeClasses> | undefined;
   /**
    * @ignore
    */
-  className?: string;
+  className?: string | undefined;
   /**
    * 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/material-ui/customization/palette/#custom-colors).
    * @default 'default'
    */
-  color?: OverridableStringUnion<'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning', BadgePropsColorOverrides>;
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning', BadgePropsColorOverrides> | undefined;
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
@@ -88,7 +88,7 @@ export interface BadgeOwnProps extends BadgeSlotsAndSlotProps {
    *
    * @default {}
    */
-  componentsProps?: BadgeOwnProps['slotProps'];
+  componentsProps?: BadgeOwnProps['slotProps'] | undefined;
   /**
    * The components used for each slot inside.
    *
@@ -97,38 +97,38 @@ export interface BadgeOwnProps extends BadgeSlotsAndSlotProps {
    * @default {}
    */
   components?: {
-    Root?: React.ElementType;
-    Badge?: React.ElementType;
-  };
+    Root?: React.ElementType | undefined;
+    Badge?: React.ElementType | undefined;
+  } | undefined;
   /**
    * If `true`, the badge is invisible.
    * @default false
    */
-  invisible?: boolean;
+  invisible?: boolean | undefined;
   /**
    * Max count to show.
    * @default 99
    */
-  max?: number;
+  max?: number | undefined;
   /**
    * Wrapped shape the badge should overlap.
    * @default 'rectangular'
    */
-  overlap?: 'rectangular' | 'circular';
+  overlap?: 'rectangular' | 'circular' | undefined;
   /**
    * Controls whether the badge is hidden when `badgeContent` is zero.
    * @default false
    */
-  showZero?: boolean;
+  showZero?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The variant to use.
    * @default 'standard'
    */
-  variant?: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>;
+  variant?: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides> | undefined;
 }
 export interface BadgeTypeMap<RootComponent extends React.ElementType = 'span', AdditionalProps = {}> {
   props: AdditionalProps & BadgeOwnProps;
@@ -152,6 +152,6 @@ export declare const BadgeMark: React.FC<BadgeBadgeProps>;
  */
 declare const Badge: OverridableComponent<BadgeTypeMap>;
 export type BadgeProps<RootComponent extends React.ElementType = BadgeTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BadgeTypeMap<RootComponent, AdditionalProps>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Badge;

package/Badge/Badge.js

@@ -100,110 +100,6 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
       minWidth: RADIUS_DOT * 2,
       padding: 0
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
-    style: {
-      top: 0,
-      right: 0,
-      transform: 'scale(1) translate(50%, -50%)',
-      transformOrigin: '100% 0%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
-    style: {
-      bottom: 0,
-      right: 0,
-      transform: 'scale(1) translate(50%, 50%)',
-      transformOrigin: '100% 100%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
-    style: {
-      top: 0,
-      left: 0,
-      transform: 'scale(1) translate(-50%, -50%)',
-      transformOrigin: '0% 0%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(-50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
-    style: {
-      bottom: 0,
-      left: 0,
-      transform: 'scale(1) translate(-50%, 50%)',
-      transformOrigin: '0% 100%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(-50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
-    style: {
-      top: '14%',
-      right: '14%',
-      transform: 'scale(1) translate(50%, -50%)',
-      transformOrigin: '100% 0%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
-    style: {
-      bottom: '14%',
-      right: '14%',
-      transform: 'scale(1) translate(50%, 50%)',
-      transformOrigin: '100% 100%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
-    style: {
-      top: '14%',
-      left: '14%',
-      transform: 'scale(1) translate(-50%, -50%)',
-      transformOrigin: '0% 0%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(-50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
-    style: {
-      bottom: '14%',
-      left: '14%',
-      transform: 'scale(1) translate(-50%, 50%)',
-      transformOrigin: '0% 100%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(-50%, 50%)'
-      }
-    }
   }, {
     props: {
       invisible: true
@@ -214,6 +110,29 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
         duration: theme.transitions.duration.leavingScreen
       })
     }
+  }, {
+    style: ({
+      ownerState
+    }) => {
+      const {
+        vertical,
+        horizontal
+      } = ownerState.anchorOrigin;
+      const offset = ownerState.overlap === 'circular' ? '14%' : 0;
+      return {
+        '--Badge-translateX': horizontal === 'right' ? '50%' : '-50%',
+        '--Badge-translateY': vertical === 'top' ? '-50%' : '50%',
+        top: vertical === 'top' ? offset : 'initial',
+        bottom: vertical === 'bottom' ? offset : 'initial',
+        right: horizontal === 'right' ? offset : 'initial',
+        left: horizontal === 'left' ? offset : 'initial',
+        transform: 'scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))',
+        transformOrigin: `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`,
+        [`&.${_badgeClasses.default.invisible}`]: {
+          transform: 'scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))'
+        }
+      };
+    }
   }]
 })));
 function getAnchorOrigin(anchorOrigin) {

package/Badge/useBadge.types.d.ts

@@ -7,17 +7,17 @@ export interface UseBadgeParameters {
    * If `true`, the badge is invisible.
    * @default false
    */
-  invisible?: boolean;
+  invisible?: boolean | undefined;
   /**
    * Max count to show.
    * @default 99
    */
-  max?: number;
+  max?: number | undefined;
   /**
    * Controls whether the badge is hidden when `badgeContent` is zero.
    * @default false
    */
-  showZero?: boolean;
+  showZero?: boolean | undefined;
 }
 export interface UseBadgeReturnValue {
   /**

package/BottomNavigation/BottomNavigation.d.ts

@@ -11,24 +11,24 @@ export interface BottomNavigationOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<BottomNavigationClasses>;
+  classes?: Partial<BottomNavigationClasses> | undefined;
   /**
    * Callback fired when the value changes.
    *
    * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
    * @param {any} value We default to the index of the child.
    */
-  onChange?: (event: React.SyntheticEvent, value: any) => void;
+  onChange?: ((event: React.SyntheticEvent, value: any) => void) | undefined;
   /**
    * If `true`, all `BottomNavigationAction`s will show their labels.
    * By default, only the selected `BottomNavigationAction` will show its label.
    * @default false
    */
-  showLabels?: boolean;
+  showLabels?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The value of the currently selected `BottomNavigationAction`.
    */
@@ -50,6 +50,6 @@ export interface BottomNavigationTypeMap<AdditionalProps = {}, RootComponent ext
  */
 declare const BottomNavigation: OverridableComponent<BottomNavigationTypeMap>;
 export type BottomNavigationProps<RootComponent extends React.ElementType = BottomNavigationTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BottomNavigationTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default BottomNavigation;

package/BottomNavigationAction/BottomNavigationAction.d.ts

@@ -38,7 +38,7 @@ export interface BottomNavigationActionOwnProps extends BottomNavigationActionSl
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<BottomNavigationActionClasses>;
+  classes?: Partial<BottomNavigationActionClasses> | undefined;
   /**
    * The icon to display.
    */
@@ -54,11 +54,11 @@ export interface BottomNavigationActionOwnProps extends BottomNavigationActionSl
    *
    * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
    */
-  showLabel?: boolean;
+  showLabel?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.
    */
@@ -82,7 +82,7 @@ export type BottomNavigationActionTypeMap<AdditionalProps, RootComponent extends
  */
 declare const BottomNavigationAction: ExtendButtonBase<BottomNavigationActionTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>>;
 export type BottomNavigationActionProps<RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BottomNavigationActionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export interface BottomNavigationActionOwnerState extends Omit<BottomNavigationActionProps, 'slots' | 'slotProps'> {}
 export default BottomNavigationAction;

package/Box/Box.d.ts

@@ -15,6 +15,6 @@ import { Theme as MaterialTheme } from "../styles/index.js";
  */
 declare const Box: OverridableComponent<BoxTypeMap<{}, 'div', MaterialTheme>>;
 export type BoxProps<RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent, MaterialTheme>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Box;

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -17,15 +17,15 @@ export interface BreadcrumbsOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<BreadcrumbsClasses>;
+  classes?: Partial<BreadcrumbsClasses> | undefined;
   /**
    * The components used for each slot inside the Breadcumb.
    * Either a string to use a HTML element or a component.
    * @default {}
    */
   slots?: {
-    CollapsedIcon?: React.ElementType;
-  };
+    CollapsedIcon?: React.ElementType | undefined;
+  } | undefined;
   /**
    * The props used for each slot inside the Breadcumb.
    * @default {}
@@ -35,32 +35,32 @@ export interface BreadcrumbsOwnProps {
      * Props applied to the CollapsedIcon slot.
      * @default {}
      */
-    collapsedIcon?: SlotComponentProps<typeof SvgIcon, BreadcrumbsCollapsedIconSlotPropsOverrides, BreadcrumbsOwnerState>;
-  };
+    collapsedIcon?: SlotComponentProps<typeof SvgIcon, BreadcrumbsCollapsedIconSlotPropsOverrides, BreadcrumbsOwnerState> | undefined;
+  } | undefined;
   /**
    * Override the default label for the expand button.
    *
    * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
    * @default 'Show path'
    */
-  expandText?: string;
+  expandText?: string | undefined;
   /**
    * If max items is exceeded, the number of items to show after the ellipsis.
    * @default 1
    */
-  itemsAfterCollapse?: number;
+  itemsAfterCollapse?: number | undefined;
   /**
    * If max items is exceeded, the number of items to show before the ellipsis.
    * @default 1
    */
-  itemsBeforeCollapse?: number;
+  itemsBeforeCollapse?: number | undefined;
   /**
    * Specifies the maximum number of breadcrumbs to display. When there are more
    * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
    * will be shown, with an ellipsis in between.
    * @default 8
    */
-  maxItems?: number;
+  maxItems?: number | undefined;
   /**
    * Custom separator node.
    * @default '/'
@@ -69,7 +69,7 @@ export interface BreadcrumbsOwnProps {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface BreadcrumbsTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'nav'> {
   props: AdditionalProps & BreadcrumbsOwnProps;
@@ -89,6 +89,6 @@ export interface BreadcrumbsTypeMap<AdditionalProps = {}, RootComponent extends
  */
 declare const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap>;
 export type BreadcrumbsProps<RootComponent extends React.ElementType = BreadcrumbsTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BreadcrumbsTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Breadcrumbs;

package/Button/Button.d.ts

@@ -16,29 +16,29 @@ export interface ButtonOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<ButtonClasses>;
+  classes?: Partial<ButtonClasses> | undefined;
   /**
    * 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/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color?: OverridableStringUnion<'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning', ButtonPropsColorOverrides>;
+  color?: OverridableStringUnion<'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning', ButtonPropsColorOverrides> | undefined;
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, no elevation is used.
    * @default false
    */
-  disableElevation?: boolean;
+  disableElevation?: boolean | undefined;
   /**
    * If `true`, the  keyboard focus ripple is disabled.
    * @default false
    */
-  disableFocusRipple?: boolean;
+  disableFocusRipple?: boolean | undefined;
   /**
    * Element placed after the children.
    */
@@ -47,18 +47,18 @@ export interface ButtonOwnProps {
    * If `true`, the button will take up the full width of its container.
    * @default false
    */
-  fullWidth?: boolean;
+  fullWidth?: boolean | undefined;
   /**
    * The URL to link to when the button is clicked.
    * If defined, an `a` element will be used as the root node.
    */
-  href?: string;
+  href?: string | undefined;
   /**
    * If `true`, the loading indicator is visible and the button is disabled.
    * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
    * @default null
    */
-  loading?: boolean | null;
+  loading?: boolean | null | undefined;
   /**
    * Element placed before the children if the button is in loading state.
    * The node should contain an element with `role="progressbar"` with an accessible name.
@@ -70,13 +70,13 @@ export interface ButtonOwnProps {
    * The loading indicator can be positioned on the start, end, or the center of the button.
    * @default 'center'
    */
-  loadingPosition?: 'start' | 'end' | 'center';
+  loadingPosition?: 'start' | 'end' | 'center' | undefined;
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.
    * @default 'medium'
    */
-  size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonPropsSizeOverrides>;
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonPropsSizeOverrides> | undefined;
   /**
    * Element placed before the children.
    */
@@ -84,12 +84,12 @@ export interface ButtonOwnProps {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The variant to use.
    * @default 'text'
    */
-  variant?: OverridableStringUnion<'text' | 'outlined' | 'contained', ButtonPropsVariantOverrides>;
+  variant?: OverridableStringUnion<'text' | 'outlined' | 'contained', ButtonPropsVariantOverrides> | undefined;
 }
 export type ButtonTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'button'> = ExtendButtonBaseTypeMap<{
   props: AdditionalProps & ButtonOwnProps;
@@ -103,7 +103,7 @@ export type ButtonTypeMap<AdditionalProps = {}, RootComponent extends React.Elem
  */
 export interface ExtendButtonTypeMap<TypeMap extends OverridableTypeMap> {
   props: TypeMap['props'] & (TypeMap['props'] extends {
-    classes?: Record<string, string>;
+    classes?: Record<string, string> | undefined;
   } ? DistributiveOmit<ButtonTypeMap['props'], 'classes'> : ButtonTypeMap['props']);
   defaultComponent: TypeMap['defaultComponent'];
 }
@@ -126,6 +126,6 @@ export type ExtendButton<TypeMap extends OverridableTypeMap> = ((props: {
  */
 declare const Button: ExtendButtonBase<ButtonTypeMap>;
 export type ButtonProps<RootComponent extends React.ElementType = ButtonTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Button;