@atlaskit/page-layout 1.0.6 → 1.2.0

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

@@ -1,9 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["setLeftSidebarState"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { _defineProperty(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; }
 
 import { createContext, useContext, useEffect } from 'react';
 
@@ -15,7 +16,8 @@ var leftSidebarState = {
   isLeftSidebarCollapsed: false,
   leftSidebarWidth: 0,
   lastLeftSidebarWidth: 0,
-  flyoutLockCount: 0
+  flyoutLockCount: 0,
+  isFixed: true
 };
 export var SidebarResizeContext = /*#__PURE__*/createContext({
   isLeftSidebarCollapsed: false,
@@ -27,7 +29,7 @@ export var SidebarResizeContext = /*#__PURE__*/createContext({
 export var usePageLayoutResize = function usePageLayoutResize() {
   var _useContext = useContext(SidebarResizeContext),
       setLeftSidebarState = _useContext.setLeftSidebarState,
-      context = _objectWithoutProperties(_useContext, ["setLeftSidebarState"]);
+      context = _objectWithoutProperties(_useContext, _excluded);
 
   return context;
 };

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.0.6",
+	"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/index.d.ts

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

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

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

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/banner.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SlotHeightProps } from '../../common/types';
 declare const Banner: (props: SlotHeightProps) => JSX.Element;
 export default Banner;

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/components/slots/left-panel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SlotWidthProps } from '../../common/types';
 declare const LeftPanel: (props: SlotWidthProps) => JSX.Element;
 export default LeftPanel;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SlotWidthProps } from '../../common/types';
 declare const LeftSidebarWithoutResize: (props: SlotWidthProps) => JSX.Element;
 export default LeftSidebarWithoutResize;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LeftSidebarProps } from '../../common/types';
 declare const LeftSidebar: (props: LeftSidebarProps) => JSX.Element;
 export default LeftSidebar;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SlotWidthProps } from '../../common/types';
 declare const Main: (props: SlotWidthProps) => JSX.Element;
 export default Main;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PageLayoutProps } from '../../common/types';
 declare const PageLayout: ({ skipLinksLabel, children, testId, onLeftSidebarExpand, onLeftSidebarCollapse, }: PageLayoutProps) => JSX.Element;
 export default PageLayout;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SlotWidthProps } from '../../common/types';
 declare const RightPanel: (props: SlotWidthProps) => JSX.Element;
 export default RightPanel;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SlotWidthProps } from '../../common/types';
 declare const RightSidebar: (props: SlotWidthProps) => JSX.Element;
 export default RightSidebar;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface SlotDimensionsProps {
     variableName: string;
     value?: number;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SlotHeightProps } from '../../common/types';
 declare const TopNavigation: (props: SlotHeightProps) => JSX.Element;
 export default TopNavigation;

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.0.6",
-  "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/"
   },
@@ -17,40 +17,40 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Page Layout"
+      "name": "Page layout"
     }
   },
+  "homepage": "https://atlassian.design/components/page-layout/",
   "dependencies": {
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.0.0",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
-    "raf-schd": "^2.1.0"
+    "raf-schd": "^4.0.3"
   },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^1.1.0",
+    "@atlaskit/atlassian-navigation": "^2.1.0",
     "@atlaskit/atlassian-notifications": "^0.3.0",
-    "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/drawer": "^7.0.0",
+    "@atlaskit/drawer": "^7.1.0",
     "@atlaskit/icon": "*",
     "@atlaskit/logo": "^13.0.0",
-    "@atlaskit/menu": "^1.0.0",
-    "@atlaskit/notification-indicator": "^8.0.0",
-    "@atlaskit/notification-log-client": "^5.0.0",
-    "@atlaskit/onboarding": "^10.2.0",
-    "@atlaskit/popup": "^1.1.0",
+    "@atlaskit/menu": "^1.3.0",
+    "@atlaskit/notification-indicator": "^9.0.0",
+    "@atlaskit/notification-log-client": "^6.0.0",
+    "@atlaskit/onboarding": "^10.3.0",
+    "@atlaskit/popup": "^1.3.0",
     "@atlaskit/section-message": "^6.0.0",
-    "@atlaskit/side-navigation": "^1.0.0",
+    "@atlaskit/side-navigation": "^1.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "*",
     "@atlaskit/visual-regression": "*",
@@ -58,6 +58,8 @@
     "@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",
     "storybook-addon-performance": "^0.16.0",
@@ -80,10 +82,13 @@
         "analytics-next"
       ],
       "theming": [
-        "new-theming-api"
+        "react-context",
+        "tokens"
       ],
-      "deprecation": [
-        "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion",
+        "static"
       ]
     }
   },

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

@@ -1,156 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shadowCSS = exports.increaseHitArea = exports.lineCSS = exports.grabAreaCSS = exports.resizeIconButtonCSS = exports.resizeControlCSS = 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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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: _colors.B100
-  }), (0, _defineProperty2.default)(_$concat, "&:active [".concat(_constants.GRAB_AREA_LINE_SELECTOR, "] , &:focus [").concat(_constants.GRAB_AREA_LINE_SELECTOR, "]"), {
-    backgroundColor: _colors.B200
-  }), (0, _defineProperty2.default)(_$concat, "&:hover [".concat(_constants.RESIZE_BUTTON_SELECTOR, "]:not(:focus):not(:hover)"), {
-    color: _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: _colors.N0,
-    position: 'absolute',
-    top: 32,
-    left: 0,
-    transform: 'translateX(-50%)',
-    border: 0,
-    borderRadius: '50%',
-    boxShadow: "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 4px 1px ").concat(_colors.N30A),
-    color: _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: _colors.B100,
-      color: _colors.N0,
-      opacity: 1
-    },
-    ':active': {
-      backgroundColor: _colors.B200,
-      color: _colors.N0,
-      opacity: 1
-    },
-    ':focus': {
-      backgroundColor: _colors.B200,
-      color: _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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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: 'white',
-  border: 'none',
-  padding: '0.8rem 1rem',
-  boxShadow: "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;