import React from 'react' ; import styled , { InterpolationFunction , StyledComponent , StyledComponentPropsWithRef , ThemedStyledInterface , ThemedStyledProps , } from 'styled-components' ; import getDefaultTheme , { Theme } from '../themes/default' ; import { Base16Theme } from 'base16' ; import { ThemeFromProvider } from './theme' ; type StyleFunction < C extends keyof JSX . IntrinsicElements | React . ComponentType < any > , O extends object = { } > = InterpolationFunction < ThemedStyledProps < StyledComponentPropsWithRef < C > & O , Theme > > ; interface StylesObject < C extends keyof JSX . IntrinsicElements | React . ComponentType < any > , O extends object = { } > { [ type ] : StyleFunction < C , O > ; } type Styles < C extends keyof JSX . IntrinsicElements | React . ComponentType < any > , O extends object = { } > = StylesObject < C , O > | StyleFunction < C , O > ; function isStylesObject < C extends keyof JSX . IntrinsicElements | React . ComponentType < any > , O extends object = { } > ( styles ) { return typeof styles === 'object' ; } const getStyle = < C extends keyof JSX . IntrinsicElements | React . ComponentType < any > , O extends object = { } > ( styles , type ) => ( isStylesObject ( styles ) ? styles [ type ] || styles . default : styles ) ; function isThemeFromProvider ( theme ) { return ( theme as ThemeFromProvider ) . type !== undefined ; } export default function createStyledComponent < C extends keyof JSX . IntrinsicElements | React . ComponentType < any > , O extends object = { } > ( styles , component ? ) { return ( styled as ThemedStyledInterface < Theme > ) ( ( component || 'div' ) as C ) `
    ${ ( props ) => isThemeFromProvider ( props . theme as Theme | Base16Theme ) ? getStyle ( styles , props . theme . type as string ) : getStyle ( styles , 'default' ) ( { ... props , theme : getDefaultTheme ( props . theme as Base16Theme ) , } ) }
  ` as StyledComponent < C , Theme | Base16Theme , O > ; }