@atlaskit/primitives 14.8.4 → 14.9.0

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

@@ -496,7 +496,7 @@ export const 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"]
@@ -515,7 +515,10 @@ export const 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)"
 };
 export const fontWeightMap = {
   'font.weight.bold': "var(--ds-font-weight-bold, 700)",
@@ -536,7 +539,7 @@ export const 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>>
@@ -554,6 +557,11 @@ export const textWeightMap = {
   regular: "var(--ds-font-weight-regular, 400)",
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
+export const 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
@@ -593,4 +601,5 @@ export const fontStylesMap = getSerializedStylesMap('font', fontMap);
 export const textSizeStylesMap = getSerializedStylesMap('font', textSizeMap);
 export const textWeightStylesMap = getSerializedStylesMap('fontWeight', textWeightMap);
 export const surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
-export const isSurfaceColorToken = color => surfaceColorMap[color] !== undefined;
+export const isSurfaceColorToken = color => surfaceColorMap[color] !== undefined;
+export const metricTextSizeStylesMap = getSerializedStylesMap('font', metricTextSizeMap);

package/dist/esm/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/esm/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';
+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__*/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;

package/dist/esm/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/esm/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';
+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'
+  })
+};
+
+/**
+ * __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 = 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/esm/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';

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

@@ -496,7 +496,7 @@ export var 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"]
@@ -515,7 +515,10 @@ export var 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)"
 };
 export var fontWeightMap = {
   'font.weight.bold': "var(--ds-font-weight-bold, 700)",
@@ -536,7 +539,7 @@ export var 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>>
@@ -554,6 +557,11 @@ export var textWeightMap = {
   regular: "var(--ds-font-weight-regular, 400)",
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
+export var 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
@@ -592,4 +600,5 @@ export var textWeightStylesMap = getSerializedStylesMap('fontWeight', textWeight
 export var surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
 export var isSurfaceColorToken = function isSurfaceColorToken(color) {
   return surfaceColorMap[color] !== undefined;
-};
+};
+export var metricTextSizeStylesMap = getSerializedStylesMap('font', metricTextSizeMap);

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

@@ -0,0 +1,46 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
+import type { BasePrimitiveProps, MetricTextFontSize, TextAlign } 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: MetricTextFontSize;
+    /**
+     * Forwarded ref.
+     */
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+export type MetricTextProps<T extends ElementType = 'span'> = MetricTextPropsBase<T> & Omit<BasePrimitiveProps, 'xcss'>;
+/**
+ * __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
+ */
+declare const MetricText: import("react").ForwardRefExoticComponent<Omit<MetricTextProps<ElementType>, "ref"> & import("react").RefAttributes<any>>;
+export default MetricText;

package/dist/types/compiled/components/stack.d.ts

@@ -9,7 +9,7 @@ export type StackProps<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Stack. Defaults to `div`.
      */
-    as?: 'div' | 'span' | 'ul' | 'ol';
+    as?: 'div' | 'span' | 'ul' | 'ol' | 'dl';
     /**
      * Used to align children along the block axis (typically vertical).
      */

package/dist/types/compiled/components/types.d.ts

@@ -42,3 +42,4 @@ export type TextAlign = 'center' | 'end' | 'start';
 export type TextColor = 'color.text' | 'color.text.accent.lime' | 'color.text.accent.lime.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.link.visited' | 'color.link.visited.pressed';
 export type FontSize = 'small' | 'medium' | 'UNSAFE_small' | 'large';
 export type FontWeight = 'bold' | 'medium' | 'regular' | 'semibold';
+export type MetricTextFontSize = 'small' | 'medium' | 'large';

package/dist/types/compiled/index.d.ts

@@ -5,6 +5,7 @@ export { default as Flex, type FlexProps } from './components/flex';
 export { default as Grid, type GridProps } from './components/grid';
 export { default as Bleed, type BleedProps } from './components/bleed';
 export { default as Text, type TextProps } from './components/text';
