import * as React from 'react' ; import { useReducedMotion , Globals as AnimatedGlobals } from '@twilio-paste/animation-library' ; import { StylingGlobals , ThemeProvider as StyledThemeProvider } from '@twilio-paste/styling-library' ; import { pasteGlobalStyles , StyledBase , DefaultTheme , DarkTheme } from '@twilio-paste/theme' ; import { createCustomTheme } from './utils' ; import type { CustomizationProviderProps } from './types' ; param { * } return { * } const CustomizationProvider = ( { baseTheme = 'default' , customBreakpoints , elements , theme , disableAnimations = false , ... props } ) => { const customTheme = React . useMemo ( ( ) => createCustomTheme ( { baseTheme : baseTheme === 'dark' ? DarkTheme : DefaultTheme , overrides : theme || { } , elements : elements || { } , customBreakpoints , } ) , [ baseTheme , customBreakpoints , elements , theme ] ) ; const prefersReducedMotion = useReducedMotion ( ) ; React . useLayoutEffect ( ( ) => { AnimatedGlobals . assign ( { skipAnimation : disableAnimations || prefersReducedMotion , } ) ; } , [ disableAnimations , prefersReducedMotion ] ) ; return ( < StyledThemeProvider theme = { customTheme } > < StylingGlobals styles = { pasteGlobalStyles ( { theme : customTheme } ) } /> < StyledBase { ... props } /> < /StyledThemeProvider>); } ; export { CustomizationProvider } ;