@true-engineering/true-react-common-ui-kit 4.0.0-alpha28 → 4.0.0-alpha29.1

package/dist/true-react-common-ui-kit.js

@@ -1,6 +1,6 @@
 import React, { createContext, useMemo, useContext, useInsertionEffect, useRef, useEffect, useCallback, useState, createElement, Fragment as Fragment$1, forwardRef, createRef, PureComponent, memo } from "react";
 import { jss, JssContext as JssContext$1, createUseStyles } from "react-jss";
-import { isNotEmpty, isArrayNotEmpty, mergeStyles, joinStrings, isObject as isObject$1, isStringEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, applyAction, addDataAttributes as addDataAttributes$1, stopPropagation, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, isArrayLikeNotEmpty, getArray, createFilter, isEmpty, isFunction as isFunction$1, getTransition, indexMap, isNumberInteger, hasDuplicates, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
+import { isNotEmpty, isArrayNotEmpty, mergeStyles, joinStrings, isObject as isObject$1, isStringEmpty, isString, isStringNotEmpty, mergeRefs, isFunction as isFunction$1, isEmpty, addDataTestId, applyAction, addDataAttributes as addDataAttributes$1, stopPropagation, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, isArrayLikeNotEmpty, doNothing, getArray, createFilter, getTransition, indexMap, isNumberInteger, hasDuplicates, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
 import { merge as merge$2 } from "lodash-es";
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
@@ -8,10 +8,10 @@ import hexToRgba from "hex-to-rgba";
 import { size, useFloating, offset as offset$2, flip as flip$2, arrow as arrow$2, autoUpdate, useHover, safePolygon, useFocus, useClick, useDismiss, useInteractions, useTransitionStatus, FloatingPortal, FloatingArrow } from "@floating-ui/react";
 import InputMask from "react-input-mask";
 import { getYear, getMonth, format, parse, isSameDay, isValid, isAfter, isBefore, startOfMonth, endOfMonth, sub, startOfYear, endOfYear } from "date-fns";
+import ReactDatePicker from "react-datepicker";
 import { Portal } from "react-overlays";
 import { debounce as debounce$1 } from "ts-debounce";
 import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
-import ReactDatePicker from "react-datepicker";
 import { filesize } from "filesize";
 import { hasFlag } from "country-flag-icons";
 import { RemoveScroll } from "react-remove-scroll";
@@ -1292,7 +1292,7 @@ function _class_apply_descriptor_set$1(receiver, descriptor, value) {
     descriptor.value = value;
   }
 }
-function _class_call_check$2(instance, Constructor) {
+function _class_call_check$3(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
   }
@@ -1333,7 +1333,7 @@ function _create_class$2(Constructor, protoProps, staticProps) {
     _defineProperties$2(Constructor, staticProps);
   return Constructor;
 }
-function _define_property$1c(obj, key, value) {
+function _define_property$1d(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -1394,7 +1394,7 @@ function _object_spread$1a(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$1c(target, key, source[key]);
+      _define_property$1d(target, key, source[key]);
     });
   }
   return target;
@@ -1425,7 +1425,7 @@ var _map = /* @__PURE__ */ new WeakMap(), _sheet = /* @__PURE__ */ new WeakMap()
 var TweakStylesManager = /* @__PURE__ */ function() {
   function TweakStylesManager2(param) {
     var sheet = param.sheet, classes = param.classes, _param_tweak = param.tweak, tweak = _param_tweak === void 0 ? [] : _param_tweak;
-    _class_call_check$2(this, TweakStylesManager2);
+    _class_call_check$3(this, TweakStylesManager2);
     _class_private_field_init$1(this, _map, {
       writable: true,
       value: /* @__PURE__ */ new WeakMap()
@@ -1620,7 +1620,7 @@ function _class_apply_descriptor_set(receiver, descriptor, value) {
     descriptor.value = value;
   }
 }
-function _class_call_check$1(instance, Constructor) {
+function _class_call_check$2(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
   }
@@ -1661,7 +1661,7 @@ function _create_class$1(Constructor, protoProps, staticProps) {
     _defineProperties$1(Constructor, staticProps);
   return Constructor;
 }
-function _define_property$1b(obj, key, value) {
+function _define_property$1c(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -1684,7 +1684,7 @@ function _object_spread$19(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$1b(target, key, source[key]);
+      _define_property$1c(target, key, source[key]);
     });
   }
   return target;
@@ -1694,7 +1694,7 @@ var _styleSheetMap = /* @__PURE__ */ new WeakMap(), _styles = /* @__PURE__ */ ne
 var ThemedStylesManager = /* @__PURE__ */ function() {
   function ThemedStylesManager2(param) {
     var styles = param.styles, name = param.name;
-    _class_call_check$1(this, ThemedStylesManager2);
+    _class_call_check$2(this, ThemedStylesManager2);
     _class_private_field_init(this, _styleSheetMap, {
       writable: true,
       value: /* @__PURE__ */ new Map()
@@ -1797,7 +1797,7 @@ var ThemedStylesManager = /* @__PURE__ */ function() {
   ]);
   return ThemedStylesManager2;
 }();
-function _define_property$1a(obj, key, value) {
+function _define_property$1b(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -1820,7 +1820,7 @@ function _object_spread$18(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$1a(target, key, source[key]);
+      _define_property$1b(target, key, source[key]);
     });
   }
   return target;
@@ -1893,7 +1893,7 @@ function _array_with_holes$q(arr) {
   if (Array.isArray(arr))
     return arr;
 }
-function _define_property$19(obj, key, value) {
+function _define_property$1a(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -1947,7 +1947,7 @@ function _object_spread$17(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$19(target, key, source[key]);
+      _define_property$1a(target, key, source[key]);
     });
   }
   return target;
@@ -5048,68 +5048,22 @@ var addDataAttributes = function() {
     ] : [];
   }));
 };
-var useIsMounted = function() {
-  var isMounted = useRef(false);
+var useDidMountEffect = function(effect3, dependencies) {
+  var isMountedRef = useRef(false);
   useEffect(function() {
-    isMounted.current = true;
+    var unmount;
+    if (isMountedRef.current) {
+      unmount = effect3();
+    } else {
+      isMountedRef.current = true;
+    }
     return function() {
-      isMounted.current = false;
-    };
-  }, []);
-  return useCallback(function() {
-    return isMounted.current;
-  }, []);
-};
-var checkElementParentsClassNames = function(element, className) {
-  if (element.classList.contains(className)) {
-    return true;
-  }
-  if (element === document.body) {
-    return false;
-  }
-  if (element.parentElement) {
-    return checkElementParentsClassNames(element.parentElement, className);
-  }
-  return false;
-};
-var isElementOneOfParents = function(element, elToSearch) {
-  if (element === elToSearch) {
-    return true;
-  }
-  if (element === document.body) {
-    return false;
-  }
-  if (element.parentElement) {
-    return isElementOneOfParents(element.parentElement, elToSearch);
-  }
-  return false;
-};
-function useOnClickOutsideWithRef(ref, handler, ignoreRef) {
-  useOnClickOutside(ref, handler, void 0, ignoreRef);
-}
-function useOnClickOutside(ref, handler, ignoreClassName, ignoreRef) {
-  useEffect(function() {
-    var listener = function(event) {
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
-      }
-      if (ignoreClassName !== void 0 && checkElementParentsClassNames(event.target, ignoreClassName) || ignoreRef !== void 0 && ignoreRef.current !== null && isElementOneOfParents(event.target, ignoreRef.current)) {
-        return;
+      if (unmount !== void 0) {
+        unmount();
       }
-      handler(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return function() {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
     };
-  }, [
-    ref,
-    handler,
-    ignoreClassName
-  ]);
-}
+  }, dependencies);
+};
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -6578,7 +6532,7 @@ function _array_without_holes$a(arr) {
   if (Array.isArray(arr))
     return _array_like_to_array$p(arr);
 }
-function _define_property$18(obj, key, value) {
+function _define_property$19(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -6608,7 +6562,7 @@ function _object_spread$16(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$18(target, key, source[key]);
+      _define_property$19(target, key, source[key]);
     });
   }
   return target;
@@ -6683,6 +6637,11 @@ var useDropdown = function(param) {
   }, dependenciesForPositionUpdating);
   return popperData;
 };
+var useLatestRef = function(value) {
+  var ref = useRef(value);
+  ref.current = value;
+  return ref;
+};
 function _array_like_to_array$o(arr, len) {
   if (len == null || len > arr.length)
     len = arr.length;
@@ -6694,25 +6653,39 @@ function _array_with_holes$o(arr) {
   if (Array.isArray(arr))
     return arr;
 }
-function _array_without_holes$9(arr) {
-  if (Array.isArray(arr))
-    return _array_like_to_array$o(arr);
-}
-function _iterable_to_array$9(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
-    return Array.from(iter);
+function _iterable_to_array_limit$n(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i == null)
+    return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _s, _e;
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+      if (i && _arr.length === i)
+        break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null)
+        _i["return"]();
+    } finally {
+      if (_d)
+        throw _e;
+    }
+  }
+  return _arr;
 }
 function _non_iterable_rest$o() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _non_iterable_spread$9() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _to_array(arr) {
-  return _array_with_holes$o(arr) || _iterable_to_array$9(arr) || _unsupported_iterable_to_array$o(arr) || _non_iterable_rest$o();
-}
-function _to_consumable_array$9(arr) {
-  return _array_without_holes$9(arr) || _iterable_to_array$9(arr) || _unsupported_iterable_to_array$o(arr) || _non_iterable_spread$9();
+function _sliced_to_array$n(arr, i) {
+  return _array_with_holes$o(arr) || _iterable_to_array_limit$n(arr, i) || _unsupported_iterable_to_array$o(arr, i) || _non_iterable_rest$o();
 }
 function _unsupported_iterable_to_array$o(o, minLen) {
   if (!o)
@@ -6727,64 +6700,41 @@ function _unsupported_iterable_to_array$o(o, minLen) {
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
     return _array_like_to_array$o(o, minLen);
 }
-var useTweakStyles = function(param) {
-  var innerStyles = param.innerStyles, tweakStyles = param.tweakStyles, className = param.className, currentComponentName = param.currentComponentName;
-  var theme = useTheme();
-  var isMergeDisabled = isNotEmpty(useContext(JssContext).tweakStylesArch);
+var useIntersectionRef = function(options) {
+  var optionsRef = useLatestRef(options);
   return useMemo(function() {
-    var _theme_components;
-    var themeStyles = isNotEmpty(currentComponentName) ? (_theme_components = theme.components) === null || _theme_components === void 0 ? void 0 : _theme_components[currentComponentName] : void 0;
-    var resultStyles = mixStyles(innerStyles, mixStyles(themeStyles, tweakStyles).map(function(style) {
-      return style[className];
-    }));
-    if (isMergeDisabled || resultStyles.length < 2) {
-      return resultStyles;
-    }
-    var _resultStyles = _to_array(resultStyles), maybeInnerStyles = _resultStyles[0], maybeThemeStyles = _resultStyles[1], rest = _resultStyles.slice(2);
-    if (maybeThemeStyles !== (themeStyles === null || themeStyles === void 0 ? void 0 : themeStyles[className]) || // Если нет themeStyles или innerStyles
-    isArrayNotEmpty(rest)) {
-      return [
-        mergeStyles.apply(void 0, [
-          maybeInnerStyles,
-          maybeThemeStyles
-        ].concat(_to_consumable_array$9(rest)))
-      ];
-    }
-    if (!areStylesThemed(maybeInnerStyles)) {
-      themedStyles(maybeInnerStyles, maybeThemeStyles);
-    }
-    return [
-      maybeInnerStyles
-    ];
+    var observer = new IntersectionObserver(function(param) {
+      var _param = _sliced_to_array$n(param, 1), isIntersecting = _param[0].isIntersecting;
+      var current = optionsRef.current;
+      if (current === null || current === void 0 ? void 0 : current.isDisabled) {
+        return;
+      }
+      if (isIntersecting) {
+        var _current_onIntersection;
+        current === null || current === void 0 ? void 0 : (_current_onIntersection = current.onIntersection) === null || _current_onIntersection === void 0 ? void 0 : _current_onIntersection.call(current);
+      } else {
+        var _current_onIntersectionEnd;
+        current === null || current === void 0 ? void 0 : (_current_onIntersectionEnd = current.onIntersectionEnd) === null || _current_onIntersectionEnd === void 0 ? void 0 : _current_onIntersectionEnd.call(current);
+      }
+    });
+    return function(node) {
+      return isNotEmpty(node) ? observer.observe(node) : observer.disconnect();
+    };
   }, [
-    innerStyles,
-    className,
-    currentComponentName,
-    tweakStyles,
-    theme,
-    isMergeDisabled
+    optionsRef
   ]);
 };
-var useDidMountEffect = function(effect3, dependencies) {
-  var isMountedRef = useRef(false);
+var useIsMounted = function() {
+  var isMounted = useRef(false);
   useEffect(function() {
-    var unmount;
-    if (isMountedRef.current) {
-      unmount = effect3();
-    } else {
-      isMountedRef.current = true;
-    }
+    isMounted.current = true;
     return function() {
-      if (unmount !== void 0) {
-        unmount();
-      }
+      isMounted.current = false;
     };
-  }, dependencies);
-};
-var useMergedRefs = function(refs) {
-  return useMemo(function() {
-    return mergeRefs(refs);
-  }, refs);
+  }, []);
+  return useCallback(function() {
+    return isMounted.current;
+  }, []);
 };
 var useMerge = function(one, two) {
   return useMemo(function() {
@@ -6794,6 +6744,68 @@ var useMerge = function(one, two) {
     two
   ]);
 };
+var useMergedRefs = function(refs) {
+  return useMemo(function() {
+    return mergeRefs(refs);
+  }, refs);
+};
+var checkElementParentsClassNames = function(element, className) {
+  if (element.classList.contains(className)) {
+    return true;
+  }
+  if (element === document.body) {
+    return false;
+  }
+  if (element.parentElement) {
+    return checkElementParentsClassNames(element.parentElement, className);
+  }
+  return false;
+};
+var isElementOneOfParents = function(element, elToSearch) {
+  if (element === elToSearch) {
+    return true;
+  }
+  if (element === document.body) {
+    return false;
+  }
+  if (element.parentElement) {
+    return isElementOneOfParents(element.parentElement, elToSearch);
+  }
+  return false;
+};
+function useOnClickOutsideWithRef(refOrGetter, handler, ignoreRef) {
+  useOnClickOutside(refOrGetter, handler, void 0, ignoreRef);
+}
+function useOnClickOutside(refOrGetter, handler, ignoreClassName, ignoreRef) {
+  var optionsRef = useLatestRef({
+    refOrGetter,
+    ignoreRef,
+    ignoreClassName,
+    handler
+  });
+  useEffect(function() {
+    var listener = function(event) {
+      var _options_refOrGetter, _options_ignoreRef;
+      var options = optionsRef.current;
+      var elem = isFunction$1(options.refOrGetter) ? options.refOrGetter() : (_options_refOrGetter = options.refOrGetter) === null || _options_refOrGetter === void 0 ? void 0 : _options_refOrGetter.current;
+      var ignoreElem = (_options_ignoreRef = options.ignoreRef) === null || _options_ignoreRef === void 0 ? void 0 : _options_ignoreRef.current;
+      var target = event.target;
+      if (isEmpty(elem) || // Do nothing if clicking ref's element or descendent elements
+      elem.contains(target) || isNotEmpty(options.ignoreClassName) && checkElementParentsClassNames(target, options.ignoreClassName) || isNotEmpty(ignoreElem) && isElementOneOfParents(target, ignoreElem)) {
+        return;
+      }
+      options.handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return function() {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [
+    optionsRef
+  ]);
+}
 function _array_like_to_array$n(arr, len) {
   if (len == null || len > arr.length)
     len = arr.length;
@@ -6805,39 +6817,25 @@ function _array_with_holes$n(arr) {
   if (Array.isArray(arr))
     return arr;
 }
-function _iterable_to_array_limit$n(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-  if (_i == null)
-    return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _s, _e;
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-      if (i && _arr.length === i)
-        break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null)
-        _i["return"]();
-    } finally {
-      if (_d)
-        throw _e;
-    }
-  }
-  return _arr;
+function _array_without_holes$9(arr) {
+  if (Array.isArray(arr))
+    return _array_like_to_array$n(arr);
+}
+function _iterable_to_array$9(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
+    return Array.from(iter);
 }
 function _non_iterable_rest$n() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$n(arr, i) {
-  return _array_with_holes$n(arr) || _iterable_to_array_limit$n(arr, i) || _unsupported_iterable_to_array$n(arr, i) || _non_iterable_rest$n();
+function _non_iterable_spread$9() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _to_array(arr) {
+  return _array_with_holes$n(arr) || _iterable_to_array$9(arr) || _unsupported_iterable_to_array$n(arr) || _non_iterable_rest$n();
+}
+function _to_consumable_array$9(arr) {
+  return _array_without_holes$9(arr) || _iterable_to_array$9(arr) || _unsupported_iterable_to_array$n(arr) || _non_iterable_spread$9();
 }
 function _unsupported_iterable_to_array$n(o, minLen) {
   if (!o)
@@ -6852,28 +6850,43 @@ function _unsupported_iterable_to_array$n(o, minLen) {
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
     return _array_like_to_array$n(o, minLen);
 }
-var useIntersectionRef = function(options) {
-  var optionsRef = useRef(options);
-  optionsRef.current = options;
+var useTweakStyles = function(param) {
+  var innerStyles = param.innerStyles, tweakStyles = param.tweakStyles, className = param.className, currentComponentName = param.currentComponentName;
+  var theme = useTheme();
+  var isMergeDisabled = isNotEmpty(useContext(JssContext).tweakStylesArch);
   return useMemo(function() {
-    var observer = new IntersectionObserver(function(param) {
-      var _param = _sliced_to_array$n(param, 1), isIntersecting = _param[0].isIntersecting;
-      var current = optionsRef.current;
-      if (current === null || current === void 0 ? void 0 : current.isDisabled) {
-        return;
-      }
-      if (isIntersecting) {
-        var _current_onIntersection;
-        current === null || current === void 0 ? void 0 : (_current_onIntersection = current.onIntersection) === null || _current_onIntersection === void 0 ? void 0 : _current_onIntersection.call(current);
-      } else {
-        var _current_onIntersectionEnd;
-        current === null || current === void 0 ? void 0 : (_current_onIntersectionEnd = current.onIntersectionEnd) === null || _current_onIntersectionEnd === void 0 ? void 0 : _current_onIntersectionEnd.call(current);
-      }
-    });
-    return function(node) {
-      return isNotEmpty(node) ? observer.observe(node) : observer.disconnect();
-    };
-  }, []);
+    var _theme_components;
+    var themeStyles = isNotEmpty(currentComponentName) ? (_theme_components = theme.components) === null || _theme_components === void 0 ? void 0 : _theme_components[currentComponentName] : void 0;
+    var resultStyles = mixStyles(innerStyles, mixStyles(themeStyles, tweakStyles).map(function(style) {
+      return style[className];
+    }));
+    if (isMergeDisabled || resultStyles.length < 2) {
+      return resultStyles;
+    }
+    var _resultStyles = _to_array(resultStyles), maybeInnerStyles = _resultStyles[0], maybeThemeStyles = _resultStyles[1], rest = _resultStyles.slice(2);
+    if (maybeThemeStyles !== (themeStyles === null || themeStyles === void 0 ? void 0 : themeStyles[className]) || // Если нет themeStyles или innerStyles
+    isArrayNotEmpty(rest)) {
+      return [
+        mergeStyles.apply(void 0, [
+          maybeInnerStyles,
+          maybeThemeStyles
+        ].concat(_to_consumable_array$9(rest)))
+      ];
+    }
+    if (!areStylesThemed(maybeInnerStyles)) {
+      themedStyles(maybeInnerStyles, maybeThemeStyles);
+    }
+    return [
+      maybeInnerStyles
+    ];
+  }, [
+    innerStyles,
+    className,
+    currentComponentName,
+    tweakStyles,
+    theme,
+    isMergeDisabled
+  ]);
 };
 const avatarGreen = `  <svg
     width="100%"
@@ -6950,7 +6963,7 @@ var complexIcons = {
   "file-xml": fileXml,
   "file-zip": fileZip
 };
-function _define_property$17(obj, key, value) {
+function _define_property$18(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -6973,7 +6986,7 @@ function _object_spread$15(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$17(target, key, source[key]);
+      _define_property$18(target, key, source[key]);
     });
   }
   return target;
@@ -7853,7 +7866,7 @@ var iconsList = checkIcons({
     ]
   }
 });
-function _define_property$16(obj, key, value) {
+function _define_property$17(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -7876,7 +7889,7 @@ function _object_spread$14(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$16(target, key, source[key]);
+      _define_property$17(target, key, source[key]);
     });
   }
   return target;
@@ -7949,7 +7962,7 @@ var useStyles$W = createThemedStyles("Icon", {
     alignItems: "center"
   }
 });
-function _define_property$15(obj, key, value) {
+function _define_property$16(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -7972,7 +7985,7 @@ function _object_spread$13(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$15(target, key, source[key]);
+      _define_property$16(target, key, source[key]);
     });
   }
   return target;
@@ -8077,7 +8090,7 @@ function _array_without_holes$8(arr) {
   if (Array.isArray(arr))
     return _array_like_to_array$m(arr);
 }
-function _define_property$14(obj, key, value) {
+function _define_property$15(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8138,7 +8151,7 @@ function _object_spread$12(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$14(target, key, source[key]);
+      _define_property$15(target, key, source[key]);
     });
   }
   return target;
@@ -8192,17 +8205,18 @@ var WithPopup = function(param) {
     theme: tweakStyles
   });
   var _useState = _sliced_to_array$m(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
+  var isActive = isOpen && !isDisabled;
   var arrowRef = useRef(null);
-  var handleToggle = function(isActive, event) {
+  var handleToggle = function(next, event) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
-    onToggle === null || onToggle === void 0 ? void 0 : onToggle(isActive, event);
-    setIsOpen(isActive);
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(next, event);
+    setIsOpen(next);
   };
   var handleClose = function(event) {
     handleToggle(false, event);
   };
   var _useFloating = useFloating({
-    open: isOpen && !isDisabled,
+    open: isActive,
     middleware: [
       offset$2(popupOffset),
       canBeFlipped && flip$2({
@@ -8255,7 +8269,7 @@ var WithPopup = function(param) {
   var triggerElement = applyAction(trigger, {
     referenceProps: !isTriggerWrapped ? referenceProps : void 0,
     triggerProps: _object_spread$12({
-      isActive: isOpen,
+      isActive,
       isDisabled
     }, !isTriggerWrapped && _object_spread$12({
       data,
@@ -8266,7 +8280,7 @@ var WithPopup = function(param) {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       isTriggerWrapped ? /* @__PURE__ */ jsx("div", _object_spread_props$S(_object_spread$12({
-        className: clsx(classes.trigger, (_obj2 = {}, _define_property$14(_obj2, classes.clickable, eventType === "click"), _define_property$14(_obj2, classes.disabled, isDisabled), _define_property$14(_obj2, classes.active, isOpen), _obj2))
+        className: clsx(classes.trigger, (_obj2 = {}, _define_property$15(_obj2, classes.clickable, eventType === "click"), _define_property$15(_obj2, classes.disabled, isDisabled), _define_property$15(_obj2, classes.active, isActive), _obj2))
       }, referenceProps, addDataAttributes$1(data, testId)), {
         children: triggerElement
       })) : triggerElement,
@@ -8338,7 +8352,7 @@ var useStyles$U = createThemedStyles("ListItem", {
     flexGrow: 1
   }
 });
-function _define_property$13(obj, key, value) {
+function _define_property$14(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8361,7 +8375,7 @@ function _object_spread$11(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$13(target, key, source[key]);
+      _define_property$14(target, key, source[key]);
     });
   }
   return target;
@@ -8402,7 +8416,7 @@ var ListItem = function(param) {
         className: classes.spacer
       }),
       /* @__PURE__ */ jsxs("div", _object_spread_props$R(_object_spread$11({
-        className: clsx(classes.root, classes[view], (_obj2 = {}, _define_property$13(_obj2, classes.disabledItem, isDisabled), _define_property$13(_obj2, classes.withIconGap, withIconGap), _define_property$13(_obj2, classes.focused, isFocused), _obj2))
+        className: clsx(classes.root, classes[view], (_obj2 = {}, _define_property$14(_obj2, classes.disabledItem, isDisabled), _define_property$14(_obj2, classes.withIconGap, withIconGap), _define_property$14(_obj2, classes.focused, isFocused), _obj2))
       }, addClickHandler(onClick, !isDisabled), addDataTestId(testId), addDataAttributes(_object_spread_props$R(_object_spread$11({}, data), {
         disabled: isDisabled ? true : void 0
       }))), {
@@ -8450,7 +8464,7 @@ var withPopupStyles$1 = {
     width: "100%"
   }
 };
-function _define_property$12(obj, key, value) {
+function _define_property$13(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8473,7 +8487,7 @@ function _object_spread$10(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$12(target, key, source[key]);
+      _define_property$13(target, key, source[key]);
     });
   }
   return target;
@@ -8557,7 +8571,7 @@ var List = function(param) {
   }));
 };
 var ANIMATION_TIMEOUT = 150;
-function _define_property$11(obj, key, value) {
+function _define_property$12(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8580,7 +8594,7 @@ function _object_spread$$(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$11(target, key, source[key]);
+      _define_property$12(target, key, source[key]);
     });
   }
   return target;
@@ -8639,7 +8653,7 @@ function _array_with_holes$l(arr) {
   if (Array.isArray(arr))
     return arr;
 }
-function _define_property$10(obj, key, value) {
+function _define_property$11(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8693,7 +8707,7 @@ function _object_spread$_(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$10(target, key, source[key]);
+      _define_property$11(target, key, source[key]);
     });
   }
   return target;
@@ -8836,7 +8850,7 @@ var useStyles$R = createThemedStyles("AddButton", {
     width: "100%"
   }
 });
-function _define_property$$(obj, key, value) {
+function _define_property$10(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8859,7 +8873,7 @@ function _object_spread$Z(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$$(target, key, source[key]);
+      _define_property$10(target, key, source[key]);
     });
   }
   return target;
@@ -9059,7 +9073,7 @@ var useStyles$O = createThemedStyles("ThemedPreloader", {
     color: "currentColor"
   }
 });
-function _define_property$_(obj, key, value) {
+function _define_property$$(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -9082,7 +9096,7 @@ function _object_spread$Y(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$_(target, key, source[key]);
+      _define_property$$(target, key, source[key]);
     });
   }
   return target;
@@ -9127,7 +9141,7 @@ var ThemedPreloader = function(param) {
     currentComponentName: "ThemedPreloader"
   });
   return /* @__PURE__ */ jsx("div", _object_spread_props$N(_object_spread$Y({
-    className: clsx(classes.root, classes[type], _define_property$_({}, classes.currentColor, useCurrentColor))
+    className: clsx(classes.root, classes[type], _define_property$$({}, classes.currentColor, useCurrentColor))
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: type === "dots" ? /* @__PURE__ */ jsx(DotsPreloader, {
       tweakStyles: tweakDotsPreloaderStyles
@@ -9308,7 +9322,7 @@ var dotsPreloaderStyles = {
 var getPreloaderStyles = function(size2) {
   return size2 === "s" || size2 === "m" ? dotsPreloaderStyles : void 0;
 };
-function _define_property$Z(obj, key, value) {
+function _define_property$_(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -9331,7 +9345,7 @@ function _object_spread$X(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$Z(target, key, source[key]);
+      _define_property$_(target, key, source[key]);
     });
   }
   return target;
@@ -9427,13 +9441,13 @@ var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
   return /* @__PURE__ */ jsxs("button", _object_spread_props$M(_object_spread$X({
     ref,
     type,
-    className: clsx(classes.root, classes[size2], classes[view], (_obj2 = {}, _define_property$Z(_obj2, classes.disabled, isDisabled), _define_property$Z(_obj2, classes.fullWidth, isFullWidth), _define_property$Z(_obj2, classes.inline, isInline), _define_property$Z(_obj2, classes.active, isActive), _define_property$Z(_obj2, classes.loading, isLoading), _define_property$Z(_obj2, classes.onlyIcon, hasIcon && !hasChildren), _obj2)),
+    className: clsx(classes.root, classes[size2], classes[view], (_obj2 = {}, _define_property$_(_obj2, classes.disabled, isDisabled), _define_property$_(_obj2, classes.fullWidth, isFullWidth), _define_property$_(_obj2, classes.inline, isInline), _define_property$_(_obj2, classes.active, isActive), _define_property$_(_obj2, classes.loading, isLoading), _define_property$_(_obj2, classes.onlyIcon, hasIcon && !hasChildren), _obj2)),
     tabIndex: shouldSkipTabNavigation ? -1 : void 0,
     disabled: hasNoAction
   }, interactions, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       /* @__PURE__ */ jsxs("span", {
-        className: clsx(classes.content, (_obj1 = {}, _define_property$Z(_obj1, classes.iconFromRight, hasChildren && hasIcon && iconPosition === "right"), _define_property$Z(_obj1, classes.iconFromLeft, hasChildren && hasIcon && iconPosition === "left"), _obj1)),
+        className: clsx(classes.content, (_obj1 = {}, _define_property$_(_obj1, classes.iconFromRight, hasChildren && hasIcon && iconPosition === "right"), _define_property$_(_obj1, classes.iconFromLeft, hasChildren && hasIcon && iconPosition === "left"), _obj1)),
         children: [
           hasIcon && /* @__PURE__ */ jsx("span", {
             className: classes.icon,
@@ -9494,7 +9508,7 @@ var useStyles$M = createThemedStyles("Checkbox", {
     flexDirection: "row-reverse"
   }
 });
-function _define_property$Y(obj, key, value) {
+function _define_property$Z(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -9517,7 +9531,7 @@ function _object_spread$W(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$Y(target, key, source[key]);
+      _define_property$Z(target, key, source[key]);
     });
   }
   return target;
@@ -9561,7 +9575,7 @@ function Checkbox(param) {
   };
   var _obj2;
   return /* @__PURE__ */ jsxs("label", _object_spread_props$L(_object_spread$W({
-    className: clsx(classes.root, (_obj2 = {}, _define_property$Y(_obj2, classes.checked, isSelected), _define_property$Y(_obj2, classes.invalid, isInvalid), _define_property$Y(_obj2, classes.disabled, isDisabled), _define_property$Y(_obj2, classes.labelPositionLeft, labelPosition === "left"), _obj2))
+    className: clsx(classes.root, (_obj2 = {}, _define_property$Z(_obj2, classes.checked, isSelected), _define_property$Z(_obj2, classes.invalid, isInvalid), _define_property$Z(_obj2, classes.disabled, isDisabled), _define_property$Z(_obj2, classes.labelPositionLeft, labelPosition === "left"), _obj2))
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       /* @__PURE__ */ jsx("input", _object_spread$W({
@@ -9613,7 +9627,7 @@ var useStyles$L = createThemedStyles("CloseButton", {
     }
   }
 });
-function _define_property$X(obj, key, value) {
+function _define_property$Y(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -9636,7 +9650,7 @@ function _object_spread$V(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$X(target, key, source[key]);
+      _define_property$Y(target, key, source[key]);
     });
   }
   return target;
@@ -9812,7 +9826,7 @@ var useStyles$J = createThemedStyles("CssBaseline", {
   },
   root: {}
 });
-function _define_property$W(obj, key, value) {
+function _define_property$X(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -9835,7 +9849,7 @@ function _object_spread$U(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$W(target, key, source[key]);
+      _define_property$X(target, key, source[key]);
     });
   }
   return target;
@@ -9883,7 +9897,7 @@ var useStyles$I = createThemedStyles("WithMessages", {
   },
   children: {}
 });
-function _define_property$V(obj, key, value) {
+function _define_property$W(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -9906,7 +9920,7 @@ function _object_spread$T(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$V(target, key, source[key]);
+      _define_property$W(target, key, source[key]);
     });
   }
   return target;
@@ -9950,7 +9964,7 @@ var WithMessages = /* @__PURE__ */ forwardRef(function(param, ref) {
   }, addDataAttributes$1(data, testId)), {
     children: [
       isReactNodeNotEmpty(children) && /* @__PURE__ */ jsx("div", {
-        className: clsx(classes.children, (_obj2 = {}, _define_property$V(_obj2, classes.horizontal, controlsDirection === "horizontal"), _define_property$V(_obj2, classes.vertical, controlsDirection === "vertical"), _obj2)),
+        className: clsx(classes.children, (_obj2 = {}, _define_property$W(_obj2, classes.horizontal, controlsDirection === "horizontal"), _define_property$W(_obj2, classes.vertical, controlsDirection === "vertical"), _obj2)),
         children
       }),
       (shouldShowError || shouldShowInfo) && /* @__PURE__ */ jsxs("div", {
@@ -10123,7 +10137,7 @@ var useStyles$H = createThemedStyles("ControlWrapper", {
     borderRadius: 0
   }
 });
-function _define_property$U(obj, key, value) {
+function _define_property$V(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -10146,7 +10160,7 @@ function _object_spread$S(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$U(target, key, source[key]);
+      _define_property$V(target, key, source[key]);
     });
   }
   return target;
@@ -10191,11 +10205,11 @@ var ControlWrapper = function(param) {
   });
   var _obj2, _obj1, _obj22;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$I(_object_spread$S({
-    className: clsx(classes.controlWrapper, isNotEmpty(groupPlacement) && classes["placement-".concat(groupPlacement)], isNotEmpty(size2) && classes[size2], (_obj2 = {}, _define_property$U(_obj2, classes.invalid, isInvalid), _define_property$U(_obj2, classes.focused, isFocused), _define_property$U(_obj2, classes.withValue, hasValue), _define_property$U(_obj2, classes.disabled, isDisabled), _define_property$U(_obj2, classes.loading, isLoading), _define_property$U(_obj2, classes.minContent, !isFullWidth), _obj2))
+    className: clsx(classes.controlWrapper, isNotEmpty(groupPlacement) && classes["placement-".concat(groupPlacement)], isNotEmpty(size2) && classes[size2], (_obj2 = {}, _define_property$V(_obj2, classes.invalid, isInvalid), _define_property$V(_obj2, classes.focused, isFocused), _define_property$V(_obj2, classes.withValue, hasValue), _define_property$V(_obj2, classes.disabled, isDisabled), _define_property$V(_obj2, classes.loading, isLoading), _define_property$V(_obj2, classes.minContent, !isFullWidth), _obj2))
   }, addDataAttributes$1(data, testId)), {
     children: [
       isReactNodeNotEmpty(label) && /* @__PURE__ */ jsx("div", {
-        className: clsx(classes.label, (_obj1 = {}, _define_property$U(_obj1, classes.requiredLabel, isRequired), _define_property$U(_obj1, classes.disabledLabel, isDisabled), _define_property$U(_obj1, classes.activeLabel, isActive), _obj1)),
+        className: clsx(classes.label, (_obj1 = {}, _define_property$V(_obj1, classes.requiredLabel, isRequired), _define_property$V(_obj1, classes.disabledLabel, isDisabled), _define_property$V(_obj1, classes.activeLabel, isActive), _obj1)),
         children: label
       }),
       /* @__PURE__ */ jsxs("div", {
@@ -10216,7 +10230,7 @@ var ControlWrapper = function(param) {
                 })
               })),
               hasEndIcon && /* @__PURE__ */ jsx("div", _object_spread_props$I(_object_spread$S({
-                className: clsx(classes.icon, classes.endIcon, (_obj22 = {}, _define_property$U(_obj22, classes.activeIcon, !isDisabled && isNotEmpty(onIconClick)), _define_property$U(_obj22, classes.customIcon, !isString(icon)), _obj22))
+                className: clsx(classes.icon, classes.endIcon, (_obj22 = {}, _define_property$V(_obj22, classes.activeIcon, !isDisabled && isNotEmpty(onIconClick)), _define_property$V(_obj22, classes.customIcon, !isString(icon)), _obj22))
               }, addClickHandler(onIconClick, !isDisabled), addDataTestId(testId, "icon")), {
                 children: /* @__PURE__ */ jsx("div", {
                   className: classes.iconInner,
@@ -10354,7 +10368,7 @@ function _async_to_generator$5(fn3) {
     });
   };
 }
-function _define_property$T(obj, key, value) {
+function _define_property$U(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -10408,7 +10422,7 @@ function _object_spread$R(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$T(target, key, source[key]);
+      _define_property$U(target, key, source[key]);
     });
   }
   return target;
@@ -10668,7 +10682,7 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
   ]);
   var _obj2;
   var props = _object_spread$R({
-    className: clsx(classes.input, (_obj2 = {}, _define_property$T(_obj2, classes.withUnits, hasUnits), _define_property$T(_obj2, classes.withValue, hasValue), _define_property$T(_obj2, classes.withLabel, isReactNodeNotEmpty(label)), _define_property$T(_obj2, classes.autoSized, isAutoSized), _define_property$T(_obj2, classes.focusedInput, isFocused), _define_property$T(_obj2, classes.disabledInput, isDisabled), _define_property$T(_obj2, classes.invalidInput, isInvalid), _obj2)),
+    className: clsx(classes.input, (_obj2 = {}, _define_property$U(_obj2, classes.withUnits, hasUnits), _define_property$U(_obj2, classes.withValue, hasValue), _define_property$U(_obj2, classes.withLabel, isReactNodeNotEmpty(label)), _define_property$U(_obj2, classes.autoSized, isAutoSized), _define_property$U(_obj2, classes.focusedInput, isFocused), _define_property$U(_obj2, classes.disabledInput, isDisabled), _define_property$U(_obj2, classes.invalidInput, isInvalid), _obj2)),
     style: hasUnits && hasValue ? {
       "--units-width": "".concat(unitsWidth, "px")
     } : void 0,
@@ -10741,7 +10755,7 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
     ]
   });
 });
-function _define_property$S(obj, key, value) {
+function _define_property$T(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -10764,7 +10778,7 @@ function _object_spread$Q(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$S(target, key, source[key]);
+      _define_property$T(target, key, source[key]);
     });
   }
   return target;
@@ -10860,7 +10874,7 @@ var useStyles$F = createThemedStyles("DateInput", {
     position: "relative"
   }
 });
-function _define_property$R(obj, key, value) {
+function _define_property$S(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -10883,7 +10897,7 @@ function _object_spread$P(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$R(target, key, source[key]);
+      _define_property$S(target, key, source[key]);
     });
   }
   return target;
@@ -10986,9 +11000,9 @@ var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
   };
   return /* @__PURE__ */ jsx("div", _object_spread_props$G(_object_spread$P({
-    className: clsx(classes.root, className),
-    onClick
-  }, addDataAttributes(data)), {
+    className: clsx(classes.root, className)
+  }, addDataAttributes$1(data)), {
+    onClick,
     children: /* @__PURE__ */ jsx(Input, _object_spread_props$G(_object_spread$P({}, inputProps), {
       ref,
       value: isRange ? "".concat(startDate).concat(endDate) : date,
@@ -11001,6 +11015,109 @@ var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
   }));
 });
 const reactDatepicker = "";
+function _assert_this_initialized$1(self2) {
+  if (self2 === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self2;
+}
+function _class_call_check$1(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+function _define_property$R(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _get_prototype_of$1(o) {
+  _get_prototype_of$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o2) {
+    return o2.__proto__ || Object.getPrototypeOf(o2);
+  };
+  return _get_prototype_of$1(o);
+}
+function _inherits$1(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass)
+    _set_prototype_of$1(subClass, superClass);
+}
+function _possible_constructor_return$1(self2, call) {
+  if (call && (_type_of$1(call) === "object" || typeof call === "function")) {
+    return call;
+  }
+  return _assert_this_initialized$1(self2);
+}
+function _set_prototype_of$1(o, p) {
+  _set_prototype_of$1 = Object.setPrototypeOf || function setPrototypeOf(o2, p2) {
+    o2.__proto__ = p2;
+    return o2;
+  };
+  return _set_prototype_of$1(o, p);
+}
+function _type_of$1(obj) {
+  "@swc/helpers - typeof";
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _is_native_reflect_construct$1() {
+  if (typeof Reflect === "undefined" || !Reflect.construct)
+    return false;
+  if (Reflect.construct.sham)
+    return false;
+  if (typeof Proxy === "function")
+    return true;
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
+    }));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function _create_super$1(Derived) {
+  var hasNativeReflectConstruct = _is_native_reflect_construct$1();
+  return function _createSuperInternal() {
+    var Super = _get_prototype_of$1(Derived), result;
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _get_prototype_of$1(this).constructor;
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+    return _possible_constructor_return$1(this, result);
+  };
+}
+var DatePickerBase = /* @__PURE__ */ function(ReactDatePicker2) {
+  _inherits$1(DatePickerBase2, ReactDatePicker2);
+  var _super = _create_super$1(DatePickerBase2);
+  function DatePickerBase2(props) {
+    _class_call_check$1(this, DatePickerBase2);
+    var _this;
+    _this = _super.call(this, props);
+    _define_property$R(_assert_this_initialized$1(_this), "handleClickOutside", void 0);
+    _this.handleClickOutside = _this.handleCalendarClickOutside;
+    _this.handleCalendarClickOutside = doNothing;
+    return _this;
+  }
+  return DatePickerBase2;
+}(ReactDatePicker);
 var inputStyles$4 = {
   tweakControlWrapper: {
     endIcon: {
@@ -12707,9 +12824,6 @@ var PopperContainer = function(props) {
     root: document.body
   }, props));
 };
-var DEFAULT_DATE_FORMAT$2 = "dd.MM.yyyy";
-var _ReactDatePicker_default;
-var DatePickerComponent = (_ReactDatePicker_default = ReactDatePicker.default) !== null && _ReactDatePicker_default !== void 0 ? _ReactDatePicker_default : ReactDatePicker;
 function buildFormatLongFn(args) {
   return (options = {}) => {
     const width = options.width ? String(options.width) : args.defaultWidth;
@@ -13889,6 +14003,12 @@ const ru = {
     firstWeekContainsDate: 1
   }
 };
+var DEFAULT_DATE_FORMAT$2 = "dd.MM.yyyy";
+var OUTSIDE_CLICK_IGNORE_CLASS = "react-datepicker-ignore-onclickoutside";
+var LocalesMap = {
+  ru,
+  en: enUS
+};
 var getDateFormatter = function(dateFormat) {
   return function(date) {
     return isNotEmpty(date) ? format(date, dateFormat) : "";
@@ -13903,15 +14023,6 @@ var getDateValueParser = function(dateFormat) {
 var areDatesEquals = function(date1, date2) {
   return isEmpty(date1) && isEmpty(date2) || isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2);
 };
-var preparateDatePickerLocale = function(locale) {
-  if (locale === "ru") {
-    return ru;
-  }
-  if (locale === "en") {
-    return enUS;
-  }
-  return locale;
-};
 var useStyles$B = createThemedStyles("DatePicker", {
   root: {
     width: "100%",
@@ -14156,6 +14267,11 @@ var DatePicker = /* @__PURE__ */ forwardRef(function(_param, ref) {
   }, [
     dateFormat
   ]), formatDate = _useMemo.formatDate, parseDateValue = _useMemo.parseDateValue;
+  var datePickerRef = useRef();
+  var componentRef = useMergedRefs([
+    ref,
+    datePickerRef
+  ]);
   var _useState = _sliced_to_array$h(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
   var _useState1 = _sliced_to_array$h(useState(formatDate(selectedDate)), 2), dateValue = _useState1[0], setDateValue = _useState1[1];
   var _useState2 = _sliced_to_array$h(useState(startDate), 2), start2 = _useState2[0], setStart = _useState2[1];
@@ -14261,14 +14377,21 @@ var DatePicker = /* @__PURE__ */ forwardRef(function(_param, ref) {
     startDate,
     endDate
   ]);
+  useOnClickOutside(function() {
+    var _datePickerRef_current_calendar_containerRef, _datePickerRef_current_calendar, _datePickerRef_current;
+    return (_datePickerRef_current = datePickerRef.current) === null || _datePickerRef_current === void 0 ? void 0 : (_datePickerRef_current_calendar = _datePickerRef_current.calendar) === null || _datePickerRef_current_calendar === void 0 ? void 0 : (_datePickerRef_current_calendar_containerRef = _datePickerRef_current_calendar.containerRef) === null || _datePickerRef_current_calendar_containerRef === void 0 ? void 0 : _datePickerRef_current_calendar_containerRef.current;
+  }, function(event) {
+    var _datePickerRef_current;
+    return (_datePickerRef_current = datePickerRef.current) === null || _datePickerRef_current === void 0 ? void 0 : _datePickerRef_current.handleClickOutside(event);
+  }, OUTSIDE_CLICK_IGNORE_CLASS);
   return /* @__PURE__ */ jsx("div", _object_spread_props$C(_object_spread$H({
     className: classes.root
-  }, addDataAttributes(data)), {
-    children: /* @__PURE__ */ jsx(DatePickerComponent, _object_spread$H({
-      ref,
+  }, addDataAttributes$1(data)), {
+    children: /* @__PURE__ */ jsx(DatePickerBase, _object_spread$H({
+      ref: componentRef,
       minDate,
       maxDate,
-      locale: preparateDatePickerLocale(locale),
+      locale: isString(locale) ? LocalesMap[locale] : locale,
       dateFormat,
       placeholderText: placeholder,
       calendarStartDay,
@@ -20008,6 +20131,10 @@ var useStyles$o = createThemedStyles("FiltersPaneSearch", {
       cursor: "default"
     }
   },
+  hasValue: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN
+  },
   selectWrapper: {
     position: "relative",
     display: "flex",
@@ -20237,7 +20364,7 @@ function FiltersPaneSearch(param) {
   };
   var _obj2;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$p(_object_spread$q({
-    className: clsx(classes.root, (_obj2 = {}, _define_property$r(_obj2, classes.focused, isInputFocused), _define_property$r(_obj2, classes.disabled, isDisabled), _obj2)),
+    className: clsx(classes.root, (_obj2 = {}, _define_property$r(_obj2, classes.focused, isInputFocused), _define_property$r(_obj2, classes.disabled, isDisabled), _define_property$r(_obj2, classes.hasValue, isArrayLikeNotEmpty(value)), _obj2)),
     ref: refRoot
   }, addDataAttributes$1(data, testId)), {
     children: [
@@ -20259,7 +20386,7 @@ function FiltersPaneSearch(param) {
       /* @__PURE__ */ jsxs("div", {
         className: classes.selectWrapper,
         children: [
-          fields.length > 0 && /* @__PURE__ */ jsxs("div", _object_spread_props$p(_object_spread$q({
+          isArrayNotEmpty(fields) && /* @__PURE__ */ jsxs("div", _object_spread_props$p(_object_spread$q({
             className: classes.selectBlock,
             onClick: !isDisabled ? function() {
               return setIsOpen(!isOpen);
@@ -32717,6 +32844,7 @@ export {
   useDropdown,
   useIntersectionRef,
   useIsMounted,
+  useLatestRef,
   useMerge,
   useMergedRefs,
   useMixedStyles,