@atlaskit/link-picker 1.34.2 → 1.34.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/link-picker
 
+## 1.34.4
+
+### Patch Changes
+
+- [#81744](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81744) [`4bb803ce7129`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4bb803ce7129) - Internal changes. There is no expected visual change.
+- Updated dependencies
+
+## 1.34.3
+
+### Patch Changes
+
+- [#81158](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81158) [`d08a50c6d90b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d08a50c6d90b) - Updates empty states to no longer use the `@atlaskit/empty-state` component in order to leverage Heading Provider from `@atlaskit/heading`, behind ff
+
 ## 1.34.2
 
 ### Patch Changes

package/dist/cjs/common/ui/empty-state/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyState = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _primitives = require("@atlaskit/primitives");
+var EmptyState = exports.EmptyState = function EmptyState(_ref) {
+  var testId = _ref.testId,
+    header = _ref.header,
+    description = _ref.description,
+    renderImage = _ref.renderImage;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: (0, _primitives.xcss)({
+      marginBlockStart: 'space.600',
+      marginBlockEnd: 'space.600',
+      textAlign: 'center'
+    }),
+    testId: testId,
+    direction: "column",
+    alignItems: "center",
+    gap: "space.100"
+  }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "medium"
+  }, header), description && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    as: "p",
+    color: 'color.text'
+  }, description));
+};

package/dist/cjs/ui/error-boundary/error-boundary-fallback/index.js

@@ -11,6 +11,7 @@ var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../common/constants");
 var _genericErrorSvg = require("../../../common/generic-error-svg");
+var _emptyState2 = require("../../../common/ui/empty-state");
 var _minHeightContainer = require("../../../common/ui/min-height-container");
 var _styled = require("../../link-picker/styled");
 var _styled2 = require("./styled");
@@ -34,12 +35,13 @@ var ErrorBoundaryFallback = exports.ErrorBoundaryFallback = function ErrorBounda
   var intl = (0, _reactIntlNext.useIntl)();
   var header = intl.formatMessage(messages.heading);
   var description = intl.formatMessage(messages.description);
