@mui/lab 5.0.0-alpha.75 → 5.0.0-alpha.76

package/modern/CalendarPicker/PickersSlideTransition.js

@@ -1,103 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "reduceAnimations", "slideDirection", "transKey"];
-import * as React from 'react';
-import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/base';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import { jsx as _jsx } from "react/jsx-runtime";
-const classes = generateUtilityClasses('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);
-export const slideAnimationDuration = 350;
-const PickersSlideTransitionRoot = styled(TransitionGroup)(({
-  theme
-}) => {
-  const slideTransition = theme.transitions.create('transform', {
-    duration: slideAnimationDuration,
-    easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)'
-  });
-  return {
-    display: 'block',
-    position: 'relative',
-    overflowX: 'hidden',
-    '& > *': {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0
-    },
-    [`& .${classes['slideEnter-left']}`]: {
-      willChange: 'transform',
-      transform: 'translate(100%)',
-      zIndex: 1
-    },
-    [`& .${classes['slideEnter-right']}`]: {
-      willChange: 'transform',
-      transform: 'translate(-100%)',
-      zIndex: 1
-    },
-    [`& .${classes.slideEnterActive}`]: {
-      transform: 'translate(0%)',
-      transition: slideTransition
-    },
-    [`& .${classes.slideExit}`]: {
-      transform: 'translate(0%)'
-    },
-    [`& .${classes['slideExitActiveLeft-left']}`]: {
-      willChange: 'transform',
-      transform: 'translate(-100%)',
-      transition: slideTransition,
-      zIndex: 0
-    },
-    [`& .${classes['slideExitActiveLeft-right']}`]: {
-      willChange: 'transform',
-      transform: 'translate(100%)',
-      transition: slideTransition,
-      zIndex: 0
-    }
-  };
-});
-/**
- * @ignore - do not document.
- */
-
-const PickersSlideTransition = _ref => {
-  let {
-    children,
-    className,
-    reduceAnimations,
-    slideDirection,
-    transKey
-  } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  if (reduceAnimations) {
-    return /*#__PURE__*/_jsx("div", {
-      className: clsx(classes.root, className),
-      children: children
-    });
-  }
-
-  const transitionClasses = {
-    exit: classes.slideExit,
-    enterActive: classes.slideEnterActive,
-    enter: classes[`slideEnter-${slideDirection}`],
-    exitActive: classes[`slideExitActiveLeft-${slideDirection}`]
-  };
-  return /*#__PURE__*/_jsx(PickersSlideTransitionRoot, {
-    className: clsx(classes.root, className),
-    childFactory: element => /*#__PURE__*/React.cloneElement(element, {
-      classNames: transitionClasses
-    }),
-    children: /*#__PURE__*/_jsx(CSSTransition, _extends({
-      mountOnEnter: true,
-      unmountOnExit: true,
-      timeout: slideAnimationDuration,
-      classNames: transitionClasses
-    }, other, {
-      children: children
-    }), transKey)
-  });
-};
-
-export default PickersSlideTransition;

package/modern/CalendarPicker/shared.js

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

package/modern/CalendarPicker/useCalendarState.js

