@atlaskit/page-layout 1.2.8 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/page-layout
 
+## 1.3.0
+
+### Minor Changes
+
+- [`3de296cfd19`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3de296cfd19) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.8
 
 ### Patch Changes

package/__perf__/utils/perf-example.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 import { token } from '@atlaskit/tokens';
 

package/__perf__/utils/product-integration/atlassian-navigation.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { Fragment, MouseEvent, useState } from 'react';
 
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 // AFP-1799 storybook examples in src cause issues
 import {

package/__perf__/utils/product-integration/notifications-popup.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { useState } from 'react';
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 import { Notifications } from '@atlaskit/atlassian-navigation';
 import { Notifications as NotificationsIframe } from '@atlaskit/atlassian-notifications';

package/__perf__/utils/product-integration/sample-footer.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 import { CustomItemComponentProps } from '@atlaskit/menu';
 import { Footer } from '@atlaskit/side-navigation';

package/__perf__/utils/product-integration/sample-header.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 import Icon from '@atlaskit/icon';
 import { CustomItemComponentProps } from '@atlaskit/menu';

package/__perf__/utils/product-integration/side-navigation.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 import DropboxIcon from '@atlaskit/icon/glyph/dropbox';
 import FilterIcon from '@atlaskit/icon/glyph/filter';

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -27,7 +27,7 @@ var _excluded = ["testId", "isLeftSidebarCollapsed"];
  * Used on internal leaf node, so naming collisions won't matter.
  */
 var varLineColor = '--ds-line';
-var grabAreaStyles = (0, _core.css)({
+var grabAreaStyles = (0, _react.css)({
   width: 24,
   height: '100%',
   padding: 0,
@@ -45,13 +45,13 @@ var grabAreaStyles = (0, _core.css)({
     ':active, :focus': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
   }
 });
-var grabAreaCollapsedStyles = (0, _core.css)({
+var grabAreaCollapsedStyles = (0, _react.css)({
   padding: 0,
   backgroundColor: 'transparent',
   border: 0,
   cursor: 'default'
 });
-var lineStyles = (0, _core.css)({
+var lineStyles = (0, _react.css)({
   display: 'block',
   width: 2,
   height: '100%',
@@ -65,12 +65,12 @@ var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
       isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
+  return (0, _react.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
     "data-testid": testId,
     type: "button",
     css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
-  }, rest), (0, _core.jsx)("span", (0, _extends2.default)({
+  }, rest), (0, _react.jsx)("span", (0, _extends2.default)({
     css: lineStyles
   }, grabAreaLineSelector)));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -15,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _bindEventListener = require("bind-event-listener");
 
@@ -38,14 +38,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_CONTROL_SELECTOR, true);
-var resizeControlStyles = (0, _core.css)({
+var resizeControlStyles = (0, _react2.css)({
   position: 'absolute',
   top: 0,
   bottom: 0,
   left: '100%',
   outline: 'none'
 });
-var showResizeButtonStyles = (0, _core.css)({
+var showResizeButtonStyles = (0, _react2.css)({
   '--ds--resize-button--opacity': 1
 });
 
@@ -263,7 +263,7 @@ var ResizeControl = function ResizeControl(_ref) {
 
   var resizeButton = _objectSpread({
     render: function render(Component, props) {
-      return (0, _core.jsx)(Component, props);
+      return (0, _react2.jsx)(Component, props);
     }
   }, overrides && overrides.ResizeButton); // This width is calculated once only on mount.
   // This means resizing the window will cause this value to be incorrect for screen reader users,
@@ -277,11 +277,11 @@ var ResizeControl = function ResizeControl(_ref) {
   var leftSidebarPercentageExpanded = (0, _utils.getLeftSidebarPercentage)(leftSidebarState.leftSidebarWidth, maxAriaWidth);
   /* eslint-disable jsx-a11y/role-supports-aria-props */
 
-  return (0, _core.jsx)("div", (0, _extends2.default)({}, cssSelector, {
+  return (0, _react2.jsx)("div", (0, _extends2.default)({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
-  }), (0, _core.jsx)(_shadow.default, {
+  }), (0, _react2.jsx)(_shadow.default, {
     testId: testId && "".concat(testId, "-shadow")
-  }), (0, _core.jsx)(_grabArea.default, {
+  }), (0, _react2.jsx)(_grabArea.default, {
     role: "separator",
     "aria-label": resizeGrabAreaLabel,
     "aria-valuenow": leftSidebarPercentageExpanded,

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
 
@@ -26,14 +26,14 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
 
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
-var increaseHitAreaStyles = (0, _core.css)({
+var increaseHitAreaStyles = (0, _react.css)({
   position: 'absolute',
   top: -8,
   right: -12,
   bottom: -8,
   left: -8
 });
-var resizeIconButtonStyles = (0, _core.css)({
+var resizeIconButtonStyles = (0, _react.css)({
   width: 24,
   height: 24,
   padding: 0,
@@ -73,7 +73,7 @@ var resizeIconButtonStyles = (0, _core.css)({
     opacity: 1
   }
 });
-var resizeIconButtonExpandedStyles = (0, _core.css)({
+var resizeIconButtonExpandedStyles = (0, _react.css)({
   transform: 'rotate(180deg)',
   transformOrigin: 7
 });
@@ -89,7 +89,7 @@ var ResizeButton = function ResizeButton(_ref) {
       label = _ref.label,
       testId = _ref.testId,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("button", (0, _extends2.default)({}, cssSelector, {
+  return (0, _react.jsx)("button", (0, _extends2.default)({}, cssSelector, {
     // DO NOT remove. used as a CSS selector.
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
@@ -100,9 +100,9 @@ var ResizeButton = function ResizeButton(_ref) {
     ,
     onMouseDown: preventDefault // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
-  }, props), (0, _core.jsx)(_chevronRight.default, {
+  }, props), (0, _react.jsx)(_chevronRight.default, {
     label: ""
-  }), (0, _core.jsx)("div", {
+  }), (0, _react.jsx)("div", {
     css: increaseHitAreaStyles
   }));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -15,7 +15,7 @@ var _hooks = require("../../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  ";
 var direction = 'to left';
 var transitionDuration = '0.22s';
-var shadowStyles = (0, _core.css)({
+var shadowStyles = (0, _react.css)({
   width: 3,
   position: 'absolute',
   top: 0,
@@ -28,7 +28,7 @@ var shadowStyles = (0, _core.css)({
   transitionProperty: 'left, opacity, width',
   transitionTimingFunction: _motion.easeOut
 });
-var draggingStyles = (0, _core.css)({
+var draggingStyles = (0, _react.css)({
   width: 6,
   left: -6,
   background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
@@ -38,7 +38,7 @@ var draggingStyles = (0, _core.css)({
 var Shadow = function Shadow(_ref) {
   var testId = _ref.testId;
   var isDragging = (0, _hooks.useIsSidebarDragging)();
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     "data-testid": testId,
     css: [shadowStyles, isDragging && draggingStyles]
   });

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

@@ -11,7 +11,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -26,8 +26,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion)());
-var skipLinkStyles = (0, _core.css)({
+var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
+var skipLinkStyles = (0, _react.css)({
   margin: 10,
   padding: '0.8rem 1rem',
   position: 'fixed',
@@ -53,13 +53,13 @@ var skipLinkStyles = (0, _core.css)({
     transform: 'translateY(0%)'
   }
 });
-var skipLinkListStyles = (0, _core.css)({
+var skipLinkListStyles = (0, _react.css)({
   marginTop: 4,
   paddingLeft: 0,
   listStylePosition: 'outside',
   listStyleType: 'none'
 });
-var skipLinkListItemStyles = (0, _core.css)({
+var skipLinkListItemStyles = (0, _react.css)({
   marginTop: 0
 });
 
@@ -126,17 +126,17 @@ var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
     return window.removeEventListener('keydown', escapeHandler, false);
   };
 
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     onFocus: attachEscHandler,
     onBlur: removeEscHandler,
     css: [skipLinkStyles, prefersReducedMotionStyles],
     "data-skip-link-wrapper": true
-  }, (0, _core.jsx)("h5", null, skipLinksLabel), (0, _core.jsx)("ol", {
+  }, (0, _react.jsx)("h5", null, skipLinksLabel), (0, _react.jsx)("ol", {
     css: skipLinkListStyles
   }, sortSkipLinks(skipLinksData).map(function (_ref2) {
     var id = _ref2.id,
         skipLinkTitle = _ref2.skipLinkTitle;
-    return (0, _core.jsx)(SkipLink, {
+    return (0, _react.jsx)(SkipLink, {
       key: id,
       href: "#".concat(id),
       isFocusable: true,
@@ -188,9 +188,9 @@ var SkipLink = function SkipLink(_ref3) {
       children = _ref3.children,
       isFocusable = _ref3.isFocusable,
       title = _ref3.title;
-  return (0, _core.jsx)("li", {
+  return (0, _react.jsx)("li", {
     css: skipLinkListItemStyles
-  }, (0, _core.jsx)("a", {
+  }, (0, _react.jsx)("a", {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
     onClick: focusTargetRef(href),

package/dist/cjs/components/slots/banner.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 bannerStyles = (0, _core.css)({
+var bannerStyles = (0, _react2.css)({
   height: _constants.BANNER_HEIGHT,
   gridArea: _constants.BANNER
 });
-var bannerFixedStyles = (0, _core.css)({
+var bannerFixedStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: 2,
   top: 0,
@@ -64,14 +64,14 @@ var Banner = function Banner(props) {
     };
   }, [bannerHeight]);
   (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: [bannerStyles, isFixed && bannerFixedStyles],
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('banner')), (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _utils.getPageLayoutSlotSelector)('banner')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_BANNER_HEIGHT,
       value: bannerHeight
     }), children);

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

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
 /** @jsx jsx */
-var contentStyles = (0, _core.css)({
+var contentStyles = (0, _react.css)({
   display: 'flex',
   height: '100%',
   position: 'relative',
@@ -28,7 +28,7 @@ var contentStyles = (0, _core.css)({
 var Content = function Content(props) {
   var children = props.children,
       testId = props.testId;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     "data-testid": testId,
     css: contentStyles
   }, children);

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -15,7 +15,7 @@ var _hooks = require("../../../common/hooks");
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion)());
+var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 /**
  * This inner wrapper is required to allow the sidebar to be `position: fixed`.
  *
@@ -23,7 +23,7 @@ var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion
  * out of its flex container and Main would stretch to occupy all the space.
  */
 
-var fixedInnerStyles = (0, _core.css)({
+var fixedInnerStyles = (0, _react.css)({
   width: "".concat(_constants.LEFT_SIDEBAR_WIDTH),
   position: 'fixed',
   top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
@@ -31,7 +31,7 @@ var fixedInnerStyles = (0, _core.css)({
   left: "".concat(_constants.LEFT_PANEL_WIDTH),
   transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
 });
-var fixedInnerFlyoutStyles = (0, _core.css)({
+var fixedInnerFlyoutStyles = (0, _react.css)({
   width: _constants.LEFT_SIDEBAR_FLYOUT_WIDTH
 });
 /**
@@ -40,10 +40,10 @@ var fixedInnerFlyoutStyles = (0, _core.css)({
  * It will expand the page height to fit its content.
  */
 
-var staticInnerStyles = (0, _core.css)({
+var staticInnerStyles = (0, _react.css)({
   height: '100%'
 });
-var draggingStyles = (0, _core.css)({
+var draggingStyles = (0, _react.css)({
   cursor: 'ew-resize',
   // Make sure drag to resize does not animate as the user drags
   transition: 'none'
@@ -56,7 +56,7 @@ var LeftSidebarInner = function LeftSidebarInner(_ref) {
       _ref$isFlyoutOpen = _ref.isFlyoutOpen,
       isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
   var isDragging = (0, _hooks.useIsSidebarDragging)();
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
   }, children);
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/slots/internal/left-sidebar-outer.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 _motion = require("@atlaskit/motion");
 
@@ -25,8 +25,8 @@ var _slotFocusRing = _interopRequireDefault(require("./slot-focus-ring"));
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion)());
-var outerStyles = (0, _core.css)({
+var prefersReducedMotionStyles = (0, _react2.css)((0, _motion.prefersReducedMotion)());
+var outerStyles = (0, _react2.css)({
   width: _constants.LEFT_SIDEBAR_WIDTH,
   marginLeft: 0,
   position: 'relative',
@@ -36,7 +36,7 @@ var outerStyles = (0, _core.css)({
     '--ds--resize-button--opacity': 1
   }
 });
-var draggingStyles = (0, _core.css)({
+var draggingStyles = (0, _react2.css)({
   cursor: 'ew-resize',
   // Make sure drag to resize does not animate as the user drags
   transition: 'none'
@@ -47,17 +47,17 @@ var draggingStyles = (0, _core.css)({
  * so the pseudo element forces it to take up the necessary width.
  */
 
-var fixedStyles = (0, _core.css)({
+var fixedStyles = (0, _react2.css)({
   '::after': {
     display: 'inline-block',
     width: "".concat(_constants.LEFT_SIDEBAR_WIDTH),
     content: "''"
   }
 });
-var flyoutStyles = (0, _core.css)({
+var flyoutStyles = (0, _react2.css)({
   width: _constants.LEFT_SIDEBAR_FLYOUT_WIDTH
 });
-var flyoutFixedStyles = (0, _core.css)({
+var flyoutFixedStyles = (0, _react2.css)({
   width: _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH
 });
 var selector = (0, _utils.getPageLayoutSlotSelector)('left-sidebar');
@@ -73,7 +73,7 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
       onMouseOver = _ref.onMouseOver,
       id = _ref.id;
   var isDragging = (0, _hooks.useIsSidebarDragging)();
-  return (0, _core.jsx)(_slotFocusRing.default, {
+  return (0, _react2.jsx)(_slotFocusRing.default, {
     isSidebar: true
   }, function (_ref2) {
     var className = _ref2.className;
@@ -82,7 +82,7 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
        * The mouse handlers control flyout behavior, a mouse-only experience.
        */
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-      (0, _core.jsx)("div", (0, _extends2.default)({
+      (0, _react2.jsx)("div", (0, _extends2.default)({
         css: [outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles],
         className: className,
         "data-testid": testId,

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -15,7 +15,7 @@ var _hooks = require("../../../common/hooks");
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion)());
+var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 /**
  * The transition duration is intentionally set to 0ms.
  *
@@ -23,20 +23,20 @@ var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion
  * opacity and visibility so that it syncs collapsing sidebar.
  */
 
-var hideLeftSidebarContentsStyles = (0, _core.css)({
+var hideLeftSidebarContentsStyles = (0, _react.css)({
   opacity: 0,
   transition: "opacity 0ms linear, visibility 0ms linear",
   transitionDelay: "".concat(_constants.TRANSITION_DURATION - 100, "ms"),
   visibility: 'hidden'
 });
-var resizableChildrenWrapperStyles = (0, _core.css)({
+var resizableChildrenWrapperStyles = (0, _react.css)({
   height: '100%',
   opacity: 1,
   overflow: 'hidden auto',
   transition: 'none',
   visibility: 'visible'
 });
-var fixedChildrenWrapperStyles = (0, _core.css)({
+var fixedChildrenWrapperStyles = (0, _react.css)({
   minWidth: 240,
   height: '100%'
 });
@@ -52,9 +52,9 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
   var isCollapsing = (0, _hooks.useIsSidebarCollapsing)();
   var isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
   var isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles]
-  }, (0, _core.jsx)("div", {
+  }, (0, _react.jsx)("div", {
     css: fixedChildrenWrapperStyles
   }, children));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 /** @jsx jsx */
-var focusStyles = (0, _core.css)({
+var focusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -25,7 +25,7 @@ var focusStyles = (0, _core.css)({
  * so the nested selector needs to target an extra level deeper.
  */
 
-var sidebarFocusStyles = (0, _core.css)({
+var sidebarFocusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -49,7 +49,7 @@ var SlotFocusRing = function SlotFocusRing(_ref) {
   var children = _ref.children,
       _ref$isSidebar = _ref.isSidebar,
       isSidebar = _ref$isSidebar === void 0 ? false : _ref$isSidebar;
-  return (0, _core.jsx)(_core.ClassNames, null, function (_ref2) {
+  return (0, _react.jsx)(_react.ClassNames, null, function (_ref2) {
     var css = _ref2.css;
     return children({
       className: isSidebar ? css(sidebarFocusStyles) : css(focusStyles)

package/dist/cjs/components/slots/left-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 leftPanelStyles = (0, _core.css)({
+var leftPanelStyles = (0, _react2.css)({
   gridArea: _constants.LEFT_PANEL
 });
-var leftPanelFixedStyles = (0, _core.css)({
+var leftPanelFixedStyles = (0, _react2.css)({
   width: _constants.LEFT_PANEL_WIDTH,
   position: 'fixed',
   top: 0,
@@ -62,14 +62,14 @@ var LeftPanel = function LeftPanel(props) {
     };
   }, [leftPanelWidth]);
   (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: [leftPanelStyles, isFixed && leftPanelFixedStyles],
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('left-panel')), (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _utils.getPageLayoutSlotSelector)('left-panel')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_LEFT_PANEL_WIDTH,
       value: leftPanelWidth
     }), children);