@mui/x-date-pickers 7.0.0-beta.1 → 7.0.0-beta.4

package/legacy/StaticTimePicker/StaticTimePicker.js

@@ -1,238 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { renderTimeViewClock } from '../timeViewRenderers';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateTime } from '../internals/utils/validation/validateTime';
-/**
- * Demos:
- *
- * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
- * - [Validation](https://mui.com/x/react-date-pickers/validation/)
- *
- * API:
- *
- * - [StaticTimePicker API](https://mui.com/x/api/date-pickers/static-time-picker/)
- */
-var StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker(inProps, ref) {
-  var _defaultizedProps$dis, _defaultizedProps$amp, _defaultizedProps$slo;
-  var defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiStaticTimePicker');
-  var displayStaticWrapperAs = (_defaultizedProps$dis = defaultizedProps.displayStaticWrapperAs) != null ? _defaultizedProps$dis : 'mobile';
-  var ampmInClock = (_defaultizedProps$amp = defaultizedProps.ampmInClock) != null ? _defaultizedProps$amp : displayStaticWrapperAs === 'desktop';
-  var viewRenderers = _extends({
-    hours: renderTimeViewClock,
-    minutes: renderTimeViewClock,
-    seconds: renderTimeViewClock
-  }, defaultizedProps.viewRenderers);
-
-  // Props with the default values specific to the static variant
-  var props = _extends({}, defaultizedProps, {
-    viewRenderers: viewRenderers,
-    displayStaticWrapperAs: displayStaticWrapperAs,
-    ampmInClock: ampmInClock,
-    slotProps: _extends({}, defaultizedProps.slotProps, {
-      toolbar: _extends({
-        hidden: displayStaticWrapperAs === 'desktop',
-        ampmInClock: ampmInClock
-      }, (_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.toolbar)
-    })
-  });
-  var _useStaticPicker = useStaticPicker({
-      props: props,
-      valueManager: singleItemValueManager,
-      valueType: 'time',
-      validator: validateTime,
-      ref: ref
-    }),
-    renderPicker = _useStaticPicker.renderPicker;
-  return renderPicker();
-});
-StaticTimePicker.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * 12h/24h view for hour selection clock.
-   * @default `utils.is12HourCycleInCurrentLocale()`
-   */
-  ampm: PropTypes.bool,
-  /**
-   * Display ampm controls under the clock (instead of in the toolbar).
-   * @default true on desktop, false on mobile
-   */
-  ampmInClock: PropTypes.bool,
-  /**
-   * If `true`, the main element is focused during the first mount.
-   * This main element is:
-   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
-   * - the `input` element if there is a field rendered.
-   */
-  autoFocus: PropTypes.bool,
-  className: PropTypes.string,
-  /**
-   * The default value.
-   * Used when the component is not controlled.
-   */
-  defaultValue: PropTypes.any,
-  /**
-   * If `true`, the picker and text field are disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
-   * @default false
-   */
-  disableFuture: PropTypes.bool,
-  /**
-   * Do not ignore date part when validating min/max time.
-   * @default false
-   */
-  disableIgnoringDatePartForTimeValidation: PropTypes.bool,
-  /**
-   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
-   * @default false
-   */
-  disablePast: PropTypes.bool,
-  /**
-   * Force static wrapper inner components to be rendered in mobile or desktop mode.
-   * @default "mobile"
-   */
-  displayStaticWrapperAs: PropTypes.oneOf(['desktop', 'mobile']),
-  /**
-   * Locale for components texts.
-   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
-   */
-  localeText: PropTypes.object,
-  /**
-   * Maximal selectable time.
-   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
-   */
-  maxTime: PropTypes.any,
-  /**
-   * Minimal selectable time.
-   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
-   */
-  minTime: PropTypes.any,
-  /**
-   * Step over minutes.
-   * @default 1
-   */
-  minutesStep: PropTypes.number,
-  /**
-   * Callback fired when the value is accepted.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TValue} value The value that was just accepted.
-   */
-  onAccept: PropTypes.func,
-  /**
-   * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TValue} value The new value.
-   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
-   */
-  onChange: PropTypes.func,
-  /**
-   * Callback fired when component requests to be closed.
-   * Can be fired when selecting (by default on `desktop` mode) or clearing a value.
-   * @deprecated Please avoid using as it will be removed in next major version.
-   */
-  onClose: PropTypes.func,
-  /**
-   * Callback fired when the error associated to the current value changes.
-   * If the error has a non-null value, then the `TextField` will be rendered in `error` state.
-   *
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error describing why the current value is not valid.
-   * @param {TValue} value The value associated to the error.
-   */
-  onError: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @template TView
-   * @param {TView} view The new view.
-   */
-  onViewChange: PropTypes.func,
-  /**
-   * The default visible view.
-   * Used when the component view is not controlled.
-   * Must be a valid option from `views` list.
-   */
-  openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: PropTypes.oneOf(['landscape', 'portrait']),
-  readOnly: PropTypes.bool,
-  /**
-   * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
-   */
-  reduceAnimations: PropTypes.bool,
-  /**
-   * The date used to generate the new value when both `value` and `defaultValue` are empty.
-   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
-   */
-  referenceDate: PropTypes.any,
-  /**
-   * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   */
-  shouldDisableTime: PropTypes.func,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * Choose which timezone to use for the value.
-   * Example: "default", "system", "UTC", "America/New_York".
-   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
-   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
-   */
-  timezone: PropTypes.string,
-  /**
-   * The selected value.
-   * Used when the component is controlled.
-   */
-  value: PropTypes.any,
-  /**
-   * The visible view.
-   * Used when the component view is controlled.
-   * Must be a valid option from `views` list.
-   */
-  view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
-  /**
-   * Define custom view renderers for each section.
-   * If `null`, the section will only have field editing.
-   * If `undefined`, internally defined view will be the used.
-   */
-  viewRenderers: PropTypes.shape({
-    hours: PropTypes.func,
-    minutes: PropTypes.func,
-    seconds: PropTypes.func
-  }),
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
-};
-export { StaticTimePicker };

