@atlaskit/primitives 6.1.1 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/primitives
 
+## 6.2.0
+
+### Minor Changes
+
+-   [#100442](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100442)
+    [`6b3630addb05`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b3630addb05) -
+    Add `xcss` to responsive components `Show` and `Hide`.
+
+## 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

package/constellation/anchor/examples.mdx

@@ -5,7 +5,13 @@ order: 0
 ---
 
 import AnchorDefault from '../../examples/constellation/anchor/default';
+import AnchorBasic from '../../examples/constellation/anchor/basic';
 import AnchorStyled from '../../examples/constellation/anchor/styled';
+import AnchorHtmlAttributes from '../../examples/constellation/anchor/html-attributes';
+import AnchorRouterLinkConfiguration from '../../examples/constellation/anchor/router-link-configuration';
+import AnchorPressTracing from '../../examples/constellation/anchor/press-tracing';
+import AnchorAnalytics from '../../examples/constellation/anchor/analytics';
+import AnchorAnalyticsGASv3 from '../../examples/constellation/anchor/analytics-gasv3';
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 import SectionMessage from '@atlaskit/section-message';
@@ -16,18 +22,94 @@ import SectionMessage from '@atlaskit/section-message';
   directoryName="primitives"
 />
 
-Anchor is a primitive used for building custom anchor links, with support for client-side routing and Atlassian Design System styling. This component is used by other design system components, such as the [Link component](/components/link/examples).
+Anchor is a primitive used for building custom links with Atlassian Design System styling, routing support, and built-in event tracking. Ultimately it renders an anchor `<a>` element.
 
-For most links, use the [Link component](/components/link/examples) wherever possible, and use [XCSS](/components/primitives/xcss/usage) for any necessary customization. Only use Anchor if you aren't able to use Link.
+Only use anchor when existing components such as [link](/components/link/examples) or [link button](/components/button/link-button/examples) are unsuitable and unable to be customized to fit your needs.
 
 ## Default
 
-Anchor comes unstyled, ready for styles to be applied. Note if you are using the [CSS reset](/components/css-reset/examples), anchor will inherit some default styles.
+Anchor is unstyled besides a default underline. If you are using the [CSS reset](/components/css-reset/examples), it will also inherit some global styles.
 
 <Example Component={AnchorDefault} packageName="@atlaskit/primitives/anchor" />
 
-## Styling
+## Basic styling with XCSS
 
-Anchor consumes the Box primitive to provide a consistent styling API that supports design tokens. See [Box](/components/primitives/box/examples) for complete styling documentation and examples.
+Anchor can be styled using XCSS. It includes consistent Atlassian Design System `:focus` styles, so it's unnecessary to add your own.
+
+For more information on XCSS, see the [XCSS documentation](/components/primitives/xcss).
+
+<Example Component={AnchorBasic} packageName="@atlaskit/primitives/anchor" />
+
+## Advanced styling
+
+Use a combination of XCSS and other primitives for more complex designs.
 
 <Example Component={AnchorStyled} packageName="@atlaskit/primitives/anchor" />
+
+## HTML attributes
+
+Anchor passes through all valid HTML attributes to the underlying `<a>` element.
+
+<Example
+  Component={AnchorHtmlAttributes}
+  packageName="@atlaskit/primitives/anchor"
+/>
+
+## Router links
+
+Routing libraries often supply their own link components enhanced with routing support. This can be configured in the [AppProvider context](/components/app-provider/examples#router-links), and anchor will automatically use it.
+
+This example shows a configuration for [React Resource Router](https://github.com/atlassian-labs/react-resource-router), however any routing library can be used.
+
+Using this method, anchor accepts `href` as a string for standard usage. For advanced usage, an object can be passed.
+
+Anchor will only render a router link if:
+
+- a link component is set in the app provider
+- it's not an external link (starting with `http://` or `https://`)
+- it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.).
+
+<Example
+  Component={AnchorRouterLinkConfiguration}
+  packageName="@atlaskit/primitives/anchor"
+  appearance="source-only"
+/>
+
+## Event tracking
+
+Anchor has utilities to make tracking events easier. Events will not be captured unless listeners are setup to handle them.
+
+### Track events for any analytics provider
+
+Anchor 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 'Anchor') and `analyticsContext` for passing other metadata.
+
+See the event data in the console.
+
+<Example
+  Component={AnchorAnalytics}
+  packageName="@atlaskit/primitives/anchor"
+/>
+
+### Track events for Atlassian internal services
+
+#### 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={AnchorAnalyticsGASv3}
+  packageName="@atlaskit/primitives/anchor"
+/>
+
+#### React UFO press interactions
+
+By default, anchor 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={AnchorPressTracing}
+  packageName="@atlaskit/primitives/anchor"
+/>

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,9 +23,9 @@ 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.
+Only use Pressable when existing components such as [button](/components/button/examples) are unsuitable and unable to be customized to fit your needs.
 
 ## Default
 
@@ -33,17 +38,25 @@ 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.
+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.
 
-By default, 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).
+For more information on XCSS, see the [XCSS documentation](/components/primitives/xcss).
 
 <Example
   Component={PressableBasic}
   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,62 @@ 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.
