@atlaskit/menu 1.3.11 → 1.4.0

package/dist/es2019/menu-item/skeleton-heading-item.js

@@ -1,15 +1,14 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { N20A } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 const skeletonStyles = css({
-  padding: `0 ${gridSize() * 2.5}px`,
+  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-250, 20px)"}`,
   '::after': {
     display: 'block',
     width: '30%',
-    height: gridSize(),
+    height: "var(--ds-scale-100, 8px)",
     backgroundColor: `var(--ds-skeleton, ${N20A})`,
     borderRadius: 100,
     content: '""'
@@ -49,7 +48,7 @@ const SkeletonHeadingItem = ({
     '--width': width
   },
   css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-  cssFn(undefined)],
+  css(cssFn(undefined))],
   "data-ds--menu--skeleton-heading-item": true,
   "data-testid": testId
 }));

package/dist/es2019/menu-item/skeleton-item.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { N20A } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
@@ -104,7 +104,7 @@ const SkeletonItem = ({
     '--width': width
   },
   css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-  cssFn()],
+  css(cssFn())],
   "data-testid": testId
 }));
 

package/dist/es2019/menu-section/menu-group.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 
 /**

package/dist/es2019/menu-section/popup-menu-group.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import MenuGroup from './menu-group';
 /**
  * @deprecated

package/dist/es2019/menu-section/section.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, Fragment } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N30A } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.3.11",
+	"version": "1.4.0",
 	"sideEffects": false
 }

package/dist/esm/internal/components/menu-item-primitive.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Fragment } from 'react';
-import { ClassNames, css, jsx } from '@emotion/core';
+import { ClassNames, css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
@@ -14,11 +14,11 @@ var defaultRender = function defaultRender(Component, props) {
 
 var gridSize = gridSizeFn();
 var fontSize = fontSizeFn();
-var itemTopBottomPadding = gridSize;
-var itemSidePadding = gridSize * 2.5;
-var itemElemSpacing = gridSize * 1.5;
+var itemTopBottomPadding = "var(--ds-scale-100, 8px)";
+var itemSidePadding = "var(--ds-scale-250, 20px)";
+var itemElemSpacing = "var(--ds-scale-150, 12px)";
 var itemDescriptionSpacing = gridSize * 0.375;
-var itemMinHeight = gridSize * 5;
+var itemMinHeight = "var(--ds-scale-500, 40px)";
 var beforeElementStyles = css({
   display: 'flex',
   marginRight: itemElemSpacing,
@@ -61,8 +61,9 @@ var primitiveStyles = css({
   boxSizing: 'border-box',
   width: '100%',
   minHeight: itemMinHeight,
-  margin: 0,
-  padding: "".concat(itemTopBottomPadding, "px ").concat(itemSidePadding, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
+  padding: "".concat(itemTopBottomPadding, " ").concat(itemSidePadding),
   alignItems: 'center',
   border: 0,
   fontSize: fontSize,

package/dist/esm/internal/components/skeleton-shimmer.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ClassNames, css, jsx, keyframes } from '@emotion/core';
+import { ClassNames, css, jsx, keyframes } from '@emotion/react';
 import { N20A, N30A } from '@atlaskit/theme/colors';
 
 /**

package/dist/esm/menu-item/button-item.js

@@ -4,7 +4,7 @@ var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore",
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 

package/dist/esm/menu-item/custom-item.js

@@ -4,7 +4,7 @@ var _excluded = ["component", "cssFn", "isDisabled", "isSelected", "onClick", "t
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 

package/dist/esm/menu-item/heading-item.js

@@ -4,7 +4,7 @@ var _excluded = ["children", "testId", "id", "cssFn"];
 
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { N300 } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
@@ -40,7 +40,7 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
 
   return jsx("div", _extends({
     css: [headingStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn(undefined)],
+    css(cssFn(undefined))],
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
     id: id

package/dist/esm/menu-item/link-item.js

@@ -4,7 +4,7 @@ var _excluded = ["children", "href", "cssFn", "description", "iconAfter", "iconB
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 

package/dist/esm/menu-item/skeleton-heading-item.js

@@ -1,15 +1,14 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { N20A } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 var skeletonStyles = css({
-  padding: "0 ".concat(gridSize() * 2.5, "px"),
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-250, 20px)"),
   '::after': {
     display: 'block',
     width: '30%',
-    height: gridSize(),
+    height: "var(--ds-scale-100, 8px)",
     backgroundColor: "var(--ds-skeleton, ".concat(N20A, ")"),
     borderRadius: 100,
     content: '""'
@@ -51,7 +50,7 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
         '--width': width
       },
       css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      cssFn(undefined)],
+      css(cssFn(undefined))],
       "data-ds--menu--skeleton-heading-item": true,
       "data-testid": testId
     });

package/dist/esm/menu-item/skeleton-item.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { N20A } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
@@ -106,7 +106,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
         '--width': width
       },
       css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      cssFn()],
+      css(cssFn())],
       "data-testid": testId
     });
   });

package/dist/esm/menu-section/menu-group.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role"];
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 
 /**

package/dist/esm/menu-section/popup-menu-group.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["maxWidth", "minWidth"];
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import MenuGroup from './menu-group';
 /**
  * @deprecated

package/dist/esm/menu-section/section.js

@@ -4,7 +4,7 @@ var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "ha
 
 /** @jsx jsx */
 import { forwardRef, Fragment } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N30A } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.3.11",