package/legacy/StaticTimePicker/StaticTimePicker.types.js

@@ -1 +0,0 @@
-export {};

package/legacy/StaticTimePicker/index.js

@@ -1 +0,0 @@
-export { StaticTimePicker } from './StaticTimePicker';

package/legacy/TimeClock/Clock.js

@@ -1,358 +0,0 @@
-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, useThemeProps } from '@mui/material/styles';
-import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_composeClasses as composeClasses } from '@mui/utils';
-import { ClockPointer } from './ClockPointer';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
-import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from './shared';
-import { getClockUtilityClass } from './clockClasses';
-import { formatMeridiem } from '../internals/utils/date-utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-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'],
-    meridiemText: ['meridiemText']
-  };
-  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',
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: theme.spacing(2)
-  };
-});
-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,
-  width: 220,
-  flexShrink: 0,
-  position: 'relative',
-  pointerEvents: 'none'
-});
-var ClockWrapper = styled('div', {
-  name: 'MuiClock',
-  slot: 'Wrapper',
-  overridesResolver: function overridesResolver(_, styles) {
-    return styles.wrapper;
-  }
-})({
-  '&:focus': {
-    outline: 'none'
-  }
-});
-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%',
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'auto',
-    outline: 0,
-    // Disable scroll capabilities.
-    touchAction: 'none',
-    userSelect: 'none'
-  }, ownerState.disabled ? {} : {
-    '@media (pointer: fine)': {
-      cursor: 'pointer',
-      borderRadius: '50%'
-    },
-    '&:active': {
-      cursor: 'move'
-    }
-  });
-});
-var ClockPin = styled('div', {
-  name: 'MuiClock',
-  slot: 'Pin',
-  overridesResolver: function overridesResolver(_, styles) {
-    return styles.pin;
-  }
-})(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    width: 6,
-    height: 6,
-    borderRadius: '50%',
-    backgroundColor: (theme.vars || theme).palette.primary.main,
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)'
-  };
-});
-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({
-    zIndex: 1,
-    position: 'absolute',
-    bottom: 8,
-    left: 8,
-    paddingLeft: 4,
-    paddingRight: 4,
-    width: CLOCK_HOUR_WIDTH
-  }, ownerState.meridiemMode === 'am' && {
-    backgroundColor: (theme.vars || theme).palette.primary.main,
-    color: (theme.vars || theme).palette.primary.contrastText,
-    '&:hover': {
-      backgroundColor: (theme.vars || theme).palette.primary.light
-    }
-  });
-});
-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({
-    zIndex: 1,
-    position: 'absolute',
-    bottom: 8,
-    right: 8,
-    paddingLeft: 4,
-    paddingRight: 4,
-    width: CLOCK_HOUR_WIDTH
-  }, ownerState.meridiemMode === 'pm' && {
-    backgroundColor: (theme.vars || theme).palette.primary.main,
-    color: (theme.vars || theme).palette.primary.contrastText,
-    '&:hover': {
-      backgroundColor: (theme.vars || theme).palette.primary.light
-    }
-  });
-});
-var ClockMeridiemText = styled(Typography, {
-  name: 'MuiClock',
-  slot: 'meridiemText',
-  overridesResolver: function overridesResolver(_, styles) {
-    return styles.meridiemText;
-  }
-})({
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis'
-});
-
-/**
- * @ignore - internal component.
- */
-export function Clock(inProps) {
-  var props = useThemeProps({
-    props: inProps,
-    name: 'MuiClock'
-  });
-  var ampm = props.ampm,
-    ampmInClock = props.ampmInClock,
-    autoFocus = props.autoFocus,
-    children = props.children,
-    value = props.value,
-    handleMeridiemChange = props.handleMeridiemChange,
-    isTimeDisabled = props.isTimeDisabled,
-    meridiemMode = props.meridiemMode,
-    _props$minutesStep = props.minutesStep,
-    minutesStep = _props$minutesStep === void 0 ? 1 : _props$minutesStep,
-    onChange = props.onChange,
-    selectedId = props.selectedId,
-    type = props.type,
-    viewValue = props.viewValue,
-    disabled = props.disabled,
-    readOnly = props.readOnly,
-    className = props.className;
-  var ownerState = props;
-  var utils = useUtils();
-  var localeText = useLocaleText();
-  var isMoving = React.useRef(false);
-  var classes = useUtilityClasses(ownerState);
-  var isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
-  var isPointerInner = !ampm && type === 'hours' && (viewValue < 1 || viewValue > 12);
-  var handleValueChange = function handleValueChange(newValue, isFinish) {
-    if (disabled || readOnly) {
-      return;
-    }
-    if (isTimeDisabled(newValue, type)) {
-      return;
-    }
-    onChange(newValue, isFinish);
-  };
-  var setTime = function setTime(event, isFinish) {
-    var _ref6 = event,
-      offsetX = _ref6.offsetX,
-      offsetY = _ref6.offsetY;
-    if (offsetX === undefined) {
-      var rect = event.target.getBoundingClientRect();
-      offsetX = event.changedTouches[0].clientX - rect.left;
-      offsetY = event.changedTouches[0].clientY - rect.top;
-    }
-    var newSelectedValue = type === 'seconds' || type === 'minutes' ? getMinutes(offsetX, offsetY, minutesStep) : getHours(offsetX, offsetY, Boolean(ampm));
-    handleValueChange(newSelectedValue, isFinish);
-  };
-  var handleTouchMove = function handleTouchMove(event) {
-    isMoving.current = true;
-    setTime(event, 'shallow');
-  };
-  var handleTouchEnd = function handleTouchEnd(event) {
-    if (isMoving.current) {
-      setTime(event, 'finish');
-      isMoving.current = false;
-    }
-  };
-  var handleMouseMove = function handleMouseMove(event) {
-    // event.buttons & PRIMARY_MOUSE_BUTTON
-    if (event.buttons > 0) {
-      setTime(event.nativeEvent, 'shallow');
-    }
-  };
-  var handleMouseUp = function handleMouseUp(event) {
-    if (isMoving.current) {
-      isMoving.current = false;
-    }
-    setTime(event.nativeEvent, 'finish');
-  };
-  var hasSelected = React.useMemo(function () {
-    if (type === 'hours') {
-      return true;
-    }
-    return viewValue % 5 === 0;
-  }, [type, viewValue]);
-  var keyboardControlStep = type === 'minutes' ? minutesStep : 1;
-  var listboxRef = React.useRef(null);
-  // Since this is rendered when a Popper is opened we can't use passive effects.
-  // Focusing in passive effects in Popper causes scroll jump.
-  useEnhancedEffect(function () {
-    if (autoFocus) {
-      // The ref not being resolved would be a bug in MUI.
-      listboxRef.current.focus();
-    }
-  }, [autoFocus]);
-  var handleKeyDown = function handleKeyDown(event) {
-    // TODO: Why this early exit?
-    if (isMoving.current) {
-      return;
-    }
-    switch (event.key) {
-      case 'Home':
-        // reset both hours and minutes
-        handleValueChange(0, 'partial');
-        event.preventDefault();
-        break;
-      case 'End':
-        handleValueChange(type === 'minutes' ? 59 : 23, 'partial');
-        event.preventDefault();
-        break;
-      case 'ArrowUp':
-        handleValueChange(viewValue + keyboardControlStep, 'partial');
-        event.preventDefault();
-        break;
-      case 'ArrowDown':
-        handleValueChange(viewValue - keyboardControlStep, 'partial');
-        event.preventDefault();
-        break;
-      default:
-      // do nothing
-    }
-  };
-  return /*#__PURE__*/_jsxs(ClockRoot, {
-    className: clsx(className, classes.root),
-    children: [/*#__PURE__*/_jsxs(ClockClock, {
-      className: classes.clock,
-      children: [/*#__PURE__*/_jsx(ClockSquareMask, {
-        onTouchMove: handleTouchMove,
-        onTouchEnd: handleTouchEnd,
-        onMouseUp: handleMouseUp,
-        onMouseMove: handleMouseMove,
-        ownerState: {
-          disabled: disabled
-        },
-        className: classes.squareMask
-      }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(ClockPin, {
-          className: classes.pin
-        }), value != null && /*#__PURE__*/_jsx(ClockPointer, {
-          type: type,
-          viewValue: viewValue,
-          isInner: isPointerInner,
-          hasSelected: hasSelected
-        })]
-      }), /*#__PURE__*/_jsx(ClockWrapper, {
-        "aria-activedescendant": selectedId,
-        "aria-label": localeText.clockLabelText(type, value, utils),
-        ref: listboxRef,
-        role: "listbox",
-        onKeyDown: handleKeyDown,
-        tabIndex: 0,
-        className: classes.wrapper,
-        children: children
-      })]
-    }), ampm && ampmInClock && /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(ClockAmButton, {
-        onClick: readOnly ? undefined : function () {
-          return handleMeridiemChange('am');
-        },
-        disabled: disabled || meridiemMode === null,
-        ownerState: ownerState,
-        className: classes.amButton,
-        title: formatMeridiem(utils, 'am'),
-        children: /*#__PURE__*/_jsx(ClockMeridiemText, {
-          variant: "caption",
-          className: classes.meridiemText,
-          children: formatMeridiem(utils, 'am')
-        })
-      }), /*#__PURE__*/_jsx(ClockPmButton, {
-        disabled: disabled || meridiemMode === null,
-        onClick: readOnly ? undefined : function () {
-          return handleMeridiemChange('pm');
-        },
-        ownerState: ownerState,
-        className: classes.pmButton,
-        title: formatMeridiem(utils, 'pm'),
-        children: /*#__PURE__*/_jsx(ClockMeridiemText, {
-          variant: "caption",
-          className: classes.meridiemText,
-          children: formatMeridiem(utils, 'pm')
-        })
-      })]
-    })]
-  });
-}

