use @emotion/css instead of plain emotion

package.json

@@ -8,6 +8,7 @@
     "@auth0/auth0-react": "^1.0.0",
     "@chakra-ui/icons": "^1.0.2",
     "@chakra-ui/react": "^1.0.4",
+    "@emotion/css": "^11.1.3",
     "@emotion/react": "^11.1.4",
     "@emotion/styled": "^11.0.0",
     "@loadable/component": "^5.12.0",

src/app/HomePage.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import gql from "graphql-tag";
 import {
   Box,

src/app/ItemPage.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import {
   AspectRatio,
   Button,

src/app/ItemTradesPage.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { Box, Skeleton, useColorModeValue, useToken } from "@chakra-ui/react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";

src/app/PrivacyPolicyPage.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { VStack } from "@chakra-ui/react";
 
 import { Heading1, Heading2, Heading3 } from "./util";

src/app/UserItemsPage.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import {
   Badge,
   Box,

src/app/WardrobePage/Item.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { css, cx } from "emotion";
+import { css, cx } from "@emotion/css";
 import {
   Box,
   Flex,

src/app/WardrobePage/ItemsPanel.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import {
   Box,
   Editable,

src/app/WardrobePage/OutfitControls.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { css, cx } from "emotion";
+import { css, cx } from "@emotion/css";
 import {
   Box,
   Button,

src/app/WardrobePage/PosePicker.js

@@ -1,7 +1,7 @@
 import React from "react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
-import { css, cx } from "emotion";
+import { css, cx } from "@emotion/css";
 import {
   Box,
   Button,

src/app/WardrobePage/SearchToolbar.js

@@ -12,7 +12,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react";
 import { CloseIcon, SearchIcon } from "@chakra-ui/icons";
-import { css, cx } from "emotion";
+import { css, cx } from "@emotion/css";
 import Autosuggest from "react-autosuggest";
 
 /**

src/app/WardrobePage/support/ItemSupportDrawer.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import gql from "graphql-tag";
 import { useQuery, useMutation } from "@apollo/client";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import {
   Badge,
   Box,

src/app/components/HangerSpinner.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { Box, useColorModeValue } from "@chakra-ui/react";
 import { createIcon } from "@chakra-ui/icons";
 

src/app/components/ItemCard.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import {
   Badge,
   Box,

src/app/components/OutfitPreview.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, DarkMode, Flex, Text } from "@chakra-ui/react";
 import { WarningIcon } from "@chakra-ui/icons";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import OutfitMovieLayer, {

yarn.lock

@@ -2585,6 +2585,17 @@
     "@emotion/utils" "0.11.3"
     babel-plugin-emotion "^10.0.27"
 
+"@emotion/css@^11.1.3":
+  version "11.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.1.3.tgz#9ed44478b19e5d281ccbbd46d74d123d59be793f"
+  integrity sha512-RSQP59qtCNTf5NWD6xM08xsQdCZmVYnX/panPYvB6LQAPKQB6GL49Njf0EMbS3CyDtrlWsBcmqBtysFvfWT3rA==
+  dependencies:
+    "@emotion/babel-plugin" "^11.0.0"
+    "@emotion/cache" "^11.1.3"
+    "@emotion/serialize" "^1.0.0"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+
 "@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"