import type { MDXProviderComponents } from '@mdx-js/react' ; import * as React from 'react' ; import type { Context , CSSRules , Directive } from 'twind' ; import { css } from 'twind/css' ; import { TwindContext } from './internal' ; export type { MDXProviderComponents } from '@mdx-js/react' ; export { theme } from 'twind' ; export type CSSProperties = CSSRules [ string ] ; export type StyledIntrinsicFactories = { [ TIntrinsic in keyof React . ReactHTML ] : StyledHTML < TIntrinsic > ; } ; export interface StyledElements extends StyledIntrinsicFactories { < TIntrinsic extends keyof React . ReactHTML > ( elementType ) : StyledHTML < TIntrinsic > ; < T extends keyof React . ReactHTML > ( elementType , strings , ... interpolations ) : React . ReactHTML [ T ] ; < T extends keyof React . ReactHTML > ( elementType , tokens ) : React . ReactHTML [ T ] ; < T extends keyof React . ReactHTML > ( elementType , ... tokens ) : React . ReactHTML [ T ] ; < P extends { } = { } > ( component ) : StyledComponent < P > ; < P extends { } = { } > ( component , ... tokens ) : ( props : P ) => JSX . Element | null ; } type Falsy = '' | 0 | - 0 | false | null | undefined | void ; type MaybeArray < T > = T | readonly T [ ] ; type MaybeThunk < T > = T | ( ( context : Context ) => T ) ; interface StyledComponent < P extends { } = { } > { ( strings , ... interpolations ) : ( props : P ) => JSX . Element | null ; ( tokens ) : ( props : P ) => JSX . Element | null ; ( ... tokens ) : ( props : P ) => JSX . Element | null ; } interface StyledHTML < T extends keyof React . ReactHTML > { ( strings , ... interpolations ) : React . ReactHTML [ T ] ; ( tokens ) : React . ReactHTML [ T ] ; ( ... tokens ) : React . ReactHTML [ T ] ; } function styledComponent < P extends { } = { } > ( component , parentDirective ? ) { return function boundStyled ( ... args ) { const directive = css ( parentDirective , css ( ... args ) ) ; return function boundStyledElement ( props ? ) : any { return renderStyled ( component , props , directive ) ; } ; } ; } function styledHtml < T extends keyof React . ReactHTML > ( elementType , parentDirective ? ) { return function boundStyled ( ... args ) { const directive = css ( parentDirective , css ( ... args ) ) ; return function boundStyledElement ( props ? ) : any { return renderStyled ( elementType , props , directive ) ; } ; } ; } function renderStyled ( elementType , { className , ... props } = { } , directive ) { const tw = React . useContext ( TwindContext ) ; const styledClassName = tw ( directive ) ; return React . createElement ( elementType , { ... props , className : `${ className ? `${ className } ` : '' }${ styledClassName }` , } ) ; } export const styled = new Proxy ( renderStyled , { apply ( _target , _this , [ elementType , ... args ] ) { const directive = css ( ... args ) ; return typeof elementType === 'string' ? styledHtml ( elementType , directive ) : styledComponent ( elementType , directive ) ; } , get ( _t , elementType ) { return styledHtml ( elementType ) ; } , } ) ; export interface MDXProps extends React . PropsWithChildren < { components : MDXProviderComponents ; } > { }