@atlaskit/page-layout 3.2.2 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/page-layout
 
+## 3.3.1
+
+### Patch Changes
+
+-   [#104255](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104255)
+    [`8a21e4b04c50`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8a21e4b04c50) -
+    Migration to ADS link components: Link and Anchor
+
+## 3.3.0
+
+### Minor Changes
+
+-   [#100748](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100748)
+    [`ff76f4c7a63d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ff76f4c7a63d) -
+    Add support for React 18.
+
 ## 3.2.2
 
 ### Patch Changes

package/__perf__/examples.tsx

@@ -8,8 +8,8 @@ import {
 } from '@testing-library/dom'; // eslint-disable-line import/no-extraneous-dependencies
 // eslint-disable-next-line import/no-extraneous-dependencies
 import {
-  InteractionTaskArgs,
-  PublicInteractionTask,
+  type InteractionTaskArgs,
+  type PublicInteractionTask,
 } from 'storybook-addon-performance'; // eslint-disable-line import/no-extraneous-dependencies
 
 import ProductExample from './utils/perf-example';
@@ -69,6 +69,7 @@ const interactionTasks: PublicInteractionTask[] = [
 
 const performance = () => {
   return (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     <div style={{ margin: '-1rem 0 0 -1rem', height: '100vh' }}>
       <ProductExample />
     </div>

package/__perf__/utils/product-integration/atlassian-navigation.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { Fragment, MouseEvent, useState } from 'react';
+import { Fragment, type MouseEvent, useState } from 'react';
 
 import { jsx } from '@emotion/react';
 

package/__perf__/utils/product-integration/create.tsx

@@ -7,6 +7,7 @@ import { token } from '@atlaskit/tokens';
 const StyledTooltip = () => (
   <span>
     Create
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
     <span style={{ color: token('color.text.accent.orange', 'orange') }}>
       {' '}
       [c]

package/__perf__/utils/product-integration/profile-popup.tsx

@@ -58,6 +58,7 @@ export const ProfilePopup = () => {
         <Profile
           icon={
             <img
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               style={imgCSS}
               src={avatarUrl}
               alt="Your profile and settings"

package/__perf__/utils/product-integration/sample-footer.tsx

@@ -3,7 +3,7 @@ import { Fragment } from 'react';
 
 import { css, jsx } from '@emotion/react';
 
-import { CustomItemComponentProps } from '@atlaskit/menu';
+import { type CustomItemComponentProps } from '@atlaskit/menu';
 import { Footer } from '@atlaskit/side-navigation';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';

package/__perf__/utils/product-integration/sample-header.tsx

@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/react';
 
 import Icon from '@atlaskit/icon';
-import { CustomItemComponentProps } from '@atlaskit/menu';
+import { type CustomItemComponentProps } from '@atlaskit/menu';
 import { Header } from '@atlaskit/side-navigation';
 
 const Container = (props: CustomItemComponentProps) => {

package/dist/cjs/components/skip-links/skip-link-components.js

@@ -8,8 +8,10 @@ exports.SkipLinkWrapper = exports.SkipLink = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _link = _interopRequireDefault(require("@atlaskit/link"));
 var _motion = require("@atlaskit/motion");
 var _colors = require("@atlaskit/theme/colors");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _constants = require("../../common/constants");
 var _controllers = require("../../controllers");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -17,27 +19,21 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 var skipLinkStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  margin: 10,
+  margin: "var(--ds-space-250, 10px)",
   padding: '0.8rem 1rem',
   position: 'fixed',
   zIndex: -1,
-  left: -999999,
   background: "var(--ds-surface-overlay, white)",
   border: 'none',
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 10px ").concat(_colors.N30A, ", 0 0 20px -4px ").concat(_colors.N60A), ")"),
+  insetInlineStart: -999999,
   opacity: 0,
-  /* Do the transform when focused */
   transform: 'translateY(-50%)',
   transition: "transform 0.3s ".concat(_motion.easeOut),
   ':focus-within': {
-    /**
-     * Max z-index is 2147483647. Skip links always be on top,
-     * but giving a few digits extra space just in case there's a future need.
-     */
     zIndex: 2147483640,
-    left: 0,
+    insetInlineStart: 0,
     opacity: 1,
     transform: 'translateY(0%)'
   }
@@ -46,13 +42,13 @@ var skipLinkHeadingStyles = (0, _react.css)({
   fontWeight: 600
 });
 var skipLinkListStyles = (0, _react.css)({
-  marginTop: "var(--ds-space-050, 4px)",
-  paddingLeft: 0,
   listStylePosition: 'outside',
-  listStyleType: 'none'
+  listStyleType: 'none',
+  marginBlockStart: "var(--ds-space-050, 4px)",
+  paddingInlineStart: 0
 });
 var skipLinkListItemStyles = (0, _react.css)({
-  marginTop: 0
+  marginBlockStart: 0
 });
 var assignIndex = function assignIndex(num, arr) {
   if (!arr.includes(num)) {
@@ -130,7 +126,7 @@ var SkipLinkWrapper = exports.SkipLinkWrapper = function SkipLinkWrapper(_ref) {
       key: id,
       href: "#".concat(id),
       isFocusable: true,
-      title: emptyLabelOverride ? "".concat(_constants.DEFAULT_I18N_PROPS_SKIP_LINKS, " ").concat(skipLinkTitle) : "".concat(label, " ").concat(skipLinkTitle)
+      skipToLabel: emptyLabelOverride ? "".concat(_constants.DEFAULT_I18N_PROPS_SKIP_LINKS, " ").concat(skipLinkTitle) : "".concat(label, " ").concat(skipLinkTitle)
     }, skipLinkTitle);
   })));
 };
@@ -172,13 +168,12 @@ var SkipLink = exports.SkipLink = function SkipLink(_ref3) {
   var href = _ref3.href,
     children = _ref3.children,
     isFocusable = _ref3.isFocusable,
-    title = _ref3.title;
+    skipToLabel = _ref3.skipToLabel;
   return (0, _react.jsx)("li", {
     css: skipLinkListItemStyles
-  }, (0, _react.jsx)("a", {
+  }, (0, _react.jsx)(_link.default, {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
-    onClick: focusTargetRef(href),
-    title: title
-  }, children));
+    onClick: focusTargetRef(href)
+  }, (0, _react.jsx)(_visuallyHidden.default, null, skipToLabel), children));
 };

package/dist/cjs/components/slots/banner-slot.js

@@ -59,7 +59,9 @@ var Banner = function Banner(props) {
   return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
     return (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: [bannerStyles, isFixed && bannerFixedStyles],
+      css: [bannerStyles, isFixed && bannerFixedStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       "data-testid": testId,
       id: id

package/dist/cjs/components/slots/internal/left-sidebar-outer.js

@@ -99,7 +99,9 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
         // mobile viewport styles
         mobileStyles, isFlyoutOpen && mobileFlyoutStyles,
         // generic styles
-        outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles],
+        outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: className,
         "data-testid": testId,
         id: id

package/dist/cjs/components/slots/left-panel.js

@@ -55,7 +55,9 @@ var LeftPanel = function LeftPanel(props) {
   return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
     return (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: [leftPanelStyles, isFixed && leftPanelFixedStyles],
+      css: [leftPanelStyles, isFixed && leftPanelFixedStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       "data-testid": testId,
       id: id

package/dist/cjs/components/slots/main.js

@@ -64,7 +64,9 @@ var Main = function Main(props) {
     var className = _ref.className;
     return (0, _react2.jsx)("main", (0, _extends2.default)({
       "data-testid": testId,
-      css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
+      css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       id: id
     }, (0, _utils.getPageLayoutSlotSelector)('main')), children);

package/dist/cjs/components/slots/right-panel.js

@@ -55,7 +55,9 @@ var RightPanel = function RightPanel(props) {
   return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
     return (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: [baseStyles, isFixed && fixedStyles],
+      css: [baseStyles, isFixed && fixedStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       "data-testid": testId,
       id: id

package/dist/cjs/components/slots/right-sidebar.js

@@ -86,7 +86,9 @@ var RightSidebar = function RightSidebar(props) {
     var className = _ref.className;
     return (0, _react2.jsx)("div", (0, _extends2.default)({
       "data-testid": testId,
-      css: [outerStyles, isFixed && fixedOuterStyles],
+      css: [outerStyles, isFixed && fixedOuterStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       id: id
     }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _react2.jsx)(_slotDimensions.default, {

package/dist/cjs/components/slots/top-navigation.js

@@ -60,7 +60,9 @@ var TopNavigation = function TopNavigation(props) {
   return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
     return (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: [topNavigationStyles, isFixed && fixedStyles],
+      css: [topNavigationStyles, isFixed && fixedStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       "data-testid": testId,
       id: id

package/dist/es2019/components/skip-links/skip-link-components.js

@@ -2,34 +2,30 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
+import Link from '@atlaskit/link';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { N30A, N60A } from '@atlaskit/theme/colors';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
 import { useSkipLinks } from '../../controllers';
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 const skipLinkStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  margin: 10,
+  margin: "var(--ds-space-250, 10px)",
   padding: '0.8rem 1rem',
   position: 'fixed',
   zIndex: -1,
-  left: -999999,
   background: "var(--ds-surface-overlay, white)",
   border: 'none',
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 10px ${N30A}, 0 0 20px -4px ${N60A}`})`,
+  insetInlineStart: -999999,
   opacity: 0,
-  /* Do the transform when focused */
   transform: 'translateY(-50%)',
   transition: `transform 0.3s ${easeOut}`,
   ':focus-within': {
-    /**
-     * Max z-index is 2147483647. Skip links always be on top,
-     * but giving a few digits extra space just in case there's a future need.
-     */
     zIndex: 2147483640,
-    left: 0,
+    insetInlineStart: 0,
     opacity: 1,
     transform: 'translateY(0%)'
   }
@@ -38,13 +34,13 @@ const skipLinkHeadingStyles = css({
   fontWeight: 600
 });
 const skipLinkListStyles = css({
-  marginTop: "var(--ds-space-050, 4px)",
-  paddingLeft: 0,
   listStylePosition: 'outside',
-  listStyleType: 'none'
+  listStyleType: 'none',
+  marginBlockStart: "var(--ds-space-050, 4px)",
+  paddingInlineStart: 0
 });
 const skipLinkListItemStyles = css({
-  marginTop: 0
+  marginBlockStart: 0
 });
 const assignIndex = (num, arr) => {
   if (!arr.includes(num)) {
@@ -113,7 +109,7 @@ export const SkipLinkWrapper = ({
     key: id,
     href: `#${id}`,
     isFocusable: true,
-    title: emptyLabelOverride ? `${DEFAULT_I18N_PROPS_SKIP_LINKS} ${skipLinkTitle}` : `${label} ${skipLinkTitle}`
+    skipToLabel: emptyLabelOverride ? `${DEFAULT_I18N_PROPS_SKIP_LINKS} ${skipLinkTitle}` : `${label} ${skipLinkTitle}`
   }, skipLinkTitle))));
 };
 const handleBlur = event => {
@@ -152,14 +148,13 @@ export const SkipLink = ({
   href,
   children,
   isFocusable,
-  title
+  skipToLabel
 }) => {
   return jsx("li", {
     css: skipLinkListItemStyles
-  }, jsx("a", {
+  }, jsx(Link, {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
-    onClick: focusTargetRef(href),
-    title: title
-  }, children));
+    onClick: focusTargetRef(href)
+  }, jsx(VisuallyHidden, null, skipToLabel), children));
 };

