@telefonica/mistica 12.8.0 → 12.9.0

package/dist-es/tooltip.js

@@ -1,521 +1,293 @@
-function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _defineProperty(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
+import * as i from "react";
+import j from "classnames";
+import { CSSTransition as K } from "react-transition-group";
+import { useScreenSize as H, useAriaId as U } from "./hooks.js";
+import { Portal as q } from "./portal.js";
+import G from "./overlay.js";
+import { Text2 as I } from "./text.js";
+import { TAB as J } from "./utils/key-codes.js";
+import { createUseStyles as A } from "./jss.js";
+import Q from "./stack.js";
+import { jsxs as w, Fragment as Z, jsx as s } from "./_virtual/jsx-runtime.js";
+const _ = "bottom", tt = "top", g = 12, h = 4 + g, b = 16, et = 340, rt = g * 2, ot = g, M = 500, p = 12, k = "cubic-bezier(0.215, 0.61, 0.355, 1)", nt = 500, X = () => {
+}, at = A((t) => {
+  const c = t.isDarkMode ? 1 : 0.2;
+  return {
+    arrow: {
+      position: "absolute",
+      backgroundColor: t.colors.backgroundContainer,
+      width: g,
+      height: g,
+      top: 0,
+      left: "50%",
+      transform: "translate(-50%, -50%) rotate(45deg)",
+      border: `1px solid ${t.colors.border}`,
+      borderRadius: 2
+    },
+    arrowTop: {
+      top: "100%",
+      left: "50%",
+      transform: "translateX(-50%)",
+      "& > div": {
+        boxShadow: `0 2px 4px 0 rgba(0, 0, 0, ${c})`
+      }
+    },
+    arrowRight: {
+      right: "100%",
+      top: "50%",
+      transform: "translateY(-100%) rotate(90deg)",
+      transformOrigin: "bottom",
+      "& > div": {
+        boxShadow: `0 0 4px 0 rgba(0, 0, 0, ${c})`
+      }
+    },
+    arrowBottom: {
+      bottom: "100%",
+      left: "50%",
+      transform: "translateX(-50%) rotate(180deg)"
+    },
+    arrowLeft: {
+      left: "100%",
+      top: "50%",
+      transform: "translateY(-100%) rotate(-90deg)",
+      transformOrigin: "bottom",
+      "& > div": {
+        boxShadow: `0 0 4px 0 rgba(0, 0, 0, ${c})`
+      }
+    },
+    arrowWrapper: {
+      position: "absolute",
+      color: t.colors.backgroundContainer,
+      width: rt,
+      height: ot,
+      overflow: "hidden"
+    },
+    wrapper: {
+      display: "inline-block"
+    },
+    container: {
+      position: "absolute",
+      left: 16,
+      width: "auto",
+      boxShadow: `0 2px 4px 0 rgba(0, 0, 0, ${c})`,
+      padding: 8,
+      backgroundColor: t.colors.backgroundContainer,
+      zIndex: 50,
+      border: `1px solid ${t.colors.border}`,
+      borderRadius: 8
     }
-    return obj;
-}
-function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
+  };
+}), it = A(() => ({
+  enter: {
+    transform: ({
+      position: t
+    }) => t === "bottom" ? `translateY(${p}px)` : t === "top" ? `translateY(calc(-100% - ${p}px))` : t === "right" ? `translateX(${p}px) translateY(-50%)` : t === "left" ? `translateX(-${p}px) translateY(-50%)` : `translateY(-${p}px)`
+  },
+  enterActive: {
+    animationName: ({
+      position: t
+    }) => t === "top" ? "$fadeInTop" : t === "bottom" ? "$fadeInBottom" : "$fadeInX",
+    animationFillMode: "both",
+    animationDuration: `${M}ms`,
+    animationTimingFunction: k
+  },
+  enterDone: {
+    transform: ({
+      position: t
+    }) => t === "top" ? "translateY(-100%)" : t === "bottom" ? "translateY(0)" : "translateY(-50%)"
+  },
+  exit: {
+    transform: ({
+      position: t
+    }) => t === "bottom" ? "translateY(0)" : t === "top" ? "translateY(-100%)" : t === "right" || t === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)",
+    opacity: 1,
+    transition: `opacity 0.3s ${k}`
+  },
+  exitActive: {
+    animation: `$fadeOut 0.3s ${k} both`
+  },
+  "@keyframes fadeInBottom": {
+    from: {
+      opacity: 0
+    },
+    "40%": {
+      opacity: 1
+    },
+    to: {
+      opacity: 1,
+      transform: "translateY(0)"
     }
-    return _arr;
-}
-function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _objectSpread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _defineProperty(target, key, source[key]);
-        });
+  },
+  "@keyframes fadeInTop": {
+    from: {
+      opacity: 0
+    },
+    "40%": {
+      opacity: 1
+    },
+    to: {
+      opacity: 1,
+      transform: "translateY(-100%)"
     }
-    return target;
-}
-function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
+  },
+  "@keyframes fadeInX": {
+    from: {
+      opacity: 0
+    },
+    "40%": {
+      opacity: 1
+    },
+    to: {
+      opacity: 1,
+      transform: "translateX(0) translateY(-50%)"
     }
-    return target;
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
+  },
+  "@keyframes fadeOut": {
+    from: {
+      opacity: 1
+    },
+    to: {
+      opacity: 0
     }
-    return target;
-}
-function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import classnames from "classnames";
-import { CSSTransition } from "react-transition-group";
-import { useAriaId, useScreenSize } from "./hooks";
-import { Portal } from "./portal";
-import Overlay from "./overlay";
-import { Text2 } from "./text";
-import * as key from "./utils/key-codes";
-import { createUseStyles } from "./jss";
-import Stack from "./stack";
-var defaultPositionDesktop = "bottom";
-var defaultPositionMobile = "top";
-var arrowSize = 12;
-var distanceToTarget = 4 + arrowSize;
-var marginLeftRightMobile = 16;
-var defaultWidthDesktop = 340;
-var arrowWrapperWidth = arrowSize * 2;
-var arrowWrapperHeight = arrowSize;
-var transitionDurationMs = 500;
-var animationMovement = 12;
-var animationTiming = "cubic-bezier(0.215, 0.61, 0.355, 1)";
-var defaultShowTooltipDelayMs = 500;
-var noOp = function() {};
-var useStyles = createUseStyles(function(theme) {
-    var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
-    return {
-        arrow: {
-            position: "absolute",
-            backgroundColor: theme.colors.backgroundContainer,
-            width: arrowSize,
-            height: arrowSize,
-            top: 0,
-            left: "50%",
-            transform: "translate(-50%, -50%) rotate(45deg)",
-            border: "1px solid ".concat(theme.colors.border),
-            borderRadius: 2
-        },
-        arrowTop: {
-            top: "100%",
-            left: "50%",
-            transform: "translateX(-50%)",
-            "& > div": {
-                boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")")
-            }
-        },
-        arrowRight: {
-            right: "100%",
-            top: "50%",
-            transform: "translateY(-100%) rotate(90deg)",
-            transformOrigin: "bottom",
-            "& > div": {
-                boxShadow: "0 0 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")")
-            }
-        },
-        arrowBottom: {
-            bottom: "100%",
-            left: "50%",
-            transform: "translateX(-50%) rotate(180deg)"
-        },
-        arrowLeft: {
-            left: "100%",
-            top: "50%",
-            transform: "translateY(-100%) rotate(-90deg)",
-            transformOrigin: "bottom",
-            "& > div": {
-                boxShadow: "0 0 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")")
-            }
-        },
-        arrowWrapper: {
-            position: "absolute",
-            color: theme.colors.backgroundContainer,
-            width: arrowWrapperWidth,
-            height: arrowWrapperHeight,
-            overflow: "hidden"
-        },
-        wrapper: {
-            display: "inline-block"
-        },
-        container: {
-            position: "absolute",
-            left: 16,
-            width: "auto",
-            boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
-            padding: 8,
-            backgroundColor: theme.colors.backgroundContainer,
-            zIndex: 50,
-            border: "1px solid ".concat(theme.colors.border),
-            borderRadius: 8
+  }
+})), st = (t) => t || et, Tt = ({
+  children: t,
+  extra: c,
+  description: x,
+  target: W,
+  title: y,
+  targetLabel: B,
+  delay: L = !0,
+  ...S
+}) => {
+  const [l, T] = i.useState(!1), {
+    isTabletOrSmaller: u
+  } = H(), P = U(), n = i.useRef(!1), r = i.useRef(null), f = i.useRef(null), v = i.useRef(null), e = i.useRef({
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    width: 0,
+    height: 0
+  }), Y = ((a = _) => u && (a === "left" || a === "right") ? tt : a)(S.position), o = at(), d = it({
+    position: Y
+  }), O = typeof window < "u" ? window.matchMedia("(pointer: coarse)").matches : !1, R = () => {
+    l && T(!1);
+  };
+  i.useEffect(() => (window.addEventListener("resize", R), () => {
+    window.removeEventListener("resize", R);
+  }));
+  const C = () => {
+    T(!1);
+  }, m = () => {
+    !v.current || (e.current = v.current.getBoundingClientRect(), T(!l));
+  }, N = () => {
+    l || m();
+  }, z = (a) => {
+    a.keyCode === J && C();
+  }, F = (a, $) => typeof window > "u" ? {} : {
+    right: {
+      left: e.current.right + h,
+      top: window.pageYOffset + e.current.top + e.current.height / 2
+    },
+    left: {
+      left: e.current.left - $ - h,
+      top: window.pageYOffset + e.current.top + e.current.height / 2
+    },
+    top: {
+      top: window.pageYOffset + e.current.top - h,
+      left: u ? b : window.pageXOffset + e.current.left + e.current.width / 2 - $ / 2
+    },
+    bottom: {
+      top: window.pageYOffset + e.current.bottom + h,
+      left: u ? b : window.pageXOffset + e.current.left + e.current.width / 2 - $ / 2
+    }
+  }[a], E = () => u ? {
+    left: e.current.left + e.current.width / 2 - b
+  } : {}, D = (() => u ? window.innerWidth - b * 2 : st(S.width))(), V = {
+    top: o.arrowTop,
+    bottom: o.arrowBottom,
+    left: o.arrowLeft,
+    right: o.arrowRight
+  };
+  return /* @__PURE__ */ w(Z, {
+    children: [/* @__PURE__ */ s("div", {
+      ref: v,
+      className: o.wrapper,
+      onPointerOver: () => {
+        r.current && (clearTimeout(r.current), r.current = null), !n.current && (n.current = !0, L ? f.current = setTimeout(() => {
+          f.current = null, m();
+        }, nt) : m());
+      },
+      onPointerLeave: O ? X : () => {
+        if (f.current) {
+          clearTimeout(f.current), f.current = null, n.current = !1;
+          return;
         }
-    };
-});
-var useAnimationStyles = createUseStyles(function() {
-    return {
-        enter: {
-            transform: function(param) {
-                var position = param.position;
-                if (position === "bottom") {
-                    return "translateY(".concat(animationMovement, "px)");
-                }
-                if (position === "top") {
-                    return "translateY(calc(-100% - ".concat(animationMovement, "px))");
-                }
-                if (position === "right") {
-                    return "translateX(".concat(animationMovement, "px) translateY(-50%)");
-                }
-                if (position === "left") {
-                    return "translateX(-".concat(animationMovement, "px) translateY(-50%)");
-                }
-                return "translateY(-".concat(animationMovement, "px)");
-            }
-        },
-        enterActive: {
-            animationName: function(param) {
-                var position = param.position;
-                if (position === "top") return "$fadeInTop";
-                if (position === "bottom") return "$fadeInBottom";
-                return "$fadeInX";
-            },
-            animationFillMode: "both",
-            animationDuration: "".concat(transitionDurationMs, "ms"),
-            animationTimingFunction: animationTiming
+        r.current = setTimeout(() => {
+          !n.current || (r.current = null, n.current = !1, m());
+        }, 100);
+      },
+      onFocus: N,
+      onKeyDown: z,
+      "touch-action": "auto",
+      role: "button",
+      tabIndex: 0,
+      "aria-describedby": P,
+      "aria-expanded": l,
+      "aria-label": B,
+      children: W
+    }), /* @__PURE__ */ w(q, {
+      children: [l && O && /* @__PURE__ */ s(G, {
+        onPress: C
+      }), /* @__PURE__ */ s(K, {
+        in: l,
+        timeout: M,
+        classNames: {
+          enter: d.enter,
+          enterActive: d.enterActive,
+          enterDone: d.enterDone,
+          exit: d.exit,
+          exitActive: d.exitActive
         },
-        enterDone: {
-            transform: function(param) {
-                var position = param.position;
-                if (position === "top") return "translateY(-100%)";
-                if (position === "bottom") return "translateY(0)";
-                return "translateY(-50%)";
-            }
-        },
-        exit: {
-            transform: function(param) {
-                var position = param.position;
-                if (position === "bottom") {
-                    return "translateY(0)";
-                }
-                if (position === "top") {
-                    return "translateY(-100%)";
-                }
-                if (position === "right") {
-                    return "translateX(0px) translateY(-50%)";
-                }
-                if (position === "left") {
-                    return "translateX(0px) translateY(-50%)";
-                }
-                return "translateY(0px)";
-            },
-            opacity: 1,
-            transition: "opacity 0.3s ".concat(animationTiming)
-        },
-        exitActive: {
-            animation: "$fadeOut 0.3s ".concat(animationTiming, " both")
-        },
-        "@keyframes fadeInBottom": {
-            from: {
-                opacity: 0
-            },
-            "40%": {
-                opacity: 1
-            },
-            to: {
-                opacity: 1,
-                transform: "translateY(0)"
-            }
-        },
-        "@keyframes fadeInTop": {
-            from: {
-                opacity: 0
-            },
-            "40%": {
-                opacity: 1
-            },
-            to: {
-                opacity: 1,
-                transform: "translateY(-100%)"
-            }
-        },
-        "@keyframes fadeInX": {
-            from: {
-                opacity: 0
-            },
-            "40%": {
-                opacity: 1
-            },
-            to: {
-                opacity: 1,
-                transform: "translateX(0) translateY(-50%)"
-            }
-        },
-        "@keyframes fadeOut": {
-            from: {
-                opacity: 1
-            },
-            to: {
-                opacity: 0
-            }
-        }
-    };
-});
-var getWidthDesktop = function(customWidth) {
-    return customWidth ? customWidth : defaultWidthDesktop;
-};
-var Tooltip = function(_param) {
-    var children = _param.children, extra = _param.extra, description = _param.description, target = _param.target, title = _param.title, targetLabel = _param.targetLabel, _delay = _param.delay, delay = _delay === void 0 ? true : _delay, rest = _objectWithoutProperties(_param, [
-        "children",
-        "extra",
-        "description",
-        "target",
-        "title",
-        "targetLabel",
-        "delay"
-    ]);
-    var ref = _slicedToArray(React.useState(false), 2), isVisible = ref[0], setIsVisible = ref[1];
-    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
-    var ariaId = useAriaId();
-    var isPointerOver = React.useRef(false);
-    var closeTooltipTimeoutId = React.useRef(null);
-    var showTooltipTimeoutId = React.useRef(null);
-    var targetRef = React.useRef(null);
-    var targetBoundingClientRect = React.useRef({
-        top: 0,
-        right: 0,
-        left: 0,
-        bottom: 0,
-        width: 0,
-        height: 0
-    });
-    var getPosition = function() {
-        var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop;
-        return isTabletOrSmaller && (position === "left" || position === "right") ? defaultPositionMobile : position;
-    };
-    var position1 = getPosition(rest.position);
-    var classes = useStyles();
-    var animationClasses = useAnimationStyles({
-        position: position1
-    });
-    var isTouchableDevice = typeof window !== "undefined" ? window.matchMedia("(pointer: coarse)").matches : false;
-    var closeTooltip = function() {
-        if (isVisible) {
-            setIsVisible(false);
-        }
-    };
-    React.useEffect(function() {
-        window.addEventListener("resize", closeTooltip);
-        return function() {
-            window.removeEventListener("resize", closeTooltip);
-        };
-    });
-    var handleClickOutside = function() {
-        setIsVisible(false);
-    };
-    var toggleVisibility = function() {
-        if (!targetRef.current) return;
-        targetBoundingClientRect.current = targetRef.current.getBoundingClientRect();
-        setIsVisible(!isVisible);
-    };
-    var handleFocus = function() {
-        if (!isVisible) {
-            toggleVisibility();
-        }
-    };
-    var handleKeyDown = function(event) {
-        if (event.keyCode === key.TAB) {
-            handleClickOutside();
-        }
-    };
-    var getContainerPosition = function(position, width) {
-        if (typeof window === "undefined") {
-            return {};
-        }
-        var containerPos = {
-            right: {
-                left: targetBoundingClientRect.current.right + distanceToTarget,
-                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2
-            },
-            left: {
-                left: targetBoundingClientRect.current.left - width - distanceToTarget,
-                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2
-            },
-            top: {
-                top: window.pageYOffset + targetBoundingClientRect.current.top - distanceToTarget,
-                left: isTabletOrSmaller ? marginLeftRightMobile : window.pageXOffset + targetBoundingClientRect.current.left + targetBoundingClientRect.current.width / 2 - width / 2
-            },
-            bottom: {
-                top: window.pageYOffset + targetBoundingClientRect.current.bottom + distanceToTarget,
-                left: isTabletOrSmaller ? marginLeftRightMobile : window.pageXOffset + targetBoundingClientRect.current.left + targetBoundingClientRect.current.width / 2 - width / 2
-            }
-        };
-        return containerPos[position];
-    };
-    var getCustomStylesForMobile = function() {
-        return isTabletOrSmaller ? {
-            left: targetBoundingClientRect.current.left + targetBoundingClientRect.current.width / 2 - marginLeftRightMobile
-        } : {};
-    };
-    var getWidth = function() {
-        return isTabletOrSmaller ? window.innerWidth - marginLeftRightMobile * 2 : getWidthDesktop(rest.width);
-    };
-    var width1 = getWidth();
-    var classNameByPosition = {
-        top: classes.arrowTop,
-        bottom: classes.arrowBottom,
-        left: classes.arrowLeft,
-        right: classes.arrowRight
-    };
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                ref: targetRef,
-                className: classes.wrapper,
-                onPointerOver: function() {
-                    if (closeTooltipTimeoutId.current) {
-                        clearTimeout(closeTooltipTimeoutId.current);
-                        closeTooltipTimeoutId.current = null;
-                    }
-                    if (isPointerOver.current) return;
-                    isPointerOver.current = true;
-                    if (delay) {
-                        showTooltipTimeoutId.current = setTimeout(function() {
-                            showTooltipTimeoutId.current = null;
-                            toggleVisibility();
-                        }, defaultShowTooltipDelayMs);
-                    } else {
-                        toggleVisibility();
-                    }
-                },
-                onPointerLeave: isTouchableDevice ? noOp : function() {
-                    if (showTooltipTimeoutId.current) {
-                        clearTimeout(showTooltipTimeoutId.current);
-                        showTooltipTimeoutId.current = null;
-                        isPointerOver.current = false;
-                        return;
-                    }
-                    closeTooltipTimeoutId.current = setTimeout(function() {
-                        if (!isPointerOver.current) return;
-                        closeTooltipTimeoutId.current = null;
-                        isPointerOver.current = false;
-                        toggleVisibility();
-                    }, 100);
-                },
-                onFocus: handleFocus,
-                onKeyDown: handleKeyDown,
-                "touch-action": "auto" // Prop needed for Pointer Events Polyfill to work properly
-                ,
-                role: "button",
-                tabIndex: 0,
-                "aria-describedby": ariaId,
-                "aria-expanded": isVisible,
-                "aria-label": targetLabel,
-                children: target
-            }),
-            /*#__PURE__*/ _jsxs(Portal, {
-                children: [
-                    isVisible && isTouchableDevice && /*#__PURE__*/ _jsx(Overlay, {
-                        onPress: handleClickOutside
-                    }),
-                    /*#__PURE__*/ _jsx(CSSTransition, {
-                        in: isVisible,
-                        timeout: transitionDurationMs,
-                        classNames: {
-                            enter: animationClasses.enter,
-                            enterActive: animationClasses.enterActive,
-                            enterDone: animationClasses.enterDone,
-                            exit: animationClasses.exit,
-                            exitActive: animationClasses.exitActive
-                        },
-                        unmountOnExit: true,
-                        children: /*#__PURE__*/ _jsxs("div", {
-                            role: "tooltip",
-                            id: ariaId,
-                            className: classes.container,
-                            style: _objectSpread({
-                                width: width1
-                            }, getContainerPosition(position1, width1)),
-                            onPointerOver: function() {
-                                if (closeTooltipTimeoutId.current) {
-                                    clearTimeout(closeTooltipTimeoutId.current);
-                                    closeTooltipTimeoutId.current = null;
-                                }
-                            },
-                            onPointerLeave: isTouchableDevice ? noOp : function() {
-                                closeTooltipTimeoutId.current = setTimeout(function() {
-                                    if (!isPointerOver.current) return;
-                                    closeTooltipTimeoutId.current = null;
-                                    isPointerOver.current = false;
-                                    toggleVisibility();
-                                }, 100);
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx("div", {
-                                    className: classnames(classes.arrowWrapper, classNameByPosition[position1]),
-                                    style: getCustomStylesForMobile(),
-                                    children: /*#__PURE__*/ _jsx("div", {
-                                        className: classes.arrow
-                                    })
-                                }),
-                                (title || description) && /*#__PURE__*/ _jsxs(Stack, {
-                                    space: 4,
-                                    children: [
-                                        title && /*#__PURE__*/ _jsx(Text2, {
-                                            medium: true,
-                                            children: title
-                                        }),
-                                        description && /*#__PURE__*/ _jsx(Text2, {
-                                            regular: true,
-                                            children: description
-                                        })
-                                    ]
-                                }),
-                                extra || children
-                            ]
-                        })
-                    })
-                ]
+        unmountOnExit: !0,
+        children: /* @__PURE__ */ w("div", {
+          role: "tooltip",
+          id: P,
+          className: o.container,
+          style: {
+            width: D,
+            ...F(Y, D)
+          },
+          onPointerOver: () => {
+            r.current && (clearTimeout(r.current), r.current = null);
+          },
+          onPointerLeave: O ? X : () => {
+            r.current = setTimeout(() => {
+              !n.current || (r.current = null, n.current = !1, m());
+            }, 100);
+          },
+          children: [/* @__PURE__ */ s("div", {
+            className: j(o.arrowWrapper, V[Y]),
+            style: E(),
+            children: /* @__PURE__ */ s("div", {
+              className: o.arrow
             })
-        ]
-    });
+          }), (y || x) && /* @__PURE__ */ w(Q, {
+            space: 4,
+            children: [y && /* @__PURE__ */ s(I, {
+              medium: !0,
+              children: y
+            }), x && /* @__PURE__ */ s(I, {
+              regular: !0,
+              children: x
+            })]
+          }), c || t]
+        })
+      })]
+    })]
+  });
+};
+export {
+  Tt as default
 };
-export default Tooltip;