+
+### Track events for any analytics provider
+
+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"
+/>
+
+### Track events for Atlassian internal services
+
+#### 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"
+/>
+
+#### 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"
+/>

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/constellation/text/examples.mdx

@@ -4,40 +4,72 @@ description: Text is a token-backed typography component to display body text.
 order: 0
 ---
 
-import Basic from '../../examples/constellation/text/basic';
-import ColorInverse from '../../examples/constellation/text/color-inverse';
-import Weight from '../../examples/constellation/text/weight';
-import Align from '../../examples/constellation/text/align';
-import AsElement from '../../examples/constellation/text/as-element';
+import TextBasic from '../../examples/constellation/text/text-basic';
+import TextColorInverse from '../../examples/constellation/text/text-color-inverse';
+import TextColorInherit from '../../examples/constellation/text/text-color-inherit';
+import TextWeight from '../../examples/constellation/text/text-weight';
+import TextAlign from '../../examples/constellation/text/text-align';
+import TextAsElement from '../../examples/constellation/text/text-as-element';
+import TextSpacing from '../../examples/constellation/text/text-spacing';
+import TextTruncation from '../../examples/constellation/text/text-truncation';
 
 ## Basic
 
-Implements the [Atlassian typography system](/foundations/typography/) as a component, scoped to body text usages.
+Use a Text component for main content. Text typically appears after headings or subheadings as detailed descriptions and messages, but also as standalone text in components.
 
-The `size` prop expresses the visual appearance of the text element.
+The `size` prop expresses the visual appearance of the text element:
+- `'large'` is for long-form content. Use this size for a comfortable reading experience such as in blogs.
+- `'medium'` is the default size in components or where space is limited, for detailed or descriptive content such as primary descriptions in flags.
+- `'small'` should be used sparingly and is for secondary level content such as fine print or semantic messaging.
 
-<Example Component={Basic} packageName="@atlaskit/primitives" />
+<Example Component={TextBasic} packageName="@atlaskit/primitives" />
 
 ## Color
 
-Set `color` to change the text color, defaults to `text.color` if not nested in other Text components. When used within a [box component](/components/primitives/box) that has a bold background color, the text color will automatically be inverted.
+Text uses the `color.text` token which automatically switches colors to be legible across both light and dark modes.
 
-<Example Component={ColorInverse} packageName="@atlaskit/primitives" />
+Text will automatically apply the correct inverse color token if placed within a [box component](/components/primitives/box) with a bold background color.
 
-## Weight
+<Example Component={TextColorInverse} packageName="@atlaskit/primitives" />
 
-Set `weight` to change the font weight.
+The `color` prop can be used with any text color token. If Text is nested inside another Text component, color will automatically inherit from its parent.
 
