import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { memo } from "react";
import { controlColor } from "./theme.stylex";
import { fontSize, radius, size } from "./tokens.stylex";
import FormattedNumber from "./FormattedNumber";
const styles = stylex.create({
  badge: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: controlColor.numericBadgeBackground,
    minWidth: "min-content",
    maxWidth: "min-content",
    minHeight: "min-content",
    maxHeight: "min-content",
    aspectRatio: "1 / 1",
    padding: size.px1_5,
    borderRadius: radius.circle,
    fontSize: fontSize.tiny,
    fontWeight: "bold"
  }
});
export default memo(function NumericBadge(t0) {
  const $ = _c(3);
  const {
    value
  } = t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = stylex.props(styles.badge);
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  let t2;
  if ($[1] !== value) {
    t2 = <span {...t1}><FormattedNumber value={value} /></span>;
    $[1] = value;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  return t2;
});
//# sourceMappingURL=NumericBadge.jsx.map