@atlaskit/page-layout 1.1.0 → 1.2.0

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

@@ -3,12 +3,49 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/core';
-import { DEFAULT_RIGHT_SIDEBAR_WIDTH, VAR_RIGHT_SIDEBAR_WIDTH } from '../../common/constants';
+import { css, jsx } from '@emotion/core';
+import { BANNER_HEIGHT, DEFAULT_RIGHT_SIDEBAR_WIDTH, RIGHT_PANEL_WIDTH, RIGHT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, VAR_RIGHT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
+import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
-import { fixedRightSidebarInnerStyles, rightSidebarStyles } from './styles';
+/**
+ * This inner wrapper is required to allow the sidebar to be `position: fixed`.
+ *
+ * If we were to apply `position: fixed` to the outer wrapper, it will be popped
+ * out of its flex container and Main would stretch to occupy all the space.
+ */
+
+var fixedInnerStyles = css({
+  /**
+   * This width on the inner wrapper is required when it is using fixed
+   * positioning. Otherwise its width is slightly off.
+   */
+  width: RIGHT_SIDEBAR_WIDTH,
+  position: 'fixed',
+  top: "calc(".concat(BANNER_HEIGHT, " + ").concat(TOP_NAVIGATION_HEIGHT, ")"),
+  right: "calc(".concat(RIGHT_PANEL_WIDTH, ")"),
+  bottom: 0
+});
+var staticInnerStyles = css({
+  height: '100%'
+});
+var outerStyles = css({
+  width: RIGHT_SIDEBAR_WIDTH
+});
+/**
+ * In fixed mode this element's child is taken out of the document flow.
+ * It doesn't take up the width as expected,
+ * so the pseudo element forces it to take up the necessary width.
+ */
+
+var fixedOuterStyles = css({
+  '&::after': {
+    display: 'inline-block',
+    width: RIGHT_SIDEBAR_WIDTH,
+    content: "''"
+  }
+});
 
 var RightSidebar = function RightSidebar(props) {
   var children = props.children,
@@ -24,19 +61,25 @@ var RightSidebar = function RightSidebar(props) {
     publishGridState(_defineProperty({}, VAR_RIGHT_SIDEBAR_WIDTH, rightSidebarWidth));
     return function () {
       publishGridState(_defineProperty({}, VAR_RIGHT_SIDEBAR_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [rightSidebarWidth, id]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
-    "data-testid": testId,
-    css: rightSidebarStyles(isFixed),
-    id: id
-  }, getPageLayoutSlotSelector('right-sidebar')), jsx(SlotDimensions, {
-    variableName: VAR_RIGHT_SIDEBAR_WIDTH,
-    value: rightSidebarWidth
-  }), jsx("div", {
-    css: fixedRightSidebarInnerStyles(isFixed)
-  }, children));
+  return jsx(SlotFocusRing, {
+    isSidebar: true
+  }, function (_ref) {
+    var className = _ref.className;
+    return jsx("div", _extends({
+      "data-testid": testId,
+      css: [outerStyles, isFixed && fixedOuterStyles],
+      className: className,
+      id: id
+    }, getPageLayoutSlotSelector('right-sidebar')), jsx(SlotDimensions, {
+      variableName: VAR_RIGHT_SIDEBAR_WIDTH,
+      value: rightSidebarWidth
+    }), jsx("div", {
+      css: [isFixed && fixedInnerStyles, !isFixed && staticInnerStyles]
+    }, children));
+  });
 };
 
 export default RightSidebar;

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

@@ -3,12 +3,23 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/core';
-import { DEFAULT_TOP_NAVIGATION_HEIGHT, VAR_TOP_NAVIGATION_HEIGHT } from '../../common/constants';
+import { css, jsx } from '@emotion/core';
+import { BANNER_HEIGHT, DEFAULT_TOP_NAVIGATION_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT, VAR_TOP_NAVIGATION_HEIGHT } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
+import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
-import { topNavigationStyles } from './styles';
+var topNavigationStyles = css({
+  height: TOP_NAVIGATION_HEIGHT,
+  gridArea: TOP_NAVIGATION
+});
+var fixedStyles = css({
+  position: 'fixed',
+  zIndex: 2,
+  top: BANNER_HEIGHT,
+  right: RIGHT_PANEL_WIDTH,
+  left: LEFT_PANEL_WIDTH
+});
 
 var TopNavigation = function TopNavigation(props) {
   var children = props.children,
@@ -25,17 +36,21 @@ var TopNavigation = function TopNavigation(props) {
     publishGridState(_defineProperty({}, VAR_TOP_NAVIGATION_HEIGHT, topNavigationHeight));
     return function () {
       publishGridState(_defineProperty({}, VAR_TOP_NAVIGATION_HEIGHT, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [topNavigationHeight]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
-    css: topNavigationStyles(isFixed),
-    "data-testid": testId,
-    id: id
-  }, getPageLayoutSlotSelector('top-navigation')), jsx(SlotDimensions, {
-    variableName: VAR_TOP_NAVIGATION_HEIGHT,
-    value: topNavigationHeight
-  }), children);
+  return jsx(SlotFocusRing, null, function (_ref) {
+    var className = _ref.className;
+    return jsx("div", _extends({
+      css: [topNavigationStyles, isFixed && fixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, getPageLayoutSlotSelector('top-navigation')), jsx(SlotDimensions, {
+      variableName: VAR_TOP_NAVIGATION_HEIGHT,
+      value: topNavigationHeight
+    }), children);
+  });
 };
 
 export default TopNavigation;

package/dist/esm/controllers/sidebar-resize-context.js

@@ -16,7 +16,8 @@ var leftSidebarState = {
   isLeftSidebarCollapsed: false,
   leftSidebarWidth: 0,
   lastLeftSidebarWidth: 0,
-  flyoutLockCount: 0
+  flyoutLockCount: 0,
+  isFixed: true
 };
 export var SidebarResizeContext = /*#__PURE__*/createContext({
   isLeftSidebarCollapsed: false,

package/dist/esm/controllers/sidebar-resize-controller.js

@@ -26,7 +26,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     isLeftSidebarCollapsed: false,
     leftSidebarWidth: 0,
     lastLeftSidebarWidth: 0,
-    flyoutLockCount: 0
+    flyoutLockCount: 0,
+    isFixed: true
   }),
       _useState2 = _slicedToArray(_useState, 2),
       leftSidebarState = _useState2[0],
@@ -54,7 +55,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
   var expandLeftSidebar = useCallback(function () {
     var lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth,
         isResizing = leftSidebarState.isResizing,
-        flyoutLockCount = leftSidebarState.flyoutLockCount;
+        flyoutLockCount = leftSidebarState.flyoutLockCount,
+        isFixed = leftSidebarState.isFixed;
 
     if (isResizing) {
       return;
@@ -67,7 +69,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       leftSidebarWidth: width,
       lastLeftSidebarWidth: lastLeftSidebarWidth,
       isResizing: isResizing,
-      flyoutLockCount: flyoutLockCount
+      flyoutLockCount: flyoutLockCount,
+      isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion
 
@@ -78,7 +81,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
   var collapseLeftSidebar = useCallback(function (event, collapseWithoutTransition) {
     var leftSidebarWidth = leftSidebarState.leftSidebarWidth,
         isResizing = leftSidebarState.isResizing,
-        flyoutLockCount = leftSidebarState.flyoutLockCount;
+        flyoutLockCount = leftSidebarState.flyoutLockCount,
+        isFixed = leftSidebarState.isFixed;
 
     if (isResizing) {
       return;
@@ -93,7 +97,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       leftSidebarWidth: COLLAPSED_LEFT_SIDEBAR_WIDTH,
       lastLeftSidebarWidth: leftSidebarWidth,
       isResizing: isResizing,
-      flyoutLockCount: flyoutLockCount
+      flyoutLockCount: flyoutLockCount,
+      isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"sideEffects": false
 }

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

@@ -0,0 +1,2 @@
+export { default as useIsSidebarCollapsing } from './use-is-sidebar-collapsing';
+export { default as useIsSidebarDragging } from './use-is-sidebar-dragging';

package/dist/types/common/hooks/use-is-sidebar-collapsing.d.ts

@@ -0,0 +1,2 @@
+declare const useIsSidebarCollapsing: () => boolean;
+export default useIsSidebarCollapsing;

package/dist/types/common/hooks/use-is-sidebar-dragging.d.ts

@@ -0,0 +1,2 @@
+declare const useIsSidebarDragging: () => boolean;
+export default useIsSidebarDragging;

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

@@ -0,0 +1,6 @@
+/** @jsx jsx */
+/// <reference types="react" />
+declare const Shadow: ({ testId }: {
+    testId?: string | undefined;
+}) => JSX.Element;
+export default Shadow;

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

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import type { ReactNode } from 'react';
+declare type LeftSidebarInnerProps = {
+    children: ReactNode;
+    isFixed?: boolean;
+    isFlyoutOpen?: boolean;
+};
+declare const LeftSidebarInner: ({ children, isFixed, isFlyoutOpen, }: LeftSidebarInnerProps) => JSX.Element;
+export default LeftSidebarInner;

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

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { MouseEventHandler, ReactNode } from 'react';
+declare type LeftSidebarOuterProps = {
+    children: ReactNode;
+    isFixed?: boolean;
+    isFlyoutOpen?: boolean;
+    testId?: string;
+    id?: string;
+    onMouseOver?: MouseEventHandler;
+    onMouseLeave?: MouseEventHandler;
+};
+declare const _default: import("react").ForwardRefExoticComponent<LeftSidebarOuterProps & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/types/components/slots/internal/resizable-children-wrapper.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import type { ReactNode } from 'react';
+declare type ResizableChildrenWrapperProps = {
+    children: ReactNode;
+    isFlyoutOpen?: boolean;
+    isLeftSidebarCollapsed?: boolean;
+    hasCollapsedState?: boolean;
+};
+declare const ResizableChildrenWrapper: ({ children, isLeftSidebarCollapsed, hasCollapsedState, isFlyoutOpen, }: ResizableChildrenWrapperProps) => JSX.Element;
+export default ResizableChildrenWrapper;

package/dist/types/components/slots/internal/slot-focus-ring.d.ts

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import type { ReactNode } from 'react';
+declare type SlotFocusRingProps = {
+    children: (props: {
+        className: string;
+    }) => ReactNode;
+    isSidebar?: boolean;
+};
+/**
+ * We don't use `@atlaskit/focus-ring` here,
+ * because we need inset focus styles and:
+ *
+ * 1. If we set them directly to the layout element,
+ *    then any child element's background will cover the shadow.
+ * 2. We cannot wrap `children` in `FocusRing`,
+ *    because there's no guarantee the passed child takes `className`.
+ */
+declare const SlotFocusRing: ({ children, isSidebar }: SlotFocusRingProps) => JSX.Element;
+export default SlotFocusRing;

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

@@ -6,6 +6,7 @@ export declare type LeftSidebarState = {
     leftSidebarWidth: number;
     lastLeftSidebarWidth: number;
     flyoutLockCount: number;
+    isFixed: boolean;
 };
 export declare type SidebarResizeContextValue = {
     isLeftSidebarCollapsed: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.1.0",
-  "description": "A collection of components which let you compose an application's page layout",
+  "version": "1.2.0",
+  "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -19,14 +19,15 @@
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Page Layout"
+      "name": "Page layout"
     }
   },
+  "homepage": "https://atlassian.design/components/page-layout/",
   "dependencies": {
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.7.0",
+    "@atlaskit/tokens": "^0.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "raf-schd": "^4.0.3"
@@ -57,6 +58,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/dom": "^7.7.3",
     "@testing-library/react": "^8.0.1",
+    "@testing-library/react-hooks": "^1.0.4",
     "@types/raf-schd": "^4.0.1",
     "jest-emotion": "^10.0.32",
     "raf-stub": "^2.0.1",
@@ -85,7 +87,8 @@
       ],
       "deprecation": "no-deprecated-imports",
       "styling": [
-        "emotion"
+        "emotion",
+        "static"
       ]
     }
   },

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

@@ -1,158 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shadowCSS = exports.resizeIconButtonCSS = exports.resizeControlCSS = exports.lineCSS = exports.increaseHitArea = exports.grabAreaCSS = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _motion = require("@atlaskit/motion");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("../../common/constants");
-
-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 resizeControlCSS = function resizeControlCSS(setIsGrabAreaFocused, isLeftSidebarCollapsed) {
-  var _$concat, _ref;
-
-  return _ref = {
-    left: '100%',
-    top: 0,
-    bottom: 0,
-    position: 'absolute',
-    outline: 'none'
-  }, (0, _defineProperty2.default)(_ref, "[".concat(_constants.GRAB_AREA_SELECTOR, "]:enabled"), (_$concat = {}, (0, _defineProperty2.default)(_$concat, "&:hover [".concat(_constants.GRAB_AREA_LINE_SELECTOR, "]"), {
-    backgroundColor: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B100, ")")
-  }), (0, _defineProperty2.default)(_$concat, "&:active [".concat(_constants.GRAB_AREA_LINE_SELECTOR, "] , &:focus [").concat(_constants.GRAB_AREA_LINE_SELECTOR, "]"), {
-    backgroundColor: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B200, ")")
-  }), (0, _defineProperty2.default)(_$concat, "&:hover [".concat(_constants.RESIZE_BUTTON_SELECTOR, "]:not(:focus):not(:hover)"), {
-    backgroundColor: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B100, ")")
-  }), (0, _defineProperty2.default)(_$concat, "&:hover [".concat(_constants.RESIZE_BUTTON_SELECTOR, "]"), {
-    opacity: 1
-  }), _$concat)), (0, _defineProperty2.default)(_ref, "[".concat(_constants.RESIZE_BUTTON_SELECTOR, "]"), {
-    opacity: setIsGrabAreaFocused || isLeftSidebarCollapsed ? 1 : 0
-  }), _ref;
-};
-
-exports.resizeControlCSS = resizeControlCSS;
-
-var resizeIconButtonCSS = function resizeIconButtonCSS(isCollapsed) {
-  return _objectSpread(_objectSpread({
-    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-    position: 'absolute',
-    top: 32,
-    left: 0,
-    transform: 'translateX(-50%)',
-    border: 0,
-    borderRadius: '50%',
-    // TODO https://product-fabric.atlassian.net/browse/DSP-3392
-    // 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',
-    height: 24,
-    opacity: 0,
-    outline: 0,
-    padding: 0,
-    transition: "\n    background-color ".concat(_motion.smallDurationMs, "ms linear,\n    color ").concat(_motion.smallDurationMs, "ms linear,\n    opacity ").concat(_motion.mediumDurationMs, "ms ").concat(_motion.easeOut, "\n  "),
-    width: 24,
-    ':hover': {
-      backgroundColor: "var(--ds-background-brand-hovered, ".concat(_colors.B100, ")"),
-      color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-      opacity: 1
-    },
-    ':active': {
-      backgroundColor: "var(--ds-background-brand-pressed, ".concat(_colors.B200, ")"),
-      color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-      opacity: 1
-    },
-    ':focus': {
-      backgroundColor: "var(--ds-background-brand-pressed, ".concat(_colors.B200, ")"),
-      color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-      opacity: 1
-    }
-  }, !isCollapsed && {
-    transform: 'rotate(180deg)',
-    transformOrigin: 7,
-    opacity: 1
-  }), {}, (0, _defineProperty2.default)({}, "[".concat(_constants.IS_SIDEBAR_DRAGGING, "] &"), {
-    opacity: 1
-  }));
-};
-
-exports.resizeIconButtonCSS = resizeIconButtonCSS;
-
-var grabAreaCSS = function grabAreaCSS(isLeftSidebarCollapsed) {
-  var _objectSpread3;
-
-  return _objectSpread((_objectSpread3 = {
-    cursor: 'ew-resize',
-    height: '100%',
-    width: '24px',
-    padding: 0,
-    border: 0,
-    backgroundColor: 'transparent'
-  }, (0, _defineProperty2.default)(_objectSpread3, '&::-moz-focus-inner', {
-    border: 0
-  }), (0, _defineProperty2.default)(_objectSpread3, ':focus', {
-    outline: 0
-  }), _objectSpread3), isLeftSidebarCollapsed && {
-    padding: 0,
-    border: 0,
-    backgroundColor: 'transparent',
-    cursor: 'default'
-  });
-};
-
-exports.grabAreaCSS = grabAreaCSS;
-
-var lineCSS = function lineCSS(isLeftSidebarCollapsed) {
-  return _objectSpread({
-    display: 'block',
-    height: '100%',
-    transition: 'background-color 200ms',
-    width: 2
-  }, isLeftSidebarCollapsed && {
-    '&&': {
-      backgroundColor: 'transparent'
-    }
-  });
-};
-
-exports.lineCSS = lineCSS;
-var increaseHitArea = {
-  position: 'absolute',
-  left: -8,
-  right: -12,
-  bottom: -8,
-  top: -8
-};
-exports.increaseHitArea = increaseHitArea;
-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 shadowCSS = (0, _defineProperty2.default)({
-  background: "linear-gradient(".concat(direction, ", ").concat(colorStops, ")"),
-  bottom: 0,
-  top: 0,
-  left: -1,
-  opacity: 0.5,
-  pointerEvents: 'none',
-  position: 'absolute',
-  transitionDuration: transitionDuration,
-  transitionProperty: 'left, opacity, width',
-  transitionTimingFunction: _motion.easeOut,
-  width: 3
-}, "[".concat(_constants.IS_SIDEBAR_DRAGGING, "] &"), {
-  opacity: 0.8,
-  width: 6,
-  left: -6
-});
-exports.shadowCSS = shadowCSS;

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

@@ -1,58 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.skipLinkStyles = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _motion = require("@atlaskit/motion");
-
-var _colors = require("@atlaskit/theme/colors");
-
-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 skipLinkStyles = _objectSpread(_objectSpread({
-  zIndex: -1,
-  left: -999999,
-  position: 'fixed',
-  opacity: 0,
-  background: "var(--ds-surface-overlay, white)",
-  border: 'none',
-  padding: '0.8rem 1rem',
-  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), ")"),
-  borderRadius: '3px',
-  margin: 10
-}, (0, _motion.prefersReducedMotion)()), {}, {
-  transform: 'translateY(-50%)',
-  transition: "transform 0.3s ".concat(_motion.easeOut),
-  ':focus-within': {
-    transform: 'translateY(0%)',
-    opacity: 1,
-    left: 0,
-
-    /* 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
-  },
-  '& > span': {
-    fontWeight: 'bold'
-  },
-  '> ol': {
-    listStyleType: 'none',
-    listStylePosition: 'outside',
-    paddingLeft: 0,
-    marginTop: '4px',
-    '> li': {
-      marginTop: 0
-    }
-  }
-});
-
-exports.skipLinkStyles = skipLinkStyles;