@bigbinary/neetoui 6.2.6 → 6.3.1

package/index.cjs.js

@@ -257,9 +257,9 @@ const MotionContext = React$3.createContext({});
  */
 const PresenceContext = React$3.createContext(null);
 
-const isBrowser$9 = typeof document !== "undefined";
+const isBrowser$b = typeof document !== "undefined";
 
-const useIsomorphicLayoutEffect$2 = isBrowser$9 ? React$3.useLayoutEffect : React$3.useEffect;
+const useIsomorphicLayoutEffect$3 = isBrowser$b ? React$3.useLayoutEffect : React$3.useEffect;
 
 const LazyContext = React$3.createContext({ strict: false });
 
@@ -294,7 +294,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
      * was present on initial render - it will be deleted after this.
      */
     const canHandoff = React$3.useRef(Boolean(window.HandoffAppearAnimations));
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$3(() => {
         if (!visualElement)
             return;
         visualElement.render();
@@ -485,7 +485,7 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, useRend
         const { isStatic } = configAndProps;
         const context = useCreateMotionContext(props);
         const visualState = useVisualState(props, isStatic);
-        if (!isStatic && isBrowser$9) {
+        if (!isStatic && isBrowser$b) {
             /**
              * Create a VisualElement for this component. A VisualElement provides a common
              * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
@@ -2807,7 +2807,7 @@ function calcGeneratorVelocity(resolveValue, t, current) {
     return velocityPerSecond(current - resolveValue(prevT), t - prevT);
 }
 
-const safeMin$1 = 0.001;
+const safeMin$2 = 0.001;
 const minDuration = 0.01;
 const maxDuration$1 = 10.0;
 const minDamping = 0.05;
@@ -2832,7 +2832,7 @@ function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, })
             const a = exponentialDecay - velocity;
             const b = calcAngularFreq(undampedFreq, dampingRatio);
             const c = Math.exp(-delta);
-            return safeMin$1 - (a / b) * c;
+            return safeMin$2 - (a / b) * c;
         };
         derivative = (undampedFreq) => {
             const exponentialDecay = undampedFreq * dampingRatio;
@@ -2841,7 +2841,7 @@ function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, })
             const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;
             const f = Math.exp(-delta);
             const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);
-            const factor = -envelope(undampedFreq) + safeMin$1 > 0 ? -1 : 1;
+            const factor = -envelope(undampedFreq) + safeMin$2 > 0 ? -1 : 1;
             return (factor * ((d - e) * f)) / g;
         };
     }
@@ -2852,7 +2852,7 @@ function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, })
         envelope = (undampedFreq) => {
             const a = Math.exp(-undampedFreq * duration);
             const b = (undampedFreq - velocity) * duration + 1;
-            return -safeMin$1 + a * b;
+            return -safeMin$2 + a * b;
         };
         derivative = (undampedFreq) => {
             const a = Math.exp(-undampedFreq * duration);
@@ -8377,7 +8377,7 @@ const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, tr
         // Reapply original values
         visualElement.render();
         // Restore scroll position
-        if (isBrowser$9 && scrollY !== null) {
+        if (isBrowser$b && scrollY !== null) {
             window.scrollTo({ top: scrollY });
         }
         return { target: convertedTarget, transitionEnd };
@@ -8416,7 +8416,7 @@ const hasReducedMotionListener = { current: false };
 
 function initPrefersReducedMotion() {
     hasReducedMotionListener.current = true;
-    if (!isBrowser$9)
+    if (!isBrowser$b)
         return;
     if (window.matchMedia) {
         const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
@@ -9102,7 +9102,7 @@ const motion = /*@__PURE__*/ createMotionProxy((Component, config) => createDomM
 
 function useIsMounted() {
     const isMounted = React$3.useRef(false);
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$3(() => {
         isMounted.current = true;
         return () => {
             isMounted.current = false;
@@ -9312,7 +9312,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     // If this is the initial component render, just deal with logic surrounding whether
     // we play onMount animations or not.
     const isInitialRender = React$3.useRef(true);
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$3(() => {
         isInitialRender.current = false;
         updateChildLookup(filteredChildren, allChildren);
         presentChildren.current = childrenToRender;
@@ -13910,8 +13910,8 @@ function bindGlobalEventListeners() {
   window.addEventListener('blur', onWindowBlur);
 }
 
-var isBrowser$8 = typeof window !== 'undefined' && typeof document !== 'undefined';
-var isIE11 = isBrowser$8 ? // @ts-ignore
+var isBrowser$a = typeof window !== 'undefined' && typeof document !== 'undefined';
+var isIE11 = isBrowser$a ? // @ts-ignore
 !!window.msCrypto : false;
 
 var pluginProps = {
@@ -15361,7 +15361,7 @@ function _objectWithoutPropertiesLoose$4(source, excluded) {
   return target;
 }
 
-var isBrowser$7 = typeof window !== 'undefined' && typeof document !== 'undefined';
+var isBrowser$9 = typeof window !== 'undefined' && typeof document !== 'undefined';
 function preserveRef(ref, node) {
   if (ref) {
     if (typeof ref === 'function') {
@@ -15374,7 +15374,7 @@ function preserveRef(ref, node) {
   }
 }
 function ssrSafeCreateDiv() {
-  return isBrowser$7 && document.createElement('div');
+  return isBrowser$9 && document.createElement('div');
 }
 function toDataAttributes(attrs) {
   var dataAttrs = {
@@ -15437,7 +15437,7 @@ function deepPreserveProps(instanceProps, componentProps) {
   });
 }
 
-var useIsomorphicLayoutEffect$1 = isBrowser$7 ? React$3.useLayoutEffect : React$3.useEffect;
+var useIsomorphicLayoutEffect$2 = isBrowser$9 ? React$3.useLayoutEffect : React$3.useEffect;
 function useMutableBox(initialValue) {
   // Using refs instead of state as it's recommended to not store imperative
   // values in state due to memory problems in React(?)
@@ -15576,7 +15576,7 @@ function TippyGenerator(tippy) {
 
     var deps = [reference].concat(children ? [children.type] : []); // CREATE
 
-    useIsomorphicLayoutEffect$1(function () {
+    useIsomorphicLayoutEffect$2(function () {
       var element = reference;
 
       if (reference && reference.hasOwnProperty('current')) {
@@ -15611,7 +15611,7 @@ function TippyGenerator(tippy) {
       };
     }, deps); // UPDATE
 
-    useIsomorphicLayoutEffect$1(function () {
+    useIsomorphicLayoutEffect$2(function () {
       var _instance$popperInsta;
 
       // Prevent this effect from running on 1st render
@@ -15647,7 +15647,7 @@ function TippyGenerator(tippy) {
         });
       }
     });
-    useIsomorphicLayoutEffect$1(function () {
+    useIsomorphicLayoutEffect$2(function () {
       var _instance$props$poppe;
 
       if (!render) {
@@ -15923,7 +15923,7 @@ var Button = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, r
 });
 Button.displayName = "Button";
 
-var Divider$1 = function Divider(props) {
+var Divider$2 = function Divider(props) {
   return /*#__PURE__*/React__default["default"].createElement("li", _extends$4({
     className: "neeto-ui-dropdown__popup-divider"
   }, props));
@@ -16196,7 +16196,7 @@ var Dropdown = function Dropdown(_ref2) {
 };
 Dropdown.Menu = Menu$3;
 Dropdown.MenuItem = MenuItem$1;
-Dropdown.Divider = Divider$1;
+Dropdown.Divider = Divider$2;
 
 var _excluded$D = ["style", "size"];
 var BTN_STYLES = {
@@ -22684,7 +22684,7 @@ var ColorPicker = function ColorPicker(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Palette, colorPaletteProps))));
 };
 
-var _excluded$w = ["className", "label", "size", "dropdownClassName", "popupClassName", "dateFormat", "timeFormat", "onChange", "onOk", "picker", "showTime", "type", "nakedInput", "error", "defaultValue", "value", "labelProps", "required", "allowClear"];
+var _excluded$w = ["className", "label", "size", "dropdownClassName", "popupClassName", "dateFormat", "timeFormat", "onChange", "onOk", "picker", "mode", "showTime", "type", "nakedInput", "error", "defaultValue", "value", "labelProps", "required", "allowClear"];
 function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty$7(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var INPUT_SIZES$2 = {
@@ -22706,43 +22706,59 @@ var IconOverride = function IconOverride(_ref) {
     size: 20
   }));
 };
-var DatePicker = /*#__PURE__*/React$3.forwardRef(function (_ref2, ref) {
-  var _ref2$className = _ref2.className,
-    className = _ref2$className === void 0 ? "" : _ref2$className,
-    _ref2$label = _ref2.label,
-    label = _ref2$label === void 0 ? "" : _ref2$label,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? INPUT_SIZES$2.medium : _ref2$size,
-    _ref2$dropdownClassNa = _ref2.dropdownClassName,
-    dropdownClassName = _ref2$dropdownClassNa === void 0 ? "" : _ref2$dropdownClassNa,
-    _ref2$popupClassName = _ref2.popupClassName,
-    popupClassName = _ref2$popupClassName === void 0 ? "" : _ref2$popupClassName,
-    _ref2$dateFormat = _ref2.dateFormat,
-    dateFormat = _ref2$dateFormat === void 0 ? "DD/MM/YYYY" : _ref2$dateFormat,
-    _ref2$timeFormat = _ref2.timeFormat,
-    timeFormat = _ref2$timeFormat === void 0 ? "HH:mm:ss" : _ref2$timeFormat,
-    _ref2$onChange = _ref2.onChange,
-    onChange = _ref2$onChange === void 0 ? noop$3 : _ref2$onChange,
-    _ref2$onOk = _ref2.onOk,
-    onOk = _ref2$onOk === void 0 ? noop$3 : _ref2$onOk,
-    _ref2$picker = _ref2.picker,
-    picker = _ref2$picker === void 0 ? "date" : _ref2$picker,
-    _ref2$showTime = _ref2.showTime,
-    showTime = _ref2$showTime === void 0 ? false : _ref2$showTime,
-    _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? "date" : _ref2$type,
-    _ref2$nakedInput = _ref2.nakedInput,
-    nakedInput = _ref2$nakedInput === void 0 ? false : _ref2$nakedInput,
-    _ref2$error = _ref2.error,
-    error = _ref2$error === void 0 ? "" : _ref2$error,
-    defaultValue = _ref2.defaultValue,
-    value = _ref2.value,
-    labelProps = _ref2.labelProps,
-    _ref2$required = _ref2.required,
-    required = _ref2$required === void 0 ? false : _ref2$required,
-    _ref2$allowClear = _ref2.allowClear,
-    allowClear = _ref2$allowClear === void 0 ? true : _ref2$allowClear,
-    otherProps = _objectWithoutProperties$1(_ref2, _excluded$w);
+var Today = function Today(_ref2) {
+  var onClick = _ref2.onClick;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "text-center"
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    onClick: onClick,
+    className: "neeto-ui-rounded-md hover:neeto-ui-bg-gray-200 px-2 py-1 text-xs font-medium transition duration-300 ease-in-out",
+    "data-cy": "year-month-mode-today"
+  }, "Today"));
+};
+var DatePicker = /*#__PURE__*/React$3.forwardRef(function (_ref3, ref) {
+  var _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? "" : _ref3$className,
+    _ref3$label = _ref3.label,
+    label = _ref3$label === void 0 ? "" : _ref3$label,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? INPUT_SIZES$2.medium : _ref3$size,
+    _ref3$dropdownClassNa = _ref3.dropdownClassName,
+    dropdownClassName = _ref3$dropdownClassNa === void 0 ? "" : _ref3$dropdownClassNa,
+    _ref3$popupClassName = _ref3.popupClassName,
+    popupClassName = _ref3$popupClassName === void 0 ? "" : _ref3$popupClassName,
+    _ref3$dateFormat = _ref3.dateFormat,
+    dateFormat = _ref3$dateFormat === void 0 ? "DD/MM/YYYY" : _ref3$dateFormat,
+    _ref3$timeFormat = _ref3.timeFormat,
+    timeFormat = _ref3$timeFormat === void 0 ? "HH:mm:ss" : _ref3$timeFormat,
+    _ref3$onChange = _ref3.onChange,
+    onChange = _ref3$onChange === void 0 ? noop$3 : _ref3$onChange,
+    _ref3$onOk = _ref3.onOk,
+    onOk = _ref3$onOk === void 0 ? noop$3 : _ref3$onOk,
+    _ref3$picker = _ref3.picker,
+    picker = _ref3$picker === void 0 ? "date" : _ref3$picker,
+    _ref3$mode = _ref3.mode,
+    inputMode = _ref3$mode === void 0 ? "date" : _ref3$mode,
+    _ref3$showTime = _ref3.showTime,
+    showTime = _ref3$showTime === void 0 ? false : _ref3$showTime,
+    _ref3$type = _ref3.type,
+    type = _ref3$type === void 0 ? "date" : _ref3$type,
+    _ref3$nakedInput = _ref3.nakedInput,
+    nakedInput = _ref3$nakedInput === void 0 ? false : _ref3$nakedInput,
+    _ref3$error = _ref3.error,
+    error = _ref3$error === void 0 ? "" : _ref3$error,
+    defaultValue = _ref3.defaultValue,
+    value = _ref3.value,
+    labelProps = _ref3.labelProps,
+    _ref3$required = _ref3.required,
+    required = _ref3$required === void 0 ? false : _ref3$required,
+    _ref3$allowClear = _ref3.allowClear,
+    allowClear = _ref3$allowClear === void 0 ? true : _ref3$allowClear,
+    otherProps = _objectWithoutProperties$1(_ref3, _excluded$w);
+  var _useState = React$3.useState(inputMode),
+    _useState2 = _slicedToArray$3(_useState, 2),
+    mode = _useState2[0],
+    setMode = _useState2[1];
   var id = useId(otherProps.id);
   var datePickerRef = useSyncedRef(ref);
   var Component = datePickerTypes[type === null || type === void 0 ? void 0 : type.toLowerCase()];
@@ -22751,6 +22767,17 @@ var DatePicker = /*#__PURE__*/React$3.forwardRef(function (_ref2, ref) {
   var handleOnChange = function handleOnChange(date, dateString) {
     type === "range" && !date ? onChange([], dateString) : onChange(date, dateString);
   };
+  var renderExtraFooter = function renderExtraFooter() {
+    if (type === "range" || mode === "date") return null;
+    return /*#__PURE__*/React__default["default"].createElement(Today, {
+      onClick: function onClick() {
+        setMode("date");
+        setTimeout(function () {
+          document.querySelector(".ant-picker-today-btn").click();
+        });
+      }
+    });
+  };
   return /*#__PURE__*/React__default["default"].createElement(_ConfigProvider__default["default"], {
     theme: {
       token: _objectSpread$l({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
@@ -22807,9 +22834,6 @@ var DatePicker = /*#__PURE__*/React$3.forwardRef(function (_ref2, ref) {
   }, label && /*#__PURE__*/React__default["default"].createElement(Label, _objectSpread$l({
     required: required
   }, labelProps), label), /*#__PURE__*/React__default["default"].createElement(Component, _extends$4({
-    format: format,
-    onOk: onOk,
-    picker: picker,
     "data-cy": label ? "".concat(hyphenize(label), "-input") : "picker-input",
     defaultValue: convertToDayjsObjects(defaultValue),
     ref: datePickerRef,
@@ -22829,7 +22853,17 @@ var DatePicker = /*#__PURE__*/React$3.forwardRef(function (_ref2, ref) {
     // Will be removed in the next major version
     popupClassName]),
     onChange: handleOnChange
-  }, otherProps, {
+  }, _objectSpread$l(_objectSpread$l({
+    format: format,
+    onOk: onOk,
+    picker: picker
+  }, otherProps), type === "date" && {
+    mode: mode,
+    renderExtraFooter: renderExtraFooter,
+    onPanelChange: function onPanelChange(_, mode) {
+      return setMode(mode);
+    }
+  }), {
     nextIcon: /*#__PURE__*/React__default["default"].createElement(IconOverride, {
       icon: neetoIcons.Right
     }),
@@ -22867,7 +22901,7 @@ var customParseFormat$1 = {exports: {}};
 
 var customParseFormat = customParseFormat$1.exports;
 
-var __spreadArray$2 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+var __spreadArray$3 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) ar = Array.prototype.slice.call(from, 0, i);
@@ -22958,7 +22992,7 @@ var animationEvents = [
 var transitionEvents = ['onTransitionEnd'];
 var otherEvents = ['onToggle'];
 var changeEvents = ['onChange'];
-var allEvents = __spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2(__spreadArray$2([], clipboardEvents, true), compositionEvents, true), focusEvents, true), formEvents, true), imageEvents, true), keyboardEvents, true), mediaEvents, true), mouseEvents, true), dragEvents, true), selectionEvents, true), touchEvents, true), pointerEvents, true), uiEvents, true), wheelEvents, true), animationEvents, true), transitionEvents, true), changeEvents, true), otherEvents, true);
+var allEvents = __spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3(__spreadArray$3([], clipboardEvents, true), compositionEvents, true), focusEvents, true), formEvents, true), imageEvents, true), keyboardEvents, true), mediaEvents, true), mouseEvents, true), dragEvents, true), selectionEvents, true), touchEvents, true), pointerEvents, true), uiEvents, true), wheelEvents, true), animationEvents, true), transitionEvents, true), changeEvents, true), otherEvents, true);
 /**
  * Returns an object with on-event callback props curried with provided args.
  * @param {Object} props Props passed to a component.
@@ -22984,8 +23018,6 @@ function makeEventProps(props, getArgs) {
     return eventProps;
 }
 
-function r$3(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$3(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$2(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$3(e))&&(n&&(n+=" "),n+=t);return n}
-
 function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$1(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
 
 /**
@@ -23142,8 +23174,8 @@ function Mark(_a) {
             } }, number)) : null));
 }
 
-var __assign$8 = (undefined && undefined.__assign) || function () {
-    __assign$8 = Object.assign || function(t) {
+var __assign$e = (undefined && undefined.__assign) || function () {
+    __assign$e = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -23151,10 +23183,10 @@ var __assign$8 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$8.apply(this, arguments);
+    return __assign$e.apply(this, arguments);
 };
 var MinuteMark = React$3.memo(function MinuteMark(props) {
-    return React__default["default"].createElement(Mark, __assign$8({}, props));
+    return React__default["default"].createElement(Mark, __assign$e({}, props));
 });
 
 /**
@@ -23902,8 +23934,8 @@ function formatHour(locale, hour) {
     return hour.toLocaleString(locale || getUserLocale() || undefined);
 }
 
-var __assign$7 = (undefined && undefined.__assign) || function () {
-    __assign$7 = Object.assign || function(t) {
+var __assign$d = (undefined && undefined.__assign) || function () {
+    __assign$d = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -23911,9 +23943,9 @@ var __assign$7 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$7.apply(this, arguments);
+    return __assign$d.apply(this, arguments);
 };
-var __rest$6 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$b = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -23925,8 +23957,8 @@ var __rest$6 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 var HourMark = React$3.memo(function HourMark(_a) {
-    var _b = _a.formatHour, formatHour$1 = _b === void 0 ? formatHour : _b, locale = _a.locale, number = _a.number, otherProps = __rest$6(_a, ["formatHour", "locale", "number"]);
-    return React__default["default"].createElement(Mark, __assign$7({ number: number ? formatHour$1(locale, number) : null }, otherProps));
+    var _b = _a.formatHour, formatHour$1 = _b === void 0 ? formatHour : _b, locale = _a.locale, number = _a.number, otherProps = __rest$b(_a, ["formatHour", "locale", "number"]);
+    return React__default["default"].createElement(Mark, __assign$d({ number: number ? formatHour$1(locale, number) : null }, otherProps));
 });
 
 function isNumberBetween(min, max) {
@@ -24106,8 +24138,8 @@ var __extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __assign$6 = (undefined && undefined.__assign) || function () {
-    __assign$6 = Object.assign || function(t) {
+var __assign$c = (undefined && undefined.__assign) || function () {
+    __assign$c = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -24115,9 +24147,9 @@ var __assign$6 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$6.apply(this, arguments);
+    return __assign$c.apply(this, arguments);
 };
-var __rest$5 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$a = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -24128,9 +24160,9 @@ var __rest$5 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-var isBrowser$6 = typeof document !== 'undefined';
-var isDisplayContentsSupported = isBrowser$6 && 'CSS' in window && 'supports' in window.CSS && CSS.supports('display', 'contents');
-var isMutationObserverSupported = isBrowser$6 && 'MutationObserver' in window;
+var isBrowser$8 = typeof document !== 'undefined';
+var isDisplayContentsSupported = isBrowser$8 && 'CSS' in window && 'supports' in window.CSS && CSS.supports('display', 'contents');
+var isMutationObserverSupported = isBrowser$8 && 'MutationObserver' in window;
 function capitalize(string) {
     return (string.charAt(0).toUpperCase() + string.slice(1));
 }
@@ -24230,12 +24262,12 @@ function alignMainAxis(args) {
     alignAxis(args);
 }
 function alignSecondaryAxis(args) {
-    alignAxis(__assign$6(__assign$6({}, args), { axis: args.axis === 'x' ? 'y' : 'x', secondary: true }));
+    alignAxis(__assign$c(__assign$c({}, args), { axis: args.axis === 'x' ? 'y' : 'x', secondary: true }));
 }
 function alignBothAxis(args) {
-    var invertAxis = args.invertAxis, invertSecondaryAxis = args.invertSecondaryAxis, commonArgs = __rest$5(args, ["invertAxis", "invertSecondaryAxis"]);
-    alignMainAxis(__assign$6(__assign$6({}, commonArgs), { invertAxis: invertAxis }));
-    alignSecondaryAxis(__assign$6(__assign$6({}, commonArgs), { invertAxis: invertSecondaryAxis }));
+    var invertAxis = args.invertAxis, invertSecondaryAxis = args.invertSecondaryAxis, commonArgs = __rest$a(args, ["invertAxis", "invertSecondaryAxis"]);
+    alignMainAxis(__assign$c(__assign$c({}, commonArgs), { invertAxis: invertAxis }));
+    alignSecondaryAxis(__assign$c(__assign$c({}, commonArgs), { invertAxis: invertSecondaryAxis }));
 }
 var Fit = /** @class */ (function (_super) {
     __extends(Fit, _super);
@@ -24350,7 +24382,7 @@ var Fit = /** @class */ (function (_super) {
     return Fit;
 }(React$3.Component));
 
-function Divider(_a) {
+function Divider$1(_a) {
     var children = _a.children;
     return React__default["default"].createElement("span", { className: "react-time-picker__inputGroup__divider" }, children);
 }
@@ -24412,20 +24444,20 @@ function updateInputWidth(element) {
     return width;
 }
 
-var isBrowser$5 = typeof document !== 'undefined';
-var useIsomorphicLayoutEffect = isBrowser$5 ? React$3.useLayoutEffect : React$3.useEffect;
-var isIEOrEdgeLegacy = isBrowser$5 && /(MSIE|Trident\/|Edge\/)/.test(navigator.userAgent);
-var isFirefox = isBrowser$5 && /Firefox/.test(navigator.userAgent);
-function onFocus(event) {
+var isBrowser$7 = typeof document !== 'undefined';
+var useIsomorphicLayoutEffect$1 = isBrowser$7 ? React$3.useLayoutEffect : React$3.useEffect;
+var isIEOrEdgeLegacy$1 = isBrowser$7 && /(MSIE|Trident\/|Edge\/)/.test(navigator.userAgent);
+var isFirefox$1 = isBrowser$7 && /Firefox/.test(navigator.userAgent);
+function onFocus$1(event) {
     var target = event.target;
-    if (isIEOrEdgeLegacy) {
+    if (isIEOrEdgeLegacy$1) {
         requestAnimationFrame(function () { return target.select(); });
     }
     else {
         target.select();
     }
 }
-function updateInputWidthOnLoad(element) {
+function updateInputWidthOnLoad$1(element) {
     if (document.readyState === 'complete') {
         return;
     }
@@ -24434,7 +24466,7 @@ function updateInputWidthOnLoad(element) {
     }
     window.addEventListener('load', onLoad);
 }
-function updateInputWidthOnFontLoad(element) {
+function updateInputWidthOnFontLoad$1(element) {
     if (!document.fonts) {
         return;
     }
@@ -24451,7 +24483,7 @@ function updateInputWidthOnFontLoad(element) {
     }
     document.fonts.addEventListener('loadingdone', onLoadingDone);
 }
-function getSelectionString(input) {
+function getSelectionString$1(input) {
     /**
      * window.getSelection().toString() returns empty string in IE11 and Firefox,
      * so alternatives come first.
@@ -24469,7 +24501,7 @@ function getSelectionString(input) {
     }
     return null;
 }
-function makeOnKeyPress(maxLength) {
+function makeOnKeyPress$1(maxLength) {
     if (maxLength === null) {
         return undefined;
     }
@@ -24478,28 +24510,28 @@ function makeOnKeyPress(maxLength) {
      * exceed maxLength.
      */
     return function onKeyPress(event) {
-        if (isFirefox) {
+        if (isFirefox$1) {
             // See https://github.com/wojtekmaj/react-time-picker/issues/92
             return;
         }
         var key = event.key, input = event.target;
         var value = input.value;
         var isNumberKey = key.length === 1 && /\d/.test(key);
-        var selection = getSelectionString(input);
+        var selection = getSelectionString$1(input);
         if (!isNumberKey || !(selection || value.length < maxLength)) {
             event.preventDefault();
         }
     };
 }
-function Input$3(_a) {
+function Input$4(_a) {
     var ariaLabel = _a.ariaLabel, autoFocus = _a.autoFocus, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, max = _a.max, min = _a.min, name = _a.name, nameForClass = _a.nameForClass, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, _b = _a.placeholder, placeholder = _b === void 0 ? '--' : _b, required = _a.required, showLeadingZeros = _a.showLeadingZeros, step = _a.step, value = _a.value;
-    useIsomorphicLayoutEffect(function () {
+    useIsomorphicLayoutEffect$1(function () {
         if (!inputRef || !inputRef.current) {
             return;
         }
         updateInputWidth(inputRef.current);
-        updateInputWidthOnLoad(inputRef.current);
-        updateInputWidthOnFontLoad(inputRef.current);
+        updateInputWidthOnLoad$1(inputRef.current);
+        updateInputWidthOnFontLoad$1(inputRef.current);
     }, [inputRef, value]);
     var hasLeadingZero = showLeadingZeros &&
         value &&
@@ -24508,7 +24540,7 @@ function Input$3(_a) {
     var maxLength = max ? max.toString().length : null;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         hasLeadingZero ? React__default["default"].createElement("span", { className: "".concat(className, "__leadingZero") }, "0") : null,
-        React__default["default"].createElement("input", { "aria-label": ariaLabel, autoComplete: "off", autoFocus: autoFocus, className: clsx$2("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, min: min, name: name, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyPress: makeOnKeyPress(maxLength), onKeyUp: function (event) {
+        React__default["default"].createElement("input", { "aria-label": ariaLabel, autoComplete: "off", autoFocus: autoFocus, className: clsx$1("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, min: min, name: name, onChange: onChange, onFocus: onFocus$1, onKeyDown: onKeyDown, onKeyPress: makeOnKeyPress$1(maxLength), onKeyUp: function (event) {
                 updateInputWidth(event.target);
                 if (onKeyUp) {
                     onKeyUp(event);
@@ -24516,7 +24548,7 @@ function Input$3(_a) {
             }, placeholder: placeholder, ref: inputRef, required: required, step: step, type: "number", value: value !== null ? value : '' })));
 }
 
-function convert12to24(hour12, amPm) {
+function convert12to24$1(hour12, amPm) {
     var hour24 = Number(hour12);
     if (amPm === 'am' && hour24 === 12) {
         hour24 = 0;
@@ -24526,33 +24558,33 @@ function convert12to24(hour12, amPm) {
     }
     return hour24;
 }
-function convert24to12(hour24) {
+function convert24to12$1(hour24) {
     var hour12 = Number(hour24) % 12 || 12;
     return [hour12, Number(hour24) < 12 ? 'am' : 'pm'];
 }
 
-var formatterCache = new Map();
-function getFormatter(options) {
+var formatterCache$1 = new Map();
+function getFormatter$1(options) {
     return function formatter(locale, date) {
         var localeWithDefault = locale || getUserLocale();
-        if (!formatterCache.has(localeWithDefault)) {
-            formatterCache.set(localeWithDefault, new Map());
+        if (!formatterCache$1.has(localeWithDefault)) {
+            formatterCache$1.set(localeWithDefault, new Map());
         }
-        var formatterCacheLocale = formatterCache.get(localeWithDefault);
+        var formatterCacheLocale = formatterCache$1.get(localeWithDefault);
         if (!formatterCacheLocale.has(options)) {
             formatterCacheLocale.set(options, new Intl.DateTimeFormat(localeWithDefault || undefined, options).format);
         }
         return formatterCacheLocale.get(options)(date);
     };
 }
-var numberFormatterCache = new Map();
-function getNumberFormatter(options) {
+var numberFormatterCache$1 = new Map();
+function getNumberFormatter$1(options) {
     return function (locale, number) {
         var localeWithDefault = locale || getUserLocale();
-        if (!numberFormatterCache.has(localeWithDefault)) {
-            numberFormatterCache.set(localeWithDefault, new Map());
+        if (!numberFormatterCache$1.has(localeWithDefault)) {
+            numberFormatterCache$1.set(localeWithDefault, new Map());
         }
-        var numberFormatterCacheLocale = numberFormatterCache.get(localeWithDefault);
+        var numberFormatterCacheLocale = numberFormatterCache$1.get(localeWithDefault);
         if (!numberFormatterCacheLocale.has(options)) {
             numberFormatterCacheLocale.set(options, new Intl.NumberFormat(localeWithDefault || undefined, options).format);
         }
@@ -24560,14 +24592,14 @@ function getNumberFormatter(options) {
     };
 }
 
-var nines = ['9', '٩'];
-var ninesRegExp = new RegExp("[".concat(nines.join(''), "]"));
-var amPmFormatter = getFormatter({ hour: 'numeric' });
-function getAmPmLabels(locale) {
-    var amString = amPmFormatter(locale, new Date(2017, 0, 1, 9));
-    var pmString = amPmFormatter(locale, new Date(2017, 0, 1, 21));
-    var _a = amString.split(ninesRegExp), am1 = _a[0], am2 = _a[1];
-    var _b = pmString.split(ninesRegExp), pm1 = _b[0], pm2 = _b[1];
+var nines$1 = ['9', '٩'];
+var ninesRegExp$1 = new RegExp("[".concat(nines$1.join(''), "]"));
+var amPmFormatter$1 = getFormatter$1({ hour: 'numeric' });
+function getAmPmLabels$1(locale) {
+    var amString = amPmFormatter$1(locale, new Date(2017, 0, 1, 9));
+    var pmString = amPmFormatter$1(locale, new Date(2017, 0, 1, 21));
+    var _a = amString.split(ninesRegExp$1), am1 = _a[0], am2 = _a[1];
+    var _b = pmString.split(ninesRegExp$1), pm1 = _b[0], pm2 = _b[1];
     if (pm2 !== undefined) {
         // If pm2 is undefined, nine was not found in pmString - this locale is not using 12-hour time
         if (am1 !== pm1) {
@@ -24580,26 +24612,26 @@ function getAmPmLabels(locale) {
     // Fallback
     return ['AM', 'PM'];
 }
-function isValidNumber(num) {
+function isValidNumber$1(num) {
     return num !== null && num !== false && !Number.isNaN(Number(num));
 }
-function safeMin() {
+function safeMin$1() {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         args[_i] = arguments[_i];
     }
-    return Math.min.apply(Math, args.filter(isValidNumber));
+    return Math.min.apply(Math, args.filter(isValidNumber$1));
 }
-function safeMax() {
+function safeMax$1() {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         args[_i] = arguments[_i];
     }
-    return Math.max.apply(Math, args.filter(isValidNumber));
+    return Math.max.apply(Math, args.filter(isValidNumber$1));
 }
 
-var __assign$5 = (undefined && undefined.__assign) || function () {
-    __assign$5 = Object.assign || function(t) {
+var __assign$b = (undefined && undefined.__assign) || function () {
+    __assign$b = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -24607,9 +24639,9 @@ var __assign$5 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$5.apply(this, arguments);
+    return __assign$b.apply(this, arguments);
 };
-var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$9 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -24620,20 +24652,20 @@ var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-function Hour12Input(_a) {
-    var amPm = _a.amPm, maxTime = _a.maxTime, minTime = _a.minTime, value = _a.value, otherProps = __rest$4(_a, ["amPm", "maxTime", "minTime", "value"]);
-    var maxHour = safeMin(12, maxTime &&
+function Hour12Input$1(_a) {
+    var amPm = _a.amPm, maxTime = _a.maxTime, minTime = _a.minTime, value = _a.value, otherProps = __rest$9(_a, ["amPm", "maxTime", "minTime", "value"]);
+    var maxHour = safeMin$1(12, maxTime &&
         (function () {
-            var _a = convert24to12(getHours(maxTime)), maxHourResult = _a[0], maxAmPm = _a[1];
+            var _a = convert24to12$1(getHours(maxTime)), maxHourResult = _a[0], maxAmPm = _a[1];
             if (maxAmPm !== amPm) {
                 // pm is always after am, so we should ignore validation
                 return null;
             }
             return maxHourResult;
         })());
-    var minHour = safeMax(1, minTime &&
+    var minHour = safeMax$1(1, minTime &&
         (function () {
-            var _a = convert24to12(getHours(minTime)), minHourResult = _a[0], minAmPm = _a[1];
+            var _a = convert24to12$1(getHours(minTime)), minHourResult = _a[0], minAmPm = _a[1];
             if (
             // pm is always after am, so we should ignore validation
             minAmPm !== amPm ||
@@ -24643,12 +24675,12 @@ function Hour12Input(_a) {
             }
             return minHourResult;
         })());
-    var value12 = value ? convert24to12(value)[0].toString() : '';
-    return (React__default["default"].createElement(Input$3, __assign$5({ max: maxHour, min: minHour, name: "hour12", nameForClass: "hour", value: value12 }, otherProps)));
+    var value12 = value ? convert24to12$1(value)[0].toString() : '';
+    return (React__default["default"].createElement(Input$4, __assign$b({ max: maxHour, min: minHour, name: "hour12", nameForClass: "hour", value: value12 }, otherProps)));
 }
 
-var __assign$4 = (undefined && undefined.__assign) || function () {
-    __assign$4 = Object.assign || function(t) {
+var __assign$a = (undefined && undefined.__assign) || function () {
+    __assign$a = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -24656,9 +24688,9 @@ var __assign$4 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$4.apply(this, arguments);
+    return __assign$a.apply(this, arguments);
 };
-var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$8 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -24669,15 +24701,15 @@ var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-function Hour24Input(_a) {
-    var maxTime = _a.maxTime, minTime = _a.minTime, otherProps = __rest$3(_a, ["maxTime", "minTime"]);
-    var maxHour = safeMin(23, maxTime && getHours(maxTime));
-    var minHour = safeMax(0, minTime && getHours(minTime));
-    return React__default["default"].createElement(Input$3, __assign$4({ max: maxHour, min: minHour, name: "hour24", nameForClass: "hour" }, otherProps));
+function Hour24Input$1(_a) {
+    var maxTime = _a.maxTime, minTime = _a.minTime, otherProps = __rest$8(_a, ["maxTime", "minTime"]);
+    var maxHour = safeMin$1(23, maxTime && getHours(maxTime));
+    var minHour = safeMax$1(0, minTime && getHours(minTime));
+    return React__default["default"].createElement(Input$4, __assign$a({ max: maxHour, min: minHour, name: "hour24", nameForClass: "hour" }, otherProps));
 }
 
-var __assign$3 = (undefined && undefined.__assign) || function () {
-    __assign$3 = Object.assign || function(t) {
+var __assign$9 = (undefined && undefined.__assign) || function () {
+    __assign$9 = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -24685,9 +24717,9 @@ var __assign$3 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$3.apply(this, arguments);
+    return __assign$9.apply(this, arguments);
 };
-var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$7 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -24698,18 +24730,18 @@ var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-function MinuteInput(_a) {
-    var hour = _a.hour, maxTime = _a.maxTime, minTime = _a.minTime, _b = _a.showLeadingZeros, showLeadingZeros = _b === void 0 ? true : _b, otherProps = __rest$2(_a, ["hour", "maxTime", "minTime", "showLeadingZeros"]);
+function MinuteInput$1(_a) {
+    var hour = _a.hour, maxTime = _a.maxTime, minTime = _a.minTime, _b = _a.showLeadingZeros, showLeadingZeros = _b === void 0 ? true : _b, otherProps = __rest$7(_a, ["hour", "maxTime", "minTime", "showLeadingZeros"]);
     function isSameHour(date) {
         return hour === getHours(date).toString();
     }
-    var maxMinute = safeMin(59, maxTime && isSameHour(maxTime) && getMinutes(maxTime));
-    var minMinute = safeMax(0, minTime && isSameHour(minTime) && getMinutes(minTime));
-    return (React__default["default"].createElement(Input$3, __assign$3({ max: maxMinute, min: minMinute, name: "minute", showLeadingZeros: showLeadingZeros }, otherProps)));
+    var maxMinute = safeMin$1(59, maxTime && isSameHour(maxTime) && getMinutes(maxTime));
+    var minMinute = safeMax$1(0, minTime && isSameHour(minTime) && getMinutes(minTime));
+    return (React__default["default"].createElement(Input$4, __assign$9({ max: maxMinute, min: minMinute, name: "minute", showLeadingZeros: showLeadingZeros }, otherProps)));
 }
 
-var __assign$2 = (undefined && undefined.__assign) || function () {
-    __assign$2 = Object.assign || function(t) {
+var __assign$8 = (undefined && undefined.__assign) || function () {
+    __assign$8 = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -24717,9 +24749,9 @@ var __assign$2 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$2.apply(this, arguments);
+    return __assign$8.apply(this, arguments);
 };
-var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$6 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -24730,17 +24762,17 @@ var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-function SecondInput(_a) {
-    var hour = _a.hour, maxTime = _a.maxTime, minTime = _a.minTime, minute = _a.minute, _b = _a.showLeadingZeros, showLeadingZeros = _b === void 0 ? true : _b, otherProps = __rest$1(_a, ["hour", "maxTime", "minTime", "minute", "showLeadingZeros"]);
+function SecondInput$1(_a) {
+    var hour = _a.hour, maxTime = _a.maxTime, minTime = _a.minTime, minute = _a.minute, _b = _a.showLeadingZeros, showLeadingZeros = _b === void 0 ? true : _b, otherProps = __rest$6(_a, ["hour", "maxTime", "minTime", "minute", "showLeadingZeros"]);
     function isSameMinute(date) {
         return hour === getHours(date).toString() && minute === getMinutes(date).toString();
     }
-    var maxSecond = safeMin(59, maxTime && isSameMinute(maxTime) && getSeconds(maxTime));
-    var minSecond = safeMax(0, minTime && isSameMinute(minTime) && getSeconds(minTime));
-    return (React__default["default"].createElement(Input$3, __assign$2({ max: maxSecond, min: minSecond, name: "second", showLeadingZeros: showLeadingZeros }, otherProps)));
+    var maxSecond = safeMin$1(59, maxTime && isSameMinute(maxTime) && getSeconds(maxTime));
+    var minSecond = safeMax$1(0, minTime && isSameMinute(minTime) && getSeconds(minTime));
+    return (React__default["default"].createElement(Input$4, __assign$8({ max: maxSecond, min: minSecond, name: "second", showLeadingZeros: showLeadingZeros }, otherProps)));
 }
 
-function NativeInput(_a) {
+function NativeInput$1(_a) {
     var ariaLabel = _a.ariaLabel, disabled = _a.disabled, maxTime = _a.maxTime, minTime = _a.minTime, name = _a.name, onChange = _a.onChange, required = _a.required, value = _a.value, valueType = _a.valueType;
     var nativeValueParser = (function () {
         switch (valueType) {
@@ -24776,20 +24808,20 @@ function NativeInput(_a) {
         }, type: "time", value: value ? nativeValueParser(value) : '' }));
 }
 
-function AmPm(_a) {
+function AmPm$1(_a) {
     var ariaLabel = _a.ariaLabel, autoFocus = _a.autoFocus, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, locale = _a.locale, maxTime = _a.maxTime, minTime = _a.minTime, onChange = _a.onChange, onKeyDown = _a.onKeyDown, required = _a.required, value = _a.value;
-    var amDisabled = minTime ? convert24to12(getHours(minTime))[1] === 'pm' : false;
-    var pmDisabled = maxTime ? convert24to12(getHours(maxTime))[1] === 'am' : false;
+    var amDisabled = minTime ? convert24to12$1(getHours(minTime))[1] === 'pm' : false;
+    var pmDisabled = maxTime ? convert24to12$1(getHours(maxTime))[1] === 'am' : false;
     var name = 'amPm';
-    var _b = getAmPmLabels(locale), amLabel = _b[0], pmLabel = _b[1];
-    return (React__default["default"].createElement("select", { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx$2("".concat(className, "__input"), "".concat(className, "__").concat(name)), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, ref: inputRef, required: required, value: value !== null ? value : '' },
+    var _b = getAmPmLabels$1(locale), amLabel = _b[0], pmLabel = _b[1];
+    return (React__default["default"].createElement("select", { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx$1("".concat(className, "__input"), "".concat(className, "__").concat(name)), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, ref: inputRef, required: required, value: value !== null ? value : '' },
         !value && React__default["default"].createElement("option", { value: "" }, "--"),
         React__default["default"].createElement("option", { disabled: amDisabled, value: "am" }, amLabel),
         React__default["default"].createElement("option", { disabled: pmDisabled, value: "pm" }, pmLabel)));
 }
 
-var __assign$1 = (undefined && undefined.__assign) || function () {
-    __assign$1 = Object.assign || function(t) {
+var __assign$7 = (undefined && undefined.__assign) || function () {
+    __assign$7 = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -24797,9 +24829,9 @@ var __assign$1 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$1.apply(this, arguments);
+    return __assign$7.apply(this, arguments);
 };
-var __spreadArray$1 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+var __spreadArray$2 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) ar = Array.prototype.slice.call(from, 0, i);
@@ -24808,24 +24840,24 @@ var __spreadArray$1 = (undefined && undefined.__spreadArray) || function (to, fr
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var getFormatterOptionsCache = {};
-var allViews$2 = ['hour', 'minute', 'second'];
-function isInternalInput(element) {
+var getFormatterOptionsCache$1 = {};
+var allViews$4 = ['hour', 'minute', 'second'];
+function isInternalInput$1(element) {
     return element.dataset.input === 'true';
 }
-function findInput(element, property) {
+function findInput$1(element, property) {
     var nextElement = element;
     do {
         nextElement = nextElement[property];
-    } while (nextElement && !isInternalInput(nextElement));
+    } while (nextElement && !isInternalInput$1(nextElement));
     return nextElement;
 }
-function focus(element) {
+function focus$1(element) {
     if (element) {
         element.focus();
     }
 }
-function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances) {
+function renderCustomInputs$1(placeholder, elementFunctions, allowMultipleInstances) {
     var usedFunctions = [];
     var pattern = new RegExp(Object.keys(elementFunctions)
         .map(function (el) { return "".concat(el, "+"); })
@@ -24834,8 +24866,8 @@ function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstance
     return placeholder.split(pattern).reduce(function (arr, element, index) {
         var divider = element && (
         // eslint-disable-next-line react/no-array-index-key
-        React__default["default"].createElement(Divider, { key: "separator_".concat(index) }, element));
-        var res = __spreadArray$1(__spreadArray$1([], arr, true), [divider], false);
+        React__default["default"].createElement(Divider$1, { key: "separator_".concat(index) }, element));
+        var res = __spreadArray$2(__spreadArray$2([], arr, true), [divider], false);
         var currentMatch = matches && matches[index];
         if (currentMatch) {
             var renderFunction = elementFunctions[currentMatch] ||
@@ -24856,8 +24888,8 @@ function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstance
         return res;
     }, []);
 }
-var formatNumber = getNumberFormatter({ useGrouping: false });
-function TimeInput(_a) {
+var formatNumber$1 = getNumberFormatter$1({ useGrouping: false });
+function TimeInput$1(_a) {
     var amPmAriaLabel = _a.amPmAriaLabel, autoFocus = _a.autoFocus, className = _a.className, disabled = _a.disabled, format = _a.format, hourAriaLabel = _a.hourAriaLabel, hourPlaceholder = _a.hourPlaceholder, _b = _a.isClockOpen, isClockOpenProps = _b === void 0 ? null : _b, locale = _a.locale, _c = _a.maxDetail, maxDetail = _c === void 0 ? 'minute' : _c, maxTime = _a.maxTime, minTime = _a.minTime, minuteAriaLabel = _a.minuteAriaLabel, minutePlaceholder = _a.minutePlaceholder, _d = _a.name, name = _d === void 0 ? 'time' : _d, nativeInputAriaLabel = _a.nativeInputAriaLabel, onChangeProps = _a.onChange, onInvalidChange = _a.onInvalidChange, required = _a.required, secondAriaLabel = _a.secondAriaLabel, secondPlaceholder = _a.secondPlaceholder, valueProps = _a.value;
     var _e = React$3.useState(null), amPm = _e[0], setAmPm = _e[1];
     var _f = React$3.useState(null), hour = _f[0], setHour = _f[1];
@@ -24877,7 +24909,7 @@ function TimeInput(_a) {
     React$3.useEffect(function () {
         var nextValue = valueProps;
         if (nextValue) {
-            setAmPm(convert24to12(getHours(nextValue))[1]);
+            setAmPm(convert24to12$1(getHours(nextValue))[1]);
             setHour(getHours(nextValue).toString());
             setMinute(getMinutes(nextValue).toString());
             setSecond(getSeconds(nextValue).toString());
@@ -24900,8 +24932,8 @@ function TimeInput(_a) {
     ]);
     var valueType = maxDetail;
     var formatTime = (function () {
-        var level = allViews$2.indexOf(maxDetail);
-        var formatterOptions = getFormatterOptionsCache[level] ||
+        var level = allViews$4.indexOf(maxDetail);
+        var formatterOptions = getFormatterOptionsCache$1[level] ||
             (function () {
                 var options = { hour: 'numeric' };
                 if (level >= 1) {
@@ -24910,10 +24942,10 @@ function TimeInput(_a) {
                 if (level >= 2) {
                     options.second = 'numeric';
                 }
-                getFormatterOptionsCache[level] = options;
+                getFormatterOptionsCache$1[level] = options;
                 return options;
             })();
-        return getFormatter(formatterOptions);
+        return getFormatter$1(formatterOptions);
     })();
     /**
      * Gets current value in a desired format.
@@ -24940,11 +24972,11 @@ function TimeInput(_a) {
             var second = 14;
             var date = new Date(2017, 0, 1, hour24, minute, second);
             return formatTime(locale, date)
-                .replace(formatNumber(locale, hour12), 'h')
-                .replace(formatNumber(locale, hour24), 'H')
-                .replace(formatNumber(locale, minute), 'mm')
-                .replace(formatNumber(locale, second), 'ss')
-                .replace(new RegExp(getAmPmLabels(locale).join('|')), 'a');
+                .replace(formatNumber$1(locale, hour12), 'h')
+                .replace(formatNumber$1(locale, hour24), 'H')
+                .replace(formatNumber$1(locale, minute), 'mm')
+                .replace(formatNumber$1(locale, second), 'ss')
+                .replace(new RegExp(getAmPmLabels$1(locale).join('|')), 'a');
         })();
     var divider = (function () {
         var dividers = placeholder.match(/[^0-9a-z]/i);
@@ -24954,7 +24986,7 @@ function TimeInput(_a) {
         if (event.target === event.currentTarget) {
             // Wrapper was directly clicked
             var firstInput = event.target.children[1];
-            focus(firstInput);
+            focus$1(firstInput);
         }
     }
     function onKeyDown(event) {
@@ -24966,8 +24998,8 @@ function TimeInput(_a) {
                 event.preventDefault();
                 var input = event.target;
                 var property = event.key === 'ArrowLeft' ? 'previousElementSibling' : 'nextElementSibling';
-                var nextInput = findInput(input, property);
-                focus(nextInput);
+                var nextInput = findInput$1(input, property);
+                focus$1(nextInput);
                 break;
             }
         }
@@ -24995,8 +25027,8 @@ function TimeInput(_a) {
          */
         if (Number(value) * 10 > Number(max) || value.length >= max.length) {
             var property = 'nextElementSibling';
-            var nextInput = findInput(input, property);
-            focus(nextInput);
+            var nextInput = findInput$1(input, property);
+            focus$1(nextInput);
         }
     }
     /**
@@ -25036,7 +25068,7 @@ function TimeInput(_a) {
         var isEveryValueValid = formElements.every(function (formElement) { return formElement.validity.valid; });
         if (isEveryValueFilled && isEveryValueValid) {
             var hour_1 = Number(values.hour24 ||
-                (values.hour12 && values.amPm && convert12to24(values.hour12, values.amPm)) ||
+                (values.hour12 && values.amPm && convert12to24$1(values.hour12, values.amPm)) ||
                 0);
             var minute_1 = Number(values.minute || 0);
             var second_1 = Number(values.second || 0);
@@ -25061,7 +25093,7 @@ function TimeInput(_a) {
                 setAmPm(value);
                 break;
             case 'hour12':
-                setHour(value ? convert12to24(value, amPm || 'am').toString() : '');
+                setHour(value ? convert12to24$1(value, amPm || 'am').toString() : '');
                 break;
             case 'hour24':
                 setHour(value);
@@ -25102,7 +25134,7 @@ function TimeInput(_a) {
             throw new Error("Unsupported token: ".concat(currentMatch));
         }
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (React__default["default"].createElement(Hour12Input, __assign$1({ key: "hour12" }, commonInputProps, { amPm: amPm, ariaLabel: hourAriaLabel, 
+        return (React__default["default"].createElement(Hour12Input$1, __assign$7({ key: "hour12" }, commonInputProps, { amPm: amPm, ariaLabel: hourAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus: index === 0 && autoFocus, inputRef: hour12Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
     }
@@ -25111,7 +25143,7 @@ function TimeInput(_a) {
             throw new Error("Unsupported token: ".concat(currentMatch));
         }
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (React__default["default"].createElement(Hour24Input, __assign$1({ key: "hour24" }, commonInputProps, { ariaLabel: hourAriaLabel, 
+        return (React__default["default"].createElement(Hour24Input$1, __assign$7({ key: "hour24" }, commonInputProps, { ariaLabel: hourAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus: index === 0 && autoFocus, inputRef: hour24Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
     }
@@ -25126,7 +25158,7 @@ function TimeInput(_a) {
             throw new Error("Unsupported token: ".concat(currentMatch));
         }
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
-        return (React__default["default"].createElement(MinuteInput, __assign$1({ key: "minute" }, commonInputProps, { ariaLabel: minuteAriaLabel, 
+        return (React__default["default"].createElement(MinuteInput$1, __assign$7({ key: "minute" }, commonInputProps, { ariaLabel: minuteAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus: index === 0 && autoFocus, hour: hour, inputRef: minuteInput, placeholder: minutePlaceholder, showLeadingZeros: showLeadingZeros, value: minute })));
     }
@@ -25135,12 +25167,12 @@ function TimeInput(_a) {
             throw new Error("Unsupported token: ".concat(currentMatch));
         }
         var showLeadingZeros = currentMatch ? currentMatch.length === 2 : true;
-        return (React__default["default"].createElement(SecondInput, __assign$1({ key: "second" }, commonInputProps, { ariaLabel: secondAriaLabel, 
+        return (React__default["default"].createElement(SecondInput$1, __assign$7({ key: "second" }, commonInputProps, { ariaLabel: secondAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus: index === 0 && autoFocus, hour: hour, inputRef: secondInput, minute: minute, placeholder: secondPlaceholder, showLeadingZeros: showLeadingZeros, value: second })));
     }
     function renderAmPm(currentMatch, index) {
-        return (React__default["default"].createElement(AmPm, __assign$1({ key: "ampm" }, commonInputProps, { ariaLabel: amPmAriaLabel, 
+        return (React__default["default"].createElement(AmPm$1, __assign$7({ key: "ampm" }, commonInputProps, { ariaLabel: amPmAriaLabel, 
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus: index === 0 && autoFocus, inputRef: amPmInput, locale: locale, onChange: onChange, value: amPm })));
     }
@@ -25153,10 +25185,10 @@ function TimeInput(_a) {
             a: renderAmPm,
         };
         var allowMultipleInstances = typeof format !== 'undefined';
-        return renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances);
+        return renderCustomInputs$1(placeholder, elementFunctions, allowMultipleInstances);
     }
     function renderNativeInput() {
-        return (React__default["default"].createElement(NativeInput, { key: "time", ariaLabel: nativeInputAriaLabel, disabled: disabled, maxTime: maxTime, minTime: minTime, name: name, onChange: onChangeNative, required: required, value: value, valueType: valueType }));
+        return (React__default["default"].createElement(NativeInput$1, { key: "time", ariaLabel: nativeInputAriaLabel, disabled: disabled, maxTime: maxTime, minTime: minTime, name: name, onChange: onChangeNative, required: required, value: value, valueType: valueType }));
     }
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -25165,41 +25197,23 @@ function TimeInput(_a) {
         renderCustomInputsInternal()));
 }
 
-var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var allViews$1 = ['hour', 'minute', 'second'];
-var allValueTypes = __spreadArray([], allViews$1, true);
-var hourOptionalSecondsRegExp = /^(([0-1])?[0-9]|2[0-3]):[0-5][0-9](:([0-5][0-9]))?$/;
-var isTime = function isTime(props, propName, componentName) {
+var hourOptionalSecondsRegExp$1 = /^(([0-1])?[0-9]|2[0-3]):[0-5][0-9](:([0-5][0-9]))?$/;
+var isTime$1 = function isTime(props, propName, componentName) {
     var _a = props, _b = propName, time = _a[_b];
     if (time) {
-        if (typeof time !== 'string' || !hourOptionalSecondsRegExp.test(time)) {
+        if (typeof time !== 'string' || !hourOptionalSecondsRegExp$1.test(time)) {
             return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof time, "` supplied to `").concat(componentName, "`, expected time in HH:mm(:ss) format."));
         }
     }
     // Everything is fine
     return null;
 };
-propTypes$1.exports.oneOf(allValueTypes);
-propTypes$1.exports.oneOfType([
-    propTypes$1.exports.func,
-    propTypes$1.exports.exact({
-        current: propTypes$1.exports.any,
-    }),
-]);
-var rangeOf = function (type) {
+var rangeOf$1 = function (type) {
     return propTypes$1.exports.arrayOf(type);
 };
 
-var __assign = (undefined && undefined.__assign) || function () {
-    __assign = Object.assign || function(t) {
+var __assign$6 = (undefined && undefined.__assign) || function () {
+    __assign$6 = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -25207,9 +25221,9 @@ var __assign = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign.apply(this, arguments);
+    return __assign$6.apply(this, arguments);
 };
-var __rest = (undefined && undefined.__rest) || function (s, e) {
+var __rest$5 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -25220,11 +25234,11 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-var isBrowser$4 = typeof document !== 'undefined';
-var baseClassName = 'react-time-picker';
-var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
-var allViews = ['hour', 'minute', 'second'];
-var iconProps = {
+var isBrowser$6 = typeof document !== 'undefined';
+var baseClassName$1 = 'react-timerange-picker';
+var outsideActionEvents$1 = ['mousedown', 'focusin', 'touchstart'];
+var allViews$3 = ['hour', 'minute', 'second'];
+var iconProps$1 = {
     xmlns: 'http://www.w3.org/2000/svg',
     width: 19,
     height: 19,
@@ -25232,15 +25246,15 @@ var iconProps = {
     stroke: 'black',
     strokeWidth: 2,
 };
-var ClockIcon = (React__default["default"].createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clock-button__icon ").concat(baseClassName, "__button__icon"), fill: "none" }),
+var ClockIcon$1 = (React__default["default"].createElement("svg", __assign$6({}, iconProps$1, { className: "".concat(baseClassName$1, "__clock-button__icon ").concat(baseClassName$1, "__button__icon"), fill: "none" }),
     React__default["default"].createElement("circle", { cx: "9.5", cy: "9.5", r: "7.5" }),
     React__default["default"].createElement("path", { d: "M9.5 4.5 v5 h4" })));
-var ClearIcon = (React__default["default"].createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon") }),
+var ClearIcon$1 = (React__default["default"].createElement("svg", __assign$6({}, iconProps$1, { className: "".concat(baseClassName$1, "__clear-button__icon ").concat(baseClassName$1, "__button__icon") }),
     React__default["default"].createElement("line", { x1: "4", x2: "15", y1: "4", y2: "15" }),
     React__default["default"].createElement("line", { x1: "15", x2: "4", y1: "4", y2: "15" })));
-var TimePicker$1 = function TimePicker(props) {
-    var amPmAriaLabel = props.amPmAriaLabel, autoFocus = props.autoFocus, className = props.className, clearAriaLabel = props.clearAriaLabel, _a = props.clearIcon, clearIcon = _a === void 0 ? ClearIcon : _a, clockAriaLabel = props.clockAriaLabel, _b = props.clockIcon, clockIcon = _b === void 0 ? ClockIcon : _b, _c = props.closeClock, shouldCloseClockOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], hourAriaLabel = props.hourAriaLabel, hourPlaceholder = props.hourPlaceholder, disableClock = props.disableClock, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxTime = props.maxTime, _e = props.maxDetail, maxDetail = _e === void 0 ? 'minute' : _e, minTime = props.minTime, minuteAriaLabel = props.minuteAriaLabel, minutePlaceholder = props.minutePlaceholder, _f = props.name, name = _f === void 0 ? 'time' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onClockClose = props.onClockClose, onClockOpen = props.onClockOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, onInvalidChange = props.onInvalidChange, _g = props.openClockOnFocus, openClockOnFocus = _g === void 0 ? true : _g, required = props.required, value = props.value, secondAriaLabel = props.secondAriaLabel, secondPlaceholder = props.secondPlaceholder, shouldCloseClock = props.shouldCloseClock, shouldOpenClock = props.shouldOpenClock, otherProps = __rest(props, ["amPmAriaLabel", "autoFocus", "className", "clearAriaLabel", "clearIcon", "clockAriaLabel", "clockIcon", "closeClock", 'data-testid', "hourAriaLabel", "hourPlaceholder", "disableClock", "disabled", "format", "id", "isOpen", "locale", "maxTime", "maxDetail", "minTime", "minuteAriaLabel", "minutePlaceholder", "name", "nativeInputAriaLabel", "onClockClose", "onClockOpen", "onChange", "onFocus", "onInvalidChange", "openClockOnFocus", "required", "value", "secondAriaLabel", "secondPlaceholder", "shouldCloseClock", "shouldOpenClock"]);
-    var _h = React$3.useState(isOpenProps), isOpen = _h[0], setIsOpen = _h[1];
+var TimeRangePicker = function TimeRangePicker(props) {
+    var amPmAriaLabel = props.amPmAriaLabel, autoFocus = props.autoFocus, className = props.className, clearAriaLabel = props.clearAriaLabel, _a = props.clearIcon, clearIcon = _a === void 0 ? ClearIcon$1 : _a, clockAriaLabel = props.clockAriaLabel, _b = props.clockIcon, clockIcon = _b === void 0 ? ClockIcon$1 : _b, _c = props.closeClock, shouldCloseClockOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], disableClock = props.disableClock, disabled = props.disabled, format = props.format, hourAriaLabel = props.hourAriaLabel, hourPlaceholder = props.hourPlaceholder, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, _e = props.maxDetail, maxDetail = _e === void 0 ? 'minute' : _e, maxTime = props.maxTime, minTime = props.minTime, minuteAriaLabel = props.minuteAriaLabel, minutePlaceholder = props.minutePlaceholder, _f = props.name, name = _f === void 0 ? 'timerange' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onChangeProps = props.onChange, onClockClose = props.onClockClose, onClockOpen = props.onClockOpen, onFocusProps = props.onFocus, onInvalidChange = props.onInvalidChange, _g = props.openClockOnFocus, openClockOnFocus = _g === void 0 ? true : _g, _h = props.rangeDivider, rangeDivider = _h === void 0 ? '–' : _h, required = props.required, secondAriaLabel = props.secondAriaLabel, secondPlaceholder = props.secondPlaceholder, shouldCloseClock = props.shouldCloseClock, shouldOpenClock = props.shouldOpenClock, value = props.value, otherProps = __rest$5(props, ["amPmAriaLabel", "autoFocus", "className", "clearAriaLabel", "clearIcon", "clockAriaLabel", "clockIcon", "closeClock", 'data-testid', "disableClock", "disabled", "format", "hourAriaLabel", "hourPlaceholder", "id", "isOpen", "locale", "maxDetail", "maxTime", "minTime", "minuteAriaLabel", "minutePlaceholder", "name", "nativeInputAriaLabel", "onChange", "onClockClose", "onClockOpen", "onFocus", "onInvalidChange", "openClockOnFocus", "rangeDivider", "required", "secondAriaLabel", "secondPlaceholder", "shouldCloseClock", "shouldOpenClock", "value"]);
+    var _j = React$3.useState(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
     var wrapper = React$3.useRef(null);
     var clockWrapper = React$3.useRef(null);
     React$3.useEffect(function () {
@@ -25287,6 +25301,14 @@ var TimePicker$1 = function TimePicker(props) {
             onChangeProps(value);
         }
     }
+    function onChangeFrom(valueFrom, closeClock) {
+        var _a = Array.isArray(value) ? value : [value], valueTo = _a[1];
+        onChange([valueFrom, valueTo || null], closeClock);
+    }
+    function onChangeTo(valueTo, closeClock) {
+        var valueFrom = (Array.isArray(value) ? value : [value])[0];
+        onChange([valueFrom || null, valueTo], closeClock);
+    }
     function onFocus(event) {
         if (onFocusProps) {
             onFocusProps(event);
@@ -25326,7 +25348,7 @@ var TimePicker$1 = function TimePicker(props) {
     }, [clockWrapper, closeClock, wrapper]);
     var handleOutsideActionListeners = React$3.useCallback(function (shouldListen) {
         if (shouldListen === void 0) { shouldListen = isOpen; }
-        outsideActionEvents.forEach(function (event) {
+        outsideActionEvents$1.forEach(function (event) {
             if (shouldListen) {
                 document.addEventListener(event, onOutsideAction);
             }
@@ -25346,9 +25368,9 @@ var TimePicker$1 = function TimePicker(props) {
         return function () {
             handleOutsideActionListeners(false);
         };
-    }, [handleOutsideActionListeners]);
+    }, [handleOutsideActionListeners, isOpen]);
     function renderInputs() {
-        var valueFrom = (Array.isArray(value) ? value : [value])[0];
+        var _a = Array.isArray(value) ? value : [value], valueFrom = _a[0], valueTo = _a[1];
         var ariaLabelProps = {
             amPmAriaLabel: amPmAriaLabel,
             hourAriaLabel: hourAriaLabel,
@@ -25361,12 +25383,15 @@ var TimePicker$1 = function TimePicker(props) {
             minutePlaceholder: minutePlaceholder,
             secondPlaceholder: secondPlaceholder,
         };
-        return (React__default["default"].createElement("div", { className: "".concat(baseClassName, "__wrapper") },
-            React__default["default"].createElement(TimeInput, __assign({}, ariaLabelProps, placeholderProps, { 
+        var commonProps = __assign$6(__assign$6(__assign$6({}, ariaLabelProps), placeholderProps), { className: "".concat(baseClassName$1, "__inputGroup"), disabled: disabled, format: format, isClockOpen: isOpen, locale: locale, maxDetail: maxDetail, maxTime: maxTime, minTime: minTime, onInvalidChange: onInvalidChange, required: required });
+        return (React__default["default"].createElement("div", { className: "".concat(baseClassName$1, "__wrapper") },
+            React__default["default"].createElement(TimeInput$1, __assign$6({}, commonProps, { 
                 // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isClockOpen: isOpen, locale: locale, maxDetail: maxDetail, maxTime: maxTime, minTime: minTime, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, value: valueFrom })),
-            clearIcon !== null && (React__default["default"].createElement("button", { "aria-label": clearAriaLabel, className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: clear, onFocus: stopPropagation, type: "button" }, typeof clearIcon === 'function' ? React__default["default"].createElement(clearIcon) : clearIcon)),
-            clockIcon !== null && !disableClock && (React__default["default"].createElement("button", { "aria-label": clockAriaLabel, className: "".concat(baseClassName, "__clock-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: toggleClock, onFocus: stopPropagation, type: "button" }, typeof clockIcon === 'function' ? React__default["default"].createElement(clockIcon) : clockIcon))));
+                autoFocus: autoFocus, name: "".concat(name, "_from"), onChange: onChangeFrom, value: valueFrom })),
+            React__default["default"].createElement("span", { className: "".concat(baseClassName$1, "__range-divider") }, rangeDivider),
+            React__default["default"].createElement(TimeInput$1, __assign$6({}, commonProps, { name: "".concat(name, "_to"), onChange: onChangeTo, value: valueTo })),
+            clearIcon !== null && (React__default["default"].createElement("button", { "aria-label": clearAriaLabel, className: "".concat(baseClassName$1, "__clear-button ").concat(baseClassName$1, "__button"), disabled: disabled, onClick: clear, onFocus: stopPropagation, type: "button" }, typeof clearIcon === 'function' ? React__default["default"].createElement(clearIcon) : clearIcon)),
+            clockIcon !== null && !disableClock && (React__default["default"].createElement("button", { "aria-label": clockAriaLabel, className: "".concat(baseClassName$1, "__clock-button ").concat(baseClassName$1, "__button"), disabled: disabled, onClick: toggleClock, onFocus: stopPropagation, type: "button" }, typeof clockIcon === 'function' ? React__default["default"].createElement(clockIcon) : clockIcon))));
     }
     function renderClock() {
         if (isOpen === null || disableClock) {
@@ -25374,11 +25399,11 @@ var TimePicker$1 = function TimePicker(props) {
         }
         var clockClassName = props.clockClassName; props.className; // Unused, here to exclude it from clockProps
         props.onChange; // Unused, here to exclude it from clockProps
-        var portalContainer = props.portalContainer, value = props.value, clockProps = __rest(props, ["clockClassName", "className", "onChange", "portalContainer", "value"]);
-        var className = "".concat(baseClassName, "__clock");
-        var classNames = clsx$2(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'));
+        var portalContainer = props.portalContainer, value = props.value, clockProps = __rest$5(props, ["clockClassName", "className", "onChange", "portalContainer", "value"]);
+        var className = "".concat(baseClassName$1, "__clock");
+        var classNames = clsx$1(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'));
         var valueFrom = (Array.isArray(value) ? value : [value])[0];
-        var clock = React__default["default"].createElement(Clock, __assign({ className: clockClassName, value: valueFrom }, clockProps));
+        var clock = React__default["default"].createElement(Clock, __assign$6({ className: clockClassName, value: valueFrom }, clockProps));
         return portalContainer ? (ReactDOM.createPortal(React__default["default"].createElement("div", { ref: clockWrapper, className: classNames }, clock), portalContainer)) : (React__default["default"].createElement(Fit, null,
             React__default["default"].createElement("div", { ref: function (ref) {
                     if (ref && !isOpen) {
@@ -25387,13 +25412,13 @@ var TimePicker$1 = function TimePicker(props) {
                 }, className: classNames }, clock)));
     }
     var eventProps = React$3.useMemo(function () { return makeEventProps(otherProps); }, [otherProps]);
-    return (React__default["default"].createElement("div", __assign({ className: clsx$2(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper }),
+    return (React__default["default"].createElement("div", __assign$6({ className: clsx$1(baseClassName$1, "".concat(baseClassName$1, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName$1, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper }),
         renderInputs(),
         renderClock()));
 };
-var isValue = propTypes$1.exports.oneOfType([isTime, propTypes$1.exports.instanceOf(Date)]);
-var isValueOrValueArray = propTypes$1.exports.oneOfType([isValue, rangeOf(isValue)]);
-TimePicker$1.propTypes = {
+var isValue$1 = propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.instanceOf(Date)]);
+var isValueOrValueArray$1 = propTypes$1.exports.oneOfType([isValue$1, rangeOf$1(isValue$1)]);
+TimeRangePicker.propTypes = {
     amPmAriaLabel: propTypes$1.exports.string,
     autoFocus: propTypes$1.exports.bool,
     className: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.arrayOf(propTypes$1.exports.string)]),
@@ -25412,9 +25437,9 @@ TimePicker$1.propTypes = {
     id: propTypes$1.exports.string,
     isOpen: propTypes$1.exports.bool,
     locale: propTypes$1.exports.string,
-    maxDetail: propTypes$1.exports.oneOf(allViews),
-    maxTime: isTime,
-    minTime: isTime,
+    maxDetail: propTypes$1.exports.oneOf(allViews$3),
+    maxTime: isTime$1,
+    minTime: isTime$1,
     minuteAriaLabel: propTypes$1.exports.string,
     minutePlaceholder: propTypes$1.exports.string,
     name: propTypes$1.exports.string,
@@ -25424,28 +25449,1055 @@ TimePicker$1.propTypes = {
     onClockOpen: propTypes$1.exports.func,
     onFocus: propTypes$1.exports.func,
     openClockOnFocus: propTypes$1.exports.bool,
+    rangeDivider: propTypes$1.exports.node,
     required: propTypes$1.exports.bool,
     secondAriaLabel: propTypes$1.exports.string,
     secondPlaceholder: propTypes$1.exports.string,
-    value: isValueOrValueArray,
+    value: isValueOrValueArray$1,
 };
-if (isBrowser$4) {
-    TimePicker$1.propTypes.portalContainer = propTypes$1.exports.instanceOf(HTMLElement);
+if (isBrowser$6) {
+    TimeRangePicker.propTypes.portalContainer = propTypes$1.exports.instanceOf(HTMLElement);
 }
 
-var HoverIcon = function HoverIcon(_ref) {
-  var _ref$time = _ref.time,
-    time = _ref$time === void 0 ? false : _ref$time;
-  var _useState = React$3.useState(false),
-    _useState2 = _slicedToArray$3(_useState, 2),
-    hovered = _useState2[0],
-    setHovered = _useState2[1];
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    onMouseLeave: function onMouseLeave() {
-      return setHovered(false);
-    },
-    onMouseOver: function onMouseOver() {
-      return setHovered(true);
+function Divider(_a) {
+    var children = _a.children;
+    return React__default["default"].createElement("span", { className: "react-time-picker__inputGroup__divider" }, children);
+}
+
+var isBrowser$5 = typeof document !== 'undefined';
+var useIsomorphicLayoutEffect = isBrowser$5 ? React$3.useLayoutEffect : React$3.useEffect;
+var isIEOrEdgeLegacy = isBrowser$5 && /(MSIE|Trident\/|Edge\/)/.test(navigator.userAgent);
+var isFirefox = isBrowser$5 && /Firefox/.test(navigator.userAgent);
+function onFocus(event) {
+    var target = event.target;
+    if (isIEOrEdgeLegacy) {
+        requestAnimationFrame(function () { return target.select(); });
+    }
+    else {
+        target.select();
+    }
+}
+function updateInputWidthOnLoad(element) {
+    if (document.readyState === 'complete') {
+        return;
+    }
+    function onLoad() {
+        updateInputWidth(element);
+    }
+    window.addEventListener('load', onLoad);
+}
+function updateInputWidthOnFontLoad(element) {
+    if (!document.fonts) {
+        return;
+    }
+    var font = getFontShorthand(element);
+    if (!font) {
+        return;
+    }
+    var isFontLoaded = document.fonts.check(font);
+    if (isFontLoaded) {
+        return;
+    }
+    function onLoadingDone() {
+        updateInputWidth(element);
+    }
+    document.fonts.addEventListener('loadingdone', onLoadingDone);
+}
+function getSelectionString(input) {
+    /**
+     * window.getSelection().toString() returns empty string in IE11 and Firefox,
+     * so alternatives come first.
+     */
+    if (input &&
+        'selectionStart' in input &&
+        input.selectionStart !== null &&
+        'selectionEnd' in input &&
+        input.selectionEnd !== null) {
+        return input.value.slice(input.selectionStart, input.selectionEnd);
+    }
+    if ('getSelection' in window) {
+        var selection = window.getSelection();
+        return selection && selection.toString();
+    }
+    return null;
+}
+function makeOnKeyPress(maxLength) {
+    if (maxLength === null) {
+        return undefined;
+    }
+    /**
+     * Prevents keystrokes that would not produce a number or when value after keystroke would
+     * exceed maxLength.
+     */
+    return function onKeyPress(event) {
+        if (isFirefox) {
+            // See https://github.com/wojtekmaj/react-time-picker/issues/92
+            return;
+        }
+        var key = event.key, input = event.target;
+        var value = input.value;
+        var isNumberKey = key.length === 1 && /\d/.test(key);
+        var selection = getSelectionString(input);
+        if (!isNumberKey || !(selection || value.length < maxLength)) {
+            event.preventDefault();
+        }
+    };
+}
+function Input$3(_a) {
+    var ariaLabel = _a.ariaLabel, autoFocus = _a.autoFocus, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, max = _a.max, min = _a.min, name = _a.name, nameForClass = _a.nameForClass, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, _b = _a.placeholder, placeholder = _b === void 0 ? '--' : _b, required = _a.required, showLeadingZeros = _a.showLeadingZeros, step = _a.step, value = _a.value;
+    useIsomorphicLayoutEffect(function () {
+        if (!inputRef || !inputRef.current) {
+            return;
+        }
+        updateInputWidth(inputRef.current);
+        updateInputWidthOnLoad(inputRef.current);
+        updateInputWidthOnFontLoad(inputRef.current);
+    }, [inputRef, value]);
+    var hasLeadingZero = showLeadingZeros &&
+        value &&
+        Number(value) < 10 &&
+        (value === '0' || !value.toString().startsWith('0'));
+    var maxLength = max ? max.toString().length : null;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        hasLeadingZero ? React__default["default"].createElement("span", { className: "".concat(className, "__leadingZero") }, "0") : null,
+        React__default["default"].createElement("input", { "aria-label": ariaLabel, autoComplete: "off", autoFocus: autoFocus, className: clsx$1("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, min: min, name: name, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyPress: makeOnKeyPress(maxLength), onKeyUp: function (event) {
+                updateInputWidth(event.target);
+                if (onKeyUp) {
+                    onKeyUp(event);
+                }
+            }, placeholder: placeholder, ref: inputRef, required: required, step: step, type: "number", value: value !== null ? value : '' })));
+}
+
+function convert12to24(hour12, amPm) {
+    var hour24 = Number(hour12);
+    if (amPm === 'am' && hour24 === 12) {
+        hour24 = 0;
+    }
+    else if (amPm === 'pm' && hour24 < 12) {
+        hour24 += 12;
+    }
+    return hour24;
+}
+function convert24to12(hour24) {
+    var hour12 = Number(hour24) % 12 || 12;
+    return [hour12, Number(hour24) < 12 ? 'am' : 'pm'];
+}
+
+var formatterCache = new Map();
+function getFormatter(options) {
+    return function formatter(locale, date) {
+        var localeWithDefault = locale || getUserLocale();
+        if (!formatterCache.has(localeWithDefault)) {
+            formatterCache.set(localeWithDefault, new Map());
+        }
+        var formatterCacheLocale = formatterCache.get(localeWithDefault);
+        if (!formatterCacheLocale.has(options)) {
+            formatterCacheLocale.set(options, new Intl.DateTimeFormat(localeWithDefault || undefined, options).format);
+        }
+        return formatterCacheLocale.get(options)(date);
+    };
+}
+var numberFormatterCache = new Map();
+function getNumberFormatter(options) {
+    return function (locale, number) {
+        var localeWithDefault = locale || getUserLocale();
+        if (!numberFormatterCache.has(localeWithDefault)) {
+            numberFormatterCache.set(localeWithDefault, new Map());
+        }
+        var numberFormatterCacheLocale = numberFormatterCache.get(localeWithDefault);
+        if (!numberFormatterCacheLocale.has(options)) {
+            numberFormatterCacheLocale.set(options, new Intl.NumberFormat(localeWithDefault || undefined, options).format);
+        }
+        return numberFormatterCacheLocale.get(options)(number);
+    };
+}
+
+var nines = ['9', '٩'];
+var ninesRegExp = new RegExp("[".concat(nines.join(''), "]"));
+var amPmFormatter = getFormatter({ hour: 'numeric' });
+function getAmPmLabels(locale) {
+    var amString = amPmFormatter(locale, new Date(2017, 0, 1, 9));
+    var pmString = amPmFormatter(locale, new Date(2017, 0, 1, 21));
+    var _a = amString.split(ninesRegExp), am1 = _a[0], am2 = _a[1];
+    var _b = pmString.split(ninesRegExp), pm1 = _b[0], pm2 = _b[1];
+    if (pm2 !== undefined) {
+        // If pm2 is undefined, nine was not found in pmString - this locale is not using 12-hour time
+        if (am1 !== pm1) {
+            return [am1, pm1].map(function (el) { return el.trim(); });
+        }
+        if (am2 !== pm2) {
+            return [am2, pm2].map(function (el) { return el.trim(); });
+        }
+    }
+    // Fallback
+    return ['AM', 'PM'];
+}
+function isValidNumber(num) {
+    return num !== null && num !== false && !Number.isNaN(Number(num));
+}
+function safeMin() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return Math.min.apply(Math, args.filter(isValidNumber));
+}
+function safeMax() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return Math.max.apply(Math, args.filter(isValidNumber));
+}
+
+var __assign$5 = (undefined && undefined.__assign) || function () {
+    __assign$5 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$5.apply(this, arguments);
+};
+var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function Hour12Input(_a) {
+    var amPm = _a.amPm, maxTime = _a.maxTime, minTime = _a.minTime, value = _a.value, otherProps = __rest$4(_a, ["amPm", "maxTime", "minTime", "value"]);
+    var maxHour = safeMin(12, maxTime &&
+        (function () {
+            var _a = convert24to12(getHours(maxTime)), maxHourResult = _a[0], maxAmPm = _a[1];
+            if (maxAmPm !== amPm) {
+                // pm is always after am, so we should ignore validation
+                return null;
+            }
+            return maxHourResult;
+        })());
+    var minHour = safeMax(1, minTime &&
+        (function () {
+            var _a = convert24to12(getHours(minTime)), minHourResult = _a[0], minAmPm = _a[1];
+            if (
+            // pm is always after am, so we should ignore validation
+            minAmPm !== amPm ||
+                // If minHour is 12 am/pm, user should be able to enter 12, 1, ..., 11.
+                minHourResult === 12) {
+                return null;
+            }
+            return minHourResult;
+        })());
+    var value12 = value ? convert24to12(value)[0].toString() : '';
+    return (React__default["default"].createElement(Input$3, __assign$5({ max: maxHour, min: minHour, name: "hour12", nameForClass: "hour", value: value12 }, otherProps)));
+}
+
+var __assign$4 = (undefined && undefined.__assign) || function () {
+    __assign$4 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$4.apply(this, arguments);
+};
+var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function Hour24Input(_a) {
+    var maxTime = _a.maxTime, minTime = _a.minTime, otherProps = __rest$3(_a, ["maxTime", "minTime"]);
+    var maxHour = safeMin(23, maxTime && getHours(maxTime));
+    var minHour = safeMax(0, minTime && getHours(minTime));
+    return React__default["default"].createElement(Input$3, __assign$4({ max: maxHour, min: minHour, name: "hour24", nameForClass: "hour" }, otherProps));
+}
+
+var __assign$3 = (undefined && undefined.__assign) || function () {
+    __assign$3 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$3.apply(this, arguments);
+};
+var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function MinuteInput(_a) {
+    var hour = _a.hour, maxTime = _a.maxTime, minTime = _a.minTime, _b = _a.showLeadingZeros, showLeadingZeros = _b === void 0 ? true : _b, otherProps = __rest$2(_a, ["hour", "maxTime", "minTime", "showLeadingZeros"]);
+    function isSameHour(date) {
+        return hour === getHours(date).toString();
+    }
+    var maxMinute = safeMin(59, maxTime && isSameHour(maxTime) && getMinutes(maxTime));
+    var minMinute = safeMax(0, minTime && isSameHour(minTime) && getMinutes(minTime));
+    return (React__default["default"].createElement(Input$3, __assign$3({ max: maxMinute, min: minMinute, name: "minute", showLeadingZeros: showLeadingZeros }, otherProps)));
+}
+
+var __assign$2 = (undefined && undefined.__assign) || function () {
+    __assign$2 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$2.apply(this, arguments);
+};
+var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function SecondInput(_a) {
+    var hour = _a.hour, maxTime = _a.maxTime, minTime = _a.minTime, minute = _a.minute, _b = _a.showLeadingZeros, showLeadingZeros = _b === void 0 ? true : _b, otherProps = __rest$1(_a, ["hour", "maxTime", "minTime", "minute", "showLeadingZeros"]);
+    function isSameMinute(date) {
+        return hour === getHours(date).toString() && minute === getMinutes(date).toString();
+    }
+    var maxSecond = safeMin(59, maxTime && isSameMinute(maxTime) && getSeconds(maxTime));
+    var minSecond = safeMax(0, minTime && isSameMinute(minTime) && getSeconds(minTime));
+    return (React__default["default"].createElement(Input$3, __assign$2({ max: maxSecond, min: minSecond, name: "second", showLeadingZeros: showLeadingZeros }, otherProps)));
+}
+
+function NativeInput(_a) {
+    var ariaLabel = _a.ariaLabel, disabled = _a.disabled, maxTime = _a.maxTime, minTime = _a.minTime, name = _a.name, onChange = _a.onChange, required = _a.required, value = _a.value, valueType = _a.valueType;
+    var nativeValueParser = (function () {
+        switch (valueType) {
+            case 'hour':
+                return function (receivedValue) { return "".concat(getHours(receivedValue), ":00"); };
+            case 'minute':
+                return getHoursMinutes;
+            case 'second':
+                return getHoursMinutesSeconds;
+            default:
+                throw new Error('Invalid valueType');
+        }
+    })();
+    var step = (function () {
+        switch (valueType) {
+            case 'hour':
+                return 3600;
+            case 'minute':
+                return 60;
+            case 'second':
+                return 1;
+            default:
+                throw new Error('Invalid valueType');
+        }
+    })();
+    function stopPropagation(event) {
+        event.stopPropagation();
+    }
+    return (React__default["default"].createElement("input", { "aria-label": ariaLabel, disabled: disabled, hidden: true, max: maxTime ? nativeValueParser(maxTime) : undefined, min: minTime ? nativeValueParser(minTime) : undefined, name: name, onChange: onChange, onFocus: stopPropagation, required: required, step: step, style: {
+            visibility: 'hidden',
+            position: 'absolute',
+            zIndex: '-999',
+        }, type: "time", value: value ? nativeValueParser(value) : '' }));
+}
+
+function AmPm(_a) {
+    var ariaLabel = _a.ariaLabel, autoFocus = _a.autoFocus, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, locale = _a.locale, maxTime = _a.maxTime, minTime = _a.minTime, onChange = _a.onChange, onKeyDown = _a.onKeyDown, required = _a.required, value = _a.value;
+    var amDisabled = minTime ? convert24to12(getHours(minTime))[1] === 'pm' : false;
+    var pmDisabled = maxTime ? convert24to12(getHours(maxTime))[1] === 'am' : false;
+    var name = 'amPm';
+    var _b = getAmPmLabels(locale), amLabel = _b[0], pmLabel = _b[1];
+    return (React__default["default"].createElement("select", { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx$1("".concat(className, "__input"), "".concat(className, "__").concat(name)), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, ref: inputRef, required: required, value: value !== null ? value : '' },
+        !value && React__default["default"].createElement("option", { value: "" }, "--"),
+        React__default["default"].createElement("option", { disabled: amDisabled, value: "am" }, amLabel),
+        React__default["default"].createElement("option", { disabled: pmDisabled, value: "pm" }, pmLabel)));
+}
+
+var __assign$1 = (undefined && undefined.__assign) || function () {
+    __assign$1 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+var __spreadArray$1 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var getFormatterOptionsCache = {};
+var allViews$2 = ['hour', 'minute', 'second'];
+function isInternalInput(element) {
+    return element.dataset.input === 'true';
+}
+function findInput(element, property) {
+    var nextElement = element;
+    do {
+        nextElement = nextElement[property];
+    } while (nextElement && !isInternalInput(nextElement));
+    return nextElement;
+}
+function focus(element) {
+    if (element) {
+        element.focus();
+    }
+}
+function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances) {
+    var usedFunctions = [];
+    var pattern = new RegExp(Object.keys(elementFunctions)
+        .map(function (el) { return "".concat(el, "+"); })
+        .join('|'), 'g');
+    var matches = placeholder.match(pattern);
+    return placeholder.split(pattern).reduce(function (arr, element, index) {
+        var divider = element && (
+        // eslint-disable-next-line react/no-array-index-key
+        React__default["default"].createElement(Divider, { key: "separator_".concat(index) }, element));
+        var res = __spreadArray$1(__spreadArray$1([], arr, true), [divider], false);
+        var currentMatch = matches && matches[index];
+        if (currentMatch) {
+            var renderFunction = elementFunctions[currentMatch] ||
+                elementFunctions[Object.keys(elementFunctions).find(function (elementFunction) {
+                    return currentMatch.match(elementFunction);
+                })];
+            if (!renderFunction) {
+                return res;
+            }
+            if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
+                res.push(currentMatch);
+            }
+            else {
+                res.push(renderFunction(currentMatch, index));
+                usedFunctions.push(renderFunction);
+            }
+        }
+        return res;
+    }, []);
+}
+var formatNumber = getNumberFormatter({ useGrouping: false });
+function TimeInput(_a) {
+    var amPmAriaLabel = _a.amPmAriaLabel, autoFocus = _a.autoFocus, className = _a.className, disabled = _a.disabled, format = _a.format, hourAriaLabel = _a.hourAriaLabel, hourPlaceholder = _a.hourPlaceholder, _b = _a.isClockOpen, isClockOpenProps = _b === void 0 ? null : _b, locale = _a.locale, _c = _a.maxDetail, maxDetail = _c === void 0 ? 'minute' : _c, maxTime = _a.maxTime, minTime = _a.minTime, minuteAriaLabel = _a.minuteAriaLabel, minutePlaceholder = _a.minutePlaceholder, _d = _a.name, name = _d === void 0 ? 'time' : _d, nativeInputAriaLabel = _a.nativeInputAriaLabel, onChangeProps = _a.onChange, onInvalidChange = _a.onInvalidChange, required = _a.required, secondAriaLabel = _a.secondAriaLabel, secondPlaceholder = _a.secondPlaceholder, valueProps = _a.value;
+    var _e = React$3.useState(null), amPm = _e[0], setAmPm = _e[1];
+    var _f = React$3.useState(null), hour = _f[0], setHour = _f[1];
+    var _g = React$3.useState(null), minute = _g[0], setMinute = _g[1];
+    var _h = React$3.useState(null), second = _h[0], setSecond = _h[1];
+    var _j = React$3.useState(null), value = _j[0], setValue = _j[1];
+    var amPmInput = React$3.useRef(null);
+    var hour12Input = React$3.useRef(null);
+    var hour24Input = React$3.useRef(null);
+    var minuteInput = React$3.useRef(null);
+    var secondInput = React$3.useRef(null);
+    var _k = React$3.useState(isClockOpenProps), isClockOpen = _k[0], setIsClockOpen = _k[1];
+    var lastPressedKey = React$3.useRef();
+    React$3.useEffect(function () {
+        setIsClockOpen(isClockOpenProps);
+    }, [isClockOpenProps]);
+    React$3.useEffect(function () {
+        var nextValue = valueProps;
+        if (nextValue) {
+            setAmPm(convert24to12(getHours(nextValue))[1]);
+            setHour(getHours(nextValue).toString());
+            setMinute(getMinutes(nextValue).toString());
+            setSecond(getSeconds(nextValue).toString());
+            setValue(nextValue);
+        }
+        else {
+            setAmPm(null);
+            setHour(null);
+            setMinute(null);
+            setSecond(null);
+            setValue(null);
+        }
+    }, [
+        valueProps,
+        minTime,
+        maxTime,
+        maxDetail,
+        // Toggling clock visibility resets values
+        isClockOpen,
+    ]);
+    var valueType = maxDetail;
+    var formatTime = (function () {
+        var level = allViews$2.indexOf(maxDetail);
+        var formatterOptions = getFormatterOptionsCache[level] ||
+            (function () {
+                var options = { hour: 'numeric' };
+                if (level >= 1) {
+                    options.minute = 'numeric';
+                }
+                if (level >= 2) {
+                    options.second = 'numeric';
+                }
+                getFormatterOptionsCache[level] = options;
+                return options;
+            })();
+        return getFormatter(formatterOptions);
+    })();
+    /**
+     * Gets current value in a desired format.
+     */
+    function getProcessedValue(value) {
+        var processFunction = (function () {
+            switch (valueType) {
+                case 'hour':
+                case 'minute':
+                    return getHoursMinutes;
+                case 'second':
+                    return getHoursMinutesSeconds;
+                default:
+                    throw new Error('Invalid valueType');
+            }
+        })();
+        return processFunction(value);
+    }
+    var placeholder = format ||
+        (function () {
+            var hour24 = 21;
+            var hour12 = 9;
+            var minute = 13;
+            var second = 14;
+            var date = new Date(2017, 0, 1, hour24, minute, second);
+            return formatTime(locale, date)
+                .replace(formatNumber(locale, hour12), 'h')
+                .replace(formatNumber(locale, hour24), 'H')
+                .replace(formatNumber(locale, minute), 'mm')
+                .replace(formatNumber(locale, second), 'ss')
+                .replace(new RegExp(getAmPmLabels(locale).join('|')), 'a');
+        })();
+    var divider = (function () {
+        var dividers = placeholder.match(/[^0-9a-z]/i);
+        return dividers ? dividers[0] : null;
+    })();
+    function onClick(event) {
+        if (event.target === event.currentTarget) {
+            // Wrapper was directly clicked
+            var firstInput = event.target.children[1];
+            focus(firstInput);
+        }
+    }
+    function onKeyDown(event) {
+        lastPressedKey.current = event.key;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case divider: {
+                event.preventDefault();
+                var input = event.target;
+                var property = event.key === 'ArrowLeft' ? 'previousElementSibling' : 'nextElementSibling';
+                var nextInput = findInput(input, property);
+                focus(nextInput);
+                break;
+            }
+        }
+    }
+    function onKeyUp(event) {
+        var key = event.key, input = event.target;
+        var isLastPressedKey = lastPressedKey.current === key;
+        if (!isLastPressedKey) {
+            return;
+        }
+        var isNumberKey = !isNaN(Number(key));
+        if (!isNumberKey) {
+            return;
+        }
+        var max = input.getAttribute('max');
+        if (!max) {
+            return;
+        }
+        var value = input.value;
+        /**
+         * Given 1, the smallest possible number the user could type by adding another digit is 10.
+         * 10 would be a valid value given max = 12, so we won't jump to the next input.
+         * However, given 2, smallers possible number would be 20, and thus keeping the focus in
+         * this field doesn't make sense.
+         */
+        if (Number(value) * 10 > Number(max) || value.length >= max.length) {
+            var property = 'nextElementSibling';
+            var nextInput = findInput(input, property);
+            focus(nextInput);
+        }
+    }
+    /**
+     * Called after internal onChange. Checks input validity. If all fields are valid,
+     * calls props.onChange.
+     */
+    function onChangeExternal() {
+        if (!onChangeProps) {
+            return;
+        }
+        function filterBoolean(value) {
+            return Boolean(value);
+        }
+        var formElements = [
+            amPmInput.current,
+            hour12Input.current,
+            hour24Input.current,
+            minuteInput.current,
+            secondInput.current,
+        ].filter(filterBoolean);
+        var formElementsWithoutSelect = formElements.slice(1);
+        var values = {};
+        formElements.forEach(function (formElement) {
+            values[formElement.name] =
+                formElement.type === 'number'
+                    ? 'valueAsNumber' in formElement
+                        ? formElement.valueAsNumber
+                        : Number(formElement.value)
+                    : formElement.value;
+        });
+        var isEveryValueEmpty = formElementsWithoutSelect.every(function (formElement) { return !formElement.value; });
+        if (isEveryValueEmpty) {
+            onChangeProps(null, false);
+            return;
+        }
+        var isEveryValueFilled = formElements.every(function (formElement) { return formElement.value; });
+        var isEveryValueValid = formElements.every(function (formElement) { return formElement.validity.valid; });
+        if (isEveryValueFilled && isEveryValueValid) {
+            var hour_1 = Number(values.hour24 ||
+                (values.hour12 && values.amPm && convert12to24(values.hour12, values.amPm)) ||
+                0);
+            var minute_1 = Number(values.minute || 0);
+            var second_1 = Number(values.second || 0);
+            var padStart = function (num) { return "0".concat(num).slice(-2); };
+            var proposedValue = "".concat(padStart(hour_1), ":").concat(padStart(minute_1), ":").concat(padStart(second_1));
+            var processedValue = getProcessedValue(proposedValue);
+            onChangeProps(processedValue, false);
+            return;
+        }
+        if (!onInvalidChange) {
+            return;
+        }
+        onInvalidChange();
+    }
+    /**
+     * Called when non-native date input is changed.
+     */
+    function onChange(event) {
+        var _a = event.target, name = _a.name, value = _a.value;
+        switch (name) {
+            case 'amPm':
+                setAmPm(value);
+                break;
+            case 'hour12':
+                setHour(value ? convert12to24(value, amPm || 'am').toString() : '');
+                break;
+            case 'hour24':
+                setHour(value);
+                break;
+            case 'minute':
+                setMinute(value);
+                break;
+            case 'second':
+                setSecond(value);
+                break;
+        }
+        onChangeExternal();
+    }
+    /**
+     * Called when native date input is changed.
+     */
+    function onChangeNative(event) {
+        var value = event.target.value;
+        if (!onChangeProps) {
+            return;
+        }
+        var processedValue = value || null;
+        onChangeProps(processedValue, false);
+    }
+    var commonInputProps = {
+        className: className,
+        disabled: disabled,
+        maxTime: maxTime,
+        minTime: minTime,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
+        // This is only for showing validity when editing
+        required: Boolean(required || isClockOpen),
+    };
+    function renderHour12(currentMatch, index) {
+        if (currentMatch && currentMatch.length > 2) {
+            throw new Error("Unsupported token: ".concat(currentMatch));
+        }
+        var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
+        return (React__default["default"].createElement(Hour12Input, __assign$1({ key: "hour12" }, commonInputProps, { amPm: amPm, ariaLabel: hourAriaLabel, 
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: index === 0 && autoFocus, inputRef: hour12Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
+    }
+    function renderHour24(currentMatch, index) {
+        if (currentMatch && currentMatch.length > 2) {
+            throw new Error("Unsupported token: ".concat(currentMatch));
+        }
+        var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
+        return (React__default["default"].createElement(Hour24Input, __assign$1({ key: "hour24" }, commonInputProps, { ariaLabel: hourAriaLabel, 
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: index === 0 && autoFocus, inputRef: hour24Input, placeholder: hourPlaceholder, showLeadingZeros: showLeadingZeros, value: hour })));
+    }
+    function renderHour(currentMatch, index) {
+        if (/h/.test(currentMatch)) {
+            return renderHour12(currentMatch, index);
+        }
+        return renderHour24(currentMatch, index);
+    }
+    function renderMinute(currentMatch, index) {
+        if (currentMatch && currentMatch.length > 2) {
+            throw new Error("Unsupported token: ".concat(currentMatch));
+        }
+        var showLeadingZeros = currentMatch ? currentMatch.length === 2 : false;
+        return (React__default["default"].createElement(MinuteInput, __assign$1({ key: "minute" }, commonInputProps, { ariaLabel: minuteAriaLabel, 
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: minuteInput, placeholder: minutePlaceholder, showLeadingZeros: showLeadingZeros, value: minute })));
+    }
+    function renderSecond(currentMatch, index) {
+        if (currentMatch && currentMatch.length > 2) {
+            throw new Error("Unsupported token: ".concat(currentMatch));
+        }
+        var showLeadingZeros = currentMatch ? currentMatch.length === 2 : true;
+        return (React__default["default"].createElement(SecondInput, __assign$1({ key: "second" }, commonInputProps, { ariaLabel: secondAriaLabel, 
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: index === 0 && autoFocus, hour: hour, inputRef: secondInput, minute: minute, placeholder: secondPlaceholder, showLeadingZeros: showLeadingZeros, value: second })));
+    }
+    function renderAmPm(currentMatch, index) {
+        return (React__default["default"].createElement(AmPm, __assign$1({ key: "ampm" }, commonInputProps, { ariaLabel: amPmAriaLabel, 
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: index === 0 && autoFocus, inputRef: amPmInput, locale: locale, onChange: onChange, value: amPm })));
+    }
+    function renderCustomInputsInternal() {
+        var elementFunctions = {
+            h: renderHour,
+            H: renderHour,
+            m: renderMinute,
+            s: renderSecond,
+            a: renderAmPm,
+        };
+        var allowMultipleInstances = typeof format !== 'undefined';
+        return renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances);
+    }
+    function renderNativeInput() {
+        return (React__default["default"].createElement(NativeInput, { key: "time", ariaLabel: nativeInputAriaLabel, disabled: disabled, maxTime: maxTime, minTime: minTime, name: name, onChange: onChangeNative, required: required, value: value, valueType: valueType }));
+    }
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React__default["default"].createElement("div", { className: className, onClick: onClick },
+        renderNativeInput(),
+        renderCustomInputsInternal()));
+}
+
+var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var allViews$1 = ['hour', 'minute', 'second'];
+var allValueTypes = __spreadArray([], allViews$1, true);
+var hourOptionalSecondsRegExp = /^(([0-1])?[0-9]|2[0-3]):[0-5][0-9](:([0-5][0-9]))?$/;
+var isTime = function isTime(props, propName, componentName) {
+    var _a = props, _b = propName, time = _a[_b];
+    if (time) {
+        if (typeof time !== 'string' || !hourOptionalSecondsRegExp.test(time)) {
+            return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof time, "` supplied to `").concat(componentName, "`, expected time in HH:mm(:ss) format."));
+        }
+    }
+    // Everything is fine
+    return null;
+};
+propTypes$1.exports.oneOf(allValueTypes);
+propTypes$1.exports.oneOfType([
+    propTypes$1.exports.func,
+    propTypes$1.exports.exact({
+        current: propTypes$1.exports.any,
+    }),
+]);
+var rangeOf = function (type) {
+    return propTypes$1.exports.arrayOf(type);
+};
+
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var isBrowser$4 = typeof document !== 'undefined';
+var baseClassName = 'react-time-picker';
+var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
+var allViews = ['hour', 'minute', 'second'];
+var iconProps = {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: 19,
+    height: 19,
+    viewBox: '0 0 19 19',
+    stroke: 'black',
+    strokeWidth: 2,
+};
+var ClockIcon = (React__default["default"].createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clock-button__icon ").concat(baseClassName, "__button__icon"), fill: "none" }),
+    React__default["default"].createElement("circle", { cx: "9.5", cy: "9.5", r: "7.5" }),
+    React__default["default"].createElement("path", { d: "M9.5 4.5 v5 h4" })));
+var ClearIcon = (React__default["default"].createElement("svg", __assign({}, iconProps, { className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon") }),
+    React__default["default"].createElement("line", { x1: "4", x2: "15", y1: "4", y2: "15" }),
+    React__default["default"].createElement("line", { x1: "15", x2: "4", y1: "4", y2: "15" })));
+var TimePicker$1 = function TimePicker(props) {
+    var amPmAriaLabel = props.amPmAriaLabel, autoFocus = props.autoFocus, className = props.className, clearAriaLabel = props.clearAriaLabel, _a = props.clearIcon, clearIcon = _a === void 0 ? ClearIcon : _a, clockAriaLabel = props.clockAriaLabel, _b = props.clockIcon, clockIcon = _b === void 0 ? ClockIcon : _b, _c = props.closeClock, shouldCloseClockOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], hourAriaLabel = props.hourAriaLabel, hourPlaceholder = props.hourPlaceholder, disableClock = props.disableClock, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxTime = props.maxTime, _e = props.maxDetail, maxDetail = _e === void 0 ? 'minute' : _e, minTime = props.minTime, minuteAriaLabel = props.minuteAriaLabel, minutePlaceholder = props.minutePlaceholder, _f = props.name, name = _f === void 0 ? 'time' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onClockClose = props.onClockClose, onClockOpen = props.onClockOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, onInvalidChange = props.onInvalidChange, _g = props.openClockOnFocus, openClockOnFocus = _g === void 0 ? true : _g, required = props.required, value = props.value, secondAriaLabel = props.secondAriaLabel, secondPlaceholder = props.secondPlaceholder, shouldCloseClock = props.shouldCloseClock, shouldOpenClock = props.shouldOpenClock, otherProps = __rest(props, ["amPmAriaLabel", "autoFocus", "className", "clearAriaLabel", "clearIcon", "clockAriaLabel", "clockIcon", "closeClock", 'data-testid', "hourAriaLabel", "hourPlaceholder", "disableClock", "disabled", "format", "id", "isOpen", "locale", "maxTime", "maxDetail", "minTime", "minuteAriaLabel", "minutePlaceholder", "name", "nativeInputAriaLabel", "onClockClose", "onClockOpen", "onChange", "onFocus", "onInvalidChange", "openClockOnFocus", "required", "value", "secondAriaLabel", "secondPlaceholder", "shouldCloseClock", "shouldOpenClock"]);
+    var _h = React$3.useState(isOpenProps), isOpen = _h[0], setIsOpen = _h[1];
+    var wrapper = React$3.useRef(null);
+    var clockWrapper = React$3.useRef(null);
+    React$3.useEffect(function () {
+        setIsOpen(isOpenProps);
+    }, [isOpenProps]);
+    function openClock(_a) {
+        var reason = _a.reason;
+        if (shouldOpenClock) {
+            if (!shouldOpenClock({ reason: reason })) {
+                return;
+            }
+        }
+        setIsOpen(true);
+        if (onClockOpen) {
+            onClockOpen();
+        }
+    }
+    var closeClock = React$3.useCallback(function (_a) {
+        var reason = _a.reason;
+        if (shouldCloseClock) {
+            if (!shouldCloseClock({ reason: reason })) {
+                return;
+            }
+        }
+        setIsOpen(false);
+        if (onClockClose) {
+            onClockClose();
+        }
+    }, [onClockClose, shouldCloseClock]);
+    function toggleClock() {
+        if (isOpen) {
+            closeClock({ reason: 'buttonClick' });
+        }
+        else {
+            openClock({ reason: 'buttonClick' });
+        }
+    }
+    function onChange(value, shouldCloseClock) {
+        if (shouldCloseClock === void 0) { shouldCloseClock = shouldCloseClockOnSelect; }
+        if (shouldCloseClock) {
+            closeClock({ reason: 'select' });
+        }
+        if (onChangeProps) {
+            onChangeProps(value);
+        }
+    }
+    function onFocus(event) {
+        if (onFocusProps) {
+            onFocusProps(event);
+        }
+        if (
+        // Internet Explorer still fires onFocus on disabled elements
+        disabled ||
+            isOpen ||
+            !openClockOnFocus ||
+            event.target.dataset.select === 'true') {
+            return;
+        }
+        openClock({ reason: 'focus' });
+    }
+    var onKeyDown = React$3.useCallback(function (event) {
+        if (event.key === 'Escape') {
+            closeClock({ reason: 'escape' });
+        }
+    }, [closeClock]);
+    function clear() {
+        onChange(null);
+    }
+    function stopPropagation(event) {
+        event.stopPropagation();
+    }
+    var onOutsideAction = React$3.useCallback(function (event) {
+        var wrapperEl = wrapper.current;
+        var clockWrapperEl = clockWrapper.current;
+        // Try event.composedPath first to handle clicks inside a Shadow DOM.
+        var target = ('composedPath' in event ? event.composedPath()[0] : event.target);
+        if (target &&
+            wrapperEl &&
+            !wrapperEl.contains(target) &&
+            (!clockWrapperEl || !clockWrapperEl.contains(target))) {
+            closeClock({ reason: 'outsideAction' });
+        }
+    }, [clockWrapper, closeClock, wrapper]);
+    var handleOutsideActionListeners = React$3.useCallback(function (shouldListen) {
+        if (shouldListen === void 0) { shouldListen = isOpen; }
+        outsideActionEvents.forEach(function (event) {
+            if (shouldListen) {
+                document.addEventListener(event, onOutsideAction);
+            }
+            else {
+                document.removeEventListener(event, onOutsideAction);
+            }
+        });
+        if (shouldListen) {
+            document.addEventListener('keydown', onKeyDown);
+        }
+        else {
+            document.removeEventListener('keydown', onKeyDown);
+        }
+    }, [isOpen, onOutsideAction, onKeyDown]);
+    React$3.useEffect(function () {
+        handleOutsideActionListeners();
+        return function () {
+            handleOutsideActionListeners(false);
+        };
+    }, [handleOutsideActionListeners]);
+    function renderInputs() {
+        var valueFrom = (Array.isArray(value) ? value : [value])[0];
+        var ariaLabelProps = {
+            amPmAriaLabel: amPmAriaLabel,
+            hourAriaLabel: hourAriaLabel,
+            minuteAriaLabel: minuteAriaLabel,
+            nativeInputAriaLabel: nativeInputAriaLabel,
+            secondAriaLabel: secondAriaLabel,
+        };
+        var placeholderProps = {
+            hourPlaceholder: hourPlaceholder,
+            minutePlaceholder: minutePlaceholder,
+            secondPlaceholder: secondPlaceholder,
+        };
+        return (React__default["default"].createElement("div", { className: "".concat(baseClassName, "__wrapper") },
+            React__default["default"].createElement(TimeInput, __assign({}, ariaLabelProps, placeholderProps, { 
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus: autoFocus, className: "".concat(baseClassName, "__inputGroup"), disabled: disabled, format: format, isClockOpen: isOpen, locale: locale, maxDetail: maxDetail, maxTime: maxTime, minTime: minTime, name: name, onChange: onChange, onInvalidChange: onInvalidChange, required: required, value: valueFrom })),
+            clearIcon !== null && (React__default["default"].createElement("button", { "aria-label": clearAriaLabel, className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: clear, onFocus: stopPropagation, type: "button" }, typeof clearIcon === 'function' ? React__default["default"].createElement(clearIcon) : clearIcon)),
+            clockIcon !== null && !disableClock && (React__default["default"].createElement("button", { "aria-label": clockAriaLabel, className: "".concat(baseClassName, "__clock-button ").concat(baseClassName, "__button"), disabled: disabled, onClick: toggleClock, onFocus: stopPropagation, type: "button" }, typeof clockIcon === 'function' ? React__default["default"].createElement(clockIcon) : clockIcon))));
+    }
+    function renderClock() {
+        if (isOpen === null || disableClock) {
+            return null;
+        }
+        var clockClassName = props.clockClassName; props.className; // Unused, here to exclude it from clockProps
+        props.onChange; // Unused, here to exclude it from clockProps
+        var portalContainer = props.portalContainer, value = props.value, clockProps = __rest(props, ["clockClassName", "className", "onChange", "portalContainer", "value"]);
+        var className = "".concat(baseClassName, "__clock");
+        var classNames = clsx$1(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'));
+        var valueFrom = (Array.isArray(value) ? value : [value])[0];
+        var clock = React__default["default"].createElement(Clock, __assign({ className: clockClassName, value: valueFrom }, clockProps));
+        return portalContainer ? (ReactDOM.createPortal(React__default["default"].createElement("div", { ref: clockWrapper, className: classNames }, clock), portalContainer)) : (React__default["default"].createElement(Fit, null,
+            React__default["default"].createElement("div", { ref: function (ref) {
+                    if (ref && !isOpen) {
+                        ref.removeAttribute('style');
+                    }
+                }, className: classNames }, clock)));
+    }
+    var eventProps = React$3.useMemo(function () { return makeEventProps(otherProps); }, [otherProps]);
+    return (React__default["default"].createElement("div", __assign({ className: clsx$1(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className), "data-testid": dataTestid, id: id }, eventProps, { onFocus: onFocus, ref: wrapper }),
+        renderInputs(),
+        renderClock()));
+};
+var isValue = propTypes$1.exports.oneOfType([isTime, propTypes$1.exports.instanceOf(Date)]);
+var isValueOrValueArray = propTypes$1.exports.oneOfType([isValue, rangeOf(isValue)]);
+TimePicker$1.propTypes = {
+    amPmAriaLabel: propTypes$1.exports.string,
+    autoFocus: propTypes$1.exports.bool,
+    className: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.arrayOf(propTypes$1.exports.string)]),
+    clearAriaLabel: propTypes$1.exports.string,
+    clearIcon: propTypes$1.exports.oneOfType([propTypes$1.exports.node, propTypes$1.exports.func]),
+    clockAriaLabel: propTypes$1.exports.string,
+    clockClassName: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.arrayOf(propTypes$1.exports.string)]),
+    clockIcon: propTypes$1.exports.oneOfType([propTypes$1.exports.node, propTypes$1.exports.func]),
+    closeClock: propTypes$1.exports.bool,
+    'data-testid': propTypes$1.exports.string,
+    disableClock: propTypes$1.exports.bool,
+    disabled: propTypes$1.exports.bool,
+    format: propTypes$1.exports.string,
+    hourAriaLabel: propTypes$1.exports.string,
+    hourPlaceholder: propTypes$1.exports.string,
+    id: propTypes$1.exports.string,
+    isOpen: propTypes$1.exports.bool,
+    locale: propTypes$1.exports.string,
+    maxDetail: propTypes$1.exports.oneOf(allViews),
+    maxTime: isTime,
+    minTime: isTime,
+    minuteAriaLabel: propTypes$1.exports.string,
+    minutePlaceholder: propTypes$1.exports.string,
+    name: propTypes$1.exports.string,
+    nativeInputAriaLabel: propTypes$1.exports.string,
+    onChange: propTypes$1.exports.func,
+    onClockClose: propTypes$1.exports.func,
+    onClockOpen: propTypes$1.exports.func,
+    onFocus: propTypes$1.exports.func,
+    openClockOnFocus: propTypes$1.exports.bool,
+    required: propTypes$1.exports.bool,
+    secondAriaLabel: propTypes$1.exports.string,
+    secondPlaceholder: propTypes$1.exports.string,
+    value: isValueOrValueArray,
+};
+if (isBrowser$4) {
+    TimePicker$1.propTypes.portalContainer = propTypes$1.exports.instanceOf(HTMLElement);
+}
+
+var HoverIcon = function HoverIcon(_ref) {
+  var _ref$time = _ref.time,
+    time = _ref$time === void 0 ? false : _ref$time;
+  var _useState = React$3.useState(false),
+    _useState2 = _slicedToArray$3(_useState, 2),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    onMouseLeave: function onMouseLeave() {
+      return setHovered(false);
+    },
+    onMouseOver: function onMouseOver() {
+      return setHovered(true);
     }
   }, hovered && time ? /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
     size: 16
@@ -25454,7 +26506,29 @@ var HoverIcon = function HoverIcon(_ref) {
   }));
 };
 
-var _excluded$v = ["className", "label", "labelProps", "size", "nakedInput", "required", "value", "onChange", "error", "onBlur"];
+var FORMAT = "HH:mm";
+var getFormattedTime = function getFormattedTime(value) {
+  if (dayjs.isDayjs(value)) {
+    return value.toDate();
+  } else if (value instanceof Date || dayjs(value, FORMAT).isValid()) {
+    return value;
+  }
+  return null;
+};
+var getFormattedRange = function getFormattedRange(value) {
+  if (!Array.isArray(value)) return null;
+  return value.map(function (item) {
+    return getFormattedTime(item);
+  });
+};
+var toDayJs = function toDayJs(value) {
+  if (Array.isArray(value)) return value.map(function (item) {
+    return dayjs(item, FORMAT);
+  });
+  return dayjs(value, FORMAT);
+};
+
+var _excluded$v = ["type", "className", "label", "labelProps", "size", "nakedInput", "required", "value", "defaultValue", "onChange", "error", "onBlur"];
 function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty$7(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 dayjs.extend(customParseFormat);
@@ -25463,9 +26537,14 @@ var INPUT_SIZES$1 = {
   medium: "medium",
   large: "large"
 };
-var FORMAT = "HH:mm";
+var timeComponents = {
+  range: TimeRangePicker,
+  time: TimePicker$1
+};
 var TimePickerInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
-  var _ref$className = _ref.className,
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "time" : _ref$type,
+    _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     label = _ref.label,
     labelProps = _ref.labelProps,
@@ -25476,30 +26555,44 @@ var TimePickerInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
     inputValue = _ref.value,
-    onChange = _ref.onChange,
+    defaultValue = _ref.defaultValue,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? noop$3 : _ref$onChange,
     _ref$error = _ref.error,
     error = _ref$error === void 0 ? "" : _ref$error,
     _ref$onBlur = _ref.onBlur,
     onBlur = _ref$onBlur === void 0 ? noop$3 : _ref$onBlur,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$v);
-  var value = React$3.useMemo(function () {
-    if (neetoCist.isPresent(inputValue) && dayjs(inputValue).isValid()) {
-      return inputValue.format(FORMAT);
-    }
-    return null;
-  }, [inputValue]);
+  var _useState = React$3.useState(null),
+    _useState2 = _slicedToArray$3(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var id = useId(otherProps.id);
   var errorId = "error_".concat(id);
+  React$3.useEffect(function () {
+    if (neetoCist.isNotPresent(inputValue) && neetoCist.isNotPresent(defaultValue)) return;
+    setValue((type === "range" ? getFormattedRange : getFormattedTime)(inputValue || defaultValue));
+  }, [type, inputValue]);
   var handleChange = function handleChange(newValue) {
-    var time = dayjs(newValue, FORMAT);
-    onChange(time, newValue);
+    setValue(newValue);
+    onChange(toDayJs(newValue), newValue);
+  };
+  var handleShouldCloseClock = function handleShouldCloseClock() {
+    onBlur(toDayJs(value), value);
+    return true;
   };
+  var handleKeyDown = function handleKeyDown(_ref2) {
+    var code = _ref2.code;
+    if (code !== "Enter") return;
+    onBlur(toDayJs(value), value);
+  };
+  var Component = timeComponents[type];
   return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,
     className: "neeto-ui-input__wrapper"
   }, label && /*#__PURE__*/React__default["default"].createElement(Label, _objectSpread$k({
     required: required
-  }, labelProps), label), /*#__PURE__*/React__default["default"].createElement(TimePicker$1, _extends$4({
+  }, labelProps), label), /*#__PURE__*/React__default["default"].createElement(Component, _extends$4({
     id: id,
     value: value,
     disableClock: true,
@@ -25510,6 +26603,7 @@ var TimePickerInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
     hourPlaceholder: "HH",
     minutePlaceholder: "mm",
     secondAriaLabel: "ss",
+    shouldCloseClock: handleShouldCloseClock,
     className: classnames$1("neeto-ui-time-picker", [className], {
       "neeto-ui-time-picker--small": size === "small",
       "neeto-ui-time-picker--medium": size === "medium",
@@ -25518,13 +26612,8 @@ var TimePickerInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
       "neeto-ui-time-picker--naked": nakedInput,
       "neeto-ui-time-picker--error": !!error
     }),
-    shouldCloseClock: function shouldCloseClock(_ref2) {
-      var reason = _ref2.reason;
-      if (reason !== "outsideAction") return true;
-      onBlur();
-      return true;
-    },
-    onChange: handleChange
+    onChange: handleChange,
+    onKeyDown: handleKeyDown
   }, otherProps)), !!error && typeof error === "string" && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "neeto-ui-input__error",
     "data-cy": "".concat(hyphenize(label), "-input-error"),
@@ -25533,11 +26622,18 @@ var TimePickerInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
 });
 TimePickerInput.displayName = "TimePicker";
 
+var DATE_FORMAT = "YYYY-MM-DD";
+var TIME_FORMAT = "HH:mm";
+var getDateTime = function getDateTime(date, time) {
+  if (neetoCist.isPresent(date) && neetoCist.isPresent(time)) {
+    return dayjs("".concat(date.format(DATE_FORMAT), " ").concat(time.format(TIME_FORMAT)));
+  }
+  return null;
+};
+
 function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty$7(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 dayjs.extend(customParseFormat);
-var DATE_FORMAT = "YYYY-MM-DD";
-var TIME_FORMAT = "HH:mm";
 var DateTimePicker = function DateTimePicker(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
@@ -25559,10 +26655,12 @@ var DateTimePicker = function DateTimePicker(_ref) {
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
     id = _ref.id,
+    datePickerProps = _ref.datePickerProps,
+    timePickerProps = _ref.timePickerProps,
     _ref$onTimeInputBlur = _ref.onTimeInputBlur,
     onTimeInputBlur = _ref$onTimeInputBlur === void 0 ? noop$3 : _ref$onTimeInputBlur,
-    datePickerProps = _ref.datePickerProps,
-    timePickerProps = _ref.timePickerProps;
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? noop$3 : _ref$onBlur;
   var _useState = React$3.useState(datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.open),
     _useState2 = _slicedToArray$3(_useState, 2),
     open = _useState2[0],
@@ -25592,11 +26690,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
   }, [value, defaultValue]);
   React$3.useEffect(function () {
     if (neetoCist.isNotPresent(changedField)) return;
-    if (neetoCist.isPresent(date) && neetoCist.isPresent(time)) {
-      onChange(dayjs("".concat(date.format(DATE_FORMAT), " ").concat(time.format(TIME_FORMAT))), changedField);
-    } else {
-      onChange(null, changedField);
-    }
+    onChange(getDateTime(date, time), changedField);
     setChangedField(); // reset to avoid unnecessary trigger on rerender
   }, [date, time, changedField]);
   var handleDateChange = function handleDateChange(newDate) {
@@ -25612,6 +26706,10 @@ var DateTimePicker = function DateTimePicker(_ref) {
     if (newTime.isValid() && !date) setDate(newTime);
     setChangedField("time");
   };
+  var handleTimeBlur = function handleTimeBlur() {
+    onTimeInputBlur(getDateTime(date, time));
+    onBlur(getDateTime(date, time));
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-input__wrapper"
   }, label && /*#__PURE__*/React__default["default"].createElement(Label, _objectSpread$j({
@@ -25641,7 +26739,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     error: error,
     nakedInput: nakedInput,
     size: size
-  }, "error", !!error), "ref", timeRef), "value", time), "onBlur", onTimeInputBlur), "onChange", handleTimeChange), timePickerProps))), !!error && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, "error", !!error), "ref", timeRef), "value", time), "onBlur", handleTimeBlur), "onChange", handleTimeChange), timePickerProps))), !!error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "neeto-ui-input__error",
     "data-cy": "".concat(hyphenize(label), "-input-error"),
     id: errorId