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

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

@@ -74,8 +74,10 @@
         return t;
     }
 
-    var MuiPickersContext = React.createContext(null);
-    var MuiPickersUtilsProvider = function (_a) {
+    var MuiPickersContext =
+    /*#__PURE__*/
+    React.createContext(null);
+    var MuiPickersUtilsProvider = function MuiPickersUtilsProvider(_a) {
       var Utils = _a.utils,
           children = _a.children,
           locale = _a.locale,
@@ -86,10 +88,13 @@
           moment: libInstance
         });
       }, [Utils, libInstance, locale]);
-      return React.createElement(MuiPickersContext.Provider, {
-        value: utils,
-        children: children
-      });
+      return (
+        /*#__PURE__*/
+        React.createElement(MuiPickersContext.Provider, {
+          value: utils,
+          children: children
+        })
+      );
     };
      MuiPickersUtilsProvider.propTypes = {
       utils: PropTypes.func.isRequired,
@@ -97,7 +102,7 @@
       children: PropTypes.oneOfType([PropTypes.element.isRequired, PropTypes.arrayOf(PropTypes.element.isRequired)]).isRequired
     } ;
 
-    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.');
@@ -1398,7 +1403,7 @@
     });
 
     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)
@@ -1411,7 +1416,7 @@
       name: 'MuiPickersToolbarText'
     });
 
