diff --git a/.flowconfig b/.flowconfig
index 57bb9b90..40c7962d 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -1,5 +1,6 @@
 [ignore]
-.*/node_modules/*
+.*/node_modules/gulp-flowtype/*
+.*/node_modules/npm/*
 
 [include]
 ./src
diff --git a/lib/components/Color.js b/lib/components/Color.js
index 798736cf..5e78d1ae 100644
--- a/lib/components/Color.js
+++ b/lib/components/Color.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
@@ -32,7 +31,7 @@ var ColorPicker = (function (_ReactCSS$Component) {
 
     _get(Object.getPrototypeOf(ColorPicker.prototype), 'constructor', this).call(this);
 
-    this.state = merge(color.toState(props.color), {
+    this.state = merge(color.toState(props.color, 0), {
       visible: props.display
     });
 
diff --git a/lib/components/chrome/Chrome.js b/lib/components/chrome/Chrome.js
index 6b3102c0..0a2ab6f2 100644
--- a/lib/components/chrome/Chrome.js
+++ b/lib/components/chrome/Chrome.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
diff --git a/lib/components/chrome/ChromeFields.js b/lib/components/chrome/ChromeFields.js
index 87237394..b3fbd769 100644
--- a/lib/components/chrome/ChromeFields.js
+++ b/lib/components/chrome/ChromeFields.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
diff --git a/lib/components/chrome/ChromePointer.js b/lib/components/chrome/ChromePointer.js
index 3123d4b8..71d12237 100644
--- a/lib/components/chrome/ChromePointer.js
+++ b/lib/components/chrome/ChromePointer.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/chrome/ChromePointerCircle.js b/lib/components/chrome/ChromePointerCircle.js
index 47c07b00..2f35fad5 100644
--- a/lib/components/chrome/ChromePointerCircle.js
+++ b/lib/components/chrome/ChromePointerCircle.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/common/Alpha.js b/lib/components/common/Alpha.js
index 9940a45e..5ed64593 100644
--- a/lib/components/common/Alpha.js
+++ b/lib/components/common/Alpha.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/common/Checkboard.js b/lib/components/common/Checkboard.js
index d56fcc6e..31b4818a 100644
--- a/lib/components/common/Checkboard.js
+++ b/lib/components/common/Checkboard.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/common/EditableInput.js b/lib/components/common/EditableInput.js
index 03d3164e..bbe57f3e 100644
--- a/lib/components/common/EditableInput.js
+++ b/lib/components/common/EditableInput.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/common/Hue.js b/lib/components/common/Hue.js
index 73ebd185..9b557ff5 100644
--- a/lib/components/common/Hue.js
+++ b/lib/components/common/Hue.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/common/Saturation.js b/lib/components/common/Saturation.js
index 5ef7941c..906742d7 100644
--- a/lib/components/common/Saturation.js
+++ b/lib/components/common/Saturation.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/compact/Compact.js b/lib/components/compact/Compact.js
index 765ceb03..e6fff942 100644
--- a/lib/components/compact/Compact.js
+++ b/lib/components/compact/Compact.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
diff --git a/lib/components/compact/CompactColor.js b/lib/components/compact/CompactColor.js
index 1eb869f4..16ded8e1 100644
--- a/lib/components/compact/CompactColor.js
+++ b/lib/components/compact/CompactColor.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/compact/CompactFields.js b/lib/components/compact/CompactFields.js
index 34c98377..9d40f7a1 100644
--- a/lib/components/compact/CompactFields.js
+++ b/lib/components/compact/CompactFields.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
diff --git a/lib/components/material/Material.js b/lib/components/material/Material.js
index 1e4d439b..84c504be 100644
--- a/lib/components/material/Material.js
+++ b/lib/components/material/Material.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
diff --git a/lib/components/photoshop/Photoshop.js b/lib/components/photoshop/Photoshop.js
index d38d0caa..66013695 100644
--- a/lib/components/photoshop/Photoshop.js
+++ b/lib/components/photoshop/Photoshop.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
diff --git a/lib/components/photoshop/PhotoshopFields.js b/lib/components/photoshop/PhotoshopFields.js
index 9544c5fe..f77d32ec 100644
--- a/lib/components/photoshop/PhotoshopFields.js
+++ b/lib/components/photoshop/PhotoshopFields.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
diff --git a/lib/components/photoshop/PhotoshopPointer.js b/lib/components/photoshop/PhotoshopPointer.js
index 971bcbf9..cc88cf82 100644
--- a/lib/components/photoshop/PhotoshopPointer.js
+++ b/lib/components/photoshop/PhotoshopPointer.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/photoshop/PhotoshopPointerCircle.js b/lib/components/photoshop/PhotoshopPointerCircle.js
index c7ea114b..ca096941 100644
--- a/lib/components/photoshop/PhotoshopPointerCircle.js
+++ b/lib/components/photoshop/PhotoshopPointerCircle.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/sketch-2/Sketch.js b/lib/components/sketch-2/Sketch.js
index daa5077c..364abc5c 100644
--- a/lib/components/sketch-2/Sketch.js
+++ b/lib/components/sketch-2/Sketch.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
diff --git a/lib/components/sketch-2/SketchFields.js b/lib/components/sketch-2/SketchFields.js
index cbb18bbb..66bbecf2 100644
--- a/lib/components/sketch-2/SketchFields.js
+++ b/lib/components/sketch-2/SketchFields.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
diff --git a/lib/components/sketch-2/SketchPresetColors.js b/lib/components/sketch-2/SketchPresetColors.js
index c24c63af..4a63b770 100644
--- a/lib/components/sketch-2/SketchPresetColors.js
+++ b/lib/components/sketch-2/SketchPresetColors.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/slider/Slider.js b/lib/components/slider/Slider.js
index b11a6d33..afa10eb1 100644
--- a/lib/components/slider/Slider.js
+++ b/lib/components/slider/Slider.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
diff --git a/lib/components/slider/SliderPointer.js b/lib/components/slider/SliderPointer.js
index da68daae..5b4ef82c 100644
--- a/lib/components/slider/SliderPointer.js
+++ b/lib/components/slider/SliderPointer.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/slider/SliderSwatch.js b/lib/components/slider/SliderSwatch.js
index 55f96d81..cf75ba09 100644
--- a/lib/components/slider/SliderSwatch.js
+++ b/lib/components/slider/SliderSwatch.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/slider/SliderSwatches.js b/lib/components/slider/SliderSwatches.js
index dbfc2be2..2a2ee3e4 100644
--- a/lib/components/slider/SliderSwatches.js
+++ b/lib/components/slider/SliderSwatches.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
diff --git a/lib/components/swatches/Swatches.js b/lib/components/swatches/Swatches.js
index 14971ea7..a5d0fd92 100644
--- a/lib/components/swatches/Swatches.js
+++ b/lib/components/swatches/Swatches.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/swatches/SwatchesColor.js b/lib/components/swatches/SwatchesColor.js
index ec9774b5..35b9d245 100644
--- a/lib/components/swatches/SwatchesColor.js
+++ b/lib/components/swatches/SwatchesColor.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/lib/components/swatches/SwatchesGroup.js b/lib/components/swatches/SwatchesGroup.js
index fdcfb462..51a39b55 100644
--- a/lib/components/swatches/SwatchesGroup.js
+++ b/lib/components/swatches/SwatchesGroup.js
@@ -1,5 +1,4 @@
 'use strict';
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
diff --git a/src/components/Color.js b/src/components/Color.js
index 96e6111c..ff39fac2 100644
--- a/src/components/Color.js
+++ b/src/components/Color.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -16,14 +16,14 @@ var Compact = require('./compact/Compact');
 
 class ColorPicker extends ReactCSS.Component {
 
-  constructor(props) {
+  constructor(props: any) {
     super();
 
-    this.state = merge(color.toState(props.color), {
+    this.state = merge(color.toState(props.color, 0), {
       visible: props.display,
     });
 
-    this.debounce = _.debounce(function(fn, data) {
+    this.debounce = _.debounce(function(fn: any, data: any) {
       fn(data);
     }, 100);
 
@@ -33,7 +33,7 @@ class ColorPicker extends ReactCSS.Component {
     this.handleCancel = this.handleCancel.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'show': {
         wrap: {
@@ -88,7 +88,7 @@ class ColorPicker extends ReactCSS.Component {
     };
   }
 
-  styles() {
+  styles(): any {
     return this.css({
       'below': this.props.position === 'below' && this.props.display !== null,
       'right': this.props.position === 'right' && this.props.display !== null,
@@ -124,7 +124,7 @@ class ColorPicker extends ReactCSS.Component {
     }
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     data = color.simpleCheckForValidColor(data);
     if (data) {
       var colors = color.toState(data, data.h || this.state.oldHue);
@@ -134,14 +134,14 @@ class ColorPicker extends ReactCSS.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: any) {
     this.setState(merge(color.toState(nextProps.color, this.state.oldHue), {
       visible: nextProps.display,
     }));
   }
 
-  render() {
-    var Picker;
+  render(): any {
+    var Picker: any;
     if (this.props.type === 'sketch') {
       Picker = Sketch;
     } else if (this.props.type === 'photoshop') {
diff --git a/src/components/chrome/Chrome.js b/src/components/chrome/Chrome.js
index b1d5b241..de15e301 100644
--- a/src/components/chrome/Chrome.js
+++ b/src/components/chrome/Chrome.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -16,7 +16,7 @@ class Chrome extends ReactCSS.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         picker: {
@@ -83,11 +83,11 @@ class Chrome extends ReactCSS.Component {
     };
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     this.props.onChange(data);
   }
 
-  render() {
+  render(): any {
     return (
       <div is="picker">
         <div is="saturation">
diff --git a/src/components/chrome/ChromeFields.js b/src/components/chrome/ChromeFields.js
index 75ca4f01..6d0ddee6 100644
--- a/src/components/chrome/ChromeFields.js
+++ b/src/components/chrome/ChromeFields.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -8,7 +8,7 @@ var { EditableInput } = require('../common');
 
 class ChromeFields extends ReactCSS.Component {
 
-  constructor(props) {
+  constructor(props: any) {
     super();
 
     this.state = {
@@ -22,7 +22,7 @@ class ChromeFields extends ReactCSS.Component {
     this.showHighlight = this.showHighlight.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         wrap: {
@@ -87,7 +87,7 @@ class ChromeFields extends ReactCSS.Component {
     };
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     this.props.onChange(data);
   }
 
@@ -113,13 +113,13 @@ class ChromeFields extends ReactCSS.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: any) {
     if (nextProps.hsl.a !== 1 && this.state.view === 'hex') {
       this.setState({ view: 'rgb' });
     }
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     if (data.hex) {
       color.isValidHex(data.hex) && this.props.onChange(data.hex);
     } else if (data.r || data.g || data.b) {
@@ -159,7 +159,7 @@ class ChromeFields extends ReactCSS.Component {
     React.findDOMNode(this.refs.iconHighlight).style.display = 'none';
   }
 
-  render() {
+  render(): any {
     var fields;
     if (this.state.view === 'hex') {
       fields = <div is="fields" className="flexbox-fix">
diff --git a/src/components/chrome/ChromePointer.js b/src/components/chrome/ChromePointer.js
index a7206ede..e39801a8 100644
--- a/src/components/chrome/ChromePointer.js
+++ b/src/components/chrome/ChromePointer.js
@@ -1,11 +1,11 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
 
 class ChromePointer extends ReactCSS.Component {
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         picker: {
@@ -20,7 +20,7 @@ class ChromePointer extends ReactCSS.Component {
     };
   }
 
-  render() {
+  render(): any {
     return (
       <div is="picker"></div>
     );
diff --git a/src/components/chrome/ChromePointerCircle.js b/src/components/chrome/ChromePointerCircle.js
index fda84519..a6d76858 100644
--- a/src/components/chrome/ChromePointerCircle.js
+++ b/src/components/chrome/ChromePointerCircle.js
@@ -1,11 +1,11 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
 
 class ChromePointerCircle extends ReactCSS.Component {
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         picker: {
@@ -19,7 +19,7 @@ class ChromePointerCircle extends ReactCSS.Component {
     };
   }
 
-  render() {
+  render(): any {
     return (
       <div is="picker"></div>
     );
diff --git a/src/components/common/Alpha.js b/src/components/common/Alpha.js
index d3761682..ce2df660 100644
--- a/src/components/common/Alpha.js
+++ b/src/components/common/Alpha.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -15,7 +15,7 @@ class Alpha extends ReactCSS.Component {
     this.handleMouseUp = this.handleMouseUp.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         alpha: {
@@ -56,7 +56,7 @@ class Alpha extends ReactCSS.Component {
     };
   }
 
-  handleChange(e, skip) {
+  handleChange(e: any, skip: boolean) {
     !skip && e.preventDefault();
     var container = React.findDOMNode(this.refs.container);
     var containerWidth = container.clientWidth;
@@ -76,7 +76,7 @@ class Alpha extends ReactCSS.Component {
     }
   }
 
-  handleMouseDown(e) {
+  handleMouseDown(e: any) {
     this.handleChange(e, true);
     window.addEventListener('mousemove', this.handleChange);
     window.addEventListener('mouseup', this.handleMouseUp);
@@ -87,7 +87,7 @@ class Alpha extends ReactCSS.Component {
     window.removeEventListener('mouseup', this.handleMouseUp);
   }
 
-  render() {
+  render(): any {
     var pointer = <div is="slider" />;
 
     if (this.props.pointer) {
diff --git a/src/components/common/Checkboard.js b/src/components/common/Checkboard.js
index 2f447d37..43342477 100644
--- a/src/components/common/Checkboard.js
+++ b/src/components/common/Checkboard.js
@@ -1,13 +1,13 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
 
 var _checkboardCache = {};
 
-function renderCheckboard(c1, c2, size) {
+function renderCheckboard(c1: string, c2: string, size: number): any {
   if (typeof document == 'undefined') return null; // Dont Render On Server
-  var canvas = document.createElement('canvas');
+  var canvas: any = document.createElement('canvas');
   canvas.width = canvas.height = size * 2;
   var ctx = canvas.getContext('2d');
   ctx.fillStyle = c1;
@@ -19,7 +19,7 @@ function renderCheckboard(c1, c2, size) {
   return canvas.toDataURL();
 }
 
-function getCheckboard(c1, c2, size) {
+function getCheckboard(c1: string, c2: string, size: number): any {
   var key = c1 + ',' + c2 + ',' + size;
 
   if (_checkboardCache[key]) {
@@ -32,7 +32,8 @@ function getCheckboard(c1, c2, size) {
 }
 
 class Checkboard extends ReactCSS.Component {
-  classes() {
+
+  classes(): any {
     var background = getCheckboard(this.props.white, this.props.grey, this.props.size);
     return {
       'default': {
@@ -44,7 +45,7 @@ class Checkboard extends ReactCSS.Component {
     };
   }
 
-  render() {
+  render(): any {
     return (
       <div is="grid" ref="grid"></div>
     );
diff --git a/src/components/common/EditableInput.js b/src/components/common/EditableInput.js
index 33fa03a9..dfef7c11 100644
--- a/src/components/common/EditableInput.js
+++ b/src/components/common/EditableInput.js
@@ -1,11 +1,11 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
 
 class EditableInput extends ReactCSS.Component {
 
-  constructor(props) {
+  constructor(props: any) {
     super();
 
     this.state = {
@@ -21,7 +21,7 @@ class EditableInput extends ReactCSS.Component {
     this.handleMouseUp = this.handleMouseUp.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'user-override': {
         wrap: this.props.style && this.props.style.wrap ? this.props.style.wrap : {},
@@ -36,13 +36,13 @@ class EditableInput extends ReactCSS.Component {
     };
   }
 
-  styles() {
+  styles(): any {
     return this.css({
       'user-override': true,
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: any) {
     var input = React.findDOMNode(this.refs.input);
     if (nextProps.value !== this.state.value) {
       if (input === document.activeElement) {
@@ -59,7 +59,7 @@ class EditableInput extends ReactCSS.Component {
     }
   }
 
-  handleChange(e) {
+  handleChange(e: any) {
     if (this.props.label !== null) {
       var obj = {};
       obj[this.props.label] = e.target.value;
@@ -71,7 +71,7 @@ class EditableInput extends ReactCSS.Component {
     this.setState({ value: e.target.value });
   }
 
-  handleKeyDown(e) {
+  handleKeyDown(e: any) {
     var number = Number(e.target.value);
     if (number) {
       var amount = this.props.arrowOffset || 1;
@@ -105,7 +105,7 @@ class EditableInput extends ReactCSS.Component {
     }
   }
 
-  handleDrag(e) {
+  handleDrag(e: any) {
     if (this.props.dragLabel) {
       var newValue = Math.round(this.props.value + e.movementX);
       if (newValue >= 0 && newValue <= this.props.dragMax) {
@@ -116,7 +116,7 @@ class EditableInput extends ReactCSS.Component {
     }
   }
 
-  handleMouseDown(e) {
+  handleMouseDown(e: any) {
     if (this.props.dragLabel) {
       e.preventDefault();
       this.handleDrag(e);
@@ -130,7 +130,7 @@ class EditableInput extends ReactCSS.Component {
     window.removeEventListener('mouseup', this.handleMouseUp);
   }
 
-  render() {
+  render(): any {
     var label;
     if (this.props.label) {
       label = <span is="label" ref="label" onMouseDown={ this.handleMouseDown }>{ this.props.label }</span>;
diff --git a/src/components/common/Hue.js b/src/components/common/Hue.js
index 04cea312..894c87f0 100644
--- a/src/components/common/Hue.js
+++ b/src/components/common/Hue.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -13,7 +13,7 @@ class Hue extends ReactCSS.Component {
     this.handleMouseUp = this.handleMouseUp.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         hue: {
@@ -54,7 +54,7 @@ class Hue extends ReactCSS.Component {
     };
   }
 
-  handleChange(e, skip) {
+  handleChange(e: any, skip: boolean) {
     !skip && e.preventDefault();
     var container = React.findDOMNode(this.refs.container);
     var containerWidth = container.clientWidth;
@@ -93,7 +93,7 @@ class Hue extends ReactCSS.Component {
     }
   }
 
-  handleMouseDown(e) {
+  handleMouseDown(e: any) {
     this.handleChange(e, true);
     window.addEventListener('mousemove', this.handleChange);
     window.addEventListener('mouseup', this.handleMouseUp);
@@ -104,7 +104,7 @@ class Hue extends ReactCSS.Component {
     window.removeEventListener('mouseup', this.handleMouseUp);
   }
 
-  render() {
+  render(): any {
     var pointer = <div is="slider" />;
 
     if (this.props.pointer) {
diff --git a/src/components/common/Saturation.js b/src/components/common/Saturation.js
index 44f325fa..e0230bf0 100644
--- a/src/components/common/Saturation.js
+++ b/src/components/common/Saturation.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -6,10 +6,10 @@ var _ = require('lodash');
 
 class Saturation extends ReactCSS.Component {
 
-  constructor(props) {
+  constructor(props: any) {
     super();
 
-    this.throttle = _.throttle(function(fn, data) {
+    this.throttle = _.throttle(function(fn: any, data: any) {
       fn(data);
     }, 50);
 
@@ -18,7 +18,7 @@ class Saturation extends ReactCSS.Component {
     this.handleMouseUp = this.handleMouseUp.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         color: {
@@ -53,7 +53,7 @@ class Saturation extends ReactCSS.Component {
     };
   }
 
-  handleChange(e, skip) {
+  handleChange(e: any, skip: boolean) {
     !skip && e.preventDefault();
     var container = React.findDOMNode(this.refs.container);
     var containerWidth = container.clientWidth;
@@ -77,7 +77,7 @@ class Saturation extends ReactCSS.Component {
     this.throttle(this.props.onChange, { h: this.props.hsl.h, s: saturation, v: bright, a: this.props.hsl.a });
   }
 
-  handleMouseDown(e) {
+  handleMouseDown(e: any) {
     this.handleChange(e, true);
     window.addEventListener('mousemove', this.handleChange);
     window.addEventListener('mouseup', this.handleMouseUp);
@@ -88,7 +88,7 @@ class Saturation extends ReactCSS.Component {
     window.removeEventListener('mouseup', this.handleMouseUp);
   }
 
-  render() {
+  render(): any {
     var pointer = <div is="circle" />;
 
     if (this.props.pointer) {
diff --git a/src/components/compact/Compact.js b/src/components/compact/Compact.js
index 359bc48b..42b0a72e 100644
--- a/src/components/compact/Compact.js
+++ b/src/components/compact/Compact.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -16,7 +16,7 @@ class Compact extends ReactCSS.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         Compact: {
@@ -37,7 +37,7 @@ class Compact extends ReactCSS.Component {
     };
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     if (data.hex) {
       color.isValidHex(data.hex) && this.props.onChange(data.hex);
     } else {
@@ -45,7 +45,7 @@ class Compact extends ReactCSS.Component {
     }
   }
 
-  render() {
+  render(): any {
     var colors = [];
     if (this.props.colors) {
       for (var i = 0; i < this.props.colors.length; i++) {
diff --git a/src/components/compact/CompactColor.js b/src/components/compact/CompactColor.js
index 9eacddb0..d7b4431c 100644
--- a/src/components/compact/CompactColor.js
+++ b/src/components/compact/CompactColor.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -11,7 +11,7 @@ class CompactColor extends ReactCSS.Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         color: {
@@ -51,7 +51,7 @@ class CompactColor extends ReactCSS.Component {
     this.props.onClick({ hex: this.props.color });
   }
 
-  render() {
+  render(): any {
     return (
       <div is="color" onClick={ this.handleClick }>
         <div is="dot" />
diff --git a/src/components/compact/CompactFields.js b/src/components/compact/CompactFields.js
index 467af24d..4478bd3b 100644
--- a/src/components/compact/CompactFields.js
+++ b/src/components/compact/CompactFields.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -13,7 +13,7 @@ class CompactColor extends ReactCSS.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         fields: {
@@ -84,7 +84,7 @@ class CompactColor extends ReactCSS.Component {
     };
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     if (data.r || data.g || data.b) {
       this.props.onChange({
         r: data.r || this.props.rgb.r,
@@ -96,7 +96,7 @@ class CompactColor extends ReactCSS.Component {
     }
   }
 
-  render() {
+  render(): any {
     return (
       <div is="fields" className="flexbox-fix">
         <div is="active" />
diff --git a/src/components/material/Material.js b/src/components/material/Material.js
index 3d4276d1..cff38023 100644
--- a/src/components/material/Material.js
+++ b/src/components/material/Material.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -15,7 +15,7 @@ class Material extends ReactCSS.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         material: {
@@ -89,7 +89,7 @@ class Material extends ReactCSS.Component {
     };
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     if (data.hex) {
       color.isValidHex(data.hex) && this.props.onChange(data.hex);
     } else if (data.r || data.g || data.b) {
@@ -101,7 +101,7 @@ class Material extends ReactCSS.Component {
     }
   }
 
-  render() {
+  render(): any {
     return (
       <Raised>
         <div is="material">
diff --git a/src/components/photoshop/Photoshop.js b/src/components/photoshop/Photoshop.js
index 940766b3..286cb6ef 100644
--- a/src/components/photoshop/Photoshop.js
+++ b/src/components/photoshop/Photoshop.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -10,7 +10,7 @@ var PhotoshopPointer = require('./PhotoshopPointer');
 
 class PhotoshopPicker extends ReactCSS.Component {
 
-  constructor(props) {
+  constructor(props: any) {
     super();
 
     this.state = {
@@ -22,7 +22,7 @@ class PhotoshopPicker extends ReactCSS.Component {
     this.handleCancel = this.handleCancel.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         picker: {
@@ -122,7 +122,7 @@ class PhotoshopPicker extends ReactCSS.Component {
     };
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     this.props.onChange(data);
   }
 
@@ -134,7 +134,7 @@ class PhotoshopPicker extends ReactCSS.Component {
     this.props.onCancel && this.props.onCancel();
   }
 
-  render() {
+  render(): any {
     var header;
 
     if (this.props.header) {
diff --git a/src/components/photoshop/PhotoshopFields.js b/src/components/photoshop/PhotoshopFields.js
index 3e81202c..0fef1843 100644
--- a/src/components/photoshop/PhotoshopFields.js
+++ b/src/components/photoshop/PhotoshopFields.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -14,7 +14,7 @@ class PhotoshopPicker extends ReactCSS.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         fields: {
@@ -95,7 +95,7 @@ class PhotoshopPicker extends ReactCSS.Component {
     };
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     if (data['#']) {
       color.isValidHex(data['#']) && this.props.onChange(data['#']);
     } else if (data.r || data.g || data.b) {
@@ -113,7 +113,7 @@ class PhotoshopPicker extends ReactCSS.Component {
     }
   }
 
-  render() {
+  render(): any {
     return (
       <div is="fields">
         <EditableInput is="Input" label="h" value={ Math.round(this.props.hsv.h) } onChange={ this.handleChange }/>
diff --git a/src/components/photoshop/PhotoshopPointer.js b/src/components/photoshop/PhotoshopPointer.js
index e9fb3398..227ce510 100644
--- a/src/components/photoshop/PhotoshopPointer.js
+++ b/src/components/photoshop/PhotoshopPointer.js
@@ -1,11 +1,11 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
 
 class PhotoshopPointerCircle extends ReactCSS.Component {
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         triangle: {
@@ -47,7 +47,7 @@ class PhotoshopPointerCircle extends ReactCSS.Component {
     };
   }
 
-  render() {
+  render(): any {
     return (
       <div is="pointer">
         <div is="left">
diff --git a/src/components/photoshop/PhotoshopPointerCircle.js b/src/components/photoshop/PhotoshopPointerCircle.js
index d0a639d5..eb2a23cf 100644
--- a/src/components/photoshop/PhotoshopPointerCircle.js
+++ b/src/components/photoshop/PhotoshopPointerCircle.js
@@ -1,11 +1,11 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
 
 class PhotoshopPointerCircle extends ReactCSS.Component {
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         picker: {
@@ -24,13 +24,13 @@ class PhotoshopPointerCircle extends ReactCSS.Component {
     };
   }
 
-  styles() {
+  styles(): any {
     return this.css({
       'black-outline': this.props.hsl.l > .5,
     });
   }
 
-  render() {
+  render(): any {
     return (
       <div is="picker"></div>
     );
diff --git a/src/components/sketch-2/Sketch.js b/src/components/sketch-2/Sketch.js
index 1f3a2ba2..98611d44 100644
--- a/src/components/sketch-2/Sketch.js
+++ b/src/components/sketch-2/Sketch.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -15,7 +15,7 @@ class Sketch extends ReactCSS.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         picker: {
@@ -82,11 +82,11 @@ class Sketch extends ReactCSS.Component {
     };
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     this.props.onChange(data);
   }
 
-  render() {
+  render(): any {
     return (
       <div is="picker">
         <div is="saturation">
diff --git a/src/components/sketch-2/SketchFields.js b/src/components/sketch-2/SketchFields.js
index 2c19f2bd..4806ea12 100644
--- a/src/components/sketch-2/SketchFields.js
+++ b/src/components/sketch-2/SketchFields.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -14,7 +14,7 @@ class ShetchFields extends ReactCSS.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         fields: {
@@ -52,7 +52,7 @@ class ShetchFields extends ReactCSS.Component {
     };
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     if (data.hex) {
       color.isValidHex(data.hex) && this.props.onChange(data.hex);
     } else if (data.r || data.g || data.b) {
@@ -79,7 +79,7 @@ class ShetchFields extends ReactCSS.Component {
     }
   }
 
-  render() {
+  render(): any {
     return (
       <div is="fields" className="flexbox-fix">
         <div is="double">
diff --git a/src/components/sketch-2/SketchPresetColors.js b/src/components/sketch-2/SketchPresetColors.js
index db6d1dd3..ddd8594f 100644
--- a/src/components/sketch-2/SketchPresetColors.js
+++ b/src/components/sketch-2/SketchPresetColors.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -11,7 +11,7 @@ class SketchPresetColors extends ReactCSS.Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         colors: {
@@ -45,17 +45,17 @@ class SketchPresetColors extends ReactCSS.Component {
     };
   }
 
-  styles() {
+  styles(): any {
     return this.css({
       'no-presets': !this.props.colors || !this.props.colors.length,
     });
   }
 
-  handleClick(hex) {
+  handleClick(hex: any) {
     this.props.onClick(hex);
   }
 
-  render() {
+  render(): any {
     var colors = [];
     if (this.props.colors) {
       for (var i = 0; i < this.props.colors.length; i++) {
diff --git a/src/components/slider/Slider.js b/src/components/slider/Slider.js
index da94e650..b0a67fd4 100644
--- a/src/components/slider/Slider.js
+++ b/src/components/slider/Slider.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -15,7 +15,7 @@ class Swatches extends ReactCSS.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         slider: {
@@ -31,11 +31,11 @@ class Swatches extends ReactCSS.Component {
     };
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     this.props.onChange(data);
   }
 
-  render() {
+  render(): any {
     return (
       <div is="slider">
         <div is="hue">
diff --git a/src/components/slider/SliderPointer.js b/src/components/slider/SliderPointer.js
index 9ae0dee6..b96cc6a6 100644
--- a/src/components/slider/SliderPointer.js
+++ b/src/components/slider/SliderPointer.js
@@ -1,11 +1,11 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
 
 class SliderPointer extends ReactCSS.Component {
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         picker: {
@@ -20,7 +20,7 @@ class SliderPointer extends ReactCSS.Component {
     };
   }
 
-  render() {
+  render(): any {
     return (
       <div is="picker"></div>
     );
diff --git a/src/components/slider/SliderSwatch.js b/src/components/slider/SliderSwatch.js
index 62dc4225..c3840c70 100644
--- a/src/components/slider/SliderSwatch.js
+++ b/src/components/slider/SliderSwatch.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -11,7 +11,7 @@ class SliderSwatch extends ReactCSS.Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         swatch: {
@@ -43,7 +43,7 @@ class SliderSwatch extends ReactCSS.Component {
     this.props.onClick({ h: this.props.hsl.h, s: .5, l: this.props.offset });
   }
 
-  render() {
+  render(): any {
     return (
       <div is="swatch" onClick={ this.handleClick } />
     );
diff --git a/src/components/slider/SliderSwatches.js b/src/components/slider/SliderSwatches.js
index 5aba6824..96e1bd04 100644
--- a/src/components/slider/SliderSwatches.js
+++ b/src/components/slider/SliderSwatches.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -13,7 +13,7 @@ class SliderSwatches extends ReactCSS.Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         swatches: {
@@ -32,11 +32,11 @@ class SliderSwatches extends ReactCSS.Component {
     };
   }
 
-  handleClick(data) {
+  handleClick(data: any) {
     this.props.onClick(data);
   }
 
-  render() {
+  render(): any {
     return (
       <div is="swatches">
         <div is="swatch">
diff --git a/src/components/swatches/Swatches.js b/src/components/swatches/Swatches.js
index 6f009d4d..836fe291 100644
--- a/src/components/swatches/Swatches.js
+++ b/src/components/swatches/Swatches.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -16,7 +16,7 @@ class Swatches extends ReactCSS.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         picker: {
@@ -38,11 +38,11 @@ class Swatches extends ReactCSS.Component {
     };
   }
 
-  handleChange(data) {
+  handleChange(data: any) {
     color.isValidHex(data) && this.props.onChange(data);
   }
 
-  render() {
+  render(): any {
     var groups = [];
     if (this.props.colors) {
       for (var i = 0; i < this.props.colors.length; i++) {
diff --git a/src/components/swatches/SwatchesColor.js b/src/components/swatches/SwatchesColor.js
index aa2b9434..0c373214 100644
--- a/src/components/swatches/SwatchesColor.js
+++ b/src/components/swatches/SwatchesColor.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -11,7 +11,7 @@ class SwatchesColor extends ReactCSS.Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         color: {
@@ -51,7 +51,7 @@ class SwatchesColor extends ReactCSS.Component {
     this.props.onClick(this.props.color);
   }
 
-  render() {
+  render(): any {
     return (
       <div is="color" onClick={ this.handleClick }>
         <div is="check">
diff --git a/src/components/swatches/SwatchesGroup.js b/src/components/swatches/SwatchesGroup.js
index 3b837f13..78a73e05 100644
--- a/src/components/swatches/SwatchesGroup.js
+++ b/src/components/swatches/SwatchesGroup.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; /* @flow */
 
 var React = require('react');
 var ReactCSS = require('reactcss');
@@ -13,7 +13,7 @@ class SwatchesGroup extends ReactCSS.Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
-  classes() {
+  classes(): any {
     return {
       'default': {
         group: {
@@ -26,11 +26,11 @@ class SwatchesGroup extends ReactCSS.Component {
     };
   }
 
-  handleClick(data) {
+  handleClick(data: any) {
     this.props.onClick(data);
   }
 
-  render() {
+  render(): any {
     var colors = [];
     for (var i = 0; i < this.props.group.length; i++) {
       var color = this.props.group[i];