Move deprecated component to package

Author: lachlanjc

packages/theme-provider/src/index.tsx

@@ -42,10 +42,37 @@ export interface ThemeProviderProps
   children?: React.ReactNode
 }
 
+export const ThemeUIProvider: React.FC<ThemeProviderProps> = ({
+  theme,
+  children,
+}) => {
+  const outer = useThemeUI()
+
+  const isTopLevel = outer === __themeUiDefaultContextValue
+
+  return (
+    <CoreProvider theme={theme}>
+      <ColorModeProvider>
+        {isTopLevel && <RootStyles />}
+        {children}
+      </ColorModeProvider>
+    </CoreProvider>
+  )
+}
+
+/** @deprecated ThemeProvider is now called ThemeUIProvider to reduce confusion with Emotion */
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   theme,
   children,
 }) => {
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        '[theme-ui] The export ThemeUIProvider is deprecated and is now called ThemeProvider to reduce confusion with Emotion. Please update your import; ThemeUIProvider will be removed in a future version.'
+      )
+    }
+  }, [])
+
   const outer = useThemeUI()
 
   const isTopLevel = outer === __themeUiDefaultContextValue

packages/theme-ui/src/index.ts

@@ -4,16 +4,13 @@ import {
   type ThemeUIStyleObject,
 } from '@theme-ui/core'
 import React from 'react'
-import {
-  ThemeProvider as BaseThemeProvider,
-  type ThemeProviderProps,
-} from '@theme-ui/theme-provider'
 export {
   __ThemeUIContext,
   merge,
   useThemeUI,
   createElement,
 } from '@theme-ui/core'
+export { ThemeProvider, ThemeUIProvider } from '@theme-ui/theme-provider'
 export type {
   ThemeUIContextValue,
   SxProp,
@@ -35,18 +32,6 @@ export { useColorMode, InitializeColorMode } from '@theme-ui/color-modes'
 export * from '@theme-ui/components'
 export { css, get } from '@theme-ui/css'
 
-/** @deprecated This export has been renamed ThemeUIProvider */
-export function ThemeProvider(
-  props: ThemeProviderProps
-): typeof BaseThemeProvider {
-  console.warn(
-    '[theme-ui] The export <ThemeProvider> is deprecated; it’s now called ThemeUIProvider to reduce confusion. Please update your imports.'
-  )
-  return React.createElement(BaseThemeProvider, props)
-}
-
-export { BaseThemeProvider as ThemeUIProvider }
-
 export const BaseStyles = (
   props: Record<string, unknown> & { sx?: ThemeUIStyleObject }
 ): JSX.Element =>