@bigbinary/neetoui 6.2.5 → 6.3.0

package/index.js

@@ -223,9 +223,9 @@ const MotionContext = createContext({});
  */
 const PresenceContext = createContext(null);
 
-const isBrowser$9 = typeof document !== "undefined";
+const isBrowser$b = typeof document !== "undefined";
 
-const useIsomorphicLayoutEffect$2 = isBrowser$9 ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$3 = isBrowser$b ? useLayoutEffect : useEffect;
 
 const LazyContext = createContext({ strict: false });
 
@@ -260,7 +260,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
      * was present on initial render - it will be deleted after this.
      */
     const canHandoff = useRef(Boolean(window.HandoffAppearAnimations));
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$3(() => {
         if (!visualElement)
             return;
         visualElement.render();
@@ -451,7 +451,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
@@ -2773,7 +2773,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;
@@ -2798,7 +2798,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;
@@ -2807,7 +2807,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;
         };
     }
@@ -2818,7 +2818,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);
@@ -8343,7 +8343,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 };
@@ -8382,7 +8382,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)");
@@ -9068,7 +9068,7 @@ const motion = /*@__PURE__*/ createMotionProxy((Component, config) => createDomM
 
 function useIsMounted() {
     const isMounted = useRef(false);
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$3(() => {
         isMounted.current = true;
         return () => {
             isMounted.current = false;
@@ -9278,7 +9278,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 = useRef(true);
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$3(() => {
         isInitialRender.current = false;
         updateChildLookup(filteredChildren, allChildren);
         presentChildren.current = childrenToRender;
@@ -13876,8 +13876,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 = {
@@ -15327,7 +15327,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') {
@@ -15340,7 +15340,7 @@ function preserveRef(ref, node) {
   }
 }
 function ssrSafeCreateDiv() {
-  return isBrowser$7 && document.createElement('div');
+  return isBrowser$9 && document.createElement('div');
 }
 function toDataAttributes(attrs) {
   var dataAttrs = {
@@ -15403,7 +15403,7 @@ function deepPreserveProps(instanceProps, componentProps) {
   });
 }
 
-var useIsomorphicLayoutEffect$1 = isBrowser$7 ? useLayoutEffect : useEffect;
+var useIsomorphicLayoutEffect$2 = isBrowser$9 ? useLayoutEffect : 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(?)
@@ -15542,7 +15542,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')) {
@@ -15577,7 +15577,7 @@ function TippyGenerator(tippy) {
       };
     }, deps); // UPDATE
 
-    useIsomorphicLayoutEffect$1(function () {
+    useIsomorphicLayoutEffect$2(function () {
       var _instance$popperInsta;
 
       // Prevent this effect from running on 1st render
@@ -15613,7 +15613,7 @@ function TippyGenerator(tippy) {
         });
       }
     });
-    useIsomorphicLayoutEffect$1(function () {
+    useIsomorphicLayoutEffect$2(function () {
       var _instance$props$poppe;
 
       if (!render) {
@@ -15889,7 +15889,7 @@ var Button = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 });
 Button.displayName = "Button";
 
-var Divider$1 = function Divider(props) {
+var Divider$2 = function Divider(props) {
   return /*#__PURE__*/React__default.createElement("li", _extends$4({
     className: "neeto-ui-dropdown__popup-divider"
   }, props));
@@ -16162,7 +16162,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 = {
@@ -22833,7 +22833,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);
@@ -22924,7 +22924,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.
@@ -22950,8 +22950,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}
 
 /**
@@ -23108,8 +23106,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))
@@ -23117,10 +23115,10 @@ var __assign$8 = (undefined && undefined.__assign) || function () {
         }
         return t;
     };
-    return __assign$8.apply(this, arguments);
+    return __assign$e.apply(this, arguments);
 };
 var MinuteMark = memo$1(function MinuteMark(props) {
-    return React__default.createElement(Mark, __assign$8({}, props));
+    return React__default.createElement(Mark, __assign$e({}, props));
 });
 
 /**
@@ -23868,8 +23866,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))
@@ -23877,9 +23875,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];
@@ -23891,8 +23889,8 @@ var __rest$6 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 var HourMark = memo$1(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.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.createElement(Mark, __assign$d({ number: number ? formatHour$1(locale, number) : null }, otherProps));
 });
 
 function isNumberBetween(min, max) {
@@ -24072,8 +24070,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))
@@ -24081,9 +24079,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];
@@ -24094,9 +24092,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));
 }
@@ -24196,12 +24194,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);
@@ -24316,7 +24314,7 @@ var Fit = /** @class */ (function (_super) {
     return Fit;
 }(Component));
 
-function Divider(_a) {
+function Divider$1(_a) {
     var children = _a.children;
     return React__default.createElement("span", { className: "react-time-picker__inputGroup__divider" }, children);
 }
@@ -24378,6 +24376,1026 @@ function updateInputWidth(element) {
     return width;
 }
 
+var isBrowser$7 = typeof document !== 'undefined';
+var useIsomorphicLayoutEffect$1 = isBrowser$7 ? useLayoutEffect : 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$1) {
+        requestAnimationFrame(function () { return target.select(); });
+    }
+    else {
+        target.select();
+    }
+}
+function updateInputWidthOnLoad$1(element) {
+    if (document.readyState === 'complete') {
+        return;
+    }
+    function onLoad() {
+        updateInputWidth(element);
+    }
+    window.addEventListener('load', onLoad);
+}
+function updateInputWidthOnFontLoad$1(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$1(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$1(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$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$1(input);
+        if (!isNumberKey || !(selection || value.length < maxLength)) {
+            event.preventDefault();
+        }
+    };
+}
+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$1(function () {
+        if (!inputRef || !inputRef.current) {
+            return;
+        }
+        updateInputWidth(inputRef.current);
+        updateInputWidthOnLoad$1(inputRef.current);
+        updateInputWidthOnFontLoad$1(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.createElement(React__default.Fragment, null,
+        hasLeadingZero ? React__default.createElement("span", { className: "".concat(className, "__leadingZero") }, "0") : null,
+        React__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);
+                }
+            }, placeholder: placeholder, ref: inputRef, required: required, step: step, type: "number", value: value !== null ? value : '' })));
+}
+
+function convert12to24$1(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$1(hour24) {
+    var hour12 = Number(hour24) % 12 || 12;
+    return [hour12, Number(hour24) < 12 ? 'am' : 'pm'];
+}
+
+var formatterCache$1 = new Map();
+function getFormatter$1(options) {
+    return function formatter(locale, date) {
+        var localeWithDefault = locale || getUserLocale();
+        if (!formatterCache$1.has(localeWithDefault)) {
+            formatterCache$1.set(localeWithDefault, new Map());
+        }
+        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$1 = new Map();
+function getNumberFormatter$1(options) {
+    return function (locale, number) {
+        var localeWithDefault = locale || getUserLocale();
+        if (!numberFormatterCache$1.has(localeWithDefault)) {
+            numberFormatterCache$1.set(localeWithDefault, new Map());
+        }
+        var numberFormatterCacheLocale = numberFormatterCache$1.get(localeWithDefault);
+        if (!numberFormatterCacheLocale.has(options)) {
+            numberFormatterCacheLocale.set(options, new Intl.NumberFormat(localeWithDefault || undefined, options).format);
+        }
+        return numberFormatterCacheLocale.get(options)(number);
+    };
+}
+
+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) {
+            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$1(num) {
+    return num !== null && num !== false && !Number.isNaN(Number(num));
+}
+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$1));
+}
+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$1));
+}
+
+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))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$b.apply(this, arguments);
+};
+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];
+    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$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$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(1, minTime &&
+        (function () {
+            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 ||
+                // 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$1(value)[0].toString() : '';
+    return (React__default.createElement(Input$4, __assign$b({ max: maxHour, min: minHour, name: "hour12", nameForClass: "hour", value: value12 }, otherProps)));
+}
+
+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))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$a.apply(this, arguments);
+};
+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];
+    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$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.createElement(Input$4, __assign$a({ max: maxHour, min: minHour, name: "hour24", nameForClass: "hour" }, otherProps));
+}
+
+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))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$9.apply(this, arguments);
+};
+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];
+    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$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$1(59, maxTime && isSameHour(maxTime) && getMinutes(maxTime));
+    var minMinute = safeMax$1(0, minTime && isSameHour(minTime) && getMinutes(minTime));
+    return (React__default.createElement(Input$4, __assign$9({ max: maxMinute, min: minMinute, name: "minute", showLeadingZeros: showLeadingZeros }, otherProps)));
+}
+
+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))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$8.apply(this, arguments);
+};
+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];
+    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$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$1(59, maxTime && isSameMinute(maxTime) && getSeconds(maxTime));
+    var minSecond = safeMax$1(0, minTime && isSameMinute(minTime) && getSeconds(minTime));
+    return (React__default.createElement(Input$4, __assign$8({ max: maxSecond, min: minSecond, name: "second", showLeadingZeros: showLeadingZeros }, otherProps)));
+}
+
+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) {
+            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.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$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$1(getHours(minTime))[1] === 'pm' : false;
+    var pmDisabled = maxTime ? convert24to12$1(getHours(maxTime))[1] === 'am' : false;
+    var name = 'amPm';
+    var _b = getAmPmLabels$1(locale), amLabel = _b[0], pmLabel = _b[1];
+    return (React__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.createElement("option", { value: "" }, "--"),
+        React__default.createElement("option", { disabled: amDisabled, value: "am" }, amLabel),
+        React__default.createElement("option", { disabled: pmDisabled, value: "pm" }, pmLabel)));
+}
+
+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))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$7.apply(this, arguments);
+};
+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);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var getFormatterOptionsCache$1 = {};
+var allViews$4 = ['hour', 'minute', 'second'];
+function isInternalInput$1(element) {
+    return element.dataset.input === 'true';
+}
+function findInput$1(element, property) {
+    var nextElement = element;
+    do {
+        nextElement = nextElement[property];
+    } while (nextElement && !isInternalInput$1(nextElement));
+    return nextElement;
+}
+function focus$1(element) {
+    if (element) {
+        element.focus();
+    }
+}
+function renderCustomInputs$1(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.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] ||
+                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$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 = useState(null), amPm = _e[0], setAmPm = _e[1];
+    var _f = useState(null), hour = _f[0], setHour = _f[1];
+    var _g = useState(null), minute = _g[0], setMinute = _g[1];
+    var _h = useState(null), second = _h[0], setSecond = _h[1];
+    var _j = useState(null), value = _j[0], setValue = _j[1];
+    var amPmInput = useRef(null);
+    var hour12Input = useRef(null);
+    var hour24Input = useRef(null);
+    var minuteInput = useRef(null);
+    var secondInput = useRef(null);
+    var _k = useState(isClockOpenProps), isClockOpen = _k[0], setIsClockOpen = _k[1];
+    var lastPressedKey = useRef();
+    useEffect(function () {
+        setIsClockOpen(isClockOpenProps);
+    }, [isClockOpenProps]);
+    useEffect(function () {
+        var nextValue = valueProps;
+        if (nextValue) {
+            setAmPm(convert24to12$1(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$4.indexOf(maxDetail);
+        var formatterOptions = getFormatterOptionsCache$1[level] ||
+            (function () {
+                var options = { hour: 'numeric' };
+                if (level >= 1) {
+                    options.minute = 'numeric';
+                }
+                if (level >= 2) {
+                    options.second = 'numeric';
+                }
+                getFormatterOptionsCache$1[level] = options;
+                return options;
+            })();
+        return getFormatter$1(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$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);
+        return dividers ? dividers[0] : null;
+    })();
+    function onClick(event) {
+        if (event.target === event.currentTarget) {
+            // Wrapper was directly clicked
+            var firstInput = event.target.children[1];
+            focus$1(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$1(input, property);
+                focus$1(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$1(input, property);
+            focus$1(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$1(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$1(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.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 })));
+    }
+    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.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 })));
+    }
+    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.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 })));
+    }
+    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.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.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 })));
+    }
+    function renderCustomInputsInternal() {
+        var elementFunctions = {
+            h: renderHour,
+            H: renderHour,
+            m: renderMinute,
+            s: renderSecond,
+            a: renderAmPm,
+        };
+        var allowMultipleInstances = typeof format !== 'undefined';
+        return renderCustomInputs$1(placeholder, elementFunctions, allowMultipleInstances);
+    }
+    function renderNativeInput() {
+        return (React__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
+    React__default.createElement("div", { className: className, onClick: onClick },
+        renderNativeInput(),
+        renderCustomInputsInternal()));
+}
+
+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$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;
+};
+var rangeOf$1 = function (type) {
+    return propTypes$1.exports.arrayOf(type);
+};
+
+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))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$6.apply(this, arguments);
+};
+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];
+    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$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,
+    viewBox: '0 0 19 19',
+    stroke: 'black',
+    strokeWidth: 2,
+};
+var ClockIcon$1 = (React__default.createElement("svg", __assign$6({}, iconProps$1, { className: "".concat(baseClassName$1, "__clock-button__icon ").concat(baseClassName$1, "__button__icon"), fill: "none" }),
+    React__default.createElement("circle", { cx: "9.5", cy: "9.5", r: "7.5" }),
+    React__default.createElement("path", { d: "M9.5 4.5 v5 h4" })));
+var ClearIcon$1 = (React__default.createElement("svg", __assign$6({}, iconProps$1, { className: "".concat(baseClassName$1, "__clear-button__icon ").concat(baseClassName$1, "__button__icon") }),
+    React__default.createElement("line", { x1: "4", x2: "15", y1: "4", y2: "15" }),
+    React__default.createElement("line", { x1: "15", x2: "4", y1: "4", y2: "15" })));
+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 = useState(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
+    var wrapper = useRef(null);
+    var clockWrapper = useRef(null);
+    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 = 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 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);
+        }
+        if (
+        // Internet Explorer still fires onFocus on disabled elements
+        disabled ||
+            isOpen ||
+            !openClockOnFocus ||
+            event.target.dataset.select === 'true') {
+            return;
+        }
+        openClock({ reason: 'focus' });
+    }
+    var onKeyDown = useCallback(function (event) {
+        if (event.key === 'Escape') {
+            closeClock({ reason: 'escape' });
+        }
+    }, [closeClock]);
+    function clear() {
+        onChange(null);
+    }
+    function stopPropagation(event) {
+        event.stopPropagation();
+    }
+    var onOutsideAction = 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 = useCallback(function (shouldListen) {
+        if (shouldListen === void 0) { shouldListen = isOpen; }
+        outsideActionEvents$1.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]);
+    useEffect(function () {
+        handleOutsideActionListeners();
+        return function () {
+            handleOutsideActionListeners(false);
+        };
+    }, [handleOutsideActionListeners, isOpen]);
+    function renderInputs() {
+        var _a = Array.isArray(value) ? value : [value], valueFrom = _a[0], valueTo = _a[1];
+        var ariaLabelProps = {
+            amPmAriaLabel: amPmAriaLabel,
+            hourAriaLabel: hourAriaLabel,
+            minuteAriaLabel: minuteAriaLabel,
+            nativeInputAriaLabel: nativeInputAriaLabel,
+            secondAriaLabel: secondAriaLabel,
+        };
+        var placeholderProps = {
+            hourPlaceholder: hourPlaceholder,
+            minutePlaceholder: minutePlaceholder,
+            secondPlaceholder: secondPlaceholder,
+        };
+        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.createElement("div", { className: "".concat(baseClassName$1, "__wrapper") },
+            React__default.createElement(TimeInput$1, __assign$6({}, commonProps, { 
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus: autoFocus, name: "".concat(name, "_from"), onChange: onChangeFrom, value: valueFrom })),
+            React__default.createElement("span", { className: "".concat(baseClassName$1, "__range-divider") }, rangeDivider),
+            React__default.createElement(TimeInput$1, __assign$6({}, commonProps, { name: "".concat(name, "_to"), onChange: onChangeTo, value: valueTo })),
+            clearIcon !== null && (React__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.createElement(clearIcon) : clearIcon)),
+            clockIcon !== null && !disableClock && (React__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.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$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.createElement(Clock, __assign$6({ className: clockClassName, value: valueFrom }, clockProps));
+        return portalContainer ? (createPortal(React__default.createElement("div", { ref: clockWrapper, className: classNames }, clock), portalContainer)) : (React__default.createElement(Fit, null,
+            React__default.createElement("div", { ref: function (ref) {
+                    if (ref && !isOpen) {
+                        ref.removeAttribute('style');
+                    }
+                }, className: classNames }, clock)));
+    }
+    var eventProps = useMemo(function () { return makeEventProps(otherProps); }, [otherProps]);
+    return (React__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$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)]),
+    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$3),
+    maxTime: isTime$1,
+    minTime: isTime$1,
+    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,
+    rangeDivider: propTypes$1.exports.node,
+    required: propTypes$1.exports.bool,
+    secondAriaLabel: propTypes$1.exports.string,
+    secondPlaceholder: propTypes$1.exports.string,
+    value: isValueOrValueArray$1,
+};
+if (isBrowser$6) {
+    TimeRangePicker.propTypes.portalContainer = propTypes$1.exports.instanceOf(HTMLElement);
+}
+
+function Divider(_a) {
+    var children = _a.children;
+    return React__default.createElement("span", { className: "react-time-picker__inputGroup__divider" }, children);
+}
+
 var isBrowser$5 = typeof document !== 'undefined';
 var useIsomorphicLayoutEffect = isBrowser$5 ? useLayoutEffect : useEffect;
 var isIEOrEdgeLegacy = isBrowser$5 && /(MSIE|Trident\/|Edge\/)/.test(navigator.userAgent);
