diff --git a/package.json b/package.json
index f8c36406..f027d496 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "@storybook/addon-knobs": "^3.2.0",
     "@storybook/addon-options": "^3.2.4",
     "@storybook/react": "^3.2.4",
-    "babel-cli": "^6.8.0",
+    "babel-cli": "^6.10.4",
     "babel-core": "^6.10.4",
     "babel-jest": "^20.0.3",
     "babel-loader": "^6.2.1",
@@ -72,6 +72,7 @@
     "babel-register": "^6.5.2",
     "chai": "^3.3.0",
     "chai-spies": "^0.7.1",
+    "chalk": "^2.4.2",
     "css-loader": "^0.24.0",
     "enzyme": "2.8.2",
     "event-stream": "^3.3.1",
@@ -87,13 +88,13 @@
     "normalize.css": "^4.1.1",
     "npm": "^5.3.0",
     "object-assign": "^4.1.0",
-    "react": "^15.3.2",
-    "react-addons-test-utils": "^0.14.0 || ^15.0.0",
+    "react": "^15.5.4",
+    "react-addons-test-utils": "15.6.2",
     "react-context": "0.0.3",
-    "react-dom": "^0.14.0 || ^15.0.0",
+    "react-dom": "^15.5.4",
     "react-hot-loader": "^1.2.8",
     "react-mark": "0.0.4",
-    "react-test-renderer": "^15.3.2",
+    "react-test-renderer": "^15.5.4",
     "remarkable": "^1.6.0",
     "require-dir": "^0.3.0",
     "rimraf": "^2.5.0",
@@ -102,6 +103,9 @@
     "webpack": "^1.11.0",
     "webpack-dev-server": "^1.10.1"
   },
