import { InfoIcon } from "lucide-react"; import { cn } from "../lib/utils";import { Button } from "./button";import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"; export function HelpTooltip(props: {  readonly label: string;  readonly children: React.ReactNode;  readonly className?: string;}) {  return (    <TooltipProvider>      <Tooltip>        <TooltipTrigger asChild>          <Button            type="button"            variant="ghost"            size="icon-xs"            className="inline-flex size-4 items-center justify-center rounded-full text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"            aria-label={`${props.label} help`}          >            <InfoIcon className="size-3.5" aria-hidden />          </Button>        </TooltipTrigger>        <TooltipContent className={cn("w-max max-w-72 text-left text-wrap", props.className)}>          {props.children}        </TooltipContent>      </Tooltip>    </TooltipProvider>  );}