@atlaskit/page-layout 1.7.13 → 1.8.0

package/dist/cjs/common/constants.js

@@ -5,109 +5,60 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VAR_TOP_NAVIGATION_HEIGHT = exports.VAR_RIGHT_SIDEBAR_WIDTH = exports.VAR_RIGHT_PANEL_WIDTH = exports.VAR_LEFT_SIDEBAR_WIDTH = exports.VAR_LEFT_SIDEBAR_FLYOUT = exports.VAR_LEFT_PANEL_WIDTH = exports.VAR_BANNER_HEIGHT = exports.TRANSITION_DURATION = exports.TOP_NAVIGATION_HEIGHT = exports.TOP_NAVIGATION = exports.RIGHT_SIDEBAR_WIDTH = exports.RIGHT_SIDEBAR = exports.RIGHT_PANEL_WIDTH = exports.RIGHT_PANEL = exports.RESIZE_CONTROL_SELECTOR = exports.RESIZE_BUTTON_SELECTOR = exports.PAGE_LAYOUT_SLOT_SELECTOR = exports.PAGE_LAYOUT_LS_KEY = exports.PAGE_LAYOUT_CONTAINER_SELECTOR = exports.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH = exports.MIN_LEFT_SIDEBAR_WIDTH = exports.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = exports.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH = exports.MAIN = exports.LEFT_SIDEBAR_WIDTH = exports.LEFT_SIDEBAR_FLYOUT_WIDTH = exports.LEFT_SIDEBAR_EXPANDED_WIDTH = exports.LEFT_SIDEBAR = exports.LEFT_PANEL_WIDTH = exports.LEFT_PANEL = exports.IS_SIDEBAR_DRAGGING = exports.IS_SIDEBAR_COLLAPSING = exports.IS_FLYOUT_OPEN = exports.GRAB_AREA_SELECTOR = exports.GRAB_AREA_LINE_SELECTOR = exports.FLYOUT_DELAY = exports.DIMENSIONS = exports.DEFAULT_TOP_NAVIGATION_HEIGHT = exports.DEFAULT_RIGHT_SIDEBAR_WIDTH = exports.DEFAULT_RIGHT_PANEL_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = exports.DEFAULT_LEFT_PANEL_WIDTH = exports.DEFAULT_I18N_PROPS_SKIP_LINKS = exports.DEFAULT_BANNER_HEIGHT = exports.CONTENT = exports.COLLAPSED_LEFT_SIDEBAR_WIDTH = exports.BANNER_HEIGHT = exports.BANNER = void 0;
 // dimension vars
-var VAR_LEFT_PANEL_WIDTH = 'leftPanelWidth';
-exports.VAR_LEFT_PANEL_WIDTH = VAR_LEFT_PANEL_WIDTH;
-var VAR_LEFT_SIDEBAR_WIDTH = 'leftSidebarWidth';
-exports.VAR_LEFT_SIDEBAR_WIDTH = VAR_LEFT_SIDEBAR_WIDTH;
-var VAR_RIGHT_SIDEBAR_WIDTH = 'rightSidebarWidth';
-exports.VAR_RIGHT_SIDEBAR_WIDTH = VAR_RIGHT_SIDEBAR_WIDTH;
-var VAR_RIGHT_PANEL_WIDTH = 'rightPanelWidth';
-exports.VAR_RIGHT_PANEL_WIDTH = VAR_RIGHT_PANEL_WIDTH;
-var VAR_TOP_NAVIGATION_HEIGHT = 'topNavigationHeight';
-exports.VAR_TOP_NAVIGATION_HEIGHT = VAR_TOP_NAVIGATION_HEIGHT;
-var VAR_BANNER_HEIGHT = 'bannerHeight';
-exports.VAR_BANNER_HEIGHT = VAR_BANNER_HEIGHT;
-var VAR_LEFT_SIDEBAR_FLYOUT = 'leftSidebarFlyoutWidth';
-exports.VAR_LEFT_SIDEBAR_FLYOUT = VAR_LEFT_SIDEBAR_FLYOUT;
-var DIMENSIONS = [VAR_LEFT_PANEL_WIDTH, VAR_RIGHT_PANEL_WIDTH, VAR_BANNER_HEIGHT, VAR_TOP_NAVIGATION_HEIGHT, VAR_LEFT_SIDEBAR_WIDTH, VAR_RIGHT_SIDEBAR_WIDTH];
+var VAR_LEFT_PANEL_WIDTH = exports.VAR_LEFT_PANEL_WIDTH = 'leftPanelWidth';
+var VAR_LEFT_SIDEBAR_WIDTH = exports.VAR_LEFT_SIDEBAR_WIDTH = 'leftSidebarWidth';
+var VAR_RIGHT_SIDEBAR_WIDTH = exports.VAR_RIGHT_SIDEBAR_WIDTH = 'rightSidebarWidth';
+var VAR_RIGHT_PANEL_WIDTH = exports.VAR_RIGHT_PANEL_WIDTH = 'rightPanelWidth';
+var VAR_TOP_NAVIGATION_HEIGHT = exports.VAR_TOP_NAVIGATION_HEIGHT = 'topNavigationHeight';
+var VAR_BANNER_HEIGHT = exports.VAR_BANNER_HEIGHT = 'bannerHeight';
+var VAR_LEFT_SIDEBAR_FLYOUT = exports.VAR_LEFT_SIDEBAR_FLYOUT = 'leftSidebarFlyoutWidth';
+var DIMENSIONS = exports.DIMENSIONS = [VAR_LEFT_PANEL_WIDTH, VAR_RIGHT_PANEL_WIDTH, VAR_BANNER_HEIGHT, VAR_TOP_NAVIGATION_HEIGHT, VAR_LEFT_SIDEBAR_WIDTH, VAR_RIGHT_SIDEBAR_WIDTH];
 
 // Grid area names