@@ -24474,7 +25492,7 @@ function Input$3(_a) {
     var maxLength = max ? max.toString().length : null;
     return (React__default.createElement(React__default.Fragment, null,
         hasLeadingZero ? React__default.createElement("span", { className: "".concat(className, "__leadingZero") }, "0") : null,
-        React__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.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);
@@ -24748,7 +25766,7 @@ function AmPm(_a) {
     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.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 : '' },
+    return (React__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.createElement("option", { value: "" }, "--"),
         React__default.createElement("option", { disabled: amDisabled, value: "am" }, amLabel),
         React__default.createElement("option", { disabled: pmDisabled, value: "pm" }, pmLabel)));
@@ -25342,7 +26360,7 @@ var TimePicker$1 = function TimePicker(props) {
         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 classNames = clsx$1(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'));
         var valueFrom = (Array.isArray(value) ? value : [value])[0];
         var clock = React__default.createElement(Clock, __assign({ className: clockClassName, value: valueFrom }, clockProps));
         return portalContainer ? (createPortal(React__default.createElement("div", { ref: clockWrapper, className: classNames }, clock), portalContainer)) : (React__default.createElement(Fit, null,
@@ -25353,7 +26371,7 @@ var TimePicker$1 = function TimePicker(props) {
                 }, className: classNames }, clock)));
     }
     var eventProps = useMemo(function () { return makeEventProps(otherProps); }, [otherProps]);