@@ -1,108 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { validateDate } from '../internal/pickers/date-utils';
-import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';
-export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
-  switch (action.type) {
-    case 'changeMonth':
-      return _extends({}, state, {
-        slideDirection: action.direction,
-        currentMonth: action.newMonth,
-        isMonthSwitchingAnimating: !reduceAnimations
-      });
-
-    case 'finishMonthSwitchingAnimation':
-      return _extends({}, state, {
-        isMonthSwitchingAnimating: false
-      });
-
-    case 'changeFocusedDay':
-      {
-        if (state.focusedDay !== null && utils.isSameDay(action.focusedDay, state.focusedDay)) {
-          return state;
-        }
-
-        const needMonthSwitch = Boolean(action.focusedDay) && !disableSwitchToMonthOnDayFocus && !utils.isSameMonth(state.currentMonth, action.focusedDay);
-        return _extends({}, state, {
-          focusedDay: action.focusedDay,
-          isMonthSwitchingAnimating: needMonthSwitch && !reduceAnimations,
-          currentMonth: needMonthSwitch ? utils.startOfMonth(action.focusedDay) : state.currentMonth,
-          slideDirection: utils.isAfterDay(action.focusedDay, state.currentMonth) ? 'left' : 'right'
-        });
-      }
-
-    default:
-      throw new Error('missing support');
-  }
-};
-export function useCalendarState({
-  date,
-  defaultCalendarMonth,
-  disableFuture,
-  disablePast,
-  disableSwitchToMonthOnDayFocus = false,
-  maxDate,
-  minDate,
-  onMonthChange,
-  reduceAnimations,
-  shouldDisableDate
-}) {
-  const now = useNow();
-  const utils = useUtils();
-  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
-  const [calendarState, dispatch] = React.useReducer(reducerFn, {
-    isMonthSwitchingAnimating: false,
-    focusedDay: date || now,
-    currentMonth: utils.startOfMonth(date ?? defaultCalendarMonth ?? now),
-    slideDirection: 'left'
-  });
-  const handleChangeMonth = React.useCallback(payload => {
-    dispatch(_extends({
-      type: 'changeMonth'
-    }, payload));
-
-    if (onMonthChange) {
-      onMonthChange(payload.newMonth);
-    }
-  }, [onMonthChange]);
-  const changeMonth = React.useCallback(newDate => {
-    const newDateRequested = newDate ?? now;
-
-    if (utils.isSameMonth(newDateRequested, calendarState.currentMonth)) {
-      return;
-    }
-
-    handleChangeMonth({
-      newMonth: utils.startOfMonth(newDateRequested),
-      direction: utils.isAfterDay(newDateRequested, calendarState.currentMonth) ? 'left' : 'right'
-    });
-  }, [calendarState.currentMonth, handleChangeMonth, now, utils]);
-  const isDateDisabled = React.useCallback(day => validateDate(utils, day, {
-    disablePast,
-    disableFuture,
-    minDate,
-    maxDate,
-    shouldDisableDate
-  }) !== null, [disableFuture, disablePast, maxDate, minDate, shouldDisableDate, utils]);
-  const onMonthSwitchingAnimationEnd = React.useCallback(() => {
-    dispatch({
-      type: 'finishMonthSwitchingAnimation'
-    });
-  }, []);
-  const changeFocusedDay = React.useCallback(newFocusedDate => {
-    if (!isDateDisabled(newFocusedDate)) {
-      dispatch({
-        type: 'changeFocusedDay',
-        focusedDay: newFocusedDate
-      });
-    }
-  }, [isDateDisabled]);
-  return {
-    calendarState,
-    changeMonth,
-    changeFocusedDay,
-    isDateDisabled,
-    onMonthSwitchingAnimationEnd,
-    handleChangeMonth
-  };
-}