-exports.DIMENSIONS = DIMENSIONS;
-var LEFT_PANEL = 'left-panel';
-exports.LEFT_PANEL = LEFT_PANEL;
-var RIGHT_PANEL = 'right-panel';
-exports.RIGHT_PANEL = RIGHT_PANEL;
-var BANNER = 'banner';
-exports.BANNER = BANNER;
-var TOP_NAVIGATION = 'top-navigation';
-exports.TOP_NAVIGATION = TOP_NAVIGATION;
-var CONTENT = 'content';
-exports.CONTENT = CONTENT;
-var MAIN = 'main';
-exports.MAIN = MAIN;
-var LEFT_SIDEBAR = 'left-sidebar';
-exports.LEFT_SIDEBAR = LEFT_SIDEBAR;
-var RIGHT_SIDEBAR = 'right-sidebar';
+var LEFT_PANEL = exports.LEFT_PANEL = 'left-panel';
+var RIGHT_PANEL = exports.RIGHT_PANEL = 'right-panel';
+var BANNER = exports.BANNER = 'banner';
+var TOP_NAVIGATION = exports.TOP_NAVIGATION = 'top-navigation';
+var CONTENT = exports.CONTENT = 'content';
+var MAIN = exports.MAIN = 'main';
+var LEFT_SIDEBAR = exports.LEFT_SIDEBAR = 'left-sidebar';
+var RIGHT_SIDEBAR = exports.RIGHT_SIDEBAR = 'right-sidebar';
 
 // Default slot dimension values
-exports.RIGHT_SIDEBAR = RIGHT_SIDEBAR;
-var DEFAULT_BANNER_HEIGHT = 56;
-exports.DEFAULT_BANNER_HEIGHT = DEFAULT_BANNER_HEIGHT;
-var DEFAULT_TOP_NAVIGATION_HEIGHT = 56;
-exports.DEFAULT_TOP_NAVIGATION_HEIGHT = DEFAULT_TOP_NAVIGATION_HEIGHT;
-var DEFAULT_LEFT_SIDEBAR_WIDTH = 240;
-exports.DEFAULT_LEFT_SIDEBAR_WIDTH = DEFAULT_LEFT_SIDEBAR_WIDTH;
-var DEFAULT_RIGHT_SIDEBAR_WIDTH = 280;
-exports.DEFAULT_RIGHT_SIDEBAR_WIDTH = DEFAULT_RIGHT_SIDEBAR_WIDTH;
-var DEFAULT_RIGHT_PANEL_WIDTH = 368;
-exports.DEFAULT_RIGHT_PANEL_WIDTH = DEFAULT_RIGHT_PANEL_WIDTH;
-var DEFAULT_LEFT_PANEL_WIDTH = 368;
+var DEFAULT_BANNER_HEIGHT = exports.DEFAULT_BANNER_HEIGHT = 56;
+var DEFAULT_TOP_NAVIGATION_HEIGHT = exports.DEFAULT_TOP_NAVIGATION_HEIGHT = 56;
+var DEFAULT_LEFT_SIDEBAR_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_WIDTH = 240;
+var DEFAULT_RIGHT_SIDEBAR_WIDTH = exports.DEFAULT_RIGHT_SIDEBAR_WIDTH = 280;
+var DEFAULT_RIGHT_PANEL_WIDTH = exports.DEFAULT_RIGHT_PANEL_WIDTH = 368;
+var DEFAULT_LEFT_PANEL_WIDTH = exports.DEFAULT_LEFT_PANEL_WIDTH = 368;
 
 // Other constants
