@infomaximum/ui-kit 0.13.3 → 0.13.5

package/dist/components/BaseSelect/BaseSelect.tokens.d.ts

@@ -17,7 +17,7 @@ export declare const getSelectTokens: (theme: Theme) => {
     selectOptionText: "#262626";
     selectOptionTextSelected: "#0CB3B3";
     selectOptionTextDisabled: "#8C8C8C";
-    selectOptionBgHover: "#F5F5F5";
+    selectOptionBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
     selectPaddingVertical: 4;
     selectPaddingHorizontal: 12;
     selectPaddingHorizontalTag: 4;

package/dist/components/BaseTooltip/BaseTooltip.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { memo, useState, useEffect } from "react";
-import { offset, flip, arrow, useFloating, autoUpdate, FloatingArrow } from "@floating-ui/react";
-import { ARROW_PADDING, convertBaseTooltipPlacement, getArrowPlacementCorrection, Max_ZIndex, ARROW_WIDTH, ARROW_HEIGHT } from "./BaseTooltip.utils.js";
+import { memo } from "react";
+import { FloatingArrow } from "@floating-ui/react";
+import { getArrowPlacementCorrection, Max_ZIndex, ARROW_WIDTH, ARROW_HEIGHT } from "./BaseTooltip.utils.js";
 import { createPortal } from "react-dom";
 import { useShowTooltipController } from "./hooks/useShowTooltipController.js";
 import { baseTooltipReferenceWrapperStyle, getBaseTooltipFloatingWrapperStyle } from "./BaseTooltip.styles.js";
+import { useCustomFloating } from "./hooks/useCustomFloating.js";
 import { useTheme } from "../../hooks/useTheme/useTheme.js";
-const floatingMiddleware = [offset()];
 const BaseTooltip = memo(({
   floatingElement,
   arrowColor,
@@ -19,6 +19,7 @@ const BaseTooltip = memo(({
   trigger = ["click"],
   mouseEnterDelay = 0.1,
   mouseLeaveDelay = 0.1,
+  align,
   className,
   onOpenChange,
   children,
@@ -27,30 +28,13 @@ const BaseTooltip = memo(({
 }) => {
   var _a;
   const theme = useTheme();
-  const [arrowRef, setArrowRef] = useState(null);
-  useEffect(() => {
-    if (autoAdjustOverflow) {
-      floatingMiddleware.push(flip());
-    }
-  }, [arrowRef, autoAdjustOverflow]);
-  useEffect(() => {
-    if (arrowRef && withArrow) {
-      floatingMiddleware.push(arrow({
-        element: arrowRef,
-        padding: ARROW_PADDING
-      }));
-    }
-  }, [arrowRef, withArrow]);
   const {
     refs,
     floatingStyles,
     context,
-    placement: floatingPlacement
-  } = useFloating({
-    whileElementsMounted: autoUpdate,
-    placement: convertBaseTooltipPlacement(placement),
-    middleware: floatingMiddleware
-  });
+    floatingPlacement,
+    setArrowRef
+  } = useCustomFloating(placement, autoAdjustOverflow, withArrow, align);
   const {
     isOpen,
     handlePointerOver,
@@ -72,7 +56,7 @@ const BaseTooltip = memo(({
   const arrowPlacementCorrection = getArrowPlacementCorrection(floatingPlacement, context);
   const renderFloatingElement = () => {
     var _a2;
-    return /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, css: [getBaseTooltipFloatingWrapperStyle(floatingPlacement, withArrow), (_a2 = styles == null ? void 0 : styles.floatingWrapper) == null ? void 0 : _a2.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:renderFloatingElement;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQmFzZVRvb2x0aXAvQmFzZVRvb2x0aXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRGVSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL0Jhc2VUb29sdGlwL0Jhc2VUb29sdGlwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHR5cGUgRkMsIG1lbW8sIHR5cGUgUHJvcHNXaXRoQ2hpbGRyZW4sIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgQmFzZVRvb2x0aXBQcm9wcywgQmFzZVRvb2x0aXBUcmlnZ2VyVHlwZSB9IGZyb20gXCIuL0Jhc2VUb29sdGlwLnR5cGVzXCI7XG5pbXBvcnQgeyBhcnJvdywgYXV0b1VwZGF0ZSwgZmxpcCwgRmxvYXRpbmdBcnJvdywgb2Zmc2V0LCB1c2VGbG9hdGluZyB9IGZyb20gXCJAZmxvYXRpbmctdWkvcmVhY3RcIjtcbmltcG9ydCB7XG4gIEFSUk9XX0hFSUdIVCxcbiAgQVJST1dfUEFERElORyxcbiAgQVJST1dfV0lEVEgsXG4gIGNvbnZlcnRCYXNlVG9vbHRpcFBsYWNlbWVudCxcbiAgZ2V0QXJyb3dQbGFjZW1lbnRDb3JyZWN0aW9uLFxuICBNYXhfWkluZGV4LFxufSBmcm9tIFwiLi9CYXNlVG9vbHRpcC51dGlsc1wiO1xuaW1wb3J0IHsgY3JlYXRlUG9ydGFsIH0gZnJvbSBcInJlYWN0LWRvbVwiO1xuaW1wb3J0IHsgdXNlU2hvd1Rvb2x0aXBDb250cm9sbGVyIH0gZnJvbSBcIi4vaG9va3MvdXNlU2hvd1Rvb2x0aXBDb250cm9sbGVyXCI7XG5pbXBvcnQge1xuICBiYXNlVG9vbHRpcFJlZmVyZW5jZVdyYXBwZXJTdHlsZSxcbiAgZ2V0QmFzZVRvb2x0aXBGbG9hdGluZ1dyYXBwZXJTdHlsZSxcbn0gZnJvbSBcIi4vQmFzZVRvb2x0aXAuc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuXG5jb25zdCBmbG9hdGluZ01pZGRsZXdhcmUgPSBbb2Zmc2V0KCldO1xuXG5leHBvcnQgY29uc3QgQmFzZVRvb2x0aXA6IEZDPFByb3BzV2l0aENoaWxkcmVuPEJhc2VUb29sdGlwUHJvcHM+PiA9IG1lbW8oXG4gICh7XG4gICAgZmxvYXRpbmdFbGVtZW50LFxuICAgIGFycm93Q29sb3IsXG4gICAgd2l0aEFycm93ID0gdHJ1ZSxcbiAgICBwbGFjZW1lbnQgPSBcInRvcFwiLFxuICAgIGF1dG9BZGp1c3RPdmVyZmxvdyA9IHRydWUsXG4gICAgZGVmYXVsdE9wZW4gPSBmYWxzZSxcbiAgICBvcGVuLFxuICAgIHpJbmRleCA9IE1heF9aSW5kZXgsXG4gICAgdHJpZ2dlciA9IFtcImNsaWNrXCIgYXMgQmFzZVRvb2x0aXBUcmlnZ2VyVHlwZV0sXG4gICAgbW91c2VFbnRlckRlbGF5ID0gMC4xLFxuICAgIG1vdXNlTGVhdmVEZWxheSA9IDAuMSxcbiAgICBjbGFzc05hbWUsXG4gICAgb25PcGVuQ2hhbmdlLFxuICAgIGNoaWxkcmVuLFxuICAgIHN0eWxlcyxcbiAgICBnZXRQb3B1cENvbnRhaW5lciA9ICgpID0+IGRvY3VtZW50LmJvZHksXG4gIH0pID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCBbYXJyb3dSZWYsIHNldEFycm93UmVmXSA9IHVzZVN0YXRlPFNWR1NWR0VsZW1lbnQgfCBudWxsPihudWxsKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICBpZiAoYXV0b0FkanVzdE92ZXJmbG93KSB7XG4gICAgICAgIGZsb2F0aW5nTWlkZGxld2FyZS5wdXNoKGZsaXAoKSk7XG4gICAgICB9XG4gICAgfSwgW2Fycm93UmVmLCBhdXRvQWRqdXN0T3ZlcmZsb3ddKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICBpZiAoYXJyb3dSZWYgJiYgd2l0aEFycm93KSB7XG4gICAgICAgIGZsb2F0aW5nTWlkZGxld2FyZS5wdXNoKGFycm93KHsgZWxlbWVudDogYXJyb3dSZWYsIHBhZGRpbmc6IEFSUk9XX1BBRERJTkcgfSkpO1xuICAgICAgfVxuICAgIH0sIFthcnJvd1JlZiwgd2l0aEFycm93XSk7XG5cbiAgICBjb25zdCB7XG4gICAgICByZWZzLFxuICAgICAgZmxvYXRpbmdTdHlsZXMsXG4gICAgICBjb250ZXh0LFxuICAgICAgcGxhY2VtZW50OiBmbG9hdGluZ1BsYWNlbWVudCxcbiAgICB9ID0gdXNlRmxvYXRpbmc8SFRNTERpdkVsZW1lbnQ+KHtcbiAgICAgIHdoaWxlRWxlbWVudHNNb3VudGVkOiBhdXRvVXBkYXRlLFxuICAgICAgcGxhY2VtZW50OiBjb252ZXJ0QmFzZVRvb2x0aXBQbGFjZW1lbnQocGxhY2VtZW50KSxcbiAgICAgIG1pZGRsZXdhcmU6IGZsb2F0aW5nTWlkZGxld2FyZSxcbiAgICB9KTtcblxuICAgIGNvbnN0IHtcbiAgICAgIGlzT3BlbixcbiAgICAgIGhhbmRsZVBvaW50ZXJPdmVyLFxuICAgICAgaGFuZGxlUG9pbnRlck91dCxcbiAgICAgIGhhbmRsZUZvY3VzLFxuICAgICAgaGFuZGxlQmx1cixcbiAgICAgIGhhbmRsZUNsaWNrLFxuICAgICAgaGFuZGxlQ29udGV4dE1lbnUsXG4gICAgICBtb3VzZVVwSGFuZGxlLFxuICAgIH0gPSB1c2VTaG93VG9vbHRpcENvbnRyb2xsZXIoe1xuICAgICAgdHJpZ2dlcixcbiAgICAgIGRlZmF1bHRPcGVuLFxuICAgICAgb3BlbixcbiAgICAgIG1vdXNlRW50ZXJEZWxheSxcbiAgICAgIG1vdXNlTGVhdmVEZWxheSxcbiAgICAgIHJlZnMsXG4gICAgICBvbk9wZW5DaGFuZ2UsXG4gICAgfSk7XG5cbiAgICBjb25zdCBhcnJvd1BsYWNlbWVudENvcnJlY3Rpb24gPSBnZXRBcnJvd1BsYWNlbWVudENvcnJlY3Rpb24oZmxvYXRpbmdQbGFjZW1lbnQsIGNvbnRleHQpO1xuXG4gICAgY29uc3QgcmVuZGVyRmxvYXRpbmdFbGVtZW50ID0gKCkgPT4ge1xuICAgICAgcmV0dXJuIChcbiAgICAgICAgPGRpdlxuICAgICAgICAgIHJlZj17cmVmcy5zZXRGbG9hdGluZ31cbiAgICAgICAgICBjc3M9e1tcbiAgICAgICAgICAgIGdldEJhc2VUb29sdGlwRmxvYXRpbmdXcmFwcGVyU3R5bGUoZmxvYXRpbmdQbGFjZW1lbnQsIHdpdGhBcnJvdyksXG4gICAgICAgICAgICBzdHlsZXM/LmZsb2F0aW5nV3JhcHBlcj8uKHRoZW1lKSxcbiAgICAgICAgICBdfVxuICAgICAgICAgIHN0eWxlPXt7IC4uLmZsb2F0aW5nU3R5bGVzLCB6SW5kZXggfX1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgPlxuICAgICAgICAgIHtmbG9hdGluZ0VsZW1lbnR9XG4gICAgICAgICAge3dpdGhBcnJvdyAmJiAoXG4gICAgICAgICAgICA8RmxvYXRpbmdBcnJvd1xuICAgICAgICAgICAgICByZWY9e3NldEFycm93UmVmfVxuICAgICAgICAgICAgICBjb250ZXh0PXtjb250ZXh0fVxuICAgICAgICAgICAgICB3aWR0aD17QVJST1dfV0lEVEh9XG4gICAgICAgICAgICAgIGhlaWdodD17QVJST1dfSEVJR0hUfVxuICAgICAgICAgICAgICBmaWxsPXthcnJvd0NvbG9yfVxuICAgICAgICAgICAgICBzdHlsZT17eyAuLi5hcnJvd1BsYWNlbWVudENvcnJlY3Rpb24gfX1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9kaXY+XG4gICAgICApO1xuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICByZWY9e3JlZnMuc2V0UmVmZXJlbmNlfVxuICAgICAgICBjc3M9e1tiYXNlVG9vbHRpcFJlZmVyZW5jZVdyYXBwZXJTdHlsZSwgc3R5bGVzPy5yZWZlcmVuY2VXcmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgb25Qb2ludGVyT3Zlcj17aGFuZGxlUG9pbnRlck92ZXJ9XG4gICAgICAgIG9uUG9pbnRlck91dD17aGFuZGxlUG9pbnRlck91dH1cbiAgICAgICAgb25Gb2N1cz17aGFuZGxlRm9jdXN9XG4gICAgICAgIG9uQmx1cj17aGFuZGxlQmx1cn1cbiAgICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9XG4gICAgICAgIG9uQ29udGV4dE1lbnU9e2hhbmRsZUNvbnRleHRNZW51fVxuICAgICAgICBvbk1vdXNlVXA9e21vdXNlVXBIYW5kbGV9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cblxuICAgICAgICB7aXNPcGVuICYmIGNyZWF0ZVBvcnRhbChyZW5kZXJGbG9hdGluZ0VsZW1lbnQoKSwgZ2V0UG9wdXBDb250YWluZXIoKSl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG4pO1xuIl19 */"], style: {
+    return /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, css: [getBaseTooltipFloatingWrapperStyle(floatingPlacement, withArrow), (_a2 = styles == null ? void 0 : styles.floatingWrapper) == null ? void 0 : _a2.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:renderFloatingElement;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQmFzZVRvb2x0aXAvQmFzZVRvb2x0aXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdFVSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL0Jhc2VUb29sdGlwL0Jhc2VUb29sdGlwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHR5cGUgRkMsIG1lbW8sIHR5cGUgUHJvcHNXaXRoQ2hpbGRyZW4gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgQmFzZVRvb2x0aXBQcm9wcywgQmFzZVRvb2x0aXBUcmlnZ2VyVHlwZSB9IGZyb20gXCIuL0Jhc2VUb29sdGlwLnR5cGVzXCI7XG5pbXBvcnQgeyBGbG9hdGluZ0Fycm93IH0gZnJvbSBcIkBmbG9hdGluZy11aS9yZWFjdFwiO1xuaW1wb3J0IHtcbiAgQVJST1dfSEVJR0hULFxuICBBUlJPV19XSURUSCxcbiAgZ2V0QXJyb3dQbGFjZW1lbnRDb3JyZWN0aW9uLFxuICBNYXhfWkluZGV4LFxufSBmcm9tIFwiLi9CYXNlVG9vbHRpcC51dGlsc1wiO1xuaW1wb3J0IHsgY3JlYXRlUG9ydGFsIH0gZnJvbSBcInJlYWN0LWRvbVwiO1xuaW1wb3J0IHsgdXNlU2hvd1Rvb2x0aXBDb250cm9sbGVyIH0gZnJvbSBcIi4vaG9va3MvdXNlU2hvd1Rvb2x0aXBDb250cm9sbGVyXCI7XG5pbXBvcnQge1xuICBiYXNlVG9vbHRpcFJlZmVyZW5jZVdyYXBwZXJTdHlsZSxcbiAgZ2V0QmFzZVRvb2x0aXBGbG9hdGluZ1dyYXBwZXJTdHlsZSxcbn0gZnJvbSBcIi4vQmFzZVRvb2x0aXAuc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgdXNlQ3VzdG9tRmxvYXRpbmcgfSBmcm9tIFwiLi9ob29rcy91c2VDdXN0b21GbG9hdGluZ1wiO1xuXG5leHBvcnQgY29uc3QgQmFzZVRvb2x0aXA6IEZDPFByb3BzV2l0aENoaWxkcmVuPEJhc2VUb29sdGlwUHJvcHM+PiA9IG1lbW8oXG4gICh7XG4gICAgZmxvYXRpbmdFbGVtZW50LFxuICAgIGFycm93Q29sb3IsXG4gICAgd2l0aEFycm93ID0gdHJ1ZSxcbiAgICBwbGFjZW1lbnQgPSBcInRvcFwiLFxuICAgIGF1dG9BZGp1c3RPdmVyZmxvdyA9IHRydWUsXG4gICAgZGVmYXVsdE9wZW4gPSBmYWxzZSxcbiAgICBvcGVuLFxuICAgIHpJbmRleCA9IE1heF9aSW5kZXgsXG4gICAgdHJpZ2dlciA9IFtcImNsaWNrXCIgYXMgQmFzZVRvb2x0aXBUcmlnZ2VyVHlwZV0sXG4gICAgbW91c2VFbnRlckRlbGF5ID0gMC4xLFxuICAgIG1vdXNlTGVhdmVEZWxheSA9IDAuMSxcbiAgICBhbGlnbixcbiAgICBjbGFzc05hbWUsXG4gICAgb25PcGVuQ2hhbmdlLFxuICAgIGNoaWxkcmVuLFxuICAgIHN0eWxlcyxcbiAgICBnZXRQb3B1cENvbnRhaW5lciA9ICgpID0+IGRvY3VtZW50LmJvZHksXG4gIH0pID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCB7IHJlZnMsIGZsb2F0aW5nU3R5bGVzLCBjb250ZXh0LCBmbG9hdGluZ1BsYWNlbWVudCwgc2V0QXJyb3dSZWYgfSA9IHVzZUN1c3RvbUZsb2F0aW5nKFxuICAgICAgcGxhY2VtZW50LFxuICAgICAgYXV0b0FkanVzdE92ZXJmbG93LFxuICAgICAgd2l0aEFycm93LFxuICAgICAgYWxpZ25cbiAgICApO1xuXG4gICAgY29uc3Qge1xuICAgICAgaXNPcGVuLFxuICAgICAgaGFuZGxlUG9pbnRlck92ZXIsXG4gICAgICBoYW5kbGVQb2ludGVyT3V0LFxuICAgICAgaGFuZGxlRm9jdXMsXG4gICAgICBoYW5kbGVCbHVyLFxuICAgICAgaGFuZGxlQ2xpY2ssXG4gICAgICBoYW5kbGVDb250ZXh0TWVudSxcbiAgICAgIG1vdXNlVXBIYW5kbGUsXG4gICAgfSA9IHVzZVNob3dUb29sdGlwQ29udHJvbGxlcih7XG4gICAgICB0cmlnZ2VyLFxuICAgICAgZGVmYXVsdE9wZW4sXG4gICAgICBvcGVuLFxuICAgICAgbW91c2VFbnRlckRlbGF5LFxuICAgICAgbW91c2VMZWF2ZURlbGF5LFxuICAgICAgcmVmcyxcbiAgICAgIG9uT3BlbkNoYW5nZSxcbiAgICB9KTtcblxuICAgIGNvbnN0IGFycm93UGxhY2VtZW50Q29ycmVjdGlvbiA9IGdldEFycm93UGxhY2VtZW50Q29ycmVjdGlvbihmbG9hdGluZ1BsYWNlbWVudCwgY29udGV4dCk7XG5cbiAgICBjb25zdCByZW5kZXJGbG9hdGluZ0VsZW1lbnQgPSAoKSA9PiB7XG4gICAgICByZXR1cm4gKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgcmVmPXtyZWZzLnNldEZsb2F0aW5nfVxuICAgICAgICAgIGNzcz17W1xuICAgICAgICAgICAgZ2V0QmFzZVRvb2x0aXBGbG9hdGluZ1dyYXBwZXJTdHlsZShmbG9hdGluZ1BsYWNlbWVudCwgd2l0aEFycm93KSxcbiAgICAgICAgICAgIHN0eWxlcz8uZmxvYXRpbmdXcmFwcGVyPy4odGhlbWUpLFxuICAgICAgICAgIF19XG4gICAgICAgICAgc3R5bGU9e3sgLi4uZmxvYXRpbmdTdHlsZXMsIHpJbmRleCB9fVxuICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICA+XG4gICAgICAgICAge2Zsb2F0aW5nRWxlbWVudH1cbiAgICAgICAgICB7d2l0aEFycm93ICYmIChcbiAgICAgICAgICAgIDxGbG9hdGluZ0Fycm93XG4gICAgICAgICAgICAgIHJlZj17c2V0QXJyb3dSZWZ9XG4gICAgICAgICAgICAgIGNvbnRleHQ9e2NvbnRleHR9XG4gICAgICAgICAgICAgIHdpZHRoPXtBUlJPV19XSURUSH1cbiAgICAgICAgICAgICAgaGVpZ2h0PXtBUlJPV19IRUlHSFR9XG4gICAgICAgICAgICAgIGZpbGw9e2Fycm93Q29sb3J9XG4gICAgICAgICAgICAgIHN0eWxlPXt7IC4uLmFycm93UGxhY2VtZW50Q29ycmVjdGlvbiB9fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIHJlZj17cmVmcy5zZXRSZWZlcmVuY2V9XG4gICAgICAgIGNzcz17W2Jhc2VUb29sdGlwUmVmZXJlbmNlV3JhcHBlclN0eWxlLCBzdHlsZXM/LnJlZmVyZW5jZVdyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgICBvblBvaW50ZXJPdmVyPXtoYW5kbGVQb2ludGVyT3Zlcn1cbiAgICAgICAgb25Qb2ludGVyT3V0PXtoYW5kbGVQb2ludGVyT3V0fVxuICAgICAgICBvbkZvY3VzPXtoYW5kbGVGb2N1c31cbiAgICAgICAgb25CbHVyPXtoYW5kbGVCbHVyfVxuICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgb25Db250ZXh0TWVudT17aGFuZGxlQ29udGV4dE1lbnV9XG4gICAgICAgIG9uTW91c2VVcD17bW91c2VVcEhhbmRsZX1cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuXG4gICAgICAgIHtpc09wZW4gJiYgY3JlYXRlUG9ydGFsKHJlbmRlckZsb2F0aW5nRWxlbWVudCgpLCBnZXRQb3B1cENvbnRhaW5lcigpKX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cbik7XG4iXX0= */"], style: {
       ...floatingStyles,
       zIndex
     }, className, children: [
@@ -82,7 +66,7 @@ const BaseTooltip = memo(({
       } })
     ] });
   };
-  return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, css: [baseTooltipReferenceWrapperStyle, (_a = styles == null ? void 0 : styles.referenceWrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:BaseTooltip;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQmFzZVRvb2x0aXAvQmFzZVRvb2x0aXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFIUSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL0Jhc2VUb29sdGlwL0Jhc2VUb29sdGlwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHR5cGUgRkMsIG1lbW8sIHR5cGUgUHJvcHNXaXRoQ2hpbGRyZW4sIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgQmFzZVRvb2x0aXBQcm9wcywgQmFzZVRvb2x0aXBUcmlnZ2VyVHlwZSB9IGZyb20gXCIuL0Jhc2VUb29sdGlwLnR5cGVzXCI7XG5pbXBvcnQgeyBhcnJvdywgYXV0b1VwZGF0ZSwgZmxpcCwgRmxvYXRpbmdBcnJvdywgb2Zmc2V0LCB1c2VGbG9hdGluZyB9IGZyb20gXCJAZmxvYXRpbmctdWkvcmVhY3RcIjtcbmltcG9ydCB7XG4gIEFSUk9XX0hFSUdIVCxcbiAgQVJST1dfUEFERElORyxcbiAgQVJST1dfV0lEVEgsXG4gIGNvbnZlcnRCYXNlVG9vbHRpcFBsYWNlbWVudCxcbiAgZ2V0QXJyb3dQbGFjZW1lbnRDb3JyZWN0aW9uLFxuICBNYXhfWkluZGV4LFxufSBmcm9tIFwiLi9CYXNlVG9vbHRpcC51dGlsc1wiO1xuaW1wb3J0IHsgY3JlYXRlUG9ydGFsIH0gZnJvbSBcInJlYWN0LWRvbVwiO1xuaW1wb3J0IHsgdXNlU2hvd1Rvb2x0aXBDb250cm9sbGVyIH0gZnJvbSBcIi4vaG9va3MvdXNlU2hvd1Rvb2x0aXBDb250cm9sbGVyXCI7XG5pbXBvcnQge1xuICBiYXNlVG9vbHRpcFJlZmVyZW5jZVdyYXBwZXJTdHlsZSxcbiAgZ2V0QmFzZVRvb2x0aXBGbG9hdGluZ1dyYXBwZXJTdHlsZSxcbn0gZnJvbSBcIi4vQmFzZVRvb2x0aXAuc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuXG5jb25zdCBmbG9hdGluZ01pZGRsZXdhcmUgPSBbb2Zmc2V0KCldO1xuXG5leHBvcnQgY29uc3QgQmFzZVRvb2x0aXA6IEZDPFByb3BzV2l0aENoaWxkcmVuPEJhc2VUb29sdGlwUHJvcHM+PiA9IG1lbW8oXG4gICh7XG4gICAgZmxvYXRpbmdFbGVtZW50LFxuICAgIGFycm93Q29sb3IsXG4gICAgd2l0aEFycm93ID0gdHJ1ZSxcbiAgICBwbGFjZW1lbnQgPSBcInRvcFwiLFxuICAgIGF1dG9BZGp1c3RPdmVyZmxvdyA9IHRydWUsXG4gICAgZGVmYXVsdE9wZW4gPSBmYWxzZSxcbiAgICBvcGVuLFxuICAgIHpJbmRleCA9IE1heF9aSW5kZXgsXG4gICAgdHJpZ2dlciA9IFtcImNsaWNrXCIgYXMgQmFzZVRvb2x0aXBUcmlnZ2VyVHlwZV0sXG4gICAgbW91c2VFbnRlckRlbGF5ID0gMC4xLFxuICAgIG1vdXNlTGVhdmVEZWxheSA9IDAuMSxcbiAgICBjbGFzc05hbWUsXG4gICAgb25PcGVuQ2hhbmdlLFxuICAgIGNoaWxkcmVuLFxuICAgIHN0eWxlcyxcbiAgICBnZXRQb3B1cENvbnRhaW5lciA9ICgpID0+IGRvY3VtZW50LmJvZHksXG4gIH0pID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCBbYXJyb3dSZWYsIHNldEFycm93UmVmXSA9IHVzZVN0YXRlPFNWR1NWR0VsZW1lbnQgfCBudWxsPihudWxsKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICBpZiAoYXV0b0FkanVzdE92ZXJmbG93KSB7XG4gICAgICAgIGZsb2F0aW5nTWlkZGxld2FyZS5wdXNoKGZsaXAoKSk7XG4gICAgICB9XG4gICAgfSwgW2Fycm93UmVmLCBhdXRvQWRqdXN0T3ZlcmZsb3ddKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICBpZiAoYXJyb3dSZWYgJiYgd2l0aEFycm93KSB7XG4gICAgICAgIGZsb2F0aW5nTWlkZGxld2FyZS5wdXNoKGFycm93KHsgZWxlbWVudDogYXJyb3dSZWYsIHBhZGRpbmc6IEFSUk9XX1BBRERJTkcgfSkpO1xuICAgICAgfVxuICAgIH0sIFthcnJvd1JlZiwgd2l0aEFycm93XSk7XG5cbiAgICBjb25zdCB7XG4gICAgICByZWZzLFxuICAgICAgZmxvYXRpbmdTdHlsZXMsXG4gICAgICBjb250ZXh0LFxuICAgICAgcGxhY2VtZW50OiBmbG9hdGluZ1BsYWNlbWVudCxcbiAgICB9ID0gdXNlRmxvYXRpbmc8SFRNTERpdkVsZW1lbnQ+KHtcbiAgICAgIHdoaWxlRWxlbWVudHNNb3VudGVkOiBhdXRvVXBkYXRlLFxuICAgICAgcGxhY2VtZW50OiBjb252ZXJ0QmFzZVRvb2x0aXBQbGFjZW1lbnQocGxhY2VtZW50KSxcbiAgICAgIG1pZGRsZXdhcmU6IGZsb2F0aW5nTWlkZGxld2FyZSxcbiAgICB9KTtcblxuICAgIGNvbnN0IHtcbiAgICAgIGlzT3BlbixcbiAgICAgIGhhbmRsZVBvaW50ZXJPdmVyLFxuICAgICAgaGFuZGxlUG9pbnRlck91dCxcbiAgICAgIGhhbmRsZUZvY3VzLFxuICAgICAgaGFuZGxlQmx1cixcbiAgICAgIGhhbmRsZUNsaWNrLFxuICAgICAgaGFuZGxlQ29udGV4dE1lbnUsXG4gICAgICBtb3VzZVVwSGFuZGxlLFxuICAgIH0gPSB1c2VTaG93VG9vbHRpcENvbnRyb2xsZXIoe1xuICAgICAgdHJpZ2dlcixcbiAgICAgIGRlZmF1bHRPcGVuLFxuICAgICAgb3BlbixcbiAgICAgIG1vdXNlRW50ZXJEZWxheSxcbiAgICAgIG1vdXNlTGVhdmVEZWxheSxcbiAgICAgIHJlZnMsXG4gICAgICBvbk9wZW5DaGFuZ2UsXG4gICAgfSk7XG5cbiAgICBjb25zdCBhcnJvd1BsYWNlbWVudENvcnJlY3Rpb24gPSBnZXRBcnJvd1BsYWNlbWVudENvcnJlY3Rpb24oZmxvYXRpbmdQbGFjZW1lbnQsIGNvbnRleHQpO1xuXG4gICAgY29uc3QgcmVuZGVyRmxvYXRpbmdFbGVtZW50ID0gKCkgPT4ge1xuICAgICAgcmV0dXJuIChcbiAgICAgICAgPGRpdlxuICAgICAgICAgIHJlZj17cmVmcy5zZXRGbG9hdGluZ31cbiAgICAgICAgICBjc3M9e1tcbiAgICAgICAgICAgIGdldEJhc2VUb29sdGlwRmxvYXRpbmdXcmFwcGVyU3R5bGUoZmxvYXRpbmdQbGFjZW1lbnQsIHdpdGhBcnJvdyksXG4gICAgICAgICAgICBzdHlsZXM/LmZsb2F0aW5nV3JhcHBlcj8uKHRoZW1lKSxcbiAgICAgICAgICBdfVxuICAgICAgICAgIHN0eWxlPXt7IC4uLmZsb2F0aW5nU3R5bGVzLCB6SW5kZXggfX1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgPlxuICAgICAgICAgIHtmbG9hdGluZ0VsZW1lbnR9XG4gICAgICAgICAge3dpdGhBcnJvdyAmJiAoXG4gICAgICAgICAgICA8RmxvYXRpbmdBcnJvd1xuICAgICAgICAgICAgICByZWY9e3NldEFycm93UmVmfVxuICAgICAgICAgICAgICBjb250ZXh0PXtjb250ZXh0fVxuICAgICAgICAgICAgICB3aWR0aD17QVJST1dfV0lEVEh9XG4gICAgICAgICAgICAgIGhlaWdodD17QVJST1dfSEVJR0hUfVxuICAgICAgICAgICAgICBmaWxsPXthcnJvd0NvbG9yfVxuICAgICAgICAgICAgICBzdHlsZT17eyAuLi5hcnJvd1BsYWNlbWVudENvcnJlY3Rpb24gfX1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9kaXY+XG4gICAgICApO1xuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICByZWY9e3JlZnMuc2V0UmVmZXJlbmNlfVxuICAgICAgICBjc3M9e1tiYXNlVG9vbHRpcFJlZmVyZW5jZVdyYXBwZXJTdHlsZSwgc3R5bGVzPy5yZWZlcmVuY2VXcmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgb25Qb2ludGVyT3Zlcj17aGFuZGxlUG9pbnRlck92ZXJ9XG4gICAgICAgIG9uUG9pbnRlck91dD17aGFuZGxlUG9pbnRlck91dH1cbiAgICAgICAgb25Gb2N1cz17aGFuZGxlRm9jdXN9XG4gICAgICAgIG9uQmx1cj17aGFuZGxlQmx1cn1cbiAgICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9XG4gICAgICAgIG9uQ29udGV4dE1lbnU9e2hhbmRsZUNvbnRleHRNZW51fVxuICAgICAgICBvbk1vdXNlVXA9e21vdXNlVXBIYW5kbGV9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cblxuICAgICAgICB7aXNPcGVuICYmIGNyZWF0ZVBvcnRhbChyZW5kZXJGbG9hdGluZ0VsZW1lbnQoKSwgZ2V0UG9wdXBDb250YWluZXIoKSl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG4pO1xuIl19 */"], onPointerOver: handlePointerOver, onPointerOut: handlePointerOut, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onContextMenu: handleContextMenu, onMouseUp: mouseUpHandle, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, css: [baseTooltipReferenceWrapperStyle, (_a = styles == null ? void 0 : styles.referenceWrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:BaseTooltip;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQmFzZVRvb2x0aXAvQmFzZVRvb2x0aXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlHUSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL0Jhc2VUb29sdGlwL0Jhc2VUb29sdGlwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHR5cGUgRkMsIG1lbW8sIHR5cGUgUHJvcHNXaXRoQ2hpbGRyZW4gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgQmFzZVRvb2x0aXBQcm9wcywgQmFzZVRvb2x0aXBUcmlnZ2VyVHlwZSB9IGZyb20gXCIuL0Jhc2VUb29sdGlwLnR5cGVzXCI7XG5pbXBvcnQgeyBGbG9hdGluZ0Fycm93IH0gZnJvbSBcIkBmbG9hdGluZy11aS9yZWFjdFwiO1xuaW1wb3J0IHtcbiAgQVJST1dfSEVJR0hULFxuICBBUlJPV19XSURUSCxcbiAgZ2V0QXJyb3dQbGFjZW1lbnRDb3JyZWN0aW9uLFxuICBNYXhfWkluZGV4LFxufSBmcm9tIFwiLi9CYXNlVG9vbHRpcC51dGlsc1wiO1xuaW1wb3J0IHsgY3JlYXRlUG9ydGFsIH0gZnJvbSBcInJlYWN0LWRvbVwiO1xuaW1wb3J0IHsgdXNlU2hvd1Rvb2x0aXBDb250cm9sbGVyIH0gZnJvbSBcIi4vaG9va3MvdXNlU2hvd1Rvb2x0aXBDb250cm9sbGVyXCI7XG5pbXBvcnQge1xuICBiYXNlVG9vbHRpcFJlZmVyZW5jZVdyYXBwZXJTdHlsZSxcbiAgZ2V0QmFzZVRvb2x0aXBGbG9hdGluZ1dyYXBwZXJTdHlsZSxcbn0gZnJvbSBcIi4vQmFzZVRvb2x0aXAuc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgdXNlQ3VzdG9tRmxvYXRpbmcgfSBmcm9tIFwiLi9ob29rcy91c2VDdXN0b21GbG9hdGluZ1wiO1xuXG5leHBvcnQgY29uc3QgQmFzZVRvb2x0aXA6IEZDPFByb3BzV2l0aENoaWxkcmVuPEJhc2VUb29sdGlwUHJvcHM+PiA9IG1lbW8oXG4gICh7XG4gICAgZmxvYXRpbmdFbGVtZW50LFxuICAgIGFycm93Q29sb3IsXG4gICAgd2l0aEFycm93ID0gdHJ1ZSxcbiAgICBwbGFjZW1lbnQgPSBcInRvcFwiLFxuICAgIGF1dG9BZGp1c3RPdmVyZmxvdyA9IHRydWUsXG4gICAgZGVmYXVsdE9wZW4gPSBmYWxzZSxcbiAgICBvcGVuLFxuICAgIHpJbmRleCA9IE1heF9aSW5kZXgsXG4gICAgdHJpZ2dlciA9IFtcImNsaWNrXCIgYXMgQmFzZVRvb2x0aXBUcmlnZ2VyVHlwZV0sXG4gICAgbW91c2VFbnRlckRlbGF5ID0gMC4xLFxuICAgIG1vdXNlTGVhdmVEZWxheSA9IDAuMSxcbiAgICBhbGlnbixcbiAgICBjbGFzc05hbWUsXG4gICAgb25PcGVuQ2hhbmdlLFxuICAgIGNoaWxkcmVuLFxuICAgIHN0eWxlcyxcbiAgICBnZXRQb3B1cENvbnRhaW5lciA9ICgpID0+IGRvY3VtZW50LmJvZHksXG4gIH0pID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCB7IHJlZnMsIGZsb2F0aW5nU3R5bGVzLCBjb250ZXh0LCBmbG9hdGluZ1BsYWNlbWVudCwgc2V0QXJyb3dSZWYgfSA9IHVzZUN1c3RvbUZsb2F0aW5nKFxuICAgICAgcGxhY2VtZW50LFxuICAgICAgYXV0b0FkanVzdE92ZXJmbG93LFxuICAgICAgd2l0aEFycm93LFxuICAgICAgYWxpZ25cbiAgICApO1xuXG4gICAgY29uc3Qge1xuICAgICAgaXNPcGVuLFxuICAgICAgaGFuZGxlUG9pbnRlck92ZXIsXG4gICAgICBoYW5kbGVQb2ludGVyT3V0LFxuICAgICAgaGFuZGxlRm9jdXMsXG4gICAgICBoYW5kbGVCbHVyLFxuICAgICAgaGFuZGxlQ2xpY2ssXG4gICAgICBoYW5kbGVDb250ZXh0TWVudSxcbiAgICAgIG1vdXNlVXBIYW5kbGUsXG4gICAgfSA9IHVzZVNob3dUb29sdGlwQ29udHJvbGxlcih7XG4gICAgICB0cmlnZ2VyLFxuICAgICAgZGVmYXVsdE9wZW4sXG4gICAgICBvcGVuLFxuICAgICAgbW91c2VFbnRlckRlbGF5LFxuICAgICAgbW91c2VMZWF2ZURlbGF5LFxuICAgICAgcmVmcyxcbiAgICAgIG9uT3BlbkNoYW5nZSxcbiAgICB9KTtcblxuICAgIGNvbnN0IGFycm93UGxhY2VtZW50Q29ycmVjdGlvbiA9IGdldEFycm93UGxhY2VtZW50Q29ycmVjdGlvbihmbG9hdGluZ1BsYWNlbWVudCwgY29udGV4dCk7XG5cbiAgICBjb25zdCByZW5kZXJGbG9hdGluZ0VsZW1lbnQgPSAoKSA9PiB7XG4gICAgICByZXR1cm4gKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgcmVmPXtyZWZzLnNldEZsb2F0aW5nfVxuICAgICAgICAgIGNzcz17W1xuICAgICAgICAgICAgZ2V0QmFzZVRvb2x0aXBGbG9hdGluZ1dyYXBwZXJTdHlsZShmbG9hdGluZ1BsYWNlbWVudCwgd2l0aEFycm93KSxcbiAgICAgICAgICAgIHN0eWxlcz8uZmxvYXRpbmdXcmFwcGVyPy4odGhlbWUpLFxuICAgICAgICAgIF19XG4gICAgICAgICAgc3R5bGU9e3sgLi4uZmxvYXRpbmdTdHlsZXMsIHpJbmRleCB9fVxuICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICA+XG4gICAgICAgICAge2Zsb2F0aW5nRWxlbWVudH1cbiAgICAgICAgICB7d2l0aEFycm93ICYmIChcbiAgICAgICAgICAgIDxGbG9hdGluZ0Fycm93XG4gICAgICAgICAgICAgIHJlZj17c2V0QXJyb3dSZWZ9XG4gICAgICAgICAgICAgIGNvbnRleHQ9e2NvbnRleHR9XG4gICAgICAgICAgICAgIHdpZHRoPXtBUlJPV19XSURUSH1cbiAgICAgICAgICAgICAgaGVpZ2h0PXtBUlJPV19IRUlHSFR9XG4gICAgICAgICAgICAgIGZpbGw9e2Fycm93Q29sb3J9XG4gICAgICAgICAgICAgIHN0eWxlPXt7IC4uLmFycm93UGxhY2VtZW50Q29ycmVjdGlvbiB9fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIHJlZj17cmVmcy5zZXRSZWZlcmVuY2V9XG4gICAgICAgIGNzcz17W2Jhc2VUb29sdGlwUmVmZXJlbmNlV3JhcHBlclN0eWxlLCBzdHlsZXM/LnJlZmVyZW5jZVdyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgICBvblBvaW50ZXJPdmVyPXtoYW5kbGVQb2ludGVyT3Zlcn1cbiAgICAgICAgb25Qb2ludGVyT3V0PXtoYW5kbGVQb2ludGVyT3V0fVxuICAgICAgICBvbkZvY3VzPXtoYW5kbGVGb2N1c31cbiAgICAgICAgb25CbHVyPXtoYW5kbGVCbHVyfVxuICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgb25Db250ZXh0TWVudT17aGFuZGxlQ29udGV4dE1lbnV9XG4gICAgICAgIG9uTW91c2VVcD17bW91c2VVcEhhbmRsZX1cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuXG4gICAgICAgIHtpc09wZW4gJiYgY3JlYXRlUG9ydGFsKHJlbmRlckZsb2F0aW5nRWxlbWVudCgpLCBnZXRQb3B1cENvbnRhaW5lcigpKX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cbik7XG4iXX0= */"], onPointerOver: handlePointerOver, onPointerOut: handlePointerOut, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onContextMenu: handleContextMenu, onMouseUp: mouseUpHandle, children: [
     children,
     isOpen && createPortal(renderFloatingElement(), getPopupContainer())
   ] });

package/dist/components/BaseTooltip/BaseTooltip.types.d.ts

@@ -3,6 +3,15 @@ import { ReactNode } from 'react';
 import { Theme } from 'themes';
 export type BaseTooltipPlacementType = "top" | "left" | "right" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
 export type BaseTooltipTriggerType = "hover" | "focus" | "click" | "contextMenu";
+export type OffsetType = number | `${number}%`;
+export interface BaseTooltipAlign {
+    offset?: OffsetType[];
+    targetOffset?: OffsetType[];
+    overflow?: {
+        adjustX?: boolean;
+        adjustY?: boolean;
+    };
+}
 export interface BaseTooltipProps {
     floatingElement: ReactNode;
     arrowColor?: string;
@@ -16,6 +25,7 @@ export interface BaseTooltipProps {
     open?: boolean;
     zIndex?: number;
     className?: string;
+    align?: BaseTooltipAlign;
     styles?: {
         floatingWrapper?: (theme: Theme) => Interpolation;
         referenceWrapper?: (theme: Theme) => Interpolation;

package/dist/components/BaseTooltip/BaseTooltip.utils.d.ts

@@ -1,13 +1,15 @@
-import { FloatingContext, Placement } from '@floating-ui/react';
-import { BaseTooltipPlacementType } from './BaseTooltip.types';
+import { FloatingContext, Placement, Rect } from '@floating-ui/react';
+import { BaseTooltipPlacementType, OffsetType } from './BaseTooltip.types';
 export declare const ARROW_WIDTH = 8;
 export declare const ARROW_HEIGHT = 4;
 export declare const ARROW_PADDING = 6;
 export declare const FLOATING_OFFSET_WITH_ARROW_HEIGHT: number;
 export declare const Max_ZIndex = 2147483647;
+export declare const singleSides: string[];
 export declare const getArrowPlacementCorrection: (placement: Placement, context: FloatingContext) => {};
 export declare const isTopSide: (placement: Placement) => boolean;
 export declare const isBottomSide: (placement: Placement) => boolean;
 export declare const isLeftSide: (placement: Placement) => boolean;
 export declare const isRightSide: (placement: Placement) => boolean;
 export declare const convertBaseTooltipPlacement: (placement: BaseTooltipPlacementType) => Placement;
+export declare const convertOffsetValues: (rect: Rect) => (element: OffsetType, index: number) => number;

package/dist/components/BaseTooltip/BaseTooltip.utils.js

@@ -1,12 +1,13 @@
-import { isUndefined } from "lodash-es";
+import { isUndefined, isNumber } from "lodash-es";
 import { FLOATING_OFFSET } from "../../utils/consts.js";
 const ARROW_WIDTH = 8;
 const ARROW_HEIGHT = 4;
 const ARROW_PADDING = 6;
 const FLOATING_OFFSET_WITH_ARROW_HEIGHT = FLOATING_OFFSET + ARROW_HEIGHT;
 const Max_ZIndex = 2147483647;
+const singleSides = ["left", "right", "top", "bottom"];
 const leftCorrectionValues = ["top", "bottom", "top-start", "bottom-start", "top-end", "bottom-end"];
-const arrowCenterValues = ["left", "right", "top", "bottom"];
+const arrowCenterValues = singleSides;
 const arrowStartValues = ["left-start", "right-start", "top-start", "bottom-start"];
 const getArrowPosition = (placement, start, center, end) => {
   if (arrowStartValues.includes(placement)) {
@@ -30,6 +31,11 @@ const getArrowPlacementCorrection = (placement, context) => {
   const start = ARROW_PADDING;
   const end = floatingCorrectingSize - ARROW_PADDING - ARROW_WIDTH;
   const wrapperPaddingCompensation = getWrapperPaddingCompensation(placement);
+  if (arrowCenterValues.includes(placement)) {
+    return {
+      ...wrapperPaddingCompensation
+    };
+  }
   if (isLeftCorrecting) {
     return {
       left: getArrowPosition(placement, start, center, end),
@@ -44,26 +50,22 @@ const getArrowPlacementCorrection = (placement, context) => {
 const getWrapperPaddingCompensation = (placement) => {
   if (isTopSide(placement)) {
     return {
-      bottom: 0,
-      top: void 0
+      bottom: 0
     };
   }
   if (isBottomSide(placement)) {
     return {
-      top: 0,
-      bottom: void 0
+      top: 0
     };
   }
   if (isLeftSide(placement)) {
     return {
-      right: 0,
-      left: void 0
+      right: 0
     };
   }
   if (isRightSide(placement)) {
     return {
-      left: 0,
-      right: void 0
+      left: 0
     };
   }
 };
@@ -88,6 +90,14 @@ const placementBaseTooltipDictionary = {
 const convertBaseTooltipPlacement = (placement) => {
   return placementBaseTooltipDictionary[placement];
 };
+const convertOffsetValues = (rect) => (element, index) => {
+  if (isNumber(element)) {
+    return element;
+  }
+  const percentValue = Number(element.slice(0, element.length - 1));
+  const elementSize = index === 0 ? rect.width : rect.height;
+  return elementSize / 100 * percentValue;
+};
 export {
   ARROW_HEIGHT,
   ARROW_PADDING,
@@ -95,9 +105,11 @@ export {
   FLOATING_OFFSET_WITH_ARROW_HEIGHT,
   Max_ZIndex,
   convertBaseTooltipPlacement,
+  convertOffsetValues,
   getArrowPlacementCorrection,
   isBottomSide,
   isLeftSide,
   isRightSide,
-  isTopSide
+  isTopSide,
+  singleSides
 };

package/dist/components/BaseTooltip/hooks/useCustomFloating.d.ts

@@ -0,0 +1,30 @@
+import { BaseTooltipAlign, BaseTooltipPlacementType } from '../BaseTooltip.types';
+export declare const useCustomFloating: (placement: BaseTooltipPlacementType, autoAdjustOverflow: boolean, withArrow: boolean, align: BaseTooltipAlign | undefined) => {
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<HTMLDivElement>;
+    floatingStyles: import('react').CSSProperties;
+    context: {
+        x: number;
+        y: number;
+        placement: import('@floating-ui/utils').Placement;
+        floatingStyles: React.CSSProperties;
+        strategy: import('@floating-ui/utils').Strategy;
+        middlewareData: import('@floating-ui/core').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import('@floating-ui/react').ExtendedRefs<HTMLDivElement>;
+        elements: import('@floating-ui/react').ExtendedElements<HTMLDivElement>;
+    };
+    floatingPlacement: import('@floating-ui/utils').Placement;
+    setArrowRef: import('react').Dispatch<import('react').SetStateAction<SVGSVGElement | null>>;
+};

package/dist/components/BaseTooltip/hooks/useCustomFloating.js

@@ -0,0 +1,72 @@
+import { useState, useEffect } from "react";
+import { singleSides, convertOffsetValues, ARROW_PADDING, convertBaseTooltipPlacement, isLeftSide, isRightSide } from "../BaseTooltip.utils.js";
+import { flip, shift, offset, arrow, useFloating, autoUpdate } from "@floating-ui/react";
+import { isUndefined } from "lodash-es";
+const floatingMiddleware = [];
+const useCustomFloating = (placement, autoAdjustOverflow, withArrow, align) => {
+  var _a, _b;
+  const [arrowRef, setArrowRef] = useState(null);
+  const convertedPlacement = convertBaseTooltipPlacement(placement);
+  const isXMainAxis = isLeftSide(convertedPlacement) || isRightSide(convertedPlacement);
+  useEffect(() => {
+    var _a2, _b2, _c, _d, _e, _f;
+    if (autoAdjustOverflow || ((_a2 = align == null ? void 0 : align.overflow) == null ? void 0 : _a2.adjustX) || ((_b2 = align == null ? void 0 : align.overflow) == null ? void 0 : _b2.adjustY)) {
+      floatingMiddleware[0] = flip({
+        mainAxis: isXMainAxis ? !!((_c = align == null ? void 0 : align.overflow) == null ? void 0 : _c.adjustX) : !!((_d = align == null ? void 0 : align.overflow) == null ? void 0 : _d.adjustY),
+        crossAxis: isXMainAxis ? !!((_e = align == null ? void 0 : align.overflow) == null ? void 0 : _e.adjustY) : !!((_f = align == null ? void 0 : align.overflow) == null ? void 0 : _f.adjustX)
+      });
+    }
+  }, [align, (_a = align == null ? void 0 : align.overflow) == null ? void 0 : _a.adjustX, (_b = align == null ? void 0 : align.overflow) == null ? void 0 : _b.adjustY, arrowRef, autoAdjustOverflow, isXMainAxis]);
+  useEffect(() => {
+    floatingMiddleware[1] = shift({
+      mainAxis: singleSides.includes(convertedPlacement)
+    });
+  }, [convertedPlacement]);
+  useEffect(() => {
+    const offsetResult = offset(({
+      rects
+    }) => {
+      var _a2, _b2;
+      if (isUndefined(align == null ? void 0 : align.offset)) {
+        return {};
+      }
+      const convertedOffsetValues = (_a2 = align == null ? void 0 : align.offset) == null ? void 0 : _a2.map(convertOffsetValues(rects.floating));
+      const convertedTargetOffsetValues = (_b2 = align == null ? void 0 : align.targetOffset) == null ? void 0 : _b2.map(convertOffsetValues(rects.reference));
+      const mainAxis = isXMainAxis ? convertedOffsetValues[0] - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[0]) ?? 0) : convertedOffsetValues[1] - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[1]) ?? 0);
+      const crossAxis = isXMainAxis ? convertedOffsetValues[1] - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[1]) ?? 0) : convertedOffsetValues[0] - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[0]) ?? 0);
+      return {
+        mainAxis,
+        crossAxis
+      };
+    }, [convertedPlacement]);
+    floatingMiddleware[2] = offsetResult;
+  }, [align == null ? void 0 : align.offset, align == null ? void 0 : align.targetOffset, convertedPlacement, isXMainAxis]);
+  useEffect(() => {
+    if (arrowRef && withArrow) {
+      floatingMiddleware[3] = arrow({
+        element: arrowRef,
+        padding: ARROW_PADDING
+      });
+    }
+  }, [arrowRef, withArrow]);
+  const {
+    refs,
+    floatingStyles,
+    context,
+    placement: floatingPlacement
+  } = useFloating({
+    whileElementsMounted: autoUpdate,
+    placement: convertBaseTooltipPlacement(placement),
+    middleware: floatingMiddleware
+  });
+  return {
+    refs,
+    floatingStyles,
+    context,
+    floatingPlacement,
+    setArrowRef
+  };
+};
+export {
+  useCustomFloating
+};

package/dist/components/Breadcrumb/Breadcrumb.tokens.d.ts

@@ -2,7 +2,7 @@ import { Theme } from 'themes';
 export declare const getBreadcrumbTokens: (theme: Theme) => {
     breadcrumbItem: "#8C8C8C";
     breadcrumbItemHover: "#595959";
-    breadcrumbItemBgHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
+    breadcrumbItemBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
     breadcrumbLastItem: "#262626";
     breadcrumbSeparator: "#BFBFBF";
     breadcrumbItemHeight: number;

package/dist/components/Button/Button.styles.d.ts

@@ -98,8 +98,8 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         bgComplimentary: "#FAFAFA";
         bgSecondary: "#F0F0F0";
         bgContainer: "#FFFFFF";
-        bgContainerHover: "#F5F5F5";
-        bgContainerActive: "#D9D9D9";
+        bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
         bgContainerDisabled: "#F0F0F0";
         bgContainerDisabledContrast: "#D9D9D9";
         bgContainerComplimentary: "#FAFAFA";
@@ -108,10 +108,10 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         bgContainerInverseActive: "#1F1F1F";
         bgControl: "#BFBFBF";
         bgControlHover: "#8C8C8C";
-        bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-        bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-        bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-        bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+        bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
         bgFloat: "#FFFFFF";
         bgFloatContrast: "#262626";
         bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -134,6 +134,7 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         primaryHover: "#50CCC4";
         primaryActive: "#03888C";
         primaryBg: "#E1FAF6";
+        primaryBgHover: "#C3F4ED";
         primaryBorder: "#77D9CF";
         primaryHoverInverse: "#E1FAF6";
         primaryActiveInverse: "#A3E6DD";
@@ -316,6 +317,7 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         thrush40: "#50CCC4";
         thrush30: "#77D9CF";
         thrush20: "#A3E6DD";
+        thrush15: "#C3F4ED";
         thrush10: "#E1FAF6";
         transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
         transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -325,7 +327,9 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
         transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
         transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+        transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
         transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
         transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
         transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
         transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -335,7 +339,9 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
         transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
         transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+        transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
         transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
         transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
         neutral130: "#000000";
         neutral120: "#141414";
@@ -694,8 +700,8 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         bgComplimentary: "#FAFAFA";
         bgSecondary: "#F0F0F0";
         bgContainer: "#FFFFFF";
-        bgContainerHover: "#F5F5F5";
-        bgContainerActive: "#D9D9D9";
+        bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
         bgContainerDisabled: "#F0F0F0";
         bgContainerDisabledContrast: "#D9D9D9";
         bgContainerComplimentary: "#FAFAFA";
@@ -704,10 +710,10 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         bgContainerInverseActive: "#1F1F1F";
         bgControl: "#BFBFBF";
         bgControlHover: "#8C8C8C";
-        bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-        bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-        bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-        bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+        bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
         bgFloat: "#FFFFFF";
         bgFloatContrast: "#262626";
         bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -730,6 +736,7 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         primaryHover: "#50CCC4";
         primaryActive: "#03888C";
         primaryBg: "#E1FAF6";
+        primaryBgHover: "#C3F4ED";
         primaryBorder: "#77D9CF";
         primaryHoverInverse: "#E1FAF6";
         primaryActiveInverse: "#A3E6DD";
@@ -912,6 +919,7 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         thrush40: "#50CCC4";
         thrush30: "#77D9CF";
         thrush20: "#A3E6DD";
+        thrush15: "#C3F4ED";
         thrush10: "#E1FAF6";
         transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
         transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -921,7 +929,9 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
         transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
         transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+        transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
         transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
         transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
         transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
         transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -931,7 +941,9 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
         transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
         transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+        transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
         transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
         transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
         neutral130: "#000000";
         neutral120: "#141414";

package/dist/components/Button/Button.tokens.d.ts

@@ -13,8 +13,8 @@ export declare const getButtonTokens: (theme: Theme) => {
     buttonSolidDefaultBgHover: "#434343";
     buttonSolidDefaultBgActive: "#1F1F1F";
     buttonOutlinedBg: "#FFFFFF";
-    buttonTextDefaultBgHover: "#F5F5F5";
-    buttonTextDefaultBgActive: "#D9D9D9";
+    buttonTextDefaultBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    buttonTextDefaultBgActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
     buttonTextPrimaryBgHover: "#E1FAF6";
     buttonTextPrimaryBgActive: "#A3E6DD";
     buttonTextDangerBgHover: "#FFF1F0";

package/dist/components/Dropdown/Dropdown.tokens.d.ts

@@ -5,7 +5,7 @@ export declare const getDropdownTokens: (theme: Theme) => {
     dropdownItemTextDisabled: "#8C8C8C";
     dropdownItemTextExtra: "#8C8C8C";
     dropdownItemTextTitle: "#8C8C8C";
-    dropdownItemBgHover: "#F5F5F5";
+    dropdownItemBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
     dropdownItemDivider: "#E5E5E5";
     dropdownItemPaddingVertical: 4;
     dropdownItemPaddingHorizontal: 8;

package/dist/components/Dropdown/components/Item/Item.style.d.ts

@@ -11,7 +11,7 @@ export declare const getItemDefaultStyle: (disabled: boolean, selected: boolean,
         readonly boxSizing: "border-box";
         readonly cursor: "default" | "pointer";
         readonly ":hover": {
-            readonly background: "#F5F5F5" | "unset";
+            readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
         };
     };
     content: (theme: Theme) => {

package/dist/components/Dropdown/components/Menu/Menu.styles.d.ts

@@ -22,7 +22,7 @@ export declare const getMenuDefaultStyle: (maxHeight: number, minWidth: number)
         readonly padding: "4px 8px";
         readonly cursor: "pointer";
         readonly ":hover": {
-            readonly background: "#F5F5F5";
+            readonly background: `rgba(${number}, ${number}, ${number}, 0.08)`;
         };
     };
     backIcon: (theme: Theme) => {

package/dist/components/InternalPicker/pickers/SinglePicker/SinglePicker.js

@@ -5,6 +5,7 @@ import { ClassNames } from "@emotion/react";
 import { getPickerTokens } from "../../tokens.js";
 import "../../../../configure/dayjs.js";
 import "@infomaximum/icons";
+import "react-intersection-observer/test-utils";
 import { getPopupStyle } from "../../styles/Popup.styles.js";
 import { getSingleSelectorStyle } from "../../styles/SingleSelector.styles.js";
 import dayjs from "dayjs";

package/dist/components/InternalPicker/styles/Popup.styles.d.ts

@@ -989,7 +989,7 @@ export declare const getPopupStyle: (pickerTokens: PickerTokens) => (theme: Them
         readonly padding: "4px 0px 4px 12px";
         readonly borderRadius: 4;
         readonly ":hover": {
-            readonly background: "#F5F5F5";
+            readonly background: `rgba(${number}, ${number}, ${number}, 0.08)`;
         };
     };
     ".picker-time-panel-cell-selected .picker-time-panel-cell-inner": {

package/dist/components/InternalPicker/styles/TimePanel.styles.d.ts

@@ -11,7 +11,7 @@ export declare const getPickerTimePanelStyle: (pickerTokens: PickerTokens, theme
         readonly padding: "4px 0px 4px 12px";
         readonly borderRadius: 4;
         readonly ":hover": {
-            readonly background: "#F5F5F5";
+            readonly background: `rgba(${number}, ${number}, ${number}, 0.08)`;
         };
     };
     ".picker-time-panel-cell-selected .picker-time-panel-cell-inner": {

package/dist/components/InternalPicker/tokens.d.ts

@@ -14,7 +14,7 @@ export declare const getPickerTokens: (theme: Theme) => {
     pickerTextSecondary: "#BFBFBF";
     pickerNow: "#0CB3B3";
     pickerNowHover: "#50CCC4";
-    pickerCellSecondaryBgHover: "#F5F5F5";
+    pickerCellSecondaryBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
     pickerCellWithRangeBgActive: "#E1FAF6";
     pickerPaddingVertical: 4;
     pickerPaddingHorizontal: 12;

package/dist/components/Progress/Progress.styles.d.ts

@@ -4,7 +4,7 @@ export declare const getProgressStyle: ({ progressTokens: { progressLineBorderRa
     progressTokens: ProgressTokens;
 } & Required<Pick<ProgressProps, "size">>) => {
     borderRadius: 100;
-    background: `rgba(${number}, ${number}, ${number}, 0.05)`;
+    background: `rgba(${number}, ${number}, ${number}, 0.08)`;
     height: 4 | 8;
 };
 export declare const getProgressInnerStyle: ({ progressTokens, shouldChangeToSuccessColor, status, percent, }: {

package/dist/components/Progress/Progress.tokens.d.ts

@@ -3,7 +3,7 @@ export declare const getProgressTokens: (theme: Theme) => {
     readonly progressDefault: "#0CB3B3";
     readonly progressError: "#FF4D4F";
     readonly progressSuccess: "#52C41A";
-    readonly progressRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
+    readonly progressRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
     readonly progressHeightM: 8;
     readonly progressHeightS: 4;
     readonly progressLineBorderRadius: 100;

package/dist/components/Select/components/SelectOption/SelectOption.styles.d.ts

@@ -6,9 +6,9 @@ export declare const getSelectOptionStyle: (selected: boolean, disabled: boolean
         readonly boxSizing: "border-box";
         readonly transition: "background .2s, color .2s";
         readonly cursor: "pointer" | "not-allowed";
-        readonly background: "#F5F5F5" | "unset";
+        readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
         readonly ":hover, :focus, focus-visible": {
-            readonly background: "#F5F5F5" | "unset";
+            readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
             readonly outline: "none";
         };
         readonly fontFamily: "Roboto";

package/dist/components/Tabs/hooks/useMoreTabsController.js

@@ -1,5 +1,6 @@
 import { useState, useRef, useCallback, useMemo } from "react";
 import { isMenuItem } from "../../Dropdown/Dropdown.types.js";
+import { isFunction } from "lodash-es";
 const useMoreTabsController = (items, currentActiveKey, currentTabElement, onTabClick, onChange, changeActiveKey) => {
   const [hiddenTabs, setHiddenTabs] = useState([]);
   const tabsRef = useRef(null);
@@ -24,7 +25,7 @@ const useMoreTabsController = (items, currentActiveKey, currentTabElement, onTab
     }, []);
   }, [hiddenTabs, items]);
   const scrollToTab = useCallback((element) => {
-    if (tabsRef.current && element) {
+    if (tabsRef.current && isFunction(tabsRef.current.scrollTo) && element) {
       const leftPos = element.offsetLeft + element.offsetWidth < tabsRef.current.offsetWidth ? element.offsetLeft : element.offsetLeft - tabsRef.current.offsetWidth + element.offsetWidth;
       tabsRef.current.scrollTo({
         left: leftPos

package/dist/components/TreeSelect/TreeSelect.tokens.d.ts

@@ -17,7 +17,7 @@ export declare const getTreeSelectTokens: (theme: Theme) => {
     treeSelectOptionText: "#262626";
     treeSelectOptionTextSelected: "#0CB3B3";
     treeSelectOptionTextDisabled: "#8C8C8C";
-    treeSelectOptionBgHover: "#F5F5F5";
+    treeSelectOptionBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
     treeSelectPaddingVertical: 4;
     treeSelectPaddingHorizontal: 12;
     treeSelectPaddingHorizontalTag: 4;

package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.styles.d.ts

@@ -45,9 +45,9 @@ export declare const getTreeSelectOptionStyle: ({ disabled, loading, selected, i
         readonly transition: "background .2s, color .2s";
         readonly cursor: "pointer" | "not-allowed";
         readonly borderRadius: 4;
-        readonly background: "#F5F5F5" | "unset";
+        readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
         readonly ":hover, :focus, focus-visible": {
-            readonly background: "#F5F5F5" | "unset";
+            readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
             readonly outline: "none";
         };
     };

package/dist/components/Upload/Upload.tokens.d.ts

@@ -3,7 +3,7 @@ export declare const getUploadTokens: (theme: Theme) => {
     uploadText: "#262626";
     uploadTextSecondary: "#8C8C8C";
     uploadTextDisabled: "#8C8C8C";
-    uploadBgHover: "#F5F5F5";
+    uploadBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
     uploadBorder: "#D9D9D9";
     uploadDanger: "#FF4D4F";
     uploadDraggerBg: "#FAFAFA";

package/dist/components/Upload/components/UploadListItem/UploadListItem.styles.d.ts

@@ -15,7 +15,7 @@ export declare const getLiStyle: (uploadTokens: UploadTokens, listType: ListType
     padding: string;
     borderRadius: 4;
     ":hover": {
-        background: "#F5F5F5";
+        background: `rgba(${number}, ${number}, ${number}, 0.08)`;
     };
     display: string;
     columnGap: 8;
@@ -62,9 +62,9 @@ export declare const getRemoveIconWrapperStyle: (uploadTokens: UploadTokens, sta
     borderRadius: 4;
     color: "#FF4D4F" | `rgba(${number}, ${number}, ${number}, 0.3)`;
     ":hover": {
-        background: `rgba(${number}, ${number}, ${number}, 0.05)`;
+        background: `rgba(${number}, ${number}, ${number}, 0.08)`;
     };
     ":active": {
-        background: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        background: `rgba(${number}, ${number}, ${number}, 0.12)`;
     };
 };

package/dist/contexts/themeContext.d.ts

@@ -96,8 +96,8 @@ export declare const ThemeContext: import('react').Context<{
     bgComplimentary: "#FAFAFA";
     bgSecondary: "#F0F0F0";
     bgContainer: "#FFFFFF";
-    bgContainerHover: "#F5F5F5";
-    bgContainerActive: "#D9D9D9";
+    bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgContainerDisabled: "#F0F0F0";
     bgContainerDisabledContrast: "#D9D9D9";
     bgContainerComplimentary: "#FAFAFA";
@@ -106,10 +106,10 @@ export declare const ThemeContext: import('react').Context<{
     bgContainerInverseActive: "#1F1F1F";
     bgControl: "#BFBFBF";
     bgControlHover: "#8C8C8C";
-    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-    bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+    bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgFloat: "#FFFFFF";
     bgFloatContrast: "#262626";
     bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -132,6 +132,7 @@ export declare const ThemeContext: import('react').Context<{
     primaryHover: "#50CCC4";
     primaryActive: "#03888C";
     primaryBg: "#E1FAF6";
+    primaryBgHover: "#C3F4ED";
     primaryBorder: "#77D9CF";
     primaryHoverInverse: "#E1FAF6";
     primaryActiveInverse: "#A3E6DD";
@@ -314,6 +315,7 @@ export declare const ThemeContext: import('react').Context<{
     thrush40: "#50CCC4";
     thrush30: "#77D9CF";
     thrush20: "#A3E6DD";
+    thrush15: "#C3F4ED";
     thrush10: "#E1FAF6";
     transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -323,7 +325,9 @@ export declare const ThemeContext: import('react').Context<{
     transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -333,7 +337,9 @@ export declare const ThemeContext: import('react').Context<{
     transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     neutral130: "#000000";
     neutral120: "#141414";

package/dist/hooks/useTheme/useTheme.d.ts

@@ -96,8 +96,8 @@ export declare const useTheme: () => {
     bgComplimentary: "#FAFAFA";
     bgSecondary: "#F0F0F0";
     bgContainer: "#FFFFFF";
-    bgContainerHover: "#F5F5F5";
-    bgContainerActive: "#D9D9D9";
+    bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgContainerDisabled: "#F0F0F0";
     bgContainerDisabledContrast: "#D9D9D9";
     bgContainerComplimentary: "#FAFAFA";
@@ -106,10 +106,10 @@ export declare const useTheme: () => {
     bgContainerInverseActive: "#1F1F1F";
     bgControl: "#BFBFBF";
     bgControlHover: "#8C8C8C";
-    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-    bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+    bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgFloat: "#FFFFFF";
     bgFloatContrast: "#262626";
     bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -132,6 +132,7 @@ export declare const useTheme: () => {
     primaryHover: "#50CCC4";
     primaryActive: "#03888C";
     primaryBg: "#E1FAF6";
+    primaryBgHover: "#C3F4ED";
     primaryBorder: "#77D9CF";
     primaryHoverInverse: "#E1FAF6";
     primaryActiveInverse: "#A3E6DD";
@@ -314,6 +315,7 @@ export declare const useTheme: () => {
     thrush40: "#50CCC4";
     thrush30: "#77D9CF";
     thrush20: "#A3E6DD";
+    thrush15: "#C3F4ED";
     thrush10: "#E1FAF6";
     transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -323,7 +325,9 @@ export declare const useTheme: () => {
     transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -333,7 +337,9 @@ export declare const useTheme: () => {
     transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     neutral130: "#000000";
     neutral120: "#141414";

package/dist/index.d.ts

@@ -45,3 +45,4 @@ export { type FormProps, type FormItemProps, Form } from './components/Form';
 export { type PopconfirmProps, Popconfirm } from './components/Popconfirm';
 export { TreeSelect } from './components/TreeSelect';
 export type { TreeSelectProps } from './components/TreeSelect';
+export * from 'react-intersection-observer/test-utils';

package/dist/index.js

@@ -1,6 +1,7 @@
 import "./configure/dayjs.js";
 export * from "@infomaximum/icons";
 import { Checkbox } from "./components/Checkbox/index.js";
+export * from "react-intersection-observer/test-utils";
 import { themeMap } from "./themes/themes.js";
 import { ThemeProvider } from "./providers/ThemeProvider/ThemeProvider.js";
 import { useTheme } from "./hooks/useTheme/useTheme.js";

package/dist/themes/baseTokens/baseColorTokens/baseColorTokens.d.ts

@@ -118,6 +118,7 @@ export declare const baseColorTokens: {
     thrush40: "#50CCC4";
     thrush30: "#77D9CF";
     thrush20: "#A3E6DD";
+    thrush15: "#C3F4ED";
     thrush10: "#E1FAF6";
     transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -127,7 +128,9 @@ export declare const baseColorTokens: {
     transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -137,7 +140,9 @@ export declare const baseColorTokens: {
     transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     neutral130: "#000000";
     neutral120: "#141414";

package/dist/themes/baseTokens/baseColorTokens/colorGroups/thrushColor.d.ts

@@ -8,5 +8,6 @@ export declare const thrushColors: {
     readonly thrush40: "#50CCC4";
     readonly thrush30: "#77D9CF";
     readonly thrush20: "#A3E6DD";
+    readonly thrush15: "#C3F4ED";
     readonly thrush10: "#E1FAF6";
 };

package/dist/themes/baseTokens/baseColorTokens/colorGroups/thrushColor.js

@@ -8,6 +8,7 @@ const thrushColors = {
   thrush40: "#50CCC4",
   thrush30: "#77D9CF",
   thrush20: "#A3E6DD",
+  thrush15: "#C3F4ED",
   thrush10: "#E1FAF6"
 };
 export {

package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentBlackColors.d.ts

@@ -7,6 +7,8 @@ export declare const transparentBlackColors: {
     readonly transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     readonly transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     readonly transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    readonly transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     readonly transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    readonly transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     readonly transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
 };

package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentBlackColors.js

@@ -8,7 +8,9 @@ const transparentBlackColors = {
   transparentBlack40: black2Rgba(0.4),
   transparentBlack30: black2Rgba(0.3),
   transparentBlack20: black2Rgba(0.2),
+  transparentBlack12: black2Rgba(0.12),
   transparentBlack10: black2Rgba(0.1),
+  transparentBlack8: black2Rgba(0.08),
   transparentBlack5: black2Rgba(0.05)
 };
 export {

package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentWhiteColors.d.ts

@@ -7,6 +7,8 @@ export declare const transparentWhiteColors: {
     readonly transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     readonly transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     readonly transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    readonly transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     readonly transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    readonly transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     readonly transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
 };

package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentWhiteColors.js

@@ -8,7 +8,9 @@ const transparentWhiteColors = {
   transparentWhite40: white2Rgba(0.4),
   transparentWhite30: white2Rgba(0.3),
   transparentWhite20: white2Rgba(0.2),
+  transparentWhite12: white2Rgba(0.12),
   transparentWhite10: white2Rgba(0.1),
+  transparentWhite8: white2Rgba(0.08),
   transparentWhite5: white2Rgba(0.05)
 };
 export {

package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/backgroundColorTokens.d.ts

@@ -4,8 +4,8 @@ export declare const backgroundColorTokens: {
         bgComplimentary: "#FAFAFA";
         bgSecondary: "#F0F0F0";
         bgContainer: "#FFFFFF";
-        bgContainerHover: "#F5F5F5";
-        bgContainerActive: "#D9D9D9";
+        bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
         bgContainerDisabled: "#F0F0F0";
         bgContainerDisabledContrast: "#D9D9D9";
         bgContainerComplimentary: "#FAFAFA";
@@ -14,10 +14,10 @@ export declare const backgroundColorTokens: {
         bgContainerInverseActive: "#1F1F1F";
         bgControl: "#BFBFBF";
         bgControlHover: "#8C8C8C";
-        bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-        bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-        bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-        bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+        bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
         bgFloat: "#FFFFFF";
         bgFloatContrast: "#262626";
         bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;

package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/backgroundColorTokens.js

@@ -5,8 +5,8 @@ const backgroundColorTokens = {
     bgComplimentary: baseColorTokens.neutral20,
     bgSecondary: baseColorTokens.neutral40,
     bgContainer: baseColorTokens.neutral10,
-    bgContainerHover: baseColorTokens.neutral30,
-    bgContainerActive: baseColorTokens.neutral50,
+    bgContainerHover: baseColorTokens.transparentBlack8,
+    bgContainerActive: baseColorTokens.transparentBlack12,
     bgContainerDisabled: baseColorTokens.neutral40,
     bgContainerDisabledContrast: baseColorTokens.neutral50,
     bgContainerComplimentary: baseColorTokens.neutral20,
@@ -15,10 +15,10 @@ const backgroundColorTokens = {
     bgContainerInverseActive: baseColorTokens.neutral110,
     bgControl: baseColorTokens.neutral60,
     bgControlHover: baseColorTokens.neutral70,
-    bgIconHover: baseColorTokens.transparentBlack5,
-    bgIconActive: baseColorTokens.transparentBlack10,
-    bgRail: baseColorTokens.transparentBlack5,
-    bgRailHover: baseColorTokens.transparentBlack10,
+    bgIconHover: baseColorTokens.transparentBlack8,
+    bgIconActive: baseColorTokens.transparentBlack12,
+    bgRail: baseColorTokens.transparentBlack8,
+    bgRailHover: baseColorTokens.transparentBlack12,
     bgFloat: baseColorTokens.neutral10,
     bgFloatContrast: baseColorTokens.neutral100,
     bgMask: baseColorTokens.transparentBlack30

package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/primaryColorTokens.d.ts

@@ -4,6 +4,7 @@ export declare const primaryColorTokens: {
         primaryHover: "#50CCC4";
         primaryActive: "#03888C";
         primaryBg: "#E1FAF6";
+        primaryBgHover: "#C3F4ED";
         primaryBorder: "#77D9CF";
         primaryHoverInverse: "#E1FAF6";
         primaryActiveInverse: "#A3E6DD";

package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/primaryColorTokens.js

@@ -5,6 +5,7 @@ const primaryColorTokens = {
     primaryHover: baseColorTokens.thrush40,
     primaryActive: baseColorTokens.thrush70,
     primaryBg: baseColorTokens.thrush10,
+    primaryBgHover: baseColorTokens.thrush15,
     primaryBorder: baseColorTokens.thrush30,
     primaryHoverInverse: baseColorTokens.thrush10,
     primaryActiveInverse: baseColorTokens.thrush20

package/dist/themes/semanticTokens/colorSemanticTokens/semanticColorTokens.d.ts

@@ -74,8 +74,8 @@ export declare const getSemanticColorTokens: (themeName: ThemeNames) => {
     bgComplimentary: "#FAFAFA";
     bgSecondary: "#F0F0F0";
     bgContainer: "#FFFFFF";
-    bgContainerHover: "#F5F5F5";
-    bgContainerActive: "#D9D9D9";
+    bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgContainerDisabled: "#F0F0F0";
     bgContainerDisabledContrast: "#D9D9D9";
     bgContainerComplimentary: "#FAFAFA";
@@ -84,10 +84,10 @@ export declare const getSemanticColorTokens: (themeName: ThemeNames) => {
     bgContainerInverseActive: "#1F1F1F";
     bgControl: "#BFBFBF";
     bgControlHover: "#8C8C8C";
-    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-    bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+    bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgFloat: "#FFFFFF";
     bgFloatContrast: "#262626";
     bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -110,6 +110,7 @@ export declare const getSemanticColorTokens: (themeName: ThemeNames) => {
     primaryHover: "#50CCC4";
     primaryActive: "#03888C";
     primaryBg: "#E1FAF6";
+    primaryBgHover: "#C3F4ED";
     primaryBorder: "#77D9CF";
     primaryHoverInverse: "#E1FAF6";
     primaryActiveInverse: "#A3E6DD";

package/dist/themes/themes.d.ts

@@ -96,8 +96,8 @@ export declare const themeMap: Map<"light", {
     bgComplimentary: "#FAFAFA";
     bgSecondary: "#F0F0F0";
     bgContainer: "#FFFFFF";
-    bgContainerHover: "#F5F5F5";
-    bgContainerActive: "#D9D9D9";
+    bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgContainerDisabled: "#F0F0F0";
     bgContainerDisabledContrast: "#D9D9D9";
     bgContainerComplimentary: "#FAFAFA";
@@ -106,10 +106,10 @@ export declare const themeMap: Map<"light", {
     bgContainerInverseActive: "#1F1F1F";
     bgControl: "#BFBFBF";
     bgControlHover: "#8C8C8C";
-    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-    bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+    bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgFloat: "#FFFFFF";
     bgFloatContrast: "#262626";
     bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -132,6 +132,7 @@ export declare const themeMap: Map<"light", {
     primaryHover: "#50CCC4";
     primaryActive: "#03888C";
     primaryBg: "#E1FAF6";
+    primaryBgHover: "#C3F4ED";
     primaryBorder: "#77D9CF";
     primaryHoverInverse: "#E1FAF6";
     primaryActiveInverse: "#A3E6DD";
@@ -314,6 +315,7 @@ export declare const themeMap: Map<"light", {
     thrush40: "#50CCC4";
     thrush30: "#77D9CF";
     thrush20: "#A3E6DD";
+    thrush15: "#C3F4ED";
     thrush10: "#E1FAF6";
     transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -323,7 +325,9 @@ export declare const themeMap: Map<"light", {
     transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -333,7 +337,9 @@ export declare const themeMap: Map<"light", {
     transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     neutral130: "#000000";
     neutral120: "#141414";

package/dist/themes/themes.utils.d.ts

@@ -97,8 +97,8 @@ export declare const getTheme: (themeName: ThemeNames) => {
     bgComplimentary: "#FAFAFA";
     bgSecondary: "#F0F0F0";
     bgContainer: "#FFFFFF";
-    bgContainerHover: "#F5F5F5";
-    bgContainerActive: "#D9D9D9";
+    bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgContainerDisabled: "#F0F0F0";
     bgContainerDisabledContrast: "#D9D9D9";
     bgContainerComplimentary: "#FAFAFA";
@@ -107,10 +107,10 @@ export declare const getTheme: (themeName: ThemeNames) => {
     bgContainerInverseActive: "#1F1F1F";
     bgControl: "#BFBFBF";
     bgControlHover: "#8C8C8C";
-    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-    bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+    bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgFloat: "#FFFFFF";
     bgFloatContrast: "#262626";
     bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -133,6 +133,7 @@ export declare const getTheme: (themeName: ThemeNames) => {
     primaryHover: "#50CCC4";
     primaryActive: "#03888C";
     primaryBg: "#E1FAF6";
+    primaryBgHover: "#C3F4ED";
     primaryBorder: "#77D9CF";
     primaryHoverInverse: "#E1FAF6";
     primaryActiveInverse: "#A3E6DD";
@@ -315,6 +316,7 @@ export declare const getTheme: (themeName: ThemeNames) => {
     thrush40: "#50CCC4";
     thrush30: "#77D9CF";
     thrush20: "#A3E6DD";
+    thrush15: "#C3F4ED";
     thrush10: "#E1FAF6";
     transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -324,7 +326,9 @@ export declare const getTheme: (themeName: ThemeNames) => {
     transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -334,7 +338,9 @@ export declare const getTheme: (themeName: ThemeNames) => {
     transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     neutral130: "#000000";
     neutral120: "#141414";
@@ -452,8 +458,8 @@ export declare const lightTheme: {
     bgComplimentary: "#FAFAFA";
     bgSecondary: "#F0F0F0";
     bgContainer: "#FFFFFF";
-    bgContainerHover: "#F5F5F5";
-    bgContainerActive: "#D9D9D9";
+    bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgContainerDisabled: "#F0F0F0";
     bgContainerDisabledContrast: "#D9D9D9";
     bgContainerComplimentary: "#FAFAFA";
@@ -462,10 +468,10 @@ export declare const lightTheme: {
     bgContainerInverseActive: "#1F1F1F";
     bgControl: "#BFBFBF";
     bgControlHover: "#8C8C8C";
-    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-    bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+    bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgFloat: "#FFFFFF";
     bgFloatContrast: "#262626";
     bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -488,6 +494,7 @@ export declare const lightTheme: {
     primaryHover: "#50CCC4";
     primaryActive: "#03888C";
     primaryBg: "#E1FAF6";
+    primaryBgHover: "#C3F4ED";
     primaryBorder: "#77D9CF";
     primaryHoverInverse: "#E1FAF6";
     primaryActiveInverse: "#A3E6DD";
@@ -670,6 +677,7 @@ export declare const lightTheme: {
     thrush40: "#50CCC4";
     thrush30: "#77D9CF";
     thrush20: "#A3E6DD";
+    thrush15: "#C3F4ED";
     thrush10: "#E1FAF6";
     transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -679,7 +687,9 @@ export declare const lightTheme: {
     transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -689,7 +699,9 @@ export declare const lightTheme: {
     transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     neutral130: "#000000";
     neutral120: "#141414";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infomaximum/ui-kit",
   "license": "Apache-2.0",
-  "version": "0.13.3",
+  "version": "0.13.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",