Having @emotion/styled in my deps breaks all styling

Bug report

Describe the bug

If I have @emotion/styled in my dependencies - even if I don’t import it, I chakra-ui components have no stylings. Precisely, every styled-system props is kept as-is and ends-up in the css - and is obviously invalid.

To reproduce

start a project with the latest chakra-ui (tested with rc 5, 6 and 8) and latest @emotion-styled (10.0.27). Tested with CRA 4 and latest 3.x

Expected behavior

I should be able to use @emotion/styled in my project alongside chakra-ui

Screenshots

see https://github.com/chakra-ui/chakra-ui/discussions/2409

System information

• OS: ubuntu
• Browser (if applies):Chrome
• Version of @chakra-ui/core: rc 5, 6 and 8
• Version of Node.js: 12 something

Additional context

[olup]

I feel this issue is going slightly off-topic. Chakra-ui is a very customizable ui-kit based on emotion and styled-system. It’s not a styling library. If at any given time the use of Chakra is preventing user from using emotion or emotion-styled, this is an issue and should be fixed. A user should be able to use whatever css-in-js solution he wants to use, from Radium to Stitches or Styled-components, alongside chakra-ui. I’d rather have emotion as peer-dep with a hard version number if needed, or the compatible version clearly stated in the doc maybe ?

@ljosberinn on a side note, Table would be pretty neat !

[JonMontgo]

Here’s a code pen I made with an example of this bug https://codesandbox.io/s/homepage-forked-5l6hj