docs: update styled-components example to work without a wrapper

Before 2.2.1-alpha.1 SC components needed to be wrapped by a function or class components to be used with the Props components.

2.2.1-alpha.1 fixes it, this commit showcases sc working without a hack.

examples/styled-components/package.json

@@ -12,7 +12,7 @@
     "build": "docz build"
   },
   "dependencies": {
-    "docz": "latest",
+    "docz": "next",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

examples/styled-components/src/components/Alert.jsx

@@ -9,16 +9,14 @@ const kinds = {
   warning: '#FFA502',
 }
 
-const AlertStyled = styled('div')`
+export const Alert = styled('div')`
   padding: 15px 20px;
   background: white;
   border-radius: 3px;
   color: white;
   background: ${({ kind = 'info' }) => kinds[kind]};
 `
 
-export const Alert = props => <AlertStyled {...props} />
-
 Alert.propTypes = {
   kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
 }

examples/styled-components/src/components/Button.jsx

@@ -49,7 +49,7 @@ const kinds = outline => {
 const getScale = ({ scale = 'normal' }) => scales[scale]
 const getKind = ({ kind = 'primary', outline = false }) => kinds(outline)[kind]
 
-const ButtonStyled = styled('button')`
+export const Button = styled('button')`
   ${getKind};
   ${getScale};
   cursor: pointer;
@@ -58,10 +58,6 @@ const ButtonStyled = styled('button')`
   border-radius: 3px;
 `
 
-export const Button = ({ children, ...props }) => (
-  <ButtonStyled {...props}>{children}</ButtonStyled>
-)
-
 Button.propTypes = {
   scales: t.oneOf(['small', 'normal', 'big']),
   kind: t.oneOf(['primary', 'secondary', 'cancel', 'dark', 'gray']),