Upgrade to Emotion 11

package.json

@@ -90,6 +90,7 @@
 		"@babel/plugin-syntax-jsx": "7.12.13",
 		"@babel/runtime-corejs3": "7.13.10",
 		"@babel/traverse": "7.13.0",
+		"@emotion/styled": "^11.3.0",
 		"@octokit/rest": "16.26.0",
 		"@octokit/webhooks": "7.1.0",
 		"@storybook/addon-a11y": "6.2.5",

packages/components/package.json

@@ -30,11 +30,12 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@emotion/cache": "^10.0.27",
-		"@emotion/core": "^10.1.1",
-		"@emotion/css": "^10.0.22",
-		"@emotion/native": "^10.0.22",
-		"@emotion/styled": "^10.0.23",
+		"@emotion/cache": "^11.1.3",
+		"@emotion/core": "^11.0.0",
+		"@emotion/css": "^11.1.3",
+		"@emotion/native": "^11.0.0",
+		"@emotion/react": "^11.1.5",
+		"@emotion/styled": "^11.3.0",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/date": "file:../date",
@@ -52,7 +53,6 @@
 		"classnames": "^2.2.5",
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
-		"emotion": "^10.0.23",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
 		"lodash": "^4.17.19",

packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/css';
 
 /**
  * Internal dependencies

packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/css';
 
 /**
  * Internal dependencies

packages/components/src/box-control/styles/box-control-icon-styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 
 export const Root = styled.span`

packages/components/src/box-control/styles/box-control-styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 /**
  * Internal dependencies

packages/components/src/box-control/styles/box-control-visualizer-styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 
 /**

packages/components/src/flex/flex-item/hook.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 /**
  * Internal dependencies

packages/components/src/flex/flex/hook.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

packages/components/src/flex/styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const Flex = css`
 	display: flex;

packages/components/src/input-control/styles/input-control-styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 
 /**

packages/components/src/number-control/styles/number-control-styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 /**
  * Internal dependencies

packages/components/src/range-control/styles/range-control-styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 
 /**

packages/components/src/select-control/styles/select-control-styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 
 /**

packages/components/src/spinner/styles/spinner-styles.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/css';
 
 /**
  * Internal dependencies

packages/components/src/style-provider/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CacheProvider } from '@emotion/core';
+import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import memoize from 'memize';
 

packages/components/src/text/hook.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { isPlainObject } from 'lodash';
 
 /**

packages/components/src/text/styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 /**
  * Internal dependencies

packages/components/src/truncate/hook.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

packages/components/src/truncate/styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const Truncate = css`
 	display: block;

packages/components/src/ui/card/body.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

packages/components/src/ui/card/component.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,7 @@ function Card( props, forwardedRef ) {
 
 	return (
 		<View { ...otherProps } ref={ forwardedRef }>
-			<View css={ styles.Content }>{ children }</View>
+			<View className={ styles.Content }>{ children }</View>
 			<Elevation
 				className={ elevationClassName }
 				isInteractive={ false }

packages/components/src/ui/card/footer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

packages/components/src/ui/card/header.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

packages/components/src/ui/card/hook.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

packages/components/src/ui/card/inner-body.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * Internal dependencies

packages/components/src/ui/card/styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 /**
  * Internal dependencies

packages/components/src/ui/context/polymorphic-component.ts

@@ -4,7 +4,6 @@
 // eslint-disable-next-line no-restricted-imports
 import type * as React from 'react';
 import type { As, RenderProp, ExtractHTMLAttributes } from 'reakit-utils/types';
-import type { Interpolation } from 'create-emotion';
 
 /**
  * Based on https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/types.ts
@@ -35,27 +34,7 @@ export type PolymorphicComponent< T extends As, O > = {
 	selector: string;
 };
 
-export type CreatePolymorphicComponent< T extends As, P > = (
-	template: TemplateStringsArray,
-	...styles: (
-		| Interpolation< undefined >
-		| PolymorphicComponent< any, any >
-	 )[]
-) => PolymorphicComponent< T, P >;
-
 export type ForwardedRef< TElement extends HTMLElement > =
 	| ( ( instance: TElement | null ) => void )
 	| React.MutableRefObject< TElement | null >
 	| null;
-
-export type CoreElements = {
-	[ P in keyof JSX.IntrinsicElements ]: PolymorphicComponent< P, {} >;
-};
-
-type CreateStyledComponents = {
-	[ P in keyof JSX.IntrinsicElements ]: CreatePolymorphicComponent< P, {} >;
-};
-
-export type CreateStyled = CreateStyledComponents & {
-	< T extends As >( component: T ): CreatePolymorphicComponent< T, {} >;
-};

packages/components/src/ui/context/use-context-system.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

packages/components/src/ui/control-group/hook.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * Internal dependencies

packages/components/src/ui/control-group/styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const first = css`
 	border-bottom-right-radius: 0;

packages/components/src/ui/control-label/hook.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * Internal dependencies

packages/components/src/ui/control-label/styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 /**
  * Internal dependencies

packages/components/src/ui/divider/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import { Separator } from 'reakit';
 // eslint-disable-next-line no-restricted-imports, no-duplicate-imports

packages/components/src/ui/divider/styles.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 /**
  * Internal dependencies

packages/components/src/ui/elevation/hook.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { isNil } from 'lodash';
 
 /**

packages/components/src/ui/elevation/styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const Elevation = css`
 	background: transparent;

packages/components/src/ui/form-group/form-group-styles.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const FormGroup = css`
 	width: 100%;