@atlaskit/primitives 7.0.0 → 7.0.2

package/constellation/text/usage.mdx

@@ -6,11 +6,14 @@ order: 2
 
 ## Usage
 
-Use the text component for all non-heading text, including main content, detailed descriptions, and text in components.
+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.
+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).
+Read more usage guidance for body text in our
+[Typography foundations](/foundations/typography-beta#body).
 
 ## Accessibility
 

package/constellation/xcss/examples.mdx

@@ -12,9 +12,9 @@ import xcssConditional from '../../examples/constellation/xcss/conditional-style
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 <CodeDocsHeader
-  name="@atlaskit/primitives"
-  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
-  directoryName="primitives"
+	name="@atlaskit/primitives"
+	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+	directoryName="primitives"
 />
 
 ## Basic
@@ -31,12 +31,14 @@ To enable interactivity, use familiar selectors like `:hover` and `:focus-visibl
 
 ## Responsiveness
 
-XCSS also accepts a subset of media queries at [predefined breakpoints](/components/primitives/responsive/breakpoints/examples).
+XCSS also accepts a subset of media queries at
+[predefined breakpoints](/components/primitives/responsive/breakpoints/examples).
 
 <Example Component={xcssResponsive} packageName="@atlaskit/primitives/xcss" />
 
 ## Conditional styles
 
-For conditional styles, try composing styles together via the array with ternary or boolean operators.
+For conditional styles, try composing styles together via the array with ternary or boolean
+operators.
 
 <Example Component={xcssConditional} packageName="@atlaskit/primitives/xcss" />

package/constellation/xcss/migration.mdx

@@ -8,9 +8,8 @@ order: 2
 
 ### Changes for developers
 
-There are two key changes to be mindful of when migrating to XCSS.
-The first is updating callsites to remove any nested styles and
-tokenized values.
+There are two key changes to be mindful of when migrating to XCSS. The first is updating callsites
+to remove any nested styles and tokenized values.
 
 ```diff
 - import { css } from '@emotion/react';
@@ -26,8 +25,9 @@ tokenized values.
 });
 ```
 
-The second change is that for the `xcss` function to be applied correctly it must be applied on a component with an `xcss` JSXAttribute. This won't work with the `css` or `className`
-JSXAttributes, be aware if you're not seeing your styles appear.
+The second change is that for the `xcss` function to be applied correctly it must be applied on a
+component with an `xcss` JSXAttribute. This won't work with the `css` or `className` JSXAttributes,
+be aware if you're not seeing your styles appear.
 
 ```diff
 - <div css={someStyles} />
@@ -36,28 +36,32 @@ JSXAttributes, be aware if you're not seeing your styles appear.
 
 ### Changing the way you express styles
 
-Why are nested selectors a problem? A key philosophy of XCSS is encouraging more deterministic style application. Restricting nested styles eliminates side-effects and encourages component encapsulation. Consider the below example:
+Why are nested selectors a problem? A key philosophy of XCSS is encouraging more deterministic style
+application. Restricting nested styles eliminates side-effects and encourages component
+encapsulation. Consider the below example:
 
 ```tsx
 const myComponentStyles = css({
-  '> *': {
-    color: 'color.text.danger',
-  },
+	'> *': {
+		color: 'color.text.danger',
+	},
 });
 
 const MyComponent = () => (
-  <div css={myComponentStyles}>
-    <p>Text here</p>
-  </div>
+	<div css={myComponentStyles}>
+		<p>Text here</p>
+	</div>
 );
 ```
 
-Here the component is applying styles that are implicitly meant for the text wrapped in the `p` below.
-In this simple example, it may seem okay, desirable even, but cases like these often occur across module or component boundaries.
+Here the component is applying styles that are implicitly meant for the text wrapped in the `p`
+below. In this simple example, it may seem okay, desirable even, but cases like these often occur
+across module or component boundaries.
 
-This makes the visibility of these dependencies harder to capture or reason about.
-Styles that are inherited or indirectly apply make a UI vulnerable to change and harder to maintain.
-Instead, if the same styles are applied directly to the affected element this can minimize and in some cases completely eliminate this problem.
+This makes the visibility of these dependencies harder to capture or reason about. Styles that are
+inherited or indirectly apply make a UI vulnerable to change and harder to maintain. Instead, if the
+same styles are applied directly to the affected element this can minimize and in some cases
+completely eliminate this problem.
 
 ```diff
 const myTextStyles = xcss({
@@ -74,36 +78,39 @@ const MyComponent = () => (
 );
 ```
 
-There will likely be cases where nesting is the only option. While not desirable, nesting can be used minimally, and when the potential impact is considered.
+There will likely be cases where nesting is the only option. While not desirable, nesting can be
+used minimally, and when the potential impact is considered.
 
 ## FAQ
 
