Replace all @emotion/core package references with @emotion/react

.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";

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.tsx

@@ -3,7 +3,7 @@
 import { colors, ShadedColor } from "../colors";
 import type { Property, SimplePseudos } from "csstype";
 import { base } from "../typography";
-import { ClassNames, jsx, ObjectInterpolation } from "@emotion/core";
+import { ClassNames, jsx, CSSObject } from "@emotion/react";
 import { getOffsetInPalette } from "../colors/utils/getOffsetInPalette";
 import tinycolor from "tinycolor2";
 import React, { useState } from "react";
@@ -353,7 +353,7 @@ export const Button = React.forwardRef<HTMLElement, Props>(
           : colors.grey.light,
     };
 
-    const focusedStyles: ObjectInterpolation<undefined> = {
+    const focusedStyles: CSSObject = {
       ...(feel === "flat" && {
         backgroundColor: theme === "light" ? colors.white : "#000",
         color: theme === "light" ? colors.blue.base : colors.blue.light,

src/Button/button.stories/ButtonLayout.tsx

@@ -1,4 +1,4 @@
-import { ClassNames } from "@emotion/core";
+import { ClassNames } from "@emotion/react";
 import React from "react";
 import { Button } from "../Button";
 import { colors } from "../../colors";

src/Button/button/ButtonIcon.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from "react";
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 
 interface ButtonIconProps
   extends Pick<

src/Card/Card.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { colors } from "../colors";
 import { base } from "../typography";
-import { jsx, ClassNames } from "@emotion/core";
+import { jsx, ClassNames } from "@emotion/react";
 import React from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";

src/FeatureIntroContent/index.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import * as React from "react";
 import * as typography from "../typography";
-import { jsx } from "@emotion/core";
+import { jsx } from "@emotion/react";
 import { colors } from "../colors";
 import { useFeatureIntroControlInternalContext } from "../shared/FeatureIntroControlContext";
 

src/FeatureIntroControl/FeatureIntroControl.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
-import { ClassNames } from "@emotion/core";
+import { ClassNames } from "@emotion/react";
 import { FeatureIntroControl } from "../FeatureIntroControl";
 import { FeatureIntroContent } from "../FeatureIntroContent";
 import { FeatureIntroHeading } from "../FeatureIntroHeading";

src/FeatureIntroControl/index.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React, { useMemo } from "react";
 import { colors } from "../colors";
-import { ClassNames, jsx } from "@emotion/core";
+import { ClassNames, jsx } from "@emotion/react";
 import { As, createElementFromAs } from "../shared/createElementFromAs";
 import {
   FeatureIntroControlContextProvider,

src/FeatureIntroDismissButton/index.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import * as React from "react";
 import * as typography from "../typography";
-import { jsx } from "@emotion/core";
+import { jsx } from "@emotion/react";
 import { colors } from "../colors";
 import { useFeatureIntroControlInternalContext } from "../shared/FeatureIntroControlContext";
 

src/FeatureIntroHeading/index.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import * as React from "react";
 import * as typography from "../typography";
-import { jsx } from "@emotion/core";
+import { jsx } from "@emotion/react";
 import { colors } from "../colors";
 import { useFeatureIntroControlInternalContext } from "../shared/FeatureIntroControlContext";
 

src/FeatureIntroImage/index.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import * as React from "react";
-import { jsx } from "@emotion/core";
+import { jsx } from "@emotion/react";
 import { useFeatureIntroControlInternalContext } from "../shared/FeatureIntroControlContext";
 
 interface Props

src/FeatureIntroLearnMoreLink/index.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import * as React from "react";
 import * as typography from "../typography";
-import { jsx } from "@emotion/core";
+import { jsx } from "@emotion/react";
 import { colors } from "../colors";
 import { useFeatureIntroControlInternalContext } from "../shared/FeatureIntroControlContext";
 import { As, createElementFromAs } from "../shared/createElementFromAs";

src/FormControl/index.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
-import { ClassNames, jsx } from "@emotion/core";
+import { ClassNames, jsx } from "@emotion/react";
 import React from "react";
 import { As, createElementFromAs } from "../shared/createElementFromAs";
 import {

src/FormDescription/index.tsx

@@ -2,7 +2,7 @@
 /** @jsxFrag React.Fragment */
 import * as React from "react";
 import * as typography from "../typography";
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 import { colors } from "../colors";
 import { useFormControlInternalContext } from "../shared/FormControlContext";
 

src/FormEndAdornment/index.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
 import * as React from "react";
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 import { useFormControlInternalContext } from "../shared/FormControlContext";
 
 /**

src/FormErrorMessage/index.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as typography from "../typography";
 import { colors } from "../colors";
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 import { useFormControlInternalContext } from "../shared/FormControlContext";
 import { IconWarningSolid } from "../icons/IconWarningSolid";
 

src/FormHelperText/index.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as typography from "../typography";
 import { colors } from "../colors";
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 import { IconInfo } from "../icons/IconInfo";
 import { useFormControlInternalContext } from "../shared/FormControlContext";
 

src/FormLabel/index.tsx

@@ -2,7 +2,7 @@
 /** @jsxFrag React.Fragment */
 import * as React from "react";
 import * as typography from "../typography";
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 import { useFormControlInternalContext } from "../shared/FormControlContext";
 
 interface Props

src/FormStartAdornment/index.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
 import * as React from "react";
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 import { useFormControlInternalContext } from "../shared/FormControlContext";
 
 /**

src/Input/index.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 import React from "react";
 import * as typography from "../typography";
 import { colors } from "../colors";

src/List/index.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from "react";
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 import { ListConfigProvider, useListConfig } from "../ListConfig";
 import { verticalListMarginFromPadding } from "../shared/verticalListMarginFromPadding";
 import { assertUnreachable } from "../shared/assertUnreachable";

src/ListDivider/index.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from "react";
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 import { colors } from "../colors";
 import { ListItem } from "../ListItem";
 import { useListConfig, ListConfigProvider } from "../ListConfig";

src/ListHeading/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-interface */
 /** @jsx jsx */
 import React from "react";
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 import { colors } from "../colors";
 import { ListItem } from "../ListItem";
 

src/ListItem/index.tsx

@@ -1,6 +1,6 @@
 import type { Property } from "csstype";
 import React from "react";
-import { ClassNames } from "@emotion/core";
+import { ClassNames } from "@emotion/react";
 import { assertUnreachable } from "../shared/assertUnreachable";
 import tinycolor from "tinycolor2";
 import { colors } from "../colors";

src/Loaders/LoadingSpinner.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from "react";
 import type { Property } from "csstype";
-import { jsx, keyframes } from "@emotion/core";
+import { jsx, keyframes } from "@emotion/react";
 import { colors } from "../colors";
 import { useSpaceKitProvider } from "../SpaceKitProvider";
 

src/Modal/Modal.story.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { storiesOf } from "@storybook/react";
-import { css, jsx } from "@emotion/core";
+import { css, jsx } from "@emotion/react";
 import { Modal } from "../Modal";
 import React, { useState } from "react";
 import { colors } from "../colors";

src/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, css, ClassNames } from "@emotion/core";
+import { jsx, css, ClassNames } from "@emotion/react";
 import React, { useEffect } from "react";
 import { motion, MotionProps } from "framer-motion";
 import * as typography from "../typography";

src/Popover/popover/TippyPopoverStyles.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 TippyPopoverStyles: React.FC = () => (
   <Global

src/Select/index.tsx

@@ -10,7 +10,7 @@ import { ListHeading } from "../ListHeading";
 import { ListDivider } from "../ListDivider";
 import { Popover } from "../Popover";
 import { useSelect, UseSelectPropGetters } from "downshift";
-import { ClassNames, jsx } from "@emotion/core";
+import { ClassNames, jsx } from "@emotion/react";
 import {
   reactNodeToDownshiftItems,
   isHTMLOptionElement,
@@ -37,7 +37,7 @@ interface RenderListItemProps {
    * Custom function to render each `ListItem`
    *
    * This is provided so you can render the `ListItem` on your own, with an `as`
-   * prop, for example, so you can render a `Link`. 
+   * prop, for example, so you can render a `Link`.
    *
    * The function will be called and it's return value rendered; this does not
    * use `React.createElement`, so an inline function is totally acceptable with

src/Switch/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ClassNames } from "@emotion/core";
+import { ClassNames } from "@emotion/react";
 import { ShadedColor, colors } from "../colors";
 import { useFocusRing } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";

src/Switch/switch.story/Wrapper.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Switch } from "../../Switch";
-import { ClassNames } from "@emotion/core";
+import { ClassNames } from "@emotion/react";
 import { colors } from "../../colors";
 import { mergeProps } from "@react-aria/utils";
 import { assertUnreachable } from "../../shared/assertUnreachable";

src/Switch/switch/Label.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ClassNames } from "@emotion/core";
+import { ClassNames } from "@emotion/react";
 
 type LabelProps = React.DetailedHTMLProps<
   React.LabelHTMLAttributes<HTMLLabelElement>,

src/Table/Table.spec.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { cleanup, render } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { Table } from "./Table";
-import { ClassNames } from "@emotion/core";
+import { ClassNames } from "@emotion/react";
 import { matchers } from "jest-emotion";
 import { colors } from "../colors";
 

src/Table/Table.stories.mdx

@@ -1,4 +1,4 @@
-import { ClassNames } from "@emotion/core";
+import { ClassNames } from "@emotion/react";
 import { colors } from "../colors";
 import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
 import { Table } from "./Table";

src/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { ClassNames } from "@emotion/core";
+import { ClassNames } from "@emotion/react";
 import React from "react";
 import * as typography from "../typography";
 import { colors } from "../colors";

src/TextField/TextField.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ClassNames, jsx } from "@emotion/core";
+import { ClassNames, jsx } from "@emotion/react";
 import React from "react";
 import * as typography from "../typography";
 import { colors } from "../colors";

src/emotionCacheProviderFactory/emotionCacheProviderFactory.spec.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import "@testing-library/jest-dom";
 import { emotionCacheProviderFactory } from "./index";
-import { jsx } from "@emotion/core";
+import { jsx } from "@emotion/react";
 import { render } from "@testing-library/react";
 
 test("when given no element, emotion should render classes into head", () => {

src/emotionCacheProviderFactory/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CacheProvider } from "@emotion/core";
+import { CacheProvider } from "@emotion/react";
 import createCache from "@emotion/cache";
 
 /**

src/icons/icons.story/IconDemo.tsx

@@ -1,6 +1,6 @@
 import * as typography from "../../typography";
 import React from "react";
-import { ClassNames } from "@emotion/core";
+import { ClassNames } from "@emotion/react";
 import { colors } from "../../colors";
 
 interface Props {

src/icons/scripts/convert.ts

@@ -215,8 +215,8 @@ function createCSSAttribute(css: string): types.JSXAttribute {
                   // manually when we write the file to disk.
                   return typeScriptTpl.ast`
                     ${imports}
-                    import { jsx, css } from '@emotion/core';
-                    
+                    import { jsx, css } from '@emotion/react';
+
                     interface Props extends Omit<React.SVGProps<SVGSVGElement>, "css"> {
                       /**
                        * Weight to render the SVG in. Defaults to "normal"

src/illustrations/scripts/convert.ts

@@ -186,7 +186,7 @@ All illustration components extends \`SVGSVGElement\` so that most props you'd w
 
             return typeScriptTpl.ast`
               ${imports}
-              import { jsx } from '@emotion/core';
+              import { jsx } from '@emotion/react';
 
               export const ${componentName} = React.forwardRef<SVGSVGElement, Omit<React.SVGProps<SVGSVGElement>, "css">>(
                 (props, ref) => ${jsx}