@atlaskit/badge/dist/es2019/badge-new.js

A badge is a visual indicator for numeric values such as tallies and scores.

/* badge-new.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./badge-new.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { memo } from 'react';
import { Text } from '@atlaskit/primitives/compiled';
import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
import { formatValue } from './internal/format-value';
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
// Nested selectors with data attributes are required for theme switching
const stylesNew = {
  root: "_2rkolb4i _18zr1b66 _1rjcidpf _1e0c116y _vchhusvi _1ul91ejb _1bah1h6o _1o9zidpf _1kz6184x",
  success: "_syaz1p1e _bfhk14j0",
  danger: "_syaz1blx _bfhk18wg",
  warning: "_syazmgs1 _bfhk10f4",
  information: "_syaz1qd9 _bfhk8lbg",
  discovery: "_syaz1g72 _bfhke670",
  neutral: "_syazi7uo _bfhk7qp0",
  inverse: "_bfhkvuon _syazi7uo",
  informationBold: "_syaz1qd9 _bfhk9pm7",
  successBold: "_syaz1p1e _bfhk16ib",
  dangerBold: "_syaz1blx _bfhkud63",
  warningBold: "_syazmgs1 _bfhk1kmu",
  warningBoldDark: "_syazmgs1 _bfhkgj02",
  discoveryBold: "_syaz1g72 _bfhk5ly7"
};
/* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */

const badgeValueWithNegativeNumberSupported = (children, max) => {
  return typeof children === 'number' && max ? formatValue(children, max) : children;
};

/**
 * __BadgeNew__
 *
 * New visual refresh implementation of Badge component for the labelling system.
 * This component is used when the 'platform-dst-lozenge-tag-badge-visual-uplifts' feature flag is enabled.
 *
 * Uses new appearance naming convention:
 * - success (green)
 * - danger (red)
 * - neutral (gray)
 * - information (blue)
 * - inverse (inverted colors)
 * - warning (orange/yellow)
 * - discovery (purple)
 * - informationBold (bold blue, color.background.information.subtle)
 * - successBold (bold green, color.background.success.subtle)
 * - dangerBold (bold red, color.background.danger.subtle)
 * - warningBold (bold warning, color.background.warning.bold)
 * - discoveryBold (bold purple, color.background.discovery.subtle)
 */
const BadgeNew = /*#__PURE__*/memo(function BadgeNew({
  appearance = 'neutral',
  children = 0,
  max = 99,
  style,
  testId
}) {
  const {
    colorMode
  } = useThemeObserver();
  // In dark theme, warningBold needs to swap to a lighter background
  // (color.background.warning.subtle / Orange800) for better contrast against
  // the typical dark surface colors.
  const resolvedAppearance = appearance === 'warningBold' && colorMode === 'dark' ? 'warningBoldDark' : appearance;
  return /*#__PURE__*/React.createElement("span", {
    "data-testid": testId,
    style: {
      background: style === null || style === void 0 ? void 0 : style.backgroundColor,
      color: style === null || style === void 0 ? void 0 : style.color
    },
    className: ax([stylesNew.root, stylesNew[resolvedAppearance]])
  }, /*#__PURE__*/React.createElement(Text, {
    size: "small",
    align: "center",
    color: "inherit"
  }, badgeValueWithNegativeNumberSupported(children, max)));
});
export default BadgeNew;