-Migration to XCSS is simple for the majority of cases. Here are some common strategies for migrations.
+Migration to XCSS is simple for the majority of cases. Here are some common strategies for
+migrations.
 
 ### Non-tokenized values
 
-Before migrating to tokens, there are two options. Migrate to tokens first and then on a second pass migrate to XCSS or make the jump directly to use both tokens and XCSS.
+Before migrating to tokens, there are two options. Migrate to tokens first and then on a second pass
+migrate to XCSS or make the jump directly to use both tokens and XCSS.
 
 ```tsx
 const someStyles = css({
-  color: 'red',
+	color: 'red',
 });
 
 // ->>> Optional middle step
 const someStyles = css({
-  color: token('color.text.danger'),
+	color: token('color.text.danger'),
 });
 
 // ->>> The final state
 const someStyles = xcss({
-  color: 'color.text.danger',
+	color: 'color.text.danger',
 });
 ```
 
 ### Moving from the `styled` API
 
-If currently using the `styled` API there are a few steps to migrate.
-The safest approach is to use object styles, migrate to tokens (optionally) and then migrate to XCSS.
+If currently using the `styled` API there are a few steps to migrate. The safest approach is to use
+object styles, migrate to tokens (optionally) and then migrate to XCSS.
 
 ```tsx
 const MyComponent = styled.div`

package/constellation/xcss/usage.mdx

@@ -6,15 +6,20 @@ order: 0
 
 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).
+XCSS is an Atlassian Design System styling API that natively integrates with Atlassian's
+[design tokens](/tokens) and [primitives](/components/primitives/overview).
 
-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.
+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.
+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:
 
@@ -24,7 +29,8 @@ Familiar features:
 
 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
@@ -36,7 +42,7 @@ import { xcss } from '@atlaskit/primitives';
 
 // Creates a basic style
 const someStyles = xcss({
-  display: 'block',
+	display: 'block',
 });
 ```
 
@@ -47,105 +53,111 @@ import { Box, xcss } from '@atlaskit/primitives';
 
 // Creates a basic style
 const someStyles = xcss({
-  display: 'block',
+	display: 'block',
 });
 
 const MyBox = () => {
-  return <Box xcss={someStyles} />;
+	return <Box xcss={someStyles} />;
 };
 ```
 
 The `xcss` prop and the `xcss` function are direct complements and are designed to be used together.
 
-It is important to note that styles generated from `xcss` cannot be applied directly to the `className` property or `css` as they are with other CSS-in-JS libraries.
+It is important to note that styles generated from `xcss` cannot be applied directly to the
+`className` property or `css` as they are with other CSS-in-JS libraries.
 
 ### Type safety
 
-XCSS uses strongly-typed values generated from design token definitions, making it simpler to apply the right token to the right CSS property.
-This is intended to be more ergonomic and intuitive, but also prevent the misapplication of tokens to the wrong properties.
+XCSS uses strongly-typed values generated from design token definitions, making it simpler to apply
+the right token to the right CSS property. This is intended to be more ergonomic and intuitive, but
+also prevent the misapplication of tokens to the wrong properties.
 
 Any [valid token name](/components/tokens/all-tokens) is available to be applied against its
-matching CSS property. For example, the token name `space.200`
-is a valid value below for `padding` but will not appear
-as a color, or a font.
+matching CSS property. For example, the token name `space.200` is a valid value below for `padding`
+but will not appear as a color, or a font.
 
 ```tsx
 import { xcss } from '@atlaskit/primitives';
 
 const someStyles = xcss({
-  padding: 'space.200', // <--- works
-  color: 'space.200', // <--- invalid and will error
-  borderRadius: 'border.radius.100', // <--- also valid
+	padding: 'space.200', // <--- works
+	color: 'space.200', // <--- invalid and will error
+	borderRadius: 'border.radius.100', // <--- also valid
 });
 ```
 
 ### Restricted nesting
 
