{"version":3,"file":"Legend.cjs","sources":["../../../../src/components/Forms/Legend.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { ReactNode } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport interface LabelProps extends React.HTMLAttributes<HTMLLegendElement> {\n  children: string | ReactNode;\n  description?: string;\n}\n\nexport const getLegendStyles = (theme: GrafanaTheme2) => {\n  return {\n    legend: css({\n      fontSize: theme.typography.h3.fontSize,\n      fontWeight: theme.typography.fontWeightRegular,\n      margin: theme.spacing(0, 0, 2, 0),\n    }),\n  };\n};\n\n/**\n * Legend should be used to add a caption to a group of related form elements that have been grouped toegheter into a `FieldSet`.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-legend--docs\n */\nexport const Legend = ({ children, className, ...legendProps }: LabelProps) => {\n  const styles = useStyles2(getLegendStyles);\n\n  return (\n    <legend className={cx(styles.legend, className)} {...legendProps}>\n      {children}\n    </legend>\n  );\n};\n"],"names":["css","useStyles2","jsx","cx"],"mappings":";;;;;;;;;AAaO,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAyB;AACvD,EAAA,OAAO;AAAA,IACL,QAAQA,OAAA,CAAI;AAAA,MACV,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,EAAA,CAAG,QAAA;AAAA,MAC9B,UAAA,EAAY,MAAM,UAAA,CAAW,iBAAA;AAAA,MAC7B,QAAQ,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAA,EAAG,GAAG,CAAC;AAAA,KACjC;AAAA,GACH;AACF;AAOO,MAAM,SAAS,CAAC,EAAE,UAAU,SAAA,EAAW,GAAG,aAAY,KAAkB;AAC7E,EAAA,MAAM,MAAA,GAASC,wBAAW,eAAe,CAAA;AAEzC,EAAA,uBACEC,cAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAWC,MAAA,CAAG,MAAA,CAAO,QAAQ,SAAS,CAAA,EAAI,GAAG,WAAA,EAClD,QAAA,EACH,CAAA;AAEJ;;;;;"}