@atlaskit/primitives 6.2.0 → 6.4.0

package/constellation/anchor/examples.mdx

@@ -75,39 +75,27 @@ Anchor will only render a router link if:
   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.
+<Snippet
+  name="primitives-event-tracking-header"
+  variables={{ componentName: 'anchor' }}
+/>
 
 <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.
+<Snippet name="primitives-event-tracking-gasv3" />
 
 <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.
+<Snippet
+  name="primitives-event-tracking-ufo"
+  variables={{ componentName: 'anchor' }}
+/>
 
 <Example
   Component={AnchorPressTracing}

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/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](/components/button/usage#use-buttons-for-actions-and-links-for-navigation) to turn off notifications. To upgrade, [sign up for Jira](/components/button/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

@@ -87,39 +87,27 @@ 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.
-
-### Track events for any analytics provider
-
-Pressable comes with built-in Atlaskit analytics support using the [Analytics next package](https://atlaskit.atlassian.com/packages/analytics/analytics-next), and fires events for available listeners. Currently this is only available for `onClick`.
-
-It always fires events on the `atlaskit` channel. To also fire events on other channels, use the provided `analyticsEvent` in `onClick`. To configure event data, use `componentName` (defaults to 'Pressable') and `analyticsContext` for passing other metadata.
-
-See the event data in the console.
+<Snippet
+  name="primitives-event-tracking-header"
+  variables={{ componentName: 'pressable' }}
+/>
 
 <Example
   Component={PressableAnalytics}
   packageName="@atlaskit/primitives/pressable"
 />
 
-### Track events for Atlassian internal services
-
-#### GASv3 analytics
-
-The Atlassian analytics bridge makes Atlaskit analytics events compatible with GASv3 (Global Analytics Service). This can also inject an `actionSubjectId` to the event if required.
-
-See the event data in the console.
+<Snippet name="primitives-event-tracking-gasv3" />
 
 <Example
   Component={PressableAnalyticsGASv3}
   packageName="@atlaskit/primitives/pressable"
 />
 
-#### React UFO press interactions
-
-By default, pressable fires [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions) for available listeners. This helps Atlassian measure performance and reliability. Additional detail can be provided using the `interactionName` prop.
+<Snippet
+  name="primitives-event-tracking-ufo"
+  variables={{ componentName: 'pressable' }}
+/>
 
 <Example
   Component={PressablePressTracing}

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.
 
@@ -62,7 +64,7 @@ Pressable creates buttons that are available in focus order, and provides a visu
 
 ### Avoid disabling buttons
 
-Disabled buttons can cause accessibility problems. Avoid disabling buttons and [follow our disabled and tooltip button guidance](/components/button/button-new/usage#avoid-disabling-buttons).
+Disabled buttons can cause accessibility problems. Avoid disabling buttons and [follow our disabled and tooltip button guidance](/components/button/usage#avoid-disabling-buttons).
 
 ## Best practices
 
@@ -91,9 +93,10 @@ For example, _Change issue color to yellow_ instead of _yellow_.
 
 ### Follow other label and UI content guidance
 
-Follow label and content guidelines for [buttons](/components/button/button-new/usage#content-guidelines). Review our [general UI text guidance](/foundations/accessibility/#meaningful-text) for specific question.
+Follow label and content guidelines for [buttons](/components/button/usage#content-guidelines). Review our [general UI text guidance](/foundations/accessibility/#meaningful-text) for specific question.
 
 ## 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/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.2.0",
+    packageVersion: "6.4.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/bleed.js

@@ -65,6 +65,7 @@ var Bleed = /*#__PURE__*/_react.default.memo(function (_ref) {
     xcss = _ref.xcss;
   var resolvedStyles = (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: resolvedStyles.static,
     css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/cjs/components/box.js

@@ -53,11 +53,15 @@ var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   var resolvedStyles = (0, _xcss.parseXcss)(xcss);
   var node =
   // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
-  (0, _react2.jsx)(Component, (0, _extends2.default)({
+  (0, _react2.jsx)(Component
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  , (0, _extends2.default)({
     style: style
     // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ,
-    ref: ref,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: resolvedStyles.static
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
@@ -69,7 +73,10 @@ var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   return backgroundColor ? (0, _react2.jsx)(_surfaceProvider.SurfaceContext.Provider, {
     value: backgroundColor
   }, node) : node;
-});
+}
+// @ts-ignore This typescript error has been surpessed while locally enrolling `@atlaskit/primitives` into Jira
+// The return type of `BoxComponent` does not match the return type of `forwardRef` in React 18
+);
 var _default = exports.default = Box;
 var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box',

package/dist/cjs/components/flex.js

@@ -107,7 +107,9 @@ var Flex = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     xcss = _ref.xcss;
   var resolvedStyles = (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)(Component, {
-    role: role,
+    role: role
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: resolvedStyles.static,
     css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/cjs/components/grid.js

@@ -170,8 +170,12 @@ var Grid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
   }, [gridTemplateAreas, gridTemplateColumns, gridTemplateRows]);
   return (0, _react2.jsx)(Component, {
     id: id,
-    role: role,
-    style: style,
+    role: role
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: style
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: resolvedStyles.static,
     css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

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

package/dist/cjs/responsive/hide.js

@@ -31,7 +31,9 @@ var Hide = exports.Hide = function Hide(_ref) {
     AsElement = _ref$as === void 0 ? 'div' : _ref$as,
     xcss = _ref.xcss;
   var resolvedStyles = (0, _xcss.parseXcss)(xcss);
-  return (0, _react.jsx)(AsElement, {
+  return (0, _react.jsx)(AsElement
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: resolvedStyles.static,
     css: [above && hideAboveQueries[above], below && hideBelowQueries[below], resolvedStyles.emotion]
   }, children);

package/dist/cjs/responsive/show.js

@@ -34,7 +34,9 @@ var Show = exports.Show = function Show(_ref) {
     AsElement = _ref$as === void 0 ? 'div' : _ref$as,
     xcss = _ref.xcss;
   var resolvedStyles = (0, _xcss.parseXcss)(xcss);
-  return (0, _react.jsx)(AsElement, {
+  return (0, _react.jsx)(AsElement
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     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.2.0",
+    packageVersion: "6.4.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/bleed.js

@@ -58,6 +58,7 @@ const Bleed = /*#__PURE__*/React.memo(({
 }) => {
   const resolvedStyles = parseXcss(xcss);
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: resolvedStyles.static,
     css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/es2019/components/box.js

@@ -46,11 +46,15 @@ export const Box = /*#__PURE__*/forwardRef(({
   const resolvedStyles = parseXcss(xcss);
   const node =
   // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
-  jsx(Component, _extends({
+  jsx(Component
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  , _extends({
     style: style
     // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ,
-    ref: ref,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: resolvedStyles.static
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
@@ -62,7 +66,10 @@ export const Box = /*#__PURE__*/forwardRef(({
   return backgroundColor ? jsx(SurfaceContext.Provider, {
     value: backgroundColor
   }, node) : node;
-});
+}
+// @ts-ignore This typescript error has been surpessed while locally enrolling `@atlaskit/primitives` into Jira
+// The return type of `BoxComponent` does not match the return type of `forwardRef` in React 18
+);
 export default Box;
 const baseStyles = css({
   boxSizing: 'border-box',

package/dist/es2019/components/flex.js

@@ -100,7 +100,9 @@ const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, ref) => {
   const resolvedStyles = parseXcss(xcss);
   return jsx(Component, {
-    role: role,
+    role: role
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: resolvedStyles.static,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/es2019/components/grid.js

@@ -161,8 +161,12 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }), [gridTemplateAreas, gridTemplateColumns, gridTemplateRows]);
   return jsx(Component, {
     id: id,
-    role: role,
-    style: style,
+    role: role
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: style
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: resolvedStyles.static,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/es2019/components/pressable.js

@@ -64,7 +64,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "6.2.0",
+    packageVersion: "6.4.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/responsive/hide.js

@@ -25,7 +25,9 @@ export const Hide = ({
   xcss
 }) => {
   const resolvedStyles = parseXcss(xcss);
-  return jsx(AsElement, {
+  return jsx(AsElement
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: resolvedStyles.static,
     css: [above && hideAboveQueries[above], below && hideBelowQueries[below], resolvedStyles.emotion]
   }, children);

package/dist/es2019/responsive/show.js

@@ -28,7 +28,9 @@ export const Show = ({
   xcss
 }) => {
   const resolvedStyles = parseXcss(xcss);
-  return jsx(AsElement, {
+  return jsx(AsElement
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     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.2.0",
+    packageVersion: "6.4.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/bleed.js

@@ -57,6 +57,7 @@ var Bleed = /*#__PURE__*/React.memo(function (_ref) {
     xcss = _ref.xcss;
   var resolvedStyles = parseXcss(xcss);
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: resolvedStyles.static,
     css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/esm/components/box.js

@@ -47,11 +47,15 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var resolvedStyles = parseXcss(xcss);
   var node =
   // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
-  jsx(Component, _extends({
+  jsx(Component
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  , _extends({
     style: style
     // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ,
-    ref: ref,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: resolvedStyles.static
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
@@ -63,7 +67,10 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return backgroundColor ? jsx(SurfaceContext.Provider, {
     value: backgroundColor
   }, node) : node;
-});
+}
+// @ts-ignore This typescript error has been surpessed while locally enrolling `@atlaskit/primitives` into Jira
+// The return type of `BoxComponent` does not match the return type of `forwardRef` in React 18
+);
 export default Box;
 var baseStyles = css({
   boxSizing: 'border-box',

package/dist/esm/components/flex.js

@@ -100,7 +100,9 @@ var Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss = _ref.xcss;
   var resolvedStyles = parseXcss(xcss);
   return jsx(Component, {
-    role: role,
+    role: role
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: resolvedStyles.static,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/esm/components/grid.js

@@ -162,8 +162,12 @@ var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [gridTemplateAreas, gridTemplateColumns, gridTemplateRows]);
   return jsx(Component, {
     id: id,
-    role: role,
-    style: style,
+    role: role
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: style
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: resolvedStyles.static,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

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

package/dist/esm/responsive/hide.js

@@ -25,7 +25,9 @@ export var Hide = function Hide(_ref) {
     AsElement = _ref$as === void 0 ? 'div' : _ref$as,
     xcss = _ref.xcss;
   var resolvedStyles = parseXcss(xcss);
-  return jsx(AsElement, {
+  return jsx(AsElement
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: resolvedStyles.static,
     css: [above && hideAboveQueries[above], below && hideBelowQueries[below], resolvedStyles.emotion]
   }, children);

package/dist/esm/responsive/show.js

@@ -28,7 +28,9 @@ export var Show = function Show(_ref) {
     AsElement = _ref$as === void 0 ? 'div' : _ref$as,
     xcss = _ref.xcss;
   var resolvedStyles = parseXcss(xcss);
-  return jsx(AsElement, {
+  return jsx(AsElement
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: resolvedStyles.static,
     css: [defaultHiddenStyles, above && showAboveQueries[above], below && showBelowQueries[below], resolvedStyles.emotion]
   }, children);

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 import type { BasePrimitiveProps } from './types';
 export type BleedProps = {