Import change

src/stories/atoms/Article/index.jsx

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

src/stories/atoms/Row/index.jsx

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

src/stories/atoms/Section/index.jsx

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

src/stories/atoms/Spacer/Spacer.stories.mdx

@@ -222,6 +222,8 @@ export const Template = (args) => <Spacer {...args} />
 
 Experiment with this story with the Controls addon in the Canvas tab.
 
+{/* https://storybook.js.org/docs/react/api/mdx#play-function */}
+
 <Canvas>
   <Story
     name="controls"
@@ -231,9 +233,9 @@ Experiment with this story with the Controls addon in the Canvas tab.
       mediumScreen: 'small',
       largeScreen: 'small'
     }}
-    // https://storybook.js.org/docs/react/api/mdx#play-function
     play={async ({ canvasElement }) => {
       const expectedHeight = sizes.small * 16
+      console.log(expectedHeight)
       const theElement = canvasElement.querySelector('[aria-hidden="true"]')
       await expect(theElement).not.toBeNull()
       await expect(theElement.clientHeight).toEqual(expectedHeight)

src/stories/atoms/Spacer/index.jsx

@@ -1,14 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 import { sizes, sizeKeys } from '../../../shared/sizes'
 import { breakpoints } from '../../../shared/breakpoints'
 
 export const Spacer = ({ smallScreen, mediumScreen, largeScreen }) => {
   const style = css`
     display: block;
-    background-color: pink;
     height: ${sizes[smallScreen] ?? sizes.normal}rem;
 
     @media (min-width: ${breakpoints.medium}rem) {
@@ -19,7 +18,7 @@ export const Spacer = ({ smallScreen, mediumScreen, largeScreen }) => {
       height: ${sizes[largeScreen] ?? sizes.normal}rem;
     }
   `
-
+  console.log(style)
   return <div css={style} aria-hidden="true" />
 }
 

src/stories/atoms/Strong/index.jsx

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

src/stories/organisms/Header/index.jsx

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