@atlaskit/primitives 15.0.0 → 16.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/primitives
 
+## 16.0.0
+
+### Major Changes
+
+- [`64bcecfcb59ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/64bcecfcb59ac) -
+  MetricText no longer accepts emotion-based xcss props only @atlaskit/css compiled-based props as
+  per the Compiled variant API.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.0.1
+
+### Patch Changes
+
+- [`75ba0401c1743`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/75ba0401c1743) -
+  Internal changes.
+- Updated dependencies
+
 ## 15.0.0
 
 ### Major Changes
@@ -736,7 +756,6 @@
   Box no longer supports usage as an anchor tag (`<a>`). Use
   [the Anchor primitive](https://atlassian.design/components/primitives/anchor/examples) instead,
   which is more specialized. This has benefits including:
-
   - Built-in event tracking support
   - Default text underlines
   - Automatic router link configuration from `@atlaskit/app-provider`
@@ -744,7 +763,6 @@
   - Warning screen-readers when links open in new windows
 
   **Migrating to Anchor**
-
   - First consider if another ADS link component such as `@atlaskit/link` is better suited rather
     than building a custom anchor.
   - Anchor has focus ring styles built-in, so remove existing styles including
@@ -836,7 +854,6 @@
   [`80c46fcb18957`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80c46fcb18957) -
   Increased type safety for `xcss`. In general, non-token values for the following properties are no
   longer allowed:
-
   - `margin`
   - `marginBlock`
   - `marginBlockEnd`
@@ -865,7 +882,6 @@
   ```
 
   A few additional non-token values are still accepted:
-
   - `margin`: `'0 auto'` | `'auto'` | `'0'`
   - `marginBlock`: `'auto'` | `'0'`
   - `marginBlockEnd`: `'auto'` | `'0'`
@@ -963,7 +979,6 @@
   Box no longer supports usage as a button. Use
   [the Pressable primitive](https://atlassian.design/components/primitives/pressable/examples)
   instead, which is more specialized and has built-in event tracking support.
-
   - Pressable has focus ring styles built-in, so remove existing styles including
     `@atlaskit/focus-ring`
   - Pressable has a default cursor (`cursor: pointer`) built-in, so existing styles can be removed.
@@ -1080,7 +1095,6 @@
 - [#110975](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110975)
   [`c462a22b33940`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c462a22b33940) -
   Removed type hinting for size values in the following properties in XCSS:
-
   - blockSize
   - height
   - inlineSize
@@ -1127,7 +1141,6 @@
 - [#108387](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108387)
   [`0f3b7b4c63c6d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0f3b7b4c63c6d) -
   `xcss`: Restrict valid chained pseudo-selectors a limited subset:
-
   - `:visited:active`
   - `:active:visited`
   - `:hover::before`
@@ -1353,7 +1366,6 @@
   `"small"`, `"medium"` (default), and `"large"`.
 
   Migration guide:
-
   - `variant="body.small"` -> `size="small"`
   - `variant="body"` -> `size="medium"` (Note: Since medium is the default, the size prop can be
     omitted here)
@@ -1797,7 +1809,6 @@
 - [#39412](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39412)
   [`c2e55a9b782`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2e55a9b782) - Adds
   surface detection support to the Box primitive:
-
   - Enable a `Box` background colour to be set to the `utility.elevation.surface.current` token.
   - Internally set the current surface CSS variable value when the background color of a Box is set
     to a surface token (e.g. `elevation.surface.raised`).
@@ -2052,7 +2063,6 @@
   without writing a dozen lines for just one `display: none` css rule.
 
   Additionally:
-
   - Adds some further examples, tests, and VRs.
   - Tweaks some internals around building these reusable media query maps.
 
@@ -2331,12 +2341,10 @@
 - [#32296](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32296)
   [`4d19bdd2218`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4d19bdd2218) -
   **Inline**:
-
   - `space` prop now accepts values in the form `space.XXX`. For example: `space="space.100"`.
   - `rowSpace` prop now accepts values in the form `space.XXX`. For example: `rowSpace="space.100"`.
 
   **Stack**:
-
   - `space` prop now accepts values in the form `space.XXX`. For example: `space="space.100"`.
 
 ## 0.7.1
@@ -2353,7 +2361,6 @@
 
 - [#31841](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31841)
   [`7e17a8b8934`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e17a8b8934) - Box:
-
   - Add xcss prop to enable token powered styling.
 
 ## 0.6.0

package/constellation/xcss/usage.mdx

@@ -15,7 +15,7 @@ import SectionMessage from '@atlaskit/section-message';
 </SectionMessage>
 
 XCSS is an Atlassian Design System styling API that natively integrates with Atlassian's
-[design tokens](/tokens) and [primitives](/components/primitives/overview).
+[design tokens](/foundations/tokens) and [primitives](/components/primitives/overview).
 
 To ensure future compliance with XCSS as it evolves over time, we highly recommend you enable our
 ESLint plugins and adhere to the

package/dist/cjs/compiled/components/anchor.js

@@ -70,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/compiled/components/pressable.js

@@ -61,7 +61,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/components/anchor.js

@@ -105,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

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

@@ -5,62 +5,20 @@ 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");
+var _metricText = _interopRequireDefault(require("../compiled/components/metric-text"));
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * IMPORTANT: This is a temporary mapping to avoid breaking changes.
+ * We will remove this once we have migrated all the components to @atlaskit/primitives/compiled.
  */
-
-// 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'
-  })
-};
-
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
- * __MetricText__
+ * __Metric text comp__
  *
- * 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.
+ * A metric text comp {description}.
  *
- * @internal
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-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;
+var _default = exports.default = _metricText.default;

package/dist/cjs/components/pressable.js

@@ -97,7 +97,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

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

@@ -474,11 +474,11 @@ var layerMap = exports.layerMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::dc59452c62abcdabe4029b664d7037e1>>
+ * @codegen <<SignedSource::a9118f8ed93d943746fd7e932ce5a639>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::c4d3b4472a9cb61697f29cba3433c11f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::45e4ecb92a72445f508219ea6a5f056a>>
  */
 var borderWidthMap = exports.borderWidthMap = {
   'border.width': "var(--ds-border-width, 1px)",

package/dist/es2019/compiled/components/anchor.js

@@ -56,7 +56,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/compiled/components/pressable.js

@@ -48,7 +48,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/anchor.js

@@ -94,7 +94,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

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

@@ -1,58 +1,18 @@
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * IMPORTANT: This is a temporary mapping to avoid breaking changes.
+ * We will remove this once we have migrated all the components to @atlaskit/primitives/compiled.
  */
-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'
-  })
-};
 
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
- * __MetricText__
+ * __Metric text comp__
  *
- * 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.
+ * A metric text comp {description}.
  *
- * @internal
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-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;
-});
+import MetricText from '../compiled/components/metric-text';
 export default MetricText;

package/dist/es2019/components/pressable.js

@@ -86,7 +86,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

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

@@ -469,11 +469,11 @@ export const layerMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::dc59452c62abcdabe4029b664d7037e1>>
+ * @codegen <<SignedSource::a9118f8ed93d943746fd7e932ce5a639>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::c4d3b4472a9cb61697f29cba3433c11f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::45e4ecb92a72445f508219ea6a5f056a>>
  */
 export const borderWidthMap = {
   'border.width': "var(--ds-border-width, 1px)",

package/dist/esm/compiled/components/anchor.js

@@ -61,7 +61,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/compiled/components/pressable.js

@@ -52,7 +52,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/anchor.js

@@ -99,7 +99,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

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

@@ -1,58 +1,18 @@
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * IMPORTANT: This is a temporary mapping to avoid breaking changes.
+ * We will remove this once we have migrated all the components to @atlaskit/primitives/compiled.
  */
-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';
-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 = css({
-  margin: 0
-});
-var textAlignMap = {
-  center: css({
-    textAlign: 'center'
-  }),
-  end: css({
-    textAlign: 'end'
-  }),
-  start: css({
-    textAlign: 'start'
-  })
-};
 
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
- * __MetricText__
+ * __Metric text comp__
  *
- * 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.
+ * A metric text comp {description}.
  *
- * @internal
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-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 = 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;
-});
+import MetricText from '../compiled/components/metric-text';
 export default MetricText;

package/dist/esm/components/pressable.js

@@ -91,7 +91,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "15.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

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

@@ -469,11 +469,11 @@ export var layerMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::dc59452c62abcdabe4029b664d7037e1>>
+ * @codegen <<SignedSource::a9118f8ed93d943746fd7e932ce5a639>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::c4d3b4472a9cb61697f29cba3433c11f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::45e4ecb92a72445f508219ea6a5f056a>>
  */
 export var borderWidthMap = {
   'border.width': "var(--ds-border-width, 1px)",

package/dist/types/components/metric-text.d.ts

@@ -1,53 +1,16 @@
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * IMPORTANT: This is a temporary mapping to avoid breaking changes.
+ * We will remove this once we have migrated all the components to @atlaskit/primitives/compiled.
  */
-import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
-import { type MetricTextSize } from '../xcss/style-maps.partial';
-import type { BasePrimitiveProps } from './types';
-declare const asAllowlist: readonly ["span", "div"];
-type AsElement = (typeof asAllowlist)[number];
-type MetricTextPropsBase<T extends ElementType = 'span'> = {
-    /**
-     * HTML tag to be rendered. Defaults to `span`.
-     */
-    as?: AsElement;
-    /**
-     * Elements rendered within the Text element.
-     */
-    children: ReactNode;
-    /**
-     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
-     */
-    id?: string;
-    /**
-     * Text alignment.
-     */
-    align?: TextAlign;
-    /**
-     * Text size.
-     */
-    size: MetricTextSize;
-    /**
-     * Forwarded ref.
-     */
-    ref?: ComponentPropsWithRef<T>['ref'];
-};
-export type MetricTextProps<T extends ElementType = 'span'> = MetricTextPropsBase<T> & Omit<BasePrimitiveProps, 'xcss'>;
-type TextAlign = keyof typeof textAlignMap;
-declare const textAlignMap: {
-    center: import("@emotion/react").SerializedStyles;
-    end: import("@emotion/react").SerializedStyles;
-    start: import("@emotion/react").SerializedStyles;
-};
 /**
- * __MetricText__
+ * __Metric text comp__
  *
- * 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.
+ * A metric text comp {description}.
  *
- * @internal
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-declare const MetricText: React.ForwardRefExoticComponent<React.PropsWithoutRef<MetricTextProps<ElementType>> & React.RefAttributes<any>>;
+import MetricText, { type MetricTextProps } from '../compiled/components/metric-text';
+export type { MetricTextProps };
 export default MetricText;

package/dist/types/xcss/style-maps.partial.d.ts

@@ -493,11 +493,11 @@ export type Layer = keyof typeof layerMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::dc59452c62abcdabe4029b664d7037e1>>
+ * @codegen <<SignedSource::a9118f8ed93d943746fd7e932ce5a639>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::c4d3b4472a9cb61697f29cba3433c11f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::45e4ecb92a72445f508219ea6a5f056a>>
  */
 export declare const borderWidthMap: {
     'border.width': 'var(--ds-border-width)';

package/dist/types-ts4.5/components/metric-text.d.ts

@@ -1,56 +1,16 @@
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * IMPORTANT: This is a temporary mapping to avoid breaking changes.
+ * We will remove this once we have migrated all the components to @atlaskit/primitives/compiled.
  */
-import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
-import { type MetricTextSize } from '../xcss/style-maps.partial';
-import type { BasePrimitiveProps } from './types';
-declare const asAllowlist: readonly [
-    "span",
-    "div"
-];
-type AsElement = (typeof asAllowlist)[number];
-type MetricTextPropsBase<T extends ElementType = 'span'> = {
-    /**
-     * HTML tag to be rendered. Defaults to `span`.
-     */
-    as?: AsElement;
-    /**
-     * Elements rendered within the Text element.
-     */
-    children: ReactNode;
-    /**
-     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
-     */
-    id?: string;
-    /**
-     * Text alignment.
-     */
-    align?: TextAlign;
-    /**
-     * Text size.
-     */
-    size: MetricTextSize;
-    /**
-     * Forwarded ref.
-     */
-    ref?: ComponentPropsWithRef<T>['ref'];
-};
-export type MetricTextProps<T extends ElementType = 'span'> = MetricTextPropsBase<T> & Omit<BasePrimitiveProps, 'xcss'>;
-type TextAlign = keyof typeof textAlignMap;
-declare const textAlignMap: {
-    center: import("@emotion/react").SerializedStyles;
-    end: import("@emotion/react").SerializedStyles;
-    start: import("@emotion/react").SerializedStyles;
-};
 /**
- * __MetricText__
+ * __Metric text comp__
  *
- * 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.
+ * A metric text comp {description}.
  *
- * @internal
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-declare const MetricText: React.ForwardRefExoticComponent<React.PropsWithoutRef<MetricTextProps<ElementType>> & React.RefAttributes<any>>;
+import MetricText, { type MetricTextProps } from '../compiled/components/metric-text';
+export type { MetricTextProps };
 export default MetricText;

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -493,11 +493,11 @@ export type Layer = keyof typeof layerMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::dc59452c62abcdabe4029b664d7037e1>>
+ * @codegen <<SignedSource::a9118f8ed93d943746fd7e932ce5a639>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::c4d3b4472a9cb61697f29cba3433c11f>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::45e4ecb92a72445f508219ea6a5f056a>>
  */
 export declare const borderWidthMap: {
     'border.width': 'var(--ds-border-width)';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "15.0.0",
+	"version": "16.0.0",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -138,10 +138,10 @@
 		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/interaction-context": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tokens": "^6.5.0",
+		"@atlaskit/tokens": "^7.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.3",
+		"@compiled/react": "^0.18.6",
 		"@emotion/react": "^11.7.1",
 		"@emotion/serialize": "^1.1.0",
 		"bind-event-listener": "^3.0.0",
@@ -159,9 +159,9 @@
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/code": "^17.2.0",
-		"@atlaskit/docs": "^11.1.0",
+		"@atlaskit/docs": "^11.2.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/flag": "^17.4.0",
+		"@atlaskit/flag": "^17.5.0",
 		"@atlaskit/form": "^14.2.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",