package/modern/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -1,149 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import Skeleton from '@mui/material/Skeleton';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
-import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function getCalendarPickerSkeletonUtilityClass(slot) {
-  return generateUtilityClass('MuiCalendarPickerSkeleton', slot);
-}
-export const calendarPickerSkeletonClasses = generateUtilityClasses('MuiCalendarPickerSkeleton', ['root', 'week', 'daySkeleton']);
-
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root'],
-    week: ['week'],
-    daySkeleton: ['daySkeleton']
-  };
-  return composeClasses(slots, getCalendarPickerSkeletonUtilityClass, classes);
-};
-
-const CalendarPickerSkeletonRoot = styled('div', {
-  name: 'MuiCalendarPickerSkeleton',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})({
-  alignSelf: 'start'
-});
-const CalendarPickerSkeletonWeek = styled('div', {
-  name: 'MuiCalendarPickerSkeleton',
-  slot: 'Week',
-  overridesResolver: (props, styles) => styles.week
-})({
-  margin: `${DAY_MARGIN}px 0`,
-  display: 'flex',
-  justifyContent: 'center'
-});
-const CalendarPickerSkeletonDay = styled(Skeleton, {
-  name: 'MuiCalendarPickerSkeleton',
-  slot: 'Day',
-  overridesResolver: (props, styles) => styles.daySkeleton
-})(({
-  ownerState
-}) => _extends({
-  margin: `0 ${DAY_MARGIN}px`
-}, ownerState.day === 0 && {
-  visibility: 'hidden'
-}));
-process.env.NODE_ENV !== "production" ? CalendarPickerSkeletonDay.propTypes
-/* remove-proptypes */
-= {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-
-  /**
-   * Optional children to infer width and height from.
-   */
-  children: PropTypes.node,
-
-  /**
-   * @ignore
-   */
-  ownerState: PropTypes.object
-} : void 0;
-const monthMap = [[0, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 0, 0, 0]];
-/**
- *
- * Demos:
- *
- * - [Date Picker](https://mui.com/components/date-picker/)
- *
- * API:
- *
- * - [CalendarPickerSkeleton API](https://mui.com/api/calendar-picker-skeleton/)
- */
-
-function CalendarPickerSkeleton(props) {
-  const _useThemeProps = useThemeProps({
-    props,
-    name: 'MuiCalendarPickerSkeleton'
-  }),
-        {
-    className
-  } = _useThemeProps,
-        other = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
-
-  const classes = useUtilityClasses(props);
-  return /*#__PURE__*/_jsx(CalendarPickerSkeletonRoot, _extends({
-    className: clsx(classes.root, className)
-  }, other, {
-    children: monthMap.map((week, index) => /*#__PURE__*/_jsx(CalendarPickerSkeletonWeek, {
-      className: classes.week,
-      children: week.map((day, index2) => /*#__PURE__*/_jsx(CalendarPickerSkeletonDay, {
-        variant: "circular",
-        width: DAY_SIZE,
-        height: DAY_SIZE,
-        className: classes.daySkeleton,
-        ownerState: {
-          day
-        }
-      }, index2))
-    }, index))
-  }));
-}
-/**
- *
- * Demos:
- *
- * - [Date Picker](https://mui.com/components/date-picker/)
- *
- * API:
- *
- * - [CalendarPickerSkeleton API](https://mui.com/api/calendar-picker-skeleton/)
- */
-
-
-process.env.NODE_ENV !== "production" ? CalendarPickerSkeleton.propTypes
-/* remove-proptypes */
-= {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: 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])
-} : void 0;
-export default CalendarPickerSkeleton;

package/modern/ClockPicker/Clock.js

