@true-engineering/true-react-common-ui-kit 3.10.0 → 3.12.0

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

@@ -1082,6 +1082,7 @@ var helpers = {
 var SLIDE_UP_POSITION_START = 15;
 var SLIDE_UP_POSITION_END = 0;
 var animations = {
+  defaultTransition: "0.25s ease-in-out",
   // Если понадобится, сюда можно пробросить параметры через useTheme props
   slideUp: {
     "slide-up-enter": {
@@ -4599,7 +4600,7 @@ var phoneInfo = [
     ]
   }
 ];
-function _array_like_to_array$s(arr, len) {
+function _array_like_to_array$r(arr, len) {
   if (len == null || len > arr.length)
     len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++)
@@ -4608,7 +4609,7 @@ function _array_like_to_array$s(arr, len) {
 }
 function _array_without_holes$8(arr) {
   if (Array.isArray(arr))
-    return _array_like_to_array$s(arr);
+    return _array_like_to_array$r(arr);
 }
 function _iterable_to_array$8(iter) {
   if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
@@ -4618,20 +4619,20 @@ function _non_iterable_spread$8() {
   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_consumable_array$8(arr) {
-  return _array_without_holes$8(arr) || _iterable_to_array$8(arr) || _unsupported_iterable_to_array$s(arr) || _non_iterable_spread$8();
+  return _array_without_holes$8(arr) || _iterable_to_array$8(arr) || _unsupported_iterable_to_array$r(arr) || _non_iterable_spread$8();
 }
-function _unsupported_iterable_to_array$s(o, minLen) {
+function _unsupported_iterable_to_array$r(o, minLen) {
   if (!o)
     return;
   if (typeof o === "string")
-    return _array_like_to_array$s(o, minLen);
+    return _array_like_to_array$r(o, minLen);
   var n = Object.prototype.toString.call(o).slice(8, -1);
   if (n === "Object" && o.constructor)
     n = o.constructor.name;
   if (n === "Map" || n === "Set")
     return Array.from(n);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
-    return _array_like_to_array$s(o, minLen);
+    return _array_like_to_array$r(o, minLen);
 }
 var findCountryByCode = function(countryCode) {
   var countriesList = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : phoneInfo;
@@ -4714,18 +4715,18 @@ var getPhoneMask = function(countryCode) {
   }
   return mask;
 };
-function _array_like_to_array$r(arr, len) {
+function _array_like_to_array$q(arr, len) {
   if (len == null || len > arr.length)
     len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++)
     arr2[i] = arr[i];
   return arr2;
 }
-function _array_with_holes$q(arr) {
+function _array_with_holes$p(arr) {
   if (Array.isArray(arr))
     return arr;
 }
-function _iterable_to_array_limit$q(arr, i) {
+function _iterable_to_array_limit$p(arr, i) {
   var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
   if (_i == null)
     return;
@@ -4753,24 +4754,24 @@ function _iterable_to_array_limit$q(arr, i) {
   }
   return _arr;
 }
-function _non_iterable_rest$q() {
+function _non_iterable_rest$p() {
   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$q(arr, i) {
-  return _array_with_holes$q(arr) || _iterable_to_array_limit$q(arr, i) || _unsupported_iterable_to_array$r(arr, i) || _non_iterable_rest$q();
+function _sliced_to_array$p(arr, i) {
+  return _array_with_holes$p(arr) || _iterable_to_array_limit$p(arr, i) || _unsupported_iterable_to_array$q(arr, i) || _non_iterable_rest$p();
 }
-function _unsupported_iterable_to_array$r(o, minLen) {
+function _unsupported_iterable_to_array$q(o, minLen) {
   if (!o)
     return;
   if (typeof o === "string")
-    return _array_like_to_array$r(o, minLen);
+    return _array_like_to_array$q(o, minLen);
   var n = Object.prototype.toString.call(o).slice(8, -1);
   if (n === "Object" && o.constructor)
     n = o.constructor.name;
   if (n === "Map" || n === "Set")
     return Array.from(n);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
-    return _array_like_to_array$r(o, minLen);
+    return _array_like_to_array$q(o, minLen);
 }
 var rgba = hexToRgba;
 var transformToKebab = function(string) {
@@ -4893,7 +4894,7 @@ var trimStringToMaxLength = function(val, maxLength) {
 var addDataAttributes = function() {
   var data = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
   return Object.fromEntries(Object.entries(data).map(function(param) {
-    var _param = _sliced_to_array$q(param, 2), key = _param[0], value = _param[1];
+    var _param = _sliced_to_array$p(param, 2), key = _param[0], value = _param[1];
     return isString(value) && isStringNotEmpty(value) || isNotEmpty(value) ? [
       "data-".concat(transformToKebab(key)),
       value
@@ -6419,7 +6420,7 @@ function usePopper(referenceElement, popperElement, _temp) {
   }, [enabled, referenceElement, popperElement]);
   return popperState;
 }
-function _array_like_to_array$q(arr, len) {
+function _array_like_to_array$p(arr, len) {
   if (len == null || len > arr.length)
     len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++)
@@ -6428,7 +6429,7 @@ function _array_like_to_array$q(arr, len) {
 }
 function _array_without_holes$7(arr) {
   if (Array.isArray(arr))
-    return _array_like_to_array$q(arr);
+    return _array_like_to_array$p(arr);
 }
 function _define_property$_(obj, key, value) {
   if (key in obj) {
@@ -6466,20 +6467,20 @@ function _object_spread$Z(target) {
   return target;
 }
 function _to_consumable_array$7(arr) {
-  return _array_without_holes$7(arr) || _iterable_to_array$7(arr) || _unsupported_iterable_to_array$q(arr) || _non_iterable_spread$7();
+  return _array_without_holes$7(arr) || _iterable_to_array$7(arr) || _unsupported_iterable_to_array$p(arr) || _non_iterable_spread$7();
 }
-function _unsupported_iterable_to_array$q(o, minLen) {
+function _unsupported_iterable_to_array$p(o, minLen) {
   if (!o)
     return;
   if (typeof o === "string")
-    return _array_like_to_array$q(o, minLen);
+    return _array_like_to_array$p(o, minLen);
   var n = Object.prototype.toString.call(o).slice(8, -1);
   if (n === "Object" && o.constructor)
     n = o.constructor.name;
   if (n === "Map" || n === "Set")
     return Array.from(n);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
-    return _array_like_to_array$q(o, minLen);
+    return _array_like_to_array$p(o, minLen);
 }
 var useDropdown = function(param) {
   var isOpen = param.isOpen, onDropdownClose = param.onDropdownClose, referenceElement = param.referenceElement, dropdownElement = param.dropdownElement, options = param.options, _param_dependenciesForPositionUpdating = param.dependenciesForPositionUpdating, dependenciesForPositionUpdating = _param_dependenciesForPositionUpdating === void 0 ? [] : _param_dependenciesForPositionUpdating;
@@ -6821,10 +6822,11 @@ var iconsList = checkIcons({
   check: {
     paths: [
       {
-        d: "M9.333 11.252l4.96-4.96a1 1 0 011.414 1.415l-5.667 5.667a1 1 0 01-1.414 0L6.293 11.04a1 1 0 111.414-1.414l1.626 1.626z"
+        d: "m7.5 13.086 7.793-7.793a1 1 0 1 1 1.414 1.414l-8.5 8.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L7.5 13.086Z"
       }
     ]
   },
+  /** @deprecated */
   "check-big": {
     paths: [
       {
@@ -6836,17 +6838,8 @@ var iconsList = checkIcons({
     viewBox: "0 0 20 20",
     paths: [
       {
-        d: "M3 10.5L5.92929 13.4293C5.96834 13.4683 6.03166 13.4683 6.07071 13.4293L13.5 6",
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        stroke: "currentColor",
-        fill: "none"
-      },
-      {
-        d: "M10.2071 13.2929L9.5 12.5858L8.08579 14L8.79289 14.7071L10.2071 13.2929ZM18.2071 7.70711C18.5976 7.31658 18.5976 6.68342 18.2071 6.29289C17.8166 5.90237 17.1834 5.90237 16.7929 6.29289L18.2071 7.70711ZM9.92929 14.4293L10.6364 13.7222L9.92929 14.4293ZM10.0707 14.4293L9.3636 13.7222L10.0707 14.4293ZM8.79289 14.7071L9.22218 15.1364L10.6364 13.7222L10.2071 13.2929L8.79289 14.7071ZM10.7778 15.1364L18.2071 7.70711L16.7929 6.29289L9.3636 13.7222L10.7778 15.1364ZM9.22218 15.1364C9.65176 15.566 10.3482 15.566 10.7778 15.1364L9.3636 13.7222C9.71508 13.3707 10.2849 13.3707 10.6364 13.7222L9.22218 15.1364Z",
-        fill: "currentColor",
-        stroke: "none",
-        fillRule: void 0
+        d: "M14.207 6.707a1 1 0 0 0-1.414-1.414L6 12.086 3.707 9.793a1 1 0 0 0-1.414 1.414l2.93 2.93a1.1 1.1 0 0 0 1.555 0l7.43-7.43Zm4 1a1 1 0 0 0-1.414-1.414L10 13.086l-.5-.5L8.086 14l1.136 1.136a1.1 1.1 0 0 0 1.556 0l7.43-7.429Z",
+        fillRule: "evenodd"
       }
     ]
   },
@@ -7164,7 +7157,7 @@ var iconsList = checkIcons({
   minus: {
     paths: [
       {
-        d: "M16 11H4c-.552 0-1-.448-1-1s.448-1 1-1h12c.552 0 1 .448 1 1s-.448 1-1 1z"
+        d: "M16 11H4a1 1 0 1 1 0-2h12a1 1 0 1 1 0 2Z"
       }
     ]
   },
@@ -7738,7 +7731,8 @@ var useStyles$S = createThemedStyles("ListItem", {
       0,
       ITEM_HORIZONTAL_PADDING$1
     ],
-    transition: "background-color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color",
     cursor: "pointer"
   },
   default: {},
@@ -7871,7 +7865,8 @@ var useStyles$R = createThemedStyles("List", {
       0,
       ITEM_HORIZONTAL_PADDING
     ],
-    transition: "background-color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color",
     cursor: "pointer"
   },
   disabledItem: {
@@ -8014,13 +8009,14 @@ var useStyles$Q = createThemedStyles("AccountInfo", _object_spread$T({
       10
     ],
     fontSize: 14,
-    transition: "color 0.25s ease-in-out"
+    transition: animations.defaultTransition,
+    transitionProperty: "color"
   },
   accountNameOpened: {},
   accountChevron: {
     width: 16,
     height: 16,
-    transition: "ease-in-out 0.25s",
+    transition: animations.defaultTransition,
     transitionProperty: "transform, color"
   },
   accountChevronOpened: {
@@ -8038,14 +8034,14 @@ var useStyles$Q = createThemedStyles("AccountInfo", _object_spread$T({
     height: 32
   }
 }, animations.slideUp));
-function _array_like_to_array$p(arr, len) {
+function _array_like_to_array$o(arr, len) {
   if (len == null || len > arr.length)
     len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++)
     arr2[i] = arr[i];
   return arr2;
 }
-function _array_with_holes$p(arr) {
+function _array_with_holes$o(arr) {
   if (Array.isArray(arr))
     return arr;
 }
@@ -8062,7 +8058,7 @@ function _define_property$T(obj, key, value) {
   }
   return obj;
 }
-function _iterable_to_array_limit$p(arr, i) {
+function _iterable_to_array_limit$o(arr, i) {
   var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
   if (_i == null)
     return;
@@ -8090,7 +8086,7 @@ function _iterable_to_array_limit$p(arr, i) {
   }
   return _arr;
 }
-function _non_iterable_rest$p() {
+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 _object_spread$S(target) {
@@ -8132,21 +8128,21 @@ function _object_spread_props$K(target, source) {
   }
   return target;
 }
-function _sliced_to_array$p(arr, i) {
-  return _array_with_holes$p(arr) || _iterable_to_array_limit$p(arr, i) || _unsupported_iterable_to_array$p(arr, i) || _non_iterable_rest$p();
+function _sliced_to_array$o(arr, i) {
+  return _array_with_holes$o(arr) || _iterable_to_array_limit$o(arr, i) || _unsupported_iterable_to_array$o(arr, i) || _non_iterable_rest$o();
 }
-function _unsupported_iterable_to_array$p(o, minLen) {
+function _unsupported_iterable_to_array$o(o, minLen) {
   if (!o)
     return;
   if (typeof o === "string")
-    return _array_like_to_array$p(o, minLen);
+    return _array_like_to_array$o(o, minLen);
   var n = Object.prototype.toString.call(o).slice(8, -1);
   if (n === "Object" && o.constructor)
     n = o.constructor.name;
   if (n === "Map" || n === "Set")
     return Array.from(n);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
-    return _array_like_to_array$p(o, minLen);
+    return _array_like_to_array$o(o, minLen);
 }
 var AccountInfo = function(param) {
   var data = param.data, testId = param.testId, avatar = param.avatar, tweakStyles = param.tweakStyles, accountName = param.accountName, options = param.options;
@@ -8160,7 +8156,7 @@ var AccountInfo = function(param) {
   });
   var nameRef = useRef(null);
   var dropdownRef = useRef(null);
-  var _useState = _sliced_to_array$p(useState(false), 2), isMenuOpen = _useState[0], setIsMenuOpen = _useState[1];
+  var _useState = _sliced_to_array$o(useState(false), 2), isMenuOpen = _useState[0], setIsMenuOpen = _useState[1];
   var toggleMenu = function(event) {
     event.stopPropagation();
     setIsMenuOpen(function(v) {
@@ -8554,7 +8550,7 @@ var useStyles$L = createThemedStyles("Button", {
     cursor: "pointer",
     outline: "none",
     boxSizing: "border-box",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "background-color, color, box-shadow, border-color",
     maxWidth: "100%",
     border: [
@@ -8826,6 +8822,8 @@ var useStyles$K = createThemedStyles("Checkbox", {
     gap: 14,
     width: "fit-content"
   },
+  checked: {},
+  invalid: {},
   disabled: {
     cursor: "default",
     pointerEvents: "none"
@@ -8850,22 +8848,10 @@ var useStyles$K = createThemedStyles("Checkbox", {
     justifyContent: "center",
     boxSizing: "border-box"
   },
-  checked: {},
   labelPositionLeft: {
     flexDirection: "row-reverse"
   }
 });
-function _array_like_to_array$o(arr, len) {
-  if (len == null || len > arr.length)
-    len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++)
-    arr2[i] = arr[i];
-  return arr2;
-}
-function _array_with_holes$o(arr) {
-  if (Array.isArray(arr))
-    return arr;
-}
 function _define_property$P(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -8879,37 +8865,6 @@ function _define_property$P(obj, key, value) {
   }
   return obj;
 }
-function _iterable_to_array_limit$o(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 _object_spread$O(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
@@ -8949,50 +8904,27 @@ function _object_spread_props$G(target, source) {
   }
   return target;
 }
-function _sliced_to_array$o(arr, i) {
-  return _array_with_holes$o(arr) || _iterable_to_array_limit$o(arr, i) || _unsupported_iterable_to_array$o(arr, i) || _non_iterable_rest$o();
-}
-function _unsupported_iterable_to_array$o(o, minLen) {
-  if (!o)
-    return;
-  if (typeof o === "string")
-    return _array_like_to_array$o(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor)
-    n = o.constructor.name;
-  if (n === "Map" || n === "Set")
-    return Array.from(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
-    return _array_like_to_array$o(o, minLen);
-}
 function Checkbox(param) {
-  var children = param.children, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isReadonly = param.isReadonly, isReadonly = _param_isReadonly === void 0 ? false : _param_isReadonly, _param_isChecked = param.isChecked, isChecked = _param_isChecked === void 0 ? false : _param_isChecked, value = param.value, data = param.data, testId = param.testId, _param_isSemiChecked = param.isSemiChecked, isSemiChecked = _param_isSemiChecked === void 0 ? false : _param_isSemiChecked, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? "right" : _param_labelPosition, tweakStyles = param.tweakStyles, onSelect = param.onSelect;
+  var value = param.value, children = param.children, _param_isChecked = param.isChecked, isChecked = _param_isChecked === void 0 ? false : _param_isChecked, _param_isSemiChecked = param.isSemiChecked, isSemiChecked = _param_isSemiChecked === void 0 ? false : _param_isSemiChecked, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isReadonly = param.isReadonly, isReadonly = _param_isReadonly === void 0 ? false : _param_isReadonly, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? "right" : _param_labelPosition, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles, onSelect = param.onSelect;
   var classes = useStyles$K({
     theme: tweakStyles
   });
-  var _useState = _sliced_to_array$o(useState(false), 2), isSelected = _useState[0], setIsSelected = _useState[1];
   var hasAction = !isDisabled && !isReadonly;
+  var isSelected = isChecked || isSemiChecked;
   var onToggle = function(event) {
-    var isSelectedNext = !isSelected;
-    onSelect({
+    return onSelect === null || onSelect === void 0 ? void 0 : onSelect({
       value,
-      isSelected: isSelectedNext
+      isSelected: !isSelected
     }, event);
-    setIsSelected(isSelectedNext);
   };
-  useEffect(function() {
-    setIsSelected(isChecked);
-  }, [
-    isChecked
-  ]);
   var _obj;
   return /* @__PURE__ */ jsxs("label", _object_spread_props$G(_object_spread$O({
-    className: clsx(classes.root, (_obj = {}, _define_property$P(_obj, classes.disabled, isDisabled), _define_property$P(_obj, classes.labelPositionLeft, labelPosition === "left"), _obj))
+    className: clsx(classes.root, (_obj = {}, _define_property$P(_obj, classes.checked, isSelected), _define_property$P(_obj, classes.invalid, isInvalid), _define_property$P(_obj, classes.disabled, isDisabled), _define_property$P(_obj, classes.labelPositionLeft, labelPosition === "left"), _obj))
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       /* @__PURE__ */ jsx("input", _object_spread$O({
-        type: "checkbox",
         className: classes.input,
+        type: "checkbox",
         checked: isSelected,
         disabled: isDisabled,
         readOnly: isReadonly
@@ -9001,8 +8933,8 @@ function Checkbox(param) {
         onKeyDown: getSelectKeyHandler(onToggle)
       })),
       /* @__PURE__ */ jsx("div", {
-        className: clsx(classes.check, isSelected && classes.checked),
-        children: /* @__PURE__ */ jsx(Icon, {
+        className: classes.check,
+        children: isSelected && /* @__PURE__ */ jsx(Icon, {
           type: isSemiChecked ? "minus" : "check"
         })
       }),
@@ -9026,7 +8958,8 @@ var useStyles$J = createThemedStyles("CloseButton", {
     appearance: "none",
     backgroundColor: "transparent",
     cursor: "pointer",
-    transition: "background-color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color",
     "&:hover": {
       backgroundColor: rgba(colors.BORDER_MAIN, 0.5)
     },
@@ -9288,7 +9221,7 @@ var useStyles$G = createThemedStyles("Input", {
     width: "100%",
     height: dimensions.CONTROL_HEIGHT,
     boxSizing: "border-box",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "border-color",
     backgroundColor: "white",
     position: "relative"
@@ -9308,7 +9241,7 @@ var useStyles$G = createThemedStyles("Input", {
     outline: "none",
     boxSizing: "border-box",
     outlineStyle: "none",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "background-color",
     border: "none",
     background: "none",
@@ -9394,7 +9327,7 @@ var useStyles$G = createThemedStyles("Input", {
     top: "50%",
     transformOrigin: "top left",
     transform: "translateY(-50%)",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "transform, color",
     fontSize: 16
   },
@@ -9503,7 +9436,8 @@ var useStyles$G = createThemedStyles("Input", {
       4
     ],
     width: 20,
-    transition: "color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "color",
     boxSizing: "content-box",
     "&:last-child": {
       paddingRight: 8
@@ -13333,7 +13267,8 @@ var useStyles$y = createThemedStyles("FiltersPane", {
     width: 40,
     height: FILTER_HEIGHT,
     cursor: "pointer",
-    transition: "background-color 0.25s ease-in-out"
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color"
   },
   settingsIcon: {
     width: 16,
@@ -14162,13 +14097,16 @@ function MultiSelectList(param) {
   var handleClear = function() {
     onChange(void 0);
   };
-  var onSelect = function(val) {
-    var _chosenValues_filter;
-    handleSelectValue(val.isSelected ? _to_consumable_array$5(chosenValues !== null && chosenValues !== void 0 ? chosenValues : []).concat([
-      val.value
-    ]) : (_chosenValues_filter = chosenValues === null || chosenValues === void 0 ? void 0 : chosenValues.filter(function(v) {
-      return getValueId(v) !== getValueId(val.value);
-    })) !== null && _chosenValues_filter !== void 0 ? _chosenValues_filter : []);
+  var onSelect = function(param2) {
+    var checkboxValue = param2.value, isSelected = param2.isSelected;
+    if (isNotEmpty(checkboxValue)) {
+      var _chosenValues_filter;
+      handleSelectValue(isSelected ? _to_consumable_array$5(chosenValues !== null && chosenValues !== void 0 ? chosenValues : []).concat([
+        checkboxValue
+      ]) : (_chosenValues_filter = chosenValues === null || chosenValues === void 0 ? void 0 : chosenValues.filter(function(v) {
+        return getValueId(v) !== getValueId(checkboxValue);
+      })) !== null && _chosenValues_filter !== void 0 ? _chosenValues_filter : []);
+    }
   };
   var handleKeyDown = function(event) {
     if (event.code === "Escape") {
@@ -14619,7 +14557,8 @@ var useStyles$v = createThemedStyles("FilterSelect", {
     cursor: "pointer",
     fontSize: 14,
     minHeight: ITEM_HEIGHT,
-    transition: "background-color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color",
     boxSizing: "border-box"
   },
   option: {
@@ -17314,7 +17253,7 @@ var useStyles$s = createThemedStyles("FiltersPaneSearch", {
     ],
     borderRadius: 18,
     paddingRight: 8,
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "background-color, border-color"
   },
   focused: {
@@ -17797,7 +17736,7 @@ function FilterValueView(param) {
 var useStyles$q = createThemedStyles("FilterWrapper", {
   root: {
     position: "relative",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "background-color, border-color",
     border: [
       1,
@@ -24556,11 +24495,8 @@ var useStyles$n = createThemedStyles("FlexibleTable", {
       background: "transparent",
       pointerEvents: "none",
       zIndex: 1,
-      transition: [
-        "box-shadow",
-        "0.25s",
-        "ease-in-out"
-      ],
+      transition: animations.defaultTransition,
+      transitionProperty: "box-shadow",
       "[data-scrolled] &": {
         boxShadow: "4px 0 4px rgba(0, 0, 0, 0.05)"
       }
@@ -25333,7 +25269,7 @@ var useStyles$k = createThemedStyles("IconButton", {
     cursor: "pointer",
     outline: "none",
     boxSizing: "border-box",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "background-color, color, border-color",
     border: "none",
     position: "relative",
@@ -25536,7 +25472,8 @@ var useStyles$j = createThemedStyles("IncrementInput", {
     border: "none",
     outline: "none",
     backgroundColor: colors.GREY_BACKGROUND,
-    transition: "background-color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color",
     color: colors.FONT_MEDIUM,
     cursor: "pointer",
     display: "flex",
@@ -26314,7 +26251,8 @@ var useStyles$h = createThemedStyles("MoreMenu", {
     borderRadius: "50%",
     border: "none",
     cursor: "pointer",
-    transition: "background-color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color",
     "&$hasCircle": {
       backgroundColor: rgba(colors.GREY_HOVER, 0.5)
     },
@@ -27854,7 +27792,7 @@ var useStyles$a = createThemedStyles("Selector", {
       height: "calc(100% - ".concat(SELECTOR_GAP * 2, "px)"),
       backgroundColor: colors.CLASSIC_WHITE,
       borderRadius: dimensions.BORDER_RADIUS_SMALL,
-      transition: "0.25s ease-in-out",
+      transition: animations.defaultTransition,
       transitionProperty: "transform, width"
     },
     "&$invalid": {
@@ -27867,7 +27805,8 @@ var useStyles$a = createThemedStyles("Selector", {
       height: "100%",
       color: colors.FONT_MEDIUM,
       fontSize: 16,
-      transition: "color 0.25s ease-in-out",
+      transition: animations.defaultTransition,
+      transitionProperty: "color",
       background: "none",
       "&$s": {
         padding: [
@@ -28659,8 +28598,8 @@ var useStyles$8 = createThemedStyles("Switch", {
     backgroundColor: "#333",
     borderRadius: 10,
     boxSizing: "border-box",
+    transition: animations.defaultTransition,
     transitionProperty: "opacity, background-color",
-    transition: "0.25s ease-in-out",
     "&::before": {
       content: '""',
       position: "absolute",
@@ -28673,16 +28612,16 @@ var useStyles$8 = createThemedStyles("Switch", {
       backgroundColor: "#fff",
       borderRadius: "50%",
       zIndex: 1,
-      transitionProperty: "left, background-color",
-      transition: "0.25s ease-in-out"
+      transition: animations.defaultTransition,
+      transitionProperty: "left, background-color"
     }
   },
   input: {
     display: "none"
   },
   label: {
-    transitionProperty: "opacity, color",
-    transition: "0.25s ease-in-out"
+    transition: animations.defaultTransition,
+    transitionProperty: "opacity, color"
   },
   labelLeft: {
     order: -1,
@@ -28792,7 +28731,7 @@ var useStyles$7 = createThemedStyles("TextArea", {
     width: "100%",
     flexGrow: 1,
     boxSizing: "border-box",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "border-color",
     backgroundColor: "white",
     border: [
@@ -28814,7 +28753,7 @@ var useStyles$7 = createThemedStyles("TextArea", {
       PADDING_X,
       8
     ],
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "background-color",
     border: "none",
     resize: "none",
@@ -28866,7 +28805,7 @@ var useStyles$7 = createThemedStyles("TextArea", {
     top: PADDING_X * 2,
     transformOrigin: "top left",
     transform: "translateY(-50%)",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "transform, color",
     fontSize: 16
   },
@@ -29136,7 +29075,8 @@ var useStyles$6 = createThemedStyles("TextButton", {
     borderRadius: 0,
     cursor: "pointer",
     outline: "none",
-    transition: "color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "color",
     "&[disabled]": {
       cursor: "default",
       pointerEvents: "none"
@@ -29175,7 +29115,7 @@ var useStyles$6 = createThemedStyles("TextButton", {
     width: 24,
     height: 24,
     borderRadius: "50%",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: [
       "background",
       "color"
@@ -30386,7 +30326,8 @@ var useStyles = createThemedStyles("NewMoreMenu", {
     borderRadius: "50%",
     border: "none",
     cursor: "pointer",
-    transition: "background-color 0.25s ease-in-out"
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color"
   },
   icon: {
     width: 30,