import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import Tippy from '@tippyjs/react';
import Box from '../box';
import { useUp, v } from '../core';
import { Link } from '../link';
import { bg, pointerPlacement, pointerSize } from './consts';
import { TooltipContent } from './tooltipContent';
/**
 * A simple text popup hint.
 *
 * Displayed on mouse enter, and is hidden on mouse leave.
 *
 * */
export const Tooltip = (props) => {
    const { children, fontSize = '16px', linkText, linkProps, maxWidth = '400px', text = 'Tooltip', placement = 'top', disabled = false, visible = false, } = props;
    const isDesktop = useUp('md');
    return (_jsx(Tippy, { content: !!text && (_jsxs(TooltipContent, { disabled: disabled, fontSize: fontSize, maxWidth: maxWidth, children: [isDesktop && (_jsx(Box, { bg: disabled ? bg.disabled : bg.regular, bottom: pointerPlacement[placement].bottom, h: `${pointerSize}px`, left: pointerPlacement[placement].left, position: "absolute", right: pointerPlacement[placement].right, top: pointerPlacement[placement].top, transform: `translate(${pointerPlacement[placement].translate}) rotate(45deg)`, w: `${pointerSize}px` })), _jsxs(v.div, { children: [text, !!linkText && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Link, { variant: "white", ...linkProps, children: linkText })] }))] })] })), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
            modifiers: [
                {
                    name: 'flip',
                    enabled: false,
                },
            ],
        }, visible: visible || undefined, children: children }));
};
Tooltip.displayName = 'Tooltip';
export default Tooltip;
//# sourceMappingURL=tooltip.js.map