"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import * as RadixTooltip from "@radix-ui/react-tooltip";
import { buildColor } from "../../tokens/utils.js";
const VIEW_WIDTH = 18;
const VIEW_HEIGHT = VIEW_WIDTH / 2;
const scale = 0.6;
const strokeWidthPx = 1;
function TooltipArrow({ visible }) {
  return /* @__PURE__ */ jsx(RadixTooltip.Arrow, { asChild: true, children: /* @__PURE__ */ jsxs(
    "svg",
    {
      opacity: visible ? 1 : 0,
      visibility: visible ? "visible" : "hidden",
      width: VIEW_WIDTH * scale,
      height: VIEW_HEIGHT * scale,
      sx: { strokeWidth: strokeWidthPx / scale },
      viewBox: `0 0 ${VIEW_WIDTH} ${VIEW_WIDTH / 2}`,
      preserveAspectRatio: "none",
      children: [
        /* @__PURE__ */ jsx("polygon", { stroke: "none", sx: { fill: "Tooltip" }, points: "1,0 9,8 17,0" }),
        /* @__PURE__ */ jsx(
          "polyline",
          {
            fill: "none",
            sx: { stroke: buildColor(["Tooltip", "White4"]) },
            strokeLinecap: "round",
            strokeLinejoin: "round",
            points: "1,0.5 9,8 17,0.5"
          }
        )
      ]
    }
  ) });
}
export {
  TooltipArrow
};
