@atlaskit/inline-dialog 13.1.8 → 13.2.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/inline-dialog
 
+## 13.2.2
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
+- Updated dependencies
+
+## 13.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.2.0
+
+### Minor Changes
+
+- [`2fe0d03807f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2fe0d03807f) - This removes the preventDefault functionality (reverts it back to the previous version of inline dialog where event listeners were added in the capture phase). It also refactors handleClickOutside so that it is now triggered by a ref.
+
+## 13.1.9
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
 ## 13.1.8
 
 ### Patch Changes

package/dist/cjs/InlineDialog/index.js

@@ -31,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /** @jsx jsx */
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.1.8";
+var packageVersion = "13.2.2";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -58,12 +58,13 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
       content = _ref.content,
       children = _ref.children;
   var containerRef = (0, _react.useRef)(null);
-  var triggerRef = (0, _react.useRef)(null);
-  var handleClickOutside = (0, _react.useCallback)(function (event) {
-    if (event.defaultPrevented) {
-      return;
-    }
+  var triggerRef = (0, _react.useRef)(null); // we put this into a ref to avoid handleClickOutside having this as a dependency
 
+  var onCloseRef = (0, _react.useRef)(onClose);
+  (0, _react.useEffect)(function () {
+    onCloseRef.current = onClose;
+  });
+  var handleClickOutside = (0, _react.useCallback)(function (event) {
     var target = event.target; // checks for when target is not HTMLElement
 
     if (!(target instanceof HTMLElement)) {
@@ -89,43 +90,31 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
 
 
     if (containerRef.current && !containerRef.current.contains(target)) {
-      onClose && onClose({
+      var _onCloseRef$current;
+
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
         isOpen: false,
         event: event
       });
     }
-  }, [onClose]);
+  }, []);
   (0, _react.useEffect)(function () {
     if (!isOpen) {
       return;
     }
 
-    var unbind; // Under most circumstances, `useEffect` should run after an event has ended
-    // In this particular case, the popperjs library has a setState inside of a ref,
-    // which cases `useEffect` to run synchronously instead. To avoid this, we use a
-    // `setTimeout` so `useEffect` after the event. We only want to start listening
-    // for clicks after the original click event that triggered the dialog
-    // has finished. You can see more in the Codesandbox here:
-    // https://codesandbox.io/s/useeffect-and-event-timing-refs-in-state-5tys3?file=/src/App.tsx
-
-    var timeoutId = setTimeout(function () {
-      unbind = (0, _bindEventListener.bind)(window, {
-        type: 'click',
-        listener: function listener(event) {
-          return handleClickOutside(event);
-        },
-        options: {
-          capture: false
-        }
-      });
+    var unbind;
+    unbind = (0, _bindEventListener.bind)(window, {
+      type: 'click',
+      listener: function listener(e) {
+        return handleClickOutside(e);
+      },
+      options: {
+        capture: true
+      }
     });
-    return function () {
-      var _unbind;
-
-      window.clearTimeout(timeoutId);
-      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
-    };
-  }, [handleClickOutside, isOpen]);
+    return unbind;
+  }, [isOpen, handleClickOutside]);
   var popper = isOpen ? (0, _core.jsx)(_popper.Popper, {
     placement: placement
   }, function (_ref2) {
@@ -164,8 +153,7 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
       }
     }, children);
   }), popper);
-}); // enzyme relies on components having a display name
-
+});
 exports.InlineDialogWithoutAnalytics = InlineDialog;
 InlineDialog.displayName = 'InlineDialog';
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/InlineDialog/styled/container.js

@@ -21,27 +21,25 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (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 themedBackground = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.overlay', _colors.N0),
-  dark: (0, _tokens.token)('color.background.overlay', _colors.DN50)
+  light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
 });
 var themedColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
-  dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
+  light: "var(--ds-text, ".concat(_colors.N900, ")"),
+  dark: "var(--ds-text, ".concat(_colors.DN600, ")")
 });
 var themedBoxShadow = (0, _components.themed)({
-  light: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
-  dark: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A))
+  light: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+  dark: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")")
 });
 var borderRadius = (0, _constants.borderRadius)();
 var gridSize = (0, _constants.gridSize)();

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.1.8",
+	"version": "13.2.2",
 	"sideEffects": false
 }

package/dist/es2019/InlineDialog/index.js

@@ -8,7 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 const packageName = "@atlaskit/inline-dialog";
-const packageVersion = "13.1.8";
+const packageVersion = "13.2.2";
 
 const checkIsChildOfPortal = node => {
   if (!node) {
@@ -30,12 +30,13 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
   children
 }) {
   const containerRef = useRef(null);
-  const triggerRef = useRef(null);
-  const handleClickOutside = useCallback(event => {
-    if (event.defaultPrevented) {
-      return;
-    }
+  const triggerRef = useRef(null); // we put this into a ref to avoid handleClickOutside having this as a dependency
 
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  });
+  const handleClickOutside = useCallback(event => {
     const {
       target
     } = event; // checks for when target is not HTMLElement
@@ -63,41 +64,29 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
 
 
     if (containerRef.current && !containerRef.current.contains(target)) {
-      onClose && onClose({
+      var _onCloseRef$current;
+
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
         isOpen: false,
         event: event
       });
     }
-  }, [onClose]);
+  }, []);
   useEffect(() => {
     if (!isOpen) {
       return;
     }
 
-    let unbind; // Under most circumstances, `useEffect` should run after an event has ended
-    // In this particular case, the popperjs library has a setState inside of a ref,
-    // which cases `useEffect` to run synchronously instead. To avoid this, we use a
-    // `setTimeout` so `useEffect` after the event. We only want to start listening
-    // for clicks after the original click event that triggered the dialog
-    // has finished. You can see more in the Codesandbox here:
-    // https://codesandbox.io/s/useeffect-and-event-timing-refs-in-state-5tys3?file=/src/App.tsx
-
-    const timeoutId = setTimeout(() => {
-      unbind = bind(window, {
-        type: 'click',
-        listener: event => handleClickOutside(event),
-        options: {
-          capture: false
-        }
-      });
+    let unbind;
+    unbind = bind(window, {
+      type: 'click',
+      listener: e => handleClickOutside(e),
+      options: {
+        capture: true
+      }
     });
-    return () => {
-      var _unbind;
-
-      window.clearTimeout(timeoutId);
-      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
-    };
-  }, [handleClickOutside, isOpen]);
+    return unbind;
+  }, [isOpen, handleClickOutside]);
   const popper = isOpen ? jsx(Popper, {
     placement: placement
   }, ({
@@ -134,8 +123,7 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
       }
     }
   }, children)), popper);
-}); // enzyme relies on components having a display name
-
+});
 InlineDialog.displayName = 'InlineDialog';
 export { InlineDialog as InlineDialogWithoutAnalytics };
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');

package/dist/es2019/InlineDialog/styled/container.js

@@ -8,18 +8,17 @@ import { css, jsx } from '@emotion/core';
 import { DN50, DN50A, DN600, DN60A, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const themedBackground = themed({
-  light: token('color.background.overlay', N0),
-  dark: token('color.background.overlay', DN50)
+  light: `var(--ds-surface-overlay, ${N0})`,
+  dark: `var(--ds-surface-overlay, ${DN50})`
 });
 const themedColor = themed({
-  light: token('color.text.highEmphasis', N900),
-  dark: token('color.text.highEmphasis', DN600)
+  light: `var(--ds-text, ${N900})`,
+  dark: `var(--ds-text, ${DN600})`
 });
 const themedBoxShadow = themed({
-  light: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
-  dark: token('shadow.overlay', `0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`)
+  light: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
+  dark: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`
 });
 const borderRadius = getBorderRadius();
 const gridSize = getGridSize();

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.1.8",
+	"version": "13.2.2",
 	"sideEffects": false
 }

