export declare const tooltipTemplate = "\"use client\";\nimport { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport Link from \"next/link\";\nimport styled, { css } from \"styled-components\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\n\n// Layout cannot be measured during SSR; fall back to useEffect there so\n// prerendering stays warning-free while the browser still measures before\n// paint.\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nconst VIEWPORT_MARGIN = 8;\n\nconst StyledTooltip = styled.span`\n  position: relative;\n  display: inline-block;\n`;\n\nconst StyledTooltipTrigger = styled.span<{ theme: Theme }>`\n  cursor: help;\n  text-decoration: underline dotted 1.5px;\n  text-decoration-color: ${({ theme }) => theme.colors.gray};\n  text-underline-offset: 4px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\n// The gap between trigger and bubble is padding on the positioner (not a\n// margin) so the pointer never crosses empty space on its way to the CTA\n// link, which would fire mouseleave and close the tooltip early.\nconst StyledTooltipBubble = styled.span<{\n  theme: Theme;\n  $isOpen: boolean;\n  $placement: \"top\" | \"bottom\";\n  $shift: number;\n}>`\n  position: absolute;\n  left: 50%;\n  transform: translateX(calc(-50% + ${({ $shift }) => $shift}px));\n  width: max-content;\n  max-width: min(260px, calc(100vw - 16px));\n  z-index: 10;\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    opacity 0.2s ease,\n    visibility 0.2s ease;\n\n  ${({ $placement }) =>\n    $placement === \"top\"\n      ? css`\n          bottom: 100%;\n          padding-bottom: 8px;\n        `\n      : css`\n          top: 100%;\n          padding-top: 8px;\n        `}\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      opacity: 1;\n      visibility: visible;\n    `}\n`;\n\nconst StyledTooltipContent = styled.span<{ theme: Theme }>`\n  display: block;\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 10px 14px;\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n  text-align: left;\n`;\n\nconst StyledTooltipHeadline = styled.span<{ theme: Theme }>`\n  display: block;\n  font-weight: 700;\n  color: ${({ theme }) => theme.colors.dark};\n`;\n\nconst StyledTooltipCta = styled.a<{ theme: Theme }>`\n  display: block;\n  margin-top: 5px;\n  font-weight: 700;\n  color: ${({ theme }) => theme.colors.primary};\n  text-decoration: none;\n  transition: color 0.3s ease;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\n  }\n`;\n\ninterface TooltipProps {\n  children: React.ReactNode;\n  tip: string;\n  headline?: string;\n  cta?: string;\n  href?: string;\n}\n\nfunction Tooltip({ children, tip, headline, cta, href }: TooltipProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [placement, setPlacement] = useState<\"top\" | \"bottom\">(\"top\");\n  const [shift, setShift] = useState(0);\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const bubbleRef = useRef<HTMLSpanElement>(null);\n  const tooltipId = useId();\n\n  // Keep the bubble inside the viewport: shift it horizontally when the\n  // trigger sits near a screen edge, and flip it below the trigger when\n  // there is no room above. The hidden bubble still has layout, so it can\n  // be measured the moment it opens.\n  useIsomorphicLayoutEffect(() => {\n    if (!isOpen) return;\n    const wrapper = wrapperRef.current;\n    const bubble = bubbleRef.current;\n    if (!wrapper || !bubble) return;\n    const triggerRect = wrapper.getBoundingClientRect();\n    const bubbleRect = bubble.getBoundingClientRect();\n    setPlacement(\n      triggerRect.top - bubbleRect.height - VIEWPORT_MARGIN < 0\n        ? \"bottom\"\n        : \"top\",\n    );\n    const center = triggerRect.left + triggerRect.width / 2;\n    const half = bubbleRect.width / 2;\n    if (center - half < VIEWPORT_MARGIN) {\n      setShift(VIEWPORT_MARGIN - (center - half));\n    } else if (center + half > window.innerWidth - VIEWPORT_MARGIN) {\n      setShift(window.innerWidth - VIEWPORT_MARGIN - (center + half));\n    } else {\n      setShift(0);\n    }\n  }, [isOpen]);\n\n  // Touch devices have no hover and fire blur unreliably, so a tap anywhere\n  // outside must close the tooltip explicitly.\n  useEffect(() => {\n    if (!isOpen) return;\n    const closeOnOutsidePointer = (event: PointerEvent) => {\n      const wrapper = wrapperRef.current;\n      if (\n        wrapper &&\n        event.target instanceof Node &&\n        !wrapper.contains(event.target)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"pointerdown\", closeOnOutsidePointer);\n    return () =>\n      document.removeEventListener(\"pointerdown\", closeOnOutsidePointer);\n  }, [isOpen]);\n\n  return (\n    <StyledTooltip\n      ref={wrapperRef}\n      onMouseEnter={() => setIsOpen(true)}\n      onMouseLeave={() => setIsOpen(false)}\n      onFocus={() => setIsOpen(true)}\n      onBlur={(e) =>\n        !e.currentTarget.contains(e.relatedTarget) && setIsOpen(false)\n      }\n      onKeyDown={(e) => e.key === \"Escape\" && setIsOpen(false)}\n    >\n      {/* Click opens but never toggles closed: on touch, a tap can fire\n          focus and click in the same gesture, and a toggle would close the\n          tooltip the instant it opened. */}\n      <StyledTooltipTrigger\n        tabIndex={0}\n        aria-describedby={tooltipId}\n        onClick={() => setIsOpen(true)}\n      >\n        {children}\n      </StyledTooltipTrigger>\n      <StyledTooltipBubble\n        ref={bubbleRef}\n        id={tooltipId}\n        role=\"tooltip\"\n        $isOpen={isOpen}\n        $placement={placement}\n        $shift={shift}\n      >\n        <StyledTooltipContent>\n          {headline && (\n            <StyledTooltipHeadline>{headline}</StyledTooltipHeadline>\n          )}\n          {tip}\n          {cta &&\n            href &&\n            (href.startsWith(\"/\") ? (\n              <StyledTooltipCta as={Link} href={href}>\n                {cta}\n              </StyledTooltipCta>\n            ) : (\n              <StyledTooltipCta\n                href={href}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                {cta}\n              </StyledTooltipCta>\n            ))}\n        </StyledTooltipContent>\n      </StyledTooltipBubble>\n    </StyledTooltip>\n  );\n}\n\nexport { Tooltip };\n";