import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_popper__ from "@chakra-ui/popper";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_portal__ from "@chakra-ui/portal";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_system__ from "@chakra-ui/system";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_object_utils__ from "@chakra-ui/object-utils";
import * as __WEBPACK_EXTERNAL_MODULE_framer_motion__ from "framer-motion";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
/**
 * @see https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/tooltip/src/tooltip.transition.tsx
 * @description This was ported from Chakra UI because the tooltip arrow couldn't get modified otherwise.
 */ const scale = {
    exit: {
        scale: 0.85,
        opacity: 0,
        transition: {
            opacity: {
                duration: 0.15,
                easings: 'easeInOut'
            },
            scale: {
                duration: 0.2,
                easings: 'easeInOut'
            }
        }
    },
    enter: {
        scale: 1,
        opacity: 1,
        transition: {
            opacity: {
                easings: 'easeOut',
                duration: 0.2
            },
            scale: {
                duration: 0.2,
                ease: [
                    0.175,
                    0.885,
                    0.4,
                    1.1
                ]
            }
        }
    }
};
/**
 * @see https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/tooltip/src/tooltip.tsx
 * @description This was ported from Chakra UI because the tooltip arrow couldn't get modified otherwise.
 */ const MotionDiv = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_system__.chakra)(__WEBPACK_EXTERNAL_MODULE_framer_motion__.motion.div);
/**
 * Tooltips display informative text when users hover, focus on, or tap an element.
 *
 * @see Docs     https://chakra-ui.com/docs/overlay/tooltip
 * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
 */ const ChakraTooltip = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_system__.forwardRef)((props, ref)=>{
    const styles = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_system__.useStyleConfig)('Tooltip', props);
    const ownProps = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_system__.omitThemingProps)(props);
    const theme = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_system__.useTheme)();
    const { children, label, shouldWrapChildren, 'aria-label': ariaLabel, hasArrow, bg, portalProps, background, backgroundColor, bgColor, motionProps, ...rest } = ownProps;
    const userDefinedBg = background ?? backgroundColor ?? bg ?? bgColor;
    if (userDefinedBg) {
        styles.bg = userDefinedBg;
        const bgVar = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_system__.getCSSVar)(theme, 'colors', userDefinedBg);
        styles[__WEBPACK_EXTERNAL_MODULE__chakra_ui_popper__.popperCSSVars.arrowBg["var"]] = bgVar;
    }
    const tooltip = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useTooltip)({
        ...rest,
        direction: theme.direction
    });
    const shouldWrap = 'string' == typeof children || shouldWrapChildren;
    let trigger;
    if (shouldWrap) trigger = /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_system__.chakra.span, {
        display: "inline-block",
        tabIndex: 0,
        ...tooltip.getTriggerProps()
    }, children);
    else {
        /**
     * Ensure tooltip has only one child node
     */ const child = __WEBPACK_EXTERNAL_MODULE_react__.Children.only(children);
        trigger = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.cloneElement)(child, tooltip.getTriggerProps(child.props, child.ref));
    }
    const hasAriaLabel = !!ariaLabel;
    const _tooltipProps = tooltip.getTooltipProps({}, ref);
    const tooltipProps = hasAriaLabel ? (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_object_utils__.omit)(_tooltipProps, [
        'role',
        'id'
    ]) : _tooltipProps;
    const srOnlyProps = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_object_utils__.pick)(_tooltipProps, [
        'role',
        'id'
    ]);
    /**
   * If the `label` is empty, there's no point showing the tooltip.
   * Let's simply return the children
   */ if (!label) return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
    // Cannot override directly in Chakra because it's a 1-part component
    const arrowStyles = {
        mt: 'top' === props.placement ? '2.4px' : void 0,
        borderRight: 'top' === props.placement ? '2px solid' : void 0,
        borderColor: 'top' === props.placement ? 'darkblue.600 !important' : void 0,
        borderBottom: 'top' === props.placement ? '2px solid' : void 0,
        boxShadow: 'top' === props.placement ? '3px 1px 0px 0px var(--chakra-colors-gray-200) !important' : void 0
    };
    return /*#__PURE__*/ React.createElement(React.Fragment, null, trigger, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE_framer_motion__.AnimatePresence, null, tooltip.isOpen && /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_portal__.Portal, portalProps, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_system__.chakra.div, {
        ...tooltip.getTooltipPositionerProps(),
        __css: {
            zIndex: styles.zIndex,
            pointerEvents: 'none'
        }
    }, /*#__PURE__*/ React.createElement(MotionDiv, {
        variants: scale,
        initial: "exit",
        animate: "enter",
        exit: "exit",
        ...motionProps,
        ...tooltipProps,
        __css: styles
    }, label, hasAriaLabel && /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_system__.chakra.span, {
        srOnly: true,
        ...srOnlyProps
    }, ariaLabel), hasArrow && /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_system__.chakra.div, {
        "data-popper-arrow": true,
        className: "chakra-tooltip__arrow-wrapper"
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_system__.chakra.div, {
        "data-popper-arrow-inner": true,
        className: "chakra-tooltip__arrow",
        ...arrowStyles,
        __css: {
            bg: styles.bg
        }
    })))))));
});
ChakraTooltip.displayName = 'Tooltip';
export { ChakraTooltip };
