@atlaskit/primitives 6.1.2 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/primitives
 
+## 6.3.0
+
+### Minor Changes
+
+-   [#95202](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95202)
+    [`b28e3d55ab88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b28e3d55ab88) -
+    Adds "Fill" to the set of exported style map types
+
+### Patch Changes
+
+-   Updated dependencies
+
+## 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,82 @@ 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"
+/>
+
+<Snippet
+  name="primitives-event-tracking-header"
+  variables={{ componentName: 'anchor' }}
+/>
+
+<Example
+  Component={AnchorAnalytics}
+  packageName="@atlaskit/primitives/anchor"
+/>
+
+<Snippet name="primitives-event-tracking-gasv3" />
+
+<Example
+  Component={AnchorAnalyticsGASv3}
+  packageName="@atlaskit/primitives/anchor"
+/>
+
+<Snippet
+  name="primitives-event-tracking-ufo"
+  variables={{ componentName: 'anchor' }}
+/>
+
+<Example
+  Component={AnchorPressTracing}
+  packageName="@atlaskit/primitives/anchor"
+/>

package/constellation/anchor/usage.mdx

@@ -4,44 +4,108 @@ description: An anchor is a primitive for building custom links.
 order: 2
 ---
 
-## When not to use Anchor
+## Usage
 
-The [Link component](/components/link/usage) should be used whenever possible for links to maintain visual consistency. Only use Anchor when building custom links beyond the capabilities of the Link component. The decision to use Anchor should involve checking if the Link component can be customized to fit your needs using [XCSS](/components/primitives/XCSS/usage).
+Anchors help users navigate to another page or sections of a page. They can also download files or provide contact information such as phone numbers or email addresses.
 
-Do not use Anchor for buttons that perform actions rather than navigation. Use the equivalent [Pressable primitive](/components/primitives/pressable/usage) instead.
+Anchor has consistent focus styles and analytics built in. It works with design tokens to make it easy to compose Atlassian-styled links that aren't possible using the [link component](/components/link/examples), [link buttons](/components/button/link-button/examples), or other existing design system components.
 
-## Link types
+## Use anchor when there aren't existing components that work for your experience
 
-External links starting with `http://` or `https://` will automatically render with `target="_blank"` and `rel="noopener noreferrer"` attributes.
+Existing components such as the [link component](/components/link/examples) (for text-based links) should be used whenever possible for links to maintain visual consistency. Only use anchor when building custom links beyond the capabilities of the the link component.
 
-### Router links
+Do not use anchor to perform actions rather than navigation. Use the equivalent [pressable primitive](/components/primitives/pressable/examples) to build a custom button instead.
 
-Anchor supports automatic consumption of configured router link components through the [App Provider](/components/app-provider/examples#router-links). If an App Provider is not present or a router link component is not configured, the link will render as a standard anchor link.
+## Accessibility
 
-External links and non-HTTP-based links such as `tel:` and `mailto:` will not use router links and always render as standard anchor links.
+### Underline links unless other context already indicates it is a link
 
-Anchor accepts a generic type object matching the router link configuration, allowing advanced usage of `href` prop. These values can be mapped to the underlying router link component in the App Provider.
+Anchor has an underline by default but it can be disabled in some circumstances. Underlines help differentiate links from regular text and addresses a WCAG-A recommendation. Using color alone isn't accessible, especially if links are surrounded by other text.
 
-```jsx
-<Anchor<MyRouterLinkConfig>
-  href={{
-    to: '/home',
-    replace: true
-  }}
->
-  Home
-</Anchor>
-```
+Only remove underlines if the context surrounding the link makes it clear that it is interactive, such as in navigation. Anhor may also be used to create linkable areas such as a card, in which case the underline may be omitted.
 
-## Styling
+Also, don't underline text that isn't a link. This makes the text look clickable because it looks a link.
 
-Display behavior follows the same patterns as [Box](/components/primitives/box/usage). Use available props or [XCSS](/components/primitives/xcss/usage) to customize padding options, background color, and other styles.
+For more information see ['Understanding Use of Color (Level A)'](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) and ['Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision'](https://www.w3.org/WAI/WCAG22/Techniques/failures/F73).
+
+<!-- TODO: Add do/dont images once designed (if necessary?) -->
+
+<DoDont type="do">
+  Use underlined links in body copy. Only omit an underline if the context makes
+  it clear the link is selectable.
+</DoDont>
+
+<DoDont type="dont">Use underlined links in navigation.</DoDont>
+
+### Use descriptive link text that clarifies the purpose of the link
+
+Don't link vague words or phrases like “here” or “learn more.” Make sure the linked text clearly describes the purpose of the link.
+
+<!-- TODO: Add some Do/Don't images as examples -->
+
+<DoDont type="do">Clearly describe the purpose of the link.</DoDont>
+
+<DoDont type="dont">Link vague words or phrases.</DoDont>
+
+### Only open links in a new window or tab when necessary
+
+Opening links in a new window can be disorienting for people, so only do it when necessary.
+
+It might make sense for a link to open in a new window if:
+
+- There's a risk of someone losing their current place or task
+- The link takes the person out of the current product or to an external website
+
+For more information see ['G200: Opening new windows and tabs from a link only when necessary'](https://www.w3.org/TR/WCAG20-TECHS/G200.html).
+
+### Keep links large enough to interact with
+
+Make link text size at least 12px. Smaller text is harder to read and interact with. If anchor is not used for text-based links, ensure the clickable area is at least 24 by 24 pixels for accessibility unless exempt from [Target Size (Minimum) (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
+
+## Best practices
+
+### Don't confuse links and buttons
+
+Anchors are for navigation and URL changes, while buttons are for on-page actions such as form submissions or opening modals. These elements are treated differently by assistive technologies, so avoid using one in place of the other.
+
+More details on [when to use links and buttons](/components/button/button-new/usage#use-buttons-for-actions-and-links-for-navigation).
+
+## Content guidelines
+
+### Use clear and unique link text
+
+Try not to repeat the same link text over and over on a page. Make sure link text is clear about where the link will go.
+
+### Specify download links, including file type and size
+
+Always specify if a link triggers a download, and make the linked text clear about what exactly will be downloaded. Include file type and size as well.
+
+### Don't include unnecessary links
+
+Using too many links can overwhelm other, more important information on a page.
+
+Anchors take people to a new page or location. Be mindful of whether or not the linked resource is helpful or distracting to the current task.
+
+### Links in sentences or body copy
+
+Only link the words that are necessary to clarify where the link goes. Don't link the entire sentence. (Linking smaller phrases can be better for internationalization when sentence structures change across languages.)
+
+Only include the verb in the linked text if it better describes the purpose the link or differentiates it from other links and actions on the page.
+
+For example:
+
+> Update [Jira settings](https://atlassian.design/components/button/button-new/usage#use-buttons-for-actions-and-links-for-navigation) to turn off notifications. To upgrade, [sign up for Jira](https://atlassian.design/components/button/button-new/usage#use-buttons-for-actions-and-links-for-navigation).
+
+If only Jira was linked, it wouldn't be clear that this was a sign up page.
+
+### Links on their own (UI elements or navigation)
+
+For standalone links, link the whole phrase. Don't add punctuation.
+
+These type of links typically follow general button or other label content rules (sentence case capitalization, no punctuation, etc.)
 
 ## Related
 
-- [Configuring router link components with AppProvider](/components/app-provider/examples#router-links)
-- [The underlying box component](/components/primitives/box/usage)
-- [Counterpart pressable primitive for button tags](/components/primitives/button/usage)
-- [Manage horizontal layout using an inline component](/components/primitives/inline/usage)
-- [Manage vertical layout using a stack component](/components/primitives/stack/usage)
-- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)
+- [Counterpart pressable primitive for buttons](/components/primitives/button/usage)
+- Prefer to use existing components such as the [link component](/components/link/examples) or [link buttons](/components/button/link-button/examples)
+- Anchor is built on the same API as [box](/components/primitives/box/usage)

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}
@@ -87,39 +87,29 @@ Pressable passes through all valid HTML attributes to the underlying `<button>`
   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.
+<Snippet
+  name="primitives-event-tracking-header"
+  variables={{ componentName: 'pressable' }}
+/>
 
 <Example
-  Component={PressablePressTracing}
+  Component={PressableAnalytics}
   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.
+<Snippet name="primitives-event-tracking-gasv3" />
 
 <Example
-  Component={PressableAnalytics}
+  Component={PressableAnalyticsGASv3}
   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.
+<Snippet
+  name="primitives-event-tracking-ufo"
+  variables={{ componentName: 'pressable' }}
+/>
 
 <Example
-  Component={PressableAnalyticsGASv3}
+  Component={PressablePressTracing}
   packageName="@atlaskit/primitives/pressable"
 />

package/constellation/pressable/usage.mdx

@@ -7,6 +7,8 @@ order: 2
 import pressablePrimaryDo from './images/pressable-01a-do.png';
 import pressablePrimaryDont from './images/pressable-01b-dont.png';
 
+## Usage
+
 Pressable is a button with consistent focus styles and analytics built in. Pressable works with design tokens to make it easy to compose Atlassian-styled clickable elements that aren't possible using existing [buttons](/components/button/examples), [menus](/components/menu/examples), or other existing design system components.
 
 ![Pressable anatomy](./images/pressable-anatomy.png)
@@ -15,7 +17,7 @@ Pressable is a button with consistent focus styles and analytics built in. Press
 2. **Focus ring**: This is included in pressable and appears on keyboard focus.
 3. **Accessible label:** Pressable should always include a clear label for accessibility. Use this to communicate the action that occurs when the button is pressed.
 
-## Use pressable when there aren't existing components that work for your experience
+### Use pressable when there aren't existing components that work for your experience
 
 Only use pressable when existing components such as [the button component](/components/button/examples), menus, or other existing design system components can't be customized to fit your case. Using existing components with safe customizations will prevent inconsistency as Atlassian UI evolves.
 
@@ -95,5 +97,6 @@ Follow label and content guidelines for [buttons](/components/button/button-new/
 
 ## Related
 
-- Use existing components such as [buttons](/components/button/examples) or [menus](/components/menu/examples) for most actions in Atlassian products.
+- [Counterpart anchor primitive for links](/components/primitives/button/usage)
+- Prefer to use existing components such as [buttons](/components/button/examples) or [menus](/components/menu/examples) for most actions in Atlassian products
 - Pressable is built on the same API as [box](/components/primitives/box/usage)

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.3.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.3.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.3.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.3.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.3.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.3.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.3.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"
           }
         },
         {
@@ -112,7 +112,7 @@
           "slug": "primitives/anchor",
           "id": "@atlaskit/primitives/anchor",
           "status": {
-            "type": "alpha"
+            "type": "closed-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.49.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",