-    return (React__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.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()));
 };
@@ -25420,7 +26438,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);
@@ -25429,9 +26469,14 @@ var INPUT_SIZES$1 = {
   medium: "medium",
   large: "large"
 };
-var FORMAT = "HH:mm";
+var timeComponents = {
+  range: TimeRangePicker,
+  time: TimePicker$1
+};
 var TimePickerInput = /*#__PURE__*/forwardRef$1(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,
@@ -25442,30 +26487,44 @@ var TimePickerInput = /*#__PURE__*/forwardRef$1(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 = useMemo(function () {
-    if (isPresent(inputValue) && dayjs(inputValue).isValid()) {
-      return inputValue.format(FORMAT);
-    }
-    return null;
-  }, [inputValue]);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray$3(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var id = useId(otherProps.id);
   var errorId = "error_".concat(id);
+  useEffect(function () {
+    if (isNotPresent(inputValue) && 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.createElement("div", {
     ref: ref,
     className: "neeto-ui-input__wrapper"
   }, label && /*#__PURE__*/React__default.createElement(Label, _objectSpread$k({
     required: required
-  }, labelProps), label), /*#__PURE__*/React__default.createElement(TimePicker$1, _extends$4({
+  }, labelProps), label), /*#__PURE__*/React__default.createElement(Component, _extends$4({
     id: id,
     value: value,
     disableClock: true,
@@ -25476,6 +26535,7 @@ var TimePickerInput = /*#__PURE__*/forwardRef$1(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",
@@ -25484,13 +26544,8 @@ var TimePickerInput = /*#__PURE__*/forwardRef$1(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.createElement("p", {
     className: "neeto-ui-input__error",
     "data-cy": "".concat(hyphenize(label), "-input-error"),
@@ -25499,11 +26554,18 @@ var TimePickerInput = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
 });
 TimePickerInput.displayName = "TimePicker";
 
+var DATE_FORMAT = "YYYY-MM-DD";
+var TIME_FORMAT = "HH:mm";
+var getDateTime = function getDateTime(date, time) {
+  if (isPresent(date) && 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,
@@ -25525,10 +26587,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 = useState(datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.open),
     _useState2 = _slicedToArray$3(_useState, 2),
     open = _useState2[0],
@@ -25558,11 +26622,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
   }, [value, defaultValue]);
   useEffect(function () {
     if (isNotPresent(changedField)) return;
-    if (isPresent(date) && 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) {
@@ -25578,6 +26638,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.createElement("div", {
     className: "neeto-ui-input__wrapper"
   }, label && /*#__PURE__*/React__default.createElement(Label, _objectSpread$j({
@@ -25607,7 +26671,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.createElement("p", {
+  }, "error", !!error), "ref", timeRef), "value", time), "onBlur", handleTimeBlur), "onChange", handleTimeChange), timePickerProps))), !!error && /*#__PURE__*/React__default.createElement("p", {
     className: "neeto-ui-input__error",
     "data-cy": "".concat(hyphenize(label), "-input-error"),
     id: errorId
@@ -35899,7 +36963,7 @@ var useTableSort = function useTableSort() {
   var history = useHistory();
   var handleTableChange = function handleTableChange(pagination, sorter) {
     var params = {
-      sort_by: sorter.order && camelToSnakeCase(sorter.field),
+      sort_by: sorter.order ? camelToSnakeCase(sorter.field) : undefined,
       order_by: URL_SORT_ORDERS[sorter.order],
       page: pagination.current
     };