diff --git a/examples/styled-components/package.json b/examples/styled-components/package.json
index 7bff81380..9646aff3d 100644
--- a/examples/styled-components/package.json
+++ b/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",
diff --git a/examples/styled-components/src/components/Alert.jsx b/examples/styled-components/src/components/Alert.jsx
index 644e5832c..bbd74da83 100644
--- a/examples/styled-components/src/components/Alert.jsx
+++ b/examples/styled-components/src/components/Alert.jsx
@@ -9,7 +9,7 @@ const kinds = {
warning: '#FFA502',
}
-const AlertStyled = styled('div')`
+export const Alert = styled('div')`
padding: 15px 20px;
background: white;
border-radius: 3px;
@@ -17,8 +17,6 @@ const AlertStyled = styled('div')`
background: ${({ kind = 'info' }) => kinds[kind]};
`
-export const Alert = props =>
-
Alert.propTypes = {
kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
}
diff --git a/examples/styled-components/src/components/Button.jsx b/examples/styled-components/src/components/Button.jsx
index b89a5342c..3b3ef2c2c 100644
--- a/examples/styled-components/src/components/Button.jsx
+++ b/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 }) => (
- {children}
-)
-
Button.propTypes = {
scales: t.oneOf(['small', 'normal', 'big']),
kind: t.oneOf(['primary', 'secondary', 'cancel', 'dark', 'gray']),