diff --git a/docs/components.json b/docs/components.json
index 2dd9a770..b80befbd 100644
--- a/docs/components.json
+++ b/docs/components.json
@@ -900,9 +900,32 @@
           "computed": false
         }
       },
+      "uncheckedStyle": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Override the styles of the unchecked element",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      },
       "value": {
         "type": {
-          "name": "string"
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "number"
+            },
+            {
+              "name": "bool"
+            }
+          ]
         },
         "required": true,
         "description": "The checkbox' value"
@@ -916,6 +939,118 @@
       }
     }
   },
+  "components/checkbox-group/component.jsx": {
+    "description": "",
+    "displayName": "CheckboxGroup",
+    "methods": [],
+    "props": {
+      "values": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "union",
+            "value": [
+              {
+                "name": "string"
+              },
+              {
+                "name": "number"
+              },
+              {
+                "name": "bool"
+              }
+            ]
+          }
+        },
+        "required": false,
+        "description": "The CheckboxGroup's values",
+        "defaultValue": {
+          "value": "[]",
+          "computed": false
+        }
+      },
+      "onChange": {
+        "type": {
+          "name": "func"
+        },
+        "required": true,
+        "description": "Callback fired when Checkbox's value changes\n\nfunction(event: object) => void"
+      },
+      "children": {
+        "type": {
+          "name": "node"
+        },
+        "required": true,
+        "description": "The CheckboxGroup's content (Checkbox), each child must have a value prop"
+      },
+      "label": {
+        "type": {
+          "name": "node"
+        },
+        "required": true,
+        "description": "The CheckboxGroup's label"
+      },
+      "labelStyle": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Override the styles of the label element",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      },
+      "style": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Override the styles of the root element",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      },
+      "buttonStyle": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Override the styles of the button container",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      },
+      "error": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": "Display an error message",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
+      },
+      "errorStyle": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Override the styles of the error element",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      }
+    }
+  },
   "components/commands/component.jsx": {
     "description": "Used for displaying a list of commands",
     "displayName": "Commands",
@@ -1637,197 +1772,7 @@
       }
     }
   },
-  "components/emoji-menu/emoji-categories.jsx": {
-    "description": "",
-    "methods": [],
-    "props": {
-      "changeCategory": {
-        "type": {
-          "name": "func"
-        },
-        "required": true,
-        "description": ""
-      },
-      "category": {
-        "type": {
-          "name": "string"
-        },
-        "required": true,
-        "description": ""
-      },
-      "activeColor": {
-        "type": {
-          "name": "string"
-        },
-        "required": true,
-        "description": ""
-      },
-      "recent": {
-        "type": {
-          "name": "bool"
-        },
-        "required": true,
-        "description": ""
-      },
-      "style": {
-        "type": {
-          "name": "instanceOf",
-          "value": "Object"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "{}",
-          "computed": false
-        }
-      },
-      "iconStyle": {
-        "type": {
-          "name": "instanceOf",
-          "value": "Object"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "{}",
-          "computed": false
-        }
-      },
-      "iconColor": {
-        "type": {
-          "name": "string"
-        },
-        "required": true,
-        "description": ""
-      }
-    }
-  },
-  "components/emoji-menu/emoji-category.jsx": {
-    "description": "",
-    "methods": [],
-    "props": {
-      "category": {
-        "type": {
-          "name": "string"
-        },
-        "required": true,
-        "description": ""
-      },
-      "emojis": {
-        "type": {
-          "name": "arrayOf",
-          "value": {
-            "name": "shape",
-            "value": {
-              "shortname": {
-                "name": "string",
-                "required": true
-              }
-            }
-          }
-        },
-        "required": true,
-        "description": ""
-      },
-      "sendEmoji": {
-        "type": {
-          "name": "func"
-        },
-        "required": true,
-        "description": ""
-      },
-      "style": {
-        "type": {
-          "name": "instanceOf",
-          "value": "Object"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "{}",
-          "computed": false
-        }
-      },
-      "emojiStyle": {
-        "type": {
-          "name": "instanceOf",
-          "value": "Object"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "{}",
-          "computed": false
-        }
-      }
-    }
-  },
-  "components/emoji-menu/emoji-modifiers.jsx": {
-    "description": "",
-    "displayName": "EmojiModifiers",
-    "methods": [],
-    "props": {
-      "modifiers": {
-        "type": {
-          "name": "arrayOf",
-          "value": {
-            "name": "shape",
-            "value": {
-              "shortname": {
-                "name": "string",
-                "required": true
-              },
-              "title": {
-                "name": "string",
-                "required": true
-              }
-            }
-          }
-        },
-        "required": true,
-        "description": ""
-      },
-      "changeTone": {
-        "type": {
-          "name": "func"
-        },
-        "required": true,
-        "description": ""
-      },
-      "tone": {
-        "type": {
-          "name": "string"
-        },
-        "required": true,
-        "description": ""
-      },
-      "style": {
-        "type": {
-          "name": "instanceOf",
-          "value": "Object"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "{}",
-          "computed": false
-        }
-      },
-      "modifierStyle": {
-        "type": {
-          "name": "instanceOf",
-          "value": "Object"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "{}",
-          "computed": false
-        }
-      }
-    }
-  },
-  "components/emoji-menu/index.jsx": {
+  "components/emoji-menu/component.jsx": {
     "description": "Menu for sending messages with emoji",
     "displayName": "EmojiMenu",
     "methods": [
@@ -2026,7 +1971,197 @@
       }
     }
   },
-  "components/empty-state/index.jsx": {
+  "components/emoji-menu/emoji-categories.jsx": {
+    "description": "",
+    "methods": [],
+    "props": {
+      "changeCategory": {
+        "type": {
+          "name": "func"
+        },
+        "required": true,
+        "description": ""
+      },
+      "category": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": ""
+      },
+      "activeColor": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": ""
+      },
+      "recent": {
+        "type": {
+          "name": "bool"
+        },
+        "required": true,
+        "description": ""
+      },
+      "style": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      },
+      "iconStyle": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      },
+      "iconColor": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": ""
+      }
+    }
+  },
+  "components/emoji-menu/emoji-category.jsx": {
+    "description": "",
+    "methods": [],
+    "props": {
+      "category": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": ""
+      },
+      "emojis": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "shape",
+            "value": {
+              "shortname": {
+                "name": "string",
+                "required": true
+              }
+            }
+          }
+        },
+        "required": true,
+        "description": ""
+      },
+      "sendEmoji": {
+        "type": {
+          "name": "func"
+        },
+        "required": true,
+        "description": ""
+      },
+      "style": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      },
+      "emojiStyle": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      }
+    }
+  },
+  "components/emoji-menu/emoji-modifiers.jsx": {
+    "description": "",
+    "displayName": "EmojiModifiers",
+    "methods": [],
+    "props": {
+      "modifiers": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "shape",
+            "value": {
+              "shortname": {
+                "name": "string",
+                "required": true
+              },
+              "title": {
+                "name": "string",
+                "required": true
+              }
+            }
+          }
+        },
+        "required": true,
+        "description": ""
+      },
+      "changeTone": {
+        "type": {
+          "name": "func"
+        },
+        "required": true,
+        "description": ""
+      },
+      "tone": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": ""
+      },
+      "style": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      },
+      "modifierStyle": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      }
+    }
+  },
+  "components/empty-state/component.jsx": {
     "description": "Pretty placeholder for empty content",
     "displayName": "EmptyState",
     "methods": [],
@@ -2105,7 +2240,7 @@
       }
     }
   },
-  "components/gallery/index.jsx": {
+  "components/gallery/component.jsx": {
     "description": "Justified grid layout for showcasing images.",
     "displayName": "Gallery",
     "methods": [
@@ -2225,7 +2360,7 @@
       }
     }
   },
-  "components/icon-menu/index.jsx": {
+  "components/icon-menu/component.jsx": {
     "description": "Open a menu from an Icon, give options related to the icon",
     "displayName": "IconMenu",
     "methods": [
@@ -3870,7 +4005,7 @@
       }
     }
   },
-  "components/input/index.jsx": {
+  "components/input/component.jsx": {
     "description": "General purpose form input",
     "displayName": "Input",
     "methods": [
@@ -4078,7 +4213,7 @@
       }
     }
   },
-  "components/lightbox/index.jsx": {
+  "components/lightbox/component.jsx": {
     "description": "Lightbox for images",
     "displayName": "Lightbox",
     "methods": [
@@ -4169,7 +4304,7 @@
       }
     }
   },
-  "components/list/index.jsx": {
+  "components/list/component.jsx": {
     "description": "A wrapper for ListItems",
     "displayName": "List",
     "methods": [],
@@ -4251,7 +4386,7 @@
       }
     }
   },
