@atlaskit/badge/dist/cjs/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 */
"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./badge-new.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _compiled = require("@atlaskit/primitives/compiled");
var _useThemeObserver2 = require("@atlaskit/tokens/use-theme-observer");
var _formatValue = require("./internal/format-value");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/* 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 ? (0, _formatValue.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__*/(0, _react.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 = (0, _useThemeObserver2.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: (0, _runtime.ax)([stylesNew.root, stylesNew[resolvedAppearance]])
  }, /*#__PURE__*/React.createElement(_compiled.Text, {
    size: "small",
    align: "center",
    color: "inherit"
  }, badgeValueWithNegativeNumberSupported(children, max)));
});
var _default = exports.default = BadgeNew;