package/dist/esm/InlineDialog/index.js

@@ -8,7 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.1.8";
+var packageVersion = "13.2.2";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -35,12 +35,13 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
       content = _ref.content,
       children = _ref.children;
   var containerRef = useRef(null);
-  var triggerRef = useRef(null);
-  var handleClickOutside = useCallback(function (event) {
-    if (event.defaultPrevented) {
-      return;
-    }
+  var triggerRef = useRef(null); // we put this into a ref to avoid handleClickOutside having this as a dependency
 
+  var onCloseRef = useRef(onClose);
+  useEffect(function () {
+    onCloseRef.current = onClose;
+  });
+  var handleClickOutside = useCallback(function (event) {
     var target = event.target; // checks for when target is not HTMLElement
 
     if (!(target instanceof HTMLElement)) {
@@ -66,43 +67,31 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
 
 
     if (containerRef.current && !containerRef.current.contains(target)) {
-      onClose && onClose({
+      var _onCloseRef$current;
+
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
         isOpen: false,
         event: event
       });
     }
-  }, [onClose]);
+  }, []);
   useEffect(function () {
     if (!isOpen) {
       return;
     }
 
-    var unbind; // Under most circumstances, `useEffect` should run after an event has ended
-    // In this particular case, the popperjs library has a setState inside of a ref,
-    // which cases `useEffect` to run synchronously instead. To avoid this, we use a
-    // `setTimeout` so `useEffect` after the event. We only want to start listening
-    // for clicks after the original click event that triggered the dialog
-    // has finished. You can see more in the Codesandbox here:
-    // https://codesandbox.io/s/useeffect-and-event-timing-refs-in-state-5tys3?file=/src/App.tsx
-
-    var timeoutId = setTimeout(function () {
-      unbind = bind(window, {
-        type: 'click',
-        listener: function listener(event) {
-          return handleClickOutside(event);
-        },
-        options: {
-          capture: false
-        }
-      });
+    var unbind;
+    unbind = bind(window, {
+      type: 'click',
+      listener: function listener(e) {
+        return handleClickOutside(e);
+      },
+      options: {
+        capture: true
+      }
     });
-    return function () {
-      var _unbind;
-
-      window.clearTimeout(timeoutId);
-      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
-    };
-  }, [handleClickOutside, isOpen]);
+    return unbind;
+  }, [isOpen, handleClickOutside]);
   var popper = isOpen ? jsx(Popper, {
     placement: placement
   }, function (_ref2) {
@@ -141,8 +130,7 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
       }
     }, children);
   }), popper);
