@mui/material 5.15.14 → 6.0.0-alpha.0

package/StepConnector/StepConnector.js

@@ -1,19 +1,19 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import { getStepConnectorUtilityClass } from './stepConnectorClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiStepConnector');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -38,18 +38,27 @@ const StepConnectorRoot = styled('div', {
     } = props;
     return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, ownerState.completed && styles.completed];
   }
-})(({
-  ownerState
-}) => _extends({
-  flex: '1 1 auto'
-}, ownerState.orientation === 'vertical' && {
-  marginLeft: 12 // half icon
-}, ownerState.alternativeLabel && {
-  position: 'absolute',
-  top: 8 + 4,
-  left: 'calc(-50% + 20px)',
-  right: 'calc(50% + 20px)'
-}));
+})({
+  flex: '1 1 auto',
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      marginLeft: 12 // half icon
+    }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      position: 'absolute',
+      top: 8 + 4,
+      left: 'calc(-50% + 20px)',
+      right: 'calc(50% + 20px)'
+    }
+  }]
+});
 const StepConnectorLine = styled('span', {
   name: 'MuiStepConnector',
   slot: 'Line',
@@ -60,21 +69,31 @@ const StepConnectorLine = styled('span', {
     return [styles.line, styles[`line${capitalize(ownerState.orientation)}`]];
   }
 })(({
-  ownerState,
   theme
 }) => {
   const borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
-  return _extends({
+  return {
     display: 'block',
-    borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor
-  }, ownerState.orientation === 'horizontal' && {
-    borderTopStyle: 'solid',
-    borderTopWidth: 1
-  }, ownerState.orientation === 'vertical' && {
-    borderLeftStyle: 'solid',
-    borderLeftWidth: 1,
-    minHeight: 24
-  });
+    borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor,
+    variants: [{
+      props: {
+        orientation: 'horizontal'
+      },
+      style: {
+        borderTopStyle: 'solid',
+        borderTopWidth: 1
+      }
+    }, {
+      props: {
+        orientation: 'vertical'
+      },
+      style: {
+        borderLeftStyle: 'solid',
+        borderLeftWidth: 1,
+        minHeight: 24
+      }
+    }]
+  };
 });
 const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inProps, ref) {
   const props = useThemeProps({

package/StepContent/StepContent.js

@@ -1,19 +1,19 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Collapse from '../Collapse';
 import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import { getStepContentUtilityClass } from './stepContentClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiStepContent');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -35,17 +35,22 @@ const StepContentRoot = styled('div', {
     return [styles.root, ownerState.last && styles.last];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   marginLeft: 12,
   // half icon
   paddingLeft: 8 + 12,
   // margin + half icon
   paddingRight: 8,
-  borderLeft: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
-}, ownerState.last && {
-  borderLeft: 'none'
+  borderLeft: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`,
+  variants: [{
+    props: {
+      last: true
+    },
+    style: {
+      borderLeft: 'none'
+    }
+  }]
 }));
 const StepContentTransition = styled(Collapse, {
   name: 'MuiStepContent',

package/StepIcon/StepIcon.js

@@ -8,14 +8,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import CheckCircle from '../internal/svg-icons/CheckCircle';
 import Warning from '../internal/svg-icons/Warning';
 import SvgIcon from '../SvgIcon';
 import stepIconClasses, { getStepIconUtilityClass } from './stepIconClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiStepIcon');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/StepLabel/StepLabel.d.ts

@@ -4,8 +4,28 @@ import { InternalStandardProps as StandardProps } from '..';
 import { StepIconProps } from '../StepIcon';
 import { Theme } from '../styles';
 import { StepLabelClasses } from './stepLabelClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export interface StepLabelProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface StepLabelSlots {
+  /**
+   * The component that renders the label.
+   * @default span
+   */
+  label?: React.ElementType;
+}
+
+export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  StepLabelSlots,
+  {
+    label: SlotProps<React.ElementType<React.HTMLProps<HTMLSpanElement>>, {}, StepLabelOwnerState>;
+  }
+>;
+
+export interface StepLabelOwnerState extends StepLabelProps {}
+
+export interface StepLabelProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>>,
+    StepLabelSlotsAndSlotProps {
   /**
    * In most cases will simply be a string containing a title for the label.
    */
@@ -17,6 +37,7 @@ export interface StepLabelProps extends StandardProps<React.HTMLAttributes<HTMLD
   /**
    * The props used for each slot inside.
    * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   componentsProps?: {
     /**
@@ -38,17 +59,6 @@ export interface StepLabelProps extends StandardProps<React.HTMLAttributes<HTMLD
    * The optional node to display.
    */
   optional?: React.ReactNode;
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps?: {
-    /**
-     * Props applied to the label element.
-     * @default {}
-     */
-    label?: React.HTMLProps<HTMLSpanElement>;
-  };
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
    */
@@ -75,6 +85,8 @@ export type StepLabelClasskey = keyof NonNullable<StepLabelProps['classes']>;
  *
  * - [StepLabel API](https://mui.com/material-ui/api/step-label/)
  */
-declare const StepLabel: ((props: StepLabelProps) => JSX.Element) & { muiName: string };
+declare const StepLabel: ((props: StepLabelProps) => JSX.Element) & {
+  muiName: string;
+};
 
 export default StepLabel;

package/StepLabel/StepLabel.js

@@ -2,19 +2,19 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "slotProps", "StepIconComponent", "StepIconProps"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
+const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "slots", "slotProps", "StepIconComponent", "StepIconProps"];
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import StepContext from '../Step/StepContext';
 import StepIcon from '../StepIcon';
 import StepperContext from '../Stepper/StepperContext';
-import StepContext from '../Step/StepContext';
+import { createUseThemeProps, styled } from '../zero-styled';
 import stepLabelClasses, { getStepLabelUtilityClass } from './stepLabelClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import useSlot from '../utils/useSlot';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiStepLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -42,9 +42,7 @@ const StepLabelRoot = styled('span', {
     } = props;
     return [styles.root, styles[ownerState.orientation]];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'flex',
   alignItems: 'center',
   [`&.${stepLabelClasses.alternativeLabel}`]: {
@@ -52,11 +50,17 @@ const StepLabelRoot = styled('span', {
   },
   [`&.${stepLabelClasses.disabled}`]: {
     cursor: 'default'
-  }
-}, ownerState.orientation === 'vertical' && {
-  textAlign: 'left',
-  padding: '8px 0'
-}));
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      textAlign: 'left',
+      padding: '8px 0'
+    }
+  }]
+});
 const StepLabelLabel = styled('span', {
   name: 'MuiStepLabel',
   slot: 'Label',
@@ -87,7 +91,7 @@ const StepLabelIconContainer = styled('span', {
   name: 'MuiStepLabel',
   slot: 'IconContainer',
   overridesResolver: (props, styles) => styles.iconContainer
-})(() => ({
+})({
   flexShrink: 0,
   // Fix IE11 issue
   display: 'flex',
@@ -95,7 +99,7 @@ const StepLabelIconContainer = styled('span', {
   [`&.${stepLabelClasses.alternativeLabel}`]: {
     paddingRight: 0
   }
-}));
+});
 const StepLabelLabelContainer = styled('span', {
   name: 'MuiStepLabel',
   slot: 'LabelContainer',
@@ -110,7 +114,6 @@ const StepLabelLabelContainer = styled('span', {
   }
 }));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
-  var _slotProps$label;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiStepLabel'
@@ -122,6 +125,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
       error = false,
       icon: iconProp,
       optional,
+      slots = {},
       slotProps = {},
       StepIconComponent: StepIconComponentProp,
       StepIconProps
@@ -151,7 +155,15 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     orientation
   });
   const classes = useUtilityClasses(ownerState);
-  const labelSlotProps = (_slotProps$label = slotProps.label) != null ? _slotProps$label : componentsProps.label;
+  const externalForwardedProps = {
+    slots,
+    slotProps: _extends({}, componentsProps, slotProps)
+  };
+  const [LabelSlot, labelProps] = useSlot('label', {
+    elementType: StepLabelLabel,
+    externalForwardedProps,
+    ownerState
+  });
   return /*#__PURE__*/_jsxs(StepLabelRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -169,10 +181,8 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     }) : null, /*#__PURE__*/_jsxs(StepLabelLabelContainer, {
       className: classes.labelContainer,
       ownerState: ownerState,
-      children: [children ? /*#__PURE__*/_jsx(StepLabelLabel, _extends({
-        ownerState: ownerState
-      }, labelSlotProps, {
-        className: clsx(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
+      children: [children ? /*#__PURE__*/_jsx(LabelSlot, _extends({}, labelProps, {
+        className: clsx(classes.label, labelProps?.className),
         children: children
       })) : null, optional]
     })]
@@ -198,6 +208,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
   /**
    * The props used for each slot inside.
    * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   componentsProps: PropTypes.shape({
     label: PropTypes.object
@@ -220,7 +231,14 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    * @default {}
    */
   slotProps: PropTypes.shape({
-    label: PropTypes.object
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    label: PropTypes.elementType
   }),
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
@@ -235,5 +253,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-StepLabel.muiName = 'StepLabel';
+if (StepLabel) {
+  StepLabel.muiName = 'StepLabel';
+}
 export default StepLabel;

package/Stepper/Stepper.js

@@ -1,19 +1,19 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getStepperUtilityClass } from './stepperClasses';
 import StepConnector from '../StepConnector';
 import StepperContext from './StepperContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiStepper');
 const useUtilityClasses = ownerState => {
   const {
     orientation,
@@ -34,18 +34,32 @@ const StepperRoot = styled('div', {
     } = props;
     return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel];
   }
-})(({
-  ownerState
-}) => _extends({
-  display: 'flex'
-}, ownerState.orientation === 'horizontal' && {
-  flexDirection: 'row',
-  alignItems: 'center'
-}, ownerState.orientation === 'vertical' && {
-  flexDirection: 'column'
-}, ownerState.alternativeLabel && {
-  alignItems: 'flex-start'
-}));
+})({
+  display: 'flex',
+  variants: [{
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, {
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      alignItems: 'flex-start'
+    }
+  }]
+});
 const defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   const props = useThemeProps({

package/SvgIcon/SvgIcon.js

@@ -11,8 +11,7 @@ import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import { getSvgIconUtilityClass } from './svgIconClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -36,34 +35,31 @@ const SvgIconRoot = styled('svg', {
 })(({
   theme,
   ownerState
-}) => {
-  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
-  return {
-    userSelect: 'none',
-    width: '1em',
-    height: '1em',
-    display: 'inline-block',
-    // the <svg> will define the property that has `currentColor`
-    // for example heroicons uses fill="none" and stroke="currentColor"
-    fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
-    flexShrink: 0,
-    transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
-      duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
-    }),
-    fontSize: {
-      inherit: 'inherit',
-      small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
-      medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-      large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
-    }[ownerState.fontSize],
-    // TODO v5 deprecate, v6 remove for sx
-    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
-      action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
-      disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
-      inherit: undefined
-    }[ownerState.color]
-  };
-});
+}) => ({
+  userSelect: 'none',
+  width: '1em',
+  height: '1em',
+  display: 'inline-block',
+  // the <svg> will define the property that has `currentColor`
+  // for example heroicons uses fill="none" and stroke="currentColor"
+  fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
+  flexShrink: 0,
+  transition: theme.transitions?.create?.('fill', {
+    duration: theme.transitions?.duration?.shorter
+  }),
+  fontSize: {
+    inherit: 'inherit',
+    small: theme.typography?.pxToRem?.(20) || '1.25rem',
+    medium: theme.typography?.pxToRem?.(24) || '1.5rem',
+    large: theme.typography?.pxToRem?.(35) || '2.1875rem'
+  }[ownerState.fontSize],
+  // TODO v5 deprecate, v6 remove for sx
+  color: (theme.vars || theme).palette?.[ownerState.color]?.main ?? {
+    action: (theme.vars || theme).palette?.action?.active,
+    disabled: (theme.vars || theme).palette?.action?.disabled,
+    inherit: undefined
+  }[ownerState.color]
+}));
 const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/SwipeableDrawer/SwipeableDrawer.js

@@ -22,8 +22,7 @@ import SwipeArea from './SwipeArea';
 
 // This value is closed to what browsers are using internally to
 // trigger a native scroll.
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const UNCERTAINTY_THRESHOLD = 3; // px
 
 // This is the part of the drawer displayed on touch start.
@@ -400,12 +399,11 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
     const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, ownerWindow(nativeEvent.currentTarget));
     if (!open) {
-      var _paperRef$current;
       // logic for if swipe should be ignored:
       // if disableSwipeToOpen
       // if target != swipeArea, and target is not a child of paper ref
       // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
-      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || (_paperRef$current = paperRef.current) != null && _paperRef$current.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
+      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || paperRef.current?.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
         return;
       }
       if (horizontalSwipe) {

package/Switch/Switch.js

@@ -14,8 +14,7 @@ import capitalize from '../utils/capitalize';
 import SwitchBase from '../internal/SwitchBase';
 import { styled, createUseThemeProps } from '../zero-styled';
 import switchClasses, { getSwitchUtilityClass } from './switchClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiSwitch');
 const useUtilityClasses = ownerState => {
   const {

package/TabScrollButton/TabScrollButton.js

@@ -54,7 +54,6 @@ const TabScrollButtonRoot = styled(ButtonBase, {
   }
 }));
 const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
-  var _slots$StartScrollBut, _slots$EndScrollButto;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTabScrollButton'
@@ -71,8 +70,8 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     isRtl
   }, props);
   const classes = useUtilityClasses(ownerState);
-  const StartButtonIcon = (_slots$StartScrollBut = slots.StartScrollButtonIcon) != null ? _slots$StartScrollBut : KeyboardArrowLeft;
-  const EndButtonIcon = (_slots$EndScrollButto = slots.EndScrollButtonIcon) != null ? _slots$EndScrollButto : KeyboardArrowRight;
+  const StartButtonIcon = slots.StartScrollButtonIcon ?? KeyboardArrowLeft;
+  const EndButtonIcon = slots.EndScrollButtonIcon ?? KeyboardArrowRight;
   const startButtonIconProps = useSlotProps({
     elementType: StartButtonIcon,
     externalSlotProps: slotProps.startScrollButtonIcon,

package/TablePagination/TablePagination.js

@@ -21,9 +21,8 @@ import Toolbar from '../Toolbar';
 import TablePaginationActions from './TablePaginationActions';
 import useId from '../utils/useId';
 import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const TablePaginationRoot = styled(TableCell, {
   name: 'MuiTablePagination',
   slot: 'Root',
@@ -145,7 +144,6 @@ const useUtilityClasses = ownerState => {
  * A `TableCell` based component for placing inside `TableFooter` for pagination.
  */
 const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
-  var _slotProps$select;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTablePagination'
@@ -176,7 +174,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  const selectProps = (_slotProps$select = slotProps == null ? void 0 : slotProps.select) != null ? _slotProps$select : SelectProps;
+  const selectProps = slotProps?.select ?? SelectProps;
   const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
   let colSpan;
   if (component === TableCell || component === 'td') {