+export { default as MetricText, type MetricTextProps } from './components/metric-text';
 export { default as Pressable, type PressableProps } from './components/pressable';
 export { default as Anchor, type AnchorProps } from './components/anchor';
 export { media, type Breakpoint, type MediaQuery, UNSAFE_useMediaQuery, Show, Hide, } from './responsive';

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

@@ -0,0 +1,53 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+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__
+ *
+ * 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
+ */
+declare const MetricText: import("react").ForwardRefExoticComponent<Omit<MetricTextProps<ElementType>, "ref"> & import("react").RefAttributes<any>>;
+export default MetricText;

package/dist/types/index.d.ts

@@ -15,6 +15,8 @@ export { default as Bleed } from './components/bleed';
 export type { BleedProps } from './components/bleed';
 export { default as Text } from './components/text';
 export type { TextProps } from './components/text';
+export { default as MetricText } from './components/metric-text';
+export type { MetricTextProps } from './components/metric-text';
 export { default as Pressable } from './components/pressable';
 export type { PressableProps } from './components/pressable';
 export { default as Anchor } from './components/anchor';

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

@@ -521,7 +521,7 @@ export type BorderRadius = keyof typeof 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"]
@@ -541,6 +541,9 @@ export declare const fontMap: {
     'font.heading.xsmall': "var(--ds-font-heading-xsmall)";
     'font.heading.xxlarge': "var(--ds-font-heading-xxlarge)";
     'font.heading.xxsmall': "var(--ds-font-heading-xxsmall)";
+    'font.metric.large': "var(--ds-font-metric-large)";
+    'font.metric.medium': "var(--ds-font-metric-medium)";
+    'font.metric.small': "var(--ds-font-metric-small)";
 };
 export type Font = keyof typeof fontMap;
 export declare const fontWeightMap: {
@@ -563,7 +566,7 @@ export type FontFamily = keyof typeof 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>>
@@ -583,6 +586,12 @@ export declare const textWeightMap: {
     semibold: "var(--ds-font-weight-semibold)";
 };
 export type TextWeight = keyof typeof textWeightMap;
+export declare const metricTextSizeMap: {
+    large: "var(--ds-font-metric-large)";
+    medium: "var(--ds-font-metric-medium)";
+    small: "var(--ds-font-metric-small)";
+};
+export type MetricTextSize = keyof typeof metricTextSizeMap;
 /**
  * @codegenEnd
  */
@@ -699,6 +708,7 @@ type FontFamilyToken = keyof typeof fontFamilyMap;
 type FontToken = keyof typeof fontMap;
 type TextWeightToken = keyof typeof textWeightMap;
 type TextSizeToken = keyof typeof textSizeMap;
+type MetricTextSizeToken = keyof typeof metricTextSizeMap;
 type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
 type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
 type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;
@@ -708,6 +718,7 @@ type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
 type FontStyleMap = Record<FontToken, SerializedStyles>;
 type TextWeightStyleMap = Record<TextWeightToken, SerializedStyles>;
 type TextStyleMap = Record<TextSizeToken, SerializedStyles>;
+type MetricTextStyleMap = Record<MetricTextSizeToken, SerializedStyles>;
 export declare const paddingStylesMap: SpacingStyleMap;
 export declare const spaceStylesMap: SpacingStyleMap;
 export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
@@ -719,4 +730,5 @@ export declare const textSizeStylesMap: TextStyleMap;
 export declare const textWeightStylesMap: TextWeightStyleMap;
 export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
 export declare const isSurfaceColorToken: (color: unknown) => color is "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken";
+export declare const metricTextSizeStylesMap: MetricTextStyleMap;
 export {};

package/dist/types/xcss/xcss.d.ts

@@ -735,6 +735,9 @@ export declare const tokensMap: {
         'font.heading.xsmall': "var(--ds-font-heading-xsmall)";
         'font.heading.xxlarge': "var(--ds-font-heading-xxlarge)";
         'font.heading.xxsmall': "var(--ds-font-heading-xxsmall)";
+        'font.metric.large': "var(--ds-font-metric-large)";
+        'font.metric.medium': "var(--ds-font-metric-medium)";
+        'font.metric.small': "var(--ds-font-metric-small)";
     };
     readonly fontFamily: {
         'font.family.body': "var(--ds-font-family-body)";
@@ -1682,7 +1685,7 @@ type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen
 type CSSMediaQueries = {
     [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
 };
-type ChainedCSSPseudos = ':visited:active' | ':visited:hover' | ':active:visited' | ':hover::before' | ':hover::after' | ':focus-visible::before' | ':focus-visible::after' | ':focus:not(:focus-visible)';
+type ChainedCSSPseudos = ':visited:active' | ':visited:hover' | ':active:visited' | ':hover::before' | ':focus::before' | ':hover::after' | ':focus-visible::before' | ':focus-visible::after' | ':focus:not(:focus-visible)';
 type CSSPseudos = {
     [Pseudo in CSS.Pseudos | ChainedCSSPseudos]?: Omit<SafeCSSObject, CSS.Pseudos | AllMedia>;
 };

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

@@ -0,0 +1,49 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
+import type { BasePrimitiveProps, MetricTextFontSize, TextAlign } 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: MetricTextFontSize;
+    /**
+     * Forwarded ref.
+     */
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+export type MetricTextProps<T extends ElementType = 'span'> = MetricTextPropsBase<T> & Omit<BasePrimitiveProps, 'xcss'>;
+/**
+ * __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
+ */
+declare const MetricText: import("react").ForwardRefExoticComponent<Omit<MetricTextProps<ElementType>, "ref"> & import("react").RefAttributes<any>>;
+export default MetricText;

package/dist/types-ts4.5/compiled/components/stack.d.ts

@@ -9,7 +9,7 @@ export type StackProps<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Stack. Defaults to `div`.
      */
-    as?: 'div' | 'span' | 'ul' | 'ol';
+    as?: 'div' | 'span' | 'ul' | 'ol' | 'dl';
     /**
      * Used to align children along the block axis (typically vertical).
      */

package/dist/types-ts4.5/compiled/components/types.d.ts

@@ -42,3 +42,4 @@ export type TextAlign = 'center' | 'end' | 'start';
 export type TextColor = 'color.text' | 'color.text.accent.lime' | 'color.text.accent.lime.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.link.visited' | 'color.link.visited.pressed';
 export type FontSize = 'small' | 'medium' | 'UNSAFE_small' | 'large';
 export type FontWeight = 'bold' | 'medium' | 'regular' | 'semibold';
+export type MetricTextFontSize = 'small' | 'medium' | 'large';

package/dist/types-ts4.5/compiled/index.d.ts

@@ -5,6 +5,7 @@ export { default as Flex, type FlexProps } from './components/flex';
 export { default as Grid, type GridProps } from './components/grid';
 export { default as Bleed, type BleedProps } from './components/bleed';
 export { default as Text, type TextProps } from './components/text';
+export { default as MetricText, type MetricTextProps } from './components/metric-text';
 export { default as Pressable, type PressableProps } from './components/pressable';
 export { default as Anchor, type AnchorProps } from './components/anchor';
 export { media, type Breakpoint, type MediaQuery, UNSAFE_useMediaQuery, Show, Hide, } from './responsive';

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

@@ -0,0 +1,56 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+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__
+ *
+ * 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
+ */
+declare const MetricText: import("react").ForwardRefExoticComponent<Omit<MetricTextProps<ElementType>, "ref"> & import("react").RefAttributes<any>>;
+export default MetricText;

package/dist/types-ts4.5/index.d.ts

@@ -15,6 +15,8 @@ export { default as Bleed } from './components/bleed';
 export type { BleedProps } from './components/bleed';
 export { default as Text } from './components/text';
 export type { TextProps } from './components/text';
+export { default as MetricText } from './components/metric-text';
+export type { MetricTextProps } from './components/metric-text';
 export { default as Pressable } from './components/pressable';
 export type { PressableProps } from './components/pressable';
 export { default as Anchor } from './components/anchor';