@atlaskit/badge/dist/esm/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
var 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 */

var badgeValueWithNegativeNumberSupported = function 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)
 */
var BadgeNew = /*#__PURE__*/memo(function BadgeNew(_ref) {
  var _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
    _ref$children = _ref.children,
    children = _ref$children === void 0 ? 0 : _ref$children,
    _ref$max = _ref.max,
    max = _ref$max === void 0 ? 99 : _ref$max,
    style = _ref.style,
    testId = _ref.testId;
  var _useThemeObserver = useThemeObserver(),
    colorMode = _useThemeObserver.colorMode;
  // 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.
  var 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;