-XCSS is flexible enough to implement any design, but it does restrict the application of styles in one key way.
-Selectors cannot be nested or target elements beyond the element on which styles are applied.
-This restriction is intended to encourage better component encapsulation, reduce side-effects and make the codebase more resilient to change.
+XCSS is flexible enough to implement any design, but it does restrict the application of styles in
+one key way. Selectors cannot be nested or target elements beyond the element on which styles are
+applied. This restriction is intended to encourage better component encapsulation, reduce
+side-effects and make the codebase more resilient to change.
 
 ```tsx
 import { xcss } from '@atlaskit/primitives';
 
 const someStyles = xcss({
-  ':hover': {
-    transform: 'scale(1)', // this is okay
-  },
-  // This is not okay as this selector affects any nested div in
-  // the component tree.
-  'div:hover': {
-    transform: 'scale(1)',
-  },
-  // Neither is this
-  '> * > div:hover': {
-    transform: 'scale(1)',
-  },
+	':hover': {
+		transform: 'scale(1)', // this is okay
+	},
+	// This is not okay as this selector affects any nested div in
+	// the component tree.
+	'div:hover': {
+		transform: 'scale(1)',
+	},
+	// Neither is this
+	'> * > div:hover': {
+		transform: 'scale(1)',
+	},
 });
 ```
 
-These unsafe selectors will throw a type error if applied.
-Find richer examples of how to use XCSS in the [XCSS examples](/components/primitives/xcss/examples).
+These unsafe selectors will throw a type error if applied. Find richer examples of how to use XCSS
+in the [XCSS examples](/components/primitives/xcss/examples).
 
 ### Media Queries
 
-XCSS can create responsive layouts at predefined breakpoints that are consistent with the Atlassian Design System. To enable responsive behavior, XCSS exposes the following pre-defined breakpoints:
+XCSS can create responsive layouts at predefined breakpoints that are consistent with the Atlassian
+Design System. To enable responsive behavior, XCSS exposes the following pre-defined breakpoints:
 
 <MediaQueriesTable />
 
