import {
  Tooltip as TTooltip,
  ThemeableStack,
  styled,
  withStaticProperties
} from "tamagui";
import { Body, Title } from "./typography";
import { jsx, jsxs } from "react/jsx-runtime";
const Content = styled(TTooltip.Content, {
  name: "TooltipContent",
  backgroundColor: "$inverseSurface",
  borderRadius: "$shape.corner_extra_small",
  minHeight: 24,
  paddingLeft: 8,
  paddingRight: 8,
  paddingTop: 0,
  paddingBottom: 0,
  enterStyle: { x: 0, y: -5, opacity: 0, scale: 0.9 },
  exitStyle: { x: 0, y: -5, opacity: 0, scale: 0.9 },
  scale: 1,
  x: 0,
  y: 0,
  opacity: 1,
  animation: [
    "quick",
    {
      opacity: {
        overshootClamping: !0
      }
    }
  ],
  variants: {
    rich: {
      true: {
        paddingLeft: 16,
        paddingRight: 16,
        paddingTop: 12,
        paddingBottom: 8,
        width: 300
      }
    }
  }
}), SupportingText = styled(Body, {
  name: "TooltipSupportingText",
  col: "$inverseOnSurface",
  m: 8
}), Subhead = styled(Title, {
  size: "small",
  col: "$inverseOnSurface"
}), Actions = styled(ThemeableStack, {
  name: "TooltipActions",
  mt: 12,
  width: "100%",
  justifyContent: "flex-start",
  flexDirection: "row",
  alignItems: "center"
}), RichContent = styled(ThemeableStack, {
  name: "TooltipRichContent",
  flexDirection: "column",
  gap: 4
}), Tooltip = withStaticProperties(TTooltip, {
  displayName: "Tooltip",
  Trigger: TTooltip.Trigger,
  RichContent,
  Content,
  SupportingText,
  Subhead,
  Actions
});
function CompactTooltip({
  label,
  children
}) {
  return /* @__PURE__ */ jsxs(Tooltip, { children: [
    /* @__PURE__ */ jsx(Tooltip.Trigger, { children }),
    /* @__PURE__ */ jsx(Tooltip.Content, { children: /* @__PURE__ */ jsx(Tooltip.SupportingText, { children: label }) })
  ] });
}
export {
  CompactTooltip,
  Tooltip
};
//# sourceMappingURL=Tooltip.js.map
