Merge pull request #51 from jasonrundell/issue/45-fix-parcel-build-for-emotion

Change emotion import

Author: jasonrundell

package.json

@@ -63,17 +63,19 @@
     "webpack-cli": "^5.0.1"
   },
   "dependencies": {
+    "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6"
+    "@emotion/styled": "^11.10.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "bugs": {
     "url": "https://github.com/jasonrundell/dropship/issues"

src/stories/atoms/Article/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/react'
+import { css } from '@emotion/css'
 
 export const Article = ({ id, classNames, children }) => {
   const style = css`

src/stories/atoms/Avatar/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/react'
+import { css } from '@emotion/css'
 
 import { Icon } from '../Icon'
 import { sizes, sizeKeys } from '../../../shared/sizes'

src/stories/atoms/Box/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/react'
+import { css } from '@emotion/css'
 
 export const Box = ({ isTight, isRoomy, classNames, children }) => {
   const style = css`

src/stories/atoms/Button/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/react'
+import { css } from '@emotion/css'
 
 export const Button = ({ size, label, onClick, classNames }) => {
   const style = css`

src/stories/atoms/Container/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/react'
+import { css } from '@emotion/css'
 
 export const Container = ({ id, classNames, children }) => {
   const style = css`

src/stories/atoms/Heading/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/react'
+import { css } from '@emotion/css'
 
 import { sizes } from '../../../shared/sizes'
 

src/stories/atoms/Icon/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/react'
+import { css } from '@emotion/css'
 import { icons } from '../../../shared/icons'
 
 /**

src/stories/atoms/Link/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/react'
+import { css } from '@emotion/css'
 
 export const Link = ({ href, label, onClick, target, rel, classNames }) => {
   const style = css`

src/stories/atoms/Paragraph/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/react'
+import { css } from '@emotion/css'
 
 export const Paragraph = ({ classNames, children }) => {
   const style = css`