{"version":3,"file":"FieldSet.cjs","sources":["../../../../src/components/Forms/FieldSet.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { HTMLProps } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { Legend } from './Legend';\n\nexport interface Props extends Omit<HTMLProps<HTMLFieldSetElement>, 'label'> {\n  children: React.ReactNode[] | React.ReactNode;\n  /** Label for the fieldset's legend */\n  label?: React.ReactNode;\n}\n\n/**\n * Component used to group form elements inside a form, equivalent to HTML's [fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) tag. Accepts optional label, which, if provided, is used as a text for the set's legend.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-fieldset--docs\n */\nexport const FieldSet = ({ label, children, className, ...rest }: Props) => {\n  const styles = useStyles2(getStyles);\n\n  return (\n    <fieldset className={cx(styles.wrapper, className)} {...rest}>\n      {label && <Legend>{label}</Legend>}\n      {children}\n    </fieldset>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  wrapper: css({\n    marginBottom: theme.spacing(4),\n\n    '&:last-child': {\n      marginBottom: 0,\n    },\n  }),\n});\n"],"names":["useStyles2","jsxs","cx","jsx","Legend","css"],"mappings":";;;;;;;;;;AAqBO,MAAM,QAAA,GAAW,CAAC,EAAE,KAAA,EAAO,UAAU,SAAA,EAAW,GAAG,MAAK,KAAa;AAC1E,EAAA,MAAM,MAAA,GAASA,wBAAW,SAAS,CAAA;AAEnC,EAAA,uBACEC,eAAA,CAAC,cAAS,SAAA,EAAWC,MAAA,CAAG,OAAO,OAAA,EAAS,SAAS,CAAA,EAAI,GAAG,IAAA,EACrD,QAAA,EAAA;AAAA,IAAA,KAAA,oBAASC,cAAA,CAACC,iBAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACxB;AAAA,GAAA,EACH,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,MAA0B;AAAA,EAC3C,SAASC,OAAA,CAAI;AAAA,IACX,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAE7B,cAAA,EAAgB;AAAA,MACd,YAAA,EAAc;AAAA;AAChB,GACD;AACH,CAAA,CAAA;;;;"}