@mui/x-date-pickers 5.0.1 → 5.0.2

package/legacy/CalendarPicker/PickersCalendarHeader.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Fade from '@mui/material/Fade';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { PickersFadeTransitionGroup } from './PickersFadeTransitionGroup';
@@ -9,9 +10,29 @@ import { ArrowDropDown } from '../internals/components/icons';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
 import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internals/hooks/date-helpers-hooks';
 import { buildDeprecatedPropsWarning } from '../internals/utils/warning';
+import { getPickersCalendarHeaderUtilityClass } from './pickersCalendarHeaderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var PickersCalendarHeaderRoot = styled('div')({
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root'],
+    labelContainer: ['labelContainer'],
+    label: ['label'],
+    switchViewButton: ['switchViewButton'],
+    switchViewIcon: ['switchViewIcon']
+  };
+  return composeClasses(slots, getPickersCalendarHeaderUtilityClass, classes);
+};
+
+var PickersCalendarHeaderRoot = styled('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})({
   display: 'flex',
   alignItems: 'center',
   marginTop: 16,
@@ -22,7 +43,13 @@ var PickersCalendarHeaderRoot = styled('div')({
   maxHeight: 30,
   minHeight: 30
 });
-var PickersCalendarHeaderLabel = styled('div')(function (_ref) {
+var PickersCalendarHeaderLabelContainer = styled('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'LabelContainer',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.labelContainer;
+  }
+})(function (_ref) {
   var theme = _ref.theme;
   return _extends({
     display: 'flex',
@@ -35,13 +62,31 @@ var PickersCalendarHeaderLabel = styled('div')(function (_ref) {
     fontWeight: theme.typography.fontWeightMedium
   });
 });
-var PickersCalendarHeaderLabelItem = styled('div')({
+var PickersCalendarHeaderLabel = styled('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'Label',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.label;
+  }
+})({
   marginRight: 6
 });
-var PickersCalendarHeaderSwitchViewButton = styled(IconButton)({
+var PickersCalendarHeaderSwitchViewButton = styled(IconButton, {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'SwitchViewButton',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.switchViewButton;
+  }
+})({
   marginRight: 'auto'
 });
-var PickersCalendarHeaderSwitchView = styled(ArrowDropDown)(function (_ref2) {
+var PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDown, {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'SwitchViewIcon',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.switchViewIcon;
+  }
+})(function (_ref2) {
   var theme = _ref2.theme,
       ownerState = _ref2.ownerState;
   return _extends({
@@ -57,7 +102,11 @@ var deprecatedPropsWarning = buildDeprecatedPropsWarning('Props for translation
  * @ignore - do not document.
  */
 
-export function PickersCalendarHeader(props) {
+export function PickersCalendarHeader(inProps) {
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersCalendarHeader'
+  });
   var _props$components = props.components,
       components = _props$components === void 0 ? {} : _props$components,
       _props$componentsProp = props.componentsProps,
@@ -87,6 +136,7 @@ export function PickersCalendarHeader(props) {
   var rightArrowButtonText = rightArrowButtonTextProp != null ? rightArrowButtonTextProp : localeText.nextMonth;
   var getViewSwitchingButtonText = getViewSwitchingButtonTextProp != null ? getViewSwitchingButtonTextProp : localeText.calendarViewSwitchingButtonAriaLabel;
   var utils = useUtils();
+  var classes = useUtilityClasses(props);
   var switchViewButtonProps = componentsProps.switchViewButton || {};
 
   var selectNextMonth = function selectNextMonth() {
@@ -130,28 +180,33 @@ export function PickersCalendarHeader(props) {
   var ownerState = props;
   return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, {
     ownerState: ownerState,
-    children: [/*#__PURE__*/_jsxs(PickersCalendarHeaderLabel, {
+    className: classes.root,
+    children: [/*#__PURE__*/_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__*/_jsx(PickersFadeTransitionGroup, {
         reduceAnimations: reduceAnimations,
         transKey: utils.format(month, 'monthAndYear'),
-        children: /*#__PURE__*/_jsx(PickersCalendarHeaderLabelItem, {
+        children: /*#__PURE__*/_jsx(PickersCalendarHeaderLabel, {
           id: labelId,
           ownerState: ownerState,
+          className: classes.label,
           children: utils.format(month, 'monthAndYear')
         })
       }), views.length > 1 && !disabled && /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewButton, _extends({
         size: "small",
         as: components.SwitchViewButton,
-        "aria-label": getViewSwitchingButtonText(currentView)
+        "aria-label": getViewSwitchingButtonText(currentView),
+        className: classes.switchViewButton
       }, switchViewButtonProps, {
-        children: /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchView, {
+        children: /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewIcon, {
           as: components.SwitchViewIcon,
-          ownerState: ownerState
+          ownerState: ownerState,
+          className: classes.switchViewIcon
         })
       }))]
     }), /*#__PURE__*/_jsx(Fade, {

package/legacy/CalendarPicker/PickersFadeTransitionGroup.js

@@ -1,13 +1,28 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Fade from '@mui/material/Fade';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/material';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { TransitionGroup } from 'react-transition-group';
+import { getPickersFadeTransitionGroupUtilityClass } from './pickersFadeTransitionGroupClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-var classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['root']);
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getPickersFadeTransitionGroupUtilityClass, classes);
+};
+
 var animationDuration = 500;
-var PickersFadeTransitionGroupRoot = styled(TransitionGroup)({
+var PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
+  name: 'MuiPickersFadeTransitionGroup',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})({
   display: 'block',
   position: 'relative'
 });
@@ -15,11 +30,16 @@ var PickersFadeTransitionGroupRoot = styled(TransitionGroup)({
  * @ignore - do not document.
  */
 
-export var PickersFadeTransitionGroup = function PickersFadeTransitionGroup(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      reduceAnimations = _ref.reduceAnimations,
-      transKey = _ref.transKey;
+export function PickersFadeTransitionGroup(inProps) {
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersFadeTransitionGroup'
+  });
+  var children = props.children,
+      className = props.className,
+      reduceAnimations = props.reduceAnimations,
+      transKey = props.transKey;
+  var classes = useUtilityClasses(props);
 
   if (reduceAnimations) {
     return children;
@@ -39,4 +59,4 @@ export var PickersFadeTransitionGroup = function PickersFadeTransitionGroup(_ref
       children: children
     }, transKey)
   });
-};
+}

package/legacy/CalendarPicker/PickersSlideTransition.js

@@ -5,20 +5,35 @@ var _excluded = ["children", "className", "reduceAnimations", "slideDirection",
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/material';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { getPickersSlideTransitionUtilityClass, pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-var classes = generateUtilityClasses('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getPickersSlideTransitionUtilityClass, classes);
+};
+
 export var slideAnimationDuration = 350;
-var PickersSlideTransitionRoot = styled(TransitionGroup)(function (_ref) {
-  var _ref2;
+var PickersSlideTransitionRoot = styled(TransitionGroup, {
+  name: 'PrivatePickersSlideTransition',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return [styles.root, _defineProperty({}, ".".concat(pickersSlideTransitionClasses['slideEnter-left']), styles['slideEnter-left']), _defineProperty({}, ".".concat(pickersSlideTransitionClasses['slideEnter-right']), styles['slideEnter-right']), _defineProperty({}, ".".concat(pickersSlideTransitionClasses.slideEnterActive), styles.slideEnterActive), _defineProperty({}, ".".concat(pickersSlideTransitionClasses.slideExit), styles.slideExit), _defineProperty({}, ".".concat(pickersSlideTransitionClasses['slideExitActiveLeft-left']), styles['slideExitActiveLeft-left']), _defineProperty({}, ".".concat(pickersSlideTransitionClasses['slideExitActiveLeft-right']), styles['slideExitActiveLeft-right'])];
+  }
+})(function (_ref7) {
+  var _ref8;
 
-  var theme = _ref.theme;
+  var theme = _ref7.theme;
   var slideTransition = theme.transitions.create('transform', {
     duration: slideAnimationDuration,
     easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)'
   });
-  return _ref2 = {
+  return _ref8 = {
     display: 'block',
     position: 'relative',
     overflowX: 'hidden',
@@ -28,42 +43,45 @@ var PickersSlideTransitionRoot = styled(TransitionGroup)(function (_ref) {
       right: 0,
       left: 0
     }
-  }, _defineProperty(_ref2, "& .".concat(classes['slideEnter-left']), {
+  }, _defineProperty(_ref8, "& .".concat(pickersSlideTransitionClasses['slideEnter-left']), {
     willChange: 'transform',
     transform: 'translate(100%)',
     zIndex: 1
-  }), _defineProperty(_ref2, "& .".concat(classes['slideEnter-right']), {
+  }), _defineProperty(_ref8, "& .".concat(pickersSlideTransitionClasses['slideEnter-right']), {
     willChange: 'transform',
     transform: 'translate(-100%)',
     zIndex: 1
-  }), _defineProperty(_ref2, "& .".concat(classes.slideEnterActive), {
+  }), _defineProperty(_ref8, "& .".concat(pickersSlideTransitionClasses.slideEnterActive), {
     transform: 'translate(0%)',
     transition: slideTransition
-  }), _defineProperty(_ref2, "& .".concat(classes.slideExit), {
+  }), _defineProperty(_ref8, "& .".concat(pickersSlideTransitionClasses.slideExit), {
     transform: 'translate(0%)'
-  }), _defineProperty(_ref2, "& .".concat(classes['slideExitActiveLeft-left']), {
+  }), _defineProperty(_ref8, "& .".concat(pickersSlideTransitionClasses['slideExitActiveLeft-left']), {
     willChange: 'transform',
     transform: 'translate(-100%)',
     transition: slideTransition,
     zIndex: 0
-  }), _defineProperty(_ref2, "& .".concat(classes['slideExitActiveLeft-right']), {
+  }), _defineProperty(_ref8, "& .".concat(pickersSlideTransitionClasses['slideExitActiveLeft-right']), {
     willChange: 'transform',
     transform: 'translate(100%)',
     transition: slideTransition,
     zIndex: 0
-  }), _ref2;
+  }), _ref8;
 });
 /**
  * @ignore - do not document.
  */
 
-export var PickersSlideTransition = function PickersSlideTransition(_ref3) {
-  var children = _ref3.children,
-      className = _ref3.className,
-      reduceAnimations = _ref3.reduceAnimations,
-      slideDirection = _ref3.slideDirection,
-      transKey = _ref3.transKey,
-      other = _objectWithoutProperties(_ref3, _excluded);
+export var PickersSlideTransition = function PickersSlideTransition(props) {
+  // TODO v6: add 'useThemeProps' once the component class names are aligned
+  var children = props.children,
+      className = props.className,
+      reduceAnimations = props.reduceAnimations,
+      slideDirection = props.slideDirection,
+      transKey = props.transKey,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var classes = useUtilityClasses(props);
 
   if (reduceAnimations) {
     return /*#__PURE__*/_jsx("div", {
@@ -73,10 +91,10 @@ export var PickersSlideTransition = function PickersSlideTransition(_ref3) {
   }
 
   var transitionClasses = {
-    exit: classes.slideExit,
-    enterActive: classes.slideEnterActive,
-    enter: classes["slideEnter-".concat(slideDirection)],
-    exitActive: classes["slideExitActiveLeft-".concat(slideDirection)]
+    exit: pickersSlideTransitionClasses.slideExit,
+    enterActive: pickersSlideTransitionClasses.slideEnterActive,
+    enter: pickersSlideTransitionClasses["slideEnter-".concat(slideDirection)],
+    exitActive: pickersSlideTransitionClasses["slideExitActiveLeft-".concat(slideDirection)]
   };
   return /*#__PURE__*/_jsx(PickersSlideTransitionRoot, {
     className: clsx(classes.root, className),

package/legacy/CalendarPicker/dayPickerClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export var getDayPickerUtilityClass = function getDayPickerUtilityClass(slot) {
+  return generateUtilityClass('MuiDayPicker', slot);
+};
+export var dayPickerClasses = generateUtilityClasses('MuiDayPicker', ['header', 'weekDayLabel', 'loadingContainer', 'slideTransition', 'monthContainer', 'weekContainer']);

package/legacy/CalendarPicker/index.js

@@ -1,2 +1,6 @@
 export { CalendarPicker } from './CalendarPicker';
-export { getCalendarPickerUtilityClass, calendarPickerClasses } from './calendarPickerClasses';
+export { getCalendarPickerUtilityClass, calendarPickerClasses } from './calendarPickerClasses';
+export { dayPickerClasses } from './dayPickerClasses';
+export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
+export { pickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
+export { pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';

package/legacy/CalendarPicker/pickersCalendarHeaderClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export var getPickersCalendarHeaderUtilityClass = function getPickersCalendarHeaderUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersCalendarHeader', slot);
+};
+export var pickersCalendarHeaderClasses = generateUtilityClasses('MuiPickersCalendarHeader', ['root', 'labelContainer', 'label', 'switchViewButton', 'switchViewIcon']);

package/legacy/CalendarPicker/pickersFadeTransitionGroupClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export var getPickersFadeTransitionGroupUtilityClass = function getPickersFadeTransitionGroupUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersFadeTransitionGroup', slot);
+};
+export var pickersFadeTransitionGroupClasses = generateUtilityClasses('MuiPickersFadeTransitionGroup', ['root']);

package/legacy/CalendarPicker/pickersSlideTransitionClasses.js

@@ -0,0 +1,8 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export var getPickersSlideTransitionUtilityClass = function getPickersSlideTransitionUtilityClass(slot) {
+  return (// TODO v6: Rename 'PrivatePickersSlideTransition' to 'MuiPickersSlideTransition' to follow convention
+    generateUtilityClass('PrivatePickersSlideTransition', slot)
+  );
+};
+export var pickersSlideTransitionClasses = generateUtilityClasses( // TODO v6: Rename 'PrivatePickersSlideTransition' to 'MuiPickersSlideTransition' to follow convention
+'PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);

package/legacy/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -43,7 +43,7 @@ var CalendarPickerSkeletonWeek = styled('div', {
 });
 var CalendarPickerSkeletonDay = styled(Skeleton, {
   name: 'MuiCalendarPickerSkeleton',
-  slot: 'Day',
+  slot: 'DaySkeleton',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.daySkeleton;
   }
@@ -76,15 +76,16 @@ var monthMap = [[0, 1, 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) {
-  var _useThemeProps = useThemeProps({
-    props: props,
+function CalendarPickerSkeleton(inProps) {
+  var props = useThemeProps({
+    props: inProps,
     name: 'MuiCalendarPickerSkeleton'
-  }),
-      className = _useThemeProps.className,
-      other = _objectWithoutProperties(_useThemeProps, _excluded);
+  });
+
+  var className = props.className,
+      other = _objectWithoutProperties(props, _excluded);
 
-  var classes = useUtilityClasses(props);
+  var classes = useUtilityClasses(other);
   return /*#__PURE__*/_jsx(CalendarPickerSkeletonRoot, _extends({
     className: clsx(classes.root, className)
   }, other, {

package/legacy/ClockPicker/Clock.js

@@ -1,16 +1,39 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import clsx from 'clsx';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { ClockPointer } from './ClockPointer';
 import { useUtils } from '../internals/hooks/useUtils';
 import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
 import { getHours, getMinutes } from './shared';
+import { getClockUtilityClass } from './clockClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var ClockRoot = styled('div')(function (_ref) {
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root'],
+    clock: ['clock'],
+    wrapper: ['wrapper'],
+    squareMask: ['squareMask'],
+    pin: ['pin'],
+    amButton: ['amButton'],
+    pmButton: ['pmButton']
+  };
+  return composeClasses(slots, getClockUtilityClass, classes);
+};
+
+var ClockRoot = styled('div', {
+  name: 'MuiClock',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})(function (_ref) {
   var theme = _ref.theme;
   return {
     display: 'flex',
@@ -19,7 +42,13 @@ var ClockRoot = styled('div')(function (_ref) {
     margin: theme.spacing(2)
   };
 });
-var ClockClock = styled('div')({
+var ClockClock = styled('div', {
+  name: 'MuiClock',
+  slot: 'Clock',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.clock;
+  }
+})({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
   height: 220,
@@ -28,12 +57,24 @@ var ClockClock = styled('div')({
   position: 'relative',
   pointerEvents: 'none'
 });
-var ClockWrapper = styled('div')({
+var ClockWrapper = styled('div', {
+  name: 'MuiClock',
+  slot: 'Wrapper',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.wrapper;
+  }
+})({
   '&:focus': {
     outline: 'none'
   }
 });
-var ClockSquareMask = styled('div')(function (_ref2) {
+var ClockSquareMask = styled('div', {
+  name: 'MuiClock',
+  slot: 'SquareMask',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.squareMask;
+  }
+})(function (_ref2) {
   var ownerState = _ref2.ownerState;
   return _extends({
     width: '100%',
@@ -54,7 +95,13 @@ var ClockSquareMask = styled('div')(function (_ref2) {
     }
   });
 });
-var ClockPin = styled('div')(function (_ref3) {
+var ClockPin = styled('div', {
+  name: 'MuiClock',
+  slot: 'Pin',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.pin;
+  }
+})(function (_ref3) {
   var theme = _ref3.theme;
   return {
     width: 6,
@@ -67,7 +114,13 @@ var ClockPin = styled('div')(function (_ref3) {
     transform: 'translate(-50%, -50%)'
   };
 });
-var ClockAmButton = styled(IconButton)(function (_ref4) {
+var ClockAmButton = styled(IconButton, {
+  name: 'MuiClock',
+  slot: 'AmButton',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.amButton;
+  }
+})(function (_ref4) {
   var theme = _ref4.theme,
       ownerState = _ref4.ownerState;
   return _extends({
@@ -83,7 +136,13 @@ var ClockAmButton = styled(IconButton)(function (_ref4) {
     }
   });
 });
-var ClockPmButton = styled(IconButton)(function (_ref5) {
+var ClockPmButton = styled(IconButton, {
+  name: 'MuiClock',
+  slot: 'PmButton',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.pmButton;
+  }
+})(function (_ref5) {
   var theme = _ref5.theme,
       ownerState = _ref5.ownerState;
   return _extends({
@@ -103,7 +162,11 @@ var ClockPmButton = styled(IconButton)(function (_ref5) {
  * @ignore - internal component.
  */
 
-export function Clock(props) {
+export function Clock(inProps) {
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiClock'
+  });
   var ampm = props.ampm,
       ampmInClock = props.ampmInClock,
       autoFocus = props.autoFocus,
@@ -120,11 +183,13 @@ export function Clock(props) {
       type = props.type,
       value = props.value,
       disabled = props.disabled,
-      readOnly = props.readOnly;
+      readOnly = props.readOnly,
+      className = props.className;
   var ownerState = props;
   var utils = useUtils();
   var wrapperVariant = React.useContext(WrapperVariantContext);
   var isMoving = React.useRef(false);
+  var classes = useUtilityClasses(ownerState);
   var isSelectedTimeDisabled = isTimeDisabled(value, type);
   var isPointerInner = !ampm && type === 'hours' && (value < 1 || value > 12);
 
@@ -234,7 +299,9 @@ export function Clock(props) {
   };
 
   return /*#__PURE__*/_jsxs(ClockRoot, {
+    className: clsx(className, classes.root),
     children: [/*#__PURE__*/_jsxs(ClockClock, {
+      className: classes.clock,
       children: [/*#__PURE__*/_jsx(ClockSquareMask, {
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd,
@@ -242,9 +309,12 @@ export function Clock(props) {
         onMouseMove: handleMouseMove,
         ownerState: {
           disabled: disabled
-        }
+        },
+        className: classes.squareMask
       }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(ClockPin, {}), date && /*#__PURE__*/_jsx(ClockPointer, {
+        children: [/*#__PURE__*/_jsx(ClockPin, {
+          className: classes.pin
+        }), date && /*#__PURE__*/_jsx(ClockPointer, {
           type: type,
           value: value,
           isInner: isPointerInner,
@@ -257,6 +327,7 @@ export function Clock(props) {
         role: "listbox",
         onKeyDown: handleKeyDown,
         tabIndex: 0,
+        className: classes.wrapper,
         children: children
       })]
     }), ampm && (wrapperVariant === 'desktop' || ampmInClock) && /*#__PURE__*/_jsxs(React.Fragment, {
@@ -266,6 +337,7 @@ export function Clock(props) {
         },
         disabled: disabled || meridiemMode === null,
         ownerState: ownerState,
+        className: classes.amButton,
         children: /*#__PURE__*/_jsx(Typography, {
           variant: "caption",
           children: "AM"
@@ -276,6 +348,7 @@ export function Clock(props) {
           return handleMeridiemChange('pm');
         },
         ownerState: ownerState,
+        className: classes.pmButton,
         children: /*#__PURE__*/_jsx(Typography, {
           variant: "caption",
           children: "PM"