@atlaskit/primitives 6.1.2 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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

@@ -25,7 +25,7 @@ import SectionMessage from '@atlaskit/section-message';
 
 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
 
@@ -40,7 +40,7 @@ Pressable is unstyled by default.
 
 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).
+For more information on XCSS, see the [XCSS documentation](/components/primitives/xcss).
 
 <Example
   Component={PressableBasic}
@@ -91,16 +91,7 @@ Pressable passes through all valid HTML attributes to the underlying `<button>`
 
 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
+### 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`.
 
@@ -113,7 +104,9 @@ See the event data in the console.
   packageName="@atlaskit/primitives/pressable"
 />
 
-### GASv3 analytics
+### 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.
 
@@ -123,3 +116,12 @@ See the event data in the console.
   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/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.2",
+    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

@@ -78,7 +78,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "6.1.2",
+    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/es2019/components/anchor.js

@@ -62,7 +62,7 @@ const Anchor = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "6.1.2",
+    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

@@ -64,7 +64,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "6.1.2",
+    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);
 };

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.2",
+    packageVersion: "6.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -84,7 +84,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 && _typeof(href) === 'object';

package/dist/esm/components/pressable.js

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

package/dist/esm/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';
 var hideAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
   display: 'none'
@@ -21,8 +22,11 @@ export var 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 = 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/esm/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';
 var showAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
   display: 'revert'
@@ -24,8 +25,11 @@ export var 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 = 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);
 };

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

@@ -1,5 +1,5 @@
 import React, { type ReactNode, type Ref } from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
 export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & {
@@ -8,7 +8,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
      */
     children: ReactNode;
     /**
-     * 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 called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
     onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**

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

@@ -9,7 +9,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
     children: ReactNode;
     isDisabled?: boolean;
     /**
-     * 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.
+     * Handler 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;
     /**
@@ -42,7 +42,7 @@ declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"but
     children: ReactNode;
     isDisabled?: boolean | undefined;
     /**
-     * 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.
+     * Handler 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;
     /**

package/dist/types/responsive/hide.d.ts

@@ -1,7 +1,8 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import type { Breakpoint } from './types';
+import { type BasePrimitiveProps } from '../components/types';
+import { type Breakpoint } from './types';
 type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
 type ResponsiveHideProps = {
     as?: As;
@@ -24,7 +25,7 @@ type ResponsiveHideProps = {
      */
     above: Exclude<Breakpoint, 'xxs'>;
     below?: never;
-});
+}) & Pick<BasePrimitiveProps, 'xcss'>;
 /**
  * Hides the content at a given breakpoint.  By default, content is shown.  The primary use case is for visual presentation.
  * Mix `<Hide above="md">` with `<Show above="md">` to achieve content that shifts at a breakpoint.
@@ -33,5 +34,5 @@ type ResponsiveHideProps = {
  * - This only uses `display: none` hide, it does not skip rendering of children trees.
  * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
  */
-export declare const Hide: ({ above, below, children, as: AsElement, }: ResponsiveHideProps) => jsx.JSX.Element;
+export declare const Hide: ({ above, below, children, as: AsElement, xcss, }: ResponsiveHideProps) => jsx.JSX.Element;
 export {};

package/dist/types/responsive/show.d.ts

@@ -1,6 +1,7 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
+import { type BasePrimitiveProps } from '../components/types';
 import type { Breakpoint } from './types';
 type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
 type ResponsiveShowProps = {
@@ -24,7 +25,7 @@ type ResponsiveShowProps = {
      */
     above: Exclude<Breakpoint, 'xxs'>;
     below?: never;
-});
+}) & Pick<BasePrimitiveProps, 'xcss'>;
 /**
  * Shows the content at a given breakpoint.  By default, content is hidden.  The primary use case is for visual presentation.
  * Mix `<Show above="md">` with `<Hide above="md">` to achieve content that shifts at a breakpoint.
@@ -33,5 +34,5 @@ type ResponsiveShowProps = {
  * - This only uses `display: none` and `display: revert` to show/hide, it does not skip rendering of children trees.
  * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
  */