-}); // enzyme relies on components having a display name
-
+});
 InlineDialog.displayName = 'InlineDialog';
 export { InlineDialog as InlineDialogWithoutAnalytics };
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');

package/dist/esm/InlineDialog/styled/container.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
@@ -14,18 +14,17 @@ import { css, jsx } from '@emotion/core';
 import { DN50, DN50A, DN600, DN60A, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var themedBackground = themed({
-  light: token('color.background.overlay', N0),
-  dark: token('color.background.overlay', DN50)
+  light: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
 });
 var themedColor = themed({
-  light: token('color.text.highEmphasis', N900),
-  dark: token('color.text.highEmphasis', DN600)
+  light: "var(--ds-text, ".concat(N900, ")"),
+  dark: "var(--ds-text, ".concat(DN600, ")")
 });
 var themedBoxShadow = themed({
-  light: token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
-  dark: token('shadow.overlay', "0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A))
+  light: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
+  dark: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")")
 });
 var borderRadius = getBorderRadius();
 var gridSize = getGridSize();

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.1.8",
+	"version": "13.2.2",
 	"sideEffects": false
 }

package/extract-react-types/inline-dialog-props.tsx

@@ -0,0 +1,5 @@
+import { InlineDialogProps } from '../src/types';
+
+export default function InlineDialogProp(props: InlineDialogProps) {
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-dialog",
-  "version": "13.1.8",
+  "version": "13.2.2",
   "description": "An inline dialog is a pop-up container for small amounts of information. It can also contain controls.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -17,7 +17,6 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Inline dialog"
@@ -27,8 +26,8 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/ds-lib": "^1.3.0",
     "@atlaskit/popper": "^5.0.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "bind-event-listener": "^1.0.2",
@@ -38,12 +37,11 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/datetime-picker": "^11.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/modal-dialog": "^12.1.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/select": "^15.0.0",
     "@atlaskit/ssr": "*",
@@ -51,7 +49,6 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^8.0.1",
-    "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
     "typescript": "3.9.6",
@@ -72,7 +69,10 @@
         "react-context",
         "tokens"
       ],
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "design-system": "v1",
       "deprecation": "no-deprecated-imports"
     }