@atlaskit/page-layout 1.0.5 → 1.1.0

package/dist/cjs/controllers/skip-link-context.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSkipLink = exports.useSkipLinks = exports.SkipLinksContext = void 0;
+exports.useSkipLinks = exports.useSkipLink = exports.SkipLinksContext = void 0;
 
 var _react = require("react");
 

package/dist/cjs/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "PageLayout", {
+Object.defineProperty(exports, "BANNER_HEIGHT", {
   enumerable: true,
   get: function get() {
-    return _components.PageLayout;
+    return _constants.BANNER_HEIGHT;
   }
 });
-Object.defineProperty(exports, "Main", {
+Object.defineProperty(exports, "Banner", {
   enumerable: true,
   get: function get() {
-    return _components.Main;
+    return _components.Banner;
   }
 });
 Object.defineProperty(exports, "Content", {
@@ -21,70 +21,70 @@ Object.defineProperty(exports, "Content", {
     return _components.Content;
   }
 });
-Object.defineProperty(exports, "RightSidebar", {
+Object.defineProperty(exports, "LEFT_PANEL_WIDTH", {
   enumerable: true,
   get: function get() {
-    return _components.RightSidebar;
+    return _constants.LEFT_PANEL_WIDTH;
   }
 });
-Object.defineProperty(exports, "LeftSidebar", {
+Object.defineProperty(exports, "LEFT_SIDEBAR_WIDTH", {
   enumerable: true,
   get: function get() {
-    return _components.LeftSidebar;
+    return _constants.LEFT_SIDEBAR_WIDTH;
   }
 });
-Object.defineProperty(exports, "LeftSidebarWithoutResize", {
+Object.defineProperty(exports, "LeftPanel", {
   enumerable: true,
   get: function get() {
-    return _components.LeftSidebarWithoutResize;
+    return _components.LeftPanel;
   }
 });
-Object.defineProperty(exports, "RightPanel", {
+Object.defineProperty(exports, "LeftSidebar", {
   enumerable: true,
   get: function get() {
-    return _components.RightPanel;
+    return _components.LeftSidebar;
   }
 });
-Object.defineProperty(exports, "LeftPanel", {
+Object.defineProperty(exports, "LeftSidebarWithoutResize", {
   enumerable: true,
   get: function get() {
-    return _components.LeftPanel;
+    return _components.LeftSidebarWithoutResize;
   }
 });
-Object.defineProperty(exports, "Banner", {
+Object.defineProperty(exports, "Main", {
   enumerable: true,
   get: function get() {
-    return _components.Banner;
+    return _components.Main;
   }
 });
-Object.defineProperty(exports, "TopNavigation", {
+Object.defineProperty(exports, "PageLayout", {
   enumerable: true,
   get: function get() {
-    return _components.TopNavigation;
+    return _components.PageLayout;
   }
 });
-Object.defineProperty(exports, "useCustomSkipLink", {
+Object.defineProperty(exports, "RIGHT_PANEL_WIDTH", {
   enumerable: true,
   get: function get() {
-    return _components.useCustomSkipLink;
+    return _constants.RIGHT_PANEL_WIDTH;
   }
 });
-Object.defineProperty(exports, "LEFT_PANEL_WIDTH", {
+Object.defineProperty(exports, "RIGHT_SIDEBAR_WIDTH", {
   enumerable: true,
   get: function get() {
-    return _constants.LEFT_PANEL_WIDTH;
+    return _constants.RIGHT_SIDEBAR_WIDTH;
   }
 });
-Object.defineProperty(exports, "RIGHT_PANEL_WIDTH", {
+Object.defineProperty(exports, "RightPanel", {
   enumerable: true,
   get: function get() {
-    return _constants.RIGHT_PANEL_WIDTH;
+    return _components.RightPanel;
   }
 });
-Object.defineProperty(exports, "BANNER_HEIGHT", {
+Object.defineProperty(exports, "RightSidebar", {
   enumerable: true,
   get: function get() {
-    return _constants.BANNER_HEIGHT;
+    return _components.RightSidebar;
   }
 });
 Object.defineProperty(exports, "TOP_NAVIGATION_HEIGHT", {
@@ -93,28 +93,28 @@ Object.defineProperty(exports, "TOP_NAVIGATION_HEIGHT", {
     return _constants.TOP_NAVIGATION_HEIGHT;
   }
 });
-Object.defineProperty(exports, "LEFT_SIDEBAR_WIDTH", {
+Object.defineProperty(exports, "TopNavigation", {
   enumerable: true,
   get: function get() {
-    return _constants.LEFT_SIDEBAR_WIDTH;
+    return _components.TopNavigation;
   }
 });
-Object.defineProperty(exports, "RIGHT_SIDEBAR_WIDTH", {
+Object.defineProperty(exports, "useCustomSkipLink", {
   enumerable: true,
   get: function get() {
-    return _constants.RIGHT_SIDEBAR_WIDTH;
+    return _components.useCustomSkipLink;
   }
 });
-Object.defineProperty(exports, "usePageLayoutResize", {
+Object.defineProperty(exports, "useLeftSidebarFlyoutLock", {
   enumerable: true,
   get: function get() {
-    return _controllers.usePageLayoutResize;
+    return _controllers.useLeftSidebarFlyoutLock;
   }
 });
-Object.defineProperty(exports, "useLeftSidebarFlyoutLock", {
+Object.defineProperty(exports, "usePageLayoutResize", {
   enumerable: true,
   get: function get() {
-    return _controllers.useLeftSidebarFlyoutLock;
+    return _controllers.usePageLayoutResize;
   }
 });
 

package/dist/cjs/version.json

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

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

@@ -17,6 +17,7 @@ const GrabArea = ({
   ...rest
 }) => jsx("button", _extends({}, grabAreaSelector, {
   "data-testid": testId,
+  type: "button",
   css: grabAreaCSS(isLeftSidebarCollapsed)
 }, rest), jsx("span", _extends({
   css: lineCSS(isLeftSidebarCollapsed)

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

@@ -7,15 +7,16 @@ export const resizeControlCSS = (setIsGrabAreaFocused, isLeftSidebarCollapsed) =
   bottom: 0,
   position: 'absolute',
   outline: 'none',
+  // TODO https://product-fabric.atlassian.net/browse/DSP-3392
   [`[${GRAB_AREA_SELECTOR}]:enabled`]: {
     [`&:hover [${GRAB_AREA_LINE_SELECTOR}]`]: {
-      backgroundColor: B100
+      backgroundColor: `var(--ds-background-brand-bold-hovered, ${B100})`
     },
     [`&:active [${GRAB_AREA_LINE_SELECTOR}] , &:focus [${GRAB_AREA_LINE_SELECTOR}]`]: {
-      backgroundColor: B200
+      backgroundColor: `var(--ds-background-brand-bold-pressed, ${B200})`
     },
     [`&:hover [${RESIZE_BUTTON_SELECTOR}]:not(:focus):not(:hover)`]: {
-      color: B100
+      backgroundColor: `var(--ds-background-brand-bold-hovered, ${B100})`
     },
     [`&:hover [${RESIZE_BUTTON_SELECTOR}]`]: {
       opacity: 1
@@ -26,15 +27,17 @@ export const resizeControlCSS = (setIsGrabAreaFocused, isLeftSidebarCollapsed) =
   }
 });
 export const resizeIconButtonCSS = isCollapsed => ({
-  backgroundColor: N0,
+  backgroundColor: `var(--ds-surface-overlay, ${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 ${N30A}, 0 2px 4px 1px ${N30A}`,
-  color: N200,
+  color: `var(--ds-text-subtle, ${N200})`,
   cursor: 'pointer',
   height: 24,
   opacity: 0,
@@ -47,18 +50,18 @@ export const resizeIconButtonCSS = isCollapsed => ({
   `,
   width: 24,
   ':hover': {
-    backgroundColor: B100,
-    color: N0,
+    backgroundColor: `var(--ds-background-brand-hovered, ${B100})`,
+    color: `var(--ds-text-inverse, ${N0})`,
     opacity: 1
   },
   ':active': {
-    backgroundColor: B200,
-    color: N0,
+    backgroundColor: `var(--ds-background-brand-pressed, ${B200})`,
+    color: `var(--ds-text-inverse, ${N0})`,
     opacity: 1
   },
   ':focus': {
-    backgroundColor: B200,
-    color: N0,
+    backgroundColor: `var(--ds-background-brand-pressed, ${B200})`,
+    color: `var(--ds-text-inverse, ${N0})`,
     opacity: 1
   },
   ...(!isCollapsed && {

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

@@ -5,10 +5,10 @@ export const skipLinkStyles = {
   left: -999999,
   position: 'fixed',
   opacity: 0,
-  background: 'white',
+  background: "var(--ds-surface-overlay, white)",
   border: 'none',
   padding: '0.8rem 1rem',
-  boxShadow: `0 0 0 1px ${N30A}, 0 2px 10px ${N30A}, 0 0 20px -4px ${N60A}`,
+  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 10px ${N30A}, 0 0 20px -4px ${N60A}`})`,
   borderRadius: '3px',
   margin: 10,
 

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

@@ -29,11 +29,11 @@ export const focusStyles = {
     outline: 'none',
     '&  [data-wrapper-element]': {
       outline: 'none',
-      boxShadow: '0px 0px 0px 2px inset #4C9AFF'
+      boxShadow: `0px 0px 0px 2px inset ${"var(--ds-border-focused, #4C9AFF)"}`
     },
     '& > div:not([data-skip-link-wrapper])': {
       outline: 'none',
-      boxShadow: '0px 0px 0px 2px inset #4C9AFF'
+      boxShadow: `0px 0px 0px 2px inset ${"var(--ds-border-focused, #4C9AFF)"}`
     }
   }
 };

package/dist/es2019/version.json

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

package/dist/esm/common/utils.js

@@ -1,9 +1,9 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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 { DEFAULT_LEFT_SIDEBAR_WIDTH, DIMENSIONS, LEFT_PANEL_WIDTH, PAGE_LAYOUT_LS_KEY, PAGE_LAYOUT_SLOT_SELECTOR } from './constants';
 import safeLocalStorage from './safe-local-storage';

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["testId", "isLeftSidebarCollapsed"];
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
@@ -15,10 +16,11 @@ var grabAreaSelector = _defineProperty({}, GRAB_AREA_SELECTOR, true); // TODO: C
 var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
       isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
-      rest = _objectWithoutProperties(_ref, ["testId", "isLeftSidebarCollapsed"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   return jsx("button", _extends({}, grabAreaSelector, {
     "data-testid": testId,
+    type: "button",
     css: grabAreaCSS(isLeftSidebarCollapsed)
   }, rest), jsx("span", _extends({
     css: lineCSS(isLeftSidebarCollapsed)

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

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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; }
 
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
@@ -18,7 +19,7 @@ var ResizeButton = function ResizeButton(_ref) {
   var isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
       label = _ref.label,
       testId = _ref.testId,
-      props = _objectWithoutProperties(_ref, ["isLeftSidebarCollapsed", "label", "testId"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   return jsx("button", _extends({}, cssSelector, {
     // DO NOT remove. used as a CSS selector.

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

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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 { easeOut, mediumDurationMs, smallDurationMs } from '@atlaskit/motion';
 import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
@@ -17,11 +17,11 @@ export var resizeControlCSS = function resizeControlCSS(setIsGrabAreaFocused, is
     position: 'absolute',
     outline: 'none'
   }, _defineProperty(_ref, "[".concat(GRAB_AREA_SELECTOR, "]:enabled"), (_$concat = {}, _defineProperty(_$concat, "&:hover [".concat(GRAB_AREA_LINE_SELECTOR, "]"), {
-    backgroundColor: B100
+    backgroundColor: "var(--ds-background-brand-bold-hovered, ".concat(B100, ")")
   }), _defineProperty(_$concat, "&:active [".concat(GRAB_AREA_LINE_SELECTOR, "] , &:focus [").concat(GRAB_AREA_LINE_SELECTOR, "]"), {
-    backgroundColor: B200
+    backgroundColor: "var(--ds-background-brand-bold-pressed, ".concat(B200, ")")
   }), _defineProperty(_$concat, "&:hover [".concat(RESIZE_BUTTON_SELECTOR, "]:not(:focus):not(:hover)"), {
-    color: B100
+    backgroundColor: "var(--ds-background-brand-bold-hovered, ".concat(B100, ")")
   }), _defineProperty(_$concat, "&:hover [".concat(RESIZE_BUTTON_SELECTOR, "]"), {
     opacity: 1
   }), _$concat)), _defineProperty(_ref, "[".concat(RESIZE_BUTTON_SELECTOR, "]"), {
@@ -30,15 +30,17 @@ export var resizeControlCSS = function resizeControlCSS(setIsGrabAreaFocused, is
 };
 export var resizeIconButtonCSS = function resizeIconButtonCSS(isCollapsed) {
   return _objectSpread(_objectSpread({
-    backgroundColor: N0,
+    backgroundColor: "var(--ds-surface-overlay, ".concat(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(N30A, ", 0 2px 4px 1px ").concat(N30A),
-    color: N200,
+    color: "var(--ds-text-subtle, ".concat(N200, ")"),
     cursor: 'pointer',
     height: 24,
     opacity: 0,
@@ -47,18 +49,18 @@ export var resizeIconButtonCSS = function resizeIconButtonCSS(isCollapsed) {
     transition: "\n    background-color ".concat(smallDurationMs, "ms linear,\n    color ").concat(smallDurationMs, "ms linear,\n    opacity ").concat(mediumDurationMs, "ms ").concat(easeOut, "\n  "),
     width: 24,
     ':hover': {
-      backgroundColor: B100,
-      color: N0,
+      backgroundColor: "var(--ds-background-brand-hovered, ".concat(B100, ")"),
+      color: "var(--ds-text-inverse, ".concat(N0, ")"),
       opacity: 1
     },
     ':active': {
-      backgroundColor: B200,
-      color: N0,
+      backgroundColor: "var(--ds-background-brand-pressed, ".concat(B200, ")"),
+      color: "var(--ds-text-inverse, ".concat(N0, ")"),
       opacity: 1
     },
     ':focus': {
-      backgroundColor: B200,
-      color: N0,
+      backgroundColor: "var(--ds-background-brand-pressed, ".concat(B200, ")"),
+      color: "var(--ds-text-inverse, ".concat(N0, ")"),
       opacity: 1
     }
   }, !isCollapsed && {

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

@@ -1,9 +1,9 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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; }
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';

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

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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 { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { N30A, N60A } from '@atlaskit/theme/colors';
@@ -11,10 +11,10 @@ export var skipLinkStyles = _objectSpread(_objectSpread({
   left: -999999,
   position: 'fixed',
   opacity: 0,
-  background: 'white',
+  background: "var(--ds-surface-overlay, white)",
   border: 'none',
   padding: '0.8rem 1rem',
-  boxShadow: "0 0 0 1px ".concat(N30A, ", 0 2px 10px ").concat(N30A, ", 0 0 20px -4px ").concat(N60A),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 10px ").concat(N30A, ", 0 0 20px -4px ").concat(N60A), ")"),
   borderRadius: '3px',
   margin: 10
 }, prefersReducedMotion()), {}, {

package/dist/esm/components/slots/left-sidebar-styles.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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 { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { BANNER_HEIGHT, COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, IS_SIDEBAR_COLLAPSING, IS_SIDEBAR_DRAGGING, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, RESIZE_BUTTON_SELECTOR, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT } from '../../common/constants';

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

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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; }
 
 /** @jsx jsx */
 import { useContext, useEffect, useRef } from 'react';

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

@@ -3,9 +3,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
-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 { css } from '@emotion/core';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
@@ -18,11 +18,11 @@ export var focusStyles = {
     outline: 'none',
     '&  [data-wrapper-element]': {
       outline: 'none',
-      boxShadow: '0px 0px 0px 2px inset #4C9AFF'
+      boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, #4C9AFF)")
     },
     '& > div:not([data-skip-link-wrapper])': {
       outline: 'none',
-      boxShadow: '0px 0px 0px 2px inset #4C9AFF'
+      boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, #4C9AFF)")
     }
   }
 };

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';
 
@@ -27,7 +28,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/version.json

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

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/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/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;