-export declare const Show: ({ above, below, children, as: AsElement, }: ResponsiveShowProps) => jsx.JSX.Element;
+export declare const Show: ({ above, below, children, as: AsElement, xcss, }: ResponsiveShowProps) => jsx.JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import React, { type ReactNode, type Ref } from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
 export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & {
@@ -8,7 +8,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
      */
     children: ReactNode;
     /**
-     * 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 called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
     onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**

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

@@ -9,7 +9,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
     children: ReactNode;
     isDisabled?: boolean;
     /**
-     * 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.
+     * Handler 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;
     /**
@@ -42,7 +42,7 @@ declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"but
     children: ReactNode;
     isDisabled?: boolean | undefined;
     /**
-     * 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.
+     * Handler 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;
     /**

package/dist/types-ts4.5/responsive/hide.d.ts

@@ -1,7 +1,8 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import type { Breakpoint } from './types';
+import { type BasePrimitiveProps } from '../components/types';
+import { type Breakpoint } from './types';
 type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
 type ResponsiveHideProps = {
     as?: As;
@@ -24,7 +25,7 @@ type ResponsiveHideProps = {
      */
     above: Exclude<Breakpoint, 'xxs'>;
     below?: never;
-});
+}) & Pick<BasePrimitiveProps, 'xcss'>;
 /**
  * Hides the content at a given breakpoint.  By default, content is shown.  The primary use case is for visual presentation.
  * Mix `<Hide above="md">` with `<Show above="md">` to achieve content that shifts at a breakpoint.
@@ -33,5 +34,5 @@ type ResponsiveHideProps = {
  * - This only uses `display: none` hide, it does not skip rendering of children trees.
  * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
  */
-export declare const Hide: ({ above, below, children, as: AsElement, }: ResponsiveHideProps) => jsx.JSX.Element;
+export declare const Hide: ({ above, below, children, as: AsElement, xcss, }: ResponsiveHideProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/responsive/show.d.ts

@@ -1,6 +1,7 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
+import { type BasePrimitiveProps } from '../components/types';
 import type { Breakpoint } from './types';
 type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
 type ResponsiveShowProps = {
@@ -24,7 +25,7 @@ type ResponsiveShowProps = {
      */
     above: Exclude<Breakpoint, 'xxs'>;
     below?: never;
-});
+}) & Pick<BasePrimitiveProps, 'xcss'>;
 /**
  * Shows the content at a given breakpoint.  By default, content is hidden.  The primary use case is for visual presentation.
  * Mix `<Show above="md">` with `<Hide above="md">` to achieve content that shifts at a breakpoint.
@@ -33,5 +34,5 @@ type ResponsiveShowProps = {
  * - This only uses `display: none` and `display: revert` to show/hide, it does not skip rendering of children trees.
  * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
  */
-export declare const Show: ({ above, below, children, as: AsElement, }: ResponsiveShowProps) => jsx.JSX.Element;
+export declare const Show: ({ above, below, children, as: AsElement, xcss, }: ResponsiveShowProps) => jsx.JSX.Element;
 export {};

package/extract-react-types/anchor-props.tsx

@@ -1,7 +1,12 @@
 // TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
-import React, { ReactNode } from 'react';
+import type React from 'react';
 