package/dist/es2019/components/slots/banner-slot.js

@@ -54,7 +54,9 @@ const Banner = props => {
   return jsx(SlotFocusRing, null, ({
     className
   }) => jsx("div", _extends({
-    css: [bannerStyles, isFixed && bannerFixedStyles],
+    css: [bannerStyles, isFixed && bannerFixedStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-testid": testId,
     id: id

package/dist/es2019/components/slots/internal/left-sidebar-outer.js

@@ -100,7 +100,9 @@ const LeftSidebarOuter = ({
     // mobile viewport styles
     mobileStyles, isFlyoutOpen && mobileFlyoutStyles,
     // generic styles
-    outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles],
+    outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-testid": testId,
     id: id

package/dist/es2019/components/slots/left-panel.js

@@ -51,7 +51,9 @@ const LeftPanel = props => {
   return jsx(SlotFocusRing, null, ({
     className
   }) => jsx("div", _extends({
-    css: [leftPanelStyles, isFixed && leftPanelFixedStyles],
+    css: [leftPanelStyles, isFixed && leftPanelFixedStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-testid": testId,
     id: id

package/dist/es2019/components/slots/main.js

@@ -61,7 +61,9 @@ const Main = props => {
     className
   }) => jsx("main", _extends({
     "data-testid": testId,
-    css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
+    css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     id: id
   }, getPageLayoutSlotSelector('main')), children));

package/dist/es2019/components/slots/right-panel.js

@@ -51,7 +51,9 @@ const RightPanel = props => {
   return jsx(SlotFocusRing, null, ({
     className
   }) => jsx("div", _extends({
-    css: [baseStyles, isFixed && fixedStyles],
+    css: [baseStyles, isFixed && fixedStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-testid": testId,
     id: id

package/dist/es2019/components/slots/right-sidebar.js

@@ -83,7 +83,9 @@ const RightSidebar = props => {
     className
   }) => jsx("div", _extends({
     "data-testid": testId,
-    css: [outerStyles, isFixed && fixedOuterStyles],
+    css: [outerStyles, isFixed && fixedOuterStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     id: id
   }, getPageLayoutSlotSelector('right-sidebar')), jsx(SlotDimensions, {

package/dist/es2019/components/slots/top-navigation.js

@@ -55,7 +55,9 @@ const TopNavigation = props => {
   return jsx(SlotFocusRing, null, ({
     className
   }) => jsx("div", _extends({
-    css: [topNavigationStyles, isFixed && fixedStyles],
+    css: [topNavigationStyles, isFixed && fixedStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-testid": testId,
     id: id

package/dist/esm/components/skip-links/skip-link-components.js

@@ -6,34 +6,30 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
+import Link from '@atlaskit/link';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { N30A, N60A } from '@atlaskit/theme/colors';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
 import { useSkipLinks } from '../../controllers';
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 var skipLinkStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  margin: 10,
+  margin: "var(--ds-space-250, 10px)",
   padding: '0.8rem 1rem',
   position: 'fixed',
   zIndex: -1,
-  left: -999999,
   background: "var(--ds-surface-overlay, white)",
   border: 'none',
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 10px ").concat(N30A, ", 0 0 20px -4px ").concat(N60A), ")"),
+  insetInlineStart: -999999,
   opacity: 0,
-  /* Do the transform when focused */
   transform: 'translateY(-50%)',
   transition: "transform 0.3s ".concat(easeOut),
   ':focus-within': {
-    /**
-     * Max z-index is 2147483647. Skip links always be on top,
-     * but giving a few digits extra space just in case there's a future need.
-     */
     zIndex: 2147483640,
-    left: 0,
+    insetInlineStart: 0,
     opacity: 1,
     transform: 'translateY(0%)'
   }
@@ -42,13 +38,13 @@ var skipLinkHeadingStyles = css({
   fontWeight: 600
 });
 var skipLinkListStyles = css({
-  marginTop: "var(--ds-space-050, 4px)",
-  paddingLeft: 0,
   listStylePosition: 'outside',
-  listStyleType: 'none'
+  listStyleType: 'none',
+  marginBlockStart: "var(--ds-space-050, 4px)",
+  paddingInlineStart: 0
 });
 var skipLinkListItemStyles = css({
-  marginTop: 0
+  marginBlockStart: 0
 });
 var assignIndex = function assignIndex(num, arr) {
   if (!arr.includes(num)) {
@@ -126,7 +122,7 @@ export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
       key: id,
       href: "#".concat(id),
       isFocusable: true,
-      title: emptyLabelOverride ? "".concat(DEFAULT_I18N_PROPS_SKIP_LINKS, " ").concat(skipLinkTitle) : "".concat(label, " ").concat(skipLinkTitle)
+      skipToLabel: emptyLabelOverride ? "".concat(DEFAULT_I18N_PROPS_SKIP_LINKS, " ").concat(skipLinkTitle) : "".concat(label, " ").concat(skipLinkTitle)
     }, skipLinkTitle);
   })));
 };
@@ -168,13 +164,12 @@ export var SkipLink = function SkipLink(_ref3) {
   var href = _ref3.href,
     children = _ref3.children,
     isFocusable = _ref3.isFocusable,
-    title = _ref3.title;
+    skipToLabel = _ref3.skipToLabel;
   return jsx("li", {
     css: skipLinkListItemStyles
-  }, jsx("a", {
+  }, jsx(Link, {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
-    onClick: focusTargetRef(href),
-    title: title
-  }, children));
+    onClick: focusTargetRef(href)
+  }, jsx(VisuallyHidden, null, skipToLabel), children));
 };

package/dist/esm/components/slots/banner-slot.js

@@ -51,7 +51,9 @@ var Banner = function Banner(props) {
   return jsx(SlotFocusRing, null, function (_ref) {
     var className = _ref.className;
     return jsx("div", _extends({
-      css: [bannerStyles, isFixed && bannerFixedStyles],
+      css: [bannerStyles, isFixed && bannerFixedStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       "data-testid": testId,
       id: id

package/dist/esm/components/slots/internal/left-sidebar-outer.js

@@ -91,7 +91,9 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
         // mobile viewport styles
         mobileStyles, isFlyoutOpen && mobileFlyoutStyles,
         // generic styles
-        outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles],
+        outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: className,
         "data-testid": testId,
         id: id

package/dist/esm/components/slots/left-panel.js

@@ -47,7 +47,9 @@ var LeftPanel = function LeftPanel(props) {
   return jsx(SlotFocusRing, null, function (_ref) {
     var className = _ref.className;
     return jsx("div", _extends({
-      css: [leftPanelStyles, isFixed && leftPanelFixedStyles],
+      css: [leftPanelStyles, isFixed && leftPanelFixedStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       "data-testid": testId,
       id: id

package/dist/esm/components/slots/main.js

@@ -57,7 +57,9 @@ var Main = function Main(props) {
     var className = _ref.className;
     return jsx("main", _extends({
       "data-testid": testId,
-      css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
+      css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       id: id
     }, getPageLayoutSlotSelector('main')), children);

package/dist/esm/components/slots/right-panel.js

@@ -47,7 +47,9 @@ var RightPanel = function RightPanel(props) {
   return jsx(SlotFocusRing, null, function (_ref) {
     var className = _ref.className;
     return jsx("div", _extends({
-      css: [baseStyles, isFixed && fixedStyles],
+      css: [baseStyles, isFixed && fixedStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       "data-testid": testId,
       id: id

package/dist/esm/components/slots/right-sidebar.js

@@ -79,7 +79,9 @@ var RightSidebar = function RightSidebar(props) {
     var className = _ref.className;
     return jsx("div", _extends({
       "data-testid": testId,
-      css: [outerStyles, isFixed && fixedOuterStyles],
+      css: [outerStyles, isFixed && fixedOuterStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       id: id
     }, getPageLayoutSlotSelector('right-sidebar')), jsx(SlotDimensions, {

package/dist/esm/components/slots/top-navigation.js

@@ -52,7 +52,9 @@ var TopNavigation = function TopNavigation(props) {
   return jsx(SlotFocusRing, null, function (_ref) {
     var className = _ref.className;
     return jsx("div", _extends({
-      css: [topNavigationStyles, isFixed && fixedStyles],
+      css: [topNavigationStyles, isFixed && fixedStyles]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       "data-testid": testId,
       id: id

package/dist/types/common/types.d.ts

@@ -1,6 +1,6 @@
-import { ElementType, ReactElement, ReactNode } from 'react';
-import { ResizeButtonProps } from '../components/resize-control/types';
-import { LeftSidebarState } from '../controllers/sidebar-resize-context';
+import { type ElementType, type ReactElement, type ReactNode } from 'react';
+import { type ResizeButtonProps } from '../components/resize-control/types';
+import { type LeftSidebarState } from '../controllers/sidebar-resize-context';
 interface SlotProps {
     /**
      * Sets the position to fixed.

package/dist/types/common/utils.d.ts

@@ -1,4 +1,4 @@
-import { DimensionNames, Dimensions } from './types';
+import { type DimensionNames, type Dimensions } from './types';
 declare const emptyGridState: Dimensions;
 declare const mergeGridStateIntoStorage: (key: string, value: any) => void;
 declare const getGridStateFromStorage: (key: string) => any;

package/dist/types/components/resize-control/grab-area.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { ComponentProps, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
+import { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEvent } from 'react';
 import { jsx } from '@emotion/react';
-import { LeftSidebarProps } from '../../common/types';
+import { type LeftSidebarProps } from '../../common/types';
 export type GrabAreaProps = {
     isDisabled: boolean;
     isLeftSidebarCollapsed: boolean;

package/dist/types/components/resize-control/index.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
-import { ResizeControlProps } from './types';
+import { type ResizeControlProps } from './types';
 declare const ResizeControl: ({ testId, overrides, resizeButtonLabel, valueTextLabel, resizeGrabAreaLabel, onResizeStart, onResizeEnd, }: ResizeControlProps) => jsx.JSX.Element;
 export default ResizeControl;

package/dist/types/components/resize-control/resize-button.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
-import { ResizeButtonProps } from './types';
+import { type ResizeButtonProps } from './types';
 declare const ResizeButton: ({ isLeftSidebarCollapsed, label, testId, ...props }: ResizeButtonProps) => jsx.JSX.Element;
 export default ResizeButton;

package/dist/types/components/resize-control/types.d.ts

@@ -1,5 +1,5 @@
-import { ButtonHTMLAttributes, ElementType, ReactElement } from 'react';
-import { LeftSidebarState } from '../../controllers/sidebar-resize-context';
+import { type ButtonHTMLAttributes, type ElementType, type ReactElement } from 'react';
+import { type LeftSidebarState } from '../../controllers/sidebar-resize-context';
 export type ResizeButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     isLeftSidebarCollapsed: boolean;
     label: string;

package/dist/types/components/skip-links/skip-link-components.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import { SkipLinkWrapperProps } from './types';
+import { type SkipLinkWrapperProps } from './types';
 /**
  * The default label will be used when the `skipLinksLabel` attribute is not
  * provided or the attribute is an empty string. If a string comprised only of
@@ -10,9 +10,9 @@ import { SkipLinkWrapperProps } from './types';
  * themselves.
  */
 export declare const SkipLinkWrapper: ({ skipLinksLabel }: SkipLinkWrapperProps) => jsx.JSX.Element | null;
-export declare const SkipLink: ({ href, children, isFocusable, title, }: {
+export declare const SkipLink: ({ href, children, isFocusable, skipToLabel, }: {
     href: string;
     children: ReactNode;
     isFocusable: boolean;
-    title: string;
+    skipToLabel: string;
 }) => jsx.JSX.Element;

package/dist/types/components/skip-links/use-custom-skip-link.d.ts

@@ -1,2 +1,2 @@
-import { SkipLinkData } from '../../controllers';
+import { type SkipLinkData } from '../../controllers';
 export declare const useCustomSkipLink: (id: SkipLinkData['id'], skipLinkTitle: SkipLinkData['skipLinkTitle'], listIndex?: SkipLinkData['listIndex']) => void;

package/dist/types/components/slots/banner-slot.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotHeightProps } from '../../common/types';
+import { type SlotHeightProps } from '../../common/types';
 /**
  * __Banner__
  *

package/dist/types/components/slots/content.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 interface ContentProps {
     /**

package/dist/types/components/slots/internal/left-sidebar-outer.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { MouseEventHandler, ReactNode } from 'react';
+import { type MouseEventHandler, type ReactNode } from 'react';
 type LeftSidebarOuterProps = {
     children: ReactNode;
     isFixed?: boolean;

package/dist/types/components/slots/left-panel.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotWidthProps } from '../../common/types';
+import { type SlotWidthProps } from '../../common/types';
 /**
  * __Left panel__
  *

package/dist/types/components/slots/left-sidebar-without-resize.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotWidthProps } from '../../common/types';
+import { type SlotWidthProps } from '../../common/types';
 /**
  * __Left sidebar without resize__
  *

package/dist/types/components/slots/left-sidebar.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { LeftSidebarProps } from '../../common/types';
+import { type LeftSidebarProps } from '../../common/types';
 /**
  * __Left sidebar__
  *

package/dist/types/components/slots/page-layout.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { PageLayoutProps } from '../../common/types';
+import { type PageLayoutProps } from '../../common/types';
 /**
  * __Page layout__
  *

package/dist/types/components/slots/right-panel.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotWidthProps } from '../../common/types';
+import { type SlotWidthProps } from '../../common/types';
 /**
  * __Right panel__
  *

package/dist/types/components/slots/right-sidebar.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotWidthProps } from '../../common/types';
+import { type SlotWidthProps } from '../../common/types';
 /**
  * __Right sidebar__
  *

package/dist/types/components/slots/top-navigation.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotHeightProps } from '../../common/types';
+import { type SlotHeightProps } from '../../common/types';
 /**
  * __Top navigation__
  *

package/dist/types/controllers/sidebar-resize-context.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEvent, MouseEvent } from 'react';
+import { type KeyboardEvent, type MouseEvent } from 'react';
 export type LeftSidebarState = {
     isFlyoutOpen: boolean;
     isResizing: boolean;

package/dist/types/controllers/sidebar-resize-controller.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
-import { SidebarResizeControllerProps } from '../common/types';
+import { type FC } from 'react';
+import { type SidebarResizeControllerProps } from '../common/types';
 export declare const SidebarResizeController: FC<SidebarResizeControllerProps>;

package/dist/types/controllers/skip-link-context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SkipLinkContextProps, SkipLinkData } from './types';
+import { type SkipLinkContextProps, type SkipLinkData } from './types';
 export declare const SkipLinksContext: import("react").Context<SkipLinkContextProps>;
 export declare const useSkipLinks: () => SkipLinkContextProps;
 export declare const useSkipLink: (id?: SkipLinkData['id'], skipLinkTitle?: SkipLinkData['skipLinkTitle']) => void;

package/dist/types/controllers/skip-link-controller.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { type FC, type ReactNode } from 'react';
 export declare const SkipLinksController: FC<{
     children: ReactNode;
 }>;

package/dist/types/controllers/use-page-layout-grid.d.ts

@@ -1,3 +1,3 @@
-import { Dimensions } from '../common/types';
+import { type Dimensions } from '../common/types';
 declare const publishGridState: (gridState: Dimensions) => void;
 export default publishGridState;

package/dist/types-ts4.5/common/types.d.ts

@@ -1,6 +1,6 @@
-import { ElementType, ReactElement, ReactNode } from 'react';
-import { ResizeButtonProps } from '../components/resize-control/types';
-import { LeftSidebarState } from '../controllers/sidebar-resize-context';
+import { type ElementType, type ReactElement, type ReactNode } from 'react';
+import { type ResizeButtonProps } from '../components/resize-control/types';
+import { type LeftSidebarState } from '../controllers/sidebar-resize-context';
 interface SlotProps {
     /**
      * Sets the position to fixed.

package/dist/types-ts4.5/common/utils.d.ts

@@ -1,4 +1,4 @@
-import { DimensionNames, Dimensions } from './types';
+import { type DimensionNames, type Dimensions } from './types';
 declare const emptyGridState: Dimensions;
 declare const mergeGridStateIntoStorage: (key: string, value: any) => void;
 declare const getGridStateFromStorage: (key: string) => any;

package/dist/types-ts4.5/components/resize-control/grab-area.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { ComponentProps, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
+import { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEvent } from 'react';
 import { jsx } from '@emotion/react';
-import { LeftSidebarProps } from '../../common/types';
+import { type LeftSidebarProps } from '../../common/types';
 export type GrabAreaProps = {
     isDisabled: boolean;
     isLeftSidebarCollapsed: boolean;

package/dist/types-ts4.5/components/resize-control/index.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
-import { ResizeControlProps } from './types';
+import { type ResizeControlProps } from './types';
 declare const ResizeControl: ({ testId, overrides, resizeButtonLabel, valueTextLabel, resizeGrabAreaLabel, onResizeStart, onResizeEnd, }: ResizeControlProps) => jsx.JSX.Element;
 export default ResizeControl;

package/dist/types-ts4.5/components/resize-control/resize-button.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
-import { ResizeButtonProps } from './types';
+import { type ResizeButtonProps } from './types';
 declare const ResizeButton: ({ isLeftSidebarCollapsed, label, testId, ...props }: ResizeButtonProps) => jsx.JSX.Element;
 export default ResizeButton;

package/dist/types-ts4.5/components/resize-control/types.d.ts

@@ -1,5 +1,5 @@
-import { ButtonHTMLAttributes, ElementType, ReactElement } from 'react';
-import { LeftSidebarState } from '../../controllers/sidebar-resize-context';
+import { type ButtonHTMLAttributes, type ElementType, type ReactElement } from 'react';
+import { type LeftSidebarState } from '../../controllers/sidebar-resize-context';
 export type ResizeButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     isLeftSidebarCollapsed: boolean;
     label: string;

package/dist/types-ts4.5/components/skip-links/skip-link-components.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import { SkipLinkWrapperProps } from './types';
+import { type SkipLinkWrapperProps } from './types';
 /**
  * The default label will be used when the `skipLinksLabel` attribute is not
  * provided or the attribute is an empty string. If a string comprised only of
@@ -10,9 +10,9 @@ import { SkipLinkWrapperProps } from './types';
  * themselves.
  */
 export declare const SkipLinkWrapper: ({ skipLinksLabel }: SkipLinkWrapperProps) => jsx.JSX.Element | null;
-export declare const SkipLink: ({ href, children, isFocusable, title, }: {
+export declare const SkipLink: ({ href, children, isFocusable, skipToLabel, }: {
     href: string;
     children: ReactNode;
     isFocusable: boolean;
-    title: string;
+    skipToLabel: string;
 }) => jsx.JSX.Element;

package/dist/types-ts4.5/components/skip-links/use-custom-skip-link.d.ts

@@ -1,2 +1,2 @@
-import { SkipLinkData } from '../../controllers';
+import { type SkipLinkData } from '../../controllers';
 export declare const useCustomSkipLink: (id: SkipLinkData['id'], skipLinkTitle: SkipLinkData['skipLinkTitle'], listIndex?: SkipLinkData['listIndex']) => void;

package/dist/types-ts4.5/components/slots/banner-slot.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotHeightProps } from '../../common/types';
+import { type SlotHeightProps } from '../../common/types';
 /**
  * __Banner__
  *

package/dist/types-ts4.5/components/slots/content.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 interface ContentProps {
     /**

package/dist/types-ts4.5/components/slots/internal/left-sidebar-outer.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { MouseEventHandler, ReactNode } from 'react';
+import { type MouseEventHandler, type ReactNode } from 'react';
 type LeftSidebarOuterProps = {
     children: ReactNode;
     isFixed?: boolean;

package/dist/types-ts4.5/components/slots/left-panel.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotWidthProps } from '../../common/types';
+import { type SlotWidthProps } from '../../common/types';
 /**
  * __Left panel__
  *

package/dist/types-ts4.5/components/slots/left-sidebar-without-resize.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotWidthProps } from '../../common/types';
+import { type SlotWidthProps } from '../../common/types';
 /**
  * __Left sidebar without resize__
  *

package/dist/types-ts4.5/components/slots/left-sidebar.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { LeftSidebarProps } from '../../common/types';
+import { type LeftSidebarProps } from '../../common/types';
 /**
  * __Left sidebar__
  *

package/dist/types-ts4.5/components/slots/page-layout.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { PageLayoutProps } from '../../common/types';
+import { type PageLayoutProps } from '../../common/types';
 /**
  * __Page layout__
  *

package/dist/types-ts4.5/components/slots/right-panel.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotWidthProps } from '../../common/types';
+import { type SlotWidthProps } from '../../common/types';
 /**
  * __Right panel__
  *

package/dist/types-ts4.5/components/slots/right-sidebar.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotWidthProps } from '../../common/types';
+import { type SlotWidthProps } from '../../common/types';
 /**
  * __Right sidebar__
  *

package/dist/types-ts4.5/components/slots/top-navigation.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { SlotHeightProps } from '../../common/types';
+import { type SlotHeightProps } from '../../common/types';
 /**
  * __Top navigation__
  *

package/dist/types-ts4.5/controllers/sidebar-resize-context.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEvent, MouseEvent } from 'react';
+import { type KeyboardEvent, type MouseEvent } from 'react';
 export type LeftSidebarState = {
     isFlyoutOpen: boolean;
     isResizing: boolean;

package/dist/types-ts4.5/controllers/sidebar-resize-controller.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
-import { SidebarResizeControllerProps } from '../common/types';
+import { type FC } from 'react';
+import { type SidebarResizeControllerProps } from '../common/types';
 export declare const SidebarResizeController: FC<SidebarResizeControllerProps>;

package/dist/types-ts4.5/controllers/skip-link-context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SkipLinkContextProps, SkipLinkData } from './types';
+import { type SkipLinkContextProps, type SkipLinkData } from './types';
 export declare const SkipLinksContext: import("react").Context<SkipLinkContextProps>;
 export declare const useSkipLinks: () => SkipLinkContextProps;
 export declare const useSkipLink: (id?: SkipLinkData['id'], skipLinkTitle?: SkipLinkData['skipLinkTitle']) => void;

package/dist/types-ts4.5/controllers/skip-link-controller.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { type FC, type ReactNode } from 'react';
 export declare const SkipLinksController: FC<{
     children: ReactNode;
 }>;

package/dist/types-ts4.5/controllers/use-page-layout-grid.d.ts

@@ -1,3 +1,3 @@
-import { Dimensions } from '../common/types';
+import { type Dimensions } from '../common/types';
 declare const publishGridState: (gridState: Dimensions) => void;
 export default publishGridState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "3.2.2",
+  "version": "3.3.1",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,24 +34,27 @@
     "website": {
       "name": "Page layout",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "homepage": "https://atlassian.design/components/page-layout/",
   "dependencies": {
     "@atlaskit/ds-lib": "^2.3.0",
-    "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/motion": "^1.5.0",
+    "@atlaskit/icon": "^22.3.0",
+    "@atlaskit/link": "^0.3.0",
+    "@atlaskit/motion": "^1.6.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^6.1.0",
+    "@atlaskit/primitives": "^6.3.0",
     "@atlaskit/theme": "^12.8.0",
-    "@atlaskit/tokens": "^1.46.0",
+    "@atlaskit/tokens": "^1.49.0",
+    "@atlaskit/visually-hidden": "^1.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^3.0.0",
     "raf-schd": "^4.0.3"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
@@ -59,16 +62,16 @@
     "@af/integration-testing": "*",
     "@atlaskit/atlassian-navigation": "^3.6.0",
     "@atlaskit/atlassian-notifications": "^0.4.0",
-    "@atlaskit/drawer": "^7.8.0",
-    "@atlaskit/logo": "^13.16.0",
-    "@atlaskit/menu": "^2.2.0",
+    "@atlaskit/drawer": "^7.10.0",
+    "@atlaskit/logo": "^13.17.0",
+    "@atlaskit/menu": "^2.3.0",
     "@atlaskit/notification-indicator": "^9.2.0",
     "@atlaskit/notification-log-client": "^6.1.0",
     "@atlaskit/popup": "^1.17.0",
     "@atlaskit/side-navigation": "^3.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^13.1.0",
-    "@atlaskit/tooltip": "^18.3.0",
+    "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/dom": "^8.17.1",