-    var ToolbarText = function (_a) {
+    var ToolbarText = function ToolbarText(_a) {
       var _b;
 
       var selected = _a.selected,
@@ -1421,13 +1426,16 @@
           other = __rest(_a, ["selected", "label", "className"]);
 
       var classes = useStyles();
-      return React.createElement(Typography$2, __assign({
-        children: label,
-        className: clsx(classes.toolbarTxt, className, (_b = {}, _b[classes.toolbarBtnSelected] = selected, _b))
-      }, other));
+      return (
+        /*#__PURE__*/
+        React.createElement(Typography$2, __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,
@@ -1438,16 +1446,21 @@
           typographyClassName = _a.typographyClassName,
           other = __rest(_a, ["classes", "className", "label", "selected", "variant", "align", "typographyClassName"]);
 
-      return React.createElement(Button$2, __assign({
-        variant: "text",
-        className: clsx(classes.toolbarBtn, className)
-      }, other), React.createElement(ToolbarText, {
-        align: align,
-        className: typographyClassName,
-        variant: variant,
-        label: label,
-        selected: selected
-      }));
+      return (
+        /*#__PURE__*/
+        React.createElement(Button$2, __assign({
+          variant: "text",
+          className: clsx(classes.toolbarBtn, className)
+        }, other),
+        /*#__PURE__*/
+        React.createElement(ToolbarText, {
+          align: align,
+          className: typographyClassName,
+          variant: variant,
+          label: label,
+          selected: selected
+        }))
+      );
     };
 
      ToolbarButton.propTypes = {
@@ -1479,7 +1492,7 @@
           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',
@@ -1492,7 +1505,7 @@
       name: 'MuiPickersToolbar'
     });
 
-    var PickerToolbar = function (_a) {
+    var PickerToolbar = function PickerToolbar(_a) {
       var _b;
 
       var children = _a.children,
@@ -1502,9 +1515,12 @@
           other = __rest(_a, ["children", "isLandscape", "className"]);
 
       var classes = useStyles$1();
-      return React.createElement(Toolbar$2, __assign({
-        className: clsx(classes.toolbar, (_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b), className)
-      }, other), children);
+      return (
+        /*#__PURE__*/
+        React.createElement(Toolbar$2, __assign({
+          className: clsx(classes.toolbar, (_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b), className)
+        }, other), children)
+      );
     };
 
     /** Use it instead of .includes method for IE support */
@@ -1518,7 +1534,7 @@
       return array.indexOf(itemOrItems) !== -1;
     }
 
-    var findClosestEnabledDate = function (_a) {
+    var findClosestEnabledDate = function findClosestEnabledDate(_a) {
       var date = _a.date,
           utils = _a.utils,
           minDate = _a.minDate,
@@ -1580,22 +1596,22 @@
 
       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({
@@ -1612,7 +1628,7 @@
     }, {
       name: 'MuiPickersDatePickerRoot'
     });
-    var DatePickerToolbar = function (_a) {
+    var DatePickerToolbar = function DatePickerToolbar(_a) {
       var _b, _c;
 
       var date = _a.date,
@@ -1628,33 +1644,42 @@
       var isYearAndMonth = React.useMemo(function () {
         return isYearAndMonthViews(views);
       }, [views]);
-      return React.createElement(PickerToolbar, {
-        isLandscape: isLandscape,
-        className: clsx((_b = {}, _b[classes.toolbar] = !isYearOnly, _b[classes.toolbarLandscape] = isLandscape, _b))
-      }, React.createElement(ToolbarButton$1, {
-        variant: isYearOnly ? 'h3' : 'subtitle1',
-        onClick: function () {
-          return setOpenView('year');
-        },
-        selected: openView === 'year',
-        label: utils.getYearText(date)
-      }), !isYearOnly && !isYearAndMonth && React.createElement(ToolbarButton$1, {
-        variant: "h4",
-        selected: openView === 'date',
-        onClick: function () {
-          return setOpenView('date');
-        },
-        align: isLandscape ? 'left' : 'center',
-        label: utils.getDatePickerHeaderText(date),
-        className: clsx((_c = {}, _c[classes.dateLandscape] = isLandscape, _c))
-      }), isYearAndMonth && React.createElement(ToolbarButton$1, {
-        variant: "h4",
-        onClick: function () {
-          return setOpenView('month');
-        },
-        selected: openView === 'month',
-        label: utils.getMonthText(date)
-      }));
+      return (
+        /*#__PURE__*/
+        React.createElement(PickerToolbar, {
+          isLandscape: isLandscape,
+          className: clsx((_b = {}, _b[classes.toolbar] = !isYearOnly, _b[classes.toolbarLandscape] = isLandscape, _b))
+        },
+        /*#__PURE__*/
+        React.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__*/
+        React.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__*/
+        React.createElement(ToolbarButton$1, {
+          variant: "h4",
+          onClick: function onClick() {
+            return setOpenView('month');
+          },
+          selected: openView === 'month',
+          label: utils.formatByString(date, utils.formats.month)
+        }))
+      );
     };
 
     var date = PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]);
@@ -1712,7 +1737,7 @@
     }, {
       name: 'MuiPickersDay'
     });
-    var Day = function (_a) {
+    var Day = function Day(_a) {
       var _b;
 
       var children = _a.children,
@@ -1724,13 +1749,18 @@
 
       var classes = useStyles$3();
       var className = clsx(classes.day, (_b = {}, _b[classes.hidden] = hidden, _b[classes.current] = current, _b[classes.daySelected] = selected, _b[classes.dayDisabled] = disabled, _b));
-      return React.createElement(IconButton$2, __assign({
-        className: className,
-        tabIndex: hidden || disabled ? -1 : 0
-      }, other), React.createElement(Typography$2, {
-        variant: "body2",
-        color: "inherit"
-      }, children));
+      return (
+        /*#__PURE__*/
+        React.createElement(IconButton$2, __assign({
+          className: className,
+          tabIndex: hidden || disabled ? -1 : 0
+        }, other),
+        /*#__PURE__*/
+        React.createElement(Typography$2, {
+          variant: "body2",
+          color: "inherit"
+        }, children))
+      );
     };
     Day.displayName = 'Day';
      Day.propTypes = {
@@ -1746,7 +1776,7 @@
       selected: false
     };
 
-    var DayWrapper = function (_a) {
+    var DayWrapper = function DayWrapper(_a) {
       var children = _a.children,
           value = _a.value,
           disabled = _a.disabled,
@@ -1757,11 +1787,14 @@
       var handleClick = React.useCallback(function () {
         return onSelect(value);
       }, [onSelect, value]);
-      return React.createElement("div", __assign({
-        role: "presentation",
-        onClick: dayInCurrentMonth && !disabled ? handleClick : undefined,
-        onKeyPress: dayInCurrentMonth && !disabled ? handleClick : undefined
-      }, other), children);
+      return (
+        /*#__PURE__*/
+        React.createElement("div", __assign({
+          role: "presentation",
+          onClick: dayInCurrentMonth && !disabled ? handleClick : undefined,
+          onKeyPress: dayInCurrentMonth && !disabled ? handleClick : undefined
+        }, other), children)
+      );
     };
 
     function _inheritsLoose(subClass, superClass) {
@@ -3471,7 +3504,7 @@
       name: 'MuiPickersSlideTransition'
     });
 
-    var SlideTransition = function (_a) {
+    var SlideTransition = function SlideTransition(_a) {
       var children = _a.children,
           transKey = _a.transKey,
           slideDirection = _a.slideDirection,
@@ -3486,39 +3519,61 @@
         // @ts-ignore
         exitActive: classes['slideExitActiveLeft-' + slideDirection]
       };
-      return React.createElement(TransitionGroup, {
-        className: clsx(classes.transitionContainer, className),
-        childFactory: function (element) {
-          return React.cloneElement(element, {
-            classNames: transitionClasses
-          });
-        }
-      }, React.createElement(CSSTransition, {
-        mountOnEnter: true,
-        unmountOnExit: true,
-        key: transKey + slideDirection,
-        timeout: animationDuration,
-        classNames: transitionClasses,
-        children: children
-      }));
+      return (
+        /*#__PURE__*/
+        React.createElement(TransitionGroup, {
+          className: clsx(classes.transitionContainer, className),
+          childFactory: function childFactory(element) {
+            return (
+              /*#__PURE__*/
+              React.cloneElement(element, {
+                classNames: transitionClasses
+              })
+            );
+          }
+        },
+        /*#__PURE__*/
+        React.createElement(CSSTransition, {
+          mountOnEnter: true,
+          unmountOnExit: true,
+          key: transKey + slideDirection,
+          timeout: animationDuration,
+          classNames: transitionClasses,
+          children: children
+        }))
+      );
     };
 
-    var ArrowLeftIcon = function (props) {
-      return React__default.createElement(SvgIcon$2, __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 ArrowLeftIcon = function ArrowLeftIcon(props) {
+      return (
+        /*#__PURE__*/
+        React__default.createElement(SvgIcon$2, __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 (props) {
-      return React__default.createElement(SvgIcon$2, __assign({}, props), React__default.createElement("path", {
-        d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-      }), React__default.createElement("path", {
-        fill: "none",
-        d: "M0 0h24v24H0V0z"
-      }));
+    var ArrowRightIcon = function ArrowRightIcon(props) {
+      return (
+        /*#__PURE__*/
+        React__default.createElement(SvgIcon$2, __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) {
@@ -3555,7 +3610,7 @@
     }, {
       name: 'MuiPickersCalendarHeader'
     });
-    var CalendarHeader = function (_a) {
+    var CalendarHeader = function CalendarHeader(_a) {
       var currentMonth = _a.currentMonth,
           onMonthChange = _a.onMonthChange,
           leftArrowIcon = _a.leftArrowIcon,
@@ -3570,40 +3625,58 @@
       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 React.createElement("div", null, React.createElement("div", {
-        className: classes.switchHeader
-      }, React.createElement(IconButton$2, __assign({}, leftArrowButtonProps, {
-        disabled: disablePrevMonth,
-        onClick: selectPreviousMonth,
-        className: classes.iconButton
-      }), rtl ? rightArrowIcon : leftArrowIcon), React.createElement(SlideTransition, {
-        slideDirection: slideDirection,
-        transKey: currentMonth.toString(),
-        className: classes.transitionContainer
-      }, React.createElement(Typography$2, {
-        align: "center",
-        variant: "body1"
-      }, utils.getCalendarHeaderText(currentMonth))), React.createElement(IconButton$2, __assign({}, rightArrowButtonProps, {
-        disabled: disableNextMonth,
-        onClick: selectNextMonth,
-        className: classes.iconButton
-      }), rtl ? leftArrowIcon : rightArrowIcon)), React.createElement("div", {
-        className: classes.daysHeader
-      }, utils.getWeekdays().map(function (day, index) {
-        return React.createElement(Typography$2, {
-          key: index,
-          variant: "caption",
-          className: classes.dayLabel
-        }, day);
-      })));
+      return (
+        /*#__PURE__*/
+        React.createElement("div", null,
+        /*#__PURE__*/
+        React.createElement("div", {
+          className: classes.switchHeader
+        },
+        /*#__PURE__*/
+        React.createElement(IconButton$2, __assign({}, leftArrowButtonProps, {
+          disabled: disablePrevMonth,
+          onClick: selectPreviousMonth,
+          className: classes.iconButton
+        }), rtl ? rightArrowIcon : leftArrowIcon),
+        /*#__PURE__*/
+        React.createElement(SlideTransition, {
+          slideDirection: slideDirection,
+          transKey: currentMonth.toString(),
+          className: classes.transitionContainer
+        },
+        /*#__PURE__*/
+        React.createElement(Typography$2, {
+          align: "center",
+          variant: "body1"
+        }, utils.formatByString(currentMonth, utils.formats.monthAndYear))),
+        /*#__PURE__*/
+        React.createElement(IconButton$2, __assign({}, rightArrowButtonProps, {
+          disabled: disableNextMonth,
+          onClick: selectNextMonth,
+          className: classes.iconButton
+        }), rtl ? leftArrowIcon : rightArrowIcon)),
+        /*#__PURE__*/
+        React.createElement("div", {
+          className: classes.daysHeader
+        }, utils.getWeekdays().map(function (day, index) {
+          return (
+            /*#__PURE__*/
+            React.createElement(Typography$2, {
+              key: index,
+              variant: "caption",
+              className: classes.dayLabel
+            }, day)
+          );
+        })))
+      );
     };
     CalendarHeader.displayName = 'CalendarHeader';
      CalendarHeader.propTypes = {
@@ -3613,8 +3686,12 @@
       disableNextMonth: PropTypes.bool
     } ;
     CalendarHeader.defaultProps = {
-      leftArrowIcon: React.createElement(ArrowLeftIcon, null),
-      rightArrowIcon: React.createElement(ArrowRightIcon, null),
+      leftArrowIcon:
+      /*#__PURE__*/
+      React.createElement(ArrowLeftIcon, null),
+      rightArrowIcon:
+      /*#__PURE__*/
+      React.createElement(ArrowRightIcon, null),
       disablePrevMonth: false,
       disableNextMonth: false
     };
@@ -4408,7 +4485,7 @@
       });
       React.useEffect(function () {
         if (active) {
-          var handleKeyDown_1 = function (event) {
+          var handleKeyDown_1 = function handleKeyDown_1(event) {
             runKeyHandler(event, keyHandlers);
           };
 
@@ -4420,13 +4497,16 @@
       }, [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 React.createElement(Component, __assign({
-            utils: utils
-          }, props));
+          return (
+            /*#__PURE__*/
+            React.createElement(Component, __assign({
+              utils: utils
+            }, props))
+          );
         };
 
         WithUtils.displayName = "WithUtils(" + (Component.displayName || Component.name) + ")";
@@ -4434,7 +4514,7 @@
       };
     };
 
-    var KeyDownListener = function (_a) {
+    var KeyDownListener = function KeyDownListener(_a) {
       var onKeyDown = _a.onKeyDown;
       React.useEffect(function () {
         window.addEventListener('keydown', onKeyDown);
@@ -4562,16 +4642,16 @@
               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));
             }
           });
@@ -4583,10 +4663,13 @@
               classes = _a.classes;
           var weeks = utils.getWeekArray(_this.state.currentMonth);
           return weeks.map(function (week) {
-            return React.createElement("div", {
-              key: "week-" + week[0].toString(),
-              className: classes.week
-            }, _this.renderDays(week));
+            return (
+              /*#__PURE__*/
+              React.createElement("div", {
+                key: "week-" + week[0].toString(),
+                className: classes.week
+              }, _this.renderDays(week))
+            );
           });
         };
 
@@ -4602,24 +4685,29 @@
             var disabled = _this.shouldDisableDate(day);
 
             var isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
-            var dayComponent = React.createElement(Day, {
+            var dayComponent =
+            /*#__PURE__*/
+            React.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 React.createElement(DayWrapper, {
-              value: day,
-              key: day.toString(),
-              disabled: disabled,
-              dayInCurrentMonth: isDayInCurrentMonth,
-              onSelect: _this.handleDaySelect
-            }, dayComponent);
+            return (
+              /*#__PURE__*/
+              React.createElement(DayWrapper, {
+                value: day,
+                key: day.toString(),
+                disabled: disabled,
+                dayInCurrentMonth: isDayInCurrentMonth,
+                onSelect: _this.handleDaySelect
+              }, dayComponent)
+            );
           });
         };
 
@@ -4680,26 +4768,43 @@
             rightArrowButtonProps = _b.rightArrowButtonProps,
             rightArrowIcon = _b.rightArrowIcon,
             loadingIndicator = _b.loadingIndicator;
-        var loadingElement = loadingIndicator ? loadingIndicator : React.createElement(CircularProgress$1, null);
-        return React.createElement(React.Fragment, null, allowKeyboardControl && React.createElement(KeyDownListener, {
-          onKeyDown: this.handleKeyDown
-        }), React.createElement(CalendarHeader, {
-          currentMonth: currentMonth,
-          slideDirection: slideDirection,
-          onMonthChange: this.handleChangeMonth,
-          leftArrowIcon: leftArrowIcon,
-          leftArrowButtonProps: leftArrowButtonProps,
-          rightArrowIcon: rightArrowIcon,
-          rightArrowButtonProps: rightArrowButtonProps,
-          disablePrevMonth: this.shouldDisablePrevMonth(),
-          disableNextMonth: this.shouldDisableNextMonth()
-        }), React.createElement(SlideTransition, {
-          slideDirection: slideDirection,
-          transKey: currentMonth.toString(),
-          className: classes.transitionContainer
-        }, React.createElement(React.Fragment, null, this.state.loadingQueue > 0 && React.createElement("div", {
-          className: classes.progressContainer
-        }, loadingElement) || React.createElement("div", null, this.renderWeeks()))));
+        var loadingElement = loadingIndicator ? loadingIndicator :
+        /*#__PURE__*/
+        React.createElement(CircularProgress$1, null);
+        return (
+          /*#__PURE__*/
+          React.createElement(React.Fragment, null, allowKeyboardControl &&
+          /*#__PURE__*/
+          React.createElement(KeyDownListener, {
+            onKeyDown: this.handleKeyDown
+          }),
+          /*#__PURE__*/
+          React.createElement(CalendarHeader, {
+            currentMonth: currentMonth,
+            slideDirection: slideDirection,
+            onMonthChange: this.handleChangeMonth,
+            leftArrowIcon: leftArrowIcon,
+            leftArrowButtonProps: leftArrowButtonProps,
+            rightArrowIcon: rightArrowIcon,
+            rightArrowButtonProps: rightArrowButtonProps,
+            disablePrevMonth: this.shouldDisablePrevMonth(),
+            disableNextMonth: this.shouldDisableNextMonth()
+          }),
+          /*#__PURE__*/
+          React.createElement(SlideTransition, {
+            slideDirection: slideDirection,
+            transKey: currentMonth.toString(),
+            className: classes.transitionContainer
+          },
+          /*#__PURE__*/
+          React.createElement(React.Fragment, null, this.state.loadingQueue > 0 &&
+          /*#__PURE__*/
+          React.createElement("div", {
+            className: classes.progressContainer
+          }, loadingElement) ||
+          /*#__PURE__*/
+          React.createElement("div", null, this.renderWeeks()))))
+        );
       };
 
        Calendar.propTypes = {
@@ -4716,7 +4821,7 @@
       };
       return Calendar;
     }(React.Component);
-    var styles$2 = function (theme) {
+    var styles$2 = function styles(theme) {
       return {
         transitionContainer: {
           minHeight: 36 * 6,
@@ -4790,7 +4895,7 @@
     }, {
       name: 'MuiPickersYear'
     });
-    var Year = function (_a) {
+    var Year = function Year(_a) {
       var _b;
 
       var onSelect = _a.onSelect,
@@ -4805,24 +4910,31 @@
       var handleClick = React.useCallback(function () {
         return onSelect(value);
       }, [onSelect, value]);
-      return React.createElement(Typography$2, __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__*/
+        React.createElement(Typography$2, __assign({
+          role: "button",
+          component: "div",
+          tabIndex: disabled ? -1 : 0,
+          onClick: handleClick,
+          onKeyPress: handleClick,
+          color: selected ? 'primary' : undefined,
+          variant: selected ? 'h5' : 'subtitle1',
+          children: children,
+          ref: forwardedRef,
+          className: clsx(classes.root, (_b = {}, _b[classes.yearSelected] = selected, _b[classes.yearDisabled] = disabled, _b))
+        }, other))
+      );
     };
     Year.displayName = 'Year';
-    var Year$1 = React.forwardRef(function (props, ref) {
-      return React.createElement(Year, __assign({}, props, {
-        forwardedRef: ref
-      }));
+    var Year$1 = /*#__PURE__*/
+    React.forwardRef(function (props, ref) {
+      return (
+        /*#__PURE__*/
+        React.createElement(Year, __assign({}, props, {
+          forwardedRef: ref
+        }))
+      );
     });
 
     var styles$3 = function styles(theme) {
@@ -31583,16 +31695,19 @@
     }, {
       name: 'MuiPickersStaticWrapper'
     });
-    var StaticWrapper = function (_a) {
+    var StaticWrapper = function StaticWrapper(_a) {
       var children = _a.children;
       var classes = useStyles$8();
-      return React.createElement("div", {
-        className: classes.staticWrapperRoot,
-        children: children
-      });
+      return (
+        /*#__PURE__*/
+        React.createElement("div", {
+          className: classes.staticWrapperRoot,
+          children: children
+        })
+      );
     };
 
-    var ModalDialog = function (_a) {
+    var ModalDialog = function ModalDialog(_a) {
       var _b, _c;
 
       var children = _a.children,
@@ -31611,32 +31726,47 @@
           wider = _a.wider,
           other = __rest(_a, ["children", "classes", "onAccept", "onDismiss", "onClear", "onSetToday", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "clearable", "showTodayButton", "showTabs", "wider"]);
 
-      return React.createElement(Dialog$1, __assign({
-        role: "dialog",
-        onClose: onDismiss,
-        classes: {
-          paper: clsx(classes.dialogRoot, (_b = {}, _b[classes.dialogRootWider] = wider, _b))
-        }
-      }, other), React.createElement(DialogContent$1, {
-        children: children,
-        className: classes.dialog
-      }), React.createElement(DialogActions$2, {
-        classes: {
-          root: clsx((_c = {}, _c[classes.withAdditionalAction] = clearable || showTodayButton, _c))
-        }
-      }, clearable && React.createElement(Button$2, {
-        color: "primary",
-        onClick: onClear
-      }, clearLabel), !clearable && showTodayButton && React.createElement(Button$2, {
-        color: "primary",
-        onClick: onSetToday
-      }, todayLabel), cancelLabel && React.createElement(Button$2, {
-        color: "primary",
-        onClick: onDismiss
-      }, cancelLabel), okLabel && React.createElement(Button$2, {
-        color: "primary",
-        onClick: onAccept
-      }, okLabel)));
+      return (
+        /*#__PURE__*/
+        React.createElement(Dialog$1, __assign({
+          role: "dialog",
+          onClose: onDismiss,
+          classes: {
+            paper: clsx(classes.dialogRoot, (_b = {}, _b[classes.dialogRootWider] = wider, _b))
+          }
+        }, other),
+        /*#__PURE__*/
+        React.createElement(DialogContent$1, {
+          children: children,
+          className: classes.dialog
+        }),
+        /*#__PURE__*/
+        React.createElement(DialogActions$2, {
+          classes: {
+            root: clsx((_c = {}, _c[classes.withAdditionalAction] = clearable || showTodayButton, _c))
+          }
+        }, clearable &&
+        /*#__PURE__*/
+        React.createElement(Button$2, {
+          color: "primary",
+          onClick: onClear
+        }, clearLabel), !clearable && showTodayButton &&
+        /*#__PURE__*/
+        React.createElement(Button$2, {
+          color: "primary",
+          onClick: onSetToday
+        }, todayLabel), cancelLabel &&
+        /*#__PURE__*/
+        React.createElement(Button$2, {
+          color: "primary",
+          onClick: onDismiss
+        }, cancelLabel), okLabel &&
+        /*#__PURE__*/
+        React.createElement(Button$2, {
+          color: "primary",
+          onClick: onAccept
+        }, okLabel)))
+      );
     };
     ModalDialog.displayName = 'ModalDialog';
     var styles$1N = createStyles({
@@ -31663,7 +31793,7 @@
       name: 'MuiPickersModal'
     })(ModalDialog);
 
-    var ModalWrapper = function (_a) {
+    var ModalWrapper = function ModalWrapper(_a) {
       var open = _a.open,
           children = _a.children,
           okLabel = _a.okLabel,
@@ -31686,22 +31816,29 @@
       useKeyDown(open, {
         Enter: onAccept
       });
-      return React.createElement(React.Fragment, null, React.createElement(InputComponent, __assign({}, other, DateInputProps)), React.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__*/
+        React.createElement(React.Fragment, null,
+        /*#__PURE__*/
+        React.createElement(InputComponent, __assign({}, other, DateInputProps)),
+        /*#__PURE__*/
+        React.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)))
+      );
     };
      ModalWrapper.propTypes = {
       okLabel: PropTypes.node,
@@ -31732,7 +31869,7 @@
     }, {
       name: 'MuiPickersInlineWrapper'
     });
-    var InlineWrapper = function (_a) {
+    var InlineWrapper = function InlineWrapper(_a) {
       var _b;
 
       var open = _a.open,
@@ -31753,25 +31890,32 @@
       useKeyDown(open, {
         Enter: onAccept
       });
-      return React.createElement(React.Fragment, null, React.createElement(InputComponent, __assign({}, other, DateInputProps, {
-        inputRef: ref
-      })), React.createElement(Popover$2, __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__*/
+        React.createElement(React.Fragment, null,
+        /*#__PURE__*/
+        React.createElement(InputComponent, __assign({}, other, DateInputProps, {
+          inputRef: ref
+        })),
+        /*#__PURE__*/
+        React.createElement(Popover$2, __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)))
+      );
     };
      InlineWrapper.propTypes = {
       onOpen: PropTypes.func,
@@ -31791,15 +31935,22 @@
           return ModalWrapper;
       }
     }
-    var VariantContext = React.createContext(null);
-    var Wrapper = function (_a) {
+    var VariantContext =
+    /*#__PURE__*/
+    React.createContext(null);
+    var Wrapper = function Wrapper(_a) {
       var variant = _a.variant,
           props = __rest(_a, ["variant"]);
 
       var Component = getWrapperFromVariant(variant);
-      return React.createElement(VariantContext.Provider, {
-        value: variant || 'dialog'
-      }, React.createElement(Component, __assign({}, props)));
+      return (
+        /*#__PURE__*/
+        React.createElement(VariantContext.Provider, {
+          value: variant || 'dialog'
+        },
+        /*#__PURE__*/
+        React.createElement(Component, __assign({}, props)))
+      );
     };
 
     var useStyles$a = makeStyles({
@@ -31810,7 +31961,7 @@
     }, {
       name: 'MuiPickersYearSelection'
     });
-    var YearSelection = function (_a) {
+    var YearSelection = function YearSelection(_a) {
       var date = _a.date,
           onChange = _a.onChange,
           onYearChange = _a.onYearChange,
@@ -31842,20 +31993,26 @@
 
         onChange(newDate, true);
       }, [date, onChange, onYearChange, utils]);
-      return React.createElement("div", {
-        className: classes.container
-      }, utils.getYearRange(minDate, maxDate).map(function (year) {
-        var yearNumber = utils.getYear(year);
-        var selected = yearNumber === currentYear;
-        return React.createElement(Year$1, {
-          key: utils.getYearText(year),
-          selected: selected,
-          value: yearNumber,
-          onSelect: onYearSelect,
-          ref: selected ? selectedYearRef : undefined,
-          disabled: Boolean(disablePast && utils.isBeforeYear(year, utils.date()) || disableFuture && utils.isAfterYear(year, utils.date()))
-        }, utils.getYearText(year));
-      }));
+      return (
+        /*#__PURE__*/
+        React.createElement("div", {
+          className: classes.container
+        }, utils.getYearRange(minDate, maxDate).map(function (year) {
+          var yearNumber = utils.getYear(year);
+          var selected = yearNumber === currentYear;
+          return (
+            /*#__PURE__*/
+            React.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;
@@ -31908,12 +32065,17 @@
         var _c = this.props,
             classes = _c.classes,
             hasSelected = _c.hasSelected;
-        return React.createElement("div", {
-          style: this.getAngleStyle(),
-          className: clsx(classes.pointer, (_a = {}, _a[classes.animateTransform] = this.state.toAnimateTransform, _a))
-        }, React.createElement("div", {
-          className: clsx(classes.thumb, (_b = {}, _b[classes.noPoint] = hasSelected, _b))
-        }));
+        return (
+          /*#__PURE__*/
+          React.createElement("div", {
+            style: this.getAngleStyle(),
+            className: clsx(classes.pointer, (_a = {}, _a[classes.animateTransform] = this.state.toAnimateTransform, _a))
+          },
+          /*#__PURE__*/
+          React.createElement("div", {
+            className: clsx(classes.thumb, (_b = {}, _b[classes.noPoint] = hasSelected, _b))
+          }))
+        );
       };
 
       ClockPointer.getDerivedStateFromProps = function (nextProps, state) {
@@ -31932,7 +32094,7 @@
 
       return ClockPointer;
     }(React.Component);
-    var styles$1O = function (theme) {
+    var styles$1O = function styles(theme) {
       return createStyles({
         pointer: {
           width: 2,
@@ -31976,11 +32138,11 @@
     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);
@@ -31996,7 +32158,7 @@
       };
     };
 
-    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;
@@ -32014,7 +32176,7 @@
 
       return value;
     };
-    var getMinutes = function (offsetX, offsetY, step) {
+    var getMinutes = function getMinutes(offsetX, offsetY, step) {
       if (step === void 0) {
         step = 1;
       }
@@ -32024,10 +32186,10 @@
       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';
 
@@ -32124,32 +32286,41 @@
             type = _a.type,
             ampm = _a.ampm;
         var isPointerInner = !ampm && type === ClockType$1.HOURS && (value < 1 || value > 12);
-        return React.createElement("div", {
-          className: classes.container
-        }, React.createElement("div", {
-          className: classes.clock
-        }, React.createElement("div", {
-          role: "menu",
-          tabIndex: -1,
-          className: classes.squareMask,
-          onTouchMove: this.handleTouchMove,
-          onTouchEnd: this.handleTouchEnd,
-          onMouseUp: this.handleMouseUp,
-          onMouseMove: this.handleMove
-        }), React.createElement("div", {
-          className: classes.pin
-        }), React.createElement(ClockPointer$1, {
-          type: type,
-          value: value,
-          isInner: isPointerInner,
-          hasSelected: this.hasSelected()
-        }), children));
+        return (
+          /*#__PURE__*/
+          React.createElement("div", {
+            className: classes.container
+          },
+          /*#__PURE__*/
+          React.createElement("div", {
+            className: classes.clock
+          },
+          /*#__PURE__*/
+          React.createElement("div", {
+            role: "menu",
+            tabIndex: -1,
+            className: classes.squareMask,
+            onTouchMove: this.handleTouchMove,
+            onTouchEnd: this.handleTouchEnd,
+            onMouseUp: this.handleMouseUp,
+            onMouseMove: this.handleMove
+          }),
+          /*#__PURE__*/
+          React.createElement("div", {
+            className: classes.pin
+          }),
+          /*#__PURE__*/
+          React.createElement(ClockPointer$1, {
+            type: type,
+            value: value,
+            isInner: isPointerInner,
+            hasSelected: this.hasSelected()
+          }), children))
+        );
       };
 
        Clock.propTypes = {
-        type: PropTypes.oneOf(Object.keys(ClockType$1).map(function (key) {
-          return ClockType$1[key];
-        })).isRequired,
+        type: PropTypes.oneOf(Object.values(ClockType$1)).isRequired,
         value: PropTypes.number.isRequired,
         onChange: PropTypes.func.isRequired,
         children: PropTypes.arrayOf(PropTypes.node).isRequired,
@@ -32163,7 +32334,7 @@
       };
       return Clock;
     }(React.Component);
-    var styles$1P = function (theme) {
+    var styles$1P = function styles(theme) {
       return createStyles({
         container: {
           display: 'flex',
@@ -32256,7 +32427,7 @@
     }, {
       name: 'MuiPickersClockNumber'
     });
-    var ClockNumber = function (_a) {
+    var ClockNumber = function ClockNumber(_a) {
       var _b;
 
       var selected = _a.selected,
@@ -32271,16 +32442,19 @@
           transform: "translate(" + position[0] + "px, " + position[1] + "px"
         };
       }, [index]);
-      return React.createElement(Typography$2, {
-        component: "span",
-        className: className,
-        variant: isInner ? 'body2' : 'body1',
-        style: transformStyle,
-        children: label
-      });
+      return (
+        /*#__PURE__*/
+        React.createElement(Typography$2, {
+          component: "span",
+          className: className,
+          variant: isInner ? 'body2' : 'body1',
+          style: transformStyle,
+          children: label
+        })
+      );
     };
 
-    var getHourNumbers = function (_a) {
+    var getHourNumbers = function getHourNumbers(_a) {
       var ampm = _a.ampm,
           utils = _a.utils,
           date = _a.date;
@@ -32289,7 +32463,7 @@
       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;
@@ -32314,73 +32488,99 @@
           selected: isSelected(hour),
           isInner: !ampm && (hour === 0 || hour > 12)
         };
-        hourNumbers.push(React.createElement(ClockNumber, __assign({
+        hourNumbers.push(
+        /*#__PURE__*/
+        React.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 [React.createElement(ClockNumber, {
+      return [
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('00'),
         selected: value === 0,
         index: 12,
         key: 12
-      }), React.createElement(ClockNumber, {
+      }),
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('05'),
         selected: value === 5,
         index: 1,
         key: 1
-      }), React.createElement(ClockNumber, {
+      }),
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('10'),
         selected: value === 10,
         index: 2,
         key: 2
-      }), React.createElement(ClockNumber, {
+      }),
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('15'),
         selected: value === 15,
         index: 3,
         key: 3
-      }), React.createElement(ClockNumber, {
+      }),
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('20'),
         selected: value === 20,
         index: 4,
         key: 4
-      }), React.createElement(ClockNumber, {
+      }),
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('25'),
         selected: value === 25,
         index: 5,
         key: 5
-      }), React.createElement(ClockNumber, {
+      }),
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('30'),
         selected: value === 30,
         index: 6,
         key: 6
-      }), React.createElement(ClockNumber, {
+      }),
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('35'),
         selected: value === 35,
         index: 7,
         key: 7
-      }), React.createElement(ClockNumber, {
+      }),
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('40'),
         selected: value === 40,
         index: 8,
         key: 8
-      }), React.createElement(ClockNumber, {
+      }),
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('45'),
         selected: value === 45,
         index: 9,
         key: 9
-      }), React.createElement(ClockNumber, {
+      }),
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('50'),
         selected: value === 50,
         index: 10,
         key: 10
-      }), React.createElement(ClockNumber, {
+      }),
+      /*#__PURE__*/
+      React.createElement(ClockNumber, {
         label: f('55'),
         selected: value === 55,
         index: 11,
@@ -32388,7 +32588,7 @@
       })];
     };
 
-    var TimePickerView = function (_a) {
+    var TimePickerView = function TimePickerView(_a) {
       var type = _a.type,
           onHourChange = _a.onHourChange,
           onMinutesChange = _a.onMinutesChange,
@@ -32407,7 +32607,7 @@
                 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);
@@ -32422,7 +32622,7 @@
                 value: minutesValue,
                 utils: utils
               }),