-exports.DEFAULT_LEFT_PANEL_WIDTH = DEFAULT_LEFT_PANEL_WIDTH;
-var COLLAPSED_LEFT_SIDEBAR_WIDTH = 20;
-exports.COLLAPSED_LEFT_SIDEBAR_WIDTH = COLLAPSED_LEFT_SIDEBAR_WIDTH;
-var MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH = 16;
-exports.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH = MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH;
-var MIN_LEFT_SIDEBAR_WIDTH = 80;
-exports.MIN_LEFT_SIDEBAR_WIDTH = MIN_LEFT_SIDEBAR_WIDTH;
-var DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = 240;
-exports.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH;
-var MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = 200;
-exports.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = MIN_LEFT_SIDEBAR_DRAG_THRESHOLD;
-var MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH = 350;
-exports.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH = MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH;
-var TRANSITION_DURATION = 300;
-exports.TRANSITION_DURATION = TRANSITION_DURATION;
-var FLYOUT_DELAY = 200;
-exports.FLYOUT_DELAY = FLYOUT_DELAY;
-var LEFT_SIDEBAR_EXPANDED_WIDTH = 'expandedLeftSidebarWidth';
-exports.LEFT_SIDEBAR_EXPANDED_WIDTH = LEFT_SIDEBAR_EXPANDED_WIDTH;
-var PAGE_LAYOUT_LS_KEY = 'DS_PAGE_LAYOUT_UI_STATE';
+var COLLAPSED_LEFT_SIDEBAR_WIDTH = exports.COLLAPSED_LEFT_SIDEBAR_WIDTH = 20;
+var MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH = exports.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH = 16;
+var MIN_LEFT_SIDEBAR_WIDTH = exports.MIN_LEFT_SIDEBAR_WIDTH = 80;
+var DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = 240;
+var MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = exports.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = 200;
+var MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH = exports.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH = 350;
+var TRANSITION_DURATION = exports.TRANSITION_DURATION = 300;
+var FLYOUT_DELAY = exports.FLYOUT_DELAY = 200;
+var LEFT_SIDEBAR_EXPANDED_WIDTH = exports.LEFT_SIDEBAR_EXPANDED_WIDTH = 'expandedLeftSidebarWidth';
+var PAGE_LAYOUT_LS_KEY = exports.PAGE_LAYOUT_LS_KEY = 'DS_PAGE_LAYOUT_UI_STATE';
 
 // Data attributes
