@mui/material 6.0.0-alpha.7 → 6.0.0-alpha.9

package/StepButton/StepButton.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "icon", "optional"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -63,12 +60,12 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
     name: 'MuiStepButton'
   });
   const {
-      children,
-      className,
-      icon,
-      optional
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    icon,
+    optional,
+    ...other
+  } = props;
   const {
     disabled,
     active
@@ -76,18 +73,20 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
   const {
     orientation
   } = React.useContext(StepperContext);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     orientation
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const childProps = {
     icon,
     optional
   };
-  const child = isMuiElement(children, ['StepLabel']) ? ( /*#__PURE__*/React.cloneElement(children, childProps)) : /*#__PURE__*/_jsx(StepLabel, _extends({}, childProps, {
+  const child = isMuiElement(children, ['StepLabel']) ? ( /*#__PURE__*/React.cloneElement(children, childProps)) : /*#__PURE__*/_jsx(StepLabel, {
+    ...childProps,
     children: children
-  }));
-  return /*#__PURE__*/_jsx(StepButtonRoot, _extends({
+  });
+  return /*#__PURE__*/_jsx(StepButtonRoot, {
     focusRipple: true,
     disabled: disabled,
     TouchRippleProps: {
@@ -96,10 +95,10 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
     className: clsx(classes.root, className),
     ref: ref,
     ownerState: ownerState,
-    "aria-current": active ? 'step' : undefined
-  }, other, {
+    "aria-current": active ? 'step' : undefined,
+    ...other,
     children: child
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? StepButton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/StepConnector/StepConnector.d.ts

@@ -4,7 +4,7 @@ import { InternalStandardProps as StandardProps } from '..';
 import { Theme } from '../styles';
 import { StepConnectorClasses } from './stepConnectorClasses';
 
-export type StepConnectorIcon = React.ReactElement | string | number;
+export type StepConnectorIcon = React.ReactElement<any> | string | number;
 
 export interface StepConnectorProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -30,4 +30,4 @@ export type StepConnectorClasskey = keyof NonNullable<StepConnectorProps['classe
  *
  * - [StepConnector API](https://mui.com/material-ui/api/step-connector/)
  */
-export default function StepConnector(props: StepConnectorProps): JSX.Element;
+export default function StepConnector(props: StepConnectorProps): React.JSX.Element;

package/StepConnector/StepConnector.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -101,9 +98,9 @@ const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inPro
     name: 'MuiStepConnector'
   });
   const {
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    ...other
+  } = props;
   const {
     alternativeLabel,
     orientation = 'horizontal'
@@ -113,24 +110,25 @@ const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inPro
     disabled,
     completed
   } = React.useContext(StepContext);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     alternativeLabel,
     orientation,
     active,
     completed,
     disabled
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(StepConnectorRoot, _extends({
+  return /*#__PURE__*/_jsx(StepConnectorRoot, {
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: /*#__PURE__*/_jsx(StepConnectorLine, {
       className: classes.line,
       ownerState: ownerState
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? StepConnector.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/StepContent/StepContent.d.ts

@@ -53,4 +53,4 @@ export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>
  *
  * - [StepContent API](https://mui.com/material-ui/api/step-content/)
  */
-export default function StepContent(props: StepContentProps): JSX.Element;
+export default function StepContent(props: StepContentProps): React.JSX.Element;

package/StepContent/StepContent.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "TransitionComponent", "transitionDuration", "TransitionProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -63,13 +60,13 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
     name: 'MuiStepContent'
   });
   const {
-      children,
-      className,
-      TransitionComponent = Collapse,
-      transitionDuration: transitionDurationProp = 'auto',
-      TransitionProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    TransitionComponent = Collapse,
+    transitionDuration: transitionDurationProp = 'auto',
+    TransitionProps,
+    ...other
+  } = props;
   const {
     orientation
   } = React.useContext(StepperContext);
@@ -78,9 +75,10 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
     last,
     expanded
   } = React.useContext(StepContext);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     last
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (orientation !== 'vertical') {
@@ -91,22 +89,22 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
   if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
     transitionDuration = undefined;
   }
-  return /*#__PURE__*/_jsx(StepContentRoot, _extends({
+  return /*#__PURE__*/_jsx(StepContentRoot, {
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/_jsx(StepContentTransition, _extends({
+    ownerState: ownerState,
+    ...other,
+    children: /*#__PURE__*/_jsx(StepContentTransition, {
       as: TransitionComponent,
       in: active || expanded,
       className: classes.transition,
       ownerState: ownerState,
       timeout: transitionDuration,
-      unmountOnExit: true
-    }, TransitionProps, {
+      unmountOnExit: true,
+      ...TransitionProps,
       children: children
-    }))
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/StepIcon/StepIcon.d.ts

@@ -47,4 +47,4 @@ export type StepIconClasskey = keyof NonNullable<StepIconProps['classes']>;
  *
  * - [StepIcon API](https://mui.com/material-ui/api/step-icon/)
  */
-export default function StepIcon(props: StepIconProps): JSX.Element;
+export default function StepIcon(props: StepIconProps): React.JSX.Element;

package/StepIcon/StepIcon.js

@@ -1,9 +1,6 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _circle;
-const _excluded = ["active", "className", "completed", "error", "icon"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -67,42 +64,45 @@ const StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
     name: 'MuiStepIcon'
   });
   const {
-      active = false,
-      className: classNameProp,
-      completed = false,
-      error = false,
-      icon
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    active = false,
+    className: classNameProp,
+    completed = false,
+    error = false,
+    icon,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     active,
     completed,
     error
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   if (typeof icon === 'number' || typeof icon === 'string') {
     const className = clsx(classNameProp, classes.root);
     if (error) {
-      return /*#__PURE__*/_jsx(StepIconRoot, _extends({
+      return /*#__PURE__*/_jsx(StepIconRoot, {
         as: Warning,
         className: className,
         ref: ref,
-        ownerState: ownerState
-      }, other));
+        ownerState: ownerState,
+        ...other
+      });
     }
     if (completed) {
-      return /*#__PURE__*/_jsx(StepIconRoot, _extends({
+      return /*#__PURE__*/_jsx(StepIconRoot, {
         as: CheckCircle,
         className: className,
         ref: ref,
-        ownerState: ownerState
-      }, other));
+        ownerState: ownerState,
+        ...other
+      });
     }
-    return /*#__PURE__*/_jsxs(StepIconRoot, _extends({
+    return /*#__PURE__*/_jsxs(StepIconRoot, {
       className: className,
       ref: ref,
-      ownerState: ownerState
-    }, other, {
+      ownerState: ownerState,
+      ...other,
       children: [_circle || (_circle = /*#__PURE__*/_jsx("circle", {
         cx: "12",
         cy: "12",
@@ -116,7 +116,7 @@ const StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
         ownerState: ownerState,
         children: icon
       })]
-    }));
+    });
   }
   return icon;
 });

package/StepLabel/StepLabel.d.ts

@@ -92,7 +92,7 @@ export type StepLabelClasskey = keyof NonNullable<StepLabelProps['classes']>;
  *
  * - [StepLabel API](https://mui.com/material-ui/api/step-label/)
  */
-declare const StepLabel: ((props: StepLabelProps) => JSX.Element) & {
+declare const StepLabel: ((props: StepLabelProps) => React.JSX.Element) & {
   muiName: string;
 };
 

package/StepLabel/StepLabel.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "slots", "slotProps", "StepIconComponent", "StepIconProps"];
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -67,7 +64,8 @@ const StepLabelLabel = styled('span', {
   overridesResolver: (props, styles) => styles.label
 })(({
   theme
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   display: 'block',
   transition: theme.transitions.create('color', {
     duration: theme.transitions.duration.shortest
@@ -119,18 +117,18 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     name: 'MuiStepLabel'
   });
   const {
-      children,
-      className,
-      componentsProps = {},
-      error = false,
-      icon: iconProp,
-      optional,
-      slots = {},
-      slotProps = {},
-      StepIconComponent: StepIconComponentProp,
-      StepIconProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    componentsProps = {},
+    error = false,
+    icon: iconProp,
+    optional,
+    slots = {},
+    slotProps = {},
+    StepIconComponent: StepIconComponentProp,
+    StepIconProps,
+    ...other
+  } = props;
   const {
     alternativeLabel,
     orientation
@@ -146,20 +144,23 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   if (icon && !StepIconComponent) {
     StepIconComponent = StepIcon;
   }
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     active,
     alternativeLabel,
     completed,
     disabled,
     error,
     orientation
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: _extends({
-      stepIcon: StepIconProps
-    }, componentsProps, slotProps)
+    slotProps: {
+      stepIcon: StepIconProps,
+      ...componentsProps,
+      ...slotProps
+    }
   };
   const [LabelSlot, labelProps] = useSlot('label', {
     elementType: StepLabelLabel,
@@ -171,29 +172,31 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     externalForwardedProps,
     ownerState
   });
-  return /*#__PURE__*/_jsxs(StepLabelRoot, _extends({
+  return /*#__PURE__*/_jsxs(StepLabelRoot, {
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: [icon || StepIconSlot ? /*#__PURE__*/_jsx(StepLabelIconContainer, {
       className: classes.iconContainer,
       ownerState: ownerState,
-      children: /*#__PURE__*/_jsx(StepIconSlot, _extends({
+      children: /*#__PURE__*/_jsx(StepIconSlot, {
         completed: completed,
         active: active,
         error: error,
-        icon: icon
-      }, stepIconProps))
+        icon: icon,
+        ...stepIconProps
+      })
     }) : null, /*#__PURE__*/_jsxs(StepLabelLabelContainer, {
       className: classes.labelContainer,
       ownerState: ownerState,
-      children: [children ? /*#__PURE__*/_jsx(LabelSlot, _extends({}, labelProps, {
+      children: [children ? /*#__PURE__*/_jsx(LabelSlot, {
+        ...labelProps,
         className: clsx(classes.label, labelProps?.className),
         children: children
-      })) : null, optional]
+      }) : null, optional]
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Stepper/Stepper.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["activeStep", "alternativeLabel", "children", "className", "component", "connector", "nonLinear", "orientation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -67,28 +64,30 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     name: 'MuiStepper'
   });
   const {
-      activeStep = 0,
-      alternativeLabel = false,
-      children,
-      className,
-      component = 'div',
-      connector = defaultConnector,
-      nonLinear = false,
-      orientation = 'horizontal'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    activeStep = 0,
+    alternativeLabel = false,
+    children,
+    className,
+    component = 'div',
+    connector = defaultConnector,
+    nonLinear = false,
+    orientation = 'horizontal',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     alternativeLabel,
     orientation,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const childrenArray = React.Children.toArray(children).filter(Boolean);
   const steps = childrenArray.map((step, index) => {
-    return /*#__PURE__*/React.cloneElement(step, _extends({
+    return /*#__PURE__*/React.cloneElement(step, {
       index,
-      last: index + 1 === childrenArray.length
-    }, step.props));
+      last: index + 1 === childrenArray.length,
+      ...step.props
+    });
   });
   const contextValue = React.useMemo(() => ({
     activeStep,
@@ -99,14 +98,14 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   }), [activeStep, alternativeLabel, connector, nonLinear, orientation]);
   return /*#__PURE__*/_jsx(StepperContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(StepperRoot, _extends({
+    children: /*#__PURE__*/_jsx(StepperRoot, {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: steps
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Stepper.propTypes /* remove-proptypes */ = {

package/SvgIcon/SvgIcon.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -80,7 +77,7 @@ const SvgIconRoot = styled('svg', {
     }
   },
   // TODO v5 deprecate color prop, v6 remove for sx
-  ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value.main).map(([color]) => ({
+  ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value && value.main).map(([color]) => ({
     props: {
       color
     },
@@ -116,19 +113,20 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     name: 'MuiSvgIcon'
   });
   const {
-      children,
-      className,
-      color = 'inherit',
-      component = 'svg',
-      fontSize = 'medium',
-      htmlColor,
-      inheritViewBox = false,
-      titleAccess,
-      viewBox = '0 0 24 24'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    color = 'inherit',
+    component = 'svg',
+    fontSize = 'medium',
+    htmlColor,
+    inheritViewBox = false,
+    titleAccess,
+    viewBox = '0 0 24 24',
+    ...other
+  } = props;
   const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     color,
     component,
     fontSize,
@@ -136,26 +134,28 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     inheritViewBox,
     viewBox,
     hasSvgAsChild
-  });
+  };
   const more = {};
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(SvgIconRoot, _extends({
+  return /*#__PURE__*/_jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
     focusable: "false",
     color: htmlColor,
     "aria-hidden": titleAccess ? undefined : true,
     role: titleAccess ? 'img' : undefined,
-    ref: ref
-  }, more, other, hasSvgAsChild && children.props, {
+    ref: ref,
+    ...more,
+    ...other,
+    ...(hasSvgAsChild && children.props),
     ownerState: ownerState,
     children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /*#__PURE__*/_jsx("title", {
       children: titleAccess
     }) : null]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/SwipeableDrawer/SwipeArea.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["anchor", "classes", "className", "width", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -61,22 +58,24 @@ const SwipeAreaRoot = styled('div', {
  */
 const SwipeArea = /*#__PURE__*/React.forwardRef(function SwipeArea(props, ref) {
   const {
-      anchor,
-      classes = {},
-      className,
-      width,
-      style
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    anchor,
+    classes = {},
+    className,
+    width,
+    style,
+    ...other
+  } = props;
   const ownerState = props;
-  return /*#__PURE__*/_jsx(SwipeAreaRoot, _extends({
+  return /*#__PURE__*/_jsx(SwipeAreaRoot, {
     className: clsx('PrivateSwipeArea-root', classes.root, classes[`anchor${capitalize(anchor)}`], className),
     ref: ref,
-    style: _extends({
-      [isHorizontal(anchor) ? 'width' : 'height']: width
-    }, style),
-    ownerState: ownerState
-  }, other));
+    style: {
+      [isHorizontal(anchor) ? 'width' : 'height']: width,
+      ...style
+    },
+    ownerState: ownerState,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? SwipeArea.propTypes = {
   /**