@mui/material 7.3.8 → 7.3.10

package/esm/FormLabel/FormLabel.d.ts

@@ -14,41 +14,41 @@ export interface FormLabelOwnProps {
   /**
    * The content of the component.
    */
-  children?: React.LabelHTMLAttributes<HTMLLabelElement>['children'];
+  children?: React.LabelHTMLAttributes<HTMLLabelElement>['children'] | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<FormLabelClasses>;
+  classes?: Partial<FormLabelClasses> | 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).
    */
-  color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', FormLabelPropsColorOverrides>;
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', FormLabelPropsColorOverrides> | undefined;
   /**
    * If `true`, the label should be displayed in a disabled state.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, the label is displayed in an error state.
    */
-  error?: boolean;
+  error?: boolean | undefined;
   /**
    * If `true`, the label should use filled classes key.
    */
-  filled?: boolean;
+  filled?: boolean | undefined;
   /**
    * If `true`, the input of this label is focused (used by `FormGroup` components).
    */
-  focused?: boolean;
+  focused?: boolean | undefined;
   /**
    * If `true`, the label will indicate that the `input` is required.
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface FormLabelTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'label'> {
   props: AdditionalProps & FormLabelBaseProps & FormLabelOwnProps;
@@ -59,14 +59,14 @@ export interface FormLabelTypeMap<AdditionalProps = {}, RootComponent extends Re
  *
  * Demos:
  *
- * - [Checkbox](https://mui.com/material-ui/react-checkbox/)
- * - [Number Field](https://mui.com/material-ui/react-number-field/)
- * - [Radio Group](https://mui.com/material-ui/react-radio-button/)
- * - [Switch](https://mui.com/material-ui/react-switch/)
+ * - [Checkbox](https://v7.mui.com/material-ui/react-checkbox/)
+ * - [Number Field](https://v7.mui.com/material-ui/react-number-field/)
+ * - [Radio Group](https://v7.mui.com/material-ui/react-radio-button/)
+ * - [Switch](https://v7.mui.com/material-ui/react-switch/)
  *
  * API:
  *
- * - [FormLabel API](https://mui.com/material-ui/api/form-label/)
+ * - [FormLabel API](https://v7.mui.com/material-ui/api/form-label/)
  */
 declare const FormLabel: OverridableComponent<FormLabelTypeMap>;
 export interface ExtendFormLabelTypeMap<TypeMap extends OverridableTypeMap> {
@@ -74,6 +74,6 @@ export interface ExtendFormLabelTypeMap<TypeMap extends OverridableTypeMap> {
   defaultComponent: TypeMap['defaultComponent'];
 }
 export type FormLabelProps<RootComponent extends React.ElementType = FormLabelTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<FormLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default FormLabel;

package/esm/GlobalStyles/GlobalStyles.d.ts

@@ -11,10 +11,10 @@ export interface GlobalStylesProps {
  *
  * Demos:
  *
- * - [How to customize](https://mui.com/material-ui/customization/how-to-customize/)
+ * - [How to customize](https://v7.mui.com/material-ui/customization/how-to-customize/)
  *
  * API:
  *
- * - [GlobalStyles API](https://mui.com/material-ui/api/global-styles/)
+ * - [GlobalStyles API](https://v7.mui.com/material-ui/api/global-styles/)
  */
 export default function GlobalStyles(props: GlobalStylesProps): React.ReactElement<unknown>;

package/esm/Grid/Grid.d.ts

@@ -16,28 +16,28 @@ export interface GridBaseProps {
    * The number of columns.
    * @default 12
    */
-  columns?: ResponsiveStyleValue<number>;
+  columns?: ResponsiveStyleValue<number> | undefined;
   /**
    * Defines the horizontal space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+  columnSpacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * If `true`, the component will have the flex *container* behavior.
    * You should be wrapping *items* with a *container*.
    * @default false
    */
-  container?: boolean;
+  container?: boolean | undefined;
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
    * @default 'row'
    */
-  direction?: ResponsiveStyleValue<GridDirection>;
+  direction?: ResponsiveStyleValue<GridDirection> | undefined;
   /**
    * Defines the offset value for the type `item` components.
    */
-  offset?: ResponsiveStyleValue<GridOffset>;
+  offset?: ResponsiveStyleValue<GridOffset> | undefined;
   /**
    * @internal
    * The level of the grid starts from `0` and increases when the grid nests
@@ -65,16 +65,16 @@ export interface GridBaseProps {
    *     <Grid container> // level 0
    * ```
    */
-  unstable_level?: number;
+  unstable_level?: number | undefined;
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  rowSpacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * Defines the size of the the type `item` components.
    */
-  size?: ResponsiveStyleValue<GridSize>;
+  size?: ResponsiveStyleValue<GridSize> | undefined;
   /**
    * Defines the space between the type `item` components.
    * It can only be used on a type `container` component.
@@ -86,26 +86,26 @@ export interface GridBaseProps {
    * It's applied for all screen sizes.
    * @default 'wrap'
    */
-  wrap?: GridWrap;
+  wrap?: GridWrap | undefined;
 }
 export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & GridBaseProps & {
-    sx?: SxProps<Theme>;
+    sx?: SxProps<Theme> | undefined;
   } & SystemProps<Theme>;
   defaultComponent: D;
 }
 export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 }> = OverrideProps<GridTypeMap<P, D>, D>;
 /**
  *
  * Demos:
  *
- * - [Grid](https://mui.com/material-ui/react-grid/)
+ * - [Grid](https://v7.mui.com/material-ui/react-grid/)
  *
  * API:
  *
- * - [Grid API](https://mui.com/material-ui/api/grid/)
+ * - [Grid API](https://v7.mui.com/material-ui/api/grid/)
  */
 declare const Grid: OverridableComponent<GridTypeMap>;
 export default Grid;

package/esm/Grid/Grid.js

@@ -10,11 +10,11 @@ import useTheme from "../styles/useTheme.js";
  *
  * Demos:
  *
- * - [Grid](https://mui.com/material-ui/react-grid/)
+ * - [Grid](https://v7.mui.com/material-ui/react-grid/)
  *
  * API:
  *
- * - [Grid API](https://mui.com/material-ui/api/grid/)
+ * - [Grid API](https://v7.mui.com/material-ui/api/grid/)
  */
 const Grid = createGrid({
   createStyledComponent: styled('div', {

package/esm/GridLegacy/GridLegacy.d.ts

@@ -18,7 +18,7 @@ export interface RegularBreakpoints {
    * The value is applied for the `lg` breakpoint and wider screens if not overridden.
    * @default false
    */
-  lg?: boolean | GridLegacySize;
+  lg?: boolean | GridLegacySize | undefined;
   /**
    * If a number, it sets the number of columns the grid item uses.
    * It can't be greater than the total number of columns of the container (12 by default).
@@ -28,7 +28,7 @@ export interface RegularBreakpoints {
    * The value is applied for the `md` breakpoint and wider screens if not overridden.
    * @default false
    */
-  md?: boolean | GridLegacySize;
+  md?: boolean | GridLegacySize | undefined;
   /**
    * If a number, it sets the number of columns the grid item uses.
    * It can't be greater than the total number of columns of the container (12 by default).
@@ -38,7 +38,7 @@ export interface RegularBreakpoints {
    * The value is applied for the `sm` breakpoint and wider screens if not overridden.
    * @default false
    */
-  sm?: boolean | GridLegacySize;
+  sm?: boolean | GridLegacySize | undefined;
   /**
    * If a number, it sets the number of columns the grid item uses.
    * It can't be greater than the total number of columns of the container (12 by default).
@@ -48,7 +48,7 @@ export interface RegularBreakpoints {
    * The value is applied for the `xl` breakpoint and wider screens if not overridden.
    * @default false
    */
-  xl?: boolean | GridLegacySize;
+  xl?: boolean | GridLegacySize | undefined;
   /**
    * If a number, it sets the number of columns the grid item uses.
    * It can't be greater than the total number of columns of the container (12 by default).
@@ -58,7 +58,7 @@ export interface RegularBreakpoints {
    * The value is applied for all the screen sizes with the lowest priority.
    * @default false
    */
-  xs?: boolean | GridLegacySize;
+  xs?: boolean | GridLegacySize | undefined;
 }
 type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridLegacySize>>;
 interface BreakpointOverridesEmpty {}
@@ -71,62 +71,62 @@ export interface GridLegacyOwnProps extends SystemProps<Theme>, Breakpoints {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<GridLegacyClasses>;
+  classes?: Partial<GridLegacyClasses> | undefined;
   /**
    * The number of columns.
    * @default 12
    */
-  columns?: ResponsiveStyleValue<number>;
+  columns?: ResponsiveStyleValue<number> | undefined;
   /**
    * Defines the horizontal space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  columnSpacing?: ResponsiveStyleValue<GridLegacySpacing>;
+  columnSpacing?: ResponsiveStyleValue<GridLegacySpacing> | undefined;
   /**
    * If `true`, the component will have the flex *container* behavior.
    * You should be wrapping *items* with a *container*.
    * @default false
    */
-  container?: boolean;
+  container?: boolean | undefined;
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
    * @default 'row'
    */
-  direction?: ResponsiveStyleValue<GridLegacyDirection>;
+  direction?: ResponsiveStyleValue<GridLegacyDirection> | undefined;
   /**
    * If `true`, the component will have the flex *item* behavior.
    * You should be wrapping *items* with a *container*.
    * @default false
    */
-  item?: boolean;
+  item?: boolean | undefined;
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  rowSpacing?: ResponsiveStyleValue<GridLegacySpacing>;
+  rowSpacing?: ResponsiveStyleValue<GridLegacySpacing> | undefined;
   /**
    * Defines the space between the type `item` components.
    * It can only be used on a type `container` component.
    * @default 0
    */
-  spacing?: ResponsiveStyleValue<GridLegacySpacing>;
+  spacing?: ResponsiveStyleValue<GridLegacySpacing> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
    */
-  wrap?: GridLegacyWrap;
+  wrap?: GridLegacyWrap | undefined;
   /**
    * If `true`, it sets `min-width: 0` on the item.
    * Refer to the limitations section of the documentation to better understand the use case.
    * @default false
    */
-  zeroMinWidth?: boolean;
+  zeroMinWidth?: boolean | undefined;
 }
 
 /**
@@ -141,11 +141,11 @@ export interface GridLegacyTypeMap<AdditionalProps = {}, RootComponent extends R
  *
  * Demos:
  *
- * - [GridLegacy](https://mui.com/material-ui/react-grid-legacy/)
+ * - [GridLegacy](https://v7.mui.com/material-ui/react-grid-legacy/)
  *
  * API:
  *
- * - [GridLegacy API](https://mui.com/material-ui/api/grid-legacy/)
+ * - [GridLegacy API](https://v7.mui.com/material-ui/api/grid-legacy/)
  *
  * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead.
  */
@@ -155,6 +155,6 @@ declare const GridLegacy: OverridableComponent<GridLegacyTypeMap>;
  * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead.
  */
 export type GridLegacyProps<RootComponent extends React.ElementType = GridLegacyTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<GridLegacyTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default GridLegacy;

package/esm/Grow/Grow.d.ts

@@ -6,7 +6,7 @@ export interface GrowProps extends Omit<TransitionProps, 'timeout'> {
    * Set this to `false` to disable this behavior.
    * @default true
    */
-  appear?: boolean;
+  appear?: boolean | undefined;
   /**
    * A single child content element.
    */
@@ -15,12 +15,12 @@ export interface GrowProps extends Omit<TransitionProps, 'timeout'> {
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
    */
-  easing?: TransitionProps['easing'];
+  easing?: TransitionProps['easing'] | undefined;
   /**
    * If `true`, the component will transition in.
    */
-  in?: boolean;
-  ref?: React.Ref<unknown>;
+  in?: boolean | undefined;
+  ref?: React.Ref<unknown> | undefined;
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -28,22 +28,22 @@ export interface GrowProps extends Omit<TransitionProps, 'timeout'> {
    * Set to 'auto' to automatically calculate transition time based on height.
    * @default 'auto'
    */
-  timeout?: TransitionProps['timeout'] | 'auto';
+  timeout?: TransitionProps['timeout'] | 'auto' | undefined;
 }
 
 /**
- * The Grow transition is used by the [Tooltip](https://mui.com/material-ui/react-tooltip/) and
- * [Popover](https://mui.com/material-ui/react-popover/) components.
+ * The Grow transition is used by the [Tooltip](https://v7.mui.com/material-ui/react-tooltip/) and
+ * [Popover](https://v7.mui.com/material-ui/react-popover/) components.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Popover](https://mui.com/material-ui/react-popover/)
- * - [Transitions](https://mui.com/material-ui/transitions/)
+ * - [Popover](https://v7.mui.com/material-ui/react-popover/)
+ * - [Transitions](https://v7.mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Grow API](https://mui.com/material-ui/api/grow/)
+ * - [Grow API](https://v7.mui.com/material-ui/api/grow/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 export default function Grow(props: GrowProps): React.JSX.Element;

package/esm/Grow/Grow.js

@@ -7,7 +7,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import { Transition } from 'react-transition-group';
 import { useTheme } from "../zero-styled/index.js";
-import { getTransitionProps, reflow } from "../transitions/utils.js";
+import { normalizedTransitionCallback, getTransitionProps, getTransitionChildStyle, reflow } from "../transitions/utils.js";
 import useForkRef from "../utils/useForkRef.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function getScale(value) {
@@ -21,14 +21,21 @@ const styles = {
   entered: {
     opacity: 1,
     transform: 'none'
+  },
+  exiting: {
+    opacity: 0,
+    transform: getScale(0.75)
+  },
+  exited: {
+    opacity: 0,
+    transform: getScale(0.75)
   }
 };
-
-/*
- TODO v6: remove
- Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
- */
-const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)4/i.test(navigator.userAgent);
+const hiddenStyles = {
+  opacity: 0,
+  transform: getScale(0.75),
+  visibility: 'hidden'
+};
 
 /**
  * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
@@ -50,8 +57,6 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     onExiting,
     style,
     timeout = 'auto',
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition,
     ...other
   } = props;
   const timer = useTimeout();
@@ -59,20 +64,8 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const theme = useTheme();
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
-  const normalizedTransitionCallback = callback => maybeIsAppearing => {
-    if (callback) {
-      const node = nodeRef.current;
-
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-      if (maybeIsAppearing === undefined) {
-        callback(node);
-      } else {
-        callback(node, maybeIsAppearing);
-      }
-    }
-  };
-  const handleEntering = normalizedTransitionCallback(onEntering);
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEntering = normalizedTransitionCallback(nodeRef, onEntering);
+  const handleEnter = normalizedTransitionCallback(nodeRef, (node, isAppearing) => {
     reflow(node); // So the animation always start from the start.
 
     const {
@@ -97,7 +90,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: isWebKit154 ? duration : duration * 0.666,
+      duration: duration * 0.666,
       delay,
       easing: transitionTimingFunction
     })].join(',');
@@ -105,9 +98,9 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       onEnter(node, isAppearing);
     }
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback(node => {
+  const handleEntered = normalizedTransitionCallback(nodeRef, onEntered);
+  const handleExiting = normalizedTransitionCallback(nodeRef, onExiting);
+  const handleExit = normalizedTransitionCallback(nodeRef, node => {
     const {
       duration: transitionDuration,
       delay,
@@ -130,8 +123,8 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: isWebKit154 ? duration : duration * 0.666,
-      delay: isWebKit154 ? delay : delay || duration * 0.333,
+      duration: duration * 0.666,
+      delay: delay || duration * 0.333,
       easing: transitionTimingFunction
     })].join(',');
     node.style.opacity = 0;
@@ -140,7 +133,12 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(onExited);
+  const handleExited = normalizedTransitionCallback(nodeRef, node => {
+    node.style.transition = '';
+    if (onExited) {
+      onExited(node);
+    }
+  });
   const handleAddEndListener = next => {
     if (timeout === 'auto') {
       timer.start(autoTimeout.current || 0, next);
@@ -150,7 +148,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       addEndListener(nodeRef.current, next);
     }
   };
-  return /*#__PURE__*/_jsx(TransitionComponent, {
+  return /*#__PURE__*/_jsx(Transition, {
     appear: appear,
     in: inProp,
     nodeRef: nodeRef,
@@ -167,15 +165,9 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
+      const childStyle = getTransitionChildStyle(state, inProp, styles, hiddenStyles, style, children.props.style);
       return /*#__PURE__*/React.cloneElement(children, {
-        style: {
-          opacity: 0,
-          transform: getScale(0.75),
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
-          ...styles[state],
-          ...style,
-          ...children.props.style
-        },
+        style: childStyle,
         ref: handleRef,
         ...restChildProps
       });

package/esm/Icon/Icon.d.ts

@@ -12,7 +12,7 @@ export interface IconOwnProps {
    * other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
    * @default 'material-icons'
    */
-  baseClassName?: string;
+  baseClassName?: string | undefined;
   /**
    * The name of the icon font ligature.
    */
@@ -20,23 +20,23 @@ export interface IconOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<IconClasses>;
+  classes?: Partial<IconClasses> | 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 'inherit'
    */
-  color?: OverridableStringUnion<'inherit' | 'action' | 'disabled' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', IconPropsColorOverrides>;
+  color?: OverridableStringUnion<'inherit' | 'action' | 'disabled' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', IconPropsColorOverrides> | undefined;
   /**
    * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
    * @default 'medium'
    */
-  fontSize?: OverridableStringUnion<'inherit' | 'large' | 'medium' | 'small', IconPropsSizeOverrides>;
+  fontSize?: OverridableStringUnion<'inherit' | 'large' | 'medium' | 'small', IconPropsSizeOverrides> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface IconTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'span'> {
   props: AdditionalProps & IconOwnProps;
@@ -46,17 +46,17 @@ export interface IconTypeMap<AdditionalProps = {}, RootComponent extends React.E
  *
  * Demos:
  *
- * - [Icons](https://mui.com/material-ui/icons/)
- * - [Material Icons](https://mui.com/material-ui/material-icons/)
+ * - [Icons](https://v7.mui.com/material-ui/icons/)
+ * - [Material Icons](https://v7.mui.com/material-ui/material-icons/)
  *
  * API:
  *
- * - [Icon API](https://mui.com/material-ui/api/icon/)
+ * - [Icon API](https://v7.mui.com/material-ui/api/icon/)
  */
 declare const Icon: OverridableComponent<IconTypeMap> & {
   muiName: string;
 };
 export type IconProps<RootComponent extends React.ElementType = IconTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<IconTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Icon;