How to use the react-styleguidist/lib/client/rsg-components/Styled function in react-styleguidist

)}
    
  );
}

StyleGuideRenderer.propTypes = {
  classes: PropTypes.object.isRequired,
  title: PropTypes.string.isRequired,
  homepageUrl: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  toc: PropTypes.node.isRequired,
  hasSidebar: PropTypes.bool
};

export default Styled(styles)(StyleGuideRenderer);

export function LinkRenderer({ classes, children, ...props }) {
    return (
        <a>
            {children}
        </a>
    );
}

LinkRenderer.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    classes: PropTypes.object.isRequired,
};

export default Styled(styles)(LinkRenderer);

tabBody: PropTypes.node,
    description: PropTypes.node,
    docs: PropTypes.node,
    examples: PropTypes.node,
};

ReactComponentRenderer.defaultProps = {
    pathLine: '',
    tabButtons: null,
    tabBody: null,
    description: null,
    docs: null,
    examples: null,
};

export default Styled(styles)(ReactComponentRenderer);

{children}
                
            
        
    );
}

TableOfContentsRenderer.propTypes = {
    classes: PropTypes.object.isRequired,
    children: PropTypes.node,
    searchTerm: PropTypes.string.isRequired,
    onSearchTermChange: PropTypes.func.isRequired,
};

export default Styled(styles)(TableOfContentsRenderer);

export function LogoRenderer({ classes, children }) {
    return (
        <h1>
            
                {children}
            
        </h1>
    );
}

LogoRenderer.propTypes = {
    classes: PropTypes.object.isRequired,
    children: PropTypes.node.isRequired,
};

export default Styled(styles)(LogoRenderer);

const Tag = semantic || 'div';

    return {children};
}

ParaRenderer.propTypes = {
    classes: PropTypes.object.isRequired,
    semantic: PropTypes.oneOf(['', 'p']),
    children: PropTypes.node.isRequired,
};

ParaRenderer.defaultProps = {
    semantic: '',
};

export default Styled(styles)(ParaRenderer);

classes: PropTypes.object.isRequired,
    children: PropTypes.node,
    toolbar: PropTypes.node,
    id: PropTypes.string.isRequired,
    href: PropTypes.string.isRequired,
    depth: PropTypes.number.isRequired,
    deprecated: PropTypes.bool,
};

SectionHeadingRenderer.defaultProps = {
    children: null,
    toolbar: null,
    deprecated: false,
};

export default Styled(styles)(SectionHeadingRenderer);

{children}
        
    );
}

HeadingRenderer.propTypes = {
    classes: PropTypes.object.isRequired,
    level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
    children: PropTypes.node,
};

HeadingRenderer.defaultProps = {
    children: null,
};

export default Styled(styles)(HeadingRenderer);

);
  }
}

PlaygroundRenderer.propTypes = {
  classes: PropTypes.object.isRequired,
  name: PropTypes.string.isRequired,
  preview: PropTypes.node.isRequired,
  previewProps: PropTypes.object.isRequired,
  tabButtons: PropTypes.node.isRequired,
  tabBody: PropTypes.node.isRequired,
  toolbar: PropTypes.node.isRequired
};

export default Styled(styles)(PlaygroundRenderer);

{isOpen[visibleName] && content}
                    
                );
            })}
        
    );
};

ComponentsListRenderer.propTypes = {
    classes: PropTypes.object.isRequired,
    items: PropTypes.array.isRequired,
};

export default Styled(styles)(ComponentsListRenderer);