-              onChange: function (value, isFinish) {
+              onChange: function onChange(value, isFinish) {
                 var updatedTime = utils.setMinutes(date, value);
                 onMinutesChange(updatedTime, isFinish);
               }
@@ -32436,7 +32636,7 @@
                 value: secondsValue,
                 utils: utils
               }),
-              onChange: function (value, isFinish) {
+              onChange: function onChange(value, isFinish) {
                 var updatedTime = utils.setSeconds(date, value);
                 onSecondsChange(updatedTime, isFinish);
               }
@@ -32446,11 +32646,14 @@
             throw new Error('You must provide the type for TimePickerView');
         }
       }, [ampm, date, onHourChange, onMinutesChange, onSecondsChange, type, utils]);
-      return React.createElement(Clock$1, __assign({
-        type: type,
-        ampm: ampm,
-        minutesStep: minutesStep
-      }, viewProps));
+      return (
+        /*#__PURE__*/
+        React.createElement(Clock$1, __assign({
+          type: type,
+          ampm: ampm,
+          minutesStep: minutesStep
+        }, viewProps))
+      );
     };
     TimePickerView.displayName = 'TimePickerView';
      TimePickerView.propTypes = {
@@ -32460,15 +32663,14 @@
       onSecondsChange: PropTypes.func.isRequired,
       ampm: PropTypes.bool,
       minutesStep: PropTypes.number,
-      type: PropTypes.oneOf(Object.keys(ClockType$1).map(function (key) {
-        return ClockType$1[key];
-      })).isRequired
+      type: PropTypes.oneOf(Object.values(ClockType$1)).isRequired
     } ;
     TimePickerView.defaultProps = {
       ampm: true,
       minutesStep: 1
     };
