@mui/x-date-pickers 5.0.1 → 5.0.2

package/node/CalendarPicker/PickersCalendarHeader.js

@@ -15,6 +15,8 @@ var _Fade = _interopRequireDefault(require("@mui/material/Fade"));
 
 var _styles = require("@mui/material/styles");
 
+var _material = require("@mui/material");
+
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 var _useUtils = require("../internals/hooks/useUtils");
@@ -29,13 +31,33 @@ var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 
 var _warning = require("../internals/utils/warning");
 
+var _pickersCalendarHeaderClasses = require("./pickersCalendarHeaderClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const PickersCalendarHeaderRoot = (0, _styles.styled)('div')({
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    labelContainer: ['labelContainer'],
+    label: ['label'],
+    switchViewButton: ['switchViewButton'],
+    switchViewIcon: ['switchViewIcon']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _pickersCalendarHeaderClasses.getPickersCalendarHeaderUtilityClass, classes);
+};
+
+const PickersCalendarHeaderRoot = (0, _styles.styled)('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
   display: 'flex',
   alignItems: 'center',
   marginTop: 16,
@@ -46,7 +68,11 @@ const PickersCalendarHeaderRoot = (0, _styles.styled)('div')({
   maxHeight: 30,
   minHeight: 30
 });
-const PickersCalendarHeaderLabel = (0, _styles.styled)('div')(({
+const PickersCalendarHeaderLabelContainer = (0, _styles.styled)('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'LabelContainer',
+  overridesResolver: (_, styles) => styles.labelContainer
+})(({
   theme
 }) => (0, _extends2.default)({
   display: 'flex',
@@ -58,13 +84,25 @@ const PickersCalendarHeaderLabel = (0, _styles.styled)('div')(({
 }, theme.typography.body1, {
   fontWeight: theme.typography.fontWeightMedium
 }));
-const PickersCalendarHeaderLabelItem = (0, _styles.styled)('div')({
+const PickersCalendarHeaderLabel = (0, _styles.styled)('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'Label',
+  overridesResolver: (_, styles) => styles.label
+})({
   marginRight: 6
 });
-const PickersCalendarHeaderSwitchViewButton = (0, _styles.styled)(_IconButton.default)({
+const PickersCalendarHeaderSwitchViewButton = (0, _styles.styled)(_IconButton.default, {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'SwitchViewButton',
+  overridesResolver: (_, styles) => styles.switchViewButton
+})({
   marginRight: 'auto'
 });
-const PickersCalendarHeaderSwitchView = (0, _styles.styled)(_icons.ArrowDropDown)(({
+const PickersCalendarHeaderSwitchViewIcon = (0, _styles.styled)(_icons.ArrowDropDown, {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'SwitchViewIcon',
+  overridesResolver: (_, styles) => styles.switchViewIcon
+})(({
   theme,
   ownerState
 }) => (0, _extends2.default)({
@@ -79,7 +117,11 @@ const deprecatedPropsWarning = (0, _warning.buildDeprecatedPropsWarning)('Props
  * @ignore - do not document.
  */
 
-function PickersCalendarHeader(props) {
+function PickersCalendarHeader(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiPickersCalendarHeader'
+  });
   const {
     components = {},
     componentsProps = {},
@@ -109,6 +151,7 @@ function PickersCalendarHeader(props) {
   const rightArrowButtonText = rightArrowButtonTextProp != null ? rightArrowButtonTextProp : localeText.nextMonth;
   const getViewSwitchingButtonText = getViewSwitchingButtonTextProp != null ? getViewSwitchingButtonTextProp : localeText.calendarViewSwitchingButtonAriaLabel;
   const utils = (0, _useUtils.useUtils)();
+  const classes = useUtilityClasses(props);
   const switchViewButtonProps = componentsProps.switchViewButton || {};
 
   const selectNextMonth = () => onMonthChange(utils.getNextMonth(month), 'left');
@@ -146,28 +189,33 @@ function PickersCalendarHeader(props) {
   const ownerState = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarHeaderRoot, {
     ownerState: ownerState,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarHeaderLabel, {
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarHeaderLabelContainer, {
       role: "presentation",
       onClick: handleToggleView,
       ownerState: ownerState // putting this on the label item element below breaks when using transition
       ,
       "aria-live": "polite",
+      className: classes.labelContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersFadeTransitionGroup.PickersFadeTransitionGroup, {
         reduceAnimations: reduceAnimations,
         transKey: utils.format(month, 'monthAndYear'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarHeaderLabelItem, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarHeaderLabel, {
           id: labelId,
           ownerState: ownerState,
+          className: classes.label,
           children: utils.format(month, 'monthAndYear')
         })
       }), views.length > 1 && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarHeaderSwitchViewButton, (0, _extends2.default)({
         size: "small",
         as: components.SwitchViewButton,
-        "aria-label": getViewSwitchingButtonText(currentView)
+        "aria-label": getViewSwitchingButtonText(currentView),
+        className: classes.switchViewButton
       }, switchViewButtonProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarHeaderSwitchView, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarHeaderSwitchViewIcon, {
           as: components.SwitchViewIcon,
-          ownerState: ownerState
+          ownerState: ownerState,
+          className: classes.switchViewIcon
         })
       }))]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fade.default, {

package/node/CalendarPicker/PickersFadeTransitionGroup.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickersFadeTransitionGroup = void 0;
+exports.PickersFadeTransitionGroup = PickersFadeTransitionGroup;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -19,15 +19,30 @@ var _material = require("@mui/material");
 
 var _reactTransitionGroup = require("react-transition-group");
 
+var _pickersFadeTransitionGroupClasses = require("./pickersFadeTransitionGroupClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const classes = (0, _material.generateUtilityClasses)('PrivatePickersFadeTransitionGroup', ['root']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _pickersFadeTransitionGroupClasses.getPickersFadeTransitionGroupUtilityClass, classes);
+};
+
 const animationDuration = 500;
-const PickersFadeTransitionGroupRoot = (0, _styles.styled)(_reactTransitionGroup.TransitionGroup)({
+const PickersFadeTransitionGroupRoot = (0, _styles.styled)(_reactTransitionGroup.TransitionGroup, {
+  name: 'MuiPickersFadeTransitionGroup',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
   display: 'block',
   position: 'relative'
 });
@@ -35,12 +50,19 @@ const PickersFadeTransitionGroupRoot = (0, _styles.styled)(_reactTransitionGroup
  * @ignore - do not document.
  */
 
-const PickersFadeTransitionGroup = ({
-  children,
-  className,
-  reduceAnimations,
-  transKey
-}) => {
+function PickersFadeTransitionGroup(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiPickersFadeTransitionGroup'
+  });
+  const {
+    children,
+    className,
+    reduceAnimations,
+    transKey
+  } = props;
+  const classes = useUtilityClasses(props);
+
   if (reduceAnimations) {
     return children;
   }
@@ -59,6 +81,4 @@ const PickersFadeTransitionGroup = ({
       children: children
     }, transKey)
   });
-};
-
-exports.PickersFadeTransitionGroup = PickersFadeTransitionGroup;
+}

package/node/CalendarPicker/PickersSlideTransition.js

@@ -21,6 +21,8 @@ var _material = require("@mui/material");
 
 var _reactTransitionGroup = require("react-transition-group");
 
+var _pickersSlideTransitionClasses = require("./pickersSlideTransitionClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["children", "className", "reduceAnimations", "slideDirection", "transKey"];
@@ -29,10 +31,35 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const classes = (0, _material.generateUtilityClasses)('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _pickersSlideTransitionClasses.getPickersSlideTransitionUtilityClass, classes);
+};
+
 const slideAnimationDuration = 350;
 exports.slideAnimationDuration = slideAnimationDuration;
-const PickersSlideTransitionRoot = (0, _styles.styled)(_reactTransitionGroup.TransitionGroup)(({
+const PickersSlideTransitionRoot = (0, _styles.styled)(_reactTransitionGroup.TransitionGroup, {
+  name: 'PrivatePickersSlideTransition',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [styles.root, {
+    [`.${_pickersSlideTransitionClasses.pickersSlideTransitionClasses['slideEnter-left']}`]: styles['slideEnter-left']
+  }, {
+    [`.${_pickersSlideTransitionClasses.pickersSlideTransitionClasses['slideEnter-right']}`]: styles['slideEnter-right']
+  }, {
+    [`.${_pickersSlideTransitionClasses.pickersSlideTransitionClasses.slideEnterActive}`]: styles.slideEnterActive
+  }, {
+    [`.${_pickersSlideTransitionClasses.pickersSlideTransitionClasses.slideExit}`]: styles.slideExit
+  }, {
+    [`.${_pickersSlideTransitionClasses.pickersSlideTransitionClasses['slideExitActiveLeft-left']}`]: styles['slideExitActiveLeft-left']
+  }, {
+    [`.${_pickersSlideTransitionClasses.pickersSlideTransitionClasses['slideExitActiveLeft-right']}`]: styles['slideExitActiveLeft-right']
+  }]
+})(({
   theme
 }) => {
   const slideTransition = theme.transitions.create('transform', {
@@ -49,30 +76,30 @@ const PickersSlideTransitionRoot = (0, _styles.styled)(_reactTransitionGroup.Tra
       right: 0,
       left: 0
     },
-    [`& .${classes['slideEnter-left']}`]: {
+    [`& .${_pickersSlideTransitionClasses.pickersSlideTransitionClasses['slideEnter-left']}`]: {
       willChange: 'transform',
       transform: 'translate(100%)',
       zIndex: 1
     },
-    [`& .${classes['slideEnter-right']}`]: {
+    [`& .${_pickersSlideTransitionClasses.pickersSlideTransitionClasses['slideEnter-right']}`]: {
       willChange: 'transform',
       transform: 'translate(-100%)',
       zIndex: 1
     },
-    [`& .${classes.slideEnterActive}`]: {
+    [`& .${_pickersSlideTransitionClasses.pickersSlideTransitionClasses.slideEnterActive}`]: {
       transform: 'translate(0%)',
       transition: slideTransition
     },
-    [`& .${classes.slideExit}`]: {
+    [`& .${_pickersSlideTransitionClasses.pickersSlideTransitionClasses.slideExit}`]: {
       transform: 'translate(0%)'
     },
-    [`& .${classes['slideExitActiveLeft-left']}`]: {
+    [`& .${_pickersSlideTransitionClasses.pickersSlideTransitionClasses['slideExitActiveLeft-left']}`]: {
       willChange: 'transform',
       transform: 'translate(-100%)',
       transition: slideTransition,
       zIndex: 0
     },
-    [`& .${classes['slideExitActiveLeft-right']}`]: {
+    [`& .${_pickersSlideTransitionClasses.pickersSlideTransitionClasses['slideExitActiveLeft-right']}`]: {
       willChange: 'transform',
       transform: 'translate(100%)',
       transition: slideTransition,
@@ -84,15 +111,17 @@ const PickersSlideTransitionRoot = (0, _styles.styled)(_reactTransitionGroup.Tra
  * @ignore - do not document.
  */
 
-const PickersSlideTransition = _ref => {
-  let {
+const PickersSlideTransition = props => {
+  // TODO v6: add 'useThemeProps' once the component class names are aligned
+  const {
     children,
     className,
     reduceAnimations,
     slideDirection,
     transKey
-  } = _ref,
-      other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const classes = useUtilityClasses(props);
 
   if (reduceAnimations) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -102,10 +131,10 @@ const PickersSlideTransition = _ref => {
   }
 
   const transitionClasses = {
-    exit: classes.slideExit,
-    enterActive: classes.slideEnterActive,
-    enter: classes[`slideEnter-${slideDirection}`],
-    exitActive: classes[`slideExitActiveLeft-${slideDirection}`]
+    exit: _pickersSlideTransitionClasses.pickersSlideTransitionClasses.slideExit,
+    enterActive: _pickersSlideTransitionClasses.pickersSlideTransitionClasses.slideEnterActive,
+    enter: _pickersSlideTransitionClasses.pickersSlideTransitionClasses[`slideEnter-${slideDirection}`],
+    exitActive: _pickersSlideTransitionClasses.pickersSlideTransitionClasses[`slideExitActiveLeft-${slideDirection}`]
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersSlideTransitionRoot, {
     className: (0, _clsx.default)(classes.root, className),

package/node/CalendarPicker/dayPickerClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDayPickerUtilityClass = exports.dayPickerClasses = void 0;
+
+var _material = require("@mui/material");
+
+const getDayPickerUtilityClass = slot => (0, _material.generateUtilityClass)('MuiDayPicker', slot);
+
+exports.getDayPickerUtilityClass = getDayPickerUtilityClass;
+const dayPickerClasses = (0, _material.generateUtilityClasses)('MuiDayPicker', ['header', 'weekDayLabel', 'loadingContainer', 'slideTransition', 'monthContainer', 'weekContainer']);
+exports.dayPickerClasses = dayPickerClasses;

package/node/CalendarPicker/index.js

@@ -15,13 +15,45 @@ Object.defineProperty(exports, "calendarPickerClasses", {
     return _calendarPickerClasses.calendarPickerClasses;
   }
 });
+Object.defineProperty(exports, "dayPickerClasses", {
+  enumerable: true,
+  get: function () {
+    return _dayPickerClasses.dayPickerClasses;
+  }
+});
 Object.defineProperty(exports, "getCalendarPickerUtilityClass", {
   enumerable: true,
   get: function () {
     return _calendarPickerClasses.getCalendarPickerUtilityClass;
   }
 });
+Object.defineProperty(exports, "pickersCalendarHeaderClasses", {
+  enumerable: true,
+  get: function () {
+    return _pickersCalendarHeaderClasses.pickersCalendarHeaderClasses;
+  }
+});
+Object.defineProperty(exports, "pickersFadeTransitionGroupClasses", {
+  enumerable: true,
+  get: function () {
+    return _pickersFadeTransitionGroupClasses.pickersFadeTransitionGroupClasses;
+  }
+});
+Object.defineProperty(exports, "pickersSlideTransitionClasses", {
+  enumerable: true,
+  get: function () {
+    return _pickersSlideTransitionClasses.pickersSlideTransitionClasses;
+  }
+});
 
 var _CalendarPicker = require("./CalendarPicker");
 
-var _calendarPickerClasses = require("./calendarPickerClasses");
+var _calendarPickerClasses = require("./calendarPickerClasses");
+
+var _dayPickerClasses = require("./dayPickerClasses");
+
+var _pickersCalendarHeaderClasses = require("./pickersCalendarHeaderClasses");
+
+var _pickersFadeTransitionGroupClasses = require("./pickersFadeTransitionGroupClasses");
+
+var _pickersSlideTransitionClasses = require("./pickersSlideTransitionClasses");

package/node/CalendarPicker/pickersCalendarHeaderClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickersCalendarHeaderClasses = exports.getPickersCalendarHeaderUtilityClass = void 0;
+
+var _material = require("@mui/material");
+
+const getPickersCalendarHeaderUtilityClass = slot => (0, _material.generateUtilityClass)('MuiPickersCalendarHeader', slot);
+
+exports.getPickersCalendarHeaderUtilityClass = getPickersCalendarHeaderUtilityClass;
+const pickersCalendarHeaderClasses = (0, _material.generateUtilityClasses)('MuiPickersCalendarHeader', ['root', 'labelContainer', 'label', 'switchViewButton', 'switchViewIcon']);
+exports.pickersCalendarHeaderClasses = pickersCalendarHeaderClasses;

package/node/CalendarPicker/pickersFadeTransitionGroupClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickersFadeTransitionGroupClasses = exports.getPickersFadeTransitionGroupUtilityClass = void 0;
+
+var _material = require("@mui/material");
+
+const getPickersFadeTransitionGroupUtilityClass = slot => (0, _material.generateUtilityClass)('MuiPickersFadeTransitionGroup', slot);
+
+exports.getPickersFadeTransitionGroupUtilityClass = getPickersFadeTransitionGroupUtilityClass;
+const pickersFadeTransitionGroupClasses = (0, _material.generateUtilityClasses)('MuiPickersFadeTransitionGroup', ['root']);
+exports.pickersFadeTransitionGroupClasses = pickersFadeTransitionGroupClasses;

package/node/CalendarPicker/pickersSlideTransitionClasses.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickersSlideTransitionClasses = exports.getPickersSlideTransitionUtilityClass = void 0;
+
+var _material = require("@mui/material");
+
+const getPickersSlideTransitionUtilityClass = slot => // TODO v6: Rename 'PrivatePickersSlideTransition' to 'MuiPickersSlideTransition' to follow convention
+(0, _material.generateUtilityClass)('PrivatePickersSlideTransition', slot);
+
+exports.getPickersSlideTransitionUtilityClass = getPickersSlideTransitionUtilityClass;
+const pickersSlideTransitionClasses = (0, _material.generateUtilityClasses)( // TODO v6: Rename 'PrivatePickersSlideTransition' to 'MuiPickersSlideTransition' to follow convention
+'PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);
+exports.pickersSlideTransitionClasses = pickersSlideTransitionClasses;

package/node/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -65,7 +65,7 @@ const CalendarPickerSkeletonWeek = (0, _styles.styled)('div', {
 });
 const CalendarPickerSkeletonDay = (0, _styles.styled)(_Skeleton.default, {
   name: 'MuiCalendarPickerSkeleton',
-  slot: 'Day',
+  slot: 'DaySkeleton',
   overridesResolver: (props, styles) => styles.daySkeleton
 })(({
   ownerState
@@ -95,17 +95,16 @@ const monthMap = [[0, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1,
  * - [CalendarPickerSkeleton API](https://mui.com/x/api/date-pickers/calendar-picker-skeleton/)
  */
 
-function CalendarPickerSkeleton(props) {
-  const _useThemeProps = (0, _styles.useThemeProps)({
-    props,
+function CalendarPickerSkeleton(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
     name: 'MuiCalendarPickerSkeleton'
-  }),
-        {
+  });
+  const {
     className
-  } = _useThemeProps,
-        other = (0, _objectWithoutPropertiesLoose2.default)(_useThemeProps, _excluded);
-
-  const classes = useUtilityClasses(props);
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const classes = useUtilityClasses(other);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarPickerSkeletonRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className)
   }, other, {