{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { HTMLAttributes } from 'react';\nimport * as React from 'react';\nimport Skeleton from 'react-loading-skeleton';\nimport tinycolor from 'tinycolor2';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { SkeletonComponent, attachSkeleton } from '../../utils/skeleton';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { PopoverContent } from '../Tooltip/types';\n\nexport type BadgeColor = 'blue' | 'red' | 'green' | 'orange' | 'purple' | 'darkgrey' | 'brand';\n\nexport interface BadgeProps extends HTMLAttributes {\n text?: React.ReactNode;\n color: BadgeColor;\n icon?: IconName;\n tooltip?: PopoverContent;\n}\n\nconst BadgeComponent = React.memo(({ icon, color, text, tooltip, className, ...otherProps }) => {\n const styles = useStyles2(getStyles, color);\n const badge = (\n
\n {icon && }\n {text}\n
\n );\n\n return tooltip ? (\n \n {badge}\n \n ) : (\n badge\n );\n});\nBadgeComponent.displayName = 'Badge';\n\nconst BadgeSkeleton: SkeletonComponent = ({ rootProps }) => {\n const styles = useStyles2(getSkeletonStyles);\n\n return ;\n};\n\n/**\n * The badge component adds meta information to other content, for example about release status or new elements. You can add any `Icon` component or use the badge without an icon.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-badge--docs\n */\nexport const Badge = attachSkeleton(BadgeComponent, BadgeSkeleton);\n\nconst getSkeletonStyles = () => ({\n container: css({\n lineHeight: 1,\n }),\n});\n\nconst getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {\n let sourceColor = theme.visualization.getColorByName(color);\n let borderColor = '';\n let bgColor = '';\n let textColor = '';\n\n if (theme.isDark) {\n bgColor = tinycolor(sourceColor).setAlpha(0.15).toString();\n borderColor = tinycolor(sourceColor).setAlpha(0.25).toString();\n textColor = tinycolor(sourceColor).lighten(15).toString();\n } else {\n bgColor = tinycolor(sourceColor).setAlpha(0.15).toString();\n borderColor = tinycolor(sourceColor).setAlpha(0.25).toString();\n textColor = tinycolor(sourceColor).darken(20).toString();\n }\n\n if (color === 'brand') {\n bgColor = theme.colors.gradients.brandHorizontal;\n borderColor = 'transparent';\n textColor = theme.colors.primary.contrastText;\n }\n\n return {\n wrapper: css({\n display: 'inline-flex',\n padding: '1px 4px',\n borderRadius: theme.shape.radius.sm,\n background: bgColor,\n border: `1px solid ${borderColor}`,\n color: textColor,\n fontWeight: theme.typography.fontWeightRegular,\n gap: theme.spacing(0.5),\n fontSize: theme.typography.bodySmall.fontSize,\n lineHeight: theme.typography.bodySmall.lineHeight,\n alignItems: 'center',\n }),\n };\n};\n"],"names":["React","useStyles2","jsxs","cx","jsx","Icon","Tooltip","Skeleton","attachSkeleton","css","tinycolor"],"mappings":"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"}