import {
  z
} from "./chunk-55OQPFLF.js";
import {
  overlaySurface
} from "./chunk-HGZGGJQB.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-W7FAWX6T.js";

// src/components/Tooltip.tsx
import { css } from "@emotion/css";
import { useTheme } from "@emotion/react";
import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import { Tooltip as ReactTooltip } from "react-tooltip";
import { jsx } from "@emotion/react/jsx-runtime";
function Tooltip(props) {
  const maxWidth = props.maxWidth || 260;
  const nodeRef = useRef(null);
  const [nodeReady, setNodeReady] = React.useState(false);
  useEffect(() => {
    if (!nodeRef.current) {
      nodeRef.current = document.createElement("div");
      document.body.appendChild(nodeRef.current);
    }
    setNodeReady(true);
    return () => {
      if (nodeRef.current) {
        document.body.removeChild(nodeRef.current);
        nodeRef.current = null;
      }
    };
  }, []);
  const theme = useTheme();
  return nodeReady && nodeRef.current ? ReactDOM.createPortal(
    /* @__PURE__ */ jsx(
      ReactTooltip,
      __spreadProps(__spreadValues({}, props), {
        id: props.id || "",
        content: props.content || "",
        noArrow: true,
        border: "0.05rem solid rgba(0, 0, 0, 0.1)",
        className: styles({ theme, maxWidth }),
        variant: "light",
        clickable: Boolean(props.interactive)
      })
    ),
    nodeRef.current
  ) : null;
}
var styles = ({ theme, maxWidth }) => css`
  font-size: "10px";
  color: ${theme.c8Neutral} !important;
  border-radius: 8px !important;
  padding: 16px !important;
  z-index: ${z.tooltip};
  ${overlaySurface({ theme, important: true })};

  max-width: ${maxWidth}px;
  word-break: break-word;
  box-shadow:
    0px 1px 4px 0px rgba(0, 0, 0, 0.1),
    0px 4px 8px 0px rgba(0, 0, 0, 0.08) !important;
`;

export {
  Tooltip
};
