AR-2143 Update to emotion 11

.storybook/preview/ThemedCanvas.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ClassNames } from "@emotion/core";
+import { ClassNames } from "@emotion/react";
 import { colors } from "../../src/colors";
 import { assertUnreachable } from "../../src/shared/assertUnreachable";
 import { Canvas } from "@storybook/addon-docs/dist/blocks/Canvas";

README.md

@@ -10,7 +10,7 @@
 ## Getting started
 
 ```shell
-npm install @apollo/space-kit @emotion/core @emotion/cache framer-motion
+npm install @apollo/space-kit @emotion/react @emotion/cache framer-motion
 ```
 
 ## Usage

jest.config.js

@@ -15,7 +15,7 @@ module.exports = {
   },
   preset: "ts-jest/presets/js-with-babel",
   setupFilesAfterEnv: ["<rootDir>jest/setup.js"],
-  snapshotSerializers: ["jest-emotion"],
+  snapshotSerializers: ["@emotion/jest/serializer"],
   globals: {
     "ts-jest": {
       diagnostics: false,

package.json

@@ -99,8 +99,9 @@
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-typescript": "^7.12.1",
     "@babel/traverse": "^7.12.1",
-    "@emotion/cache": "^10.0.29",
-    "@emotion/core": "^10.1.1",
+    "@emotion/cache": "^11.1.3",
+    "@emotion/jest": "^11.2.0",
+    "@emotion/react": "^11.1.5",
     "@rollup/plugin-babel": "^5.2.1",
     "@storybook/addon-docs": "^6.1.17",
     "@storybook/react": "^6.1.17",
@@ -140,7 +141,6 @@
     "formik": "^2.2.5",
     "framer-motion": "1.6.8",
     "jest": "^26.5.3",
-    "jest-emotion": "^10.0.32",
     "jest-util": "^26.5.2",
     "less": "^3.9.0",
     "node-fetch": "^2.6.0",
@@ -165,8 +165,8 @@
     "yup": "^0.31.0"
   },
   "peerDependencies": {
-    "@emotion/cache": ">10.0.29",
-    "@emotion/core": ">10.1.0",
+    "@emotion/cache": "^11.0.0",
+    "@emotion/react": "^11.0.0",
     "react": ">16",
     "react-dom": ">16",
     "framer-motion": ">1.6"

rollup.config.js

@@ -48,7 +48,7 @@ function CJS() {
       ),
     external: [
       "@emotion/cache",
-      "@emotion/core",
+      "@emotion/react",
       "@popperjs/core",
       "@popperjs/core/lib/utils/computeAutoPlacement",
       "@popperjs/core/lib/utils/detectOverflow",
@@ -100,7 +100,7 @@ function CJS() {
             "@babel/preset-react",
             {
               runtime: "classic",
-              importSource: "@emotion/core",
+              importSource: "@emotion/react",
             },
           ],
         ],

src/AbstractTooltip/abstractTooltip/TippyStyles.tsx

@@ -2,7 +2,7 @@ import "../../../node_modules/tippy.js/dist/tippy.css";
 import React from "react";
 import { base } from "../../typography";
 import { colors } from "../../colors";
-import { Global, css } from "@emotion/core";
+import { Global, css } from "@emotion/react";
 
 export const TippyStyles: React.FC = () => (
   <Global

src/AlertBanner/AlertBanner.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from "@emotion/core";
+import { jsx } from "@emotion/react";
 import React, { CSSProperties, useMemo } from "react";
 import PropTypes from "prop-types";
 

src/AlertCard/AlertCard.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
-import { jsx, ClassNames } from "@emotion/core";
+import { jsx, ClassNames } from "@emotion/react";
 import React, { CSSProperties, Fragment, useMemo } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";

src/Button/Button.spec.tsx

@@ -6,10 +6,10 @@ import { act, render, screen } from "@testing-library/react";
 import { IconShip2 } from "../icons/IconShip2";
 import React from "react";
 import userEvent from "@testing-library/user-event";
-import { matchers } from "jest-emotion";
+import { matchers } from "@emotion/jest";
 import { colors } from "../colors";
 
-// Add the custom matchers provided by 'jest-emotion'
+// Add the custom matchers provided by '@emotion/jest'
 expect.extend(matchers);
 
 test("default button renders", () => {