-exports.PAGE_LAYOUT_LS_KEY = PAGE_LAYOUT_LS_KEY;
-var IS_SIDEBAR_DRAGGING = 'data-is-sidebar-dragging';
-exports.IS_SIDEBAR_DRAGGING = IS_SIDEBAR_DRAGGING;
-var IS_SIDEBAR_COLLAPSING = 'data-is-sidebar-collapsing';
-exports.IS_SIDEBAR_COLLAPSING = IS_SIDEBAR_COLLAPSING;
-var IS_FLYOUT_OPEN = 'data-is-flyout-open';
-exports.IS_FLYOUT_OPEN = IS_FLYOUT_OPEN;
-var GRAB_AREA_LINE_SELECTOR = 'data-grab-area-line';
-exports.GRAB_AREA_LINE_SELECTOR = GRAB_AREA_LINE_SELECTOR;
-var GRAB_AREA_SELECTOR = 'data-grab-area';
-exports.GRAB_AREA_SELECTOR = GRAB_AREA_SELECTOR;
-var RESIZE_BUTTON_SELECTOR = 'data-resize-button';
-exports.RESIZE_BUTTON_SELECTOR = RESIZE_BUTTON_SELECTOR;
-var RESIZE_CONTROL_SELECTOR = 'data-resize-control';
-exports.RESIZE_CONTROL_SELECTOR = RESIZE_CONTROL_SELECTOR;
-var PAGE_LAYOUT_SLOT_SELECTOR = 'data-ds--page-layout--slot';
-exports.PAGE_LAYOUT_SLOT_SELECTOR = PAGE_LAYOUT_SLOT_SELECTOR;
-var DEFAULT_I18N_PROPS_SKIP_LINKS = 'Skip to:';
-exports.DEFAULT_I18N_PROPS_SKIP_LINKS = DEFAULT_I18N_PROPS_SKIP_LINKS;
-var PAGE_LAYOUT_CONTAINER_SELECTOR = 'data-layout-container';
-exports.PAGE_LAYOUT_CONTAINER_SELECTOR = PAGE_LAYOUT_CONTAINER_SELECTOR;
-var LEFT_PANEL_WIDTH = "var(--".concat(VAR_LEFT_PANEL_WIDTH, ", 0px)");
-exports.LEFT_PANEL_WIDTH = LEFT_PANEL_WIDTH;
-var RIGHT_PANEL_WIDTH = "var(--".concat(VAR_RIGHT_PANEL_WIDTH, ", 0px)");
-exports.RIGHT_PANEL_WIDTH = RIGHT_PANEL_WIDTH;
-var LEFT_SIDEBAR_WIDTH = "var(--".concat(VAR_LEFT_SIDEBAR_WIDTH, ", 0px)");
-exports.LEFT_SIDEBAR_WIDTH = LEFT_SIDEBAR_WIDTH;
-var RIGHT_SIDEBAR_WIDTH = "var(--".concat(VAR_RIGHT_SIDEBAR_WIDTH, ", 0px)");
-exports.RIGHT_SIDEBAR_WIDTH = RIGHT_SIDEBAR_WIDTH;
-var TOP_NAVIGATION_HEIGHT = "var(--".concat(VAR_TOP_NAVIGATION_HEIGHT, ", 0px)");
-exports.TOP_NAVIGATION_HEIGHT = TOP_NAVIGATION_HEIGHT;
-var BANNER_HEIGHT = "var(--".concat(VAR_BANNER_HEIGHT, ", 0px)");
-exports.BANNER_HEIGHT = BANNER_HEIGHT;
-var LEFT_SIDEBAR_FLYOUT_WIDTH = "var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px)");
-exports.LEFT_SIDEBAR_FLYOUT_WIDTH = LEFT_SIDEBAR_FLYOUT_WIDTH;
+var IS_SIDEBAR_DRAGGING = exports.IS_SIDEBAR_DRAGGING = 'data-is-sidebar-dragging';
+var IS_SIDEBAR_COLLAPSING = exports.IS_SIDEBAR_COLLAPSING = 'data-is-sidebar-collapsing';
+var IS_FLYOUT_OPEN = exports.IS_FLYOUT_OPEN = 'data-is-flyout-open';
+var GRAB_AREA_LINE_SELECTOR = exports.GRAB_AREA_LINE_SELECTOR = 'data-grab-area-line';
+var GRAB_AREA_SELECTOR = exports.GRAB_AREA_SELECTOR = 'data-grab-area';
+var RESIZE_BUTTON_SELECTOR = exports.RESIZE_BUTTON_SELECTOR = 'data-resize-button';
+var RESIZE_CONTROL_SELECTOR = exports.RESIZE_CONTROL_SELECTOR = 'data-resize-control';
+var PAGE_LAYOUT_SLOT_SELECTOR = exports.PAGE_LAYOUT_SLOT_SELECTOR = 'data-ds--page-layout--slot';
+var DEFAULT_I18N_PROPS_SKIP_LINKS = exports.DEFAULT_I18N_PROPS_SKIP_LINKS = 'Skip to:';
+var PAGE_LAYOUT_CONTAINER_SELECTOR = exports.PAGE_LAYOUT_CONTAINER_SELECTOR = 'data-layout-container';
+var LEFT_PANEL_WIDTH = exports.LEFT_PANEL_WIDTH = "var(--".concat(VAR_LEFT_PANEL_WIDTH, ", 0px)");
+var RIGHT_PANEL_WIDTH = exports.RIGHT_PANEL_WIDTH = "var(--".concat(VAR_RIGHT_PANEL_WIDTH, ", 0px)");
+var LEFT_SIDEBAR_WIDTH = exports.LEFT_SIDEBAR_WIDTH = "var(--".concat(VAR_LEFT_SIDEBAR_WIDTH, ", 0px)");
+var RIGHT_SIDEBAR_WIDTH = exports.RIGHT_SIDEBAR_WIDTH = "var(--".concat(VAR_RIGHT_SIDEBAR_WIDTH, ", 0px)");
+var TOP_NAVIGATION_HEIGHT = exports.TOP_NAVIGATION_HEIGHT = "var(--".concat(VAR_TOP_NAVIGATION_HEIGHT, ", 0px)");
+var BANNER_HEIGHT = exports.BANNER_HEIGHT = "var(--".concat(VAR_BANNER_HEIGHT, ", 0px)");
+var LEFT_SIDEBAR_FLYOUT_WIDTH = exports.LEFT_SIDEBAR_FLYOUT_WIDTH = "var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px)");

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

@@ -33,5 +33,4 @@ var useIsSidebarCollapsing = function useIsSidebarCollapsing() {
   }, []);
   return isCollapsing;
 };
-var _default = useIsSidebarCollapsing;
-exports.default = _default;
+var _default = exports.default = useIsSidebarCollapsing;

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

@@ -36,5 +36,4 @@ var useIsSidebarDragging = function useIsSidebarDragging() {
   }, []);
   return isDragging;
 };
-var _default = useIsSidebarDragging;
-exports.default = _default;
+var _default = exports.default = useIsSidebarDragging;

package/dist/cjs/common/safe-local-storage.js

@@ -80,5 +80,4 @@ var safeLocalStorage = function safeLocalStorage() {
   window.__localStorageFallback = Object.create(storageAPI);
   return window.__localStorageFallback;
 };
-var _default = safeLocalStorage;
-exports.default = _default;
+var _default = exports.default = safeLocalStorage;

package/dist/cjs/common/utils.js

