import { styled } from "@stitches/react" ; import { ComponentProps } from "react" ; import ReactJson from "react-json-view" ; import { theme } from "~/stitches.config" ; export const Root = styled ( "div" , { "& *" : { fontFamily : "$sans !important" , opacity : "1 !important" , letterSpacing : "unset !important" , } , "& .icon-container" : { position : "relative" , top : "4px" , } , } ) ; type Props = ComponentProps < typeof ReactJson > ; export const Content = ( props ) => { return ( < ReactJson style = { { wordBreak : "break-word" , } } displayDataTypes = { false } theme = { { base00 : theme . colors . loContrast , base01 : "red" , base02 : theme . colors . border , base03 : "red" , base04 : theme . colors . hiContrast , base05 : "red" , base06 : "red" , base07 : theme . colors . hiContrast , base08 : "red" , base09 : theme . colors . green10 , base0A : theme . colors . hiContrast , base0B : theme . colors . hiContrast , base0C : "red" , base0D : theme . colors . hiContrast , base0E : theme . colors . hiContrast , base0F : theme . colors . hiContrast , } as any } collapsed { ... props } />); } ;