+	"version": "1.4.0",
 	"sideEffects": false
 }

package/dist/types/internal/components/menu-item-primitive.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { MenuItemPrimitiveProps } from '../../types';
 /**
  * __Menu item primitive__
@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
 export default MenuItemPrimitive;

package/dist/types/internal/components/skeleton-shimmer.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 declare type SkeletonShimmerProps = {
     children: ({ className }: {
         className?: string;
@@ -19,5 +20,5 @@ declare type SkeletonShimmerProps = {
  *
  * @internal
  */
-declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => JSX.Element;
+declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => jsx.JSX.Element;
 export default SkeletonShimmer;

package/dist/types/menu-item/heading-item.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { HeadingItemProps } from '../types';
 /**
  * __Heading item__
@@ -8,5 +9,5 @@ import type { HeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, ...rest }: HeadingItemProps) => JSX.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
 export default HeadingItem;

package/dist/types/menu-item/skeleton-heading-item.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { SkeletonHeadingItemProps } from '../types';
 /**
  * __Skeleton heading item__
@@ -8,5 +8,5 @@ import type { SkeletonHeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => JSX.Element;
+declare const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => jsx.JSX.Element;
 export default SkeletonHeadingItem;

package/dist/types/menu-item/skeleton-item.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { SkeletonItemProps } from '../types';
 /**
  * __Skeleton item__
@@ -8,5 +8,5 @@ import type { SkeletonItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => JSX.Element;
+declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => jsx.JSX.Element;
 export default SkeletonItem;

package/dist/types/menu-section/menu-group.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import type { MenuGroupProps } from '../types';
 /**
  * __Menu group__
@@ -8,5 +9,5 @@ import type { MenuGroupProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, ...rest }: MenuGroupProps) => JSX.Element;
+declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default MenuGroup;

package/dist/types/menu-section/popup-menu-group.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import type { MenuGroupProps } from '../types';
 /**
  * @deprecated
  */
-declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => JSX.Element;
+declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default PopupMenuGroup;

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode, Ref } from 'react';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;
 }

package/dist/types-ts4.0/internal/components/menu-item-primitive.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { MenuItemPrimitiveProps } from '../../types';
 /**
  * __Menu item primitive__
@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
 export default MenuItemPrimitive;

package/dist/types-ts4.0/internal/components/skeleton-shimmer.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 declare type SkeletonShimmerProps = {
     children: ({ className }: {
         className?: string;
@@ -19,5 +20,5 @@ declare type SkeletonShimmerProps = {
  *
  * @internal
  */
-declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => JSX.Element;
+declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => jsx.JSX.Element;
 export default SkeletonShimmer;

package/dist/types-ts4.0/menu-item/heading-item.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { HeadingItemProps } from '../types';
 /**
  * __Heading item__
@@ -8,5 +9,5 @@ import type { HeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, ...rest }: HeadingItemProps) => JSX.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
 export default HeadingItem;

package/dist/types-ts4.0/menu-item/skeleton-heading-item.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { SkeletonHeadingItemProps } from '../types';
 /**
  * __Skeleton heading item__
@@ -8,5 +8,5 @@ import type { SkeletonHeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => JSX.Element;
+declare const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => jsx.JSX.Element;
 export default SkeletonHeadingItem;

package/dist/types-ts4.0/menu-item/skeleton-item.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { SkeletonItemProps } from '../types';
 /**
  * __Skeleton item__
@@ -8,5 +8,5 @@ import type { SkeletonItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => JSX.Element;
+declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => jsx.JSX.Element;
 export default SkeletonItem;

package/dist/types-ts4.0/menu-section/menu-group.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import type { MenuGroupProps } from '../types';
 /**
  * __Menu group__
@@ -8,5 +9,5 @@ import type { MenuGroupProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, ...rest }: MenuGroupProps) => JSX.Element;
+declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default MenuGroup;

package/dist/types-ts4.0/menu-section/popup-menu-group.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import type { MenuGroupProps } from '../types';
 /**
  * @deprecated
  */
-declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => JSX.Element;
+declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default PopupMenuGroup;

package/dist/types-ts4.0/types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode, Ref } from 'react';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.3.11",
+  "version": "1.4.0",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,13 +15,15 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -43,13 +45,13 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "^0.1.0",
+    "@atlaskit/ds-explorations": "^1.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.1.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -57,7 +59,7 @@
   },
   "devDependencies": {
     "@atlaskit/avatar": "^21.1.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/icon-file-type": "^6.0.0",
@@ -66,13 +68,13 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@emotion/jest": "^11.8.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
     "@types/react-router-dom": "^4.3.1",
     "ast-types": "^0.13.3",
     "bind-event-listener": "^2.1.1",
     "jest-axe": "^4.0.0",
-    "jest-emotion": "^10.0.32",
     "jscodeshift": "^0.13.0",
     "react-router-dom": "^4.2.2",
     "storybook-addon-performance": "^0.16.0",
@@ -96,6 +98,7 @@
         "emotion"
       ],
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"
     }