@grafana/ui/dist/esm/components/Forms/Label.mjs.map

Grafana Components Library

{"version":3,"file":"Label.mjs","sources":["../../../../src/components/Forms/Label.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 LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  children: React.ReactNode;\n  description?: React.ReactNode;\n  category?: React.ReactNode[];\n}\n\nexport const Label = ({ children, description, className, category, ...labelProps }: LabelProps) => {\n  const styles = useStyles2(getLabelStyles);\n  const categories = category?.map((c, i) => {\n    return (\n      <span className={styles.categories} key={`${c}/${i}`}>\n        <span>{c}</span>\n        <Icon name=\"angle-right\" className={styles.chevron} />\n      </span>\n    );\n  });\n\n  return (\n    <div className={cx(styles.label, className)}>\n      <label {...labelProps}>\n        <div className={styles.labelContent}>\n          {categories}\n          {children}\n        </div>\n        {description && <span className={styles.description}>{description}</span>}\n      </label>\n    </div>\n  );\n};\n\nexport const getLabelStyles = (theme: GrafanaTheme2) => ({\n  label: css({\n    label: 'Label',\n    fontSize: theme.typography.size.sm,\n    fontWeight: theme.typography.fontWeightMedium,\n    lineHeight: 1.25,\n    marginBottom: theme.spacing(0.5),\n    color: theme.colors.text.primary,\n    maxWidth: '480px',\n  }),\n  labelContent: css({\n    display: 'flex',\n    alignItems: 'center',\n  }),\n  description: css({\n    label: 'Label-description',\n    color: theme.colors.text.secondary,\n    fontSize: theme.typography.size.sm,\n    fontWeight: theme.typography.fontWeightRegular,\n    marginTop: theme.spacing(0.25),\n    display: 'block',\n  }),\n  categories: css({\n    label: 'Label-categories',\n    display: 'inline-flex',\n    alignItems: 'center',\n  }),\n  chevron: css({\n    margin: theme.spacing(0, 0.25),\n  }),\n});\n"],"names":[],"mappings":";;;;;AAca,MAAA,KAAA,GAAQ,CAAC,EAAE,QAAA,EAAU,aAAa,SAAW,EAAA,QAAA,EAAU,GAAG,UAAA,EAA6B,KAAA;AAClG,EAAM,MAAA,MAAA,GAAS,WAAW,cAAc,CAAA;AACxC,EAAA,MAAM,UAAa,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,GAAI,CAAA,CAAC,GAAG,CAAM,KAAA;AACzC,IAAA,uBACG,IAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,MAAA,CAAO,UACtB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAM,QAAE,EAAA,CAAA,EAAA,CAAA;AAAA,0BACR,IAAK,EAAA,EAAA,IAAA,EAAK,aAAc,EAAA,SAAA,EAAW,OAAO,OAAS,EAAA;AAAA,KAAA,EAAA,EAFb,CAAG,EAAA,CAAC,CAAI,CAAA,EAAA,CAAC,CAGlD,CAAA,CAAA;AAAA,GAEJ,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,KAAO,EAAA,SAAS,CACxC,EAAA,QAAA,kBAAA,IAAA,CAAC,OAAO,EAAA,EAAA,GAAG,UACT,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,YACpB,EAAA,QAAA,EAAA;AAAA,MAAA,UAAA;AAAA,MACA;AAAA,KACH,EAAA,CAAA;AAAA,IACC,+BAAgB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,MAAA,CAAO,aAAc,QAAY,EAAA,WAAA,EAAA;AAAA,GAAA,EACpE,CACF,EAAA,CAAA;AAEJ;AAEa,MAAA,cAAA,GAAiB,CAAC,KAA0B,MAAA;AAAA,EACvD,OAAO,GAAI,CAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,IAAK,CAAA,EAAA;AAAA,IAChC,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,IAC7B,UAAY,EAAA,IAAA;AAAA,IACZ,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC/B,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,IACzB,QAAU,EAAA;AAAA,GACX,CAAA;AAAA,EACD,cAAc,GAAI,CAAA;AAAA,IAChB,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA;AAAA,GACb,CAAA;AAAA,EACD,aAAa,GAAI,CAAA;AAAA,IACf,KAAO,EAAA,mBAAA;AAAA,IACP,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,IAAK,CAAA,EAAA;AAAA,IAChC,UAAA,EAAY,MAAM,UAAW,CAAA,iBAAA;AAAA,IAC7B,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,IAC7B,OAAS,EAAA;AAAA,GACV,CAAA;AAAA,EACD,YAAY,GAAI,CAAA;AAAA,IACd,KAAO,EAAA,kBAAA;AAAA,IACP,OAAS,EAAA,aAAA;AAAA,IACT,UAAY,EAAA;AAAA,GACb,CAAA;AAAA,EACD,SAAS,GAAI,CAAA;AAAA,IACX,MAAQ,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,IAAI;AAAA,GAC9B;AACH,CAAA;;;;"}