Rethink packages structure

[hasparus]

When you get started with Theme UI, it's not trivial to know what feature is powered by what package, as most of the functionalities we provide are opt-out not opt-in. This has led to confusion many times.

• see https://github.com/system-ui/theme-ui/issues/2235

I think we should address it by looking at how people use Theme UI in production and redesigning how the features are split to match it.

Loose notes:

• Not everyone uses color modes.
• @theme-ui/components are often partially replaced not wrapped with an in-house components system.
  • We often advised using Reach UI, React Aria and Reakit
  • There were two issues asking how to use Theme UI with Material UI :)
• MDX 2 is fully ESM
  • https://github.com/system-ui/theme-ui/issues/2023
  • https://github.com/mdx-js/mdx/issues/1834#issuecomment-1033524487