@@ -1,267 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-var _ClockPin, _Typography, _Typography2;
-
-import * as React from 'react';
-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 ClockPointer from './ClockPointer';
-import { useUtils } from '../internal/pickers/hooks/useUtils';
-import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
-import { getHours, getMinutes } from './shared';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const ClockRoot = styled('div')(({
-  theme
-}) => ({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  margin: theme.spacing(2)
-}));
-const ClockClock = styled('div')({
-  backgroundColor: 'rgba(0,0,0,.07)',
-  borderRadius: '50%',
-  height: 220,
-  width: 220,
-  flexShrink: 0,
-  position: 'relative',
-  pointerEvents: 'none'
-});
-const ClockSquareMask = styled('div')({
-  width: '100%',
-  height: '100%',
-  position: 'absolute',
-  pointerEvents: 'auto',
-  outline: 0,
-  // Disable scroll capabilities.
-  touchAction: 'none',
-  userSelect: 'none',
-  '@media (pointer: fine)': {
-    cursor: 'pointer',
-    borderRadius: '50%'
-  },
-  '&:active': {
-    cursor: 'move'
-  }
-});
-const ClockPin = styled('div')(({
-  theme
-}) => ({
-  width: 6,
-  height: 6,
-  borderRadius: '50%',
-  backgroundColor: theme.palette.primary.main,
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)'
-}));
-const ClockAmButton = styled(IconButton)(({
-  theme,
-  ownerState
-}) => _extends({
-  zIndex: 1,
-  position: 'absolute',
-  bottom: ownerState.ampmInClock ? 64 : 8,
-  left: 8
-}, ownerState.meridiemMode === 'am' && {
-  backgroundColor: theme.palette.primary.main,
-  color: theme.palette.primary.contrastText,
-  '&:hover': {
-    backgroundColor: theme.palette.primary.light
-  }
-}));
-const ClockPmButton = styled(IconButton)(({
-  theme,
-  ownerState
-}) => _extends({
-  zIndex: 1,
-  position: 'absolute',
-  bottom: ownerState.ampmInClock ? 64 : 8,
-  right: 8
-}, ownerState.meridiemMode === 'pm' && {
-  backgroundColor: theme.palette.primary.main,
-  color: theme.palette.primary.contrastText,
-  '&:hover': {
-    backgroundColor: theme.palette.primary.light
-  }
-}));
-/**
- * @ignore - internal component.
- */
-
-function Clock(props) {
-  const {
-    ampm,
-    ampmInClock,
-    autoFocus,
-    children,
-    date,
-    getClockLabelText,
-    handleMeridiemChange,
-    isTimeDisabled,
-    meridiemMode,
-    minutesStep = 1,
-    onChange,
-    selectedId,
-    type,
-    value
-  } = props;
-  const ownerState = props;
-  const utils = useUtils();
-  const wrapperVariant = React.useContext(WrapperVariantContext);
-  const isMoving = React.useRef(false);
-  const isSelectedTimeDisabled = isTimeDisabled(value, type);
-  const isPointerInner = !ampm && type === 'hours' && (value < 1 || value > 12);
-
-  const handleValueChange = (newValue, isFinish) => {
-    if (isTimeDisabled(newValue, type)) {
-      return;
-    }
-
-    onChange(newValue, isFinish);
-  };
-
-  const setTime = (event, isFinish) => {
-    let {
-      offsetX,
-      offsetY
-    } = event;
-
-    if (offsetX === undefined) {
-      const rect = event.target.getBoundingClientRect();
-      offsetX = event.changedTouches[0].clientX - rect.left;
-      offsetY = event.changedTouches[0].clientY - rect.top;
-    }
-
-    const newSelectedValue = type === 'seconds' || type === 'minutes' ? getMinutes(offsetX, offsetY, minutesStep) : getHours(offsetX, offsetY, Boolean(ampm));
-    handleValueChange(newSelectedValue, isFinish);
-  };
-
-  const handleTouchMove = event => {
-    isMoving.current = true;
-    setTime(event, 'shallow');
-  };
-
-  const handleTouchEnd = event => {
-    if (isMoving.current) {
-      setTime(event, 'finish');
-      isMoving.current = false;
-    }
-  };
-
-  const handleMouseMove = event => {
-    // event.buttons & PRIMARY_MOUSE_BUTTON
-    if (event.buttons > 0) {
-      setTime(event.nativeEvent, 'shallow');
-    }
-  };
-
-  const handleMouseUp = event => {
-    if (isMoving.current) {
-      isMoving.current = false;
-    }
-
-    setTime(event.nativeEvent, 'finish');
-  };
-
-  const hasSelected = React.useMemo(() => {
-    if (type === 'hours') {
-      return true;
-    }
-
-    return value % 5 === 0;
-  }, [type, value]);
-  const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
-  const 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(() => {
-    if (autoFocus) {
-      // The ref not being resolved would be a bug in MUI.
-      listboxRef.current.focus();
-    }
-  }, [autoFocus]);
-
-  const handleKeyDown = event => {
-    // TODO: Why this early exit?
-    if (isMoving.current) {
-      return;
-    }
-
-    switch (event.key) {
-      case 'Home':
-        // annulate both hours and minutes
-        handleValueChange(0, 'partial');
-        event.preventDefault();
-        break;
-
-      case 'End':
-        handleValueChange(type === 'minutes' ? 59 : 23, 'partial');
-        event.preventDefault();
-        break;
-
-      case 'ArrowUp':
-        handleValueChange(value + keyboardControlStep, 'partial');
-        event.preventDefault();
-        break;
-
-      case 'ArrowDown':
-        handleValueChange(value - keyboardControlStep, 'partial');
-        event.preventDefault();
-        break;
-
-      default: // do nothing
-
-    }
-  };
-
-  return /*#__PURE__*/_jsxs(ClockRoot, {
-    children: [/*#__PURE__*/_jsxs(ClockClock, {
-      children: [/*#__PURE__*/_jsx(ClockSquareMask, {
-        onTouchMove: handleTouchMove,
-        onTouchEnd: handleTouchEnd,
-        onMouseUp: handleMouseUp,
-        onMouseMove: handleMouseMove
-      }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [_ClockPin || (_ClockPin = /*#__PURE__*/_jsx(ClockPin, {})), date && /*#__PURE__*/_jsx(ClockPointer, {
-          type: type,
-          value: value,
-          isInner: isPointerInner,
-          hasSelected: hasSelected
-        })]
-      }), /*#__PURE__*/_jsx("div", {
-        "aria-activedescendant": selectedId,
-        "aria-label": getClockLabelText(type, date, utils),
-        ref: listboxRef,
-        role: "listbox",
-        onKeyDown: handleKeyDown,
-        tabIndex: 0,
-        children: children
-      })]
-    }), ampm && (wrapperVariant === 'desktop' || ampmInClock) && /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(ClockAmButton, {
-        onClick: () => handleMeridiemChange('am'),
-        disabled: meridiemMode === null,
-        ownerState: ownerState,
-        children: _Typography || (_Typography = /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          children: "AM"
-        }))
-      }), /*#__PURE__*/_jsx(ClockPmButton, {
-        disabled: meridiemMode === null,
-        onClick: () => handleMeridiemChange('pm'),
-        ownerState: ownerState,
-        children: _Typography2 || (_Typography2 = /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          children: "PM"
-        }))
-      })]
-    })]
-  });
-}
-
-export default Clock;