+  var EmptyStateComponent = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.remove-dst-empty-state') ? _emptyState2.EmptyState : _emptyState.default;
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.fixed-height-search-results')) {
     return (0, _react.jsx)(_minHeightContainer.MinHeightContainer, {
       css: _styled2.errorBoundaryFallbackStyles,
       minHeight: _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
       "data-testid": "link-picker-root-error-boundary-ui"
-    }, (0, _react.jsx)(_emptyState.default, {
+    }, (0, _react.jsx)(EmptyStateComponent, {
       header: header,
       renderImage: function renderImage() {
         return (0, _react.jsx)(_genericErrorSvg.GenericErrorSVG, null);
@@ -50,7 +52,7 @@ var ErrorBoundaryFallback = exports.ErrorBoundaryFallback = function ErrorBounda
   return (0, _react.jsx)("div", {
     css: _styled.rootContainerStyles,
     "data-testid": "link-picker-root-error-boundary-ui"
-  }, (0, _react.jsx)(_emptyState.default, {
+  }, (0, _react.jsx)(EmptyStateComponent, {
     header: header,
     renderImage: function renderImage() {
       return (0, _react.jsx)(_genericErrorSvg.GenericErrorSVG, null);

package/dist/cjs/ui/index.js

@@ -26,7 +26,7 @@ var testIds = exports.testIds = {
 };
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "1.34.2" || '',
+  packageVersion: "1.34.4" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };

package/dist/cjs/ui/link-picker/search-results/link-search-error/index.js

@@ -10,7 +10,9 @@ var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _genericErrorSvg = require("../../../../common/generic-error-svg");
+var _emptyState2 = require("../../../../common/ui/empty-state");
 /** @jsx jsx */
 
 var CONTACT_SUPPORT_LINK = exports.CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
@@ -31,7 +33,8 @@ var testIds = exports.testIds = {
 };
 var LinkSearchError = exports.LinkSearchError = function LinkSearchError() {
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react.jsx)(_emptyState.default, {
+  var Component = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.remove-dst-empty-state') ? _emptyState2.EmptyState : _emptyState.default;
+  return (0, _react.jsx)(Component, {
     testId: testIds.searchError,
     header: intl.formatMessage(messages.searchErrorHeader),
     description: (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.searchErrorDescription, {

package/dist/cjs/ui/link-picker/search-results/link-search-list/link-search-no-results/index.js

@@ -8,6 +8,8 @@ exports.testIds = exports.messages = exports.NoResults = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _emptyState2 = require("../../../../../common/ui/empty-state");
 var _noResultsSvg = require("./no-results-svg");
 var _styled = require("./styled");
 /** @jsx jsx */
@@ -29,12 +31,13 @@ var testIds = exports.testIds = {
 };
 var NoResults = exports.NoResults = function NoResults() {
   var intl = (0, _reactIntlNext.useIntl)();
+  var Component = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.remove-dst-empty-state') ? _emptyState2.EmptyState : _emptyState.default;
   return (0, _react.jsx)("div", {
     css: _styled.emptyStateWrapperStyles
-  }, (0, _react.jsx)(_emptyState.default, {
+  }, (0, _react.jsx)(Component, {
     testId: testIds.emptyResultPage,
     header: intl.formatMessage(messages.noResults),
-    headingLevel: 3,
+    headingLevel: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.remove-dst-empty-state') ? undefined : 3,
     description: intl.formatMessage(messages.noResultsDescription),
     renderImage: function renderImage() {
       return (0, _react.jsx)(_noResultsSvg.NoResultsSVG, null);

package/dist/cjs/ui/link-picker/search-results/link-search-list/link-search-no-results/styled.js

@@ -1,12 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.emptyStateWrapperStyles = exports.emptyStateNoResultsWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2;
-var emptyStateWrapperStyles = exports.emptyStateWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & p {\n    margin: 0;\n  }\n"])));
-var emptyStateNoResultsWrapper = exports.emptyStateNoResultsWrapper = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: ", ";\n"])), "var(--ds-space-200, 16px)");
+var emptyStateWrapperStyles = exports.emptyStateWrapperStyles = (0, _react.css)({
+  '& p': {
+    margin: 0
+  }
+});
+var emptyStateNoResultsWrapper = exports.emptyStateNoResultsWrapper = (0, _react.css)({
+  minHeight: "var(--ds-space-200, 16px)"
+});

package/dist/es2019/common/ui/empty-state/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+export const EmptyState = ({
+  testId,
+  header,
+  description,
+  renderImage
+}) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: xcss({
+      marginBlockStart: 'space.600',
+      marginBlockEnd: 'space.600',
+      textAlign: 'center'
+    }),
+    testId: testId,
+    direction: "column",
+    alignItems: "center",
+    gap: "space.100"
+  }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/React.createElement(Heading, {
+    size: "medium"
+  }, header), description && /*#__PURE__*/React.createElement(Box, {
+    as: "p",
+    color: 'color.text'
+  }, description));
+};

package/dist/es2019/ui/error-boundary/error-boundary-fallback/index.js

@@ -5,6 +5,7 @@ import EmptyState from '@atlaskit/empty-state';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK } from '../../../common/constants';
 import { GenericErrorSVG } from '../../../common/generic-error-svg';
+import { EmptyState as EmptyStateInternal } from '../../../common/ui/empty-state';
 import { MinHeightContainer } from '../../../common/ui/min-height-container';
 // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
 import { rootContainerStyles } from '../../link-picker/styled';
@@ -25,12 +26,13 @@ export const ErrorBoundaryFallback = () => {
   const intl = useIntl();
   const header = intl.formatMessage(messages.heading);
   const description = intl.formatMessage(messages.description);
+  const EmptyStateComponent = getBooleanFF('platform.linking-platform.link-picker.remove-dst-empty-state') ? EmptyStateInternal : EmptyState;
   if (getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results')) {
     return jsx(MinHeightContainer, {
       css: errorBoundaryFallbackStyles,
       minHeight: LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
       "data-testid": "link-picker-root-error-boundary-ui"
-    }, jsx(EmptyState, {
+    }, jsx(EmptyStateComponent, {
       header: header,
       renderImage: () => jsx(GenericErrorSVG, null),
       description: description
@@ -39,7 +41,7 @@ export const ErrorBoundaryFallback = () => {
   return jsx("div", {
     css: rootContainerStyles,
     "data-testid": "link-picker-root-error-boundary-ui"
-  }, jsx(EmptyState, {
+  }, jsx(EmptyStateComponent, {
     header: header,
     renderImage: () => jsx(GenericErrorSVG, null),
     description: description

package/dist/es2019/ui/index.js

@@ -16,7 +16,7 @@ export const testIds = {
 };
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "1.34.2" || '',
+  packageVersion: "1.34.4" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/es2019/ui/link-picker/search-results/link-search-error/index.js

@@ -4,7 +4,9 @@ import { jsx } from '@emotion/react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import EmptyState from '@atlaskit/empty-state';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { GenericErrorSVG } from '../../../../common/generic-error-svg';
+import { EmptyState as EmptyStateInternal } from '../../../../common/ui/empty-state';
 export const CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export const messages = defineMessages({
   searchErrorHeader: {
@@ -23,7 +25,8 @@ export const testIds = {
 };
 export const LinkSearchError = () => {
   const intl = useIntl();
-  return jsx(EmptyState, {
+  const Component = getBooleanFF('platform.linking-platform.link-picker.remove-dst-empty-state') ? EmptyStateInternal : EmptyState;
+  return jsx(Component, {
     testId: testIds.searchError,
     header: intl.formatMessage(messages.searchErrorHeader),
     description: jsx(FormattedMessage, _extends({}, messages.searchErrorDescription, {

package/dist/es2019/ui/link-picker/search-results/link-search-list/link-search-no-results/index.js

@@ -2,6 +2,8 @@
 import { jsx } from '@emotion/react';
 import { defineMessages, useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { EmptyState as EmptyStateInternal } from '../../../../../common/ui/empty-state';
 import { NoResultsSVG } from './no-results-svg';
 import { emptyStateWrapperStyles } from './styled';
 export const messages = defineMessages({
@@ -21,12 +23,13 @@ export const testIds = {
 };
 export const NoResults = () => {
   const intl = useIntl();
+  const Component = getBooleanFF('platform.linking-platform.link-picker.remove-dst-empty-state') ? EmptyStateInternal : EmptyState;
   return jsx("div", {
     css: emptyStateWrapperStyles
-  }, jsx(EmptyState, {
+  }, jsx(Component, {
     testId: testIds.emptyResultPage,
     header: intl.formatMessage(messages.noResults),
-    headingLevel: 3,
+    headingLevel: getBooleanFF('platform.linking-platform.link-picker.remove-dst-empty-state') ? undefined : 3,
     description: intl.formatMessage(messages.noResultsDescription),
     renderImage: () => jsx(NoResultsSVG, null)
   }));

package/dist/es2019/ui/link-picker/search-results/link-search-list/link-search-no-results/styled.js

@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
-export const emptyStateWrapperStyles = css`
-  & p {
-    margin: 0;
+export const emptyStateWrapperStyles = css({
+  '& p': {
+    margin: 0
   }
-`;
-export const emptyStateNoResultsWrapper = css`
-  min-height: ${"var(--ds-space-200, 16px)"};
-`;
+});
+export const emptyStateNoResultsWrapper = css({
+  minHeight: "var(--ds-space-200, 16px)"
+});

package/dist/esm/common/ui/empty-state/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+export var EmptyState = function EmptyState(_ref) {
+  var testId = _ref.testId,
+    header = _ref.header,
+    description = _ref.description,
+    renderImage = _ref.renderImage;
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: xcss({
+      marginBlockStart: 'space.600',
+      marginBlockEnd: 'space.600',
+      textAlign: 'center'
+    }),
+    testId: testId,
+    direction: "column",
+    alignItems: "center",
+    gap: "space.100"
+  }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/React.createElement(Heading, {
+    size: "medium"
+  }, header), description && /*#__PURE__*/React.createElement(Box, {
+    as: "p",
+    color: 'color.text'
+  }, description));
+};

package/dist/esm/ui/error-boundary/error-boundary-fallback/index.js

@@ -5,6 +5,7 @@ import EmptyState from '@atlaskit/empty-state';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK } from '../../../common/constants';
 import { GenericErrorSVG } from '../../../common/generic-error-svg';
+import { EmptyState as EmptyStateInternal } from '../../../common/ui/empty-state';
 import { MinHeightContainer } from '../../../common/ui/min-height-container';
 // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
 import { rootContainerStyles } from '../../link-picker/styled';
@@ -25,12 +26,13 @@ export var ErrorBoundaryFallback = function ErrorBoundaryFallback() {
   var intl = useIntl();
   var header = intl.formatMessage(messages.heading);
   var description = intl.formatMessage(messages.description);
+  var EmptyStateComponent = getBooleanFF('platform.linking-platform.link-picker.remove-dst-empty-state') ? EmptyStateInternal : EmptyState;
   if (getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results')) {
     return jsx(MinHeightContainer, {
       css: errorBoundaryFallbackStyles,
       minHeight: LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
       "data-testid": "link-picker-root-error-boundary-ui"
-    }, jsx(EmptyState, {
+    }, jsx(EmptyStateComponent, {
       header: header,
       renderImage: function renderImage() {
         return jsx(GenericErrorSVG, null);
@@ -41,7 +43,7 @@ export var ErrorBoundaryFallback = function ErrorBoundaryFallback() {
   return jsx("div", {
     css: rootContainerStyles,
     "data-testid": "link-picker-root-error-boundary-ui"
-  }, jsx(EmptyState, {
+  }, jsx(EmptyStateComponent, {
     header: header,
     renderImage: function renderImage() {
       return jsx(GenericErrorSVG, null);

package/dist/esm/ui/index.js

@@ -17,7 +17,7 @@ export var testIds = {
 };
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "1.34.2" || '',
+  packageVersion: "1.34.4" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/esm/ui/link-picker/search-results/link-search-error/index.js

@@ -4,7 +4,9 @@ import { jsx } from '@emotion/react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import EmptyState from '@atlaskit/empty-state';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { GenericErrorSVG } from '../../../../common/generic-error-svg';
+import { EmptyState as EmptyStateInternal } from '../../../../common/ui/empty-state';
 export var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export var messages = defineMessages({
   searchErrorHeader: {
@@ -23,7 +25,8 @@ export var testIds = {
 };
 export var LinkSearchError = function LinkSearchError() {
   var intl = useIntl();
-  return jsx(EmptyState, {
+  var Component = getBooleanFF('platform.linking-platform.link-picker.remove-dst-empty-state') ? EmptyStateInternal : EmptyState;
+  return jsx(Component, {
     testId: testIds.searchError,
     header: intl.formatMessage(messages.searchErrorHeader),
     description: jsx(FormattedMessage, _extends({}, messages.searchErrorDescription, {

package/dist/esm/ui/link-picker/search-results/link-search-list/link-search-no-results/index.js

@@ -2,6 +2,8 @@
 import { jsx } from '@emotion/react';
 import { defineMessages, useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { EmptyState as EmptyStateInternal } from '../../../../../common/ui/empty-state';
 import { NoResultsSVG } from './no-results-svg';
 import { emptyStateWrapperStyles } from './styled';
 export var messages = defineMessages({
@@ -21,12 +23,13 @@ export var testIds = {
 };
 export var NoResults = function NoResults() {
   var intl = useIntl();
+  var Component = getBooleanFF('platform.linking-platform.link-picker.remove-dst-empty-state') ? EmptyStateInternal : EmptyState;
   return jsx("div", {
     css: emptyStateWrapperStyles
-  }, jsx(EmptyState, {
+  }, jsx(Component, {
     testId: testIds.emptyResultPage,
     header: intl.formatMessage(messages.noResults),
-    headingLevel: 3,
+    headingLevel: getBooleanFF('platform.linking-platform.link-picker.remove-dst-empty-state') ? undefined : 3,
     description: intl.formatMessage(messages.noResultsDescription),
     renderImage: function renderImage() {
       return jsx(NoResultsSVG, null);

package/dist/esm/ui/link-picker/search-results/link-search-list/link-search-no-results/styled.js

@@ -1,5 +1,9 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
-export var emptyStateWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & p {\n    margin: 0;\n  }\n"])));
-export var emptyStateNoResultsWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-height: ", ";\n"])), "var(--ds-space-200, 16px)");
+export var emptyStateWrapperStyles = css({
+  '& p': {
+    margin: 0
+  }
+});
+export var emptyStateNoResultsWrapper = css({
+  minHeight: "var(--ds-space-200, 16px)"
+});

package/dist/types/common/ui/empty-state/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type EmptyStateProps = {
+    header: string;
+    testId?: string;
+    description?: React.ReactNode;
+    renderImage?: () => React.ReactNode;
+};
+export declare const EmptyState: ({ testId, header, description, renderImage, }: EmptyStateProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/common/ui/empty-state/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type EmptyStateProps = {
+    header: string;
+    testId?: string;
+    description?: React.ReactNode;
+    renderImage?: () => React.ReactNode;
+};
+export declare const EmptyState: ({ testId, header, description, renderImage, }: EmptyStateProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.34.2",
+  "version": "1.34.4",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -49,6 +49,9 @@
     },
     "platform.linking-platform.link-picker.use-onsubmitcapture": {
       "type": "boolean"
+    },
+    "platform.linking-platform.link-picker.remove-dst-empty-state": {
+      "type": "boolean"
     }
   },
   "scripts": {
@@ -61,11 +64,13 @@
     "@atlaskit/empty-state": "^7.7.0",
     "@atlaskit/form": "^9.0.3",
     "@atlaskit/frontend-utilities": "^2.7.0",
+    "@atlaskit/heading": "^2.0.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/intl-messages-provider": "^1.0.2",
-    "@atlaskit/linking-common": "^5.4.0",
+    "@atlaskit/linking-common": "^5.5.0",
     "@atlaskit/onboarding": "^11.2.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
+    "@atlaskit/primitives": "^5.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/tabs": "^14.0.0",
     "@atlaskit/textfield": "^6.1.0",
@@ -93,7 +98,6 @@
     "@atlaskit/dropdown-menu": "^12.8.0",
     "@atlaskit/link-provider": "^1.8.0",
     "@atlaskit/link-test-helpers": "^6.2.0",
-    "@atlaskit/primitives": "^4.1.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@atlassian/feature-flags-test-utils": "*",