import { jsxs, jsx } from "react/jsx-runtime";
import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, c as $2a41e45df1593e64$export$d39e1813b3bdd0e1, b as $d3f049242431219c$export$6d3443f2c48bfc20, d as $44f671af83e7d9e0$export$2de4954e8ae13b9f, e as $44f671af83e7d9e0$export$746d02f47f4d381 } from "../../OverlayArrow-DivvkAVb.js";
import { n as $b5e257d569688ac6$export$535bd6ca7f90a273, b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, i as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-cvK1vxO7.js";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import { w as $6179b936705e76d3$export$ae780daf29e6d456, $ as $f645667febf57a63$export$4c014de7c8940b4c, u as $507fabe10e71c6fb$export$630ff653c5ada6a9, l as $507fabe10e71c6fb$export$b9b3dfddab17db27, y as $f645667febf57a63$export$13f3202a3e5ddd5 } from "../../useHover-LmGemtHE.js";
import React__default, { useContext, useState, useMemo, useRef, useEffect, forwardRef, createContext } from "react";
import { a as $96b38030c423d352$export$9fc1347d4195ccb3 } from "../../PortalProvider---wyKpMr.js";
import { $ as $dbSRa$reactdom } from "../../index-D8-Zjpbd.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
const $f57aed4a881a3485$var$Context = /* @__PURE__ */ React__default.createContext(null);
function $f57aed4a881a3485$export$178405afcd8c5eb(props) {
  let { children } = props;
  let parent = useContext($f57aed4a881a3485$var$Context);
  let [modalCount, setModalCount] = useState(0);
  let context = useMemo(() => ({
    parent,
    modalCount,
    addModal() {
      setModalCount((count) => count + 1);
      if (parent) parent.addModal();
    },
    removeModal() {
      setModalCount((count) => count - 1);
      if (parent) parent.removeModal();
    }
  }), [
    parent,
    modalCount
  ]);
  return /* @__PURE__ */ React__default.createElement($f57aed4a881a3485$var$Context.Provider, {
    value: context
  }, children);
}
function $f57aed4a881a3485$export$d9aaed4c3ece1bc0() {
  let context = useContext($f57aed4a881a3485$var$Context);
  return {
    modalProviderProps: {
      "aria-hidden": context && context.modalCount > 0 ? true : void 0
    }
  };
}
function $f57aed4a881a3485$var$OverlayContainerDOM(props) {
  let { modalProviderProps } = $f57aed4a881a3485$export$d9aaed4c3ece1bc0();
  return /* @__PURE__ */ React__default.createElement("div", {
    "data-overlay-container": true,
    ...props,
    ...modalProviderProps
  });
}
function $f57aed4a881a3485$export$bf688221f59024e5(props) {
  return /* @__PURE__ */ React__default.createElement($f57aed4a881a3485$export$178405afcd8c5eb, null, /* @__PURE__ */ React__default.createElement($f57aed4a881a3485$var$OverlayContainerDOM, props));
}
function $f57aed4a881a3485$export$b47c3594eab58386(props) {
  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
  let { portalContainer = isSSR ? null : document.body, ...rest } = props;
  let { getContainer } = $96b38030c423d352$export$9fc1347d4195ccb3();
  if (!props.portalContainer && getContainer) portalContainer = getContainer();
  React__default.useEffect(() => {
    if (portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.closest("[data-overlay-container]")) throw new Error("An OverlayContainer must not be inside another container. Please change the portalContainer prop.");
  }, [
    portalContainer
  ]);
  if (!portalContainer) return null;
  let contents = /* @__PURE__ */ React__default.createElement($f57aed4a881a3485$export$bf688221f59024e5, rest);
  return /* @__PURE__ */ $dbSRa$reactdom.createPortal(contents, portalContainer);
}
function $326e436e94273fe1$export$1c4b08e0eca38426(props, state) {
  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    labelable: true
  });
  let { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
    onHoverStart: () => state === null || state === void 0 ? void 0 : state.open(true),
    onHoverEnd: () => state === null || state === void 0 ? void 0 : state.close()
  });
  return {
    tooltipProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, hoverProps, {
      role: "tooltip"
    })
  };
}
function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
  let { isDisabled, trigger } = props;
  let tooltipId = $bdb11010cef70236$export$f680877a34711e37();
  let isHovered = useRef(false);
  let isFocused = useRef(false);
  let handleShow = () => {
    if (isHovered.current || isFocused.current) state.open(isFocused.current);
  };
  let handleHide = (immediate) => {
    if (!isHovered.current && !isFocused.current) state.close(immediate);
  };
  useEffect(() => {
    let onKeyDown = (e) => {
      if (ref && ref.current) {
        if (e.key === "Escape") {
          e.stopPropagation();
          state.close(true);
        }
      }
    };
    if (state.isOpen) {
      document.addEventListener("keydown", onKeyDown, true);
      return () => {
        document.removeEventListener("keydown", onKeyDown, true);
      };
    }
  }, [
    ref,
    state
  ]);
  let onHoverStart = () => {
    if (trigger === "focus") return;
    if ($507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer") isHovered.current = true;
    else isHovered.current = false;
    handleShow();
  };
  let onHoverEnd = () => {
    if (trigger === "focus") return;
    isFocused.current = false;
    isHovered.current = false;
    handleHide();
  };
  let onPressStart = () => {
    isFocused.current = false;
    isHovered.current = false;
    handleHide(true);
  };
  let onFocus = () => {
    let isVisible = $507fabe10e71c6fb$export$b9b3dfddab17db27();
    if (isVisible) {
      isFocused.current = true;
      handleShow();
    }
  };
  let onBlur = () => {
    isFocused.current = false;
    isHovered.current = false;
    handleHide(true);
  };
  let { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
    isDisabled,
    onHoverStart,
    onHoverEnd
  });
  let { focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c({
    isDisabled,
    onFocus,
    onBlur
  }, ref);
  return {
    triggerProps: {
      "aria-describedby": state.isOpen ? tooltipId : void 0,
      ...$3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, hoverProps, {
        onPointerDown: onPressStart,
        onKeyDown: onPressStart
      }),
      tabIndex: void 0
    },
    tooltipProps: {
      id: tooltipId
    }
  };
}
const $8796f90736e175cb$var$TOOLTIP_DELAY = 1500;
const $8796f90736e175cb$var$TOOLTIP_COOLDOWN = 500;
let $8796f90736e175cb$var$tooltips = {};
let $8796f90736e175cb$var$tooltipId = 0;
let $8796f90736e175cb$var$globalWarmedUp = false;
let $8796f90736e175cb$var$globalWarmUpTimeout = null;
let $8796f90736e175cb$var$globalCooldownTimeout = null;
function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
  let { delay = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props;
  let { isOpen, open, close } = $fc909762b330b746$export$61c6a8c84e605fb6(props);
  let id = useMemo(() => `${++$8796f90736e175cb$var$tooltipId}`, []);
  let closeTimeout = useRef(null);
  let closeCallback = useRef(close);
  let ensureTooltipEntry = () => {
    $8796f90736e175cb$var$tooltips[id] = hideTooltip;
  };
  let closeOpenTooltips = () => {
    for (let hideTooltipId in $8796f90736e175cb$var$tooltips) if (hideTooltipId !== id) {
      $8796f90736e175cb$var$tooltips[hideTooltipId](true);
      delete $8796f90736e175cb$var$tooltips[hideTooltipId];
    }
  };
  let showTooltip = () => {
    if (closeTimeout.current) clearTimeout(closeTimeout.current);
    closeTimeout.current = null;
    closeOpenTooltips();
    ensureTooltipEntry();
    $8796f90736e175cb$var$globalWarmedUp = true;
    open();
    if ($8796f90736e175cb$var$globalWarmUpTimeout) {
      clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
      $8796f90736e175cb$var$globalWarmUpTimeout = null;
    }
    if ($8796f90736e175cb$var$globalCooldownTimeout) {
      clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
      $8796f90736e175cb$var$globalCooldownTimeout = null;
    }
  };
  let hideTooltip = (immediate) => {
    if (immediate || closeDelay <= 0) {
      if (closeTimeout.current) clearTimeout(closeTimeout.current);
      closeTimeout.current = null;
      closeCallback.current();
    } else if (!closeTimeout.current) closeTimeout.current = setTimeout(() => {
      closeTimeout.current = null;
      closeCallback.current();
    }, closeDelay);
    if ($8796f90736e175cb$var$globalWarmUpTimeout) {
      clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
      $8796f90736e175cb$var$globalWarmUpTimeout = null;
    }
    if ($8796f90736e175cb$var$globalWarmedUp) {
      if ($8796f90736e175cb$var$globalCooldownTimeout) clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
      $8796f90736e175cb$var$globalCooldownTimeout = setTimeout(() => {
        delete $8796f90736e175cb$var$tooltips[id];
        $8796f90736e175cb$var$globalCooldownTimeout = null;
        $8796f90736e175cb$var$globalWarmedUp = false;
      }, Math.max($8796f90736e175cb$var$TOOLTIP_COOLDOWN, closeDelay));
    }
  };
  let warmupTooltip = () => {
    closeOpenTooltips();
    ensureTooltipEntry();
    if (!isOpen && !$8796f90736e175cb$var$globalWarmUpTimeout && !$8796f90736e175cb$var$globalWarmedUp) $8796f90736e175cb$var$globalWarmUpTimeout = setTimeout(() => {
      $8796f90736e175cb$var$globalWarmUpTimeout = null;
      $8796f90736e175cb$var$globalWarmedUp = true;
      showTooltip();
    }, delay);
    else if (!isOpen) showTooltip();
  };
  useEffect(() => {
    closeCallback.current = close;
  }, [
    close
  ]);
  useEffect(() => {
    return () => {
      if (closeTimeout.current) clearTimeout(closeTimeout.current);
      let tooltip = $8796f90736e175cb$var$tooltips[id];
      if (tooltip) delete $8796f90736e175cb$var$tooltips[id];
    };
  }, [
    id
  ]);
  return {
    isOpen,
    open: (immediate) => {
      if (!immediate && delay > 0 && !closeTimeout.current) warmupTooltip();
      else showTooltip();
    },
    close: hideTooltip
  };
}
const $4e3b923658d69c60$export$7a7623236eec67fa = /* @__PURE__ */ createContext(null);
const $4e3b923658d69c60$export$39ae08fa83328b12 = /* @__PURE__ */ createContext(null);
function $4e3b923658d69c60$export$8c610744efcf8a1d(props) {
  let state = $8796f90736e175cb$export$4d40659c25ecb50b(props);
  let ref = useRef(null);
  let { triggerProps, tooltipProps } = $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref);
  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
    values: [
      [
        $4e3b923658d69c60$export$7a7623236eec67fa,
        state
      ],
      [
        $4e3b923658d69c60$export$39ae08fa83328b12,
        {
          ...tooltipProps,
          triggerRef: ref
        }
      ]
    ]
  }, /* @__PURE__ */ React__default.createElement($f645667febf57a63$export$13f3202a3e5ddd5, {
    ...triggerProps,
    ref
  }, props.children));
}
const $4e3b923658d69c60$export$28c660c63b792dea = /* @__PURE__ */ forwardRef(function Tooltip({ UNSTABLE_portalContainer, ...props }, ref) {
  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e3b923658d69c60$export$39ae08fa83328b12);
  let contextState = useContext($4e3b923658d69c60$export$7a7623236eec67fa);
  let localState = $8796f90736e175cb$export$4d40659c25ecb50b(props);
  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
  let isExiting = $d3f049242431219c$export$45fda7c47f93fd48(ref, state.isOpen) || props.isExiting || false;
  if (!state.isOpen && !isExiting) return null;
  return /* @__PURE__ */ React__default.createElement($f57aed4a881a3485$export$b47c3594eab58386, {
    portalContainer: UNSTABLE_portalContainer
  }, /* @__PURE__ */ React__default.createElement($4e3b923658d69c60$var$TooltipInner, {
    ...props,
    tooltipRef: ref,
    isExiting
  }));
});
function $4e3b923658d69c60$var$TooltipInner(props) {
  let state = useContext($4e3b923658d69c60$export$7a7623236eec67fa);
  let arrowRef = useRef(null);
  let { overlayProps, arrowProps, placement, triggerAnchorPoint } = $2a41e45df1593e64$export$d39e1813b3bdd0e1({
    placement: props.placement || "top",
    targetRef: props.triggerRef,
    overlayRef: props.tooltipRef,
    arrowRef,
    offset: props.offset,
    crossOffset: props.crossOffset,
    isOpen: state.isOpen,
    arrowBoundaryOffset: props.arrowBoundaryOffset,
    shouldFlip: props.shouldFlip,
    containerPadding: props.containerPadding,
    onClose: () => state.close(true)
  });
  let isEntering = $d3f049242431219c$export$6d3443f2c48bfc20(props.tooltipRef, !!placement) || props.isEntering || false;
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    defaultClassName: "react-aria-Tooltip",
    values: {
      placement,
      isEntering,
      isExiting: props.isExiting,
      state
    }
  });
  props = $3ef42575df84b30b$export$9d1611c77c2fe928(props, overlayProps);
  let { tooltipProps } = $326e436e94273fe1$export$1c4b08e0eca38426(props, state);
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    global: true
  });
  return /* @__PURE__ */ React__default.createElement("div", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, tooltipProps),
    ref: props.tooltipRef,
    style: {
      ...overlayProps.style,
      "--trigger-anchor-point": triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : void 0,
      ...renderProps.style
    },
    "data-placement": placement !== null && placement !== void 0 ? placement : void 0,
    "data-entering": isEntering || void 0,
    "data-exiting": props.isExiting || void 0
  }, /* @__PURE__ */ React__default.createElement($44f671af83e7d9e0$export$2de4954e8ae13b9f.Provider, {
    value: {
      ...arrowProps,
      placement,
      ref: arrowRef
    }
  }, renderProps.children));
}
/**
 * A simple tooltip component.
 *
 * It can be used in two modes:
 * - **Controlled mode**: You can control the tooltip with the `open` prop.
 * - **Uncontrolled mode**: The tooltip will be open by default with the `defaultOpen` prop.
 *
 * @component
 * @param {TooltipProps} props - Component props.
 *
 * @returns {JSX.Element} The Tooltip component.
 *
 * @example
 * <Tooltip text='My tooltip'>
 * 	<Button>Hover me</Button>
 * </Tooltip>
 *
 * @preserve
 */
