@atlaskit/primitives 11.0.2 → 11.1.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/primitives
 
+## 11.1.1
+
+### Patch Changes
+
+- [#126649](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126649)
+  [`24092d9f293a1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/24092d9f293a1) -
+  Removed development warnings from JSDoc comment for Anchor primitive.
+
+## 11.1.0
+
+### Minor Changes
+
+- [#123719](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123719)
+  [`4de823258d64a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4de823258d64a) -
+  Added `dl` as a valid polymorphic element for both the `Inline` and `Stack` primitives.
+
 ## 11.0.2
 
 ### Patch Changes

package/constellation/anchor/code.mdx

@@ -2,6 +2,10 @@
 title: Anchor
 description: An anchor is a primitive for building custom links.
 order: 1
+props:
+  packageName: '@atlaskit/primitives'
+  exports:
+    - Anchor
 ---
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
@@ -12,10 +16,8 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 	directoryName="primitives"
 />
 
-import ERTAnchor from '!!extract-react-types-loader!../../extract-react-types/anchor-props';
-
 ## Props
 
 Anchor also supports all valid `HTMLAnchorElement` props.
 
-<PropsTable heading="" props={ERTAnchor} />
+<TSMorphProps exportName="Anchor" packageName="@atlaskit/primitives" />

package/constellation/anchor/examples.mdx

@@ -30,8 +30,7 @@ Only use anchor when existing components such as [link](/components/link/example
 
 ## Default
 
-Anchor is unstyled besides a default underline and consistent Atlassian Design System `:focus`
-styles.
+Anchor is unstyled besides a default underline and consistent Atlassian Design System focus styles.
 
 If you are using the [CSS reset](/components/css-reset/examples), anchor will also inherit some
 global styles.

package/constellation/anchor/usage.mdx

@@ -4,13 +4,19 @@ description: An anchor is a primitive for building custom links.
 order: 2
 ---
 
+import anchor1Do from './images/anchor-01a-do.png';
+import anchor1Dont from './images/anchor-01b-dont.png';
+import anchor2Do from './images/anchor-02a-do.png';
+import anchor2Dont from './images/anchor-02b-dont.png';
+
 ## Usage
 
-Use an anchor to make elements that work like hyperlinks. Anchors can navigate to any linkable
-location such as a web page, a location on a page, a file download, or a `mailto` email address.
+Use an anchor to make custom links. 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.
 
-Anchor is based on the HTML `<a>` tag, but with Atlassian focus styles and analytics events built
-in. You can customize the anchor's appearance further using our styling APIs.
+Anchor is based on the HTML `<a>` tag, with Atlassian focus styles and event tracking built-in. You
+can customize the anchor's appearance using our styling APIs.
 
 For example, an anchor could be used to make
 [a link card](/components/primitives/anchor/examples#advanced-styling) with a larger clickable area
@@ -27,126 +33,82 @@ consistent, and these components are faster to use for most basic use cases.
 
 ## Accessibility
 
-### Show what's clickable using underlines or other affordances
+### Differentiate anchors from regular text
 
-Anchors have an underline by default. This helps differentiate links from regular text, which is an
+Anchors are underlined by default. This helps differentiate links from regular text, which is an
 accessibility requirement. Using color alone to differentiate links isn't accessible, especially if
 links are surrounded by other text.
 
-Only remove underlines if the context surrounding the link makes it clear that it's interactive,
-such as in navigation or a card layout.
+<DoDont
+	type="do"
+	image={{
+		url: anchor1Do,
+		alt: 'A link surrounded by regular text. The link provides color and an underline to differentiate the link from regular text.',
+	}}
+>
+	Use both underlines and color for links surrounded by regular text.
+</DoDont>
 
-Also, don't underline text that isn't a link. This makes the text look clickable because it looks a
-link.
+<DoDont
+	type="dont"
+	image={{
+		url: anchor1Dont,
+		alt: "A link surrounded by regular text. The link provides only color but no underline to differentiate the link from regular text, however it's insufficient.",
+	}}
+>
+	Only use color to differentiate links from regular text.
+</DoDont>
 
-<!-- TODO: Add do/dont images once designed (if necessary?) -->
+Only remove underlines and omit other style affordances such as color if the context surrounding the
+link makes it clear that it's interactive, such as in navigation or a card layout.
+
+<DoDont
+	type="do"
+	image={{
+		url: anchor2Do,
+		alt: 'Links in a navigation section. The links use a subtle text color and no underline, which is appropriate because the surrounding context makes it clear that they are links.',
+	}}
+>
+	Omit underlines and color when surrounding context makes it clear it's a link.
+</DoDont>
 
-<DoDont type="do">
-	Use underlined links in body copy. Only omit an underline if the context makes it clear the link
-	is selectable.
+<DoDont
+	type="dont"
+	image={{
+		url: anchor2Dont,
+		alt: 'Links in a navigation section. The links use a bright text color and underline, which is not required because the surrounding context makes it clear that they are links.',
+	}}
+>
+	Use underlines and color when surrounding context already makes it clear it's a link.
 </DoDont>
 
-<DoDont type="dont">Use underlined links in navigation.</DoDont>
+Also, don't underline text that isn't a link. This makes the text look clickable because it looks a
+link.
 
 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).
 
-### Use anchor for links and navigation, not on-page actions
-
-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.
-
-Don't use anchor to make custom actions rather than navigation elements. To build a custom action or
-button, use the [pressable primitive](/components/primitives/pressable/examples) instead.
+<Snippet name="links-dont-confuse-with-buttons" variables={{ componentName: 'anchor' }} />
 
-More on
-[when to use links vs buttons](/components/button/usage#use-buttons-for-actions-and-links-for-navigation).
+Don't use anchor to make custom actions rather than navigation elements. To build a custom button,
+use the [pressable primitive](/components/primitives/pressable/examples) instead.
 
-### Use descriptive link text that clarifies the purpose of the link
+<Snippet name="links-descriptive-text" />
 
-Don't link vague words or phrases like “here” or “learn more.” Make sure the linked text clearly
-describes the purpose of the link for assistive technologies.
+<Snippet name="links-open-new-window" variables={{ componentName: 'anchor' }} />
 
-See [link content guidelines](/components/primitives/anchor/usage#content-guidelines) for details
-and examples.
-
-<!-- TODO: Crosslink updated link content guidance. Should be info in language and grammar and link component. (snippet time?) -->
-<!-- TODO: Add some Do/Don't images as examples -->
-
-<DoDont type="do">Link text that describes 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).
+<Snippet name="links-minimum-size" />
 
-### 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
+If anchor is used for non-textual links, ensure the clickable area is at least 24 by 24 pixels for
+accessibility. For more information see
 [Target Size (Minimum) (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
 
-## 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.
-
-<!-- TODO: add example of this -->
-
-### 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.)
+<Snippet name="links-content-guidelines" />
 
 ## Related
 
 - Use existing components such as [link](/components/link/examples) or
   [link button](/components/button/link-button/examples) wherever possible.
 - Use [pressable primitive for custom buttons](/components/primitives/button/usage).
-- Anchor is built on the same API as [box](/components/primitives/box/usage).

package/constellation/box/code.mdx

@@ -16,6 +16,9 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 	directoryName="primitives"
 />
 
+Box also supports all valid props as specified by the HTML element type in the `as` prop. The
+default is a `div`, so it would support all valid `HTMLDivElement` props.
+
 ## Props
 
 <TSMorphProps exportName="Box" packageName="@atlaskit/primitives" />

package/constellation/pressable/code.mdx

@@ -2,6 +2,10 @@
 title: Pressable
 description: A pressable is a primitive for building custom buttons.
 order: 1
+props:
+  packageName: '@atlaskit/primitives'
+  exports:
+    - Pressable
 ---
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
@@ -12,11 +16,9 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 	directoryName="primitives"
 />
 
-import ERTPressable from '!!extract-react-types-loader!../../extract-react-types/pressable-props';
-
 ## Props
 
 Pressable also supports all valid `HTMLButtonElement` props, except for `disabled` which is replaced
 by the `isDisabled` prop.
 
-<PropsTable heading="" props={ERTPressable} />
+<TSMorphProps exportName="Pressable" packageName="@atlaskit/primitives" />

package/constellation/pressable/usage.mdx

@@ -94,9 +94,12 @@ Pressable is meant for on-page actions such as opening modals or submitting form
 something that navigates to a new page, use a component that renders a semantically correct HTML
 `<a>` element such as:
 
-- The [link](/components/primitives/link/examples) component (coming soon) for standard text links.
-- The [anchor](/components/primitives/anchor/examples) primitive (coming soon) to create custom
-  links.
+- The [link](/components/primitives/link/examples) component for standard text links.
+- The [anchor](/components/primitives/anchor/examples) primitive to create custom links.
+
+Also, don't add underlines to a pressable. This makes the button appear to be a link, which can be
+confusing for users who assume they can perform actions specific to links, such as opening links in
+new windows.
 
 ## Content guidelines
 
@@ -122,4 +125,3 @@ questions.
 - Use existing components such as [buttons](/components/button/examples) or
   [menus](/components/menu/examples) for most actions in Atlassian products.
 - Use the [anchor primitive for custom links](/components/primitives/button/usage).
-- Pressable is built on the same API as [box](/components/primitives/box/usage).

package/constellation/responsive/01-show/code.mdx

@@ -2,6 +2,10 @@
 title: Show
 description: Show is a responsive primitive that displays children at specified breakpoints
 order: 2
+props:
+  packageName: '@atlaskit/primitives/responsive'
+  exports:
+    - Show
 ---
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
@@ -12,8 +16,6 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 	directoryName="primitives"
 />
 
-import ShowProps from '!!extract-react-types-loader!../../../extract-react-types/show-props';
-
 ## Props
 
-<PropsTable heading="" props={ShowProps} />
+<TSMorphProps exportName="Show" packageName="@atlaskit/primitives/responsive" />

package/constellation/responsive/02-hide/code.mdx

@@ -2,6 +2,10 @@
 title: Hide
 description: Hide is a responsive primitive that hides children at specified breakpoints
 order: 2
+props:
+  packageName: '@atlaskit/primitives/responsive'
+  exports:
+    - Hide
 ---
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
@@ -12,8 +16,6 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 	directoryName="primitives"
 />
 
-import HideProps from '!!extract-react-types-loader!../../../extract-react-types/hide-props';
-
 ## Props
 
-<PropsTable heading="" props={HideProps} />
+<TSMorphProps exportName="Hide" packageName="@atlaskit/primitives/responsive" />

package/dist/cjs/components/anchor.js

@@ -23,8 +23,8 @@ var _excluded = ["href", "children", "backgroundColor", "newWindowLabel", "paddi
   _excluded2 = ["className"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // TODO: duplicates FocusRing styles from `@atlaskit/focus-ring`.
 var focusRingStyles = (0, _react2.css)({
@@ -105,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "11.0.2",
+    packageVersion: "11.1.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -177,12 +177,8 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
 /**
  * __Anchor__
  *
- * @internal Still under development. Do not use.
- *
  * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
  *
- * This component is mostly used by other design system components, such as the [link component](/components/link/usage).
- *
  * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)

package/dist/cjs/components/bleed.js

@@ -10,8 +10,8 @@ var _react2 = require("@emotion/react");
 var _xcss = require("../xcss/xcss");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/box.js

@@ -16,8 +16,8 @@ var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock",
   _excluded2 = ["className"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // Can either Exclude or Extract - here we're excluding all SVG-related elements and button (handled by Pressable)
 

package/dist/cjs/components/flex.js

@@ -10,8 +10,8 @@ var _styleMaps = require("../xcss/style-maps.partial");
 var _xcss = require("../xcss/xcss");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/grid.js

@@ -12,8 +12,8 @@ var _styleMaps = require("../xcss/style-maps.partial");
 var _xcss = require("../xcss/xcss");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/inline.js

@@ -16,8 +16,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/pressable.js

@@ -18,8 +18,8 @@ var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "padd
   _excluded2 = ["className"];
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // This duplicates FocusRing styles from `@atlaskit/focus-ring`.
 var focusRingStyles = (0, _react2.css)({
@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "11.0.2",
+    packageVersion: "11.1.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/components/stack.js

@@ -13,8 +13,8 @@ var _flex = _interopRequireDefault(require("./flex"));
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/text.js

@@ -12,8 +12,8 @@ var _styleMaps = require("../xcss/style-maps.partial");
 var _surfaceProvider = require("./internal/surface-provider");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/responsive/hide.js

@@ -9,8 +9,8 @@ var _xcss = require("../xcss/xcss");
 var _buildMediaQueryCss = require("./build-media-query-css");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/responsive/show.js

@@ -9,8 +9,8 @@ var _xcss = require("../xcss/xcss");
 var _buildMediaQueryCss = require("./build-media-query-css");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/es2019/components/anchor.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { forwardRef, useCallback, useContext } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -95,7 +95,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "11.0.2",
+    packageVersion: "11.1.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -170,12 +170,8 @@ const AnchorNoRef = ({
 /**
  * __Anchor__
  *
- * @internal Still under development. Do not use.
- *
  * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
  *
- * This component is mostly used by other design system components, such as the [link component](/components/link/usage).
- *
  * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)

package/dist/es2019/components/bleed.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/components/box.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/components/flex.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { forwardRef, memo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/components/grid.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { forwardRef, memo, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/components/inline.js

@@ -1,8 +1,8 @@
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React, { Children, forwardRef, Fragment, memo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/components/pressable.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { forwardRef, useCallback, useContext } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "11.0.2",
+    packageVersion: "11.1.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/stack.js

@@ -1,8 +1,8 @@
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { forwardRef, memo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/components/text.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { createContext, forwardRef, useContext } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766