@infomaximum/ui-kit 0.13.4 → 0.13.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/components/BaseSelect/BaseSelect.tokens.d.ts +1 -1
  2. package/dist/components/BaseTooltip/BaseTooltip.js +10 -26
  3. package/dist/components/BaseTooltip/BaseTooltip.types.d.ts +10 -0
  4. package/dist/components/BaseTooltip/BaseTooltip.utils.d.ts +4 -2
  5. package/dist/components/BaseTooltip/BaseTooltip.utils.js +23 -11
  6. package/dist/components/BaseTooltip/hooks/useCustomFloating.d.ts +30 -0
  7. package/dist/components/BaseTooltip/hooks/useCustomFloating.js +72 -0
  8. package/dist/components/Breadcrumb/Breadcrumb.tokens.d.ts +1 -1
  9. package/dist/components/Button/Button.styles.d.ts +24 -12
  10. package/dist/components/Button/Button.tokens.d.ts +2 -2
  11. package/dist/components/Dropdown/Dropdown.tokens.d.ts +1 -1
  12. package/dist/components/Dropdown/components/Item/Item.style.d.ts +1 -1
  13. package/dist/components/Dropdown/components/Menu/Menu.styles.d.ts +1 -1
  14. package/dist/components/InternalPicker/styles/Popup.styles.d.ts +1 -1
  15. package/dist/components/InternalPicker/styles/TimePanel.styles.d.ts +1 -1
  16. package/dist/components/InternalPicker/tokens.d.ts +1 -1
  17. package/dist/components/Progress/Progress.styles.d.ts +1 -1
  18. package/dist/components/Progress/Progress.tokens.d.ts +1 -1
  19. package/dist/components/Select/components/SelectOption/SelectOption.styles.d.ts +2 -2
  20. package/dist/components/TreeSelect/TreeSelect.tokens.d.ts +1 -1
  21. package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.styles.d.ts +2 -2
  22. package/dist/components/Upload/Upload.tokens.d.ts +1 -1
  23. package/dist/components/Upload/components/UploadListItem/UploadListItem.styles.d.ts +3 -3
  24. package/dist/contexts/themeContext.d.ts +12 -6
  25. package/dist/hooks/useTheme/useTheme.d.ts +12 -6
  26. package/dist/themes/baseTokens/baseColorTokens/baseColorTokens.d.ts +5 -0
  27. package/dist/themes/baseTokens/baseColorTokens/colorGroups/thrushColor.d.ts +1 -0
  28. package/dist/themes/baseTokens/baseColorTokens/colorGroups/thrushColor.js +1 -0
  29. package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentBlackColors.d.ts +2 -0
  30. package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentBlackColors.js +2 -0
  31. package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentWhiteColors.d.ts +2 -0
  32. package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentWhiteColors.js +2 -0
  33. package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/backgroundColorTokens.d.ts +6 -6
  34. package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/backgroundColorTokens.js +6 -6
  35. package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/primaryColorTokens.d.ts +1 -0
  36. package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/primaryColorTokens.js +1 -0
  37. package/dist/themes/semanticTokens/colorSemanticTokens/semanticColorTokens.d.ts +7 -6
  38. package/dist/themes/themes.d.ts +12 -6
  39. package/dist/themes/themes.utils.d.ts +24 -12
  40. package/package.json +1 -1
