@atlaskit/primitives 14.8.4 → 14.9.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/primitives
 
+## 14.9.0
+
+### Minor Changes
+
+- [#172429](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/172429)
+  [`324162357eb4d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/324162357eb4d) -
+  Added MetricText component which provides a convenient way to consume new metric typography tokens
+  for charts and other numerical components. Made metric tokens available in xcss via the font
+  shorthand property.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.8.4
 
 ### Patch Changes

package/constellation/anchor/examples.mdx

@@ -54,16 +54,16 @@ global styles.
 
 <Example Component={AnchorDefault} packageName="@atlaskit/primitives/anchor" />
 
-## Basic styling with XCSS
+## Basic styling
 
-Anchor can be styled further using the design system styling API,
-[XCSS](/components/primitives/xcss).
+Anchor can be styled further using the design system styling API using
+[cssMap](/components/css/examples).
 
 <Example Component={AnchorBasic} packageName="@atlaskit/primitives/anchor" />
 
 ## Advanced styling
 
-Use a combination of XCSS and other primitives for more complex designs.
+Use a combination of cssMap and other primitives for more complex designs.
 
 <Example Component={AnchorStyled} packageName="@atlaskit/primitives/anchor" />
 

package/constellation/box/examples.mdx

@@ -23,7 +23,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 Box is a general-purpose container that allows for controlled use of design tokens. Use the given
 props to configure display behavior and styling that aligns with the Atlassian Design System. Use
-[XCSS](/components/primitives/xcss/usage) to style primitive components safely with tokens.
+[cssMap](/components/css/overview#cssmap) to style primitive components safely with tokens.
 
 <Example Component={BoxBasic} packageName="@atlaskit/primitives/box" />
 
@@ -47,20 +47,20 @@ list of color tokens, visit the [token list](/components/tokens/all-tokens).
 
 <Example Component={BoxBackgroundColor} packageName="@atlaskit/primitives/box" />
 
-## XCSS
+## Styling
 
-Box exposes an `xcss` prop. This prop accepts `xcss` function calls that contain a subset of
-permitted styles. When used with `Box`, `xcss` accepts most CSS properties, and when a token exists,
-the rule accepts that token as a value.
+Box exposes an `xcss` prop. This prop accepts `cssMap` function calls from our CSS-in-JS library
+[@atlaskit/css](/components/css/overview#cssmap) which contains a subset of permitted styles.
 
-For more information on XCSS, see the dedicated [XCSS documentation](/components/primitives/xcss).
+For more information on cssMap, see the dedicated
+[CSS library documentation](/components/css/overview#cssmap).
 
 <Example Component={BoxXcss} packageName="@atlaskit/primitives/box" />
 
 ## Conditional styles
 
 To achieve conditional styles, we suggest composing conditional styles via the `props.xcss` API
-rather than applying conditional behaviour to individual props.
+rather than applying conditional behavior to individual props.
 
 <Example Component={BoxConditional} packageName="@atlaskit/primitives/box" />
 

package/constellation/box/usage.mdx

@@ -27,7 +27,7 @@ custom buttons, or [anchor](/components/primitives/anchor/usage) to build custom
 ## Styling
 
 Display behavior is set by using the available props or using
-[XCSS](/components/primitives/xcss/usage). Makers can make design decisions for box by setting:
+[cssMap](/components/css/overview#cssmap). Makers can make design decisions for box by setting:
 
 - `padding`
 - `paddingInline`
@@ -44,4 +44,4 @@ Display behavior is set by using the available props or using
 - [Manage vertical layout using a stack component](/components/primitives/stack/usage)
 - [Build custom buttons using a pressable component](/components/primitives/pressable/usage)
 - [Build custom links using an anchor component](/components/primitives/anchor/usage)
-- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)
+- [Use design tokens in code with cssMap](/components/css/overview#cssmap)

package/constellation/inline/examples.mdx

@@ -60,7 +60,7 @@ In situations where tabbing order changes based on different breakpoints, then w
 different orderings of content.
 
 For non-tabbable content that needs to be reversed, `flex-direction: row-reverse` is supported in
-XCSS. However, please be aware that we may lint against this in the future.
+via the `xcss` prop. However, please be aware that we may lint against this in the future.
 
 ## Alignment
 

package/constellation/inline/usage.mdx

@@ -53,9 +53,23 @@ the list items and set the font size to zero to get the same visual results whil
 semantics across browsers and assistive technologies.
 
 ```tsx
-<Box as="li" xcss={xcss({ '::marker': { fontSize: 0 } })}>
-	Example
-</Box>
+const recommendedStyles = cssMap({
+	list: {
+		'&::marker': {
+			fontSize: '0',
+		},
+	},
+});
+
+export default function Example() {
+	return (
+		<Inline as="ul">
+			<li css={recommendedStyles.list}>Item 1</li>
+			<li css={recommendedStyles.list}>Item 2</li>
+			<li css={recommendedStyles.list}>Item 3</li>
+		</Inline>
+	);
+}
 ```
 
 Alternatively, if you do need to use `list-style-type: none` you can add add `role="list"` to the
@@ -65,4 +79,4 @@ Alternatively, if you do need to use `list-style-type: none` you can add add `ro
 
 - [Use box for a generic container with access to design tokens](/components/primitives/box/usage)
 - [Manage vertical layout using a stack component](/components/primitives/stack/usage)
-- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)
+- [Use design tokens in code with cssMap](/components/css/overview#cssmap)

package/constellation/overview/index.mdx

@@ -99,4 +99,4 @@ and vertical `Stack` components.
 - [Flex](/components/primitives/flex/examples)
 - [Pressable](/components/primitives/pressable/examples)
 - [Anchor](/components/primitives/anchor/examples)
-- [xcss](/components/primitives/xcss/usage)
+- [cssMap](/components/css/overview#cssmap)

package/constellation/pressable/examples.mdx

@@ -33,10 +33,10 @@ Pressable is unstyled by default, aside from basic focus styles.
 
 <Example Component={PressableDefault} packageName="@atlaskit/primitives/pressable" />
 
-## Basic styling with XCSS
+## Basic styling
 
 Pressable can be styled further using the design system styling API,
-[XCSS](/components/primitives/xcss).
+[cssMap](/components/css/overview#cssmap).
 
 Make sure styling indicates the interaction state using `:hover` and `:active` pseudo-classes.
 
@@ -44,7 +44,7 @@ Make sure styling indicates the interaction state using `:hover` and `:active` p
 
 ## Advanced styling
 
-Use a combination of XCSS and other primitives for more complex designs.
+Use a combination of `cssMap` and other primitives for more complex designs.
 
 <Example
 	Component={PressableStyled}
@@ -55,7 +55,7 @@ Use a combination of XCSS and other primitives for more complex designs.
 ## Disabled
 
 You can disable pressable buttons with the `isDisabled` prop. Disabled styles should be applied and
-defined conditionally using XCSS.
+defined conditionally using `cssMap`.
 
 Disabled buttons can cause accessibility issues (disabled elements are not in the tab order) so
 wherever possible, avoid using `isDisabled`. Instead, use validation or other techniques to show

package/constellation/responsive/examples.mdx

@@ -4,12 +4,6 @@ description: Responsive helpers and primitives to build responsive UIs.
 order: 1
 ---
 
-import CSSExample from '../../examples/constellation/responsive/css';
-import XCSSExample from '../../examples/constellation/responsive/xcss';
-import ShowExample from '../../examples/constellation/responsive/show';
-import HideExample from '../../examples/constellation/responsive/hide';
-import ShowHideExample from '../../examples/constellation/responsive/show-hide';
-
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 <CodeDocsHeader
@@ -18,26 +12,25 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 	directoryName="primitives"
 />
 
-## Responsive `css` or `xcss`
-
-Utilize our media queries exposed in `css`, `styled`, or `xcss` as computed keys to build responsive
-UIs. Learn more about these media query exports in [usage](/components/primitives/responsive/usage).
-
-### Using with `xcss`
-
-Please use `xcss` whenever possible to ensure consistency and safety with style overrides. Read more
-at [xcss](/components/primitives/xcss)
-
-<Example Component={XCSSExample} packageName="@atlaskit/primitives/responsive" />
-
-### Using with `css`
+## Media queries
 
-<Example Component={CSSExample} packageName="@atlaskit/primitives/responsive" />
+Media queries can be applied directly in your styles. As you type `@media`, you'll get IntelliSense
+support showing all the allowed media queries from the Atlassian Design System. For a complete list
+of available breakpoints and media queries, see the
+[breakpoints documentation](/components/primitives/responsive/breakpoints).
 
-## Responsive primitives
+### Using with `cssMap`
 
-Consider these shortcuts to writing your own custom media queries. Composing with our primitives
-will be far quicker and consistent to implement, but may result in excess DOM nodes.
+```jsx
+import { cssMap } from '@atlaskit/css';
 
-- [Show](/components/primitives/responsive/show)
-- [Hide](/components/primitives/responsive/hide)
+const styles = cssMap({
+	// Start typing '@media' to see available media queries
+	'@media (min-width: 48rem)': {
+		color: token('color.text'),
+	},
+	'@media (min-width: 64rem)': {
+		color: token('color.text.accent.blue'),
+	},
+});
+```

package/constellation/stack/usage.mdx

@@ -40,4 +40,4 @@ These props customize the spacing and styling of any child elements:
 
 - [Use box for a generic container with access to design tokens](/components/primitives/box/usage)
 - [Manage horizontal layout using an inline component](/components/primitives/inline/usage)
-- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)
+- [Use design tokens in code with cssMap](/components/css/overview#cssmap)

package/constellation/text/examples.mdx

@@ -91,7 +91,7 @@ However if truncation cannot be avoided, for example when displaying user-genera
 
 ## Customization
 
-A restricted set of styles can be customized using the `xcss` prop. This is only available in the
-Compiled version of Text.
+A restricted set of styles can be customized using the `xcss` prop, using
+[cssMap](/components/css/overview#cssmap).
 
 <Example Component={TextCustomization} packageName="@atlaskit/primitives" />

package/dist/cjs/compiled/components/metric-text.compiled.css

@@ -0,0 +1,10 @@
+._11c81lu7{font:var(--ds-font-metric-medium,normal 653 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c81r7r{font:var(--ds-font-metric-large,normal 653 28px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8h56o{font:var(--ds-font-metric-small,normal 653 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18u0idpf{margin-left:0}
+._19pkidpf{margin-top:0}
+._2hwxidpf{margin-right:0}
+._otyridpf{margin-bottom:0}
+._y3gn1h6o{text-align:center}
+._y3gnh9n0{text-align:end}
+._y3gnv2br{text-align:start}

package/dist/cjs/compiled/components/metric-text.js

@@ -0,0 +1,55 @@
+/* metric-text.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./metric-text.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+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); }
+var asAllowlist = ['span', 'div'];
+var styles = {
+  root: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf",
+  'textAlign.center': "_y3gn1h6o",
+  'textAlign.end': "_y3gnh9n0",
+  'textAlign.start': "_y3gnv2br"
+};
+var fontSizeMap = {
+  small: "_11c8h56o",
+  medium: "_11c81lu7",
+  large: "_11c81r7r"
+};
+
+/**
+ * __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__*/(0, _react.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;
+  (0, _tinyInvariant.default)(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: (0, _runtime.ax)([styles.root, size && fontSizeMap[size], align && styles["textAlign.".concat(align)]])
+  }, children);
+  return component;
+});
+var _default = exports.default = MetricText;

package/dist/cjs/compiled/index.js

@@ -52,6 +52,12 @@ Object.defineProperty(exports, "Inline", {
     return _inline.default;
   }
 });
+Object.defineProperty(exports, "MetricText", {
+  enumerable: true,
+  get: function get() {
+    return _metricText.default;
+  }
+});
 Object.defineProperty(exports, "Pressable", {
   enumerable: true,
   get: function get() {
@@ -101,6 +107,7 @@ var _flex = _interopRequireDefault(require("./components/flex"));
 var _grid = _interopRequireDefault(require("./components/grid"));
 var _bleed = _interopRequireDefault(require("./components/bleed"));
 var _text = _interopRequireDefault(require("./components/text"));
+var _metricText = _interopRequireDefault(require("./components/metric-text"));
 var _pressable = _interopRequireDefault(require("./components/pressable"));
 var _anchor = _interopRequireDefault(require("./components/anchor"));
 var _responsive = require("./responsive");

package/dist/cjs/components/metric-text.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _styleMaps = require("../xcss/style-maps.partial");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var asAllowlist = ['span', 'div'];
+// We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
+// Long term we should remove those instances from the reset - it should be a reset to 0.
+// For now, at least we know <MetricText> will be unaffected by this.
+var resetStyles = (0, _react2.css)({
+  margin: 0
+});
+var textAlignMap = {
+  center: (0, _react2.css)({
+    textAlign: 'center'
+  }),
+  end: (0, _react2.css)({
+    textAlign: 'end'
+  }),
+  start: (0, _react2.css)({
+    textAlign: 'start'
+  })
+};
+
+/**
+ * __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__*/(0, _react.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;
+  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: MetricText received an invalid \"as\" value of \"".concat(Component, "\""));
+  var component = (0, _react2.jsx)(Component, {
+    ref: ref,
+    css: [resetStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    size && _styleMaps.metricTextSizeStylesMap[size], align && textAlignMap[align]],
+    "data-testid": testId,
+    id: id
+  }, children);
+  return component;
+});
+var _default = exports.default = MetricText;

package/dist/cjs/index.js

@@ -40,6 +40,12 @@ Object.defineProperty(exports, "Inline", {
     return _inline.default;
   }
 });
+Object.defineProperty(exports, "MetricText", {
+  enumerable: true,
+  get: function get() {
+    return _metricText.default;
+  }
+});
 Object.defineProperty(exports, "Pressable", {
   enumerable: true,
   get: function get() {
@@ -108,6 +114,7 @@ var _flex = _interopRequireDefault(require("./components/flex"));
 var _grid = _interopRequireDefault(require("./components/grid"));
 var _bleed = _interopRequireDefault(require("./components/bleed"));
 var _text = _interopRequireDefault(require("./components/text"));
+var _metricText = _interopRequireDefault(require("./components/metric-text"));
 var _pressable = _interopRequireDefault(require("./components/pressable"));
 var _anchor = _interopRequireDefault(require("./components/anchor"));
 var _responsive = require("./responsive");

package/dist/cjs/xcss/style-maps.partial.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textWeightStylesMap = exports.textWeightMap = exports.textSizeStylesMap = exports.textSizeMap = exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.shadowMap = exports.positiveSpaceMap = exports.paddingStylesMap = exports.opacityMap = exports.negativeSpaceMap = exports.layerMap = exports.isSurfaceColorToken = exports.inverseColorMap = exports.getSerializedStylesMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontStylesMap = exports.fontMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.allSpaceMap = void 0;
+exports.textWeightStylesMap = exports.textWeightMap = exports.textSizeStylesMap = exports.textSizeMap = exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.shadowMap = exports.positiveSpaceMap = exports.paddingStylesMap = exports.opacityMap = exports.negativeSpaceMap = exports.metricTextSizeStylesMap = exports.metricTextSizeMap = exports.layerMap = exports.isSurfaceColorToken = exports.inverseColorMap = exports.getSerializedStylesMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontStylesMap = exports.fontMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.allSpaceMap = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _tokens = require("@atlaskit/tokens");
@@ -501,7 +501,7 @@ var borderRadiusMap = exports.borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b2a06338babbfbea48ed2205e34084fc>>
+ * @codegen <<SignedSource::2c0cffbebdab4e28fe2b45925623e523>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -520,7 +520,10 @@ var fontMap = exports.fontMap = {
   'font.heading.xlarge': "var(--ds-font-heading-xlarge, normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   'font.heading.xsmall': "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   'font.heading.xxlarge': "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  'font.heading.xxsmall': "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+  'font.heading.xxsmall': "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  'font.metric.large': "var(--ds-font-metric-large, normal 653 28px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  'font.metric.medium': "var(--ds-font-metric-medium, normal 653 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  'font.metric.small': "var(--ds-font-metric-small, normal 653 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 };
 var fontWeightMap = exports.fontWeightMap = {
   'font.weight.bold': "var(--ds-font-weight-bold, 700)",
@@ -541,7 +544,7 @@ var fontFamilyMap = exports.fontFamilyMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::159df661d29a2805a17ab6f52e842350>>
+ * @codegen <<SignedSource::c207cc4caf0794de5f13707a9c28451f>>
  * @codegenId text
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
@@ -559,6 +562,11 @@ var textWeightMap = exports.textWeightMap = {
   regular: "var(--ds-font-weight-regular, 400)",
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
+var metricTextSizeMap = exports.metricTextSizeMap = {
+  large: "var(--ds-font-metric-large, normal 653 28px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  medium: "var(--ds-font-metric-medium, normal 653 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  small: "var(--ds-font-metric-small, normal 653 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+};
 
 /**
  * @codegenEnd
@@ -597,4 +605,5 @@ var textWeightStylesMap = exports.textWeightStylesMap = getSerializedStylesMap('
 var surfaceColorStylesMap = exports.surfaceColorStylesMap = getSerializedStylesMap(_tokens.CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
 var isSurfaceColorToken = exports.isSurfaceColorToken = function isSurfaceColorToken(color) {
   return surfaceColorMap[color] !== undefined;
-};
+};
+var metricTextSizeStylesMap = exports.metricTextSizeStylesMap = getSerializedStylesMap('font', metricTextSizeMap);

package/dist/es2019/compiled/components/metric-text.compiled.css

@@ -0,0 +1,10 @@
+._11c81lu7{font:var(--ds-font-metric-medium,normal 653 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c81r7r{font:var(--ds-font-metric-large,normal 653 28px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8h56o{font:var(--ds-font-metric-small,normal 653 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18u0idpf{margin-left:0}
+._19pkidpf{margin-top:0}
+._2hwxidpf{margin-right:0}
+._otyridpf{margin-bottom:0}
+._y3gn1h6o{text-align:center}
+._y3gnh9n0{text-align:end}
+._y3gnv2br{text-align:start}

package/dist/es2019/compiled/components/metric-text.js

@@ -0,0 +1,46 @@
+/* metric-text.tsx generated by @compiled/babel-plugin v0.36.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';
+const asAllowlist = ['span', 'div'];
+const styles = {
+  root: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf",
+  'textAlign.center': "_y3gn1h6o",
+  'textAlign.end': "_y3gnh9n0",
+  'textAlign.start': "_y3gnv2br"
+};
+const fontSizeMap = {
+  small: "_11c8h56o",
+  medium: "_11c81lu7",
+  large: "_11c81r7r"
+};
+
+/**
+ * __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
+ */
+const MetricText = /*#__PURE__*/forwardRef(({
+  as: Component = 'span',
+  align,
+  testId,
+  id,
+  size,
+  children
+}, ref) => {
+  invariant(asAllowlist.includes(Component), `@atlaskit/primitives: MetricText received an invalid "as" value of "${Component}"`);
+  const component = /*#__PURE__*/React.createElement(Component, {
+    ref: ref,
+    "data-testid": testId,
+    id: id,
+    className: ax([styles.root, size && fontSizeMap[size], align && styles[`textAlign.${align}`]])
+  }, children);
+  return component;
+});
+export default MetricText;

package/dist/es2019/compiled/index.js

@@ -5,6 +5,7 @@ export { default as Flex } from './components/flex';
 export { default as Grid } from './components/grid';
 export { default as Bleed } from './components/bleed';
 export { default as Text } from './components/text';
+export { default as MetricText } from './components/metric-text';
 export { default as Pressable } from './components/pressable';
 export { default as Anchor } from './components/anchor';
 export { media, UNSAFE_useMediaQuery, Show, Hide } from './responsive';

package/dist/es2019/components/metric-text.js

@@ -0,0 +1,58 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import invariant from 'tiny-invariant';
+import { metricTextSizeStylesMap } from '../xcss/style-maps.partial';
+const asAllowlist = ['span', 'div'];
+// We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
+// Long term we should remove those instances from the reset - it should be a reset to 0.
+// For now, at least we know <MetricText> will be unaffected by this.
+const resetStyles = css({
+  margin: 0
+});
+const textAlignMap = {
+  center: css({
+    textAlign: 'center'
+  }),
+  end: css({
+    textAlign: 'end'
+  }),
+  start: css({
+    textAlign: 'start'
+  })
+};
+
+/**
+ * __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
+ */
+const MetricText = /*#__PURE__*/forwardRef(({
+  as: Component = 'span',
+  align,
+  testId,
+  id,
+  size,
+  children
+}, ref) => {
+  invariant(asAllowlist.includes(Component), `@atlaskit/primitives: MetricText received an invalid "as" value of "${Component}"`);
+  const component = jsx(Component, {
+    ref: ref,
+    css: [resetStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    size && metricTextSizeStylesMap[size], align && textAlignMap[align]],
+    "data-testid": testId,
+    id: id
+  }, children);
+  return component;
+});
+export default MetricText;

package/dist/es2019/index.js

@@ -6,6 +6,7 @@ export { default as Flex } from './components/flex';
 export { default as Grid } from './components/grid';
 export { default as Bleed } from './components/bleed';
 export { default as Text } from './components/text';
+export { default as MetricText } from './components/metric-text';
 export { default as Pressable } from './components/pressable';
 export { default as Anchor } from './components/anchor';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';