-Media queries can be applied through keys imported from `@atlaskit/primitives/responsive`.
-Find more in depth examples on how to enable responsive behavior in the [responsive documentation](/components/primitives/xcss/examples#responsiveness).
+Media queries can be applied through keys imported from `@atlaskit/primitives/responsive`. Find more
+in depth examples on how to enable responsive behavior in the
+[responsive documentation](/components/primitives/xcss/examples#responsiveness).
 
-The objects defined at each breakpoint behave in much the same way as a normal XCSS object, and can apply responsiveness to any CSS.
-The only limitation is that a media query can't contain another media query. This is to prevent arbitrary nesting.
+The objects defined at each breakpoint behave in much the same way as a normal XCSS object, and can
+apply responsiveness to any CSS. The only limitation is that a media query can't contain another
+media query. This is to prevent arbitrary nesting.
 
-Additionally, pseudo-selectors can't contain media queries. To use media queries and pseudos, the media query must contain the pseudo.
+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';
 
 const someStyles = xcss({
-  // This is okay, since media queries can contain pseudos
-  [media.above.md]: {
-    ':hover': {
-      backgroundColor: 'color.background.primary.hovered'
-    }
-  },
-
-  // This is not okay, we don't allow pseudos to contain media queries
-  ':hover': {
-    [media.above.md]: {
-      backgroundColor: 'color.background.primary.hovered'
-    }
-  },
-
-  // This is not okay, since media queries can't contain media queries
-  [media.above.md]: {
-    [media.above.xs]: {
-      backgroundColor: 'color.background.primary.hovered'
-    }
-  },
+	// This is okay, since media queries can contain pseudos
+	[media.above.md]: {
+		':hover': {
+			backgroundColor: 'color.background.primary.hovered',
+		},
+	},
+
+	// This is not okay, we don't allow pseudos to contain media queries
+	':hover': {
+		[media.above.md]: {
+			backgroundColor: 'color.background.primary.hovered',
+		},
+	},
+
+	// This is not okay, since media queries can't contain media queries
+	[media.above.md]: {
+		[media.above.xs]: {
+			backgroundColor: 'color.background.primary.hovered',
+		},
+	},
 });
 ```
 

package/dist/cjs/components/anchor.js

@@ -46,7 +46,7 @@ var focusRingStyles = (0, _xcss.xcss)({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-var Anchor = function Anchor(_ref, ref) {
+var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -76,7 +76,7 @@ var Anchor = function Anchor(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.0",
+    packageVersion: "7.0.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -138,5 +138,5 @@ var Anchor = function Anchor(_ref, ref) {
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-var UNSAFE_ANCHOR = /*#__PURE__*/(0, _react.forwardRef)(Anchor);
-var _default = exports.default = UNSAFE_ANCHOR;
+var Anchor = /*#__PURE__*/(0, _react.forwardRef)(AnchorNoRef);
+var _default = exports.default = Anchor;

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

package/dist/cjs/xcss/style-maps.partial.js

@@ -12,11 +12,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7af6097e56f7fb03635b6f8aaf121b02>>
+ * @codegen <<SignedSource::c98c944b8a999cfc194a2cfe851d2433>>
  * @codegenId dimensions
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
  */
 var dimensionMap = exports.dimensionMap = {
   '100%': '100%',
@@ -34,7 +34,7 @@ var dimensionMap = exports.dimensionMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa8558eb2395e9d078e38d8b3b4e0bed>>
+ * @codegen <<SignedSource::0d3c08d703b8431712d7e238a3f7229b>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
@@ -73,7 +73,7 @@ var allSpaceMap = exports.allSpaceMap = _objectSpread(_objectSpread({}, positive
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::04aa48c107cf876807c6af948860857f>>
+ * @codegen <<SignedSource::dd33c75b34fe7374656f10b21ba9b161>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
@@ -114,7 +114,7 @@ var inverseColorMap = exports.inverseColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8a5d63089926d91b7cb79b7ddd40463b>>
+ * @codegen <<SignedSource::fde38a9999e3a081afa4a517da815ede>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
@@ -149,7 +149,7 @@ var surfaceColorMap = exports.surfaceColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::369117f6459016ec330d166ba9f4ad03>>
+ * @codegen <<SignedSource::485e5a3659092381fa81ce940d43a939>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
@@ -446,12 +446,12 @@ var fillMap = exports.fillMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::01a4b055c311d198921d4e000a2d7a54>>
+ * @codegen <<SignedSource::28920e82ff201211ac94808a1fd821d4>>
  * @codegenId misc
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["layer"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
- * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
  */
 var layerMap = exports.layerMap = {
   card: 100,
@@ -470,7 +470,7 @@ var layerMap = exports.layerMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8093f6eb366669dce5007011a3fd7814>>
+ * @codegen <<SignedSource::957baf1fa3fc3fe5eb06b497a7ba6599>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
@@ -497,12 +497,12 @@ var borderRadiusMap = exports.borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::01b50b6fc795db50002edbeb24634575>>
+ * @codegen <<SignedSource::cd260411f17d54ff1ac7e627ef070ef4>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
- * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
  */
 var fontSizeMap = exports.fontSizeMap = {
   medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",

package/dist/es2019/components/anchor.js

@@ -32,7 +32,7 @@ const focusRingStyles = xcss({
 });
 const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-const Anchor = ({
+const AnchorNoRef = ({
   href,
   children,
   backgroundColor,
@@ -62,7 +62,7 @@ const Anchor = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.0",
+    packageVersion: "7.0.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -124,5 +124,5 @@ const Anchor = ({
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-const UNSAFE_ANCHOR = /*#__PURE__*/forwardRef(Anchor);
-export default UNSAFE_ANCHOR;
+const Anchor = /*#__PURE__*/forwardRef(AnchorNoRef);
+export default Anchor;

package/dist/es2019/components/pressable.js

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

package/dist/es2019/xcss/style-maps.partial.js

@@ -3,11 +3,11 @@ import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7af6097e56f7fb03635b6f8aaf121b02>>
+ * @codegen <<SignedSource::c98c944b8a999cfc194a2cfe851d2433>>
  * @codegenId dimensions
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
  */
 export const dimensionMap = {
   '100%': '100%',
@@ -25,7 +25,7 @@ export const dimensionMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa8558eb2395e9d078e38d8b3b4e0bed>>
+ * @codegen <<SignedSource::0d3c08d703b8431712d7e238a3f7229b>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
@@ -67,7 +67,7 @@ export const allSpaceMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::04aa48c107cf876807c6af948860857f>>
+ * @codegen <<SignedSource::dd33c75b34fe7374656f10b21ba9b161>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
@@ -108,7 +108,7 @@ export const inverseColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8a5d63089926d91b7cb79b7ddd40463b>>
+ * @codegen <<SignedSource::fde38a9999e3a081afa4a517da815ede>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
@@ -143,7 +143,7 @@ export const surfaceColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::369117f6459016ec330d166ba9f4ad03>>
+ * @codegen <<SignedSource::485e5a3659092381fa81ce940d43a939>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
@@ -440,12 +440,12 @@ export const fillMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::01a4b055c311d198921d4e000a2d7a54>>
+ * @codegen <<SignedSource::28920e82ff201211ac94808a1fd821d4>>
  * @codegenId misc
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["layer"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
- * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
  */
 export const layerMap = {
   card: 100,
@@ -464,7 +464,7 @@ export const layerMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8093f6eb366669dce5007011a3fd7814>>
+ * @codegen <<SignedSource::957baf1fa3fc3fe5eb06b497a7ba6599>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
@@ -491,12 +491,12 @@ export const borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::01b50b6fc795db50002edbeb24634575>>
+ * @codegen <<SignedSource::cd260411f17d54ff1ac7e627ef070ef4>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
- * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
  */
 export const fontSizeMap = {
   medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",