{"version":3,"file":"FieldValidationMessage.cjs","sources":["../../../../src/components/Forms/FieldValidationMessage.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\n\nexport interface FieldValidationMessageProps {\n  /** Override component style */\n  className?: string;\n  horizontal?: boolean;\n}\n\n/**\n * Component for displaying a validation error message under an element.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-fieldvalidationmessage--docs\n */\nexport const FieldValidationMessage = ({\n  children,\n  horizontal,\n  className,\n}: React.PropsWithChildren<FieldValidationMessageProps>) => {\n  const styles = useStyles2(getFieldValidationMessageStyles);\n  const cssName = cx(horizontal ? styles.horizontal : styles.vertical, className);\n\n  return (\n    <div role=\"alert\" className={cssName}>\n      <Icon className={styles.fieldValidationMessageIcon} name=\"exclamation-circle\" />\n      {children}\n    </div>\n  );\n};\n\nexport const getFieldValidationMessageStyles = (theme: GrafanaTheme2) => {\n  const baseStyle = `\n      font-size: ${theme.typography.size.sm};\n      font-weight: ${theme.typography.fontWeightMedium};\n      padding: ${theme.spacing(0.5, 1)};\n      color: ${theme.colors.error.contrastText};\n      background: ${theme.colors.error.main};\n      border-radius: ${theme.shape.radius.default};\n      position: relative;\n      display: inline-block;\n      align-self: flex-start;\n\n      a {\n        color: ${theme.colors.error.contrastText};\n        text-decoration: underline;\n      }\n\n      a:hover {\n        text-decoration: none;\n      }\n    `;\n\n  return {\n    vertical: css(baseStyle, {\n      margin: theme.spacing(0.5, 0, 0, 0),\n\n      '&:before': {\n        content: '\"\"',\n        position: 'absolute',\n        left: '9px',\n        top: '-5px',\n        width: 0,\n        height: 0,\n        borderWidth: '0 4px 5px 4px',\n        borderColor: `transparent transparent ${theme.colors.error.main} transparent`,\n        borderStyle: 'solid',\n      },\n    }),\n    horizontal: css(baseStyle, {\n      marginLeft: '10px',\n\n      '&:before': {\n        content: '\"\"',\n        position: 'absolute',\n        left: '-5px',\n        top: '9px',\n        width: 0,\n        height: 0,\n        borderWidth: '4px 5px 4px 0',\n        borderColor: 'transparent #e02f44 transparent transparent',\n        borderStyle: 'solid',\n      },\n    }),\n    fieldValidationMessageIcon: css({\n      marginRight: theme.spacing(),\n    }),\n  };\n};\n"],"names":["useStyles2","cx","jsxs","jsx","Icon","css"],"mappings":";;;;;;;;;;AAmBO,MAAM,yBAAyB,CAAC;AAAA,EACrC,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAA4D;AAC1D,EAAA,MAAM,MAAA,GAASA,wBAAW,+BAA+B,CAAA;AACzD,EAAA,MAAM,UAAUC,MAAA,CAAG,UAAA,GAAa,OAAO,UAAA,GAAa,MAAA,CAAO,UAAU,SAAS,CAAA;AAE9E,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,OAAA,EAAQ,WAAW,OAAA,EAC3B,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,SAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,0BAAA,EAA4B,MAAK,oBAAA,EAAqB,CAAA;AAAA,IAC7E;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,MAAM,+BAAA,GAAkC,CAAC,KAAA,KAAyB;AACvE,EAAA,MAAM,SAAA,GAAY;AAAA,iBAAA,EACD,KAAA,CAAM,UAAA,CAAW,IAAA,CAAK,EAAE,CAAA;AAAA,mBAAA,EACtB,KAAA,CAAM,WAAW,gBAAgB,CAAA;AAAA,eAAA,EACrC,KAAA,CAAM,OAAA,CAAQ,GAAA,EAAK,CAAC,CAAC,CAAA;AAAA,aAAA,EACvB,KAAA,CAAM,MAAA,CAAO,KAAA,CAAM,YAAY,CAAA;AAAA,kBAAA,EAC1B,KAAA,CAAM,MAAA,CAAO,KAAA,CAAM,IAAI,CAAA;AAAA,qBAAA,EACpB,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,eAAA,EAMhC,KAAA,CAAM,MAAA,CAAO,KAAA,CAAM,YAAY,CAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAS9C,EAAA,OAAO;AAAA,IACL,QAAA,EAAUC,QAAI,SAAA,EAAW;AAAA,MACvB,QAAQ,KAAA,CAAM,OAAA,CAAQ,GAAA,EAAK,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,MAElC,UAAA,EAAY;AAAA,QACV,OAAA,EAAS,IAAA;AAAA,QACT,QAAA,EAAU,UAAA;AAAA,QACV,IAAA,EAAM,KAAA;AAAA,QACN,GAAA,EAAK,MAAA;AAAA,QACL,KAAA,EAAO,CAAA;AAAA,QACP,MAAA,EAAQ,CAAA;AAAA,QACR,WAAA,EAAa,eAAA;AAAA,QACb,WAAA,EAAa,CAAA,wBAAA,EAA2B,KAAA,CAAM,MAAA,CAAO,MAAM,IAAI,CAAA,YAAA,CAAA;AAAA,QAC/D,WAAA,EAAa;AAAA;AACf,KACD,CAAA;AAAA,IACD,UAAA,EAAYA,QAAI,SAAA,EAAW;AAAA,MACzB,UAAA,EAAY,MAAA;AAAA,MAEZ,UAAA,EAAY;AAAA,QACV,OAAA,EAAS,IAAA;AAAA,QACT,QAAA,EAAU,UAAA;AAAA,QACV,IAAA,EAAM,MAAA;AAAA,QACN,GAAA,EAAK,KAAA;AAAA,QACL,KAAA,EAAO,CAAA;AAAA,QACP,MAAA,EAAQ,CAAA;AAAA,QACR,WAAA,EAAa,eAAA;AAAA,QACb,WAAA,EAAa,6CAAA;AAAA,QACb,WAAA,EAAa;AAAA;AACf,KACD,CAAA;AAAA,IACD,4BAA4BA,OAAA,CAAI;AAAA,MAC9B,WAAA,EAAa,MAAM,OAAA;AAAQ,KAC5B;AAAA,GACH;AACF;;;;;"}