package/modern/ClockPicker/ClockNumber.js

@@ -1,72 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "disabled", "index", "inner", "label", "selected"];
-import * as React from 'react';
-import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/base';
-import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
-const ClockNumberRoot = styled('span')(({
-  theme,
-  ownerState
-}) => _extends({
-  height: CLOCK_HOUR_WIDTH,
-  width: CLOCK_HOUR_WIDTH,
-  position: 'absolute',
-  left: `calc((100% - ${CLOCK_HOUR_WIDTH}px) / 2)`,
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: '50%',
-  color: theme.palette.text.primary,
-  fontFamily: theme.typography.fontFamily,
-  '&:focused': {
-    backgroundColor: theme.palette.background.paper
-  },
-  [`&.${classes.selected}`]: {
-    color: theme.palette.primary.contrastText
-  },
-  [`&.${classes.disabled}`]: {
-    pointerEvents: 'none',
-    color: theme.palette.text.disabled
-  }
-}, ownerState.inner && _extends({}, theme.typography.body2, {
-  color: theme.palette.text.secondary
-})));
-/**
- * @ignore - internal component.
- */
-
-function ClockNumber(props) {
-  const {
-    className,
-    disabled,
-    index,
-    inner,
-    label,
-    selected
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const ownerState = props;
-  const angle = index % 12 / 12 * Math.PI * 2 - Math.PI / 2;
-  const length = (CLOCK_WIDTH - CLOCK_HOUR_WIDTH - 2) / 2 * (inner ? 0.65 : 1);
-  const x = Math.round(Math.cos(angle) * length);
-  const y = Math.round(Math.sin(angle) * length);
-  return /*#__PURE__*/_jsx(ClockNumberRoot, _extends({
-    className: clsx(className, selected && classes.selected, disabled && classes.disabled),
-    "aria-disabled": disabled ? true : undefined,
-    "aria-selected": selected ? true : undefined,
-    role: "option",
-    style: {
-      transform: `translate(${x}px, ${y + (CLOCK_WIDTH - CLOCK_HOUR_WIDTH) / 2}px`
-    },
-    ownerState: ownerState
-  }, other, {
-    children: label
-  }));
-}
-
-export default ClockNumber;