const Tooltip2 = (props) => {
  const {
    children,
    text,
    theme = "dark",
    offset = 0,
    crossOffset = 0,
    containerPadding = 12,
    openDelay = 1500,
    closeDelay = 500,
    shouldFlip = true,
    arrow,
    open,
    defaultOpen,
    onOpenChange,
    placement,
    className,
    triggerRef,
    disabled
  } = props;
  return /* @__PURE__ */ jsxs(
    $4e3b923658d69c60$export$8c610744efcf8a1d,
    {
      delay: openDelay,
      closeDelay,
      isDisabled: disabled,
      isOpen: open,
      onOpenChange,
      defaultOpen,
      children: [
        children,
        /* @__PURE__ */ jsxs(
          $4e3b923658d69c60$export$28c660c63b792dea,
          {
            containerPadding,
            placement,
            shouldFlip,
            triggerRef,
            offset,
            crossOffset,
            className: ({ isEntering, isExiting }) => clsx(
              "es:group es:pointer-events-none",
              "es:z-20 es:select-none es:rounded-md es:border es:px-1.5 es:py-0.5 es:text-sm es:shadow es:backdrop-blur-3xl es:will-change-[transform,opacity] es:fill-mode-forwards",
              theme === "light" && "es:border-secondary-200 es:bg-white/90 es:text-secondary-700",
              theme === "dark" && "es:border-secondary-600 es:bg-black/80 es:text-secondary-100",
              isEntering && "es:motion-opacity-in es:motion-duration-300 es:motion-safe:data-[placement=left]:motion-translate-x-in-[5%] es:motion-safe:data-[placement=right]:-motion-translate-x-in-[5%] es:motion-safe:data-[placement=top]:motion-translate-y-in-[5%] es:motion-safe:data-[placement=bottom]:-motion-translate-y-in-[5%] es:motion-ease-spring-smooth es:motion-ease-linear/opacity",
              isExiting && "es:motion-opacity-out es:motion-duration-200 es:motion-safe:data-[placement=left]:motion-translate-x-out-[12.5%] es:motion-safe:data-[placement=right]:motion-translate-x-out-[-12.5%] es:motion-safe:data-[placement=top]:motion-translate-y-out-[12.5%] es:motion-safe:data-[placement=bottom]:motion-translate-y-out-[-12.5%] es:motion-ease-spring-smooth es:motion-ease-linear/opacity",
              className
            ),
            children: [
              arrow && /* @__PURE__ */ jsx($44f671af83e7d9e0$export$746d02f47f4d381, { children: /* @__PURE__ */ jsx(
                "svg",
                {
                  width: 8,
                  height: 8,
                  viewBox: "0 0 8 8",
                  className: clsx(
                    "es:m-px es:stroke-none es:drop-shadow-sm",
                    "es:pointer-events-none",
                    theme === "light" && "es:fill-secondary-200",
                    theme === "dark" && "es:fill-secondary-600",
                    "es:group-data-[placement=left]:-rotate-90 es:group-data-[placement=right]:rotate-90 es:group-data-[placement=bottom]:rotate-180",
                    "es:forced-colors:fill-[Canvas] es:forced-colors:stroke-[ButtonBorder]"
                  ),
                  children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" })
                }
              ) }),
              text
            ]
          }
        )
      ]
    }
  );
};
/**
 * A "decorative" tooltip than can be used with element that usually don't support tooltips.
 * Usually the only elements that support tooltips are interactive elements like buttons or links.
 *
 * This component will wrap the element and add the tooltip functionality to it.
 * The tooltip will be shown when the element is hovered or anything within is focused.
 *
 * **Note**: This is not officially supported by the ARIA spec, so use with caution.
 *
 * @see {@link Tooltip} before using this component.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {string|JSX.Element} props.text - The text to display in the tooltip.
 * @param {TooltipTheme} [props.theme='dark'] - The theme of the tooltip.
 * @param {number} [props.offset=0] - Additional offset between the tooltip and the element on the main axis (same axis as element).
 * @param {number} [props.crossOffset=0] - Additional offset between the tooltip and the element on the cross axis (opposite axis as element).
 * @param {number} [props.containerPadding=12] - Space that should be left between the tooltip and the main containing element (usually browser window).
 * @param {number} [props.openDelay=1500] - Duration before the tooltip is shown, in milliseconds.
 * @param {number} [props.closeDelay=500] - Duration before the tooltip is hidden, in milliseconds.
 * @param {boolean} [props.shouldFlip=true] - If `false`, the tooltip will not flip to the opposite side if there is not enough space.
 * @param {TooltipPlacement} [props.placement] - The side of the trigger element where the tooltip will be displayed.
 * @param {string} [props.className] - Classes to pass to the tooltip.
 * @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper (if `doNotReplaceChild` is `false`).
 * @param {boolean} [props.arrow] - If `true`, an arrow is shown on the tooltip.
 *
 * @returns {JSX.Element} The DecorativeTooltip component.
 *
 * @typedef {'light' | 'dark'} TooltipTheme
 * @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} TooltipPlacement
 *
 * @example
 * <DecorativeTooltip text='My tooltip'>
 * 	<span>Hover me</span>
 * </DecorativeTooltip>
 *
 * @preserve
 */
const DecorativeTooltip = (props) => {
  const { openDelay, closeDelay, children, text, wrapperClassName, ...rest } = props;
  const state = $8796f90736e175cb$export$4d40659c25ecb50b(props);
  const ref = useRef(null);
  const { triggerProps } = $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref);
  return /* @__PURE__ */ jsx(
    Tooltip2,
    {
      triggerRef: ref,
      text,
      open: state.isOpen,
      ...rest,
      children: /* @__PURE__ */ jsx(
        "div",
        {
          ref,
          ...triggerProps,
          className: wrapperClassName,
          children
        }
      )
    }
  );
};
export {
  DecorativeTooltip,
  Tooltip2 as Tooltip
};
