{"version":3,"file":"FormLabel.mjs","sources":["../../../../src/components/FormLabel/FormLabel.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip, PopoverContent } from '../Tooltip';\n\ninterface Props {\n  children: ReactNode;\n  className?: string;\n  htmlFor?: string;\n  isFocused?: boolean;\n  isInvalid?: boolean;\n  tooltip?: PopoverContent;\n  width?: number | 'auto';\n  /** Make tooltip interactive */\n  interactive?: boolean;\n}\n\nexport const FormLabel = ({\n  children,\n  isFocused,\n  isInvalid,\n  className,\n  htmlFor,\n  tooltip,\n  width,\n  interactive,\n  ...rest\n}: Props) => {\n  const classes = classNames(className, `gf-form-label width-${width ? width : '10'}`, {\n    'gf-form-label--is-focused': isFocused,\n    'gf-form-label--is-invalid': isInvalid,\n  });\n\n  return (\n    <label className={classes} {...rest} htmlFor={htmlFor}>\n      {children}\n      {tooltip && (\n        <Tooltip placement=\"top\" content={tooltip} theme={'info'} interactive={interactive}>\n          <Icon name=\"info-circle\" size=\"sm\" style={{ marginLeft: '10px' }} />\n        </Tooltip>\n      )}\n    </label>\n  );\n};\n\nexport const InlineFormLabel = FormLabel;\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,YAAY,CAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAa,KAAA;AACX,EAAA,MAAM,UAAU,UAAW,CAAA,SAAA,EAAW,uBAAuB,KAAQ,GAAA,KAAA,GAAQ,IAAI,CAAI,CAAA,EAAA;AAAA,IACnF,2BAA6B,EAAA,SAAA;AAAA,IAC7B,2BAA6B,EAAA;AAAA,GAC9B,CAAA;AAED,EAAA,4BACG,OAAM,EAAA,EAAA,SAAA,EAAW,OAAU,EAAA,GAAG,MAAM,OAClC,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA,wBACE,OAAQ,EAAA,EAAA,SAAA,EAAU,OAAM,OAAS,EAAA,OAAA,EAAS,OAAO,MAAQ,EAAA,WAAA,EACxD,8BAAC,IAAK,EAAA,EAAA,IAAA,EAAK,eAAc,IAAK,EAAA,IAAA,EAAK,OAAO,EAAE,UAAA,EAAY,MAAO,EAAA,EAAG,CACpE,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;AAEO,MAAM,eAAkB,GAAA;;;;"}