@@ -11,11 +11,10 @@ var _constants = require("./constants");
 var _safeLocalStorage = _interopRequireDefault(require("./safe-local-storage"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var emptyGridState = _constants.DIMENSIONS.reduce(function (acc, currentValue) {
+var emptyGridState = exports.emptyGridState = _constants.DIMENSIONS.reduce(function (acc, currentValue) {
   return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, currentValue, 0));
 }, {});
-exports.emptyGridState = emptyGridState;
-var mergeGridStateIntoStorage = function mergeGridStateIntoStorage(key, value) {
+var mergeGridStateIntoStorage = exports.mergeGridStateIntoStorage = function mergeGridStateIntoStorage(key, value) {
   var storageValue = JSON.parse((0, _safeLocalStorage.default)().getItem(_constants.PAGE_LAYOUT_LS_KEY) || '{}');
   if (value !== null && (0, _typeof2.default)(value) === 'object') {
     storageValue[key] = _objectSpread(_objectSpread({}, storageValue[key]), value);
@@ -24,13 +23,11 @@ var mergeGridStateIntoStorage = function mergeGridStateIntoStorage(key, value) {
   }
   (0, _safeLocalStorage.default)().setItem(_constants.PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
 };
-exports.mergeGridStateIntoStorage = mergeGridStateIntoStorage;
-var getGridStateFromStorage = function getGridStateFromStorage(key) {
+var getGridStateFromStorage = exports.getGridStateFromStorage = function getGridStateFromStorage(key) {
   var storageValue = JSON.parse((0, _safeLocalStorage.default)().getItem(_constants.PAGE_LAYOUT_LS_KEY) || '{}');
   return storageValue[key];
 };
-exports.getGridStateFromStorage = getGridStateFromStorage;
-var removeFromGridStateInStorage = function removeFromGridStateInStorage(key, secondKey) {
+var removeFromGridStateInStorage = exports.removeFromGridStateInStorage = function removeFromGridStateInStorage(key, secondKey) {
   var storageValue = JSON.parse((0, _safeLocalStorage.default)().getItem(_constants.PAGE_LAYOUT_LS_KEY) || '{}');
   if (secondKey && storageValue[key]) {
     delete storageValue[key][secondKey];
@@ -39,8 +36,7 @@ var removeFromGridStateInStorage = function removeFromGridStateInStorage(key, se
   }
   (0, _safeLocalStorage.default)().setItem(_constants.PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
 };
-exports.removeFromGridStateInStorage = removeFromGridStateInStorage;
-var resolveDimension = function resolveDimension(key) {
+var resolveDimension = exports.resolveDimension = function resolveDimension(key) {
   var dimension = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var shouldPersist = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   if (shouldPersist) {
@@ -49,15 +45,13 @@ var resolveDimension = function resolveDimension(key) {
   }
   return dimension;
 };
-exports.resolveDimension = resolveDimension;
-var getLeftPanelWidth = function getLeftPanelWidth() {
+var getLeftPanelWidth = exports.getLeftPanelWidth = function getLeftPanelWidth() {
   if (typeof window === 'undefined') {
     return 0;
   }
   return parseInt(window.getComputedStyle(document.documentElement).getPropertyValue("--".concat(_constants.LEFT_PANEL_WIDTH)), 10) || 0;
 };
-exports.getLeftPanelWidth = getLeftPanelWidth;
-var getLeftSidebarPercentage = function getLeftSidebarPercentage(currentWidth, maxWidth) {
+var getLeftSidebarPercentage = exports.getLeftSidebarPercentage = function getLeftSidebarPercentage(currentWidth, maxWidth) {
   var total = (currentWidth - _constants.DEFAULT_LEFT_SIDEBAR_WIDTH) / (maxWidth - _constants.DEFAULT_LEFT_SIDEBAR_WIDTH);
   if (total < 0) {
     return 0;
@@ -67,12 +61,9 @@ var getLeftSidebarPercentage = function getLeftSidebarPercentage(currentWidth, m
   }
   return Math.floor(total * 100);
 };
-exports.getLeftSidebarPercentage = getLeftSidebarPercentage;
-var getPageLayoutSlotSelector = function getPageLayoutSlotSelector(slotName) {
+var getPageLayoutSlotSelector = exports.getPageLayoutSlotSelector = function getPageLayoutSlotSelector(slotName) {
   return (0, _defineProperty2.default)({}, _constants.PAGE_LAYOUT_SLOT_SELECTOR, slotName);
 };
-exports.getPageLayoutSlotSelector = getPageLayoutSlotSelector;
-var getPageLayoutSlotCSSSelector = function getPageLayoutSlotCSSSelector(slotName) {
+var getPageLayoutSlotCSSSelector = exports.getPageLayoutSlotCSSSelector = function getPageLayoutSlotCSSSelector(slotName) {
   return "[".concat(_constants.PAGE_LAYOUT_SLOT_SELECTOR, "='").concat(slotName, "']");
-};
-exports.getPageLayoutSlotCSSSelector = getPageLayoutSlotCSSSelector;
+};

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

@@ -9,9 +9,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
-var _excluded = ["testId", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus"];
+var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus", "ref"];
+/* eslint-disable react/react-in-jsx-scope */
 /** @jsx jsx */
 /**
  * Determines the color of the grab line.
@@ -20,7 +22,7 @@ var _excluded = ["testId", "isDisabled", "isLeftSidebarCollapsed", "label", "lef
  */
 var varLineColor = '--ds-line';
 var grabAreaStyles = (0, _react.css)({
-  width: 24,
+  width: 4,
   height: '100%',
   padding: 0,
   backgroundColor: 'transparent',
@@ -31,29 +33,38 @@ var grabAreaStyles = (0, _react.css)({
   },
   ':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 grabAreaEnabledStyles = (0, _react.css)({
+  ':hover': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")")),
+  ':active': (0, _defineProperty2.default)({
+    borderColor: "var(--ds-border-selected, ".concat(_colors.B200, ")")
+  }, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")")),
+  ':focus-visible': (0, _defineProperty2.default)({
+    outlineColor: "var(--ds-border-selected, ".concat(_colors.B200, ")"),
+    outlineStyle: 'solid',
+    outlineWidth: "var(--ds-border-width-outline, 2px)"
+  }, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
+});
 var grabAreaCollapsedStyles = (0, _react.css)({
   padding: 0,
   backgroundColor: 'transparent',
   border: 0,
   cursor: 'default'
 });
-var lineStyles = (0, _react.css)({
+var lineStyles = (0, _primitives.xcss)({
   display: 'block',
-  width: 2,
+  width: 'border.width.outline',
   height: '100%',
-  backgroundColor: "var(".concat(varLineColor, ")"),
+  backgroundColor: 'color.background.neutral',
   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);
 var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
+    _ref$valueTextLabel = _ref.valueTextLabel,
+    valueTextLabel = _ref$valueTextLabel === void 0 ? 'Width' : _ref$valueTextLabel,
     isDisabled = _ref.isDisabled,
     isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
     label = _ref.label,
@@ -62,6 +73,7 @@ var GrabArea = function GrabArea(_ref) {
     onMouseDown = _ref.onMouseDown,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
+    ref = _ref.ref,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
     "aria-label": label,
@@ -69,27 +81,28 @@ var GrabArea = function GrabArea(_ref) {
     disabled: isDisabled,
     "aria-hidden": isLeftSidebarCollapsed,
     type: "button"
-    // The separator role is applied to a button to utilize the native
-    // interactive and disabled functionality on the resize separator. While a
+    // The slider role is applied to a button to utilize the native
+    // interactive and disabled functionality on the resize slider. While a
     // range input would be more semantically accurate, it does not affect
     // usability.
     ,
-    role: "separator",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    role: "slider",
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles, !isDisabled && grabAreaEnabledStyles],
     "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,
     "aria-valuemax": 100,
+    "aria-valuetext": "".concat(valueTextLabel, " ").concat(leftSidebarPercentageExpanded, "%"),
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     onFocus: onFocus,
     onBlur: onBlur
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, rest), (0, _react.jsx)("span", (0, _extends2.default)({
-    css: lineStyles
+  }, rest), (0, _react.jsx)(_primitives.Box, (0, _extends2.default)({
+    as: "span",
+    xcss: lineStyles
   }, grabAreaLineSelector)));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = GrabArea;
-exports.default = _default;
+var _default = exports.default = GrabArea;

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

@@ -25,10 +25,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_CONTROL_SELECTOR, true);
 var resizeControlStyles = (0, _react2.css)({
   position: 'absolute',
-  top: 0,
-  bottom: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: '100%',
+  insetBlockEnd: 0,
+  insetBlockStart: 0,
+  insetInlineStart: '100%',
   outline: 'none'
 });
 var showResizeButtonStyles = (0, _react2.css)({
@@ -65,9 +64,11 @@ var ResizeControl = function ResizeControl(_ref) {
   var testId = _ref.testId,
     overrides = _ref.overrides,
     _ref$resizeButtonLabe = _ref.resizeButtonLabel,
-    resizeButtonLabel = _ref$resizeButtonLabe === void 0 ? '' : _ref$resizeButtonLabe,
+    resizeButtonLabel = _ref$resizeButtonLabe === void 0 ? 'Current project sidebar' : _ref$resizeButtonLabe,
+    _ref$valueTextLabel = _ref.valueTextLabel,
+    valueTextLabel = _ref$valueTextLabel === void 0 ? 'Width' : _ref$valueTextLabel,
     _ref$resizeGrabAreaLa = _ref.resizeGrabAreaLabel,
-    resizeGrabAreaLabel = _ref$resizeGrabAreaLa === void 0 ? 'Resize' : _ref$resizeGrabAreaLa,
+    resizeGrabAreaLabel = _ref$resizeGrabAreaLa === void 0 ? 'Resize Current Project Sidebar' : _ref$resizeGrabAreaLa,
     onResizeStart = _ref.onResizeStart,
     onResizeEnd = _ref.onResizeEnd;
   var _useContext = (0, _react.useContext)(_sidebarResizeContext.SidebarResizeContext),
@@ -97,7 +98,7 @@ var ResizeControl = function ResizeControl(_ref) {
   }, [leftSidebarState]);
   var toggleSideBar = (0, _react.useCallback)(function (event) {
     // don't cascade down to the LeftSidebarOuter
-    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    event === null || event === void 0 || event.stopPropagation();
     toggleLeftSidebar();
   }, [toggleLeftSidebar]);
   var onMouseDown = function onMouseDown(event) {
@@ -180,7 +181,7 @@ var ResizeControl = function ResizeControl(_ref) {
   var onResizeOffLeftOfScreen = function onResizeOffLeftOfScreen() {
     var _unbindEvents$current;
     onUpdateResize.cancel();
-    (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
+    (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 || _unbindEvents$current.call(unbindEvents);
     unbindEvents.current = null;
     document.documentElement.removeAttribute(_constants.IS_SIDEBAR_DRAGGING);
     offset.current = 0;
@@ -246,7 +247,7 @@ var ResizeControl = function ResizeControl(_ref) {
       }, (0, _defineProperty2.default)(_objectSpread3, _constants.VAR_LEFT_SIDEBAR_WIDTH, sidebarWidth.current), (0, _defineProperty2.default)(_objectSpread3, "lastLeftSidebarWidth", sidebarWidth.current), _objectSpread3));
       setLeftSidebarState(updatedLeftSidebarState);
     }
-    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
+    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 || _unbindEvents$current2.call(unbindEvents);
     unbindEvents.current = null;
     onUpdateResize.cancel();
     sidebarWidth.current = 0;
@@ -257,7 +258,7 @@ var ResizeControl = function ResizeControl(_ref) {
       var _updatedLeftSidebarSt;
       setIsGrabAreaFocused(false);
       // Note: the `collapseSidebar` codepath does not return state, so we need to pull it from the ref
-      onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd((_updatedLeftSidebarSt = updatedLeftSidebarState) !== null && _updatedLeftSidebarSt !== void 0 ? _updatedLeftSidebarSt : stableSidebarState.current);
+      onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd((_updatedLeftSidebarSt = updatedLeftSidebarState) !== null && _updatedLeftSidebarSt !== void 0 ? _updatedLeftSidebarSt : stableSidebarState.current);
     });
   };
   var onKeyDown = function onKeyDown(event) {
@@ -333,6 +334,7 @@ var ResizeControl = function ResizeControl(_ref) {
     isDisabled: isLeftSidebarCollapsed,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
     label: resizeGrabAreaLabel,
+    valueTextLabel: valueTextLabel,
     leftSidebarPercentageExpanded: leftSidebarPercentageExpanded,
     onBlur: onBlur,
     onFocus: onFocus,
@@ -350,5 +352,4 @@ var ResizeControl = function ResizeControl(_ref) {
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = ResizeControl;
-exports.default = _default;
+var _default = exports.default = ResizeControl;

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

@@ -100,5 +100,4 @@ var ResizeButton = function ResizeButton(_ref) {
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = ResizeButton;
-exports.default = _default;
+var _default = exports.default = ResizeButton;

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

@@ -42,5 +42,4 @@ var Shadow = function Shadow(_ref) {
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = Shadow;
-exports.default = _default;
+var _default = exports.default = Shadow;

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

@@ -70,7 +70,7 @@ var assignIndex = function assignIndex(num, arr) {
  * default label will still be used in `title` attribute of the skip links
  * themselves.
  */
-var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
+var SkipLinkWrapper = exports.SkipLinkWrapper = function SkipLinkWrapper(_ref) {
   var skipLinksLabel = _ref.skipLinksLabel;
   var _useSkipLinks = (0, _controllers.useSkipLinks)(),
     skipLinksData = _useSkipLinks.skipLinksData;
@@ -136,7 +136,6 @@ var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
     }, skipLinkTitle);
   })));
 };
-exports.SkipLinkWrapper = SkipLinkWrapper;
 var handleBlur = function handleBlur(event) {
   // @ts-ignore
   event.target.removeAttribute('tabindex');
@@ -171,7 +170,7 @@ var focusTargetRef = function focusTargetRef(href) {
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var SkipLink = function SkipLink(_ref3) {
+var SkipLink = exports.SkipLink = function SkipLink(_ref3) {
   var href = _ref3.href,
     children = _ref3.children,
     isFocusable = _ref3.isFocusable,
@@ -184,5 +183,4 @@ var SkipLink = function SkipLink(_ref3) {
     onClick: focusTargetRef(href),
     title: title
   }, children));
-};
-exports.SkipLink = SkipLink;
+};

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

@@ -8,7 +8,7 @@ var _react = require("react");
 var _controllers = require("../../controllers");
 /** @jsx jsx */
 
-var useCustomSkipLink = function useCustomSkipLink(id, skipLinkTitle) {
+var useCustomSkipLink = exports.useCustomSkipLink = function useCustomSkipLink(id, skipLinkTitle) {
   var listIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var _useSkipLinks = (0, _controllers.useSkipLinks)(),
     registerSkipLink = _useSkipLinks.registerSkipLink,
@@ -23,5 +23,4 @@ var useCustomSkipLink = function useCustomSkipLink(id, skipLinkTitle) {
       unregisterSkipLink(id);
     };
   }, [id, listIndex, skipLinkTitle, registerSkipLink, unregisterSkipLink]);
-};
-exports.useCustomSkipLink = useCustomSkipLink;
+};

package/dist/cjs/components/slots/banner-slot.js

@@ -69,5 +69,4 @@ var Banner = function Banner(props) {
     }), children);
   });
 };
-var _default = Banner;
-exports.default = _default;
+var _default = exports.default = Banner;

package/dist/cjs/components/slots/content.js

@@ -31,5 +31,4 @@ var Content = function Content(props) {
     css: contentStyles
   }, children);
 };
-var _default = Content;
-exports.default = _default;
+var _default = exports.default = Content;

package/dist/cjs/components/slots/internal/left-sidebar-inner.js

@@ -86,5 +86,4 @@ var LeftSidebarInner = function LeftSidebarInner(_ref) {
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = LeftSidebarInner;
-exports.default = _default;
+var _default = exports.default = LeftSidebarInner;

package/dist/cjs/components/slots/internal/left-sidebar-outer.js

@@ -116,5 +116,4 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
     );
   });
 };
-var _default = /*#__PURE__*/(0, _react.forwardRef)(LeftSidebarOuter);
-exports.default = _default;
+var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(LeftSidebarOuter);

package/dist/cjs/components/slots/internal/resizable-children-wrapper.js

@@ -58,5 +58,4 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = ResizableChildrenWrapper;
-exports.default = _default;
+var _default = exports.default = ResizableChildrenWrapper;

package/dist/cjs/components/slots/internal/slot-focus-ring.js

@@ -54,5 +54,4 @@ var SlotFocusRing = function SlotFocusRing(_ref) {
     });
   });
 };
-var _default = SlotFocusRing;
-exports.default = _default;
+var _default = exports.default = SlotFocusRing;

package/dist/cjs/components/slots/left-panel.js

@@ -65,5 +65,4 @@ var LeftPanel = function LeftPanel(props) {
     }), children);
   });
 };