-    var ClockView = React.memo(TimePickerView);
+    var ClockView = /*#__PURE__*/
+    React.memo(TimePickerView);
 
     var useStyles$c = makeStyles(function (theme) {
       return {
@@ -32500,7 +32702,7 @@
     }, {
       name: 'MuiPickersMonth'
     });
-    var Month = function (_a) {
+    var Month = function Month(_a) {
       var _b;
 
       var selected = _a.selected,
@@ -32514,17 +32716,20 @@
       var handleSelection = React.useCallback(function () {
         onSelect(value);
       }, [onSelect, value]);
-      return React.createElement(Typography$2, __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__*/
+        React.createElement(Typography$2, __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';
 
@@ -32538,7 +32743,7 @@
     }, {
       name: 'MuiPickersMonthSelection'
     });
-    var MonthSelection = function (_a) {
+    var MonthSelection = function MonthSelection(_a) {
       var disablePast = _a.disablePast,
           disableFuture = _a.disableFuture,
           minDate = _a.minDate,
@@ -32550,7 +32755,7 @@
       var classes = useStyles$d();
       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);
@@ -32569,22 +32774,28 @@
           onMonthChange(newDate);
         }
       }, [date, onChange, onMonthChange, utils]);
-      return React.createElement("div", {
-        className: classes.container
-      }, utils.getMonthArray(date).map(function (month) {
-        var monthNumber = utils.getMonth(month);
-        var monthText = utils.format(month, 'MMM');
-        return React.createElement(Month, {
-          key: monthText,
-          value: monthNumber,
-          selected: monthNumber === currentMonth,
-          onSelect: onMonthSelect,
-          disabled: shouldDisableMonth(month)
-        }, monthText);
-      }));
+      return (
+        /*#__PURE__*/
+        React.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__*/
+            React.createElement(Month, {
+              key: monthText,
+              value: monthNumber,
+              selected: monthNumber === currentMonth,
+              onSelect: onMonthSelect,
+              disabled: shouldDisableMonth(month)
+            }, monthText)
+          );
+        }))
+      );
     };
 
