import React from 'react' ; import { useStyledSystemPropsResolver } from '../hooks/' ; export const makeStyledComponent = ( Comp ) => { return React . forwardRef ( ( { debug , ... props } , ref ) => { const [ style , restProps ] = useStyledSystemPropsResolver ( props ) ; if ( process . env . NODE_ENV === 'development' && debug ) { console . log ( `%cstyleSystem` , 'background: #4b5563; color: #d97706; font-weight: 700; padding: 2px 8px;' ) ; console . log ( '%c props: ' , 'color: #4ade80; font-weight: 700;' , props ) ; console . log ( '%c style: ' , 'color: #22d3ee; font-weight: 700;' , style ) ; console . log ( '%c restProps: ' , 'color: #22d3ee; font-weight: 700;' , restProps ) ; } return ( < Comp { ... restProps } style = { style } ref = { ref } > { props . children } < /Comp>); } ) ; } ;