@atlaskit/primitives 6.1.0 → 6.1.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/primitives
 
+## 6.1.2
+
+### Patch Changes
+
+-   [#98149](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98149)
+    [`45101e24202a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/45101e24202a) -
+    Internal change only; update generated styles.
+-   Updated dependencies
+
+## 6.1.1
+
+### Patch Changes
+
+-   [#97580](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97580)
+    [`496e5da89b3b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/496e5da89b3b) -
+    Export unsafe surface APIs for use in heading component.
+
 ## 6.1.0
 
 ### Minor Changes

package/constellation/pressable/code.mdx

@@ -1,6 +1,6 @@
 ---
 title: Pressable
-description: A pressable is a primitive used for building custom buttons.
+description: A pressable is a primitive for building custom buttons.
 order: 1
 ---
 

package/constellation/pressable/examples.mdx

@@ -1,13 +1,18 @@
 ---
 title: Pressable
-description: A pressable is a primitive used for building custom buttons.
+description: A pressable is a primitive for building custom buttons.
 order: 0
 ---
 
 import PressableDefault from '../../examples/constellation/pressable/default';
 import PressableBasic from '../../examples/constellation/pressable/basic';
 import PressableStyled from '../../examples/constellation/pressable/styled';
+import PressableWithoutVisibleLabels from '../../examples/constellation/pressable/without-visible-labels';
 import PressableDisabled from '../../examples/constellation/pressable/disabled';
+import PressableHtmlAttributes from '../../examples/constellation/pressable/html-attributes';
+import PressablePressTracing from '../../examples/constellation/pressable/press-tracing';
+import PressableAnalytics from '../../examples/constellation/pressable/analytics';
+import PressableAnalyticsGASv3 from '../../examples/constellation/pressable/analytics-gasv3';
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 import SectionMessage from '@atlaskit/section-message';
@@ -18,7 +23,7 @@ import SectionMessage from '@atlaskit/section-message';
   directoryName="primitives"
 />
 
-Pressable is a primitive used for building custom buttons with Atlassian Design System styling and built-in event tracking.
+Pressable is a primitive used for building custom buttons with Atlassian Design System styling and built-in event tracking. It renders a `<button>` element.
 
 Only use Pressable when existing components such as [Button](/components/button/examples) are unsuitable and unable to be customized to fit your needs.
 
@@ -33,9 +38,7 @@ Pressable is unstyled by default.
 
 ## Basic styling with XCSS
 
-Pressable can be styled using XCSS. Ensure styling indicates the interaction state using `:hover` and `:active` pseudo-classes.
-
-By default, pressable includes consistent Atlassian Design System `:focus` styles so it's unnecessary to add your own.
+Pressable can be styled using XCSS. Ensure styling indicates the interaction state using `:hover` and `:active` pseudo-classes. Pressable includes consistent Atlassian Design System `:focus` styles, so it's unnecessary to add your own.
 
 For more information on XCSS, see the dedicated [XCSS documentation](/components/primitives/xcss).
 
@@ -44,6 +47,16 @@ For more information on XCSS, see the dedicated [XCSS documentation](/components
   packageName="@atlaskit/primitives/pressable"
 />
 
+## Advanced styling
+
+Use a combination of XCSS and other primitives for more complex designs.
+
+<Example
+  Component={PressableStyled}
+  packageName="@atlaskit/primitives/pressable"
+  backgroundColor="white"
+/>
+
 ## Disabled
 
 Pressable can be disabled using the `isDisabled` prop. Disabled styles should be conditionally applied and defined using XCSS.
@@ -53,12 +66,60 @@ Pressable can be disabled using the `isDisabled` prop. Disabled styles should be
   packageName="@atlaskit/primitives/pressable"
 />
 
-## Advanced styling
+## Buttons without visible labels
 
-Advanced styling can be achieved using a combination of XCSS and other primitives.
+For buttons without visible labels such as icon buttons, ensure an accessible label is still available by using [the visually hidden component](/components/visually-hidden/examples). This will render hidden text inside the button, which is preferable over the `aria-label` attribute because not all screen readers translate this between languages.
+
+Provide a tooltip to help sighted users understand the button's purpose rather than relying on iconography alone.
 
 <Example
-  Component={PressableStyled}
+  Component={PressableWithoutVisibleLabels}
   packageName="@atlaskit/primitives/pressable"
   backgroundColor="white"
 />
+
+## HTML attributes
+
+Pressable passes through all valid HTML attributes to the underlying `<button>` element. It will default the `type` attribute to `button` to prevent buttons unintentionally submitting forms.
+
+<Example
+  Component={PressableHtmlAttributes}
+  packageName="@atlaskit/primitives/pressable"
+/>
+
+## Event tracking
+
+Pressable has utilities to make tracking events easier. Events will not be captured unless listeners are setup to handle them.
+
+### React UFO press interactions
+
+By default, pressable fires [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions) for available listeners. This helps Atlassian measure performance and reliability. Additional detail can be provided using the `interactionName` prop.
+
+<Example
+  Component={PressablePressTracing}
+  packageName="@atlaskit/primitives/pressable"
+/>
+
+### Atlaskit analytics
+
+Pressable comes with built-in Atlaskit analytics support using the [Analytics next package](https://atlaskit.atlassian.com/packages/analytics/analytics-next), and fires events for available listeners. Currently this is only available for `onClick`.
+
+It always fires events on the `atlaskit` channel. To also fire events on other channels, use the provided `analyticsEvent` in `onClick`. To configure event data, use `componentName` (defaults to 'Pressable') and `analyticsContext` for passing other metadata.
+
+See the event data in the console.
+
+<Example
+  Component={PressableAnalytics}
+  packageName="@atlaskit/primitives/pressable"
+/>
+
+### GASv3 analytics
+
+The Atlassian analytics bridge makes Atlaskit analytics events compatible with GASv3 (Global Analytics Service). This can also inject an `actionSubjectId` to the event if required.
+
+See the event data in the console.
+
+<Example
+  Component={PressableAnalyticsGASv3}
+  packageName="@atlaskit/primitives/pressable"
+/>

package/constellation/pressable/usage.mdx

@@ -1,6 +1,6 @@
 ---
 title: Pressable
-description: A pressable is a primitive used for building custom buttons.
+description: A pressable is a primitive for building custom buttons.
 order: 2
 ---
 

package/dist/cjs/components/anchor.js

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

package/dist/cjs/components/pressable.js

@@ -41,9 +41,7 @@ var focusRingStyles = (0, _xcss.xcss)({
 /**
  * __Pressable__
  *
- * @internal Still under development. Do not use.
- *
- * A Pressable is a primitive component that renders a `<button>`.
+ * A primitive for building custom buttons.
  *
  * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
@@ -80,7 +78,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "6.1.0",
+    packageVersion: "6.1.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/components/text.js

@@ -99,7 +99,13 @@ var Text = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var color = useColor(colorProp, hasTextAncestor);
   var component = (0, _react2.jsx)(Component, {
     ref: ref,
-    css: [resetStyles, _styleMaps.fontStylesMap[size], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align], weight && _styleMaps.fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
+    css: [resetStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _styleMaps.fontStylesMap[size],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    weight && _styleMaps.fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

package/dist/cjs/index.js

@@ -64,12 +64,24 @@ Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_CONFIG", {
     return _responsive.UNSAFE_BREAKPOINTS_CONFIG;
   }
 });
+Object.defineProperty(exports, "UNSAFE_inverseColorMap", {
+  enumerable: true,
+  get: function get() {
+    return _styleMaps.inverseColorMap;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_media", {
   enumerable: true,
   get: function get() {
     return _responsive.UNSAFE_media;
   }
 });
+Object.defineProperty(exports, "UNSAFE_useSurface", {
+  enumerable: true,
+  get: function get() {
+    return _surfaceProvider.useSurface;
+  }
+});
 Object.defineProperty(exports, "media", {
   enumerable: true,
   get: function get() {
@@ -98,4 +110,6 @@ var _bleed = _interopRequireDefault(require("./components/bleed"));
 var _text = _interopRequireDefault(require("./components/text"));
 var _pressable = _interopRequireDefault(require("./components/pressable"));
 var _anchor = _interopRequireDefault(require("./components/anchor"));
-var _responsive = require("./responsive");
+var _responsive = require("./responsive");
+var _surfaceProvider = require("./components/internal/surface-provider");
+var _styleMaps = require("./xcss/style-maps.partial");

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

@@ -497,7 +497,7 @@ var borderRadiusMap = exports.borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2513c025b6da9274090c77a176d31cc1>>
+ * @codegen <<SignedSource::01b50b6fc795db50002edbeb24634575>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -517,8 +517,11 @@ var fontWeightMap = exports.fontWeightMap = {
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
 var fontFamilyMap = exports.fontFamilyMap = {
+  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'font.family.brand.body': "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 
 /**

package/dist/es2019/components/anchor.js

@@ -62,7 +62,7 @@ const Anchor = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "6.1.0",
+    packageVersion: "6.1.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/pressable.js

@@ -28,9 +28,7 @@ const focusRingStyles = xcss({
 /**
  * __Pressable__
  *
- * @internal Still under development. Do not use.
- *
- * A Pressable is a primitive component that renders a `<button>`.
+ * A primitive for building custom buttons.
  *
  * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
@@ -66,7 +64,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "6.1.0",
+    packageVersion: "6.1.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/text.js

@@ -88,7 +88,13 @@ const Text = /*#__PURE__*/forwardRef(({
   const color = useColor(colorProp, hasTextAncestor);
   const component = jsx(Component, {
     ref: ref,
-    css: [resetStyles, fontStylesMap[size], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
+    css: [resetStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    fontStylesMap[size],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

package/dist/es2019/index.js

@@ -8,4 +8,6 @@ export { default as Bleed } from './components/bleed';
 export { default as Text } from './components/text';
 export { default as Pressable } from './components/pressable';
 export { default as UNSAFE_ANCHOR } from './components/anchor';
-export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
+export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
+export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';
+export { inverseColorMap as UNSAFE_inverseColorMap } from './xcss/style-maps.partial';

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

@@ -491,7 +491,7 @@ export const borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2513c025b6da9274090c77a176d31cc1>>
+ * @codegen <<SignedSource::01b50b6fc795db50002edbeb24634575>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -511,8 +511,11 @@ export const fontWeightMap = {
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
 export const fontFamilyMap = {
+  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'font.family.brand.body': "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 
 /**

package/dist/esm/components/anchor.js

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

package/dist/esm/components/pressable.js

@@ -31,9 +31,7 @@ var focusRingStyles = xcss({
 /**
  * __Pressable__
  *
- * @internal Still under development. Do not use.
- *
- * A Pressable is a primitive component that renders a `<button>`.
+ * A primitive for building custom buttons.
  *
  * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
@@ -70,7 +68,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "6.1.0",
+    packageVersion: "6.1.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/text.js

@@ -91,7 +91,13 @@ var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var color = useColor(colorProp, hasTextAncestor);
   var component = jsx(Component, {
     ref: ref,
-    css: [resetStyles, fontStylesMap[size], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
+    css: [resetStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    fontStylesMap[size],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

package/dist/esm/index.js

@@ -8,4 +8,6 @@ export { default as Bleed } from './components/bleed';
 export { default as Text } from './components/text';
 export { default as Pressable } from './components/pressable';
 export { default as UNSAFE_ANCHOR } from './components/anchor';
-export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
+export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
+export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';
+export { inverseColorMap as UNSAFE_inverseColorMap } from './xcss/style-maps.partial';

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

@@ -491,7 +491,7 @@ export var borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2513c025b6da9274090c77a176d31cc1>>
+ * @codegen <<SignedSource::01b50b6fc795db50002edbeb24634575>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -511,8 +511,11 @@ export var fontWeightMap = {
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
 export var fontFamilyMap = {
+  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'font.family.brand.body': "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 
 /**

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

@@ -9,30 +9,26 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
     children: ReactNode;
     isDisabled?: boolean;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
+     * Handler to be called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
      */
     onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string;
     /**
-     * An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     * An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Pressable'.
      */
     componentName?: string;
     /**
-     * Additional information to be included in the `context` of analytics events that come from pressable.
+     * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
      */
     analyticsContext?: Record<string, any>;
 };
 /**
  * __Pressable__
  *
- * @internal Still under development. Do not use.
- *
- * A Pressable is a primitive component that renders a `<button>`.
+ * A primitive for building custom buttons.
  *
  * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
@@ -46,21 +42,19 @@ declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"but
     children: ReactNode;
     isDisabled?: boolean | undefined;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
+     * Handler to be called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
      */
     onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
     /**
-     * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string | undefined;
     /**
-     * An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     * An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Pressable'.
      */
     componentName?: string | undefined;
     /**
-     * Additional information to be included in the `context` of analytics events that come from pressable.
+     * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
      */
     analyticsContext?: Record<string, any> | undefined;
 }, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof import("./types").BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
-import { FontSize, FontWeight, TextColor } from '../xcss/style-maps.partial';
+import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
+import { type FontSize, type FontWeight, type TextColor } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly ["span", "p", "strong", "em"];
 type AsElement = (typeof asAllowlist)[number];
@@ -16,7 +16,7 @@ type TextPropsBase<T extends ElementType = 'span'> = {
     /**
      * Token representing text color with a built-in fallback value.
      * Will apply inverse text color automatically if placed within a Box with bold background color.
-     * Defaults to `text.color` if not nested in other Text components.
+     * Defaults to `color.text` if not nested in other Text components.
      */
     color?: TextColor | 'inherit';
     /**

package/dist/types/index.d.ts

@@ -21,3 +21,5 @@ export { default as UNSAFE_ANCHOR } from './components/anchor';
 export type { AnchorProps as UNSAFE_AnchorProps } from './components/anchor';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
 export type { Breakpoint, MediaQuery } from './responsive';
+export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';
+export { inverseColorMap as UNSAFE_inverseColorMap } from './xcss/style-maps.partial';

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

@@ -516,7 +516,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2513c025b6da9274090c77a176d31cc1>>
+ * @codegen <<SignedSource::01b50b6fc795db50002edbeb24634575>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -538,8 +538,11 @@ export declare const fontWeightMap: {
 };
 export type FontWeight = keyof typeof fontWeightMap;
 export declare const fontFamilyMap: {
+    'font.family.body': "var(--ds-font-family-body)";
     'font.family.brand.body': "var(--ds-font-family-brand-body)";
     'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
+    'font.family.code': "var(--ds-font-family-code)";
+    'font.family.heading': "var(--ds-font-family-heading)";
 };
 export type FontFamily = keyof typeof fontFamilyMap;
 /**

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

@@ -9,30 +9,26 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
     children: ReactNode;
     isDisabled?: boolean;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
+     * Handler to be called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
      */
     onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string;
     /**
-     * An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     * An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Pressable'.
      */
     componentName?: string;
     /**
-     * Additional information to be included in the `context` of analytics events that come from pressable.
+     * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
      */
     analyticsContext?: Record<string, any>;
 };
 /**
  * __Pressable__
  *
- * @internal Still under development. Do not use.
- *
- * A Pressable is a primitive component that renders a `<button>`.
+ * A primitive for building custom buttons.
  *
  * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
@@ -46,21 +42,19 @@ declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"but
     children: ReactNode;
     isDisabled?: boolean | undefined;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
+     * Handler to be called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
      */
     onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
     /**
-     * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string | undefined;
     /**
-     * An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     * An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Pressable'.
      */
     componentName?: string | undefined;
     /**
-     * Additional information to be included in the `context` of analytics events that come from pressable.
+     * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
      */
     analyticsContext?: Record<string, any> | undefined;
 }, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof import("./types").BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
-import { FontSize, FontWeight, TextColor } from '../xcss/style-maps.partial';
+import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
+import { type FontSize, type FontWeight, type TextColor } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly [
     "span",
@@ -21,7 +21,7 @@ type TextPropsBase<T extends ElementType = 'span'> = {
     /**
      * Token representing text color with a built-in fallback value.
      * Will apply inverse text color automatically if placed within a Box with bold background color.
-     * Defaults to `text.color` if not nested in other Text components.
+     * Defaults to `color.text` if not nested in other Text components.
      */
     color?: TextColor | 'inherit';
     /**

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

@@ -21,3 +21,5 @@ export { default as UNSAFE_ANCHOR } from './components/anchor';
 export type { AnchorProps as UNSAFE_AnchorProps } from './components/anchor';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
 export type { Breakpoint, MediaQuery } from './responsive';
+export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';
+export { inverseColorMap as UNSAFE_inverseColorMap } from './xcss/style-maps.partial';

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

@@ -516,7 +516,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2513c025b6da9274090c77a176d31cc1>>
+ * @codegen <<SignedSource::01b50b6fc795db50002edbeb24634575>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -538,8 +538,11 @@ export declare const fontWeightMap: {
 };
 export type FontWeight = keyof typeof fontWeightMap;
 export declare const fontFamilyMap: {
+    'font.family.body': "var(--ds-font-family-body)";
     'font.family.brand.body': "var(--ds-font-family-brand-body)";
     'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
+    'font.family.code': "var(--ds-font-family-code)";
+    'font.family.heading': "var(--ds-font-family-heading)";
 };
 export type FontFamily = keyof typeof fontFamilyMap;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "6.1.0",
+  "version": "6.1.2",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -128,7 +128,7 @@
     "@atlaskit/css": "^0.1.0",
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/interaction-context": "^2.1.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/tokens": "^1.47.0",
     "@atlaskit/visually-hidden": "^1.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",