@mui/lab 5.0.0-alpha.63 → 5.0.0-alpha.67

package/internal/pickers/PickersModalDialog.js

@@ -8,9 +8,7 @@ import { styled } from '@mui/material/styles';
 import { DIALOG_WIDTH } from './constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const PickersModalDialogRoot = styled(Dialog, {
-  skipSx: true
-})({
+const PickersModalDialogRoot = styled(Dialog)({
   [`& .${dialogClasses.container}`]: {
     outline: 0
   },
@@ -19,16 +17,12 @@ const PickersModalDialogRoot = styled(Dialog, {
     minWidth: DIALOG_WIDTH
   }
 });
-const PickersModalDialogContent = styled(DialogContent, {
-  skipSx: true
-})({
+const PickersModalDialogContent = styled(DialogContent)({
   '&:first-of-type': {
     padding: 0
   }
 });
-const PickersModalDialogActions = styled(DialogActions, {
-  skipSx: true
-})(({
+const PickersModalDialogActions = styled(DialogActions)(({
   ownerState
 }) => _extends({}, (ownerState.clearable || ownerState.showTodayButton) && {
   // set justifyContent to default value to fix IE11 layout bug

package/internal/pickers/PickersPopper.js

@@ -9,16 +9,12 @@ import TrapFocus from '@mui/material/Unstable_TrapFocus';
 import { useForkRef, useEventCallback, ownerDocument } from '@mui/material/utils';
 import { styled } from '@mui/material/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const PickersPopperRoot = styled(Popper, {
-  skipSx: true
-})(({
+const PickersPopperRoot = styled(Popper)(({
   theme
 }) => ({
   zIndex: theme.zIndex.modal
 }));
-const PickersPopperPaper = styled(Paper, {
-  skipSx: true
-})(({
+const PickersPopperPaper = styled(Paper)(({
   ownerState
 }) => _extends({
   transformOrigin: 'top center',

package/internal/pickers/PickersToolbar.js

@@ -15,9 +15,7 @@ import ClockIcon from '../svg-icons/Clock';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivatePickersToolbar', ['root', 'dateTitleContainer']);
-const PickersToolbarRoot = styled('div', {
-  skipSx: true
-})(({
+const PickersToolbarRoot = styled('div')(({
   theme,
   ownerState
 }) => _extends({
@@ -33,9 +31,7 @@ const PickersToolbarRoot = styled('div', {
   justifyContent: 'flex-start',
   flexWrap: 'wrap'
 }));
-const PickersToolbarGrid = styled(Grid, {
-  skipSx: true
-})({
+const PickersToolbarGrid = styled(Grid)({
   flex: 1
 });
 

package/internal/pickers/PickersToolbarButton.js

@@ -6,9 +6,7 @@ import Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
 import PickersToolbarText from './PickersToolbarText';
 import { jsx as _jsx } from "react/jsx-runtime";
-const PickersToolbarButtonRoot = styled(Button, {
-  skipSx: true
-})({
+const PickersToolbarButtonRoot = styled(Button)({
   padding: 0,
   minWidth: 16,
   textTransform: 'none'

package/internal/pickers/PickersToolbarText.d.ts

@@ -4,5 +4,5 @@ export interface PickersToolbarTextProps extends Omit<TypographyProps, 'classes'
     selected?: boolean;
     value: React.ReactNode;
 }
-declare const PickersToolbarText: React.ForwardRefExoticComponent<Pick<PickersToolbarTextProps, "p" | "slot" | "style" | "title" | "hidden" | "className" | "selected" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "translate" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping" | "value"> & React.RefAttributes<HTMLSpanElement>>;
+declare const PickersToolbarText: React.ForwardRefExoticComponent<Pick<PickersToolbarTextProps, "p" | "slot" | "style" | "title" | "hidden" | "className" | "selected" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "translate" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping" | "value"> & React.RefAttributes<HTMLSpanElement>>;
 export default PickersToolbarText;

package/internal/pickers/PickersToolbarText.js

@@ -8,9 +8,7 @@ import { styled } from '@mui/material/styles';
 import { generateUtilityClasses } from '@mui/base';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivatePickersToolbarText', ['selected']);
-const PickersToolbarTextRoot = styled(Typography, {
-  skipSx: true
-})(({
+const PickersToolbarTextRoot = styled(Typography)(({
   theme
 }) => ({
   transition: theme.transitions.create('color'),

package/internal/pickers/PureDateInput.js

@@ -32,15 +32,17 @@ export const PureDateInput = /*#__PURE__*/React.forwardRef(function PureDateInpu
     inputRef,
     error: validationError,
     InputProps: PureDateInputProps,
-    inputProps: {
+    inputProps: _extends({
       disabled,
       readOnly: true,
       'aria-readonly': true,
       'aria-label': getOpenDialogAriaText(rawValue, utils),
-      value: inputValue,
-      onClick: onOpen,
+      value: inputValue
+    }, !props.readOnly && {
+      onClick: onOpen
+    }, {
       onKeyDown: onSpaceOrEnter(onOpen)
-    }
+    })
   }, TextFieldProps));
 });
 PureDateInput.propTypes = {

package/internal/pickers/wrappers/PickerStaticWrapper.js

@@ -25,8 +25,7 @@ const useUtilityClasses = ownerState => {
 const PickerStaticWrapperRoot = styled('div', {
   name: 'MuiPickerStaticWrapper',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root,
-  skipSx: true
+  overridesResolver: (props, styles) => styles.root
 })(({
   theme
 }) => ({

package/legacy/CalendarPicker/PickersCalendar.js

@@ -12,16 +12,12 @@ import SlideTransition from './PickersSlideTransition';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
-var PickersCalendarDayHeader = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarDayHeader = styled('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center'
 });
-var PickersCalendarWeekDayLabel = styled(Typography, {
-  skipSx: true
-})(function (_ref) {
+var PickersCalendarWeekDayLabel = styled(Typography)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: 36,
@@ -34,27 +30,19 @@ var PickersCalendarWeekDayLabel = styled(Typography, {
     color: theme.palette.text.secondary
   };
 });
-var PickersCalendarLoadingContainer = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarLoadingContainer = styled('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   minHeight: weeksContainerHeight
 });
-var PickersCalendarSlideTransition = styled(SlideTransition, {
-  skipSx: true
-})({
+var PickersCalendarSlideTransition = styled(SlideTransition)({
   minHeight: weeksContainerHeight
 });
-var PickersCalendarWeekContainer = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarWeekContainer = styled('div')({
   overflow: 'hidden'
 });
-var PickersCalendarWeek = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarWeek = styled('div')({
   margin: "".concat(DAY_MARGIN, "px 0"),
   display: 'flex',
   justifyContent: 'center'

package/legacy/CalendarPicker/PickersCalendarHeader.js

@@ -11,9 +11,7 @@ import PickersArrowSwitcher from '../internal/pickers/PickersArrowSwitcher';
 import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internal/pickers/hooks/date-helpers-hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var PickersCalendarHeaderRoot = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarHeaderRoot = styled('div')({
   display: 'flex',
   alignItems: 'center',
   marginTop: 16,
@@ -24,9 +22,7 @@ var PickersCalendarHeaderRoot = styled('div', {
   maxHeight: 30,
   minHeight: 30
 });
-var PickersCalendarHeaderLabel = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var PickersCalendarHeaderLabel = styled('div')(function (_ref) {
   var theme = _ref.theme;
   return _extends({
     display: 'flex',
@@ -39,19 +35,13 @@ var PickersCalendarHeaderLabel = styled('div', {
     fontWeight: theme.typography.fontWeightMedium
   });
 });
-var PickersCalendarHeaderLabelItem = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarHeaderLabelItem = styled('div')({
   marginRight: 6
 });
-var PickersCalendarHeaderSwitchViewButton = styled(IconButton, {
-  skipSx: true
-})({
+var PickersCalendarHeaderSwitchViewButton = styled(IconButton)({
   marginRight: 'auto'
 });
-var PickersCalendarHeaderSwitchView = styled(ArrowDropDownIcon, {
-  skipSx: true
-})(function (_ref2) {
+var PickersCalendarHeaderSwitchView = styled(ArrowDropDownIcon)(function (_ref2) {
   var theme = _ref2.theme,
       ownerState = _ref2.ownerState;
   return _extends({

package/legacy/CalendarPicker/PickersFadeTransitionGroup.js

@@ -7,9 +7,7 @@ import { TransitionGroup } from 'react-transition-group';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['root']);
 var animationDuration = 500;
-var PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
-  skipSx: true
-})({
+var PickersFadeTransitionGroupRoot = styled(TransitionGroup)({
   display: 'block',
   position: 'relative'
 });

package/legacy/CalendarPicker/PickersSlideTransition.js

@@ -9,9 +9,7 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);
 export var slideAnimationDuration = 350;
-var PickersSlideTransitionRoot = styled(TransitionGroup, {
-  skipSx: true
-})(function (_ref) {
+var PickersSlideTransitionRoot = styled(TransitionGroup)(function (_ref) {
   var _ref2;
 
   var theme = _ref.theme;

package/legacy/ClockPicker/Clock.js

@@ -13,9 +13,7 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria
 import { getHours, getMinutes } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var ClockRoot = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var ClockRoot = styled('div')(function (_ref) {
   var theme = _ref.theme;
   return {
     display: 'flex',
@@ -24,9 +22,7 @@ var ClockRoot = styled('div', {
     margin: theme.spacing(2)
   };
 });
-var ClockClock = styled('div', {
-  skipSx: true
-})({
+var ClockClock = styled('div')({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
   height: 220,
@@ -35,9 +31,7 @@ var ClockClock = styled('div', {
   position: 'relative',
   pointerEvents: 'none'
 });
-var ClockSquareMask = styled('div', {
-  skipSx: true
-})({
+var ClockSquareMask = styled('div')({
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -54,9 +48,7 @@ var ClockSquareMask = styled('div', {
     cursor: 'move'
   }
 });
-var ClockPin = styled('div', {
-  skipSx: true
-})(function (_ref2) {
+var ClockPin = styled('div')(function (_ref2) {
   var theme = _ref2.theme;
   return {
     width: 6,
@@ -69,9 +61,7 @@ var ClockPin = styled('div', {
     transform: 'translate(-50%, -50%)'
   };
 });
-var ClockAmButton = styled(IconButton, {
-  skipSx: true
-})(function (_ref3) {
+var ClockAmButton = styled(IconButton)(function (_ref3) {
   var theme = _ref3.theme,
       ownerState = _ref3.ownerState;
   return _extends({
@@ -87,9 +77,7 @@ var ClockAmButton = styled(IconButton, {
     }
   });
 });
-var ClockPmButton = styled(IconButton, {
-  skipSx: true
-})(function (_ref4) {
+var ClockPmButton = styled(IconButton)(function (_ref4) {
   var theme = _ref4.theme,
       ownerState = _ref4.ownerState;
   return _extends({

package/legacy/ClockPicker/ClockNumber.js

@@ -8,9 +8,7 @@ import { generateUtilityClasses } from '@mui/base';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
-var ClockNumberRoot = styled('span', {
-  skipSx: true
-})(function (_ref) {
+var ClockNumberRoot = styled('span')(function (_ref) {
   var _extends2;
 
   var theme = _ref.theme,

package/legacy/ClockPicker/ClockPicker.js

@@ -305,7 +305,10 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes
   /**
    * The props used for each slot inside.
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object
+  }),
 
   /**
    * Selected date @DateIOType.

package/legacy/ClockPicker/ClockPointer.js

@@ -14,9 +14,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
-var ClockPointerRoot = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var ClockPointerRoot = styled('div')(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
@@ -30,9 +28,7 @@ var ClockPointerRoot = styled('div', {
     transition: theme.transitions.create(['transform', 'height'])
   });
 });
-var ClockPointerThumb = styled('div', {
-  skipSx: true
-})(function (_ref2) {
+var ClockPointerThumb = styled('div')(function (_ref2) {
   var theme = _ref2.theme,
       ownerState = _ref2.ownerState;
   return _extends({

package/legacy/DatePicker/DatePicker.js

@@ -126,7 +126,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/DatePicker/DatePickerToolbar.js

@@ -10,15 +10,11 @@ import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivateDatePickerToolbar', ['penIcon']);
-var DatePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})(_defineProperty({}, "& .".concat(classes.penIcon), {
+var DatePickerToolbarRoot = styled(PickersToolbar)(_defineProperty({}, "& .".concat(classes.penIcon), {
   position: 'relative',
   top: 4
 }));
-var DatePickerToolbarTitle = styled(Typography, {
-  skipSx: true
-})(function (_ref) {
+var DatePickerToolbarTitle = styled(Typography)(function (_ref) {
   var ownerState = _ref.ownerState;
   return _extends({}, ownerState.isLandscape && {
     margin: 'auto 16px auto auto'

package/legacy/DateRangePicker/DateRangePicker.js

@@ -182,7 +182,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/DateRangePicker/DateRangePickerInput.js

@@ -9,9 +9,7 @@ import { useMaskedInput } from '../internal/pickers/hooks/useMaskedInput';
 import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
 import { executeInTheNextEventLoopTick } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-var DateRangePickerInputRoot = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var DateRangePickerInputRoot = styled('div')(function (_ref) {
   var theme = _ref.theme;
   return _defineProperty({
     display: 'flex',

package/legacy/DateRangePicker/DateRangePickerToolbar.js

@@ -13,15 +13,11 @@ import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivateDateRangePickerToolbar', ['penIcon']);
-var DateRangePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})(_defineProperty({}, "& .".concat(classes.penIcon), {
+var DateRangePickerToolbarRoot = styled(PickersToolbar)(_defineProperty({}, "& .".concat(classes.penIcon), {
   position: 'relative',
   top: 4
 }));
-var DateRangePickerToolbarContainer = styled('div', {
-  skipSx: true
-})({
+var DateRangePickerToolbarContainer = styled('div')({
   display: 'flex'
 });
 /**

package/legacy/DateRangePicker/DateRangePickerViewDesktop.js

@@ -13,15 +13,11 @@ import { doNothing } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var DateRangePickerViewDesktopRoot = styled('div', {
-  skipSx: true
-})({
+var DateRangePickerViewDesktopRoot = styled('div')({
   display: 'flex',
   flexDirection: 'row'
 });
-var DateRangePickerViewDesktopContainer = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var DateRangePickerViewDesktopContainer = styled('div')(function (_ref) {
   var theme = _ref.theme;
   return {
     '&:not(:last-of-type)': {
@@ -29,15 +25,11 @@ var DateRangePickerViewDesktopContainer = styled('div', {
     }
   };
 });
-var DateRangePickerViewDesktopCalendar = styled(PickersCalendar, {
-  skipSx: true
-})({
+var DateRangePickerViewDesktopCalendar = styled(PickersCalendar)({
   minWidth: 312,
   minHeight: 288
 });
-var DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher, {
-  skipSx: true
-})({
+var DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher)({
   padding: '16px 16px 8px 16px',
   display: 'flex',
   alignItems: 'center',

package/legacy/DateTimePicker/DateTimePicker.js

@@ -138,7 +138,11 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/legacy/DateTimePicker/DateTimePickerTabs.js

@@ -15,7 +15,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 
 var viewToTab = function viewToTab(openView) {
   // TODO: what happens if `openView` is `month`?
-  if (openView === 'day' || openView === 'year') {
+  if (['day', 'month', 'year'].includes(openView)) {
     return 'date';
   }
 
@@ -30,9 +30,7 @@ var tabToView = function tabToView(tab) {
   return 'hours';
 };
 
-var DateTimePickerTabsRoot = styled(Tabs, {
-  skipSx: true
-})(function (_ref) {
+var DateTimePickerTabsRoot = styled(Tabs)(function (_ref) {
   var ownerState = _ref.ownerState,
       theme = _ref.theme;
   return _extends({

package/legacy/DateTimePicker/DateTimePickerToolbar.js

@@ -16,9 +16,7 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivateDateTimePickerToolbar', ['penIcon']);
-var DateTimePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})(_defineProperty({
+var DateTimePickerToolbarRoot = styled(PickersToolbar)(_defineProperty({
   paddingLeft: 16,
   paddingRight: 16,
   justifyContent: 'space-around'
@@ -27,21 +25,15 @@ var DateTimePickerToolbarRoot = styled(PickersToolbar, {
   top: 8,
   right: 8
 }));
-var DateTimePickerToolbarDateContainer = styled('div', {
-  skipSx: true
-})({
+var DateTimePickerToolbarDateContainer = styled('div')({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start'
 });
-var DateTimePickerToolbarTimeContainer = styled('div', {
-  skipSx: true
-})({
+var DateTimePickerToolbarTimeContainer = styled('div')({
   display: 'flex'
 });
-var DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
-  skipSx: true
-})({
+var DateTimePickerToolbarSeparator = styled(PickersToolbarText)({
   margin: '0 4px 0 2px',
   cursor: 'default'
 });

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -121,7 +121,11 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -166,7 +166,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -131,7 +131,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.