@synerise/ds-tooltip 1.3.7 → 1.4.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.4.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@1.3.7...@synerise/ds-tooltip@1.4.0) (2026-02-05)
+
+### Features
+
+- **tooltip:** migrate to popover ([53ecd29](https://github.com/synerise/synerise-design/commit/53ecd293fa31bdcfd921c6c5fd91db9c2c643eda))
+
 ## [1.3.7](https://github.com/synerise/synerise-design/compare/@synerise/ds-tooltip@1.3.6...@synerise/ds-tooltip@1.3.7) (2026-02-02)
 
 **Note:** Version bump only for package @synerise/ds-tooltip

package/dist/Tooltip.const.d.ts

@@ -0,0 +1,4 @@
+import { type FlipConfig, type ShiftConfig } from '@synerise/ds-popover';
+export declare const POPOVER_TRANSITION_DURATION = 150;
+export declare const POPOVER_FLIP_CONFIG: FlipConfig;
+export declare const POPOVER_SHIFT_CONFIG: ShiftConfig;

package/dist/Tooltip.const.js

@@ -0,0 +1,5 @@
+export var POPOVER_TRANSITION_DURATION = 150;
+export var POPOVER_FLIP_CONFIG = {};
+export var POPOVER_SHIFT_CONFIG = {
+  crossAxis: true
+};

package/dist/Tooltip.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@synerise/ds-core/dist/js/style';
-import './style/index.less';
-declare const Tooltip: React.ForwardRefExoticComponent<Omit<import("antd/lib/tooltip").TooltipPropsWithTitle, "title"> & import("./Tooltip.types").TooltipExtendedProps & React.RefAttributes<HTMLElement>>;
+import type { TooltipProps } from './Tooltip.types';
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLElement>>;
 export default Tooltip;

package/dist/Tooltip.js

@@ -1,14 +1,12 @@
-var _excluded = ["type", "icon", "title", "shortCuts", "status", "description", "timeToHideAfterClick", "offset", "children", "button", "render", "image", "disabled"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import AntdTooltip from 'antd/lib/tooltip';
-import React, { cloneElement, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import '@synerise/ds-core/dist/js/style';
-import Scrollbar from '@synerise/ds-scrollbar';
-import { getPopupContainer } from '@synerise/ds-utils';
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { useTheme } from '@synerise/ds-core';
+import { Popover, PopoverContent, PopoverTrigger, getPlacement } from '@synerise/ds-popover';
+import { getPopupContainer as defaultGetPopupContainer } from '@synerise/ds-utils';
+import { POPOVER_FLIP_CONFIG, POPOVER_SHIFT_CONFIG, POPOVER_TRANSITION_DURATION } from './Tooltip.const';
 import * as S from './Tooltip.styles';
-import "./style/index.css";
+import { getOffsetConfig, getTransitionConfig } from './Tooltip.utils';
+import { TooltipContent } from './TooltipContent';
 var Tooltip = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'default' : _ref$type,
@@ -26,88 +24,93 @@ var Tooltip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     render = _ref.render,
     image = _ref.image,
     disabled = _ref.disabled,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState(false),
-    isVisible = _useState[0],
-    setIsVisible = _useState[1];
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
+    open = _ref.open,
+    zIndex = _ref.zIndex,
+    onOpenChange = _ref.onOpenChange,
+    popoverProps = _ref.popoverProps,
+    getPopupContainer = _ref.getPopupContainer,
+    overlayStyle = _ref.overlayStyle;
+  var _useState = useState(open || false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
   var timeoutClickRef = useRef(null);
-  var captureClick = function captureClick(event) {
-    event.stopPropagation();
-  };
-  var shouldRenderDescription = type !== 'default' && description;
-  var tooltipComponent = /*#__PURE__*/React.createElement(S.TooltipComponent, {
-    onClick: captureClick,
-    tooltipType: type
-  }, /*#__PURE__*/React.createElement(S.TooltipContent, null, status && /*#__PURE__*/React.createElement(S.TooltipStatus, null, status), title && /*#__PURE__*/React.createElement(S.TooltipTitle, {
-    tooltipType: type
-  }, icon, /*#__PURE__*/React.createElement(S.TooltipTitleWrapper, null, title), shortCuts && /*#__PURE__*/React.createElement(S.TooltipHint, null, Array.isArray(shortCuts) ? shortCuts.map(function (hint, index) {
-    return /*#__PURE__*/React.createElement(S.TooltipKey, {
-      key: "key-" + index
-    }, hint);
-  }) : /*#__PURE__*/React.createElement(S.TooltipKey, null, shortCuts))), image && /*#__PURE__*/React.createElement(S.TooltipImage, {
-    extraMargin: !!shouldRenderDescription
-  }, image), shouldRenderDescription && /*#__PURE__*/React.createElement(S.TooltipDescription, {
-    tooltipType: type
-  }, type === 'largeScrollable' ? /*#__PURE__*/React.createElement(Scrollbar, {
-    absolute: true,
-    maxHeight: 90,
-    style: {
-      paddingRight: 16
-    }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, shouldRenderDescription)) : shouldRenderDescription)), button && /*#__PURE__*/React.createElement(S.TooltipButton, null, button));
-  var overlayClassName = useMemo(function () {
-    return "ds-tooltip-offset-" + offset + " ds-tooltip-type-" + type;
-  }, [offset, type]);
-  var tooltipContentExists = Boolean(description || title || icon);
+  var theme = useTheme();
+  var floatingPlacement = getPlacement(placement);
+  var tooltipContentExists = Boolean(description || title || icon || typeof render === 'function');
   useEffect(function () {
     return function () {
       timeoutClickRef.current && clearTimeout(timeoutClickRef.current);
     };
   }, []);
+  useEffect(function () {
+    setIsOpen(!!open);
+  }, [open]);
   var handleOnClickHideDelay = function handleOnClickHideDelay(visible) {
     if (!visible) {
       timeoutClickRef.current && clearTimeout(timeoutClickRef.current);
-      setIsVisible(false);
+      setIsOpen(false);
+      onOpenChange == null || onOpenChange(false);
     } else {
-      setIsVisible(true);
+      setIsOpen(true);
       timeoutClickRef.current = setTimeout(function () {
-        setIsVisible(false);
+        onOpenChange == null || onOpenChange(false);
+        setIsOpen(false);
       }, timeToHideAfterClick);
     }
   };
-  var handleHideAfterClick = props.trigger === 'click' && timeToHideAfterClick && {
-    visible: isVisible,
-    onVisibleChange: function onVisibleChange(visible) {
-      handleOnClickHideDelay(visible);
+  var handleOpenChange = function handleOpenChange(newOpen) {
+    if (trigger === 'click' && timeToHideAfterClick) {
+      handleOnClickHideDelay(newOpen);
+    } else {
+      setIsOpen(newOpen);
+      onOpenChange == null || onOpenChange(newOpen);
     }
   };
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  var childrenRef = children == null ? void 0 : children.ref;
-  var mergedRef = useMergeRefs([ref, childrenRef]);
-  var tooltipTrigger = ref && /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, {
-    mergedRef: mergedRef
-  }) : children;
-  if (render !== undefined) {
-    return /*#__PURE__*/React.createElement(AntdTooltip, _extends({
-      overlayClassName: overlayClassName,
-      autoAdjustOverflow: false,
-      title: render(),
-      align: {
-        offset: [0, 0]
-      },
-      overlayStyle: {
-        maxWidth: 'unset'
-      },
-      getPopupContainer: getPopupContainer
-    }, handleHideAfterClick, props), tooltipTrigger);
+  var tooltipContent = useMemo(function () {
+    return render ? /*#__PURE__*/React.createElement(S.TooltipWrapper, {
+      style: overlayStyle
+    }, render()) : /*#__PURE__*/React.createElement(TooltipContent, {
+      title: title,
+      description: description,
+      icon: icon,
+      button: button,
+      shortCuts: shortCuts,
+      type: type,
+      image: image,
+      status: status,
+      overlayStyle: overlayStyle
+    });
+  }, [button, description, icon, image, render, shortCuts, status, overlayStyle, title, type]);
+  var isTriggeredByClick = Array.isArray(trigger) ? trigger.includes('click') : trigger === 'click';
+  var handleTriggerClick = function handleTriggerClick() {
+    isTriggeredByClick && handleOpenChange(!isOpen);
+  };
+  if (!tooltipContentExists || disabled) {
+    return children;
   }
-  return tooltipContentExists && !disabled ? /*#__PURE__*/React.createElement(AntdTooltip, _extends({
-    overlayClassName: overlayClassName,
-    title: tooltipComponent,
-    align: {
-      offset: [0, 0]
-    },
-    getPopupContainer: getPopupContainer
-  }, handleHideAfterClick, props), tooltipTrigger) : /*#__PURE__*/React.createElement(React.Fragment, null, tooltipTrigger);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, _extends({
+    placement: floatingPlacement,
+    trigger: trigger,
+    modal: false,
+    onOpenChange: handleOpenChange,
+    open: isOpen,
+    autoUpdate: true,
+    offsetConfig: getOffsetConfig(offset),
+    transitionDuration: POPOVER_TRANSITION_DURATION,
+    flipConfig: POPOVER_FLIP_CONFIG,
+    shiftConfig: POPOVER_SHIFT_CONFIG,
+    getTransitionConfig: getTransitionConfig,
+    getPopupContainer: getPopupContainer || defaultGetPopupContainer,
+    testId: "tooltip",
+    zIndex: zIndex || parseInt(theme.variables['zindex-tooltip'])
+  }, popoverProps), /*#__PURE__*/React.createElement(PopoverTrigger, {
+    ref: ref,
+    asChild: true,
+    onClick: handleTriggerClick
+  }, children), /*#__PURE__*/React.createElement(PopoverContent, null, tooltipContent)));
 });
 export default Tooltip;

package/dist/Tooltip.styles.d.ts

@@ -14,6 +14,7 @@ export declare const TooltipStatus: import("styled-components").StyledComponent<
 export declare const TooltipImage: import("styled-components").StyledComponent<"div", any, {
     extraMargin: boolean;
 }, never>;
+export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TooltipComponent: import("styled-components").StyledComponent<"div", any, {
     tooltipType: TooltipTypes;
 }, never>;

package/dist/Tooltip.styles.js

@@ -46,10 +46,18 @@ export var TooltipImage = styled.div.withConfig({
 })(["display:flex;align-items:center;flex-direction:column;", " img,video{max-width:100%;}"], function (props) {
   return props.extraMargin && 'margin-bottom: 4px;';
 });
-export var TooltipComponent = styled.div.withConfig({
-  displayName: "Tooltipstyles__TooltipComponent",
+export var TooltipWrapper = styled.div.withConfig({
+  displayName: "Tooltipstyles__TooltipWrapper",
   componentId: "sc-mghjny-9"
-})(["background-color:rgba(56,67,80,0.9);min-height:24px;width:100%;border-radius:3px;color:", ";overflow:hidden;text-align:left;", "{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:", ";}"], function (props) {
+})(["box-shadow:", ";"], function (props) {
+  return props.theme.variables['box-shadow-2'];
+});
+export var TooltipComponent = styled(TooltipWrapper).withConfig({
+  displayName: "Tooltipstyles__TooltipComponent",
+  componentId: "sc-mghjny-10"
+})(["font-size:11px;font-weight:500;min-height:24px;text-align:center;max-width:", ";width:max-content;background-color:rgba(56,67,80,0.9);min-height:24px;width:100%;border-radius:3px;color:", ";overflow:hidden;text-align:left;", "{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:", ";}"], function (props) {
+  return props.tooltipType === 'largeScrollable' ? '400px' : '250px';
+}, function (props) {
   return props.theme.palette['grey-200'];
 }, TooltipContent, function (props) {
   return props.tooltipType === 'default' ? '3px 8px' : '12px';

package/dist/Tooltip.types.d.ts

@@ -1,7 +1,8 @@
-import { type TooltipPropsWithTitle } from 'antd/lib/tooltip';
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
+import { type LegacyTooltipPlacement, type PopoverOptions, type PopoverTriggerType } from '@synerise/ds-popover';
+export type TooltipContentProps = Pick<TooltipProps, 'title' | 'description' | 'image' | 'icon' | 'shortCuts' | 'button' | 'status' | 'overlayStyle'> & Required<Pick<TooltipProps, 'type'>>;
 export type TooltipTypes = 'default' | 'largeSimple' | 'largeScrollable';
-export type TooltipExtendedProps = {
+export type TooltipProps = {
     type?: TooltipTypes;
     icon?: ReactNode;
     status?: ReactNode;
@@ -12,8 +13,15 @@ export type TooltipExtendedProps = {
     timeToHideAfterClick?: number;
     offset?: 'default' | 'small';
     button?: ReactNode;
+    children?: ReactNode;
     render?: () => ReactNode;
     disabled?: boolean;
+    placement?: LegacyTooltipPlacement;
+    trigger?: PopoverTriggerType | PopoverTriggerType[];
+    zIndex?: number;
+    overlayStyle?: CSSProperties;
+    popoverProps?: Omit<PopoverOptions, 'zIndex' | 'getPopupContainer'>;
+    getPopupContainer?: PopoverOptions['getPopupContainer'];
+    open?: boolean;
+    onOpenChange?: (newOpen: boolean) => void;
 };
-export default TooltipExtendedProps;
-export type TooltipProps = Omit<TooltipPropsWithTitle, 'title'> & TooltipExtendedProps;

package/dist/Tooltip.utils.d.ts

@@ -0,0 +1,11 @@
+import { type TooltipProps } from 'Tooltip.types';
+import { type OffsetConfig } from '@synerise/ds-popover';
+export declare const getTransitionConfig: () => {
+    open: {
+        opacity: number;
+    };
+    initial: {
+        opacity: number;
+    };
+};
+export declare const getOffsetConfig: (offset: TooltipProps["offset"]) => OffsetConfig;

package/dist/Tooltip.utils.js

@@ -0,0 +1,17 @@
+// import { type UseTransitionStylesProps } from '@floating-ui/react';
+
+export var getTransitionConfig = function getTransitionConfig() {
+  return {
+    open: {
+      opacity: 1
+    },
+    initial: {
+      opacity: 0
+    }
+  };
+};
+export var getOffsetConfig = function getOffsetConfig(offset) {
+  return {
+    mainAxis: offset === 'small' ? 4 : 8
+  };
+};

package/dist/TooltipContent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type TooltipContentProps } from './Tooltip.types';
+export declare const TooltipContent: ({ type, title, button, description, shortCuts, icon, status, image, overlayStyle, }: TooltipContentProps) => React.JSX.Element;

package/dist/TooltipContent.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Scrollbar from '@synerise/ds-scrollbar';
+import * as S from './Tooltip.styles';
+export var TooltipContent = function TooltipContent(_ref) {
+  var type = _ref.type,
+    title = _ref.title,
+    button = _ref.button,
+    description = _ref.description,
+    shortCuts = _ref.shortCuts,
+    icon = _ref.icon,
+    status = _ref.status,
+    image = _ref.image,
+    overlayStyle = _ref.overlayStyle;
+  var captureClick = function captureClick(event) {
+    event.stopPropagation();
+  };
+  var shouldRenderDescription = type !== 'default' && description;
+  return /*#__PURE__*/React.createElement(S.TooltipComponent, {
+    onClick: captureClick,
+    tooltipType: type,
+    style: overlayStyle
+  }, /*#__PURE__*/React.createElement(S.TooltipContent, null, status && /*#__PURE__*/React.createElement(S.TooltipStatus, null, status), title && /*#__PURE__*/React.createElement(S.TooltipTitle, {
+    tooltipType: type
+  }, icon, /*#__PURE__*/React.createElement(S.TooltipTitleWrapper, null, title), shortCuts && /*#__PURE__*/React.createElement(S.TooltipHint, null, Array.isArray(shortCuts) ? shortCuts.map(function (hint, index) {
+    return /*#__PURE__*/React.createElement(S.TooltipKey, {
+      key: "key-" + index
+    }, hint);
+  }) : /*#__PURE__*/React.createElement(S.TooltipKey, null, shortCuts))), image && /*#__PURE__*/React.createElement(S.TooltipImage, {
+    extraMargin: !!shouldRenderDescription
+  }, image), shouldRenderDescription && /*#__PURE__*/React.createElement(S.TooltipDescription, {
+    tooltipType: type
+  }, type === 'largeScrollable' ? /*#__PURE__*/React.createElement(Scrollbar, {
+    absolute: true,
+    maxHeight: 90,
+    style: {
+      paddingRight: 16
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, shouldRenderDescription)) : shouldRenderDescription)), button && /*#__PURE__*/React.createElement(S.TooltipButton, null, button));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-tooltip",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "description": "Tooltip UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -36,15 +36,18 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@synerise/ds-icon": "^1.11.0",
-    "@synerise/ds-scrollbar": "^1.2.7",
-    "@synerise/ds-utils": "^1.5.4"
+    "@synerise/ds-icon": "^1.11.1",
+    "@synerise/ds-popover": "^1.4.0",
+    "@synerise/ds-scrollbar": "^1.2.8",
+    "@synerise/ds-utils": "^1.6.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "6a3a82f8bc80e10eeb818795035e05393550e82e"
+  "devDependencies": {
+    "@testing-library/user-event": "^14.6.1"
+  },
+  "gitHead": "ac8decd9736940735bf05198b24b3eeeb5900b18"
 }

package/dist/Tooltip.example.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const TooltipExample: React.FC;
-export default TooltipExample;

package/dist/Tooltip.example.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import Tooltip from './Tooltip';
-var TooltipExample = function TooltipExample() {
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "lool"
-  }));
-};
-export default TooltipExample;

package/dist/style/index.css

@@ -1 +0,0 @@
-.ant-tooltip{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:absolute;z-index:991060;display:block;width:max-content;width:intrinsic;max-width:250px;visibility:visible}.ant-tooltip-content{position:relative}.ant-tooltip-hidden{display:none}.ant-tooltip-placement-top,.ant-tooltip-placement-topLeft,.ant-tooltip-placement-topRight{padding-bottom:4px}.ant-tooltip-placement-right,.ant-tooltip-placement-rightBottom,.ant-tooltip-placement-rightTop{padding-left:4px}.ant-tooltip-placement-bottom,.ant-tooltip-placement-bottomLeft,.ant-tooltip-placement-bottomRight{padding-top:4px}.ant-tooltip-placement-left,.ant-tooltip-placement-leftBottom,.ant-tooltip-placement-leftTop{padding-right:4px}.ant-tooltip-inner{min-width:30px;min-height:32px;padding:6px 8px;color:#fff;text-align:left;text-decoration:none;word-wrap:break-word;background-color:#384350;border-radius:3px;box-shadow:0 2px 6px rgba(171,178,183,.12)}.ant-tooltip-arrow{position:absolute;z-index:2;display:block;width:13.07106781px;height:13.07106781px;overflow:hidden;background:0 0;pointer-events:none}.ant-tooltip-arrow-content{--antd-arrow-background-color:linear-gradient(to right bottom, rgba(56, 67, 80, 0.9), #384350);position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:5px;height:5px;margin:auto;content:'';pointer-events:auto;border-radius:0 0 2px;pointer-events:none}.ant-tooltip-arrow-content::before{position:absolute;top:-5px;left:-5px;width:15px;height:15px;background:var(--antd-arrow-background-color);background-repeat:no-repeat;background-position:-4px -4px;content:'';clip-path:inset(33% 33%);clip-path:path('M 3.5355339059327373 11.464466094067262 A 5 5 0 0 1 7.071067811865475 10 L 8 10 A 2 2 0 0 0 10 8 L 10 7.071067811865475 A 5 5 0 0 1 11.464466094067262 3.5355339059327373 L 10.464466094067262 3.5355339059327373 L 3.5355339059327373 10.464466094067262 Z')}.ant-tooltip-placement-top .ant-tooltip-arrow,.ant-tooltip-placement-topLeft .ant-tooltip-arrow,.ant-tooltip-placement-topRight .ant-tooltip-arrow{bottom:0;transform:translateY(100%)}.ant-tooltip-placement-top .ant-tooltip-arrow-content,.ant-tooltip-placement-topLeft .ant-tooltip-arrow-content,.ant-tooltip-placement-topRight .ant-tooltip-arrow-content{box-shadow:3px 3px 7px rgba(0,0,0,.07);transform:translateY(-6.53553391px) rotate(45deg)}.ant-tooltip-placement-top .ant-tooltip-arrow{left:50%;transform:translateY(100%) translateX(-50%)}.ant-tooltip-placement-topLeft .ant-tooltip-arrow{left:13px}.ant-tooltip-placement-topRight .ant-tooltip-arrow{right:13px}.ant-tooltip-placement-right .ant-tooltip-arrow,.ant-tooltip-placement-rightBottom .ant-tooltip-arrow,.ant-tooltip-placement-rightTop .ant-tooltip-arrow{left:0;transform:translateX(-100%)}.ant-tooltip-placement-right .ant-tooltip-arrow-content,.ant-tooltip-placement-rightBottom .ant-tooltip-arrow-content,.ant-tooltip-placement-rightTop .ant-tooltip-arrow-content{box-shadow:-3px 3px 7px rgba(0,0,0,.07);transform:translateX(6.53553391px) rotate(135deg)}.ant-tooltip-placement-right .ant-tooltip-arrow{top:50%;transform:translateX(-100%) translateY(-50%)}.ant-tooltip-placement-rightTop .ant-tooltip-arrow{top:5px}.ant-tooltip-placement-rightBottom .ant-tooltip-arrow{bottom:5px}.ant-tooltip-placement-left .ant-tooltip-arrow,.ant-tooltip-placement-leftBottom .ant-tooltip-arrow,.ant-tooltip-placement-leftTop .ant-tooltip-arrow{right:0;transform:translateX(100%)}.ant-tooltip-placement-left .ant-tooltip-arrow-content,.ant-tooltip-placement-leftBottom .ant-tooltip-arrow-content,.ant-tooltip-placement-leftTop .ant-tooltip-arrow-content{box-shadow:3px -3px 7px rgba(0,0,0,.07);transform:translateX(-6.53553391px) rotate(315deg)}.ant-tooltip-placement-left .ant-tooltip-arrow{top:50%;transform:translateX(100%) translateY(-50%)}.ant-tooltip-placement-leftTop .ant-tooltip-arrow{top:5px}.ant-tooltip-placement-leftBottom .ant-tooltip-arrow{bottom:5px}.ant-tooltip-placement-bottom .ant-tooltip-arrow,.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow,.ant-tooltip-placement-bottomRight .ant-tooltip-arrow{top:0;transform:translateY(-100%)}.ant-tooltip-placement-bottom .ant-tooltip-arrow-content,.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow-content,.ant-tooltip-placement-bottomRight .ant-tooltip-arrow-content{box-shadow:-3px -3px 7px rgba(0,0,0,.07);transform:translateY(6.53553391px) rotate(225deg)}.ant-tooltip-placement-bottom .ant-tooltip-arrow{left:50%;transform:translateY(-100%) translateX(-50%)}.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow{left:13px}.ant-tooltip-placement-bottomRight .ant-tooltip-arrow{right:13px}.ant-tooltip-pink .ant-tooltip-inner{background-color:#eb2f96}.ant-tooltip-pink .ant-tooltip-arrow-content::before{background:#eb2f96}.ant-tooltip-magenta .ant-tooltip-inner{background-color:#eb2f96}.ant-tooltip-magenta .ant-tooltip-arrow-content::before{background:#eb2f96}.ant-tooltip-red .ant-tooltip-inner{background-color:#f5222d}.ant-tooltip-red .ant-tooltip-arrow-content::before{background:#f5222d}.ant-tooltip-volcano .ant-tooltip-inner{background-color:#fa541c}.ant-tooltip-volcano .ant-tooltip-arrow-content::before{background:#fa541c}.ant-tooltip-orange .ant-tooltip-inner{background-color:#fa8c16}.ant-tooltip-orange .ant-tooltip-arrow-content::before{background:#fa8c16}.ant-tooltip-yellow .ant-tooltip-inner{background-color:#fadb14}.ant-tooltip-yellow .ant-tooltip-arrow-content::before{background:#fadb14}.ant-tooltip-gold .ant-tooltip-inner{background-color:#faad14}.ant-tooltip-gold .ant-tooltip-arrow-content::before{background:#faad14}.ant-tooltip-cyan .ant-tooltip-inner{background-color:#13c2c2}.ant-tooltip-cyan .ant-tooltip-arrow-content::before{background:#13c2c2}.ant-tooltip-lime .ant-tooltip-inner{background-color:#a0d911}.ant-tooltip-lime .ant-tooltip-arrow-content::before{background:#a0d911}.ant-tooltip-green .ant-tooltip-inner{background-color:#52c41a}.ant-tooltip-green .ant-tooltip-arrow-content::before{background:#52c41a}.ant-tooltip-blue .ant-tooltip-inner{background-color:#1890ff}.ant-tooltip-blue .ant-tooltip-arrow-content::before{background:#1890ff}.ant-tooltip-geekblue .ant-tooltip-inner{background-color:#2f54eb}.ant-tooltip-geekblue .ant-tooltip-arrow-content::before{background:#2f54eb}.ant-tooltip-purple .ant-tooltip-inner{background-color:#722ed1}.ant-tooltip-purple .ant-tooltip-arrow-content::before{background:#722ed1}.ant-tooltip-rtl{direction:rtl}.ant-tooltip-rtl .ant-tooltip-inner{text-align:right}.ant-carousel{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum'}.ant-carousel .slick-slider{position:relative;display:block;box-sizing:border-box;touch-action:pan-y;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.ant-carousel .slick-list{position:relative;display:block;margin:0;padding:0;overflow:hidden}.ant-carousel .slick-list:focus{outline:0}.ant-carousel .slick-list.dragging{cursor:pointer}.ant-carousel .slick-list .slick-slide{pointer-events:none}.ant-carousel .slick-list .slick-slide input.ant-checkbox-input,.ant-carousel .slick-list .slick-slide input.ant-radio-input{visibility:hidden}.ant-carousel .slick-list .slick-slide.slick-active{pointer-events:auto}.ant-carousel .slick-list .slick-slide.slick-active input.ant-checkbox-input,.ant-carousel .slick-list .slick-slide.slick-active input.ant-radio-input{visibility:visible}.ant-carousel .slick-list .slick-slide>div>div{vertical-align:bottom}.ant-carousel .slick-slider .slick-list,.ant-carousel .slick-slider .slick-track{transform:translate3d(0,0,0);touch-action:pan-y}.ant-carousel .slick-track{position:relative;top:0;left:0;display:block}.ant-carousel .slick-track::after,.ant-carousel .slick-track::before{display:table;content:''}.ant-carousel .slick-track::after{clear:both}.slick-loading .ant-carousel .slick-track{visibility:hidden}.ant-carousel .slick-slide{display:none;float:left;height:100%;min-height:1px}.ant-carousel .slick-slide img{display:block}.ant-carousel .slick-slide.slick-loading img{display:none}.ant-carousel .slick-slide.dragging img{pointer-events:none}.ant-carousel .slick-initialized .slick-slide{display:block}.ant-carousel .slick-loading .slick-slide{visibility:hidden}.ant-carousel .slick-vertical .slick-slide{display:block;height:auto}.ant-carousel .slick-arrow.slick-hidden{display:none}.ant-carousel .slick-next,.ant-carousel .slick-prev{position:absolute;top:50%;display:block;width:20px;height:20px;margin-top:-10px;padding:0;color:transparent;font-size:0;line-height:0;background:0 0;border:0;outline:0;cursor:pointer}.ant-carousel .slick-next:focus,.ant-carousel .slick-next:hover,.ant-carousel .slick-prev:focus,.ant-carousel .slick-prev:hover{color:transparent;background:0 0;outline:0}.ant-carousel .slick-next:focus::before,.ant-carousel .slick-next:hover::before,.ant-carousel .slick-prev:focus::before,.ant-carousel .slick-prev:hover::before{opacity:1}.ant-carousel .slick-next.slick-disabled::before,.ant-carousel .slick-prev.slick-disabled::before{opacity:.25}.ant-carousel .slick-prev{left:-25px}.ant-carousel .slick-prev::before{content:'←'}.ant-carousel .slick-next{right:-25px}.ant-carousel .slick-next::before{content:'→'}.ant-carousel .slick-dots{position:absolute;right:0;bottom:0;left:0;z-index:15;display:flex!important;justify-content:center;margin-right:15%;margin-bottom:0;margin-left:15%;padding-left:0;list-style:none}.ant-carousel .slick-dots-bottom{bottom:12px}.ant-carousel .slick-dots-top{top:12px;bottom:auto}.ant-carousel .slick-dots li{position:relative;display:inline-block;flex:0 1 auto;box-sizing:content-box;width:16px;height:3px;margin:0 4px;padding:0;text-align:center;text-indent:-999px;vertical-align:top;transition:all .5s}.ant-carousel .slick-dots li button{position:relative;display:block;width:100%;height:3px;padding:0;color:transparent;font-size:0;background:#fff;border:0;border-radius:1px;outline:0;cursor:pointer;opacity:.3;transition:all .5s}.ant-carousel .slick-dots li button:focus,.ant-carousel .slick-dots li button:hover{opacity:.75}.ant-carousel .slick-dots li button::after{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;content:''}.ant-carousel .slick-dots li.slick-active{width:24px}.ant-carousel .slick-dots li.slick-active button{background:#fff;opacity:1}.ant-carousel .slick-dots li.slick-active:focus,.ant-carousel .slick-dots li.slick-active:hover{opacity:1}.ant-carousel-vertical .slick-dots{top:50%;bottom:auto;flex-direction:column;width:3px;height:auto;margin:0;transform:translateY(-50%)}.ant-carousel-vertical .slick-dots-left{right:auto;left:12px}.ant-carousel-vertical .slick-dots-right{right:12px;left:auto}.ant-carousel-vertical .slick-dots li{width:3px;height:16px;margin:4px 0;vertical-align:baseline}.ant-carousel-vertical .slick-dots li button{width:3px;height:16px}.ant-carousel-vertical .slick-dots li.slick-active{width:3px;height:24px}.ant-carousel-vertical .slick-dots li.slick-active button{width:3px;height:24px}.ant-carousel-rtl{direction:rtl}.ant-carousel-rtl .ant-carousel .slick-track{right:0;left:auto}.ant-carousel-rtl .ant-carousel .slick-prev{right:-25px;left:auto}.ant-carousel-rtl .ant-carousel .slick-prev::before{content:'→'}.ant-carousel-rtl .ant-carousel .slick-next{right:auto;left:-25px}.ant-carousel-rtl .ant-carousel .slick-next::before{content:'←'}.ant-carousel-rtl.ant-carousel .slick-dots{flex-direction:row-reverse}.ant-carousel-rtl.ant-carousel-vertical .slick-dots{flex-direction:column}.ant-tooltip{transform:none!important;transform-origin:50%!important}.ant-tooltip.ant-tooltip{width:auto}.ant-tooltip.ds-tooltip-type-largeScrollable{max-width:400px}.ant-tooltip.ant-tooltip-placement-left,.ant-tooltip.ant-tooltip-placement-leftBottom,.ant-tooltip.ant-tooltip-placement-leftTop{padding:0 8px 0 0}.ant-tooltip.ant-tooltip-placement-left.ds-tooltip-offset-small,.ant-tooltip.ant-tooltip-placement-leftBottom.ds-tooltip-offset-small,.ant-tooltip.ant-tooltip-placement-leftTop.ds-tooltip-offset-small{padding:0 4px 0 0}.ant-tooltip.ant-tooltip-placement-right,.ant-tooltip.ant-tooltip-placement-rightBottom,.ant-tooltip.ant-tooltip-placement-rightTop{padding:0 0 0 8px}.ant-tooltip.ant-tooltip-placement-right.ds-tooltip-offset-small,.ant-tooltip.ant-tooltip-placement-rightBottom.ds-tooltip-offset-small,.ant-tooltip.ant-tooltip-placement-rightTop.ds-tooltip-offset-small{padding:0 0 0 4px}.ant-tooltip.ant-tooltip-placement-top,.ant-tooltip.ant-tooltip-placement-topLeft,.ant-tooltip.ant-tooltip-placement-topRight{padding:0 0 8px 0}.ant-tooltip.ant-tooltip-placement-top.ds-tooltip-offset-small,.ant-tooltip.ant-tooltip-placement-topLeft.ds-tooltip-offset-small,.ant-tooltip.ant-tooltip-placement-topRight.ds-tooltip-offset-small{padding:0 0 4px 0}.ant-tooltip.ant-tooltip-placement-bottom,.ant-tooltip.ant-tooltip-placement-bottomLeft,.ant-tooltip.ant-tooltip-placement-bottomRight{padding:8px 0 0 0}.ant-tooltip.ant-tooltip-placement-bottom.ds-tooltip-offset-small,.ant-tooltip.ant-tooltip-placement-bottomLeft.ds-tooltip-offset-small,.ant-tooltip.ant-tooltip-placement-bottomRight.ds-tooltip-offset-small{padding:4px 0 0 0}.ant-tooltip-inner{font-size:11px;font-weight:500;box-shadow:0 8px 16px rgba(171,178,183,.32);min-height:24px;text-align:center}.ant-tooltip-arrow{display:none}.ant-tooltip-inner{padding:0;background-color:transparent!important}