-  "components/list-item/index.jsx": {
+  "components/list-item/component.jsx": {
     "description": "A list's item",
     "displayName": "ListItem",
     "methods": [
@@ -6842,7 +6977,7 @@
       "value": {
         "type": {
           "name": "custom",
-          "raw": "propTypes.valueInRange"
+          "raw": "customPropTypes.valueInRange"
         },
         "required": false,
         "description": "The slider's value. Must between min and max",
@@ -6868,7 +7003,7 @@
       "max": {
         "type": {
           "name": "custom",
-          "raw": "propTypes.minMax"
+          "raw": "customPropTypes.minMax"
         },
         "required": false,
         "description": "The slider's max value. Cannot be equal to min.",
@@ -6880,7 +7015,7 @@
       "min": {
         "type": {
           "name": "custom",
-          "raw": "propTypes.minMax"
+          "raw": "customPropTypes.minMax"
         },
         "required": false,
         "description": "The slider's min value. Cannot be equal to max.",
diff --git a/docs/src/components/checkbox/example.js b/docs/src/components/checkbox/example.js
index 3786dd82..f736c8f0 100644
--- a/docs/src/components/checkbox/example.js
+++ b/docs/src/components/checkbox/example.js
@@ -2,6 +2,7 @@ export default `
   \`\`\`jsx
   import React, { Component } from 'react';
   import Checkbox from 'anchor-ui/checkbox';
+  import CheckboxGroup from 'anchor-ui/checkbox-group';
   import Divider from 'anchor-ui/divider';
   import _ from 'lodash';
 
@@ -30,20 +31,18 @@ export default `
 
       return (
         <section>
-          <Checkbox
-            onChange={this.handleCheckboxChange}
-            label="One"
-            name="One"
-            checked={_.includes(values, 'One')}
-            value="One"
-          />
-          <Checkbox
-            onChange={this.handleCheckboxChange}
-            label="Two"
-            name="Two"
-            checked={_.includes(values, 'Two')}
-            value="Two"
-          />
+          <CheckboxGroup values={values} onChange={this.handleCheckboxChange} label="Checkboxes">
+            <Checkbox
+              label="One"
+              name="One"
+              value="One"
+            />
+            <Checkbox
+              label="Two"
+              name="Two"
+              value="Two"
+            />
+          </CheckboxGroup>
           <Divider text="Checked Items" />
           <ul>
             {
diff --git a/docs/src/components/checkbox/index.jsx b/docs/src/components/checkbox/index.jsx
index 3539f8ba..15bf4147 100644
--- a/docs/src/components/checkbox/index.jsx
+++ b/docs/src/components/checkbox/index.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
 import Checkbox from '../../../../dist/checkbox';
+import CheckboxGroup from '../../../../dist/checkbox-group';
 import Divider from '../../../../dist/divider';
 import Props from '../props';
 import components from '../../../components.json';
@@ -31,13 +32,9 @@ class CheckboxDoc extends Component {
   render() {
     const { values } = this.state;
 
-    const componentData = _.find(components, component => component.displayName === 'Checkbox');
+    const checkboxData = _.find(components, component => component.displayName === 'Checkbox');
+    const checkboxGroupData = _.find(components, component => component.displayName === 'CheckboxGroup');
     const style = {
-      checkboxWrapper: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      },
       paper: {
         margin: 0,
         padding: '20px'
@@ -59,30 +56,26 @@ class CheckboxDoc extends Component {
         <h1>Checkbox</h1>
         <section>
           <h1>Description</h1>
-          <p>{componentData.description}</p>
+          <p>{checkboxData.description}</p>
         </section>
         <section>
           <h1>Examples</h1>
           <Markdown markdown={example} title="Code example" />
           <Paper style={style.paper}>
-            <section style={style.checkboxWrapper}>
+            <CheckboxGroup values={values} onChange={this.handleCheckboxChange} label="Checkboxes">
               <Checkbox
-                onChange={this.handleCheckboxChange}
                 label="One"
                 name="One"
                 style={style.checkbox}
-                checked={_.includes(values, 'One')}
                 value="One"
               />
               <Checkbox
-                onChange={this.handleCheckboxChange}
                 label="Two"
                 name="Two"
                 style={style.checkbox}
-                checked={_.includes(values, 'Two')}
                 value="Two"
               />
-            </section>
+            </CheckboxGroup>
             <Divider text="Checked Items" />
             <ul style={style.list}>
               {
@@ -93,7 +86,10 @@ class CheckboxDoc extends Component {
             </ul>
           </Paper>
         </section>
-        <Props props={componentData.props} />
+        <h2>Checkbox</h2>
+        <Props props={checkboxData.props} />
+        <h2>CheckboxGroup</h2>
+        <Props props={checkboxGroupData.props} />
       </article>
     );
   }
diff --git a/package.json b/package.json
index df248b3f..6efea2f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "anchor-ui",
-  "version": "5.0.6",
+  "version": "5.1.0",
   "description": "React Component UI Kit",
   "main": "dist/index.js",
   "files": [
@@ -40,10 +40,11 @@
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.0.1",
     "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "chai": "^3.5.0",
+    "chance": "^1.0.13",
     "codecov": "^3.0.0",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.3",
@@ -60,13 +61,13 @@
     "react-docgen": "^2.19.0",
     "react-test-renderer": "^15.5.4",
     "rimraf": "^2.6.2",
-    "sinon": "^1.17.7",
+    "sinon": "^4.1.3",
     "sinon-chai": "^2.9.0"
   },
   "babel": {
     "presets": [
       "react",
-      "es2015",
+      "env",
       "stage-0"
     ],
     "plugins": [
@@ -90,6 +91,7 @@
     "react-event-listener": "^0.4.5",
     "react-onclickoutside": "^6.6.3",
     "recompose": "^0.22.0",
+    "store": "^2.0.12",
     "tlds": "^1.182.0"
   }
 }
diff --git a/src/checkbox-group/component.jsx b/src/checkbox-group/component.jsx
new file mode 100644
index 00000000..64a9dbb5
--- /dev/null
+++ b/src/checkbox-group/component.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Radium from 'radium';
+import includes from 'lodash/includes';
+import getStyles from './get-styles';
+
+const propTypes = {
+  /** The CheckboxGroup's values */
+  values: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool
+  ])),
+  /**
+   * Callback fired when Checkbox's value changes
+   *
+   * function(event: object) => void
+   */
+  onChange: PropTypes.func.isRequired,
+  /** The CheckboxGroup's content (Checkbox), each child must have a value prop */
+  children: PropTypes.node.isRequired,
+  /** The CheckboxGroup's label */
+  label: PropTypes.node.isRequired,
+  /** Override the styles of the label element */
+  labelStyle: PropTypes.instanceOf(Object),
+  /** Override the styles of the root element */
+  style: PropTypes.instanceOf(Object),
+  /** Override the styles of the button container */
+  buttonStyle: PropTypes.instanceOf(Object),
+  /** Display an error message */
+  error: PropTypes.node,
+  /** Override the styles of the error element */
+  errorStyle: PropTypes.instanceOf(Object)
+};
+
+const defaultProps = {
+  values: [],
+  labelStyle: {},
+  style: {},
+  error: null,
+  errorStyle: {},
+  buttonStyle: {}
+};
+
+const displayName = 'CheckboxGroup';
+
+const CheckboxGroup = ({
+  values, onChange, children, buttonStyle, label, labelStyle, style, error, errorStyle, ...custom
+}) => {
+  const childrenWithProps = React.Children.map(
+    children,
+    child => React.cloneElement(
+      child,
+      {
+        checked: includes(values, child.props.value),
+        onChange
+      }
+    )
+  );
+
+  return (
+    <section style={style} {...custom}>
+      <span style={getStyles.label(labelStyle)}>{label}</span>
+      <section style={getStyles.buttons(buttonStyle)}>
+        {childrenWithProps}
+      </section>
+      {error ? <span style={getStyles.error(errorStyle)}>{error}</span> : null}
+    </section>
+  );
+};
+
+CheckboxGroup.propTypes = propTypes;
+CheckboxGroup.defaultProps = defaultProps;
+CheckboxGroup.displayName = displayName;
+
+export default Radium(CheckboxGroup);
diff --git a/src/checkbox-group/get-styles.js b/src/checkbox-group/get-styles.js
new file mode 100644
index 00000000..10cd077e
--- /dev/null
+++ b/src/checkbox-group/get-styles.js
@@ -0,0 +1,12 @@
+import styles from './styles';
+import combineStyles from '../internal/combine-styles';
+
+const buttons = overrideStyle => combineStyles(styles.buttons, overrideStyle);
+const label = overrideStyle => combineStyles(styles.label, overrideStyle);
+const error = overrideStyle => combineStyles(styles.error, overrideStyle);
+
+export default {
+  buttons,
+  label,
+  error
+};
diff --git a/src/checkbox-group/index.js b/src/checkbox-group/index.js
new file mode 100644
index 00000000..787141c9
--- /dev/null
+++ b/src/checkbox-group/index.js
@@ -0,0 +1,4 @@
+import Radium from 'radium';
+import CheckboxGroup from './component';
+
+export default Radium(CheckboxGroup);
diff --git a/src/checkbox-group/styles.js b/src/checkbox-group/styles.js
new file mode 100644
index 00000000..1d0a3bf6
--- /dev/null
+++ b/src/checkbox-group/styles.js
@@ -0,0 +1,21 @@
+import colors from '../settings/colors';
+
+export default {
+  buttons: {
+    display: 'flex',
+    flexWrap: 'wrap'
+  },
+  label: {
+    fontSize: '16px',
+    color: colors.secondaryText,
+    fontWeight: 'bolder',
+    padding: '0 0 8px 8px',
+    display: 'inline-block'
+  },
+  error: {
+    display: 'block',
+    paddingLeft: '10px',
+    color: colors.error,
+    fontSize: '14px'
+  }
+};
diff --git a/src/checkbox/component.jsx b/src/checkbox/component.jsx
index 5bede978..2d95390e 100644
--- a/src/checkbox/component.jsx
+++ b/src/checkbox/component.jsx
@@ -2,37 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import getStyles from './get-styles';
 import IconCheckbox from '../icons/icon-checkbox';
-import styles from './styles';
 
-/** A checkbox is used to verify which options you want selected from a group. */
-const Checkbox = ({
-  onChange, label, checked, name, style, inputStyle, iconStyle, labelStyle, value, color, ...custom
-}) => (
-  <label htmlFor={name} style={getStyles.root(color, style)} {...custom}>
-    <input
-      type="checkbox"
-      id={name}
-      onChange={onChange}
-      checked={checked}
-      style={getStyles.input(inputStyle)}
-      value={value}
-    />
-    <div style={getStyles.icon(iconStyle)}>
-      {
-        checked
-        ? <IconCheckbox color={color} />
-        : <div style={styles.unchecked} />
-      }
-    </div>
-    <span style={getStyles.label(labelStyle)}>
-      {label}
-    </span>
-  </label>
-);
-
-Checkbox.displayName = 'Checkbox';
-
-Checkbox.propTypes = {
+const propTypes = {
   /** The input's label text */
   label: PropTypes.node.isRequired,
   /** The input's name */
@@ -53,17 +24,52 @@ Checkbox.propTypes = {
   iconStyle: PropTypes.instanceOf(Object),
   /** Override the styles of the label element */
   labelStyle: PropTypes.instanceOf(Object),
+  /** Override the styles of the unchecked element */
+  uncheckedStyle: PropTypes.instanceOf(Object),
   /** The checkbox' value */
-  value: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).isRequired,
   color: PropTypes.string.isRequired
 };
 
-Checkbox.defaultProps = {
+const defaultProps = {
   style: {},
   inputStyle: {},
   iconStyle: {},
   labelStyle: {},
+  uncheckedStyle: {},
   checked: false
 };
 
+const displayName = 'Checkbox';
+
+/** A checkbox is used to verify which options you want selected from a group. */
+const Checkbox = ({
+  onChange, label, checked, name, style, inputStyle, iconStyle, labelStyle, uncheckedStyle, value, color, ...custom // eslint-disable-line max-len
+}) => (
+  <label htmlFor={name} style={getStyles.root(color, style)} {...custom}>
+    <input
+      type="checkbox"
+      id={name}
+      onChange={onChange}
+      checked={checked}
+      style={getStyles.input(inputStyle)}
+      value={value}
+    />
+    <div style={getStyles.icon(iconStyle)}>
+      {
+        checked
+        ? <IconCheckbox color={color} />
+        : <div style={getStyles.unchecked(uncheckedStyle)} />
+      }
+    </div>
+    <span style={getStyles.label(labelStyle)}>
+      {label}
+    </span>
+  </label>
+);
+
+Checkbox.propTypes = propTypes;
+Checkbox.defaultProps = defaultProps;
+Checkbox.displayName = displayName;
+
 export default Checkbox;
diff --git a/src/checkbox/get-styles.js b/src/checkbox/get-styles.js
index b66c0807..d0b070d7 100644
--- a/src/checkbox/get-styles.js
+++ b/src/checkbox/get-styles.js
@@ -16,9 +16,12 @@ const label = overrideStyles => combineStyles(styles.label, overrideStyles);
 
 const icon = overrideStyles => combineStyles(styles.icon, overrideStyles);
 
+const unchecked = overrideStyles => combineStyles(styles.unchecked, overrideStyles);
+
 export default {
   root,
   input,
   label,
-  icon
+  icon,
+  unchecked
 };
diff --git a/src/emoji-menu/index.jsx b/src/emoji-menu/component.jsx
similarity index 91%
rename from src/emoji-menu/index.jsx
rename to src/emoji-menu/component.jsx
index 64fb6329..a26f9157 100644
--- a/src/emoji-menu/index.jsx
+++ b/src/emoji-menu/component.jsx
@@ -2,21 +2,16 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import emojione from 'emojione';
 import _ from 'lodash';
-import Radium from 'radium';
-import compose from 'recompose/compose';
-import onClickOutside from 'react-onclickoutside';
 import EventListener from 'react-event-listener';
+import store from 'store';
 import emojis from './emoji';
 import EmojiCategory from './emoji-category';
 import EmojiModifiers from './emoji-modifiers';
 import EmojiCategories from './emoji-categories';
-import Storage from './storage';
 import getStyles from './get-styles';
-import themeable from '../themeable';
+import storeEmoji from '../internal/store-emoji';
 import colors from '../settings/colors';
 
-const storage = new Storage();
-
 emojione.emojiSize = '64';
 
 const propTypes = {
@@ -68,7 +63,7 @@ class EmojiMenu extends Component {
   constructor(props) {
     super(props);
 
-    const storedEmojis = storage.getEmojis();
+    const storedEmojis = store.get('recent-emoji');
 
     this.state = {
       tone: 'tone0',
@@ -110,10 +105,10 @@ class EmojiMenu extends Component {
   sendEmoji(event, emoji) {
     const { sendEmoji } = this.props;
 
-    storage.storeEmoji(emoji);
+    storeEmoji(emoji);
     sendEmoji(event, emoji);
 
-    const storedEmojis = storage.getEmojis();
+    const storedEmojis = store.get('recent-emoji');
 
     this.setState({
       storedEmojis: storedEmojis || []
@@ -204,14 +199,8 @@ class EmojiMenu extends Component {
   }
 }
 
-const enhance = compose(
-  themeable(),
-  onClickOutside,
-  Radium
-);
-
 EmojiMenu.propTypes = propTypes;
 EmojiMenu.defaultProps = defaultProps;
 EmojiMenu.displayName = displayName;
 
-export default enhance(EmojiMenu);
+export default EmojiMenu;
diff --git a/src/emoji-menu/index.js b/src/emoji-menu/index.js
new file mode 100644
index 00000000..e5acb668
--- /dev/null
+++ b/src/emoji-menu/index.js
@@ -0,0 +1,13 @@
+import Radium from 'radium';
+import compose from 'recompose/compose';
+import onClickOutside from 'react-onclickoutside';
+import themeable from '../themeable';
+import EmojiMenu from './component';
+
+const enhance = compose(
+  themeable(),
+  onClickOutside,
+  Radium
+);
+
+export default enhance(EmojiMenu);
diff --git a/src/emoji-menu/storage.js b/src/emoji-menu/storage.js
deleted file mode 100644
index 7a68758b..00000000
--- a/src/emoji-menu/storage.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/* eslint-env browser */
-import _ from 'lodash';
-
-class Storage {
-  static storeItem(key, value) {
-    try {
-      localStorage.setItem(key, JSON.stringify(value));
-    } catch (err) {
-      console.error('Error while saving to localStorage.', err); // eslint-disable-line no-console
-    }
-  }
-
-  static getItem(key) {
-    let item = null;
-
-    try {
-      item = JSON.parse(localStorage.getItem(key));
-    } catch (err) {
-      console.error('Error while retrieving item from localStorage.', err); // eslint-disable-line no-console
-    }
-
-    return item;
-  }
-
-  storeEmoji(emoji) {
-    const key = 'recent-emoji';
-    const storedEmojis = this.getEmojis();
-    let value;
-
-    if (
-      storedEmojis &&
-      _.find(storedEmojis, storedEmoji => storedEmoji.shortname === emoji.shortname)
-    ) {
-      return false;
-    }
-
-    if (!storedEmojis) {
-      value = [emoji];
-    }
-
-    if (
-      storedEmojis &&
-      !_.find(storedEmojis, storedEmoji => storedEmoji.shortname === emoji.shortname)
-    ) {
-      storedEmojis.unshift(emoji);
-      value = storedEmojis;
-    }
-
-    if (value.length > 42) {
-      value.pop();
-    }
-
-    this.constructor.storeItem(key, value);
-
-    return false;
-  }
-
-  getEmojis() {
-    return this.constructor.getItem('recent-emoji');
-  }
-}
-
-export default Storage;
diff --git a/src/empty-state/index.jsx b/src/empty-state/component.jsx
similarity index 71%
rename from src/empty-state/index.jsx
rename to src/empty-state/component.jsx
index e12da963..1bac022c 100644
--- a/src/empty-state/index.jsx
+++ b/src/empty-state/component.jsx
@@ -1,25 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Radium from 'radium';
-import styles from './styles';
 import getStyles from './get-styles';
-import combineStyles from '../internal/combine-styles';
 
-/** Pretty placeholder for empty content */
-const EmptyState = ({
-  headerText, bodyText, button, background, style, headingStyle, bodyStyle, ...custom
-}) => (
-
-  <section style={getStyles.root(background, style)} {...custom}>
-    <h1 style={combineStyles(styles.heading, headingStyle)}>{headerText}</h1>
-    <p style={combineStyles(styles.body, bodyStyle)}>{bodyText}</p>
-    {button}
-  </section>
-);
-
-EmptyState.displayName = 'EmptyState';
-
-EmptyState.propTypes = {
+const propTypes = {
   /** Body text */
   headerText: PropTypes.node.isRequired,
   /** Header text */
@@ -36,7 +19,7 @@ EmptyState.propTypes = {
   bodyStyle: PropTypes.instanceOf(Object)
 };
 
-EmptyState.defaultProps = {
+const defaultProps = {
   button: null,
   background: '',
   style: {},
@@ -44,4 +27,21 @@ EmptyState.defaultProps = {
   bodyStyle: {}
 };
 
-export default Radium(EmptyState);
+const displayName = 'EmptyState';
+
+/** Pretty placeholder for empty content */
+const EmptyState = ({
+  headerText, bodyText, button, background, style, headingStyle, bodyStyle, ...custom
+}) => (
+  <section style={getStyles.root(background, style)} {...custom}>
+    <h1 style={getStyles.heading(headingStyle)}>{headerText}</h1>
+    <p style={getStyles.body(bodyStyle)}>{bodyText}</p>
+    {button}
+  </section>
+);
+
+EmptyState.propTypes = propTypes;
+EmptyState.defaultProps = defaultProps;
+EmptyState.displayName = displayName;
+
+export default EmptyState;
diff --git a/src/empty-state/get-styles.js b/src/empty-state/get-styles.js
index 8adcdf6f..3a4b086a 100644
--- a/src/empty-state/get-styles.js
+++ b/src/empty-state/get-styles.js
@@ -7,6 +7,12 @@ const root = (image, overrideStyle) => {
   return combineStyles(style, overrideStyle);
 };
 
+const heading = overrideStyle => combineStyles(styles.heading, overrideStyle);
+
+const body = overrideStyle => combineStyles(styles.body, overrideStyle);
+
 export default {
-  root
+  root,
+  heading,
+  body
 };
diff --git a/src/empty-state/index.js b/src/empty-state/index.js
new file mode 100644
index 00000000..e68e02c0
--- /dev/null
+++ b/src/empty-state/index.js
@@ -0,0 +1,4 @@
+import Radium from 'radium';
+import EmptyState from './component';
+
+export default Radium(EmptyState);
diff --git a/src/gallery/index.jsx b/src/gallery/component.jsx
similarity index 98%
rename from src/gallery/index.jsx
rename to src/gallery/component.jsx
index 78feaa42..3d710333 100644
--- a/src/gallery/index.jsx
+++ b/src/gallery/component.jsx
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Radium from 'radium';
 import map from 'lodash/map';
 import isEmpty from 'lodash/isEmpty';
 import styles from './styles';
@@ -124,4 +123,4 @@ Gallery.displayName = displayName;
 Gallery.propTypes = propTypes;
 Gallery.defaultProps = defaultProps;
 
-export default Radium(Gallery);
+export default Gallery;
diff --git a/src/gallery/index.js b/src/gallery/index.js
new file mode 100644
index 00000000..0fdf304c
--- /dev/null
+++ b/src/gallery/index.js
@@ -0,0 +1,4 @@
+import Radium from 'radium';
+import Gallery from './component';
+
+export default Radium(Gallery);
diff --git a/src/icon-menu/index.jsx b/src/icon-menu/component.jsx
similarity index 96%
rename from src/icon-menu/index.jsx
rename to src/icon-menu/component.jsx
index 230bc2a5..ef889d9f 100644
--- a/src/icon-menu/index.jsx
+++ b/src/icon-menu/component.jsx
@@ -1,9 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Radium from 'radium';
 import EventListener from 'react-event-listener';
-import compose from 'recompose/compose';
-import onClickOutside from 'react-onclickoutside';
 import PopOver from '../pop-over';
 import Button from '../button';
 import getStyles from './get-styles';
@@ -213,9 +210,4 @@ IconMenu.displayName = displayName;
 IconMenu.propTypes = propTypes;
 IconMenu.defaultProps = defaultProps;
 
-const enhance = compose(
-  onClickOutside,
-  Radium
-);
-
-export default enhance(IconMenu);
+export default IconMenu;
diff --git a/src/icon-menu/get-styles.js b/src/icon-menu/get-styles.js
index 4f838fcf..9b017e20 100644
--- a/src/icon-menu/get-styles.js
+++ b/src/icon-menu/get-styles.js
@@ -1,9 +1,7 @@
 import styles from './styles';
 import combineStyles from '../internal/combine-styles';
 
-function root(overrideStyle) {
-  return combineStyles(styles.root, overrideStyle);
-}
+const root = overrideStyle => combineStyles(styles.root, overrideStyle);
 
 export default {
   root
diff --git a/src/icon-menu/index.js b/src/icon-menu/index.js
new file mode 100644
index 00000000..ad371270
--- /dev/null
+++ b/src/icon-menu/index.js
@@ -0,0 +1,11 @@
+import Radium from 'radium';
+import compose from 'recompose/compose';
+import onClickOutside from 'react-onclickoutside';
+import IconMenu from './component';
+
+const enhance = compose(
+  onClickOutside,
+  Radium
+);
+
+export default enhance(IconMenu);
diff --git a/src/input/index.jsx b/src/input/component.jsx
similarity index 96%
rename from src/input/index.jsx
rename to src/input/component.jsx
index 377226b5..0f03a0b4 100644
--- a/src/input/index.jsx
+++ b/src/input/component.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Radium, { Style } from 'radium';
+import { Style } from 'radium';
 import getStyles from './get-styles';
 
 const propTypes = {
@@ -160,7 +160,7 @@ class Input extends Component {
 
     return (
       <section style={getStyles.root(disabled, style)}>
-        <label style={getStyles.label(labelStyle)} htmlFor={name}> {label} </label>
+        {label ? <label style={getStyles.label(labelStyle)} htmlFor={name}>{label}</label> : null}
         {input}
         <Style
           rules={{
@@ -177,4 +177,4 @@ Input.displayName = displayName;
 Input.propTypes = propTypes;
 Input.defaultProps = defaultProps;
 
-export default Radium(Input);
+export default Input;
diff --git a/src/input/index.js b/src/input/index.js
new file mode 100644
index 00000000..cfd21e40
--- /dev/null
+++ b/src/input/index.js
@@ -0,0 +1,4 @@
+import Radium from 'radium';
+import Input from './component';
+
+export default Radium(Input);
diff --git a/src/internal/get-percentage.js b/src/internal/get-percentage.js
index f443b68d..cc704c93 100644
--- a/src/internal/get-percentage.js
+++ b/src/internal/get-percentage.js
@@ -1,7 +1,9 @@
-// date: 28-11 '17
-// This function should make of lodash isNumber()
-// however this doesn't work as expected
-// Should remove isNaN when isNumber works as intended
+// 8-1-17
+// Not using lodash, this because isNumber(NaN) returns true
+// The lodash docs say,
+// Note: To exclude Infinity, -Infinity, and NaN,
+// which are classified as numbers, use the _.isFinite method.
+
 const getPercentage = (value, min, max) => {
   let percentage = (value - min) / (max - min);
 
diff --git a/src/internal/store-emoji.js b/src/internal/store-emoji.js
new file mode 100644
index 00000000..cb893221
--- /dev/null
+++ b/src/internal/store-emoji.js
@@ -0,0 +1,14 @@
+import _ from 'lodash';
+import store from 'store';
+
+const storeEmoji = (emoji) => {
+  let storedEmojis = store.get('recent-emoji');
+
+  if (!_.isArray(storedEmojis)) {
+    storedEmojis = [];
+  }
+
+  store.set('recent-emoji', _.take(_.unionBy([emoji], storedEmojis, 'shortname'), 42));
+};
+
+export default storeEmoji;
diff --git a/src/lightbox/index.jsx b/src/lightbox/component.jsx
similarity index 97%
rename from src/lightbox/index.jsx
rename to src/lightbox/component.jsx
index 2ce9f69a..ef50858e 100644
--- a/src/lightbox/index.jsx
+++ b/src/lightbox/component.jsx
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Radium from 'radium';
 import EventListener from 'react-event-listener';
 import styles from './styles';
 import Button from '../button';
@@ -91,4 +90,4 @@ Lightbox.displayName = displayName;
 Lightbox.propTypes = propTypes;
 Lightbox.defaultProps = defaultProps;
 
-export default Radium(Lightbox);
+export default Lightbox;
diff --git a/src/lightbox/get-styles.js b/src/lightbox/get-styles.js
index 1e66f402..91373fb5 100644
--- a/src/lightbox/get-styles.js
+++ b/src/lightbox/get-styles.js
@@ -1,10 +1,6 @@
 import combineStyles from '../internal/combine-styles';
 import styles from './styles';
 
-const root = (overrideStyle) => {
-  const style = styles.lightbox;
-
-  return combineStyles(style, overrideStyle);
-};
+const root = overrideStyle => combineStyles(styles.lightbox, overrideStyle);
 
 export default { root };
diff --git a/src/lightbox/index.js b/src/lightbox/index.js
new file mode 100644
index 00000000..70d33787
--- /dev/null
+++ b/src/lightbox/index.js
@@ -0,0 +1,4 @@
+import Radium from 'radium';
+import Lightbox from './component';
+
+export default Radium(Lightbox);
diff --git a/src/list-item/index.jsx b/src/list-item/component.jsx
similarity index 94%
rename from src/list-item/index.jsx
rename to src/list-item/component.jsx
index c16b500e..2b163bb6 100644
--- a/src/list-item/index.jsx
+++ b/src/list-item/component.jsx
@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Radium from 'radium';
-import compose from 'recompose/compose';
 import styles from './styles';
 import colors from '../settings/colors';
 import Avatar from '../avatar';
@@ -11,7 +9,6 @@ import IconChevronDown from '../icons/icon-chevron-down';
 import getStyles from './get-styles';
 import Button from '../button';
 import List from '../list';
-import themeable from '../themeable';
 
 const displayName = 'ListItem';
 
@@ -152,7 +149,7 @@ class ListItem extends Component {
 
     return (
       <div style={styles.container}>
-        <li key="listItem" onClick={rootClick} style={getStyles.root(color, active, rightButton || nestedList, avatar, secondaryText || textBadge, nestedLevel, style)} {...custom}>
+        <li key="listItem" onClick={rootClick} style={getStyles.root(color, active, secondaryText || textBadge, nestedLevel, style)} {...custom}>
           {
             avatar
             ? (
@@ -212,9 +209,4 @@ ListItem.displayName = displayName;
 ListItem.propTypes = propTypes;
 ListItem.defaultProps = defaultProps;
 
-const enhance = compose(
-  themeable(),
-  Radium
-);
-
-export default enhance(ListItem);
+export default ListItem;
diff --git a/src/list-item/get-styles.js b/src/list-item/get-styles.js
index ba2323cb..7050f6ad 100644
--- a/src/list-item/get-styles.js
+++ b/src/list-item/get-styles.js
@@ -6,10 +6,8 @@ import styles from './styles';
 const root = (
   color = colors.theme,
   active,
-  rightButton,
-  avatar,
   secondaryLine = null,
-  nestedLevel,
+  nestedLevel = 0,
   overrideStyle
 ) => {
   let style = styles.root;
@@ -36,7 +34,7 @@ const root = (
   return combineStyles(style, overrideStyle);
 };
 
-const text = (textStyle, active, textBadge, overrideStyle) => {
+const text = (textStyle = {}, active, textBadge, overrideStyle) => {
   let style = textStyle;
 
   if (active) {
diff --git a/src/list-item/index.js b/src/list-item/index.js
new file mode 100644
index 00000000..b16cff54
--- /dev/null
+++ b/src/list-item/index.js
@@ -0,0 +1,11 @@
+import Radium from 'radium';
+import compose from 'recompose/compose';
+import themeable from '../themeable';
+import ListItem from './component';
+
+const enhance = compose(
+  themeable(),
+  Radium
+);
+
+export default enhance(ListItem);
diff --git a/src/list/index.jsx b/src/list/component.jsx
similarity index 96%
rename from src/list/index.jsx
rename to src/list/component.jsx
index 0ea2fbfa..a7d6f124 100644
--- a/src/list/index.jsx
+++ b/src/list/component.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Radium from 'radium';
 import getStyles from './get-styles';
 
 const displayName = 'List';
@@ -55,4 +54,4 @@ List.displayName = displayName;
 List.propTypes = propTypes;
 List.defaultProps = defaultProps;
 
-export default Radium(List);
+export default List;
diff --git a/src/list/get-styles.js b/src/list/get-styles.js
index cfd06ced..1c0242df 100644
--- a/src/list/get-styles.js
+++ b/src/list/get-styles.js
@@ -1,13 +1,9 @@
 import styles from './styles';
 import combineStyles from '../internal/combine-styles';
 
-function root(overrideStyle) {
-  return combineStyles(styles.root, overrideStyle);
-}
+const root = overrideStyle => combineStyles(styles.root, overrideStyle);
 
-function listHeader(overrideStyle) {
-  return combineStyles(styles.listHeader, overrideStyle);
-}
+const listHeader = overrideStyle => combineStyles(styles.listHeader, overrideStyle);
 
 export default {
   root,
diff --git a/src/list/index.js b/src/list/index.js
new file mode 100644
index 00000000..9ed398d2
--- /dev/null
+++ b/src/list/index.js
@@ -0,0 +1,4 @@
+import Radium from 'radium';
+import List from './component';
+
+export default Radium(List);
diff --git a/src/radio-button-group/index.jsx b/src/radio-button-group/index.jsx
index ec882cc9..f3c4a085 100644
--- a/src/radio-button-group/index.jsx
+++ b/src/radio-button-group/index.jsx
@@ -3,32 +3,7 @@ import PropTypes from 'prop-types';
 import Radium from 'radium';
 import getStyles from './get-styles';
 
-const RadioButtonGroup = ({
-  value, onChange, children, buttonStyle, label, labelStyle, style, error, errorStyle, ...custom
-}) => {
-  const childrenWithProps = React.Children.map(
-    children,
-    child => React.cloneElement(
-      child,
-      {
-        checked: child.props.value === value,
-        onChange
-      }
-    )
-  );
-
-  return (
-    <section {...custom} style={style}>
-      {label ? <span style={getStyles.label(labelStyle)}>{label}</span> : null}
-      <section style={getStyles.buttons(buttonStyle)}>
-        {childrenWithProps}
-      </section>
-      {error ? <span style={getStyles.error(errorStyle)}>{error}</span> : null}
-    </section>
-  );
-};
-
-RadioButtonGroup.propTypes = {
+const propTypes = {
   /** The RadioButtonGroup's value */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   /**
@@ -53,7 +28,7 @@ RadioButtonGroup.propTypes = {
   errorStyle: PropTypes.instanceOf(Object)
 };
 
-RadioButtonGroup.defaultProps = {
+const defaultProps = {
   label: null,
   labelStyle: {},
   style: {},
@@ -62,6 +37,35 @@ RadioButtonGroup.defaultProps = {
   buttonStyle: {}
 };
 
-RadioButtonGroup.displayName = 'RadioButtonGroup';
+const displayName = 'RadioButtonGroup';
+
+const RadioButtonGroup = ({
+  value, onChange, children, buttonStyle, label, labelStyle, style, error, errorStyle, ...custom
+}) => {
+  const childrenWithProps = React.Children.map(
+    children,
+    child => React.cloneElement(
+      child,
+      {
+        checked: child.props.value === value,
+        onChange
+      }
+    )
+  );
+
+  return (
+    <section {...custom} style={style}>
+      {label ? <span style={getStyles.label(labelStyle)}>{label}</span> : null}
+      <section style={getStyles.buttons(buttonStyle)}>
+        {childrenWithProps}
+      </section>
+      {error ? <span style={getStyles.error(errorStyle)}>{error}</span> : null}
+    </section>
+  );
+};
+
+RadioButtonGroup.propTypes = propTypes;
+RadioButtonGroup.defaultProps = defaultProps;
+RadioButtonGroup.displayName = displayName;
 
 export default Radium(RadioButtonGroup);
diff --git a/src/radio-button/index.jsx b/src/radio-button/index.jsx
index 407a47d3..2c667c2b 100644
--- a/src/radio-button/index.jsx
+++ b/src/radio-button/index.jsx
@@ -7,34 +7,7 @@ import IconRadio from '../icons/icon-radio';
 import getStyles from './get-styles';
 import themeable from '../themeable';
 
-/** Radio buttons are switches used for selection from multiple options */
-const RadioButton = ({
-  value, label, style, inputStyle, iconStyle, labelStyle, onChange, checked, color, icon, ...custom
-}) => (
-  <label key="radio" htmlFor={value} style={getStyles.root(color, style)}>
-    <input
-      type="radio"
-      value={value}
-      id={value}
-      onChange={onChange}
-      checked={checked}
-      style={getStyles.input(inputStyle)}
-      {...custom}
-    />
-    <div style={getStyles.icon(iconStyle)}>
-      {icon || <IconRadio color={checked ? color || colors.theme : colors.icons} />}
-    </div>
-    {
-      label
-      ? <span style={getStyles.label(labelStyle)}>{label}</span>
-      : null
-    }
-  </label>
-);
-
-RadioButton.displayName = 'RadioButton';
-
-RadioButton.propTypes = {
+const propTypes = {
   /** The input's value */
   value: PropTypes.string.isRequired,
   /** The input's label text */
@@ -60,7 +33,7 @@ RadioButton.propTypes = {
   color: PropTypes.string.isRequired
 };
 
-RadioButton.defaultProps = {
+const defaultProps = {
   style: {},
   inputStyle: {},
   iconStyle: {},
@@ -71,6 +44,33 @@ RadioButton.defaultProps = {
   icon: null
 };
 
+const displayName = 'RadioButton';
+
+/** Radio buttons are switches used for selection from multiple options */
+const RadioButton = ({
+  value, label, style, inputStyle, iconStyle, labelStyle, onChange, checked, color, icon, ...custom
+}) => (
+  <label key="radio" htmlFor={value} style={getStyles.root(color, style)}>
+    <input
+      type="radio"
+      value={value}
+      id={value}
+      onChange={onChange}
+      checked={checked}
+      style={getStyles.input(inputStyle)}
+      {...custom}
+    />
+    <div style={getStyles.icon(iconStyle)}>
+      {icon || <IconRadio color={checked ? color || colors.theme : colors.icons} />}
+    </div>
+    {label ? <span style={getStyles.label(labelStyle)}>{label}</span> : null}
+  </label>
+);
+
+RadioButton.propTypes = propTypes;
+RadioButton.defaultProps = defaultProps;
+RadioButton.displayName = displayName;
+
 const enhance = compose(
   themeable(),
   Radium
diff --git a/src/select/index.jsx b/src/select/index.jsx
index 9ea1d323..1d270ad2 100644
--- a/src/select/index.jsx
+++ b/src/select/index.jsx
@@ -182,7 +182,7 @@ class Select extends Component {
         style={combineStyles(styles.root, style)}
         {...custom}
       >
-        <span style={combineStyles(styles.label, labelStyle)}>{label}</span>
+        {label ? <span style={combineStyles(styles.label, labelStyle)}>{label}</span> : null}
         <header
           ref={(button) => { this.button = button; }}
           style={getStyles.header(error, color, headerStyle)}
diff --git a/src/slider/index.jsx b/src/slider/index.jsx
index 0c25eaec..1ea0e9a7 100644
--- a/src/slider/index.jsx
+++ b/src/slider/index.jsx
@@ -5,9 +5,55 @@ import compose from 'recompose/compose';
 import styles from './styles';
 import getStyles from './get-styles';
 import getPercentage from '../internal/get-percentage';
-import propTypes from '../internal/prop-types';
+import customPropTypes from '../internal/prop-types';
 import themeable from '../themeable';
 
+const propTypes = {
+  /**
+   * Callback fired when Slider's value changes
+   *
+   * function(event: object) => void
+   */
+  onChange: PropTypes.func.isRequired,
+  /** The slider's value. Must between min and max */
+  value: customPropTypes.valueInRange,
+  /** The slider's label */
+  label: PropTypes.node.isRequired,
+  /** The slider's name */
+  name: PropTypes.string.isRequired,
+  /** The slider's max value. Cannot be equal to min. */
+  max: customPropTypes.minMax,
+  /** The slider's min value. Cannot be equal to max. */
+  min: customPropTypes.minMax,
+  /** The slider's step value */
+  step: PropTypes.number,
+  /** Disables the slider */
+  disabled: PropTypes.bool,
+  /** Display an error message */
+  error: PropTypes.node,
+  /** Override the styles of the error element */
+  errorStyle: PropTypes.instanceOf(Object),
+  /** Override the styles of the root element */
+  style: PropTypes.instanceOf(Object),
+  /** Override the styles of the label element */
+  labelStyle: PropTypes.instanceOf(Object),
+  color: PropTypes.string.isRequired
+};
+
+const defaultProps = {
+  max: 1,
+  min: 0,
+  value: 0,
+  step: null,
+  disabled: false,
+  error: null,
+  errorStyle: {},
+  style: {},
+  labelStyle: {}
+};
+
+const displayName = 'Slider';
+
 /** General purpose form slider */
 const Slider = ({
   name,
@@ -54,51 +100,9 @@ const Slider = ({
   );
 };
 
-Slider.displayName = 'Slider';
-
-Slider.propTypes = {
-  /**
-   * Callback fired when Slider's value changes
-   *
-   * function(event: object) => void
-   */
-  onChange: PropTypes.func.isRequired,
-  /** The slider's value. Must between min and max */
-  value: propTypes.valueInRange,
-  /** The slider's label */
-  label: PropTypes.node.isRequired,
-  /** The slider's name */
-  name: PropTypes.string.isRequired,
-  /** The slider's max value. Cannot be equal to min. */
-  max: propTypes.minMax,
-  /** The slider's min value. Cannot be equal to max. */
-  min: propTypes.minMax,
-  /** The slider's step value */
-  step: PropTypes.number,
-  /** Disables the slider */
-  disabled: PropTypes.bool,
-  /** Display an error message */
-  error: PropTypes.node,
-  /** Override the styles of the error element */
-  errorStyle: PropTypes.instanceOf(Object),
-  /** Override the styles of the root element */
-  style: PropTypes.instanceOf(Object),
-  /** Override the styles of the label element */
-  labelStyle: PropTypes.instanceOf(Object),
-  color: PropTypes.string.isRequired
-};
-
-Slider.defaultProps = {
-  max: 1,
-  min: 0,
-  value: 0,
-  step: null,
-  disabled: false,
-  error: null,
-  errorStyle: {},
-  style: {},
-  labelStyle: {}
-};
+Slider.propTypes = propTypes;
+Slider.defaultProps = defaultProps;
+Slider.displayName = displayName;
 
 const enhance = compose(
   themeable(),
diff --git a/src/switch/index.jsx b/src/switch/index.jsx
index df713850..1221acdc 100644
--- a/src/switch/index.jsx
+++ b/src/switch/index.jsx
@@ -6,21 +6,7 @@ import styles from './styles';
 import getStyles from './get-styles';
 import themeable from '../themeable';
 
-const Switch = ({
-  active, label, toggleSwitch, style, trackStyle, knobStyle, labelStyle, color, ...custom
-}) => (
-  <section style={style} {...custom}>
-    <span style={getStyles.label(labelStyle)}>{label}</span>
-    <section style={styles.wrapper} onClick={toggleSwitch}>
-      <div style={getStyles.track(color, active, trackStyle)} />
-      <div style={getStyles.knob(color, active, knobStyle)} />
-    </section>
-  </section>
-);
-
-Switch.displayName = 'Switch';
-
-Switch.propTypes = {
+const propTypes = {
   /** The Switch's active state */
   active: PropTypes.bool,
   /**
@@ -42,7 +28,7 @@ Switch.propTypes = {
   color: PropTypes.string.isRequired
 };
 
-Switch.defaultProps = {
+const defaultProps = {
   active: false,
   label: null,
   style: {},
@@ -51,6 +37,24 @@ Switch.defaultProps = {
   labelStyle: {}
 };
 
+const displayName = 'Switch';
+
+const Switch = ({
+  active, label, toggleSwitch, style, trackStyle, knobStyle, labelStyle, color, ...custom
+}) => (
+  <section style={style} {...custom}>
+    {label ? <span style={getStyles.label(labelStyle)}>{label}</span> : null}
+    <section style={styles.wrapper} onClick={toggleSwitch}>
+      <div style={getStyles.track(color, active, trackStyle)} />
+      <div style={getStyles.knob(color, active, knobStyle)} />
+    </section>
+  </section>
+);
+
+Switch.propTypes = propTypes;
+Switch.defaultProps = defaultProps;
+Switch.displayName = displayName;
+
 const enhance = compose(
   themeable(),
   Radium
diff --git a/src/tab/index.jsx b/src/tab/index.jsx
index b2e06777..8e9c0368 100644
--- a/src/tab/index.jsx
+++ b/src/tab/index.jsx
@@ -5,35 +5,7 @@ import compose from 'recompose/compose';
 import getStyles from './get-styles';
 import themeable from '../themeable';
 
-const Tab = ({
-  onClick,
-  icon,
-  label,
-  selected,
-  style,
-  iconStyle,
-  labelStyle,
-  badge,
-  badgeStyle,
-  activeStyle,
-  activeLabelStyle,
-  color,
-  ...custom
-}) => (
-  <section
-    style={getStyles.root(color, selected, style, activeStyle)}
-    onClick={onClick}
-    {...custom}
-  >
-    {icon ? <div style={getStyles.icon(selected, iconStyle)}>{icon}</div> : null}
-    <span style={getStyles.label(selected, labelStyle, activeLabelStyle)}>{label}</span>
-    {badge ? <div style={getStyles.badge(badgeStyle)}>{badge}</div> : null}
-  </section>
-);
-
-Tab.displayName = 'Tab';
-
-Tab.propTypes = {
+const propTypes = {
   /** The Tab's icon */
   icon: PropTypes.node,
   /** The Tab's label */
@@ -63,7 +35,7 @@ Tab.propTypes = {
   color: PropTypes.string.isRequired
 };
 
-Tab.defaultProps = {
+const defaultProps = {
   icon: null,
   selected: false,
   style: {},
@@ -75,6 +47,38 @@ Tab.defaultProps = {
   activeLabelStyle: {}
 };
 
+const displayName = 'Tab';
+
+const Tab = ({
+  onClick,
+  icon,
+  label,
+  selected,
+  style,
+  iconStyle,
+  labelStyle,
+  badge,
+  badgeStyle,
+  activeStyle,
+  activeLabelStyle,
+  color,
+  ...custom
+}) => (
+  <section
+    style={getStyles.root(color, selected, style, activeStyle)}
+    onClick={onClick}
+    {...custom}
+  >
+    {icon ? <div style={getStyles.icon(selected, iconStyle)}>{icon}</div> : null}
+    <span style={getStyles.label(selected, labelStyle, activeLabelStyle)}>{label}</span>
+    {badge ? <div style={getStyles.badge(badgeStyle)}>{badge}</div> : null}
+  </section>
+);
+
+Tab.propTypes = propTypes;
+Tab.defaultProps = defaultProps;
+Tab.displayName = displayName;
+
 const enhance = compose(
   themeable(),
   Radium
diff --git a/test/checkbox-group/get-styles.test.js b/test/checkbox-group/get-styles.test.js
new file mode 100644
index 00000000..9657e9b3
--- /dev/null
+++ b/test/checkbox-group/get-styles.test.js
@@ -0,0 +1,48 @@
+/* eslint-env mocha */
+import { expect } from 'chai';
+import getStyles from '../../src/checkbox-group/get-styles';
+import styles from '../../src/checkbox-group/styles';
+
+describe('CheckboxGroup.getStyles', () => {
+  describe('buttons', () => {
+    it('should get styles', () => {
+      const style = getStyles.buttons();
+
+      expect(style).to.deep.equal(styles.buttons);
+    });
+
+    it('should combine styles', () => {
+      const style = getStyles.buttons({ color: 'red' });
+
+      expect(style).to.have.property('color', 'red');
+    });
+  });
+
+  describe('label', () => {
+    it('should get styles', () => {
+      const style = getStyles.label();
+
+      expect(style).to.deep.equal(styles.label);
+    });
+
+    it('should combine styles', () => {
+      const style = getStyles.label({ color: 'red' });
+
+      expect(style).to.have.property('color', 'red');
+    });
+  });
+
+  describe('error', () => {
+    it('should get styles', () => {
+      const style = getStyles.error();
+
+      expect(style).to.deep.equal(styles.error);
+    });
+
+    it('should combine styles', () => {
+      const style = getStyles.error({ color: 'red' });
+
+      expect(style).to.have.property('color', 'red');
+    });
+  });
+});
diff --git a/test/checkbox-group/index.test.js b/test/checkbox-group/index.test.js
new file mode 100644
index 00000000..2d76b3af
--- /dev/null
+++ b/test/checkbox-group/index.test.js
@@ -0,0 +1,84 @@
+/* eslint-env mocha */
+/* eslint react/jsx-filename-extension: [0] */
+import React from 'react';
+import chai, { expect } from 'chai';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import CheckboxGroup from '../../src/checkbox-group/component';
+import Checkbox from '../../src/checkbox';
+import getStyles from '../../src/checkbox-group/get-styles';
+
+chai.use(sinonChai);
+
+describe('CheckboxGroup', () => {
+  const props = {
+    values: [],
+    onChange: () => {},
+    label: 'Label',
+    style: {},
+    labelStyle: {},
+    buttonStyle: {},
+    errorStyle: {}
+  };
+  const checkboxProps = {
+    value: 'one',
+    name: 'one',
+    label: 'one'
+  };
+
+  beforeEach(() => {
+    global.navigator = { userAgent: 'all' };
+  });
+
+  afterEach(() => {
+    global.navigator = undefined;
+  });
+
+  it('should render root elements', () => {
+    const component = shallow(<CheckboxGroup {...props}><Checkbox {...checkboxProps} /></CheckboxGroup>); // eslint-disable-line max-len
+
+    expect(component.find('section')).to.have.length(2);
+    expect(component.find('span')).to.have.length(1);
+    expect(component.find(Checkbox)).to.have.length(1);
+  });
+
+  it('should render error element', () => {
+    const component = shallow(<CheckboxGroup {...props}><Checkbox {...checkboxProps} /></CheckboxGroup>); // eslint-disable-line max-len
+
+    expect(component.find('span')).to.have.length(1);
+
+    component.setProps({ error: 'Text' });
+    expect(component.find('span')).to.have.length(2);
+    expect(component.containsMatchingElement(<span>Text</span>)).to.equal(true);
+
+    component.setProps({ error: <span>Node</span> });
+    expect(component.find('span')).to.have.length(3);
+    expect(component.find('span').at(1).containsMatchingElement(<span>Node</span>)).to.equal(true);
+  });
+
+  it('should get label styles', () => {
+    const spy = sinon.spy(getStyles, 'label');
+
+    shallow(<CheckboxGroup {...props}><Checkbox {...checkboxProps} /></CheckboxGroup>);
+    expect(spy).to.have.been.calledWith(props.labelStyle);
+  });
+
+  it('should get buttons styles', () => {
+    const spy = sinon.spy(getStyles, 'buttons');
+
+    shallow(<CheckboxGroup {...props}><Checkbox {...checkboxProps} /></CheckboxGroup>);
+    expect(spy).to.have.been.calledWith(props.buttonStyle);
+  });
+
+  it('should get error styles', () => {
+    const spy = sinon.spy(getStyles, 'error');
+    const combinedProps = {
+      ...props,
+      error: 'Text'
+    };
+
+    shallow(<CheckboxGroup {...combinedProps}><Checkbox {...checkboxProps} /></CheckboxGroup>);
+    expect(spy).to.have.been.calledWith(props.errorStyle);
+  });
+});
diff --git a/test/checkbox/get-styles.test.js b/test/checkbox/get-styles.test.js
index 5b0599c4..f6e8000f 100644
--- a/test/checkbox/get-styles.test.js
+++ b/test/checkbox/get-styles.test.js
@@ -65,4 +65,18 @@ describe('Checkbox.getStyles', () => {
       expect(style).to.have.property('color', 'red');
     });
   });
+
+  describe('unchecked', () => {
+    it('should get styles', () => {
+      const style = getStyles.unchecked();
+
+      expect(style).to.deep.equal(styles.unchecked);
+    });
+
+    it('should combine styles', () => {
+      const style = getStyles.unchecked({ color: 'red' });
+
+      expect(style).to.have.property('color', 'red');
+    });
+  });
 });
diff --git a/test/checkbox/index.test.js b/test/checkbox/index.test.js
index 94f68a28..31af5664 100644
--- a/test/checkbox/index.test.js
+++ b/test/checkbox/index.test.js
@@ -21,6 +21,7 @@ describe('Checkbox', () => {
     inputStyle: {},
     iconStyle: {},
     labelStyle: {},
+    uncheckedStyle: {},
     value: 'value',
     color: '#1BA6C4'
   };
@@ -97,6 +98,13 @@ describe('Checkbox', () => {
     expect(spy).to.have.been.calledWith(props.iconStyle);
   });
 
+  it('should get icon styles', () => {
+    const spy = sinon.spy(getStyles, 'unchecked');
+
+    shallow(<Checkbox {...props} />);
+    expect(spy).to.have.been.calledWith(props.uncheckedStyle);
+  });
+
   it('should get label styles', () => {
     const spy = sinon.spy(getStyles, 'label');
 
diff --git a/test/emoji-menu/get-styles.test.js b/test/emoji-menu/get-styles.test.js
index 3df63bf6..9c9b9e79 100644
--- a/test/emoji-menu/get-styles.test.js
+++ b/test/emoji-menu/get-styles.test.js
@@ -74,7 +74,7 @@ describe('EmojiMenu.getStyles', () => {
     });
   });
 
-  describe('modifierHeader', () => {
+  describe('header', () => {
     it('should get styles', () => {
       const style = getStyles.header();
 
@@ -88,6 +88,20 @@ describe('EmojiMenu.getStyles', () => {
     });
   });
 
+  describe('modifiers', () => {
+    it('should get styles', () => {
+      const style = getStyles.modifiers();
+
+      expect(style).to.deep.equal(styles.modifiers);
+    });
+
+    it('should combine styles', () => {
+      const style = getStyles.modifiers({ color: 'red' });
+
+      expect(style).to.have.property('color', 'red');
+    });
+  });
+
   describe('modifier', () => {
     it('should get styles', () => {
       const style = getStyles.modifier();
diff --git a/test/emoji-menu/index.test.js b/test/emoji-menu/index.test.js
new file mode 100644
index 00000000..3faa92af
--- /dev/null
+++ b/test/emoji-menu/index.test.js
@@ -0,0 +1,62 @@
+/* eslint-env mocha */
+/* eslint react/jsx-filename-extension: [0] */
+import React from 'react';
+import chai, { expect } from 'chai';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import EventListener from 'react-event-listener';
+import EmojiMenu from '../../src/emoji-menu/component';
+import EmojiModifiers from '../../src/emoji-menu/emoji-modifiers';
+import EmojiCategory from '../../src/emoji-menu/emoji-category';
+import EmojiCategories from '../../src/emoji-menu/emoji-categories';
+import getStyles from '../../src/emoji-menu/get-styles';
+
+chai.use(sinonChai);
+
+describe('EmojiFilter', () => {
+  const props = {
+    style: {},
+    hideMenu: () => {},
+    sendEmoji: () => {},
+    color: '#1BA6C4'
+  };
+
+  beforeEach(() => {
+    global.navigator = { userAgent: 'all' };
+  });
+
+  afterEach(() => {
+    global.navigator = undefined;
+  });
+
+  it('should be an instanceOf AdminBadge', () => {
+    const component = shallow(<EmojiMenu {...props} />);
+
+    expect(component.instance()).to.be.instanceOf(EmojiMenu);
+  });
+
+  it('should render root elements', () => {
+    const component = shallow(<EmojiMenu {...props} />);
+
+    expect(component.find('section')).to.have.length(0);
+    expect(component.find(EmojiModifiers)).to.have.length(0);
+    expect(component.find(EmojiCategory)).to.have.length(0);
+    expect(component.find(EmojiCategories)).to.have.length(0);
+    expect(component.find(EventListener)).to.have.length(0);
+
+    component.setProps({ open: true });
+    expect(component.find(EmojiModifiers)).to.have.length(1);
+    expect(component.find(EmojiCategory)).to.have.length(1);
+    expect(component.find(EmojiCategories)).to.have.length(1);
+    expect(component.find(EventListener)).to.have.length(1);
+  });
+
+  it('should get root styles', () => {
+    const spy = sinon.spy(getStyles, 'root');
+    const component = shallow(<EmojiMenu {...props} />);
+
+    component.setProps({ open: true });
+    expect(spy).to.have.been.calledWith(props.style);
+  });
+});
diff --git a/test/empty-state/get-styles.test.js b/test/empty-state/get-styles.test.js
index 3d3750fc..2ddce69c 100644
--- a/test/empty-state/get-styles.test.js
+++ b/test/empty-state/get-styles.test.js
@@ -16,5 +16,39 @@ describe('EmptyState.getStyles', () => {
 
       expect(style).to.have.property('color', 'red');
     });
+
+    it('should add backgroundImage', () => {
+      const style = getStyles.root('http://lorempixel.com/400/200');
+
+      expect(style).to.have.property('backgroundImage', 'url(http://lorempixel.com/400/200)');
+    });
+  });
+
+  describe('heading', () => {
+    it('should get styles', () => {
+      const style = getStyles.heading();
+
+      expect(style).to.deep.equal(styles.heading);
+    });
+
+    it('should combine styles', () => {
+      const style = getStyles.heading({ color: 'red' });
+
+      expect(style).to.have.property('color', 'red');
+    });
+  });
+
+  describe('body', () => {
+    it('should get styles', () => {
+      const style = getStyles.body();
+
+      expect(style).to.deep.equal(styles.body);
+    });
+
+    it('should combine styles', () => {
+      const style = getStyles.body({ color: 'red' });
+
+      expect(style).to.have.property('color', 'red');
+    });
   });
 });
diff --git a/test/empty-state/index.test.js b/test/empty-state/index.test.js
index 0ea1951c..18086e5a 100644
--- a/test/empty-state/index.test.js
+++ b/test/empty-state/index.test.js
@@ -5,7 +5,8 @@ import chai, { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
-import EmptyState from '../../src/empty-state';
+import EmptyState from '../../src/empty-state/component';
+import Button from '../../src/button';
 import getStyles from '../../src/empty-state/get-styles';
 
 chai.use(sinonChai);
@@ -14,11 +15,9 @@ describe('EmptyState', () => {
   const props = {
     headerText: '',
     bodyText: '',
-    button: <button>text</button>,
-    background: '',
-    style: { root: true },
-    headingStyle: { heading: true },
-    bodyStyle: { body: true }
+    style: {},
+    headingStyle: {},
+    bodyStyle: {}
   };
 
   beforeEach(() => {
@@ -29,37 +28,75 @@ describe('EmptyState', () => {
     global.navigator = undefined;
   });
 
-  it('should always render a section element', () => {
-    const wrapper = shallow(<EmptyState {...props} />);
+  it('should render root elements', () => {
+    const component = shallow(<EmptyState {...props} />);
 
-    expect(wrapper.find('section')).to.have.length(1);
+    expect(component.find('section')).to.have.length(1);
+    expect(component.find('h1')).to.have.length(1);
+    expect(component.find('p')).to.have.length(1);
   });
 
-  it('should always render an h1 element', () => {
-    const wrapper = shallow(<EmptyState {...props} />);
+  it('should render headerText', () => {
+    const combinedProps = {
+      ...props,
+      headerText: 'Text'
+    };
+    const component = shallow(<EmptyState {...combinedProps} />);
 
-    expect(wrapper.find('h1')).to.have.length(1);
+    expect(component.containsMatchingElement(<h1>Text</h1>)).to.equal(true);
+
+    component.setProps({ headerText: <span>Node</span> });
+    expect(component.find('h1 > span')).to.have.length(1);
+    expect(component.find('h1').containsMatchingElement(<span>Node</span>)).to.equal(true);
   });
 
-  it('should always render a p element', () => {
-    const wrapper = shallow(<EmptyState {...props} />);
+  it('should render bodyText', () => {
+    const combinedProps = {
+      ...props,
+      bodyText: 'Text'
+    };
+    const component = shallow(<EmptyState {...combinedProps} />);
+
+    expect(component.containsMatchingElement(<p>Text</p>)).to.equal(true);
 
-    expect(wrapper.find('p')).to.have.length(1);
+    component.setProps({ bodyText: <span>Node</span> });
+    expect(component.find('p > span')).to.have.length(1);
+    expect(component.find('p').containsMatchingElement(<span>Node</span>)).to.equal(true);
   });
 
-  it('should always render the button prop', () => {
-    const wrapper = shallow(<EmptyState {...props} />);
+  it('should render button element', () => {
+    const component = shallow(<EmptyState {...props} />);
 
-    expect(wrapper.containsMatchingElement(<button>text</button>)).to.equal(true);
+    expect(component.find(Button)).to.have.length(0);
+
+    component.setProps({ button: <Button>Button</Button> });
+    expect(component.find(Button)).to.have.length(1);
+    expect(component.find(Button).containsMatchingElement('Button')).to.equal(true);
   });
 
   it('should get root styles', () => {
     const spy = sinon.spy(getStyles, 'root');
+    const component = shallow(<EmptyState {...props} />);
+
+    expect(spy).to.have.been.calledWith('', props.style);
+
+    component.setProps({ background: 'http://lorempixel.com/400/200' });
+    expect(spy).to.have.been.calledWith('http://lorempixel.com/400/200', props.style);
+  });
+
+  it('should get heading styles', () => {
+    const spy = sinon.spy(getStyles, 'heading');
 
     shallow(<EmptyState {...props} />);
-    expect(spy).to.have.been.calledWith(
-      props.background,
-      props.style
-    );
+
+    expect(spy).to.have.been.calledWith(props.headingStyle);
+  });
+
+  it('should get heading styles', () => {
+    const spy = sinon.spy(getStyles, 'body');
+
+    shallow(<EmptyState {...props} />);
+
+    expect(spy).to.have.been.calledWith(props.bodyStyle);
   });
 });
diff --git a/test/gallery/get-styles.test.js b/test/gallery/get-styles.test.js
index bb556154..43f494ae 100644
--- a/test/gallery/get-styles.test.js
+++ b/test/gallery/get-styles.test.js
@@ -6,7 +6,7 @@ import styles from '../../src/gallery/styles';
 describe('Gallery.getStyles', () => {
   describe('root', () => {
     it('should get styles', () => {
-      const style = getStyles.root('');
+      const style = getStyles.root();
 
       expect(style).to.deep.equal(styles.root);
     });
@@ -20,7 +20,7 @@ describe('Gallery.getStyles', () => {
 
   describe('itemContainer', () => {
     it('should get styles', () => {
-      const style = getStyles.itemContainer('');
+      const style = getStyles.itemContainer();
 
       expect(style).to.deep.equal(styles.itemContainer);
     });
@@ -32,13 +32,13 @@ describe('Gallery.getStyles', () => {
     });
 
     it('should add height', () => {
-      const style = getStyles.itemContainer(240, false, {});
+      const style = getStyles.itemContainer(240);
 
       expect(style).to.have.property('height', '240px');
     });
 
     it('should add cursor', () => {
-      const style = getStyles.itemContainer(null, true, {});
+      const style = getStyles.itemContainer(null, true);
 
       expect(style).to.have.property('cursor', 'pointer');
     });
@@ -46,7 +46,7 @@ describe('Gallery.getStyles', () => {
 
   describe('item', () => {
     it('should get styles', () => {
-      const style = getStyles.item('');
+      const style = getStyles.item();
 
       expect(style).to.deep.equal(styles.item);
     });
@@ -58,7 +58,7 @@ describe('Gallery.getStyles', () => {
     });
 
     it('should add height', () => {
-      const style = getStyles.item(240, {});
+      const style = getStyles.item(240);
 
       expect(style).to.have.property('height', '240px');
     });
diff --git a/test/gallery/index.test.js b/test/gallery/index.test.js
index 890e0880..4716831f 100644
--- a/test/gallery/index.test.js
+++ b/test/gallery/index.test.js
@@ -5,24 +5,18 @@ import chai, { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
-import Gallery from '../../src/gallery';
+import Gallery from '../../src/gallery/component';
+import Lightbox from '../../src/lightbox';
 import getStyles from '../../src/gallery/get-styles';
 
 chai.use(sinonChai);
 
 describe('Gallery', () => {
   const props = {
-    items: [
-      {
-        src: 'https://source.unsplash.com/featured/?man',
-        alt: 'https://source.unsplash.com/featured/?man'
-      },
-      {
-        src: 'https://source.unsplash.com/featured/?woman',
-        alt: 'https://source.unsplash.com/featured/?woman'
-      }
-    ],
-    style: {}
+    items: [],
+    style: {},
+    itemContainerStyle: {},
+    itemStyle: {}
   };
 
   beforeEach(() => {
@@ -33,30 +27,75 @@ describe('Gallery', () => {
     global.navigator = undefined;
   });
 
-  it('should render a section element', () => {
-    const wrapper = shallow(<Gallery />);
+  it('should be an instanceOf Gallery', () => {
+    const component = shallow(<Gallery {...props} />);
 
-    expect(wrapper.find('section')).to.have.length(1);
+    expect(component.instance()).to.be.instanceOf(Gallery);
   });
 
-  it('should render a div element', () => {
-    const wrapper = shallow(<Gallery />);
+  it('should render root elements', () => {
+    const component = shallow(<Gallery {...props} />);
 
-    expect(wrapper.find('div')).to.have.length(1);
+    expect(component.find('section')).to.have.length(1);
+    expect(component.find('div')).to.have.length(1);
   });
 
-  it('should render 3 div elements', () => {
-    const wrapper = shallow(<Gallery {...props} />);
+  it('should render items', () => {
+    const component = shallow(<Gallery {...props} />);
 
-    expect(wrapper.find('div')).to.have.length(3);
+    expect(component.find('div')).to.have.length(1);
+
+    component.setProps({
+      items: [{
+        src: 'https://source.unsplash.com/featured/?man',
+        alt: 'https://source.unsplash.com/featured/?man'
+      }]
+    });
+    expect(component.find('div')).to.have.length(2);
+    expect(component.find('div > img')).to.have.length(1);
+    const links = component.find('img').map(node => node.prop('src'));
+    expect(links).to.deep.equal(['https://source.unsplash.com/featured/?man']);
   });
 
-  it('should render 2 img elements', () => {
-    const wrapper = shallow(<Gallery {...props} />);
+  it('should render Lightbox', () => {
+    const combinedProps = {
+      ...props,
+      items: [{
+        src: 'https://source.unsplash.com/featured/?man',
+        alt: 'https://source.unsplash.com/featured/?man'
+      }]
+    };
+    const component = shallow(<Gallery {...combinedProps} />);
 
-    expect(wrapper.find('img')).to.have.length(2);
-    const links = wrapper.find('img').map(node => node.prop('src'));
-    expect(links).to.deep.equal(['https://source.unsplash.com/featured/?man', 'https://source.unsplash.com/featured/?woman']);
+    expect(component.find(Lightbox)).to.have.length(0);
+
+    component.setProps({ enableLightbox: true });
+    expect(component.find(Lightbox)).to.have.length(0);
+
+    component.setState({ lightbox: combinedProps.items[0] });
+    expect(component.find(Lightbox)).to.have.length(1);
+  });
+
+  it('should call onClick of itemContainer', () => {
+    const spy = sinon.spy();
+    const combinedProps = {
+      ...props,
+      items: [{
+        src: 'https://source.unsplash.com/featured/?man',
+        alt: 'https://source.unsplash.com/featured/?man'
+      }],
+      onItemClick: spy
+    };
+    const component = shallow(<Gallery {...combinedProps} />);
+
+    component.find('div').at(0).simulate('click');
+    expect(spy).to.have.callCount(1);
+    expect(component.find(Lightbox)).to.have.length(0);
+
+    component.setProps({ enableLightbox: true });
+    component.find('div').at(0).simulate('click');
+    expect(spy).to.have.callCount(1);
+    expect(component.find(Lightbox)).to.have.length(1);
   });
 
   it('should get root styles', () => {
@@ -65,4 +104,32 @@ describe('Gallery', () => {
     shallow(<Gallery {...props} />);
     expect(spy).to.have.been.calledWith(props.style);
   });
+
+  it('should get itemContainer styles', () => {
+    const combinedProps = {
+      ...props,
+      items: [{
+        src: 'https://source.unsplash.com/featured/?man',
+        alt: 'https://source.unsplash.com/featured/?man'
+      }]
+    };
+    const spy = sinon.spy(getStyles, 'itemContainer');
+
+    shallow(<Gallery {...combinedProps} />);
+    expect(spy).to.have.been.calledWith(320, false, props.itemContainerStyle);
+  });
+
+  it('should get item styles', () => {
+    const combinedProps = {
+      ...props,
+      items: [{
+        src: 'https://source.unsplash.com/featured/?man',
+        alt: 'https://source.unsplash.com/featured/?man'
+      }]
+    };
+    const spy = sinon.spy(getStyles, 'item');
+
+    shallow(<Gallery {...combinedProps} />);
+    expect(spy).to.have.been.calledWith(320, props.itemStyle);
+  });
 });
diff --git a/test/icon-menu/index.test.js b/test/icon-menu/index.test.js
new file mode 100644
index 00000000..4e8d4e68
--- /dev/null
+++ b/test/icon-menu/index.test.js
@@ -0,0 +1,138 @@
+/* eslint-env mocha */
+/* eslint react/jsx-filename-extension: [0] */
+import React from 'react';
+import chai, { expect } from 'chai';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import EventListener from 'react-event-listener';
+import IconMenu from '../../src/icon-menu/component';
+import IconClose from '../../src/icons/icon-close';
+import Button from '../../src/button';
+import PopOver from '../../src/pop-over';
+import MenuItem from '../../src/menu-item';
+import getStyles from '../../src/icon-menu/get-styles';
+
+chai.use(sinonChai);
+
+describe('IconMenu', () => {
+  const props = {
+    icon: <IconClose />,
+    style: {},
+    headerStyle: {},
+    contentStyle: {},
+    dividerStyle: {},
+    buttonStyle: {}
+  };
+  const children = <MenuItem text="Test" onClick={() => {}} />;
+
+  beforeEach(() => {
+    global.navigator = { userAgent: 'all' };
+  });
+
+  afterEach(() => {
+    global.navigator = undefined;
+  });
+
+  it('should be an instanceOf IconMenu', () => {
+    const component = shallow(<IconMenu {...props}>{children}</IconMenu>);
+
+    expect(component.instance()).to.be.instanceOf(IconMenu);
+  });
+
+  it('should render root elements', () => {
+    const component = shallow(<IconMenu {...props}>{children}</IconMenu>);
+
+    expect(component.find('div')).to.have.length(2);
+    expect(component.find(Button)).to.have.length(1);
+    expect(component.find(IconClose)).to.have.length(1);
+    expect(component.find(PopOver)).to.have.length(1);
+    expect(component.find(MenuItem)).to.have.length(1);
+  });
+
+  it('should add secondaryMenuItems prop to PopOver', () => {
+    const component = shallow(<IconMenu {...props}>{children}</IconMenu>);
+
+    let secondaryMenuItems = component.find(PopOver).map(node => node.prop('secondaryMenuItems'));
+    expect(secondaryMenuItems).to.have.length(1);
+    expect(secondaryMenuItems).to.deep.equal([null]);
+
+    component.setProps({ secondaryMenuItems: [children] });
+    secondaryMenuItems = component.find(PopOver).map(node => node.prop('secondaryMenuItems'));
+    expect(secondaryMenuItems).to.have.length(1);
+    expect(secondaryMenuItems).to.not.deep.equal([null]);
+    expect(secondaryMenuItems).to.not.deep.equal([[children]]);
+  });
+
+  it('should add header prop to PopOver', () => {
+    const component = shallow(<IconMenu {...props}>{children}</IconMenu>);
+    const header = <span>Header</span>;
+
+    let headerProp = component.find(PopOver).map(node => node.prop('header'));
+    expect(headerProp).to.deep.equal([null]);
+
+    component.setProps({ header });
+    headerProp = component.find(PopOver).map(node => node.prop('header'));
+    expect(headerProp).to.deep.equal([header]);
+  });
+
+  it('should render EventListener', () => {
+    const component = shallow(<IconMenu {...props}>{children}</IconMenu>);
+
+    expect(component.find(EventListener)).to.have.length(0);
+
+    component.setState({ open: true, positioned: true });
+    expect(component.find(EventListener)).to.have.length(1);
+  });
+
+  it('should call openMenu', () => {
+    const component = shallow(<IconMenu {...props}>{children}</IconMenu>);
+
+    expect(component.state('open')).to.equal(false);
+    expect(component.find(EventListener)).to.have.length(0);
+    let popOverOpenProp = component.find(PopOver).map(node => node.prop('open'));
+    expect(popOverOpenProp).to.deep.equal([false]);
+
+    component.find(Button).simulate('click');
+    expect(component.state('open')).to.equal(true);
+    expect(component.find(EventListener)).to.have.length(1);
+    popOverOpenProp = component.find(PopOver).map(node => node.prop('open'));
+    expect(popOverOpenProp).to.deep.equal([true]);
+  });
+
+  it('should call closeMenu', () => {
+    const component = shallow(<IconMenu {...props}>{children}</IconMenu>);
+
+    component.setState({ open: true, positioned: true });
+    expect(component.state('open')).to.equal(true);
+    expect(component.find(EventListener)).to.have.length(1);
+    let popOverOpenProp = component.find(PopOver).map(node => node.prop('open'));
+    expect(popOverOpenProp).to.deep.equal([true]);
+
+    component.find(Button).simulate('click');
+    expect(component.state('open')).to.equal(false);
+    expect(component.find(EventListener)).to.have.length(0);
+    popOverOpenProp = component.find(PopOver).map(node => node.prop('open'));
+    expect(popOverOpenProp).to.deep.equal([false]);
+  });
+
+  it('should call onMenuClose', () => {
+    const spy = sinon.spy();
+    const combinedProps = {
+      ...props,
+      onMenuClose: spy
+    };
+    const component = shallow(<IconMenu {...combinedProps}>{children}</IconMenu>);
+
+    component.setState({ open: true, positioned: true });
+    component.find(Button).simulate('click');
+    expect(spy).to.have.callCount(1);
+  });
+
+  it('should get root styles', () => {
+    const spy = sinon.spy(getStyles, 'root');
+
+    shallow(<IconMenu {...props}>{children}</IconMenu>);
+    expect(spy).to.have.been.calledWith(props.style);
+  });
+});
diff --git a/test/input/get-styles.test.js b/test/input/get-styles.test.js
index b1fcb44f..cc5562f1 100644
--- a/test/input/get-styles.test.js
+++ b/test/input/get-styles.test.js
@@ -11,14 +11,14 @@ describe('Input.getStyles', () => {
       expect(style).to.deep.equal(styles.root);
     });
 
-    it('should change letter color', () => {
-      const style = getStyles.root(false, { color: 'green' });
+    it('should combine styles', () => {
+      const style = getStyles.root(false, { color: 'red' });
 
-      expect(style).to.have.property('color', 'green');
+      expect(style).to.have.property('color', 'red');
     });
 
     it('should add disabled styles', () => {
-      const style = getStyles.root(true, {});
+      const style = getStyles.root(true);
 
       expect(style).to.have.property('opacity', '0.5');
     });
@@ -38,6 +38,48 @@ describe('Input.getStyles', () => {
     });
   });
 
+  describe('input', () => {
+    it('should get styles', () => {
+      const style = getStyles.input();
+
+      expect(style).to.deep.equal(styles.input);
+    });
+
+    it('should get error styles', () => {
+      const style = getStyles.input(true);
+
+      expect(style).to.have.property('border': '1px solid #FD2A43');
+      expect(style).to.have.property('color': '#FD2A43');
+    });
+
+    it('should combine styles', () => {
+      const style = getStyles.input(false, { color: 'red' });
+
+      expect(style).to.have.property('color', 'red');
+    });
+  });
+
+  describe('textarea', () => {
+    it('should get styles', () => {
+      const style = getStyles.textarea();
+
+      expect(style).to.deep.equal({ ...styles.textarea, ...styles.input });
+    });
+
+    it('should combine styles', () => {
+      const style = getStyles.textarea(false, { color: 'red' });
+
+      expect(style).to.have.property('color', 'red');
+    });
+
+    it('should add errorMessage styles', () => {
+      const style = getStyles.textarea(true);
+
+      expect(style).to.have.property('border': '1px solid #FD2A43');
+      expect(style).to.have.property('color': '#FD2A43');
+    });
+  });
+
   describe('error', () => {
     it('should get styles', () => {
       const style = getStyles.error();
@@ -52,22 +94,30 @@ describe('Input.getStyles', () => {
     });
   });
 
-  describe('input', () => {
+  describe('inputRoot', () => {
     it('should get styles', () => {
-      const style = getStyles.input();
+      const style = getStyles.inputRoot();
 
-      expect(style).to.deep.equal(styles.input);
+      expect(style).to.deep.equal({ ...styles.inputRoot, ...{ height: 32 } });
     });
 
-    it('should get error styles', () => {
-      const style = getStyles.input(true);
+    it('should add height', () => {
+      const height = Math.floor(Math.random() * 10);
+      const style = getStyles.inputRoot(height);
 
-      expect(style).to.have.property('border': '1px solid #FD2A43');
-      expect(style).to.have.property('color': '#FD2A43');
+      expect(style).to.have.property('height', height);
+    });
+  });
+
+  describe('placeholder', () => {
+    it('should get styles', () => {
+      const style = getStyles.placeholder();
+
+      expect(style).to.deep.equal(styles.placeholder);
     });
 
     it('should combine styles', () => {
-      const style = getStyles.input(false, { color: 'red' });
+      const style = getStyles.placeholder({ color: 'red' });
 
       expect(style).to.have.property('color', 'red');
     });
diff --git a/test/input/index.test.js b/test/input/index.test.js
index 8727d22a..31324211 100644
--- a/test/input/index.test.js
+++ b/test/input/index.test.js
@@ -6,7 +6,7 @@ import chai, { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
-import Input from '../../src/input';
+import Input from '../../src/input/component';
 import getStyles from '../../src/input/get-styles';
 
 chai.use(sinonChai);
@@ -15,19 +15,12 @@ describe('Input', () => {
   const props = {
     onChange: () => {},
     value: 1,
-    type: 'text',
-    placeholder: '',
-    label: '',
     name: '',
-    style: { root: true },
-    inputStyle: { input: true },
-    labelStyle: { label: true },
-    maxLength: 500,
-    inputRef: null,
-    disabled: false,
-    error: '',
-    errorStyle: { error: true },
-    placeholderStyle: { placeholder: true }
+    style: {},
+    inputStyle: {},
+    labelStyle: {},
+    errorStyle: {},
+    placeholderStyle: {}
   };
 
   beforeEach(() => {
@@ -38,68 +31,84 @@ describe('Input', () => {
     global.navigator = undefined;
   });
 
-  it('should always render a section element', () => {
-    const wrapper = shallow(<Input {...props} />);
+  it('should be an instanceOf Input', () => {
+    const component = shallow(<Input {...props} />);
 
-    expect(wrapper.find('section')).to.have.length(1);
+    expect(component.instance()).to.be.instanceOf(Input);
   });
 
-  it('should always render a label element', () => {
-    const wrapper = shallow(<Input {...props} />);
+  it('should render root elements', () => {
+    const component = shallow(<Input {...props} />);
 
-    expect(wrapper.find('label')).to.have.length(1);
+    expect(component.find('section')).to.have.length(1);
+    expect(component.find('input')).to.have.length(1);
+    expect(component.find(Style)).to.have.length(1);
   });
 
-  it('should always render an input element', () => {
-    const wrapper = shallow(<Input {...props} />);
+  it('should render error elements', () => {
+    const component = shallow(<Input {...props} />);
 
-    expect(wrapper.find('input')).to.have.length(1);
-  });
+    expect(component.find('span')).to.have.length(0);
 
-  it('should always render a Style component', () => {
-    const wrapper = shallow(<Input {...props} />);
+    component.setProps({ error: 'Text' });
+    expect(component.find('span')).to.have.length(1);
+    expect(component.containsMatchingElement(<span>Text</span>)).to.equal(true);
 
-    expect(wrapper.find(Style)).to.have.length(1);
+    component.setProps({ error: <span>Node</span> });
+    expect(component.find('span')).to.have.length(2);
+    expect(component.find('span > span')).to.have.length(1);
+    expect(component.find('span').containsMatchingElement(<span>Node</span>)).to.equal(true);
   });
 
-  it('should not render a span element if the error prop is not passed', () => {
-    const wrapper = shallow(<Input {...props} />);
+  it('should render multiLine input', () => {
+    const component = shallow(<Input {...props} />);
+
+    expect(component.find('textarea')).to.have.length(0);
+    expect(component.find('input')).to.have.length(1);
 
-    expect(wrapper.find('span')).to.have.length(0);
+    component.setProps({ multiLine: true });
+    expect(component.find('textarea')).to.have.length(1);
+    expect(component.find('input')).to.have.length(0);
   });
 
-  it('should render a span element if the error prop is passed', () => {
-    props.error = 'error';
-    const wrapper = shallow(<Input {...props} />);
+  it('should render label element', () => {
+    const component = shallow(<Input {...props} />);
+
+    expect(component.find('label')).to.have.length(0);
+
+    component.setProps({ label: 'Text' });
+    expect(component.find('label')).to.have.length(1);
+    expect(component.containsMatchingElement(<label>Text</label>)).to.equal(true); // eslint-disable-line jsx-a11y/label-has-for, max-len
 
-    expect(wrapper.containsMatchingElement(<span>error</span>)).to.equal(true);
-    props.error = '';
+    component.setProps({ label: <span>Node</span> });
+    expect(component.find('label')).to.have.length(1);
+    expect(component.find('label').containsMatchingElement(<span>Node</span>)).to.equal(true);
   });
 
   it('should call input onChange function', () => {
     const spy = sinon.spy();
-    props.onChange = spy;
-    const wrapper = shallow(<Input {...props} />);
+    const component = shallow(<Input {...props} />);
 
-    wrapper.find('input').simulate('change');
+    component.setProps({ onChange: spy });
+    component.find('input').simulate('change');
     expect(spy).to.have.callCount(1);
-    props.onChange = () => {};
   });
 
   it('should get root styles', () => {
     const spy = sinon.spy(getStyles, 'root');
 
     shallow(<Input {...props} />);
-    expect(spy).to.have.been.calledWith(
-      props.disabled,
-      props.style
-    );
+    expect(spy).to.have.been.calledWith(false, props.style);
   });
 
   it('should get label styles', () => {
     const spy = sinon.spy(getStyles, 'label');
+    const combinedProps = {
+      ...props,
+      label: 'Text'
+    };
 
-    shallow(<Input {...props} />);
+    shallow(<Input {...combinedProps} />);
     expect(spy).to.have.been.calledWith(props.labelStyle);
   });
 
@@ -107,18 +116,46 @@ describe('Input', () => {
     const spy = sinon.spy(getStyles, 'input');
 
     shallow(<Input {...props} />);
-    expect(spy).to.have.been.calledWith(
-      props.error,
-      props.inputStyle
-    );
+    expect(spy).to.have.been.calledWith(null, props.inputStyle);
+  });
+
+  it('should get placeholder styles', () => {
+    const spy = sinon.spy(getStyles, 'placeholder');
+
+    shallow(<Input {...props} />);
+    expect(spy).to.have.been.calledWith(props.placeholderStyle);
   });
 
   it('should get error styles', () => {
     const spy = sinon.spy(getStyles, 'error');
-    props.error = 'error';
+    const combinedProps = {
+      ...props,
+      error: 'Text'
+    };
 
-    shallow(<Input {...props} />);
+    shallow(<Input {...combinedProps} />);
     expect(spy).to.have.been.calledWith(props.errorStyle);
-    props.error = null;
+  });
+
+  it('should get inputRoot styles', () => {
+    const spy = sinon.spy(getStyles, 'inputRoot');
+    const combinedProps = {
+      ...props,
+      multiLine: true
+    };
+
+    shallow(<Input {...combinedProps} />);
+    expect(spy).to.have.been.calledWith(32);
+  });
+
+  it('should get textarea styles', () => {
+    const spy = sinon.spy(getStyles, 'textarea');
+    const combinedProps = {
+      ...props,
+      multiLine: true
+    };
+
+    shallow(<Input {...combinedProps} />);
+    expect(spy).to.have.been.calledWith(null, props.inputStyle);
   });
 });
diff --git a/test/internal/get-pager.test.js b/test/internal/get-pager.test.js
index a16fb7d4..2d0bb089 100644
--- a/test/internal/get-pager.test.js
+++ b/test/internal/get-pager.test.js
@@ -46,7 +46,7 @@ describe('getPager', () => {
   it('should return the amount of pages', () => {
     const pager = getPager(list);
 
-    expect(pager.totalPages).to.equal(Math.ceil(list.length / pager.pageSize));
+    expect(pager.totalPages).to.equal(Math.ceil(list.length / 10));
   });
 
   it('should return the start page', () => {
@@ -95,13 +95,14 @@ describe('getPager', () => {
   it('should end at the end of the list', () => {
     const pager = getPager(largeList, 31);
 
-    expect(pager.startPage).to.equal(Math.ceil(largeList.length / pager.pageSize) - 9);
-    expect(pager.endPage).to.equal(Math.ceil(largeList.length / pager.pageSize));
+    expect(pager.startPage).to.equal(Math.ceil(largeList.length / 10) - 9);
+    expect(pager.endPage).to.equal(Math.ceil(largeList.length / 10));
   });
 
   it('should set pageSize', () => {
     const pager = getPager(list, 1, 5);
 
-    expect(pager.totalPages).to.equal(Math.ceil(list.length / pager.pageSize));
+    expect(pager.pageSize).to.equal(5);
+    expect(pager.totalPages).to.equal(Math.ceil(list.length / 5));
   });
 });
diff --git a/test/internal/get-pop-over-position.test.js b/test/internal/get-pop-over-position.test.js
index 50f5ec0c..a453d2ff 100644
--- a/test/internal/get-pop-over-position.test.js
+++ b/test/internal/get-pop-over-position.test.js
@@ -147,7 +147,6 @@ describe('getPopOverPosition', () => {
     expect(position.left).to.equal(button.left);
   });
 
-
   describe('getPopOverPosition middle', () => {
     before(() => {
       global.window = {
@@ -267,6 +266,19 @@ describe('getPopOverPosition', () => {
       expect(position.bottom).to.equal(165.5);
       expect(position.left).to.equal(25);
     });
+  });
+
+  describe('getPopOverPosition offset', () => {
+    before(() => {
+      global.window = {
+        innerWidth: 250,
+        innerHeight: 680
+      };
+    });
+
+    after(() => {
+      delete global.window;
+    });
 
     it('should postion popOver offset left from button', () => {
       const button = {
diff --git a/test/internal/mobile-detect.js b/test/internal/mobile-detect.js
new file mode 100644
index 00000000..b66a21a7
--- /dev/null
+++ b/test/internal/mobile-detect.js
@@ -0,0 +1,19 @@
+/* eslint-env mocha */
+import { expect } from 'chai';
+import MobileDetect from 'mobile-detect';
+
+describe('MobileDetect', () => {
+  beforeEach(() => {
+    global.window = {};
+  });
+
+  afterEach(() => {
+    delete global.window;
+  });
+
+  it('should return an instance of MobileDetect', () => {
+    const md = require('../../src/internal/mobile-detect'); // eslint-disable-line global-require
+
+    expect(md).to.be.an.instanceof(MobileDetect);
+  });
+});
diff --git a/test/internal/prop-types.test.js b/test/internal/prop-types.test.js
index baf495c2..24c691b1 100644
--- a/test/internal/prop-types.test.js
+++ b/test/internal/prop-types.test.js
@@ -8,9 +8,13 @@ import propTypes from '../../src/internal/prop-types';
 chai.use(sinonChai);
 
 describe('propTypes', () => {
+  afterEach(() => {
+    PropTypes.number.restore();
+  });
+
   describe('minMax', () => {
     it('should return error if prop isNaN', () => {
-      const number = sinon.stub(PropTypes, 'number', () => 'isNaN');
+      const number = sinon.stub(PropTypes, 'number').callsFake(() => 'isNaN');
 
       const props = {
         min: 'min'
@@ -20,12 +24,10 @@ describe('propTypes', () => {
       const error = propTypes.minMax(props, propName, 'Test');
       expect(number).to.have.callCount(1);
       expect(error).to.equal('isNaN');
-
-      PropTypes.number.restore();
     });
 
     it('should return error if min is greater than or equal to max', () => {
-      const number = sinon.stub(PropTypes, 'number', () => null);
+      const number = sinon.stub(PropTypes, 'number').callsFake(() => null);
 
       const props = {
         min: 2,
@@ -36,12 +38,10 @@ describe('propTypes', () => {
       const error = propTypes.minMax(props, propName, 'Test');
       expect(number).to.have.callCount(1);
       expect(error.message).to.equal('min should be less than max');
-
-      PropTypes.number.restore();
     });
 
     it('should return error if max is less than or equal to min', () => {
-      const number = sinon.stub(PropTypes, 'number', () => null);
+      const number = sinon.stub(PropTypes, 'number').callsFake(() => null);
 
       const props = {
         min: 2,
@@ -52,14 +52,12 @@ describe('propTypes', () => {
       const error = propTypes.minMax(props, propName, 'Test');
       expect(number).to.have.callCount(1);
       expect(error.message).to.equal('max should be greater than min');
-
-      PropTypes.number.restore();
     });
   });
 
   describe('valueInRange', () => {
     it('should return error if prop isNaN', () => {
-      const number = sinon.stub(PropTypes, 'number', () => 'isNaN');
+      const number = sinon.stub(PropTypes, 'number').callsFake(() => 'isNaN');
 
       const props = {
         value: 'value'
@@ -69,12 +67,10 @@ describe('propTypes', () => {
       const error = propTypes.valueInRange(props, propName, 'Test');
       expect(number).to.have.callCount(1);
       expect(error).to.equal('isNaN');
-
-      PropTypes.number.restore();
     });
 
     it('should return error if prop is not in range', () => {
-      const number = sinon.stub(PropTypes, 'number', () => null);
+      const number = sinon.stub(PropTypes, 'number').callsFake(() => null);
 
       const props = {
         value: 10,
@@ -86,8 +82,6 @@ describe('propTypes', () => {
       const error = propTypes.valueInRange(props, propName, 'Test');
       expect(number).to.have.callCount(1);
       expect(error.message).to.equal('value should be within the range specified by min and max');
-
-      PropTypes.number.restore();
     });
   });
 });
diff --git a/test/internal/store-emoji.test.js b/test/internal/store-emoji.test.js
new file mode 100644
index 00000000..6060235c
--- /dev/null
+++ b/test/internal/store-emoji.test.js
@@ -0,0 +1,76 @@
+/* eslint-env mocha */
+import chai, { expect } from 'chai';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import store from 'store';
+import _ from 'lodash';
+import Chance from 'chance';
+import storeEmoji from '../../src/internal/store-emoji';
+
+const chance = Chance();
+
+chai.use(sinonChai);
+
+describe('storeEmoji', () => {
+  afterEach(() => {
+    store.get.restore();
+    store.set.restore();
+  });
+
+  it('should create array with passed emoji', () => {
+    let storage;
+    const get = sinon.stub(store, 'get').callsFake(() => storage);
+    const set = sinon.stub(store, 'set').callsFake((key, item) => { storage = item; });
+    const emoji = { name: 'grinning face', shortname: ':grinning:' };
+
+    storeEmoji(emoji);
+
+    expect(get).to.have.been.calledWith('recent-emoji');
+    expect(set).to.have.been.calledOnce; // eslint-disable-line no-unused-expressions
+    expect(storage).to.deep.equal([emoji]);
+  });
+
+  it('should add emoji to array', () => {
+    let storage = [{ name: 'thinking face', shortname: ':thinking:' }];
+    const get = sinon.stub(store, 'get').callsFake(() => storage);
+    const set = sinon.stub(store, 'set').callsFake((key, item) => { storage = item; });
+    const emoji = { name: 'grinning face', shortname: ':grinning:' };
+
+    storeEmoji(emoji);
+
+    expect(get).to.have.been.calledWith('recent-emoji');
+    expect(set).to.have.been.calledOnce; // eslint-disable-line no-unused-expressions
+    expect(storage).to.deep.equal([emoji, { name: 'thinking face', shortname: ':thinking:' }]);
+  });
+
+  it('should place emoji first in array', () => {
+    let storage = [{ name: 'thinking face', shortname: ':thinking:' }, { name: 'grinning face', shortname: ':grinning:' }];
+    const get = sinon.stub(store, 'get').callsFake(() => storage);
+    const set = sinon.stub(store, 'set').callsFake((key, item) => { storage = item; });
+    const emoji = { name: 'grinning face', shortname: ':grinning:' };
+
+    storeEmoji(emoji);
+
+    expect(get).to.have.been.calledWith('recent-emoji');
+    expect(set).to.have.been.calledOnce; // eslint-disable-line no-unused-expressions
+    expect(storage).to.deep.equal([emoji, { name: 'thinking face', shortname: ':thinking:' }]);
+  });
+
+  it('should remove last emoji from array', () => {
+    let storage = _.times(
+      42,
+      () => ({ name: chance.string({ length: 20 }), shortname: chance.string({ length: 20 }) })
+    );
+    const get = sinon.stub(store, 'get').callsFake(() => storage);
+    const set = sinon.stub(store, 'set').callsFake((key, item) => { storage = item; });
+    const emoji = { name: 'grinning face', shortname: ':grinning:' };
+
+    const lastEmoji = _.last(storage);
+    storeEmoji(emoji);
+
+    expect(get).to.have.been.calledWith('recent-emoji');
+    expect(set).to.have.been.calledOnce; // eslint-disable-line no-unused-expressions
+    expect(storage).to.have.lengthOf(42);
+    expect(_.last(storage)).to.not.equal(lastEmoji);
+  });
+});
diff --git a/test/lightbox/index.test.js b/test/lightbox/index.test.js
index a0ab60bb..9ab76907 100644
--- a/test/lightbox/index.test.js
+++ b/test/lightbox/index.test.js
@@ -5,7 +5,9 @@ import chai, { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
-import Lightbox from '../../src/lightbox';
+import EventListener from 'react-event-listener';
+import Lightbox from '../../src/lightbox/component';
+import Portal from '../../src/portal';
 import Overlay from '../../src/overlay';
 import Button from '../../src/button';
 import IconClose from '../../src/icons/icon-close';
@@ -15,13 +17,10 @@ chai.use(sinonChai);
 
 describe('Lightbox', () => {
   const props = {
-    style: { root: true },
-    overlayStyle: { overlay: true },
     hideLightbox: () => {},
     image: 'image',
-    title: <span>title</span>,
-    iconColor: 'red',
-    open: true,
+    style: {},
+    overlayStyle: {},
   };
 
   beforeEach(() => {
@@ -32,72 +31,63 @@ describe('Lightbox', () => {
     global.navigator = undefined;
   });
 
-  it('should always render an Overlay component', () => {
-    const wrapper = shallow(<Lightbox {...props} />);
+  it('should be an instanceOf Lightbox', () => {
+    const component = shallow(<Lightbox {...props} />);
 
-    expect(wrapper.find(Overlay)).to.have.length(1);
+    expect(component.instance()).to.be.instanceOf(Lightbox);
   });
 
-  it('should always render two section elements', () => {
-    const wrapper = shallow(<Lightbox {...props} />);
-
-    expect(wrapper.find('section')).to.have.length(2);
-  });
-
-  it('should always render a header element', () => {
-    const wrapper = shallow(<Lightbox {...props} />);
-
-    expect(wrapper.find('header')).to.have.length(1);
-  });
-
-  it('should always render a Button component', () => {
-    const wrapper = shallow(<Lightbox {...props} />);
-
-    expect(wrapper.find(Button)).to.have.length(1);
-  });
-
-  it('should always render an IconClose icon', () => {
-    const wrapper = shallow(<Lightbox {...props} />);
-
-    expect(wrapper.find(IconClose)).to.have.length(1);
+  it('should render root elements', () => {
+    const component = shallow(<Lightbox {...props} />);
+
+    component.setProps({ open: true });
+    expect(component.find(Portal)).to.have.length(1);
+    expect(component.find(Overlay)).to.have.length(1);
+    expect(component.find('section')).to.have.length(2);
+    expect(component.find('header')).to.have.length(1);
+    expect(component.find(Button)).to.have.length(1);
+    expect(component.find(IconClose)).to.have.length(1);
+    expect(component.find('img')).to.have.length(1);
+    expect(component.find(EventListener)).to.have.length(1);
   });
 
-  it('should always render an img element', () => {
-    const wrapper = shallow(<Lightbox {...props} />);
-
-    expect(wrapper.find('img')).to.have.length(1);
-  });
+  it('should render title element', () => {
+    const component = shallow(<Lightbox {...props} />);
 
-  it('should pass the title prop to the header element', () => {
-    const wrapper = shallow(<Lightbox {...props} />);
+    component.setProps({ open: true, title: 'Text' });
+    expect(component.containsMatchingElement('Text')).to.equal(true);
 
-    expect(wrapper.find('header > span')).to.have.length(1);
+    component.setProps({ title: <span>Node</span> });
+    expect(component.find('span')).to.have.length(1);
+    expect(component.containsMatchingElement(<span>Node</span>)).to.equal(true);
   });
 
-  it('should call section onClick function', () => {
+  it('should call onClick of clickAway section', () => {
     const spy = sinon.spy();
-    props.hideLightbox = spy;
-    const wrapper = shallow(<Lightbox {...props} />);
+    const component = shallow(<Lightbox {...props} />);
 
-    wrapper.find('section').at(0).simulate('click');
+    component.setProps({ open: true, hideLightbox: spy });
+    component.find('section').at(0).simulate('click');
     expect(spy).to.have.callCount(1);
-    props.hideLightbox = () => {};
   });
 
-  it('should call Button onClick function', () => {
+  it('should call onClick of Button', () => {
     const spy = sinon.spy();
-    props.hideLightbox = spy;
-    const wrapper = shallow(<Lightbox {...props} />);
+    const component = shallow(<Lightbox {...props} />);
 
-    wrapper.find(Button).simulate('click');
+    component.setProps({ open: true, hideLightbox: spy });
+    component.find(Button).simulate('click');
     expect(spy).to.have.callCount(1);
-    props.hideLightbox = () => {};
   });
 
   it('should get root styles', () => {
     const spy = sinon.spy(getStyles, 'root');
+    const combinedProps = {
+      ...props,
+      open: true
+    };
 
-    shallow(<Lightbox {...props} />);
+    shallow(<Lightbox {...combinedProps} />);
     expect(spy).to.have.been.calledWith(props.style);
   });
 });
diff --git a/test/list-item/get-styles.test.js b/test/list-item/get-styles.test.js
index 6afc500a..b1bb11d4 100644
--- a/test/list-item/get-styles.test.js
+++ b/test/list-item/get-styles.test.js
@@ -6,13 +6,13 @@ import styles from '../../src/list-item/styles';
 describe('ListItem.getStyles', () => {
   describe('root', () => {
     it('should get styles', () => {
-      const style = getStyles.root(null, false, false, false, false, 0, {});
+      const style = getStyles.root();
 
       expect(style).to.deep.equal(styles.root);
     });
 
     it('should combine styles', () => {
-      const style = getStyles.root('red', false, false, false, false, 0, { color: 'red' });
+      const style = getStyles.root('blue', false, false, 0, { color: 'red' });
 
       expect(style).to.have.property('color', 'red');
     });
@@ -20,27 +20,35 @@ describe('ListItem.getStyles', () => {
     it('should change theme color', () => {
       const style = getStyles.root('red', true);
 
+      expect(style).to.have.property('backgroundColor', 'red');
       expect(style[':hover']).to.have.property('backgroundColor', 'hsl(0, 100%, 47.5%)');
+      expect(style[':active']).to.have.property('backgroundColor', 'hsl(0, 100%, 42.5%)');
     });
 
-    it('should add multi line styles', () => {
-      const style = getStyles.root(null, false, false, false, true, 0, {});
+    it('should add secondaryLine styles', () => {
+      const style = getStyles.root(null, false, true);
 
       expect(style).to.have.property('height', '52px');
     });
 
     it('should add indention padding', () => {
-      const style = getStyles.root(null, false, false, false, false, 1, {});
+      const style = getStyles.root(null, false, false, 1);
 
       expect(style).to.have.property('paddingLeft', '24px');
     });
   });
 
   describe('text', () => {
-    it('should get styles', () => {
+    it('should return empty object', () => {
       const style = getStyles.text();
 
-      expect(style).to.deep.equal(styles.textStyle);
+      expect(style).to.deep.equal({});
+    });
+
+    it('should get styles', () => {
+      const style = getStyles.text(styles.primaryText);
+
+      expect(style).to.deep.equal(styles.primaryText);
     });
 
     it('should combine styles', () => {
diff --git a/test/list-item/index.test.js b/test/list-item/index.test.js
new file mode 100644
index 00000000..cc8611db
--- /dev/null
+++ b/test/list-item/index.test.js
@@ -0,0 +1,191 @@
+/* eslint-env mocha */
+/* eslint react/jsx-filename-extension: [0] */
+import React from 'react';
+import chai, { expect } from 'chai';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import ListItem from '../../src/list-item/component';
+import AdminBadge from '../../src/admin-badge';
+import Button from '../../src/button';
+import IconMore from '../../src/icons/icon-more';
+import IconMute from '../../src/icons/icon-mute';
+import IconBlock from '../../src/icons/icon-block';
+import IconChevronDown from '../../src/icons/icon-chevron-down';
+import Avatar from '../../src/avatar';
+import Badge from '../../src/badge';
+import List from '../../src/list';
+import getStyles from '../../src/list-item/get-styles';
+import styles from '../../src/list-item/styles';
+
+chai.use(sinonChai);
+
+describe('ListItem', () => {
+  const props = {
+    primaryText: 'Primary',
+    style: {},
+    primaryTextStyle: {},
+    secondaryTextStyle: {},
+    color: '#1BA6C4'
+  };
+
+  it('should be an instanceOf ListItem', () => {
+    const component = shallow(<ListItem {...props} />);
+
+    expect(component.instance()).to.be.instanceOf(ListItem);
+  });
+
+  it('should render root elements', () => {
+    const component = shallow(<ListItem {...props} />);
+
+    expect(component.find('div')).to.have.length(2);
+    expect(component.find('li')).to.have.length(1);
+    expect(component.find('h1')).to.have.length(1);
+  });
+
+  it('should render secondaryText element', () => {
+    const component = shallow(<ListItem {...props} />);
+
+    expect(component.find('h2')).to.have.length(0);
+
+    component.setProps({ secondaryText: 'Text' });
+    expect(component.find('h2')).to.have.length(1);
+    expect(component.containsMatchingElement(<h2> Text</h2>)).to.equal(true);
+
+    component.setProps({ secondaryText: <span>Node</span> });
+    expect(component.find('h2')).to.have.length(1);
+    expect(component.find('h2 > span')).to.have.length(1);
+    expect(component.find('h2').containsMatchingElement(<span>Node</span>)).to.equal(true);
+  });
+
+  it('should render textBadge element', () => {
+    const component = shallow(<ListItem {...props} />);
+
+    expect(component.find('h2')).to.have.length(0);
+
+    component.setProps({ textBadge: 'Text' });
+    expect(component.find('h2')).to.have.length(1);
+    expect(component.containsMatchingElement(<h2>Text </h2>)).to.equal(true);
+
+    component.setProps({ secondaryText: <AdminBadge /> });
+    expect(component.find('h2')).to.have.length(1);
+    expect(component.find(AdminBadge)).to.have.length(1);
+    expect(component.find('h2').containsMatchingElement(AdminBadge)).to.equal(true);
+  });
+
+  it('should render rightButton element', () => {
+    const component = shallow(<ListItem {...props} />);
+
+    expect(component.find('div')).to.have.length(2);
+    expect(component.find(Button)).to.have.length(0);
+    expect(component.find(IconMore)).to.have.length(0);
+
+    component.setProps({ rightButton: <Button iconButton><IconMore /></Button> });
+    expect(component.find('div')).to.have.length(3);
+    expect(component.find(Button)).to.have.length(1);
+    expect(component.find(IconMore)).to.have.length(1);
+  });
+
+  it('should render avatar element', () => {
+    const component = shallow(<ListItem {...props} />);
+
+    expect(component.find('div')).to.have.length(2);
+    expect(component.find(Avatar)).to.have.length(0);
+
+    component.setProps({ avatar: 'image' });
+    expect(component.find('div')).to.have.length(3);
+    expect(component.find(Avatar)).to.have.length(1);
+  });
+
+  it('should render badge element', () => {
+    const component = shallow(<ListItem {...props} />);
+
+    expect(component.find('div')).to.have.length(2);
+    expect(component.find(Badge)).to.have.length(0);
+
+    component.setProps({ avatar: 'image', badge: <Badge value={9} maxValue={9} /> });
+    expect(component.find('div')).to.have.length(4);
+    expect(component.find(Badge)).to.have.length(1);
+  });
+
+  it('should render muted element', () => {
+    const component = shallow(<ListItem {...props} />);
+
+    expect(component.find('div')).to.have.length(2);
+    expect(component.find(IconMute)).to.have.length(0);
+
+    component.setProps({ avatar: 'image', muted: true });
+    expect(component.find('div')).to.have.length(4);
+    expect(component.find(IconMute)).to.have.length(1);
+  });
+
+  it('should render blocked element', () => {
+    const component = shallow(<ListItem {...props} />);
+
+    expect(component.find('div')).to.have.length(2);
+    expect(component.find(IconBlock)).to.have.length(0);
+
+    component.setProps({ avatar: 'image', blocked: true });
+    expect(component.find('div')).to.have.length(4);
+    expect(component.find(IconBlock)).to.have.length(1);
+  });
+
+  it('should render children', () => {
+    const component = shallow(<ListItem {...props}><p>Children</p></ListItem>);
+
+    expect(component.find(List)).to.have.length(1);
+    expect(component.find(List).containsMatchingElement(<p>Children</p>)).to.equal(true);
+    expect(component.find(Button)).to.have.length(1);
+    expect(component.find(IconChevronDown)).to.have.length(1);
+  });
+
+  it('should call onClick', () => {
+    const spy = sinon.spy();
+    const component = shallow(<ListItem {...props} />);
+
+    component.setProps({ onClick: spy });
+    component.find('li').simulate('click');
+    expect(spy).to.have.callCount(1);
+  });
+
+  it('should call onNestedListToggle', () => {
+    const spy = sinon.spy();
+    const component = shallow(<ListItem {...props}><p>Children</p></ListItem>);
+
+    component.setProps({ onNestedListToggle: spy });
+    component.find('li').simulate('click');
+    expect(spy).to.have.callCount(1);
+  });
+
+  it('should get root styles', () => {
+    const spy = sinon.spy(getStyles, 'root');
+
+    shallow(<ListItem {...props} />);
+    expect(spy).to.have.been.calledWith(props.color, false, null, 0, props.style);
+  });
+
+  it('should get textContainer styles', () => {
+    const spy = sinon.spy(getStyles, 'textContainer');
+
+    shallow(<ListItem {...props} />);
+    expect(spy).to.have.been.calledWith('', null);
+  });
+
+  it('should get text styles', () => {
+    const spy = sinon.spy(getStyles, 'text');
+    const component = shallow(<ListItem {...props} />);
+
+    expect(spy).to.have.been.calledWith(styles.primaryText, false, null, props.primaryTextStyle);
+
+    component.setProps({ secondaryText: 'Text' });
+    expect(spy).to.have.callCount(3);
+    expect(spy).to.have.been.calledWith(styles.secondaryText, false, null, props.secondaryTextStyle); // eslint-disable-line max-len
+  });
+
+  it('should get nestedListButton styles', () => {
+    const spy = sinon.spy(getStyles, 'nestedListButton');
+
+    shallow(<ListItem {...props}><p>Children</p></ListItem>);
+    expect(spy).to.have.been.calledWith(false);
+  });
+});
diff --git a/test/list/index.test.js b/test/list/index.test.js
index d9259a07..dc8676fe 100644
--- a/test/list/index.test.js
+++ b/test/list/index.test.js
@@ -5,18 +5,15 @@ import chai, { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
-import List from '../../src/list';
+import List from '../../src/list/component';
 import getStyles from '../../src/list/get-styles';
 
 chai.use(sinonChai);
 
 describe('List', () => {
   const props = {
-    header: '',
-    listRef: () => {},
-    style: { root: true },
-    headerStyle: { header: true },
-    open: true
+    style: {},
+    headerStyle: {}
   };
   const children = <p>children</p>;
 
@@ -28,53 +25,47 @@ describe('List', () => {
     global.navigator = undefined;
   });
 
-  it('should only render if the open prop equals true', () => {
-    props.open = false;
-    const wrapper = shallow(<List {...props}>{children}</List>);
+  it('should render root elements', () => {
+    const component = shallow(<List {...props}>{children}</List>);
 
-    expect(wrapper.find('ul')).to.have.length(0);
-    props.open = true;
+    component.setProps({ open: true });
+    expect(component.find('ul')).to.have.length(1);
+    expect(component.find('p')).to.have.length(1);
   });
 
-  it('should always render an ul element', () => {
-    const wrapper = shallow(<List {...props}>{children}</List>);
+  it('should render header element', () => {
+    const component = shallow(<List {...props}>{children}</List>);
 
-    expect(wrapper.find('ul')).to.have.length(1);
-  });
-
-  it('should not render an h1 element if the header prop is not passed', () => {
-    const wrapper = shallow(<List {...props}>{children}</List>);
-
-    expect(wrapper.find('h1')).to.have.length(0);
-  });
-
-  it('should render an h1 element if the header prop is passed', () => {
-    props.header = 'header';
-    const wrapper = shallow(<List {...props}>{children}</List>);
-
-    expect(wrapper.containsMatchingElement(<h1>header</h1>)).to.equal(true);
-    props.header = null;
-  });
-
-  it('should render children', () => {
-    const wrapper = shallow(<List {...props}>{children}</List>);
+    component.setProps({ open: true, header: 'Text' });
+    expect(component.find('h1')).to.have.length(1);
+    expect(component.containsMatchingElement(<h1>Text</h1>)).to.equal(true);
 
-    expect(wrapper.containsMatchingElement(<p>children</p>)).to.equal(true);
+    component.setProps({ header: <span>Node</span> });
+    expect(component.find('h1')).to.have.length(1);
+    expect(component.find('h1 > span')).to.have.length(1);
+    expect(component.find('h1').containsMatchingElement(<span>Node</span>)).to.equal(true);
   });
 
   it('should get root styles', () => {
     const spy = sinon.spy(getStyles, 'root');
+    const combinedProps = {
+      ...props,
+      open: true
+    };
 
-    shallow(<List {...props}>{children}</List>);
+    shallow(<List {...combinedProps}>{children}</List>);
     expect(spy).to.have.been.calledWith(props.style);
   });
 
   it('should get listHeader styles', () => {
-    props.header = 'text';
     const spy = sinon.spy(getStyles, 'listHeader');
+    const combinedProps = {
+      ...props,
+      open: true,
+      header: 'Text'
+    };
 
-    shallow(<List {...props}>{children}</List>);
+    shallow(<List {...combinedProps}>{children}</List>);
     expect(spy).to.have.been.calledWith(props.headerStyle);
-    props.header = {};
   });
 });