-import { BasePrimitiveProps, StyleProp } from '../src/components/types';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+import {
+  type BasePrimitiveProps,
+  type StyleProp,
+} from '../src/components/types';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 namespace Token {
@@ -30,19 +35,17 @@ export default function Anchor<
 >(
   _: {
     /**
-     * A link can be provided as a string. If a router link configuration is set
-     * it can be mapped to the underlying router link component,
-     * or optionally a custom object defined in the generic type for advanced use.
+     * A link can be provided as a string If a router link configuration is set in the [app provider](https://atlassian.design/components/app-provider/examples), this can be mapped to an underlying router link component. For advanced usage an object can be passed. See [the code examples](https://atlassian.design/components/primitives/anchor/examples#router-links) for more information.
      */
     href: string | RouterLinkConfig;
 
     /**
-     * The `target` attribute of the anchor HTML element. Defaults to `_blank` for external links.
+     * The `target` attribute of the anchor HTML element.
      */
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
 
     /**
-     * The `rel` attribute of the anchor HTML element. Defaults to `noopener noreferrer` for external links.
+     * The `rel` attribute of the anchor HTML element.
      */
     rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
 
@@ -81,6 +84,29 @@ export default function Anchor<
      */
     paddingInlineEnd?: Space;
 
+    /**
+     * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/anchor/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/anchor/examples#gasv3-analytics).
+     */
+    onClick?: (
+      e: React.MouseEvent<HTMLButtonElement>,
+      analyticsEvent: UIAnalyticsEvent,
+    ) => void;
+
+    /**
+     * An optional component name used to identify this component to Atlaskit analytics press listeners. This can be altered if a parent component's name is preferred rather than the default 'Anchor'. See [the code example](https://atlassian.design/components/primitives/anchor/examples#atlaskit-analytics) for more information.
+     */
+    componentName?: string;
+
+    /**
+     * Additional information to be included in the `context` of Atlaskit analytics events that come from anchor. See [the code example](https://atlassian.design/components/primitives/anchor/examples#atlaskit-analytics) for more information.
+     */
+    analyticsContext?: Record<string, any>;
+
+    /**
+     * An optional name used to identify the anchor to interaction content listeners. By default, anchor fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the code example](https://atlassian.design/components/primitives/anchor/examples#react-ufo-press-interactions) for more information.
+     */
+    interactionName?: string;
+
     /**
      * A token alias for background color. See:<br>
      * [https://atlassian.design/components/tokens/all-tokens#color-background](https://atlassian.design/components/tokens/all-tokens#color-background)<br>
@@ -92,7 +118,7 @@ export default function Anchor<
     /**
      * Elements to be rendered inside the primitive.
      */
-    children: ReactNode;
+    children: React.ReactNode;
 
     /**
      * Forwarded ref element.

package/extract-react-types/pressable-props.tsx

@@ -1,9 +1,12 @@
 // TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
-import React, { ReactNode } from 'react';
+import type React from 'react';
 
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 
-import { BasePrimitiveProps, StyleProp } from '../src/components/types';
+import {
+  type BasePrimitiveProps,
+  type StyleProp,
+} from '../src/components/types';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 namespace Token {
@@ -82,7 +85,7 @@ export default function Pressable(
     backgroundColor?: Token.BackgroundColor;
 
     /**
-     * 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 called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
      */
     onClick?: (
       e: React.MouseEvent<HTMLButtonElement>,
@@ -90,24 +93,24 @@ export default function Pressable(
     ) => void;
 
     /**
-     * An optional name used to identify the interaction type to analytics press listeners.
+     * An optional component name used to identify this component to Atlaskit analytics press listeners. This can be altered if a parent component's name is preferred rather than the default 'Pressable'. See [the code example](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) for more information.
      */
-    interactionName?: string;
+    componentName?: string;
 
     /**
-     * An optional component name used to identify this component to analytics press listeners. This can be altered if a parent component's name is preferred rather than the default 'Pressable'.
+     * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable. See [the code example](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) for more information.
      */
-    componentName?: string;
+    analyticsContext?: Record<string, any>;
 
     /**
-     * Additional information to be included in the `context` of analytics events that come from Pressable.
+     * An optional name used to identify the pressable to interaction content listeners. By default, pressable fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the code example](https://atlassian.design/components/primitives/pressable/examples#react-ufo-press-interactions) for more information.
      */
-    analyticsContext?: Record<string, any>;
+    interactionName?: string;
 
     /**
      * Elements to be rendered inside the primitive.
      */
-    children: ReactNode;
+    children: React.ReactNode;
 
     /**
      * Forwarded ref element.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "6.1.2",
+  "version": "6.2.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -94,7 +94,7 @@
           "slug": "primitives/text",
           "id": "@atlaskit/primitives/text",
           "status": {
-            "type": "closed-beta"
+            "type": "beta"
           }
         },
         {
@@ -128,7 +128,7 @@
     "@atlaskit/css": "^0.1.0",
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/interaction-context": "^2.1.0",
-    "@atlaskit/tokens": "^1.47.0",
+    "@atlaskit/tokens": "^1.48.0",
     "@atlaskit/visually-hidden": "^1.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -144,7 +144,7 @@
     "@af/formatting": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^13.1.0",
-    "@atlaskit/tooltip": "^18.3.0",
+    "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",