Run "yarn lint:fix" to apply Emotion 11 codemod fixes

babel.config.js

@@ -1,4 +1,6 @@
 /**
+ * Babel configuration for Next.js
+ *
  * @see https://nextjs.org/docs/advanced-features/customizing-babel-config Official doc reference v10
  * @see https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts You can take a look at this file to learn about the presets included by next/babel.
  * @see https://emotion.sh/docs/css-prop##babel-preset Configuring Emotion 11

src/components/ComponentTemplate.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
 
 import Text from './utils/Text';

src/components/animations/Loader.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
 
 import AnimatedLoader from '../svg/AnimatedLoader';

src/components/appBootstrap/BrowserPageBootstrap.tsx

@@ -5,7 +5,7 @@ import {
 import * as Sentry from '@sentry/node';
 import { createLogger } from '@unly/utils-simple-logger';
 import { AmplitudeClient } from 'amplitude-js';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import useCustomer from '../../hooks/useCustomer';

src/components/appBootstrap/MultiversalAppBootstrap.tsx

@@ -1,7 +1,7 @@
 import * as Sentry from '@sentry/node';
 import { isBrowser } from '@unly/utils';
 import { createLogger } from '@unly/utils-simple-logger';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from '@emotion/react';
 import { i18n } from 'i18next';
 import find from 'lodash.find';
 import includes from 'lodash.includes';

src/components/appBootstrap/MultiversalGlobalStyles.tsx

@@ -1,7 +1,7 @@
 import {
   css,
   Global,
-} from '@emotion/core';
+} from '@emotion/react';
 import React from 'react';
 import { NRN_DEFAULT_FALLBACK_FONTS } from '../../constants';
 import { CustomerTheme } from '../../types/data/CustomerTheme';

src/components/data/ProductRow.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
 import {
   Col,

src/components/data/Products.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import map from 'lodash.map';
 import React from 'react';
 import { Container } from 'reactstrap';

src/components/doc/DocPage.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 
 type Props = {

src/components/doc/DocSection.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 
 type Props = {

src/components/doc/IntroductionSection.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
 import {
   Alert,

src/components/doc/SidebarFooter.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

src/components/doc/SidebarToggle.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 

src/components/errors/DefaultErrorLayout.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import * as Sentry from '@sentry/node';
 import * as React from 'react';
 import { Button } from 'reactstrap';

src/components/errors/ErrorDebug.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import * as React from 'react';
 import { Fragment } from 'react';
 

src/components/pageLayouts/DefaultPageContainer.tsx

@@ -1,6 +1,6 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import { Container } from 'reactstrap';
 

src/components/pageLayouts/Footer.tsx

@@ -1,5 +1,5 @@
-import { css } from '@emotion/core';
-import { useTheme } from 'emotion-theming';
+import { css } from '@emotion/react';
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 

src/components/pageLayouts/Nav.tsx

@@ -1,8 +1,8 @@
 import { Amplitude } from '@amplitude/react-amplitude';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import kebabCase from 'lodash.kebabcase';
 import map from 'lodash.map';
 import {

src/components/pageLayouts/PreviewModeBanner.tsx

@@ -1,6 +1,6 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import {
   NextRouter,
   useRouter,

src/components/pageLayouts/QuickPreviewBanner.tsx

@@ -1,7 +1,7 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createLogger } from '@unly/utils-simple-logger';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import {
   NextRouter,
   useRouter,

src/components/pageLayouts/QuickPreviewLayout.tsx

@@ -2,7 +2,7 @@ import {
   Amplitude,
   LogOnMount,
 } from '@amplitude/react-amplitude';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { createLogger } from '@unly/utils-simple-logger';
 import React from 'react';
 import { Container } from 'reactstrap';

src/components/utils/Btn.tsx

@@ -1,6 +1,6 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import React, { ReactNode } from 'react';
 import { CustomerTheme } from '../../types/data/CustomerTheme';
 import { ReactButtonProps } from '../../types/react/ReactButtonProps';

src/components/utils/Buttons.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React, { Fragment } from 'react';
 import { Row } from 'reactstrap';
 import Btn from './Btn';

src/components/utils/Cards.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import classnames from 'classnames';
 import React, { ReactNode } from 'react';
 import { CardDeck } from 'reactstrap';

src/components/utils/CircleBtn.tsx

@@ -1,5 +1,5 @@
-import { css } from '@emotion/core';
-import { useTheme } from 'emotion-theming';
+import { css } from '@emotion/react';
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import { CustomerTheme } from '../../types/data/CustomerTheme';
 import { ReactDivProps } from '../../types/react/ReactDivProps';

src/components/utils/EllipsisText.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 
 type Props = {

src/components/utils/LanguageSelector.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
 
 type Props = {}

src/components/utils/LegalContent.tsx

@@ -1,5 +1,5 @@
-import { css } from '@emotion/core';
-import { useTheme } from 'emotion-theming';
+import { css } from '@emotion/react';
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import { Container } from 'reactstrap';
 import { CustomerTheme } from '../../types/data/CustomerTheme';

src/components/utils/Stamp.tsx

@@ -1,5 +1,5 @@
-import { css } from '@emotion/core';
-import { useTheme } from 'emotion-theming';
+import { css } from '@emotion/react';
+import { useTheme } from '@emotion/react';
 import React, { ReactNode } from 'react';
 import { CustomerTheme } from '../../types/data/CustomerTheme';
 

src/components/utils/ToggleButton.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
 
 type Props = {

src/pages/404.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createLogger } from '@unly/utils-simple-logger';
 import {

src/pages/[locale]/examples/built-in-features/analytics.tsx

@@ -1,5 +1,5 @@
 import { Amplitude } from '@amplitude/react-amplitude';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,

src/pages/[locale]/examples/built-in-features/static-i18n.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,

src/pages/[locale]/examples/built-in-utilities/api.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,

src/pages/[locale]/examples/built-in-utilities/hocs.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,

src/pages/[locale]/examples/built-in-utilities/hooks.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,

src/pages/[locale]/examples/native-features/example-with-ssg-and-fallback/[albumId].tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { createLogger } from '@unly/utils-simple-logger';
 import deepmerge from 'deepmerge';
 import map from 'lodash.map';