Investigate Different Approach to nested ThemeProviders about es-components HOT 2 CLOSED

It is preferable to maintain our current approach of simply importing and dropping in components as needed without worrying about passing theme or wrapping our imports. Another approach that I'm leaning towards is the inverse where we wrap our exports with withTheme. In the example of button:

export default withTheme(Button);

This results in the following jsx body when rendered

<WithThemeButton>
  <Button>
    <ThemeProvider>
      { content }
    </ThemeProvider>
  </Button>
</WithThemeButton>

This approach maintains our ease of usability and styling and will respect all sources for theme in the following order

1. Use the theme prop, if provided
2. Will pull theme from the context provided by a parent ThemeProvider
3. Fallback to the theme provided by default props, if any

from es-components.

I really like this export approach, @aabenoja!

from es-components.