@atlaskit/primitives/dist/esm/compiled/components/metric-text.js

Primitives are token-backed low-level building blocks.

/* metric-text.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./metric-text.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef } from 'react';
import invariant from 'tiny-invariant';
var asAllowlist = ['span', 'div'];
var styles = {
  root: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf",
  'textAlign.center': "_y3gn1h6o",
  'textAlign.end': "_y3gnh9n0",
  'textAlign.start': "_y3gnv2br"
};
var fontSizeMap = {
  small: "_11c8ys40",
  medium: "_11c85kmp",
  large: "_11c81xwm"
};

/**
 * __MetricText__
 *
 * MetricText is a primitive component that has the Atlassian Design System's design guidelines baked in.
 * It is designed for use specifically with displaying metrics and is not to be used for headings or general UI text.
 * It renders a `span` by default.
 *
 * @internal
 */
var MetricText = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _ref$as = _ref.as,
    Component = _ref$as === void 0 ? 'span' : _ref$as,
    align = _ref.align,
    testId = _ref.testId,
    id = _ref.id,
    size = _ref.size,
    children = _ref.children;
  invariant(asAllowlist.includes(Component), "@atlaskit/primitives: MetricText received an invalid \"as\" value of \"".concat(Component, "\""));
  var component = /*#__PURE__*/React.createElement(Component, {
    ref: ref,
    "data-testid": testId,
    id: id,
    className: ax([styles.root, size && fontSizeMap[size], align && styles["textAlign.".concat(align)]])
  }, children);
  return component;
});
export default MetricText;