@docsvision/material-ui-pickers 3.2.0-beta.9 → 3.2.1-beta.1

package/dist/material-ui-pickers.js

@@ -0,0 +1,3651 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var tslib = require('tslib');
+var React = require('react');
+var React__default = _interopDefault(React);
+var PropTypes = require('prop-types');
+var clsx = _interopDefault(require('clsx'));
+var Typography = _interopDefault(require('@material-ui/core/Typography'));
+var styles$5 = require('@material-ui/core/styles');
+var Button = _interopDefault(require('@material-ui/core/Button'));
+var Toolbar = _interopDefault(require('@material-ui/core/Toolbar'));
+var IconButton = _interopDefault(require('@material-ui/core/IconButton'));
+var reactTransitionGroup = require('react-transition-group');
+var SvgIcon = _interopDefault(require('@material-ui/core/SvgIcon'));
+var CircularProgress = _interopDefault(require('@material-ui/core/CircularProgress'));
+var core = require('@material-ui/core');
+var DialogActions = _interopDefault(require('@material-ui/core/DialogActions'));
+var DialogContent = _interopDefault(require('@material-ui/core/DialogContent'));
+var Dialog = _interopDefault(require('@material-ui/core/Dialog'));
+var Popover = _interopDefault(require('@material-ui/core/Popover'));
+var TextField = _interopDefault(require('@material-ui/core/TextField'));
+var InputAdornment = _interopDefault(require('@material-ui/core/InputAdornment'));
+var Tab = _interopDefault(require('@material-ui/core/Tab'));
+var Tabs = _interopDefault(require('@material-ui/core/Tabs'));
+var Paper = _interopDefault(require('@material-ui/core/Paper'));
+
+var MuiPickersContext = React.createContext(null);
+var MuiPickersUtilsProvider = function (_a) {
+  var Utils = _a.utils,
+      children = _a.children,
+      locale = _a.locale,
+      libInstance = _a.libInstance;
+  var utils = React.useMemo(function () {
+    return new Utils({
+      locale: locale,
+      moment: libInstance
+    });
+  }, [Utils, libInstance, locale]);
+  return React.createElement(MuiPickersContext.Provider, {
+    value: utils,
+    children: children
+  });
+};
+process.env.NODE_ENV !== "production" ? MuiPickersUtilsProvider.propTypes = {
+  utils: PropTypes.func.isRequired,
+  locale: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  children: PropTypes.oneOfType([PropTypes.element.isRequired, PropTypes.arrayOf(PropTypes.element.isRequired)]).isRequired
+} : void 0;
+
+var checkUtils = function (utils) {
+  if (!utils) {
+    // tslint:disable-next-line
+    throw new Error('Can not find utils in context. You either a) forgot to wrap your component tree in MuiPickersUtilsProvider; or b) mixed named and direct file imports.  Recommendation: use named imports from the module index.');
+  }
+};
+function useUtils() {
+  var utils = React.useContext(MuiPickersContext);
+  checkUtils(utils);
+  return utils;
+}
+
+var useStyles = styles$5.makeStyles(function (theme) {
+  var textColor = theme.palette.type === 'light' ? theme.palette.primary.contrastText : theme.palette.getContrastText(theme.palette.background.default);
+  return {
+    toolbarTxt: {
+      color: styles$5.fade(textColor, 0.54)
+    },
+    toolbarBtnSelected: {
+      color: textColor
+    }
+  };
+}, {
+  name: 'MuiPickersToolbarText'
+});
+
+var ToolbarText = function (_a) {
+  var _b;
+
+  var selected = _a.selected,
+      label = _a.label,
+      _c = _a.className,
+      className = _c === void 0 ? null : _c,
+      other = tslib.__rest(_a, ["selected", "label", "className"]);
+
+  var classes = useStyles();
+  return React.createElement(Typography, tslib.__assign({
+    children: label,
+    className: clsx(classes.toolbarTxt, className, (_b = {}, _b[classes.toolbarBtnSelected] = selected, _b))
+  }, other));
+};
+
+var ToolbarButton = function (_a) {
+  var classes = _a.classes,
+      _b = _a.className,
+      className = _b === void 0 ? null : _b,
+      label = _a.label,
+      selected = _a.selected,
+      variant = _a.variant,
+      align = _a.align,
+      typographyClassName = _a.typographyClassName,
+      other = tslib.__rest(_a, ["classes", "className", "label", "selected", "variant", "align", "typographyClassName"]);
+
+  return React.createElement(Button, tslib.__assign({
+    variant: "text",
+    className: clsx(classes.toolbarBtn, className)
+  }, other), React.createElement(ToolbarText, {
+    align: align,
+    className: typographyClassName,
+    variant: variant,
+    label: label,
+    selected: selected
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
+  selected: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  classes: PropTypes.any.isRequired,
+  className: PropTypes.string,
+  innerRef: PropTypes.any
+} : void 0;
+ToolbarButton.defaultProps = {
+  className: ''
+};
+var styles = styles$5.createStyles({
+  toolbarBtn: {
+    padding: 0,
+    minWidth: '16px',
+    textTransform: 'none'
+  }
+});
+var ToolbarButton$1 = styles$5.withStyles(styles, {
+  name: 'MuiPickersToolbarButton'
+})(ToolbarButton);
+
+var useStyles$1 = styles$5.makeStyles(function (theme) {
+  return {
+    toolbar: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 100,
+      backgroundColor: theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background.default
+    },
+    toolbarLandscape: {
+      height: 'auto',
+      maxWidth: 150,
+      padding: 8,
+      justifyContent: 'flex-start'
+    }
+  };
+}, {
+  name: 'MuiPickersToolbar'
+});
+
+var PickerToolbar = function (_a) {
+  var _b;
+
+  var children = _a.children,
+      isLandscape = _a.isLandscape,
+      _c = _a.className,
+      className = _c === void 0 ? null : _c,
+      other = tslib.__rest(_a, ["children", "isLandscape", "className"]);
+
+  var classes = useStyles$1();
+  return React.createElement(Toolbar, tslib.__assign({
+    className: clsx(classes.toolbar, (_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b), className)
+  }, other), children);
+};
+
+/** Use it instead of .includes method for IE support */
+function arrayIncludes(array, itemOrItems) {
+  if (Array.isArray(itemOrItems)) {
+    return itemOrItems.every(function (item) {
+      return array.indexOf(item) !== -1;
+    });
+  }
+
+  return array.indexOf(itemOrItems) !== -1;
+}
+
+var findClosestEnabledDate = function (_a) {
+  var date = _a.date,
+      utils = _a.utils,
+      minDate = _a.minDate,
+      maxDate = _a.maxDate,
+      disableFuture = _a.disableFuture,
+      disablePast = _a.disablePast,
+      shouldDisableDate = _a.shouldDisableDate;
+  var today = utils.startOfDay(utils.date());
+
+  if (disablePast && utils.isBefore(minDate, today)) {
+    minDate = today;
+  }
+
+  if (disableFuture && utils.isAfter(maxDate, today)) {
+    maxDate = today;
+  }
+
+  var forward = date;
+  var backward = date;
+
+  if (utils.isBefore(date, minDate)) {
+    forward = utils.date(minDate);
+    backward = null;
+  }
+
+  if (utils.isAfter(date, maxDate)) {
+    if (backward) {
+      backward = utils.date(maxDate);
+    }
+
+    forward = null;
+  }
+
+  while (forward || backward) {
+    if (forward && utils.isAfter(forward, maxDate)) {
+      forward = null;
+    }
+
+    if (backward && utils.isBefore(backward, minDate)) {
+      backward = null;
+    }
+
+    if (forward) {
+      if (!shouldDisableDate(forward)) {
+        return forward;
+      }
+
+      forward = utils.addDays(forward, 1);
+    }
+
+    if (backward) {
+      if (!shouldDisableDate(backward)) {
+        return backward;
+      }
+
+      backward = utils.addDays(backward, -1);
+    }
+  }
+
+  return null;
+};
+var isYearOnlyView = function (views) {
+  return views.length === 1 && views[0] === 'year';
+};
+var isYearAndMonthViews = function (views) {
+  return views.length === 2 && arrayIncludes(views, 'month') && arrayIncludes(views, 'year');
+};
+var getFormatByViews = function (views, utils) {
+  if (isYearOnlyView(views)) {
+    return utils.yearFormat;
+  }
+
+  if (isYearAndMonthViews(views)) {
+    return utils.yearMonthFormat;
+  }
+
+  return utils.dateFormat;
+};
+
+var useStyles$2 = styles$5.makeStyles({
+  toolbar: {
+    flexDirection: 'column',
+    alignItems: 'flex-start'
+  },
+  toolbarLandscape: {
+    padding: 16
+  },
+  dateLandscape: {
+    marginRight: 16
+  }
+}, {
+  name: 'MuiPickersDatePickerRoot'
+});
+var DatePickerToolbar = function (_a) {
+  var _b, _c;
+
+  var date = _a.date,
+      views = _a.views,
+      setOpenView = _a.setOpenView,
+      isLandscape = _a.isLandscape,
+      openView = _a.openView;
+  var utils = useUtils();
+  var classes = useStyles$2();
+  var isYearOnly = React.useMemo(function () {
+    return isYearOnlyView(views);
+  }, [views]);
+  var isYearAndMonth = React.useMemo(function () {
+    return isYearAndMonthViews(views);
+  }, [views]);
+  return React.createElement(PickerToolbar, {
+    isLandscape: isLandscape,
+    className: clsx((_b = {}, _b[classes.toolbar] = !isYearOnly, _b[classes.toolbarLandscape] = isLandscape, _b))
+  }, React.createElement(ToolbarButton$1, {
+    variant: isYearOnly ? 'h3' : 'subtitle1',
+    onClick: function () {
+      return setOpenView('year');
+    },
+    selected: openView === 'year',
+    label: utils.getYearText(date)
+  }), !isYearOnly && !isYearAndMonth && React.createElement(ToolbarButton$1, {
+    variant: "h4",
+    selected: openView === 'date',
+    onClick: function () {
+      return setOpenView('date');
+    },
+    align: isLandscape ? 'left' : 'center',
+    label: utils.getDatePickerHeaderText(date),
+    className: clsx((_c = {}, _c[classes.dateLandscape] = isLandscape, _c))
+  }), isYearAndMonth && React.createElement(ToolbarButton$1, {
+    variant: "h4",
+    onClick: function () {
+      return setOpenView('month');
+    },
+    selected: openView === 'month',
+    label: utils.getMonthText(date)
+  }));
+};
+
+var date = PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]);
+var datePickerView = PropTypes.oneOf(['year', 'month', 'day']);
+/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
+
+var timePickerDefaultProps = {
+  ampm: true,
+  invalidDateMessage: 'Invalid Time Format'
+};
+var datePickerDefaultProps = {
+  minDate: new Date('1900-01-01'),
+  maxDate: new Date('2200-01-01'),
+  invalidDateMessage: 'Invalid Date Format',
+  minDateMessage: 'Date should not be before minimal date',
+  maxDateMessage: 'Date should not be after maximal date',
+  allowKeyboardControl: true
+};
+var dateTimePickerDefaultProps = tslib.__assign(tslib.__assign(tslib.__assign({}, timePickerDefaultProps), datePickerDefaultProps), {
+  showTabs: true
+});
+
+var useStyles$3 = styles$5.makeStyles(function (theme) {
+  return {
+    day: {
+      width: 36,
+      height: 36,
+      fontSize: theme.typography.caption.fontSize,
+      margin: '0 2px',
+      color: theme.palette.text.primary,
+      fontWeight: theme.typography.fontWeightMedium,
+      padding: 0
+    },
+    hidden: {
+      opacity: 0,
+      pointerEvents: 'none'
+    },
+    current: {
+      color: theme.palette.primary.main,
+      fontWeight: 600
+    },
+    daySelected: {
+      color: theme.palette.primary.contrastText,
+      backgroundColor: theme.palette.primary.main,
+      fontWeight: theme.typography.fontWeightMedium,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main
+      }
+    },
+    dayDisabled: {
+      pointerEvents: 'none',
+      color: theme.palette.text.hint
+    }
+  };
+}, {
+  name: 'MuiPickersDay'
+});
+var Day = function (_a) {
+  var _b;
+
+  var children = _a.children,
+      disabled = _a.disabled,
+      hidden = _a.hidden,
+      current = _a.current,
+      selected = _a.selected,
+      other = tslib.__rest(_a, ["children", "disabled", "hidden", "current", "selected"]);
+
+  var classes = useStyles$3();
+  var className = clsx(classes.day, (_b = {}, _b[classes.hidden] = hidden, _b[classes.current] = current, _b[classes.daySelected] = selected, _b[classes.dayDisabled] = disabled, _b));
+  return React.createElement(IconButton, tslib.__assign({
+    className: className,
+    tabIndex: hidden || disabled ? -1 : 0
+  }, other), React.createElement(Typography, {
+    variant: "body2",
+    color: "inherit"
+  }, children));
+};
+Day.displayName = 'Day';
+process.env.NODE_ENV !== "production" ? Day.propTypes = {
+  current: PropTypes.bool,
+  disabled: PropTypes.bool,
+  hidden: PropTypes.bool,
+  selected: PropTypes.bool
+} : void 0;
+Day.defaultProps = {
+  disabled: false,
+  hidden: false,
+  current: false,
+  selected: false
+};
+
+var DayWrapper = function (_a) {
+  var children = _a.children,
+      value = _a.value,
+      disabled = _a.disabled,
+      onSelect = _a.onSelect,
+      dayInCurrentMonth = _a.dayInCurrentMonth,
+      other = tslib.__rest(_a, ["children", "value", "disabled", "onSelect", "dayInCurrentMonth"]);
+
+  var handleClick = React.useCallback(function () {
+    return onSelect(value);
+  }, [onSelect, value]);
+  return React.createElement("div", tslib.__assign({
+    role: "presentation",
+    onClick: dayInCurrentMonth && !disabled ? handleClick : undefined,
+    onKeyPress: dayInCurrentMonth && !disabled ? handleClick : undefined
+  }, other), children);
+};
+
+var animationDuration = 350;
+var useStyles$4 = styles$5.makeStyles(function (theme) {
+  var slideTransition = theme.transitions.create('transform', {
+    duration: animationDuration,
+    easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)'
+  });
+  return {
+    transitionContainer: {
+      display: 'block',
+      position: 'relative',
+      '& > *': {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        left: 0
+      }
+    },
+    'slideEnter-left': {
+      willChange: 'transform',
+      transform: 'translate(100%)'
+    },
+    'slideEnter-right': {
+      willChange: 'transform',
+      transform: 'translate(-100%)'
+    },
+    slideEnterActive: {
+      transform: 'translate(0%)',
+      transition: slideTransition
+    },
+    slideExit: {
+      transform: 'translate(0%)'
+    },
+    'slideExitActiveLeft-left': {
+      willChange: 'transform',
+      transform: 'translate(-200%)',
+      transition: slideTransition
+    },
+    'slideExitActiveLeft-right': {
+      willChange: 'transform',
+      transform: 'translate(200%)',
+      transition: slideTransition
+    }
+  };
+}, {
+  name: 'MuiPickersSlideTransition'
+});
+
+var SlideTransition = function (_a) {
+  var children = _a.children,
+      transKey = _a.transKey,
+      slideDirection = _a.slideDirection,
+      _b = _a.className,
+      className = _b === void 0 ? null : _b;
+  var classes = useStyles$4();
+  var transitionClasses = {
+    exit: classes.slideExit,
+    enterActive: classes.slideEnterActive,
+    // @ts-ignore
+    enter: classes['slideEnter-' + slideDirection],
+    // @ts-ignore
+    exitActive: classes['slideExitActiveLeft-' + slideDirection]
+  };
+  return React.createElement(reactTransitionGroup.TransitionGroup, {
+    className: clsx(classes.transitionContainer, className),
+    childFactory: function (element) {
+      return React.cloneElement(element, {
+        classNames: transitionClasses
+      });
+    }
+  }, React.createElement(reactTransitionGroup.CSSTransition, {
+    mountOnEnter: true,
+    unmountOnExit: true,
+    key: transKey + slideDirection,
+    timeout: animationDuration,
+    classNames: transitionClasses,
+    children: children
+  }));
+};
+
+var ArrowLeftIcon = function (props) {
+  return React__default.createElement(SvgIcon, tslib.__assign({}, props), React__default.createElement("path", {
+    d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
+  }), React__default.createElement("path", {
+    fill: "none",
+    d: "M0 0h24v24H0V0z"
+  }));
+};
+
+var ArrowRightIcon = function (props) {
+  return React__default.createElement(SvgIcon, tslib.__assign({}, props), React__default.createElement("path", {
+    d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+  }), React__default.createElement("path", {
+    fill: "none",
+    d: "M0 0h24v24H0V0z"
+  }));
+};
+
+var useStyles$5 = styles$5.makeStyles(function (theme) {
+  return {
+    switchHeader: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginTop: theme.spacing(0.5),
+      marginBottom: theme.spacing(1)
+    },
+    transitionContainer: {
+      width: '100%',
+      overflow: 'hidden',
+      height: 23
+    },
+    iconButton: {
+      zIndex: 1,
+      backgroundColor: theme.palette.background.paper
+    },
+    daysHeader: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      maxHeight: 16
+    },
+    dayLabel: {
+      width: 36,
+      margin: '0 2px',
+      textAlign: 'center',
+      color: theme.palette.text.hint
+    }
+  };
+}, {
+  name: 'MuiPickersCalendarHeader'
+});
+var CalendarHeader = function (_a) {
+  var currentMonth = _a.currentMonth,
+      onMonthChange = _a.onMonthChange,
+      leftArrowIcon = _a.leftArrowIcon,
+      rightArrowIcon = _a.rightArrowIcon,
+      leftArrowButtonProps = _a.leftArrowButtonProps,
+      rightArrowButtonProps = _a.rightArrowButtonProps,
+      disablePrevMonth = _a.disablePrevMonth,
+      disableNextMonth = _a.disableNextMonth,
+      slideDirection = _a.slideDirection;
+  var utils = useUtils();
+  var classes = useStyles$5();
+  var theme = styles$5.useTheme();
+  var rtl = theme.direction === 'rtl';
+
+  var selectNextMonth = function () {
+    return onMonthChange(utils.getNextMonth(currentMonth), 'left');
+  };
+
+  var selectPreviousMonth = function () {
+    return onMonthChange(utils.getPreviousMonth(currentMonth), 'right');
+  };
+
+  return React.createElement("div", null, React.createElement("div", {
+    className: classes.switchHeader
+  }, React.createElement(IconButton, tslib.__assign({}, leftArrowButtonProps, {
+    disabled: disablePrevMonth,
+    onClick: selectPreviousMonth,
+    className: classes.iconButton
+  }), rtl ? rightArrowIcon : leftArrowIcon), React.createElement(SlideTransition, {
+    slideDirection: slideDirection,
+    transKey: currentMonth.toString(),
+    className: classes.transitionContainer
+  }, React.createElement(Typography, {
+    align: "center",
+    variant: "body1"
+  }, utils.getCalendarHeaderText(currentMonth))), React.createElement(IconButton, tslib.__assign({}, rightArrowButtonProps, {
+    disabled: disableNextMonth,
+    onClick: selectNextMonth,
+    className: classes.iconButton
+  }), rtl ? leftArrowIcon : rightArrowIcon)), React.createElement("div", {
+    className: classes.daysHeader
+  }, utils.getWeekdays().map(function (day, index) {
+    return React.createElement(Typography, {
+      key: index,
+      variant: "caption",
+      className: classes.dayLabel
+    }, day);
+  })));
+};
+CalendarHeader.displayName = 'CalendarHeader';
+process.env.NODE_ENV !== "production" ? CalendarHeader.propTypes = {
+  leftArrowIcon: PropTypes.node,
+  rightArrowIcon: PropTypes.node,
+  disablePrevMonth: PropTypes.bool,
+  disableNextMonth: PropTypes.bool
+} : void 0;
+CalendarHeader.defaultProps = {
+  leftArrowIcon: React.createElement(ArrowLeftIcon, null),
+  rightArrowIcon: React.createElement(ArrowRightIcon, null),
+  disablePrevMonth: false,
+  disableNextMonth: false
+};
+
+var useIsomorphicEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+function runKeyHandler(e, keyHandlers) {
+  var handler = keyHandlers[e.key];
+
+  if (handler) {
+    handler(); // if event was handled prevent other side effects (e.g. page scroll)
+
+    e.preventDefault();
+  }
+}
+function useKeyDown(active, keyHandlers) {
+  var keyHandlersRef = React.useRef(keyHandlers);
+  useIsomorphicEffect(function () {
+    keyHandlersRef.current = keyHandlers;
+  });
+  React.useEffect(function () {
+    if (active) {
+      var handleKeyDown_1 = function (event) {
+        runKeyHandler(event, keyHandlers);
+      };
+
+      window.addEventListener('keydown', handleKeyDown_1);
+      return function () {
+        window.removeEventListener('keydown', handleKeyDown_1);
+      };
+    }
+  }, [active, keyHandlers]);
+}
+
+var withUtils = function () {
+  return function (Component) {
+    var WithUtils = function (props) {
+      var utils = useUtils();
+      return React.createElement(Component, tslib.__assign({
+        utils: utils
+      }, props));
+    };
+
+    WithUtils.displayName = "WithUtils(" + (Component.displayName || Component.name) + ")";
+    return WithUtils;
+  };
+};
+
+var KeyDownListener = function (_a) {
+  var onKeyDown = _a.onKeyDown;
+  React.useEffect(function () {
+    window.addEventListener('keydown', onKeyDown);
+    return function () {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [onKeyDown]);
+  return null;
+};
+
+var Calendar =
+/** @class */
+function (_super) {
+  tslib.__extends(Calendar, _super);
+
+  function Calendar() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      slideDirection: 'left',
+      currentMonth: _this.props.utils.startOfMonth(_this.props.date),
+      loadingQueue: 0
+    };
+
+    _this.pushToLoadingQueue = function () {
+      var loadingQueue = _this.state.loadingQueue + 1;
+
+      _this.setState({
+        loadingQueue: loadingQueue
+      });
+    };
+
+    _this.popFromLoadingQueue = function () {
+      var loadingQueue = _this.state.loadingQueue;
+      loadingQueue = loadingQueue <= 0 ? 0 : loadingQueue - 1;
+
+      _this.setState({
+        loadingQueue: loadingQueue
+      });
+    };
+
+    _this.handleChangeMonth = function (newMonth, slideDirection) {
+      _this.setState({
+        currentMonth: newMonth,
+        slideDirection: slideDirection
+      });
+
+      if (_this.props.onMonthChange) {
+        var returnVal = _this.props.onMonthChange(newMonth);
+
+        if (returnVal) {
+          _this.pushToLoadingQueue();
+
+          returnVal.then(function () {
+            _this.popFromLoadingQueue();
+          });
+        }
+      }
+    };
+
+    _this.validateMinMaxDate = function (day) {
+      var _a = _this.props,
+          minDate = _a.minDate,
+          maxDate = _a.maxDate,
+          utils = _a.utils,
+          disableFuture = _a.disableFuture,
+          disablePast = _a.disablePast;
+      var now = utils.date();
+      var moment = utils.moment;
+      return Boolean(disableFuture && utils.isAfterDay(day, now) || disablePast && moment(day).isBefore(now, 'second') || minDate && utils.isBeforeDay(day, utils.date(minDate)) || maxDate && utils.isAfterDay(day, utils.date(maxDate)));
+    };
+
+    _this.shouldDisablePrevMonth = function () {
+      var _a = _this.props,
+          utils = _a.utils,
+          disablePast = _a.disablePast,
+          minDate = _a.minDate;
+      var now = utils.date();
+      var firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, utils.date(minDate)) ? now : utils.date(minDate));
+      return !utils.isBefore(firstEnabledMonth, _this.state.currentMonth);
+    };
+
+    _this.shouldDisableNextMonth = function () {
+      var _a = _this.props,
+          utils = _a.utils,
+          disableFuture = _a.disableFuture,
+          maxDate = _a.maxDate;
+      var now = utils.date();
+      var lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, utils.date(maxDate)) ? now : utils.date(maxDate));
+      return !utils.isAfter(lastEnabledMonth, _this.state.currentMonth);
+    };
+
+    _this.shouldDisableDate = function (day) {
+      var shouldDisableDate = _this.props.shouldDisableDate;
+      return _this.validateMinMaxDate(day) || Boolean(shouldDisableDate && shouldDisableDate(day));
+    };
+
+    _this.handleDaySelect = function (day, isFinish) {
+      if (isFinish === void 0) {
+        isFinish = true;
+      }
+
+      var _a = _this.props,
+          date = _a.date,
+          utils = _a.utils;
+
+      _this.props.onChange(utils.mergeDateAndTime(day, date), isFinish);
+    };
+
+    _this.moveToDay = function (day) {
+      var utils = _this.props.utils;
+
+      if (day && !_this.shouldDisableDate(day)) {
+        if (utils.getMonth(day) !== utils.getMonth(_this.state.currentMonth)) {
+          _this.handleChangeMonth(utils.startOfMonth(day), 'left');
+        }
+
+        _this.handleDaySelect(day, false);
+      }
+    };
+
+    _this.handleKeyDown = function (event) {
+      var _a = _this.props,
+          theme = _a.theme,
+          date = _a.date,
+          utils = _a.utils;
+      runKeyHandler(event, {
+        ArrowUp: function () {
+          return _this.moveToDay(utils.addDays(date, -7));
+        },
+        ArrowDown: function () {
+          return _this.moveToDay(utils.addDays(date, 7));
+        },
+        ArrowLeft: function () {
+          return _this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? -1 : 1));
+        },
+        ArrowRight: function () {
+          return _this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? 1 : -1));
+        }
+      });
+    };
+
+    _this.renderWeeks = function () {
+      var _a = _this.props,
+          utils = _a.utils,
+          classes = _a.classes;
+      var weeks = utils.getWeekArray(_this.state.currentMonth);
+      return weeks.map(function (week) {
+        return React.createElement("div", {
+          key: "week-" + week[0].toString(),
+          className: classes.week
+        }, _this.renderDays(week));
+      });
+    };
+
+    _this.renderDays = function (week) {
+      var _a = _this.props,
+          date = _a.date,
+          renderDay = _a.renderDay,
+          utils = _a.utils;
+      var now = utils.date();
+      var selectedDate = utils.startOfDay(date);
+      var currentMonthNumber = utils.getMonth(_this.state.currentMonth);
+      return week.map(function (day) {
+        var disabled = _this.shouldDisableDate(day);
+
+        var isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
+        var dayComponent = React.createElement(Day, {
+          disabled: disabled,
+          current: utils.isSameDay(day, now),
+          hidden: !isDayInCurrentMonth,
+          selected: utils.isSameDay(selectedDate, day)
+        }, utils.getDayText(day));
+
+        if (renderDay) {
+          dayComponent = renderDay(day, selectedDate, isDayInCurrentMonth, dayComponent);
+        }
+
+        return React.createElement(DayWrapper, {
+          value: day,
+          key: day.toString(),
+          disabled: disabled,
+          dayInCurrentMonth: isDayInCurrentMonth,
+          onSelect: _this.handleDaySelect
+        }, dayComponent);
+      });
+    };
+
+    return _this;
+  }
+
+  Calendar.getDerivedStateFromProps = function (nextProps, state) {
+    var utils = nextProps.utils,
+        nextDate = nextProps.date;
+
+    if (!utils.isEqual(nextDate, state.lastDate)) {
+      var nextMonth = utils.getMonth(nextDate);
+      var lastDate = state.lastDate || nextDate;
+      var lastMonth = utils.getMonth(lastDate);
+      return {
+        lastDate: nextDate,
+        currentMonth: nextProps.utils.startOfMonth(nextDate),
+        // prettier-ignore
+        slideDirection: nextMonth === lastMonth ? state.slideDirection : utils.isAfterDay(nextDate, lastDate) ? 'left' : 'right'
+      };
+    }
+
+    return null;
+  };
+
+  Calendar.prototype.componentDidMount = function () {
+    var _a = this.props,
+        date = _a.date,
+        minDate = _a.minDate,
+        maxDate = _a.maxDate,
+        utils = _a.utils,
+        disablePast = _a.disablePast,
+        disableFuture = _a.disableFuture;
+
+    if (this.shouldDisableDate(date)) {
+      var closestEnabledDate = findClosestEnabledDate({
+        date: date,
+        utils: utils,
+        minDate: utils.date(minDate),
+        maxDate: utils.date(maxDate),
+        disablePast: Boolean(disablePast),
+        disableFuture: Boolean(disableFuture),
+        shouldDisableDate: this.shouldDisableDate
+      });
+      this.handleDaySelect(closestEnabledDate, false);
+    }
+  };
+
+  Calendar.prototype.render = function () {
+    var _a = this.state,
+        currentMonth = _a.currentMonth,
+        slideDirection = _a.slideDirection;
+    var _b = this.props,
+        classes = _b.classes,
+        allowKeyboardControl = _b.allowKeyboardControl,
+        leftArrowButtonProps = _b.leftArrowButtonProps,
+        leftArrowIcon = _b.leftArrowIcon,
+        rightArrowButtonProps = _b.rightArrowButtonProps,
+        rightArrowIcon = _b.rightArrowIcon,
+        loadingIndicator = _b.loadingIndicator;
+    var loadingElement = loadingIndicator ? loadingIndicator : React.createElement(CircularProgress, null);
+    return React.createElement(React.Fragment, null, allowKeyboardControl && React.createElement(KeyDownListener, {
+      onKeyDown: this.handleKeyDown
+    }), React.createElement(CalendarHeader, {
+      currentMonth: currentMonth,
+      slideDirection: slideDirection,
+      onMonthChange: this.handleChangeMonth,
+      leftArrowIcon: leftArrowIcon,
+      leftArrowButtonProps: leftArrowButtonProps,
+      rightArrowIcon: rightArrowIcon,
+      rightArrowButtonProps: rightArrowButtonProps,
+      disablePrevMonth: this.shouldDisablePrevMonth(),
+      disableNextMonth: this.shouldDisableNextMonth()
+    }), React.createElement(SlideTransition, {
+      slideDirection: slideDirection,
+      transKey: currentMonth.toString(),
+      className: classes.transitionContainer
+    }, React.createElement(React.Fragment, null, this.state.loadingQueue > 0 && React.createElement("div", {
+      className: classes.progressContainer
+    }, loadingElement) || React.createElement("div", null, this.renderWeeks()))));
+  };
+
+  process.env.NODE_ENV !== "production" ? Calendar.propTypes = {
+    renderDay: PropTypes.func,
+    shouldDisableDate: PropTypes.func,
+    allowKeyboardControl: PropTypes.bool
+  } : void 0;
+  Calendar.defaultProps = {
+    minDate: new Date('1900-01-01'),
+    maxDate: new Date('2200-01-01'),
+    disablePast: false,
+    disableFuture: false,
+    allowKeyboardControl: true
+  };
+  return Calendar;
+}(React.Component);
+var styles$1 = function (theme) {
+  return {
+    transitionContainer: {
+      minHeight: 36 * 6,
+      marginTop: theme.spacing(1.5)
+    },
+    progressContainer: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    week: {
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  };
+};
+var Calendar$1 = styles$5.withStyles(styles$1, {
+  name: 'MuiPickersCalendar',
+  withTheme: true
+})(withUtils()(Calendar));
+
+function useViews(views, openTo, onChange) {
+  var _a = React.useState(openTo && arrayIncludes(views, openTo) ? openTo : views[0]),
+      openView = _a[0],
+      setOpenView = _a[1];
+
+  var handleChangeAndOpenNext = React.useCallback(function (date, isFinish) {
+    var nextViewToOpen = views[views.indexOf(openView) + 1];
+
+    if (isFinish && nextViewToOpen) {
+      // do not close picker if needs to show next view
+      onChange(date, false);
+      setOpenView(nextViewToOpen);
+      return;
+    }
+
+    onChange(date, Boolean(isFinish));
+  }, [onChange, openView, views]);
+  return {
+    handleChangeAndOpenNext: handleChangeAndOpenNext,
+    openView: openView,
+    setOpenView: setOpenView
+  };
+}
+
+var useStyles$6 = styles$5.makeStyles(function (theme) {
+  return {
+    root: {
+      height: 40,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      outline: 'none',
+      '&:focus': {
+        color: theme.palette.primary.main,
+        fontWeight: theme.typography.fontWeightMedium
+      }
+    },
+    yearSelected: {
+      margin: '10px 0',
+      fontWeight: theme.typography.fontWeightMedium
+    },
+    yearDisabled: {
+      pointerEvents: 'none',
+      color: theme.palette.text.hint
+    }
+  };
+}, {
+  name: 'MuiPickersYear'
+});
+var Year = function (_a) {
+  var _b;
+
+  var onSelect = _a.onSelect,
+      forwardedRef = _a.forwardedRef,
+      value = _a.value,
+      selected = _a.selected,
+      disabled = _a.disabled,
+      children = _a.children,
+      other = tslib.__rest(_a, ["onSelect", "forwardedRef", "value", "selected", "disabled", "children"]);
+
+  var classes = useStyles$6();
+  var handleClick = React.useCallback(function () {
+    return onSelect(value);
+  }, [onSelect, value]);
+  return React.createElement(Typography, tslib.__assign({
+    role: "button",
+    component: "div",
+    tabIndex: disabled ? -1 : 0,
+    onClick: handleClick,
+    onKeyPress: handleClick,
+    color: selected ? 'primary' : undefined,
+    variant: selected ? 'h5' : 'subtitle1',
+    children: children,
+    ref: forwardedRef,
+    className: clsx(classes.root, (_b = {}, _b[classes.yearSelected] = selected, _b[classes.yearDisabled] = disabled, _b))
+  }, other));
+};
+Year.displayName = 'Year';
+var Year$1 = React.forwardRef(function (props, ref) {
+  return React.createElement(Year, tslib.__assign({}, props, {
+    forwardedRef: ref
+  }));
+});
+
+var DIALOG_WIDTH = 310;
+var DIALOG_WIDTH_WIDER = 325;
+var VIEW_HEIGHT = 305;
+
+var useStyles$7 = core.makeStyles(function (theme) {
+  return {
+    staticWrapperRoot: {
+      overflow: 'hidden',
+      minWidth: DIALOG_WIDTH,
+      display: 'flex',
+      flexDirection: 'column',
+      backgroundColor: theme.palette.background.paper
+    }
+  };
+}, {
+  name: 'MuiPickersStaticWrapper'
+});
+var StaticWrapper = function (_a) {
+  var children = _a.children;
+  var classes = useStyles$7();
+  return React.createElement("div", {
+    className: classes.staticWrapperRoot,
+    children: children
+  });
+};
+
+var ModalDialog = function (_a) {
+  var _b, _c;
+
+  var children = _a.children,
+      classes = _a.classes,
+      onAccept = _a.onAccept,
+      onDismiss = _a.onDismiss,
+      onClear = _a.onClear,
+      onSetToday = _a.onSetToday,
+      okLabel = _a.okLabel,
+      cancelLabel = _a.cancelLabel,
+      clearLabel = _a.clearLabel,
+      todayLabel = _a.todayLabel,
+      clearable = _a.clearable,
+      showTodayButton = _a.showTodayButton,
+      showTabs = _a.showTabs,
+      wider = _a.wider,
+      other = tslib.__rest(_a, ["children", "classes", "onAccept", "onDismiss", "onClear", "onSetToday", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "clearable", "showTodayButton", "showTabs", "wider"]);
+
+  return React.createElement(Dialog, tslib.__assign({
+    role: "dialog",
+    onClose: onDismiss,
+    classes: {
+      paper: clsx(classes.dialogRoot, (_b = {}, _b[classes.dialogRootWider] = wider, _b))
+    }
+  }, other), React.createElement(DialogContent, {
+    children: children,
+    className: classes.dialog
+  }), React.createElement(DialogActions, {
+    classes: {
+      root: clsx((_c = {}, _c[classes.withAdditionalAction] = clearable || showTodayButton, _c))
+    }
+  }, clearable && React.createElement(Button, {
+    color: "primary",
+    onClick: onClear
+  }, clearLabel), !clearable && showTodayButton && React.createElement(Button, {
+    color: "primary",
+    onClick: onSetToday
+  }, todayLabel), cancelLabel && React.createElement(Button, {
+    color: "primary",
+    onClick: onDismiss
+  }, cancelLabel), okLabel && React.createElement(Button, {
+    color: "primary",
+    onClick: onAccept
+  }, okLabel)));
+};
+ModalDialog.displayName = 'ModalDialog';
+var styles$2 = styles$5.createStyles({
+  dialogRoot: {
+    minWidth: DIALOG_WIDTH
+  },
+  dialogRootWider: {// minWidth: DIALOG_WIDTH_WIDER,
+  },
+  dialog: {
+    '&:first-child': {
+      padding: 0
+    }
+  },
+  withAdditionalAction: {
+    // set justifyContent to default value to fix IE11 layout bug
+    // see https://github.com/dmtrKovalenko/material-ui-pickers/pull/267
+    justifyContent: 'flex-start',
+    '& > *:first-child': {
+      marginRight: 'auto'
+    }
+  }
+});
+var ModalDialog$1 = styles$5.withStyles(styles$2, {
+  name: 'MuiPickersModal'
+})(ModalDialog);
+
+var ModalWrapper = function (_a) {
+  var open = _a.open,
+      children = _a.children,
+      okLabel = _a.okLabel,
+      cancelLabel = _a.cancelLabel,
+      clearLabel = _a.clearLabel,
+      todayLabel = _a.todayLabel,
+      showTodayButton = _a.showTodayButton,
+      clearable = _a.clearable,
+      DialogProps = _a.DialogProps,
+      showTabs = _a.showTabs,
+      wider = _a.wider,
+      InputComponent = _a.InputComponent,
+      DateInputProps = _a.DateInputProps,
+      onClear = _a.onClear,
+      onAccept = _a.onAccept,
+      onDismiss = _a.onDismiss,
+      onSetToday = _a.onSetToday,
+      other = tslib.__rest(_a, ["open", "children", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "showTodayButton", "clearable", "DialogProps", "showTabs", "wider", "InputComponent", "DateInputProps", "onClear", "onAccept", "onDismiss", "onSetToday"]);
+
+  useKeyDown(open, {
+    Enter: onAccept
+  });
+  return React.createElement(React.Fragment, null, React.createElement(InputComponent, tslib.__assign({}, other, DateInputProps)), React.createElement(ModalDialog$1, tslib.__assign({
+    wider: wider,
+    showTabs: showTabs,
+    open: open,
+    onClear: onClear,
+    onAccept: onAccept,
+    onDismiss: onDismiss,
+    onSetToday: onSetToday,
+    clearLabel: clearLabel,
+    todayLabel: todayLabel,
+    okLabel: okLabel,
+    cancelLabel: cancelLabel,
+    clearable: clearable,
+    showTodayButton: showTodayButton,
+    children: children
+  }, DialogProps)));
+};
+process.env.NODE_ENV !== "production" ? ModalWrapper.propTypes = {
+  okLabel: PropTypes.node,
+  cancelLabel: PropTypes.node,
+  clearLabel: PropTypes.node,
+  clearable: PropTypes.bool,
+  todayLabel: PropTypes.node,
+  showTodayButton: PropTypes.bool,
+  DialogProps: PropTypes.object
+} : void 0;
+ModalWrapper.defaultProps = {
+  okLabel: 'OK',
+  cancelLabel: 'Cancel',
+  clearLabel: 'Clear',
+  todayLabel: 'Today',
+  clearable: false,
+  showTodayButton: false
+};
+
+var useStyles$8 = styles$5.makeStyles({
+  popoverPaper: {
+    width: DIALOG_WIDTH,
+    paddingBottom: 8
+  },
+  popoverPaperWider: {
+    width: DIALOG_WIDTH_WIDER
+  }
+}, {
+  name: 'MuiPickersInlineWrapper'
+});
+var InlineWrapper = function (_a) {
+  var _b;
+
+  var open = _a.open,
+      wider = _a.wider,
+      children = _a.children,
+      PopoverProps = _a.PopoverProps,
+      onClear = _a.onClear,
+      onDismiss = _a.onDismiss,
+      onSetToday = _a.onSetToday,
+      onAccept = _a.onAccept,
+      showTabs = _a.showTabs,
+      showTodayButton = _a.showTodayButton,
+      todayLabel = _a.todayLabel,
+      DateInputProps = _a.DateInputProps,
+      InputComponent = _a.InputComponent,
+      other = tslib.__rest(_a, ["open", "wider", "children", "PopoverProps", "onClear", "onDismiss", "onSetToday", "onAccept", "showTabs", "showTodayButton", "todayLabel", "DateInputProps", "InputComponent"]);
+
+  var ref = React.useRef();
+  var classes = useStyles$8();
+  useKeyDown(open, {
+    Enter: onAccept
+  });
+  return React.createElement(React.Fragment, null, React.createElement(InputComponent, tslib.__assign({}, other, DateInputProps, {
+    inputRef: ref
+  })), React.createElement(Popover, tslib.__assign({
+    open: open,
+    onClose: onDismiss,
+    anchorEl: ref.current,
+    classes: {
+      paper: clsx(classes.popoverPaper, (_b = {}, _b[classes.popoverPaperWider] = wider, _b))
+    },
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    children: children
+  }, PopoverProps)));
+};
+process.env.NODE_ENV !== "production" ? InlineWrapper.propTypes = {
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+  PopoverProps: PropTypes.object
+} : void 0;
+
+function getWrapperFromVariant(variant) {
+  switch (variant) {
+    case 'inline':
+      return InlineWrapper;
+
+    case 'static':
+      return StaticWrapper;
+
+    default:
+      return ModalWrapper;
+  }
+}
+var VariantContext = React.createContext(null);
+var Wrapper = function (_a) {
+  var variant = _a.variant,
+      props = tslib.__rest(_a, ["variant"]);
+
+  var Component = getWrapperFromVariant(variant);
+  return React.createElement(VariantContext.Provider, {
+    value: variant || 'dialog'
+  }, React.createElement(Component, tslib.__assign({}, props)));
+};
+
+var useStyles$9 = styles$5.makeStyles({
+  container: {
+    height: 300,
+    overflowY: 'auto'
+  }
+}, {
+  name: 'MuiPickersYearSelection'
+});
+var YearSelection = function (_a) {
+  var date = _a.date,
+      onChange = _a.onChange,
+      onYearChange = _a.onYearChange,
+      minDate = _a.minDate,
+      maxDate = _a.maxDate,
+      disablePast = _a.disablePast,
+      disableFuture = _a.disableFuture,
+      animateYearScrolling = _a.animateYearScrolling;
+  var utils = useUtils();
+  var classes = useStyles$9();
+  var currentVariant = React.useContext(VariantContext);
+  var selectedYearRef = React.useRef(null);
+  React.useEffect(function () {
+    if (selectedYearRef.current && selectedYearRef.current.scrollIntoView) {
+      selectedYearRef.current.scrollIntoView({
+        block: currentVariant === 'static' ? 'nearest' : 'center',
+        behavior: animateYearScrolling ? 'smooth' : 'auto'
+      });
+    }
+  }, []); // eslint-disable-line
+
+  var currentYear = utils.getYear(date);
+  var onYearSelect = React.useCallback(function (year) {
+    var newDate = utils.setYear(date, year);
+
+    if (onYearChange) {
+      onYearChange(newDate);
+    }
+
+    onChange(newDate, true);
+  }, [date, onChange, onYearChange, utils]);
+  return React.createElement("div", {
+    className: classes.container
+  }, utils.getYearRange(minDate, maxDate).map(function (year) {
+    var yearNumber = utils.getYear(year);
+    var selected = yearNumber === currentYear;
+    return React.createElement(Year$1, {
+      key: utils.getYearText(year),
+      selected: selected,
+      value: yearNumber,
+      onSelect: onYearSelect,
+      ref: selected ? selectedYearRef : undefined,
+      disabled: Boolean(disablePast && utils.isBeforeYear(year, utils.date()) || disableFuture && utils.isAfterYear(year, utils.date()))
+    }, utils.getYearText(year));
+  }));
+};
+
+var ClockType;
+
+(function (ClockType) {
+  ClockType["HOURS"] = "hours";
+  ClockType["MINUTES"] = "minutes";
+  ClockType["SECONDS"] = "seconds";
+})(ClockType || (ClockType = {}));
+
+var ClockType$1 = ClockType;
+
+var ClockPointer =
+/** @class */
+function (_super) {
+  tslib.__extends(ClockPointer, _super);
+
+  function ClockPointer() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      toAnimateTransform: false,
+      previousType: undefined
+    };
+
+    _this.getAngleStyle = function () {
+      var _a = _this.props,
+          value = _a.value,
+          isInner = _a.isInner,
+          type = _a.type;
+      var max = type === ClockType$1.HOURS ? 12 : 60;
+      var angle = 360 / max * value;
+
+      if (type === ClockType$1.HOURS && value > 12) {
+        angle -= 360; // round up angle to max 360 degrees
+      }
+
+      return {
+        height: isInner ? '26%' : '40%',
+        transform: "rotateZ(" + angle + "deg)"
+      };
+    };
+
+    return _this;
+  }
+
+  ClockPointer.prototype.render = function () {
+    var _a, _b;
+
+    var _c = this.props,
+        classes = _c.classes,
+        hasSelected = _c.hasSelected;
+    return React.createElement("div", {
+      style: this.getAngleStyle(),
+      className: clsx(classes.pointer, (_a = {}, _a[classes.animateTransform] = this.state.toAnimateTransform, _a))
+    }, React.createElement("div", {
+      className: clsx(classes.thumb, (_b = {}, _b[classes.noPoint] = hasSelected, _b))
+    }));
+  };
+
+  ClockPointer.getDerivedStateFromProps = function (nextProps, state) {
+    if (nextProps.type !== state.previousType) {
+      return {
+        toAnimateTransform: true,
+        previousType: nextProps.type
+      };
+    }
+
+    return {
+      toAnimateTransform: false,
+      previousType: nextProps.type
+    };
+  };
+
+  return ClockPointer;
+}(React.Component);
+var styles$3 = function (theme) {
+  return styles$5.createStyles({
+    pointer: {
+      width: 2,
+      backgroundColor: theme.palette.primary.main,
+      position: 'absolute',
+      left: 'calc(50% - 1px)',
+      bottom: '50%',
+      transformOrigin: 'center bottom 0px'
+    },
+    animateTransform: {
+      transition: theme.transitions.create(['transform', 'height'])
+    },
+    thumb: {
+      width: 4,
+      height: 4,
+      backgroundColor: theme.palette.primary.contrastText,
+      borderRadius: '100%',
+      position: 'absolute',
+      top: -21,
+      left: -15,
+      border: "14px solid " + theme.palette.primary.main,
+      boxSizing: 'content-box'
+    },
+    noPoint: {
+      backgroundColor: theme.palette.primary.main
+    }
+  });
+};
+var ClockPointer$1 = styles$5.withStyles(styles$3, {
+  name: 'MuiPickersClockPointer'
+})(ClockPointer);
+
+var center = {
+  x: 260 / 2,
+  y: 260 / 2
+};
+var basePoint = {
+  x: center.x,
+  y: 0
+};
+var cx = basePoint.x - center.x;
+var cy = basePoint.y - center.y;
+
+var rad2deg = function (rad) {
+  return rad * 57.29577951308232;
+};
+
+var getAngleValue = function (step, offsetX, offsetY) {
+  var x = offsetX - center.x;
+  var y = offsetY - center.y;
+  var atan = Math.atan2(cx, cy) - Math.atan2(x, y);
+  var deg = rad2deg(atan);
+  deg = Math.round(deg / step) * step;
+  deg %= 360;
+  var value = Math.floor(deg / step) || 0;
+  var delta = Math.pow(x, 2) + Math.pow(y, 2);
+  var distance = Math.sqrt(delta);
+  return {
+    value: value,
+    distance: distance
+  };
+};
+
+var getHours = function (offsetX, offsetY, ampm) {
+  var _a = getAngleValue(30, offsetX, offsetY),
+      value = _a.value,
+      distance = _a.distance;
+
+  value = value || 12;
+
+  if (!ampm) {
+    if (distance < 90) {
+      value += 12;
+      value %= 24;
+    }
+  } else {
+    value %= 12;
+  }
+
+  return value;
+};
+var getMinutes = function (offsetX, offsetY, step) {
+  if (step === void 0) {
+    step = 1;
+  }
+
+  var angleStep = step * 6;
+  var value = getAngleValue(angleStep, offsetX, offsetY).value;
+  value = value * step % 60;
+  return value;
+};
+var getMeridiem = function (date, utils) {
+  return utils.getHours(date) >= 12 ? 'pm' : 'am';
+};
+var convertToMeridiem = function (time, meridiem, ampm, utils) {
+  if (ampm) {
+    var currentMeridiem = utils.getHours(time) >= 12 ? 'pm' : 'am';
+
+    if (currentMeridiem !== meridiem) {
+      var hours = meridiem === 'am' ? utils.getHours(time) - 12 : utils.getHours(time) + 12;
+      return utils.setHours(time, hours);
+    }
+  }
+
+  return time;
+};
+
+var Clock =
+/** @class */
+function (_super) {
+  tslib.__extends(Clock, _super);
+
+  function Clock() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.isMoving = false;
+
+    _this.handleTouchMove = function (e) {
+      _this.isMoving = true;
+
+      _this.setTime(e);
+    };
+
+    _this.handleTouchEnd = function (e) {
+      if (_this.isMoving) {
+        _this.setTime(e, true);
+
+        _this.isMoving = false;
+      }
+    };
+
+    _this.handleMove = function (e) {
+      e.preventDefault();
+      e.stopPropagation(); // MouseEvent.which is deprecated, but MouseEvent.buttons is not supported in Safari
+
+      var isButtonPressed = typeof e.buttons === 'undefined' ? e.nativeEvent.which === 1 : e.buttons === 1;
+
+      if (isButtonPressed) {
+        _this.setTime(e.nativeEvent, false);
+      }
+    };
+
+    _this.handleMouseUp = function (e) {
+      if (_this.isMoving) {
+        _this.isMoving = false;
+      }
+
+      _this.setTime(e.nativeEvent, true);
+    };
+
+    _this.hasSelected = function () {
+      var _a = _this.props,
+          type = _a.type,
+          value = _a.value;
+
+      if (type === ClockType$1.HOURS) {
+        return true;
+      }
+
+      return value % 5 === 0;
+    };
+
+    return _this;
+  }
+
+  Clock.prototype.setTime = function (e, isFinish) {
+    if (isFinish === void 0) {
+      isFinish = false;
+    }
+
+    var offsetX = e.offsetX,
+        offsetY = e.offsetY;
+
+    if (typeof offsetX === 'undefined') {
+      var rect = e.target.getBoundingClientRect();
+      offsetX = e.changedTouches[0].clientX - rect.left;
+      offsetY = e.changedTouches[0].clientY - rect.top;
+    }
+
+    var value = this.props.type === ClockType$1.SECONDS || this.props.type === ClockType$1.MINUTES ? getMinutes(offsetX, offsetY, this.props.minutesStep) : getHours(offsetX, offsetY, Boolean(this.props.ampm));
+    this.props.onChange(value, isFinish);
+  };
+
+  Clock.prototype.render = function () {
+    var _a = this.props,
+        classes = _a.classes,
+        value = _a.value,
+        children = _a.children,
+        type = _a.type,
+        ampm = _a.ampm;
+    var isPointerInner = !ampm && type === ClockType$1.HOURS && (value < 1 || value > 12);
+    return React.createElement("div", {
+      className: classes.container
+    }, React.createElement("div", {
+      className: classes.clock
+    }, React.createElement("div", {
+      role: "menu",
+      tabIndex: -1,
+      className: classes.squareMask,
+      onTouchMove: this.handleTouchMove,
+      onTouchEnd: this.handleTouchEnd,
+      onMouseUp: this.handleMouseUp,
+      onMouseMove: this.handleMove
+    }), React.createElement("div", {
+      className: classes.pin
+    }), React.createElement(ClockPointer$1, {
+      type: type,
+      value: value,
+      isInner: isPointerInner,
+      hasSelected: this.hasSelected()
+    }), children));
+  };
+
+  process.env.NODE_ENV !== "production" ? Clock.propTypes = {
+    type: PropTypes.oneOf(Object.keys(ClockType$1).map(function (key) {
+      return ClockType$1[key];
+    })).isRequired,
+    value: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired,
+    children: PropTypes.arrayOf(PropTypes.node).isRequired,
+    ampm: PropTypes.bool,
+    minutesStep: PropTypes.number,
+    innerRef: PropTypes.any
+  } : void 0;
+  Clock.defaultProps = {
+    ampm: false,
+    minutesStep: 1
+  };
+  return Clock;
+}(React.Component);
+var styles$4 = function (theme) {
+  return styles$5.createStyles({
+    container: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'flex-end',
+      margin: theme.spacing(2) + "px 0 " + theme.spacing(1) + "px"
+    },
+    clock: {
+      backgroundColor: 'rgba(0,0,0,.07)',
+      borderRadius: '50%',
+      height: 260,
+      width: 260,
+      position: 'relative',
+      pointerEvents: 'none',
+      zIndex: 1
+    },
+    squareMask: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      pointerEvents: 'auto',
+      outline: 'none',
+      touchActions: 'none',
+      userSelect: 'none',
+      '&:active': {
+        cursor: 'move'
+      }
+    },
+    pin: {
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+      backgroundColor: theme.palette.primary.main,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  });
+};
+var Clock$1 = styles$5.withStyles(styles$4, {
+  name: 'MuiPickersClock'
+})(Clock);
+
+var positions = {
+  0: [0, 40],
+  1: [55, 19.6],
+  2: [94.4, 59.5],
+  3: [109, 114],
+  4: [94.4, 168.5],
+  5: [54.5, 208.4],
+  6: [0, 223],
+  7: [-54.5, 208.4],
+  8: [-94.4, 168.5],
+  9: [-109, 114],
+  10: [-94.4, 59.5],
+  11: [-54.5, 19.6],
+  12: [0, 5],
+  13: [36.9, 49.9],
+  14: [64, 77],
+  15: [74, 114],
+  16: [64, 151],
+  17: [37, 178],
+  18: [0, 188],
+  19: [-37, 178],
+  20: [-64, 151],
+  21: [-74, 114],
+  22: [-64, 77],
+  23: [-37, 50]
+};
+var useStyles$a = styles$5.makeStyles(function (theme) {
+  var size = theme.spacing(4);
+  return {
+    clockNumber: {
+      width: size,
+      height: 32,
+      userSelect: 'none',
+      position: 'absolute',
+      left: "calc(50% - " + size / 2 + "px)",
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: '50%',
+      color: theme.palette.type === 'light' ? theme.palette.text.primary : theme.palette.text.hint
+    },
+    clockNumberSelected: {
+      color: theme.palette.primary.contrastText
+    }
+  };
+}, {
+  name: 'MuiPickersClockNumber'
+});
+var ClockNumber = function (_a) {
+  var _b;
+
+  var selected = _a.selected,
+      label = _a.label,
+      index = _a.index,
+      isInner = _a.isInner;
+  var classes = useStyles$a();
+  var className = clsx(classes.clockNumber, (_b = {}, _b[classes.clockNumberSelected] = selected, _b));
+  var transformStyle = React.useMemo(function () {
+    var position = positions[index];
+    return {
+      transform: "translate(" + position[0] + "px, " + position[1] + "px"
+    };
+  }, [index]);
+  return React.createElement(Typography, {
+    component: "span",
+    className: className,
+    variant: isInner ? 'body2' : 'body1',
+    style: transformStyle,
+    children: label
+  });
+};
+
+var getHourNumbers = function (_a) {
+  var ampm = _a.ampm,
+      utils = _a.utils,
+      date = _a.date;
+  var currentHours = utils.getHours(date);
+  var hourNumbers = [];
+  var startHour = ampm ? 1 : 0;
+  var endHour = ampm ? 12 : 23;
+
+  var isSelected = function (hour) {
+    if (ampm) {
+      if (hour === 12) {
+        return currentHours === 12 || currentHours === 0;
+      }
+
+      return currentHours === hour || currentHours - 12 === hour;
+    }
+
+    return currentHours === hour;
+  };
+
+  for (var hour = startHour; hour <= endHour; hour += 1) {
+    var label = hour.toString();
+
+    if (hour === 0) {
+      label = '00';
+    }
+
+    var props = {
+      index: hour,
+      label: utils.formatNumber(label),
+      selected: isSelected(hour),
+      isInner: !ampm && (hour === 0 || hour > 12)
+    };
+    hourNumbers.push(React.createElement(ClockNumber, tslib.__assign({
+      key: hour
+    }, props)));
+  }
+
+  return hourNumbers;
+};
+var getMinutesNumbers = function (_a) {
+  var value = _a.value,
+      utils = _a.utils;
+  var f = utils.formatNumber;
+  return [React.createElement(ClockNumber, {
+    label: f('00'),
+    selected: value === 0,
+    index: 12,
+    key: 12
+  }), React.createElement(ClockNumber, {
+    label: f('05'),
+    selected: value === 5,
+    index: 1,
+    key: 1
+  }), React.createElement(ClockNumber, {
+    label: f('10'),
+    selected: value === 10,
+    index: 2,
+    key: 2
+  }), React.createElement(ClockNumber, {
+    label: f('15'),
+    selected: value === 15,
+    index: 3,
+    key: 3
+  }), React.createElement(ClockNumber, {
+    label: f('20'),
+    selected: value === 20,
+    index: 4,
+    key: 4
+  }), React.createElement(ClockNumber, {
+    label: f('25'),
+    selected: value === 25,
+    index: 5,
+    key: 5
+  }), React.createElement(ClockNumber, {
+    label: f('30'),
+    selected: value === 30,
+    index: 6,
+    key: 6
+  }), React.createElement(ClockNumber, {
+    label: f('35'),
+    selected: value === 35,
+    index: 7,
+    key: 7
+  }), React.createElement(ClockNumber, {
+    label: f('40'),
+    selected: value === 40,
+    index: 8,
+    key: 8
+  }), React.createElement(ClockNumber, {
+    label: f('45'),
+    selected: value === 45,
+    index: 9,
+    key: 9
+  }), React.createElement(ClockNumber, {
+    label: f('50'),
+    selected: value === 50,
+    index: 10,
+    key: 10
+  }), React.createElement(ClockNumber, {
+    label: f('55'),
+    selected: value === 55,
+    index: 11,
+    key: 11
+  })];
+};
+
+var TimePickerView = function (_a) {
+  var type = _a.type,
+      onHourChange = _a.onHourChange,
+      onMinutesChange = _a.onMinutesChange,
+      onSecondsChange = _a.onSecondsChange,
+      ampm = _a.ampm,
+      date = _a.date,
+      minutesStep = _a.minutesStep;
+  var utils = useUtils();
+  var viewProps = React.useMemo(function () {
+    switch (type) {
+      case ClockType$1.HOURS:
+        return {
+          value: utils.getHours(date),
+          children: getHourNumbers({
+            date: date,
+            utils: utils,
+            ampm: Boolean(ampm)
+          }),
+          onChange: function (value, isFinish) {
+            var currentMeridiem = getMeridiem(date, utils);
+            var updatedTimeWithMeridiem = convertToMeridiem(utils.setHours(date, value), currentMeridiem, Boolean(ampm), utils);
+            onHourChange(updatedTimeWithMeridiem, isFinish);
+          }
+        };
+
+      case ClockType$1.MINUTES:
+        var minutesValue = utils.getMinutes(date);
+        return {
+          value: minutesValue,
+          children: getMinutesNumbers({
+            value: minutesValue,
+            utils: utils
+          }),
+          onChange: function (value, isFinish) {
+            var updatedTime = utils.setMinutes(date, value);
+            onMinutesChange(updatedTime, isFinish);
+          }
+        };
+
+      case ClockType$1.SECONDS:
+        var secondsValue = utils.getSeconds(date);
+        return {
+          value: secondsValue,
+          children: getMinutesNumbers({
+            value: secondsValue,
+            utils: utils
+          }),
+          onChange: function (value, isFinish) {
+            var updatedTime = utils.setSeconds(date, value);
+            onSecondsChange(updatedTime, isFinish);
+          }
+        };
+
+      default:
+        throw new Error('You must provide the type for TimePickerView');
+    }
+  }, [ampm, date, onHourChange, onMinutesChange, onSecondsChange, type, utils]);
+  return React.createElement(Clock$1, tslib.__assign({
+    type: type,
+    ampm: ampm,
+    minutesStep: minutesStep
+  }, viewProps));
+};
+TimePickerView.displayName = 'TimePickerView';
+process.env.NODE_ENV !== "production" ? TimePickerView.propTypes = {
+  date: PropTypes.object.isRequired,
+  onHourChange: PropTypes.func.isRequired,
+  onMinutesChange: PropTypes.func.isRequired,
+  onSecondsChange: PropTypes.func.isRequired,
+  ampm: PropTypes.bool,
+  minutesStep: PropTypes.number,
+  type: PropTypes.oneOf(Object.keys(ClockType$1).map(function (key) {
+    return ClockType$1[key];
+  })).isRequired
+} : void 0;
+TimePickerView.defaultProps = {
+  ampm: true,
+  minutesStep: 1
+};
+var ClockView = React.memo(TimePickerView);
+
+var useStyles$b = styles$5.makeStyles(function (theme) {
+  return {
+    root: {
+      flex: '1 0 33.33%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      outline: 'none',
+      height: 75,
+      transition: theme.transitions.create('font-size', {
+        duration: '100ms'
+      }),
+      '&:focus': {
+        color: theme.palette.primary.main,
+        fontWeight: theme.typography.fontWeightMedium
+      }
+    },
+    monthSelected: {
+      color: theme.palette.primary.main,
+      fontWeight: theme.typography.fontWeightMedium
+    },
+    monthDisabled: {
+      pointerEvents: 'none',
+      color: theme.palette.text.hint
+    }
+  };
+}, {
+  name: 'MuiPickersMonth'
+});
+var Month = function (_a) {
+  var _b;
+
+  var selected = _a.selected,
+      onSelect = _a.onSelect,
+      disabled = _a.disabled,
+      value = _a.value,
+      children = _a.children,
+      other = tslib.__rest(_a, ["selected", "onSelect", "disabled", "value", "children"]);
+
+  var classes = useStyles$b();
+  var handleSelection = React.useCallback(function () {
+    onSelect(value);
+  }, [onSelect, value]);
+  return React.createElement(Typography, tslib.__assign({
+    role: "button",
+    component: "div",
+    className: clsx(classes.root, (_b = {}, _b[classes.monthSelected] = selected, _b[classes.monthDisabled] = disabled, _b)),
+    tabIndex: disabled ? -1 : 0,
+    onClick: handleSelection,
+    onKeyPress: handleSelection,
+    color: selected ? 'primary' : undefined,
+    variant: selected ? 'h5' : 'subtitle1',
+    children: children
+  }, other));
+};
+Month.displayName = 'Month';
+
+var useStyles$c = styles$5.makeStyles({
+  container: {
+    width: 310,
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignContent: 'stretch'
+  }
+}, {
+  name: 'MuiPickersMonthSelection'
+});
+var MonthSelection = function (_a) {
+  var disablePast = _a.disablePast,
+      disableFuture = _a.disableFuture,
+      minDate = _a.minDate,
+      maxDate = _a.maxDate,
+      date = _a.date,
+      onMonthChange = _a.onMonthChange,
+      onChange = _a.onChange;
+  var utils = useUtils();
+  var classes = useStyles$c();
+  var currentMonth = utils.getMonth(date);
+
+  var shouldDisableMonth = function (month) {
+    var now = utils.date();
+    var utilMinDate = utils.date(minDate);
+    var utilMaxDate = utils.date(maxDate);
+    var firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, utilMinDate) ? now : utilMinDate);
+    var lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, utilMaxDate) ? now : utilMaxDate);
+    var isBeforeFirstEnabled = utils.isBefore(month, firstEnabledMonth);
+    var isAfterLastEnabled = utils.isAfter(month, lastEnabledMonth);
+    return isBeforeFirstEnabled || isAfterLastEnabled;
+  };
+
+  var onMonthSelect = React.useCallback(function (month) {
+    var newDate = utils.setMonth(date, month);
+    onChange(newDate, true);
+
+    if (onMonthChange) {
+      onMonthChange(newDate);
+    }
+  }, [date, onChange, onMonthChange, utils]);
+  return React.createElement("div", {
+    className: classes.container
+  }, utils.getMonthArray(date).map(function (month) {
+    var monthNumber = utils.getMonth(month);
+    var monthText = utils.format(month, 'MMM');
+    return React.createElement(Month, {
+      key: monthText,
+      value: monthNumber,
+      selected: monthNumber === currentMonth,
+      onSelect: onMonthSelect,
+      disabled: shouldDisableMonth(month)
+    }, monthText);
+  }));
+};
+
+var getOrientation = function () {
+  return typeof window !== 'undefined' && window.screen && window.screen.orientation && Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
+};
+
+function useIsLandscape(customOrientation) {
+  var _a = React.useState(getOrientation()),
+      orientation = _a[0],
+      setOrientation = _a[1];
+
+  var eventHandler = React.useCallback(function () {
+    return setOrientation(getOrientation());
+  }, []);
+  useIsomorphicEffect(function () {
+    window.addEventListener('orientationchange', eventHandler);
+    return function () {
+      return window.removeEventListener('orientationchange', eventHandler);
+    };
+  }, [eventHandler]);
+  var orientationToUse = customOrientation || orientation;
+  return orientationToUse === 'landscape';
+}
+
+var viewsMap = {
+  year: YearSelection,
+  month: MonthSelection,
+  date: Calendar$1,
+  hours: TimePickerView,
+  minutes: TimePickerView,
+  seconds: TimePickerView
+};
+var useStyles$d = styles$5.makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  containerLandscape: {
+    flexDirection: 'row'
+  },
+  pickerView: {
+    overflowX: 'hidden',
+    minHeight: VIEW_HEIGHT,
+    minWidth: DIALOG_WIDTH,
+    maxWidth: DIALOG_WIDTH_WIDER,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center'
+  },
+  pickerViewLandscape: {
+    padding: '0 8px'
+  }
+}, {
+  name: 'MuiPickersBasePicker'
+});
+var useButtonsStyles = styles$5.makeStyles({
+  root: {
+    minWidth: 32
+  }
+}, {
+  name: 'MuiButtonBase'
+});
+var useDialogActionsStyles = styles$5.makeStyles({
+  withAdditionalAction: {}
+});
+var Picker = function (props) {
+  var _a, _b, _c;
+
+  var date = props.date,
+      ampm = props.ampm,
+      views = props.views,
+      disableToolbar = props.disableToolbar,
+      disablePast = props.disablePast,
+      disableFuture = props.disableFuture,
+      hideTabs = props.hideTabs,
+      onChange = props.onChange,
+      openTo = props.openTo,
+      minutesStep = props.minutesStep,
+      dateRangeIcon = props.dateRangeIcon,
+      timeIcon = props.timeIcon,
+      unparsedMinDate = props.minDate,
+      unparsedMaxDate = props.maxDate,
+      animateYearScrolling = props.animateYearScrolling,
+      leftArrowIcon = props.leftArrowIcon,
+      rightArrowIcon = props.rightArrowIcon,
+      renderDay = props.renderDay,
+      shouldDisableDate = props.shouldDisableDate,
+      allowKeyboardControl = props.allowKeyboardControl,
+      onMonthChange = props.onMonthChange,
+      onYearChange = props.onYearChange,
+      leftArrowButtonProps = props.leftArrowButtonProps,
+      rightArrowButtonProps = props.rightArrowButtonProps,
+      ToolbarComponent = props.ToolbarComponent,
+      loadingIndicator = props.loadingIndicator,
+      orientation = props.orientation,
+      showActionsBar = props.showActionsBar,
+      onSetToday = props.onSetToday,
+      showTodayButton = props.showTodayButton,
+      todayLabel = props.todayLabel,
+      onSetShift = props.onSetShift,
+      showShiftButtons = props.showShiftButtons,
+      setShiftFunction = props.setShiftFunction,
+      shiftButtonValues = props.shiftButtonValues;
+  var utils = useUtils();
+  var classes = useStyles$d();
+  var buttonClasses = useButtonsStyles();
+  var dialogActionsClasses = useDialogActionsStyles();
+  var isLandscape = useIsLandscape(orientation);
+
+  var _d = useViews(views, openTo, onChange),
+      openView = _d.openView,
+      setOpenView = _d.setOpenView,
+      handleChangeAndOpenNext = _d.handleChangeAndOpenNext;
+
+  var minDate = React.useMemo(function () {
+    return utils.date(unparsedMinDate);
+  }, [unparsedMinDate, utils]);
+  var maxDate = React.useMemo(function () {
+    return utils.date(unparsedMaxDate);
+  }, [unparsedMaxDate, utils]);
+  var shiftButtons = new Array();
+
+  if (showShiftButtons && setShiftFunction && onSetShift && shiftButtonValues) {
+    var _loop_1 = function (key) {
+      shiftButtons.push(React.createElement(core.Button, {
+        color: "primary",
+        onClick: function () {
+          return onSetShift(setShiftFunction(parseInt(key)));
+        },
+        key: shiftButtonValues[key]
+      }, parseInt(key) > 0 ? '+' : '', shiftButtonValues[key]));
+    };
+
+    for (var key in shiftButtonValues) {
+      _loop_1(key);
+    }
+  }
+
+  return React.createElement("div", {
+    className: clsx(classes.container, (_a = {}, _a[classes.containerLandscape] = isLandscape, _a))
+  }, !disableToolbar && React.createElement(ToolbarComponent, tslib.__assign({
+    date: date,
+    onChange: onChange,
+    setOpenView: setOpenView,
+    openView: openView,
+    hideTabs: hideTabs,
+    dateRangeIcon: dateRangeIcon,
+    timeIcon: timeIcon,
+    isLandscape: isLandscape
+  }, props)), React.createElement("div", {
+    className: clsx(classes.pickerView, (_b = {}, _b[classes.pickerViewLandscape] = isLandscape, _b))
+  }, openView === 'year' && React.createElement(YearSelection, {
+    date: date,
+    onChange: handleChangeAndOpenNext,
+    minDate: minDate,
+    maxDate: maxDate,
+    disablePast: disablePast,
+    disableFuture: disableFuture,
+    onYearChange: onYearChange,
+    animateYearScrolling: animateYearScrolling
+  }), openView === 'month' && React.createElement(MonthSelection, {
+    date: date,
+    onChange: handleChangeAndOpenNext,
+    minDate: minDate,
+    maxDate: maxDate,
+    disablePast: disablePast,
+    disableFuture: disableFuture,
+    onMonthChange: onMonthChange
+  }), openView === 'date' && React.createElement(Calendar$1, {
+    date: date,
+    onChange: handleChangeAndOpenNext,
+    onMonthChange: onMonthChange,
+    disablePast: disablePast,
+    disableFuture: disableFuture,
+    minDate: minDate,
+    maxDate: maxDate,
+    leftArrowIcon: leftArrowIcon,
+    leftArrowButtonProps: leftArrowButtonProps,
+    rightArrowIcon: rightArrowIcon,
+    rightArrowButtonProps: rightArrowButtonProps,
+    renderDay: renderDay,
+    shouldDisableDate: shouldDisableDate,
+    allowKeyboardControl: allowKeyboardControl,
+    loadingIndicator: loadingIndicator
+  }), (openView === 'hours' || openView === 'minutes' || openView === 'seconds') && React.createElement(TimePickerView, {
+    date: date,
+    ampm: ampm,
+    type: openView,
+    minutesStep: minutesStep,
+    onHourChange: handleChangeAndOpenNext,
+    onMinutesChange: handleChangeAndOpenNext,
+    onSecondsChange: handleChangeAndOpenNext
+  })), showActionsBar && React.createElement(core.DialogActions, {
+    classes: {
+      root: clsx((_c = {}, _c[dialogActionsClasses.withAdditionalAction] = showTodayButton, _c))
+    }
+  }, showTodayButton && React.createElement(core.Button, {
+    color: "primary",
+    onClick: onSetToday,
+    key: "today"
+  }, todayLabel), showShiftButtons && setShiftFunction && shiftButtons));
+};
+Picker.defaultProps = tslib.__assign(tslib.__assign({}, datePickerDefaultProps), {
+  views: Object.keys(viewsMap)
+});
+
+function useOpenState(_a) {
+  var _b;
+
+  var open = _a.open,
+      onOpen = _a.onOpen,
+      onClose = _a.onClose;
+  var setIsOpenState = null;
+
+  if (open === undefined || open === null) {
+    // The component is uncontrolled, so we need to give it its own state.
+    _b = React.useState(false), open = _b[0], setIsOpenState = _b[1];
+  } // prettier-ignore
+
+
+  var setIsOpen = React.useCallback(function (newIsOpen) {
+    setIsOpenState && setIsOpenState(newIsOpen);
+    return newIsOpen ? onOpen && onOpen() : onClose && onClose();
+  }, [onOpen, onClose, setIsOpenState]);
+  return {
+    isOpen: open,
+    setIsOpen: setIsOpen
+  };
+}
+
+var getDisplayDate = function (value, format, utils, isEmpty, _a) {
+  var invalidLabel = _a.invalidLabel,
+      emptyLabel = _a.emptyLabel,
+      labelFunc = _a.labelFunc;
+  var date = utils.date(value);
+
+  if (labelFunc) {
+    return labelFunc(isEmpty ? null : date, invalidLabel);
+  }
+
+  if (isEmpty) {
+    return emptyLabel || '';
+  }
+
+  return utils.isValid(date) ? utils.format(date, format) : invalidLabel;
+};
+
+var getComparisonMaxDate = function (utils, strictCompareDates, date) {
+  if (strictCompareDates) {
+    return date;
+  }
+
+  return utils.endOfDay(date);
+};
+
+var getComparisonMinDate = function (utils, strictCompareDates, date) {
+  if (strictCompareDates) {
+    return date;
+  }
+
+  return utils.startOfDay(date);
+};
+
+var validate = function (value, utils, _a // DateTimePicker doesn't support
+) {
+  var maxDate = _a.maxDate,
+      minDate = _a.minDate,
+      disablePast = _a.disablePast,
+      disableFuture = _a.disableFuture,
+      maxDateMessage = _a.maxDateMessage,
+      minDateMessage = _a.minDateMessage,
+      invalidDateMessage = _a.invalidDateMessage,
+      strictCompareDates = _a.strictCompareDates;
+  var parsedValue = utils.date(value); // if null - do not show error
+
+  if (value === null) {
+    return '';
+  }
+
+  if (!utils.isValid(value)) {
+    return invalidDateMessage;
+  }
+
+  if (maxDate && utils.isAfter(parsedValue, getComparisonMaxDate(utils, !!strictCompareDates, utils.date(maxDate)))) {
+    return maxDateMessage;
+  }
+
+  if (disableFuture && utils.isAfter(parsedValue, getComparisonMaxDate(utils, !!strictCompareDates, utils.date()))) {
+    return maxDateMessage;
+  }
+
+  if (minDate && utils.isBefore(parsedValue, getComparisonMinDate(utils, !!strictCompareDates, utils.date(minDate)))) {
+    return minDateMessage;
+  }
+
+  if (disablePast && utils.isBefore(parsedValue, getComparisonMinDate(utils, !!strictCompareDates, utils.date()))) {
+    return minDateMessage;
+  }
+
+  return '';
+};
+function pick12hOr24hFormat(userFormat, ampm, formats) {
+  if (ampm === void 0) {
+    ampm = true;
+  }
+
+  if (userFormat) {
+    return userFormat;
+  }
+
+  return ampm ? formats['12h'] : formats['24h'];
+}
+function makeMaskFromFormat(format, numberMaskChar) {
+  return format.replace(/[a-z]/gi, numberMaskChar);
+}
+var maskedDateFormatter = function (mask, numberMaskChar) {
+  return function (value, oldValue, currentCaretPosition) {
+    var refuse = /[^\d\w_]+/gi;
+
+    if (!value || value === '') {
+      return value;
+    }
+
+    if (!oldValue) {
+      oldValue = '';
+    }
+
+    if (value == oldValue) {
+      return value;
+    }
+
+    if (value.length < oldValue.length && currentCaretPosition != null) {
+      value = value.slice(0, currentCaretPosition) + '_' + value.slice(currentCaretPosition, oldValue.length);
+    }
+
+    var refusedOldValue = oldValue.replace(refuse, '');
+    var refusedNewValue = value.replace(refuse, '');
+    var refusedMaskSymbols = mask.replace(refuse, '');
+    var minLength = refusedOldValue.length > refusedNewValue.length ? refusedNewValue.length : refusedOldValue.length;
+    var startPos = 0;
+    var endPosShift = 0;
+
+    while (startPos < minLength) {
+      if (refusedNewValue[startPos] == refusedOldValue[startPos]) {
+        startPos++;
+      } else {
+        break;
+      }
+    }
+
+    while (endPosShift < minLength && startPos < refusedNewValue.length - endPosShift && startPos < refusedOldValue.length - endPosShift) {
+      if (refusedNewValue[refusedNewValue.length - endPosShift - 1] == refusedOldValue[refusedOldValue.length - endPosShift - 1]) {
+        endPosShift++;
+      } else {
+        break;
+      }
+    }
+
+    var endStartPos = refusedNewValue.length - endPosShift;
+    endStartPos = endStartPos < startPos ? startPos : endStartPos;
+    var firstPart = refusedNewValue.slice(0, startPos);
+    var addedPart = refusedNewValue.slice(startPos, endStartPos);
+    var endPart = refusedNewValue.slice(endStartPos, refusedNewValue.length);
+    var maxSymbolsInEnd = refusedMaskSymbols.length - firstPart.length - addedPart.length;
+
+    while (maxSymbolsInEnd > endPart.length) {
+      addedPart += numberMaskChar;
+      maxSymbolsInEnd--;
+    }
+
+    var entireRefusedString = firstPart + addedPart + endPart.slice(endPart.length - maxSymbolsInEnd, endPart.length); // Do nothing ?...
+
+    entireRefusedString = entireRefusedString.slice(0, refusedMaskSymbols.length);
+    var i = 0;
+    var n = 0;
+    var result = '';
+
+    while (i < mask.length) {
+      var maskChar = mask[i];
+
+      if (maskChar === numberMaskChar && n < entireRefusedString.length) {
+        var parsedChar = entireRefusedString[n];
+        result += parsedChar;
+        n += 1;
+      } else {
+        result += maskChar;
+      }
+
+      i += 1;
+    }
+
+    return result;
+  };
+};
+
+var useValueToDate = function (utils, _a) {
+  var value = _a.value,
+      initialFocusedDate = _a.initialFocusedDate;
+  var nowRef = React.useRef(utils.date());
+  var date = utils.date(value || initialFocusedDate || nowRef.current);
+  return date && utils.isValid(date) ? date : nowRef.current;
+};
+
+function useDateValues(props, options) {
+  var utils = useUtils();
+  var date = useValueToDate(utils, props);
+  var format = props.format || options.getDefaultFormat();
+  return {
+    date: date,
+    format: format
+  };
+}
+
+function usePickerState(props, options) {
+  var autoOk = props.autoOk,
+      disabled = props.disabled,
+      onAccept = props.onAccept,
+      onChange = props.onChange,
+      onError = props.onError,
+      value = props.value,
+      variant = props.variant;
+  var utils = useUtils();
+
+  var _a = useOpenState(props),
+      isOpen = _a.isOpen,
+      setIsOpen = _a.setIsOpen;
+
+  var _b = useDateValues(props, options),
+      date = _b.date,
+      format = _b.format;
+
+  var _c = React.useState(date),
+      pickerDate = _c[0],
+      setPickerDate = _c[1];
+
+  React.useEffect(function () {
+    // if value was changed in closed state - treat it as accepted
+    if (!isOpen && !utils.isEqual(pickerDate, date)) {
+      setPickerDate(date);
+    }
+  }, [date, isOpen, pickerDate, utils]);
+  var acceptDate = React.useCallback(function (acceptedDate) {
+    setIsOpen(false);
+    onChange(acceptedDate);
+
+    if (onAccept) {
+      onAccept(acceptedDate);
+    }
+  }, [onAccept, onChange, setIsOpen]);
+  var wrapperProps = React.useMemo(function () {
+    return {
+      format: format,
+      open: isOpen,
+      onClear: function () {
+        return acceptDate(null);
+      },
+      onAccept: function () {
+        return acceptDate(pickerDate);
+      },
+      onSetToday: function () {
+        return setPickerDate(utils.date());
+      },
+      onDismiss: function () {
+        setIsOpen(false);
+      }
+    };
+  }, [acceptDate, format, isOpen, pickerDate, setIsOpen, utils]);
+  var pickerProps = React.useMemo(function () {
+    return {
+      date: pickerDate,
+      onChange: function (newDate, isFinish) {
+        if (isFinish === void 0) {
+          isFinish = true;
+        }
+
+        setPickerDate(newDate);
+
+        if (isFinish && autoOk) {
+          acceptDate(newDate);
+        } else if (variant === 'inline' || variant === 'static') {
+          onChange(newDate);
+        }
+      },
+      onSetToday: function () {
+        var newDate = utils.date();
+        setPickerDate(newDate);
+
+        if (autoOk) {
+          acceptDate(newDate);
+        } else if (variant === 'inline' || variant === 'static') {
+          onChange(newDate);
+        }
+      },
+      onSetShift: function (shiftDate) {
+        var newDate = utils.date(shiftDate);
+
+        if (autoOk) {
+          acceptDate(newDate);
+        } else if (variant === 'inline' || variant === 'static') {
+          onChange(newDate);
+        }
+      }
+    };
+  }, [acceptDate, autoOk, onChange, pickerDate, variant]);
+  var validationError = validate(value, utils, props);
+  React.useEffect(function () {
+    if (validationError && onError) {
+      onError(validationError, value);
+    }
+  }, [onError, validationError, value]);
+  var inputValue = getDisplayDate(date, format, utils, value === null, props);
+  var inputProps = React.useMemo(function () {
+    return {
+      inputValue: inputValue,
+      validationError: validationError,
+      onClick: function () {
+        return !disabled && setIsOpen(true);
+      }
+    };
+  }, [disabled, inputValue, setIsOpen, validationError]);
+  var pickerState = {
+    pickerProps: pickerProps,
+    inputProps: inputProps,
+    wrapperProps: wrapperProps
+  };
+  React.useDebugValue(pickerState);
+  return pickerState;
+}
+
+var PureDateInput = function (_a) {
+  var inputValue = _a.inputValue,
+      inputVariant = _a.inputVariant,
+      validationError = _a.validationError,
+      InputProps = _a.InputProps,
+      _b = _a.TextFieldComponent,
+      TextFieldComponent = _b === void 0 ? TextField : _b,
+      other = tslib.__rest(_a, ["inputValue", "inputVariant", "validationError", "InputProps", "TextFieldComponent"]);
+
+  var PureDateInputProps = React.useMemo(function () {
+    return tslib.__assign(tslib.__assign({}, InputProps), {
+      readOnly: true
+    });
+  }, [InputProps]);
+  return React.createElement(TextFieldComponent, tslib.__assign({
+    error: Boolean(validationError),
+    helperText: validationError
+  }, other, {
+    // do not overridable
+    value: inputValue,
+    variant: inputVariant,
+    InputProps: PureDateInputProps
+  }));
+};
+PureDateInput.displayName = 'PureDateInput';
+
+function makePurePicker(_a) {
+  var useOptions = _a.useOptions,
+      getCustomProps = _a.getCustomProps,
+      DefaultToolbarComponent = _a.DefaultToolbarComponent;
+
+  function WrappedPurePicker(props) {
+    var allowKeyboardControl = props.allowKeyboardControl,
+        ampm = props.ampm,
+        hideTabs = props.hideTabs,
+        animateYearScrolling = props.animateYearScrolling,
+        autoOk = props.autoOk,
+        disableFuture = props.disableFuture,
+        disablePast = props.disablePast,
+        format = props.format,
+        forwardedRef = props.forwardedRef,
+        initialFocusedDate = props.initialFocusedDate,
+        invalidDateMessage = props.invalidDateMessage,
+        labelFunc = props.labelFunc,
+        leftArrowIcon = props.leftArrowIcon,
+        leftArrowButtonProps = props.leftArrowButtonProps,
+        maxDate = props.maxDate,
+        maxDateMessage = props.maxDateMessage,
+        minDate = props.minDate,
+        onOpen = props.onOpen,
+        onClose = props.onClose,
+        minDateMessage = props.minDateMessage,
+        strictCompareDates = props.strictCompareDates,
+        minutesStep = props.minutesStep,
+        onAccept = props.onAccept,
+        onChange = props.onChange,
+        onMonthChange = props.onMonthChange,
+        onYearChange = props.onYearChange,
+        renderDay = props.renderDay,
+        views = props.views,
+        openTo = props.openTo,
+        rightArrowIcon = props.rightArrowIcon,
+        rightArrowButtonProps = props.rightArrowButtonProps,
+        shouldDisableDate = props.shouldDisableDate,
+        dateRangeIcon = props.dateRangeIcon,
+        emptyLabel = props.emptyLabel,
+        invalidLabel = props.invalidLabel,
+        timeIcon = props.timeIcon,
+        value = props.value,
+        variant = props.variant,
+        orientation = props.orientation,
+        disableToolbar = props.disableToolbar,
+        loadingIndicator = props.loadingIndicator,
+        _a = props.ToolbarComponent,
+        ToolbarComponent = _a === void 0 ? DefaultToolbarComponent : _a,
+        showActionsBar = props.showActionsBar,
+        showTodayButton = props.showTodayButton,
+        todayLabel = props.todayLabel,
+        showShiftButtons = props.showShiftButtons,
+        setShiftFunction = props.setShiftFunction,
+        shiftButtonValues = props.shiftButtonValues,
+        other = tslib.__rest(props, ["allowKeyboardControl", "ampm", "hideTabs", "animateYearScrolling", "autoOk", "disableFuture", "disablePast", "format", "forwardedRef", "initialFocusedDate", "invalidDateMessage", "labelFunc", "leftArrowIcon", "leftArrowButtonProps", "maxDate", "maxDateMessage", "minDate", "onOpen", "onClose", "minDateMessage", "strictCompareDates", "minutesStep", "onAccept", "onChange", "onMonthChange", "onYearChange", "renderDay", "views", "openTo", "rightArrowIcon", "rightArrowButtonProps", "shouldDisableDate", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "value", "variant", "orientation", "disableToolbar", "loadingIndicator", "ToolbarComponent", "showActionsBar", "showTodayButton", "todayLabel", "showShiftButtons", "setShiftFunction", "shiftButtonValues"]);
+
+    var injectedProps = getCustomProps ? getCustomProps(props) : {};
+    var options = useOptions(props);
+
+    var _b = usePickerState(props, options),
+        pickerProps = _b.pickerProps,
+        inputProps = _b.inputProps,
+        wrapperProps = _b.wrapperProps;
+
+    return React.createElement(Wrapper, tslib.__assign({
+      variant: variant,
+      InputComponent: PureDateInput,
+      DateInputProps: inputProps,
+      showTodayButton: showTodayButton,
+      todayLabel: todayLabel
+    }, wrapperProps, injectedProps, other), React.createElement(Picker, tslib.__assign({}, pickerProps, {
+      orientation: orientation,
+      disableToolbar: disableToolbar,
+      ToolbarComponent: ToolbarComponent,
+      hideTabs: hideTabs,
+      ampm: ampm,
+      views: views,
+      openTo: openTo,
+      allowKeyboardControl: allowKeyboardControl,
+      minutesStep: minutesStep,
+      animateYearScrolling: animateYearScrolling,
+      disableFuture: disableFuture,
+      disablePast: disablePast,
+      leftArrowIcon: leftArrowIcon,
+      leftArrowButtonProps: leftArrowButtonProps,
+      maxDate: maxDate,
+      minDate: minDate,
+      strictCompareDates: strictCompareDates,
+      onMonthChange: onMonthChange,
+      onYearChange: onYearChange,
+      renderDay: renderDay,
+      dateRangeIcon: dateRangeIcon,
+      timeIcon: timeIcon,
+      rightArrowIcon: rightArrowIcon,
+      rightArrowButtonProps: rightArrowButtonProps,
+      shouldDisableDate: shouldDisableDate,
+      loadingIndicator: loadingIndicator,
+      showActionsBar: showActionsBar,
+      showTodayButton: showTodayButton,
+      todayLabel: todayLabel,
+      showShiftButtons: showShiftButtons,
+      setShiftFunction: setShiftFunction,
+      shiftButtonValues: shiftButtonValues
+    })));
+  }
+
+  return WrappedPurePicker;
+}
+
+var KeyboardIcon = function (props) {
+  return React__default.createElement(SvgIcon, tslib.__assign({}, props), React__default.createElement("path", {
+    d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
+  }), React__default.createElement("path", {
+    fill: "none",
+    d: "M0 0h24v24H0z"
+  }));
+};
+
+var Rifm = function (props) {
+  var _a = React.useReducer(function (c) {
+    return c + 1;
+  }, 0),
+      refresh = _a[1];
+
+  var valueRef = React.useRef(null);
+  var replace = props.replace,
+      maskChar = props.maskChar;
+
+  var _b = React.useState({
+    value: ''
+  }),
+      previousValue = _b[0],
+      setPreviousValue = _b[1];
+
+  var userValue = replace ? replace(props.format(props.value, previousValue.value)) : props.format(props.value, previousValue.value);
+  var currentPreviousValue = previousValue.value; // state of delete button see comments below about inputType support
+
+  var isDeleleteButtonDownRef = React.useRef(false);
+
+  var onChange = function (evt) {
+    var eventValue = evt.target.value;
+    var selectionStart = evt.target.selectionStart;
+    valueRef.current = [eventValue, evt.target, eventValue.length > userValue.length, isDeleleteButtonDownRef.current, selectionStart, userValue === props.format(eventValue, currentPreviousValue, selectionStart), props.value]; // The main trick is to update underlying input with non formatted value (= eventValue)
+    // that allows us to calculate right cursor position after formatting (see getCursorPosition)
+    // then we format new value and call props.onChange with masked/formatted value
+    // and finally we are able to set cursor position into right place
+
+    refresh(null);
+  }; // React prints warn on server in non production mode about useLayoutEffect usage
+  // in both cases it's noop
+
+
+  if (typeof window !== 'undefined') {
+    React.useLayoutEffect(function () {
+      if (valueRef.current == null) return;
+      var _a = valueRef.current,
+          eventValue = _a[0],
+          input = _a[1],
+          isSizeIncreaseOperation = _a[2],
+          isDeleleteButtonDown = _a[3],
+          selectionStart = _a[4],
+          // No operation means that value itself hasn't been changed, BTW cursor, selection etc can be changed
+      isNoOperation = _a[5],
+          valueAtChange = _a[6];
+      valueRef.current = null; // A calendar selection can replace the controlled value in the same React batch as an
+      // input event from the mask. In that case the event describes an obsolete value and must
+      // not overwrite the date selected in the calendar.
+
+      if (props.value !== valueAtChange) {
+        refresh(null);
+        return;
+      } // this usually occurs on deleting special symbols like ' here 123'123.00
+      // in case of isDeleleteButtonDown cursor should move differently vs backspace
+
+
+      var deleteWasNoOp = isDeleleteButtonDown && isNoOperation; // Create string from only accepted symbols
+
+      var clean = function (str) {
+        return (str.match(props.accept || /\d|\w/g) || []).join('');
+      };
+
+      var valueBeforeSelectionStart = clean(eventValue.substr(0, input.selectionStart)); // trying to find cursor position in formatted value having knowledge about valueBeforeSelectionStart
+      // This works because we assume that format doesn't change the order of accepted symbols.
+      // Imagine we have formatter which adds ' symbol between numbers, and by default we refuse all non numeric symbols
+      // for example we had input = 1'2|'4 (| means cursor position) then user entered '3' symbol
+      // inputValue = 1'23'|4 so valueBeforeSelectionStart = 123 and formatted value = 1'2'3'4
+      // calling getCursorPosition("1'2'3'4") will give us position after 3, 1'2'3|'4
+      // so for formatting just this function to determine cursor position after formatting is enough
+      // with masking we need to do some additional checks see `mask` below
+
+      var getCursorPosition = function (val) {
+        var start = 0;
+        var cleanPos = 0;
+
+        for (var i = 0; i !== valueBeforeSelectionStart.length; ++i) {
+          var newPos = val.indexOf(valueBeforeSelectionStart[i], start) + 1;
+          var newCleanPos = clean(val).indexOf(valueBeforeSelectionStart[i], cleanPos) + 1; // this skips position change if accepted symbols order was broken
+          // For example fixes edge case with fixed point numbers:
+          // You have '0|.00', then press 1, it becomes 01|.00 and after format 1.00, this breaks our assumption
+          // that order of accepted symbols is not changed after format,
+          // so here we don't update start position if other accepted symbols was inbetween current and new position
+
+          if (newCleanPos - cleanPos > 1) {
+            newPos = start;
+            newCleanPos = cleanPos;
+          }
+
+          cleanPos = Math.max(newCleanPos, cleanPos);
+          start = Math.max(start, newPos);
+        }
+
+        return start;
+      }; //let start = getCursorPosition(eventValue);
+      //   // Masking part, for masks if size of mask is above some value
+      //   // we need to replace symbols instead of do nothing as like in format
+      //   if (props.mask === true && isSizeIncreaseOperation && !isNoOperation) {
+      //     const c = clean(eventValue.substr(start))[0];
+      //     start = eventValue.indexOf(c, start);
+      //     eventValue = `${eventValue.substr(0, start)}${eventValue.substr(
+      //       start + 1
+      //     )}`;
+      //   }
+
+
+      var formattedValue = props.format(eventValue, currentPreviousValue, selectionStart);
+      var replacedValue = replace ? replace(formattedValue) : formattedValue;
+      var start = getCursorPosition(formattedValue);
+      var inputCharPosition = start - 1;
+
+      if (inputCharPosition > -1) {
+        if (props.letterPosition && props.letterPosition > -1 && replacedValue[inputCharPosition].match(/[a-zA-Z]/) && (inputCharPosition < props.letterPosition || inputCharPosition > props.letterPosition + 1)) {
+          replacedValue = currentPreviousValue;
+        } else if (props.letterPosition && props.letterPosition > -1 && replacedValue[inputCharPosition].match(/\d/) && inputCharPosition >= props.letterPosition && inputCharPosition <= props.letterPosition + 1) {
+          replacedValue = currentPreviousValue;
+        }
+      }
+
+      if (userValue === replacedValue) {
+        // if nothing changed for formatted value, just refresh so userValue will be used at render
+        refresh(null);
+      } else {
+        props.onChange(replacedValue);
+      }
+
+      return function () {
+        // Visually improves working with masked values,
+        // like cursor jumping over refused symbols
+        // as an example date mask: was "5|1-24-3" then user pressed "6"
+        // it becomes "56-|12-43" with this code, and "56|-12-43" without
+        if (props.mask != null && (isSizeIncreaseOperation || isDeleleteButtonDown && !deleteWasNoOp)) {
+          while (formattedValue[start] && clean(formattedValue[start]) === '' && formattedValue[start] != maskChar) {
+            start += 1;
+          }
+        } //input.selectionStart = input.selectionEnd = start + (deleteWasNoOp ? 1 : 0);
+
+      };
+    });
+  }
+
+  React.useEffect(function () {
+    // until https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/inputType will be supported
+    // by all major browsers (now supported by: +chrome, +safari, ?edge, !firefox)
+    // there is no way I found to distinguish in onChange
+    // backspace or delete was called in some situations
+    // firefox track https://bugzilla.mozilla.org/show_bug.cgi?id=1447239
+    var handleKeyDown = function (evt) {
+      if (evt.code === 'Delete') {
+        isDeleleteButtonDownRef.current = true;
+      }
+    };
+
+    var handleKeyUp = function (evt) {
+      if (evt.code === 'Delete') {
+        isDeleleteButtonDownRef.current = false;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('keyup', handleKeyUp);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('keyup', handleKeyUp);
+    };
+  }, []);
+  var value = valueRef.current != null ? valueRef.current[0] : userValue; //   value = props.format(value, currentPreviousValue);
+
+  previousValue.value = value;
+  return props.children({
+    value: value,
+    onChange: onChange
+  });
+};
+
+var KeyboardDateInput = function (_a) {
+  var inputValue = _a.inputValue,
+      _b = _a.showErrorOnBlur,
+      showErrorOnBlur = _b === void 0 ? false : _b,
+      inputVariant = _a.inputVariant,
+      validationError = _a.validationError,
+      KeyboardButtonProps = _a.KeyboardButtonProps,
+      InputAdornmentProps = _a.InputAdornmentProps,
+      onClick = _a.onClick,
+      onChange = _a.onChange,
+      onBlur = _a.onBlur,
+      onFocus = _a.onFocus,
+      InputProps = _a.InputProps,
+      mask = _a.mask,
+      _c = _a.maskChar,
+      maskChar = _c === void 0 ? '_' : _c,
+      _d = _a.refuse,
+      format = _a.format,
+      keyboardIcon = _a.keyboardIcon,
+      disabled = _a.disabled,
+      rifmFormatter = _a.rifmFormatter,
+      _e = _a.TextFieldComponent,
+      TextFieldComponent = _e === void 0 ? TextField : _e,
+      other = tslib.__rest(_a, ["inputValue", "showErrorOnBlur", "inputVariant", "validationError", "KeyboardButtonProps", "InputAdornmentProps", "onClick", "onChange", "onBlur", "onFocus", "InputProps", "mask", "maskChar", "refuse", "format", "keyboardIcon", "disabled", "rifmFormatter", "TextFieldComponent"]);
+
+  var inputMask = mask || makeMaskFromFormat(format, maskChar);
+  var letterPosition = format.indexOf('a'); // prettier-ignore
+
+  var formatter = React.useCallback(maskedDateFormatter(inputMask, maskChar), [mask, maskChar]);
+  var position = InputAdornmentProps && InputAdornmentProps.position ? InputAdornmentProps.position : 'end';
+
+  var handleChange = function (text) {
+    var finalString = text === '' || text === inputMask ? null : text;
+    onChange(finalString);
+  };
+
+  var replace = function (text) {
+    return text;
+  };
+
+  var _f = React.useState(showErrorOnBlur ? true : false),
+      showErrorFlag = _f[0],
+      handleBlur = _f[1];
+
+  return React.createElement(Rifm, {
+    value: inputValue,
+    onChange: handleChange,
+    format: rifmFormatter || formatter,
+    replace: replace,
+    mask: true,
+    maskChar: maskChar,
+    letterPosition: letterPosition
+  }, function (_a) {
+    var _b;
+
+    var onChange = _a.onChange,
+        value = _a.value;
+    return React.createElement(TextFieldComponent, tslib.__assign({
+      disabled: disabled,
+      error: Boolean(validationError) && !showErrorFlag,
+      helperText: !showErrorFlag && validationError
+    }, other, {
+      value: value,
+      onChange: onChange,
+      // onInput={changeInputStringValue}
+      // onKeyUp={handleKeyUp}
+      // onMouseUp={handleClick}
+      onBlur: function () {
+        if (onBlur) {
+          onBlur();
+        }
+
+        if (showErrorOnBlur) {
+          handleBlur(false);
+        }
+      },
+      onFocus: function (ev) {
+        if (onFocus) {
+          onFocus(ev);
+        }
+
+        if (showErrorOnBlur) {
+          handleBlur(true);
+        }
+      },
+      variant: inputVariant,
+      InputProps: tslib.__assign(tslib.__assign({}, InputProps), (_b = {}, _b[position + "Adornment"] = React.createElement(InputAdornment, tslib.__assign({
+        position: position
+      }, InputAdornmentProps), React.createElement(core.IconButton, tslib.__assign({
+        disabled: disabled
+      }, KeyboardButtonProps, {
+        onClick: onClick
+      }), keyboardIcon)), _b))
+    }));
+  });
+};
+
+KeyboardDateInput.defaultProps = {
+  keyboardIcon: React.createElement(KeyboardIcon, null)
+};
+
+function parseInputString(value, utils, format) {
+  try {
+    return utils.parse(value, format);
+  } catch (_a) {
+    return null;
+  }
+}
+
+function useKeyboardPickerState(props, options) {
+  var _a = props.format,
+      format = _a === void 0 ? options.getDefaultFormat() : _a,
+      inputValue = props.inputValue,
+      onChange = props.onChange,
+      value = props.value;
+  var utils = useUtils();
+  var displayDate = getDisplayDate(value, format, utils, value === null, props);
+
+  var _b = React.useState(displayDate),
+      innerInputValue = _b[0],
+      setInnerInputValue = _b[1];
+
+  var dateValue = inputValue ? parseInputString(inputValue, utils, format) : value;
+  React.useEffect(function () {
+    if (value === null || utils.isValid(value)) {
+      setInnerInputValue(displayDate);
+    }
+  }, [displayDate, setInnerInputValue, utils, value]);
+  var handleKeyboardChange = React.useCallback(function (date) {
+    var formattedValue = date === null ? null : utils.format(date, format);
+    setInnerInputValue(formattedValue || '');
+    onChange(date, formattedValue);
+  }, [format, onChange, utils]);
+
+  var _c = usePickerState(tslib.__assign(tslib.__assign({}, props), {
+    value: dateValue,
+    onChange: handleKeyboardChange
+  }), options),
+      innerInputProps = _c.inputProps,
+      wrapperProps = _c.wrapperProps,
+      pickerProps = _c.pickerProps;
+
+  var inputProps = React.useMemo(function () {
+    return tslib.__assign(tslib.__assign({}, innerInputProps), {
+      format: wrapperProps.format,
+      inputValue: inputValue || innerInputValue,
+      onChange: function (value) {
+        setInnerInputValue(value || '');
+        var date = value === null ? null : utils.parse(value, wrapperProps.format);
+        onChange(date, value);
+      }
+    });
+  }, [innerInputProps, innerInputValue, inputValue, onChange, utils, wrapperProps.format]);
+  return {
+    inputProps: inputProps,
+    wrapperProps: wrapperProps,
+    pickerProps: pickerProps
+  };
+}
+
+// TODO investigate how to reduce duplications
+
+function makeKeyboardPicker(_a) {
+  var useOptions = _a.useOptions,
+      getCustomProps = _a.getCustomProps,
+      DefaultToolbarComponent = _a.DefaultToolbarComponent;
+
+  function WrappedKeyboardPicker(props) {
+    var allowKeyboardControl = props.allowKeyboardControl,
+        ampm = props.ampm,
+        hideTabs = props.hideTabs,
+        animateYearScrolling = props.animateYearScrolling,
+        autoOk = props.autoOk,
+        disableFuture = props.disableFuture,
+        disablePast = props.disablePast,
+        format = props.format,
+        forwardedRef = props.forwardedRef,
+        initialFocusedDate = props.initialFocusedDate,
+        invalidDateMessage = props.invalidDateMessage,
+        labelFunc = props.labelFunc,
+        leftArrowIcon = props.leftArrowIcon,
+        leftArrowButtonProps = props.leftArrowButtonProps,
+        maxDate = props.maxDate,
+        maxDateMessage = props.maxDateMessage,
+        minDate = props.minDate,
+        onOpen = props.onOpen,
+        onClose = props.onClose,
+        minDateMessage = props.minDateMessage,
+        strictCompareDates = props.strictCompareDates,
+        minutesStep = props.minutesStep,
+        onAccept = props.onAccept,
+        onChange = props.onChange,
+        onMonthChange = props.onMonthChange,
+        onYearChange = props.onYearChange,
+        renderDay = props.renderDay,
+        views = props.views,
+        openTo = props.openTo,
+        rightArrowIcon = props.rightArrowIcon,
+        rightArrowButtonProps = props.rightArrowButtonProps,
+        shouldDisableDate = props.shouldDisableDate,
+        value = props.value,
+        dateRangeIcon = props.dateRangeIcon,
+        emptyLabel = props.emptyLabel,
+        invalidLabel = props.invalidLabel,
+        timeIcon = props.timeIcon,
+        orientation = props.orientation,
+        variant = props.variant,
+        disableToolbar = props.disableToolbar,
+        loadingIndicator = props.loadingIndicator,
+        showActionsBar = props.showActionsBar,
+        showTodayButton = props.showTodayButton,
+        todayLabel = props.todayLabel,
+        _a = props.ToolbarComponent,
+        ToolbarComponent = _a === void 0 ? DefaultToolbarComponent : _a,
+        showShiftButtons = props.showShiftButtons,
+        setShiftFunction = props.setShiftFunction,
+        shiftButtonValues = props.shiftButtonValues,
+        other = tslib.__rest(props, ["allowKeyboardControl", "ampm", "hideTabs", "animateYearScrolling", "autoOk", "disableFuture", "disablePast", "format", "forwardedRef", "initialFocusedDate", "invalidDateMessage", "labelFunc", "leftArrowIcon", "leftArrowButtonProps", "maxDate", "maxDateMessage", "minDate", "onOpen", "onClose", "minDateMessage", "strictCompareDates", "minutesStep", "onAccept", "onChange", "onMonthChange", "onYearChange", "renderDay", "views", "openTo", "rightArrowIcon", "rightArrowButtonProps", "shouldDisableDate", "value", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "orientation", "variant", "disableToolbar", "loadingIndicator", "showActionsBar", "showTodayButton", "todayLabel", "ToolbarComponent", "showShiftButtons", "setShiftFunction", "shiftButtonValues"]);
+
+    var injectedProps = getCustomProps ? getCustomProps(props) : {};
+    var options = useOptions(props);
+
+    var _b = useKeyboardPickerState(props, options),
+        pickerProps = _b.pickerProps,
+        inputProps = _b.inputProps,
+        wrapperProps = _b.wrapperProps;
+
+    return React.createElement(Wrapper, tslib.__assign({
+      variant: variant,
+      InputComponent: KeyboardDateInput,
+      DateInputProps: inputProps
+    }, injectedProps, wrapperProps, other), React.createElement(Picker, tslib.__assign({}, pickerProps, {
+      ToolbarComponent: ToolbarComponent,
+      disableToolbar: disableToolbar,
+      hideTabs: hideTabs,
+      orientation: orientation,
+      showActionsBar: showActionsBar,
+      showTodayButton: showTodayButton,
+      todayLabel: todayLabel,
+      ampm: ampm,
+      views: views,
+      openTo: openTo,
+      allowKeyboardControl: allowKeyboardControl,
+      minutesStep: minutesStep,
+      animateYearScrolling: animateYearScrolling,
+      disableFuture: disableFuture,
+      disablePast: disablePast,
+      leftArrowIcon: leftArrowIcon,
+      leftArrowButtonProps: leftArrowButtonProps,
+      maxDate: maxDate,
+      minDate: minDate,
+      strictCompareDates: strictCompareDates,
+      onMonthChange: onMonthChange,
+      onYearChange: onYearChange,
+      renderDay: renderDay,
+      dateRangeIcon: dateRangeIcon,
+      timeIcon: timeIcon,
+      rightArrowIcon: rightArrowIcon,
+      rightArrowButtonProps: rightArrowButtonProps,
+      shouldDisableDate: shouldDisableDate,
+      loadingIndicator: loadingIndicator,
+      showShiftButtons: showShiftButtons,
+      setShiftFunction: setShiftFunction,
+      shiftButtonValues: shiftButtonValues
+    })));
+  }
+
+  return WrappedKeyboardPicker;
+}
+
+var defaultProps = tslib.__assign(tslib.__assign({}, datePickerDefaultProps), {
+  openTo: 'date',
+  views: ['year', 'date'],
+  showActionsBar: false,
+  todayLabel: 'TODAY'
+});
+
+function useOptions(props) {
+  var utils = useUtils();
+  return {
+    getDefaultFormat: function () {
+      return getFormatByViews(props.views, utils);
+    }
+  };
+}
+
+var DatePicker = makePurePicker({
+  useOptions: useOptions,
+  DefaultToolbarComponent: DatePickerToolbar
+});
+var KeyboardDatePicker = makeKeyboardPicker({
+  useOptions: useOptions,
+  DefaultToolbarComponent: DatePickerToolbar
+});
+DatePicker.defaultProps = defaultProps;
+KeyboardDatePicker.defaultProps = defaultProps;
+
+var useStyles$e = styles$5.makeStyles({
+  toolbarLandscape: {
+    flexWrap: 'wrap'
+  },
+  toolbarAmpmLeftPadding: {
+    paddingLeft: 50
+  },
+  separator: {
+    margin: '0 4px 0 2px',
+    cursor: 'default'
+  },
+  hourMinuteLabel: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end'
+  },
+  hourMinuteLabelLandscape: {
+    marginTop: 'auto'
+  },
+  hourMinuteLabelReverse: {
+    flexDirection: 'row-reverse'
+  },
+  ampmSelection: {
+    marginLeft: 20,
+    marginRight: -20,
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  ampmLandscape: {
+    margin: '4px 0 auto',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    flexBasis: '100%'
+  },
+  ampmSelectionWithSeconds: {
+    marginLeft: 15,
+    marginRight: 10
+  },
+  ampmLabel: {
+    fontSize: 18
+  }
+}, {
+  name: 'MuiPickersTimePickerToolbar'
+});
+function useMeridiemMode(date, ampm, onChange) {
+  var utils = useUtils();
+  var meridiemMode = getMeridiem(date, utils);
+  var handleMeridiemChange = React.useCallback(function (mode) {
+    var timeWithMeridiem = convertToMeridiem(date, mode, Boolean(ampm), utils);
+    onChange(timeWithMeridiem, false);
+  }, [ampm, date, onChange, utils]);
+  return {
+    meridiemMode: meridiemMode,
+    handleMeridiemChange: handleMeridiemChange
+  };
+}
+
+var TimePickerToolbar = function (_a) {
+  var _b, _c, _d;
+
+  var date = _a.date,
+      views = _a.views,
+      ampm = _a.ampm,
+      openView = _a.openView,
+      onChange = _a.onChange,
+      isLandscape = _a.isLandscape,
+      setOpenView = _a.setOpenView;
+  var utils = useUtils();
+  var theme = styles$5.useTheme();
+  var classes = useStyles$e();
+
+  var _e = useMeridiemMode(date, ampm, onChange),
+      meridiemMode = _e.meridiemMode,
+      handleMeridiemChange = _e.handleMeridiemChange;
+
+  var clockTypographyVariant = isLandscape ? 'h3' : 'h2';
+  return React.createElement(PickerToolbar, {
+    isLandscape: isLandscape,
+    className: clsx((_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b[classes.toolbarAmpmLeftPadding] = ampm && !isLandscape, _b))
+  }, React.createElement("div", {
+    className: clsx(classes.hourMinuteLabel, (_c = {}, _c[classes.hourMinuteLabelLandscape] = isLandscape, _c[classes.hourMinuteLabelReverse] = theme.direction === 'rtl', _c))
+  }, arrayIncludes(views, 'hours') && React.createElement(ToolbarButton$1, {
+    variant: clockTypographyVariant,
+    onClick: function () {
+      return setOpenView(ClockType$1.HOURS);
+    },
+    selected: openView === ClockType$1.HOURS,
+    label: utils.getHourText(date, Boolean(ampm))
+  }), arrayIncludes(views, ['hours', 'minutes']) && React.createElement(ToolbarText, {
+    label: ":",
+    variant: clockTypographyVariant,
+    selected: false,
+    className: classes.separator
+  }), arrayIncludes(views, 'minutes') && React.createElement(ToolbarButton$1, {
+    variant: clockTypographyVariant,
+    onClick: function () {
+      return setOpenView(ClockType$1.MINUTES);
+    },
+    selected: openView === ClockType$1.MINUTES,
+    label: utils.getMinuteText(date)
+  }), arrayIncludes(views, ['minutes', 'seconds']) && React.createElement(ToolbarText, {
+    variant: "h2",
+    label: ":",
+    selected: false,
+    className: classes.separator
+  }), arrayIncludes(views, 'seconds') && React.createElement(ToolbarButton$1, {
+    variant: "h2",
+    onClick: function () {
+      return setOpenView(ClockType$1.SECONDS);
+    },
+    selected: openView === ClockType$1.SECONDS,
+    label: utils.getSecondText(date)
+  })), ampm && React.createElement("div", {
+    className: clsx(classes.ampmSelection, (_d = {}, _d[classes.ampmLandscape] = isLandscape, _d[classes.ampmSelectionWithSeconds] = arrayIncludes(views, 'seconds'), _d))
+  }, React.createElement(ToolbarButton$1, {
+    disableRipple: true,
+    variant: "subtitle1",
+    selected: meridiemMode === 'am',
+    typographyClassName: classes.ampmLabel,
+    label: utils.getMeridiemText('am'),
+    onClick: function () {
+      return handleMeridiemChange('am');
+    }
+  }), React.createElement(ToolbarButton$1, {
+    disableRipple: true,
+    variant: "subtitle1",
+    selected: meridiemMode === 'pm',
+    typographyClassName: classes.ampmLabel,
+    label: utils.getMeridiemText('pm'),
+    onClick: function () {
+      return handleMeridiemChange('pm');
+    }
+  })));
+};
+
+var defaultProps$1 = tslib.__assign(tslib.__assign({}, timePickerDefaultProps), {
+  openTo: 'hours',
+  views: ['hours', 'minutes']
+});
+
+function useOptions$1(props) {
+  var utils = useUtils();
+  return {
+    getDefaultFormat: function () {
+      return pick12hOr24hFormat(props.format, props.ampm, {
+        '12h': utils.time12hFormat,
+        '24h': utils.time24hFormat
+      });
+    }
+  };
+}
+
+var TimePicker = makePurePicker({
+  useOptions: useOptions$1,
+  DefaultToolbarComponent: TimePickerToolbar
+});
+var KeyboardTimePicker = makeKeyboardPicker({
+  useOptions: useOptions$1,
+  DefaultToolbarComponent: TimePickerToolbar,
+  getCustomProps: function (props) {
+    return {
+      refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi
+    };
+  }
+});
+TimePicker.defaultProps = defaultProps$1;
+KeyboardTimePicker.defaultProps = defaultProps$1;
+
+var TimeIcon = function (props) {
+  return React__default.createElement(SvgIcon, tslib.__assign({}, props), React__default.createElement("path", {
+    d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }), React__default.createElement("path", {
+    fill: "none",
+    d: "M0 0h24v24H0z"
+  }), React__default.createElement("path", {
+    d: "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
+  }));
+};
+
+var DateRangeIcon = function (props) {
+  return React__default.createElement(SvgIcon, tslib.__assign({}, props), React__default.createElement("path", {
+    d: "M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"
+  }), React__default.createElement("path", {
+    fill: "none",
+    d: "M0 0h24v24H0z"
+  }));
+};
+
+var viewToTabIndex = function (openView) {
+  if (openView === 'date' || openView === 'year') {
+    return 'date';
+  }
+
+  return 'time';
+};
+
+var tabIndexToView = function (tab) {
+  if (tab === 'date') {
+    return 'date';
+  }
+
+  return 'hours';
+};
+
+var useStyles$f = styles$5.makeStyles(function (theme) {
+  // prettier-ignore
+  var tabsBackground = theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background.default;
+  return {
+    tabs: {
+      color: theme.palette.getContrastText(tabsBackground),
+      backgroundColor: tabsBackground
+    }
+  };
+}, {
+  name: 'MuiPickerDTTabs'
+});
+var DateTimePickerTabs = function (_a) {
+  var view = _a.view,
+      onChange = _a.onChange,
+      dateRangeIcon = _a.dateRangeIcon,
+      timeIcon = _a.timeIcon;
+  var classes = useStyles$f();
+  var theme = styles$5.useTheme();
+  var indicatorColor = theme.palette.type === 'light' ? 'secondary' : 'primary';
+
+  var handleChange = function (e, value) {
+    if (value !== viewToTabIndex(view)) {
+      onChange(tabIndexToView(value));
+    }
+  };
+
+  return React.createElement(Paper, null, React.createElement(Tabs, {
+    variant: "fullWidth",
+    value: viewToTabIndex(view),
+    onChange: handleChange,
+    className: classes.tabs,
+    indicatorColor: indicatorColor
+  }, React.createElement(Tab, {
+    value: "date",
+    icon: React.createElement(React.Fragment, null, dateRangeIcon)
+  }), React.createElement(Tab, {
+    value: "time",
+    icon: React.createElement(React.Fragment, null, timeIcon)
+  })));
+};
+DateTimePickerTabs.defaultProps = {
+  dateRangeIcon: React.createElement(DateRangeIcon, null),
+  timeIcon: React.createElement(TimeIcon, null)
+};
+
+var useStyles$g = styles$5.makeStyles(function (_) {
+  return {
+    toolbar: {
+      paddingLeft: 16,
+      paddingRight: 16,
+      justifyContent: 'space-around'
+    },
+    separator: {
+      margin: '0 4px 0 2px',
+      cursor: 'default'
+    }
+  };
+}, {
+  name: 'MuiPickerDTToolbar'
+});
+var DateTimePickerToolbar = function (_a) {
+  var date = _a.date,
+      openView = _a.openView,
+      setOpenView = _a.setOpenView,
+      ampm = _a.ampm,
+      hideTabs = _a.hideTabs,
+      dateRangeIcon = _a.dateRangeIcon,
+      timeIcon = _a.timeIcon,
+      onChange = _a.onChange;
+  var utils = useUtils();
+  var classes = useStyles$g();
+  var showTabs = !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
+
+  var _b = useMeridiemMode(date, ampm, onChange),
+      meridiemMode = _b.meridiemMode,
+      handleMeridiemChange = _b.handleMeridiemChange;
+
+  var theme = styles$5.useTheme();
+  var rtl = theme.direction === 'rtl';
+  return React.createElement(React.Fragment, null, React.createElement(PickerToolbar, {
+    isLandscape: false,
+    className: classes.toolbar
+  }, React.createElement(core.Grid, {
+    container: true,
+    justify: "center",
+    wrap: "nowrap"
+  }, React.createElement(core.Grid, {
+    item: true,
+    container: true,
+    xs: 5,
+    justify: "flex-start",
+    direction: "column"
+  }, React.createElement("div", null, React.createElement(ToolbarButton$1, {
+    variant: "subtitle1",
+    onClick: function () {
+      return setOpenView('year');
+    },
+    selected: openView === 'year',
+    label: utils.getYearText(date)
+  })), React.createElement("div", null, React.createElement(ToolbarButton$1, {
+    variant: "h4",
+    onClick: function () {
+      return setOpenView('date');
+    },
+    selected: openView === 'date',
+    label: utils.getDateTimePickerHeaderText(date)
+  }))), React.createElement(core.Grid, {
+    item: true,
+    container: true,
+    xs: 6,
+    justify: "center",
+    alignItems: "flex-end",
+    direction: rtl ? 'row-reverse' : 'row'
+  }, React.createElement(ToolbarButton$1, {
+    variant: "h3",
+    onClick: function () {
+      return setOpenView('hours');
+    },
+    selected: openView === 'hours',
+    label: utils.getHourText(date, ampm)
+  }), React.createElement(ToolbarText, {
+    variant: "h3",
+    label: ":",
+    className: classes.separator
+  }), React.createElement(ToolbarButton$1, {
+    variant: "h3",
+    onClick: function () {
+      return setOpenView('minutes');
+    },
+    selected: openView === 'minutes',
+    label: utils.getMinuteText(date)
+  })), ampm && React.createElement(core.Grid, {
+    item: true,
+    container: true,
+    xs: 1,
+    direction: "column",
+    justify: "flex-end"
+  }, React.createElement(ToolbarButton$1, {
+    variant: "subtitle1",
+    selected: meridiemMode === 'am',
+    label: utils.getMeridiemText('am'),
+    onClick: function () {
+      return handleMeridiemChange('am');
+    }
+  }), React.createElement(ToolbarButton$1, {
+    variant: "subtitle1",
+    selected: meridiemMode === 'pm',
+    label: utils.getMeridiemText('pm'),
+    onClick: function () {
+      return handleMeridiemChange('pm');
+    }
+  })))), showTabs && React.createElement(DateTimePickerTabs, {
+    dateRangeIcon: dateRangeIcon,
+    timeIcon: timeIcon,
+    view: openView,
+    onChange: setOpenView
+  }));
+};
+
+var defaultProps$2 = tslib.__assign(tslib.__assign({}, dateTimePickerDefaultProps), {
+  showActionsBar: false,
+  todayLabel: 'TODAY',
+  wider: true,
+  orientation: 'portrait',
+  openTo: 'date',
+  views: ['year', 'date', 'hours', 'minutes']
+});
+
+function useOptions$2(props) {
+  var utils = useUtils();
+
+  if (props.orientation !== 'portrait') {
+    throw new Error('We are not supporting custom orientation for DateTimePicker yet :(');
+  }
+
+  return {
+    getDefaultFormat: function () {
+      return pick12hOr24hFormat(props.format, props.ampm, {
+        '12h': utils.dateTime12hFormat,
+        '24h': utils.dateTime24hFormat
+      });
+    }
+  };
+}
+
+var DateTimePicker = makePurePicker({
+  useOptions: useOptions$2,
+  DefaultToolbarComponent: DateTimePickerToolbar
+});
+var KeyboardDateTimePicker = makeKeyboardPicker({
+  useOptions: useOptions$2,
+  DefaultToolbarComponent: DateTimePickerToolbar,
+  getCustomProps: function (props) {
+    return {
+      refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi
+    };
+  }
+});
+DateTimePicker.defaultProps = defaultProps$2;
+KeyboardDateTimePicker.defaultProps = defaultProps$2;
+
+exports.Calendar = Calendar$1;
+exports.Clock = Clock$1;
+exports.DatePicker = DatePicker;
+exports.DateTimePicker = DateTimePicker;
+exports.Day = Day;
+exports.KeyboardDatePicker = KeyboardDatePicker;
+exports.KeyboardDateTimePicker = KeyboardDateTimePicker;
+exports.KeyboardTimePicker = KeyboardTimePicker;
+exports.MuiPickersContext = MuiPickersContext;
+exports.MuiPickersUtilsProvider = MuiPickersUtilsProvider;
+exports.Picker = Picker;
+exports.TimePicker = TimePicker;
+exports.TimePickerView = ClockView;
+exports.makeKeyboardPicker = makeKeyboardPicker;
+exports.makePurePicker = makePurePicker;
+exports.useKeyboardPickerState = useKeyboardPickerState;
+exports.usePickerState = usePickerState;
+exports.useUtils = useUtils;
+exports.validate = validate;
+//# sourceMappingURL=material-ui-pickers.js.map