pouncejs/dist/cjs/components/Badge/Badge.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _Box = _interopRequireDefault(require("../Box"));

var _helpers = require("../../utils/helpers");

var _useTheme = _interopRequireDefault(require("../../utils/useTheme"));

/** A badge is simply a visual label to accompany & characterize a certain text*/
var Badge = /*#__PURE__*/_react.default.forwardRef(function Badge(_ref, ref) {
  var color = _ref.color,
      children = _ref.children,
      _ref$stretch = _ref.stretch,
      stretch = _ref$stretch === void 0 ? false : _ref$stretch,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      _ref$emphasized = _ref.emphasized,
      emphasized = _ref$emphasized === void 0 ? false : _ref$emphasized,
      hasSolidBackground = _ref.hasSolidBackground,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["color", "children", "stretch", "size", "emphasized", "hasSolidBackground"]);
  var theme = (0, _useTheme.default)();
  var hasMediumSize = size === 'medium';
  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
    display: "flex",
    role: "status",
    "aria-atomic": "true",
    ref: ref,
    cursor: "default",
    width: stretch ? 'auto' : 'fit-content',
    textAlign: "center",
    fontWeight: emphasized ? 'bold' : 'normal',
    textTransform: emphasized ? 'uppercase' : 'none',
    border: "1px solid",
    borderRadius: "small",
    borderColor: color,
    backgroundColor: hasSolidBackground ? color : (0, _helpers.addOpacity)(theme.colors[color], 0.3),
    alignItems: "center",
    justifyContent: "center",
    fontSize: hasMediumSize ? 'small' : 'x-small',
    py: hasMediumSize ? 1 : 0,
    px: hasMediumSize ? '6px' : 1
  }, rest), children);
});

var _default = /*#__PURE__*/_react.default.memo(Badge);

exports.default = _default;