@atlaskit/page-layout 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/page-layout
 
+## 1.2.0
+
+### Minor Changes
+
+- [`21534d3647e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/21534d3647e) - [ux] Update theme colours and remove shadow from resize bar
+
+### Patch Changes
+
+- [`ac9343c3ed4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac9343c3ed4) - Replaces usage of deprecated design tokens. No visual or functional changes
+- [`ad0e912661a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ad0e912661a) - Styles have been rewritten to be static, in preparation for compiled adoption.
+- [`8940901481d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8940901481d) - [ux] The width of right sidebars with fixed positioning (`<RightSidebar isFixed />`) has been fixed. Previously they had automatic sizing, which led to inconsistencies in appearance between static and fixed positioning.
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
 ## 1.1.0
 
 ### Minor Changes

package/README.md

@@ -10,7 +10,7 @@ yarn add @atlaskit/page-layout
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/page-layout).
+Detailed docs and example usage can be found [here](https://atlassian.design/components/page-layout/).
 
-To add side navigation, use [@atlaskit/side-navigation](https://atlaskit.atlassian.com/packages/navigation/side-navigation)
-To add top/global navigation, use [@atlaskit/atlassian-navigation](https://atlaskit.atlassian.com/packages/navigation/atlassian-navigation)
+To add side navigation, use [@atlaskit/side-navigation](https://atlassian.design/components/side-navigation/)
+To add top/global navigation, use [@atlaskit/atlassian-navigation](https://atlassian.design/components/atlassian-navigation/)

package/__perf__/utils/perf-example.tsx

@@ -15,6 +15,15 @@ import {
 import JiraIntegrationExample from './product-integration/AtlassianNavigation';
 import Sidebar from './product-integration/SideNavigation';
 
+const wrapperStyles = css({
+  boxSizing: 'border-box',
+  height: '100%',
+  padding: 8,
+  backgroundColor: token('color.background.neutral.subtle', 'white'),
+  outlineOffset: -4,
+  overflowY: 'auto',
+});
+
 const Wrapper = ({
   borderColor,
   children,
@@ -27,21 +36,27 @@ const Wrapper = ({
   noHorizontalScrollbar?: boolean;
 }) => (
   <div
-    css={{
+    css={wrapperStyles}
+    style={{
       outline: noOutline ? 'none' : `2px dashed ${borderColor}`,
-      outlineOffset: -4,
-      padding: 8,
-      height: '100%',
-      boxSizing: 'border-box',
-      overflowY: 'auto',
       overflowX: noHorizontalScrollbar ? 'hidden' : 'auto',
-      backgroundColor: token('color.background.neutral.subtle', 'white'),
     }}
   >
     {children}
   </div>
 );
 
+const sidebarWrapperStyles = css({
+  height: '100%',
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  nav: {
+    minWidth: 20,
+    overflowX: 'hidden',
+  },
+});
+
+const slotLabelStyles = css({ textAlign: 'center' });
+
 const BasicGrid = () => {
   return (
     <PageLayout>
@@ -50,21 +65,13 @@ const BasicGrid = () => {
       </TopNavigation>
       <Content testId="content">
         <LeftSidebar testId="left-sidebar" isFixed={false} width={450}>
-          <div
-            css={css`
-              height: 100%;
-              & nav {
-                min-width: 20px;
-                overflow-x: hidden;
-              }
-            `}
-          >
+          <div css={sidebarWrapperStyles}>
             <Sidebar />
           </div>
         </LeftSidebar>
         <Main>
           <Wrapper noOutline borderColor={token('color.border', 'black')}>
-            <h3 css={{ textAlign: 'center' }}>Main</h3>
+            <h3 css={slotLabelStyles}>Main</h3>
           </Wrapper>
         </Main>
       </Content>

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

@@ -1,23 +1,24 @@
 /** @jsx jsx */
 import { useState } from 'react';
 
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 
 import { Notifications } from '@atlaskit/atlassian-navigation';
 import { Notifications as NotificationsIframe } from '@atlaskit/atlassian-notifications';
 import { NotificationIndicator } from '@atlaskit/notification-indicator';
 import { NotificationLogClient } from '@atlaskit/notification-log-client';
 import Popup from '@atlaskit/popup';
-const wrapperCSS = {
+
+const wrapperStyles = css({
+  display: 'flex',
   width: 540,
   height: 'calc(100vh - 200px)',
   paddingTop: 18,
   paddingLeft: 18,
-  display: 'flex',
-};
+});
 
 const NotificationsContent = () => (
-  <div css={wrapperCSS}>
+  <div css={wrapperStyles}>
     <NotificationsIframe
       // _url="https://start.stg.atlassian.com/notificationsDrawer/iframe.html?scope=user&product=uchi&locale=en"
       _url="https://start.stg.atlassian.com/notificationsDrawer/iframe.html"

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 
 import { CustomItemComponentProps } from '@atlaskit/menu';
 import { Footer } from '@atlaskit/side-navigation';
@@ -12,28 +12,28 @@ const Container: React.FC<CustomItemComponentProps> = (props) => {
   return <div {...props} />;
 };
 
+const linkStyles = css({
+  color: token('color.text.subtle', N200),
+  fontSize: 12,
+  ':hover': {
+    color: token('color.link', B400),
+    cursor: 'pointer',
+    textDecoration: 'none',
+  },
+});
+
 // This example footer conforms to a design taken from Jira designs found at
 // https://www.figma.com/file/GA22za6unqO2WsBWM0Ddxk/Jira-navigation-3?node-id=124%3A7194
 const ExampleFooter = () => {
-  const linkCSS = {
-    fontSize: 12,
-    color: token('color.text.subtle', N200),
-    '&:hover': {
-      color: token('color.background.brand.hovered', B400),
-      textDecoration: 'none',
-      cursor: 'pointer',
-    },
-  };
-
   return (
     <Footer
       component={Container}
       description={
         <Fragment>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a css={linkCSS}>Give feedback</a> {' ∙ '}
+          <a css={linkStyles}>Give feedback</a> {' ∙ '}
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a css={linkCSS}>Learn more</a>
+          <a css={linkStyles}>Learn more</a>
         </Fragment>
       }
     >

package/dist/cjs/common/hooks/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useIsSidebarCollapsing", {
+  enumerable: true,
+  get: function get() {
+    return _useIsSidebarCollapsing.default;
+  }
+});
+Object.defineProperty(exports, "useIsSidebarDragging", {
+  enumerable: true,
+  get: function get() {
+    return _useIsSidebarDragging.default;
+  }
+});
+
+var _useIsSidebarCollapsing = _interopRequireDefault(require("./use-is-sidebar-collapsing"));
+
+var _useIsSidebarDragging = _interopRequireDefault(require("./use-is-sidebar-dragging"));

package/dist/cjs/common/hooks/use-is-sidebar-collapsing.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _constants = require("../constants");
+
+var getIsCollapsing = function getIsCollapsing() {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(_constants.IS_SIDEBAR_COLLAPSING) === 'true';
+};
+
+var useIsSidebarCollapsing = function useIsSidebarCollapsing() {
+  var _useState = (0, _react.useState)(getIsCollapsing),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isCollapsing = _useState2[0],
+      setIsCollapsing = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var observer = new MutationObserver(function () {
+      setIsCollapsing(getIsCollapsing);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [_constants.IS_SIDEBAR_COLLAPSING]
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return isCollapsing;
+};
+
+var _default = useIsSidebarCollapsing;
+exports.default = _default;

package/dist/cjs/common/hooks/use-is-sidebar-dragging.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _constants = require("../constants");
+
+var getIsDragging = function getIsDragging() {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(_constants.IS_SIDEBAR_DRAGGING) === 'true';
+};
+
+var useIsSidebarDragging = function useIsSidebarDragging() {
+  var _useState = (0, _react.useState)(getIsDragging),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isDragging = _useState2[0],
+      setIsDragging = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var observer = new MutationObserver(function () {
+      setIsDragging(getIsDragging);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [_constants.IS_SIDEBAR_DRAGGING]
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return isDragging;
+};
+
+var _default = useIsSidebarDragging;
+exports.default = _default;

package/dist/cjs/components/resize-control/grab-area.js

@@ -15,11 +15,49 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _core = require("@emotion/core");
 
-var _constants = require("../../common/constants");
+var _colors = require("@atlaskit/theme/colors");
 
-var _styles = require("./styles");
+var _constants = require("../../common/constants");
 
 var _excluded = ["testId", "isLeftSidebarCollapsed"];
+
+/**
+ * Determines the color of the grab line.
+ *
+ * Used on internal leaf node, so naming collisions won't matter.
+ */
+var varLineColor = '--ds-line';
+var grabAreaStyles = (0, _core.css)({
+  width: 24,
+  height: '100%',
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'ew-resize',
+  '&::-moz-focus-inner': {
+    border: 0
+  },
+  ':focus': {
+    outline: 0
+  },
+  ':enabled': {
+    ':hover': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B100, ")")),
+    ':active, :focus': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
+  }
+});
+var grabAreaCollapsedStyles = (0, _core.css)({
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'default'
+});
+var lineStyles = (0, _core.css)({
+  display: 'block',
+  width: 2,
+  height: '100%',
+  backgroundColor: "var(".concat(varLineColor, ")"),
+  transition: 'background-color 200ms'
+});
 var grabAreaLineSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_LINE_SELECTOR, true);
 var grabAreaSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_SELECTOR, true); // TODO: Consider allowing this to be controlled using arrow keys
 
@@ -30,9 +68,9 @@ var GrabArea = function GrabArea(_ref) {
   return (0, _core.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
     "data-testid": testId,
     type: "button",
-    css: (0, _styles.grabAreaCSS)(isLeftSidebarCollapsed)
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
   }, rest), (0, _core.jsx)("span", (0, _extends2.default)({
-    css: (0, _styles.lineCSS)(isLeftSidebarCollapsed)
+    css: lineStyles
   }, grabAreaLineSelector)));
 };
 

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

@@ -29,31 +29,33 @@ var _grabArea = _interopRequireDefault(require("./grab-area"));
 
 var _resizeButton2 = _interopRequireDefault(require("./resize-button"));
 
-var _styles = require("./styles");
+var _shadow = _interopRequireDefault(require("./shadow"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_CONTROL_SELECTOR, true);
+var resizeControlStyles = (0, _core.css)({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: '100%',
+  outline: 'none'
+});
+var showResizeButtonStyles = (0, _core.css)({
+  '--ds--resize-button--opacity': 1
+});
 
-var Shadow = function Shadow(_ref) {
-  var testId = _ref.testId;
-  return (0, _core.jsx)("div", {
-    "data-testid": testId,
-    css: _styles.shadowCSS
-  });
-};
-
-var ResizeControl = function ResizeControl(_ref2) {
-  var testId = _ref2.testId,
-      overrides = _ref2.overrides,
-      _ref2$resizeButtonLab = _ref2.resizeButtonLabel,
-      resizeButtonLabel = _ref2$resizeButtonLab === void 0 ? '' : _ref2$resizeButtonLab,
-      _ref2$resizeGrabAreaL = _ref2.resizeGrabAreaLabel,
-      resizeGrabAreaLabel = _ref2$resizeGrabAreaL === void 0 ? 'Resize' : _ref2$resizeGrabAreaL,
-      onResizeStart = _ref2.onResizeStart,
-      onResizeEnd = _ref2.onResizeEnd;
+var ResizeControl = function ResizeControl(_ref) {
+  var testId = _ref.testId,
+      overrides = _ref.overrides,
+      _ref$resizeButtonLabe = _ref.resizeButtonLabel,
+      resizeButtonLabel = _ref$resizeButtonLabe === void 0 ? '' : _ref$resizeButtonLabe,
+      _ref$resizeGrabAreaLa = _ref.resizeGrabAreaLabel,
+      resizeGrabAreaLabel = _ref$resizeGrabAreaLa === void 0 ? 'Resize' : _ref$resizeGrabAreaLa,
+      onResizeStart = _ref.onResizeStart,
+      onResizeEnd = _ref.onResizeEnd;
 
   var _useContext = (0, _react.useContext)(_sidebarResizeContext.SidebarResizeContext),
       expandLeftSidebar = _useContext.expandLeftSidebar,
@@ -263,8 +265,8 @@ var ResizeControl = function ResizeControl(_ref2) {
   /* eslint-disable jsx-a11y/role-supports-aria-props */
 
   return (0, _core.jsx)("div", (0, _extends2.default)({}, cssSelector, {
-    css: (0, _styles.resizeControlCSS)(isGrabAreaFocused, isLeftSidebarCollapsed)
-  }), (0, _core.jsx)(Shadow, {
+    css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
+  }), (0, _core.jsx)(_shadow.default, {
     testId: testId && "".concat(testId, "-shadow")
   }), (0, _core.jsx)(_grabArea.default, {
     role: "separator",

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

@@ -17,11 +17,66 @@ var _core = require("@emotion/core");
 
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
 
-var _constants = require("../../common/constants");
+var _curves = require("@atlaskit/motion/curves");
+
+var _durations = require("@atlaskit/motion/durations");
 
-var _styles = require("./styles");
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("../../common/constants");
 
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
+var increaseHitAreaStyles = (0, _core.css)({
+  position: 'absolute',
+  top: -8,
+  right: -12,
+  bottom: -8,
+  left: -8
+});
+var resizeIconButtonStyles = (0, _core.css)({
+  width: 24,
+  height: 24,
+  padding: 0,
+  position: 'absolute',
+  top: 32,
+  left: 0,
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  border: 0,
+  borderRadius: '50%',
+
+  /**
+   * TODO: https://product-fabric.atlassian.net/browse/DSP-3392
+   * This shadow needs further investigation,
+   * along with the hover and active background colors.
+   */
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  boxShadow: "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 4px 1px ").concat(_colors.N30A),
+  color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
+  cursor: 'pointer',
+
+  /**
+   * The fallback value of 0 ensures that the button is hidden by default,
+   * unless some parent (or the button itself) overrides it.
+   */
+  opacity: "var(--ds--resize-button--opacity,0)",
+  outline: 0,
+  transform: 'translateX(-50%)',
+  transition: "\n    background-color ".concat(_durations.smallDurationMs, "ms linear,\n    color ").concat(_durations.smallDurationMs, "ms linear,\n    opacity ").concat(_durations.mediumDurationMs, "ms ").concat(_curves.easeOut, "\n  "),
+  ':hover': {
+    backgroundColor: "var(--ds-background-selected-bold, ".concat(_colors.B100, ")"),
+    color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+    opacity: 1
+  },
+  ':active, :focus': {
+    backgroundColor: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B200, ")"),
+    color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+    opacity: 1
+  }
+});
+var resizeIconButtonExpandedStyles = (0, _core.css)({
+  transform: 'rotate(180deg)',
+  transformOrigin: 7
+});
 
 var preventDefault = function preventDefault(event) {
   return event.preventDefault();
@@ -39,7 +94,7 @@ var ResizeButton = function ResizeButton(_ref) {
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
     type: "button",
-    css: (0, _styles.resizeIconButtonCSS)(isLeftSidebarCollapsed),
+    css: [resizeIconButtonStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
     "data-testid": testId // Prevents focus staying attached to the button
     // when pressed
     ,
@@ -47,7 +102,7 @@ var ResizeButton = function ResizeButton(_ref) {
   }, props), (0, _core.jsx)(_chevronRight.default, {
     label: ""
   }), (0, _core.jsx)("div", {
-    css: _styles.increaseHitArea
+    css: increaseHitAreaStyles
   }));
 };
 

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _motion = require("@atlaskit/motion");
+
+var _hooks = require("../../common/hooks");
+
+/** @jsx jsx */
+var colorStops = "\n    rgba(0, 0, 0, 0.2) 0px,\n    rgba(0, 0, 0, 0.2) 1px,\n    rgba(0, 0, 0, 0.1) 1px,\n    rgba(0, 0, 0, 0) 100%\n  ";
+var direction = 'to left';
+var transitionDuration = '0.22s';
+var shadowStyles = (0, _core.css)({
+  width: 3,
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: -1,
+  background: "var(--ds-border, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
+  opacity: 0.5,
+  pointerEvents: 'none',
+  transitionDuration: transitionDuration,
+  transitionProperty: 'left, opacity, width',
+  transitionTimingFunction: _motion.easeOut
+});
+var draggingStyles = (0, _core.css)({
+  width: 6,
+  left: -6,
+  background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
+  opacity: 0.8
+});
+
+var Shadow = function Shadow(_ref) {
+  var testId = _ref.testId;
+  var isDragging = (0, _hooks.useIsSidebarDragging)();
+  return (0, _core.jsx)("div", {
+    "data-testid": testId,
+    css: [shadowStyles, isDragging && draggingStyles]
+  });
+};
+
+var _default = Shadow;
+exports.default = _default;

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

@@ -13,16 +13,56 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _core = require("@emotion/core");
 
+var _motion = require("@atlaskit/motion");
+
+var _colors = require("@atlaskit/theme/colors");
+
 var _constants = require("../../common/constants");
 
 var _controllers = require("../../controllers");
 
-var _styles = require("./styles");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion)());
+var skipLinkStyles = (0, _core.css)({
+  margin: 10,
+  padding: '0.8rem 1rem',
+  position: 'fixed',
+  zIndex: -1,
+  left: -999999,
+  background: "var(--ds-surface-overlay, white)",
+  border: 'none',
+  borderRadius: 3,
+  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), ")"),
+  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,
+    opacity: 1,
+    transform: 'translateY(0%)'
+  }
+});
+var skipLinkListStyles = (0, _core.css)({
+  marginTop: 4,
+  paddingLeft: 0,
+  listStylePosition: 'outside',
+  listStyleType: 'none'
+});
+var skipLinkListItemStyles = (0, _core.css)({
+  marginTop: 0
+});
+
 var assignIndex = function assignIndex(num, arr) {
   if (!arr.includes(num)) {
     return num;
@@ -88,9 +128,11 @@ var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
   return (0, _core.jsx)("div", {
     onFocus: attachEscHandler,
     onBlur: removeEscHandler,
-    css: _styles.skipLinkStyles,
+    css: [skipLinkStyles, prefersReducedMotionStyles],
     "data-skip-link-wrapper": true
-  }, (0, _core.jsx)("h5", null, skipLinksLabel), (0, _core.jsx)("ol", null, sortSkipLinks(skipLinksData).map(function (_ref2) {
+  }, (0, _core.jsx)("h5", null, skipLinksLabel), (0, _core.jsx)("ol", {
+    css: skipLinkListStyles
+  }, sortSkipLinks(skipLinksData).map(function (_ref2) {
     var id = _ref2.id,
         skipLinkTitle = _ref2.skipLinkTitle;
     return (0, _core.jsx)(SkipLink, {
@@ -144,7 +186,9 @@ var SkipLink = function SkipLink(_ref3) {
       children = _ref3.children,
       isFocusable = _ref3.isFocusable,
       title = _ref3.title;
-  return (0, _core.jsx)("li", null, (0, _core.jsx)("a", {
+  return (0, _core.jsx)("li", {
+    css: skipLinkListItemStyles
+  }, (0, _core.jsx)("a", {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
     onClick: focusTargetRef(href),