{"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 } from '../Tooltip/Tooltip';\nimport { PopoverContent } from '../Tooltip/types';\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":";;;;;;AAmBO,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,UAAA,CAAW,SAAA,EAAW,uBAAuB,KAAA,GAAQ,KAAA,GAAQ,IAAI,CAAA,CAAA,EAAI;AAAA,IACnF,2BAAA,EAA6B,SAAA;AAAA,IAC7B,2BAAA,EAA6B;AAAA,GAC9B,CAAA;AAED,EAAA,4BACG,OAAA,EAAA,EAAM,SAAA,EAAW,OAAA,EAAU,GAAG,MAAM,OAAA,EAClC,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA,wBACE,OAAA,EAAA,EAAQ,SAAA,EAAU,OAAM,OAAA,EAAS,OAAA,EAAS,OAAO,MAAA,EAAQ,WAAA,EACxD,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAK,eAAc,IAAA,EAAK,IAAA,EAAK,OAAO,EAAE,UAAA,EAAY,MAAA,EAAO,EAAG,CAAA,EACpE;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,MAAM,eAAA,GAAkB;;;;"}