@atlaskit/drawer 7.5.2 → 7.5.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/drawer
 
+## 7.5.3
+
+### Patch Changes
+
+- [`779727e307a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/779727e307a) - Internal change only. Replace all instances of Box with stable @atlaskit/primitives version.
+
 ## 7.5.2
 
 ### Patch Changes

package/dist/cjs/components/blanket.js

@@ -8,11 +8,14 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 var _motion = require("@atlaskit/motion");
 var _constants = require("../constants");
 /** @jsx jsx */
 
+var blanketStyles = (0, _react2.css)({
+  position: 'relative'
+});
+
 /**
  * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
  */
@@ -39,8 +42,8 @@ var Blanket = function Blanket(_ref) {
     animationTimingFunction: _constants.animationTimingFunction
   }, function (_ref2) {
     var className = _ref2.className;
-    return (0, _react2.jsx)(_box.default, {
-      position: "relative",
+    return (0, _react2.jsx)("div", {
+      css: blanketStyles,
       className: className
     }, (0, _react2.jsx)(_blanket.default, {
       isTinted: true,

package/dist/cjs/components/index.js

@@ -27,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.5.2";
+var packageVersion = "7.5.3";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({

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

@@ -29,7 +29,7 @@ var Content = function Content(_ref) {
      * a complete override with no chance of partially changing styles.
      */
 
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
     (0, _react.jsx)("div", (0, _extends2.default)({
       css: (0, _react.css)(cssFn(defaultStyles))
     }, props))

package/dist/cjs/components/primitives/drawer-wrapper.js

@@ -5,15 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapperWidth = exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _useCallbackRef = require("use-callback-ref");
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-var _constants = require("@atlaskit/theme/constants");
+var _colors = require("@atlaskit/theme/colors");
 var _usePreventProgrammaticScroll = _interopRequireDefault(require("./hooks/use-prevent-programmatic-scroll"));
-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 = 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; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+/** @jsx jsx */
+
 var wrapperWidth = {
   full: {
     width: '100vw'
@@ -22,21 +20,26 @@ var wrapperWidth = {
     width: '95vw'
   },
   narrow: {
-    width: 45 * (0, _constants.gridSize)()
+    width: 360
   },
   medium: {
-    width: 60 * (0, _constants.gridSize)()
+    width: 480
   },
   wide: {
-    width: 75 * (0, _constants.gridSize)()
+    width: 600
   }
 };
 exports.wrapperWidth = wrapperWidth;
-var wrapperStyles = {
+var wrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  height: '100vh',
+  position: 'fixed',
+  zIndex: 500,
   top: 0,
   left: 0,
-  height: '100vh'
-};
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  overflow: 'hidden'
+});
 /**
  * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
  */
@@ -63,15 +66,11 @@ var DrawerWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollRe
   }, [scrollRef]);
   var ref = (0, _useCallbackRef.useMergeRefs)([drawerRef, assignSecondChildRef]);
   (0, _usePreventProgrammaticScroll.default)();
-  return (0, _react2.jsx)(_box.default, {
-    display: "flex",
-    position: "fixed",
-    backgroundColor: "elevation.surface.overlay",
-    overflow: "hidden",
-    layer: "blanket",
-    UNSAFE_style: _objectSpread(_objectSpread({}, wrapperStyles), wrapperWidth[width]),
+  return (0, _react2.jsx)("div", {
+    css: wrapperStyles,
+    style: wrapperWidth[width],
     className: className,
-    testId: testId,
+    "data-testid": testId,
     ref: ref
   }, children);
 });

package/dist/cjs/components/primitives/sidebar.js

@@ -29,7 +29,7 @@ var sidebarCSS = function sidebarCSS() {
 var Sidebar = function Sidebar(_ref) {
   var cssFn = _ref.cssFn,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: (0, _react.css)(cssFn(defaultStyle))
   }, props));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "7.5.2",
+	"version": "7.5.3",
 	"sideEffects": false
 }

package/dist/es2019/components/blanket.js

@@ -1,10 +1,13 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import AkBlanket from '@atlaskit/blanket';
-import Box from '@atlaskit/ds-explorations/box';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { animationTimingFunction, transitionDurationMs } from '../constants';
+const blanketStyles = css({
+  position: 'relative'
+});
+
 /**
  * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
  */
@@ -32,8 +35,8 @@ const Blanket = ({
     animationTimingFunction: animationTimingFunction
   }, ({
     className
-  }) => jsx(Box, {
-    position: "relative",
+  }) => jsx("div", {
+    css: blanketStyles,
     className: className
   }, jsx(AkBlanket, {
     isTinted: true,

package/dist/es2019/components/index.js

@@ -8,7 +8,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.5.2";
+const packageVersion = "7.5.3";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',

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

@@ -19,7 +19,7 @@ const Content = ({
  * a complete override with no chance of partially changing styles.
  */
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
 jsx("div", _extends({
   css: css(cssFn(defaultStyles))
 }, props));

package/dist/es2019/components/primitives/drawer-wrapper.js

@@ -1,11 +1,9 @@
 /** @jsx jsx */
 
 import { forwardRef, useCallback } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
-import Box from '@atlaskit/ds-explorations/box';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
+import { N0 } from '@atlaskit/theme/colors';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
 export const wrapperWidth = {
   full: {
@@ -15,20 +13,25 @@ export const wrapperWidth = {
     width: '95vw'
   },
   narrow: {
-    width: 45 * gridSize()
+    width: 360
   },
   medium: {
-    width: 60 * gridSize()
+    width: 480
   },
   wide: {
-    width: 75 * gridSize()
+    width: 600
   }
 };
-const wrapperStyles = {
+const wrapperStyles = css({
+  display: 'flex',
+  height: '100vh',
+  position: 'fixed',
+  zIndex: 500,
   top: 0,
   left: 0,
-  height: '100vh'
-};
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  overflow: 'hidden'
+});
 /**
  * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
  */
@@ -55,18 +58,11 @@ const DrawerWrapper = /*#__PURE__*/forwardRef(({
   }, [scrollRef]);
   const ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
-  return jsx(Box, {
-    display: "flex",
-    position: "fixed",
-    backgroundColor: "elevation.surface.overlay",
-    overflow: "hidden",
-    layer: "blanket",
-    UNSAFE_style: {
-      ...wrapperStyles,
-      ...wrapperWidth[width]
-    },
+  return jsx("div", {
+    css: wrapperStyles,
+    style: wrapperWidth[width],
     className: className,
-    testId: testId,
+    "data-testid": testId,
     ref: ref
   }, children);
 });

package/dist/es2019/components/primitives/sidebar.js

@@ -20,7 +20,7 @@ const Sidebar = ({
   cssFn,
   ...props
 }) => {
-  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
   return jsx("div", _extends({
     css: css(cssFn(defaultStyle))
   }, props));

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "7.5.2",
+	"version": "7.5.3",
 	"sideEffects": false
 }

package/dist/esm/components/blanket.js

@@ -1,10 +1,13 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import AkBlanket from '@atlaskit/blanket';
-import Box from '@atlaskit/ds-explorations/box';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { animationTimingFunction, transitionDurationMs } from '../constants';
+var blanketStyles = css({
+  position: 'relative'
+});
+
 /**
  * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
  */
@@ -31,8 +34,8 @@ var Blanket = function Blanket(_ref) {
     animationTimingFunction: animationTimingFunction
   }, function (_ref2) {
     var className = _ref2.className;
-    return jsx(Box, {
-      position: "relative",
+    return jsx("div", {
+      css: blanketStyles,
       className: className
     }, jsx(AkBlanket, {
       isTinted: true,

package/dist/esm/components/index.js

@@ -18,7 +18,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.5.2";
+var packageVersion = "7.5.3";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({

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

@@ -23,7 +23,7 @@ var Content = function Content(_ref) {
      * a complete override with no chance of partially changing styles.
      */
 
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
     jsx("div", _extends({
       css: css(cssFn(defaultStyles))
     }, props))

package/dist/esm/components/primitives/drawer-wrapper.js

@@ -1,14 +1,9 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 = 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 { forwardRef, useCallback } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
-import Box from '@atlaskit/ds-explorations/box';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
+import { N0 } from '@atlaskit/theme/colors';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
 export var wrapperWidth = {
   full: {
@@ -18,20 +13,25 @@ export var wrapperWidth = {
     width: '95vw'
   },
   narrow: {
-    width: 45 * gridSize()
+    width: 360
   },
   medium: {
-    width: 60 * gridSize()
+    width: 480
   },
   wide: {
-    width: 75 * gridSize()
+    width: 600
   }
 };
-var wrapperStyles = {
+var wrapperStyles = css({
+  display: 'flex',
+  height: '100vh',
+  position: 'fixed',
+  zIndex: 500,
   top: 0,
   left: 0,
-  height: '100vh'
-};
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  overflow: 'hidden'
+});
 /**
  * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
  */
@@ -58,15 +58,11 @@ var DrawerWrapper = /*#__PURE__*/forwardRef(function (_ref, scrollRef) {
   }, [scrollRef]);
   var ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
-  return jsx(Box, {
-    display: "flex",
-    position: "fixed",
-    backgroundColor: "elevation.surface.overlay",
-    overflow: "hidden",
-    layer: "blanket",
-    UNSAFE_style: _objectSpread(_objectSpread({}, wrapperStyles), wrapperWidth[width]),
+  return jsx("div", {
+    css: wrapperStyles,
+    style: wrapperWidth[width],
     className: className,
-    testId: testId,
+    "data-testid": testId,
     ref: ref
   }, children);
 });

package/dist/esm/components/primitives/sidebar.js

@@ -23,7 +23,7 @@ var sidebarCSS = function sidebarCSS() {
 var Sidebar = function Sidebar(_ref) {
   var cssFn = _ref.cssFn,
     props = _objectWithoutProperties(_ref, _excluded);
-  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
   return jsx("div", _extends({
     css: css(cssFn(defaultStyle))
   }, props));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "7.5.2",
+	"version": "7.5.3",
 	"sideEffects": false
 }

package/dist/types/components/index.d.ts

@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "isOpen" | "zIndex"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
     autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
     isFocusLockEnabled?: boolean | undefined;
     shouldReturnFocus?: boolean | undefined;
     width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "isOpen" | "analyticsContext" | "zIndex" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/index.d.ts

@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "isOpen" | "zIndex"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
     autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
     isFocusLockEnabled?: boolean | undefined;
     shouldReturnFocus?: boolean | undefined;
     width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "isOpen" | "analyticsContext" | "zIndex" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.5.2",
+  "version": "7.5.3",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Drawer",
       "category": "Components"
@@ -35,12 +35,11 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/blanket": "^12.4.0",
-    "@atlaskit/ds-explorations": "^2.1.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/motion": "^1.4.0",
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -61,10 +60,10 @@
     "@atlaskit/dropdown-menu": "^11.9.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/menu": "^1.7.0",
-    "@atlaskit/modal-dialog": "^12.5.0",
+    "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textarea": "^4.6.0",
+    "@atlaskit/textarea": "^4.7.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,141 @@
+## API Report File for "@atlaskit/drawer"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ComponentType } from 'react';
+import { CSSObject } from '@emotion/react';
+import { default as React_2 } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { SyntheticEvent } from 'react';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { WithContextProps } from '@atlaskit/analytics-next';
+
+// @public (undocumented)
+export interface BaseProps {
+    children?: ReactNode;
+    icon?: ComponentType<any>;
+    onCloseComplete?: (node: HTMLElement | null) => void;
+    onOpenComplete?: (node: HTMLElement | null) => void;
+    overrides?: OverridesType;
+    // @deprecated (undocumented)
+    shouldUnmountOnExit?: boolean;
+    testId?: string;
+    width?: DrawerWidth;
+}
+
+// @public
+export type CloseTrigger = 'backButton' | 'blanket' | 'escKey';
+
+// @public (undocumented)
+export type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
+
+// @public (undocumented)
+export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
+    // @deprecated (undocumented)
+    cssFn: (defaultStyles: CSSObject) => CSSObject;
+}
+
+// @public (undocumented)
+const _default: React_2.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof WithAnalyticsEventsProps>, "children" | "icon" | "isOpen" | "onClose" | "onCloseComplete" | "onKeyDown" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit" | "testId" | "zIndex"> & Partial<Pick<Omit<DrawerProps, keyof WithAnalyticsEventsProps>, "width" | keyof FocusLockSettings>> & Partial<Pick<{
+    autoFocusFirstElem?: (() => HTMLElement | null) | boolean | undefined;
+    isFocusLockEnabled?: boolean | undefined;
+    shouldReturnFocus?: boolean | undefined;
+    width: DrawerWidth;
+}, never>> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "children" | "icon" | "isOpen" | "key" | "onClose" | "onCloseComplete" | "onKeyDown" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit" | "testId" | "width" | "zIndex" | keyof FocusLockSettings> & React_2.RefAttributes<any>>;
+export default _default;
+
+// @public (undocumented)
+export type DefaultsType = {
+    Sidebar: {
+        component: React.ComponentType<SidebarProps>;
+        cssFn: (defaultStyles: CSSObject) => CSSObject;
+    };
+    Content: {
+        component: React.ComponentType<ContentProps>;
+        cssFn: (defaultStyles: CSSObject) => CSSObject;
+    };
+};
+
+// @public (undocumented)
+export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Content' | 'Sidebar'>;
+
+// @public (undocumented)
+export type DrawerPrimitiveOverrides = Pick<OverridesType, 'Content' | 'Sidebar'>;
+
+// @public (undocumented)
+export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
+    // (undocumented)
+    in: boolean;
+    // (undocumented)
+    onClose: (event: SyntheticEvent<HTMLElement>) => void;
+}
+
+// @public (undocumented)
+export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & {
+    onKeyDown?: (event: SyntheticEvent) => void;
+    onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
+    isOpen: boolean;
+    zIndex?: number;
+};
+
+// @public (undocumented)
+export type DrawerWidth = 'extended' | 'full' | 'medium' | 'narrow' | 'wide';
+
+// @public (undocumented)
+export interface FocusLockProps extends FocusLockSettings {
+    children?: ReactElement;
+}
+
+// @public (undocumented)
+interface FocusLockSettings {
+    autoFocusFirstElem?: (() => HTMLElement | null) | boolean;
+    isFocusLockEnabled?: boolean;
+    shouldReturnFocus?: boolean;
+}
+
+// @public (undocumented)
+export type OverridesType = {
+    Sidebar?: {
+        component?: React.ComponentType<SidebarProps>;
+        cssFn?: (defaultStyles: CSSObject) => CSSObject;
+    };
+    Content?: {
+        component?: React.ComponentType<ContentProps>;
+        cssFn?: (defaultStyles: CSSObject) => CSSObject;
+    };
+};
+
+// @public (undocumented)
+export type SidebarCSSProps = Omit<SidebarProps, 'cssFn'>;
+
+// @public (undocumented)
+export interface SidebarProps extends React.HTMLProps<HTMLDivElement> {
+    // @deprecated (undocumented)
+    cssFn: (defaultStyles: CSSObject) => CSSObject;
+}
+
+// @public (undocumented)
+export type Widths = {
+    extended: {
+        width: string;
+    };
+    full: {
+        width: string;
+    };
+    medium: {
+        width: number;
+    };
+    narrow: {
+        width: number;
+    };
+    wide: {
+        width: number;
+    };
+};
+
+// (No @packageDocumentation comment for this package)
+
+```