package/legacy/TimeClock/ClockNumber.js

@@ -1,87 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["className", "disabled", "index", "inner", "label", "selected"];
-import * as React from 'react';
-import clsx from 'clsx';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
-import { getClockNumberUtilityClass, clockNumberClasses } from './clockNumberClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-    selected = ownerState.selected,
-    disabled = ownerState.disabled;
-  var slots = {
-    root: ['root', selected && 'selected', disabled && 'disabled']
-  };
-  return composeClasses(slots, getClockNumberUtilityClass, classes);
-};
-var ClockNumberRoot = styled('span', {
-  name: 'MuiClockNumber',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(_, styles) {
-    return [styles.root, _defineProperty({}, "&.".concat(clockNumberClasses.disabled), styles.disabled), _defineProperty({}, "&.".concat(clockNumberClasses.selected), styles.selected)];
-  }
-})(function (_ref3) {
-  var theme = _ref3.theme,
-    ownerState = _ref3.ownerState;
-  return _extends(_defineProperty(_defineProperty({
-    height: CLOCK_HOUR_WIDTH,
-    width: CLOCK_HOUR_WIDTH,
-    position: 'absolute',
-    left: "calc((100% - ".concat(CLOCK_HOUR_WIDTH, "px) / 2)"),
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '50%',
-    color: (theme.vars || theme).palette.text.primary,
-    fontFamily: theme.typography.fontFamily,
-    '&:focused': {
-      backgroundColor: (theme.vars || theme).palette.background.paper
-    }
-  }, "&.".concat(clockNumberClasses.selected), {
-    color: (theme.vars || theme).palette.primary.contrastText
-  }), "&.".concat(clockNumberClasses.disabled), {
-    pointerEvents: 'none',
-    color: (theme.vars || theme).palette.text.disabled
-  }), ownerState.inner && _extends({}, theme.typography.body2, {
-    color: (theme.vars || theme).palette.text.secondary
-  }));
-});
-
-/**
- * @ignore - internal component.
- */
-export function ClockNumber(inProps) {
-  var props = useThemeProps({
-    props: inProps,
-    name: 'MuiClockNumber'
-  });
-  var className = props.className,
-    disabled = props.disabled,
-    index = props.index,
-    inner = props.inner,
-    label = props.label,
-    selected = props.selected,
-    other = _objectWithoutProperties(props, _excluded);
-  var ownerState = props;
-  var classes = useUtilityClasses(ownerState);
-  var angle = index % 12 / 12 * Math.PI * 2 - Math.PI / 2;
-  var length = (CLOCK_WIDTH - CLOCK_HOUR_WIDTH - 2) / 2 * (inner ? 0.65 : 1);
-  var x = Math.round(Math.cos(angle) * length);
-  var y = Math.round(Math.sin(angle) * length);
-  return /*#__PURE__*/_jsx(ClockNumberRoot, _extends({
-    className: clsx(className, classes.root),
-    "aria-disabled": disabled ? true : undefined,
-    "aria-selected": selected ? true : undefined,
-    role: "option",
-    style: {
-      transform: "translate(".concat(x, "px, ").concat(y + (CLOCK_WIDTH - CLOCK_HOUR_WIDTH) / 2, "px")
-    },
-    ownerState: ownerState
-  }, other, {
-    children: label
-  }));
-}