@atlaskit/page-layout 1.2.8 → 1.3.0

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

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -51,14 +51,14 @@ var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
     };
   }, [leftSidebarWidth]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)(_leftSidebarOuter.default, {
+  return (0, _react2.jsx)(_leftSidebarOuter.default, {
     id: id,
     testId: testId,
     isFixed: isFixed
-  }, (0, _core.jsx)(_slotDimensions.default, {
+  }, (0, _react2.jsx)(_slotDimensions.default, {
     variableName: _constants.VAR_LEFT_SIDEBAR_WIDTH,
     value: leftSidebarWidth
-  }), (0, _core.jsx)(_leftSidebarInner.default, {
+  }), (0, _react2.jsx)(_leftSidebarInner.default, {
     isFixed: isFixed
   }, children));
 };

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

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -237,7 +237,7 @@ var LeftSidebar = function LeftSidebar(props) {
   };
 
   return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    (0, _core.jsx)(_leftSidebarOuter.default, {
+    (0, _react2.jsx)(_leftSidebarOuter.default, {
       ref: leftSideBarRef,
       testId: testId,
       onMouseOver: onMouseOver,
@@ -245,17 +245,17 @@ var LeftSidebar = function LeftSidebar(props) {
       id: id,
       isFixed: isFixed,
       isFlyoutOpen: isFlyoutOpen
-    }, (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_LEFT_SIDEBAR_WIDTH,
       value: notFirstRun.current ? leftSidebarWidth : leftSidebarWidthOnMount
-    }), (0, _core.jsx)(_leftSidebarInner.default, {
+    }), (0, _react2.jsx)(_leftSidebarInner.default, {
       isFixed: isFixed,
       isFlyoutOpen: isFlyoutOpen
-    }, (0, _core.jsx)(_resizableChildrenWrapper.default, {
+    }, (0, _react2.jsx)(_resizableChildrenWrapper.default, {
       isFlyoutOpen: isFlyoutOpen,
       isLeftSidebarCollapsed: isLeftSidebarCollapsed,
       hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed'
-    }, children), (0, _core.jsx)(_resizeControl.default, {
+    }, children), (0, _react2.jsx)(_resizeControl.default, {
       testId: testId,
       resizeGrabAreaLabel: resizeGrabAreaLabel,
       resizeButtonLabel: resizeButtonLabel // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides

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

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _accessibility = require("@atlaskit/motion/accessibility");
 
@@ -29,8 +29,8 @@ var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var prefersReducedMotionStyles = (0, _core.css)((0, _accessibility.prefersReducedMotion)());
-var mainStyles = (0, _core.css)({
+var prefersReducedMotionStyles = (0, _react2.css)((0, _accessibility.prefersReducedMotion)());
+var mainStyles = (0, _react2.css)({
   minWidth: 0,
   marginLeft: 0,
   // Prevent flex container from blowing up when there's super wide content.
@@ -38,7 +38,7 @@ var mainStyles = (0, _core.css)({
   // Transition negative margin on main in sync with the increase in width of leftSidebar.
   transition: "margin-left ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_curves.easeOut, " 0s")
 });
-var draggingStyles = (0, _core.css)({
+var draggingStyles = (0, _react2.css)({
   cursor: 'ew-resize',
   // Make sure drag to resize remains snappy.
   transition: 'none'
@@ -50,7 +50,7 @@ var draggingStyles = (0, _core.css)({
  * while main remains in place.
  */
 
-var flyoutStyles = (0, _core.css)({
+var flyoutStyles = (0, _react2.css)({
   marginLeft: "calc(-1 * var(--".concat(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
 /**
@@ -75,9 +75,9 @@ var Main = function Main(props) {
       isFlyoutOpen = _useContext$leftSideb.isFlyoutOpen,
       isFixed = _useContext$leftSideb.isFixed;
 
-  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+  return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
-    return (0, _core.jsx)("div", (0, _extends2.default)({
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
       "data-testid": testId,
       css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
       className: className,

package/dist/cjs/components/slots/page-layout.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -24,7 +24,7 @@ var _skipLinks = require("../skip-links");
 /** @jsx jsx */
 var pageLayoutSelector = (0, _defineProperty2.default)({}, _constants.PAGE_LAYOUT_CONTAINER_SELECTOR, true);
 var gridTemplateAreas = "\n  \"".concat(_constants.LEFT_PANEL, " ").concat(_constants.BANNER, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, " ").concat(_constants.RIGHT_PANEL, "\"\n ");
-var gridStyles = (0, _core.css)({
+var gridStyles = (0, _react2.css)({
   display: 'grid',
   height: '100%',
   gridTemplateAreas: gridTemplateAreas,
@@ -48,13 +48,13 @@ var PageLayout = function PageLayout(_ref) {
       testId = _ref.testId,
       onLeftSidebarExpand = _ref.onLeftSidebarExpand,
       onLeftSidebarCollapse = _ref.onLeftSidebarCollapse;
-  return (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_controllers.SkipLinksController, null, (0, _core.jsx)(_skipLinks.SkipLinkWrapper, {
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_controllers.SkipLinksController, null, (0, _react2.jsx)(_skipLinks.SkipLinkWrapper, {
     skipLinksLabel: skipLinksLabel
-  }), (0, _core.jsx)("div", (0, _extends2.default)({}, pageLayoutSelector, {
+  }), (0, _react2.jsx)("div", (0, _extends2.default)({}, pageLayoutSelector, {
     "data-testid": testId,
     css: gridStyles,
     tabIndex: -1
-  }), (0, _core.jsx)(_controllers.SidebarResizeController, {
+  }), (0, _react2.jsx)(_controllers.SidebarResizeController, {
     onLeftSidebarCollapse: onLeftSidebarCollapse,
     onLeftSidebarExpand: onLeftSidebarExpand
   }, children))));

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

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -26,10 +26,10 @@ var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
-var baseStyles = (0, _core.css)({
+var baseStyles = (0, _react2.css)({
   gridArea: _constants.RIGHT_PANEL
 });
-var fixedStyles = (0, _core.css)({
+var fixedStyles = (0, _react2.css)({
   width: _constants.RIGHT_PANEL_WIDTH,
   position: 'fixed',
   top: 0,
@@ -62,14 +62,14 @@ var RightPanel = function RightPanel(props) {
     };
   }, [rightPanelWidth]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+  return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
-    return (0, _core.jsx)("div", (0, _extends2.default)({
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
       css: [baseStyles, isFixed && fixedStyles],
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('right-panel')), (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _utils.getPageLayoutSlotSelector)('right-panel')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_RIGHT_PANEL_WIDTH,
       value: rightPanelWidth
     }), children);

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

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -33,7 +33,7 @@ var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
  * If we were to apply `position: fixed` to the outer wrapper, it will be popped
  * out of its flex container and Main would stretch to occupy all the space.
  */
-var fixedInnerStyles = (0, _core.css)({
+var fixedInnerStyles = (0, _react2.css)({
   /**
    * This width on the inner wrapper is required when it is using fixed
    * positioning. Otherwise its width is slightly off.
@@ -44,10 +44,10 @@ var fixedInnerStyles = (0, _core.css)({
   right: "calc(".concat(_constants.RIGHT_PANEL_WIDTH, ")"),
   bottom: 0
 });
-var staticInnerStyles = (0, _core.css)({
+var staticInnerStyles = (0, _react2.css)({
   height: '100%'
 });
-var outerStyles = (0, _core.css)({
+var outerStyles = (0, _react2.css)({
   width: _constants.RIGHT_SIDEBAR_WIDTH
 });
 /**
@@ -56,7 +56,7 @@ var outerStyles = (0, _core.css)({
  * so the pseudo element forces it to take up the necessary width.
  */
 
-var fixedOuterStyles = (0, _core.css)({
+var fixedOuterStyles = (0, _react2.css)({
   '&::after': {
     display: 'inline-block',
     width: _constants.RIGHT_SIDEBAR_WIDTH,
@@ -89,19 +89,19 @@ var RightSidebar = function RightSidebar(props) {
     };
   }, [rightSidebarWidth, id]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)(_slotFocusRing.default, {
+  return (0, _react2.jsx)(_slotFocusRing.default, {
     isSidebar: true
   }, function (_ref) {
     var className = _ref.className;
-    return (0, _core.jsx)("div", (0, _extends2.default)({
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
       "data-testid": testId,
       css: [outerStyles, isFixed && fixedOuterStyles],
       className: className,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_RIGHT_SIDEBAR_WIDTH,
       value: rightSidebarWidth
-    }), (0, _core.jsx)("div", {
+    }), (0, _react2.jsx)("div", {
       css: [isFixed && fixedInnerStyles, !isFixed && staticInnerStyles]
     }, children));
   });

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

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -26,11 +26,11 @@ var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
-var topNavigationStyles = (0, _core.css)({
+var topNavigationStyles = (0, _react2.css)({
   height: _constants.TOP_NAVIGATION_HEIGHT,
   gridArea: _constants.TOP_NAVIGATION
 });
-var fixedStyles = (0, _core.css)({
+var fixedStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: 2,
   top: _constants.BANNER_HEIGHT,
@@ -64,14 +64,14 @@ var TopNavigation = function TopNavigation(props) {
     };
   }, [topNavigationHeight]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+  return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
-    return (0, _core.jsx)("div", (0, _extends2.default)({
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
       css: [topNavigationStyles, isFixed && fixedStyles],
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_TOP_NAVIGATION_HEIGHT,
       value: topNavigationHeight
     }), children);

package/dist/cjs/version.json

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

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B100, B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
 

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
 import { easeOut } from '@atlaskit/motion/curves';
 import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut } from '@atlaskit/motion';
 import { useIsSidebarDragging } from '../../common/hooks';
 const colorStops = `

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

@@ -1,7 +1,7 @@
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { N30A, N60A } from '@atlaskit/theme/colors';
 import { PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { BANNER, BANNER_HEIGHT, DEFAULT_BANNER_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, VAR_BANNER_HEIGHT } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { CONTENT } from '../../common/constants';
 const contentStyles = css({
   display: 'flex',

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { BANNER_HEIGHT, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { prefersReducedMotion } from '@atlaskit/motion';
 import { TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarCollapsing } from '../../../common/hooks';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ClassNames, css, jsx } from '@emotion/core';
+import { ClassNames, css, jsx } from '@emotion/react';
 import { B100 } from '@atlaskit/theme/colors';
 const focusStyles = css({
   ':focus': {

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { DEFAULT_LEFT_PANEL_WIDTH, LEFT_PANEL, LEFT_PANEL_WIDTH, VAR_LEFT_PANEL_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';

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

@@ -2,7 +2,7 @@
 
 /** @jsx jsx */
 import { useContext, useEffect, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, FLYOUT_DELAY, RESIZE_BUTTON_SELECTOR, VAR_LEFT_SIDEBAR_FLYOUT, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getGridStateFromStorage, mergeGridStateIntoStorage, resolveDimension } from '../../common/utils';
 import { publishGridState, SidebarResizeContext, useSkipLink } from '../../controllers';

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useContext } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { prefersReducedMotion } from '@atlaskit/motion/accessibility';
 import { easeOut } from '@atlaskit/motion/curves';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT } from '../../common/constants';

package/dist/es2019/components/slots/page-layout.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { Fragment } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { BANNER, BANNER_HEIGHT, CONTENT, DEFAULT_I18N_PROPS_SKIP_LINKS, LEFT_PANEL, LEFT_PANEL_WIDTH, PAGE_LAYOUT_CONTAINER_SELECTOR, RIGHT_PANEL, RIGHT_PANEL_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT } from '../../common/constants';
 import { SidebarResizeController, SkipLinksController } from '../../controllers';
 import { SkipLinkWrapper } from '../skip-links';

package/dist/es2019/components/slots/right-panel.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { DEFAULT_RIGHT_PANEL_WIDTH, RIGHT_PANEL, RIGHT_PANEL_WIDTH, VAR_RIGHT_PANEL_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { BANNER_HEIGHT, DEFAULT_RIGHT_SIDEBAR_WIDTH, RIGHT_PANEL_WIDTH, RIGHT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, VAR_RIGHT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 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';

package/dist/es2019/version.json

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

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

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["testId", "isLeftSidebarCollapsed"];
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B100, B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
 

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

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';

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

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
 import { easeOut } from '@atlaskit/motion/curves';
 import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut } from '@atlaskit/motion';
 import { useIsSidebarDragging } from '../../common/hooks';
 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  ";

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

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { N30A, N60A } from '@atlaskit/theme/colors';
 import { PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { BANNER, BANNER_HEIGHT, DEFAULT_BANNER_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, VAR_BANNER_HEIGHT } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { CONTENT } from '../../common/constants';
 var contentStyles = css({
   display: 'flex',

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { BANNER_HEIGHT, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { prefersReducedMotion } from '@atlaskit/motion';
 import { TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarCollapsing } from '../../../common/hooks';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ClassNames, css, jsx } from '@emotion/core';
+import { ClassNames, css, jsx } from '@emotion/react';
 import { B100 } from '@atlaskit/theme/colors';
 var focusStyles = css({
   ':focus': {

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { DEFAULT_LEFT_PANEL_WIDTH, LEFT_PANEL, LEFT_PANEL_WIDTH, VAR_LEFT_PANEL_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';