-var _default = LeftPanel;
-exports.default = _default;
+var _default = exports.default = LeftPanel;

package/dist/cjs/components/slots/left-sidebar-without-resize.js

@@ -51,5 +51,4 @@ var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
     isFixed: isFixed
   }, children));
 };
-var _default = LeftSidebarWithoutResize;
-exports.default = _default;
+var _default = exports.default = LeftSidebarWithoutResize;

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

@@ -57,6 +57,7 @@ var LeftSidebar = function LeftSidebar(props) {
     width = props.width,
     _props$isFixed = props.isFixed,
     isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
+    valueTextLabel = props.valueTextLabel,
     resizeButtonLabel = props.resizeButtonLabel,
     resizeGrabAreaLabel = props.resizeGrabAreaLabel,
     overrides = props.overrides,
@@ -240,7 +241,7 @@ var LeftSidebar = function LeftSidebar(props) {
       if (current.isFlyoutOpen) {
         return current;
       }
-      onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+      onExpand === null || onExpand === void 0 || onExpand();
       return _objectSpread(_objectSpread({}, current), {}, {
         isFlyoutOpen: true
       });
@@ -256,7 +257,7 @@ var LeftSidebar = function LeftSidebar(props) {
       if (!current.isFlyoutOpen) {
         return current;
       }
-      onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
+      onCollapse === null || onCollapse === void 0 || onCollapse();
       return _objectSpread(_objectSpread({}, current), {}, {
         isFlyoutOpen: false
       });
@@ -331,6 +332,7 @@ var LeftSidebar = function LeftSidebar(props) {
     testId: testId && "".concat(testId, "-resize-children-wrapper")
   }, children), (0, _react2.jsx)(_resizeControl.default, {
     testId: testId,
+    valueTextLabel: valueTextLabel,
     resizeGrabAreaLabel: resizeGrabAreaLabel,
     resizeButtonLabel: resizeButtonLabel
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
@@ -342,5 +344,4 @@ var LeftSidebar = function LeftSidebar(props) {
     onResizeEnd: onResizeEnd
   }))));
 };
-var _default = LeftSidebar;
-exports.default = _default;
+var _default = exports.default = LeftSidebar;

package/dist/cjs/components/slots/main.js

@@ -72,5 +72,4 @@ var Main = function Main(props) {
     }, (0, _utils.getPageLayoutSlotSelector)('main')), children);
   });
 };
-var _default = Main;
-exports.default = _default;
+var _default = exports.default = Main;