import { Icon } from "./Icon/Icon.js";
import { toReactNodes } from "../utils/toReactNodes/toReactNodes.js";
import { Tooltip } from "./Tooltip.js";
import { Fragment } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/InfoIconTooltip.tsx
function InfoIconTooltip({ id, content, verticalAlign = "middle" }) {
	const contentNodes = toReactNodes(content);
	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
		"data-tooltip-id": id,
		style: {
			display: "inline-flex",
			alignItems: "center",
			verticalAlign
		},
		children: /* @__PURE__ */ jsx(Icon, {
			name: "Info",
			width: 12,
			ml: 4
		})
	}), /* @__PURE__ */ jsx(Tooltip, {
		id,
		render: () => contentNodes,
		clickable: true
	})] });
}
//#endregion
export { InfoIconTooltip };