-    var getOrientation = function () {
+    var getOrientation = function getOrientation() {
       return typeof window !== 'undefined' && window.screen && window.screen.orientation && Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
     };
 
@@ -32647,7 +32858,7 @@
     var useDialogActionsStyles = makeStyles({
       withAdditionalAction: {}
     });
-    var Picker = function (props) {
+    var Picker = function Picker(props) {
       var _a, _b, _c;
 
       var date = props.date,
@@ -32705,10 +32916,12 @@
       var shiftButtons = new Array();
 
       if (showShiftButtons && setShiftFunction && onSetShift && shiftButtonValues) {
-        var _loop_1 = function (key) {
-          shiftButtons.push(React.createElement(Button$1, {
+        var _loop_1 = function _loop_1(key) {
+          shiftButtons.push(
+          /*#__PURE__*/
+          React.createElement(Button$1, {
             color: "primary",
-            onClick: function () {
+            onClick: function onClick() {
               return onSetShift(setShiftFunction(parseInt(key)));
             },
             key: shiftButtonValues[key]
@@ -32720,69 +32933,86 @@
         }
       }
 
-      return React.createElement("div", {
-        className: clsx(classes.container, (_a = {}, _a[classes.containerLandscape] = isLandscape, _a))
-      }, !disableToolbar && React.createElement(ToolbarComponent, __assign({
-        date: date,
-        onChange: onChange,
-        setOpenView: setOpenView,
-        openView: openView,
-        hideTabs: hideTabs,
-        dateRangeIcon: dateRangeIcon,
-        timeIcon: timeIcon,
-        isLandscape: isLandscape
-      }, props)), React.createElement("div", {
-        className: clsx(classes.pickerView, (_b = {}, _b[classes.pickerViewLandscape] = isLandscape, _b))
-      }, openView === 'year' && React.createElement(YearSelection, {
-        date: date,
-        onChange: handleChangeAndOpenNext,
-        minDate: minDate,
-        maxDate: maxDate,
-        disablePast: disablePast,
-        disableFuture: disableFuture,
-        onYearChange: onYearChange,
-        animateYearScrolling: animateYearScrolling
-      }), openView === 'month' && React.createElement(MonthSelection, {
-        date: date,
-        onChange: handleChangeAndOpenNext,
-        minDate: minDate,
-        maxDate: maxDate,
-        disablePast: disablePast,
-        disableFuture: disableFuture,
-        onMonthChange: onMonthChange
-      }), openView === 'date' && React.createElement(Calendar$1, {
-        date: date,
-        onChange: handleChangeAndOpenNext,
-        onMonthChange: onMonthChange,
-        disablePast: disablePast,
-        disableFuture: disableFuture,
-        minDate: minDate,
-        maxDate: maxDate,
-        leftArrowIcon: leftArrowIcon,
-        leftArrowButtonProps: leftArrowButtonProps,
-        rightArrowIcon: rightArrowIcon,
-        rightArrowButtonProps: rightArrowButtonProps,
-        renderDay: renderDay,
-        shouldDisableDate: shouldDisableDate,
-        allowKeyboardControl: allowKeyboardControl,
-        loadingIndicator: loadingIndicator
-      }), (openView === 'hours' || openView === 'minutes' || openView === 'seconds') && React.createElement(TimePickerView, {
-        date: date,
-        ampm: ampm,
-        type: openView,
-        minutesStep: minutesStep,
-        onHourChange: handleChangeAndOpenNext,
-        onMinutesChange: handleChangeAndOpenNext,
-        onSecondsChange: handleChangeAndOpenNext
-      })), showActionsBar && React.createElement(DialogActions$1, {
-        classes: {
-          root: clsx((_c = {}, _c[dialogActionsClasses.withAdditionalAction] = showTodayButton, _c))
-        }
-      }, showTodayButton && React.createElement(Button$1, {
-        color: "primary",
-        onClick: onSetToday,
-        key: "today"
-      }, todayLabel), showShiftButtons && setShiftFunction && shiftButtons));
+      return (
+        /*#__PURE__*/
+        React.createElement("div", {
+          className: clsx(classes.container, (_a = {}, _a[classes.containerLandscape] = isLandscape, _a))
+        }, !disableToolbar &&
+        /*#__PURE__*/
+        React.createElement(ToolbarComponent, __assign({
+          setOpenView: setOpenView,
+          openView: openView,
+          hideTabs: hideTabs,
+          dateRangeIcon: dateRangeIcon,
+          timeIcon: timeIcon,
+          isLandscape: isLandscape
+        }, props)),
+        /*#__PURE__*/
+        React.createElement("div", {
+          className: clsx(classes.pickerView, (_b = {}, _b[classes.pickerViewLandscape] = isLandscape, _b))
+        }, openView === 'year' &&
+        /*#__PURE__*/
+        React.createElement(YearSelection, {
+          date: date,
+          onChange: handleChangeAndOpenNext,
+          minDate: minDate,
+          maxDate: maxDate,
+          disablePast: disablePast,
+          disableFuture: disableFuture,
+          onYearChange: onYearChange,
+          animateYearScrolling: animateYearScrolling
+        }), openView === 'month' &&
+        /*#__PURE__*/
+        React.createElement(MonthSelection, {
+          date: date,
+          onChange: handleChangeAndOpenNext,
+          minDate: minDate,
+          maxDate: maxDate,
+          disablePast: disablePast,
+          disableFuture: disableFuture,
+          onMonthChange: onMonthChange
+        }), openView === 'date' &&
+        /*#__PURE__*/
+        React.createElement(Calendar$1, {
+          date: date,
+          onChange: handleChangeAndOpenNext,
+          onMonthChange: onMonthChange,
+          disablePast: disablePast,
+          disableFuture: disableFuture,
+          minDate: minDate,
+          maxDate: maxDate,
+          leftArrowIcon: leftArrowIcon,
+          leftArrowButtonProps: leftArrowButtonProps,
+          rightArrowIcon: rightArrowIcon,
+          rightArrowButtonProps: rightArrowButtonProps,
+          renderDay: renderDay,
+          shouldDisableDate: shouldDisableDate,
+          allowKeyboardControl: allowKeyboardControl,
+          loadingIndicator: loadingIndicator
+        }), (openView === 'hours' || openView === 'minutes' || openView === 'seconds') &&
+        /*#__PURE__*/
+        React.createElement(TimePickerView, {
+          date: date,
+          ampm: ampm,
+          type: openView,
+          minutesStep: minutesStep,
+          onHourChange: handleChangeAndOpenNext,
+          onMinutesChange: handleChangeAndOpenNext,
+          onSecondsChange: handleChangeAndOpenNext
+        })), showActionsBar &&
+        /*#__PURE__*/
+        React.createElement(DialogActions$1, {
+          classes: {
+            root: clsx((_c = {}, _c[dialogActionsClasses.withAdditionalAction] = showTodayButton, _c))
+          }
+        }, showTodayButton &&
+        /*#__PURE__*/
+        React.createElement(Button$1, {
+          color: "primary",
+          onClick: onSetToday,
+          key: "today"
+        }, todayLabel), showShiftButtons && setShiftFunction && shiftButtons))
+      );
     };
     Picker.defaultProps = __assign(__assign({}, datePickerDefaultProps), {
       views: Object.keys(viewsMap)
@@ -32812,7 +33042,7 @@
       };
     }
 
-    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;
@@ -32826,10 +33056,10 @@
         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;
       }
@@ -32837,7 +33067,7 @@
       return utils.endOfDay(date);
     };
 
-    var getComparisonMinDate = function (utils, strictCompareDates, date) {
+    var getComparisonMinDate = function getComparisonMinDate(utils, strictCompareDates, date) {
       if (strictCompareDates) {
         return date;
       }
@@ -32845,7 +33075,7 @@
       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,
@@ -32897,7 +33127,7 @@
     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;
 
@@ -32977,7 +33207,7 @@
       };
     };
 
-    var useValueToDate = function (utils, _a) {
+    var useValueToDate = function useValueToDate(utils, _a) {
       var value = _a.value,
           initialFocusedDate = _a.initialFocusedDate;
       var nowRef = React.useRef(utils.date());
@@ -32999,7 +33229,7 @@
       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;
@@ -33025,26 +33255,27 @@
       }, [date, isOpen, pickerDate, utils]);
       var acceptDate = React.useCallback(function (acceptedDate) {
         setIsOpen(false);
-        onChange(acceptedDate);
+
+        _onChange(acceptedDate);
 
         if (onAccept) {
           onAccept(acceptedDate);
         }
-      }, [onAccept, onChange, setIsOpen]);
+      }, [onAccept, _onChange, setIsOpen]);
       var wrapperProps = React.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);
           }
         };
@@ -33052,7 +33283,7 @@
       var pickerProps = React.useMemo(function () {
         return {
           date: pickerDate,
-          onChange: function (newDate, isFinish) {
+          onChange: function onChange(newDate, isFinish) {
             if (isFinish === void 0) {
               isFinish = true;
             }
@@ -33060,30 +33291,30 @@
             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) {
@@ -33091,7 +33322,7 @@
             }
           }
         };
-      }, [acceptDate, autoOk, onChange, pickerDate, variant]);
+      }, [acceptDate, autoOk, _onChange, pickerDate, variant]);
       var validationError = validate(value, utils, props);
       React.useEffect(function () {
         if (validationError && onError) {
@@ -33103,7 +33334,7 @@
         return {
           inputValue: inputValue,
           validationError: validationError,
-          onClick: function () {
+          onClick: function onClick() {
             return !disabled && setIsOpen(true);
           }
         };
@@ -33117,7 +33348,7 @@
       return pickerState;
     }
 
-    var PureDateInput = function (_a) {
+    var PureDateInput = function PureDateInput(_a) {
       var inputValue = _a.inputValue,
           inputVariant = _a.inputVariant,
           validationError = _a.validationError,
@@ -33131,15 +33362,18 @@
           readOnly: true
         });
       }, [InputProps]);
-      return React.createElement(TextFieldComponent, __assign({
-        error: Boolean(validationError),
-        helperText: validationError
-      }, other, {
-        // do not overridable
-        value: inputValue,
-        variant: inputVariant,
-        InputProps: PureDateInputProps
-      }));
+      return (
+        /*#__PURE__*/
+        React.createElement(TextFieldComponent, __assign({
+          error: Boolean(validationError),
+          helperText: validationError
+        }, other, {
+          // do not overridable
+          value: inputValue,
+          variant: inputVariant,
+          InputProps: PureDateInputProps
+        }))
+      );
     };
     PureDateInput.displayName = 'PureDateInput';
 
@@ -33201,6 +33435,10 @@
             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),