-<Example Component={Weight} packageName="@atlaskit/primitives" />
+<Example Component={TextColorInherit} packageName="@atlaskit/primitives" />
+
+## Font weight
+
+Font weight defaults to regular (400) and can be set using the `weight` prop.
+More information about the available weights can be found on the [typography foundations page](/foundations/typography-beta/#body-font-weight).
+
+Note: Text supports the semibold weight, however due to differences between font stacks across different operating systems, semibold text may render as bold.
+We recommend using regular, medium, and bold for the best results.
+
+<Example Component={TextWeight} packageName="@atlaskit/primitives" />
 
 ## Alignment
 
-Set `align` to change the text alignment.
+Text can be aligned using the `align` prop.
+
+<Example Component={TextAlign} packageName="@atlaskit/primitives" />
+
+## Rendered HTML element
+
+Text renders a HTML `<span>` element by default. Use the `as` prop to change the rendered HTML element.
+
+<Example Component={TextAsElement} packageName="@atlaskit/primitives" />
+
+## Arrangement with other text styles
+
+Text does not apply any vertical margin or spacing. To control space between text and other content, use a [stack component](/components/primitives/stack).
+
+The available values for paragraph spacing are outlined in the [Typography foundations](/foundations/typography-beta/#body) page.
+
+<Example Component={TextSpacing} packageName="@atlaskit/primitives" />
 
-<Example Component={Align} packageName="@atlaskit/primitives" />
+## Truncation
 
-## Rendered HTML tag
+Truncation in product experiences [should be avoided](/content/language-and-grammar/#truncation).
 
-Set `as` to change the rendered HTML element, defaults to `span`.
+However if truncation cannot be avoided, for example when displaying user-generated content, use the `maxLines` prop to indicate how text should be truncated.
 
-<Example Component={AsElement} packageName="@atlaskit/primitives" />
+<Example Component={TextTruncation} packageName="@atlaskit/primitives" />

package/constellation/text/usage.mdx

@@ -6,4 +6,14 @@ order: 2
 
 ## Usage
 
-Use body text for main content, such as detailed descriptions or for text in components. For each size, we have coupled a line height ensuring that it is compliant with accessibility standards.
+Use the text component for all non-heading text, including main content, detailed descriptions, and text in components.
+
+For each size, a specific line height is automatically set ensuring text is compliant with accessibility standards.
+
+Read more usage guidance for body text in our [Typography foundations](/foundations/typography-beta#body).
+
+## Accessibility
+
+### Color contrast
+
+Text should be a minimum of 4.5:1 color contrast.

package/constellation/xcss/usage.mdx

@@ -8,17 +8,23 @@ import { MediaQueriesTable } from '@af/design-system-docs-ui';
 
 XCSS is an Atlassian Design System styling API that natively integrates with Atlassian's [design tokens](/tokens) and [primitives](/components/primitives/overview).
 
-The XCSS utility behaves similarly to the `css` utility in libraries like `styled-components`, `@compiled` or `@emotion`. If you've used these libraries, XCSS will feel familiar, with a few additional features and constraints.
+To ensure future compliance with XCSS as it evolves over time, we highly recommend you enable our ESLint plugins and adhere to the [UI Styling Standard](/components/eslint-plugin-ui-styling-standard) guidelines by writing local, type-safe, static styles.
+
+- [@atlaskit/eslint-plugin-design-system](/components/eslint-plugin-design-system)
+- [@atlaskit/eslint-plugin-ui-styling-standard](/components/eslint-plugin-ui-styling-standard)
+
+
+The XCSS utility behaves similarly to the `css` utility in libraries like `styled-components`, `@compiled` or `@emotion`, and is built off of `@emotion/react` today. If you've used these libraries, XCSS will feel familiar, with a few additional features and constraints.
 
 Familiar features:
 
-- XCSS generates a `className` that is applied to the components
-- XCSS provides key-value pairs of CSS properties in an object format
+- XCSS is applied as an Emotion `className` to our primitive components
+- XCSS works with the basic CSS object interface found elsewhere
 - XCSS supports style precedence and conditional styles
 
 Key differences:
 
-- XCSS has type-safety that ensures token name usage for all CSS properties represented by design tokens.
+- XCSS has type-safety that ensures token name usage for all CSS properties represented by design tokens
 - XCSS restricts nested selectors completely from usage
 
 ## Usage
@@ -115,7 +121,7 @@ The only limitation is that a media query can't contain another media query. Thi
 
 Additionally, pseudo-selectors can't contain media queries. To use media queries and pseudos, the media query must contain the pseudo.
 
-```
+```tsx
 import { xcss } from '@atlaskit/primitives';
 import { media } from '@atlaskit/primitives/responsive';
 
@@ -127,7 +133,7 @@ const someStyles = xcss({
     }
   },
 
-  // This is not okay, since pseudos can't contain media queries
+  // This is not okay, we don't allow pseudos to contain media queries
   ':hover': {
     [media.above.md]: {
       backgroundColor: 'color.background.primary.hovered'

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.1",
+    packageVersion: "6.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -94,7 +94,7 @@ var Anchor = function Anchor(_ref, ref) {
    *
    * - a link component is set in the app provider
    * - it's not an external link (starting with `http://` or `https://`)
-   * - it's not a non-HTTP-based link (e.g. Emails, phone numbers, hash links etc.).
+   * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.).
    */
   var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && (0, _typeof2.default)(href) === 'object';

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.1",
+    packageVersion: "6.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/responsive/hide.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Hide = void 0;
 var _react = require("@emotion/react");
+var _xcss = require("../xcss/xcss");
 var _buildMediaQueryCss = require("./build-media-query-css");
 /** @jsx jsx */
 
@@ -27,8 +28,11 @@ var Hide = exports.Hide = function Hide(_ref) {
     below = _ref.below,
     children = _ref.children,
     _ref$as = _ref.as,
-    AsElement = _ref$as === void 0 ? 'div' : _ref$as;
+    AsElement = _ref$as === void 0 ? 'div' : _ref$as,
+    xcss = _ref.xcss;
+  var resolvedStyles = (0, _xcss.parseXcss)(xcss);
   return (0, _react.jsx)(AsElement, {
-    css: [above && hideAboveQueries[above], below && hideBelowQueries[below]]
+    className: resolvedStyles.static,
+    css: [above && hideAboveQueries[above], below && hideBelowQueries[below], resolvedStyles.emotion]
   }, children);
 };

package/dist/cjs/responsive/show.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Show = void 0;
 var _react = require("@emotion/react");
+var _xcss = require("../xcss/xcss");
 var _buildMediaQueryCss = require("./build-media-query-css");
 /** @jsx jsx */
 
@@ -30,8 +31,11 @@ var Show = exports.Show = function Show(_ref) {
     below = _ref.below,
     children = _ref.children,
     _ref$as = _ref.as,
-    AsElement = _ref$as === void 0 ? 'div' : _ref$as;
+    AsElement = _ref$as === void 0 ? 'div' : _ref$as,
+    xcss = _ref.xcss;
+  var resolvedStyles = (0, _xcss.parseXcss)(xcss);
   return (0, _react.jsx)(AsElement, {
-    css: [defaultHiddenStyles, above && showAboveQueries[above], below && showBelowQueries[below]]
+    className: resolvedStyles.static,
+    css: [defaultHiddenStyles, above && showAboveQueries[above], below && showBelowQueries[below], resolvedStyles.emotion]
   }, children);
 };

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.1",
+    packageVersion: "6.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -80,7 +80,7 @@ const Anchor = ({
    *
    * - a link component is set in the app provider
    * - it's not an external link (starting with `http://` or `https://`)
-   * - it's not a non-HTTP-based link (e.g. Emails, phone numbers, hash links etc.).
+   * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.).
    */
   const isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   const hrefObjectUsedWithoutRouterLink = RouterLink === undefined && typeof href === 'object';

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.1",
+    packageVersion: "6.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/responsive/hide.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
+import { parseXcss } from '../xcss/xcss';
 import { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
 const hideAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
   display: 'none'
@@ -20,9 +21,12 @@ export const Hide = ({
   above,
   below,
   children,
-  as: AsElement = 'div'
+  as: AsElement = 'div',
+  xcss
 }) => {
+  const resolvedStyles = parseXcss(xcss);
   return jsx(AsElement, {
-    css: [above && hideAboveQueries[above], below && hideBelowQueries[below]]
+    className: resolvedStyles.static,
+    css: [above && hideAboveQueries[above], below && hideBelowQueries[below], resolvedStyles.emotion]
   }, children);
 };

package/dist/es2019/responsive/show.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
+import { parseXcss } from '../xcss/xcss';
 import { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
 const showAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
   display: 'revert'
@@ -23,9 +24,12 @@ export const Show = ({
   above,
   below,
   children,
-  as: AsElement = 'div'
+  as: AsElement = 'div',
+  xcss
 }) => {
+  const resolvedStyles = parseXcss(xcss);
   return jsx(AsElement, {
-    css: [defaultHiddenStyles, above && showAboveQueries[above], below && showBelowQueries[below]]
+    className: resolvedStyles.static,
+    css: [defaultHiddenStyles, above && showAboveQueries[above], below && showBelowQueries[below], resolvedStyles.emotion]
   }, children);
 };