import React , { useCallback } from "react" ; import { ThemeContext } from "./context" ; import { asCustomProps , reduceTheme } from "./utils" ; import type { Theme , PartialTheme } from "./context" ; import type { ReactElement } from "react" ; interface ThemeProviderProps { /**
     * The theme overrides to apply to children
     */ theme : PartialTheme ; /**
     * Children affected by the theme overrides
     */ children : ReactElement | ReactElement [ ] ; default as ? : "span" | "div" ; } /**
 * A provider component for overriding theme values.
 */ export const ThemeProvider = ( props ) : ReactElement => { const { as : Tag = "span" , theme , children } = props ; const themeConsumer = useCallback ( ( prevTheme ) => ( < Tag style = { asCustomProps ( theme ) } > < ThemeContext . Provider value = { reduceTheme ( prevTheme , theme ) } children = { children } / > < /Tag>), [children, Tag, theme]); return < ThemeContext . Consumer children = { themeConsumer } />; } ;