@atlaskit/page-layout 3.3.0 → 3.3.2

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';
@@ -15,8 +15,7 @@ const Container = (props: CustomItemComponentProps) => {
 
 const linkStyles = css({
   color: token('color.text.subtle', N200),
-  fontSize: 12,
-  ':hover': {
+  '&:hover': {
     color: token('color.link', B400),
     cursor: 'pointer',
     textDecoration: 'none',

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/resize-control/grab-area.js

@@ -31,10 +31,10 @@ var grabAreaStyles = (0, _react.css)({
   '&::-moz-focus-inner': {
     border: 0
   },
-  ':focus': {
+  '&:focus': {
     outline: 0
   },
-  ':enabled:hover, :enabled:focus, :enabled:active': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
+  '&:enabled:hover, &:enabled:focus, &:enabled:active': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
 });
 var grabAreaReducedHeightStyles = (0, _react.css)({
   height: "calc(100% - ".concat("var(--ds-space-600, 3rem)", " * 2)"),

package/dist/cjs/components/resize-control/resize-button.js

@@ -82,7 +82,9 @@ var ResizeButton = function ResizeButton(_ref) {
     // DO NOT remove. used as a CSS selector.
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
-    type: "button",
+    type: "button"
+    // The error goes away when we remove the spread ...props
+    ,
     css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
     "data-testid": testId
     // Prevents focus staying attached to the button when pressed

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

@@ -8,6 +8,7 @@ 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 _constants = require("../../common/constants");
@@ -17,27 +18,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.
-     */
+  '&:focus-within': {
     zIndex: 2147483640,
-    left: 0,
+    insetInlineStart: 0,
     opacity: 1,
     transform: 'translateY(0%)'
   }
@@ -46,13 +41,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)) {
@@ -129,8 +124,7 @@ var SkipLinkWrapper = exports.SkipLinkWrapper = function SkipLinkWrapper(_ref) {
     return (0, _react.jsx)(SkipLink, {
       key: id,
       href: "#".concat(id),
-      isFocusable: true,
-      title: emptyLabelOverride ? "".concat(_constants.DEFAULT_I18N_PROPS_SKIP_LINKS, " ").concat(skipLinkTitle) : "".concat(label, " ").concat(skipLinkTitle)
+      isFocusable: true
     }, skipLinkTitle);
   })));
 };
@@ -171,14 +165,12 @@ var focusTargetRef = function focusTargetRef(href) {
 var SkipLink = exports.SkipLink = function SkipLink(_ref3) {
   var href = _ref3.href,
     children = _ref3.children,
-    isFocusable = _ref3.isFocusable,
-    title = _ref3.title;
+    isFocusable = _ref3.isFocusable;
   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
+    onClick: focusTargetRef(href)
   }, 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/resize-control/grab-area.js

@@ -22,10 +22,10 @@ const grabAreaStyles = css({
   '&::-moz-focus-inner': {
     border: 0
   },
-  ':focus': {
+  '&:focus': {
     outline: 0
   },
-  ':enabled:hover, :enabled:focus, :enabled:active': {
+  '&:enabled:hover, &:enabled:focus, &:enabled:active': {
     [varLineColor]: `var(--ds-border-selected, ${B200})`
   }
 });

package/dist/es2019/components/resize-control/resize-button.js

@@ -80,7 +80,9 @@ const ResizeButton = ({
   // DO NOT remove. used as a CSS selector.
   "aria-expanded": !isLeftSidebarCollapsed,
   "aria-label": label,
-  type: "button",
+  type: "button"
+  // The error goes away when we remove the spread ...props
+  ,
   css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
   "data-testid": testId
   // Prevents focus staying attached to the button when pressed

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

@@ -2,6 +2,7 @@
 /** @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 { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
@@ -9,27 +10,21 @@ 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.
-     */
+  '&:focus-within': {
     zIndex: 2147483640,
-    left: 0,
+    insetInlineStart: 0,
     opacity: 1,
     transform: 'translateY(0%)'
   }
@@ -38,13 +33,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)) {
@@ -112,8 +107,7 @@ export const SkipLinkWrapper = ({
   }) => jsx(SkipLink, {
     key: id,
     href: `#${id}`,
-    isFocusable: true,
-    title: emptyLabelOverride ? `${DEFAULT_I18N_PROPS_SKIP_LINKS} ${skipLinkTitle}` : `${label} ${skipLinkTitle}`
+    isFocusable: true
   }, skipLinkTitle))));
 };
 const handleBlur = event => {
@@ -151,15 +145,13 @@ const focusTargetRef = href => event => {
 export const SkipLink = ({
   href,
   children,
-  isFocusable,
-  title
+  isFocusable
 }) => {
   return jsx("li", {
     css: skipLinkListItemStyles
-  }, jsx("a", {
+  }, jsx(Link, {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
-    onClick: focusTargetRef(href),
-    title: title
+    onClick: focusTargetRef(href)
   }, 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/resize-control/grab-area.js

@@ -25,10 +25,10 @@ var grabAreaStyles = css({
   '&::-moz-focus-inner': {
     border: 0
   },
-  ':focus': {
+  '&:focus': {
     outline: 0
   },
-  ':enabled:hover, :enabled:focus, :enabled:active': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B200, ")"))
+  '&:enabled:hover, &:enabled:focus, &:enabled:active': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B200, ")"))
 });
 var grabAreaReducedHeightStyles = css({
   height: "calc(100% - ".concat("var(--ds-space-600, 3rem)", " * 2)"),

package/dist/esm/components/resize-control/resize-button.js

@@ -76,7 +76,9 @@ var ResizeButton = function ResizeButton(_ref) {
     // DO NOT remove. used as a CSS selector.
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
-    type: "button",
+    type: "button"
+    // The error goes away when we remove the spread ...props
+    ,
     css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
     "data-testid": testId
     // Prevents focus staying attached to the button when pressed

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

@@ -6,6 +6,7 @@ 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 { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
@@ -13,27 +14,21 @@ 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.
-     */
+  '&:focus-within': {
     zIndex: 2147483640,
-    left: 0,
+    insetInlineStart: 0,
     opacity: 1,
     transform: 'translateY(0%)'
   }
@@ -42,13 +37,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)) {
@@ -125,8 +120,7 @@ export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
     return jsx(SkipLink, {
       key: id,
       href: "#".concat(id),
-      isFocusable: true,
-      title: emptyLabelOverride ? "".concat(DEFAULT_I18N_PROPS_SKIP_LINKS, " ").concat(skipLinkTitle) : "".concat(label, " ").concat(skipLinkTitle)
+      isFocusable: true
     }, skipLinkTitle);
   })));
 };
@@ -167,14 +161,12 @@ var focusTargetRef = function focusTargetRef(href) {
 export var SkipLink = function SkipLink(_ref3) {
   var href = _ref3.href,
     children = _ref3.children,
-    isFocusable = _ref3.isFocusable,
-    title = _ref3.title;
+    isFocusable = _ref3.isFocusable;
   return jsx("li", {
     css: skipLinkListItemStyles
-  }, jsx("a", {
+  }, jsx(Link, {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
-    onClick: focusTargetRef(href),
-    title: title
+    onClick: focusTargetRef(href)
   }, 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