@@ -33208,61 +33446,71 @@
             inputProps = _b.inputProps,
             wrapperProps = _b.wrapperProps;
 
-        return React.createElement(Wrapper, __assign({
-          variant: variant,
-          InputComponent: PureDateInput,
-          DateInputProps: inputProps,
-          showTodayButton: showTodayButton,
-          todayLabel: todayLabel
-        }, wrapperProps, injectedProps, other), React.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__*/
+          React.createElement(Wrapper, __assign({
+            variant: variant,
+            InputComponent: PureDateInput,
+            DateInputProps: inputProps
+          }, wrapperProps, injectedProps, dialogVariantProps, other),
+          /*#__PURE__*/
+          React.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$2, __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 KeyboardIcon = function KeyboardIcon(props) {
+      return (
+        /*#__PURE__*/
+        React__default.createElement(SvgIcon$2, __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 (props) {
+    var Rifm = function Rifm(props) {
       var _a = React.useReducer(function (c) {
         return c + 1;
       }, 0),
@@ -33283,7 +33531,7 @@
 
       var isDeleleteButtonDownRef = React.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)
@@ -33312,7 +33560,7 @@
 
           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('');
           };
 
@@ -33325,7 +33573,7 @@
           // 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;
 
@@ -33400,13 +33648,13 @@
         // 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;
           }
@@ -33428,7 +33676,7 @@
       });
     };
 
-    var KeyboardDateInput = function (_a) {
+    var KeyboardDateInput = function KeyboardDateInput(_a) {
       var inputValue = _a.inputValue,
           _b = _a.showErrorOnBlur,
           showErrorOnBlur = _b === void 0 ? false : _b,
@@ -33438,8 +33686,8 @@
           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,
@@ -33459,12 +33707,12 @@
       var formatter = React.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;
       };
 
@@ -33472,61 +33720,73 @@
           showErrorFlag = _f[0],
           handleBlur = _f[1];
 
-      return React.createElement(Rifm, {
-        value: inputValue,
-        onChange: handleChange,
-        format: rifmFormatter || formatter,
-        replace: replace,
-        mask: true,
-        maskChar: maskChar,
-        letterPosition: letterPosition
-      }, function (_a) {
-        var _b;
-
-        var onChange = _a.onChange,
-            value = _a.value;
-        return React.createElement(TextFieldComponent, __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();
-            }
+      return (
+        /*#__PURE__*/
+        React.createElement(Rifm, {
+          value: inputValue,
+          onChange: handleChange,
+          format: rifmFormatter || formatter,
+          replace: replace,
+          mask: true,
+          maskChar: maskChar,
+          letterPosition: letterPosition
+        }, function (_a) {
+          var _b;
+
+          var onChange = _a.onChange,
+              value = _a.value;
+          return (
+            /*#__PURE__*/
+            React.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 (ev) {
-            if (onFocus) {
-              onFocus(ev);
-            }
+                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"] = React.createElement(InputAdornment$1, __assign({
-            position: position
-          }, InputAdornmentProps), React.createElement(IconButton$1, __assign({
-            disabled: disabled
-          }, KeyboardButtonProps, {
-            onClick: onClick
-          }), keyboardIcon)), _b))
-        }));
-      });
+                if (showErrorOnBlur) {
+                  handleBlur(true);
+                }
+              },
+              variant: inputVariant,
+              InputProps: __assign(__assign({}, InputProps), (_b = {}, _b[position + "Adornment"] =
+              /*#__PURE__*/
+              React.createElement(InputAdornment$1, __assign({
+                position: position
+              }, InputAdornmentProps),
+              /*#__PURE__*/
+              React.createElement(IconButton$1, __assign({
+                disabled: disabled
+              }, KeyboardButtonProps, {
+                onClick: onClick
+              }), keyboardIcon)), _b))
+            }))
+          );
+        })
+      );
     };
 
     KeyboardDateInput.defaultProps = {
-      keyboardIcon: React.createElement(KeyboardIcon, null)
+      keyboardIcon:
+      /*#__PURE__*/
+      React.createElement(KeyboardIcon, null)
     };
 
     function parseInputString(value, utils, format) {
@@ -33541,7 +33801,7 @@
       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);