+  "overrides": {
+    "chalk": "^2.4.2"
+  },
   "files": [
     "lib",
     "es"
diff --git a/src/components/alpha/Alpha.js b/src/components/alpha/Alpha.js
index 97aca7ee..29bc7d54 100644
--- a/src/components/alpha/Alpha.js
+++ b/src/components/alpha/Alpha.js
@@ -4,8 +4,18 @@ import reactCSS from 'reactcss'
 import { ColorWrap, Alpha } from '../common'
 import AlphaPointer from './AlphaPointer'
 
-export const AlphaPicker = ({ rgb, hsl, width, height, onChange, direction, style,
-  renderers, pointer, className = '' }) => {
+export const AlphaPicker = ({ 
+  rgb, 
+  hsl, 
+  width = '316px', 
+  height = '16px', 
+  onChange, 
+  direction = 'horizontal', 
+  style,
+  renderers, 
+  pointer = AlphaPointer, 
+  className = '' 
+}) => {
   const styles = reactCSS({
     'default': {
       picker: {
@@ -35,11 +45,4 @@ export const AlphaPicker = ({ rgb, hsl, width, height, onChange, direction, styl
   )
 }
 
-AlphaPicker.defaultProps = {
-  width: '316px',
-  height: '16px',
-  direction: 'horizontal',
-  pointer: AlphaPointer,
-}
-
 export default ColorWrap(AlphaPicker)
diff --git a/src/components/block/Block.js b/src/components/block/Block.js
index fd8d7f6c..bd7dd12d 100644
--- a/src/components/block/Block.js
+++ b/src/components/block/Block.js
@@ -7,8 +7,17 @@ import * as color from '../../helpers/color'
 import { ColorWrap, EditableInput, Checkboard } from '../common'
 import BlockSwatches from './BlockSwatches'
 
-export const Block = ({ onChange, onSwatchHover, hex, colors, width, triangle,
-  styles: passedStyles = {}, className = '' }) => {
+export const Block = ({
+  onChange,
+  onSwatchHover,
+  hex,
+  colors = ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555',
+  '#dce775', '#ff8a65', '#ba68c8'],
+  width = 170,
+  triangle = 'top',
+  styles: passedStyles = {},
+  className = ''
+}) => {
   const transparent = hex === 'transparent'
   const handleChange = (hexCode, e) => {
     color.isValidHex(hexCode) && onChange({
@@ -106,12 +115,4 @@ Block.propTypes = {
   styles: PropTypes.object,
 }
 
-Block.defaultProps = {
-  width: 170,
-  colors: ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555',
-    '#dce775', '#ff8a65', '#ba68c8'],
-  triangle: 'top',
-  styles: {},
-}
-
 export default ColorWrap(Block)
diff --git a/src/components/chrome/Chrome.js b/src/components/chrome/Chrome.js
index 8f2e651b..6fbd00c0 100644
--- a/src/components/chrome/Chrome.js
+++ b/src/components/chrome/Chrome.js
@@ -8,8 +8,19 @@ import ChromeFields from './ChromeFields'
 import ChromePointer from './ChromePointer'
 import ChromePointerCircle from './ChromePointerCircle'
 
-export const Chrome = ({ width, onChange, disableAlpha, rgb, hsl, hsv, hex, renderers,
-  styles: passedStyles = {}, className = '', defaultView }) => {
+export const Chrome = ({
+  width = 225,
+  onChange,
+  disableAlpha = false,
+  rgb,
+  hsl,
+  hsv,
+  hex,
+  renderers,
+  styles: passedStyles = {},
+  className = '',
+  defaultView
+}) => {
   const styles = reactCSS(merge({
     'default': {
       picker: {
@@ -155,10 +166,4 @@ Chrome.propTypes = {
   ]),
 }
 
-Chrome.defaultProps = {
-  width: 225,
-  disableAlpha: false,
-  styles: {},
-}
-
 export default ColorWrap(Chrome)
diff --git a/src/components/circle/Circle.js b/src/components/circle/Circle.js
index 58e0b6ba..438de54a 100644
--- a/src/components/circle/Circle.js
+++ b/src/components/circle/Circle.js
@@ -8,8 +8,23 @@ import * as material from 'material-colors'
 import { ColorWrap } from '../common'
 import CircleSwatch from './CircleSwatch'
 
-export const Circle = ({ width, onChange, onSwatchHover, colors, hex, circleSize,
-  styles: passedStyles = {}, circleSpacing, className = '' }) => {
+export const Circle = ({
+  width = 252,
+  onChange,
+  onSwatchHover,
+  colors = [
+    material.red['500'], material.pink['500'], material.purple['500'],
+    material.deepPurple['500'], material.indigo['500'], material.blue['500'],
+    material.lightBlue['500'], material.cyan['500'], material.teal['500'],
+    material.green['500'], material.lightGreen['500'], material.lime['500'],
+    material.yellow['500'], material.amber['500'], material.orange['500'],
+    material.deepOrange['500'], material.brown['500'], material.blueGrey['500']],
+  hex,
+  circleSize = 28,
+  styles: passedStyles = {},
+  circleSpacing = 14,
+  className = ''
+}) => {
   const styles = reactCSS(merge({
     'default': {
       card: {
@@ -48,17 +63,4 @@ Circle.propTypes = {
   styles: PropTypes.object,
 }
 
-Circle.defaultProps = {
-  width: 252,
-  circleSize: 28,
-  circleSpacing: 14,
-  colors: [material.red['500'], material.pink['500'], material.purple['500'],
-    material.deepPurple['500'], material.indigo['500'], material.blue['500'],
-    material.lightBlue['500'], material.cyan['500'], material.teal['500'],
-    material.green['500'], material.lightGreen['500'], material.lime['500'],
-    material.yellow['500'], material.amber['500'], material.orange['500'],
-    material.deepOrange['500'], material.brown['500'], material.blueGrey['500']],
-  styles: {},
-}
-
 export default ColorWrap(Circle)
diff --git a/src/components/circle/CircleSwatch.js b/src/components/circle/CircleSwatch.js
index 24e19305..69f8ede9 100644
--- a/src/components/circle/CircleSwatch.js
+++ b/src/components/circle/CircleSwatch.js
@@ -3,8 +3,15 @@ import reactCSS, { handleHover } from 'reactcss'
 
 import { Swatch } from '../common'
 
-export const CircleSwatch = ({ color, onClick, onSwatchHover, hover, active,
-  circleSize, circleSpacing }) => {
+export const CircleSwatch = ({ 
+  color, 
+  onClick, 
+  onSwatchHover, 
+  hover, 
+  active,
+  circleSize = 28, 
+  circleSpacing = 14 
+}) => {
   const styles = reactCSS({
     'default': {
       swatch: {
@@ -47,9 +54,4 @@ export const CircleSwatch = ({ color, onClick, onSwatchHover, hover, active,
   )
 }
 
-CircleSwatch.defaultProps = {
-  circleSize: 28,
-  circleSpacing: 14,
-}
-
 export default handleHover(CircleSwatch)
diff --git a/src/components/common/Checkboard.js b/src/components/common/Checkboard.js
index cfdf1000..13af893a 100644
--- a/src/components/common/Checkboard.js
+++ b/src/components/common/Checkboard.js
@@ -2,7 +2,14 @@ import React, { isValidElement } from 'react'
 import reactCSS from 'reactcss'
 import * as checkboard from '../../helpers/checkboard'
 
-export const Checkboard = ({ white, grey, size, renderers, borderRadius, boxShadow, children }) => {
+export const Checkboard = ({
+  white = 'transparent',
+  grey = 'rgba(0,0,0,.08)',
+  size = 8, 
+  renderers = {},
+  borderRadius,
+  boxShadow,
+  children }) => {
   const styles = reactCSS({
     'default': {
       grid: {
@@ -16,11 +23,4 @@ export const Checkboard = ({ white, grey, size, renderers, borderRadius, boxShad
   return isValidElement(children)?React.cloneElement(children, { ...children.props, style: {...children.props.style,...styles.grid}}):<div style={styles.grid}/>;
 }
 
-Checkboard.defaultProps = {
-  size: 8,
-  white: 'transparent',
-  grey: 'rgba(0,0,0,.08)',
-  renderers: {},
-}
-
 export default Checkboard
diff --git a/src/components/common/ColorWrap.js b/src/components/common/ColorWrap.js
index a2c262e8..e412fdab 100644
--- a/src/components/common/ColorWrap.js
+++ b/src/components/common/ColorWrap.js
@@ -62,7 +62,6 @@ export const ColorWrap = (Picker) => {
   }
 
   ColorPicker.defaultProps = {
-    ...Picker.defaultProps,
     color: {
       h: 250,
       s: 0.50,
diff --git a/src/components/common/Raised.js b/src/components/common/Raised.js
index cd0d4f42..3e3ca6a3 100644
--- a/src/components/common/Raised.js
+++ b/src/components/common/Raised.js
@@ -3,8 +3,13 @@ import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
 import merge from 'lodash/merge'
 
-export const Raised = ({ zDepth, radius, background, children,
-  styles: passedStyles = {} }) => {
+export const Raised = ({ 
+  zDepth = 1, 
+  radius = 2, 
+  background = '#fff', 
+  children,
+  styles: passedStyles = {} 
+}) => {
   const styles = reactCSS(merge({
     'default': {
       wrap: {
@@ -81,11 +86,4 @@ Raised.propTypes = {
   styles: PropTypes.object,
 }
 
-Raised.defaultProps = {
-  background: '#fff',
-  zDepth: 1,
-  radius: 2,
-  styles: {},
-}
-
 export default Raised
diff --git a/src/components/compact/Compact.js b/src/components/compact/Compact.js
index bbdaceed..b35f2f87 100644
--- a/src/components/compact/Compact.js
+++ b/src/components/compact/Compact.js
@@ -9,8 +9,21 @@ import { ColorWrap, Raised } from '../common'
 import CompactColor from './CompactColor'
 import CompactFields from './CompactFields'
 
-export const Compact = ({ onChange, onSwatchHover, colors, hex, rgb,
-  styles: passedStyles = {}, className = '' }) => {
+export const Compact = ({
+  onChange,
+  onSwatchHover,
+  colors = ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00',
+    '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF',
+    '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400',
+    '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF',
+    '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00',
+    '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E',
+  ],
+  hex,
+  rgb,
+  styles: passedStyles = {},
+  className = ''
+}) => {
   const styles = reactCSS(merge({
     'default': {
       Compact: {
@@ -66,15 +79,4 @@ Compact.propTypes = {
   styles: PropTypes.object,
 }
 
-Compact.defaultProps = {
-  colors: ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00',
-    '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF',
-    '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400',
-    '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF',
-    '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00',
-    '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E',
-  ],
-  styles: {},
-}
-
 export default ColorWrap(Compact)
diff --git a/src/components/github/Github.js b/src/components/github/Github.js
index 07ec0ce6..19aa68fd 100644
--- a/src/components/github/Github.js
+++ b/src/components/github/Github.js
@@ -7,8 +7,16 @@ import merge from 'lodash/merge'
 import { ColorWrap } from '../common'
 import GithubSwatch from './GithubSwatch'
 
-export const Github = ({ width, colors, onChange, onSwatchHover, triangle,
-  styles: passedStyles = {}, className = '' }) => {
+export const Github = ({
+  width = 200,
+  colors = ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB',
+    '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'],
+  onChange,
+  onSwatchHover,
+  triangle = 'top-left',
+  styles: passedStyles = {},
+  className = ''
+}) => {
   const styles = reactCSS(merge({
     'default': {
       card: {
@@ -96,17 +104,17 @@ export const Github = ({ width, colors, onChange, onSwatchHover, triangle,
   const handleChange = (hex, e) => onChange({ hex, source: 'hex' }, e)
 
   return (
-    <div style={ styles.card } className={ `github-picker ${ className }` }>
-      <div style={ styles.triangleShadow } />
-      <div style={ styles.triangle } />
-      { map(colors, c => (
+    <div style={styles.card} className={`github-picker ${className}`}>
+      <div style={styles.triangleShadow} />
+      <div style={styles.triangle} />
+      {map(colors, c => (
         <GithubSwatch
-          color={ c }
-          key={ c }
-          onClick={ handleChange }
-          onSwatchHover={ onSwatchHover }
+          color={c}
+          key={c}
+          onClick={handleChange}
+          onSwatchHover={onSwatchHover}
         />
-      )) }
+      ))}
     </div>
   )
 }
@@ -118,12 +126,4 @@ Github.propTypes = {
   styles: PropTypes.object,
 }
 
-Github.defaultProps = {
-  width: 200,
-  colors: ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB',
-    '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'],
-  triangle: 'top-left',
-  styles: {},
-}
-
 export default ColorWrap(Github)
diff --git a/src/components/google/Google.js b/src/components/google/Google.js
index 1fdfb058..40b4e566 100644
--- a/src/components/google/Google.js
+++ b/src/components/google/Google.js
@@ -8,8 +8,17 @@ import GooglePointerCircle from './GooglePointerCircle'
 import GooglePointer from './GooglePointer'
 import GoogleFields from './GoogleFields'
 
-export const Google = ({ width, onChange, rgb, hsl, hsv, hex, header,
-  styles: passedStyles = {}, className = '' }) => {
+export const Google = ({
+  width = 652,
+  onChange,
+  rgb,
+  hsl,
+  hsv,
+  hex,
+  header = 'Color picker',
+  styles: passedStyles = {},
+  className = ''
+}) => {
   const styles = reactCSS(merge({
     'default': {
       picker: {
@@ -112,10 +121,4 @@ Google.propTypes = {
 
 }
 
-Google.defaultProps = {
-  width: 652,
-  styles: {},
-  header: 'Color picker',
-}
-
 export default ColorWrap(Google)
\ No newline at end of file
diff --git a/src/components/google/GooglePointer.js b/src/components/google/GooglePointer.js
index 0571bc13..537edc01 100644
--- a/src/components/google/GooglePointer.js
+++ b/src/components/google/GooglePointer.js
@@ -2,7 +2,9 @@ import React from 'react'
 import reactCSS from 'reactcss'
 import PropTypes from 'prop-types'
 
-export const GooglePointer = (props) => {
+export const GooglePointer = ({
+  hsl = { a: 1, h: 249.94, l: 0.2, s: 0.50 }
+}) => {
   const styles = reactCSS({
     'default': {
       picker: {
@@ -10,14 +12,14 @@ export const GooglePointer = (props) => {
         height: '20px',
         borderRadius: '22px',
         transform: 'translate(-10px, -7px)',
-        background: `hsl(${ Math.round(props.hsl.h) }, 100%, 50%)`,
+        background: `hsl(${Math.round(hsl.h)}, 100%, 50%)`,
         border: '2px white solid',
       },
     },
   })
 
   return (
-    <div style={ styles.picker } />
+    <div style={styles.picker} />
   )
 }
 
@@ -30,8 +32,4 @@ GooglePointer.propTypes = {
   }),
 }
 
-GooglePointer.defaultProps = {
-  hsl: { a: 1, h: 249.94, l: 0.2, s: 0.50 },
-}
-
 export default GooglePointer
diff --git a/src/components/google/GooglePointerCircle.js b/src/components/google/GooglePointerCircle.js
index 73107fd4..00dcb815 100644
--- a/src/components/google/GooglePointerCircle.js
+++ b/src/components/google/GooglePointerCircle.js
@@ -2,7 +2,9 @@ import React from 'react'
 import reactCSS from 'reactcss'
 import PropTypes from 'prop-types'
 
-export const GooglePointerCircle = (props) => {
+export const GooglePointerCircle = ({
+  hsl = { a: 1, h: 249.94, l: 0.2, s: 0.50 }
+}) => {
   const styles = reactCSS({
     'default': {
       picker: {
@@ -11,7 +13,7 @@ export const GooglePointerCircle = (props) => {
         borderRadius: '22px',
         border: '2px #fff solid',
         transform: 'translate(-12px, -13px)',
-        background: `hsl(${ Math.round(props.hsl.h) }, ${ Math.round(props.hsl.s * 100 ) }%, ${ Math.round(props.hsl.l * 100) }%)`,
+        background: `hsl(${ Math.round(hsl.h) }, ${ Math.round(hsl.s * 100 ) }%, ${ Math.round(hsl.l * 100) }%)`,
       },
     },
   })
@@ -30,8 +32,4 @@ GooglePointerCircle.propTypes = {
   }),
 }
 
-GooglePointerCircle.defaultProps = {
-  hsl: { a: 1, h: 249.94, l: 0.2, s: 0.50 },
-}
-
 export default GooglePointerCircle
\ No newline at end of file
diff --git a/src/components/hue/Hue.js b/src/components/hue/Hue.js
index e0bf6b0a..9407e940 100644
--- a/src/components/hue/Hue.js
+++ b/src/components/hue/Hue.js
@@ -6,8 +6,16 @@ import merge from 'lodash/merge'
 import { ColorWrap, Hue } from '../common'
 import HuePointer from './HuePointer'
 
-export const HuePicker = ({ width, height, onChange, hsl, direction, pointer,
-  styles: passedStyles = {}, className = '' }) => {
+export const HuePicker = ({ 
+  width = '316px', 
+  height = '16px', 
+  onChange, 
+  hsl, 
+  direction = 'horizontal', 
+  pointer = HuePointer,
+  styles: passedStyles = {}, 
+  className = '' 
+}) => {
   const styles = reactCSS(merge({
     'default': {
       picker: {
@@ -40,12 +48,5 @@ export const HuePicker = ({ width, height, onChange, hsl, direction, pointer,
 HuePicker.propTypes = {
   styles: PropTypes.object,
 }
-HuePicker.defaultProps = {
-  width: '316px',
-  height: '16px',
-  direction: 'horizontal',
-  pointer: HuePointer,
-  styles: {},
-}
 
 export default ColorWrap(HuePicker)
diff --git a/src/components/sketch/Sketch.js b/src/components/sketch/Sketch.js
index f30ae49c..7e2c0398 100644
--- a/src/components/sketch/Sketch.js
+++ b/src/components/sketch/Sketch.js
@@ -7,8 +7,21 @@ import { ColorWrap, Saturation, Hue, Alpha, Checkboard } from '../common'
 import SketchFields from './SketchFields'
 import SketchPresetColors from './SketchPresetColors'
 
-export const Sketch = ({ width, rgb, hex, hsv, hsl, onChange, onSwatchHover,
-  disableAlpha, presetColors, renderers, styles: passedStyles = {}, className = '' }) => {
+export const Sketch = ({
+  width = 200,
+  rgb,
+  hex,
+  hsv,
+  hsl,
+  onChange,
+  onSwatchHover,
+  disableAlpha = false,
+  presetColors = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+    '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000',
+    '#4A4A4A', '#9B9B9B', '#FFFFFF'],
+  renderers,
+  styles: passedStyles = {},
+  className = '' }) => {
   const styles = reactCSS(merge({
     'default': {
       picker: {
@@ -47,7 +60,7 @@ export const Sketch = ({ width, rgb, hex, hsv, hsl, onChange, onSwatchHover,
       activeColor: {
         absolute: '0px 0px 0px 0px',
         borderRadius: '2px',
-        background: `rgba(${ rgb.r },${ rgb.g },${ rgb.b },${ rgb.a })`,
+        background: `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`,
         boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
       },
       hue: {
@@ -142,13 +155,4 @@ Sketch.propTypes = {
   styles: PropTypes.object,
 }
 
-Sketch.defaultProps = {
-  disableAlpha: false,
-  width: 200,
-  styles: {},
-  presetColors: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
-    '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000',
-    '#4A4A4A', '#9B9B9B', '#FFFFFF'],
-}
-
 export default ColorWrap(Sketch)
diff --git a/src/components/slider/Slider.js b/src/components/slider/Slider.js
index 2699cd3e..65bb7e56 100644
--- a/src/components/slider/Slider.js
+++ b/src/components/slider/Slider.js
@@ -7,8 +7,13 @@ import { ColorWrap, Hue } from '../common'
 import SliderSwatches from './SliderSwatches'
 import SliderPointer from './SliderPointer'
 
-export const Slider = ({ hsl, onChange, pointer,
-  styles: passedStyles = {}, className = '' }) => {
+export const Slider = ({ 
+  hsl, 
+  onChange, 
+  pointer = SliderPointer,
+  styles: passedStyles = {}, 
+  className = '' 
+}) => {
   const styles = reactCSS(merge({
     'default': {
       hue: {
@@ -41,9 +46,5 @@ export const Slider = ({ hsl, onChange, pointer,
 Slider.propTypes = {
   styles: PropTypes.object,
 }
-Slider.defaultProps = {
-  pointer: SliderPointer,
-  styles: {},
-}
 
 export default ColorWrap(Slider)
diff --git a/src/components/swatches/Swatches.js b/src/components/swatches/Swatches.js
index dac5d469..df598c4b 100644
--- a/src/components/swatches/Swatches.js
+++ b/src/components/swatches/Swatches.js
@@ -8,8 +8,38 @@ import * as material from 'material-colors'
 import { ColorWrap, Raised } from '../common'
 import SwatchesGroup from './SwatchesGroup'
 
-export const Swatches = ({ width, height, onChange, onSwatchHover, colors, hex,
-  styles: passedStyles = {}, className = '' }) => {
+const DEFAULT_COLORS = [
+  [material.red['900'], material.red['700'], material.red['500'], material.red['300'], material.red['100']],
+  [material.pink['900'], material.pink['700'], material.pink['500'], material.pink['300'], material.pink['100']],
+  [material.purple['900'], material.purple['700'], material.purple['500'], material.purple['300'], material.purple['100']],
+  [material.deepPurple['900'], material.deepPurple['700'], material.deepPurple['500'], material.deepPurple['300'], material.deepPurple['100']],
+  [material.indigo['900'], material.indigo['700'], material.indigo['500'], material.indigo['300'], material.indigo['100']],
+  [material.blue['900'], material.blue['700'], material.blue['500'], material.blue['300'], material.blue['100']],
+  [material.lightBlue['900'], material.lightBlue['700'], material.lightBlue['500'], material.lightBlue['300'], material.lightBlue['100']],
+  [material.cyan['900'], material.cyan['700'], material.cyan['500'], material.cyan['300'], material.cyan['100']],
+  [material.teal['900'], material.teal['700'], material.teal['500'], material.teal['300'], material.teal['100']],
+  ['#194D33', material.green['700'], material.green['500'], material.green['300'], material.green['100']],
+  [material.lightGreen['900'], material.lightGreen['700'], material.lightGreen['500'], material.lightGreen['300'], material.lightGreen['100']],
+  [material.lime['900'], material.lime['700'], material.lime['500'], material.lime['300'], material.lime['100']],
+  [material.yellow['900'], material.yellow['700'], material.yellow['500'], material.yellow['300'], material.yellow['100']],
+  [material.amber['900'], material.amber['700'], material.amber['500'], material.amber['300'], material.amber['100']],
+  [material.orange['900'], material.orange['700'], material.orange['500'], material.orange['300'], material.orange['100']],
+  [material.deepOrange['900'], material.deepOrange['700'], material.deepOrange['500'], material.deepOrange['300'], material.deepOrange['100']],
+  [material.brown['900'], material.brown['700'], material.brown['500'], material.brown['300'], material.brown['100']],
+  [material.blueGrey['900'], material.blueGrey['700'], material.blueGrey['500'], material.blueGrey['300'], material.blueGrey['100']],
+  ['#000000', '#525252', '#969696', '#D9D9D9', '#FFFFFF'],
+]
+
+export const Swatches = ({
+  width = 320,
+  height = 240,
+  onChange,
+  onSwatchHover,
+  colors = DEFAULT_COLORS,
+  hex,
+  styles: passedStyles = {},
+  className = ''
+}) => {
   const styles = reactCSS(merge({
     'default': {
       picker: {
@@ -60,32 +90,4 @@ Swatches.propTypes = {
   styles: PropTypes.object,
 }
 
-/* eslint-disable max-len */
-Swatches.defaultProps = {
-  width: 320,
-  height: 240,
-  colors: [
-    [material.red['900'], material.red['700'], material.red['500'], material.red['300'], material.red['100']],
-    [material.pink['900'], material.pink['700'], material.pink['500'], material.pink['300'], material.pink['100']],
-    [material.purple['900'], material.purple['700'], material.purple['500'], material.purple['300'], material.purple['100']],
-    [material.deepPurple['900'], material.deepPurple['700'], material.deepPurple['500'], material.deepPurple['300'], material.deepPurple['100']],
-    [material.indigo['900'], material.indigo['700'], material.indigo['500'], material.indigo['300'], material.indigo['100']],
-    [material.blue['900'], material.blue['700'], material.blue['500'], material.blue['300'], material.blue['100']],
-    [material.lightBlue['900'], material.lightBlue['700'], material.lightBlue['500'], material.lightBlue['300'], material.lightBlue['100']],
-    [material.cyan['900'], material.cyan['700'], material.cyan['500'], material.cyan['300'], material.cyan['100']],
-    [material.teal['900'], material.teal['700'], material.teal['500'], material.teal['300'], material.teal['100']],
-    ['#194D33', material.green['700'], material.green['500'], material.green['300'], material.green['100']],
-    [material.lightGreen['900'], material.lightGreen['700'], material.lightGreen['500'], material.lightGreen['300'], material.lightGreen['100']],
-    [material.lime['900'], material.lime['700'], material.lime['500'], material.lime['300'], material.lime['100']],
-    [material.yellow['900'], material.yellow['700'], material.yellow['500'], material.yellow['300'], material.yellow['100']],
-    [material.amber['900'], material.amber['700'], material.amber['500'], material.amber['300'], material.amber['100']],
-    [material.orange['900'], material.orange['700'], material.orange['500'], material.orange['300'], material.orange['100']],
-    [material.deepOrange['900'], material.deepOrange['700'], material.deepOrange['500'], material.deepOrange['300'], material.deepOrange['100']],
-    [material.brown['900'], material.brown['700'], material.brown['500'], material.brown['300'], material.brown['100']],
-    [material.blueGrey['900'], material.blueGrey['700'], material.blueGrey['500'], material.blueGrey['300'], material.blueGrey['100']],
-    ['#000000', '#525252', '#969696', '#D9D9D9', '#FFFFFF'],
-  ],
-  styles: {},
-}
-
 export default ColorWrap(Swatches)
diff --git a/src/components/twitter/Twitter.js b/src/components/twitter/Twitter.js
index 858c1ffb..95f70fc2 100644
--- a/src/components/twitter/Twitter.js
+++ b/src/components/twitter/Twitter.js
@@ -7,8 +7,19 @@ import * as color from '../../helpers/color'
 
 import { ColorWrap, EditableInput, Swatch } from '../common'
 
-export const Twitter = ({ onChange, onSwatchHover, hex, colors, width, triangle,
-  styles: passedStyles = {}, className = '' }) => {
+const DEFAULT_COLORS = ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3',
+  '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']
+
+export const Twitter = ({
+  onChange,
+  onSwatchHover,
+  hex,
+  colors = DEFAULT_COLORS,
+  width = 276,
+  triangle = 'top-left',
+  styles: passedStyles = {},
+  className = ''
+}) => {
   const styles = reactCSS(merge({
     'default': {
       card: {
@@ -159,12 +170,4 @@ Twitter.propTypes = {
   styles: PropTypes.object,
 }
 
-Twitter.defaultProps = {
-  width: 276,
-  colors: ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3',
-    '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF'],
-  triangle: 'top-left',
-  styles: {},
-}
-
 export default ColorWrap(Twitter)