@docsvision/material-ui-pickers 3.2.0-beta.26 → 3.2.0-beta.28

package/{build/dist → dist}/material-ui-pickers.esm.js

@@ -21,8 +21,10 @@ import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import Paper from '@material-ui/core/Paper';
 
-var MuiPickersContext = createContext(null);
-var MuiPickersUtilsProvider = function (_a) {
+var MuiPickersContext =
+/*#__PURE__*/
+createContext(null);
+var MuiPickersUtilsProvider = function MuiPickersUtilsProvider(_a) {
   var Utils = _a.utils,
       children = _a.children,
       locale = _a.locale,
@@ -33,10 +35,13 @@ var MuiPickersUtilsProvider = function (_a) {
       moment: libInstance
     });
   }, [Utils, libInstance, locale]);
-  return createElement(MuiPickersContext.Provider, {
-    value: utils,
-    children: children
-  });
+  return (
+    /*#__PURE__*/
+    createElement(MuiPickersContext.Provider, {
+      value: utils,
+      children: children
+    })
+  );
 };
 process.env.NODE_ENV !== "production" ? MuiPickersUtilsProvider.propTypes = {
   utils: func.isRequired,
@@ -44,7 +49,7 @@ process.env.NODE_ENV !== "production" ? MuiPickersUtilsProvider.propTypes = {
   children: oneOfType([element.isRequired, arrayOf(element.isRequired)]).isRequired
 } : void 0;
 
-var checkUtils = function (utils) {
+var checkUtils = function checkUtils(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.');
@@ -57,7 +62,7 @@ function useUtils() {
 }
 
 var useStyles = makeStyles(function (theme) {
-  var textColor = theme.palette.type === 'light' ? theme.palette.primary.contrastText : theme.palette.getContrastText(theme.palette.background.default);
+  var textColor = theme.palette.type === 'light' ? theme.palette.primary.contrastText : theme.palette.getContrastText(theme.palette.background["default"]);
   return {
     toolbarTxt: {
       color: fade(textColor, 0.54)
@@ -70,7 +75,7 @@ var useStyles = makeStyles(function (theme) {
   name: 'MuiPickersToolbarText'
 });
 
-var ToolbarText = function (_a) {
+var ToolbarText = function ToolbarText(_a) {
   var _b;
 
   var selected = _a.selected,
@@ -80,13 +85,16 @@ var ToolbarText = function (_a) {
       other = __rest(_a, ["selected", "label", "className"]);
 
   var classes = useStyles();
-  return createElement(Typography, __assign({
-    children: label,
-    className: clsx(classes.toolbarTxt, className, (_b = {}, _b[classes.toolbarBtnSelected] = selected, _b))
-  }, other));
+  return (
+    /*#__PURE__*/
+    createElement(Typography, __assign({
+      children: label,
+      className: clsx(classes.toolbarTxt, className, (_b = {}, _b[classes.toolbarBtnSelected] = selected, _b))
+    }, other))
+  );
 };
 
-var ToolbarButton = function (_a) {
+var ToolbarButton = function ToolbarButton(_a) {
   var classes = _a.classes,
       _b = _a.className,
       className = _b === void 0 ? null : _b,
@@ -97,16 +105,21 @@ var ToolbarButton = function (_a) {
       typographyClassName = _a.typographyClassName,
       other = __rest(_a, ["classes", "className", "label", "selected", "variant", "align", "typographyClassName"]);
 
-  return createElement(Button, __assign({
-    variant: "text",
-    className: clsx(classes.toolbarBtn, className)
-  }, other), createElement(ToolbarText, {
-    align: align,
-    className: typographyClassName,
-    variant: variant,
-    label: label,
-    selected: selected
-  }));
+  return (
+    /*#__PURE__*/
+    createElement(Button, __assign({
+      variant: "text",
+      className: clsx(classes.toolbarBtn, className)
+    }, other),
+    /*#__PURE__*/
+    createElement(ToolbarText, {
+      align: align,
+      className: typographyClassName,
+      variant: variant,
+      label: label,
+      selected: selected
+    }))
+  );
 };
 
 process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
@@ -138,7 +151,7 @@ var useStyles$1 = makeStyles(function (theme) {
       alignItems: 'center',
       justifyContent: 'center',
       height: 100,
-      backgroundColor: theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background.default
+      backgroundColor: theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background["default"]
     },
     toolbarLandscape: {
       height: 'auto',
@@ -151,7 +164,7 @@ var useStyles$1 = makeStyles(function (theme) {
   name: 'MuiPickersToolbar'
 });
 
-var PickerToolbar = function (_a) {
+var PickerToolbar = function PickerToolbar(_a) {
   var _b;
 
   var children = _a.children,
@@ -161,9 +174,12 @@ var PickerToolbar = function (_a) {
       other = __rest(_a, ["children", "isLandscape", "className"]);
 
   var classes = useStyles$1();
-  return createElement(Toolbar, __assign({
-    className: clsx(classes.toolbar, (_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b), className)
-  }, other), children);
+  return (
+    /*#__PURE__*/
+    createElement(Toolbar, __assign({
+      className: clsx(classes.toolbar, (_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b), className)
+    }, other), children)
+  );
 };
 
 /** Use it instead of .includes method for IE support */
@@ -177,7 +193,7 @@ function arrayIncludes(array, itemOrItems) {
   return array.indexOf(itemOrItems) !== -1;
 }
 
-var findClosestEnabledDate = function (_a) {
+var findClosestEnabledDate = function findClosestEnabledDate(_a) {
   var date = _a.date,
       utils = _a.utils,
       minDate = _a.minDate,
@@ -239,22 +255,22 @@ var findClosestEnabledDate = function (_a) {
 
   return null;
 };
-var isYearOnlyView = function (views) {
+var isYearOnlyView = function isYearOnlyView(views) {
   return views.length === 1 && views[0] === 'year';
 };
-var isYearAndMonthViews = function (views) {
+var isYearAndMonthViews = function isYearAndMonthViews(views) {
   return views.length === 2 && arrayIncludes(views, 'month') && arrayIncludes(views, 'year');
 };
-var getFormatByViews = function (views, utils) {
+var getFormatByViews = function getFormatByViews(views, utils) {
   if (isYearOnlyView(views)) {
-    return utils.yearFormat;
+    return utils.formats.year;
   }
 
   if (isYearAndMonthViews(views)) {
-    return utils.yearMonthFormat;
+    return utils.formats.monthAndYear;
   }
 
-  return utils.dateFormat;
+  return utils.formats.monthAndDate;
 };
 
 var useStyles$2 = makeStyles({
@@ -271,7 +287,7 @@ var useStyles$2 = makeStyles({
 }, {
   name: 'MuiPickersDatePickerRoot'
 });
-var DatePickerToolbar = function (_a) {
+var DatePickerToolbar = function DatePickerToolbar(_a) {
   var _b, _c;
 
   var date = _a.date,
@@ -287,33 +303,42 @@ var DatePickerToolbar = function (_a) {
   var isYearAndMonth = useMemo(function () {
     return isYearAndMonthViews(views);
   }, [views]);
-  return createElement(PickerToolbar, {
-    isLandscape: isLandscape,
-    className: clsx((_b = {}, _b[classes.toolbar] = !isYearOnly, _b[classes.toolbarLandscape] = isLandscape, _b))
-  }, createElement(ToolbarButton$1, {
-    variant: isYearOnly ? 'h3' : 'subtitle1',
-    onClick: function () {
-      return setOpenView('year');
-    },
-    selected: openView === 'year',
-    label: utils.getYearText(date)
-  }), !isYearOnly && !isYearAndMonth && createElement(ToolbarButton$1, {
-    variant: "h4",
-    selected: openView === 'date',
-    onClick: function () {
-      return setOpenView('date');
+  return (
+    /*#__PURE__*/
+    createElement(PickerToolbar, {
+      isLandscape: isLandscape,
+      className: clsx((_b = {}, _b[classes.toolbar] = !isYearOnly, _b[classes.toolbarLandscape] = isLandscape, _b))
     },
-    align: isLandscape ? 'left' : 'center',
-    label: utils.getDatePickerHeaderText(date),
-    className: clsx((_c = {}, _c[classes.dateLandscape] = isLandscape, _c))
-  }), isYearAndMonth && createElement(ToolbarButton$1, {
-    variant: "h4",
-    onClick: function () {
-      return setOpenView('month');
-    },
-    selected: openView === 'month',
-    label: utils.getMonthText(date)
-  }));
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: isYearOnly ? 'h3' : 'subtitle1',
+      onClick: function onClick() {
+        return setOpenView('year');
+      },
+      selected: openView === 'year',
+      label: utils.formatByString(date, utils.formats.year)
+    }), !isYearOnly && !isYearAndMonth &&
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h4",
+      selected: openView === 'date',
+      onClick: function onClick() {
+        return setOpenView('date');
+      },
+      align: isLandscape ? 'left' : 'center',
+      label: utils.formatByString(date, utils.formats.normalDateWithWeekday),
+      className: clsx((_c = {}, _c[classes.dateLandscape] = isLandscape, _c))
+    }), isYearAndMonth &&
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h4",
+      onClick: function onClick() {
+        return setOpenView('month');
+      },
+      selected: openView === 'month',
+      label: utils.formatByString(date, utils.formats.month)
+    }))
+  );
 };
 
 var date = oneOfType([object, string, number, instanceOf(Date)]);
@@ -371,7 +396,7 @@ var useStyles$3 = makeStyles(function (theme) {
 }, {
   name: 'MuiPickersDay'
 });
-var Day = function (_a) {
+var Day = function Day(_a) {
   var _b;
 
   var children = _a.children,
@@ -383,13 +408,18 @@ var Day = function (_a) {
 
   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 createElement(IconButton, __assign({
-    className: className,
-    tabIndex: hidden || disabled ? -1 : 0
-  }, other), createElement(Typography, {
-    variant: "body2",
-    color: "inherit"
-  }, children));
+  return (
+    /*#__PURE__*/
+    createElement(IconButton, __assign({
+      className: className,
+      tabIndex: hidden || disabled ? -1 : 0
+    }, other),
+    /*#__PURE__*/
+    createElement(Typography, {
+      variant: "body2",
+      color: "inherit"
+    }, children))
+  );
 };
 Day.displayName = 'Day';
 process.env.NODE_ENV !== "production" ? Day.propTypes = {
@@ -405,7 +435,7 @@ Day.defaultProps = {
   selected: false
 };
 
-var DayWrapper = function (_a) {
+var DayWrapper = function DayWrapper(_a) {
   var children = _a.children,
       value = _a.value,
       disabled = _a.disabled,
@@ -416,11 +446,14 @@ var DayWrapper = function (_a) {
   var handleClick = useCallback(function () {
     return onSelect(value);
   }, [onSelect, value]);
-  return createElement("div", __assign({
-    role: "presentation",
-    onClick: dayInCurrentMonth && !disabled ? handleClick : undefined,
-    onKeyPress: dayInCurrentMonth && !disabled ? handleClick : undefined
-  }, other), children);
+  return (
+    /*#__PURE__*/
+    createElement("div", __assign({
+      role: "presentation",
+      onClick: dayInCurrentMonth && !disabled ? handleClick : undefined,
+      onKeyPress: dayInCurrentMonth && !disabled ? handleClick : undefined
+    }, other), children)
+  );
 };
 
 var animationDuration = 350;
@@ -470,7 +503,7 @@ var useStyles$4 = makeStyles(function (theme) {
   name: 'MuiPickersSlideTransition'
 });
 
-var SlideTransition = function (_a) {
+var SlideTransition = function SlideTransition(_a) {
   var children = _a.children,
       transKey = _a.transKey,
       slideDirection = _a.slideDirection,
@@ -485,39 +518,61 @@ var SlideTransition = function (_a) {
     // @ts-ignore
     exitActive: classes['slideExitActiveLeft-' + slideDirection]
   };
-  return createElement(TransitionGroup, {
-    className: clsx(classes.transitionContainer, className),
-    childFactory: function (element) {
-      return cloneElement(element, {
-        classNames: transitionClasses
-      });
-    }
-  }, createElement(CSSTransition, {
-    mountOnEnter: true,
-    unmountOnExit: true,
-    key: transKey + slideDirection,
-    timeout: animationDuration,
-    classNames: transitionClasses,
-    children: children
-  }));
-};
-
-var ArrowLeftIcon = function (props) {
-  return React__default.createElement(SvgIcon, __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, __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"
-  }));
+  return (
+    /*#__PURE__*/
+    createElement(TransitionGroup, {
+      className: clsx(classes.transitionContainer, className),
+      childFactory: function childFactory(element) {
+        return (
+          /*#__PURE__*/
+          cloneElement(element, {
+            classNames: transitionClasses
+          })
+        );
+      }
+    },
+    /*#__PURE__*/
+    createElement(CSSTransition, {
+      mountOnEnter: true,
+      unmountOnExit: true,
+      key: transKey + slideDirection,
+      timeout: animationDuration,
+      classNames: transitionClasses,
+      children: children
+    }))
+  );
+};
+
+var ArrowLeftIcon = function ArrowLeftIcon(props) {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(SvgIcon, __assign({}, props),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      fill: "none",
+      d: "M0 0h24v24H0V0z"
+    }))
+  );
+};
+
+var ArrowRightIcon = function ArrowRightIcon(props) {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(SvgIcon, __assign({}, props),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      fill: "none",
+      d: "M0 0h24v24H0V0z"
+    }))
+  );
 };
 
 var useStyles$5 = makeStyles(function (theme) {
@@ -554,7 +609,7 @@ var useStyles$5 = makeStyles(function (theme) {
 }, {
   name: 'MuiPickersCalendarHeader'
 });
-var CalendarHeader = function (_a) {
+var CalendarHeader = function CalendarHeader(_a) {
   var currentMonth = _a.currentMonth,
       onMonthChange = _a.onMonthChange,
       leftArrowIcon = _a.leftArrowIcon,
@@ -569,40 +624,58 @@ var CalendarHeader = function (_a) {
   var theme = useTheme();
   var rtl = theme.direction === 'rtl';
 
-  var selectNextMonth = function () {
+  var selectNextMonth = function selectNextMonth() {
     return onMonthChange(utils.getNextMonth(currentMonth), 'left');
   };
 
-  var selectPreviousMonth = function () {
+  var selectPreviousMonth = function selectPreviousMonth() {
     return onMonthChange(utils.getPreviousMonth(currentMonth), 'right');
   };
 
-  return createElement("div", null, createElement("div", {
-    className: classes.switchHeader
-  }, createElement(IconButton, __assign({}, leftArrowButtonProps, {
-    disabled: disablePrevMonth,
-    onClick: selectPreviousMonth,
-    className: classes.iconButton
-  }), rtl ? rightArrowIcon : leftArrowIcon), createElement(SlideTransition, {
-    slideDirection: slideDirection,
-    transKey: currentMonth.toString(),
-    className: classes.transitionContainer
-  }, createElement(Typography, {
-    align: "center",
-    variant: "body1"
-  }, utils.getCalendarHeaderText(currentMonth))), createElement(IconButton, __assign({}, rightArrowButtonProps, {
-    disabled: disableNextMonth,
-    onClick: selectNextMonth,
-    className: classes.iconButton
-  }), rtl ? leftArrowIcon : rightArrowIcon)), createElement("div", {
-    className: classes.daysHeader
-  }, utils.getWeekdays().map(function (day, index) {
-    return createElement(Typography, {
-      key: index,
-      variant: "caption",
-      className: classes.dayLabel
-    }, day);
-  })));
+  return (
+    /*#__PURE__*/
+    createElement("div", null,
+    /*#__PURE__*/
+    createElement("div", {
+      className: classes.switchHeader
+    },
+    /*#__PURE__*/
+    createElement(IconButton, __assign({}, leftArrowButtonProps, {
+      disabled: disablePrevMonth,
+      onClick: selectPreviousMonth,
+      className: classes.iconButton
+    }), rtl ? rightArrowIcon : leftArrowIcon),
+    /*#__PURE__*/
+    createElement(SlideTransition, {
+      slideDirection: slideDirection,
+      transKey: currentMonth.toString(),
+      className: classes.transitionContainer
+    },
+    /*#__PURE__*/
+    createElement(Typography, {
+      align: "center",
+      variant: "body1"
+    }, utils.formatByString(currentMonth, utils.formats.monthAndYear))),
+    /*#__PURE__*/
+    createElement(IconButton, __assign({}, rightArrowButtonProps, {
+      disabled: disableNextMonth,
+      onClick: selectNextMonth,
+      className: classes.iconButton
+    }), rtl ? leftArrowIcon : rightArrowIcon)),
+    /*#__PURE__*/
+    createElement("div", {
+      className: classes.daysHeader
+    }, utils.getWeekdays().map(function (day, index) {
+      return (
+        /*#__PURE__*/
+        createElement(Typography, {
+          key: index,
+          variant: "caption",
+          className: classes.dayLabel
+        }, day)
+      );
+    })))
+  );
 };
 CalendarHeader.displayName = 'CalendarHeader';
 process.env.NODE_ENV !== "production" ? CalendarHeader.propTypes = {
@@ -612,8 +685,12 @@ process.env.NODE_ENV !== "production" ? CalendarHeader.propTypes = {
   disableNextMonth: bool
 } : void 0;
 CalendarHeader.defaultProps = {
-  leftArrowIcon: createElement(ArrowLeftIcon, null),
-  rightArrowIcon: createElement(ArrowRightIcon, null),
+  leftArrowIcon:
+  /*#__PURE__*/
+  createElement(ArrowLeftIcon, null),
+  rightArrowIcon:
+  /*#__PURE__*/
+  createElement(ArrowRightIcon, null),
   disablePrevMonth: false,
   disableNextMonth: false
 };
@@ -635,7 +712,7 @@ function useKeyDown(active, keyHandlers) {
   });
   useEffect(function () {
     if (active) {
-      var handleKeyDown_1 = function (event) {
+      var handleKeyDown_1 = function handleKeyDown_1(event) {
         runKeyHandler(event, keyHandlers);
       };
 
@@ -647,13 +724,16 @@ function useKeyDown(active, keyHandlers) {
   }, [active, keyHandlers]);
 }
 
-var withUtils = function () {
+var withUtils = function withUtils() {
   return function (Component) {
-    var WithUtils = function (props) {
+    var WithUtils = function WithUtils(props) {
       var utils = useUtils();
-      return createElement(Component, __assign({
-        utils: utils
-      }, props));
+      return (
+        /*#__PURE__*/
+        createElement(Component, __assign({
+          utils: utils
+        }, props))
+      );
     };
 
     WithUtils.displayName = "WithUtils(" + (Component.displayName || Component.name) + ")";
@@ -661,7 +741,7 @@ var withUtils = function () {
   };
 };
 
-var KeyDownListener = function (_a) {
+var KeyDownListener = function KeyDownListener(_a) {
   var onKeyDown = _a.onKeyDown;
   useEffect(function () {
     window.addEventListener('keydown', onKeyDown);
@@ -789,16 +869,16 @@ function (_super) {
           date = _a.date,
           utils = _a.utils;
       runKeyHandler(event, {
-        ArrowUp: function () {
+        ArrowUp: function ArrowUp() {
           return _this.moveToDay(utils.addDays(date, -7));
         },
-        ArrowDown: function () {
+        ArrowDown: function ArrowDown() {
           return _this.moveToDay(utils.addDays(date, 7));
         },
-        ArrowLeft: function () {
+        ArrowLeft: function ArrowLeft() {
           return _this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? -1 : 1));
         },
-        ArrowRight: function () {
+        ArrowRight: function ArrowRight() {
           return _this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? 1 : -1));
         }
       });
@@ -810,10 +890,13 @@ function (_super) {
           classes = _a.classes;
       var weeks = utils.getWeekArray(_this.state.currentMonth);
       return weeks.map(function (week) {
-        return createElement("div", {
-          key: "week-" + week[0].toString(),
-          className: classes.week
-        }, _this.renderDays(week));
+        return (
+          /*#__PURE__*/
+          createElement("div", {
+            key: "week-" + week[0].toString(),
+            className: classes.week
+          }, _this.renderDays(week))
+        );
       });
     };
 
@@ -829,24 +912,29 @@ function (_super) {
         var disabled = _this.shouldDisableDate(day);
 
         var isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
-        var dayComponent = createElement(Day, {
+        var dayComponent =
+        /*#__PURE__*/
+        createElement(Day, {
           disabled: disabled,
           current: utils.isSameDay(day, now),
           hidden: !isDayInCurrentMonth,
           selected: utils.isSameDay(selectedDate, day)
-        }, utils.getDayText(day));
+        }, utils.formatByString(day, utils.formats.dayOfMonth));
 
         if (renderDay) {
           dayComponent = renderDay(day, selectedDate, isDayInCurrentMonth, dayComponent);
         }
 
-        return createElement(DayWrapper, {
-          value: day,
-          key: day.toString(),
-          disabled: disabled,
-          dayInCurrentMonth: isDayInCurrentMonth,
-          onSelect: _this.handleDaySelect
-        }, dayComponent);
+        return (
+          /*#__PURE__*/
+          createElement(DayWrapper, {
+            value: day,
+            key: day.toString(),
+            disabled: disabled,
+            dayInCurrentMonth: isDayInCurrentMonth,
+            onSelect: _this.handleDaySelect
+          }, dayComponent)
+        );
       });
     };
 
@@ -907,26 +995,43 @@ function (_super) {
         rightArrowButtonProps = _b.rightArrowButtonProps,
         rightArrowIcon = _b.rightArrowIcon,
         loadingIndicator = _b.loadingIndicator;
-    var loadingElement = loadingIndicator ? loadingIndicator : createElement(CircularProgress, null);
-    return createElement(Fragment, null, allowKeyboardControl && createElement(KeyDownListener, {
-      onKeyDown: this.handleKeyDown
-    }), createElement(CalendarHeader, {
-      currentMonth: currentMonth,
-      slideDirection: slideDirection,
-      onMonthChange: this.handleChangeMonth,
-      leftArrowIcon: leftArrowIcon,
-      leftArrowButtonProps: leftArrowButtonProps,
-      rightArrowIcon: rightArrowIcon,
-      rightArrowButtonProps: rightArrowButtonProps,
-      disablePrevMonth: this.shouldDisablePrevMonth(),
-      disableNextMonth: this.shouldDisableNextMonth()
-    }), createElement(SlideTransition, {
-      slideDirection: slideDirection,
-      transKey: currentMonth.toString(),
-      className: classes.transitionContainer
-    }, createElement(Fragment, null, this.state.loadingQueue > 0 && createElement("div", {
-      className: classes.progressContainer
-    }, loadingElement) || createElement("div", null, this.renderWeeks()))));
+    var loadingElement = loadingIndicator ? loadingIndicator :
+    /*#__PURE__*/
+    createElement(CircularProgress, null);
+    return (
+      /*#__PURE__*/
+      createElement(Fragment, null, allowKeyboardControl &&
+      /*#__PURE__*/
+      createElement(KeyDownListener, {
+        onKeyDown: this.handleKeyDown
+      }),
+      /*#__PURE__*/
+      createElement(CalendarHeader, {
+        currentMonth: currentMonth,
+        slideDirection: slideDirection,
+        onMonthChange: this.handleChangeMonth,
+        leftArrowIcon: leftArrowIcon,
+        leftArrowButtonProps: leftArrowButtonProps,
+        rightArrowIcon: rightArrowIcon,
+        rightArrowButtonProps: rightArrowButtonProps,
+        disablePrevMonth: this.shouldDisablePrevMonth(),
+        disableNextMonth: this.shouldDisableNextMonth()
+      }),
+      /*#__PURE__*/
+      createElement(SlideTransition, {
+        slideDirection: slideDirection,
+        transKey: currentMonth.toString(),
+        className: classes.transitionContainer
+      },
+      /*#__PURE__*/
+      createElement(Fragment, null, this.state.loadingQueue > 0 &&
+      /*#__PURE__*/
+      createElement("div", {
+        className: classes.progressContainer
+      }, loadingElement) ||
+      /*#__PURE__*/
+      createElement("div", null, this.renderWeeks()))))
+    );
   };
 
   process.env.NODE_ENV !== "production" ? Calendar.propTypes = {
@@ -943,7 +1048,7 @@ function (_super) {
   };
   return Calendar;
 }(Component);
-var styles$1 = function (theme) {
+var styles$1 = function styles(theme) {
   return {
     transitionContainer: {
       minHeight: 36 * 6,
@@ -1017,7 +1122,7 @@ var useStyles$6 = makeStyles(function (theme) {
 }, {
   name: 'MuiPickersYear'
 });
-var Year = function (_a) {
+var Year = function Year(_a) {
   var _b;
 
   var onSelect = _a.onSelect,
@@ -1032,24 +1137,31 @@ var Year = function (_a) {
   var handleClick = useCallback(function () {
     return onSelect(value);
   }, [onSelect, value]);
-  return createElement(Typography, __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));
+  return (
+    /*#__PURE__*/
+    createElement(Typography, __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 = forwardRef(function (props, ref) {
-  return createElement(Year, __assign({}, props, {
-    forwardedRef: ref
-  }));
+var Year$1 = /*#__PURE__*/
+forwardRef(function (props, ref) {
+  return (
+    /*#__PURE__*/
+    createElement(Year, __assign({}, props, {
+      forwardedRef: ref
+    }))
+  );
 });
 
 var DIALOG_WIDTH = 310;
@@ -1069,16 +1181,19 @@ var useStyles$7 = makeStyles$1(function (theme) {
 }, {
   name: 'MuiPickersStaticWrapper'
 });
-var StaticWrapper = function (_a) {
+var StaticWrapper = function StaticWrapper(_a) {
   var children = _a.children;
   var classes = useStyles$7();
-  return createElement("div", {
-    className: classes.staticWrapperRoot,
-    children: children
-  });
+  return (
+    /*#__PURE__*/
+    createElement("div", {
+      className: classes.staticWrapperRoot,
+      children: children
+    })
+  );
 };
 
-var ModalDialog = function (_a) {
+var ModalDialog = function ModalDialog(_a) {
   var _b, _c;
 
   var children = _a.children,
@@ -1097,32 +1212,47 @@ var ModalDialog = function (_a) {
       wider = _a.wider,
       other = __rest(_a, ["children", "classes", "onAccept", "onDismiss", "onClear", "onSetToday", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "clearable", "showTodayButton", "showTabs", "wider"]);
 
-  return createElement(Dialog, __assign({
-    role: "dialog",
-    onClose: onDismiss,
-    classes: {
-      paper: clsx(classes.dialogRoot, (_b = {}, _b[classes.dialogRootWider] = wider, _b))
-    }
-  }, other), createElement(DialogContent, {
-    children: children,
-    className: classes.dialog
-  }), createElement(DialogActions, {
-    classes: {
-      root: clsx((_c = {}, _c[classes.withAdditionalAction] = clearable || showTodayButton, _c))
-    }
-  }, clearable && createElement(Button, {
-    color: "primary",
-    onClick: onClear
-  }, clearLabel), !clearable && showTodayButton && createElement(Button, {
-    color: "primary",
-    onClick: onSetToday
-  }, todayLabel), cancelLabel && createElement(Button, {
-    color: "primary",
-    onClick: onDismiss
-  }, cancelLabel), okLabel && createElement(Button, {
-    color: "primary",
-    onClick: onAccept
-  }, okLabel)));
+  return (
+    /*#__PURE__*/
+    createElement(Dialog, __assign({
+      role: "dialog",
+      onClose: onDismiss,
+      classes: {
+        paper: clsx(classes.dialogRoot, (_b = {}, _b[classes.dialogRootWider] = wider, _b))
+      }
+    }, other),
+    /*#__PURE__*/
+    createElement(DialogContent, {
+      children: children,
+      className: classes.dialog
+    }),
+    /*#__PURE__*/
+    createElement(DialogActions, {
+      classes: {
+        root: clsx((_c = {}, _c[classes.withAdditionalAction] = clearable || showTodayButton, _c))
+      }
+    }, clearable &&
+    /*#__PURE__*/
+    createElement(Button, {
+      color: "primary",
+      onClick: onClear
+    }, clearLabel), !clearable && showTodayButton &&
+    /*#__PURE__*/
+    createElement(Button, {
+      color: "primary",
+      onClick: onSetToday
+    }, todayLabel), cancelLabel &&
+    /*#__PURE__*/
+    createElement(Button, {
+      color: "primary",
+      onClick: onDismiss
+    }, cancelLabel), okLabel &&
+    /*#__PURE__*/
+    createElement(Button, {
+      color: "primary",
+      onClick: onAccept
+    }, okLabel)))
+  );
 };
 ModalDialog.displayName = 'ModalDialog';
 var styles$2 = createStyles({
@@ -1149,7 +1279,7 @@ var ModalDialog$1 = withStyles(styles$2, {
   name: 'MuiPickersModal'
 })(ModalDialog);
 
-var ModalWrapper = function (_a) {
+var ModalWrapper = function ModalWrapper(_a) {
   var open = _a.open,
       children = _a.children,
       okLabel = _a.okLabel,
@@ -1172,22 +1302,29 @@ var ModalWrapper = function (_a) {
   useKeyDown(open, {
     Enter: onAccept
   });
-  return createElement(Fragment, null, createElement(InputComponent, __assign({}, other, DateInputProps)), createElement(ModalDialog$1, __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)));
+  return (
+    /*#__PURE__*/
+    createElement(Fragment, null,
+    /*#__PURE__*/
+    createElement(InputComponent, __assign({}, other, DateInputProps)),
+    /*#__PURE__*/
+    createElement(ModalDialog$1, __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: node,
@@ -1218,7 +1355,7 @@ var useStyles$8 = makeStyles({
 }, {
   name: 'MuiPickersInlineWrapper'
 });
-var InlineWrapper = function (_a) {
+var InlineWrapper = function InlineWrapper(_a) {
   var _b;
 
   var open = _a.open,
@@ -1239,25 +1376,32 @@ var InlineWrapper = function (_a) {
   useKeyDown(open, {
     Enter: onAccept
   });
-  return createElement(Fragment, null, createElement(InputComponent, __assign({}, other, DateInputProps, {
-    inputRef: ref
-  })), createElement(Popover, __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)));
+  return (
+    /*#__PURE__*/
+    createElement(Fragment, null,
+    /*#__PURE__*/
+    createElement(InputComponent, __assign({}, other, DateInputProps, {
+      inputRef: ref
+    })),
+    /*#__PURE__*/
+    createElement(Popover, __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: func,
@@ -1277,15 +1421,22 @@ function getWrapperFromVariant(variant) {
       return ModalWrapper;
   }
 }
-var VariantContext = createContext(null);
-var Wrapper = function (_a) {
+var VariantContext =
+/*#__PURE__*/
+createContext(null);
+var Wrapper = function Wrapper(_a) {
   var variant = _a.variant,
       props = __rest(_a, ["variant"]);
 
   var Component = getWrapperFromVariant(variant);
-  return createElement(VariantContext.Provider, {
-    value: variant || 'dialog'
-  }, createElement(Component, __assign({}, props)));
+  return (
+    /*#__PURE__*/
+    createElement(VariantContext.Provider, {
+      value: variant || 'dialog'
+    },
+    /*#__PURE__*/
+    createElement(Component, __assign({}, props)))
+  );
 };
 
 var useStyles$9 = makeStyles({
@@ -1296,7 +1447,7 @@ var useStyles$9 = makeStyles({
 }, {
   name: 'MuiPickersYearSelection'
 });
-var YearSelection = function (_a) {
+var YearSelection = function YearSelection(_a) {
   var date = _a.date,
       onChange = _a.onChange,
       onYearChange = _a.onYearChange,
@@ -1328,20 +1479,26 @@ var YearSelection = function (_a) {
 
     onChange(newDate, true);
   }, [date, onChange, onYearChange, utils]);
-  return createElement("div", {
-    className: classes.container
-  }, utils.getYearRange(minDate, maxDate).map(function (year) {
-    var yearNumber = utils.getYear(year);
-    var selected = yearNumber === currentYear;
-    return 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));
-  }));
+  return (
+    /*#__PURE__*/
+    createElement("div", {
+      className: classes.container
+    }, utils.getYearRange(minDate, maxDate).map(function (year) {
+      var yearNumber = utils.getYear(year);
+      var selected = yearNumber === currentYear;
+      return (
+        /*#__PURE__*/
+        createElement(Year$1, {
+          key: utils.formatByString(year, utils.formats.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.formatByString(year, utils.formats.year))
+      );
+    }))
+  );
 };
 
 var ClockType;
@@ -1394,12 +1551,17 @@ function (_super) {
     var _c = this.props,
         classes = _c.classes,
         hasSelected = _c.hasSelected;
-    return createElement("div", {
-      style: this.getAngleStyle(),
-      className: clsx(classes.pointer, (_a = {}, _a[classes.animateTransform] = this.state.toAnimateTransform, _a))
-    }, createElement("div", {
-      className: clsx(classes.thumb, (_b = {}, _b[classes.noPoint] = hasSelected, _b))
-    }));
+    return (
+      /*#__PURE__*/
+      createElement("div", {
+        style: this.getAngleStyle(),
+        className: clsx(classes.pointer, (_a = {}, _a[classes.animateTransform] = this.state.toAnimateTransform, _a))
+      },
+      /*#__PURE__*/
+      createElement("div", {
+        className: clsx(classes.thumb, (_b = {}, _b[classes.noPoint] = hasSelected, _b))
+      }))
+    );
   };
 
   ClockPointer.getDerivedStateFromProps = function (nextProps, state) {
@@ -1418,7 +1580,7 @@ function (_super) {
 
   return ClockPointer;
 }(Component);
-var styles$3 = function (theme) {
+var styles$3 = function styles(theme) {
   return createStyles({
     pointer: {
       width: 2,
@@ -1462,11 +1624,11 @@ var basePoint = {
 var cx = basePoint.x - center.x;
 var cy = basePoint.y - center.y;
 
-var rad2deg = function (rad) {
+var rad2deg = function rad2deg(rad) {
   return rad * 57.29577951308232;
 };
 
-var getAngleValue = function (step, offsetX, offsetY) {
+var getAngleValue = function getAngleValue(step, offsetX, offsetY) {
   var x = offsetX - center.x;
   var y = offsetY - center.y;
   var atan = Math.atan2(cx, cy) - Math.atan2(x, y);
@@ -1482,7 +1644,7 @@ var getAngleValue = function (step, offsetX, offsetY) {
   };
 };
 
-var getHours = function (offsetX, offsetY, ampm) {
+var getHours = function getHours(offsetX, offsetY, ampm) {
   var _a = getAngleValue(30, offsetX, offsetY),
       value = _a.value,
       distance = _a.distance;
@@ -1500,7 +1662,7 @@ var getHours = function (offsetX, offsetY, ampm) {
 
   return value;
 };
-var getMinutes = function (offsetX, offsetY, step) {
+var getMinutes = function getMinutes(offsetX, offsetY, step) {
   if (step === void 0) {
     step = 1;
   }
@@ -1510,10 +1672,10 @@ var getMinutes = function (offsetX, offsetY, step) {
   value = value * step % 60;
   return value;
 };
-var getMeridiem = function (date, utils) {
+var getMeridiem = function getMeridiem(date, utils) {
   return utils.getHours(date) >= 12 ? 'pm' : 'am';
 };
-var convertToMeridiem = function (time, meridiem, ampm, utils) {
+var convertToMeridiem = function convertToMeridiem(time, meridiem, ampm, utils) {
   if (ampm) {
     var currentMeridiem = utils.getHours(time) >= 12 ? 'pm' : 'am';
 
@@ -1610,32 +1772,41 @@ function (_super) {
         type = _a.type,
         ampm = _a.ampm;
     var isPointerInner = !ampm && type === ClockType$1.HOURS && (value < 1 || value > 12);
-    return createElement("div", {
-      className: classes.container
-    }, createElement("div", {
-      className: classes.clock
-    }, createElement("div", {
-      role: "menu",
-      tabIndex: -1,
-      className: classes.squareMask,
-      onTouchMove: this.handleTouchMove,
-      onTouchEnd: this.handleTouchEnd,
-      onMouseUp: this.handleMouseUp,
-      onMouseMove: this.handleMove
-    }), createElement("div", {
-      className: classes.pin
-    }), createElement(ClockPointer$1, {
-      type: type,
-      value: value,
-      isInner: isPointerInner,
-      hasSelected: this.hasSelected()
-    }), children));
+    return (
+      /*#__PURE__*/
+      createElement("div", {
+        className: classes.container
+      },
+      /*#__PURE__*/
+      createElement("div", {
+        className: classes.clock
+      },
+      /*#__PURE__*/
+      createElement("div", {
+        role: "menu",
+        tabIndex: -1,
+        className: classes.squareMask,
+        onTouchMove: this.handleTouchMove,
+        onTouchEnd: this.handleTouchEnd,
+        onMouseUp: this.handleMouseUp,
+        onMouseMove: this.handleMove
+      }),
+      /*#__PURE__*/
+      createElement("div", {
+        className: classes.pin
+      }),
+      /*#__PURE__*/
+      createElement(ClockPointer$1, {
+        type: type,
+        value: value,
+        isInner: isPointerInner,
+        hasSelected: this.hasSelected()
+      }), children))
+    );
   };
 
   process.env.NODE_ENV !== "production" ? Clock.propTypes = {
-    type: oneOf(Object.keys(ClockType$1).map(function (key) {
-      return ClockType$1[key];
-    })).isRequired,
+    type: oneOf(Object.values(ClockType$1)).isRequired,
     value: number.isRequired,
     onChange: func.isRequired,
     children: arrayOf(node).isRequired,
@@ -1649,7 +1820,7 @@ function (_super) {
   };
   return Clock;
 }(Component);
-var styles$4 = function (theme) {
+var styles$4 = function styles(theme) {
   return createStyles({
     container: {
       display: 'flex',
@@ -1742,7 +1913,7 @@ var useStyles$a = makeStyles(function (theme) {
 }, {
   name: 'MuiPickersClockNumber'
 });
-var ClockNumber = function (_a) {
+var ClockNumber = function ClockNumber(_a) {
   var _b;
 
   var selected = _a.selected,
@@ -1757,16 +1928,19 @@ var ClockNumber = function (_a) {
       transform: "translate(" + position[0] + "px, " + position[1] + "px"
     };
   }, [index]);
-  return createElement(Typography, {
-    component: "span",
-    className: className,
-    variant: isInner ? 'body2' : 'body1',
-    style: transformStyle,
-    children: label
-  });
-};
-
-var getHourNumbers = function (_a) {
+  return (
+    /*#__PURE__*/
+    createElement(Typography, {
+      component: "span",
+      className: className,
+      variant: isInner ? 'body2' : 'body1',
+      style: transformStyle,
+      children: label
+    })
+  );
+};
+
+var getHourNumbers = function getHourNumbers(_a) {
   var ampm = _a.ampm,
       utils = _a.utils,
       date = _a.date;
@@ -1775,7 +1949,7 @@ var getHourNumbers = function (_a) {
   var startHour = ampm ? 1 : 0;
   var endHour = ampm ? 12 : 23;
 
-  var isSelected = function (hour) {
+  var isSelected = function isSelected(hour) {
     if (ampm) {
       if (hour === 12) {
         return currentHours === 12 || currentHours === 0;
@@ -1800,73 +1974,99 @@ var getHourNumbers = function (_a) {
       selected: isSelected(hour),
       isInner: !ampm && (hour === 0 || hour > 12)
     };
-    hourNumbers.push(createElement(ClockNumber, __assign({
+    hourNumbers.push(
+    /*#__PURE__*/
+    createElement(ClockNumber, __assign({
       key: hour
     }, props)));
   }
 
   return hourNumbers;
 };
-var getMinutesNumbers = function (_a) {
+var getMinutesNumbers = function getMinutesNumbers(_a) {
   var value = _a.value,
       utils = _a.utils;
   var f = utils.formatNumber;
-  return [createElement(ClockNumber, {
+  return [
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('00'),
     selected: value === 0,
     index: 12,
     key: 12
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('05'),
     selected: value === 5,
     index: 1,
     key: 1
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('10'),
     selected: value === 10,
     index: 2,
     key: 2
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('15'),
     selected: value === 15,
     index: 3,
     key: 3
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('20'),
     selected: value === 20,
     index: 4,
     key: 4
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('25'),
     selected: value === 25,
     index: 5,
     key: 5
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('30'),
     selected: value === 30,
     index: 6,
     key: 6
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('35'),
     selected: value === 35,
     index: 7,
     key: 7
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('40'),
     selected: value === 40,
     index: 8,
     key: 8
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('45'),
     selected: value === 45,
     index: 9,
     key: 9
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('50'),
     selected: value === 50,
     index: 10,
     key: 10
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('55'),
     selected: value === 55,
     index: 11,
@@ -1874,7 +2074,7 @@ var getMinutesNumbers = function (_a) {
   })];
 };
 
-var TimePickerView = function (_a) {
+var TimePickerView = function TimePickerView(_a) {
   var type = _a.type,
       onHourChange = _a.onHourChange,
       onMinutesChange = _a.onMinutesChange,
@@ -1893,7 +2093,7 @@ var TimePickerView = function (_a) {
             utils: utils,
             ampm: Boolean(ampm)
           }),
-          onChange: function (value, isFinish) {
+          onChange: function onChange(value, isFinish) {
             var currentMeridiem = getMeridiem(date, utils);
             var updatedTimeWithMeridiem = convertToMeridiem(utils.setHours(date, value), currentMeridiem, Boolean(ampm), utils);
             onHourChange(updatedTimeWithMeridiem, isFinish);
@@ -1908,7 +2108,7 @@ var TimePickerView = function (_a) {
             value: minutesValue,
             utils: utils
           }),
-          onChange: function (value, isFinish) {
+          onChange: function onChange(value, isFinish) {
             var updatedTime = utils.setMinutes(date, value);
             onMinutesChange(updatedTime, isFinish);
           }
@@ -1922,7 +2122,7 @@ var TimePickerView = function (_a) {
             value: secondsValue,
             utils: utils
           }),
-          onChange: function (value, isFinish) {
+          onChange: function onChange(value, isFinish) {
             var updatedTime = utils.setSeconds(date, value);
             onSecondsChange(updatedTime, isFinish);
           }
@@ -1932,11 +2132,14 @@ var TimePickerView = function (_a) {
         throw new Error('You must provide the type for TimePickerView');
     }
   }, [ampm, date, onHourChange, onMinutesChange, onSecondsChange, type, utils]);
-  return createElement(Clock$1, __assign({
-    type: type,
-    ampm: ampm,
-    minutesStep: minutesStep
-  }, viewProps));
+  return (
+    /*#__PURE__*/
+    createElement(Clock$1, __assign({
+      type: type,
+      ampm: ampm,
+      minutesStep: minutesStep
+    }, viewProps))
+  );
 };
 TimePickerView.displayName = 'TimePickerView';
 process.env.NODE_ENV !== "production" ? TimePickerView.propTypes = {
@@ -1946,15 +2149,14 @@ process.env.NODE_ENV !== "production" ? TimePickerView.propTypes = {
   onSecondsChange: func.isRequired,
   ampm: bool,
   minutesStep: number,
-  type: oneOf(Object.keys(ClockType$1).map(function (key) {
-    return ClockType$1[key];
-  })).isRequired
+  type: oneOf(Object.values(ClockType$1)).isRequired
 } : void 0;
 TimePickerView.defaultProps = {
   ampm: true,
   minutesStep: 1
 };
-var ClockView = memo(TimePickerView);
+var ClockView = /*#__PURE__*/
+memo(TimePickerView);
 
 var useStyles$b = makeStyles(function (theme) {
   return {
@@ -1986,7 +2188,7 @@ var useStyles$b = makeStyles(function (theme) {
 }, {
   name: 'MuiPickersMonth'
 });
-var Month = function (_a) {
+var Month = function Month(_a) {
   var _b;
 
   var selected = _a.selected,
@@ -2000,17 +2202,20 @@ var Month = function (_a) {
   var handleSelection = useCallback(function () {
     onSelect(value);
   }, [onSelect, value]);
-  return createElement(Typography, __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));
+  return (
+    /*#__PURE__*/
+    createElement(Typography, __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';
 
@@ -2024,7 +2229,7 @@ var useStyles$c = makeStyles({
 }, {
   name: 'MuiPickersMonthSelection'
 });
-var MonthSelection = function (_a) {
+var MonthSelection = function MonthSelection(_a) {
   var disablePast = _a.disablePast,
       disableFuture = _a.disableFuture,
       minDate = _a.minDate,
@@ -2036,7 +2241,7 @@ var MonthSelection = function (_a) {
   var classes = useStyles$c();
   var currentMonth = utils.getMonth(date);
 
-  var shouldDisableMonth = function (month) {
+  var shouldDisableMonth = function shouldDisableMonth(month) {
     var now = utils.date();
     var utilMinDate = utils.date(minDate);
     var utilMaxDate = utils.date(maxDate);
@@ -2055,22 +2260,28 @@ var MonthSelection = function (_a) {
       onMonthChange(newDate);
     }
   }, [date, onChange, onMonthChange, utils]);
-  return createElement("div", {
-    className: classes.container
-  }, utils.getMonthArray(date).map(function (month) {
-    var monthNumber = utils.getMonth(month);
-    var monthText = utils.format(month, 'MMM');
-    return createElement(Month, {
-      key: monthText,
-      value: monthNumber,
-      selected: monthNumber === currentMonth,
-      onSelect: onMonthSelect,
-      disabled: shouldDisableMonth(month)
-    }, monthText);
-  }));
-};
-
-var getOrientation = function () {
+  return (
+    /*#__PURE__*/
+    createElement("div", {
+      className: classes.container
+    }, utils.getMonthArray(date).map(function (month) {
+      var monthNumber = utils.getMonth(month);
+      var monthText = utils.formatByString(month, utils.formats.monthShort);
+      return (
+        /*#__PURE__*/
+        createElement(Month, {
+          key: monthText,
+          value: monthNumber,
+          selected: monthNumber === currentMonth,
+          onSelect: onMonthSelect,
+          disabled: shouldDisableMonth(month)
+        }, monthText)
+      );
+    }))
+  );
+};
+
+var getOrientation = function getOrientation() {
   return typeof window !== 'undefined' && window.screen && window.screen.orientation && Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
 };
 
@@ -2133,7 +2344,7 @@ var useButtonsStyles = makeStyles({
 var useDialogActionsStyles = makeStyles({
   withAdditionalAction: {}
 });
-var Picker = function (props) {
+var Picker = function Picker(props) {
   var _a, _b, _c;
 
   var date = props.date,
@@ -2191,10 +2402,12 @@ var Picker = function (props) {
   var shiftButtons = new Array();
 
   if (showShiftButtons && setShiftFunction && onSetShift && shiftButtonValues) {
-    var _loop_1 = function (key) {
-      shiftButtons.push(createElement(Button$1, {
+    var _loop_1 = function _loop_1(key) {
+      shiftButtons.push(
+      /*#__PURE__*/
+      createElement(Button$1, {
         color: "primary",
-        onClick: function () {
+        onClick: function onClick() {
           return onSetShift(setShiftFunction(parseInt(key)));
         },
         key: shiftButtonValues[key]
@@ -2206,69 +2419,86 @@ var Picker = function (props) {
     }
   }
 
-  return createElement("div", {
-    className: clsx(classes.container, (_a = {}, _a[classes.containerLandscape] = isLandscape, _a))
-  }, !disableToolbar && createElement(ToolbarComponent, __assign({
-    date: date,
-    onChange: onChange,
-    setOpenView: setOpenView,
-    openView: openView,
-    hideTabs: hideTabs,
-    dateRangeIcon: dateRangeIcon,
-    timeIcon: timeIcon,
-    isLandscape: isLandscape
-  }, props)), createElement("div", {
-    className: clsx(classes.pickerView, (_b = {}, _b[classes.pickerViewLandscape] = isLandscape, _b))
-  }, openView === 'year' && createElement(YearSelection, {
-    date: date,
-    onChange: handleChangeAndOpenNext,
-    minDate: minDate,
-    maxDate: maxDate,
-    disablePast: disablePast,
-    disableFuture: disableFuture,
-    onYearChange: onYearChange,
-    animateYearScrolling: animateYearScrolling
-  }), openView === 'month' && createElement(MonthSelection, {
-    date: date,
-    onChange: handleChangeAndOpenNext,
-    minDate: minDate,
-    maxDate: maxDate,
-    disablePast: disablePast,
-    disableFuture: disableFuture,
-    onMonthChange: onMonthChange
-  }), openView === 'date' && 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') && createElement(TimePickerView, {
-    date: date,
-    ampm: ampm,
-    type: openView,
-    minutesStep: minutesStep,
-    onHourChange: handleChangeAndOpenNext,
-    onMinutesChange: handleChangeAndOpenNext,
-    onSecondsChange: handleChangeAndOpenNext
-  })), showActionsBar && createElement(DialogActions$1, {
-    classes: {
-      root: clsx((_c = {}, _c[dialogActionsClasses.withAdditionalAction] = showTodayButton, _c))
-    }
-  }, showTodayButton && createElement(Button$1, {
-    color: "primary",
-    onClick: onSetToday,
-    key: "today"
-  }, todayLabel), showShiftButtons && setShiftFunction && shiftButtons));
+  return (
+    /*#__PURE__*/
+    createElement("div", {
+      className: clsx(classes.container, (_a = {}, _a[classes.containerLandscape] = isLandscape, _a))
+    }, !disableToolbar &&
+    /*#__PURE__*/
+    createElement(ToolbarComponent, __assign({
+      setOpenView: setOpenView,
+      openView: openView,
+      hideTabs: hideTabs,
+      dateRangeIcon: dateRangeIcon,
+      timeIcon: timeIcon,
+      isLandscape: isLandscape
+    }, props)),
+    /*#__PURE__*/
+    createElement("div", {
+      className: clsx(classes.pickerView, (_b = {}, _b[classes.pickerViewLandscape] = isLandscape, _b))
+    }, openView === 'year' &&
+    /*#__PURE__*/
+    createElement(YearSelection, {
+      date: date,
+      onChange: handleChangeAndOpenNext,
+      minDate: minDate,
+      maxDate: maxDate,
+      disablePast: disablePast,
+      disableFuture: disableFuture,
+      onYearChange: onYearChange,
+      animateYearScrolling: animateYearScrolling
+    }), openView === 'month' &&
+    /*#__PURE__*/
+    createElement(MonthSelection, {
+      date: date,
+      onChange: handleChangeAndOpenNext,
+      minDate: minDate,
+      maxDate: maxDate,
+      disablePast: disablePast,
+      disableFuture: disableFuture,
+      onMonthChange: onMonthChange
+    }), openView === 'date' &&
+    /*#__PURE__*/
+    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') &&
+    /*#__PURE__*/
+    createElement(TimePickerView, {
+      date: date,
+      ampm: ampm,
+      type: openView,
+      minutesStep: minutesStep,
+      onHourChange: handleChangeAndOpenNext,
+      onMinutesChange: handleChangeAndOpenNext,
+      onSecondsChange: handleChangeAndOpenNext
+    })), showActionsBar &&
+    /*#__PURE__*/
+    createElement(DialogActions$1, {
+      classes: {
+        root: clsx((_c = {}, _c[dialogActionsClasses.withAdditionalAction] = showTodayButton, _c))
+      }
+    }, showTodayButton &&
+    /*#__PURE__*/
+    createElement(Button$1, {
+      color: "primary",
+      onClick: onSetToday,
+      key: "today"
+    }, todayLabel), showShiftButtons && setShiftFunction && shiftButtons))
+  );
 };
 Picker.defaultProps = __assign(__assign({}, datePickerDefaultProps), {
   views: Object.keys(viewsMap)
@@ -2298,7 +2528,7 @@ function useOpenState(_a) {
   };
 }
 
-var getDisplayDate = function (value, format, utils, isEmpty, _a) {
+var getDisplayDate = function getDisplayDate(value, format, utils, isEmpty, _a) {
   var invalidLabel = _a.invalidLabel,
       emptyLabel = _a.emptyLabel,
       labelFunc = _a.labelFunc;
@@ -2312,10 +2542,10 @@ var getDisplayDate = function (value, format, utils, isEmpty, _a) {
     return emptyLabel || '';
   }
 
-  return utils.isValid(date) ? utils.format(date, format) : invalidLabel;
+  return utils.isValid(date) ? utils.formatByString(date, format) : invalidLabel;
 };
 
-var getComparisonMaxDate = function (utils, strictCompareDates, date) {
+var getComparisonMaxDate = function getComparisonMaxDate(utils, strictCompareDates, date) {
   if (strictCompareDates) {
     return date;
   }
@@ -2323,7 +2553,7 @@ var getComparisonMaxDate = function (utils, strictCompareDates, date) {
   return utils.endOfDay(date);
 };
 
-var getComparisonMinDate = function (utils, strictCompareDates, date) {
+var getComparisonMinDate = function getComparisonMinDate(utils, strictCompareDates, date) {
   if (strictCompareDates) {
     return date;
   }
@@ -2331,7 +2561,7 @@ var getComparisonMinDate = function (utils, strictCompareDates, date) {
   return utils.startOfDay(date);
 };
 
-var validate = function (value, utils, _a // DateTimePicker doesn't support
+var validate = function validate(value, utils, _a // DateTimePicker doesn't support
 ) {
   var maxDate = _a.maxDate,
       minDate = _a.minDate,
@@ -2383,7 +2613,7 @@ function pick12hOr24hFormat(userFormat, ampm, formats) {
 function makeMaskFromFormat(format, numberMaskChar) {
   return format.replace(/[a-z]/gi, numberMaskChar);
 }
-var maskedDateFormatter = function (mask, numberMaskChar) {
+var maskedDateFormatter = function maskedDateFormatter(mask, numberMaskChar) {
   return function (value, oldValue, currentCaretPosition) {
     var refuse = /[^\d\w_]+/gi;
 
@@ -2463,7 +2693,7 @@ var maskedDateFormatter = function (mask, numberMaskChar) {
   };
 };
 
-var useValueToDate = function (utils, _a) {
+var useValueToDate = function useValueToDate(utils, _a) {
   var value = _a.value,
       initialFocusedDate = _a.initialFocusedDate;
   var nowRef = useRef(utils.date());
@@ -2485,7 +2715,7 @@ function usePickerState(props, options) {
   var autoOk = props.autoOk,
       disabled = props.disabled,
       onAccept = props.onAccept,
-      onChange = props.onChange,
+      _onChange = props.onChange,
       onError = props.onError,
       value = props.value,
       variant = props.variant;
@@ -2511,26 +2741,27 @@ function usePickerState(props, options) {
   }, [date, isOpen, pickerDate, utils]);
   var acceptDate = useCallback(function (acceptedDate) {
     setIsOpen(false);
-    onChange(acceptedDate);
+
+    _onChange(acceptedDate);
 
     if (onAccept) {
       onAccept(acceptedDate);
     }
-  }, [onAccept, onChange, setIsOpen]);
+  }, [onAccept, _onChange, setIsOpen]);
   var wrapperProps = useMemo(function () {
     return {
       format: format,
       open: isOpen,
-      onClear: function () {
+      onClear: function onClear() {
         return acceptDate(null);
       },
-      onAccept: function () {
+      onAccept: function onAccept() {
         return acceptDate(pickerDate);
       },
-      onSetToday: function () {
+      onSetToday: function onSetToday() {
         return setPickerDate(utils.date());
       },
-      onDismiss: function () {
+      onDismiss: function onDismiss() {
         setIsOpen(false);
       }
     };
@@ -2538,7 +2769,7 @@ function usePickerState(props, options) {
   var pickerProps = useMemo(function () {
     return {
       date: pickerDate,
-      onChange: function (newDate, isFinish) {
+      onChange: function onChange(newDate, isFinish) {
         if (isFinish === void 0) {
           isFinish = true;
         }
@@ -2546,30 +2777,30 @@ function usePickerState(props, options) {
         setPickerDate(newDate);
 
         if (variant === 'inline' || variant === 'static') {
-          onChange(newDate);
+          _onChange(newDate);
         }
 
         if (isFinish && autoOk) {
           acceptDate(newDate);
         }
       },
-      onSetToday: function () {
+      onSetToday: function onSetToday() {
         var newDate = utils.date();
         setPickerDate(newDate);
 
         if (variant === 'inline' || variant === 'static') {
-          onChange(newDate);
+          _onChange(newDate);
         }
 
         if (autoOk) {
           acceptDate(newDate);
         }
       },
-      onSetShift: function (shiftDate) {
+      onSetShift: function onSetShift(shiftDate) {
         var newDate = utils.date(shiftDate);
 
         if (variant === 'inline' || variant === 'static') {
-          onChange(newDate);
+          _onChange(newDate);
         }
 
         if (autoOk) {
@@ -2577,7 +2808,7 @@ function usePickerState(props, options) {
         }
       }
     };
-  }, [acceptDate, autoOk, onChange, pickerDate, variant]);
+  }, [acceptDate, autoOk, _onChange, pickerDate, variant]);
   var validationError = validate(value, utils, props);
   useEffect(function () {
     if (validationError && onError) {
@@ -2589,7 +2820,7 @@ function usePickerState(props, options) {
     return {
       inputValue: inputValue,
       validationError: validationError,
-      onClick: function () {
+      onClick: function onClick() {
         return !disabled && setIsOpen(true);
       }
     };
@@ -2603,7 +2834,7 @@ function usePickerState(props, options) {
   return pickerState;
 }
 
-var PureDateInput = function (_a) {
+var PureDateInput = function PureDateInput(_a) {
   var inputValue = _a.inputValue,
       inputVariant = _a.inputVariant,
       validationError = _a.validationError,
@@ -2617,15 +2848,18 @@ var PureDateInput = function (_a) {
       readOnly: true
     });
   }, [InputProps]);
-  return createElement(TextFieldComponent, __assign({
-    error: Boolean(validationError),
-    helperText: validationError
-  }, other, {
-    // do not overridable
-    value: inputValue,
-    variant: inputVariant,
-    InputProps: PureDateInputProps
-  }));
+  return (
+    /*#__PURE__*/
+    createElement(TextFieldComponent, __assign({
+      error: Boolean(validationError),
+      helperText: validationError
+    }, other, {
+      // do not overridable
+      value: inputValue,
+      variant: inputVariant,
+      InputProps: PureDateInputProps
+    }))
+  );
 };
 PureDateInput.displayName = 'PureDateInput';
 
@@ -2687,6 +2921,10 @@ function makePurePicker(_a) {
         other = __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 dialogVariantProps = variant === "dialog" ? {
+      showTodayButton: showTodayButton,
+      todayLabel: todayLabel
+    } : {};
     var options = useOptions(props);
 
     var _b = usePickerState(props, options),
@@ -2694,61 +2932,71 @@ function makePurePicker(_a) {
         inputProps = _b.inputProps,
         wrapperProps = _b.wrapperProps;
 
-    return createElement(Wrapper, __assign({
-      variant: variant,
-      InputComponent: PureDateInput,
-      DateInputProps: inputProps,
-      showTodayButton: showTodayButton,
-      todayLabel: todayLabel
-    }, wrapperProps, injectedProps, other), createElement(Picker, __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 (
+      /*#__PURE__*/
+      createElement(Wrapper, __assign({
+        variant: variant,
+        InputComponent: PureDateInput,
+        DateInputProps: inputProps
+      }, wrapperProps, injectedProps, dialogVariantProps, other),
+      /*#__PURE__*/
+      createElement(Picker, __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, __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 KeyboardIcon = function KeyboardIcon(props) {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(SvgIcon, __assign({}, props),
+    /*#__PURE__*/
+    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"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      fill: "none",
+      d: "M0 0h24v24H0z"
+    }))
+  );
+};
+
+var Rifm = function Rifm(props) {
   var _a = useReducer(function (c) {
     return c + 1;
   }, 0),
@@ -2769,7 +3017,7 @@ var Rifm = function (props) {
 
   var isDeleleteButtonDownRef = useRef(false);
 
-  var onChange = function (evt) {
+  var onChange = function onChange(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)]; // The main trick is to update underlying input with non formatted value (= eventValue)
@@ -2798,7 +3046,7 @@ var Rifm = function (props) {
 
       var deleteWasNoOp = isDeleleteButtonDown && isNoOperation; // Create string from only accepted symbols
 
-      var clean = function (str) {
+      var clean = function clean(str) {
         return (str.match(props.accept || /\d|\w/g) || []).join('');
       };
 
@@ -2811,7 +3059,7 @@ var Rifm = function (props) {
       // 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 getCursorPosition = function getCursorPosition(val) {
         var start = 0;
         var cleanPos = 0;
 
@@ -2886,13 +3134,13 @@ var Rifm = function (props) {
     // 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) {
+    var handleKeyDown = function handleKeyDown(evt) {
       if (evt.code === 'Delete') {
         isDeleleteButtonDownRef.current = true;
       }
     };
 
-    var handleKeyUp = function (evt) {
+    var handleKeyUp = function handleKeyUp(evt) {
       if (evt.code === 'Delete') {
         isDeleleteButtonDownRef.current = false;
       }
@@ -2914,7 +3162,7 @@ var Rifm = function (props) {
   });
 };
 
-var KeyboardDateInput = function (_a) {
+var KeyboardDateInput = function KeyboardDateInput(_a) {
   var inputValue = _a.inputValue,
       _b = _a.showErrorOnBlur,
       showErrorOnBlur = _b === void 0 ? false : _b,
@@ -2924,8 +3172,8 @@ var KeyboardDateInput = function (_a) {
       InputAdornmentProps = _a.InputAdornmentProps,
       onClick = _a.onClick,
       onChange = _a.onChange,
-      onBlur = _a.onBlur,
-      onFocus = _a.onFocus,
+      _onBlur = _a.onBlur,
+      _onFocus = _a.onFocus,
       InputProps = _a.InputProps,
       mask = _a.mask,
       _c = _a.maskChar,
@@ -2945,12 +3193,12 @@ var KeyboardDateInput = function (_a) {
   var formatter = useCallback(maskedDateFormatter(inputMask, maskChar), [mask, maskChar]);
   var position = InputAdornmentProps && InputAdornmentProps.position ? InputAdornmentProps.position : 'end';
 
-  var handleChange = function (text) {
+  var handleChange = function handleChange(text) {
     var finalString = text === '' || text === inputMask ? null : text;
     onChange(finalString);
   };
 
-  var replace = function (text) {
+  var replace = function replace(text) {
     return text;
   };
 
@@ -2958,61 +3206,73 @@ var KeyboardDateInput = function (_a) {
       showErrorFlag = _f[0],
       handleBlur = _f[1];
 
-  return 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 createElement(TextFieldComponent, __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: __assign(__assign({}, InputProps), (_b = {}, _b[position + "Adornment"] = createElement(InputAdornment, __assign({
-        position: position
-      }, InputAdornmentProps), createElement(IconButton$1, __assign({
-        disabled: disabled
-      }, KeyboardButtonProps, {
-        onClick: onClick
-      }), keyboardIcon)), _b))
-    }));
-  });
+  return (
+    /*#__PURE__*/
+    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 (
+        /*#__PURE__*/
+        createElement(TextFieldComponent, __assign({
+          disabled: disabled,
+          error: Boolean(validationError) && !showErrorFlag,
+          helperText: !showErrorFlag && validationError
+        }, other, {
+          value: value,
+          onChange: onChange,
+          // onInput={changeInputStringValue}
+          // onKeyUp={handleKeyUp}
+          // onMouseUp={handleClick}
+          onBlur: function onBlur() {
+            if (_onBlur) {
+              _onBlur();
+            }
+
+            if (showErrorOnBlur) {
+              handleBlur(false);
+            }
+          },
+          onFocus: function onFocus(ev) {
+            if (_onFocus) {
+              _onFocus(ev);
+            }
+
+            if (showErrorOnBlur) {
+              handleBlur(true);
+            }
+          },
+          variant: inputVariant,
+          InputProps: __assign(__assign({}, InputProps), (_b = {}, _b[position + "Adornment"] =
+          /*#__PURE__*/
+          createElement(InputAdornment, __assign({
+            position: position
+          }, InputAdornmentProps),
+          /*#__PURE__*/
+          createElement(IconButton$1, __assign({
+            disabled: disabled
+          }, KeyboardButtonProps, {
+            onClick: onClick
+          }), keyboardIcon)), _b))
+        }))
+      );
+    })
+  );
 };
 
 KeyboardDateInput.defaultProps = {
-  keyboardIcon: createElement(KeyboardIcon, null)
+  keyboardIcon:
+  /*#__PURE__*/
+  createElement(KeyboardIcon, null)
 };
 
 function parseInputString(value, utils, format) {
@@ -3027,7 +3287,7 @@ function useKeyboardPickerState(props, options) {
   var _a = props.format,
       format = _a === void 0 ? options.getDefaultFormat() : _a,
       inputValue = props.inputValue,
-      onChange = props.onChange,
+      _onChange = props.onChange,
       value = props.value;
   var utils = useUtils();
   var displayDate = getDisplayDate(value, format, utils, value === null, props);
@@ -3043,8 +3303,8 @@ function useKeyboardPickerState(props, options) {
     }
   }, [displayDate, setInnerInputValue, utils, value]);
   var handleKeyboardChange = useCallback(function (date) {
-    onChange(date, date === null ? null : utils.format(date, format));
-  }, [format, onChange, utils]);
+    _onChange(date, date === null ? null : utils.formatByString(date, format));
+  }, [format, _onChange, utils]);
 
   var _c = usePickerState(__assign(__assign({}, props), {
     value: dateValue,
@@ -3058,13 +3318,14 @@ function useKeyboardPickerState(props, options) {
     return __assign(__assign({}, innerInputProps), {
       format: wrapperProps.format,
       inputValue: inputValue || innerInputValue,
-      onChange: function (value) {
+      onChange: function onChange(value) {
         setInnerInputValue(value || '');
         var date = value === null ? null : utils.parse(value, wrapperProps.format);
-        onChange(date, value);
+
+        _onChange(date, value);
       }
     });
-  }, [innerInputProps, innerInputValue, inputValue, onChange, utils, wrapperProps.format]);
+  }, [innerInputProps, innerInputValue, inputValue, _onChange, utils, wrapperProps.format]);
   return {
     inputProps: inputProps,
     wrapperProps: wrapperProps,
@@ -3139,44 +3400,49 @@ function makeKeyboardPicker(_a) {
         inputProps = _b.inputProps,
         wrapperProps = _b.wrapperProps;
 
-    return createElement(Wrapper, __assign({
-      variant: variant,
-      InputComponent: KeyboardDateInput,
-      DateInputProps: inputProps
-    }, injectedProps, wrapperProps, other), createElement(Picker, __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 (
+      /*#__PURE__*/
+      createElement(Wrapper, __assign({
+        variant: variant,
+        InputComponent: KeyboardDateInput,
+        DateInputProps: inputProps
+      }, injectedProps, wrapperProps, other),
+      /*#__PURE__*/
+      createElement(Picker, __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;
@@ -3192,7 +3458,7 @@ var defaultProps = __assign(__assign({}, datePickerDefaultProps), {
 function useOptions(props) {
   var utils = useUtils();
   return {
-    getDefaultFormat: function () {
+    getDefaultFormat: function getDefaultFormat() {
       return getFormatByViews(props.views, utils);
     }
   };
@@ -3266,7 +3532,7 @@ function useMeridiemMode(date, ampm, onChange) {
   };
 }
 
-var TimePickerToolbar = function (_a) {
+var TimePickerToolbar = function TimePickerToolbar(_a) {
   var _b, _c, _d;
 
   var date = _a.date,
@@ -3285,63 +3551,84 @@ var TimePickerToolbar = function (_a) {
       handleMeridiemChange = _e.handleMeridiemChange;
 
   var clockTypographyVariant = isLandscape ? 'h3' : 'h2';
-  return createElement(PickerToolbar, {
-    isLandscape: isLandscape,
-    className: clsx((_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b[classes.toolbarAmpmLeftPadding] = ampm && !isLandscape, _b))
-  }, createElement("div", {
-    className: clsx(classes.hourMinuteLabel, (_c = {}, _c[classes.hourMinuteLabelLandscape] = isLandscape, _c[classes.hourMinuteLabelReverse] = theme.direction === 'rtl', _c))
-  }, arrayIncludes(views, 'hours') && createElement(ToolbarButton$1, {
-    variant: clockTypographyVariant,
-    onClick: function () {
-      return setOpenView(ClockType$1.HOURS);
+  return (
+    /*#__PURE__*/
+    createElement(PickerToolbar, {
+      isLandscape: isLandscape,
+      className: clsx((_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b[classes.toolbarAmpmLeftPadding] = ampm && !isLandscape, _b))
     },
-    selected: openView === ClockType$1.HOURS,
-    label: utils.getHourText(date, Boolean(ampm))
-  }), arrayIncludes(views, ['hours', 'minutes']) && createElement(ToolbarText, {
-    label: ":",
-    variant: clockTypographyVariant,
-    selected: false,
-    className: classes.separator
-  }), arrayIncludes(views, 'minutes') && 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']) && createElement(ToolbarText, {
-    variant: "h2",
-    label: ":",
-    selected: false,
-    className: classes.separator
-  }), arrayIncludes(views, 'seconds') && createElement(ToolbarButton$1, {
-    variant: "h2",
-    onClick: function () {
-      return setOpenView(ClockType$1.SECONDS);
+    /*#__PURE__*/
+    createElement("div", {
+      className: clsx(classes.hourMinuteLabel, (_c = {}, _c[classes.hourMinuteLabelLandscape] = isLandscape, _c[classes.hourMinuteLabelReverse] = theme.direction === 'rtl', _c))
+    }, arrayIncludes(views, 'hours') &&
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: clockTypographyVariant,
+      onClick: function onClick() {
+        return setOpenView(ClockType$1.HOURS);
+      },
+      selected: openView === ClockType$1.HOURS,
+      label: utils.formatByString(date, ampm ? utils.formats.hours12h : utils.formats.hours24h)
+    }), arrayIncludes(views, ['hours', 'minutes']) &&
+    /*#__PURE__*/
+    createElement(ToolbarText, {
+      label: ":",
+      variant: clockTypographyVariant,
+      selected: false,
+      className: classes.separator
+    }), arrayIncludes(views, 'minutes') &&
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: clockTypographyVariant,
+      onClick: function onClick() {
+        return setOpenView(ClockType$1.MINUTES);
+      },
+      selected: openView === ClockType$1.MINUTES,
+      label: utils.formatByString(date, utils.formats.minutes)
+    }), arrayIncludes(views, ['minutes', 'seconds']) &&
+    /*#__PURE__*/
+    createElement(ToolbarText, {
+      variant: "h2",
+      label: ":",
+      selected: false,
+      className: classes.separator
+    }), arrayIncludes(views, 'seconds') &&
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h2",
+      onClick: function onClick() {
+        return setOpenView(ClockType$1.SECONDS);
+      },
+      selected: openView === ClockType$1.SECONDS,
+      label: utils.formatByString(date, utils.formats.seconds)
+    })), ampm &&
+    /*#__PURE__*/
+    createElement("div", {
+      className: clsx(classes.ampmSelection, (_d = {}, _d[classes.ampmLandscape] = isLandscape, _d[classes.ampmSelectionWithSeconds] = arrayIncludes(views, 'seconds'), _d))
     },
-    selected: openView === ClockType$1.SECONDS,
-    label: utils.getSecondText(date)
-  })), ampm && createElement("div", {
-    className: clsx(classes.ampmSelection, (_d = {}, _d[classes.ampmLandscape] = isLandscape, _d[classes.ampmSelectionWithSeconds] = arrayIncludes(views, 'seconds'), _d))
-  }, createElement(ToolbarButton$1, {
-    disableRipple: true,
-    variant: "subtitle1",
-    selected: meridiemMode === 'am',
-    typographyClassName: classes.ampmLabel,
-    label: utils.getMeridiemText('am'),
-    onClick: function () {
-      return handleMeridiemChange('am');
-    }
-  }), createElement(ToolbarButton$1, {
-    disableRipple: true,
-    variant: "subtitle1",
-    selected: meridiemMode === 'pm',
-    typographyClassName: classes.ampmLabel,
-    label: utils.getMeridiemText('pm'),
-    onClick: function () {
-      return handleMeridiemChange('pm');
-    }
-  })));
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      disableRipple: true,
+      variant: "subtitle1",
+      selected: meridiemMode === 'am',
+      typographyClassName: classes.ampmLabel,
+      label: utils.getMeridiemText('am'),
+      onClick: function onClick() {
+        return handleMeridiemChange('am');
+      }
+    }),
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      disableRipple: true,
+      variant: "subtitle1",
+      selected: meridiemMode === 'pm',
+      typographyClassName: classes.ampmLabel,
+      label: utils.getMeridiemText('pm'),
+      onClick: function onClick() {
+        return handleMeridiemChange('pm');
+      }
+    })))
+  );
 };
 
 var defaultProps$1 = __assign(__assign({}, timePickerDefaultProps), {
@@ -3352,10 +3639,10 @@ var defaultProps$1 = __assign(__assign({}, timePickerDefaultProps), {
 function useOptions$1(props) {
   var utils = useUtils();
   return {
-    getDefaultFormat: function () {
+    getDefaultFormat: function getDefaultFormat() {
       return pick12hOr24hFormat(props.format, props.ampm, {
-        '12h': utils.time12hFormat,
-        '24h': utils.time24hFormat
+        '12h': utils.formats.hours12h,
+        '24h': utils.formats.hours24h
       });
     }
   };
@@ -3368,7 +3655,7 @@ var TimePicker = makePurePicker({
 var KeyboardTimePicker = makeKeyboardPicker({
   useOptions: useOptions$1,
   DefaultToolbarComponent: TimePickerToolbar,
-  getCustomProps: function (props) {
+  getCustomProps: function getCustomProps(props) {
     return {
       refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi
     };
@@ -3377,27 +3664,43 @@ var KeyboardTimePicker = makeKeyboardPicker({
 TimePicker.defaultProps = defaultProps$1;
 KeyboardTimePicker.defaultProps = defaultProps$1;
 
-var TimeIcon = function (props) {
-  return React__default.createElement(SvgIcon, __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, __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) {
+var TimeIcon = function TimeIcon(props) {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(SvgIcon, __assign({}, props),
+    /*#__PURE__*/
+    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"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      fill: "none",
+      d: "M0 0h24v24H0z"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      d: "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
+    }))
+  );
+};
+
+var DateRangeIcon = function DateRangeIcon(props) {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(SvgIcon, __assign({}, props),
+    /*#__PURE__*/
+    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"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      fill: "none",
+      d: "M0 0h24v24H0z"
+    }))
+  );
+};
+
+var viewToTabIndex = function viewToTabIndex(openView) {
   if (openView === 'date' || openView === 'year') {
     return 'date';
   }
@@ -3405,7 +3708,7 @@ var viewToTabIndex = function (openView) {
   return 'time';
 };
 
-var tabIndexToView = function (tab) {
+var tabIndexToView = function tabIndexToView(tab) {
   if (tab === 'date') {
     return 'date';
   }
@@ -3415,7 +3718,7 @@ var tabIndexToView = function (tab) {
 
 var useStyles$f = makeStyles(function (theme) {
   // prettier-ignore
-  var tabsBackground = theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background.default;
+  var tabsBackground = theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background["default"];
   return {
     tabs: {
       color: theme.palette.getContrastText(tabsBackground),
@@ -3425,7 +3728,7 @@ var useStyles$f = makeStyles(function (theme) {
 }, {
   name: 'MuiPickerDTTabs'
 });
-var DateTimePickerTabs = function (_a) {
+var DateTimePickerTabs = function DateTimePickerTabs(_a) {
   var view = _a.view,
       onChange = _a.onChange,
       dateRangeIcon = _a.dateRangeIcon,
@@ -3434,29 +3737,46 @@ var DateTimePickerTabs = function (_a) {
   var theme = useTheme();
   var indicatorColor = theme.palette.type === 'light' ? 'secondary' : 'primary';
 
-  var handleChange = function (e, value) {
+  var handleChange = function handleChange(e, value) {
     if (value !== viewToTabIndex(view)) {
       onChange(tabIndexToView(value));
     }
   };
 
-  return createElement(Paper, null, createElement(Tabs, {
-    variant: "fullWidth",
-    value: viewToTabIndex(view),
-    onChange: handleChange,
-    className: classes.tabs,
-    indicatorColor: indicatorColor
-  }, createElement(Tab, {
-    value: "date",
-    icon: createElement(Fragment, null, dateRangeIcon)
-  }), createElement(Tab, {
-    value: "time",
-    icon: createElement(Fragment, null, timeIcon)
-  })));
+  return (
+    /*#__PURE__*/
+    createElement(Paper, null,
+    /*#__PURE__*/
+    createElement(Tabs, {
+      variant: "fullWidth",
+      value: viewToTabIndex(view),
+      onChange: handleChange,
+      className: classes.tabs,
+      indicatorColor: indicatorColor
+    },
+    /*#__PURE__*/
+    createElement(Tab, {
+      value: "date",
+      icon:
+      /*#__PURE__*/
+      createElement(Fragment, null, dateRangeIcon)
+    }),
+    /*#__PURE__*/
+    createElement(Tab, {
+      value: "time",
+      icon:
+      /*#__PURE__*/
+      createElement(Fragment, null, timeIcon)
+    })))
+  );
 };
 DateTimePickerTabs.defaultProps = {
-  dateRangeIcon: createElement(DateRangeIcon, null),
-  timeIcon: createElement(TimeIcon, null)
+  dateRangeIcon:
+  /*#__PURE__*/
+  createElement(DateRangeIcon, null),
+  timeIcon:
+  /*#__PURE__*/
+  createElement(TimeIcon, null)
 };
 
 var useStyles$g = makeStyles(function (_) {
@@ -3474,7 +3794,7 @@ var useStyles$g = makeStyles(function (_) {
 }, {
   name: 'MuiPickerDTToolbar'
 });
-var DateTimePickerToolbar = function (_a) {
+var DateTimePickerToolbar = function DateTimePickerToolbar(_a) {
   var date = _a.date,
       openView = _a.openView,
       setOpenView = _a.setOpenView,
@@ -3493,84 +3813,117 @@ var DateTimePickerToolbar = function (_a) {
 
   var theme = useTheme();
   var rtl = theme.direction === 'rtl';
-  return createElement(Fragment, null, createElement(PickerToolbar, {
-    isLandscape: false,
-    className: classes.toolbar
-  }, createElement(Grid, {
-    container: true,
-    justify: "center",
-    wrap: "nowrap"
-  }, createElement(Grid, {
-    item: true,
-    container: true,
-    xs: 5,
-    justify: "flex-start",
-    direction: "column"
-  }, createElement("div", null, createElement(ToolbarButton$1, {
-    variant: "subtitle1",
-    onClick: function () {
-      return setOpenView('year');
+  return (
+    /*#__PURE__*/
+    createElement(Fragment, null,
+    /*#__PURE__*/
+    createElement(PickerToolbar, {
+      isLandscape: false,
+      className: classes.toolbar
     },
-    selected: openView === 'year',
-    label: utils.getYearText(date)
-  })), createElement("div", null, createElement(ToolbarButton$1, {
-    variant: "h4",
-    onClick: function () {
-      return setOpenView('date');
+    /*#__PURE__*/
+    createElement(Grid, {
+      container: true,
+      justify: "center",
+      wrap: "nowrap"
     },
-    selected: openView === 'date',
-    label: utils.getDateTimePickerHeaderText(date)
-  }))), createElement(Grid, {
-    item: true,
-    container: true,
-    xs: 6,
-    justify: "center",
-    alignItems: "flex-end",
-    direction: rtl ? 'row-reverse' : 'row'
-  }, createElement(ToolbarButton$1, {
-    variant: "h3",
-    onClick: function () {
-      return setOpenView('hours');
+    /*#__PURE__*/
+    createElement(Grid, {
+      item: true,
+      container: true,
+      xs: 5,
+      justify: "flex-start",
+      direction: "column"
     },
-    selected: openView === 'hours',
-    label: utils.getHourText(date, ampm)
-  }), createElement(ToolbarText, {
-    variant: "h3",
-    label: ":",
-    className: classes.separator
-  }), createElement(ToolbarButton$1, {
-    variant: "h3",
-    onClick: function () {
-      return setOpenView('minutes');
+    /*#__PURE__*/
+    createElement("div", null,
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "subtitle1",
+      onClick: function onClick() {
+        return setOpenView('year');
+      },
+      selected: openView === 'year',
+      label: utils.formatByString(date, utils.formats.year)
+    })),
+    /*#__PURE__*/
+    createElement("div", null,
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h4",
+      onClick: function onClick() {
+        return setOpenView('date');
+      },
+      selected: openView === 'date',
+      label: utils.formatByString(date, utils.formats.shortDate)
+    }))),
+    /*#__PURE__*/
+    createElement(Grid, {
+      item: true,
+      container: true,
+      xs: 6,
+      justify: "center",
+      alignItems: "flex-end",
+      direction: rtl ? 'row-reverse' : 'row'
     },
-    selected: openView === 'minutes',
-    label: utils.getMinuteText(date)
-  })), ampm && createElement(Grid, {
-    item: true,
-    container: true,
-    xs: 1,
-    direction: "column",
-    justify: "flex-end"
-  }, createElement(ToolbarButton$1, {
-    variant: "subtitle1",
-    selected: meridiemMode === 'am',
-    label: utils.getMeridiemText('am'),
-    onClick: function () {
-      return handleMeridiemChange('am');
-    }
-  }), createElement(ToolbarButton$1, {
-    variant: "subtitle1",
-    selected: meridiemMode === 'pm',
-    label: utils.getMeridiemText('pm'),
-    onClick: function () {
-      return handleMeridiemChange('pm');
-    }
-  })))), showTabs && createElement(DateTimePickerTabs, {
-    dateRangeIcon: dateRangeIcon,
-    timeIcon: timeIcon,
-    view: openView,
-    onChange: setOpenView
-  }));
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h3",
+      onClick: function onClick() {
+        return setOpenView('hours');
+      },
+      selected: openView === 'hours',
+      label: utils.formatByString(date, ampm ? utils.formats.hours12h : utils.formats.hours24h)
+    }),
+    /*#__PURE__*/
+    createElement(ToolbarText, {
+      variant: "h3",
+      label: ":",
+      className: classes.separator
+    }),
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h3",
+      onClick: function onClick() {
+        return setOpenView('minutes');
+      },
+      selected: openView === 'minutes',
+      label: utils.formatByString(date, utils.formats.minutes)
+    })), ampm &&
+    /*#__PURE__*/
+    createElement(Grid, {
+      item: true,
+      container: true,
+      xs: 1,
+      direction: "column",
+      justify: "flex-end"
+    },
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "subtitle1",
+      selected: meridiemMode === 'am',
+      label: utils.getMeridiemText('am'),
+      onClick: function onClick() {
+        return handleMeridiemChange('am');
+      }
+    }),
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "subtitle1",
+      selected: meridiemMode === 'pm',
+      label: utils.getMeridiemText('pm'),
+      onClick: function onClick() {
+        return handleMeridiemChange('pm');
+      }
+    })))), showTabs &&
+    /*#__PURE__*/
+    createElement(DateTimePickerTabs, {
+      dateRangeIcon: dateRangeIcon,
+      timeIcon: timeIcon,
+      view: openView,
+      onChange: setOpenView
+    }))
+  );
 };
 
 var defaultProps$2 = __assign(__assign({}, dateTimePickerDefaultProps), {
@@ -3590,10 +3943,10 @@ function useOptions$2(props) {
   }
 
   return {
-    getDefaultFormat: function () {
+    getDefaultFormat: function getDefaultFormat() {
       return pick12hOr24hFormat(props.format, props.ampm, {
-        '12h': utils.dateTime12hFormat,
-        '24h': utils.dateTime24hFormat
+        '12h': utils.formats.fullDateTime12h,
+        '24h': utils.formats.fullDateTime24h
       });
     }
   };
@@ -3606,7 +3959,7 @@ var DateTimePicker = makePurePicker({
 var KeyboardDateTimePicker = makeKeyboardPicker({
   useOptions: useOptions$2,
   DefaultToolbarComponent: DateTimePickerToolbar,
-  getCustomProps: function (props) {
+  getCustomProps: function getCustomProps(props) {
     return {
       refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi
     };