package/dist/components/BaseSelect/BaseSelect.tokens.d.ts CHANGED
@@ -17,7 +17,7 @@ export declare const getSelectTokens: (theme: Theme) => {
17
17
  selectOptionText: "#262626";
18
18
  selectOptionTextSelected: "#0CB3B3";
19
19
  selectOptionTextDisabled: "#8C8C8C";
20
- selectOptionBgHover: "#F5F5F5";
20
+ selectOptionBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
21
21
  selectPaddingVertical: 4;
22
22
  selectPaddingHorizontal: 12;
23
23
  selectPaddingHorizontalTag: 4;
package/dist/components/BaseTooltip/BaseTooltip.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { jsxs, jsx } from "@emotion/react/jsx-runtime";
2
- import { memo, useState, useEffect } from "react";
3
- import { offset, flip, arrow, useFloating, autoUpdate, FloatingArrow } from "@floating-ui/react";
4
- import { ARROW_PADDING, convertBaseTooltipPlacement, getArrowPlacementCorrection, Max_ZIndex, ARROW_WIDTH, ARROW_HEIGHT } from "./BaseTooltip.utils.js";
2
+ import { memo } from "react";
3
+ import { FloatingArrow } from "@floating-ui/react";
4
+ import { getArrowPlacementCorrection, Max_ZIndex, ARROW_WIDTH, ARROW_HEIGHT } from "./BaseTooltip.utils.js";
5
5
  import { createPortal } from "react-dom";
6
6
  import { useShowTooltipController } from "./hooks/useShowTooltipController.js";
7
7
  import { baseTooltipReferenceWrapperStyle, getBaseTooltipFloatingWrapperStyle } from "./BaseTooltip.styles.js";
8
+ import { useCustomFloating } from "./hooks/useCustomFloating.js";
8
9
  import { useTheme } from "../../hooks/useTheme/useTheme.js";
9
- const floatingMiddleware = [offset()];
10
10
  const BaseTooltip = memo(({
11
11
  floatingElement,
12
12
  arrowColor,
@@ -19,6 +19,7 @@ const BaseTooltip = memo(({
19
19
  trigger = ["click"],
20
20
  mouseEnterDelay = 0.1,
21
21
  mouseLeaveDelay = 0.1,
22
+ align,
22
23
  className,
23
24
  onOpenChange,
24
25
  children,
@@ -27,30 +28,13 @@ const BaseTooltip = memo(({
27
28
  }) => {
28
29
  var _a;
29
30
  const theme = useTheme();
30
- const [arrowRef, setArrowRef] = useState(null);
31
- useEffect(() => {
32
- if (autoAdjustOverflow) {
33
- floatingMiddleware.push(flip());
34
- }
35
- }, [arrowRef, autoAdjustOverflow]);
36
- useEffect(() => {
37
- if (arrowRef && withArrow) {
38
- floatingMiddleware.push(arrow({
39
- element: arrowRef,
40
- padding: ARROW_PADDING
41
- }));
42
- }
43
- }, [arrowRef, withArrow]);
44
31
  const {
45
32
  refs,
46
33
  floatingStyles,
47
34
  context,
48
- placement: floatingPlacement
49
- } = useFloating({
50
- whileElementsMounted: autoUpdate,
51
- placement: convertBaseTooltipPlacement(placement),
52
- middleware: floatingMiddleware
53
- });
35
+ floatingPlacement,
36
+ setArrowRef
37
+ } = useCustomFloating(placement, autoAdjustOverflow, withArrow, align);
54
38
  const {
55
39
  isOpen,
56
40
  handlePointerOver,
@@ -72,7 +56,7 @@ const BaseTooltip = memo(({
72
56
  const arrowPlacementCorrection = getArrowPlacementCorrection(floatingPlacement, context);
73
57
  const renderFloatingElement = () => {
74
58
  var _a2;
75
- 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: {
59
+ 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: {
76
60
  ...floatingStyles,
77
61
  zIndex
78
62
  }, className, children: [
@@ -82,7 +66,7 @@ const BaseTooltip = memo(({
82
66
  } })
83
67
  ] });
84
68
  };
85
- 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: [
69
+ 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: [
86
70
  children,
87
71
  isOpen && createPortal(renderFloatingElement(), getPopupContainer())
88
72
  ] });
package/dist/components/BaseTooltip/BaseTooltip.types.d.ts CHANGED
@@ -3,6 +3,15 @@ import { ReactNode } from 'react';
3
3
  import { Theme } from 'themes';
4
4
  export type BaseTooltipPlacementType = "top" | "left" | "right" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
5
5
  export type BaseTooltipTriggerType = "hover" | "focus" | "click" | "contextMenu";
6
+ export type OffsetType = number | `${number}%`;
7
+ export interface BaseTooltipAlign {
8
+ offset?: OffsetType[];
9
+ targetOffset?: OffsetType[];
10
+ overflow?: {
11
+ adjustX?: boolean;
12
+ adjustY?: boolean;
13
+ };
14
+ }
6
15
  export interface BaseTooltipProps {
7
16
  floatingElement: ReactNode;
8
17
  arrowColor?: string;
@@ -16,6 +25,7 @@ export interface BaseTooltipProps {
16
25
  open?: boolean;
17
26
  zIndex?: number;
18
27
  className?: string;
28
+ align?: BaseTooltipAlign;
19
29
  styles?: {
20
30
  floatingWrapper?: (theme: Theme) => Interpolation;
21
31
  referenceWrapper?: (theme: Theme) => Interpolation;
package/dist/components/BaseTooltip/BaseTooltip.utils.d.ts CHANGED
@@ -1,13 +1,15 @@
1
- import { FloatingContext, Placement } from '@floating-ui/react';
2
- import { BaseTooltipPlacementType } from './BaseTooltip.types';
1
+ import { FloatingContext, Placement, Rect } from '@floating-ui/react';
2
+ import { BaseTooltipPlacementType, OffsetType } from './BaseTooltip.types';
3
3
  export declare const ARROW_WIDTH = 8;
4
4
  export declare const ARROW_HEIGHT = 4;
5
5
  export declare const ARROW_PADDING = 6;
6
6
  export declare const FLOATING_OFFSET_WITH_ARROW_HEIGHT: number;
7
7
  export declare const Max_ZIndex = 2147483647;
8
+ export declare const singleSides: string[];
8
9
  export declare const getArrowPlacementCorrection: (placement: Placement, context: FloatingContext) => {};
9
10
  export declare const isTopSide: (placement: Placement) => boolean;
10
11
  export declare const isBottomSide: (placement: Placement) => boolean;
11
12
  export declare const isLeftSide: (placement: Placement) => boolean;
12
13
  export declare const isRightSide: (placement: Placement) => boolean;
13
14
  export declare const convertBaseTooltipPlacement: (placement: BaseTooltipPlacementType) => Placement;
15
+ export declare const convertOffsetValues: (rect: Rect) => (element: OffsetType, index: number) => number;
package/dist/components/BaseTooltip/BaseTooltip.utils.js CHANGED
@@ -1,12 +1,13 @@
1
- import { isUndefined } from "lodash-es";
1
+ import { isUndefined, isNumber } from "lodash-es";
2
2
  import { FLOATING_OFFSET } from "../../utils/consts.js";
3
3
  const ARROW_WIDTH = 8;
4
4
  const ARROW_HEIGHT = 4;
5
5
  const ARROW_PADDING = 6;
6
6
  const FLOATING_OFFSET_WITH_ARROW_HEIGHT = FLOATING_OFFSET + ARROW_HEIGHT;
7
7
  const Max_ZIndex = 2147483647;
8
+ const singleSides = ["left", "right", "top", "bottom"];
8
9
  const leftCorrectionValues = ["top", "bottom", "top-start", "bottom-start", "top-end", "bottom-end"];
9
- const arrowCenterValues = ["left", "right", "top", "bottom"];
10
+ const arrowCenterValues = singleSides;
10
11
  const arrowStartValues = ["left-start", "right-start", "top-start", "bottom-start"];
11
12
  const getArrowPosition = (placement, start, center, end) => {
12
13
  if (arrowStartValues.includes(placement)) {
@@ -30,6 +31,11 @@ const getArrowPlacementCorrection = (placement, context) => {
30
31
  const start = ARROW_PADDING;
31
32
  const end = floatingCorrectingSize - ARROW_PADDING - ARROW_WIDTH;
32
33
  const wrapperPaddingCompensation = getWrapperPaddingCompensation(placement);
34
+ if (arrowCenterValues.includes(placement)) {
35
+ return {
36
+ ...wrapperPaddingCompensation
37
+ };
38
+ }
33
39
  if (isLeftCorrecting) {
34
40
  return {
35
41
  left: getArrowPosition(placement, start, center, end),
@@ -44,26 +50,22 @@ const getArrowPlacementCorrection = (placement, context) => {
44
50
  const getWrapperPaddingCompensation = (placement) => {
45
51
  if (isTopSide(placement)) {
46
52
  return {
47
- bottom: 0,
48
- top: void 0
53
+ bottom: 0
49
54
  };
50
55
  }
51
56
  if (isBottomSide(placement)) {
52
57
  return {
53
- top: 0,
54
- bottom: void 0
58
+ top: 0
55
59
  };
56
60
  }
57
61
  if (isLeftSide(placement)) {
58
62
  return {
59
- right: 0,
60
- left: void 0
63
+ right: 0
61
64
  };
62
65
  }
63
66
  if (isRightSide(placement)) {
64
67
  return {
65
- left: 0,
66
- right: void 0
68
+ left: 0
67
69
  };
68
70
  }
69
71
  };
@@ -88,6 +90,14 @@ const placementBaseTooltipDictionary = {
88
90
  const convertBaseTooltipPlacement = (placement) => {
89
91
  return placementBaseTooltipDictionary[placement];
90
92
  };
93
+ const convertOffsetValues = (rect) => (element, index) => {
94
+ if (isNumber(element)) {
95
+ return element;
96
+ }
97
+ const percentValue = Number(element.slice(0, element.length - 1));
98
+ const elementSize = index === 0 ? rect.width : rect.height;
99
+ return elementSize / 100 * percentValue;
100
+ };
91
101
  export {
92
102
  ARROW_HEIGHT,
93
103
  ARROW_PADDING,
@@ -95,9 +105,11 @@ export {
95
105
  FLOATING_OFFSET_WITH_ARROW_HEIGHT,
96
106
  Max_ZIndex,
97
107
  convertBaseTooltipPlacement,
108
+ convertOffsetValues,
98
109
  getArrowPlacementCorrection,
99
110
  isBottomSide,
100
111
  isLeftSide,
101
112
  isRightSide,
102
- isTopSide
113
+ isTopSide,
114
+ singleSides
103
115
  };
package/dist/components/BaseTooltip/hooks/useCustomFloating.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ import { BaseTooltipAlign, BaseTooltipPlacementType } from '../BaseTooltip.types';
2
+ export declare const useCustomFloating: (placement: BaseTooltipPlacementType, autoAdjustOverflow: boolean, withArrow: boolean, align: BaseTooltipAlign | undefined) => {
3
+ refs: {
4
+ reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
5
+ floating: React.MutableRefObject<HTMLElement | null>;
6
+ setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
7
+ setFloating: (node: HTMLElement | null) => void;
8
+ } & import('@floating-ui/react').ExtendedRefs<HTMLDivElement>;
9
+ floatingStyles: import('react').CSSProperties;
10
+ context: {
11
+ x: number;
12
+ y: number;
13
+ placement: import('@floating-ui/utils').Placement;
14
+ floatingStyles: React.CSSProperties;
15
+ strategy: import('@floating-ui/utils').Strategy;
16
+ middlewareData: import('@floating-ui/core').MiddlewareData;
17
+ isPositioned: boolean;
18
+ update: () => void;
19
+ open: boolean;
20
+ onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
21
+ events: import('@floating-ui/react').FloatingEvents;
22
+ dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
23
+ nodeId: string | undefined;
24
+ floatingId: string | undefined;
25
+ refs: import('@floating-ui/react').ExtendedRefs<HTMLDivElement>;
26
+ elements: import('@floating-ui/react').ExtendedElements<HTMLDivElement>;
27
+ };
28
+ floatingPlacement: import('@floating-ui/utils').Placement;
29
+ setArrowRef: import('react').Dispatch<import('react').SetStateAction<SVGSVGElement | null>>;
30
+ };
package/dist/components/BaseTooltip/hooks/useCustomFloating.js ADDED
@@ -0,0 +1,72 @@
1
+ import { useState, useEffect } from "react";
2
+ import { singleSides, convertOffsetValues, ARROW_PADDING, convertBaseTooltipPlacement, isLeftSide, isRightSide } from "../BaseTooltip.utils.js";
3
+ import { flip, shift, offset, arrow, useFloating, autoUpdate } from "@floating-ui/react";
4
+ import { isUndefined } from "lodash-es";
5
+ const floatingMiddleware = [];
6
+ const useCustomFloating = (placement, autoAdjustOverflow, withArrow, align) => {
7
+ var _a, _b;
8
+ const [arrowRef, setArrowRef] = useState(null);
9
+ const convertedPlacement = convertBaseTooltipPlacement(placement);
10
+ const isXMainAxis = isLeftSide(convertedPlacement) || isRightSide(convertedPlacement);
11
+ useEffect(() => {
12
+ var _a2, _b2, _c, _d, _e, _f;
13
+ 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)) {
14
+ floatingMiddleware[0] = flip({
15
+ 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),
16
+ 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)
17
+ });
18
+ }
19
+ }, [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]);
20
+ useEffect(() => {
21
+ floatingMiddleware[1] = shift({
22
+ mainAxis: singleSides.includes(convertedPlacement)
23
+ });
24
+ }, [convertedPlacement]);
25
+ useEffect(() => {
26
+ const offsetResult = offset(({
27
+ rects
28
+ }) => {
29
+ var _a2, _b2;
30
+ if (isUndefined(align == null ? void 0 : align.offset)) {
31
+ return {};
32
+ }
33
+ const convertedOffsetValues = (_a2 = align == null ? void 0 : align.offset) == null ? void 0 : _a2.map(convertOffsetValues(rects.floating));
34
+ const convertedTargetOffsetValues = (_b2 = align == null ? void 0 : align.targetOffset) == null ? void 0 : _b2.map(convertOffsetValues(rects.reference));
35
+ const mainAxis = isXMainAxis ? convertedOffsetValues[0] - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[0]) ?? 0) : convertedOffsetValues[1] - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[1]) ?? 0);
36
+ const crossAxis = isXMainAxis ? convertedOffsetValues[1] - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[1]) ?? 0) : convertedOffsetValues[0] - ((convertedTargetOffsetValues == null ? void 0 : convertedTargetOffsetValues[0]) ?? 0);
37
+ return {
38
+ mainAxis,
39
+ crossAxis
40
+ };
41
+ }, [convertedPlacement]);
42
+ floatingMiddleware[2] = offsetResult;
43
+ }, [align == null ? void 0 : align.offset, align == null ? void 0 : align.targetOffset, convertedPlacement, isXMainAxis]);
44
+ useEffect(() => {
45
+ if (arrowRef && withArrow) {
46
+ floatingMiddleware[3] = arrow({
47
+ element: arrowRef,
48
+ padding: ARROW_PADDING
49
+ });
50
+ }
51
+ }, [arrowRef, withArrow]);
52
+ const {
53
+ refs,
54
+ floatingStyles,
55
+ context,
56
+ placement: floatingPlacement
57
+ } = useFloating({
58
+ whileElementsMounted: autoUpdate,
59
+ placement: convertBaseTooltipPlacement(placement),
60
+ middleware: floatingMiddleware
61
+ });
62
+ return {
63
+ refs,
64
+ floatingStyles,
65
+ context,
66
+ floatingPlacement,
67
+ setArrowRef
68
+ };
69
+ };
70
+ export {
71
+ useCustomFloating
72
+ };
package/dist/components/Breadcrumb/Breadcrumb.tokens.d.ts CHANGED
@@ -2,7 +2,7 @@ import { Theme } from 'themes';
2
2
  export declare const getBreadcrumbTokens: (theme: Theme) => {
3
3
  breadcrumbItem: "#8C8C8C";
4
4
  breadcrumbItemHover: "#595959";
5
- breadcrumbItemBgHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
5
+ breadcrumbItemBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
6
6
  breadcrumbLastItem: "#262626";
7
7
  breadcrumbSeparator: "#BFBFBF";
8
8
  breadcrumbItemHeight: number;
package/dist/components/Button/Button.styles.d.ts CHANGED
@@ -98,8 +98,8 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
98
98
  bgComplimentary: "#FAFAFA";
99
99
  bgSecondary: "#F0F0F0";
100
100
  bgContainer: "#FFFFFF";
101
- bgContainerHover: "#F5F5F5";
102
- bgContainerActive: "#D9D9D9";
101
+ bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
102
+ bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
103
103
  bgContainerDisabled: "#F0F0F0";
104
104
  bgContainerDisabledContrast: "#D9D9D9";
105
105
  bgContainerComplimentary: "#FAFAFA";
@@ -108,10 +108,10 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
108
108
  bgContainerInverseActive: "#1F1F1F";
109
109
  bgControl: "#BFBFBF";
110
110
  bgControlHover: "#8C8C8C";
111
- bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
112
- bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
113
- bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
114
- bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
111
+ bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
112
+ bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
113
+ bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
114
+ bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
115
115
  bgFloat: "#FFFFFF";
116
116
  bgFloatContrast: "#262626";
117
117
  bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -134,6 +134,7 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
134
134
  primaryHover: "#50CCC4";
135
135
  primaryActive: "#03888C";
136
136
  primaryBg: "#E1FAF6";
137
+ primaryBgHover: "#C3F4ED";
137
138
  primaryBorder: "#77D9CF";
138
139
  primaryHoverInverse: "#E1FAF6";
139
140
  primaryActiveInverse: "#A3E6DD";
@@ -316,6 +317,7 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
316
317
  thrush40: "#50CCC4";
317
318
  thrush30: "#77D9CF";
318
319
  thrush20: "#A3E6DD";
320
+ thrush15: "#C3F4ED";
319
321
  thrush10: "#E1FAF6";
320
322
  transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
321
323
  transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -325,7 +327,9 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
325
327
  transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
326
328
  transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
327
329
  transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
330
+ transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
328
331
  transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
332
+ transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
329
333
  transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
330
334
  transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
331
335
  transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -335,7 +339,9 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
335
339
  transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
336
340
  transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
337
341
  transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
342
+ transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
338
343
  transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
344
+ transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
339
345
  transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
340
346
  neutral130: "#000000";
341
347
  neutral120: "#141414";
@@ -694,8 +700,8 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
694
700
  bgComplimentary: "#FAFAFA";
695
701
  bgSecondary: "#F0F0F0";
696
702
  bgContainer: "#FFFFFF";
697
- bgContainerHover: "#F5F5F5";
698
- bgContainerActive: "#D9D9D9";
703
+ bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
704
+ bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
699
705
  bgContainerDisabled: "#F0F0F0";
700
706
  bgContainerDisabledContrast: "#D9D9D9";
701
707
  bgContainerComplimentary: "#FAFAFA";
@@ -704,10 +710,10 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
704
710
  bgContainerInverseActive: "#1F1F1F";
705
711
  bgControl: "#BFBFBF";
706
712
  bgControlHover: "#8C8C8C";
707
- bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
708
- bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
709
- bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
710
- bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
713
+ bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
714
+ bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
715
+ bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
716
+ bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
711
717
  bgFloat: "#FFFFFF";
712
718
  bgFloatContrast: "#262626";
713
719
  bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -730,6 +736,7 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
730
736
  primaryHover: "#50CCC4";
731
737
  primaryActive: "#03888C";
732
738
  primaryBg: "#E1FAF6";
739
+ primaryBgHover: "#C3F4ED";
733
740
  primaryBorder: "#77D9CF";
734
741
  primaryHoverInverse: "#E1FAF6";
735
742
  primaryActiveInverse: "#A3E6DD";
@@ -912,6 +919,7 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
912
919
  thrush40: "#50CCC4";
913
920
  thrush30: "#77D9CF";
914
921
  thrush20: "#A3E6DD";
922
+ thrush15: "#C3F4ED";
915
923
  thrush10: "#E1FAF6";
916
924
  transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
917
925
  transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -921,7 +929,9 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
921
929
  transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
922
930
  transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
923
931
  transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
932
+ transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
924
933
  transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
934
+ transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
925
935
  transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
926
936
  transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
927
937
  transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -931,7 +941,9 @@ export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled
931
941
  transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
932
942
  transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
933
943
  transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
944
+ transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
934
945
  transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
946
+ transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
935
947
  transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
936
948
  neutral130: "#000000";
937
949
  neutral120: "#141414";
package/dist/components/Button/Button.tokens.d.ts CHANGED
@@ -13,8 +13,8 @@ export declare const getButtonTokens: (theme: Theme) => {
13
13
  buttonSolidDefaultBgHover: "#434343";
14
14
  buttonSolidDefaultBgActive: "#1F1F1F";
15
15
  buttonOutlinedBg: "#FFFFFF";
16
- buttonTextDefaultBgHover: "#F5F5F5";
17
- buttonTextDefaultBgActive: "#D9D9D9";
16
+ buttonTextDefaultBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
17
+ buttonTextDefaultBgActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
18
18
  buttonTextPrimaryBgHover: "#E1FAF6";
19
19
  buttonTextPrimaryBgActive: "#A3E6DD";
20
20
  buttonTextDangerBgHover: "#FFF1F0";
package/dist/components/Dropdown/Dropdown.tokens.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare const getDropdownTokens: (theme: Theme) => {
5
5
  dropdownItemTextDisabled: "#8C8C8C";
6
6
  dropdownItemTextExtra: "#8C8C8C";
7
7
  dropdownItemTextTitle: "#8C8C8C";
8
- dropdownItemBgHover: "#F5F5F5";
8
+ dropdownItemBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
9
9
  dropdownItemDivider: "#E5E5E5";
10
10
  dropdownItemPaddingVertical: 4;
11
11
  dropdownItemPaddingHorizontal: 8;
package/dist/components/Dropdown/components/Item/Item.style.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare const getItemDefaultStyle: (disabled: boolean, selected: boolean,
11
11
  readonly boxSizing: "border-box";
12
12
  readonly cursor: "default" | "pointer";
13
13
  readonly ":hover": {
14
- readonly background: "#F5F5F5" | "unset";
14
+ readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
15
15
  };
16
16
  };
17
17
  content: (theme: Theme) => {
package/dist/components/Dropdown/components/Menu/Menu.styles.d.ts CHANGED
@@ -22,7 +22,7 @@ export declare const getMenuDefaultStyle: (maxHeight: number, minWidth: number)
22
22
  readonly padding: "4px 8px";
23
23
  readonly cursor: "pointer";
24
24
  readonly ":hover": {
25
- readonly background: "#F5F5F5";
25
+ readonly background: `rgba(${number}, ${number}, ${number}, 0.08)`;
26
26
  };
27
27
  };
28
28
  backIcon: (theme: Theme) => {
package/dist/components/InternalPicker/styles/Popup.styles.d.ts CHANGED
@@ -989,7 +989,7 @@ export declare const getPopupStyle: (pickerTokens: PickerTokens) => (theme: Them
989
989
  readonly padding: "4px 0px 4px 12px";
990
990
  readonly borderRadius: 4;
991
991
  readonly ":hover": {
992
- readonly background: "#F5F5F5";
992
+ readonly background: `rgba(${number}, ${number}, ${number}, 0.08)`;
993
993
  };
994
994
  };
995
995
  ".picker-time-panel-cell-selected .picker-time-panel-cell-inner": {
package/dist/components/InternalPicker/styles/TimePanel.styles.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare const getPickerTimePanelStyle: (pickerTokens: PickerTokens, theme
11
11
  readonly padding: "4px 0px 4px 12px";
12
12
  readonly borderRadius: 4;
13
13
  readonly ":hover": {
14
- readonly background: "#F5F5F5";
14
+ readonly background: `rgba(${number}, ${number}, ${number}, 0.08)`;
15
15
  };
16
16
  };
17
17
  ".picker-time-panel-cell-selected .picker-time-panel-cell-inner": {
package/dist/components/InternalPicker/tokens.d.ts CHANGED
@@ -14,7 +14,7 @@ export declare const getPickerTokens: (theme: Theme) => {
14
14
  pickerTextSecondary: "#BFBFBF";
15
15
  pickerNow: "#0CB3B3";
16
16
  pickerNowHover: "#50CCC4";
17
- pickerCellSecondaryBgHover: "#F5F5F5";
17
+ pickerCellSecondaryBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
18
18
  pickerCellWithRangeBgActive: "#E1FAF6";
19
19
  pickerPaddingVertical: 4;
20
20
  pickerPaddingHorizontal: 12;
package/dist/components/Progress/Progress.styles.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare const getProgressStyle: ({ progressTokens: { progressLineBorderRa
4
4
  progressTokens: ProgressTokens;
5
5
  } & Required<Pick<ProgressProps, "size">>) => {
6
6
  borderRadius: 100;
7
- background: `rgba(${number}, ${number}, ${number}, 0.05)`;
7
+ background: `rgba(${number}, ${number}, ${number}, 0.08)`;
8
8
  height: 4 | 8;
9
9
  };
10
10
  export declare const getProgressInnerStyle: ({ progressTokens, shouldChangeToSuccessColor, status, percent, }: {
package/dist/components/Progress/Progress.tokens.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare const getProgressTokens: (theme: Theme) => {
3
3
  readonly progressDefault: "#0CB3B3";
4
4
  readonly progressError: "#FF4D4F";
5
5
  readonly progressSuccess: "#52C41A";
6
- readonly progressRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
6
+ readonly progressRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
7
7
  readonly progressHeightM: 8;
8
8
  readonly progressHeightS: 4;
9
9
  readonly progressLineBorderRadius: 100;
package/dist/components/Select/components/SelectOption/SelectOption.styles.d.ts CHANGED
@@ -6,9 +6,9 @@ export declare const getSelectOptionStyle: (selected: boolean, disabled: boolean
6
6
  readonly boxSizing: "border-box";
7
7
  readonly transition: "background .2s, color .2s";
8
8
  readonly cursor: "pointer" | "not-allowed";
9
- readonly background: "#F5F5F5" | "unset";
9
+ readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
10
10
  readonly ":hover, :focus, focus-visible": {
11
- readonly background: "#F5F5F5" | "unset";
11
+ readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
12
12
  readonly outline: "none";
13
13
  };
14
14
  readonly fontFamily: "Roboto";
package/dist/components/TreeSelect/TreeSelect.tokens.d.ts CHANGED
@@ -17,7 +17,7 @@ export declare const getTreeSelectTokens: (theme: Theme) => {
17
17
  treeSelectOptionText: "#262626";
18
18
  treeSelectOptionTextSelected: "#0CB3B3";
19
19
  treeSelectOptionTextDisabled: "#8C8C8C";
20
- treeSelectOptionBgHover: "#F5F5F5";
20
+ treeSelectOptionBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
21
21
  treeSelectPaddingVertical: 4;
22
22
  treeSelectPaddingHorizontal: 12;
23
23
  treeSelectPaddingHorizontalTag: 4;
package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.styles.d.ts CHANGED
@@ -45,9 +45,9 @@ export declare const getTreeSelectOptionStyle: ({ disabled, loading, selected, i
45
45
  readonly transition: "background .2s, color .2s";
46
46
  readonly cursor: "pointer" | "not-allowed";
47
47
  readonly borderRadius: 4;
48
- readonly background: "#F5F5F5" | "unset";
48
+ readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
49
49
  readonly ":hover, :focus, focus-visible": {
50
- readonly background: "#F5F5F5" | "unset";
50
+ readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
51
51
  readonly outline: "none";
52
52
  };
53
53
  };
package/dist/components/Upload/Upload.tokens.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare const getUploadTokens: (theme: Theme) => {
3
3
  uploadText: "#262626";
4
4
  uploadTextSecondary: "#8C8C8C";
5
5
  uploadTextDisabled: "#8C8C8C";
6
- uploadBgHover: "#F5F5F5";
6
+ uploadBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
7
7
  uploadBorder: "#D9D9D9";
8
8
  uploadDanger: "#FF4D4F";
9
9
  uploadDraggerBg: "#FAFAFA";
package/dist/components/Upload/components/UploadListItem/UploadListItem.styles.d.ts CHANGED
@@ -15,7 +15,7 @@ export declare const getLiStyle: (uploadTokens: UploadTokens, listType: ListType
15
15
  padding: string;
16
16
  borderRadius: 4;
17
17
  ":hover": {
18
- background: "#F5F5F5";
18
+ background: `rgba(${number}, ${number}, ${number}, 0.08)`;
19
19
  };
20
20
  display: string;
21
21
  columnGap: 8;
@@ -62,9 +62,9 @@ export declare const getRemoveIconWrapperStyle: (uploadTokens: UploadTokens, sta
62
62
  borderRadius: 4;
63
63
  color: "#FF4D4F" | `rgba(${number}, ${number}, ${number}, 0.3)`;
64
64
  ":hover": {
65
- background: `rgba(${number}, ${number}, ${number}, 0.05)`;
65
+ background: `rgba(${number}, ${number}, ${number}, 0.08)`;
66
66
  };
67
67
  ":active": {
68
- background: `rgba(${number}, ${number}, ${number}, 0.1)`;
68
+ background: `rgba(${number}, ${number}, ${number}, 0.12)`;
69
69
  };
70
70
  };
package/dist/contexts/themeContext.d.ts CHANGED
@@ -96,8 +96,8 @@ export declare const ThemeContext: import('react').Context<{
96
96
  bgComplimentary: "#FAFAFA";
97
97
  bgSecondary: "#F0F0F0";
98
98
  bgContainer: "#FFFFFF";
99
- bgContainerHover: "#F5F5F5";
100
- bgContainerActive: "#D9D9D9";
99
+ bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
100
+ bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
101
101
  bgContainerDisabled: "#F0F0F0";
102
102
  bgContainerDisabledContrast: "#D9D9D9";
103
103
  bgContainerComplimentary: "#FAFAFA";
@@ -106,10 +106,10 @@ export declare const ThemeContext: import('react').Context<{
106
106
  bgContainerInverseActive: "#1F1F1F";
107
107
  bgControl: "#BFBFBF";
108
108
  bgControlHover: "#8C8C8C";
109
- bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
110
- bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
111
- bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
112
- bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
109
+ bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
110
+ bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
111
+ bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
112
+ bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
113
113
  bgFloat: "#FFFFFF";
114
114
  bgFloatContrast: "#262626";
115
115
  bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -132,6 +132,7 @@ export declare const ThemeContext: import('react').Context<{
132
132
  primaryHover: "#50CCC4";
133
133
  primaryActive: "#03888C";
134
134
  primaryBg: "#E1FAF6";
135
+ primaryBgHover: "#C3F4ED";
135
136
  primaryBorder: "#77D9CF";
136
137
  primaryHoverInverse: "#E1FAF6";
137
138
  primaryActiveInverse: "#A3E6DD";
@@ -314,6 +315,7 @@ export declare const ThemeContext: import('react').Context<{
314
315
  thrush40: "#50CCC4";
315
316
  thrush30: "#77D9CF";
316
317
  thrush20: "#A3E6DD";
318
+ thrush15: "#C3F4ED";
317
319
  thrush10: "#E1FAF6";
318
320
  transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
319
321
  transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -323,7 +325,9 @@ export declare const ThemeContext: import('react').Context<{
323
325
  transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
324
326
  transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
325
327
  transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
328
+ transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
326
329
  transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
330
+ transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
327
331
  transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
328
332
  transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
329
333
  transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -333,7 +337,9 @@ export declare const ThemeContext: import('react').Context<{
333
337
  transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
334
338
  transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
335
339
  transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
340
+ transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
336
341
  transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
342
+ transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
337
343
  transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
338
344
  neutral130: "#000000";
339
345
  neutral120: "#141414";
package/dist/hooks/useTheme/useTheme.d.ts CHANGED
@@ -96,8 +96,8 @@ export declare const useTheme: () => {
96
96
  bgComplimentary: "#FAFAFA";
97
97
  bgSecondary: "#F0F0F0";
98
98
  bgContainer: "#FFFFFF";
99
- bgContainerHover: "#F5F5F5";
100
- bgContainerActive: "#D9D9D9";
99
+ bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
100
+ bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
101
101
  bgContainerDisabled: "#F0F0F0";
102
102
  bgContainerDisabledContrast: "#D9D9D9";
103
103
  bgContainerComplimentary: "#FAFAFA";
@@ -106,10 +106,10 @@ export declare const useTheme: () => {
106
106
  bgContainerInverseActive: "#1F1F1F";
107
107
  bgControl: "#BFBFBF";
108
108
  bgControlHover: "#8C8C8C";
109
- bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
110
- bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
111
- bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
112
- bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
109
+ bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
110
+ bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
111
+ bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
112
+ bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
113
113
  bgFloat: "#FFFFFF";
114
114
  bgFloatContrast: "#262626";
115
115
  bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -132,6 +132,7 @@ export declare const useTheme: () => {
132
132
  primaryHover: "#50CCC4";
133
133
  primaryActive: "#03888C";
134
134
  primaryBg: "#E1FAF6";
135
+ primaryBgHover: "#C3F4ED";
135
136
  primaryBorder: "#77D9CF";
136
137
  primaryHoverInverse: "#E1FAF6";
137
138
  primaryActiveInverse: "#A3E6DD";
@@ -314,6 +315,7 @@ export declare const useTheme: () => {
314
315
  thrush40: "#50CCC4";
315
316
  thrush30: "#77D9CF";
316
317
  thrush20: "#A3E6DD";
318
+ thrush15: "#C3F4ED";
317
319
  thrush10: "#E1FAF6";
318
320
  transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
319
321
  transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -323,7 +325,9 @@ export declare const useTheme: () => {
323
325
  transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
324
326
  transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
325
327
  transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
328
+ transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
326
329
  transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
330
+ transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
327
331
  transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
328
332
  transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
329
333
  transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -333,7 +337,9 @@ export declare const useTheme: () => {
333
337
  transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
334
338
  transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
335
339
  transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
340
+ transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
336
341
  transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
342
+ transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
337
343
  transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
338
344
  neutral130: "#000000";
339
345
  neutral120: "#141414";
package/dist/themes/baseTokens/baseColorTokens/baseColorTokens.d.ts CHANGED
@@ -118,6 +118,7 @@ export declare const baseColorTokens: {
118
118
  thrush40: "#50CCC4";
119
119
  thrush30: "#77D9CF";
120
120
  thrush20: "#A3E6DD";
121
+ thrush15: "#C3F4ED";
121
122
  thrush10: "#E1FAF6";
122
123
  transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
123
124
  transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -127,7 +128,9 @@ export declare const baseColorTokens: {
127
128
  transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
128
129
  transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
129
130
  transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
131
+ transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
130
132
  transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
133
+ transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
131
134
  transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
132
135
  transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
133
136
  transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -137,7 +140,9 @@ export declare const baseColorTokens: {
137
140
  transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
138
141
  transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
139
142
  transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
143
+ transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
140
144
  transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
145
+ transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
141
146
  transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
142
147
  neutral130: "#000000";
143
148
  neutral120: "#141414";
package/dist/themes/baseTokens/baseColorTokens/colorGroups/thrushColor.d.ts CHANGED
@@ -8,5 +8,6 @@ export declare const thrushColors: {
8
8
  readonly thrush40: "#50CCC4";
9
9
  readonly thrush30: "#77D9CF";
10
10
  readonly thrush20: "#A3E6DD";
11
+ readonly thrush15: "#C3F4ED";
11
12
  readonly thrush10: "#E1FAF6";
12
13
  };
package/dist/themes/baseTokens/baseColorTokens/colorGroups/thrushColor.js CHANGED
@@ -8,6 +8,7 @@ const thrushColors = {
8
8
  thrush40: "#50CCC4",
9
9
  thrush30: "#77D9CF",
10
10
  thrush20: "#A3E6DD",
11
+ thrush15: "#C3F4ED",
11
12
  thrush10: "#E1FAF6"
12
13
  };
13
14
  export {
package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentBlackColors.d.ts CHANGED
@@ -7,6 +7,8 @@ export declare const transparentBlackColors: {
7
7
  readonly transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
8
8
  readonly transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
9
9
  readonly transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
10
+ readonly transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
10
11
  readonly transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
12
+ readonly transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
11
13
  readonly transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
12
14
  };
package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentBlackColors.js CHANGED
@@ -8,7 +8,9 @@ const transparentBlackColors = {
8
8
  transparentBlack40: black2Rgba(0.4),
9
9
  transparentBlack30: black2Rgba(0.3),
10
10
  transparentBlack20: black2Rgba(0.2),
11
+ transparentBlack12: black2Rgba(0.12),
11
12
  transparentBlack10: black2Rgba(0.1),
13
+ transparentBlack8: black2Rgba(0.08),
12
14
  transparentBlack5: black2Rgba(0.05)
13
15
  };
14
16
  export {
package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentWhiteColors.d.ts CHANGED
@@ -7,6 +7,8 @@ export declare const transparentWhiteColors: {
7
7
  readonly transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
8
8
  readonly transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
9
9
  readonly transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
10
+ readonly transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
10
11
  readonly transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
12
+ readonly transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
11
13
  readonly transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
12
14
  };
package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentWhiteColors.js CHANGED
@@ -8,7 +8,9 @@ const transparentWhiteColors = {
8
8
  transparentWhite40: white2Rgba(0.4),
9
9
  transparentWhite30: white2Rgba(0.3),
10
10
  transparentWhite20: white2Rgba(0.2),
11
+ transparentWhite12: white2Rgba(0.12),
11
12
  transparentWhite10: white2Rgba(0.1),
13
+ transparentWhite8: white2Rgba(0.08),
12
14
  transparentWhite5: white2Rgba(0.05)
13
15
  };
14
16
  export {
package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/backgroundColorTokens.d.ts CHANGED
@@ -4,8 +4,8 @@ export declare const backgroundColorTokens: {
4
4
  bgComplimentary: "#FAFAFA";
5
5
  bgSecondary: "#F0F0F0";
6
6
  bgContainer: "#FFFFFF";
7
- bgContainerHover: "#F5F5F5";
8
- bgContainerActive: "#D9D9D9";
7
+ bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
8
+ bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
9
9
  bgContainerDisabled: "#F0F0F0";
10
10
  bgContainerDisabledContrast: "#D9D9D9";
11
11
  bgContainerComplimentary: "#FAFAFA";
@@ -14,10 +14,10 @@ export declare const backgroundColorTokens: {
14
14
  bgContainerInverseActive: "#1F1F1F";
15
15
  bgControl: "#BFBFBF";
16
16
  bgControlHover: "#8C8C8C";
17
- bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
18
- bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
19
- bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
20
- bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
17
+ bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
18
+ bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
19
+ bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
20
+ bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
21
21
  bgFloat: "#FFFFFF";
22
22
  bgFloatContrast: "#262626";
23
23
  bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/backgroundColorTokens.js CHANGED
@@ -5,8 +5,8 @@ const backgroundColorTokens = {
5
5
  bgComplimentary: baseColorTokens.neutral20,
6
6
  bgSecondary: baseColorTokens.neutral40,
7
7
  bgContainer: baseColorTokens.neutral10,
8
- bgContainerHover: baseColorTokens.neutral30,
9
- bgContainerActive: baseColorTokens.neutral50,
8
+ bgContainerHover: baseColorTokens.transparentBlack8,
9
+ bgContainerActive: baseColorTokens.transparentBlack12,
10
10
  bgContainerDisabled: baseColorTokens.neutral40,
11
11
  bgContainerDisabledContrast: baseColorTokens.neutral50,
12
12
  bgContainerComplimentary: baseColorTokens.neutral20,
@@ -15,10 +15,10 @@ const backgroundColorTokens = {
15
15
  bgContainerInverseActive: baseColorTokens.neutral110,
16
16
  bgControl: baseColorTokens.neutral60,
17
17
  bgControlHover: baseColorTokens.neutral70,
18
- bgIconHover: baseColorTokens.transparentBlack5,
19
- bgIconActive: baseColorTokens.transparentBlack10,
20
- bgRail: baseColorTokens.transparentBlack5,
21
- bgRailHover: baseColorTokens.transparentBlack10,
18
+ bgIconHover: baseColorTokens.transparentBlack8,
19
+ bgIconActive: baseColorTokens.transparentBlack12,
20
+ bgRail: baseColorTokens.transparentBlack8,
21
+ bgRailHover: baseColorTokens.transparentBlack12,
22
22
  bgFloat: baseColorTokens.neutral10,
23
23
  bgFloatContrast: baseColorTokens.neutral100,
24
24
  bgMask: baseColorTokens.transparentBlack30
package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/primaryColorTokens.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const primaryColorTokens: {
4
4
  primaryHover: "#50CCC4";
5
5
  primaryActive: "#03888C";
6
6
  primaryBg: "#E1FAF6";
7
+ primaryBgHover: "#C3F4ED";
7
8
  primaryBorder: "#77D9CF";
8
9
  primaryHoverInverse: "#E1FAF6";
9
10
  primaryActiveInverse: "#A3E6DD";
package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/primaryColorTokens.js CHANGED
@@ -5,6 +5,7 @@ const primaryColorTokens = {
5
5
  primaryHover: baseColorTokens.thrush40,
6
6
  primaryActive: baseColorTokens.thrush70,
7
7
  primaryBg: baseColorTokens.thrush10,
8
+ primaryBgHover: baseColorTokens.thrush15,
8
9
  primaryBorder: baseColorTokens.thrush30,
9
10
  primaryHoverInverse: baseColorTokens.thrush10,
10
11
  primaryActiveInverse: baseColorTokens.thrush20
package/dist/themes/semanticTokens/colorSemanticTokens/semanticColorTokens.d.ts CHANGED
@@ -74,8 +74,8 @@ export declare const getSemanticColorTokens: (themeName: ThemeNames) => {
74
74
  bgComplimentary: "#FAFAFA";
75
75
  bgSecondary: "#F0F0F0";
76
76
  bgContainer: "#FFFFFF";
77
- bgContainerHover: "#F5F5F5";
78
- bgContainerActive: "#D9D9D9";
77
+ bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
78
+ bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
79
79
  bgContainerDisabled: "#F0F0F0";
80
80
  bgContainerDisabledContrast: "#D9D9D9";
81
81
  bgContainerComplimentary: "#FAFAFA";
@@ -84,10 +84,10 @@ export declare const getSemanticColorTokens: (themeName: ThemeNames) => {
84
84
  bgContainerInverseActive: "#1F1F1F";
85
85
  bgControl: "#BFBFBF";
86
86
  bgControlHover: "#8C8C8C";
87
- bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
88
- bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
89
- bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
90
- bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
87
+ bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
88
+ bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
89
+ bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
90
+ bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
91
91
  bgFloat: "#FFFFFF";
92
92
  bgFloatContrast: "#262626";
93
93
  bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -110,6 +110,7 @@ export declare const getSemanticColorTokens: (themeName: ThemeNames) => {
110
110
  primaryHover: "#50CCC4";
111
111
  primaryActive: "#03888C";
112
112
  primaryBg: "#E1FAF6";
113
+ primaryBgHover: "#C3F4ED";
113
114
  primaryBorder: "#77D9CF";
114
115
  primaryHoverInverse: "#E1FAF6";
115
116
  primaryActiveInverse: "#A3E6DD";
package/dist/themes/themes.d.ts CHANGED
@@ -96,8 +96,8 @@ export declare const themeMap: Map<"light", {
96
96
  bgComplimentary: "#FAFAFA";
97
97
  bgSecondary: "#F0F0F0";
98
98
  bgContainer: "#FFFFFF";
99
- bgContainerHover: "#F5F5F5";
100
- bgContainerActive: "#D9D9D9";
99
+ bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
100
+ bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
101
101
  bgContainerDisabled: "#F0F0F0";
102
102
  bgContainerDisabledContrast: "#D9D9D9";
103
103
  bgContainerComplimentary: "#FAFAFA";
@@ -106,10 +106,10 @@ export declare const themeMap: Map<"light", {
106
106
  bgContainerInverseActive: "#1F1F1F";
107
107
  bgControl: "#BFBFBF";
108
108
  bgControlHover: "#8C8C8C";
109
- bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
110
- bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
111
- bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
112
- bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
109
+ bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
110
+ bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
111
+ bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
112
+ bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
113
113
  bgFloat: "#FFFFFF";
114
114
  bgFloatContrast: "#262626";
115
115
  bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -132,6 +132,7 @@ export declare const themeMap: Map<"light", {
132
132
  primaryHover: "#50CCC4";
133
133
  primaryActive: "#03888C";
134
134
  primaryBg: "#E1FAF6";
135
+ primaryBgHover: "#C3F4ED";
135
136
  primaryBorder: "#77D9CF";
136
137
  primaryHoverInverse: "#E1FAF6";
137
138
  primaryActiveInverse: "#A3E6DD";
@@ -314,6 +315,7 @@ export declare const themeMap: Map<"light", {
314
315
  thrush40: "#50CCC4";
315
316
  thrush30: "#77D9CF";
316
317
  thrush20: "#A3E6DD";
318
+ thrush15: "#C3F4ED";
317
319
  thrush10: "#E1FAF6";
318
320
  transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
319
321
  transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -323,7 +325,9 @@ export declare const themeMap: Map<"light", {
323
325
  transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
324
326
  transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
325
327
  transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
328
+ transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
326
329
  transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
330
+ transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
327
331
  transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
328
332
  transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
329
333
  transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -333,7 +337,9 @@ export declare const themeMap: Map<"light", {
333
337
  transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
334
338
  transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
335
339
  transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
340
+ transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
336
341
  transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
342
+ transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
337
343
  transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
338
344
  neutral130: "#000000";
339
345
  neutral120: "#141414";
package/dist/themes/themes.utils.d.ts CHANGED
@@ -97,8 +97,8 @@ export declare const getTheme: (themeName: ThemeNames) => {
97
97
  bgComplimentary: "#FAFAFA";
98
98
  bgSecondary: "#F0F0F0";
99
99
  bgContainer: "#FFFFFF";
100
- bgContainerHover: "#F5F5F5";
101
- bgContainerActive: "#D9D9D9";
100
+ bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
101
+ bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
102
102
  bgContainerDisabled: "#F0F0F0";
103
103
  bgContainerDisabledContrast: "#D9D9D9";
104
104
  bgContainerComplimentary: "#FAFAFA";
@@ -107,10 +107,10 @@ export declare const getTheme: (themeName: ThemeNames) => {
107
107
  bgContainerInverseActive: "#1F1F1F";
108
108
  bgControl: "#BFBFBF";
109
109
  bgControlHover: "#8C8C8C";
110
- bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
111
- bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
112
- bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
113
- bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
110
+ bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
111
+ bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
112
+ bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
113
+ bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
114
114
  bgFloat: "#FFFFFF";
115
115
  bgFloatContrast: "#262626";
116
116
  bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -133,6 +133,7 @@ export declare const getTheme: (themeName: ThemeNames) => {
133
133
  primaryHover: "#50CCC4";
134
134
  primaryActive: "#03888C";
135
135
  primaryBg: "#E1FAF6";
136
+ primaryBgHover: "#C3F4ED";
136
137
  primaryBorder: "#77D9CF";
137
138
  primaryHoverInverse: "#E1FAF6";
138
139
  primaryActiveInverse: "#A3E6DD";
@@ -315,6 +316,7 @@ export declare const getTheme: (themeName: ThemeNames) => {
315
316
  thrush40: "#50CCC4";
316
317
  thrush30: "#77D9CF";
317
318
  thrush20: "#A3E6DD";
319
+ thrush15: "#C3F4ED";
318
320
  thrush10: "#E1FAF6";
319
321
  transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
320
322
  transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -324,7 +326,9 @@ export declare const getTheme: (themeName: ThemeNames) => {
324
326
  transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
325
327
  transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
326
328
  transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
329
+ transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
327
330
  transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
331
+ transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
328
332
  transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
329
333
  transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
330
334
  transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -334,7 +338,9 @@ export declare const getTheme: (themeName: ThemeNames) => {
334
338
  transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
335
339
  transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
336
340
  transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
341
+ transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
337
342
  transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
343
+ transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
338
344
  transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
339
345
  neutral130: "#000000";
340
346
  neutral120: "#141414";
@@ -452,8 +458,8 @@ export declare const lightTheme: {
452
458
  bgComplimentary: "#FAFAFA";
453
459
  bgSecondary: "#F0F0F0";
454
460
  bgContainer: "#FFFFFF";
455
- bgContainerHover: "#F5F5F5";
456
- bgContainerActive: "#D9D9D9";
461
+ bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
462
+ bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
457
463
  bgContainerDisabled: "#F0F0F0";
458
464
  bgContainerDisabledContrast: "#D9D9D9";
459
465
  bgContainerComplimentary: "#FAFAFA";
@@ -462,10 +468,10 @@ export declare const lightTheme: {
462
468
  bgContainerInverseActive: "#1F1F1F";
463
469
  bgControl: "#BFBFBF";
464
470
  bgControlHover: "#8C8C8C";
465
- bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
466
- bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
467
- bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
468
- bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
471
+ bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
472
+ bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
473
+ bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
474
+ bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
469
475
  bgFloat: "#FFFFFF";
470
476
  bgFloatContrast: "#262626";
471
477
  bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -488,6 +494,7 @@ export declare const lightTheme: {
488
494
  primaryHover: "#50CCC4";
489
495
  primaryActive: "#03888C";
490
496
  primaryBg: "#E1FAF6";
497
+ primaryBgHover: "#C3F4ED";
491
498
  primaryBorder: "#77D9CF";
492
499
  primaryHoverInverse: "#E1FAF6";
493
500
  primaryActiveInverse: "#A3E6DD";
@@ -670,6 +677,7 @@ export declare const lightTheme: {
670
677
  thrush40: "#50CCC4";
671
678
  thrush30: "#77D9CF";
672
679
  thrush20: "#A3E6DD";
680
+ thrush15: "#C3F4ED";
673
681
  thrush10: "#E1FAF6";
674
682
  transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
675
683
  transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -679,7 +687,9 @@ export declare const lightTheme: {
679
687
  transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
680
688
  transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
681
689
  transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
690
+ transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
682
691
  transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
692
+ transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
683
693
  transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
684
694
  transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
685
695
  transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -689,7 +699,9 @@ export declare const lightTheme: {
689
699
  transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
690
700
  transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
691
701
  transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
702
+ transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
692
703
  transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
704
+ transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
693
705
  transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
694
706
  neutral130: "#000000";
695
707
  neutral120: "#141414";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@infomaximum/ui-kit",
3
3
  "license": "Apache-2.0",
4
- "version": "0.13.4",
4
+ "version": "0.13.5",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",