fix: emotion css prop

.babelrc

@@ -0,0 +1,16 @@
+{
+    "presets": [
+        [
+            "next/babel",
+            {
+                "preset-react": {
+                    "runtime": "automatic",
+                    "importSource": "@emotion/react"
+                }
+            }
+        ]
+    ],
+    "plugins": [
+        "@emotion/babel-plugin"
+    ]
+}

package.json

@@ -37,10 +37,10 @@
   },
   "dependencies": {
     "@artsy/fresnel": "1.5.0",
-    "@emotion/babel-preset-css-prop": "10.2.1",
+    "@emotion/babel-plugin": "11.3.0",
     "@emotion/is-prop-valid": "0.8.8",
     "@emotion/react": "11.4.0",
-    "@emotion/styled": "10.0.27",
+    "@emotion/styled": "11.3.0",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "5.15.3",
     "@fortawesome/free-regular-svg-icons": "5.15.3",

src/Auth.tsx

@@ -80,7 +80,7 @@ const AuthProvider = ({ children }) => {
           JSON.stringify(authResult.idTokenPayload[permissionsKey])
         );
 
-        resolve();
+        resolve(true);
       });
     });
 

src/components/Box/Box.tsx

@@ -11,12 +11,13 @@ import {
 import { createPropTypes } from '@styled-system/prop-types';
 
 // https://styled-system.com/guides/build-a-box
-const Box = styled.div`
-  ${compose(space, color, layout, flexbox, position, border)}
+const Box = styled.div(compose(space, color, layout, flexbox, position, border))
 
-  // ensures the Box can shrink below its minimum content size when used as a flex item
-  min-width: 0;
-`;
+// `
+
+//   // ensures the Box can shrink below its minimum content size when used as a flex item
+//   min-width: 0;
+// `;
 
 Box.propTypes = {
   ...createPropTypes(space.propNames),

src/components/Header/MainMenu.tsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import NavLink from 'next/link';
 import {useRouter} from 'next/router';
 import styled from '@emotion/styled';
-
 import Box from '../Box';
 import Text from '../Text';
 import { Media } from '../Media';
@@ -42,8 +41,7 @@ const MainMenu = ({
       fontWeight="bold"
       textAlign={['center', 'left']}
       css={{
-        // fill container on mobile
-        height: '100%',
+        height: '100%'
       }}
     >
       <Box

src/components/LooMap/AccessibilityIntersection.ts → src/components/LooMap/AccessibilityIntersection.tsx

@@ -42,7 +42,7 @@ const AccessibilityIntersection = ({
     };
   }, [onSelection]);
 
-  return <Rectangle ref={rectangleRef} {...props} />;
+  return <Rectangle bounds={null} ref={rectangleRef} {...props}></Rectangle>;
 };
 
 AccessibilityIntersection.propTypes = {

src/components/Text/Text.tsx

@@ -1,15 +1,13 @@
 import styled from '@emotion/styled';
-import { compose, color, typography } from 'styled-system';
-import { createPropTypes } from '@styled-system/prop-types';
+import { compose, ColorProps, TypographyProps, color,typography, HeightProps, height } from 'styled-system';
 
-const Text = styled.div`
-  ${compose(color, typography)}
-`;
+interface ITextProps extends ColorProps, TypographyProps, HeightProps {
+  children: React.ReactNode;
+}
 
-Text.propTypes = {
-  ...createPropTypes(color.propNames),
-  ...createPropTypes(typography.propNames),
-};
+const Text = styled.div<ITextProps>(
+  compose(color, typography, height)
+);
 
 /** @component */
 export default Text;

src/globalStyles.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Global, css } from '@emotion/core';
+import { Global, css } from '@emotion/react';
 
 import theme from './theme';
 

tsconfig.json

@@ -16,7 +16,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "jsxImportSource": "@emotion/react"
   },
   "include": [
     "next-env.d.ts",
@@ -25,5 +26,5 @@
   ],
   "exclude": [
     "node_modules"
-  ]
+  ],
 }