@@ -33557,8 +33817,8 @@
         }
       }, [displayDate, setInnerInputValue, utils, value]);
       var handleKeyboardChange = React.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,
@@ -33572,13 +33832,14 @@
         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,
@@ -33653,44 +33914,49 @@
             inputProps = _b.inputProps,
             wrapperProps = _b.wrapperProps;
 
-        return React.createElement(Wrapper, __assign({
-          variant: variant,
-          InputComponent: KeyboardDateInput,
-          DateInputProps: inputProps
-        }, injectedProps, wrapperProps, other), React.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__*/
+          React.createElement(Wrapper, __assign({
+            variant: variant,
+            InputComponent: KeyboardDateInput,
+            DateInputProps: inputProps
+          }, injectedProps, wrapperProps, other),
+          /*#__PURE__*/
+          React.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;
@@ -33706,7 +33972,7 @@
     function useOptions(props) {
       var utils = useUtils();
       return {
-        getDefaultFormat: function () {
+        getDefaultFormat: function getDefaultFormat() {
           return getFormatByViews(props.views, utils);
         }
       };
@@ -33780,7 +34046,7 @@
       };
     }
 
-    var TimePickerToolbar = function (_a) {
+    var TimePickerToolbar = function TimePickerToolbar(_a) {
       var _b, _c, _d;
 
       var date = _a.date,
@@ -33799,63 +34065,84 @@
           handleMeridiemChange = _e.handleMeridiemChange;
 
       var clockTypographyVariant = isLandscape ? 'h3' : 'h2';
-      return React.createElement(PickerToolbar, {
-        isLandscape: isLandscape,
-        className: clsx((_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b[classes.toolbarAmpmLeftPadding] = ampm && !isLandscape, _b))
-      }, React.createElement("div", {
-        className: clsx(classes.hourMinuteLabel, (_c = {}, _c[classes.hourMinuteLabelLandscape] = isLandscape, _c[classes.hourMinuteLabelReverse] = theme.direction === 'rtl', _c))
-      }, arrayIncludes(views, 'hours') && React.createElement(ToolbarButton$1, {
-        variant: clockTypographyVariant,
-        onClick: function () {
-          return setOpenView(ClockType$1.HOURS);
-        },
-        selected: openView === ClockType$1.HOURS,
-        label: utils.getHourText(date, Boolean(ampm))
-      }), arrayIncludes(views, ['hours', 'minutes']) && React.createElement(ToolbarText, {
-        label: ":",
-        variant: clockTypographyVariant,
-        selected: false,
-        className: classes.separator
-      }), arrayIncludes(views, 'minutes') && React.createElement(ToolbarButton$1, {
-        variant: clockTypographyVariant,
-        onClick: function () {
-          return setOpenView(ClockType$1.MINUTES);
-        },
-        selected: openView === ClockType$1.MINUTES,
-        label: utils.getMinuteText(date)
-      }), arrayIncludes(views, ['minutes', 'seconds']) && React.createElement(ToolbarText, {
-        variant: "h2",
-        label: ":",
-        selected: false,
-        className: classes.separator
-      }), arrayIncludes(views, 'seconds') && React.createElement(ToolbarButton$1, {
-        variant: "h2",
-        onClick: function () {
-          return setOpenView(ClockType$1.SECONDS);
-        },
-        selected: openView === ClockType$1.SECONDS,
-        label: utils.getSecondText(date)
-      })), ampm && React.createElement("div", {
-        className: clsx(classes.ampmSelection, (_d = {}, _d[classes.ampmLandscape] = isLandscape, _d[classes.ampmSelectionWithSeconds] = arrayIncludes(views, 'seconds'), _d))
-      }, React.createElement(ToolbarButton$1, {
-        disableRipple: true,
-        variant: "subtitle1",
-        selected: meridiemMode === 'am',
-        typographyClassName: classes.ampmLabel,
-        label: utils.getMeridiemText('am'),
-        onClick: function () {
-          return handleMeridiemChange('am');
-        }
-      }), React.createElement(ToolbarButton$1, {
-        disableRipple: true,
-        variant: "subtitle1",
-        selected: meridiemMode === 'pm',
-        typographyClassName: classes.ampmLabel,
-        label: utils.getMeridiemText('pm'),
-        onClick: function () {
-          return handleMeridiemChange('pm');
-        }
-      })));
+      return (
+        /*#__PURE__*/
+        React.createElement(PickerToolbar, {
+          isLandscape: isLandscape,
+          className: clsx((_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b[classes.toolbarAmpmLeftPadding] = ampm && !isLandscape, _b))
+        },
+        /*#__PURE__*/
+        React.createElement("div", {
+          className: clsx(classes.hourMinuteLabel, (_c = {}, _c[classes.hourMinuteLabelLandscape] = isLandscape, _c[classes.hourMinuteLabelReverse] = theme.direction === 'rtl', _c))
+        }, arrayIncludes(views, 'hours') &&
+        /*#__PURE__*/
+        React.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__*/
+        React.createElement(ToolbarText, {
+          label: ":",
+          variant: clockTypographyVariant,
+          selected: false,
+          className: classes.separator
+        }), arrayIncludes(views, 'minutes') &&
+        /*#__PURE__*/
+        React.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__*/
+        React.createElement(ToolbarText, {
+          variant: "h2",
+          label: ":",
+          selected: false,
+          className: classes.separator
+        }), arrayIncludes(views, 'seconds') &&
+        /*#__PURE__*/
+        React.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__*/
+        React.createElement("div", {
+          className: clsx(classes.ampmSelection, (_d = {}, _d[classes.ampmLandscape] = isLandscape, _d[classes.ampmSelectionWithSeconds] = arrayIncludes(views, 'seconds'), _d))
+        },
+        /*#__PURE__*/
+        React.createElement(ToolbarButton$1, {
+          disableRipple: true,
+          variant: "subtitle1",
+          selected: meridiemMode === 'am',
+          typographyClassName: classes.ampmLabel,
+          label: utils.getMeridiemText('am'),
+          onClick: function onClick() {
+            return handleMeridiemChange('am');
+          }
+        }),
+        /*#__PURE__*/
+        React.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$2 = __assign(__assign({}, timePickerDefaultProps), {
@@ -33866,10 +34153,10 @@
     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
           });
         }
       };
@@ -33882,7 +34169,7 @@
     var KeyboardTimePicker = makeKeyboardPicker({
       useOptions: useOptions$1,
       DefaultToolbarComponent: TimePickerToolbar,
-      getCustomProps: function (props) {
+      getCustomProps: function getCustomProps(props) {
         return {
           refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi
         };
@@ -33891,27 +34178,43 @@
     TimePicker.defaultProps = defaultProps$2;
     KeyboardTimePicker.defaultProps = defaultProps$2;
 
-    var TimeIcon = function (props) {
-      return React__default.createElement(SvgIcon$2, __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 TimeIcon = function TimeIcon(props) {
+      return (
+        /*#__PURE__*/
+        React__default.createElement(SvgIcon$2, __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 (props) {
-      return React__default.createElement(SvgIcon$2, __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 DateRangeIcon = function DateRangeIcon(props) {
+      return (
+        /*#__PURE__*/
+        React__default.createElement(SvgIcon$2, __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 (openView) {
+    var viewToTabIndex = function viewToTabIndex(openView) {
       if (openView === 'date' || openView === 'year') {
         return 'date';
       }
@@ -33919,7 +34222,7 @@
       return 'time';
     };
 
-    var tabIndexToView = function (tab) {
+    var tabIndexToView = function tabIndexToView(tab) {
       if (tab === 'date') {
         return 'date';
       }
@@ -33929,7 +34232,7 @@
 
     var useStyles$g = 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),
@@ -33939,7 +34242,7 @@
     }, {
       name: 'MuiPickerDTTabs'
     });
-    var DateTimePickerTabs = function (_a) {
+    var DateTimePickerTabs = function DateTimePickerTabs(_a) {
       var view = _a.view,
           onChange = _a.onChange,
           dateRangeIcon = _a.dateRangeIcon,
@@ -33948,29 +34251,46 @@
       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 React.createElement(Paper$2, null, React.createElement(Tabs$1, {
-        variant: "fullWidth",
-        value: viewToTabIndex(view),
-        onChange: handleChange,
-        className: classes.tabs,
-        indicatorColor: indicatorColor
-      }, React.createElement(Tab$1, {
-        value: "date",
-        icon: React.createElement(React.Fragment, null, dateRangeIcon)
-      }), React.createElement(Tab$1, {
-        value: "time",
-        icon: React.createElement(React.Fragment, null, timeIcon)
-      })));
+      return (
+        /*#__PURE__*/
+        React.createElement(Paper$2, null,
+        /*#__PURE__*/
+        React.createElement(Tabs$1, {
+          variant: "fullWidth",
+          value: viewToTabIndex(view),
+          onChange: handleChange,
+          className: classes.tabs,
+          indicatorColor: indicatorColor
+        },
+        /*#__PURE__*/
+        React.createElement(Tab$1, {
+          value: "date",
+          icon:
+          /*#__PURE__*/
+          React.createElement(React.Fragment, null, dateRangeIcon)
+        }),
+        /*#__PURE__*/
+        React.createElement(Tab$1, {
+          value: "time",
+          icon:
+          /*#__PURE__*/
+          React.createElement(React.Fragment, null, timeIcon)
+        })))
+      );
     };
     DateTimePickerTabs.defaultProps = {
-      dateRangeIcon: React.createElement(DateRangeIcon, null),
-      timeIcon: React.createElement(TimeIcon, null)
+      dateRangeIcon:
+      /*#__PURE__*/
+      React.createElement(DateRangeIcon, null),
+      timeIcon:
+      /*#__PURE__*/
+      React.createElement(TimeIcon, null)
     };
 
     var useStyles$h = makeStyles(function (_) {
@@ -33988,7 +34308,7 @@
     }, {
       name: 'MuiPickerDTToolbar'
     });
-    var DateTimePickerToolbar = function (_a) {
+    var DateTimePickerToolbar = function DateTimePickerToolbar(_a) {
       var date = _a.date,
           openView = _a.openView,
           setOpenView = _a.setOpenView,
@@ -34007,84 +34327,117 @@
 
       var theme = useTheme();
       var rtl = theme.direction === 'rtl';
-      return React.createElement(React.Fragment, null, React.createElement(PickerToolbar, {
-        isLandscape: false,
-        className: classes.toolbar
-      }, React.createElement(StyledGrid, {
-        container: true,
-        justify: "center",
-        wrap: "nowrap"
-      }, React.createElement(StyledGrid, {
-        item: true,
-        container: true,
-        xs: 5,
-        justify: "flex-start",
-        direction: "column"
-      }, React.createElement("div", null, React.createElement(ToolbarButton$1, {
-        variant: "subtitle1",
-        onClick: function () {
-          return setOpenView('year');
-        },
-        selected: openView === 'year',
-        label: utils.getYearText(date)
-      })), React.createElement("div", null, React.createElement(ToolbarButton$1, {
-        variant: "h4",
-        onClick: function () {
-          return setOpenView('date');
-        },
-        selected: openView === 'date',
-        label: utils.getDateTimePickerHeaderText(date)
-      }))), React.createElement(StyledGrid, {
-        item: true,
-        container: true,
-        xs: 6,
-        justify: "center",
-        alignItems: "flex-end",
-        direction: rtl ? 'row-reverse' : 'row'
-      }, React.createElement(ToolbarButton$1, {
-        variant: "h3",
-        onClick: function () {
-          return setOpenView('hours');
-        },
-        selected: openView === 'hours',
-        label: utils.getHourText(date, ampm)
-      }), React.createElement(ToolbarText, {
-        variant: "h3",
-        label: ":",
-        className: classes.separator
-      }), React.createElement(ToolbarButton$1, {
-        variant: "h3",
-        onClick: function () {
-          return setOpenView('minutes');
-        },
-        selected: openView === 'minutes',
-        label: utils.getMinuteText(date)
-      })), ampm && React.createElement(StyledGrid, {
-        item: true,
-        container: true,
-        xs: 1,
-        direction: "column",
-        justify: "flex-end"
-      }, React.createElement(ToolbarButton$1, {
-        variant: "subtitle1",
-        selected: meridiemMode === 'am',
-        label: utils.getMeridiemText('am'),
-        onClick: function () {
-          return handleMeridiemChange('am');
-        }
-      }), React.createElement(ToolbarButton$1, {
-        variant: "subtitle1",
-        selected: meridiemMode === 'pm',
-        label: utils.getMeridiemText('pm'),
-        onClick: function () {
-          return handleMeridiemChange('pm');
-        }
-      })))), showTabs && React.createElement(DateTimePickerTabs, {
-        dateRangeIcon: dateRangeIcon,
-        timeIcon: timeIcon,
-        view: openView,
-        onChange: setOpenView
-      }));
+      return (
+        /*#__PURE__*/
+        React.createElement(React.Fragment, null,
+        /*#__PURE__*/
+        React.createElement(PickerToolbar, {
+          isLandscape: false,
+          className: classes.toolbar
+        },
+        /*#__PURE__*/
+        React.createElement(StyledGrid, {
+          container: true,
+          justify: "center",
+          wrap: "nowrap"
+        },
+        /*#__PURE__*/
+        React.createElement(StyledGrid, {
+          item: true,
+          container: true,
+          xs: 5,
+          justify: "flex-start",
+          direction: "column"
+        },
+        /*#__PURE__*/
+        React.createElement("div", null,
+        /*#__PURE__*/
+        React.createElement(ToolbarButton$1, {
+          variant: "subtitle1",
+          onClick: function onClick() {
+            return setOpenView('year');
+          },
+          selected: openView === 'year',
+          label: utils.formatByString(date, utils.formats.year)
+        })),
+        /*#__PURE__*/
+        React.createElement("div", null,
+        /*#__PURE__*/
+        React.createElement(ToolbarButton$1, {
+          variant: "h4",
+          onClick: function onClick() {
+            return setOpenView('date');
+          },
+          selected: openView === 'date',
+          label: utils.formatByString(date, utils.formats.shortDate)
+        }))),
+        /*#__PURE__*/
+        React.createElement(StyledGrid, {
+          item: true,
+          container: true,
+          xs: 6,
+          justify: "center",
+          alignItems: "flex-end",
+          direction: rtl ? 'row-reverse' : 'row'
+        },
+        /*#__PURE__*/
+        React.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__*/
+        React.createElement(ToolbarText, {
+          variant: "h3",
+          label: ":",
+          className: classes.separator
+        }),
+        /*#__PURE__*/
+        React.createElement(ToolbarButton$1, {
+          variant: "h3",
+          onClick: function onClick() {
+            return setOpenView('minutes');
+          },
+          selected: openView === 'minutes',
+          label: utils.formatByString(date, utils.formats.minutes)
+        })), ampm &&
+        /*#__PURE__*/
+        React.createElement(StyledGrid, {
+          item: true,
+          container: true,
+          xs: 1,
+          direction: "column",
+          justify: "flex-end"
+        },
+        /*#__PURE__*/
+        React.createElement(ToolbarButton$1, {
+          variant: "subtitle1",
+          selected: meridiemMode === 'am',
+          label: utils.getMeridiemText('am'),
+          onClick: function onClick() {
+            return handleMeridiemChange('am');
+          }
+        }),
+        /*#__PURE__*/
+        React.createElement(ToolbarButton$1, {
+          variant: "subtitle1",
+          selected: meridiemMode === 'pm',
+          label: utils.getMeridiemText('pm'),
+          onClick: function onClick() {
+            return handleMeridiemChange('pm');
+          }
+        })))), showTabs &&
+        /*#__PURE__*/
+        React.createElement(DateTimePickerTabs, {
+          dateRangeIcon: dateRangeIcon,
+          timeIcon: timeIcon,
+          view: openView,
+          onChange: setOpenView
+        }))
+      );
     };
 
     var defaultProps$3 = __assign(__assign({}, dateTimePickerDefaultProps), {
@@ -34104,10 +34457,10 @@
       }
 
       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
           });
         }
       };
@@ -34120,7 +34473,7 @@
     var KeyboardDateTimePicker = makeKeyboardPicker({
       useOptions: useOptions$2,
       DefaultToolbarComponent: DateTimePickerToolbar,
-      getCustomProps: function (props) {
+      getCustomProps: function getCustomProps(props) {
         return {
           refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi
         };