import { StyledComponent , DefaultTheme } from 'styled-components' ; import { scStyled } from './scStyled' ; import { StyleGenerator , StyleGeneratorProps } from '@xstyled/system' ; import { createBaseStyled } from './createStyled' ; import { createCssFunction } from './createCssFunction' ; type JSXElementKeys = keyof JSX . IntrinsicElements ; type SafeIntrinsicElement < T extends keyof JSX . IntrinsicElements > = ( props : Omit < JSX . IntrinsicElements [ T ] , 'color' > ) => React . ReactElement < any , T > ; export type X < TGen extends StyleGenerator > = { [ Key in JSXElementKeys ] : StyledComponent < SafeIntrinsicElement < Key > , DefaultTheme , StyleGeneratorProps < TGen > , 'color' > ; } ; export const createX = < TGen extends StyleGenerator > ( generator ) : X < TGen > => { const xstyled = createBaseStyled ( createCssFunction ( generator ) , generator ) ; const x = { } as X < TGen > ; Object . keys ( scStyled ) . forEach ( ( tag ) => { x [ tag ] = xstyled ( tag ) `` ; } ) ; return x ; } ;