@infomaximum/ui-kit 0.13.4 → 0.14.0

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,27 +134,32 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         primaryHover: "#50CCC4";
         primaryActive: "#03888C";
         primaryBg: "#E1FAF6";
+        primaryBgHover: "#C3F4ED";
         primaryBorder: "#77D9CF";
         primaryHoverInverse: "#E1FAF6";
         primaryActiveInverse: "#A3E6DD";
         typography: {
             readonly header1: {
                 readonly fontFamily: "Roboto";
+                readonly fontWeight: 500;
                 readonly fontSize: 24;
                 readonly lineHeight: "32px";
             };
             readonly header2: {
                 readonly fontFamily: "Roboto";
+                readonly fontWeight: 500;
                 readonly fontSize: 16;
                 readonly lineHeight: "24px";
             };
             readonly subheader1: {
                 readonly fontFamily: "Roboto";
+                readonly fontWeight: 500;
                 readonly fontSize: 14;
                 readonly lineHeight: "20px";
             };
             readonly subheader2: {
                 readonly fontFamily: "Roboto";
+                readonly fontWeight: 500;
                 readonly fontSize: 12;
                 readonly lineHeight: "20px";
             };
@@ -316,6 +321,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 +331,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 +343,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 +704,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 +714,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,27 +740,32 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
         primaryHover: "#50CCC4";
         primaryActive: "#03888C";
         primaryBg: "#E1FAF6";
+        primaryBgHover: "#C3F4ED";
         primaryBorder: "#77D9CF";
         primaryHoverInverse: "#E1FAF6";
         primaryActiveInverse: "#A3E6DD";
         typography: {
             readonly header1: {
                 readonly fontFamily: "Roboto";
+                readonly fontWeight: 500;
                 readonly fontSize: 24;
                 readonly lineHeight: "32px";
             };
             readonly header2: {
                 readonly fontFamily: "Roboto";
+                readonly fontWeight: 500;
                 readonly fontSize: 16;
                 readonly lineHeight: "24px";
             };
             readonly subheader1: {
                 readonly fontFamily: "Roboto";
+                readonly fontWeight: 500;
                 readonly fontSize: 14;
                 readonly lineHeight: "20px";
             };
             readonly subheader2: {
                 readonly fontFamily: "Roboto";
+                readonly fontWeight: 500;
                 readonly fontSize: 12;
                 readonly lineHeight: "20px";
             };
@@ -912,6 +927,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 +937,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 +949,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/Empty/Empty.d.ts

@@ -0,0 +1,3 @@
+import { NamedExoticComponent } from 'react';
+import { EmptyProps, WithImages } from './Empty.types';
+export declare const Empty: NamedExoticComponent<EmptyProps> & WithImages;

package/dist/components/Empty/Empty.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { memo } from "react";
+import { getEmptyTokens } from "./Empty.tokens.js";
+import { emptyStyle, imageWrapperStyle, titleStyle, captionStyle, footerStyle } from "./Empty.styles.js";
+import { isString } from "lodash-es";
+import { emptyString } from "../../utils/const/index.js";
+import { DefaultImg } from "./components/images/DefaultImg.js";
+import { FilterImg } from "./components/images/FilterImg.js";
+import { SearchImg } from "./components/images/SearchImg.js";
+import { LockedImg } from "./components/images/LockedImg.js";
+import { BookmarkImg } from "./components/images/BookmarkImg.js";
+import { TestingImg } from "./components/images/TestingImg.js";
+import { _404Img } from "./components/images/_404Img.js";
+import { useTheme } from "../../hooks/useTheme/useTheme.js";
+const EmptyComponent = (props) => {
+  const {
+    title,
+    caption,
+    image: imageProp = Empty.DEFAULT,
+    children
+  } = props;
+  const theme = useTheme();
+  const emptyTokens = getEmptyTokens(theme);
+  const image = (() => {
+    if (!isString(imageProp)) {
+      return imageProp;
+    }
+    return /* @__PURE__ */ jsx("img", { src: imageProp, alt: isString(title) && title || isString(caption) && caption || emptyString });
+  })();
+  return /* @__PURE__ */ jsxs("div", { css: emptyStyle(emptyTokens), children: [
+    /* @__PURE__ */ jsx("div", { css: imageWrapperStyle(theme), children: image }),
+    title && /* @__PURE__ */ jsx("div", { css: titleStyle(emptyTokens)(theme), children: title }),
+    caption && /* @__PURE__ */ jsx("div", { css: captionStyle(emptyTokens)(theme), children: caption }),
+    children && /* @__PURE__ */ jsx("div", { css: footerStyle(emptyTokens), children })
+  ] });
+};
+const Empty = memo(EmptyComponent);
+Empty.DEFAULT = /* @__PURE__ */ jsx(DefaultImg, {});
+Empty.FILTER = /* @__PURE__ */ jsx(FilterImg, {});
+Empty.SEARCH = /* @__PURE__ */ jsx(SearchImg, {});
+Empty.LOCKED = /* @__PURE__ */ jsx(LockedImg, {});
+Empty.BOOKMARK = /* @__PURE__ */ jsx(BookmarkImg, {});
+Empty.TESTING = /* @__PURE__ */ jsx(TestingImg, {});
+Empty[404] = /* @__PURE__ */ jsx(_404Img, {});
+export {
+  Empty
+};